@sekiui/elements 0.0.59 → 0.0.61

package/dist/collection/components/breadcrumb/seki-breadcrumb.css

@@ -0,0 +1,125 @@
+/* Breadcrumb Component Styles with Design Tokens */
+
+/* Root breadcrumb styles */
+:host {
+  --seki-breadcrumb-text-color: var(--color-text-secondary, hsl(220 9% 46%));
+  --seki-breadcrumb-link-color: var(--color-text-primary, hsl(220 9% 20%));
+  --seki-breadcrumb-link-hover: var(--color-primary, hsl(220 90% 56%));
+  --seki-breadcrumb-separator-color: var(--color-text-muted, hsl(220 9% 64%));
+  --seki-breadcrumb-font-size: var(--seki-font-size-sm, 14px);
+  --seki-breadcrumb-font-family: var(--seki-font-sans, system-ui, -apple-system, sans-serif);
+  --seki-breadcrumb-gap: 0.375rem;
+
+  display: block;
+}
+
+/* Dark mode support */
+:host([data-theme='dark']) {
+  --seki-breadcrumb-text-color: var(--color-text-secondary-dark, hsl(215 20% 65%));
+  --seki-breadcrumb-link-color: var(--color-text-primary-dark, hsl(215 20% 85%));
+  --seki-breadcrumb-link-hover: var(--color-primary-dark, hsl(220 90% 70%));
+  --seki-breadcrumb-separator-color: var(--color-text-muted-dark, hsl(215 20% 45%));
+}
+
+/* Nav wrapper */
+.seki-breadcrumb {
+  font-family: var(--seki-breadcrumb-font-family);
+  font-size: var(--seki-breadcrumb-font-size);
+}
+
+/* Breadcrumb list - ordered list */
+.seki-breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--seki-breadcrumb-gap);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Breadcrumb item */
+.seki-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--seki-breadcrumb-gap);
+}
+
+/* Breadcrumb link */
+.seki-breadcrumb-link {
+  color: var(--seki-breadcrumb-text-color);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.seki-breadcrumb-link:hover {
+  color: var(--seki-breadcrumb-link-hover);
+}
+
+.seki-breadcrumb-link:focus-visible {
+  outline: 2px solid var(--seki-breadcrumb-link-hover);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Breadcrumb page (current) */
+.seki-breadcrumb-page {
+  color: var(--seki-breadcrumb-link-color);
+  font-weight: var(--seki-font-weight-normal, 400);
+}
+
+/* Breadcrumb separator */
+.seki-breadcrumb-separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--seki-breadcrumb-separator-color);
+}
+
+.seki-breadcrumb-separator svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+/* Breadcrumb ellipsis */
+.seki-breadcrumb-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  color: var(--seki-breadcrumb-text-color);
+}
+
+.seki-breadcrumb-ellipsis svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Screen reader only text */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  .seki-breadcrumb-link:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-breadcrumb-link {
+    transition: none;
+  }
+}

package/dist/collection/components/breadcrumb/seki-breadcrumb.js

@@ -0,0 +1,69 @@
+import { h } from "@stencil/core";
+/**
+ * seki-breadcrumb: Root breadcrumb navigation component
+ *
+ * @component Breadcrumb
+ * @example
+ * <seki-breadcrumb>
+ *   <seki-breadcrumb-list>
+ *     <seki-breadcrumb-item>
+ *       <seki-breadcrumb-link href="/">Home</seki-breadcrumb-link>
+ *     </seki-breadcrumb-item>
+ *     <seki-breadcrumb-separator></seki-breadcrumb-separator>
+ *     <seki-breadcrumb-item>
+ *       <seki-breadcrumb-page>Current</seki-breadcrumb-page>
+ *     </seki-breadcrumb-item>
+ *   </seki-breadcrumb-list>
+ * </seki-breadcrumb>
+ */
+export class SekiBreadcrumb {
+    constructor() {
+        /**
+         * Accessible label for the breadcrumb navigation
+         * @default 'breadcrumb'
+         */
+        this.label = 'breadcrumb';
+    }
+    render() {
+        return (h("nav", { key: '7923bd2be234aca8cfc32e1d371429afcb6c1f77', "aria-label": this.label, class: "seki-breadcrumb", part: "breadcrumb" }, h("slot", { key: '4f0cc62f86861d4258ef2f779dd660cb487a7ac8' })));
+    }
+    static get is() { return "seki-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-breadcrumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'breadcrumb'"
+                        }],
+                    "text": "Accessible label for the breadcrumb navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'breadcrumb'"
+            }
+        };
+    }
+}

