@sekiui/elements 0.0.56 → 0.0.57

package/dist/collection/components/sidebar/seki-sidebar-header.js

@@ -0,0 +1,32 @@
+/**
+ * SekiSidebarHeader Component
+ * @description Sticky header section at the top of the sidebar
+ * Provides a slot for header content (logo, title, trigger button)
+ * @component
+ * @example
+ * <seki-sidebar-header>
+ *   <div class="sidebar-header-content">Logo</div>
+ *   <seki-sidebar-trigger></seki-sidebar-trigger>
+ * </seki-sidebar-header>
+ */
+import { h, Host } from "@stencil/core";
+export class SekiSidebarHeader {
+    /**
+     * Render the component
+     */
+    render() {
+        return (h(Host, { key: '569ce4ce34a4af67b6d4af30521ad0a0f680e724' }, h("div", { key: '2e6e5044a6e2536e776ef3548c7d9245acdd6eb0', class: "header-wrapper" }, h("slot", { key: '3c33bc75721c33bd3a6a3ba002ecd8e0e528ca13' }))));
+    }
+    static get is() { return "seki-sidebar-header"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sidebar-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sidebar-header.css"]
+        };
+    }
+}

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

@@ -0,0 +1,196 @@
+/**
+ * SekiSidebarMenuItem CSS
+ * Styling for individual menu items in the sidebar
+ */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.item-wrapper {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.item-content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--sidebar-gap, 0.5rem);
+  width: 100%;
+  padding: var(--sidebar-item-padding, 0.5rem 0.75rem);
+  text-decoration: none;
+  color: var(--sidebar-item-foreground, var(--seki-color-text));
+  background-color: transparent;
+  border: none;
+  border-radius: var(--sidebar-radius-sm, 0.25rem);
+  cursor: pointer;
+  transition: width 200ms ease-linear, height 200ms ease-linear, padding 200ms ease-linear;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* Use built-in typography */
+  font-size: var(--seki-font-size-sm);
+  font-weight: var(--seki-font-weight-medium);
+  font-family: var(--seki-font-sans);
+  line-height: 1.25rem;
+}
+
+:host([data-theme="dark"]) .item-content {
+  color: var(--sidebar-item-foreground-dark, #f1f5f9);
+}
+
+.item-content:hover:not([aria-disabled="true"]) {
+  background-color: var(--sidebar-item-hover-bg, #f3f4f6);
+  color: var(--sidebar-item-hover-foreground, #111827);
+}
+
+:host([data-theme="dark"]) .item-content:hover:not([aria-disabled="true"]) {
+  background-color: var(--sidebar-item-hover-bg-dark, #27272a);
+  color: var(--sidebar-item-hover-foreground-dark, #fafafa);
+}
+
+.item-content:focus-visible {
+  outline: 2px solid var(--sidebar-primary, #3b82f6);
+  outline-offset: -2px;
+}
+
+:host([data-active="true"]) .item-content {
+  background-color: var(--sidebar-item-active-bg, #e0e7ff);
+  color: var(--sidebar-item-active-foreground, #1e40af);
+  font-weight: 600;
+}
+
+:host([data-theme="dark"][data-active="true"]) .item-content {
+  background-color: var(--sidebar-item-active-bg-dark, #312e81);
+  color: var(--sidebar-item-active-foreground-dark, #c7d2fe);
+}
+
+:host([data-disabled="true"]) .item-content {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  font-size: 1rem;
+  color: inherit;
+}
+
+.item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--sidebar-radius-sm, 0.25rem);
+  flex-shrink: 0;
+  margin-left: auto;
+  /* Use built-in typography */
+  font-size: var(--seki-font-size-xs);
+  font-weight: var(--seki-font-weight-semibold);
+  font-family: var(--seki-font-sans);
+}
+
+.badge-default {
+  background-color: var(--sidebar-badge-bg, #dbeafe);
+  color: var(--sidebar-badge-foreground, #1e40af);
+}
+
+.badge-secondary {
+  background-color: var(--sidebar-badge-secondary-bg, #e5e7eb);
+  color: var(--sidebar-badge-secondary-foreground, #374151);
+}
+
+.badge-destructive {
+  background-color: var(--sidebar-badge-destructive-bg, #fee2e2);
+  color: var(--sidebar-badge-destructive-foreground, #991b1b);
+}
+
+:host([data-theme="dark"]) .badge-default {
+  background-color: var(--sidebar-badge-bg-dark, #1e3a8a);
+  color: var(--sidebar-badge-foreground-dark, #93c5fd);
+}
+
+:host([data-theme="dark"]) .badge-secondary {
+  background-color: var(--sidebar-badge-secondary-bg-dark, #3f3f46);
+  color: var(--sidebar-badge-secondary-foreground-dark, #d4d4d8);
+}
+
+:host([data-theme="dark"]) .badge-destructive {
+  background-color: var(--sidebar-badge-destructive-bg-dark, #7f1d1d);
+  color: var(--sidebar-badge-destructive-foreground-dark, #fca5a5);
+}
+
+/* Print styles */
+@media print {
+  :host([data-active="true"]) .item-content {
+    text-decoration: underline;
+    font-weight: bold;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  .item-content {
+    border: 1px solid transparent;
+  }
+
+  .item-content:focus-visible {
+    border-color: var(--sidebar-primary, #3b82f6);
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .item-content {
+    transition: none;
+  }
+}
+
+/* Collapsed icon mode - hide labels, show only icons with smooth transitions */
+:host-context(seki-sidebar[data-state="closed"][data-collapse-mode="icon"]) .item-label {
+  margin-left: -0.5rem;
+  opacity: 0;
+  transition: margin-left 200ms ease-linear, opacity 200ms ease-linear;
+}
+
+:host-context(seki-sidebar[data-state="closed"][data-collapse-mode="icon"]) .item-badge {
+  margin-left: -0.5rem;
+  opacity: 0;
+  transition: margin-left 200ms ease-linear, opacity 200ms ease-linear;
+}
+
+:host-context(seki-sidebar[data-state="closed"][data-collapse-mode="icon"]) .item-content {
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+:host-context(seki-sidebar[data-state="closed"][data-collapse-mode="icon"]) .item-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Expanded - show labels */
+:host-context(seki-sidebar[data-state="open"]) .item-label,
+:host-context(seki-sidebar:not([data-state="closed"])) .item-label {
+  margin-left: 0;
+  opacity: 1;
+  transition: margin-left 200ms ease-linear, opacity 200ms ease-linear;
+}

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

@@ -0,0 +1,403 @@
+/**
+ * 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";
+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))))));
+    }
+    static get is() { return "seki-sidebar-menu-item"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sidebar-menu-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sidebar-menu-item.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"; }
+}