@sekiui/elements 0.0.55 → 0.0.57

package/dist/types/components/sidebar/seki-sidebar-group.d.ts

@@ -0,0 +1,81 @@
+/**
+ * SekiSidebarGroup Component
+ * @description Group container for organizing sidebar menu items
+ * Optionally provides a collapsible section with title and action button
+ * @component
+ * @example
+ * <seki-sidebar-group title="Navigation" collapsible>
+ *   <seki-sidebar-menu>
+ *     <seki-sidebar-menu-item href="/">Home</seki-sidebar-menu-item>
+ *   </seki-sidebar-menu>
+ * </seki-sidebar-group>
+ */
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SidebarGroupProps, CollapsedChangeDetail } from './types';
+export declare class SekiSidebarGroup {
+    /**
+     * Reference to the element
+     */
+    el: HTMLElement;
+    /**
+     * Section header text (optional)
+     * @type {string}
+     */
+    title?: SidebarGroupProps['title'];
+    /**
+     * Allow collapsing this group
+     * @type {boolean}
+     * @default false
+     */
+    collapsible: boolean;
+    /**
+     * Initial collapsed state
+     * @type {boolean}
+     * @default false
+     */
+    defaultCollapsed: boolean;
+    /**
+     * Optional action button configuration
+     * @type {object}
+     */
+    action?: SidebarGroupProps['action'];
+    /**
+     * Internal state: whether group is collapsed
+     */
+    isCollapsed: boolean;
+    /**
+     * Event fired when collapsed state changes
+     */
+    collapsedChange: EventEmitter<CollapsedChangeDetail>;
+    /**
+     * Component lifecycle: initialize state
+     */
+    componentWillLoad(): void;
+    /**
+     * Get current collapsed state
+     */
+    isCollapsedState(): Promise<boolean>;
+    /**
+     * Set collapsed state
+     */
+    setCollapsed(collapsed: boolean): Promise<void>;
+    /**
+     * Toggle collapsed state
+     */
+    private handleToggle;
+    /**
+     * Handle keyboard navigation on toggle button
+     * - Enter/Space: toggle group
+     * - ArrowLeft: collapse group
+     * - ArrowRight: expand group
+     */
+    private handleToggleKeyDown;
+    /**
+     * Handle action button click
+     */
+    private handleAction;
+    /**
+     * Render the component
+     */
+    render(): any;
+}

package/dist/types/components/sidebar/seki-sidebar-header.d.ts

@@ -0,0 +1,17 @@
+/**
+ * SekiSidebarHeader Component
+ * @description Sticky header section at the top of the sidebar
+ * Provides a slot for header content (logo, title, trigger button)
+ * @component
+ * @example
+ * <seki-sidebar-header>
+ *   <div class="sidebar-header-content">Logo</div>
+ *   <seki-sidebar-trigger></seki-sidebar-trigger>
+ * </seki-sidebar-header>
+ */
+export declare class SekiSidebarHeader {
+    /**
+     * Render the component
+     */
+    render(): any;
+}

package/dist/types/components/sidebar/seki-sidebar-menu-item.d.ts

