@sekiui/elements 0.0.59 → 0.0.61

package/dist/collection/components/sidebar/seki-sidebar-menu-button.js

@@ -0,0 +1,240 @@
+import { h } from "@stencil/core";
+export class SekiSidebarMenuButton {
+    constructor() {
+        /**
+         * Whether the menu button is active
+         */
+        this.active = false;
+        /**
+         * Whether the menu button is disabled
+         */
+        this.disabled = false;
+        /**
+         * Size variant: 'default' | 'sm' | 'lg'
+         */
+        this.size = 'default';
+        /**
+         * Button variant: 'default' | 'outline'
+         */
+        this.variant = 'default';
+        /**
+         * Whether to render as a tooltip trigger (for icon-only mode)
+         */
+        this.tooltip = false;
+        this._isIconMode = false;
+    }
+    componentWillLoad() {
+        this.syncWithProvider();
+    }
+    async syncWithProvider() {
+        const provider = document.querySelector('seki-sidebar-provider');
+        if (provider) {
+            const state = await provider.getState();
+            this._isIconMode = !state.open && !state.isMobile;
+        }
+    }
+    handleStateChange(event) {
+        // Icon mode is when sidebar is closed on desktop
+        this._isIconMode = !event.detail.open && !event.detail.isMobile;
+    }
+    render() {
+        const hasHref = this.href || this.el.hasAttribute('href');
+        const Tag = hasHref ? 'a' : 'button';
+        const buttonProps = {
+            class: {
+                'sidebar-menu-button': true,
+                'sidebar-menu-button--active': this.active,
+                'sidebar-menu-button--disabled': this.disabled,
+                [`sidebar-menu-button--${this.size}`]: true,
+                [`sidebar-menu-button--${this.variant}`]: true,
+                'sidebar-menu-button--icon-mode': this._isIconMode,
+            },
+            role: 'menuitem',
+            'data-active': this.active ? 'true' : 'false',
+            'data-size': this.size,
+            'data-variant': this.variant,
+            'aria-disabled': this.disabled ? 'true' : undefined,
+        };
+        if (Tag === 'button') {
+            buttonProps.disabled = this.disabled;
+            buttonProps.type = 'button';
+        }
+        else {
+            buttonProps.href = this.href;
+            if (this.disabled) {
+                buttonProps['aria-disabled'] = 'true';
+                buttonProps.tabIndex = -1;
+            }
+        }
+        return (h(Tag, Object.assign({ key: '779ff1dc7db619043e40d07261107723f5ba9e8f' }, buttonProps), h("span", { key: 'f23e01750001b40497ca4b7c2a6d0bd4094ec0e4', class: "sidebar-menu-button-content" }, h("slot", { key: '905dce9990379cab3c038936ff7a267f0c65174f' })), this._isIconMode && this.tooltipText && (h("span", { key: '85b45f55e9dab201ffca95d339be398ea87ca222', class: "sr-only" }, this.tooltipText))));
+    }
+    static get is() { return "seki-sidebar-menu-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sidebar-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sidebar-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the menu button is active"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the menu button is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'sm' | 'lg'",
+                    "resolved": "\"default\" | \"lg\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant: 'default' | 'sm' | 'lg'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'outline'",
+                    "resolved": "\"default\" | \"outline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button variant: 'default' | 'outline'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "tooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to render as a tooltip trigger (for icon-only mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip",
+                "defaultValue": "false"
+            },
+            "tooltipText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text to show in icon mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-text"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional href for link rendering"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_isIconMode": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "sekiSidebarStateChange",
+                "method": "handleStateChange",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/sidebar/seki-sidebar-menu-item.js

@@ -1,403 +1,18 @@
-/**
- * SekiSidebarMenuItem Component
- * @description Navigation menu item within the sidebar menu
- * Supports icons, badges, active states, and keyboard navigation
- * @component
- * @example
- * <seki-sidebar-menu-item href="/dashboard" is-active>Dashboard</seki-sidebar-menu-item>
- */
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 export class SekiSidebarMenuItem {
-    constructor() {
-        /**
-         * Disable interaction
-         * @type {boolean}
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * Highlight as current page
-         * @type {boolean}
-         * @default false
-         */
-        this.isActive = false;
-        /**
-         * ARIA current value for active items
-         * @type {string}
-         */
-        this.ariaCurrentValue = 'page';
-        /**
-         * Handle item click
-         */
-        this.handleClick = () => {
-            if (this.disabled) {
-                return;
-            }
-            if (this.href) {
-                this.navigate.emit({
-                    href: this.href,
-                    target: this.target,
-                });
-            }
-        };
-        /**
-         * Handle keyboard navigation
-         * - Enter/Space: activate item
-         * - ArrowDown: focus next menu item
-         * - ArrowUp: focus previous menu item
-         * - ArrowRight: expand parent submenu (if collapsed)
-         * - ArrowLeft: collapse parent submenu (if expanded)
-         * - Home: focus first menu item
-         * - End: focus last menu item
-         */
-        this.handleKeyDown = (event) => {
-            if (this.disabled) {
-                return;
-            }
-            switch (event.key) {
-                case 'Enter':
-                case ' ':
-                    event.preventDefault();
-                    this.handleClick();
-                    break;
-                case 'ArrowDown':
-                    event.preventDefault();
-                    this.focusNextItem();
-                    break;
-                case 'ArrowUp':
-                    event.preventDefault();
-                    this.focusPreviousItem();
-                    break;
-                case 'ArrowRight':
-                    event.preventDefault();
-                    this.expandParentSubmenu();
-                    break;
-                case 'ArrowLeft':
-                    event.preventDefault();
-                    this.collapseParentSubmenu();
-                    break;
-                case 'Home':
-                    event.preventDefault();
-                    this.focusFirstItem();
-                    break;
-                case 'End':
-                    event.preventDefault();
-                    this.focusLastItem();
-                    break;
-            }
-        };
-        /**
-         * Focus next menu item in the menu
-         */
-        this.focusNextItem = () => {
-            const currentItem = this.el;
-            const items = this.getEnabledItems();
-            const currentIndex = items.indexOf(currentItem);
-            if (currentIndex >= 0 && currentIndex < items.length - 1) {
-                items[currentIndex + 1].focus();
-            }
-        };
-        /**
-         * Focus previous menu item in the menu
-         */
-        this.focusPreviousItem = () => {
-            const currentItem = this.el;
-            const items = this.getEnabledItems();
-            const currentIndex = items.indexOf(currentItem);
-            if (currentIndex > 0) {
-                items[currentIndex - 1].focus();
-            }
-        };
-        /**
-         * Focus first menu item in the menu
-         */
-        this.focusFirstItem = () => {
-            const items = this.getEnabledItems();
-            if (items.length > 0) {
-                items[0].focus();
-            }
-        };
-        /**
-         * Focus last menu item in the menu
-         */
-        this.focusLastItem = () => {
-            const items = this.getEnabledItems();
-            if (items.length > 0) {
-                items[items.length - 1].focus();
-            }
-        };
-        /**
-         * Expand parent submenu if collapsed
-         */
-        this.expandParentSubmenu = () => {
-            var _a;
-            const parent = this.el.closest('seki-sidebar-menu-sub');
-            if (parent && parent.isCollapsed) {
-                (_a = parent.setCollapsed) === null || _a === void 0 ? void 0 : _a.call(parent, false);
-            }
-        };
-        /**
-         * Collapse parent submenu if expanded
-         */
-        this.collapseParentSubmenu = () => {
-            var _a;
-            const parent = this.el.closest('seki-sidebar-menu-sub');
-            if (parent && !parent.isCollapsed) {
-                (_a = parent.setCollapsed) === null || _a === void 0 ? void 0 : _a.call(parent, true);
-            }
-        };
-    }
-    /**
-     * Get all enabled menu items
-     */
-    getEnabledItems() {
-        const currentItem = this.el;
-        const parent = currentItem.parentElement;
-        if (!parent)
-            return [];
-        return Array.from(parent.querySelectorAll('seki-sidebar-menu-item')).filter((item) => {
-            const element = item;
-            return !element.disabled;
-        });
-    }
-    /**
-     * Render the component
-     */
     render() {
-        const Element = this.href ? 'a' : 'button';
-        const isAriaButton = !this.href;
-        return (h(Host, { key: '78b181eedfa609c2a61a6a14ff58830d4310b921', "data-active": this.isActive, "data-disabled": this.disabled }, h("li", { key: '11be63adc450617466f0646a8e38c0b29cceb23f', class: "item-wrapper" }, h(Element, { key: '6fd60f8a87973df75a44dcad3e4e162c56aab4ba', class: "item-content", href: this.href, target: this.target, disabled: isAriaButton && this.disabled, role: isAriaButton ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.isActive ? this.ariaCurrentValue : undefined, "aria-label": this.ariaLabel, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'f689b3bb789a4efdd4b9cb9d4c00d27a10c7edab', class: "item-icon" }, h("slot", { key: '0c998b390f9010f9e6877f6d5a8ecb8c71866926', name: "icon" })), h("span", { key: '8dbe7143085361aeefb031cac580df6fbd5868a4', class: "item-label" }, h("slot", { key: 'dbf40e4a1a70f57cbc92131af942926eec49e99e' })), this.badge && (h("span", { key: '74c4726252d2faec5a443f2d8756b9307b372ea7', class: `item-badge badge-${this.badge.variant || 'default'}`, "aria-label": this.badge.text }, this.badge.text))))));
+        return (h("li", { key: '81bc20384634ee98353c3b672f8f71e877a08326', class: "sidebar-menu-item", role: "none" }, h("slot", { key: '0ece35afbc087eb5e994d816a25c8771b427e231' })));
     }
     static get is() { return "seki-sidebar-menu-item"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["seki-sidebar-menu-item.css"]
+            "$": ["seki-sidebar-menu.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["seki-sidebar-menu-item.css"]
+            "$": ["seki-sidebar-menu.css"]
         };
     }
-    static get properties() {
-        return {
-            "href": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "SidebarMenuItemProps['href']",
-                    "resolved": "string | undefined",
-                    "references": {
-                        "SidebarMenuItemProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarMenuItemProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Navigation URL (optional)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "href"
-            },
-            "target": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "SidebarMenuItemProps['target']",
-                    "resolved": "string | undefined",
-                    "references": {
-                        "SidebarMenuItemProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarMenuItemProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Link target: _blank, _self, etc."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "target"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{boolean}"
-                        }, {
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Disable interaction"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "isActive": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{boolean}"
-                        }, {
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Highlight as current page"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "is-active",
-                "defaultValue": "false"
-            },
-            "badge": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SidebarMenuItemProps['badge']",
-                    "resolved": "undefined | { text: string; variant?: \"default\" | \"secondary\" | \"destructive\" | undefined; }",
-                    "references": {
-                        "SidebarMenuItemProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarMenuItemProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{object}"
-                        }],
-                    "text": "Badge indicator for the item"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "ariaLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "SidebarMenuItemProps['ariaLabel']",
-                    "resolved": "string | undefined",
-                    "references": {
-                        "SidebarMenuItemProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarMenuItemProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Accessibility label override"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "aria-label"
-            },
-            "ariaCurrentValue": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "SidebarMenuItemProps['ariaCurrentValue']",
-                    "resolved": "\"date\" | \"false\" | \"location\" | \"page\" | \"step\" | \"time\" | \"true\" | undefined",
-                    "references": {
-                        "SidebarMenuItemProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarMenuItemProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "ARIA current value for active items"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "aria-current-value",
-                "defaultValue": "'page'"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "navigate",
-                "name": "navigate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event fired on item click"
-                },
-                "complexType": {
-                    "original": "NavigateDetail",
-                    "resolved": "NavigateDetail",
-                    "references": {
-                        "NavigateDetail": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::NavigateDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
 }