@sekiui/elements 0.0.75 → 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.js

@@ -32,7 +32,7 @@ export class SekiField {
     }
     render() {
         const hasMultiple = this.hasMultipleControls();
-        return (h(Host, { key: '7f154da2e04e9c38a46aab0f45984099d6e1e2d3', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: '26d2b2bf8afb830b82902be28722f287bfe00fad', class: "field" }, h("div", { key: 'c1bbf9ce44ebe12cbf73af1dac4b2c43d7f01e8a', class: "field-label" }, h("slot", { key: '6e8d39e0b122f4304d6929540dcff7476b7595d8', name: "label" })), h("div", { key: '469a25133b82067ac0d89ccfd216b4984a70152a', class: "field-control" }, h("slot", { key: 'a7aaab46048dca4163811e7a9404816944183f9a' })), h("div", { key: '85ce2c774c392b6ed32a47951dcc516cb198086a', class: "field-description" }, h("slot", { key: '7d8226292e7570bd58bfaa90135e977d71337e74', name: "description" })), h("div", { key: 'a279b81333e3aa8061f72da7fc115925ca96b15c', class: "field-error" }, h("slot", { key: '34c88dddf01676d9465ea43edea7d5624b333429', 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.js

@@ -29,7 +29,7 @@ export class SekiFieldDescription {
         return this.componentId;
     }
     render() {
-        return (h("div", { key: '93b6b20ec452ccc43f4cc5ae2db62a613f8fde30', id: this.componentId, class: "description" }, h("slot", { key: 'ac8b697eaaf61a81251050ce6ec71ca15a94cac9' })));
+        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.js

@@ -57,7 +57,7 @@ export class SekiFieldError {
     }
     render() {
         const style = this._visible ? {} : { display: 'none' };
-        return (h("div", { key: '5682cd708f1e268ec859c75be829a2a1c0c417e0', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '448efdf48a937c47ed73b4892fbb725685184d67' })));
+        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"; }

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: '4790f77c090c3a3ecf09c7231bb29a6827bae2b4', class: "field-group", style: style }, h("slot", { key: '1dac5a2aeb7cacaf25592f53493500a25bc49008' })));
+        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.js

@@ -9,7 +9,7 @@ export class SekiFieldLabel {
     }
     render() {
         const labelProps = this.htmlFor ? { for: this.htmlFor } : {};
-        return (h("label", Object.assign({ key: 'c0749f5d66f1cb8536e87aaae35fe42d4bd5a03d' }, labelProps), h("slot", { key: 'faf8f9d473c5083de897caf08714893a1a6bd545' }), this.required && h("span", { key: '9706a790d8689cf1afbee908c7e091664d5de07b', 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.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiFieldLegend {
     render() {
-        return (h("legend", { key: '396dd9e536a40fbf35368131831120869cf341b7' }, h("slot", { key: '4faf3b993173031b14789d1d3e5b2d752726dfa5' })));
+        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.js

@@ -8,7 +8,7 @@ export class SekiFieldset {
         this.disabled = false;
     }
     render() {
-        return (h("fieldset", { key: '3976b94936eebe92300108b8ffb98d059792bece', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '6e8e25a89ca5f497c608fa70cea16209f4fed30b', name: "legend" }), h("div", { key: '29610fedff85674dbf3a94bc226ee80577ca9661', class: "fieldset-content" }, h("slot", { key: '2436d8ce8f17460756f3d68f94da13fb89110ec7' }))));
+        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-trigger.js

@@ -109,7 +109,7 @@ export class SekiHoverCardTrigger {
         this.isOpen = event.detail.open;
     }
     render() {
-        return (h(Host, { key: 'e28f2b08392be8441dc85935db02ea586e947c41' }, h("span", { key: 'c8a3c5fe7b627aa5776210d207444782769a7129', 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: '389139801052402c58bc09e6c24e5366a3d120b4' }))));
+        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.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.js

@@ -75,7 +75,7 @@ export class SekiInput {
         }
     }
     render() {
-        return (h("input", { key: 'ad4f39fae83a75cd901ed9cf5c33b3989742af92', 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.js

@@ -7,7 +7,7 @@ export class SekiInputAddon {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: '4e687090261154281a62d2ab4c59a5cdd5f13964' }, h("div", { key: 'e67248f2cb32cba04383397c0d3b00f697f7f48c', class: `addon addon--${this.size}` }, h("slot", { key: 'a8092b4c68cdbd824f573c2e3a923f006179f3e7' }))));
+        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.js

@@ -53,7 +53,7 @@ export class SekiInputGroup {
         });
     }
     render() {
-        return (h(Host, { key: '1ce1f5b51a0f18450db8993990bfda0040f34854' }, h("div", { key: '0a1b206a85a2ac8826bc251e08aa8060aff74b8a', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '36f9e8ea6db435aa9ddfc92f6c996080fa4e81e8', 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.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiInputOtpGroup {
     render() {
-        return (h("div", { key: 'ea05f89e0e527d285149b8f903f83c9ed35dd9fb', class: "group", role: "group" }, h("slot", { key: '575ed924e8e2b099f89a82b4d7496fb13e7e9428' })));
+        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.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiInputOtpSeparator {
     render() {
-        return (h("div", { key: 'b912b705b23e967321ebf027c21a00b08fdc11b6', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: 'b7f92dab56e561b2936db467bb78945955aa9dc8' }, h("span", { key: '890937dbd45369d261a00e71f45b9b39fc286bf9', "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.js

@@ -64,7 +64,7 @@ export class SekiInputOtpSlot {
             'slot--invalid': this.isInvalid,
             'slot--focused': this.hasFocus,
         };
-        return (h("div", { key: 'd3974dd9d02b3980eabf494c4846b7596af7f824', class: classes, "aria-hidden": "true", onClick: this.handleClick }, h("span", { key: 'f728a1c36b826552dcd61ae4f90a37b4d4d166a0', class: "char" }, this.getDisplayChar()), this.isActive && h("span", { key: '12cc8b14fa275dbffb204e0a8f243a7a57d30876', 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.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: '0f93332f20e86ffba635f6fed88fe2cccf04d7bd', 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: '08abf6cc3c7f427bc7811ac619df37147e276caa', 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: '1b657601f5531c7f50d9cc9d418bacbd0b051880' })));
+            }, 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;
+  }
+}

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

@@ -0,0 +1,177 @@
+import { Host, h } from "@stencil/core";
+/**
+ * seki-item: Composable base item for lists and menus
+ *
+ * @component Item
+ * @slot leading - Leading content (icon, avatar, checkbox)
+ * @slot - Default slot for main content
+ * @slot trailing - Trailing content (badge, icon, shortcut)
+ * @example
+ * <seki-item>
+ *   <span slot="leading">📄</span>
+ *   Document title
+ *   <seki-badge slot="trailing">New</seki-badge>
+ * </seki-item>
+ */
+export class SekiItem {
+    constructor() {
+        /**
+         * Visual variant of the item
+         * @default 'default'
+         */
+        this.variant = 'default';
+        /**
+         * Whether the item is in active/selected state
+         */
+        this.active = false;
+        /**
+         * Whether the item is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the item is interactive (clickable/focusable)
+         * @default true
+         */
+        this.interactive = true;
+        this.handleClick = () => {
+            if (!this.disabled && this.interactive) {
+                this.sekiSelect.emit();
+            }
+        };
+        this.handleKeyDown = (event) => {
+            if (!this.disabled && this.interactive && (event.key === 'Enter' || event.key === ' ')) {
+                event.preventDefault();
+                this.sekiSelect.emit();
+            }
+        };
+    }
+    render() {
+        const isInteractive = this.interactive && !this.disabled;
+        return (h(Host, { key: '4d6535794744c36086f3c9242757c61c3c4b758d', class: {
+                'seki-item--active': this.active,
+                'seki-item--disabled': this.disabled,
+                'seki-item--inset': this.variant === 'inset',
+                'seki-item--interactive': isInteractive,
+            } }, h("div", { key: '839ba9c32ee980cbdb919971a833aa83d1162892', class: "seki-item", part: "item", role: isInteractive ? 'option' : undefined, tabindex: isInteractive ? 0 : -1, "aria-selected": this.active ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'b38c41f70c7e5d8e6b86b85408e9b9f2e5ce7ec2', class: "seki-item__leading", part: "leading" }, h("slot", { key: 'b4330ae0ac48b16c326204116f8f22f8c1763047', name: "leading" })), h("span", { key: 'e7329059ce8a88058b1a26c4b9c65a6ea633cb12', class: "seki-item__content", part: "content" }, h("slot", { key: 'bcc3e6a047247585e40f1aba51429b0eeb4f9b52' })), h("span", { key: '11f2c98572ba112489d5ac7e4955b255e8d5c5ac', class: "seki-item__trailing", part: "trailing" }, h("slot", { key: '3ab27f7f5719e9e87fbcd20095f0ab005c4bf77d', name: "trailing" })))));
+    }
+    static get is() { return "seki-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inset'",
+                    "resolved": "\"default\" | \"inset\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "Visual variant of the item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is in active/selected state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether the item is interactive (clickable/focusable)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sekiSelect",
+                "name": "sekiSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when item is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -7,7 +7,7 @@ export class SekiKbd {
         this.size = 'md';
     }
     render() {
-        return (h("kbd", { key: '720fbd65437fcc6636094b93e5fd0517c249a56d', class: `kbd kbd--${this.size}` }, h("slot", { key: 'c96ad0e080fd65a64779c14b520ff42ee7ebcf46' })));
+        return (h("kbd", { key: '4d3c67010114787137fc0a16e1813092a296acaa', class: `kbd kbd--${this.size}` }, h("slot", { key: '991cfce3db378f61a7a41e7e611980d1cf9d273b' })));
     }
     static get is() { return "seki-kbd"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-checkbox.js

@@ -42,10 +42,10 @@ export class SekiMenubarCheckbox {
         this._checked = this.checked;
     }
     render() {
-        return (h(Host, { key: 'd2cacc42db5ed1dce9a7b48999f3be6f0b8f4be7' }, h("div", { key: '55e70d7217d4f2a57e0440fa143b590c05679ab1', part: "item", role: "menuitemcheckbox", class: {
+        return (h(Host, { key: '0e8701bc6e89c38f88a4f9b7de7c20e5daeff9c2' }, h("div", { key: '2f63c44662d69cc37f3cb98d812fa83ad3bfd84e', part: "item", role: "menuitemcheckbox", class: {
                 'menubar-checkbox': true,
                 'menubar-checkbox--disabled': this.disabled,
-            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '21338485de9e308957898f5bd24f3c0a8653fee8', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: '9e8f45aec473622a4f4d3dfa35b54a67697060a7', 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" }, h("polyline", { key: 'af90b1b6cf242c3d12ce64fe3dfebae5b7f45515', points: "20 6 9 17 4 12" })))), h("slot", { key: '8f749e575fafc3977f2fefe0f29cc08f2d274ae6' }), this.shortcut && (h("span", { key: '4d19a0853d66738f324ae9bcd0d3ce0ce90f4e32', part: "shortcut", class: "menubar-checkbox-shortcut" }, this.shortcut)))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '8106989d251091eaa46abd50ec87b549e66be847', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: '2b5f88fa4a41172f96656b35f8a2a6f7a1973967', 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" }, h("polyline", { key: '34040296d9fe74338fef916d4d5cfac4277cb6bb', points: "20 6 9 17 4 12" })))), h("slot", { key: '0c587e97082cebf412838ab3dd977da67ecb8d81' }), this.shortcut && (h("span", { key: '84ee8f28681fadef5ac5a78a4fd72882b80970d8', part: "shortcut", class: "menubar-checkbox-shortcut" }, this.shortcut)))));
     }
     static get is() { return "seki-menubar-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMenubarGroup {
     render() {
-        return (h(Host, { key: '8cfcd616fb02705767992456665b0d1cc990105c' }, h("div", { key: 'e4e8ed8aa10d468bd8e0f6d6e76b78a34fd00bd4', part: "group", role: "group", class: "menubar-group" }, this.label && (h("div", { key: 'ad8caad596c82e410e6b0427131a9321028cedd5', part: "label", class: "menubar-group-label" }, this.label)), h("slot", { key: 'f6633043fbf282bd6995ed2bbf7cae001d55dfd7' }))));
+        return (h(Host, { key: '78725cc4e76194d531836da1c49e5e4965c4eb4f' }, h("div", { key: '0b62b1495ee06c3325908175efb16efea70c2095', part: "group", role: "group", class: "menubar-group" }, this.label && (h("div", { key: 'cbf536f245e2303f7af980596b822f60cc7960b8', part: "label", class: "menubar-group-label" }, this.label)), h("slot", { key: 'b61ec915d1c8b5fee6c8252276dfafbb22fdec76' }))));
     }
     static get is() { return "seki-menubar-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,11 +39,11 @@ export class SekiMenubarItem {
         return menubar ? menubar._menubarContext : null;
     }
     render() {
-        return (h(Host, { key: '46d9233bf8991c039b7800d4ecf1168e318258f7' }, h("div", { key: 'a4519083aea8c4705571a3e645634be029a8ebc3', part: "item", role: "menuitem", class: {
+        return (h(Host, { key: 'b2f9cc3ff646d9780ecdc2bc4b6bbfc82ae5b04e' }, h("div", { key: 'eca654765fefec0226cdc0ef3a2d4752777ea9ee', part: "item", role: "menuitem", class: {
                 'menubar-item': true,
                 'menubar-item--disabled': this.disabled,
                 'menubar-item--inset': this.inset,
-            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'a379c5fc287cf67d0d553f5afff92f84930cc725' }), this.shortcut && (h("span", { key: '10c213b9a1f250dc9df6ef3081bc46cec37d619b', part: "shortcut", class: "menubar-item-shortcut" }, this.shortcut)))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'ac197d8eed843bd0b50c58907bf5251594b96415' }), this.shortcut && (h("span", { key: 'f6a1e8875c99001e59b24d06529239ec844d5d95', part: "shortcut", class: "menubar-item-shortcut" }, this.shortcut)))));
     }
     static get is() { return "seki-menubar-item"; }
     static get encapsulation() { return "shadow"; }