@sekiui/elements 0.0.72 → 0.0.78

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

@@ -0,0 +1,74 @@
+import { Host, h } from "@stencil/core";
+/**
+ * seki-empty: Empty state placeholder component
+ *
+ * @component Empty
+ * @slot icon - Optional icon or illustration
+ * @slot - Default slot for description content
+ * @slot action - Optional action button or link
+ * @example
+ * <seki-empty>
+ *   <span slot="icon">📭</span>
+ *   No results found.
+ *   <seki-button slot="action" variant="outline">Clear filters</seki-button>
+ * </seki-empty>
+ */
+export class SekiEmpty {
+    render() {
+        return (h(Host, { key: 'ac527c0af3cae92a9a033f4d4491438e28d7b22e' }, h("div", { key: '47cefa391634462168bde2fb3a309ca37f3e6d9f', class: "seki-empty", part: "empty", role: "status" }, h("div", { key: '74b0f3a896a75474f53df057eae1d70655a08dec', class: "seki-empty__icon", part: "icon" }, h("slot", { key: 'c8dd81e2e8b9270d1a6d6abcfface89c8be5fb4e', name: "icon" })), this.heading && (h("h3", { key: '9e13bd1ad787629f37774bd8268e1c61ee66778a', class: "seki-empty__title", part: "title" }, this.heading)), this.description && (h("p", { key: '17077a7d12141a945bb83e87f96b744f49ad815f', class: "seki-empty__description", part: "description" }, this.description)), h("div", { key: '9b60cea355987e41bb68be9d7054ebd02a75cedf', class: "seki-empty__content", part: "content" }, h("slot", { key: '068f96672c6ab0bdbd26c829ff4fca05711ef418' })), h("div", { key: '4c2c717593e1957a7f3613d49a5a8ff5dbb72efd', class: "seki-empty__action", part: "action" }, h("slot", { key: 'b3979f89cf8b7d47ee663946fd52efd85bc29f17', name: "action" })))));
+    }
+    static get is() { return "seki-empty"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-empty.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-empty.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Title text for the empty state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text for the empty state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            }
+        };
+    }
+}

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -32,7 +32,7 @@ export class SekiField {
     }
     render() {
         const hasMultiple = this.hasMultipleControls();
-        return (h(Host, { key: '7479a7e7c27a9d1bea98b36bfb0b8e425f5068cf', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: 'e5e0f8441a38b77f2258c790e0985cc8e28bd82f', class: "field" }, h("div", { key: '27b00ceb1bcc94c55350160e0f4b3c268e12f2b3', class: "field-label" }, h("slot", { key: 'ec2d425cf54d90f57c506f8bb0abea25301d14d6', name: "label" })), h("div", { key: '13a595abf8d6b88ba906f4b6259458734147610c', class: "field-control" }, h("slot", { key: '8ba3ce854c6173d5226c4a2fd8c12576b759320c' })), h("div", { key: 'dd8cf0cc5f2877b65b235f2291b64374a070dc0d', class: "field-description" }, h("slot", { key: '70ffaa4714a8a739e959f9beea4924bd077b74ed', name: "description" })), h("div", { key: '465fe5770b03af4ff715a7a518e623aa3a4b9c4f', class: "field-error" }, h("slot", { key: '4f795515ee8a66991e7af8a18575e88fa8fccc98', name: "error" })))));
+        return (h(Host, { key: '70eb9cf6169f122ab19b1fc610ccf5a1a157eec0', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: '13e4c8fbe8a85a456b78fa60a00093d12e9098b8', class: "field" }, h("div", { key: 'd730efeab073b64df6e56e38a8c9a0c0a15acebe', class: "field-label" }, h("slot", { key: '308bd1b765bc4cd1cdcec449ed96332b439601ca', name: "label" })), h("div", { key: 'a3aaa062b3073fc06d34bae6a59dd5e49dbbbcef', class: "field-control" }, h("slot", { key: '817e0b1fd2e87f78cf4d24f7addc421e83e7d491' })), h("div", { key: '78e2f35468cba1527e65b2dfd0fa7914d25d72db', class: "field-description" }, h("slot", { key: '5a349650821988399b795254643a655cd278a02b', name: "description" })), h("div", { key: '970ee1805527fc52ecf5008f9871f66f209b6116', class: "field-error" }, h("slot", { key: 'e280be42810c0830cbebc85472744c7615d342fd', name: "error" })))));
     }
     static get is() { return "seki-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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: '24fcba94d3395b75f7481efb6b0f3aa501487bf5', id: this.componentId, class: "description" }, h("slot", { key: 'd582c824acba3faf8dcf8fcf2ee1d1bea8262c4b' })));
+        return (h("div", { key: 'f6cb4722b423b0f0199112e5e93ffe28c1e93b95', id: this.componentId, class: "description" }, h("slot", { key: '23230cbad9b062e0bc8c35ebffb3d47a42cf5777' })));
     }
     static get is() { return "seki-field-description"; }
     static get encapsulation() { return "shadow"; }

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -20,10 +20,17 @@ export class SekiFieldError {
          * Track previous visible state for aria-live announcements
          */
         this.previousVisible = true;
+        /**
+         * Internal mirror of the `visible` prop.
+         * Written by both external prop changes (@Watch) and the setVisible() method
+         * so that neither path violates Stencil's prop immutability contract.
+         */
+        this._visible = true;
     }
     componentWillLoad() {
         this.componentId = this.errorId || generateId();
         this.previousVisible = this.visible;
+        this._visible = this.visible;
     }
     componentWillUpdate() {
         // Update componentId if errorId prop changes
@@ -33,6 +40,7 @@ export class SekiFieldError {
     }
     handleVisibleChange(newValue) {
         this.previousVisible = newValue;
+        this._visible = newValue;
     }
     /**
      * Get the component's ID
@@ -45,11 +53,11 @@ export class SekiFieldError {
      * Programmatically show/hide the error message
      */
     async setVisible(visible) {
-        this.visible = visible;
+        this._visible = visible;
     }
     render() {
-        const style = this.visible ? {} : { display: 'none' };
-        return (h("div", { key: 'b3c824bdbbb1cefb93fb794a5785736cfa110faf', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '296f5ad85a517e6b3cb8786f18a9a14171b19332' })));
+        const style = this._visible ? {} : { display: 'none' };
+        return (h("div", { key: 'd9724bb69db22e086c5ca4044b2fd67935648c0d', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: 'b7639644780b51eadec75ccdd9dbb9f987b4c19f' })));
     }
     static get is() { return "seki-field-error"; }
     static get encapsulation() { return "shadow"; }