package/dist/collection/components/button/seki-button.css

@@ -383,6 +383,80 @@
   --seki-radius-xl: 1rem;      /* 16px */
 }
 
+/**
+ * SekiUI Design Tokens - Sidebar
+ * Based on shadcn/ui sidebar component
+ */
+
+/* =============================================================================
+   SIDEBAR TOKENS (Layer 3: Component-Specific)
+   ============================================================================= */
+
+:host {
+  /* Sidebar Sizing */
+  --seki-sidebar-width: 16rem;
+  --seki-sidebar-width-icon: 3rem;
+  --seki-sidebar-width-mobile: 18rem;
+
+  /* Sidebar Colors - Light Mode */
+  --seki-sidebar-background: hsl(0, 0%, 98.5%);
+  --seki-sidebar-foreground: hsl(0, 0%, 9%);
+  --seki-sidebar-primary: hsl(0, 0%, 12%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 97%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 12%);
+  --seki-sidebar-border: hsl(0, 0%, 90%);
+  --seki-sidebar-ring: hsl(0, 0%, 64%);
+
+  /* Menu Button Sizing */
+  --seki-sidebar-menu-button-height: 2rem;
+  --seki-sidebar-menu-button-height-lg: 3rem;
+  --seki-sidebar-menu-button-padding: 0.5rem;
+  --seki-sidebar-menu-button-gap: 0.5rem;
+  --seki-sidebar-menu-button-radius: var(--seki-radius-md, 0.375rem);
+
+  /* Menu Sub */
+  --seki-sidebar-menu-sub-padding-left: 1.75rem;
+  --seki-sidebar-menu-sub-border-width: 1px;
+
+  /* Group */
+  --seki-sidebar-group-padding: 0.5rem;
+  --seki-sidebar-group-label-height: 2rem;
+  --seki-sidebar-group-label-padding: 0.5rem;
+
+  /* Header/Footer */
+  --seki-sidebar-header-height: auto;
+  --seki-sidebar-footer-height: auto;
+  --seki-sidebar-header-padding: 0.5rem;
+  --seki-sidebar-footer-padding: 0.5rem;
+
+  /* Content */
+  --seki-sidebar-content-padding: 0.5rem;
+
+  /* Rail */
+  --seki-sidebar-rail-width: 1rem;
+
+  /* Transitions */
+  --seki-sidebar-transition-duration: 200ms;
+  --seki-sidebar-transition-timing: ease-in-out;
+
+  /* Mobile */
+  --seki-sidebar-mobile-breakpoint: 768px;
+  --seki-sidebar-overlay-bg: hsla(0, 0%, 0%, 0.8);
+}
+
+/* Dark Mode Sidebar Tokens */
+:host([data-theme='dark']) {
+  --seki-sidebar-background: hsl(0, 0%, 12%);
+  --seki-sidebar-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-primary: hsl(264, 100%, 60%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 18%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-border: hsla(0, 0%, 100%, 0.1);
+  --seki-sidebar-ring: hsl(0, 0%, 40%);
+}
+
 
 
 :host {

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

@@ -27,7 +27,7 @@ export class SekiButton {
         }
     }
     render() {
-        return (h("button", { key: '17841111481259910cd72cdcb861872918c86452', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.ariaLabel }, h("slot", { key: '1a4dfb3cb9eb88af7065cd765c0056a93c94ecc1' })));
+        return (h("button", { key: '38c49bea12a1dded4609cd64bd397e53c58e6014', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.ariaLabel }, h("slot", { key: '127f27a6236b0fc6b9f75124a425aca109f9fed4' })));
     }
     static get is() { return "seki-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-action.js

@@ -10,7 +10,7 @@ import { h } from "@stencil/core";
  */
 export class CardAction {
     render() {
-        return (h("div", { key: 'c8f99363f23bbd6c94f06e0c249f0c89dc247e29', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: 'f85df57714da50c418e8f49c4e2752743c1baddf' })));
+        return (h("div", { key: '9624fe74a63be86c764c0289c8794f8f53cab0d0', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: '6c83e39d38c3794fa030ae023e473cbaebd89bf6' })));
     }
     static get is() { return "seki-card-action"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ import { h } from "@stencil/core";
  */
 export class CardContent {
     render() {
-        return (h("div", { key: '64b134724c78946fb4bec0c7102996bdcdeb494f', class: `card-content ${this.class || ''}` }, h("slot", { key: 'ce65df86686f424f2faf7d43a5f31e00320be6d7' })));
+        return (h("div", { key: '6268ce1ecc77abd5fb65fd8602966f0428648770', class: `card-content ${this.class || ''}` }, h("slot", { key: '01c4ec17c1ad4d1880b60a5e0c2dac4c9cb2af35' })));
     }
     static get is() { return "seki-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-description.js

@@ -8,7 +8,7 @@ import { h } from "@stencil/core";
  */
 export class CardDescription {
     render() {
-        return (h("p", { key: 'b85330f24357ad2d6bf9335b75c52a38857663b3', class: `card-description ${this.class || ''}` }, h("slot", { key: '538d5ac32d92396c876ecbba6d759a3e39cae1a0' })));
+        return (h("p", { key: '50fab4e16bf3eb6f7e15b9699c042e60e63ef82c', class: `card-description ${this.class || ''}` }, h("slot", { key: '604955c4e41d4401684b0b0cff7c298850670830' })));
     }
     static get is() { return "seki-card-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-footer.js

@@ -18,7 +18,7 @@ export class CardFooter {
         this.alignment = 'flex-start';
     }
     render() {
-        return (h("footer", { key: 'f6c603913f8e2fbbb71145ed5c875ee584a9c03f', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: 'b6a9e710e1deb6aa033b19f147b3ccdca07fa03c' })));
+        return (h("footer", { key: '2391b4b3f62ed8c63e887913b5c1040f5f17baa2', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: 'a2ebbf322b5e332c682595f5bcbaf91de2e7b0a9' })));
     }
     static get is() { return "seki-card-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ import { h } from "@stencil/core";
  */
 export class CardHeader {
     render() {
-        return (h("header", { key: 'acf7629580ac04c641e5aac60f08cff19a6166ed', class: `card-header ${this.class || ''}` }, h("slot", { key: '39b9f7d682351be07ee9a1379fed77802fa172a1' })));
+        return (h("header", { key: 'bd96b2fed91554baab84bf0401ac4d02cef78581', class: `card-header ${this.class || ''}` }, h("slot", { key: '2f78099e1467bdcede557cdaf4e84d942fff682f' })));
     }
     static get is() { return "seki-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card.css

@@ -383,6 +383,80 @@
   --seki-radius-xl: 1rem;      /* 16px */
 }
 
+/**
+ * SekiUI Design Tokens - Sidebar
+ * Based on shadcn/ui sidebar component
+ */
+
+/* =============================================================================
+   SIDEBAR TOKENS (Layer 3: Component-Specific)
+   ============================================================================= */
+
+:host {
+  /* Sidebar Sizing */
+  --seki-sidebar-width: 16rem;
+  --seki-sidebar-width-icon: 3rem;
+  --seki-sidebar-width-mobile: 18rem;
+
+  /* Sidebar Colors - Light Mode */
+  --seki-sidebar-background: hsl(0, 0%, 98.5%);
+  --seki-sidebar-foreground: hsl(0, 0%, 9%);
+  --seki-sidebar-primary: hsl(0, 0%, 12%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 97%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 12%);
+  --seki-sidebar-border: hsl(0, 0%, 90%);
+  --seki-sidebar-ring: hsl(0, 0%, 64%);
+
+  /* Menu Button Sizing */
+  --seki-sidebar-menu-button-height: 2rem;
+  --seki-sidebar-menu-button-height-lg: 3rem;
+  --seki-sidebar-menu-button-padding: 0.5rem;
+  --seki-sidebar-menu-button-gap: 0.5rem;
+  --seki-sidebar-menu-button-radius: var(--seki-radius-md, 0.375rem);
+
+  /* Menu Sub */
+  --seki-sidebar-menu-sub-padding-left: 1.75rem;
+  --seki-sidebar-menu-sub-border-width: 1px;
+
+  /* Group */
+  --seki-sidebar-group-padding: 0.5rem;
+  --seki-sidebar-group-label-height: 2rem;
+  --seki-sidebar-group-label-padding: 0.5rem;
+
+  /* Header/Footer */
+  --seki-sidebar-header-height: auto;
+  --seki-sidebar-footer-height: auto;
+  --seki-sidebar-header-padding: 0.5rem;
+  --seki-sidebar-footer-padding: 0.5rem;
+
+  /* Content */
+  --seki-sidebar-content-padding: 0.5rem;
+
+  /* Rail */
+  --seki-sidebar-rail-width: 1rem;
+
+  /* Transitions */
+  --seki-sidebar-transition-duration: 200ms;
+  --seki-sidebar-transition-timing: ease-in-out;
+
+  /* Mobile */
+  --seki-sidebar-mobile-breakpoint: 768px;
+  --seki-sidebar-overlay-bg: hsla(0, 0%, 0%, 0.8);
+}
+
+/* Dark Mode Sidebar Tokens */
+:host([data-theme='dark']) {
+  --seki-sidebar-background: hsl(0, 0%, 12%);
+  --seki-sidebar-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-primary: hsl(264, 100%, 60%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 18%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-border: hsla(0, 0%, 100%, 0.1);
+  --seki-sidebar-ring: hsl(0, 0%, 40%);
+}
+
 
 
 /* Card Component Design Tokens & Styles */

package/dist/collection/components/card/seki-card.js

@@ -13,7 +13,7 @@ import { h } from "@stencil/core";
  */
 export class Card {
     render() {
-        return (h("section", { key: 'aad54a1896d99e1e0420b27e39d27a128a50a3cc', class: this.class }, h("slot", { key: 'c7de90a03488abb919e7bc67c2f4d40a3edcec56' })));
+        return (h("section", { key: 'e923b22f0199ddbd0aea89bc75eaa9142770491b', class: this.class }, h("slot", { key: '55135243be3f0dcbb0cd7b1c160364d204736bea' })));
     }
     static get is() { return "seki-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field/seki-field.css

@@ -383,6 +383,80 @@
   --seki-radius-xl: 1rem;      /* 16px */
 }
 
+/**
+ * SekiUI Design Tokens - Sidebar
+ * Based on shadcn/ui sidebar component
+ */
+
+/* =============================================================================
+   SIDEBAR TOKENS (Layer 3: Component-Specific)
+   ============================================================================= */
+
+:host {
+  /* Sidebar Sizing */
+  --seki-sidebar-width: 16rem;
+  --seki-sidebar-width-icon: 3rem;
+  --seki-sidebar-width-mobile: 18rem;
+
+  /* Sidebar Colors - Light Mode */
+  --seki-sidebar-background: hsl(0, 0%, 98.5%);
+  --seki-sidebar-foreground: hsl(0, 0%, 9%);
+  --seki-sidebar-primary: hsl(0, 0%, 12%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 97%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 12%);
+  --seki-sidebar-border: hsl(0, 0%, 90%);
+  --seki-sidebar-ring: hsl(0, 0%, 64%);
+
+  /* Menu Button Sizing */
+  --seki-sidebar-menu-button-height: 2rem;
+  --seki-sidebar-menu-button-height-lg: 3rem;
+  --seki-sidebar-menu-button-padding: 0.5rem;
+  --seki-sidebar-menu-button-gap: 0.5rem;
+  --seki-sidebar-menu-button-radius: var(--seki-radius-md, 0.375rem);
+
+  /* Menu Sub */
+  --seki-sidebar-menu-sub-padding-left: 1.75rem;
+  --seki-sidebar-menu-sub-border-width: 1px;
+
+  /* Group */
+  --seki-sidebar-group-padding: 0.5rem;
+  --seki-sidebar-group-label-height: 2rem;
+  --seki-sidebar-group-label-padding: 0.5rem;
+
+  /* Header/Footer */
+  --seki-sidebar-header-height: auto;
+  --seki-sidebar-footer-height: auto;
+  --seki-sidebar-header-padding: 0.5rem;
+  --seki-sidebar-footer-padding: 0.5rem;
+
+  /* Content */
+  --seki-sidebar-content-padding: 0.5rem;
+
+  /* Rail */
+  --seki-sidebar-rail-width: 1rem;
+
+  /* Transitions */
+  --seki-sidebar-transition-duration: 200ms;
+  --seki-sidebar-transition-timing: ease-in-out;
+
+  /* Mobile */
+  --seki-sidebar-mobile-breakpoint: 768px;
+  --seki-sidebar-overlay-bg: hsla(0, 0%, 0%, 0.8);
+}
+
+/* Dark Mode Sidebar Tokens */
+:host([data-theme='dark']) {
+  --seki-sidebar-background: hsl(0, 0%, 12%);
+  --seki-sidebar-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-primary: hsl(264, 100%, 60%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 18%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-border: hsla(0, 0%, 100%, 0.1);
+  --seki-sidebar-ring: hsl(0, 0%, 40%);
+}
+
 
 
 :host {

package/dist/collection/components/field/seki-field.js

@@ -32,7 +32,7 @@ export class SekiField {
     }
     render() {
         const hasMultiple = this.hasMultipleControls();
-        return (h(Host, { key: '4d4811ebe41e0ac3103d3c2e6057679556d9ea8f', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: 'de3078e15975b74d5daf8a898906eac941859a28', class: "field" }, h("div", { key: '654fa59185f2e28a41ac17b41f3bccbeeddeaeeb', class: "field-label" }, h("slot", { key: '0e5d795106bcbd6741894d384c2458bd5835c9f2', name: "label" })), h("div", { key: '9389fbfe76438bfc9de827608369463415cfe813', class: "field-control" }, h("slot", { key: 'df767c630d1c5d74a70e602106280af19359becd' })), h("div", { key: '9c1f633ffd2baddfc3a35218a2c6556bdc2408e3', class: "field-description" }, h("slot", { key: 'b25d944acc695145a7aac0df0e0ea9ba229c950d', name: "description" })), h("div", { key: 'e620012a73cffa6e7e555d43f48c3f2dddf0e84b', class: "field-error" }, h("slot", { key: 'e09a83a71f180f74e981333f9516c6652e8e1751', name: "error" })))));
+        return (h(Host, { key: 'f3a647b44f6e6cdefebfb0dcc1bf8dad0eeac809', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: '90b4dea0201e50d4d5d7412849ee509c7303a6a2', class: "field" }, h("div", { key: 'ce62a386dca006c0b73df49dd4ca700612c968a0', class: "field-label" }, h("slot", { key: '835c99c63b883493725478f91ce18941e148c605', name: "label" })), h("div", { key: 'a1e48c3f88ca68d3016db5c41c4119bc429e724f', class: "field-control" }, h("slot", { key: '10f0f627f36fc9a4b10bf837a1368ab54e7e99c1' })), h("div", { key: 'ad41ab4f324c401e0ebdd321e980e7ff79d0e6ce', class: "field-description" }, h("slot", { key: '0b224e8376545c18ecf3519e9dc3b9800ad3f70f', name: "description" })), h("div", { key: '305738e893aae3afe6b227f18cb421b408d082a5', class: "field-error" }, h("slot", { key: '55d8751da769c191a43797ef8145566be8f169f9', name: "error" })))));
     }
     static get is() { return "seki-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-description/seki-field-description.css

@@ -383,6 +383,80 @@
   --seki-radius-xl: 1rem;      /* 16px */
 }
 
+/**
+ * SekiUI Design Tokens - Sidebar
+ * Based on shadcn/ui sidebar component
+ */
+
+/* =============================================================================
+   SIDEBAR TOKENS (Layer 3: Component-Specific)
+   ============================================================================= */
+
+:host {
+  /* Sidebar Sizing */
+  --seki-sidebar-width: 16rem;
+  --seki-sidebar-width-icon: 3rem;
+  --seki-sidebar-width-mobile: 18rem;
+
+  /* Sidebar Colors - Light Mode */
+  --seki-sidebar-background: hsl(0, 0%, 98.5%);
+  --seki-sidebar-foreground: hsl(0, 0%, 9%);
+  --seki-sidebar-primary: hsl(0, 0%, 12%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 97%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 12%);
+  --seki-sidebar-border: hsl(0, 0%, 90%);
+  --seki-sidebar-ring: hsl(0, 0%, 64%);
+
+  /* Menu Button Sizing */
+  --seki-sidebar-menu-button-height: 2rem;
+  --seki-sidebar-menu-button-height-lg: 3rem;
+  --seki-sidebar-menu-button-padding: 0.5rem;
+  --seki-sidebar-menu-button-gap: 0.5rem;
+  --seki-sidebar-menu-button-radius: var(--seki-radius-md, 0.375rem);
+
+  /* Menu Sub */
+  --seki-sidebar-menu-sub-padding-left: 1.75rem;
+  --seki-sidebar-menu-sub-border-width: 1px;
+
+  /* Group */
+  --seki-sidebar-group-padding: 0.5rem;
+  --seki-sidebar-group-label-height: 2rem;
+  --seki-sidebar-group-label-padding: 0.5rem;
+
+  /* Header/Footer */
+  --seki-sidebar-header-height: auto;
+  --seki-sidebar-footer-height: auto;
+  --seki-sidebar-header-padding: 0.5rem;
+  --seki-sidebar-footer-padding: 0.5rem;
+
+  /* Content */
+  --seki-sidebar-content-padding: 0.5rem;
+
+  /* Rail */
+  --seki-sidebar-rail-width: 1rem;
+
+  /* Transitions */
+  --seki-sidebar-transition-duration: 200ms;
+  --seki-sidebar-transition-timing: ease-in-out;
+
+  /* Mobile */
+  --seki-sidebar-mobile-breakpoint: 768px;
+  --seki-sidebar-overlay-bg: hsla(0, 0%, 0%, 0.8);
+}
+
+/* Dark Mode Sidebar Tokens */
+:host([data-theme='dark']) {
+  --seki-sidebar-background: hsl(0, 0%, 12%);
+  --seki-sidebar-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-primary: hsl(264, 100%, 60%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 18%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-border: hsla(0, 0%, 100%, 0.1);
+  --seki-sidebar-ring: hsl(0, 0%, 40%);
+}
+
 
 
 :host {

package/dist/collection/components/field-description/seki-field-description.js

@@ -29,7 +29,7 @@ export class SekiFieldDescription {
         return this.componentId;
     }
     render() {
-        return (h("div", { key: 'fa1459a08d5673e513a473af92095034c1c44652', id: this.componentId, class: "description" }, h("slot", { key: '51b19301a0d3a89e7b02eff97f4995765e918f2c' })));
+        return (h("div", { key: '1e9c71c71b85cafe379a2fea13ddb5ad729ff588', id: this.componentId, class: "description" }, h("slot", { key: '92cfc5d4e834ec82252b1f86f359b65880714503' })));
     }
     static get is() { return "seki-field-description"; }
     static get encapsulation() { return "shadow"; }