@sekiui/elements 0.0.55 → 0.0.57

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

@@ -0,0 +1,357 @@
+/**
+ * SekiSidebarMenuSub CSS
+ * Styling for nested submenu items in the sidebar
+ * Supports:
+ * - Expandable/collapsible submenus with smooth animations (200ms)
+ * - Icon + text display when expanded
+ * - Icon-only + tooltip when parent sidebar is collapsed
+ * - Multi-level nesting with proper indentation
+ * - Full keyboard and screen reader accessibility
+ * - Dark mode and reduced motion support
+ */
+
+:host {
+  display: block;
+  width: 100%;
+  --submenu-indent-level: 1;
+}
+
+.submenu-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sidebar-gap, 0.5rem);
+  width: 100%;
+  margin-left: calc(var(--sidebar-submenu-indent, 1rem) * var(--submenu-indent-level, 1));
+}
+
+/* === Submenu Trigger (Parent Item Style) === */
+
+.submenu-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--sidebar-gap, 0.5rem);
+  padding: var(--sidebar-item-padding, 0.5rem 0.75rem);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--sidebar-radius-sm, 0.25rem);
+  color: var(--sidebar-item-foreground, var(--seki-color-text));
+  cursor: pointer;
+  transition: all var(--sidebar-transition, 200ms) ease-out;
+  width: 100%;
+  text-align: left;
+  position: relative;
+  /* 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"]) .submenu-trigger {
+  color: var(--sidebar-item-foreground-dark, #f1f5f9);
+}
+
+.submenu-trigger:hover {
+  background-color: var(--sidebar-item-hover-bg, #f3f4f6);
+}
+
+:host([data-theme="dark"]) .submenu-trigger:hover {
+  background-color: var(--sidebar-item-hover-bg-dark, #27272a);
+}
+
+.submenu-trigger:focus-visible {
+  outline: 2px solid var(--sidebar-primary, #3b82f6);
+  outline-offset: -2px;
+}
+
+.submenu-trigger:active {
+  background-color: var(--sidebar-item-active-bg, #e0e7ff);
+}
+
+:host([data-theme="dark"]) .submenu-trigger:active {
+  background-color: var(--sidebar-item-active-bg-dark, #3f3f46);
+}
+
+/* === Trigger Icon (Submenu Item Icon) === */
+
+.submenu-trigger-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.submenu-trigger-label ::slotted(*) {
+  width: 100%;
+  height: 100%;
+}
+
+/* === Trigger Text (Submenu Item Label) === */
+
+.submenu-trigger-text {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: opacity var(--sidebar-transition, 200ms) ease-linear;
+}
+
+/* When parent sidebar is in icon-only mode, hide the text */
+:host-context(seki-sidebar[data-collapse-mode="icon"]) .submenu-trigger-text {
+  opacity: 0;
+  width: 0;
+  overflow: hidden;
+}
+
+/* === Trigger Expand Arrow === */
+
+.submenu-trigger-icon {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  transition: transform var(--sidebar-transition, 200ms) ease-out;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+/* Arrow rotates 90deg when submenu is EXPANDED (not collapsed) */
+:host([data-collapsed="false"]) .submenu-trigger-icon {
+  transform: rotate(90deg);
+}
+
+/* === Submenu Content Container === */
+
+.submenu-content {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--sidebar-gap, 0.5rem);
+  max-height: auto;
+  overflow: hidden;
+  transition: max-height var(--sidebar-transition, 200ms) ease-out,
+              opacity var(--sidebar-transition, 200ms) ease-out;
+}
+
+.submenu-content ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sidebar-gap, 0.5rem);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+/* When submenu is collapsed, hide content with animation */
+:host([data-collapsed="true"]) .submenu-content {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  margin-bottom: 0;
+}
+
+/* When submenu is expanded, show content */
+:host([data-collapsed="false"]) .submenu-content {
+  max-height: 10000px;
+  opacity: 1;
+  overflow: visible;
+}
+
+/* === Tooltip/Hover Behavior for Icon-Only Mode === */
+
+/* When parent sidebar is in icon-only mode, show tooltip on hover */
+:host-context(seki-sidebar[data-collapse-mode="icon"]) .submenu-trigger::after {
+  content: attr(title);
+  position: absolute;
+  left: calc(100% + 0.5rem);
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: var(--sidebar-tooltip-bg, #1f2937);
+  color: var(--sidebar-tooltip-text, #ffffff);
+  padding: 0.375rem 0.625rem;
+  border-radius: var(--sidebar-radius-sm, 0.25rem);
+  white-space: nowrap;
+  z-index: 1000;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--sidebar-transition, 200ms) ease-out;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  /* Use built-in typography */
+  font-size: var(--seki-font-size-xs);
+  font-weight: var(--seki-font-weight-medium);
+  font-family: var(--seki-font-sans);
+}
+
+:host-context(seki-sidebar[data-theme="dark"]) .submenu-trigger::after {
+  background-color: var(--sidebar-tooltip-bg-dark, #27272a);
+  color: var(--sidebar-tooltip-text-dark, #fafafa);
+}
+
+:host-context(seki-sidebar[data-collapse-mode="icon"]) .submenu-trigger:hover::after,
+:host-context(seki-sidebar[data-collapse-mode="icon"]) .submenu-trigger:focus-visible::after {
+  opacity: 1;
+}
+
+/* === Animations === */
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+    margin-bottom: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: 10000px;
+    margin-bottom: 0;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 1;
+    max-height: 10000px;
+    margin-bottom: 0;
+  }
+  to {
+    opacity: 0;
+    max-height: 0;
+    margin-bottom: 0;
+  }
+}
+
+/* === Print Styles === */
+
+@media print {
+  .submenu-trigger-icon {
+    display: none;
+  }
+
+  :host([data-collapsed="true"]) .submenu-content {
+    max-height: none !important;
+    opacity: 1 !important;
+    overflow: visible !important;
+    display: block !important;
+  }
+}
+
+/* === High Contrast Mode Support === */
+
+@media (prefers-contrast: more) {
+  .submenu-trigger {
+    border: 1px solid transparent;
+  }
+
+  .submenu-trigger:focus-visible {
+    border-color: var(--sidebar-primary, #3b82f6);
+  }
+
+  .submenu-trigger-icon {
+    border: 1px solid currentColor;
+    border-radius: 2px;
+  }
+}
+
+/* === Reduced Motion Support === */
+
+@media (prefers-reduced-motion: reduce) {
+  .submenu-trigger,
+  .submenu-trigger-icon,
+  .submenu-trigger-text,
+  .submenu-content {
+    transition: none;
+    animation: none;
+  }
+}
+
+/* === Mobile/Responsive Adjustments === */
+
+@media (max-width: 768px) {
+  .submenu-wrapper {
+    margin-left: var(--sidebar-submenu-indent-mobile, 0.75rem);
+  }
+
+  .submenu-trigger-label {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .submenu-trigger {
+    padding: var(--sidebar-item-padding-mobile, 0.5rem 0.5rem);
+  }
+
+  /* On mobile, when sidebar is in icon mode, show tooltip below instead of to the right */
+  :host-context(seki-sidebar[data-collapse-mode="icon"]) .submenu-trigger::after {
+    left: 50%;
+    top: calc(100% + 0.25rem);
+    transform: translateX(-50%);
+  }
+}
+
+/* ============================================================================
+   Floating Variant Submenu Styles
+   ============================================================================ */
+
+/* When parent sidebar is floating variant, submenus display as popovers */
+:host-context(seki-sidebar[data-variant="floating"]) .submenu-wrapper {
+  position: relative;
+}
+
+:host-context(seki-sidebar[data-variant="floating"]) .submenu-content {
+  position: absolute;
+  top: 0;
+  left: calc(100% + 0.25rem);
+  min-width: 200px;
+  background-color: var(--sidebar-bg, #f9fafb);
+  border: 1px solid var(--sidebar-border, #e5e7eb);
+  border-radius: var(--sidebar-radius-sm, 0.375rem);
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  padding: var(--sidebar-padding, 0.5rem);
+  margin: 0;
+}
+
+:host-context(seki-sidebar[data-variant="floating"][data-theme="dark"]) .submenu-content {
+  background-color: var(--sidebar-bg-dark, #1f2937);
+  border-color: var(--sidebar-border-dark, #374151);
+}
+
+/* When collapsed in floating variant, hide the popover */
+:host-context(seki-sidebar[data-variant="floating"]) :host([data-collapsed="true"]) .submenu-content {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity var(--sidebar-transition, 200ms) ease-out,
+              visibility var(--sidebar-transition, 200ms) ease-out;
+}
+
+/* When expanded in floating variant, show the popover */
+:host-context(seki-sidebar[data-variant="floating"]) :host([data-collapsed="false"]) .submenu-content {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: opacity var(--sidebar-transition, 200ms) ease-out,
+              visibility var(--sidebar-transition, 200ms) ease-out;
+}
+
+/* Remove indentation for floating variant submenus since they're positioned absolutely */
+:host-context(seki-sidebar[data-variant="floating"]) .submenu-wrapper {
+  margin-left: 0;
+}
+
+/* Adjust submenu content layout for floating variant */
+:host-context(seki-sidebar[data-variant="floating"]) .submenu-content ul {
+  flex-direction: column;
+  gap: var(--sidebar-gap, 0.5rem);
+}
+
+/* Floating variant submenu items should have slightly different styling */
+:host-context(seki-sidebar[data-variant="floating"]) .submenu-content li {
+  width: 100%;
+}

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

@@ -0,0 +1,256 @@
+/**
+ * SekiSidebarMenuSub Component
+ * @description Nested submenu container for collapsible menu items
+ * Provides expandable/collapsible sub-navigation structure with support for:
+ * - Multi-level nesting (unlimited depth)
+ * - Smooth animations (200ms transitions)
+ * - Icon-only display when parent sidebar is collapsed
+ * - Tooltip support for collapsed state
+ * - Full keyboard navigation and accessibility
+ * @component
+ * @example
+ * <seki-sidebar-menu-item>
+ *   <span slot="icon">⚙️</span>
+ *   Settings
+ *   <seki-sidebar-menu-sub slot="submenu">
+ *     <seki-sidebar-menu-item href="/settings/profile">
+ *       <span slot="icon">👤</span>
+ *       Profile
+ *     </seki-sidebar-menu-item>
+ *     <seki-sidebar-menu-item href="/settings/security">
+ *       <span slot="icon">🔒</span>
+ *       Security
+ *     </seki-sidebar-menu-item>
+ *   </seki-sidebar-menu-sub>
+ * </seki-sidebar-menu-item>
+ */
+import { h, Host } from "@stencil/core";
+export class SekiSidebarMenuSub {
+    constructor() {
+        /**
+         * Initial collapsed state
+         * @type {boolean}
+         * @default false
+         */
+        this.defaultCollapsed = false;
+        /**
+         * Internal state: whether submenu is collapsed
+         */
+        this.isCollapsed = false;
+        /**
+         * Toggle collapsed state
+         */
+        this.handleToggle = () => {
+            this.isCollapsed = !this.isCollapsed;
+            this.collapsedChange.emit({ isCollapsed: this.isCollapsed });
+        };
+        /**
+         * Handle keyboard navigation
+         * - Enter: toggle submenu
+         * - ArrowDown: focus next submenu item
+         * - ArrowUp: focus previous submenu item
+         * - Escape: close submenu
+         */
+        this.handleKeyDown = (event) => {
+            const content = this.el.querySelector('.submenu-content');
+            const items = content ? Array.from(content.querySelectorAll('[role="menuitem"], a, button')) : [];
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    this.handleToggle();
+                    break;
+                case 'ArrowDown':
+                    event.preventDefault();
+                    if (!this.isCollapsed && items.length > 0) {
+                        items[0].focus();
+                    }
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    if (!this.isCollapsed && items.length > 0) {
+                        items[items.length - 1].focus();
+                    }
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    if (!this.isCollapsed) {
+                        this.isCollapsed = true;
+                        this.collapsedChange.emit({ isCollapsed: true });
+                    }
+                    break;
+            }
+        };
+    }
+    /**
+     * Component lifecycle: initialize state
+     */
+    componentWillLoad() {
+        this.isCollapsed = Boolean(this.defaultCollapsed);
+    }
+    /**
+     * Get current collapsed state
+     */
+    async isCollapsedState() {
+        return Boolean(this.isCollapsed);
+    }
+    /**
+     * Set collapsed state
+     */
+    async setCollapsed(collapsed) {
+        this.isCollapsed = collapsed;
+        this.collapsedChange.emit({ isCollapsed: collapsed });
+    }
+    /**
+     * Render the component
+     */
+    render() {
+        const labelText = this.label || 'Submenu';
+        return (h(Host, { key: '1779e6c0bce966ec710bc019ae6ed4067df3d302', "data-collapsed": this.isCollapsed }, h("div", { key: '254328133fd704ab7d93e51cc1a76eb393c00354', class: "submenu-wrapper" }, h("button", { key: '61b3185705e444d6aa53f10dc7357b7f564dfdc9', class: "submenu-trigger", "aria-expanded": !this.isCollapsed, "aria-label": `Toggle ${labelText}`, "aria-controls": "submenu-content", onClick: this.handleToggle, onKeyDown: this.handleKeyDown, type: "button", title: labelText }, h("span", { key: '4ad58cc92ea8287d8811144089ad50c007625c8c', class: "submenu-trigger-label" }, h("slot", { key: '951b2e27a90c1bdcecc3bf1ec056b20085d1f502', name: "icon" })), h("span", { key: '24f5aa65777c565af787cdcfab3b850938c2e028', class: "submenu-trigger-text" }, this.label), h("span", { key: '3409c122f0315c82df9bc838e80838829b9546f0', class: "submenu-trigger-icon", "aria-hidden": "true" }, "\u25B6")), h("div", { key: 'fc369580c63d58790327494c39d29cb714ef4d30', id: "submenu-content", class: "submenu-content", role: "region", "aria-hidden": this.isCollapsed, "aria-label": `${labelText} submenu`, style: {
+                maxHeight: this.isCollapsed ? '0' : 'auto',
+                overflow: this.isCollapsed ? 'hidden' : 'visible',
+            } }, h("ul", { key: 'aca9bc1c8ff43de9fb0c45c86b0b0bca25525940', role: "menu" }, h("slot", { key: '6ccc8c3738fd3232e775d1b61ff5f342435bee18' }))))));
+    }
+    static get is() { return "seki-sidebar-menu-sub"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sidebar-menu-sub.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sidebar-menu-sub.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidebarMenuSubProps['label']",
+                    "resolved": "string | undefined",
+                    "references": {
+                        "SidebarMenuSubProps": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::SidebarMenuSubProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Label for the submenu (shown when expanded)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "defaultCollapsed": {
+                "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": "Initial collapsed state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "default-collapsed",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isCollapsed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "collapsedChange",
+                "name": "collapsedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when collapsed state changes"
+                },
+                "complexType": {
+                    "original": "CollapsedChangeDetail",
+                    "resolved": "CollapsedChangeDetail",
+                    "references": {
+                        "CollapsedChangeDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::CollapsedChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "isCollapsedState": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Get current collapsed state",
+                    "tags": []
+                }
+            },
+            "setCollapsed": {
+                "complexType": {
+                    "signature": "(collapsed: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "collapsed",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set collapsed state",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,25 @@
+/**
+ * SekiSidebarMenu CSS
+ * Styling for menu lists within the sidebar
+ */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.menu-list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--sidebar-gap, 0.5rem);
+}
+
+/* Print styles */
+@media print {
+  :host {
+    display: block;
+  }
+}

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

@@ -0,0 +1,32 @@
+/**
+ * SekiSidebarMenu Component
+ * @description List container for menu items within a sidebar
+ * Provides semantic menu structure with proper ARIA attributes
+ * @component
+ * @example
+ * <seki-sidebar-menu>
+ *   <seki-sidebar-menu-item href="/dashboard">Dashboard</seki-sidebar-menu-item>
+ *   <seki-sidebar-menu-item href="/settings">Settings</seki-sidebar-menu-item>
+ * </seki-sidebar-menu>
+ */
+import { h, Host } from "@stencil/core";
+export class SekiSidebarMenu {
+    /**
+     * Render the component
+     */
+    render() {
+        return (h(Host, { key: '542879d57e0282876798877a04613a178b316d79', role: "navigation" }, h("ul", { key: 'cddecf985ef93eb6f7dac920867cbcfa7fc90eaf', class: "menu-list" }, h("slot", { key: '52781b245fc5dc54e90f9b90c3afa38efbccbac0' }))));
+    }
+    static get is() { return "seki-sidebar-menu"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sidebar-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sidebar-menu.css"]
+        };
+    }
+}