@sekiui/elements 0.0.60 → 0.0.63

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

@@ -0,0 +1,434 @@
+import { h, Host } from "@stencil/core";
+export class SekiNavigationMenu {
+    constructor() {
+        // =========================================================================
+        // Props
+        // =========================================================================
+        /** Breakpoint in pixels for mobile hamburger mode */
+        this.mobileBreakpoint = 768;
+        /** Side from which mobile sheet opens */
+        this.mobileSide = 'right';
+        /** Accessible label for the navigation */
+        this.ariaLabel = 'Main navigation';
+        // =========================================================================
+        // State
+        // =========================================================================
+        /** Currently open menu item ID */
+        this.activeItem = null;
+        /** Currently hovered trigger ID (for indicator positioning) */
+        this.hoveredTrigger = null;
+        /** Whether mobile mode is active */
+        this.isMobile = false;
+        /** Whether mobile sheet is open */
+        this.mobileSheetOpen = false;
+        this.registeredItems = new Map();
+        this.triggerRects = new Map();
+        this.clickOutsideHandler = (event) => {
+            const target = event.target;
+            if (!this.el.contains(target)) {
+                this.closeItem();
+            }
+        };
+        this.handleHamburgerClick = () => {
+            this.toggleMobileSheet();
+        };
+        this.handleSheetClose = () => {
+            this.mobileSheetOpen = false;
+            this.mobileToggle.emit({ open: false });
+        };
+        this.handleBackdropClick = () => {
+            this.handleSheetClose();
+        };
+    }
+    // =========================================================================
+    // Lifecycle
+    // =========================================================================
+    componentWillLoad() {
+        this.checkMobileBreakpoint();
+    }
+    componentDidLoad() {
+        this.setupResizeObserver();
+        this.setupClickOutside();
+    }
+    disconnectedCallback() {
+        this.cleanupResizeObserver();
+        this.cleanupClickOutside();
+    }
+    // =========================================================================
+    // Public Methods
+    // =========================================================================
+    /** Get the navigation menu context for child components */
+    async getContext() {
+        return {
+            activeItem: this.activeItem,
+            hoveredTrigger: this.hoveredTrigger,
+            isMobile: this.isMobile,
+            registerItem: this.registerItem.bind(this),
+            unregisterItem: this.unregisterItem.bind(this),
+            openItem: this.openItem.bind(this),
+            closeItem: this.closeItem.bind(this),
+            setHoveredTrigger: this.setHoveredTrigger.bind(this),
+            getTriggerRect: this.getTriggerRect.bind(this),
+        };
+    }
+    /** Open a specific menu item */
+    async open(itemId) {
+        this.openItem(itemId);
+    }
+    /** Close the currently open menu item */
+    async close() {
+        this.closeItem();
+    }
+    /** Toggle mobile sheet */
+    async toggleMobileSheet() {
+        this.mobileSheetOpen = !this.mobileSheetOpen;
+        this.mobileToggle.emit({ open: this.mobileSheetOpen });
+    }
+    // =========================================================================
+    // Private Methods
+    // =========================================================================
+    setupResizeObserver() {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.checkMobileBreakpoint();
+        });
+        this.resizeObserver.observe(document.body);
+    }
+    cleanupResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    checkMobileBreakpoint() {
+        const wasMobile = this.isMobile;
+        this.isMobile = window.innerWidth < this.mobileBreakpoint;
+        // Close menu when switching modes
+        if (wasMobile !== this.isMobile) {
+            this.activeItem = null;
+            this.mobileSheetOpen = false;
+        }
+    }
+    setupClickOutside() {
+        document.addEventListener('click', this.clickOutsideHandler);
+    }
+    cleanupClickOutside() {
+        document.removeEventListener('click', this.clickOutsideHandler);
+    }
+    registerItem(_id) {
+        // Item registration will be handled by child components
+    }
+    unregisterItem(id) {
+        this.registeredItems.delete(id);
+        this.triggerRects.delete(id);
+    }
+    openItem(id) {
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout);
+            this.closeTimeout = undefined;
+        }
+        const previousItem = this.activeItem;
+        this.activeItem = id;
+        this.hoveredTrigger = id;
+        if (previousItem !== id) {
+            if (previousItem) {
+                this.menuClose.emit({ triggerId: previousItem });
+            }
+            this.menuOpen.emit({ triggerId: id });
+        }
+    }
+    closeItem() {
+        if (this.activeItem) {
+            const closingItem = this.activeItem;
+            this.activeItem = null;
+            this.hoveredTrigger = null;
+            this.menuClose.emit({ triggerId: closingItem });
+        }
+    }
+    setHoveredTrigger(id) {
+        this.hoveredTrigger = id;
+    }
+    getTriggerRect(id) {
+        return this.triggerRects.get(id) || null;
+    }
+    /** Called by trigger components to update their rect */
+    updateTriggerRect(id, rect) {
+        this.triggerRects.set(id, rect);
+    }
+    /** Schedule opening with delay (for hover) */
+    scheduleOpen(id, delay = 100) {
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout);
+            this.closeTimeout = undefined;
+        }
+        if (this.openTimeout) {
+            clearTimeout(this.openTimeout);
+        }
+        // If already open, switch immediately
+        if (this.activeItem !== null) {
+            this.openItem(id);
+            return;
+        }
+        this.openTimeout = setTimeout(() => {
+            this.openItem(id);
+        }, delay);
+    }
+    /** Schedule closing with delay (for hover) */
+    scheduleClose(delay = 150) {
+        if (this.openTimeout) {
+            clearTimeout(this.openTimeout);
+            this.openTimeout = undefined;
+        }
+        this.closeTimeout = setTimeout(() => {
+            this.closeItem();
+        }, delay);
+    }
+    /** Cancel scheduled close (when entering content) */
+    cancelClose() {
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout);
+            this.closeTimeout = undefined;
+        }
+    }
+    // =========================================================================
+    // Render
+    // =========================================================================
+    render() {
+        return (h(Host, { key: '68fbdf98973da6c8b2e13ee3aaaf59eea1ff4b83', class: {
+                'navigation-menu': true,
+                'navigation-menu--mobile': this.isMobile,
+            } }, h("nav", { key: 'e34e7fe77b9cc8b23ad7299900ada1e367b8cff8', class: "navigation-menu__nav", role: "navigation", "aria-label": this.ariaLabel }, this.isMobile ? this.renderMobileNav() : this.renderDesktopNav())));
+    }
+    renderDesktopNav() {
+        return [
+            h("div", { class: "navigation-menu__container" }, h("slot", null)),
+            h("seki-navigation-menu-viewport", { activeItem: this.activeItem, hoveredTrigger: this.hoveredTrigger }),
+        ];
+    }
+    renderMobileNav() {
+        return [
+            h("button", { type: "button", class: "navigation-menu__hamburger", onClick: this.handleHamburgerClick, "aria-expanded": String(this.mobileSheetOpen), "aria-controls": "navigation-menu-sheet", "aria-label": this.mobileSheetOpen ? 'Close menu' : 'Open menu' }, h("span", { class: "navigation-menu__hamburger-line" }), h("span", { class: "navigation-menu__hamburger-line" }), h("span", { class: "navigation-menu__hamburger-line" })),
+            this.mobileSheetOpen && (h("div", { class: "navigation-menu__sheet-backdrop", onClick: this.handleBackdropClick })),
+            h("div", { id: "navigation-menu-sheet", class: {
+                    'navigation-menu__sheet': true,
+                    'navigation-menu__sheet--open': this.mobileSheetOpen,
+                    [`navigation-menu__sheet--${this.mobileSide}`]: true,
+                } }, h("div", { class: "navigation-menu__sheet-header" }, h("button", { type: "button", class: "navigation-menu__sheet-close", onClick: this.handleSheetClose, "aria-label": "Close menu" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { class: "navigation-menu__sheet-content" }, h("slot", null))),
+        ];
+    }
+    static get is() { return "seki-navigation-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-navigation-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-navigation-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mobileBreakpoint": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breakpoint in pixels for mobile hamburger mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-breakpoint",
+                "defaultValue": "768"
+            },
+            "mobileSide": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Side from which mobile sheet opens"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-side",
+                "defaultValue": "'right'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'Main navigation'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeItem": {},
+            "hoveredTrigger": {},
+            "isMobile": {},
+            "mobileSheetOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "menuOpen",
+                "name": "seki-menu-open",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a menu item opens"
+                },
+                "complexType": {
+                    "original": "{ triggerId: string }",
+                    "resolved": "{ triggerId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "menuClose",
+                "name": "seki-menu-close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a menu item closes"
+                },
+                "complexType": {
+                    "original": "{ triggerId: string }",
+                    "resolved": "{ triggerId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mobileToggle",
+                "name": "seki-mobile-toggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when mobile sheet toggles"
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getContext": {
+                "complexType": {
+                    "signature": "() => Promise<NavigationMenuContext>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NavigationMenuContext": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/navigation-menu/seki-navigation-menu.tsx",
+                            "id": "src/components/navigation-menu/seki-navigation-menu.tsx::NavigationMenuContext"
+                        }
+                    },
+                    "return": "Promise<NavigationMenuContext>"
+                },
+                "docs": {
+                    "text": "Get the navigation menu context for child components",
+                    "tags": []
+                }
+            },
+            "open": {
+                "complexType": {
+                    "signature": "(itemId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open a specific menu item",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the currently open menu item",
+                    "tags": []
+                }
+            },
+            "toggleMobileSheet": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle mobile sheet",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/pagination/seki-pagination-content.js

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-content: Content container for pagination items
+ *
+ * @component PaginationContent
+ */
+export class SekiPaginationContent {
+    render() {
+        return (h("ul", { key: 'dde8bab775210b72a1dbe6573d7ff641d637ce14', class: "seki-pagination-content", part: "content" }, h("slot", { key: '7081b0ce8becc4f515458d189d9c674d26283494' })));
+    }
+    static get is() { return "seki-pagination-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+}

package/dist/collection/components/pagination/seki-pagination-ellipsis.js

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-ellipsis: Visual indicator for skipped pages
+ *
+ * @component PaginationEllipsis
+ */
+export class SekiPaginationEllipsis {
+    render() {
+        return (h("span", { key: '8d7c96589c0a9876858bf24242e5aef194582fa8', "aria-hidden": "true", class: "seki-pagination-ellipsis", part: "ellipsis" }, h("svg", { key: '8031032fd6cbbb756c70b0b754274718cc284e6c', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { key: '5b7771358ac87ea01e010b04cd3983c4f248e9bb', cx: "12", cy: "12", r: "1" }), h("circle", { key: '1ab0a9db3e44f059204d3507bce6ff0067629c8e', cx: "19", cy: "12", r: "1" }), h("circle", { key: '3c38cb003dcd30b0f7557de8cc4c7dfb16091090', cx: "5", cy: "12", r: "1" })), h("span", { key: 'c9d1f10f476477986f62133dfb79b7d8b2aa8084', class: "sr-only" }, "More pages")));
+    }
+    static get is() { return "seki-pagination-ellipsis"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+}

package/dist/collection/components/pagination/seki-pagination-item.js

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-item: Individual pagination item wrapper
+ *
+ * @component PaginationItem
+ */
+export class SekiPaginationItem {
+    render() {
+        return (h("li", { key: '3292952819d4eef90e17618817bb1df17ca26ee0', class: "seki-pagination-item", part: "item" }, h("slot", { key: 'ea9a7c8742b83a8b90ac0f1c400ba53632b5b0b1' })));
+    }
+    static get is() { return "seki-pagination-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+}

package/dist/collection/components/pagination/seki-pagination-link.js

@@ -0,0 +1,101 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-link: Clickable page number link
+ *
+ * @component PaginationLink
+ */
+export class SekiPaginationLink {
+    constructor() {
+        /**
+         * Whether this link represents the current/active page
+         */
+        this.active = false;
+        /**
+         * Disables the link
+         */
+        this.disabled = false;
+    }
+    render() {
+        const Tag = this.href && !this.disabled ? 'a' : 'span';
+        return (h(Tag, { key: 'a2f89d236fde67e4b78b482083583771be686f21', href: this.href && !this.disabled ? this.href : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: {
+                'seki-pagination-link': true,
+                'seki-pagination-link--active': !!this.active,
+                'seki-pagination-link--disabled': !!this.disabled,
+            }, part: "link" }, h("slot", { key: 'd47ca99d158ab5e44e8baa1a563bd1961e361cae' })));
+    }
+    static get is() { return "seki-pagination-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the pagination link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this link represents the current/active page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/pagination/seki-pagination-next.js

@@ -0,0 +1,77 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-next: Next page navigation button
+ *
+ * @component PaginationNext
+ */
+export class SekiPaginationNext {
+    constructor() {
+        /**
+         * Disables the button
+         */
+        this.disabled = false;
+    }
+    render() {
+        const Tag = this.href && !this.disabled ? 'a' : 'span';
+        return (h(Tag, { key: '48f50bba6ba7656deeaa2c0bfe543f54f2c4436c', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to next page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
+                'seki-pagination-link': true,
+                'seki-pagination-nav': true,
+                'seki-pagination-link--disabled': !!this.disabled,
+            }, part: "next" }, h("span", { key: '1c3fbea87fde87f4989452bd3fd20fa53db3fa82' }, "Next"), h("svg", { key: 'fd006cededfefb52df1569aadce5dbc2104af447', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '517df8ef351ef5b9ca45f40c51bf01098d033e3e', d: "m9 18 6-6-6-6" }))));
+    }
+    static get is() { return "seki-pagination-next"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the next page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}