@sekiui/elements 0.0.57 → 0.0.60

package/dist/types/services/media-query.d.ts

@@ -46,7 +46,7 @@ export declare class MediaQueryService {
      * @param type - Type of match: 'min' (mobile-first) or 'max' (desktop-first)
      * @param handler - Callback when breakpoint matches
      */
-    registerBreakpoint(id: string, breakpoint: keyof BreakpointConfig, type: ("min" | "max") | undefined, handler: (match: boolean) => void): void;
+    registerBreakpoint(id: string, breakpoint: keyof BreakpointConfig, type: "min" | "max" | undefined, handler: (match: boolean) => void): void;
     /**
      * Unregister a media query listener
      */

package/dist/types/stencil-public-runtime.d.ts

@@ -1,5 +1,6 @@
 type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
-type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type MixinInstance<F> = F extends (base: MixedInCtor) => MixedInCtor<infer I> ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
@@ -364,18 +365,27 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
-export type MixinFactory = <TBase extends new (...args: any[]) => any>(base: TBase) => abstract new (...args: ConstructorParameters<TBase>) => any;
+/**
+ * @deprecated - Use `MixedInCtor` instead:
+ * ```ts
+ * import { MixedInCtor } from '@stencil/core';
+ *
+ * const AFactoryFn = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * ```
+ */
+export type MixinFactory = (base: MixedInCtor) => MixedInCtor;
+export type MixedInCtor<T = {}> = new (...args: any[]) => T;
 /**
  * Compose multiple mixin classes into a single constructor.
  * The resulting class has the combined instance types of all mixed-in classes.
  *
  * Example:
- * ```
- * import { Mixin, MixinFactory } from '@stencil/core';
+ * ```ts
+ * import { Mixin, MixedInCtor } from '@stencil/core';
  *
- * const AWrap: MixinFactory = (Base) => {class A extends Base { propA = A }; return A;}
- * const BWrap: MixinFactory = (Base) => {class B extends Base { propB = B }; return B;}
- * const CWrap: MixinFactory = (Base) => {class C extends Base { propC = C }; return C;}
+ * const AWrap = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * const BWrap = <B extends MixedInCtor>(Base: B) => {class B extends Base { propB = B }; return B;}
+ * const CWrap = <B extends MixedInCtor>(Base: B) => {class C extends Base { propC = C }; return C;}
  *
  * class X extends Mixin(AWrap, BWrap, CWrap) {
  *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
@@ -383,9 +393,9 @@ export type MixinFactory = <TBase extends new (...args: any[]) => any>(base: TBa
  * ```
  *
  * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
- * @returns a class that that is composed from extending each of the provided classes in the order they were provided.
+ * @returns a class that is composed from extending each of the provided classes in the order they were provided.
  */
-export declare function Mixin<TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<InstanceType<ReturnType<TMixins[number]>>>;
+export declare function Mixin<const TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<MixinInstance<TMixins[number]>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sekiui/elements",
-  "version": "0.0.57",
+  "version": "0.0.60",
   "description": "Modern, accessible Web Components with shadcn/ui-inspired design",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -47,6 +47,7 @@
     "@typescript-eslint/eslint-plugin": "^8.46.0",
     "@typescript-eslint/parser": "^8.46.0",
     "axe-core": "^4.10.3",
+    "babel-plugin-istanbul": "^7.0.1",
     "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-storybook": "9.1.10",
@@ -54,10 +55,16 @@
     "jest-cli": "^29.7.0",
     "lit": "^3.3.1",
     "prettier": "^3.6.2",
-    "puppeteer": "^20.9.0",
-    "storybook": "^9.1.10"
+    "puppeteer": "^24.29.0",
+    "storybook": "^9.1.10",
+    "test-exclude": "^7.0.1"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.4"
+  },
+  "overrides": {
+    "glob": ">=10.0.0",
+    "inflight": "npm:lru-cache@^10.0.0",
+    "test-exclude": "^7.0.1"
   }
 }

package/dist/cdn/p-BJCq8m2o.js

@@ -1,138 +0,0 @@
-/**
- * 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
- */
-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
- */
-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
- */
-function createKeyboardService() {
-    return new KeyboardService();
-}
-
-export { KeyboardService as K, createKeyboardService as c, getKeyboardService as g };

package/dist/cjs/keyboard-Cjl5HYES.js

@@ -1,142 +0,0 @@
-'use strict';
-
-/**
- * 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
- */
-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
- */
-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
- */
-function createKeyboardService() {
-    return new KeyboardService();
-}
-
-exports.KeyboardService = KeyboardService;
-exports.createKeyboardService = createKeyboardService;
-exports.getKeyboardService = getKeyboardService;

package/dist/collection/components/sidebar/seki-sidebar-menu-item.css

