@sekiui/elements 0.0.65 → 0.0.70

package/dist/components/seki-checkbox.js

@@ -104,11 +104,11 @@ const SekiCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SekiCheckbox exten
     render() {
         const isChecked = this.isChecked;
         const dataState = this.indeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: '4d96fc6069e7aed2b871cd0d8dc08b56cde2afe7', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '9ae2d2bdb41abfddd91d13305548a26cc5c1f9d1', type: "button", role: "checkbox", class: "checkbox", part: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: this.handleClick }, (isChecked || this.indeterminate) && (h("span", { key: '49cef415f26e56a2676bf3e715c4d1f211bcfd2a', class: "indicator", part: "indicator" }, this.indeterminate ? (
+        return (h(Host, { key: '5866bb194841f2d9eb42613c6a09c2f70255c81a', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '957a6594d22d24d39722631d5ac235e1b3cc541e', type: "button", role: "checkbox", class: "checkbox", part: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: this.handleClick }, (isChecked || this.indeterminate) && (h("span", { key: 'e297222ecf6e5c3357f58a20da4cb9ddcc70a5f2', class: "indicator", part: "indicator" }, this.indeterminate ? (
         // Minus icon for indeterminate state
         h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))) : (
         // Checkmark icon for checked state
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" })))))), this.name && (h("input", { key: '86d8b33c4513fca4e12d7a29747d1f1dc90e7cd8', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" })))))), this.name && (h("input", { key: 'fe5e7b1bcf73984234d6de98999395d9c41bd266', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
     }
     static get formAssociated() { return true; }
     static get style() { return sekiCheckboxCss; }

package/dist/components/seki-collapsible-content.js

@@ -87,11 +87,11 @@ const SekiCollapsibleContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiColl
         else {
             contentStyle.height = '0';
         }
-        return (h(Host, { key: 'e025e4f99175d7de796412bfe109875ce573849c', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'aea2cd5b9a0ed647b69558000e48efb1a419edf2', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
+        return (h(Host, { key: '8660f862e02a0ccfa70efb4f33890a1a173dd336', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'b4088e9ff518e62ffeb907164474528d3da28a0a', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
                 'collapsible-content': true,
                 'collapsible-content--open': this._isOpen,
                 'collapsible-content--animating': this._isAnimating,
-            }, style: contentStyle }, h("div", { key: 'bf591bc5697d85681c8b95660bcd3a510fc42a31', class: "collapsible-content-inner" }, h("slot", { key: '77c9141495a0a24622cc08860056ee5b4aacb6f2' })))));
+            }, style: contentStyle }, h("div", { key: 'c0d48ba3d8da984c59ee450b36ee8b4282e8c070', class: "collapsible-content-inner" }, h("slot", { key: '22812835649db8c73d6711b00aa3a1bfe360a302' })))));
     }
     get el() { return this; }
     static get style() { return sekiCollapsibleContentCss; }

package/dist/components/seki-collapsible.js

