@sekiui/elements 0.0.65 → 0.0.70

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

@@ -0,0 +1,369 @@
+// src/components/toggle-group/seki-toggle-group.tsx
+import { Host, h } from "@stencil/core";
+export class SekiToggleGroup {
+    constructor() {
+        /** Selection mode: single (radio-like) or multiple (checkbox-like) */
+        this.type = 'single';
+        /** Visual style variant for all toggles */
+        this.variant = 'default';
+        /** Size for all toggles */
+        this.size = 'md';
+        /** Layout orientation */
+        this.orientation = 'horizontal';
+        /** Disable all toggles */
+        this.disabled = false;
+        this.internalValue = '';
+        this.focusedValue = null;
+        this.registeredToggles = new Map();
+        this.handleToggle = (toggleValue) => {
+            if (this.disabled)
+                return;
+            let newValue;
+            if (this.type === 'multiple') {
+                const currentValues = Array.isArray(this.internalValue) ? this.internalValue : [];
+                if (currentValues.includes(toggleValue)) {
+                    newValue = currentValues.filter(v => v !== toggleValue);
+                }
+                else {
+                    newValue = [...currentValues, toggleValue];
+                }
+            }
+            else {
+                // Single mode: toggle off if same value, otherwise select new
+                newValue = this.internalValue === toggleValue ? '' : toggleValue;
+            }
+            // Update internal state in uncontrolled mode
+            if (this.value === undefined) {
+                this.internalValue = newValue;
+            }
+            this.sekiValueChange.emit({ value: newValue });
+        };
+        this.isPressed = (toggleValue) => {
+            if (this.type === 'multiple' && Array.isArray(this.internalValue)) {
+                return this.internalValue.includes(toggleValue);
+            }
+            return this.internalValue === toggleValue;
+        };
+        this.handleFocusChange = (toggleValue) => {
+            this.focusedValue = toggleValue;
+            this.updateContextOnElement();
+        };
+        this.registerToggle = (toggleValue, element) => {
+            this.registeredToggles.set(toggleValue, element);
+        };
+        this.unregisterToggle = (toggleValue) => {
+            this.registeredToggles.delete(toggleValue);
+        };
+    }
+    componentWillLoad() {
+        if (this.value !== undefined) {
+            this.internalValue = this.value;
+        }
+        else if (this.defaultValue !== undefined) {
+            this.internalValue = this.defaultValue;
+        }
+        else {
+            this.internalValue = this.type === 'multiple' ? [] : '';
+        }
+        this.updateContextOnElement();
+    }
+    componentDidLoad() {
+        this.updateContextOnElement();
+    }
+    componentDidRender() {
+        this.updateContextOnElement();
+    }
+    handleValuePropChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalValue = newValue;
+        }
+        this.updateContextOnElement();
+    }
+    handleInternalValueChange() {
+        this.updateContextOnElement();
+    }
+    updateContextOnElement() {
+        this.el.toggleGroupContext = this.toggleGroupContext;
+    }
+    handleKeyDown(event) {
+        var _a;
+        const toggleValues = Array.from(this.registeredToggles.keys());
+        if (toggleValues.length === 0)
+            return;
+        const currentIndex = this.focusedValue ? toggleValues.indexOf(this.focusedValue) : -1;
+        let nextIndex = currentIndex;
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                nextIndex = currentIndex < toggleValues.length - 1 ? currentIndex + 1 : 0;
+                handled = true;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                nextIndex = currentIndex > 0 ? currentIndex - 1 : toggleValues.length - 1;
+                handled = true;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                handled = true;
+                break;
+            case 'End':
+                nextIndex = toggleValues.length - 1;
+                handled = true;
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+            const nextValue = toggleValues[nextIndex];
+            const nextElement = this.registeredToggles.get(nextValue);
+            if (nextElement) {
+                this.focusedValue = nextValue;
+                this.updateContextOnElement();
+                // Focus the button inside the toggle
+                const button = (_a = nextElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+                button === null || button === void 0 ? void 0 : button.focus();
+            }
+        }
+    }
+    get toggleGroupContext() {
+        return {
+            type: this.type,
+            value: this.internalValue,
+            variant: this.variant,
+            size: this.size,
+            disabled: this.disabled,
+            focusedValue: this.focusedValue,
+            onToggle: this.handleToggle,
+            isPressed: this.isPressed,
+            onFocusChange: this.handleFocusChange,
+            registerToggle: this.registerToggle,
+            unregisterToggle: this.unregisterToggle,
+        };
+    }
+    render() {
+        return (h(Host, { key: 'c911e19b2e488f2cca264be23d0751e419371d19', role: "group", "aria-label": this.ariaLabel, "aria-orientation": this.orientation }, h("slot", { key: '9e320a17f419904cafbc8f28ced78488cab58754' })));
+    }
+    static get is() { return "seki-toggle-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-toggle-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-toggle-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'single' | 'multiple'",
+                    "resolved": "\"multiple\" | \"single\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selection mode: single (radio-like) or multiple (checkbox-like)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'single'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial value for uncontrolled mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'outline'",
+                    "resolved": "\"default\" | \"outline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style variant for all toggles"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size for all toggles"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout orientation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable all toggles"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {},
+            "focusedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sekiValueChange",
+                "name": "sekiValueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when value changes"
+                },
+                "complexType": {
+                    "original": "ToggleGroupValueChangeEventDetail",
+                    "resolved": "ToggleGroupValueChangeEventDetail",
+                    "references": {
+                        "ToggleGroupValueChangeEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/toggle-group",
+                            "id": "src/utils/toggle-group.ts::ToggleGroupValueChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValuePropChange"
+            }, {
+                "propName": "internalValue",
+                "methodName": "handleInternalValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -346,7 +346,7 @@ export class SekiTooltip {
             clearTimeout(this.longPressTimer);
     }
     render() {
-        return (h("div", { key: 'a69a1fac4190d84ce006943dd4c34b8d4edf61d1', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: '1db1aafc881439ccf8404012c3849c0149635d09', name: "content" }), h("div", { key: '161f78e9e491d764d6f001325649f73b84ca4f51', class: "tooltip-arrow" })));
+        return (h("div", { key: 'c82f08fd699bb8b5c98da8af0501998faafa0314', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: '2189381f41bdb8ef0c117d2b781b2ea3eaf01059', name: "content" }), h("div", { key: 'fd4ce59a598c09420e7cab91f72f424562a1b564', class: "tooltip-arrow" })));
     }
     static get is() { return "seki-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -400,7 +400,7 @@ export class SekiTooltip {
                     "references": {
                         "TooltipSide": {
                             "location": "local",
-                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/tooltip/seki-tooltip.tsx",
+                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/tooltip/seki-tooltip.tsx",
                             "id": "src/components/tooltip/seki-tooltip.tsx::TooltipSide"
                         }
                     }
@@ -494,7 +494,7 @@ export class SekiTooltip {
                     "references": {
                         "TooltipShowDetail": {
                             "location": "local",
-                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/tooltip/seki-tooltip.tsx",
+                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/tooltip/seki-tooltip.tsx",
                             "id": "src/components/tooltip/seki-tooltip.tsx::TooltipShowDetail"
                         }
                     }
@@ -515,7 +515,7 @@ export class SekiTooltip {
                     "references": {
                         "TooltipHideDetail": {
                             "location": "local",
-                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/tooltip/seki-tooltip.tsx",
+                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/tooltip/seki-tooltip.tsx",
                             "id": "src/components/tooltip/seki-tooltip.tsx::TooltipHideDetail"
                         }
                     }
@@ -536,7 +536,7 @@ export class SekiTooltip {
                     "references": {
                         "TooltipPositionedDetail": {
                             "location": "local",
-                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/tooltip/seki-tooltip.tsx",
+                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/tooltip/seki-tooltip.tsx",
                             "id": "src/components/tooltip/seki-tooltip.tsx::TooltipPositionedDetail"
                         }
                     }

package/dist/collection/utils/combobox/combobox-context.js

@@ -0,0 +1,53 @@
+/**
+ * Combobox Context
+ * Context for sharing state between combobox components
+ */
+/**
+ * Default context value
+ * Used as placeholder before provider initializes
+ */
+export const defaultComboboxContext = {
+    // State Properties
+    value: '',
+    multiple: false,
+    open: false,
+    disabled: false,
+    required: false,
+    loading: false,
+    searchQuery: '',
+    focusedItemValue: null,
+    allowCustomValue: false,
+    multiSelectDisplay: 'chips',
+    // ID Properties
+    inputId: '',
+    listboxId: '',
+    triggerId: '',
+    // Accessibility Properties
+    ariaLabel: undefined,
+    ariaLabelledby: undefined,
+    ariaDescribedby: undefined,
+    // Handler Methods (no-op defaults)
+    onValueChange: () => { },
+    onOpenChange: () => { },
+    onSearchChange: () => { },
+    onItemFocus: () => { },
+    onItemSelect: () => { },
+    onCustomValueCreate: () => { },
+    // Utility Methods (no-op defaults)
+    isValueSelected: () => false,
+    getSelectedItems: () => [],
+    registerItem: () => { },
+    unregisterItem: () => { },
+    getFilteredItems: () => [],
+    clearSelection: () => { },
+    removeValue: () => { },
+};
+/**
+ * Context for combobox component family
+ *
+ * Note: Since Stencil doesn't provide built-in context API,
+ * we use direct parent-child communication via element references.
+ *
+ * The parent seki-combobox component exposes a `comboboxContext` property
+ * that children can access via `this.el.closest('seki-combobox').comboboxContext`
+ */

package/dist/collection/utils/combobox/index.js

@@ -0,0 +1,6 @@
+/**
+ * Combobox Utilities
+ * Shared utilities, types, and context for combobox components
+ */
+export * from './types';
+export * from './combobox-context';

package/dist/collection/utils/combobox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/toggle-group.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.js

@@ -1,5 +1,5 @@
 export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-2Ncy6l6O.js';
-export { S as SekiSwitch } from './p-DVEX9jyH.js';
+export { S as SekiSwitch } from './p-CFqaAL_u.js';
 
 /**
  * Keyboard Service

package/dist/components/{p-D6lL08bP.js → p-B2WF3v2A.js}

@@ -11,7 +11,7 @@ const SekiSidebarGroupLabel = /*@__PURE__*/ proxyCustomElement(class SekiSidebar
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'bdcf100832378dc3635726b014a6a3ea641c42ba', class: "sidebar-group-label" }, h("slot", { key: 'a085589cffd5b226b9ac859edf800d814b4d83a6' })));
+        return (h("div", { key: 'fab8189e91e326e5572565da101bd35a64c1cd85', class: "sidebar-group-label" }, h("slot", { key: '3cb15db6b5a536942c4ab17f6f3567c9f1a35979' })));
     }
     static get style() { return sekiSidebarGroupCss; }
 }, [257, "seki-sidebar-group-label"]);