@@ -1,196 +0,0 @@
-/**
- * SekiSidebarMenuItem CSS
- * Styling for individual menu items in the sidebar
- */
-
-:host {
-  display: block;
-  width: 100%;
-}
-
-.item-wrapper {
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-.item-content {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--sidebar-gap, 0.5rem);
-  width: 100%;
-  padding: var(--sidebar-item-padding, 0.5rem 0.75rem);
-  text-decoration: none;
-  color: var(--sidebar-item-foreground, var(--seki-color-text));
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sidebar-radius-sm, 0.25rem);
-  cursor: pointer;
-  transition: width 200ms ease-linear, height 200ms ease-linear, padding 200ms ease-linear;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  /* Use built-in typography */
-  font-size: var(--seki-font-size-sm);
-  font-weight: var(--seki-font-weight-medium);
-  font-family: var(--seki-font-sans);
-  line-height: 1.25rem;
-}
-
-:host([data-theme="dark"]) .item-content {
-  color: var(--sidebar-item-foreground-dark, #f1f5f9);
-}
-
-.item-content:hover:not([aria-disabled="true"]) {
-  background-color: var(--sidebar-item-hover-bg, #f3f4f6);
-  color: var(--sidebar-item-hover-foreground, #111827);
-}
-
-:host([data-theme="dark"]) .item-content:hover:not([aria-disabled="true"]) {
-  background-color: var(--sidebar-item-hover-bg-dark, #27272a);
-  color: var(--sidebar-item-hover-foreground-dark, #fafafa);
-}
-
-.item-content:focus-visible {
-  outline: 2px solid var(--sidebar-primary, #3b82f6);
-  outline-offset: -2px;
-}
-
-:host([data-active="true"]) .item-content {
-  background-color: var(--sidebar-item-active-bg, #e0e7ff);
-  color: var(--sidebar-item-active-foreground, #1e40af);
-  font-weight: 600;
-}
-
-:host([data-theme="dark"][data-active="true"]) .item-content {
-  background-color: var(--sidebar-item-active-bg-dark, #312e81);
-  color: var(--sidebar-item-active-foreground-dark, #c7d2fe);
-}
-
-:host([data-disabled="true"]) .item-content {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.item-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  font-size: 1rem;
-  color: inherit;
-}
-
-.item-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.item-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.125rem 0.375rem;
-  border-radius: var(--sidebar-radius-sm, 0.25rem);
-  flex-shrink: 0;
-  margin-left: auto;
-  /* Use built-in typography */
-  font-size: var(--seki-font-size-xs);
-  font-weight: var(--seki-font-weight-semibold);
-  font-family: var(--seki-font-sans);
-}
-
-.badge-default {
-  background-color: var(--sidebar-badge-bg, #dbeafe);
-  color: var(--sidebar-badge-foreground, #1e40af);
-}
-
-.badge-secondary {
-  background-color: var(--sidebar-badge-secondary-bg, #e5e7eb);
-  color: var(--sidebar-badge-secondary-foreground, #374151);
-}
-
-.badge-destructive {
-  background-color: var(--sidebar-badge-destructive-bg, #fee2e2);
-  color: var(--sidebar-badge-destructive-foreground, #991b1b);
-}
-
-:host([data-theme="dark"]) .badge-default {
-  background-color: var(--sidebar-badge-bg-dark, #1e3a8a);
-  color: var(--sidebar-badge-foreground-dark, #93c5fd);
-}
-
-:host([data-theme="dark"]) .badge-secondary {
-  background-color: var(--sidebar-badge-secondary-bg-dark, #3f3f46);
-  color: var(--sidebar-badge-secondary-foreground-dark, #d4d4d8);
-}
-
-:host([data-theme="dark"]) .badge-destructive {
-  background-color: var(--sidebar-badge-destructive-bg-dark, #7f1d1d);
-  color: var(--sidebar-badge-destructive-foreground-dark, #fca5a5);
-}
-
-/* Print styles */
-@media print {
-  :host([data-active="true"]) .item-content {
-    text-decoration: underline;
-    font-weight: bold;
-  }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: more) {
-  .item-content {
-    border: 1px solid transparent;
-  }
-
-  .item-content:focus-visible {
-    border-color: var(--sidebar-primary, #3b82f6);
-  }
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .item-content {
-    transition: none;
-  }
-}
-
-/* Collapsed icon mode - hide labels, show only icons with smooth transitions */
-:host-context(seki-sidebar[data-state="closed"][data-collapse-mode="icon"]) .item-label {
-  margin-left: -0.5rem;
-  opacity: 0;
-  transition: margin-left 200ms ease-linear, opacity 200ms ease-linear;
-}
-
-:host-context(seki-sidebar[data-state="closed"][data-collapse-mode="icon"]) .item-badge {
-  margin-left: -0.5rem;
-  opacity: 0;
-  transition: margin-left 200ms ease-linear, opacity 200ms ease-linear;
-}
-
-:host-context(seki-sidebar[data-state="closed"][data-collapse-mode="icon"]) .item-content {
-  justify-content: center;
-  padding: 0.5rem;
-}
-
-:host-context(seki-sidebar[data-state="closed"][data-collapse-mode="icon"]) .item-icon {
-  width: 1rem;
-  height: 1rem;
-}
-
-/* Expanded - show labels */
-:host-context(seki-sidebar[data-state="open"]) .item-label,
-:host-context(seki-sidebar:not([data-state="closed"])) .item-label {
-  margin-left: 0;
-  opacity: 1;
-  transition: margin-left 200ms ease-linear, opacity 200ms ease-linear;
-}

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

@@ -1,18 +0,0 @@
-/**
- * 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',
-};