@lmvz-ds/components 0.26.0 → 0.27.0

package/collection/components/lmvz-tabs/lmvz-tabs.js

@@ -0,0 +1,399 @@
+import { Host, h } from "@stencil/core";
+import { DirectionalFocusController } from "../../utils/aria/list-keyboard-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+let tabsIdCounter = 0;
+export class LmvzTabs extends ReactiveControllerHost {
+    el;
+    instanceId = ++tabsIdCounter;
+    tabSlotEl;
+    panelSlotEl;
+    focusController = new DirectionalFocusController(this, {
+        orientation: 'horizontal',
+        manageTabIndex: true,
+        enableHomeAndEnd: true,
+    });
+    value;
+    orientation = 'horizontal';
+    lmvzChange;
+    resolvedValue;
+    constructor() {
+        super();
+        this.addController(this.focusController);
+    }
+    componentWillLoad() {
+        super.componentWillLoad();
+        this.syncOrientation();
+    }
+    componentDidLoad() {
+        this.tabSlotEl?.addEventListener('slotchange', this.handleTabSlotChange);
+        this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange);
+        this.el.addEventListener('lmvzTabReady', this.handleTabReady);
+        this.handleTabSlotChange();
+        super.componentDidLoad();
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('lmvzTabReady', this.handleTabReady);
+        super.disconnectedCallback();
+    }
+    handleValueChange(newValue) {
+        this.applySelection(newValue);
+    }
+    handleOrientationChange() {
+        this.syncOrientation();
+        this.syncFocusTargets();
+        this.syncTabOrientation();
+    }
+    async activateTab(value) {
+        const tab = this.findTabByValue(value);
+        if (!tab || this.isTabDisabled(tab))
+            return;
+        this.selectTab(value);
+    }
+    async getTabElements() {
+        return this.slottedTabs;
+    }
+    async setTabPanelIds(pairs) {
+        const tabs = this.slottedTabs;
+        const panels = this.slottedPanels;
+        pairs.forEach(([tabId, panelId], index) => {
+            const tab = tabs[index];
+            const panel = panels[index];
+            const btnId = `${tabId}-btn`;
+            if (tab) {
+                tab.id = tabId;
+                const btn = tab.shadowRoot?.querySelector('button');
+                if (btn) {
+                    btn.id = btnId;
+                    btn.setAttribute('aria-controls', panelId);
+                }
+            }
+            if (panel) {
+                panel.id = panelId;
+                panel.setAttribute('aria-labelledby', btnId);
+            }
+        });
+    }
+    get slottedTabs() {
+        return (this.tabSlotEl?.assignedElements({ flatten: false }) ?? []).filter((el) => el.tagName.toLowerCase() === 'lmvz-tab');
+    }
+    get slottedPanels() {
+        return (this.panelSlotEl?.assignedElements({ flatten: false }) ?? []);
+    }
+    handleTabSlotChange = () => {
+        this.syncFocusTargets();
+        this.syncTabOrientation();
+        this.wireAriaIds();
+        this.applySelection(this.value);
+        this.updateIconTabsAttr();
+    };
+    handlePanelSlotChange = () => {
+        this.wireAriaIds();
+        this.applySelection(this.resolvedValue ?? this.value);
+    };
+    handleTabReady = () => {
+        this.syncFocusTargets();
+        this.wireAriaIds();
+        this.applySelection(this.resolvedValue ?? this.value);
+        this.updateIconTabsAttr();
+    };
+    updateIconTabsAttr() {
+        this.el.toggleAttribute('has-icon-tabs', this.slottedTabs.some((t) => t.hasAttribute('has-media')));
+    }
+    syncFocusTargets() {
+        const buttons = this.slottedTabs.map((tab) => tab.shadowRoot?.querySelector('button')).filter((b) => !!b);
+        this.focusController.updateElements(buttons);
+    }
+    syncOrientation() {
+        this.removeController(this.focusController);
+        this.focusController.hostDisconnected?.();
+        this.focusController = new DirectionalFocusController(this, {
+            orientation: this.orientation,
+            manageTabIndex: true,
+            enableHomeAndEnd: true,
+        });
+        this.addController(this.focusController);
+        if (this.el.isConnected) {
+            this.focusController.hostConnected?.();
+        }
+    }
+    syncTabOrientation() {
+        const isVertical = this.orientation === 'vertical';
+        this.slottedTabs.forEach((tab) => {
+            tab.toggleAttribute('vertical', isVertical);
+        });
+    }
+    wireAriaIds() {
+        const tabs = this.slottedTabs;
+        const panels = this.slottedPanels;
+        const prefix = `lmvz-tabs-${this.instanceId}`;
+        tabs.forEach((tab, index) => {
+            const tabId = tab.id || `${prefix}-tab-${index}`;
+            tab.id = tabId;
+            const panel = panels[index];
+            if (!panel)
+                return;
+            const panelId = panel.id || `${prefix}-panel-${index}`;
+            panel.id = panelId;
+            const btn = tab.shadowRoot?.querySelector('button');
+            if (btn) {
+                btn.setAttribute('aria-controls', panelId);
+                btn.setAttribute('id', `${tabId}-btn`);
+            }
+            panel.setAttribute('role', panel.getAttribute('role') ?? 'tabpanel');
+            panel.setAttribute('aria-labelledby', `${tabId}-btn`);
+        });
+    }
+    applySelection(requested) {
+        const tabs = this.slottedTabs;
+        if (!tabs.length)
+            return;
+        let target = this.findTabByValue(requested);
+        if (!target || this.isTabDisabled(target)) {
+            target = this.findNearestEnabled(requested) ?? undefined;
+        }
+        if (!target)
+            return;
+        const effectiveValue = target.getAttribute('value') ?? '';
+        this.resolvedValue = effectiveValue;
+        if (this.value !== effectiveValue) {
+            this.value = effectiveValue;
+        }
+        tabs.forEach((tab) => {
+            const isSelected = tab.getAttribute('value') === effectiveValue;
+            tab.toggleAttribute('selected', isSelected);
+            const btn = tab.shadowRoot?.querySelector('button');
+            if (btn)
+                btn.setAttribute('aria-selected', String(isSelected));
+        });
+        this.slottedPanels.forEach((panel, index) => {
+            const tab = tabs[index];
+            const isActive = tab?.getAttribute('value') === effectiveValue;
+            panel.toggleAttribute('hidden', !isActive);
+        });
+        const selectedBtn = target.shadowRoot?.querySelector('button');
+        if (selectedBtn) {
+            this.focusController.setCurrentElement(selectedBtn);
+        }
+    }
+    isTabDisabled(tab) {
+        return tab.hasAttribute('disabled') || !!tab.disabled;
+    }
+    findTabByValue(value) {
+        return this.slottedTabs.find((tab) => tab.getAttribute('value') === value);
+    }
+    findNearestEnabled(fromValue) {
+        const tabs = this.slottedTabs;
+        const fromIndex = tabs.findIndex((t) => t.getAttribute('value') === fromValue);
+        for (let offset = 1; offset < tabs.length; offset++) {
+            const next = tabs[(fromIndex + offset) % tabs.length];
+            if (next && !this.isTabDisabled(next))
+                return next;
+            const prev = tabs[(fromIndex - offset + tabs.length) % tabs.length];
+            if (prev && !this.isTabDisabled(prev))
+                return prev;
+        }
+        return undefined;
+    }
+    selectTab(value) {
+        if (value === this.resolvedValue)
+            return;
+        this.applySelection(value);
+        this.lmvzChange.emit({ value });
+    }
+    handleTabClick = (event) => {
+        const target = event.target;
+        const tab = target.closest('lmvz-tab');
+        if (!tab)
+            return;
+        const value = tab.getAttribute('value');
+        if (!value || this.isTabDisabled(tab))
+            return;
+        this.selectTab(value);
+    };
+    handleKeydown = (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        const active = this.el.ownerDocument.activeElement;
+        if (!active)
+            return;
+        let tab = null;
+        for (const t of this.slottedTabs) {
+            if (t === active) {
+                tab = t;
+                break;
+            }
+        }
+        if (!tab)
+            return;
+        const value = tab.getAttribute('value');
+        if (!value || this.isTabDisabled(tab))
+            return;
+        event.preventDefault();
+        this.selectTab(value);
+    };
+    render() {
+        return (h(Host, { key: '3a503531069e0d83be9bde0e9bc2e1747498baf2', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: '25a37d52ba6c8c1b46c1e624da13b918e9bd33d1', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: '00b4ba4cf88081d8cd4ee21976398646e4f19679', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '872aba20a4d26facafc71821f7fc88cf96b05a33', part: "panels-container", class: "panels-container" }, h("slot", { key: '7681c24945e7d50e95f749bd5c056704db120b11', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+    }
+    static get is() { return "lmvz-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The `value` of the currently selected tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'horizontal'"
+                        }],
+                    "text": "Layout and keyboard-navigation orientation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "resolvedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzChange",
+                "name": "lmvzChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a tab is activated.\nDetail: `{ value: string }`."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "activateTab": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically activate a tab by value.\nDisabled tabs are ignored; emits `lmvzChange` on change.",
+                    "tags": []
+                }
+            },
+            "getTabElements": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLElement[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement[]>"
+                },
+                "docs": {
+                    "text": "Returns all slotted `lmvz-tab` elements.\nExposed for external orchestration.",
+                    "tags": []
+                }
+            },
+            "setTabPanelIds": {
+                "complexType": {
+                    "signature": "(pairs: Array<[string, string]>) => Promise<void>",
+                    "parameters": [{
+                            "name": "pairs",
+                            "type": "[string, string][]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Wires `aria-controls` on each tab and `aria-labelledby` on each panel\nusing the provided ordered array of `[tabId, panelId]` pairs.\nCallers only need this for explicit control; `lmvz-tabs` wires positional\npairs automatically on `slotchange`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "orientation",
+                "methodName": "handleOrientationChange"
+            }];
+    }
+}

