@sekiui/elements 0.0.57 → 0.0.60

package/dist/collection/components/select-option/seki-select-option.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/select-option/seki-select-option.js

@@ -75,7 +75,7 @@ export class SekiSelectOption {
         const selectContext = this.getSelectContext();
         const isSelected = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isValueSelected(this.value)) || false;
         const isFocused = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.focusedOptionValue) === this.value;
-        return (h(Host, { key: 'a094d52197f71ea608c5d6864a9e1144c5cbb214' }, h("div", { key: '664ef7d213d976c25575dacec8fedf4270127894', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: 'bf8997e6251d4bb205631c316e0bb61cc7dacafc', class: "option-label" }, h("slot", { key: 'cac04b726bb0a021e019ec305dbf133f9ec6eafc' })), isSelected && (h("span", { key: '07e161e78770a780978e82e372d982a5ed8ee183', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '3ff2360575e24d76753d9c73690fc08851f7d2ce', name: "selected-indicator" }, h("svg", { key: '2379ac109dd1a3acb2645d3ea9040329670b5ce4', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '99acd47c4077be2b703022441a283b74508271c7', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '4cdd85692cc503cafa31300f8744102223987337' }, h("div", { key: '4ddfc3f3362708ddfd177117d8cc41e691274c44', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '031afc27ec527d600c67b1eda6e90cd3c8cab96d', class: "option-label" }, h("slot", { key: '71d4b910f10114e5b6baa57673078172af331c2b' })), isSelected && (h("span", { key: '93c7e76e7ab8f589f070bd03b1d9ee110480f5f1', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: 'c035a4ebb4e4d0a94c07ae70423476d6ba09cf89', name: "selected-indicator" }, h("svg", { key: 'fa2a4b375cbbfe5e0e7b358d52ddb1ab4cd794a2', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '75c363fadeb56661aa18e390297d5f2cfcae78b9', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "seki-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select-trigger/seki-select-trigger.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 {