@@ -109,7 +117,8 @@ export class SekiFieldError {
     static get states() {
         return {
             "componentId": {},
-            "previousVisible": {}
+            "previousVisible": {},
+            "_visible": {}
         };
     }
     static get methods() {

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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: 'd504db3fb7ed73b5776b20dffbdf6c1547377afb', class: "field-group", style: style }, h("slot", { key: '1c479c97a25857a1a4b2523ce3f5090e84a93e2d' })));
+        return (h("div", { key: 'cc93a82a2b5d4b1935a8cf5406b4dcac09c6991c', class: "field-group", style: style }, h("slot", { key: '95403fbbcb400b7672d3debcf3469ba1f50cca6f' })));
     }
     static get is() { return "seki-field-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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: 'd272845c4d506046e443b610bd4705f3fa70f39a' }, labelProps), h("slot", { key: 'ecf8ad604d0997965d74d6b823366bb1f0dc82fb' }), this.required && h("span", { key: 'c76be74b5612990377d55616c63b0ed2d30646f9', class: "required-indicator" }, " *")));
+        return (h("label", Object.assign({ key: '104706ce84b822023a696816b5ae82eb1685fe5a' }, labelProps), h("slot", { key: '175c31261d162ce9d746337a3e55358dd1840015' }), this.required && h("span", { key: 'a06996ec81a3da6284b9c268c52fdfba522f487a', 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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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: '79fb0b7882517c6718b80524dbc9604b2ce64302' }, h("slot", { key: '71cc819eb7be508a0326baf507cd80bf797b4a07' })));
+        return (h("legend", { key: 'bb989475b9f113d302cd3cc5414909d1935c2642' }, h("slot", { key: 'dc7866320f0890d794d575f9eb8c632eede89196' })));
     }
     static get is() { return "seki-field-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -8,7 +8,7 @@ export class SekiFieldset {
         this.disabled = false;
     }
     render() {
-        return (h("fieldset", { key: '9466ace26c8ddd4fd2e4dd18ea9e87478e00b9cb', disabled: this.disabled, class: "fieldset" }, h("slot", { key: 'e748face6e8bae6e50ac0c024f5c5087a7c85dbf', name: "legend" }), h("div", { key: 'a35619921d96431da20138340a9e30a64055c61b', class: "fieldset-content" }, h("slot", { key: '0863fe78cfd6c922387c7cfeeb82ed50dc5189e0' }))));
+        return (h("fieldset", { key: '368edb114008b09042a503e751f9423cfab00aa2', disabled: this.disabled, class: "fieldset" }, h("slot", { key: 'ec4fe172df1dff1357f25111888f65f7b05772c8', name: "legend" }), h("div", { key: 'db62b32767b97dcb929074911098327e1a8091e5', class: "fieldset-content" }, h("slot", { key: '0d5b5656b6c469484c2079bb6327b10143a4c0ea' }))));
     }
     static get is() { return "seki-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -109,7 +109,7 @@ export class SekiHoverCardTrigger {
         this.isOpen = event.detail.open;
     }
     render() {
-        return (h(Host, { key: 'b0096cd1955900bd08887cd0d4dc540cafb195ef' }, h("span", { key: '75c41ea382f7044eb907970e7a14917b34b532d4', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, h("slot", { key: 'fb3d377e9e3fc200ab2d5a6bce05dbd0dba516d8' }))));
+        return (h(Host, { key: 'd8542dcc45bc50faea9992bce7272530004f5fcc' }, h("span", { key: 'ae6798fd2b908c3b19cd2c9193b9769ad6ccf25a', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, h("slot", { key: 'b338d54d27471d0adacf2a87b118e90054bf2dc0' }))));
     }
     static get is() { return "seki-hover-card-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -300,7 +300,7 @@ export class SekiHoverCard {
                     "references": {
                         "HoverCardSide": {
                             "location": "local",
-                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/hover-card/seki-hover-card.tsx",
+                            "path": "/__w/seki-ui/seki-ui/src/components/hover-card/seki-hover-card.tsx",
                             "id": "src/components/hover-card/seki-hover-card.tsx::HoverCardSide"
                         }
                     }
@@ -329,7 +329,7 @@ export class SekiHoverCard {
                     "references": {
                         "HoverCardAlign": {
                             "location": "local",
-                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/hover-card/seki-hover-card.tsx",
+                            "path": "/__w/seki-ui/seki-ui/src/components/hover-card/seki-hover-card.tsx",
                             "id": "src/components/hover-card/seki-hover-card.tsx::HoverCardAlign"
                         }
                     }

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -75,7 +75,7 @@ export class SekiInput {
         }
     }
     render() {
-        return (h("input", { key: 'e076e4385f1d98367a62a92d9027cc722a9d3181', 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: '7ac8f139e46442e4f63539d0684f5460369bed7a', 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/input-group/seki-input-addon.css

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/input-group/seki-input-addon.js

@@ -7,7 +7,7 @@ export class SekiInputAddon {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: 'ea0e49f07d0b89ca812b827a145ef62fcdea3cfc' }, h("div", { key: 'cd97b8298345e5f1736d9def5d56dbf397eb8ea1', class: `addon addon--${this.size}` }, h("slot", { key: '24af4759fdcd692515f42a1b573cf3bebef1384c' }))));
+        return (h(Host, { key: 'e2b648590e19f30ffdc57ba90727f015dd122148' }, h("div", { key: 'ee48e44d23ecbd3ab80dce1300cc1d454de0cd51', class: `addon addon--${this.size}` }, h("slot", { key: 'e066e1c7eb4a8f0a23022eddce0c55a1c2373e97' }))));
     }
     static get is() { return "seki-input-addon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-group/seki-input-group.css

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/input-group/seki-input-group.js

@@ -53,7 +53,7 @@ export class SekiInputGroup {
         });
     }
     render() {
-        return (h(Host, { key: '4a1ccea7c7bfffd7e7dc3af6f54d9939a4947452' }, h("div", { key: '1141112c1aa063f828d327caed3c1483fca4652c', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: 'eff2b7e136dffc57b7149019da289f93fbed218b', onSlotchange: () => this.updateChildren() }))));
+        return (h(Host, { key: '1835d43ac9bc2aa3b6a48648d5c0fdddf3fa03f0' }, h("div", { key: '3c9d5dbe44c957084ab91c3d11bda5e53d6d49f3', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '3262526b777875a3b932bec0ee7acd8d2f56b32b', onSlotchange: () => this.updateChildren() }))));
     }
     static get is() { return "seki-input-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-group.css

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/input-otp/seki-input-otp-group.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiInputOtpGroup {
     render() {
-        return (h("div", { key: '2c6171d217fbd876c62e5fa1ec293b3ca0c1b012', class: "group", role: "group" }, h("slot", { key: '93a014b80147982b0bb3e256f82db6ff3c58e576' })));
+        return (h("div", { key: '3291a3ff1a7694236c5036d4b1aaa06752a2b1b3', class: "group", role: "group" }, h("slot", { key: '8237ed893dba844676cb2ae47978e6740ca37bc2' })));
     }
     static get is() { return "seki-input-otp-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-separator.css

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;
@@ -762,6 +763,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
 }
 
 .separator {

package/dist/collection/components/input-otp/seki-input-otp-separator.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiInputOtpSeparator {
     render() {
-        return (h("div", { key: '9c9eb8ae7aa94347f126861ad5e23c6e73e7be3f', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: 'c2169fe06aa2ab8498d045585bf8f5789e824ddd' }, h("span", { key: '0e25f288407a20fb77f9cc917c112c12e82f7bf1', "aria-hidden": "true" }, "-"))));
+        return (h("div", { key: 'fae3e0e1252aae420c462c399b7fa902d4bd3558', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: '517453b7a9d48147ed649de03301b5aff3b0fb44' }, h("span", { key: '8bfc6bec1c34b1a45b64845b9fc4c0b4a978f01a', "aria-hidden": "true" }, "-"))));
     }
     static get is() { return "seki-input-otp-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-slot.css

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/input-otp/seki-input-otp-slot.js

@@ -64,7 +64,7 @@ export class SekiInputOtpSlot {
             'slot--invalid': this.isInvalid,
             'slot--focused': this.hasFocus,
         };
-        return (h("div", { key: 'fc97f35586c5636dbbb327e1b7bd5d358d2789f0', class: classes, "aria-hidden": "true", onClick: this.handleClick }, h("span", { key: 'a5a401ca3876a1377a3adc32df2eaaf93945578b', class: "char" }, this.getDisplayChar()), this.isActive && h("span", { key: '217edf12c4711003220bad9d73eee5bec80f520f', class: "caret" })));
+        return (h("div", { key: 'e19bc7a5f9dca5eeaca428f6973508e34c82fa81', class: classes, "aria-hidden": "true", onClick: this.handleClick }, h("span", { key: '9a2422985127c5dc876d085817ec619baa2000a8', class: "char" }, this.getDisplayChar()), this.isActive && h("span", { key: '14195dd6d0614d84ed4b3e03defd8ece52736acf', class: "caret" })));
     }
     static get is() { return "seki-input-otp-slot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp.css

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/input-otp/seki-input-otp.js

@@ -209,11 +209,11 @@ export class SekiInputOtp {
         const inputMode = this.pattern === 'digits' ? 'numeric' : 'text';
         const inputPattern = this.pattern === 'digits' ? '[0-9]*' : '[a-zA-Z0-9]*';
         const ariaLabelText = this.ariaLabel || `Enter ${this.maxlength}-digit code`;
-        return (h("div", { key: 'f293b2a456e1baf4c9d8b08ac2464bc873c5fc8f', class: {
+        return (h("div", { key: '43374da76db7e87a8e497e21bd2ebee05ddb610b', class: {
                 'input-otp-container': true,
                 'input-otp-container--disabled': this.disabled,
                 'input-otp-container--invalid': this.invalid,
-            }, onClick: this.handleContainerClick }, h("input", { key: 'fb6c1e78e18026466d27ffaf03905a4a9e3b09af', ref: (el) => (this.inputRef = el), type: "text", inputMode: inputMode, autocomplete: this.autocomplete, pattern: inputPattern, maxLength: this.maxlength, value: this.value, disabled: this.disabled, required: this.required, name: this.name, class: "input-otp-hidden", "aria-label": ariaLabelText, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("slot", { key: 'c61374b47414538cc6b7b18d50c199807c7fd0e5' })));
+            }, onClick: this.handleContainerClick }, h("input", { key: '435715b138963caf230b146f7ef0ebb30fbdb448', ref: (el) => (this.inputRef = el), type: "text", inputMode: inputMode, autocomplete: this.autocomplete, pattern: inputPattern, maxLength: this.maxlength, value: this.value, disabled: this.disabled, required: this.required, name: this.name, class: "input-otp-hidden", "aria-label": ariaLabelText, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("slot", { key: 'd41e3db322c8c6883ae551628efe2f10b43e931b' })));
     }
     static get is() { return "seki-input-otp"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,129 @@
+/* Item Component Styles with Design Tokens
+ * Composable base item for lists, menus, and collection-based UIs
+ * Uses typography system tokens for consistent text styling
+ */
+
+:host {
+  display: block;
+  --seki-item-padding-x: var(--seki-spacing-3, 0.75rem);
+  --seki-item-padding-y: var(--seki-spacing-2, 0.5rem);
+  --seki-item-gap: var(--seki-spacing-3, 0.75rem);
+  --seki-item-radius: var(--seki-radius-sm, 0.25rem);
+  --seki-item-bg: transparent;
+  --seki-item-bg-hover: var(--seki-accent, hsl(240 4.8% 95.9%));
+  --seki-item-bg-active: var(--seki-accent, hsl(240 4.8% 95.9%));
+  --seki-item-color: var(--seki-foreground, hsl(240 10% 3.9%));
+  --seki-item-color-muted: var(--seki-muted-foreground, hsl(240 3.8% 46.1%));
+  --seki-item-font-size: var(--seki-font-size-sm, 0.875rem);
+  --seki-item-font-weight: var(--seki-font-weight-normal, 400);
+  --seki-item-line-height: var(--seki-line-height-tight, 1.25);
+}
+
+/* Dark mode support */
+:host([data-theme='dark']) {
+  --seki-item-bg-hover: var(--seki-accent, hsl(240 3.7% 15.9%));
+  --seki-item-bg-active: var(--seki-accent, hsl(240 3.7% 15.9%));
+  --seki-item-color: var(--seki-foreground, hsl(0 0% 98%));
+  --seki-item-color-muted: var(--seki-muted-foreground, hsl(240 5% 64.9%));
+}
+
+.seki-item {
+  display: flex;
+  align-items: center;
+  gap: var(--seki-item-gap);
+  padding: var(--seki-item-padding-y) var(--seki-item-padding-x);
+  border-radius: var(--seki-item-radius);
+  background-color: var(--seki-item-bg);
+  color: var(--seki-item-color);
+  font-family: var(--seki-font-sans, system-ui);
+  font-size: var(--seki-item-font-size);
+  font-weight: var(--seki-item-font-weight);
+  line-height: var(--seki-item-line-height);
+  cursor: default;
+  user-select: none;
+  outline: none;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  box-sizing: border-box;
+}
+
+/* Interactive cursor */
+:host(.seki-item--interactive) .seki-item {
+  cursor: pointer;
+}
+
+/* Hover state for interactive items */
+:host(.seki-item--interactive) .seki-item:hover {
+  background-color: var(--seki-item-bg-hover);
+}
+
+/* Focus visible state for keyboard navigation */
+:host(.seki-item--interactive) .seki-item:focus-visible {
+  outline: 2px solid var(--seki-ring, hsl(240 5.9% 10%));
+  outline-offset: -2px;
+}
+
+/* Active/selected state */
+:host(.seki-item--active) .seki-item {
+  background-color: var(--seki-item-bg-active);
+  font-weight: var(--seki-font-weight-medium, 500);
+}
+
+/* Disabled state */
+:host(.seki-item--disabled) .seki-item {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Inset variant - extra left padding for alignment */
+:host(.seki-item--inset) .seki-item {
+  padding-left: var(--seki-spacing-8, 2rem);
+}
+
+/* Leading slot container */
+.seki-item__leading {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--seki-item-color-muted);
+}
+
+.seki-item__leading:empty {
+  display: none;
+}
+
+/* Main content area */
+.seki-item__content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Trailing slot container */
+.seki-item__trailing {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--seki-item-color-muted);
+  font-size: var(--seki-font-size-xs, 0.75rem);
+}
+
+.seki-item__trailing:empty {
+  display: none;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-item {
+    transition: none;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  :host(.seki-item--interactive) .seki-item:focus-visible {
+    outline-width: 3px;
+  }
+}