@sekiui/elements 0.0.56 → 0.0.57

package/dist/collection/components/sidebar/types.js

@@ -0,0 +1,18 @@
+/**
+ * Sidebar Component Type Definitions
+ * @module sidebar/types
+ *
+ * Complete TypeScript interfaces and types for the sidebar component system.
+ * These types are used throughout the component implementation, tests, and exported
+ * to the npm package for consumer IDE autocomplete support.
+ */
+/**
+ * Default sidebar state values
+ */
+export const DEFAULT_SIDEBAR_STATE = {
+    isOpen: true,
+    collapseMode: 'offcanvas',
+    variant: 'sidebar',
+    isMobile: typeof window !== 'undefined' ? window.innerWidth < 768 : false,
+    persistenceKey: 'seki-sidebar-state',
+};

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

@@ -15,7 +15,7 @@ export class SekiSkeleton {
         }
     }
     render() {
-        return (h("div", { key: 'ccee706a38b0783b89dbdda8f1844caef95ea62b', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
+        return (h("div", { key: '4f60930ca73fef0cf4b2c940cbb108e05380caeb', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
     }
     static get is() { return "seki-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -1 +1,8 @@
 export { SekiSwitch } from './components/switch/seki-switch';
+// Services
+export * from './services';
+// Utilities
+export * from './utils/common';
+export * from './utils/a11y';
+// Types
+export * from './types';

package/dist/collection/services/focus.js

@@ -0,0 +1,192 @@
+/**
+ * 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
+ */
+export 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);
+            }
+            else {
+                // Tab - move forwards
+                const nextIndex = currentFocusIndex + 1;
+                const targetElement = nextIndex < focusableElements.length ? focusableElements[nextIndex] : focusableElements[0];
+                event.preventDefault();
+                this.setFocus(targetElement);
+            }
+        };
+        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
+ */
+export function getFocusService() {
+    if (!focusServiceInstance) {
+        focusServiceInstance = new FocusService();
+    }
+    return focusServiceInstance;
+}
+/**
+ * Create a new isolated FocusService instance
+ */
+export function createFocusService() {
+    return new FocusService();
+}

package/dist/collection/services/index.js

@@ -0,0 +1,7 @@
+/**
+ * Services Index
+ * Central export point for all application services
+ */
+export * from './keyboard';
+export * from './focus';
+export * from './media-query';

package/dist/collection/services/keyboard.js

@@ -0,0 +1,136 @@
+/**
+ * Keyboard Service
+ * Provides normalized keyboard event handling and shortcut management
+ * Handles cross-platform shortcuts (Ctrl/Cmd combinations)
+ */
+/**
+ * KeyboardService - Centralized keyboard event management
+ * Provides:
+ * - Normalized keyboard shortcuts (handles Ctrl vs Cmd on Mac)
+ * - Cross-platform shortcut registration
+ * - Event cleanup and teardown
+ */
+export class KeyboardService {
+    constructor() {
+        this.shortcuts = new Map();
+        this.listeners = new Map();
+    }
+    /**
+     * Register a keyboard shortcut
+     * @param id - Unique identifier for this shortcut
+     * @param options - Shortcut configuration
+     */
+    registerShortcut(id, options) {
+        if (typeof window === 'undefined')
+            return;
+        const { key, ctrl = false, shift = false, alt = false, meta = false, handler, preventDefault = true } = options;
+        const handleKeyDown = (event) => {
+            const keyboardEvent = event;
+            const keyMatches = keyboardEvent.key.toLowerCase() === key.toLowerCase();
+            const ctrlMatches = ctrl ? keyboardEvent.ctrlKey : true;
+            const shiftMatches = shift ? keyboardEvent.shiftKey : !keyboardEvent.shiftKey;
+            const altMatches = alt ? keyboardEvent.altKey : !keyboardEvent.altKey;
+            // metaKey matches both metaKey (Mac Cmd) and ctrlKey (Windows/Linux) for cross-platform support
+            const metaMatches = meta ? keyboardEvent.metaKey || keyboardEvent.ctrlKey : !keyboardEvent.metaKey && !keyboardEvent.ctrlKey;
+            if (keyMatches && ctrlMatches && shiftMatches && altMatches && metaMatches) {
+                if (preventDefault) {
+                    keyboardEvent.preventDefault();
+                }
+                handler(keyboardEvent);
+            }
+        };
+        this.shortcuts.set(id, {
+            key,
+            ctrlKey: ctrl,
+            shiftKey: shift,
+            altKey: alt,
+            metaKey: meta,
+            handler: handleKeyDown,
+        });
+        this.listeners.set(id, handleKeyDown);
+        window.addEventListener('keydown', handleKeyDown);
+    }
+    /**
+     * Register a shortcut that works with Ctrl on Windows/Linux and Cmd on Mac
+     * @param id - Unique identifier for this shortcut
+     * @param key - The key to listen for
+     * @param handler - Callback when shortcut is triggered
+     * @param preventDefault - Whether to prevent default browser behavior
+     */
+    registerCtrlOrCmdShortcut(id, key, handler, preventDefault = true) {
+        if (typeof window === 'undefined')
+            return;
+        const handleKeyDown = (event) => {
+            const keyboardEvent = event;
+            const keyMatches = keyboardEvent.key.toLowerCase() === key.toLowerCase();
+            const modifierMatches = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
+            if (keyMatches && modifierMatches && !keyboardEvent.shiftKey && !keyboardEvent.altKey) {
+                if (preventDefault) {
+                    keyboardEvent.preventDefault();
+                }
+                handler(keyboardEvent);
+            }
+        };
+        this.listeners.set(id, handleKeyDown);
+        window.addEventListener('keydown', handleKeyDown);
+    }
+    /**
+     * Unregister a keyboard shortcut
+     * @param id - The identifier of the shortcut to remove
+     */
+    unregisterShortcut(id) {
+        if (typeof window === 'undefined')
+            return;
+        const listener = this.listeners.get(id);
+        if (listener) {
+            window.removeEventListener('keydown', listener);
+            this.listeners.delete(id);
+        }
+        this.shortcuts.delete(id);
+    }
+    /**
+     * Unregister all shortcuts and clean up
+     */
+    cleanup() {
+        if (typeof window === 'undefined')
+            return;
+        this.listeners.forEach((listener) => {
+            window.removeEventListener('keydown', listener);
+        });
+        this.listeners.clear();
+        this.shortcuts.clear();
+    }
+    /**
+     * Check if a keyboard event matches a specific key combination
+     * @param event - The keyboard event to check
+     * @param key - The key to match
+     * @param ctrl - Whether Ctrl/Cmd should be pressed
+     * @param shift - Whether Shift should be pressed
+     * @param alt - Whether Alt should be pressed
+     */
+    matchesShortcut(event, key, ctrl = false, shift = false, alt = false) {
+        const keyMatches = event.key.toLowerCase() === key.toLowerCase();
+        const ctrlMatches = ctrl ? event.ctrlKey || event.metaKey : !event.ctrlKey && !event.metaKey;
+        const shiftMatches = shift ? event.shiftKey : !event.shiftKey;
+        const altMatches = alt ? event.altKey : !event.altKey;
+        return keyMatches && ctrlMatches && shiftMatches && altMatches;
+    }
+}
+// Singleton instance
+let keyboardServiceInstance = null;
+/**
+ * Get the singleton KeyboardService instance
+ */
+export function getKeyboardService() {
+    if (!keyboardServiceInstance) {
+        keyboardServiceInstance = new KeyboardService();
+    }
+    return keyboardServiceInstance;
+}
+/**
+ * Create a new isolated KeyboardService instance
+ * Useful for testing or when you need independent event handling
+ */
+export function createKeyboardService() {
+    return new KeyboardService();
+}

package/dist/collection/services/media-query.js

@@ -0,0 +1,254 @@
+/**
+ * Media Query Service
+ * Provides utilities for responsive design and media query management
+ */
+/**
+ * Default breakpoints (Tailwind-inspired)
+ */
+export 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
+ */
+export 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());
+    }
+    /**
+     * Unregister a resize listener
+     */
+    unregisterResizeListener(id) {
+        if (typeof window === 'undefined')
+            return;
+        const entry = this.resizeListeners.get(id);
+        if (entry) {
+            window.removeEventListener('resize', entry.eventListener);
+            this.resizeListeners.delete(id);
+        }
+    }
+    /**
+     * Clean up all listeners
+     */
+    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;
+        }
+    }
+    /**
+     * Update breakpoint configuration
+     */
+    setBreakpoints(breakpoints) {
+        this.breakpoints = Object.assign(Object.assign({}, DEFAULT_BREAKPOINTS), breakpoints);
+    }
+}
+// Singleton instance
+let mediaQueryServiceInstance = null;
+/**
+ * Get the singleton MediaQueryService instance
+ */
+export function getMediaQueryService(breakpoints) {
+    if (!mediaQueryServiceInstance) {
+        mediaQueryServiceInstance = new MediaQueryService(breakpoints);
+    }
+    return mediaQueryServiceInstance;
+}
+/**
+ * Create a new isolated MediaQueryService instance
+ */
+export function createMediaQueryService(breakpoints) {
+    return new MediaQueryService(breakpoints || DEFAULT_BREAKPOINTS);
+}

package/dist/collection/types.js

@@ -0,0 +1,41 @@
+/**
+ * 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
+ */
+export function isSidebarVariant(value) {
+    return ['sidebar', 'floating', 'inset'].includes(value);
+}
+/**
+ * Type guard to check if a value is a valid collapse mode
+ */
+export function isCollapseMode(value) {
+    return ['offcanvas', 'icon', 'none'].includes(value);
+}
+/**
+ * Type guard to check if a value is a valid button size
+ */
+export 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
+ */
+export function isButtonVariant(value) {
+    return ['primary', 'secondary', 'outline', 'ghost', 'destructive', 'link'].includes(value);
+}
+/**
+ * Type guard to check if a value is a valid tooltip side
+ */
+export function isTooltipSide(value) {
+    return ['top', 'right', 'bottom', 'left'].includes(value);
+}