package/collection/components/lmvz-toggle/lmvz-toggle.js

@@ -65,7 +65,7 @@ export class LmvzToggle extends ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (h(Host, { key: '202842250b2c22f64b608e4d5a517a045e50a54c' }, h("span", { key: '105869ad771c9146a6a31e767e51807bb7e0b565', class: "track" }, h("input", { key: '8113919f2c474b61a2745a000fd4995f81b58c1e', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: '9d7201d14abdb987b20f52f21a314434051c9f84', class: "thumb", "aria-hidden": "true" })), h("label", { key: '7291494dd6f440099e9cbd04b3cff03a338a0e93', htmlFor: this.toggleId }, this.label)));
+        return (h(Host, { key: '452ea30df1191b45c606d7512982a0f743b7bf7a' }, h("span", { key: 'c538806b64de8bce70d0bc55c6a9eb279f4eff4c', class: "track" }, h("input", { key: 'afe04f4305744b3110092f9bfcbe8b4ee6f21c37', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: 'e8089a6e8ee084b3f316c837cf3225017c33a15e', class: "thumb", "aria-hidden": "true" })), h("label", { key: '085055f461f4240df2eb2b4ea441a5e782240276', htmlFor: this.toggleId }, this.label)));
     }
     static get is() { return "lmvz-toggle"; }
     static get encapsulation() { return "scoped"; }

