@sekiui/elements 0.0.49 → 0.0.51

package/dist/cjs/seki-select.cjs.entry.js

@@ -0,0 +1,364 @@
+'use strict';
+
+var index = require('./index-Dd6_-KaR.js');
+
+const sekiSelectCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{--seki-select-trigger-padding:var(--seki-spacing-2) var(--seki-spacing-3);--seki-select-trigger-gap:var(--seki-spacing-2);--seki-select-trigger-border:1px solid var(--seki-color-border);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-bg:var(--seki-color-background);--seki-select-trigger-bg-hover:var(--seki-color-muted);--seki-select-trigger-min-height:var(--seki-size-10);--seki-select-content-bg:var(--seki-color-background);--seki-select-content-border:1px solid var(--seki-color-border);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-shadow:var(--seki-shadow-lg);--seki-select-content-max-height:12.5rem;--seki-select-content-padding:var(--seki-spacing-1);--seki-select-option-padding:var(--seki-spacing-2) var(--seki-spacing-3);--seki-select-option-bg-hover:var(--seki-color-muted);--seki-select-option-bg-selected:var(--seki-color-accent);--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-gap:var(--seki-spacing-2);--seki-select-group-label-padding:var(--seki-spacing-2) var(--seki-spacing-3);--seki-select-group-label-font-size:var(--seki-font-size-sm);--seki-select-group-label-font-weight:var(--seki-font-weight-semibold);--seki-select-group-label-color:var(--seki-color-muted-foreground);--seki-select-group-separator:1px solid var(--seki-color-border);display:inline-block;position:relative;width:100%}.select-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";
+
+const SekiSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sekiChange = index.createEvent(this, "sekiChange");
+        this.sekiOpenChange = index.createEvent(this, "sekiOpenChange");
+        this.sekiValidate = index.createEvent(this, "sekiValidate");
+        /** Enable multi-select mode */
+        this.multiple = false;
+        /** Placeholder text shown when no selection */
+        this.placeholder = 'Select an option';
+        /** Disable all interactions */
+        this.disabled = false;
+        /** Mark as required for form validation */
+        this.required = false;
+        /** Initial dropdown open state (uncontrolled mode) */
+        this.defaultOpen = false;
+        /** Maximum visible pills in multi-select mode */
+        this.maxVisiblePills = 3;
+        /** Preferred dropdown placement */
+        this.placement = 'bottom';
+        /** Maximum dropdown height */
+        this.maxHeight = '12.5rem';
+        // ===========================
+        // State
+        // ===========================
+        this.internalValue = '';
+        this.isOpen = false;
+        this.focusedOptionValue = null;
+        this.registeredOptions = [];
+        this.hasBeenActivated = false;
+        this.searchBuffer = '';
+        this.searchActive = false;
+        this.contentId = `select-content-${Math.random().toString(36).substr(2, 9)}`;
+        this.triggerId = `select-trigger-${Math.random().toString(36).substr(2, 9)}`;
+        this.searchTimeoutId = null;
+        this.searchDebounce = 500;
+        this.handleClickOutside = (event) => {
+            // Only close if dropdown is open
+            if (!this.isOpen) {
+                return;
+            }
+            // Check if click is outside the select component
+            const target = event.target;
+            if (!this.el.contains(target)) {
+                this.handleOpenChange(false);
+            }
+        };
+        // ===========================
+        // Internal Handlers
+        // ===========================
+        this.handleValueChange = (newValue) => {
+            this.internalValue = newValue;
+            // Update controlled prop if it exists
+            if (this.value !== undefined) {
+                this.value = newValue;
+            }
+            // Emit change event
+            const selectedOptions = this.getSelectedOptions();
+            if (this.multiple && Array.isArray(newValue)) {
+                this.sekiChange.emit({
+                    value: newValue,
+                    options: selectedOptions,
+                });
+            }
+            else {
+                this.sekiChange.emit({
+                    value: newValue,
+                    option: selectedOptions[0],
+                });
+            }
+            // Close dropdown in single-select mode
+            if (!this.multiple) {
+                this.handleOpenChange(false);
+            }
+        };
+        this.handleOpenChange = (open) => {
+            this.isOpen = open;
+            // Update controlled prop if it exists
+            if (this.open !== undefined) {
+                this.open = open;
+            }
+            // Mark as activated when opened
+            if (open) {
+                this.hasBeenActivated = true;
+            }
+            // Emit event
+            this.sekiOpenChange.emit({ open });
+            // Validate on close if required
+            if (!open && this.required && this.hasBeenActivated) {
+                this.validateRequired();
+            }
+        };
+        this.handleOptionFocus = (value) => {
+            this.focusedOptionValue = value;
+        };
+        this.handleOptionSelect = (value) => {
+            if (this.multiple) {
+                const currentValue = Array.isArray(this.internalValue) ? this.internalValue : [];
+                if (currentValue.includes(value)) {
+                    // Deselect
+                    this.handleValueChange(currentValue.filter(v => v !== value));
+                }
+                else {
+                    // Select
+                    this.handleValueChange([...currentValue, value]);
+                }
+            }
+            else {
+                this.handleValueChange(value);
+            }
+        };
+        this.isValueSelected = (value) => {
+            if (this.multiple && Array.isArray(this.internalValue)) {
+                return this.internalValue.includes(value);
+            }
+            return this.internalValue === value;
+        };
+        this.getSelectedOptions = () => {
+            if (this.multiple && Array.isArray(this.internalValue)) {
+                return this.registeredOptions.filter(opt => this.internalValue.includes(opt.value));
+            }
+            return this.registeredOptions.filter(opt => opt.value === this.internalValue);
+        };
+        this.registerOption = (option) => {
+            this.registeredOptions = [...this.registeredOptions, option];
+        };
+        this.unregisterOption = (value) => {
+            this.registeredOptions = this.registeredOptions.filter(opt => opt.value !== value);
+        };
+        this.validateRequired = () => {
+            const isValid = this.multiple
+                ? Array.isArray(this.internalValue) && this.internalValue.length > 0
+                : Boolean(this.internalValue);
+            this.sekiValidate.emit({
+                valid: isValid,
+                errorMessage: isValid ? undefined : 'This field is required',
+            });
+        };
+        this.handleValidate = (valid, errorMessage) => {
+            this.sekiValidate.emit({ valid, errorMessage });
+        };
+    }
+    // ===========================
+    // Lifecycle
+    // ===========================
+    componentWillLoad() {
+        // Initialize internal state
+        if (this.value !== undefined) {
+            this.internalValue = this.value;
+        }
+        else if (this.defaultValue !== undefined) {
+            this.internalValue = this.defaultValue;
+        }
+        else {
+            this.internalValue = this.multiple ? [] : '';
+        }
+        if (this.open !== undefined) {
+            this.isOpen = this.open;
+        }
+        else if (this.defaultOpen) {
+            this.isOpen = this.defaultOpen;
+        }
+        // Expose context on the element for child components
+        this.el.selectContext = this.selectContext;
+    }
+    componentDidLoad() {
+        // Expose context on the element for child components
+        this.el.selectContext = this.selectContext;
+        // Add click-outside listener
+        this.clickOutsideListener = this.handleClickOutside.bind(this);
+        document.addEventListener('click', this.clickOutsideListener, true);
+    }
+    componentDidRender() {
+        // Update context reference after each render
+        this.el.selectContext = this.selectContext;
+    }
+    disconnectedCallback() {
+        // Clean up click-outside listener
+        if (this.clickOutsideListener) {
+            document.removeEventListener('click', this.clickOutsideListener, true);
+        }
+    }
+    handleValuePropChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalValue = newValue;
+        }
+        this.updateContextOnElement();
+    }
+    handleOpenPropChange(newOpen) {
+        if (newOpen !== undefined) {
+            this.isOpen = newOpen;
+        }
+        this.updateContextOnElement();
+    }
+    handleIsOpenChange() {
+        this.updateContextOnElement();
+    }
+    handleInternalValueChange() {
+        this.updateContextOnElement();
+    }
+    updateContextOnElement() {
+        this.el.selectContext = this.selectContext;
+    }
+    // ===========================
+    // Methods
+    // ===========================
+    /** Programmatically open the dropdown */
+    async openDropdown() {
+        this.handleOpenChange(true);
+    }
+    /** Programmatically close the dropdown */
+    async closeDropdown() {
+        this.handleOpenChange(false);
+    }
+    /** Focus the trigger element */
+    async focusTrigger() {
+        // Implementation will focus the trigger
+    }
+    /** Clear all selections */
+    async clearSelection() {
+        this.handleValueChange(this.multiple ? [] : '');
+    }
+    /** Handle keyboard navigation (arrow keys, typeahead, etc.) */
+    async handleKeyboard(event) {
+        if (!this.isOpen) {
+            if (event.key === ' ' || event.key === 'Enter' || event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.handleOpenChange(true);
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusNextOption();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusPreviousOption();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.focusedOptionValue !== null) {
+                    this.handleOptionSelect(this.focusedOptionValue);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.handleOpenChange(false);
+                break;
+            case ' ':
+                // Typeahead search
+                event.preventDefault();
+                this.addToSearchBuffer(' ');
+                break;
+            default:
+                // Single character typeahead
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                    event.preventDefault();
+                    this.addToSearchBuffer(event.key);
+                }
+                break;
+        }
+    }
+    focusNextOption() {
+        if (this.registeredOptions.length === 0)
+            return;
+        let nextIndex = 0;
+        if (this.focusedOptionValue !== null) {
+            const currentIndex = this.registeredOptions.findIndex(opt => opt.value === this.focusedOptionValue);
+            nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, this.registeredOptions.length - 1) : 0;
+        }
+        const nextOption = this.registeredOptions[nextIndex];
+        if (nextOption && !nextOption.disabled) {
+            this.handleOptionFocus(nextOption.value);
+        }
+    }
+    focusPreviousOption() {
+        if (this.registeredOptions.length === 0)
+            return;
+        let prevIndex = this.registeredOptions.length - 1;
+        if (this.focusedOptionValue !== null) {
+            const currentIndex = this.registeredOptions.findIndex(opt => opt.value === this.focusedOptionValue);
+            prevIndex = currentIndex > 0 ? currentIndex - 1 : this.registeredOptions.length - 1;
+        }
+        const prevOption = this.registeredOptions[prevIndex];
+        if (prevOption && !prevOption.disabled) {
+            this.handleOptionFocus(prevOption.value);
+        }
+    }
+    addToSearchBuffer(char) {
+        this.searchBuffer += char;
+        this.searchActive = true;
+        // Clear existing timeout
+        if (this.searchTimeoutId !== null) {
+            clearTimeout(this.searchTimeoutId);
+        }
+        // Find first option matching the buffer
+        const matchingOption = this.registeredOptions.find(opt => !opt.disabled && opt.label.toLowerCase().startsWith(this.searchBuffer.toLowerCase()));
+        if (matchingOption) {
+            this.handleOptionFocus(matchingOption.value);
+        }
+        // Reset buffer after debounce
+        this.searchTimeoutId = window.setTimeout(() => {
+            this.searchBuffer = '';
+            this.searchActive = false;
+        }, this.searchDebounce);
+    }
+    // Context to provide to children
+    get selectContext() {
+        return {
+            value: this.internalValue,
+            multiple: this.multiple,
+            open: this.isOpen,
+            disabled: this.disabled,
+            required: this.required,
+            focusedOptionValue: this.focusedOptionValue,
+            contentId: this.contentId,
+            triggerId: this.triggerId,
+            ariaLabel: this.ariaLabel,
+            ariaLabelledby: this.ariaLabelledby,
+            ariaDescribedby: this.ariaDescribedby,
+            onValueChange: this.handleValueChange,
+            onOpenChange: this.handleOpenChange,
+            onOptionFocus: this.handleOptionFocus,
+            onOptionSelect: this.handleOptionSelect,
+            isValueSelected: this.isValueSelected,
+            getSelectedOptions: this.getSelectedOptions,
+            registerOption: this.registerOption,
+            unregisterOption: this.unregisterOption,
+        };
+    }
+    // ===========================
+    // Render
+    // ===========================
+    render() {
+        return (index.h(index.Host, { key: '7b85ab6beecb3d69f522a2362e47905afb4c2cfa' }, index.h("slot", { key: 'dd239306507d718a70dd508c00e871914eecacec' }), this.name && this.renderHiddenNativeElement()));
+    }
+    renderHiddenNativeElement() {
+        if (this.multiple) {
+            return (index.h("select", { class: "select-native", name: this.name, multiple: true, required: this.required, disabled: this.disabled, "aria-hidden": "true", tabindex: -1 }, Array.isArray(this.internalValue) &&
+                this.internalValue.map(val => (index.h("option", { value: val, selected: true }, val)))));
+        }
+        else {
+            return (index.h("input", { type: "hidden", class: "select-native", name: this.name, value: this.internalValue, required: this.required, disabled: this.disabled }));
+        }
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValuePropChange"],
+        "open": ["handleOpenPropChange"],
+        "isOpen": ["handleIsOpenChange"],
+        "internalValue": ["handleInternalValueChange"]
+    }; }
+};
+SekiSelect.style = sekiSelectCss;
+
+exports.seki_select = SekiSelect;