@@ -91,7 +91,7 @@ const SekiCollapsible$1 = /*@__PURE__*/ proxyCustomElement(class SekiCollapsible
         };
     }
     render() {
-        return (h(Host, { key: 'c65f0a79cc6f865f4e74e7c72b17c6ad01d496d2', "data-state": this._isOpen ? 'open' : 'closed', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: 'fea15873c67cf46620d0f56578d8b1ca1f1a02e1', part: "collapsible", class: "collapsible" }, h("slot", { key: 'f27e929ea49fdd6b2fedb39cee2b67762795b022' }))));
+        return (h(Host, { key: 'd50bcf876efd46065b47d53736d0e2d8954a7099', "data-state": this._isOpen ? 'open' : 'closed', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: '18b870f4b67947e5ef87b6e58ad841f0eb4686c9', part: "collapsible", class: "collapsible" }, h("slot", { key: '344dc7aedb5d9d4d04baaac445c8772b2d7a1b52' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/seki-combobox-content.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiComboboxContent extends Components.SekiComboboxContent, HTMLElement {}
+export const SekiComboboxContent: {
+    prototype: SekiComboboxContent;
+    new (): SekiComboboxContent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/seki-combobox-content.js

@@ -0,0 +1,68 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-2Ncy6l6O.js';
+
+const sekiComboboxContentCss = ":host{display:block;position:absolute;top:100%;left:0;right:0;z-index:50;margin-top:var(--seki-spacing-1, 0.25rem)}:host(.hidden){display:none}.combobox-content{overflow-y:auto;background-color:var(--seki-color-background, hsl(0 0% 100%));border:1px solid var(--seki-color-border, hsl(240 5.9% 90%));border-radius:var(--seki-radius-md, 0.375rem);box-shadow:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));padding:var(--seki-spacing-1, 0.25rem)}.combobox-content::-webkit-scrollbar{width:8px}.combobox-content::-webkit-scrollbar-track{background:transparent}.combobox-content::-webkit-scrollbar-thumb{background-color:var(--seki-color-muted, hsl(240 4.8% 95.9%));border-radius:4px}.combobox-content::-webkit-scrollbar-thumb:hover{background-color:var(--seki-color-muted-foreground, hsl(240 3.8% 46.1%))}:host([data-theme=\"dark\"]) .combobox-content,:host-context([data-theme=\"dark\"]) .combobox-content{background-color:var(--seki-color-background-dark, hsl(240 10% 3.9%));border-color:var(--seki-color-border-dark, hsl(240 3.7% 15.9%))}:host([data-theme=\"dark\"]) .combobox-content::-webkit-scrollbar-thumb,:host-context([data-theme=\"dark\"]) .combobox-content::-webkit-scrollbar-thumb{background-color:var(--seki-color-accent-dark, hsl(240 3.7% 15.9%))}";
+
+const SekiComboboxContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiComboboxContent extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /** Maximum height of the dropdown */
+        this.maxHeight = '15rem';
+        this.isOpen = false;
+        this.listboxId = '';
+    }
+    getContext() {
+        const combobox = this.el.closest('seki-combobox');
+        return (combobox === null || combobox === void 0 ? void 0 : combobox.comboboxContext) || null;
+    }
+    componentDidLoad() {
+        this.updateState();
+        // Set up mutation observer to watch for context changes
+        this.observeParent();
+    }
+    observeParent() {
+        const combobox = this.el.closest('seki-combobox');
+        if (combobox) {
+            const observer = new MutationObserver(() => this.updateState());
+            observer.observe(combobox, { attributes: true, subtree: false });
+        }
+    }
+    updateState() {
+        const ctx = this.getContext();
+        if (ctx) {
+            this.isOpen = ctx.open;
+            this.listboxId = ctx.listboxId;
+        }
+    }
+    render() {
+        return (h(Host, { key: '9c0b779243c06d8bc9f17fdd79cd8f0b7dc3698e', class: { 'hidden': !this.isOpen } }, h("div", { key: '72e48545b9d1f225c86a76231b12c8a4b9217d52', id: this.listboxId, class: "combobox-content", role: "listbox", style: { maxHeight: this.maxHeight } }, h("slot", { key: 'f046906c1e8ccc7d3bb19a006644db633061450a' }))));
+    }
+    get el() { return this; }
+    static get style() { return sekiComboboxContentCss; }
+}, [257, "seki-combobox-content", {
+        "maxHeight": [1, "max-height"],
+        "isOpen": [32],
+        "listboxId": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-combobox-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-combobox-content":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiComboboxContent$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiComboboxContent = SekiComboboxContent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiComboboxContent, defineCustomElement };

package/dist/components/seki-combobox-empty.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiComboboxEmpty extends Components.SekiComboboxEmpty, HTMLElement {}
+export const SekiComboboxEmpty: {
+    prototype: SekiComboboxEmpty;
+    new (): SekiComboboxEmpty;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,68 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-2Ncy6l6O.js';
+
+const sekiComboboxEmptyCss = ":host{display:block;--seki-combobox-empty-font-family:var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);--seki-combobox-empty-font-size:var(--seki-font-size-sm, 0.875rem);--seki-combobox-empty-font-weight:var(--seki-font-weight-normal, 400);--seki-combobox-empty-line-height:var(--seki-line-height-normal, 1.5);--seki-combobox-empty-color:var(--seki-color-text-muted, hsl(0, 0%, 45%));--seki-combobox-empty-error-color:var(--seki-color-destructive, hsl(0, 84%, 60%));--seki-combobox-empty-padding:var(--seki-spacing-4, 1rem)}:host([data-theme='dark']){--seki-combobox-empty-color:var(--seki-color-text-muted, hsl(0, 0%, 65%))}.seki-combobox-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--seki-spacing-2, 0.5rem);padding:var(--seki-combobox-empty-padding);font-family:var(--seki-combobox-empty-font-family);font-size:var(--seki-combobox-empty-font-size);font-weight:var(--seki-combobox-empty-font-weight);line-height:var(--seki-combobox-empty-line-height);color:var(--seki-combobox-empty-color);text-align:center;box-sizing:border-box}.seki-combobox-empty--no-results{}.seki-combobox-empty--loading{}.seki-combobox-empty--no-input{}.seki-combobox-empty--error{color:var(--seki-combobox-empty-error-color)}@media (prefers-reduced-motion: reduce){.seki-combobox-empty{transition:none}}@media (prefers-contrast: more){.seki-combobox-empty{color:var(--seki-color-text, hsl(0, 0%, 10%))}.seki-combobox-empty--error{color:var(--seki-color-destructive, hsl(0, 84%, 50%))}}";
+
+const SekiComboboxEmpty$1 = /*@__PURE__*/ proxyCustomElement(class SekiComboboxEmpty extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * The reason why the combobox is showing an empty state
+         * @default 'no-results'
+         */
+        this.reason = 'no-results';
+    }
+    render() {
+        const containerClasses = {
+            'seki-combobox-empty': true,
+            [`seki-combobox-empty--${this.reason}`]: true,
+        };
+        const classString = Object.entries(containerClasses)
+            .filter(([, active]) => active)
+            .map(([name]) => name)
+            .join(' ');
+        return (h(Host, { key: '8fdc2f0a427a7e836009bff2505c20b7f40698fd' }, h("div", { key: '2e2e3620976fc1baf019ed90ad8e141d4b13625c', class: classString, role: "status" }, this.renderSlotForReason(), h("slot", { key: '669cf753d9e4a1b3419b9e6c43639c086de9ef43' }))));
+    }
+    /**
+     * Renders the appropriate named slot based on the current reason
+     */
+    renderSlotForReason() {
+        switch (this.reason) {
+            case 'loading':
+                return h("slot", { name: "loading" });
+            case 'no-results':
+                return h("slot", { name: "no-results" });
+            case 'no-input':
+                return h("slot", { name: "no-input" });
+            case 'error':
+                return h("slot", { name: "error" });
+            default:
+                return null;
+        }
+    }
+    static get style() { return sekiComboboxEmptyCss; }
+}, [257, "seki-combobox-empty", {
+        "reason": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-combobox-empty"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-combobox-empty":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiComboboxEmpty$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiComboboxEmpty = SekiComboboxEmpty$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiComboboxEmpty, defineCustomElement };

package/dist/components/seki-combobox-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiComboboxGroup extends Components.SekiComboboxGroup, HTMLElement {}
+export const SekiComboboxGroup: {
+    prototype: SekiComboboxGroup;
+    new (): SekiComboboxGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/seki-combobox-group.js

@@ -0,0 +1,39 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-2Ncy6l6O.js';
+
+const sekiComboboxGroupCss = ":host{display:block}.combobox-group{padding:var(--seki-spacing-1, 0.25rem) 0}.combobox-group-label{padding:var(--seki-spacing-2, 0.5rem) var(--seki-spacing-3, 0.75rem);font-family:var(--seki-font-sans, system-ui, -apple-system, sans-serif);font-size:var(--seki-font-size-xs, 0.75rem);font-weight:var(--seki-font-weight-medium, 500);line-height:var(--seki-line-height-tight, 1.25);color:var(--seki-color-muted-foreground, hsl(240 3.8% 46.1%));text-transform:uppercase;letter-spacing:0.05em}.combobox-group-items{display:flex;flex-direction:column}:host([data-theme=\"dark\"]) .combobox-group-label,:host-context([data-theme=\"dark\"]) .combobox-group-label{color:var(--seki-color-muted-foreground-dark, hsl(240 5% 64.9%))}";
+
+const SekiComboboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class SekiComboboxGroup extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.groupId = `combobox-group-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    render() {
+        return (h(Host, { key: 'b117d0c4e8db249d6041b5c70fea2269ff68de95' }, h("div", { key: 'c66827942e7ab8634f6e5a2f1e4ab5e8911c27a1', class: "combobox-group", role: "group", "aria-labelledby": this.groupId }, h("div", { key: 'd0fc316e74ef489397045a7fc1e855e6318b0d7b', id: this.groupId, class: "combobox-group-label" }, this.label), h("div", { key: '2fbc0a1af9f42fbb6056a613a2d7b23bc33690ec', class: "combobox-group-items" }, h("slot", { key: '1eb4f8a85f8afeded69b0c876f751a7e7a2c3872' })))));
+    }
+    static get style() { return sekiComboboxGroupCss; }
+}, [257, "seki-combobox-group", {
+        "label": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-combobox-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-combobox-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiComboboxGroup$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiComboboxGroup = SekiComboboxGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiComboboxGroup, defineCustomElement };

package/dist/components/seki-combobox-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiComboboxInput extends Components.SekiComboboxInput, HTMLElement {}
+export const SekiComboboxInput: {
+    prototype: SekiComboboxInput;
+    new (): SekiComboboxInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,195 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-2Ncy6l6O.js';
+
+const sekiComboboxInputCss = ":host{display:block}.combobox-input-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:var(--seki-spacing-1, 0.25rem);min-height:2.5rem;padding:var(--seki-spacing-2, 0.5rem) var(--seki-spacing-3, 0.75rem);background-color:var(--seki-color-background, hsl(0 0% 100%));border:1px solid var(--seki-color-border, hsl(240 5.9% 90%));border-radius:var(--seki-radius-md, 0.375rem);transition:border-color 0.15s ease, box-shadow 0.15s ease}.combobox-input-wrapper:focus-within{border-color:var(--seki-color-ring, hsl(240 5% 64.9%));box-shadow:0 0 0 2px var(--seki-color-ring-offset, hsl(0 0% 100%)), 0 0 0 4px var(--seki-color-ring, hsl(240 5% 64.9%))}.combobox-input{flex:1;min-width:4rem;border:none;outline:none;background:transparent;font-family:var(--seki-font-sans, system-ui, -apple-system, sans-serif);font-size:var(--seki-font-size-sm, 0.875rem);line-height:var(--seki-line-height-normal, 1.5);color:var(--seki-color-foreground, hsl(240 10% 3.9%))}.combobox-input::placeholder{color:var(--seki-color-muted-foreground, hsl(240 3.8% 46.1%))}.combobox-input:disabled{cursor:not-allowed;opacity:0.5}.combobox-chip{display:inline-flex;align-items:center;gap:var(--seki-spacing-1, 0.25rem);padding:var(--seki-spacing-1, 0.25rem) var(--seki-spacing-2, 0.5rem);background:var(--seki-color-muted, hsl(240 4.8% 95.9%));border-radius:var(--seki-radius-sm, 0.25rem);font-family:var(--seki-font-sans, system-ui, -apple-system, sans-serif);font-size:var(--seki-font-size-xs, 0.75rem);line-height:var(--seki-line-height-tight, 1.25)}.chip-label{max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-remove{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;border:none;background:transparent;cursor:pointer;color:var(--seki-color-muted-foreground, hsl(240 3.8% 46.1%));border-radius:var(--seki-radius-sm, 0.25rem)}.chip-remove:hover{background:var(--seki-color-accent, hsl(240 4.8% 95.9%));color:var(--seki-color-foreground, hsl(240 10% 3.9%))}.chip-remove svg{width:0.75rem;height:0.75rem}.combobox-count,.combobox-text{font-family:var(--seki-font-sans, system-ui, -apple-system, sans-serif);font-size:var(--seki-font-size-sm, 0.875rem);color:var(--seki-color-foreground, hsl(240 10% 3.9%))}:host([data-theme=\"dark\"]) .combobox-input-wrapper,:host-context([data-theme=\"dark\"]) .combobox-input-wrapper{background-color:var(--seki-color-background-dark, hsl(240 10% 3.9%));border-color:var(--seki-color-border-dark, hsl(240 3.7% 15.9%))}:host([data-theme=\"dark\"]) .combobox-input,:host-context([data-theme=\"dark\"]) .combobox-input{color:var(--seki-color-foreground-dark, hsl(0 0% 98%))}:host([data-theme=\"dark\"]) .combobox-chip,:host-context([data-theme=\"dark\"]) .combobox-chip{background:var(--seki-color-accent-dark, hsl(240 3.7% 15.9%))}:host([data-theme=\"dark\"]) .combobox-count,:host-context([data-theme=\"dark\"]) .combobox-count,:host([data-theme=\"dark\"]) .combobox-text,:host-context([data-theme=\"dark\"]) .combobox-text{color:var(--seki-color-foreground-dark, hsl(0 0% 98%))}";
+
+const SekiComboboxInput$1 = /*@__PURE__*/ proxyCustomElement(class SekiComboboxInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.searchQuery = '';
+        this.isOpen = false;
+        this.selectedItems = [];
+        this.multiple = false;
+        this.multiSelectDisplay = 'chips';
+        this.placeholder = 'Search...';
+        this.disabled = false;
+        this.listboxId = '';
+        this.inputId = '';
+        this.focusedItemValue = null;
+        this.handleInput = (event) => {
+            const input = event.target;
+            this.searchQuery = input.value;
+            const ctx = this.getContext();
+            if (ctx) {
+                ctx.onSearchChange(input.value);
+            }
+        };
+        this.handleFocus = () => {
+            const ctx = this.getContext();
+            if (ctx && !this.disabled) {
+                ctx.onOpenChange(true);
+            }
+        };
+        this.handleKeyDown = (event) => {
+            const ctx = this.getContext();
+            if (!ctx)
+                return;
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    if (!this.isOpen) {
+                        ctx.onOpenChange(true);
+                    }
+                    // Navigate to next item - parent handles via keyboard method
+                    this.dispatchKeyboardEvent('ArrowDown');
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.dispatchKeyboardEvent('ArrowUp');
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    if (this.focusedItemValue) {
+                        ctx.onItemSelect(this.focusedItemValue);
+                    }
+                    else if (ctx.allowCustomValue && this.searchQuery.trim()) {
+                        ctx.onCustomValueCreate(this.searchQuery.trim());
+                    }
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    ctx.onOpenChange(false);
+                    this.searchQuery = '';
+                    ctx.onSearchChange('');
+                    break;
+                case 'Backspace':
+                    if (this.multiple && this.multiSelectDisplay === 'chips' && !this.searchQuery && this.selectedItems.length > 0) {
+                        const lastItem = this.selectedItems[this.selectedItems.length - 1];
+                        ctx.removeValue(lastItem.value);
+                    }
+                    break;
+                case 'Home':
+                    if (this.isOpen) {
+                        event.preventDefault();
+                        this.dispatchKeyboardEvent('Home');
+                    }
+                    break;
+                case 'End':
+                    if (this.isOpen) {
+                        event.preventDefault();
+                        this.dispatchKeyboardEvent('End');
+                    }
+                    break;
+            }
+        };
+        this.handleChipRemove = (event, value) => {
+            event.stopPropagation();
+            const ctx = this.getContext();
+            if (ctx) {
+                ctx.removeValue(value);
+            }
+        };
+    }
+    getContext() {
+        const combobox = this.el.closest('seki-combobox');
+        return (combobox === null || combobox === void 0 ? void 0 : combobox.comboboxContext) || null;
+    }
+    componentDidLoad() {
+        this.updateState();
+    }
+    updateState() {
+        const ctx = this.getContext();
+        if (ctx) {
+            this.searchQuery = ctx.searchQuery;
+            this.isOpen = ctx.open;
+            this.selectedItems = ctx.getSelectedItems();
+            this.multiple = ctx.multiple;
+            this.multiSelectDisplay = ctx.multiSelectDisplay;
+            this.disabled = ctx.disabled;
+            this.listboxId = ctx.listboxId;
+            this.inputId = ctx.inputId;
+            this.focusedItemValue = ctx.focusedItemValue;
+        }
+    }
+    dispatchKeyboardEvent(key) {
+        const combobox = this.el.closest('seki-combobox');
+        if (combobox) {
+            combobox.dispatchEvent(new CustomEvent('comboboxKeyboard', {
+                detail: { key },
+                bubbles: false
+            }));
+        }
+    }
+    renderChips() {
+        return this.selectedItems.map(item => (h("span", { class: "combobox-chip", key: item.value }, h("span", { class: "chip-label" }, item.label), h("button", { type: "button", class: "chip-remove", "aria-label": `Remove ${item.label}`, onClick: (e) => this.handleChipRemove(e, item.value), tabIndex: -1 }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))));
+    }
+    renderCount() {
+        if (this.selectedItems.length === 0)
+            return null;
+        return (h("span", { class: "combobox-count" }, this.selectedItems.length, " selected"));
+    }
+    renderText() {
+        if (this.selectedItems.length === 0)
+            return null;
+        const labels = this.selectedItems.map(i => i.label);
+        const text = labels.length <= 3
+            ? labels.join(', ')
+            : `${labels.slice(0, 3).join(', ')}...`;
+        return h("span", { class: "combobox-text" }, text);
+    }
+    renderSelectedDisplay() {
+        if (!this.multiple)
+            return null;
+        switch (this.multiSelectDisplay) {
+            case 'chips':
+                return this.renderChips();
+            case 'count':
+                return this.renderCount();
+            case 'text':
+                return this.renderText();
+            default:
+                return null;
+        }
+    }
+    render() {
+        const focusedItemId = this.focusedItemValue
+            ? `combobox-item-${this.focusedItemValue}`
+            : undefined;
+        return (h(Host, { key: '4c9e22ab52565a52526e90bdb02d2951fd5d0932' }, h("div", { key: 'a05c73e2c6b368731728a565032f1a3e2a5c5b98', class: "combobox-input-wrapper" }, this.renderSelectedDisplay(), h("input", { key: '8dbddc30890b1e347113f09749d391de70825e26', id: this.inputId, type: "text", class: "combobox-input", value: this.searchQuery, placeholder: this.selectedItems.length > 0 && this.multiple ? '' : this.placeholder, disabled: this.disabled, "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-activedescendant": focusedItemId, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }))));
+    }
+    get el() { return this; }
+    static get style() { return sekiComboboxInputCss; }
+}, [257, "seki-combobox-input", {
+        "searchQuery": [32],
+        "isOpen": [32],
+        "selectedItems": [32],
+        "multiple": [32],
+        "multiSelectDisplay": [32],
+        "placeholder": [32],
+        "disabled": [32],
+        "listboxId": [32],
+        "inputId": [32],
+        "focusedItemValue": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-combobox-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-combobox-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiComboboxInput$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiComboboxInput = SekiComboboxInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiComboboxInput, defineCustomElement };

package/dist/components/seki-combobox-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiComboboxItem extends Components.SekiComboboxItem, HTMLElement {}
+export const SekiComboboxItem: {
+    prototype: SekiComboboxItem;
+    new (): SekiComboboxItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,114 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-2Ncy6l6O.js';
+
+const sekiComboboxItemCss = ":host{display:block}.combobox-item{display:flex;align-items:center;justify-content:space-between;padding:var(--seki-spacing-2, 0.5rem) var(--seki-spacing-3, 0.75rem);cursor:pointer;font-family:var(--seki-font-sans, system-ui, -apple-system, sans-serif);font-size:var(--seki-font-size-sm, 0.875rem);line-height:var(--seki-line-height-tight, 1.25);color:var(--seki-color-foreground, hsl(240 10% 3.9%));border-radius:var(--seki-radius-sm, 0.25rem);transition:background-color 0.15s ease}.combobox-item:hover:not(.disabled),.combobox-item.focused:not(.disabled){background-color:var(--seki-color-accent, hsl(240 4.8% 95.9%))}.combobox-item.selected{font-weight:var(--seki-font-weight-medium, 500)}.combobox-item.disabled{opacity:0.5;cursor:not-allowed}.check-icon{width:1rem;height:1rem;flex-shrink:0}:host([data-theme=\"dark\"]) .combobox-item,:host-context([data-theme=\"dark\"]) .combobox-item{color:var(--seki-color-foreground-dark, hsl(0 0% 98%))}:host([data-theme=\"dark\"]) .combobox-item:hover:not(.disabled),:host-context([data-theme=\"dark\"]) .combobox-item:hover:not(.disabled),:host([data-theme=\"dark\"]) .combobox-item.focused:not(.disabled),:host-context([data-theme=\"dark\"]) .combobox-item.focused:not(.disabled){background-color:var(--seki-color-accent-dark, hsl(240 3.7% 15.9%))}";
+
+const SekiComboboxItem$1 = /*@__PURE__*/ proxyCustomElement(class SekiComboboxItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /** Disable this item */
+        this.disabled = false;
+        this.isSelected = false;
+        this.isFocused = false;
+        this.itemId = `combobox-item-${Math.random().toString(36).substr(2, 9)}`;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            const ctx = this.getContext();
+            if (ctx) {
+                ctx.onItemSelect(this.value);
+            }
+        };
+        this.handleMouseEnter = () => {
+            if (this.disabled)
+                return;
+            const ctx = this.getContext();
+            if (ctx) {
+                ctx.onItemFocus(this.value);
+            }
+        };
+    }
+    getContext() {
+        const combobox = this.el.closest('seki-combobox');
+        return (combobox === null || combobox === void 0 ? void 0 : combobox.comboboxContext) || null;
+    }
+    componentWillLoad() {
+        this.registerWithContext();
+    }
+    componentDidLoad() {
+        this.updateState();
+    }
+    disconnectedCallback() {
+        const ctx = this.getContext();
+        if (ctx) {
+            ctx.unregisterItem(this.value);
+        }
+    }
+    handlePropsChange() {
+        this.registerWithContext();
+    }
+    registerWithContext() {
+        var _a;
+        const ctx = this.getContext();
+        if (ctx) {
+            const label = ((_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || this.value;
+            const item = {
+                value: this.value,
+                label,
+                disabled: this.disabled,
+            };
+            ctx.registerItem(item);
+        }
+    }
+    updateState() {
+        const ctx = this.getContext();
+        if (ctx) {
+            this.isSelected = ctx.isValueSelected(this.value);
+            this.isFocused = ctx.focusedItemValue === this.value;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'b655214703f70b20322a4a9ed0a2e8bd42c221c4' }, h("div", { key: '0cdc248bfab845c66e8ed9c347ba6a8baa15fd16', id: this.itemId, class: {
+                'combobox-item': true,
+                'selected': this.isSelected,
+                'focused': this.isFocused,
+                'disabled': this.disabled,
+            }, role: "option", "aria-selected": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter }, h("slot", { key: '07574064e6c82771a2064a0650aca23ef11c1282' }), this.isSelected && (h("svg", { key: 'c8eafdbda8649d604f425025d65921603f3d68bc', class: "check-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: '154f69b4f6df4dd7ff6e97fce008498b4eb8c4b8', points: "20 6 9 17 4 12" }))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "value": ["handlePropsChange"],
+        "disabled": ["handlePropsChange"]
+    }; }
+    static get style() { return sekiComboboxItemCss; }
+}, [257, "seki-combobox-item", {
+        "value": [1],
+        "disabled": [4],
+        "isSelected": [32],
+        "isFocused": [32]
+    }, undefined, {
+        "value": ["handlePropsChange"],
+        "disabled": ["handlePropsChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-combobox-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-combobox-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiComboboxItem$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiComboboxItem = SekiComboboxItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiComboboxItem, defineCustomElement };

package/dist/components/seki-combobox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiCombobox extends Components.SekiCombobox, HTMLElement {}
+export const SekiCombobox: {
+    prototype: SekiCombobox;
+    new (): SekiCombobox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;