@sekiui/elements 0.1.5 → 0.1.6

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

@@ -1,11 +0,0 @@
-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/cdn/seki-navigation-menu-list.js

@@ -1,139 +0,0 @@
-import { p as proxyCustomElement, H, h, e as Host } from './p-jMliCqbB.js';
-import { m as mirrorAncestorAttributes } from './p-BgtjDG0h.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([data-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();
-    }
-    connectedCallback() {
-        this.attrMirror = mirrorAncestorAttributes(this.el, 'seki-navigation-menu', ['data-mobile']);
-    }
-    disconnectedCallback() {
-        var _a;
-        this.cleanupKeyboardNavigation();
-        (_a = this.attrMirror) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.attrMirror = undefined;
-    }
-    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: '7c8d4112c3bf01fc49d46fc58072255b48b7704f' }, h("ul", { key: 'a7cb204d2cb8aff99fdba6205d766d612570b611', class: "navigation-menu-list", role: "menubar" }, h("slot", { key: '384fa6c10772c26c0776fd3504662e62705cec27' }))));
-    }
-    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/cdn/seki-navigation-menu-trigger.d.ts

@@ -1,11 +0,0 @@
-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;

package/dist/cdn/seki-navigation-menu-trigger.js

@@ -1,214 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-jMliCqbB.js';
-import { s as subscribeToContextChange } from './p-B4SOpX_A.js';
-
-const sekiNavigationMenuTriggerCss = ":host{display:inline-flex}.navigation-menu-trigger__button{display:inline-flex;align-items:center;gap:var(--seki-spacing-1, 0.25rem);padding:var(--seki-nav-trigger-padding, 0.5rem 0.75rem);font-family:var(--seki-font-sans);font-size:var(--seki-font-size-sm, 0.875rem);font-weight:var(--seki-font-weight-medium, 500);line-height:var(--seki-line-height-tight, 1.25);color:var(--seki-foreground);background-color:transparent;border:none;border-radius:var(--seki-radius-md, 0.375rem);cursor:pointer;transition:background-color var(--seki-nav-animation-duration, 150ms) ease,\n    color var(--seki-nav-animation-duration, 150ms) ease}.navigation-menu-trigger__button:hover:not(:disabled){background-color:var(--seki-muted)}.navigation-menu-trigger__button:focus-visible{outline:2px solid var(--seki-ring);outline-offset:2px}.navigation-menu-trigger__button:disabled{opacity:0.5;cursor:not-allowed}:host(.navigation-menu-trigger--open) .navigation-menu-trigger__button{background-color:var(--seki-muted)}.navigation-menu-trigger__label{display:inline-flex;align-items:center}.navigation-menu-trigger__chevron{flex-shrink:0;transition:transform var(--seki-nav-animation-duration, 150ms) ease}:host(.navigation-menu-trigger--open) .navigation-menu-trigger__chevron{transform:rotate(180deg)}:host(.navigation-menu-trigger--mobile){display:flex;width:100%}:host(.navigation-menu-trigger--mobile) .navigation-menu-trigger__button{width:100%;justify-content:space-between;padding:var(--seki-spacing-3, 0.75rem) var(--seki-spacing-4, 1rem);min-height:44px;}@media (prefers-reduced-motion: reduce){.navigation-menu-trigger__button,.navigation-menu-trigger__chevron{transition:none}}";
-
-const SekiNavigationMenuTrigger$1 = /*@__PURE__*/ proxyCustomElement(class SekiNavigationMenuTrigger extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.triggerActivate = createEvent(this, "sekiTriggerActivate");
-        // =========================================================================
-        // Props
-        // =========================================================================
-        /** Whether the trigger is disabled */
-        this.disabled = false;
-        // =========================================================================
-        // State
-        // =========================================================================
-        /** Whether this trigger's content is open */
-        this.isOpen = false;
-        /** Whether in mobile mode */
-        this.isMobile = false;
-        this.isTouchDevice = false;
-        this.itemContextSubscription = { parent: null, unsubscribe: () => { } };
-        this.handleItemContextChange = () => {
-            const item = this.el.closest('seki-navigation-menu-item');
-            const context = item === null || item === void 0 ? void 0 : item.navigationMenuItemContext;
-            if (!context)
-                return;
-            this.isOpen = context.isOpen;
-            this.isMobile = context.isMobile;
-        };
-        this.handleClick = (event) => {
-            var _a, _b, _c, _d, _e;
-            if (this.disabled)
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            const itemId = this.getItemId();
-            if (!itemId)
-                return;
-            if (this.isMobile) {
-                // Mobile: toggle accordion
-                (_a = this.parentItem) === null || _a === void 0 ? void 0 : _a.toggleMobileExpanded();
-            }
-            else if (this.isTouchDevice) {
-                // Touch device: toggle on tap
-                if (this.isOpen) {
-                    (_b = this.parentMenu) === null || _b === void 0 ? void 0 : _b.close();
-                }
-                else {
-                    (_c = this.parentMenu) === null || _c === void 0 ? void 0 : _c.open(itemId);
-                }
-            }
-            else {
-                // Desktop: click also toggles
-                if (this.isOpen) {
-                    (_d = this.parentMenu) === null || _d === void 0 ? void 0 : _d.close();
-                }
-                else {
-                    (_e = this.parentMenu) === null || _e === void 0 ? void 0 : _e.open(itemId);
-                }
-            }
-            this.triggerActivate.emit({ itemId });
-        };
-        this.handleMouseEnter = () => {
-            var _a, _b;
-            if (this.disabled || this.isMobile || this.isTouchDevice)
-                return;
-            const itemId = this.getItemId();
-            if (!itemId)
-                return;
-            (_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.scheduleOpen(itemId, 100);
-            (_b = this.parentMenu) === null || _b === void 0 ? void 0 : _b.setHoveredTrigger(itemId);
-        };
-        this.handleMouseLeave = () => {
-            var _a;
-            if (this.disabled || this.isMobile || this.isTouchDevice)
-                return;
-            (_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.scheduleClose(150);
-        };
-        this.handleKeyDown = (event) => {
-            var _a, _b, _c, _d;
-            if (this.disabled)
-                return;
-            const itemId = this.getItemId();
-            if (!itemId)
-                return;
-            switch (event.key) {
-                case 'Enter':
-                case ' ':
-                    event.preventDefault();
-                    if (this.isOpen) {
-                        (_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.close();
-                    }
-                    else {
-                        (_b = this.parentMenu) === null || _b === void 0 ? void 0 : _b.open(itemId);
-                    }
-                    break;
-                case 'ArrowDown':
-                    event.preventDefault();
-                    if (!this.isOpen) {
-                        (_c = this.parentMenu) === null || _c === void 0 ? void 0 : _c.open(itemId);
-                    }
-                    // Focus first item in content
-                    this.focusFirstContentItem();
-                    break;
-                case 'Escape':
-                    event.preventDefault();
-                    (_d = this.parentMenu) === null || _d === void 0 ? void 0 : _d.close();
-                    break;
-            }
-        };
-    }
-    // =========================================================================
-    // Lifecycle
-    // =========================================================================
-    componentWillLoad() {
-        this.findParentElements();
-        this.detectTouchDevice();
-    }
-    componentDidLoad() {
-        this.itemContextSubscription = subscribeToContextChange(this.el, 'seki-navigation-menu-item', this.handleItemContextChange);
-        this.handleItemContextChange();
-    }
-    // =========================================================================
-    // 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;
-        }
-    }
-    detectTouchDevice() {
-        this.isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
-    }
-    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')) || '';
-    }
-    focusFirstContentItem() {
-        // Allow content to render first
-        requestAnimationFrame(() => {
-            var _a, _b;
-            const content = (_a = this.parentItem) === null || _a === void 0 ? void 0 : _a.el.querySelector('seki-navigation-menu-content');
-            if (content) {
-                const firstLink = content.querySelector('seki-navigation-menu-link');
-                if (firstLink) {
-                    const anchor = (_b = firstLink.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('a');
-                    anchor === null || anchor === void 0 ? void 0 : anchor.focus();
-                }
-            }
-        });
-    }
-    disconnectedCallback() {
-        this.itemContextSubscription.unsubscribe();
-    }
-    render() {
-        const itemId = this.getItemId();
-        return (h(Host, { key: '3f8474f05e9eeb0aa7581397417d3022de0ce599', class: {
-                'navigation-menu-trigger': true,
-                'navigation-menu-trigger--open': this.isOpen,
-                'navigation-menu-trigger--disabled': this.disabled,
-                'navigation-menu-trigger--mobile': this.isMobile,
-            } }, h("button", { key: '348ada3dffa6e6d3d66346d67460fe7bfe957125', type: "button", class: "navigation-menu-trigger__button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": String(this.isOpen), "aria-controls": `content-${itemId}`, disabled: this.disabled, tabindex: this.isOpen ? '0' : '-1', onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onKeyDown: this.handleKeyDown }, h("span", { key: 'e53f5e0b209f7dd5bd6b85285809b14ff9f5624e', class: "navigation-menu-trigger__label" }, h("slot", { key: '777910a3d8e0d4c06ebe372542516f1458277370' })), h("svg", { key: 'd507fc70e02c0e7ee73ee38314b86cd8026454ac', class: "navigation-menu-trigger__chevron", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'a975f7dffdc86730b7345ec46c2f4a9d4f4fea77', points: "2 4 6 8 10 4" })))));
-    }
-    get el() { return this; }
-    static get style() { return sekiNavigationMenuTriggerCss; }
-}, [257, "seki-navigation-menu-trigger", {
-        "disabled": [4],
-        "isOpen": [32],
-        "isMobile": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["seki-navigation-menu-trigger"];
-    components.forEach(tagName => { switch (tagName) {
-        case "seki-navigation-menu-trigger":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SekiNavigationMenuTrigger$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const SekiNavigationMenuTrigger = SekiNavigationMenuTrigger$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SekiNavigationMenuTrigger, defineCustomElement };

package/dist/cdn/seki-navigation-menu-viewport.d.ts

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

package/dist/cdn/seki-navigation-menu-viewport.js

@@ -1,6 +0,0 @@
-import { S as SekiNavigationMenuViewport$1, d as defineCustomElement$1 } from './p-DmLJOHmA.js';
-
-const SekiNavigationMenuViewport = SekiNavigationMenuViewport$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SekiNavigationMenuViewport, defineCustomElement };

package/dist/cdn/seki-navigation-menu.d.ts

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