@@ -0,0 +1,104 @@
+/**
+ * SekiSidebarMenuItem Component
+ * @description Navigation menu item within the sidebar menu
+ * Supports icons, badges, active states, and keyboard navigation
+ * @component
+ * @example
+ * <seki-sidebar-menu-item href="/dashboard" is-active>Dashboard</seki-sidebar-menu-item>
+ */
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SidebarMenuItemProps, NavigateDetail } from './types';
+export declare class SekiSidebarMenuItem {
+    /**
+     * Reference to the element
+     */
+    el: HTMLElement;
+    /**
+     * Navigation URL (optional)
+     * @type {string}
+     */
+    href?: SidebarMenuItemProps['href'];
+    /**
+     * Link target: _blank, _self, etc.
+     * @type {string}
+     */
+    target?: SidebarMenuItemProps['target'];
+    /**
+     * Disable interaction
+     * @type {boolean}
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Highlight as current page
+     * @type {boolean}
+     * @default false
+     */
+    isActive: boolean;
+    /**
+     * Badge indicator for the item
+     * @type {object}
+     */
+    badge?: SidebarMenuItemProps['badge'];
+    /**
+     * Accessibility label override
+     * @type {string}
+     */
+    ariaLabel?: SidebarMenuItemProps['ariaLabel'];
+    /**
+     * ARIA current value for active items
+     * @type {string}
+     */
+    ariaCurrentValue: SidebarMenuItemProps['ariaCurrentValue'];
+    /**
+     * Event fired on item click
+     */
+    navigate: EventEmitter<NavigateDetail>;
+    /**
+     * Handle item click
+     */
+    private handleClick;
+    /**
+     * Handle keyboard navigation
+     * - Enter/Space: activate item
+     * - ArrowDown: focus next menu item
+     * - ArrowUp: focus previous menu item
+     * - ArrowRight: expand parent submenu (if collapsed)
+     * - ArrowLeft: collapse parent submenu (if expanded)
+     * - Home: focus first menu item
+     * - End: focus last menu item
+     */
+    private handleKeyDown;
+    /**
+     * Get all enabled menu items
+     */
+    private getEnabledItems;
+    /**
+     * Focus next menu item in the menu
+     */
+    private focusNextItem;
+    /**
+     * Focus previous menu item in the menu
+     */
+    private focusPreviousItem;
+    /**
+     * Focus first menu item in the menu
+     */
+    private focusFirstItem;
+    /**
+     * Focus last menu item in the menu
+     */
+    private focusLastItem;
+    /**
+     * Expand parent submenu if collapsed
+     */
+    private expandParentSubmenu;
+    /**
+     * Collapse parent submenu if expanded
+     */
+    private collapseParentSubmenu;
+    /**
+     * Render the component
+     */
+    render(): any;
+}

package/dist/types/components/sidebar/seki-sidebar-menu-sub.d.ts

@@ -0,0 +1,81 @@
+/**
+ * SekiSidebarMenuSub Component
+ * @description Nested submenu container for collapsible menu items
+ * Provides expandable/collapsible sub-navigation structure with support for:
+ * - Multi-level nesting (unlimited depth)
+ * - Smooth animations (200ms transitions)
+ * - Icon-only display when parent sidebar is collapsed
+ * - Tooltip support for collapsed state
+ * - Full keyboard navigation and accessibility
+ * @component
+ * @example
+ * <seki-sidebar-menu-item>
+ *   <span slot="icon">⚙️</span>
+ *   Settings
+ *   <seki-sidebar-menu-sub slot="submenu">
+ *     <seki-sidebar-menu-item href="/settings/profile">
+ *       <span slot="icon">👤</span>
+ *       Profile
+ *     </seki-sidebar-menu-item>
+ *     <seki-sidebar-menu-item href="/settings/security">
+ *       <span slot="icon">🔒</span>
+ *       Security
+ *     </seki-sidebar-menu-item>
+ *   </seki-sidebar-menu-sub>
+ * </seki-sidebar-menu-item>
+ */
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SidebarMenuSubProps, CollapsedChangeDetail } from './types';
+export declare class SekiSidebarMenuSub {
+    /**
+     * Reference to the element
+     */
+    el: HTMLElement;
+    /**
+     * Label for the submenu (shown when expanded)
+     * @type {string}
+     */
+    label?: SidebarMenuSubProps['label'];
+    /**
+     * Initial collapsed state
+     * @type {boolean}
+     * @default false
+     */
+    defaultCollapsed: boolean;
+    /**
+     * Internal state: whether submenu is collapsed
+     */
+    isCollapsed: boolean;
+    /**
+     * Event fired when collapsed state changes
+     */
+    collapsedChange: EventEmitter<CollapsedChangeDetail>;
+    /**
+     * Component lifecycle: initialize state
+     */
+    componentWillLoad(): void;
+    /**
+     * Get current collapsed state
+     */
+    isCollapsedState(): Promise<boolean>;
+    /**
+     * Set collapsed state
+     */
+    setCollapsed(collapsed: boolean): Promise<void>;
+    /**
+     * Toggle collapsed state
+     */
+    private handleToggle;
+    /**
+     * Handle keyboard navigation
+     * - Enter: toggle submenu
+     * - ArrowDown: focus next submenu item
+     * - ArrowUp: focus previous submenu item
+     * - Escape: close submenu
+     */
+    private handleKeyDown;
+    /**
+     * Render the component
+     */
+    render(): any;
+}

