@sekiui/elements 0.0.57 → 0.0.60

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

@@ -1,18 +1,3 @@
-/**
- * SekiSidebarContent Component
- * @description Scrollable main content area of the sidebar
- * Contains menu items, groups, and other sidebar content
- * @component
- * @example
- * <seki-sidebar-content>
- *   <seki-sidebar-group title="Navigation">
- *     <!-- Menu items -->
- *   </seki-sidebar-group>
- * </seki-sidebar-content>
- */
 export declare class SekiSidebarContent {
-    /**
-     * Render the component
-     */
     render(): any;
 }

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

@@ -1,16 +1,8 @@
-/**
- * SekiSidebarFooter Component
- * @description Sticky footer section at the bottom of the sidebar
- * Provides a slot for footer content (user info, settings, logout button)
- * @component
- * @example
- * <seki-sidebar-footer>
- *   <div class="user-info">User Name</div>
- * </seki-sidebar-footer>
- */
+import { SidebarStateChangeDetail } from './seki-sidebar-provider';
 export declare class SekiSidebarFooter {
-    /**
-     * Render the component
-     */
+    _isIconMode: boolean;
+    componentWillLoad(): void;
+    private syncWithProvider;
+    handleStateChange(event: CustomEvent<SidebarStateChangeDetail>): void;
     render(): any;
 }

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

@@ -0,0 +1,11 @@
+export declare class SekiSidebarGroupAction {
+    /**
+     * Whether the action is disabled
+     */
+    disabled: boolean;
+    /**
+     * Accessible label for the action
+     */
+    ariaLabel?: string;
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+export declare class SekiSidebarGroupContent {
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+export declare class SekiSidebarGroupLabel {
+    render(): any;
+}

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

@@ -1,81 +1,7 @@
-/**
- * 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
+     * Label for the group
      */
+    label?: string;
     render(): any;
 }

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

@@ -1,17 +1,8 @@
-/**
- * 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>
- */
+import { SidebarStateChangeDetail } from './seki-sidebar-provider';
 export declare class SekiSidebarHeader {
-    /**
-     * Render the component
-     */
+    _isIconMode: boolean;
+    componentWillLoad(): void;
+    private syncWithProvider;
+    handleStateChange(event: CustomEvent<SidebarStateChangeDetail>): void;
     render(): any;
 }

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

@@ -0,0 +1,3 @@
+export declare class SekiSidebarInset {
+    render(): any;
+}

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

@@ -0,0 +1,7 @@
+export declare class SekiSidebarMenuAction {
+    /**
+     * Whether the action is disabled
+     */
+    disabled: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+export declare class SekiSidebarMenuBadge {
+    render(): any;
+}

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

@@ -0,0 +1,37 @@
+import { SidebarStateChangeDetail } from './seki-sidebar-provider';
+export declare class SekiSidebarMenuButton {
+    el: HTMLElement;
+    /**
+     * Whether the menu button is active
+     */
+    active: boolean;
+    /**
+     * Whether the menu button is disabled
+     */
+    disabled: boolean;
+    /**
+     * Size variant: 'default' | 'sm' | 'lg'
+     */
+    size: 'default' | 'sm' | 'lg';
+    /**
+     * Button variant: 'default' | 'outline'
+     */
+    variant: 'default' | 'outline';
+    /**
+     * Whether to render as a tooltip trigger (for icon-only mode)
+     */
+    tooltip: boolean;
+    /**
+     * Tooltip text to show in icon mode
+     */
+    tooltipText?: string;
+    /**
+     * Optional href for link rendering
+     */
+    href?: string;
+    _isIconMode: boolean;
+    componentWillLoad(): void;
+    private syncWithProvider;
+    handleStateChange(event: CustomEvent<SidebarStateChangeDetail>): void;
+    render(): any;
+}

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

@@ -1,104 +1,3 @@
-/**
- * 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-skeleton.d.ts

@@ -0,0 +1,7 @@
+export declare class SekiSidebarMenuSkeleton {
+    /**
+     * Whether to show an icon skeleton
+     */
+    showIcon: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,11 @@
+export declare class SekiSidebarMenuSubButton {
+    /**
+     * Whether the submenu button is active
+     */
+    active: boolean;
+    /**
+     * Whether the submenu button is disabled
+     */
+    disabled: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+export declare class SekiSidebarMenuSubItem {
+    render(): any;
+}

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

@@ -1,81 +1,22 @@
-/**
- * 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;
+    private contentRef?;
     /**
-     * Label for the submenu (shown when expanded)
-     * @type {string}
+     * Whether the submenu is open
      */
-    label?: SidebarMenuSubProps['label'];
+    open: boolean;
     /**
-     * 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
+     * Event emitted when open state changes
      */
+    openChange: EventEmitter<boolean>;
+    _open: boolean;
+    _isAnimating: boolean;
+    _contentHeight: number;
     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
-     */
+    openChanged(newValue: boolean): void;
+    private handleTriggerClick;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

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

@@ -1,17 +1,3 @@
-/**
- * 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-provider.d.ts

@@ -0,0 +1,59 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface SidebarStateChangeDetail {
+    open: boolean;
+    openMobile: boolean;
+    isMobile: boolean;
+}
+export declare class SekiSidebarProvider {
+    el: HTMLElement;
+    private mediaQuery?;
+    /**
+     * Default open state
+     */
+    defaultOpen: boolean;
+    /**
+     * Controlled open state
+     */
+    open?: boolean;
+    /**
+     * Sidebar width when expanded
+     */
+    sidebarWidth: string;
+    /**
+     * Sidebar width in icon mode
+     */
+    sidebarWidthIcon: string;
+    /**
+     * Sidebar width on mobile
+     */
+    sidebarWidthMobile: string;
+    /**
+     * Event emitted when open state changes
+     */
+    openChange: EventEmitter<boolean>;
+    /**
+     * Event emitted when sidebar state changes (for child components)
+     */
+    sekiSidebarStateChange: EventEmitter<SidebarStateChangeDetail>;
+    _open: boolean;
+    _openMobile: boolean;
+    _isMobile: boolean;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    private handleMediaChange;
+    openChanged(newValue: boolean | undefined): void;
+    internalOpenChanged(): void;
+    mobileOpenChanged(): void;
+    private emitStateChange;
+    setOpen(value: boolean | ((value: boolean) => boolean)): Promise<void>;
+    setOpenMobile(value: boolean): Promise<void>;
+    toggleSidebar(): Promise<void>;
+    getState(): Promise<{
+        open: boolean;
+        openMobile: boolean;
+        isMobile: boolean;
+    }>;
+    handleKeyDown(event: KeyboardEvent): void;
+    private getCookie;
+    render(): any;
+}

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

@@ -0,0 +1,5 @@
+export declare class SekiSidebarRail {
+    el: HTMLElement;
+    private handleClick;
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+export declare class SekiSidebarSeparator {
+    render(): any;
+}

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

@@ -1,53 +1,16 @@
-/**
- * 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';
+import { SidebarStateChangeDetail } from './seki-sidebar-provider';
 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
+     * Whether the trigger is disabled
      */
+    disabled: boolean;
+    _isOpen: boolean;
+    _isMobile: boolean;
+    private provider;
+    componentWillLoad(): void;
+    private syncWithProvider;
+    handleStateChange(event: CustomEvent<SidebarStateChangeDetail>): void;
     private handleClick;
-    /**
-     * Handle keyboard activation (Space, Enter)
-     */
-    private handleKeyDown;
-    /**
-     * Render the component
-     */
     render(): any;
 }