@sekiui/elements 0.0.59 → 0.0.61

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

@@ -49,7 +49,7 @@ export class SekiFieldError {
     }
     render() {
         const style = this.visible ? {} : { display: 'none' };
-        return (h("div", { key: '62c9745e9eebb55e229bbf69ebb4d0eadd78a322', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: 'bcba32aa1317fdb326d769815f09f253573cf4b1' })));
+        return (h("div", { key: '9bde8fbbc4cd7be373a7c753f40b876b06b37ea0', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: 'c89ee4466dfa36bbdd2a1b586206ca97fdaca33c' })));
     }
     static get is() { return "seki-field-error"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class SekiFieldGroup {
         const style = {
             '--seki-field-group-gap': this.gap,
         };
-        return (h("div", { key: 'e21f5d7fb8ab417f1897a7ffc4a558b2c568c672', class: "field-group", style: style }, h("slot", { key: '8c13a1e4bcc3a147527f742e0049b39c4276a909' })));
+        return (h("div", { key: '7362234ed36f196cf58d5c5a259c226466f668ab', class: "field-group", style: style }, h("slot", { key: '0dccef3a8e0bb25de4765c6f2174f31c771186d5' })));
     }
     static get is() { return "seki-field-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class SekiFieldLabel {
     }
     render() {
         const labelProps = this.htmlFor ? { for: this.htmlFor } : {};
-        return (h("label", Object.assign({ key: 'bc9830ee6d5327a8851f85fb44a0562c8e1b0c9b' }, labelProps), h("slot", { key: '6109afa68d65d66e6ac41c28d0242587855daa8a' }), this.required && h("span", { key: 'faa5a34cff108897e74b094804779d191ce57a17', class: "required-indicator" }, " *")));
+        return (h("label", Object.assign({ key: '5ac3e20bcd8766d94cf8087e190c198b811b006d' }, labelProps), h("slot", { key: 'b0c59d2f4eb50457551bbea3c2dec56e807ba76e' }), this.required && h("span", { key: '9f97b0a46495c104ae42621883830085ef9ecd85', class: "required-indicator" }, " *")));
     }
     static get is() { return "seki-field-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiFieldLegend {
     render() {
-        return (h("legend", { key: '271276619ab1898872e15cebf11d43070b563443' }, h("slot", { key: '47a9c3f06f82040a16ca2981f6560df317b13e8d' })));
+        return (h("legend", { key: 'cd4192deb3885481b0ae0f8dc9b2b9bd3906ff0c' }, h("slot", { key: '287e4fe8b9e5d0f5b7828da40ab00cd59a35d548' })));
     }
     static get is() { return "seki-field-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class SekiFieldset {
         this.disabled = false;
     }
     render() {
-        return (h("fieldset", { key: '45e6f651cd2e85c7c48c440e48bee99a559ddee6', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '3aa832dbcf6b87be83c2d1d7774ffe0cb59c0550', name: "legend" }), h("div", { key: 'febb1795ea408a6ddb94c0cc03bc78622809672e', class: "fieldset-content" }, h("slot", { key: '4807686cd487c9330f1dadc4b145986f78347eea' }))));
+        return (h("fieldset", { key: '34285dac5da09f995bfafbcac4ba1ee83e54aab0', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '34fc56641ddf0674209bc9741d7deb30962107e5', name: "legend" }), h("div", { key: 'cad20f6bebb5eda89d7d89b9e53fb67624748ace', class: "fieldset-content" }, h("slot", { key: 'e04fd7ca908dc7ba8c740fc15b67f1068230dcdf' }))));
     }
     static get is() { return "seki-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class SekiInput {
         }
     }
     render() {
-        return (h("input", { key: 'a45cad3b7568ea245c39cbc972ff01afd601cf72', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        return (h("input", { key: 'cc7ba7d2045db928a5002702359f2af6b9b46362', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     static get is() { return "seki-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-content: Content container for pagination items
+ *
+ * @component PaginationContent
+ */
+export class SekiPaginationContent {
+    render() {
+        return (h("ul", { key: '1535dad40e5e2b3d7fc31cfc94f71353a20937df', class: "seki-pagination-content", part: "content" }, h("slot", { key: '8bacb2e13f3f0b4a2a95b3ddfa7700a1e335b05e' })));
+    }
+    static get is() { return "seki-pagination-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+}

package/dist/collection/components/pagination/seki-pagination-ellipsis.js

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-ellipsis: Visual indicator for skipped pages
+ *
+ * @component PaginationEllipsis
+ */
+export class SekiPaginationEllipsis {
+    render() {
+        return (h("span", { key: '9a9fc21af9442c16c209bc59f2b4b94090d86cb3', "aria-hidden": "true", class: "seki-pagination-ellipsis", part: "ellipsis" }, h("svg", { key: 'dd5f6ce2c7b60635a141353e9ba63331dca91316', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { key: '05d5089ebfe256de3ea419840968667cfa5baa05', cx: "12", cy: "12", r: "1" }), h("circle", { key: 'ee6e8aca2f67d6aed1e3a8d82303dac1c3f2deab', cx: "19", cy: "12", r: "1" }), h("circle", { key: '6e59711fa2589088ee0773378e511f15190094f6', cx: "5", cy: "12", r: "1" })), h("span", { key: '29c5afcfb7e11381200ffa550cad0eb7e0085f5d', class: "sr-only" }, "More pages")));
+    }
+    static get is() { return "seki-pagination-ellipsis"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+}

package/dist/collection/components/pagination/seki-pagination-item.js

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-item: Individual pagination item wrapper
+ *
+ * @component PaginationItem
+ */
+export class SekiPaginationItem {
+    render() {
+        return (h("li", { key: 'a58aef65168e39720ff40cd00a9cee9d3a4ed102', class: "seki-pagination-item", part: "item" }, h("slot", { key: 'd887cb0dbb35994712c41bd8521cfa6b37f92109' })));
+    }
+    static get is() { return "seki-pagination-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+}