package/dist/types/components/sidebar/seki-sidebar-menu.d.ts

@@ -0,0 +1,17 @@
+/**
+ * SekiSidebarMenu Component
+ * @description List container for menu items within a sidebar
+ * Provides semantic menu structure with proper ARIA attributes
+ * @component
+ * @example
+ * <seki-sidebar-menu>
+ *   <seki-sidebar-menu-item href="/dashboard">Dashboard</seki-sidebar-menu-item>
+ *   <seki-sidebar-menu-item href="/settings">Settings</seki-sidebar-menu-item>
+ * </seki-sidebar-menu>
+ */
+export declare class SekiSidebarMenu {
+    /**
+     * Render the component
+     */
+    render(): any;
+}

package/dist/types/components/sidebar/seki-sidebar-trigger.d.ts

@@ -0,0 +1,53 @@
+/**
+ * SekiSidebarTrigger Component
+ * @description Toggle button for opening/closing the sidebar
+ * Manages focus, keyboard activation (Space, Enter), and ARIA attributes
+ * @component
+ * @example
+ * <seki-sidebar-trigger aria-label="Toggle sidebar"></seki-sidebar-trigger>
+ */
+import { SidebarTriggerProps } from './types';
+export declare class SekiSidebarTrigger {
+    /**
+     * Accessibility label for the button
+     * @type {string}
+     * @default 'Toggle sidebar'
+     */
+    ariaLabel: SidebarTriggerProps['ariaLabel'];
+    /**
+     * Icon name or SVG path (optional)
+     * @type {string}
+     */
+    icon: SidebarTriggerProps['icon'];
+    el: HTMLElement;
+    /**
+     * Track the sidebar's open state for aria-expanded attribute
+     */
+    isOpen: boolean;
+    /**
+     * Reference to parent sidebar
+     */
+    private parentSidebar;
+    /**
+     * Initialize - find parent sidebar and listen to state changes
+     */
+    connectedCallback(): void;
+    /**
+     * Listen to openChange event from parent sidebar
+     */
+    handleOpenChange(event: CustomEvent<{
+        isOpen: boolean;
+    }>): void;
+    /**
+     * Handle button click - finds parent seki-sidebar or nearest sidebar in document
+     */
+    private handleClick;
+    /**
+     * Handle keyboard activation (Space, Enter)
+     */
+    private handleKeyDown;
+    /**
+     * Render the component
+     */
+    render(): any;
+}

package/dist/types/components/sidebar/seki-sidebar.d.ts