package/dist/cjs/seki-skeleton.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BxD7Xe36.js');
+var index = require('./index-Dd6_-KaR.js');
 
-const sekiSkeletonCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{display:inline-block}.skeleton{background-color:var(--seki-muted);border-radius:var(--seki-skeleton-radius, var(--seki-radius-md, 0.375rem));width:100%;height:100%;animation:skeleton-pulse 2s ease-in-out infinite}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@media (prefers-reduced-motion: reduce){.skeleton{animation:none}}";
+const sekiSkeletonCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{display:inline-block}.skeleton{background-color:var(--seki-muted);border-radius:var(--seki-skeleton-radius, var(--seki-radius-md, 0.375rem));width:100%;height:100%;animation:skeleton-pulse 2s ease-in-out infinite}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@media (prefers-reduced-motion: reduce){.skeleton{animation:none}}";
 
 const SekiSkeleton = class {
     constructor(hostRef) {
@@ -17,7 +17,7 @@ const SekiSkeleton = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'fb7e3abe8762cca61f0f950d6fb051c8ac30cec8', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
+        return (index.h("div", { key: '4908bccb6a551042c9bac657c07f656aa89e0fd0', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
     }
 };
 SekiSkeleton.style = sekiSkeletonCss;

package/dist/cjs/seki-switch.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index.cjs.js');
-require('./index-BxD7Xe36.js');
+require('./index-Dd6_-KaR.js');
 
 
 

package/dist/cjs/sekiui.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BxD7Xe36.js');
+var index = require('./index-Dd6_-KaR.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["seki-field.cjs",[[257,"seki-field",{"orientation":[1],"invalid":[4]}]]],["seki-field-description.cjs",[[257,"seki-field-description",{"descriptorId":[1,"descriptor-id"],"componentId":[32],"getId":[64]}]]],["seki-field-error.cjs",[[257,"seki-field-error",{"errorId":[1,"error-id"],"visible":[4],"componentId":[32],"previousVisible":[32],"getId":[64],"setVisible":[64]},null,{"visible":["handleVisibleChange"]}]]],["seki-field-group.cjs",[[257,"seki-field-group",{"gap":[1]}]]],["seki-field-label.cjs",[[257,"seki-field-label",{"htmlFor":[1,"html-for"],"required":[4]}]]],["seki-field-legend.cjs",[[257,"seki-field-legend"]]],["seki-fieldset.cjs",[[257,"seki-fieldset",{"disabled":[4]}]]],["seki-input.cjs",[[321,"seki-input",{"type":[1],"value":[1537],"placeholder":[1],"disabled":[4],"readonly":[4],"required":[4],"name":[1],"autocomplete":[1],"min":[8],"max":[8],"step":[8],"pattern":[1],"minlength":[2],"maxlength":[2],"size":[1],"invalid":[4],"ariaLabel":[1,"aria-label"],"ariaDescribedby":[1,"aria-describedby"]}]]],["seki-skeleton.cjs",[[257,"seki-skeleton",{"ariaLabel":[1,"aria-label"]}]]],["seki-switch.cjs",[[257,"seki-switch",{"checked":[4],"defaultChecked":[4,"default-checked"],"disabled":[4],"required":[4],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"internalChecked":[32]},[[0,"keydown","handleKeyDown"]]]]]], options);
+  return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["seki-field.cjs",[[257,"seki-field",{"orientation":[1],"invalid":[4]}]]],["seki-field-description.cjs",[[257,"seki-field-description",{"descriptorId":[1,"descriptor-id"],"componentId":[32],"getId":[64]}]]],["seki-field-error.cjs",[[257,"seki-field-error",{"errorId":[1,"error-id"],"visible":[4],"componentId":[32],"previousVisible":[32],"getId":[64],"setVisible":[64]},null,{"visible":["handleVisibleChange"]}]]],["seki-field-group.cjs",[[257,"seki-field-group",{"gap":[1]}]]],["seki-field-label.cjs",[[257,"seki-field-label",{"htmlFor":[1,"html-for"],"required":[4]}]]],["seki-field-legend.cjs",[[257,"seki-field-legend"]]],["seki-fieldset.cjs",[[257,"seki-fieldset",{"disabled":[4]}]]],["seki-input.cjs",[[321,"seki-input",{"type":[1],"value":[1537],"placeholder":[1],"disabled":[4],"readonly":[4],"required":[4],"name":[1],"autocomplete":[1],"min":[8],"max":[8],"step":[8],"pattern":[1],"minlength":[2],"maxlength":[2],"size":[1],"invalid":[4],"ariaLabel":[1,"aria-label"],"ariaDescribedby":[1,"aria-describedby"]}]]],["seki-select.cjs",[[257,"seki-select",{"value":[1032],"defaultValue":[8,"default-value"],"multiple":[4],"placeholder":[1],"disabled":[4],"required":[4],"open":[1028],"defaultOpen":[4,"default-open"],"name":[1],"maxVisiblePills":[2,"max-visible-pills"],"ariaLabel":[1,"aria-label"],"ariaLabelledby":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"placement":[1],"maxHeight":[1,"max-height"],"internalValue":[32],"isOpen":[32],"focusedOptionValue":[32],"registeredOptions":[32],"hasBeenActivated":[32],"searchBuffer":[32],"searchActive":[32],"openDropdown":[64],"closeDropdown":[64],"focusTrigger":[64],"clearSelection":[64],"handleKeyboard":[64]},null,{"value":["handleValuePropChange"],"open":["handleOpenPropChange"],"isOpen":["handleIsOpenChange"],"internalValue":["handleInternalValueChange"]}]]],["seki-select-content.cjs",[[257,"seki-select-content",{"forceUpdate":[32],"scrollToOption":[64]}]]],["seki-select-group.cjs",[[257,"seki-select-group",{"label":[1]}]]],["seki-select-option.cjs",[[257,"seki-select-option",{"value":[8],"label":[1],"disabled":[4]}]]],["seki-select-trigger.cjs",[[257,"seki-select-trigger",{"forceUpdate":[32]}]]],["seki-skeleton.cjs",[[257,"seki-skeleton",{"ariaLabel":[1,"aria-label"]}]]],["seki-switch.cjs",[[257,"seki-switch",{"checked":[4],"defaultChecked":[4,"default-checked"],"disabled":[4],"required":[4],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"internalChecked":[32]},[[0,"keydown","handleKeyDown"]]]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -10,6 +10,11 @@
     "components/field-legend/seki-field-legend.js",
     "components/fieldset/seki-fieldset.js",
     "components/input/seki-input.js",
+    "components/select/seki-select.js",
+    "components/select-content/seki-select-content.js",
+    "components/select-group/seki-select-group.js",
+    "components/select-option/seki-select-option.js",
+    "components/select-trigger/seki-select-trigger.js",
     "components/skeleton/seki-skeleton.js"
   ],
   "compiler": {

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

@@ -257,6 +257,37 @@
   --seki-input-invalid-ring: var(--seki-destructive);
   --seki-input-disabled-opacity: 0.5;
   --seki-input-radius: var(--seki-radius-md);
+  --seki-input-ring-offset: 2px;
+
+  /* Select Component Colors */
+  --seki-select-trigger-bg: var(--seki-background);
+  --seki-select-trigger-border: 1px solid var(--seki-border);
+  --seki-select-trigger-bg-hover: var(--seki-muted);
+  --seki-select-trigger-radius: var(--seki-radius-md);
+  --seki-select-trigger-min-height: 2.5rem;
+  --seki-select-trigger-padding: 0.5rem 0.75rem;
+  --seki-select-trigger-gap: 0.5rem;
+
+  /* Select Content/Dropdown */
+  --seki-select-content-bg: var(--seki-popover);
+  --seki-select-content-border: 1px solid var(--seki-border);
+  --seki-select-content-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --seki-select-content-radius: var(--seki-radius-md);
+  --seki-select-content-padding: 0.5rem 0;
+
+  /* Select Option */
+  --seki-select-option-padding: 0.5rem 0.75rem;
+  --seki-select-option-gap: 0.5rem;
+  --seki-select-option-radius: var(--seki-radius-sm);
+  --seki-select-option-bg-hover: var(--seki-muted);
+  --seki-select-option-bg-selected: var(--seki-muted);
+
+  /* Select Group */
+  --seki-select-group-label-padding: 0.5rem 0.75rem;
+  --seki-select-group-label-font-size: var(--seki-font-size-xs);
+  --seki-select-group-label-font-weight: var(--seki-font-semibold);
+  --seki-select-group-label-color: var(--seki-muted-foreground);
+  --seki-select-group-separator: 1px solid var(--seki-border);
 }
 
 /**

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

@@ -257,6 +257,37 @@
   --seki-input-invalid-ring: var(--seki-destructive);
   --seki-input-disabled-opacity: 0.5;
   --seki-input-radius: var(--seki-radius-md);
+  --seki-input-ring-offset: 2px;
+
+  /* Select Component Colors */
+  --seki-select-trigger-bg: var(--seki-background);
+  --seki-select-trigger-border: 1px solid var(--seki-border);
+  --seki-select-trigger-bg-hover: var(--seki-muted);
+  --seki-select-trigger-radius: var(--seki-radius-md);
+  --seki-select-trigger-min-height: 2.5rem;
+  --seki-select-trigger-padding: 0.5rem 0.75rem;
+  --seki-select-trigger-gap: 0.5rem;
+
+  /* Select Content/Dropdown */
+  --seki-select-content-bg: var(--seki-popover);
+  --seki-select-content-border: 1px solid var(--seki-border);
+  --seki-select-content-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --seki-select-content-radius: var(--seki-radius-md);
+  --seki-select-content-padding: 0.5rem 0;
+
+  /* Select Option */
+  --seki-select-option-padding: 0.5rem 0.75rem;
+  --seki-select-option-gap: 0.5rem;
+  --seki-select-option-radius: var(--seki-radius-sm);
+  --seki-select-option-bg-hover: var(--seki-muted);
+  --seki-select-option-bg-selected: var(--seki-muted);
+
+  /* Select Group */
+  --seki-select-group-label-padding: 0.5rem 0.75rem;
+  --seki-select-group-label-font-size: var(--seki-font-size-xs);
+  --seki-select-group-label-font-weight: var(--seki-font-semibold);
+  --seki-select-group-label-color: var(--seki-muted-foreground);
+  --seki-select-group-separator: 1px solid var(--seki-border);
 }
 
 /**

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

@@ -257,6 +257,37 @@
   --seki-input-invalid-ring: var(--seki-destructive);
   --seki-input-disabled-opacity: 0.5;
   --seki-input-radius: var(--seki-radius-md);
+  --seki-input-ring-offset: 2px;
+
+  /* Select Component Colors */
+  --seki-select-trigger-bg: var(--seki-background);
+  --seki-select-trigger-border: 1px solid var(--seki-border);
+  --seki-select-trigger-bg-hover: var(--seki-muted);
+  --seki-select-trigger-radius: var(--seki-radius-md);
+  --seki-select-trigger-min-height: 2.5rem;
+  --seki-select-trigger-padding: 0.5rem 0.75rem;
+  --seki-select-trigger-gap: 0.5rem;
+
+  /* Select Content/Dropdown */
+  --seki-select-content-bg: var(--seki-popover);
+  --seki-select-content-border: 1px solid var(--seki-border);
+  --seki-select-content-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --seki-select-content-radius: var(--seki-radius-md);
+  --seki-select-content-padding: 0.5rem 0;
+
+  /* Select Option */
+  --seki-select-option-padding: 0.5rem 0.75rem;
+  --seki-select-option-gap: 0.5rem;
+  --seki-select-option-radius: var(--seki-radius-sm);
+  --seki-select-option-bg-hover: var(--seki-muted);
+  --seki-select-option-bg-selected: var(--seki-muted);
+
+  /* Select Group */
+  --seki-select-group-label-padding: 0.5rem 0.75rem;
+  --seki-select-group-label-font-size: var(--seki-font-size-xs);
+  --seki-select-group-label-font-weight: var(--seki-font-semibold);
+  --seki-select-group-label-color: var(--seki-muted-foreground);
+  --seki-select-group-separator: 1px solid var(--seki-border);
 }
 
 /**
@@ -359,9 +390,11 @@
 }
 
 .description {
-  color: var(--seki-description-color, hsl(var(--seki-muted-foreground)));
-  font-size: var(--seki-description-font-size, 0.875rem);
-  line-height: var(--seki-description-line-height, 1.4);
+  color: var(--seki-description-color, var(--seki-muted-foreground));
+  font-family: var(--seki-font-sans);
+  font-size: var(--seki-description-font-size, var(--seki-font-size-sm));
+  font-weight: var(--seki-font-normal);
+  line-height: var(--seki-description-line-height, var(--seki-leading-relaxed));
 }
 
 /* Reduced motion */