@sandlada/mdc/build/components/list/internal/base-list.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{queryAssignedElements as e}from"../../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";import"../../../node_modules/lit/decorators.js";import{html as t,nothing as n}from"../../../node_modules/lit-html/lit-html.js";import{LitElement as r}from"../../../node_modules/lit-element/lit-element.js";import"../../../node_modules/lit/index.js";import{composeMixin as i}from"../../../utils/compose-mixin/compose-mixin.js";import a from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinDelegatesAria as o}from"../../../utils/aria/delegate.js";import{LIST_ITEM_REQUEST_ACTIVATION_EVENT as s,LIST_ITEM_SELECTOR as c}from"../list.interface.js";import{ListStyles as l}from"./list.style.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* Internal base class for `mdc-list` — the container that owns roving tabindex
* and keyboard navigation across its `mdc-list-item` children.
*
* Items are self-managing views: each item renders its own native root and
* reports activation through the composed `request-activation` event. The list
* keeps exactly one interactive item in the tab order (roving tabindex),
* navigates with Arrow keys / Home / End, and exposes
* `activateNextItem()` / `activatePreviousItem()` for external callers.
*/
var u=class extends i(o)(r){static{this.styles=l}get items(){return this.cachedItems}constructor(){super(),this.cachedItems=[],this.handleSlotChange=()=>{this.cachedItems=this.assignedItems,this.updateTabIndices()},this.handleFocusIn=()=>{this.updateTabIndices()},this.handleRequestActivation=e=>{e.detail.item.focus(),this.updateTabIndices()},this.handleKeydown=e=>{let t=this.cachedItems;if(t.length<2||!t.includes(e.target))return;let n=e.key===`ArrowUp`,r=e.key===`ArrowDown`,i=e.key===`ArrowLeft`,a=e.key===`ArrowRight`,o=e.key===`Home`,s=e.key===`End`;if(!n&&!r&&!i&&!a&&!o&&!s)return;e.preventDefault();let c=getComputedStyle(this).direction===`rtl`,l;if(o||s)l=this.findNextFocusableItem(o?0:t.length-1,o?1:-1);else{let e=1;e=n?-1:r?1:i?c?1:-1:c?-1:1,l=this.activateRelativeItem(e)}l&&(l.focus(),this.updateTabIndices())},this.addEventListener(`keydown`,this.handleKeydown),this.addEventListener(s,this.handleRequestActivation)}render(){let{ariaLabel:e}=this;return t`<div class="container" role="list" aria-label="${e||n}" @focusin="${this.handleFocusIn}"><slot @slotchange="${this.handleSlotChange}"></slot></div>`}activateNextItem(){let e=this.activateRelativeItem(1);e&&(e.focus(),this.updateTabIndices())}activatePreviousItem(){let e=this.activateRelativeItem(-1);e&&(e.focus(),this.updateTabIndices())}activateRelativeItem(e){let t=this.cachedItems;if(t.length===0)return;let n=t.findIndex(e=>e.matches(`:focus-within`)),r=n===-1?e>0?0:t.length-1:n+e;return this.findNextFocusableItem(r,e>0?1:-1)}findNextFocusableItem(e,t){let n=this.cachedItems;for(let r=0;r<n.length;r++){let i=e+r*t;i=(i%n.length+n.length)%n.length;let a=n[i];if(a.isInteractive&&!a.isDisabled)return a}}updateTabIndices(){let e=this.cachedItems;if(e.length===0)return;let t=e.find(e=>e.matches(`:focus-within`)),n=t!==void 0&&t.isInteractive&&!t.isDisabled,r=e.find(e=>e.isInteractive&&!e.isDisabled),i=n?t:r;for(let t of e)t.listTabIndex=t===i?0:-1}};a([e({selector:c,flatten:!0})],u.prototype,`assignedItems`,void 0);export{u as BaseList};
//# sourceMappingURL=base-list.js.map