package/dist/components/{p-DVEX9jyH.js → p-CFqaAL_u.js}

@@ -80,7 +80,7 @@ const SekiSwitch = /*@__PURE__*/ proxyCustomElement(class SekiSwitch extends H {
     render() {
         const isChecked = this.isChecked;
         const dataState = isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: '06806e2d0eab976505383da939470496ad6f531c', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: 'e6af55004158a95531f549c71b876549cdff13e4', class: "switch", part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: '9455d11d56c64c576fc305cf6902416c0ddccfc4', class: "thumb", part: "thumb" })), this.name && (h("input", { key: '591d626e085f75db5e3610dc6d341426ca59b4b2', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
+        return (h(Host, { key: 'f5f5f4d87e59638555aefe1dd789e8aa4316316f', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: '88e5657996244d5e162f64958be65e20c0fb250d', class: "switch", part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: '59d6e289af534e0e8a7b94b6816b2fd4e7175dab', class: "thumb", part: "thumb" })), this.name && (h("input", { key: 'baa5b6c277d7c6285e143100bce4d30e71285261', 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 style() { return sekiSwitchCss; }
 }, [257, "seki-switch", {

package/dist/components/{p-BA-ac-ZN.js → p-DiqtmzK5.js}

@@ -146,14 +146,14 @@ const SekiNavigationMenuViewport = /*@__PURE__*/ proxyCustomElement(class SekiNa
         return h("slot", null);
     }
     render() {
-        return (h(Host, { key: '9936f9be4895dcf44be5f9605356705491e0bca3', class: {
+        return (h(Host, { key: 'cc437111fc6ee1c9508fd00cd0e7c0ad5efbb171', class: {
                 'navigation-menu-viewport': true,
                 'navigation-menu-viewport--visible': this.isVisible,
             }, style: {
                 '--indicator-left': `${this.indicatorLeft}px`,
                 '--content-offset': `${this.contentOffset}px`,
                 '--content-height': `${this.contentHeight}px`,
-            } }, h("div", { key: 'fadc3feb9cbbaa7330aff130e1eec5a66f8c0c5f', class: "navigation-menu-viewport__indicator" }, h("svg", { key: '2dcde65ba835302e781acdff7aceccced5536112', width: "20", height: "10", viewBox: "0 0 20 10", fill: "currentColor" }, h("polygon", { key: '3d90b3f7dc7ca622b940613c0aa727ee65602a7c', points: "10,0 20,10 0,10" }))), h("div", { key: 'bd350c3ef18085d6a12ac6841980b771e1730c14', ref: el => (this.contentRef = el), class: "navigation-menu-viewport__content" }, this.renderContent())));
+            } }, h("div", { key: '83cbec70dbc466d2db305a03bd7d0673895bf9f0', class: "navigation-menu-viewport__indicator" }, h("svg", { key: 'ebd0907a4cb80f24ef55ac5d47dab2a25ff66b30', width: "20", height: "10", viewBox: "0 0 20 10", fill: "currentColor" }, h("polygon", { key: 'c74b80a045a414f65211d313ec0e07687036aa04', points: "10,0 20,10 0,10" }))), h("div", { key: 'de595c9eb2f2aa574673e2cbc5f99f33fab0a7fb', ref: el => (this.contentRef = el), class: "navigation-menu-viewport__content" }, this.renderContent())));
     }
     get el() { return this; }
     static get watchers() { return {