@sekiui/elements 0.0.55 → 0.0.57

package/dist/cdn/index.js

@@ -1,112 +1,1074 @@
-import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './p-bMBhrs0a.js';
-export { g as getAssetPath, r as render, s as setAssetPath, b as setNonce, d as setPlatformOptions } from './p-bMBhrs0a.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-Bp7tjKwQ.js';
+export { S as SekiSwitch } from './p-BfRJQMIU.js';
+export { K as KeyboardService, c as createKeyboardService, g as getKeyboardService } from './p-BJCq8m2o.js';
 
-const sekiSwitchCss = ":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-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}.switch{width:var(--seki-switch-width, 2.75rem);height:var(--seki-switch-height, 1.5rem);position:relative;display:inline-flex;align-items:center;flex-shrink:0;background-color:var(--seki-switch-bg-unchecked, hsl(var(--muted, 240 4.8% 95.9%)));border-radius:9999px;cursor:pointer;transition:background-color var(--seki-switch-transition-duration, 150ms) ease-out;outline:none}.switch:focus-visible{outline:2px solid var(--seki-switch-focus-ring, hsl(var(--ring, 240 5% 64.9%)));outline-offset:2px}:host([data-state=\"checked\"]) .switch{background-color:var(--seki-switch-bg-checked, hsl(var(--primary, 240 5.9% 10%)))}:host([data-disabled]) .switch{background-color:var(--seki-switch-bg-disabled, hsl(var(--muted, 240 4.8% 95.9%) / 0.5));cursor:not-allowed;opacity:0.5}.thumb{width:var(--seki-switch-thumb-size, 1.25rem);height:var(--seki-switch-thumb-size, 1.25rem);background-color:var(--seki-switch-thumb-bg, hsl(var(--background, 0 0% 100%)));position:absolute;left:0.125rem;border-radius:50%;box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);transition:transform var(--seki-switch-transition-duration, 150ms) ease-out;pointer-events:none}:host([data-state=\"checked\"]) .thumb{transform:translateX(calc(var(--seki-switch-width, 2.75rem) - var(--seki-switch-thumb-size, 1.25rem) - 0.25rem))}@media (prefers-color-scheme: dark){.switch{--seki-switch-bg-unchecked:hsl(var(--muted, 240 3.7% 15.9%))}.thumb{--seki-switch-thumb-bg:hsl(var(--background, 240 10% 3.9%))}}";
-
-const SekiSwitch = /*@__PURE__*/ proxyCustomElement(class SekiSwitch extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.sekiChange = createEvent(this, "sekiChange");
-        /**
-         * @description Initial checked state for uncontrolled mode. Ignored if checked prop is provided.
-         */
-        this.defaultChecked = false;
-        /**
-         * @description Disables all interactions when true.
-         */
-        this.disabled = false;
-        /**
-         * @description Marks switch as required for form validation.
-         */
-        this.required = false;
-        /**
-         * @description Value sent in form data when switch is checked. Defaults to 'on'.
-         */
-        this.value = 'on';
-        /**
-         * @description Internal checked state for uncontrolled mode.
-         */
-        this.internalChecked = false;
-        /**
-         * Toggle switch state and emit event
-         */
-        this.toggle = () => {
-            if (this.disabled) {
+/**
+ * Focus Management Service
+ * Provides utilities for focus management, focus traps, and focus restoration
+ */
+/**
+ * FocusService - Centralized focus management
+ * Provides:
+ * - Focus trap implementation
+ * - Focus restoration
+ * - Focusable element detection
+ * - Focus utilities for accessibility
+ */
+class FocusService {
+    constructor() {
+        this.focusTrapStack = new Map();
+        this.previouslyFocusedElement = null;
+    }
+    /**
+     * Get all focusable elements within a container
+     * Includes buttons, links, inputs, textareas, selects, and elements with tabindex
+     */
+    getFocusableElements(container = document) {
+        const focusableSelectors = [
+            'button:not([disabled])',
+            'a[href]',
+            'input:not([disabled])',
+            'textarea:not([disabled])',
+            'select:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+        ].join(',');
+        const elements = Array.from(container.querySelectorAll(focusableSelectors));
+        return elements.filter((el) => {
+            // Exclude hidden elements
+            const style = window.getComputedStyle(el);
+            return style.display !== 'none' && style.visibility !== 'hidden';
+        });
+    }
+    /**
+     * Check if an element is focusable
+     */
+    isFocusable(element) {
+        const focusableSelectors = [
+            'button',
+            'a[href]',
+            'input',
+            'textarea',
+            'select',
+            '[tabindex]',
+        ];
+        return focusableSelectors.some((selector) => element.matches(selector)) && !element.hasAttribute('disabled');
+    }
+    /**
+     * Set focus to an element with optional callbacks
+     */
+    setFocus(element, options) {
+        var _a;
+        if (!element)
+            return false;
+        try {
+            element.focus({ preventScroll: (_a = options === null || options === void 0 ? void 0 : options.preventScroll) !== null && _a !== void 0 ? _a : false });
+            return document.activeElement === element;
+        }
+        catch (error) {
+            console.warn('Failed to set focus:', error);
+            return false;
+        }
+    }
+    /**
+     * Trap focus within a container (keyboard navigation stays within bounds)
+     * @param container - The element to trap focus within
+     * @param options - Focus trap options
+     */
+    createFocusTrap(container, options = {}) {
+        if (typeof window === 'undefined')
+            return;
+        const { initialFocus, restoreFocus = true } = options;
+        // Store the previously focused element for restoration
+        if (restoreFocus) {
+            this.previouslyFocusedElement = document.activeElement;
+        }
+        // Set initial focus
+        if (initialFocus) {
+            this.setFocus(initialFocus);
+        }
+        else {
+            const focusableElements = this.getFocusableElements(container);
+            if (focusableElements.length > 0) {
+                this.setFocus(focusableElements[0]);
+            }
+        }
+        // Handle Tab key for focus trap
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Tab')
+                return;
+            const focusableElements = this.getFocusableElements(container);
+            if (focusableElements.length === 0)
                 return;
+            const currentFocusIndex = focusableElements.indexOf(document.activeElement);
+            if (event.shiftKey) {
+                // Shift+Tab - move backwards
+                const previousIndex = currentFocusIndex - 1;
+                const targetElement = previousIndex >= 0 ? focusableElements[previousIndex] : focusableElements[focusableElements.length - 1];
+                event.preventDefault();
+                this.setFocus(targetElement);
             }
-            const newCheckedState = !this.isChecked;
-            // Update internal state only in uncontrolled mode
-            if (this.checked === undefined) {
-                this.internalChecked = newCheckedState;
+            else {
+                // Tab - move forwards
+                const nextIndex = currentFocusIndex + 1;
+                const targetElement = nextIndex < focusableElements.length ? focusableElements[nextIndex] : focusableElements[0];
+                event.preventDefault();
+                this.setFocus(targetElement);
             }
-            // Always emit event (for both controlled and uncontrolled)
-            this.sekiChange.emit({ checked: newCheckedState });
         };
-        /**
-         * Handle click events
-         */
-        this.handleClick = () => {
-            this.toggle();
+        container.addEventListener('keydown', handleKeyDown);
+        this.focusTrapStack.set(container, this.previouslyFocusedElement);
+        // Store the handler for potential later cleanup
+        // Note: Manual cleanup should be done via releaseFocusTrap()
+    }
+    /**
+     * Release focus trap from a container
+     */
+    releaseFocusTrap(container, restoreFocus = true) {
+        const previousElement = this.focusTrapStack.get(container);
+        this.focusTrapStack.delete(container);
+        if (restoreFocus && previousElement) {
+            this.setFocus(previousElement);
+        }
+    }
+    /**
+     * Get the first focusable element in a container
+     */
+    getFirstFocusable(container = document) {
+        const focusable = this.getFocusableElements(container);
+        return focusable.length > 0 ? focusable[0] : null;
+    }
+    /**
+     * Get the last focusable element in a container
+     */
+    getLastFocusable(container = document) {
+        const focusable = this.getFocusableElements(container);
+        return focusable.length > 0 ? focusable[focusable.length - 1] : null;
+    }
+    /**
+     * Move focus to the next focusable element
+     */
+    focusNext(container = document) {
+        const focusable = this.getFocusableElements(container);
+        const currentIndex = focusable.indexOf(document.activeElement);
+        const nextIndex = (currentIndex + 1) % focusable.length;
+        if (focusable.length > 0) {
+            this.setFocus(focusable[nextIndex]);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Move focus to the previous focusable element
+     */
+    focusPrevious(container = document) {
+        const focusable = this.getFocusableElements(container);
+        const currentIndex = focusable.indexOf(document.activeElement);
+        const previousIndex = (currentIndex - 1 + focusable.length) % focusable.length;
+        if (focusable.length > 0) {
+            this.setFocus(focusable[previousIndex]);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Clear all focus traps
+     */
+    clearFocusTraps() {
+        this.focusTrapStack.clear();
+    }
+}
+// Singleton instance
+let focusServiceInstance = null;
+/**
+ * Get the singleton FocusService instance
+ */
+function getFocusService() {
+    if (!focusServiceInstance) {
+        focusServiceInstance = new FocusService();
+    }
+    return focusServiceInstance;
+}
+/**
+ * Create a new isolated FocusService instance
+ */
+function createFocusService() {
+    return new FocusService();
+}
+
+/**
+ * Media Query Service
+ * Provides utilities for responsive design and media query management
+ */
+/**
+ * Default breakpoints (Tailwind-inspired)
+ */
+const DEFAULT_BREAKPOINTS = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+};
+/**
+ * MediaQueryService - Centralized media query management
+ * Provides:
+ * - Media query listener registration
+ * - Breakpoint detection
+ * - Window resize handling
+ * - Current viewport information
+ */
+class MediaQueryService {
+    constructor(breakpoints = DEFAULT_BREAKPOINTS) {
+        this.listeners = new Map();
+        this.resizeObserver = null;
+        this.resizeListeners = new Map();
+        this.breakpoints = breakpoints;
+    }
+    /**
+     * Register a media query listener
+     * @param id - Unique identifier for this listener
+     * @param query - CSS media query string
+     * @param handler - Callback when media query matches/unmatches
+     */
+    registerMediaQuery(id, query, handler) {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            const matcher = window.matchMedia(query);
+            const listener = { query, handler, matcher };
+            // Call handler with initial state
+            handler(matcher.matches);
+            // Listen for changes
+            matcher.addEventListener('change', (e) => handler(e.matches));
+            this.listeners.set(id, listener);
+        }
+        catch (error) {
+            console.warn(`Failed to register media query "${query}":`, error);
+        }
+    }
+    /**
+     * Register a breakpoint listener (easier than raw media queries)
+     * @param id - Unique identifier
+     * @param breakpoint - Breakpoint name (sm, md, lg, xl, 2xl)
+     * @param type - Type of match: 'min' (mobile-first) or 'max' (desktop-first)
+     * @param handler - Callback when breakpoint matches
+     */
+    registerBreakpoint(id, breakpoint, type = 'min', handler) {
+        const size = this.breakpoints[breakpoint];
+        if (!size) {
+            console.warn(`Unknown breakpoint: ${breakpoint}`);
+            return;
+        }
+        const query = type === 'min' ? `(min-width: ${size})` : `(max-width: ${size})`;
+        this.registerMediaQuery(id, query, handler);
+    }
+    /**
+     * Unregister a media query listener
+     */
+    unregisterMediaQuery(id) {
+        const listener = this.listeners.get(id);
+        if (listener && listener.matcher) {
+            listener.matcher.removeEventListener('change', () => { });
+        }
+        this.listeners.delete(id);
+    }
+    /**
+     * Check if a media query currently matches
+     */
+    isMatching(query) {
+        if (typeof window === 'undefined')
+            return false;
+        try {
+            return window.matchMedia(query).matches;
+        }
+        catch (error) {
+            console.warn(`Failed to check media query "${query}":`, error);
+            return false;
+        }
+    }
+    /**
+     * Check if a breakpoint is currently active
+     */
+    isBreakpointActive(breakpoint, type = 'min') {
+        const size = this.breakpoints[breakpoint];
+        if (!size)
+            return false;
+        const query = type === 'min' ? `(min-width: ${size})` : `(max-width: ${size})`;
+        return this.isMatching(query);
+    }
+    /**
+     * Get the current viewport width
+     */
+    getViewportWidth() {
+        if (typeof window === 'undefined')
+            return 0;
+        return window.innerWidth;
+    }
+    /**
+     * Get the current viewport height
+     */
+    getViewportHeight() {
+        if (typeof window === 'undefined')
+            return 0;
+        return window.innerHeight;
+    }
+    /**
+     * Check if viewport is mobile-sized (< 768px)
+     */
+    isMobile() {
+        return this.getViewportWidth() < 768;
+    }
+    /**
+     * Check if viewport is tablet-sized (768px - 1024px)
+     */
+    isTablet() {
+        const width = this.getViewportWidth();
+        return width >= 768 && width < 1024;
+    }
+    /**
+     * Check if viewport is desktop-sized (>= 1024px)
+     */
+    isDesktop() {
+        return this.getViewportWidth() >= 1024;
+    }
+    /**
+     * Check if prefers-reduced-motion is enabled
+     */
+    prefersReducedMotion() {
+        if (typeof window === 'undefined')
+            return false;
+        try {
+            return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    /**
+     * Check if dark mode is preferred
+     */
+    prefersDarkMode() {
+        if (typeof window === 'undefined')
+            return false;
+        try {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    /**
+     * Get the current device orientation
+     */
+    getOrientation() {
+        if (typeof window === 'undefined')
+            return 'portrait';
+        return window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+    }
+    /**
+     * Register a window resize listener
+     * @param id - Unique identifier
+     * @param handler - Callback with (width, height)
+     * @param debounceMs - Debounce delay in milliseconds
+     */
+    registerResizeListener(id, handler, debounceMs = 0) {
+        if (typeof window === 'undefined')
+            return;
+        let timeoutId = null;
+        const eventListener = () => {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+            if (debounceMs > 0) {
+                timeoutId = setTimeout(() => {
+                    handler(this.getViewportWidth(), this.getViewportHeight());
+                }, debounceMs);
+            }
+            else {
+                handler(this.getViewportWidth(), this.getViewportHeight());
+            }
         };
+        this.resizeListeners.set(id, { handler, eventListener });
+        window.addEventListener('resize', eventListener);
+        // Call handler with initial dimensions
+        handler(this.getViewportWidth(), this.getViewportHeight());
     }
     /**
-     * Initialize internal checked state from defaultChecked
+     * Unregister a resize listener
      */
-    componentWillLoad() {
-        this.internalChecked = this.defaultChecked;
+    unregisterResizeListener(id) {
+        if (typeof window === 'undefined')
+            return;
+        const entry = this.resizeListeners.get(id);
+        if (entry) {
+            window.removeEventListener('resize', entry.eventListener);
+            this.resizeListeners.delete(id);
+        }
     }
     /**
-     * Get current checked state (controlled vs uncontrolled)
+     * Clean up all listeners
      */
-    get isChecked() {
-        return this.checked !== undefined ? this.checked : this.internalChecked;
+    cleanup() {
+        this.listeners.forEach((listener) => {
+            if (listener.matcher) {
+                listener.matcher.removeEventListener('change', () => { });
+            }
+        });
+        this.listeners.clear();
+        if (typeof window !== 'undefined') {
+            this.resizeListeners.forEach((entry) => {
+                window.removeEventListener('resize', entry.eventListener);
+            });
+        }
+        this.resizeListeners.clear();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
     }
     /**
-     * Handle keyboard events (Space and Enter keys)
+     * Update breakpoint configuration
      */
-    handleKeyDown(event) {
-        if (this.disabled) {
+    setBreakpoints(breakpoints) {
+        this.breakpoints = Object.assign(Object.assign({}, DEFAULT_BREAKPOINTS), breakpoints);
+    }
+}
+// Singleton instance
+let mediaQueryServiceInstance = null;
+/**
+ * Get the singleton MediaQueryService instance
+ */
+function getMediaQueryService(breakpoints) {
+    if (!mediaQueryServiceInstance) {
+        mediaQueryServiceInstance = new MediaQueryService(breakpoints);
+    }
+    return mediaQueryServiceInstance;
+}
+/**
+ * Create a new isolated MediaQueryService instance
+ */
+function createMediaQueryService(breakpoints) {
+    return new MediaQueryService(breakpoints || DEFAULT_BREAKPOINTS);
+}
+
+/**
+ * Common Utilities
+ * Shared utility functions used across the component library
+ */
+/* eslint-disable no-undef, @typescript-eslint/no-explicit-any */
+let idCounter = 0;
+/**
+ * Generate a unique ID with optional prefix
+ * @param prefix - Optional prefix for the ID (default: 'id')
+ */
+function generateUniqueId(prefix = 'id') {
+    return `${prefix}-${++idCounter}-${Math.random().toString(36).substr(2, 9)}`;
+}
+/**
+ * Reset ID counter (useful for testing)
+ */
+function resetIdCounter() {
+    idCounter = 0;
+}
+/**
+ * Debounce a function
+ * @param fn - Function to debounce
+ * @param delay - Delay in milliseconds
+ */
+function debounce(fn, delay) {
+    let timeoutId = null;
+    return (...args) => {
+        if (timeoutId)
+            clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => fn(...args), delay);
+    };
+}
+/**
+ * Throttle a function
+ * @param fn - Function to throttle
+ * @param delay - Delay in milliseconds
+ */
+function throttle(fn, delay) {
+    let lastCall = 0;
+    let timeoutId = null;
+    return (...args) => {
+        const now = Date.now();
+        if (now - lastCall >= delay) {
+            lastCall = now;
+            fn(...args);
+        }
+        else {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                lastCall = Date.now();
+                fn(...args);
+            }, delay - (now - lastCall));
+        }
+    };
+}
+/**
+ * Add a class to an element
+ * @param element - The element
+ * @param className - Class name to add
+ */
+function addClass(element, className) {
+    element.classList.add(className);
+}
+/**
+ * Remove a class from an element
+ * @param element - The element
+ * @param className - Class name to remove
+ */
+function removeClass(element, className) {
+    element.classList.remove(className);
+}
+/**
+ * Toggle a class on an element
+ * @param element - The element
+ * @param className - Class name to toggle
+ * @param force - Optional force add/remove
+ */
+function toggleClass(element, className, force) {
+    element.classList.toggle(className, force);
+}
+/**
+ * Check if element has a class
+ * @param element - The element
+ * @param className - Class name to check
+ */
+function hasClass(element, className) {
+    return element.classList.contains(className);
+}
+/**
+ * Get all data attributes from an element as an object
+ */
+function getDataAttributes(element) {
+    const data = {};
+    Array.from(element.attributes).forEach((attr) => {
+        if (attr.name.startsWith('data-')) {
+            const key = attr.name.slice(5); // Remove 'data-' prefix
+            data[key] = attr.value;
+        }
+    });
+    return data;
+}
+/**
+ * Set a data attribute on an element
+ * @param element - The element
+ * @param key - Data attribute name (without 'data-' prefix)
+ * @param value - The value to set
+ */
+function setDataAttribute(element, key, value) {
+    if (value === null) {
+        element.removeAttribute(`data-${key}`);
+    }
+    else {
+        element.setAttribute(`data-${key}`, value);
+    }
+}
+/**
+ * Get the value of a data attribute
+ * @param element - The element
+ * @param key - Data attribute name (without 'data-' prefix)
+ */
+function getDataAttribute(element, key) {
+    return element.getAttribute(`data-${key}`) || undefined;
+}
+/**
+ * Dispatch a custom event from an element
+ * @param element - The element to dispatch from
+ * @param eventName - Name of the custom event
+ * @param detail - Optional detail object to include in the event
+ */
+function dispatchCustomEvent(element, eventName, detail) {
+    const event = new CustomEvent(eventName, {
+        detail,
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+    });
+    element.dispatchEvent(event);
+}
+/**
+ * Listen for a custom event
+ * @param element - The element to listen on
+ * @param eventName - Name of the custom event
+ * @param handler - Callback function
+ * @returns Cleanup function to remove listener
+ */
+function onCustomEvent(element, eventName, handler) {
+    const listener = (event) => {
+        handler(event.detail);
+    };
+    element.addEventListener(eventName, listener);
+    return () => {
+        element.removeEventListener(eventName, listener);
+    };
+}
+/**
+ * Get the offset position of an element relative to the viewport
+ */
+function getElementOffset(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
+    };
+}
+/**
+ * Check if an element is in the viewport
+ */
+function isElementInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0;
+}
+/**
+ * Scroll element into view
+ * @param element - The element to scroll into view
+ * @param options - Scroll behavior options
+ */
+function scrollIntoView(element, options = {}) {
+    element.scrollIntoView(Object.assign({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }, options));
+}
+/**
+ * Get computed style value
+ */
+function getComputedValue(element, property) {
+    return window.getComputedStyle(element).getPropertyValue(property);
+}
+/**
+ * Wait for a specific time
+ * @param ms - Time in milliseconds
+ */
+function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+/**
+ * Wait for an element to appear in the DOM
+ * @param selector - CSS selector to wait for
+ * @param timeout - Timeout in milliseconds (default: 5000)
+ */
+function waitForElement(selector, timeout = 5000) {
+    return new Promise((resolve, reject) => {
+        const element = document.querySelector(selector);
+        if (element) {
+            resolve(element);
             return;
         }
-        // Toggle on Space or Enter
-        if (event.key === ' ' || event.key === 'Enter') {
-            event.preventDefault(); // Prevent page scroll on Space
-            this.toggle();
-        }
-    }
-    render() {
-        const isChecked = this.isChecked;
-        const dataState = isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: '3046a6647d7cfd10bf9789aa9cf3b7a88b9a3a10', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: 'cd8423b9f7295e5e3ef9d7e64ead3fe6502386a2', 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: '618ab67d5fab80323f64ec0b1b342561be2585b0', class: "thumb", part: "thumb" })), this.name && (h("input", { key: 'd51e9108038b8796175082231ca3ce7e61106f31', 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", {
-        "checked": [4],
-        "defaultChecked": [4, "default-checked"],
-        "disabled": [4],
-        "required": [4],
-        "name": [1],
-        "value": [1],
-        "ariaLabel": [1, "aria-label"],
-        "internalChecked": [32]
-    }, [[0, "keydown", "handleKeyDown"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
+        const observer = new MutationObserver(() => {
+            const el = document.querySelector(selector);
+            if (el) {
+                observer.disconnect();
+                resolve(el);
+            }
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+        setTimeout(() => {
+            observer.disconnect();
+            reject(new Error(`Element "${selector}" not found within ${timeout}ms`));
+        }, timeout);
+    });
+}
+/**
+ * Clone an object deeply
+ */
+function deepClone(obj) {
+    if (obj === null || typeof obj !== 'object')
+        return obj;
+    if (obj instanceof Date)
+        return new Date(obj.getTime());
+    if (obj instanceof Array)
+        return obj.map((item) => deepClone(item));
+    if (obj instanceof Object) {
+        const cloned = {};
+        Object.keys(obj).forEach((key) => {
+            cloned[key] = deepClone(obj[key]);
+        });
+        return cloned;
+    }
+    return obj;
+}
+/**
+ * Merge objects
+ */
+function mergeObjects(target, ...sources) {
+    return sources.reduce((result, source) => (Object.assign(Object.assign({}, result), source)), target);
+}
+/**
+ * Get the prefixed CSS property name (for vendor prefixes)
+ */
+function getPrefixedProperty(property) {
+    const element = document.createElement('div');
+    const style = element.style;
+    if (property in style)
+        return property;
+    if (`webkit${property[0].toUpperCase()}${property.slice(1)}` in style)
+        return `webkit${property[0].toUpperCase()}${property.slice(1)}`;
+    if (`moz${property[0].toUpperCase()}${property.slice(1)}` in style)
+        return `moz${property[0].toUpperCase()}${property.slice(1)}`;
+    if (`ms${property[0].toUpperCase()}${property.slice(1)}` in style)
+        return `ms${property[0].toUpperCase()}${property.slice(1)}`;
+    return property;
+}
+/**
+ * Check if browser supports a CSS feature
+ */
+function supportsCSSFeature(property, value) {
+    const element = document.createElement('div');
+    element.style.setProperty(property, value);
+    return element.style.getPropertyValue(property) !== '';
+}
+/**
+ * Request animation frame with promise
+ */
+function requestAnimationFramePromise() {
+    return new Promise((resolve) => requestAnimationFrame(resolve));
+}
+/**
+ * Convert camelCase to kebab-case
+ */
+function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+/**
+ * Convert kebab-case to camelCase
+ */
+function kebabToCamel(str) {
+    return str.replace(/-./g, (x) => x[1].toUpperCase());
+}
+
+/**
+ * Accessibility Utilities
+ * Provides helpers for ARIA attributes, keyboard navigation, and accessibility features
+ */
+/**
+ * Generate a unique ID for ARIA relationships
+ * @param prefix - Optional prefix for the ID
+ * @param suffix - Optional suffix for the ID
+ */
+function generateAriaId(prefix = 'aria', suffix) {
+    const timestamp = Date.now().toString(36);
+    const random = Math.random().toString(36).substr(2, 9);
+    const finalSuffix = suffix ? `-${suffix}` : '';
+    return `${prefix}-${timestamp}-${random}${finalSuffix}`;
+}
+/**
+ * Set ARIA attributes on an element
+ * @param element - The element to set attributes on
+ * @param attributes - Object with attribute names and values
+ */
+function setAriaAttributes(element, attributes) {
+    Object.entries(attributes).forEach(([key, value]) => {
+        if (value === null || value === false) {
+            element.removeAttribute(`aria-${key}`);
+        }
+        else if (value === true) {
+            element.setAttribute(`aria-${key}`, 'true');
+        }
+        else {
+            element.setAttribute(`aria-${key}`, String(value));
+        }
+    });
+}
+/**
+ * Add accessible label to an element
+ * @param element - The element to label
+ * @param label - The label text or element ID
+ * @param useAriaLabel - If true, uses aria-label; if false, uses aria-labelledby
+ */
+function addAriaLabel(element, label, useAriaLabel = true) {
+    if (useAriaLabel) {
+        element.setAttribute('aria-label', label);
+    }
+    else {
+        element.setAttribute('aria-labelledby', label);
+    }
+}
+/**
+ * Add accessible description to an element
+ * @param element - The element to describe
+ * @param description - The description text or element ID
+ * @param useAriaDescription - If true, uses aria-description; if false, uses aria-describedby
+ */
+function addAriaDescription(element, description, useAriaDescription = false) {
+    if (useAriaDescription) {
+        element.setAttribute('aria-description', description);
+    }
+    else {
+        element.setAttribute('aria-describedby', description);
+    }
+}
+/**
+ * Set ARIA live region announcement
+ * @param element - The element to make a live region
+ * @param message - The message to announce
+ * @param politeness - 'polite' (default), 'assertive', or 'off'
+ * @param atomic - Whether to announce the entire region
+ */
+function announceAriaLive(element, message, politeness = 'polite', atomic = false) {
+    element.setAttribute('aria-live', politeness);
+    if (atomic) {
+        element.setAttribute('aria-atomic', 'true');
+    }
+    element.textContent = message;
+}
+/**
+ * Mark an element as disabled with ARIA attributes
+ * @param element - The element to mark as disabled
+ * @param disabled - Whether the element is disabled
+ */
+function setAriaDisabled(element, disabled) {
+    if (disabled) {
+        element.setAttribute('aria-disabled', 'true');
+        element.style.pointerEvents = 'none';
+        element.style.opacity = '0.5';
+    }
+    else {
+        element.removeAttribute('aria-disabled');
+        element.style.pointerEvents = '';
+        element.style.opacity = '';
+    }
+}
+/**
+ * Mark an element as expanded/collapsed (for collapsible sections)
+ * @param element - The element to mark
+ * @param expanded - Whether the element is expanded
+ * @param targetId - ID of the element being controlled (optional)
+ */
+function setAriaExpanded(element, expanded, targetId) {
+    element.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+    if (targetId) {
+        element.setAttribute('aria-controls', targetId);
+    }
+}
+/**
+ * Mark an element as selected
+ * @param element - The element to mark
+ * @param selected - Whether the element is selected
+ */
+function setAriaSelected(element, selected) {
+    element.setAttribute('aria-selected', selected ? 'true' : 'false');
+}
+/**
+ * Mark an element as checked (for checkboxes and radio buttons)
+ * @param element - The element to mark
+ * @param checked - The checked state ('true', 'false', or 'mixed')
+ */
+function setAriaChecked(element, checked) {
+    element.setAttribute('aria-checked', checked);
+}
+/**
+ * Set the current value of an element (for sliders, spinbuttons, etc.)
+ * @param element - The element
+ * @param current - Current value
+ * @param min - Minimum value
+ * @param max - Maximum value
+ * @param text - Optional text description of the value
+ */
+function setAriaValueNow(element, current, min, max, text) {
+    element.setAttribute('aria-valuenow', String(current));
+    if (min !== undefined)
+        element.setAttribute('aria-valuemin', String(min));
+    if (max !== undefined)
+        element.setAttribute('aria-valuemax', String(max));
+    if (text !== undefined)
+        element.setAttribute('aria-valuetext', text);
+}
+/**
+ * Mark an element as having a popup (for menus, popovers, etc.)
+ * @param element - The element with the popup trigger
+ * @param type - Type of popup: 'menu', 'listbox', 'tree', 'grid', 'dialog'
+ * @param popupId - ID of the popup element
+ */
+function setAriaPopup(element, type = 'menu', popupId) {
+    element.setAttribute('aria-haspopup', type);
+    if (popupId) {
+        element.setAttribute('aria-owns', popupId);
+    }
+}
+/**
+ * Set role for an element
+ * @param element - The element
+ * @param role - The role (button, menu, menuitem, etc.)
+ */
+function setRole(element, role) {
+    element.setAttribute('role', role);
+}
+/**
+ * Get the accessible name of an element
+ * Follows ARIA naming convention: aria-labelledby > aria-label > title > textContent
+ */
+function getAccessibleName(element) {
+    // Check aria-labelledby
+    const labelledby = element.getAttribute('aria-labelledby');
+    if (labelledby) {
+        const labelElement = document.getElementById(labelledby);
+        if (labelElement)
+            return labelElement.textContent || '';
+    }
+    // Check aria-label
+    const ariaLabel = element.getAttribute('aria-label');
+    if (ariaLabel)
+        return ariaLabel;
+    // Check title
+    const title = element.getAttribute('title');
+    if (title)
+        return title;
+    // Fall back to textContent
+    return element.textContent || '';
+}
+/**
+ * Create a skip link for keyboard navigation
+ * @param text - Link text
+ * @param targetId - ID of element to skip to
+ */
+function createSkipLink(text, targetId) {
+    const link = document.createElement('a');
+    link.href = `#${targetId}`;
+    link.textContent = text;
+    link.className = 'sr-only'; // Visually hidden but accessible to screen readers
+    link.style.position = 'absolute';
+    link.style.top = '-9999px';
+    link.style.left = '-9999px';
+    // Show on focus
+    link.addEventListener('focus', () => {
+        link.style.top = '0';
+        link.style.left = '0';
+    });
+    // Hide on blur
+    link.addEventListener('blur', () => {
+        link.style.top = '-9999px';
+        link.style.left = '-9999px';
+    });
+    return link;
+}
+/**
+ * Check if element should be hidden from screen readers
+ */
+function isAriaHidden(element) {
+    return element.getAttribute('aria-hidden') === 'true';
+}
+/**
+ * Hide element from screen readers but keep visually visible
+ */
+function setAriaHidden(element, hidden) {
+    if (hidden) {
+        element.setAttribute('aria-hidden', 'true');
+    }
+    else {
+        element.removeAttribute('aria-hidden');
+    }
+}
+/**
+ * Announce a message to screen readers immediately (without ARIA live regions)
+ * @param message - The message to announce
+ * @param politeness - 'polite' (default) or 'assertive'
+ */
+function announceToScreenReader(message, politeness = 'polite') {
+    if (typeof document === 'undefined')
         return;
+    const announcement = document.createElement('div');
+    announcement.setAttribute('aria-live', politeness);
+    announcement.setAttribute('aria-atomic', 'true');
+    announcement.className = 'sr-only';
+    announcement.style.position = 'absolute';
+    announcement.style.left = '-9999px';
+    announcement.style.top = '-9999px';
+    announcement.textContent = message;
+    document.body.appendChild(announcement);
+    // Remove after announcement is made
+    setTimeout(() => {
+        announcement.remove();
+    }, 1000);
+}
+/**
+ * Set proper heading hierarchy
+ * @param element - The heading element
+ * @param level - Heading level (1-6)
+ */
+function setHeadingLevel(element, level) {
+    const tag = `h${level}`;
+    if (element.tagName.toLowerCase() !== tag) {
+        // If element is not correct tag, set role as fallback
+        element.setAttribute('role', tag);
     }
-    const components = ["seki-switch"];
-    components.forEach(tagName => { switch (tagName) {
-        case "seki-switch":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SekiSwitch);
-            }
-            break;
-    } });
 }
-defineCustomElement();
+/**
+ * Enable keyboard navigation for a custom component
+ * @param element - The element that should handle keyboard
+ * @param keys - Map of key to handler function
+ */
+function enableKeyboardNavigation(element, keys) {
+    const handleKeyDown = (event) => {
+        const handler = keys[event.key.toLowerCase()];
+        if (handler) {
+            event.preventDefault();
+            handler(event);
+        }
+    };
+    element.addEventListener('keydown', handleKeyDown);
+    // Return cleanup function
+    return () => {
+        element.removeEventListener('keydown', handleKeyDown);
+    };
+}
+/**
+ * Check if element has accessible focus styling
+ */
+function hasAccessibleFocus(element) {
+    const styles = window.getComputedStyle(element);
+    return !!(styles.outline || styles.boxShadow || styles.border);
+}
+/**
+ * Ensure focus visible styling (for focus-visible pseudo-class)
+ */
+function ensureFocusVisible(element) {
+    if (!hasAccessibleFocus(element)) {
+        element.style.outline = '2px solid #4A90E2';
+        element.style.outlineOffset = '2px';
+    }
+}
+
+/**
+ * SekiUI Type Definitions
+ * Central export point for all type definitions across components and services
+ */
+// ============================================================================
+// NOTE: Types from ./components/sidebar/types and ./utils/select/types
+// are already re-exported at the top of this file via the main index.ts
+// ============================================================================
+// ============================================================================
+// TYPE GUARDS AND UTILITY TYPES
+// ============================================================================
+/**
+ * Type guard to check if a value is a valid sidebar variant
+ */
+function isSidebarVariant(value) {
+    return ['sidebar', 'floating', 'inset'].includes(value);
+}
+/**
+ * Type guard to check if a value is a valid collapse mode
+ */
+function isCollapseMode(value) {
+    return ['offcanvas', 'icon', 'none'].includes(value);
+}
+/**
+ * Type guard to check if a value is a valid button size
+ */
+function isButtonSize(value) {
+    return ['sm', 'md', 'lg', 'icon-sm', 'icon', 'icon-lg'].includes(value);
+}
+/**
+ * Type guard to check if a value is a valid button variant
+ */
+function isButtonVariant(value) {
+    return ['primary', 'secondary', 'outline', 'ghost', 'destructive', 'link'].includes(value);
+}
+/**
+ * Type guard to check if a value is a valid tooltip side
+ */
+function isTooltipSide(value) {
+    return ['top', 'right', 'bottom', 'left'].includes(value);
+}
 
-export { SekiSwitch, defineCustomElement as d };
+export { DEFAULT_BREAKPOINTS, FocusService, MediaQueryService, addAriaDescription, addAriaLabel, addClass, announceAriaLive, announceToScreenReader, camelToKebab, createFocusService, createMediaQueryService, createSkipLink, debounce, deepClone, dispatchCustomEvent, enableKeyboardNavigation, ensureFocusVisible, generateAriaId, generateUniqueId, getAccessibleName, getComputedValue, getDataAttribute, getDataAttributes, getElementOffset, getFocusService, getMediaQueryService, getPrefixedProperty, hasAccessibleFocus, hasClass, isAriaHidden, isButtonSize, isButtonVariant, isCollapseMode, isElementInViewport, isSidebarVariant, isTooltipSide, kebabToCamel, mergeObjects, onCustomEvent, removeClass, requestAnimationFramePromise, resetIdCounter, scrollIntoView, setAriaAttributes, setAriaChecked, setAriaDisabled, setAriaExpanded, setAriaHidden, setAriaPopup, setAriaSelected, setAriaValueNow, setDataAttribute, setHeadingLevel, setRole, supportsCSSFeature, throttle, toggleClass, wait, waitForElement };