@@ -0,0 +1,185 @@
+/**
+ * SekiSidebar Component
+ * @description Main sidebar container component managing collapse state, layout variant,
+ * and responsive configuration. Provides context to child components.
+ * @component
+ * @example
+ * <seki-sidebar variant="sidebar" collapse-mode="icon" persistent>
+ *   <seki-sidebar-header>Header Content</seki-sidebar-header>
+ *   <seki-sidebar-content>Menu content</seki-sidebar-content>
+ *   <seki-sidebar-footer>Footer content</seki-sidebar-footer>
+ * </seki-sidebar>
+ */
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SidebarProps, SidebarState, OpenChangeDetail, VariantChangeDetail, CollapseModeChangeDetail, MobileStateChangeDetail } from './types';
+export declare class SekiSidebar {
+    /**
+     * Layout variant: standard, floating (detached), or inset
+     * @type {'sidebar' | 'floating' | 'inset'}
+     * @default 'sidebar'
+     */
+    variant: SidebarProps['variant'];
+    /**
+     * Collapse mechanism: offcanvas (slides), icon (shrinks), or none (fixed)
+     * @type {'offcanvas' | 'icon' | 'none'}
+     * @default 'offcanvas'
+     */
+    collapseMode: SidebarProps['collapseMode'];
+    /**
+     * Initial open/closed state
+     * @type {boolean}
+     * @default true
+     */
+    defaultOpen: boolean;
+    /**
+     * Persist state to localStorage
+     * @type {boolean}
+     * @default false
+     */
+    persistent: boolean;
+    /**
+     * Viewport width for mobile detection (px)
+     * @type {number}
+     * @default 768
+     */
+    mobileBreakpoint: number;
+    /**
+     * Position: left or right side of viewport
+     * @type {'left' | 'right'}
+     * @default 'left'
+     */
+    side: SidebarProps['side'];
+    /**
+     * Storage key for persisted state
+     * @type {string}
+     * @default 'seki-sidebar-state'
+     */
+    persistenceKey: string;
+    /**
+     * Callback fired when open state changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    el: HTMLElement;
+    /**
+     * Internal state: whether sidebar is open/expanded
+     */
+    isOpen: boolean;
+    /**
+     * Internal state: whether viewport is mobile
+     */
+    isMobile: boolean;
+    /**
+     * Event fired when sidebar opens/closes
+     */
+    openChange: EventEmitter<OpenChangeDetail>;
+    /**
+     * Event fired when variant changes
+     */
+    variantChange: EventEmitter<VariantChangeDetail>;
+    /**
+     * Event fired when collapse mode changes
+     */
+    collapseModeChange: EventEmitter<CollapseModeChangeDetail>;
+    /**
+     * Event fired when mobile state changes
+     */
+    mobileStateChange: EventEmitter<MobileStateChangeDetail>;
+    /**
+     * Note: Context distribution to child components via parent-child DOM hierarchy
+     * Child components use closest('seki-sidebar') to access parent methods
+     */
+    private resizeObserver;
+    private mediaQueryList;
+    private keyboardShortcutId;
+    /**
+     * Component lifecycle: initialize state
+     */
+    componentWillLoad(): void;
+    /**
+     * Watch for variant changes
+     */
+    watchVariant(newValue: SidebarProps['variant'] | undefined): void;
+    /**
+     * Watch for collapse mode changes
+     */
+    watchCollapseMode(newValue: SidebarProps['collapseMode'] | undefined): void;
+    /**
+     * Component lifecycle: after render
+     */
+    componentDidLoad(): void;
+    /**
+     * Component lifecycle: on prop changes
+     */
+    componentWillUpdate(): void;
+    /**
+     * Component lifecycle: cleanup
+     */
+    disconnectedCallback(): void;
+    /**
+     * Listen for variant prop changes
+     */
+    onVariantChange(newVariant: string): void;
+    /**
+     * Listen for collapseMode prop changes
+     */
+    onCollapseModeChange(newMode: string): void;
+    /**
+     * Handle media query changes for mobile detection
+     */
+    private handleMediaQueryChange;
+    /**
+     * Detect if viewport is mobile
+     */
+    private detectMobileState;
+    /**
+     * Setup resize detection using ResizeObserver
+     */
+    private setupResizeDetection;
+    /**
+     * Setup keyboard shortcut for toggling sidebar (Ctrl+B or Cmd+B)
+     * Uses the KeyboardService for centralized event handling
+     */
+    private setupKeyboardShortcut;
+    /**
+     * Note: Context updates handled via event emissions and state changes
+     */
+    private updateContext;
+    /**
+     * Get current state synchronously
+     */
+    private getStateSync;
+    /**
+     * Open the sidebar (set isOpen=true)
+     * @returns {Promise<void>}
+     */
+    open(): Promise<void>;
+    /**
+     * Close the sidebar (set isOpen=false)
+     * @returns {Promise<void>}
+     */
+    close(): Promise<void>;
+    /**
+     * Toggle the sidebar open/closed state
+     * @returns {Promise<void>}
+     */
+    toggle(): Promise<void>;
+    /**
+     * Get current sidebar state
+     * @returns {Promise<SidebarState>}
+     */
+    getState(): Promise<SidebarState>;
+    /**
+     * Update sidebar state
+     * @param {Partial<SidebarState>} state - Partial state object
+     * @returns {Promise<void>}
+     */
+    setState(state: Partial<SidebarState>): Promise<void>;
+    /**
+     * Persist state to localStorage if persistent=true
+     */
+    private persistState;
+    /**
+     * Render the component
+     */
+    render(): any;
+}