@sekiui/elements 0.0.60 → 0.0.63

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

@@ -0,0 +1,195 @@
+import { h, Host } from "@stencil/core";
+export class SekiNavigationMenuLink {
+    constructor() {
+        // =========================================================================
+        // 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)))));
+    }
+    static get is() { return "seki-navigation-menu-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-navigation-menu-link.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-navigation-menu-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "'#'"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this link is currently active"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the link is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link target"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link title/description for mega menu style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/navigation-menu/seki-navigation-menu-list.css

@@ -0,0 +1,19 @@
+: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;
+}
+
+/* Mobile mode - vertical stack */
+:host-context(seki-navigation-menu.navigation-menu--mobile) .navigation-menu-list {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--seki-spacing-1, 0.25rem);
+}

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

@@ -0,0 +1,119 @@
+import { h, Host } from "@stencil/core";
+export class SekiNavigationMenuList {
+    constructor() {
+        /** 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' }))));
+    }
+    static get is() { return "seki-navigation-menu-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-navigation-menu-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-navigation-menu-list.css"]
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/navigation-menu/seki-navigation-menu-trigger.css

@@ -0,0 +1,81 @@
+: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,
+    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;
+}
+
+/* Open state */
+: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);
+}
+
+/* Mobile mode */
+: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; /* Touch target */
+}
+
+/* Dark mode */
+:host([data-theme='dark']) .navigation-menu-trigger__button:hover:not(:disabled) {
+  background-color: var(--seki-muted);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .navigation-menu-trigger__button,
+  .navigation-menu-trigger__chevron {
+    transition: none;
+  }
+}

package/dist/collection/components/navigation-menu/seki-navigation-menu-trigger.js

@@ -0,0 +1,245 @@
+import { h, Host } from "@stencil/core";
+export class SekiNavigationMenuTrigger {
+    constructor() {
+        // =========================================================================
+        // 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.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, _c;
+            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);
+            (_c = (_b = this.parentMenu) === null || _b === void 0 ? void 0 : _b.setHoveredTrigger) === null || _c === void 0 ? void 0 : _c.call(_b, itemId);
+            this.updateTriggerRect();
+        };
+        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.updateTriggerRect();
+    }
+    // =========================================================================
+    // 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;
+    }
+    updateTriggerRect() {
+        if (this.buttonRef && this.parentMenu && typeof this.parentMenu.updateTriggerRect === 'function') {
+            const itemId = this.getItemId();
+            if (itemId) {
+                const rect = this.buttonRef.getBoundingClientRect();
+                this.parentMenu.updateTriggerRect(itemId, rect);
+            }
+        }
+    }
+    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();
+                }
+            }
+        });
+    }
+    /** Called by parent 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();
+        return (h(Host, { key: 'e154e24b9e105c7d46f1586ad3f2d44a6c4aca0f', 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: 'ca4cedf34ffe8bdb57aed6cf1e0e7114bb95dffe', ref: el => (this.buttonRef = el), 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: '777579e63f3ca3250bb948c1fea02dc7c9f27989', class: "navigation-menu-trigger__label" }, h("slot", { key: 'bb56e84740e1ae2ebd85828219758e1cb776f809' })), h("svg", { key: '2282b0cf13ea0026777790cff148e8241c510e75', 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: '1476d94c2005662d3505528c237b06616db1822d', points: "2 4 6 8 10 4" })))));
+    }
+    static get is() { return "seki-navigation-menu-trigger"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-navigation-menu-trigger.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-navigation-menu-trigger.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the trigger is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "isMobile": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "triggerActivate",
+                "name": "seki-trigger-activate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when trigger is activated"
+                },
+                "complexType": {
+                    "original": "{ itemId: string }",
+                    "resolved": "{ itemId: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}