@sekiui/elements 0.0.60 → 0.0.63

package/dist/components/seki-navigation-menu-content.js

@@ -0,0 +1,245 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-C_O046uN.js';
+
+const sekiNavigationMenuContentCss = ":host{--content-width:auto;--content-columns:2;--content-min-width:200px;--content-max-width:600px;display:none}:host(.navigation-menu-content--open:not(.navigation-menu-content--mobile)){display:block}:host(.navigation-menu-content--mobile){display:none}:host-context(seki-navigation-menu-item.navigation-menu-item--mobile-expanded) :host(.navigation-menu-content--mobile){display:block}.navigation-menu-content__inner{min-width:var(--content-min-width);max-width:var(--content-max-width);width:var(--content-width);padding:var(--seki-spacing-2, 0.5rem)}:host(.navigation-menu-content--layout-list) .navigation-menu-content__inner{display:flex;flex-direction:column;gap:var(--seki-spacing-1, 0.25rem)}:host(.navigation-menu-content--layout-grid) .navigation-menu-content__inner{display:grid;grid-template-columns:repeat(var(--content-columns), 1fr);gap:var(--seki-spacing-3, 0.75rem)}:host(.navigation-menu-content--mobile) .navigation-menu-content__inner{min-width:unset;max-width:unset;width:100%;padding:var(--seki-spacing-2, 0.5rem) 0;padding-left:var(--seki-spacing-4, 1rem);border-left:2px solid var(--seki-border);margin-left:var(--seki-spacing-4, 1rem)}:host(.navigation-menu-content--mobile.navigation-menu-content--layout-grid) .navigation-menu-content__inner{grid-template-columns:1fr}";
+
+const SekiNavigationMenuContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiNavigationMenuContent extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        // =========================================================================
+        // Props
+        // =========================================================================
+        /** Layout type */
+        this.layout = 'list';
+        /** Number of columns for grid layout */
+        this.columns = 2;
+        /** Custom width */
+        this.width = '';
+        /** Content alignment relative to trigger */
+        this.align = 'center';
+        // =========================================================================
+        // State
+        // =========================================================================
+        /** Whether content is open/visible */
+        this.isOpen = false;
+        /** Whether in mobile mode */
+        this.isMobile = false;
+        this.handleMouseEnter = () => {
+            var _a;
+            if (this.isMobile)
+                return;
+            // Cancel any pending close when entering content
+            (_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.cancelClose();
+        };
+        this.handleMouseLeave = () => {
+            var _a;
+            if (this.isMobile)
+                return;
+            // Schedule close when leaving content
+            (_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.scheduleClose(150);
+        };
+        this.handleKeyDown = (event) => {
+            var _a;
+            switch (event.key) {
+                case 'Escape':
+                    event.preventDefault();
+                    (_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.close();
+                    // Return focus to trigger
+                    this.focusParentTrigger();
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.focusPreviousLink();
+                    break;
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.focusNextLink();
+                    break;
+            }
+        };
+    }
+    // =========================================================================
+    // Lifecycle
+    // =========================================================================
+    componentWillLoad() {
+        this.findParentElements();
+    }
+    componentDidLoad() {
+        this.setupContentInteractions();
+    }
+    disconnectedCallback() {
+        this.cleanupContentInteractions();
+    }
+    // =========================================================================
+    // Watchers
+    // =========================================================================
+    onOpenChange(newValue) {
+        if (newValue) {
+            // Focus first link when opening
+            this.focusFirstLink();
+        }
+    }
+    // =========================================================================
+    // Private Methods
+    // =========================================================================
+    findParentElements() {
+        // Find parent item
+        let parent = this.el.parentElement;
+        while (parent) {
+            if (parent.tagName === 'SEKI-NAVIGATION-MENU-ITEM') {
+                this.parentItem = parent;
+                break;
+            }
+            parent = parent.parentElement;
+        }
+        // Find parent menu
+        parent = this.el.parentElement;
+        while (parent) {
+            if (parent.tagName === 'SEKI-NAVIGATION-MENU') {
+                this.parentMenu = parent;
+                break;
+            }
+            parent = parent.parentElement;
+        }
+    }
+    setupContentInteractions() {
+        this.el.addEventListener('mouseenter', this.handleMouseEnter);
+        this.el.addEventListener('mouseleave', this.handleMouseLeave);
+        this.el.addEventListener('keydown', this.handleKeyDown);
+    }
+    cleanupContentInteractions() {
+        this.el.removeEventListener('mouseenter', this.handleMouseEnter);
+        this.el.removeEventListener('mouseleave', this.handleMouseLeave);
+        this.el.removeEventListener('keydown', this.handleKeyDown);
+    }
+    getLinks() {
+        var _a;
+        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (!slot)
+            return [];
+        const assigned = slot.assignedElements({ flatten: true });
+        const links = [];
+        const findLinks = (elements) => {
+            elements.forEach(el => {
+                if (el.tagName === 'SEKI-NAVIGATION-MENU-LINK') {
+                    links.push(el);
+                }
+                // Recurse into child elements
+                findLinks(Array.from(el.children));
+            });
+        };
+        findLinks(assigned);
+        return links;
+    }
+    focusFirstLink() {
+        requestAnimationFrame(() => {
+            var _a;
+            const links = this.getLinks();
+            if (links.length > 0) {
+                const anchor = (_a = links[0].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+                anchor === null || anchor === void 0 ? void 0 : anchor.focus();
+            }
+        });
+    }
+    focusPreviousLink() {
+        var _a, _b;
+        const links = this.getLinks();
+        const currentIndex = this.getCurrentFocusedIndex(links);
+        const prevIndex = currentIndex > 0 ? currentIndex - 1 : links.length - 1;
+        const anchor = (_b = (_a = links[prevIndex]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('a');
+        anchor === null || anchor === void 0 ? void 0 : anchor.focus();
+    }
+    focusNextLink() {
+        var _a, _b;
+        const links = this.getLinks();
+        const currentIndex = this.getCurrentFocusedIndex(links);
+        const nextIndex = currentIndex < links.length - 1 ? currentIndex + 1 : 0;
+        const anchor = (_b = (_a = links[nextIndex]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('a');
+        anchor === null || anchor === void 0 ? void 0 : anchor.focus();
+    }
+    getCurrentFocusedIndex(links) {
+        const activeElement = document.activeElement;
+        return links.findIndex(link => {
+            var _a;
+            const anchor = (_a = link.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+            return anchor === activeElement || link.contains(activeElement);
+        });
+    }
+    focusParentTrigger() {
+        var _a, _b;
+        const trigger = (_a = this.parentItem) === null || _a === void 0 ? void 0 : _a.el.querySelector('seki-navigation-menu-trigger');
+        if (trigger) {
+            const button = (_b = trigger.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
+            button === null || button === void 0 ? void 0 : button.focus();
+        }
+    }
+    getItemId() {
+        if (this.parentItem && typeof this.parentItem.getItemId === 'function') {
+            return this.parentItem.getItemId();
+        }
+        // Fallback: try to get from parent element's data attribute
+        const parentEl = this.el.closest('seki-navigation-menu-item');
+        return (parentEl === null || parentEl === void 0 ? void 0 : parentEl.getAttribute('data-item-id')) || '';
+    }
+    /** Called by parent item to update open state */
+    setOpen(open) {
+        this.isOpen = open;
+    }
+    /** Called by parent to set mobile mode */
+    setMobile(mobile) {
+        this.isMobile = mobile;
+    }
+    render() {
+        const itemId = this.getItemId();
+        const customStyles = {};
+        if (this.width) {
+            customStyles['--content-width'] = this.width;
+        }
+        if (this.layout === 'grid') {
+            customStyles['--content-columns'] = String(this.columns);
+        }
+        return (h(Host, { key: 'd1c5d60c3953ef10f79c7f53f7ba3f4ce5e9692d', class: {
+                'navigation-menu-content': true,
+                'navigation-menu-content--open': this.isOpen,
+                'navigation-menu-content--mobile': this.isMobile,
+                [`navigation-menu-content--layout-${this.layout}`]: true,
+                [`navigation-menu-content--align-${this.align}`]: true,
+            }, style: customStyles }, h("div", { key: '9671ab7793e63d6541d3cd5b6d286d7bf4890715', id: `content-${itemId}`, class: "navigation-menu-content__inner", role: "menu", "aria-labelledby": `trigger-${itemId}` }, h("slot", { key: '494ffc544fcbafa68e26fe3724c5e9428eb0f230' }))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "isOpen": ["onOpenChange"]
+    }; }
+    static get style() { return sekiNavigationMenuContentCss; }
+}, [257, "seki-navigation-menu-content", {
+        "layout": [1],
+        "columns": [2],
+        "width": [1],
+        "align": [1],
+        "isOpen": [32],
+        "isMobile": [32]
+    }, undefined, {
+        "isOpen": ["onOpenChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-navigation-menu-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-navigation-menu-content":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiNavigationMenuContent$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiNavigationMenuContent = SekiNavigationMenuContent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiNavigationMenuContent, defineCustomElement };

package/dist/components/seki-navigation-menu-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiNavigationMenuItem extends Components.SekiNavigationMenuItem, HTMLElement {}
+export const SekiNavigationMenuItem: {
+    prototype: SekiNavigationMenuItem;
+    new (): SekiNavigationMenuItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/seki-navigation-menu-item.js

@@ -0,0 +1,135 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-C_O046uN.js';
+
+const sekiNavigationMenuItemCss = ":host{display:block;position:relative}.navigation-menu-item__container{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}:host(:not(.navigation-menu-item--mobile)) .navigation-menu-item__container{flex-direction:row;align-items:center}:host(.navigation-menu-item--mobile){border-bottom:1px solid var(--seki-border)}:host(.navigation-menu-item--mobile):last-child{border-bottom:none}";
+
+let itemIdCounter = 0;
+const SekiNavigationMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class SekiNavigationMenuItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        // =========================================================================
+        // Props
+        // =========================================================================
+        /** Unique identifier for this menu item */
+        this.itemId = '';
+        // =========================================================================
+        // State
+        // =========================================================================
+        /** Whether this item's content is open */
+        this.isOpen = false;
+        /** Whether in mobile mode */
+        this.isMobile = false;
+        /** Whether mobile accordion is expanded */
+        this.mobileExpanded = false;
+    }
+    // =========================================================================
+    // Lifecycle
+    // =========================================================================
+    componentWillLoad() {
+        if (!this.itemId) {
+            this.itemId = `nav-item-${++itemIdCounter}`;
+        }
+        this.findParentMenu();
+    }
+    componentDidLoad() {
+        this.registerWithParent();
+    }
+    disconnectedCallback() {
+        this.unregisterFromParent();
+    }
+    // =========================================================================
+    // Watchers
+    // =========================================================================
+    onOpenChange(newValue) {
+        // Notify child content of open state change
+        const content = this.el.querySelector('seki-navigation-menu-content');
+        if (content) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            content.isOpen = newValue;
+        }
+    }
+    // =========================================================================
+    // Private Methods
+    // =========================================================================
+    findParentMenu() {
+        let parent = this.el.parentElement;
+        while (parent) {
+            if (parent.tagName === 'SEKI-NAVIGATION-MENU') {
+                this.parentMenu = parent;
+                break;
+            }
+            parent = parent.parentElement;
+        }
+    }
+    registerWithParent() {
+        // Registration handled by parent observing children
+    }
+    unregisterFromParent() {
+        // Cleanup handled by parent
+    }
+    /** Called by parent menu to update open state */
+    setOpen(open) {
+        this.isOpen = open;
+    }
+    /** Called by parent menu to set mobile mode */
+    setMobile(mobile) {
+        this.isMobile = mobile;
+        if (!mobile) {
+            this.mobileExpanded = false;
+        }
+    }
+    /** Get the item ID */
+    getItemId() {
+        return this.itemId;
+    }
+    /** Toggle mobile accordion */
+    toggleMobileExpanded() {
+        this.mobileExpanded = !this.mobileExpanded;
+    }
+    /** Get parent menu reference */
+    getParentMenu() {
+        return this.parentMenu;
+    }
+    render() {
+        return (h(Host, { key: '5b774a51546713f83470accb6120427ceaf8ee88', class: {
+                'navigation-menu-item': true,
+                'navigation-menu-item--open': this.isOpen,
+                'navigation-menu-item--mobile': this.isMobile,
+                'navigation-menu-item--mobile-expanded': this.mobileExpanded,
+            }, "data-item-id": this.itemId }, h("li", { key: '8f1885f2624b9b6fd5be2d31c38bd2a9629a73d3', class: "navigation-menu-item__container", role: "none" }, h("slot", { key: '5862bc381a49f3c772582899b546de4230db28a6' }))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "isOpen": ["onOpenChange"]
+    }; }
+    static get style() { return sekiNavigationMenuItemCss; }
+}, [257, "seki-navigation-menu-item", {
+        "itemId": [1025, "item-id"],
+        "isOpen": [32],
+        "isMobile": [32],
+        "mobileExpanded": [32]
+    }, undefined, {
+        "isOpen": ["onOpenChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-navigation-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-navigation-menu-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiNavigationMenuItem$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiNavigationMenuItem = SekiNavigationMenuItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiNavigationMenuItem, defineCustomElement };

package/dist/components/seki-navigation-menu-link.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiNavigationMenuLink extends Components.SekiNavigationMenuLink, HTMLElement {}
+export const SekiNavigationMenuLink: {
+    prototype: SekiNavigationMenuLink;
+    new (): SekiNavigationMenuLink;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/seki-navigation-menu-link.js

@@ -0,0 +1,113 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-C_O046uN.js';
+
+const sekiNavigationMenuLinkCss = ":host{display:block}.navigation-menu-link__anchor{display:block;padding:var(--seki-spacing-2, 0.5rem) var(--seki-spacing-3, 0.75rem);font-family:var(--seki-font-sans);font-size:var(--seki-font-size-sm, 0.875rem);font-weight:var(--seki-font-weight-normal, 400);line-height:var(--seki-line-height-normal, 1.5);color:var(--seki-foreground);text-decoration:none;border-radius:var(--seki-radius-sm, 0.25rem);transition:background-color var(--seki-nav-animation-duration, 150ms) ease,\n    color var(--seki-nav-animation-duration, 150ms) ease}.navigation-menu-link__anchor:hover{background-color:var(--seki-muted)}.navigation-menu-link__anchor:focus-visible{outline:2px solid var(--seki-ring);outline-offset:2px}:host(.navigation-menu-link--active) .navigation-menu-link__anchor{font-weight:var(--seki-font-weight-medium, 500);color:var(--seki-primary);background-color:var(--seki-primary-foreground)}:host(.navigation-menu-link--disabled) .navigation-menu-link__anchor{opacity:0.5;cursor:not-allowed;pointer-events:none}:host(.navigation-menu-link--with-description) .navigation-menu-link__anchor{padding:var(--seki-spacing-3, 0.75rem)}.navigation-menu-link__content{display:flex;flex-direction:column;gap:var(--seki-spacing-1, 0.25rem)}.navigation-menu-link__title{font-weight:var(--seki-font-weight-medium, 500);color:var(--seki-foreground)}.navigation-menu-link__description{font-size:var(--seki-font-size-xs, 0.75rem);color:var(--seki-muted-foreground);line-height:var(--seki-line-height-relaxed, 1.625)}:host(.navigation-menu-link--in-content) .navigation-menu-link__anchor{min-height:36px;display:flex;align-items:center}:host-context(.navigation-menu-content--mobile) .navigation-menu-link__anchor{min-height:44px;padding:var(--seki-spacing-3, 0.75rem) var(--seki-spacing-4, 1rem)}:host([data-theme='dark']) .navigation-menu-link__anchor:hover{background-color:var(--seki-muted)}@media (prefers-reduced-motion: reduce){.navigation-menu-link__anchor{transition:none}}";
+
+const SekiNavigationMenuLink$1 = /*@__PURE__*/ proxyCustomElement(class SekiNavigationMenuLink extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        // =========================================================================
+        // Props
+        // =========================================================================
+        /** Link URL */
+        this.href = '#';
+        /** Whether this link is currently active */
+        this.active = false;
+        /** Whether the link is disabled */
+        this.disabled = false;
+        /** Link target */
+        this.target = '';
+        /** Link title/description for mega menu style */
+        this.description = '';
+        this.isInContent = false;
+        this.handleClick = (event) => {
+            var _a;
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            // Close menu after clicking a link
+            (_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.close();
+        };
+        this.handleKeyDown = (event) => {
+            var _a;
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                // Let the default link behavior handle it
+                // But close the menu
+                (_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.close();
+            }
+        };
+    }
+    // =========================================================================
+    // Lifecycle
+    // =========================================================================
+    componentWillLoad() {
+        this.findParentElements();
+        this.checkIfInContent();
+    }
+    // =========================================================================
+    // Private Methods
+    // =========================================================================
+    findParentElements() {
+        let parent = this.el.parentElement;
+        while (parent) {
+            if (parent.tagName === 'SEKI-NAVIGATION-MENU') {
+                this.parentMenu = parent;
+                break;
+            }
+            parent = parent.parentElement;
+        }
+    }
+    checkIfInContent() {
+        let parent = this.el.parentElement;
+        while (parent) {
+            if (parent.tagName === 'SEKI-NAVIGATION-MENU-CONTENT') {
+                this.isInContent = true;
+                break;
+            }
+            parent = parent.parentElement;
+        }
+    }
+    render() {
+        const hasDescription = Boolean(this.description);
+        return (h(Host, { key: '781a19c80bb67fb16a9a53adba3901f3a6c5f9c0', class: {
+                'navigation-menu-link': true,
+                'navigation-menu-link--active': this.active,
+                'navigation-menu-link--disabled': this.disabled,
+                'navigation-menu-link--in-content': this.isInContent,
+                'navigation-menu-link--with-description': hasDescription,
+            } }, h("a", { key: '63d38c753a32738f97f4bbdb92ba0fc4aa5fe425', class: "navigation-menu-link__anchor", href: this.disabled ? undefined : this.href, target: this.target || undefined, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, role: this.isInContent ? 'menuitem' : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hasDescription ? (h("div", { class: "navigation-menu-link__content" }, h("span", { class: "navigation-menu-link__title" }, h("slot", null)), h("span", { class: "navigation-menu-link__description" }, this.description))) : (h("slot", null)))));
+    }
+    get el() { return this; }
+    static get style() { return sekiNavigationMenuLinkCss; }
+}, [257, "seki-navigation-menu-link", {
+        "href": [1],
+        "active": [4],
+        "disabled": [4],
+        "target": [1],
+        "description": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-navigation-menu-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-navigation-menu-link":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiNavigationMenuLink$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiNavigationMenuLink = SekiNavigationMenuLink$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiNavigationMenuLink, defineCustomElement };

package/dist/components/seki-navigation-menu-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiNavigationMenuList extends Components.SekiNavigationMenuList, HTMLElement {}
+export const SekiNavigationMenuList: {
+    prototype: SekiNavigationMenuList;
+    new (): SekiNavigationMenuList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/seki-navigation-menu-list.js

@@ -0,0 +1,132 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-C_O046uN.js';
+
+const sekiNavigationMenuListCss = ":host{display:block}.navigation-menu-list{display:flex;align-items:center;gap:var(--seki-nav-gap, 0.25rem);margin:0;padding:0;list-style:none}:host-context(seki-navigation-menu.navigation-menu--mobile) .navigation-menu-list{flex-direction:column;align-items:stretch;gap:var(--seki-spacing-1, 0.25rem)}";
+
+const SekiNavigationMenuList$1 = /*@__PURE__*/ proxyCustomElement(class SekiNavigationMenuList extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /** Whether in mobile mode */
+        this.isMobile = false;
+        /** Current focused trigger index */
+        this.focusedIndex = 0;
+        this.handleKeyDown = (event) => {
+            const triggers = this.getTriggers();
+            if (triggers.length === 0)
+                return;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    this.focusPreviousTrigger(triggers);
+                    break;
+                case 'ArrowRight':
+                    event.preventDefault();
+                    this.focusNextTrigger(triggers);
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this.focusFirstTrigger(triggers);
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.focusLastTrigger(triggers);
+                    break;
+            }
+        };
+    }
+    componentDidLoad() {
+        this.setupKeyboardNavigation();
+    }
+    disconnectedCallback() {
+        this.cleanupKeyboardNavigation();
+    }
+    setupKeyboardNavigation() {
+        this.el.addEventListener('keydown', this.handleKeyDown);
+    }
+    cleanupKeyboardNavigation() {
+        this.el.removeEventListener('keydown', this.handleKeyDown);
+    }
+    getTriggers() {
+        var _a;
+        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (!slot)
+            return [];
+        const items = slot.assignedElements();
+        const triggers = [];
+        items.forEach(item => {
+            if (item.tagName === 'SEKI-NAVIGATION-MENU-ITEM') {
+                const trigger = item.querySelector('seki-navigation-menu-trigger');
+                if (trigger) {
+                    triggers.push(trigger);
+                }
+            }
+        });
+        return triggers;
+    }
+    focusPreviousTrigger(triggers) {
+        this.focusedIndex = this.focusedIndex > 0 ? this.focusedIndex - 1 : triggers.length - 1;
+        this.focusTrigger(triggers[this.focusedIndex]);
+    }
+    focusNextTrigger(triggers) {
+        this.focusedIndex = this.focusedIndex < triggers.length - 1 ? this.focusedIndex + 1 : 0;
+        this.focusTrigger(triggers[this.focusedIndex]);
+    }
+    focusFirstTrigger(triggers) {
+        this.focusedIndex = 0;
+        this.focusTrigger(triggers[0]);
+    }
+    focusLastTrigger(triggers) {
+        this.focusedIndex = triggers.length - 1;
+        this.focusTrigger(triggers[triggers.length - 1]);
+    }
+    focusTrigger(trigger) {
+        var _a;
+        // Update tabindex for roving tabindex pattern
+        const allTriggers = this.getTriggers();
+        allTriggers.forEach(t => {
+            var _a;
+            const button = (_a = t.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+            if (button) {
+                button.setAttribute('tabindex', t === trigger ? '0' : '-1');
+            }
+        });
+        // Focus the trigger's internal button
+        const button = (_a = trigger.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+        if (button) {
+            button.focus();
+        }
+    }
+    /** Called by child items to update focused index */
+    setFocusedIndex(index) {
+        this.focusedIndex = index;
+    }
+    render() {
+        return (h(Host, { key: '078162d361e29dc476e98f053f7ea7783413d1b3' }, h("ul", { key: '4f7e5d98c279943e11439e0798b48ccc008b766e', class: "navigation-menu-list", role: "menubar" }, h("slot", { key: '9746abbfb2dc251630dce8e12ecaa44ce4fe7697' }))));
+    }
+    get el() { return this; }
+    static get style() { return sekiNavigationMenuListCss; }
+}, [257, "seki-navigation-menu-list", {
+        "isMobile": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-navigation-menu-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-navigation-menu-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiNavigationMenuList$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiNavigationMenuList = SekiNavigationMenuList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiNavigationMenuList, defineCustomElement };

package/dist/components/seki-navigation-menu-trigger.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiNavigationMenuTrigger extends Components.SekiNavigationMenuTrigger, HTMLElement {}
+export const SekiNavigationMenuTrigger: {
+    prototype: SekiNavigationMenuTrigger;
+    new (): SekiNavigationMenuTrigger;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;