package/collection/integration/header-integration/header-integration.js

@@ -20,7 +20,7 @@ export class HeaderIntegration {
         this.activeNav = navId;
     }
     render() {
-        return (h(Host, { key: 'c7ca0e05f67f09a13ac814b6003855c08fb1b1f0' }, h("lmvz-header", { key: '6f495333a582e0bdba065ea223e631ab22ad6648', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'e4da0b537a42460290f8b0c833e93b311c93bd7e', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '232bcc2c0b5ea1131681e3bbad1e59c57e86f345', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '5ffad2212873c2bed0b2cf9478bf9fb60c64c2d9', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '12f600046c6f3f13c0724752b833bd9591e68ced', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '55c6ddec956960b57d4ddbdbde5b73c45bd3125b', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'cac4736814aae4dc3f8725f09c24ee5a4ba60be0', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: 'f62ef7953883cb4f989e43e1268f9fe9d3324a15', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '01ffb4c65e99644dff9fbeb0dc7af43bb0429d2b', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '1bf7ea0bb514eed4940ba5d0a739c6b56293c2c2', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '5ac636bc4a0939efdf3461b75908335c1e6910ed', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '4ca67b477a656236b353e5333aa183db140beb7d', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '94641076d563ab7d970abeada484d7800906fe30', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '5f5116dae74e1563eaf06fab2fdb1de7061a22fd', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '781e4b379ee2d4f5c6e940e167fd55310efbb65a', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
+        return (h(Host, { key: '472abfaab29d554ecfa263b1f6b85d2c1990ceb1' }, h("lmvz-header", { key: '633622c96723608bfac8a9bc7ae9e1a972b105bf', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '15f74edb9e88bb246775d540c05cbdc81a3a618f', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '6b82ecbd8e2ba53a68d5e05ca3f8ce8800b8dd5a', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '97922b8a6c0dfba9c5d5b410b1d55aa288e67e88', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: 'bacddd5a3fafecb3573a30dabff10a54f1996288', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: 'bbfba0969436a5c95338ff01163658df0b64d680', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '474927ef7491b1512f7849899859fddb6f368696', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '32ef36d6787e3368a4c4e36fdaf00f765192cc6d', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '58811b4b344a0168478ecda8fa7eee109ae51ea8', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '079715602610bd44465756e0b5a6daa0f67ea758', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '0c8b1d230579ab20e9dc9ef3b20c5f08a7a16d91', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '31408441bbfd25dd66b209526709280613e1fd48', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: 'e56d4b45f05d155561730d5298f7e6596eb8e64c', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '322f1858d41d8416ac8e4a073da348497d6f7557', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: 'd6b22f6b3e7357f9bf89b20463d146855feab625', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
     }
     static get is() { return "header-integration"; }
     static get encapsulation() { return "shadow"; }

package/collection/utils/aria/list-keyboard-controller.js

@@ -1,46 +1,169 @@
-import { canReceiveFocus, getDeepActiveElement } from "../component";
-export class ListKeyboardNavigationController {
+import { getDeepActiveElement } from "../component";
+const defaultConfig = {
+    orientation: 'both',
+    enableHomeAndEnd: false,
+    manageTabIndex: false,
+};
+export class DirectionalFocusController {
     host;
     elements = [];
-    constructor(host) {
+    currentElement;
+    config;
+    constructor(host, config = {}) {
         this.host = host;
+        this.config = {
+            ...defaultConfig,
+            ...config,
+        };
     }
-    hostDidRender() {
+    hostConnected() {
         this.host.el.addEventListener('keydown', this.handleKeydown);
+        this.syncManagedFocusTarget();
+    }
+    hostDisconnected() {
+        this.host.el.removeEventListener('keydown', this.handleKeydown);
     }
     updateElements(elements) {
-        this.elements = elements;
+        const previousElement = this.currentElement ?? this.getManagedActiveElement() ?? undefined;
+        this.elements = elements.filter((element) => 'focus' in element && element.nodeType === 1);
+        this.syncManagedFocusTarget(previousElement);
+    }
+    setCurrentElement(element) {
+        const previousElement = this.currentElement;
+        this.currentElement = element !== null && element !== undefined && 'focus' in element && element.nodeType === 1 ? element : undefined;
+        this.syncManagedFocusTarget(previousElement);
     }
     handleKeydown = (event) => {
-        const { key } = event;
-        if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(key))
+        const intent = this.getFocusIntent(event.key);
+        if (!intent)
             return;
-        const activeElement = getDeepActiveElement(document);
-        const nextElement = this.getNextFocusableElement(activeElement, ['ArrowDown', 'ArrowRight'].includes(key) ? 'down' : 'up');
-        if (nextElement) {
-            event.preventDefault();
-            nextElement.focus?.();
-        }
+        const activeElement = this.getManagedActiveElement();
+        const nextElement = this.getTargetElement(activeElement, intent);
+        if (!nextElement)
+            return;
+        event.preventDefault();
+        this.applyFocusTarget(nextElement, true);
     };
-    getNextFocusableElement(current, direction) {
-        if (!current)
+    getFocusIntent(key) {
+        if (this.config.enableHomeAndEnd && key === 'Home')
+            return 'first';
+        if (this.config.enableHomeAndEnd && key === 'End')
+            return 'last';
+        if (this.config.orientation === 'horizontal') {
+            if (key === 'ArrowRight')
+                return 'next';
+            if (key === 'ArrowLeft')
+                return 'previous';
             return undefined;
-        const { elements } = this;
-        const currentIndex = elements.indexOf(current);
-        if (currentIndex === -1)
+        }
+        if (this.config.orientation === 'vertical') {
+            if (key === 'ArrowDown')
+                return 'next';
+            if (key === 'ArrowUp')
+                return 'previous';
             return undefined;
-        let nextIndex = undefined;
-        if (direction === 'down') {
-            nextIndex = (currentIndex + 1) % elements.length;
         }
-        else if (direction === 'up') {
-            nextIndex = (currentIndex - 1 + elements.length) % elements.length;
+        if (key === 'ArrowDown' || key === 'ArrowRight')
+            return 'next';
+        if (key === 'ArrowUp' || key === 'ArrowLeft')
+            return 'previous';
+        return undefined;
+    }
+    getManagedActiveElement() {
+        const activeElement = getDeepActiveElement(this.host.el.ownerDocument ?? document);
+        if (activeElement instanceof HTMLElement && this.elements.includes(activeElement) && this.canMoveFocusTo(activeElement)) {
+            return activeElement;
+        }
+        if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
+            return this.currentElement;
+        }
+        return undefined;
+    }
+    getTargetElement(current, intent) {
+        if (!this.elements.length)
+            return undefined;
+        if (intent === 'first')
+            return this.findFocusableFromIndex(-1, 'next');
+        if (intent === 'last')
+            return this.findFocusableFromIndex(this.elements.length, 'previous');
+        const currentIndex = current ? this.elements.indexOf(current) : -1;
+        if (currentIndex === -1) {
+            return intent === 'next' ? this.findFocusableFromIndex(-1, 'next') : this.findFocusableFromIndex(this.elements.length, 'previous');
         }
-        if (nextIndex == undefined)
+        return this.findFocusableFromIndex(currentIndex, intent);
+    }
+    findFocusableFromIndex(startIndex, intent) {
+        if (!this.elements.length)
             return undefined;
-        const candidate = elements[nextIndex];
-        if (!canReceiveFocus(candidate))
-            return this.getNextFocusableElement(candidate, direction);
-        return candidate;
+        const step = intent === 'next' ? 1 : -1;
+        for (let offset = 1; offset <= this.elements.length; offset++) {
+            const index = (startIndex + step * offset + this.elements.length) % this.elements.length;
+            const candidate = this.elements[index];
+            if (this.canMoveFocusTo(candidate))
+                return candidate;
+        }
+        return undefined;
+    }
+    syncManagedFocusTarget(previousElement) {
+        const nextElement = this.selectManagedElement(previousElement);
+        const didChange = nextElement !== this.currentElement;
+        this.currentElement = nextElement;
+        if (this.config.manageTabIndex) {
+            this.updateTabIndexes(nextElement);
+        }
+        if (didChange && nextElement) {
+            this.config.onFocusTargetChange?.(nextElement);
+        }
+    }
+    selectManagedElement(previousElement) {
+        const activeElement = this.getManagedActiveElement();
+        if (activeElement)
+            return activeElement;
+        if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
+            return this.currentElement;
+        }
+        if (previousElement && this.elements.includes(previousElement)) {
+            return this.findFocusableFromIndex(this.elements.indexOf(previousElement), 'next') ?? this.findFocusableFromIndex(-1, 'next');
+        }
+        const currentRovingTarget = this.elements.find((element) => element.tabIndex === 0 && this.canMoveFocusTo(element));
+        if (currentRovingTarget)
+            return currentRovingTarget;
+        return this.findFocusableFromIndex(-1, 'next');
+    }
+    updateTabIndexes(activeElement) {
+        this.elements.forEach((element) => {
+            element.tabIndex = activeElement && element === activeElement ? 0 : -1;
+        });
+    }
+    applyFocusTarget(element, shouldFocus) {
+        const didChange = element !== this.currentElement;
+        this.currentElement = element;
+        if (this.config.manageTabIndex) {
+            this.updateTabIndexes(element);
+        }
+        if (shouldFocus) {
+            element.focus();
+        }
+        if (didChange) {
+            this.config.onFocusTargetChange?.(element);
+        }
+    }
+    canMoveFocusTo(element) {
+        if (!element)
+            return false;
+        if (element.hasAttribute('disabled'))
+            return false;
+        if ('disabled' in element && Boolean(element.disabled))
+            return false;
+        if (element.getAttribute('aria-disabled') === 'true')
+            return false;
+        if (this.config.isFocusableElement)
+            return this.config.isFocusableElement(element);
+        const isTabOrderable = this.config.manageTabIndex || element.tabIndex >= 0;
+        return (isTabOrderable &&
+            element.getAttribute('aria-hidden') !== 'true' &&
+            (element.checkVisibility?.() ?? true) &&
+            element.offsetParent !== null);
     }
 }
+export { DirectionalFocusController as ListKeyboardNavigationController };

package/components/index.d.ts

@@ -27,6 +27,10 @@ export { LmvzSelect as LmvzSelect } from '../../types/components/lmvz-select/lmv
 export { defineCustomElement as defineCustomElementLmvzSelect } from './lmvz-select';
 export { LmvzSnackbar as LmvzSnackbar } from '../../types/components/lmvz-snackbar/lmvz-snackbar';
 export { defineCustomElement as defineCustomElementLmvzSnackbar } from './lmvz-snackbar';
+export { LmvzTab as LmvzTab } from '../../types/components/lmvz-tab/lmvz-tab';
+export { defineCustomElement as defineCustomElementLmvzTab } from './lmvz-tab';
+export { LmvzTabs as LmvzTabs } from '../../types/components/lmvz-tabs/lmvz-tabs';
+export { defineCustomElement as defineCustomElementLmvzTabs } from './lmvz-tabs';
 export { LmvzToggle as LmvzToggle } from '../../types/components/lmvz-toggle/lmvz-toggle';
 export { defineCustomElement as defineCustomElementLmvzToggle } from './lmvz-toggle';
 

package/components/index.d.ts.bak

@@ -27,6 +27,10 @@ export { LmvzSelect as LmvzSelect } from '../../types/components/lmvz-select/lmv
 export { defineCustomElement as defineCustomElementLmvzSelect } from './lmvz-select';
 export { LmvzSnackbar as LmvzSnackbar } from '../../types/components/lmvz-snackbar/lmvz-snackbar';
 export { defineCustomElement as defineCustomElementLmvzSnackbar } from './lmvz-snackbar';
+export { LmvzTab as LmvzTab } from '../../types/components/lmvz-tab/lmvz-tab';
+export { defineCustomElement as defineCustomElementLmvzTab } from './lmvz-tab';
+export { LmvzTabs as LmvzTabs } from '../../types/components/lmvz-tabs/lmvz-tabs';
+export { defineCustomElement as defineCustomElementLmvzTabs } from './lmvz-tabs';
 export { LmvzToggle as LmvzToggle } from '../../types/components/lmvz-toggle/lmvz-toggle';
 export { defineCustomElement as defineCustomElementLmvzToggle } from './lmvz-toggle';