@sekiui/elements 0.0.57 → 0.0.60

package/dist/types/components.d.ts

@@ -5,15 +5,48 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { BadgeVariant } from "./components/badge/seki-badge.interface";
 import { Event } from "./stencil-public-runtime";
 import { SelectChangeEventDetail, SelectOpenChangeEventDetail, SelectPlacement, SelectValidateEventDetail, SelectValue } from "./utils/select";
-import { CollapsedChangeDetail, CollapseModeChangeDetail, MobileStateChangeDetail, NavigateDetail, OpenChangeDetail, SidebarGroupProps, SidebarMenuItemProps, SidebarMenuSubProps, SidebarProps, SidebarState, SidebarTriggerProps, VariantChangeDetail } from "./components/sidebar/types";
+import { SidebarStateChangeDetail } from "./components/sidebar/seki-sidebar-provider";
 import { TooltipHideDetail, TooltipPositionedDetail, TooltipShowDetail, TooltipSide } from "./components/tooltip/seki-tooltip";
+export { BadgeVariant } from "./components/badge/seki-badge.interface";
 export { Event } from "./stencil-public-runtime";
 export { SelectChangeEventDetail, SelectOpenChangeEventDetail, SelectPlacement, SelectValidateEventDetail, SelectValue } from "./utils/select";
-export { CollapsedChangeDetail, CollapseModeChangeDetail, MobileStateChangeDetail, NavigateDetail, OpenChangeDetail, SidebarGroupProps, SidebarMenuItemProps, SidebarMenuSubProps, SidebarProps, SidebarState, SidebarTriggerProps, VariantChangeDetail } from "./components/sidebar/types";
+export { SidebarStateChangeDetail } from "./components/sidebar/seki-sidebar-provider";
 export { TooltipHideDetail, TooltipPositionedDetail, TooltipShowDetail, TooltipSide } from "./components/tooltip/seki-tooltip";
 export namespace Components {
+    /**
+     * seki-badge: Presentational badge component for displaying small pieces of information
+     * @component Badge
+     * @example <seki-badge variant="default">Label</seki-badge>
+     * <seki-badge variant="secondary">
+     *   <span slot="icon">ℹ</span>
+     *   Secondary
+     * </seki-badge>
+     */
+    interface SekiBadge {
+        /**
+          * Maximum limit for number badge If number exceeds this, shows "max+" instead Only used when number prop is set
+          * @default undefined
+         */
+        "max"?: number;
+        /**
+          * Number to display in the badge When set, displays the number instead of text content
+          * @default undefined
+         */
+        "number"?: number;
+        /**
+          * Enable rounded pill styling
+          * @default false
+         */
+        "rounded"?: boolean;
+        /**
+          * Visual variant of the badge
+          * @default 'default'
+         */
+        "variant"?: BadgeVariant;
+    }
     interface SekiButton {
         /**
           * Accessible label for screen readers. Required for icon-only buttons.
@@ -420,191 +453,166 @@ export namespace Components {
     }
     interface SekiSidebar {
         /**
-          * Close the sidebar (set isOpen=false)
-          * @returns
-         */
-        "close": () => Promise<void>;
-        /**
-          * Collapse mechanism: offcanvas (slides), icon (shrinks), or none (fixed)
-          * @type {'offcanvas' | 'icon' | 'none'}
+          * Collapsible behavior: 'offcanvas' | 'icon' | 'none'
           * @default 'offcanvas'
          */
-        "collapseMode": SidebarProps['collapseMode'];
-        /**
-          * Initial open/closed state
-          * @type {boolean}
-          * @default true
-         */
-        "defaultOpen": boolean;
-        /**
-          * Get current sidebar state
-          * @returns
-         */
-        "getState": () => Promise<SidebarState>;
+        "collapsible": 'offcanvas' | 'icon' | 'none';
         /**
-          * Viewport width for mobile detection (px)
-          * @type {number}
-          * @default 768
+          * Side of the screen: 'left' | 'right'
+          * @default 'left'
          */
-        "mobileBreakpoint": number;
+        "side": 'left' | 'right';
         /**
-          * Callback fired when open state changes
+          * Sidebar variant: 'sidebar' | 'floating' | 'inset'
+          * @default 'sidebar'
          */
-        "onOpenChange"?: (isOpen: boolean) => void;
+        "variant": 'sidebar' | 'floating' | 'inset';
+    }
+    interface SekiSidebarContent {
+    }
+    interface SekiSidebarFooter {
+    }
+    interface SekiSidebarGroup {
         /**
-          * Open the sidebar (set isOpen=true)
-          * @returns
+          * Label for the group
          */
-        "open": () => Promise<void>;
+        "label"?: string;
+    }
+    interface SekiSidebarGroupAction {
         /**
-          * Storage key for persisted state
-          * @type {string}
-          * @default 'seki-sidebar-state'
+          * Accessible label for the action
          */
-        "persistenceKey": string;
+        "ariaLabel"?: string;
         /**
-          * Persist state to localStorage
-          * @type {boolean}
+          * Whether the action is disabled
           * @default false
          */
-        "persistent": boolean;
-        /**
-          * Update sidebar state
-          * @param state - Partial state object
-          * @returns
-         */
-        "setState": (state: Partial<SidebarState>) => Promise<void>;
-        /**
-          * Position: left or right side of viewport
-          * @type {'left' | 'right'}
-          * @default 'left'
-         */
-        "side": SidebarProps['side'];
-        /**
-          * Toggle the sidebar open/closed state
-          * @returns
-         */
-        "toggle": () => Promise<void>;
-        /**
-          * Layout variant: standard, floating (detached), or inset
-          * @type {'sidebar' | 'floating' | 'inset'}
-          * @default 'sidebar'
-         */
-        "variant": SidebarProps['variant'];
+        "disabled": boolean;
     }
-    interface SekiSidebarContent {
+    interface SekiSidebarGroupContent {
     }
-    interface SekiSidebarFooter {
+    interface SekiSidebarGroupLabel {
     }
-    interface SekiSidebarGroup {
+    interface SekiSidebarHeader {
+    }
+    interface SekiSidebarInset {
+    }
+    interface SekiSidebarMenu {
+    }
+    interface SekiSidebarMenuAction {
         /**
-          * Optional action button configuration
-          * @type {object}
+          * Whether the action is disabled
+          * @default false
          */
-        "action"?: SidebarGroupProps['action'];
+        "disabled": boolean;
+    }
+    interface SekiSidebarMenuBadge {
+    }
+    interface SekiSidebarMenuButton {
         /**
-          * Allow collapsing this group
-          * @type {boolean}
+          * Whether the menu button is active
           * @default false
          */
-        "collapsible": boolean;
+        "active": boolean;
         /**
-          * Initial collapsed state
-          * @type {boolean}
+          * Whether the menu button is disabled
           * @default false
          */
-        "defaultCollapsed": boolean;
+        "disabled": boolean;
         /**
-          * Get current collapsed state
+          * Optional href for link rendering
          */
-        "isCollapsedState": () => Promise<boolean>;
+        "href"?: string;
         /**
-          * Set collapsed state
+          * Size variant: 'default' | 'sm' | 'lg'
+          * @default 'default'
          */
-        "setCollapsed": (collapsed: boolean) => Promise<void>;
+        "size": 'default' | 'sm' | 'lg';
         /**
-          * Section header text (optional)
-          * @type {string}
+          * Whether to render as a tooltip trigger (for icon-only mode)
+          * @default false
          */
-        "title"?: SidebarGroupProps['title'];
-    }
-    interface SekiSidebarHeader {
-    }
-    interface SekiSidebarMenu {
-    }
-    interface SekiSidebarMenuItem {
+        "tooltip": boolean;
         /**
-          * ARIA current value for active items
-          * @type {string}
-          * @default 'page'
+          * Tooltip text to show in icon mode
          */
-        "ariaCurrentValue": SidebarMenuItemProps['ariaCurrentValue'];
+        "tooltipText"?: string;
         /**
-          * Accessibility label override
-          * @type {string}
+          * Button variant: 'default' | 'outline'
+          * @default 'default'
          */
-        "ariaLabel"?: SidebarMenuItemProps['ariaLabel'];
+        "variant": 'default' | 'outline';
+    }
+    interface SekiSidebarMenuItem {
+    }
+    interface SekiSidebarMenuSkeleton {
         /**
-          * Badge indicator for the item
-          * @type {object}
+          * Whether to show an icon skeleton
+          * @default false
          */
-        "badge"?: SidebarMenuItemProps['badge'];
+        "showIcon": boolean;
+    }
+    interface SekiSidebarMenuSub {
         /**
-          * Disable interaction
-          * @type {boolean}
+          * Whether the submenu is open
           * @default false
          */
-        "disabled": boolean;
+        "open": boolean;
+    }
+    interface SekiSidebarMenuSubButton {
         /**
-          * Navigation URL (optional)
-          * @type {string}
+          * Whether the submenu button is active
+          * @default false
          */
-        "href"?: SidebarMenuItemProps['href'];
+        "active": boolean;
         /**
-          * Highlight as current page
-          * @type {boolean}
+          * Whether the submenu button is disabled
           * @default false
          */
-        "isActive": boolean;
+        "disabled": boolean;
+    }
+    interface SekiSidebarMenuSubItem {
+    }
+    interface SekiSidebarProvider {
         /**
-          * Link target: _blank, _self, etc.
-          * @type {string}
+          * Default open state
+          * @default true
          */
-        "target"?: SidebarMenuItemProps['target'];
-    }
-    interface SekiSidebarMenuSub {
+        "defaultOpen": boolean;
+        "getState": () => Promise<{ open: boolean; openMobile: boolean; isMobile: boolean; }>;
         /**
-          * Initial collapsed state
-          * @type {boolean}
-          * @default false
+          * Controlled open state
          */
-        "defaultCollapsed": boolean;
+        "open"?: boolean;
+        "setOpen": (value: boolean | ((value: boolean) => boolean)) => Promise<void>;
+        "setOpenMobile": (value: boolean) => Promise<void>;
         /**
-          * Get current collapsed state
+          * Sidebar width when expanded
+          * @default '16rem'
          */
-        "isCollapsedState": () => Promise<boolean>;
+        "sidebarWidth": string;
         /**
-          * Label for the submenu (shown when expanded)
-          * @type {string}
+          * Sidebar width in icon mode
+          * @default '3rem'
          */
-        "label"?: SidebarMenuSubProps['label'];
+        "sidebarWidthIcon": string;
         /**
-          * Set collapsed state
+          * Sidebar width on mobile
+          * @default '18rem'
          */
-        "setCollapsed": (collapsed: boolean) => Promise<void>;
+        "sidebarWidthMobile": string;
+        "toggleSidebar": () => Promise<void>;
+    }
+    interface SekiSidebarRail {
+    }
+    interface SekiSidebarSeparator {
     }
     interface SekiSidebarTrigger {
         /**
-          * Accessibility label for the button
-          * @type {string}
-          * @default 'Toggle sidebar'
-         */
-        "ariaLabel": SidebarTriggerProps['ariaLabel'];
-        /**
-          * Icon name or SVG path (optional)
-          * @type {string}
+          * Whether the trigger is disabled
+          * @default false
          */
-        "icon": SidebarTriggerProps['icon'];
+        "disabled": boolean;
     }
     /**
      * @component seki-skeleton
@@ -724,22 +732,14 @@ export interface SekiSelectOptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSekiSelectOptionElement;
 }
-export interface SekiSidebarCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLSekiSidebarElement;
-}
-export interface SekiSidebarGroupCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLSekiSidebarGroupElement;
-}
-export interface SekiSidebarMenuItemCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLSekiSidebarMenuItemElement;
-}
 export interface SekiSidebarMenuSubCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSekiSidebarMenuSubElement;
 }
+export interface SekiSidebarProviderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSekiSidebarProviderElement;
+}
 export interface SekiSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSekiSwitchElement;
@@ -749,6 +749,21 @@ export interface SekiTooltipCustomEvent<T> extends CustomEvent<T> {
     target: HTMLSekiTooltipElement;
 }
 declare global {
+    /**
+     * seki-badge: Presentational badge component for displaying small pieces of information
+     * @component Badge
+     * @example <seki-badge variant="default">Label</seki-badge>
+     * <seki-badge variant="secondary">
+     *   <span slot="icon">ℹ</span>
+     *   Secondary
+     * </seki-badge>
+     */
+    interface HTMLSekiBadgeElement extends Components.SekiBadge, HTMLStencilElement {
+    }
+    var HTMLSekiBadgeElement: {
+        prototype: HTMLSekiBadgeElement;
+        new (): HTMLSekiBadgeElement;
+    };
     interface HTMLSekiButtonElement extends Components.SekiButton, HTMLStencilElement {
     }
     var HTMLSekiButtonElement: {
@@ -968,21 +983,7 @@ declare global {
         prototype: HTMLSekiSelectTriggerElement;
         new (): HTMLSekiSelectTriggerElement;
     };
-    interface HTMLSekiSidebarElementEventMap {
-        "openChange": OpenChangeDetail;
-        "variantChange": VariantChangeDetail;
-        "collapseModeChange": CollapseModeChangeDetail;
-        "mobileStateChange": MobileStateChangeDetail;
-    }
     interface HTMLSekiSidebarElement extends Components.SekiSidebar, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLSekiSidebarElementEventMap>(type: K, listener: (this: HTMLSekiSidebarElement, ev: SekiSidebarCustomEvent<HTMLSekiSidebarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLSekiSidebarElementEventMap>(type: K, listener: (this: HTMLSekiSidebarElement, ev: SekiSidebarCustomEvent<HTMLSekiSidebarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSekiSidebarElement: {
         prototype: HTMLSekiSidebarElement;
@@ -1000,54 +1001,80 @@ declare global {
         prototype: HTMLSekiSidebarFooterElement;
         new (): HTMLSekiSidebarFooterElement;
     };
-    interface HTMLSekiSidebarGroupElementEventMap {
-        "collapsedChange": CollapsedChangeDetail;
-    }
     interface HTMLSekiSidebarGroupElement extends Components.SekiSidebarGroup, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLSekiSidebarGroupElementEventMap>(type: K, listener: (this: HTMLSekiSidebarGroupElement, ev: SekiSidebarGroupCustomEvent<HTMLSekiSidebarGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLSekiSidebarGroupElementEventMap>(type: K, listener: (this: HTMLSekiSidebarGroupElement, ev: SekiSidebarGroupCustomEvent<HTMLSekiSidebarGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSekiSidebarGroupElement: {
         prototype: HTMLSekiSidebarGroupElement;
         new (): HTMLSekiSidebarGroupElement;
     };
+    interface HTMLSekiSidebarGroupActionElement extends Components.SekiSidebarGroupAction, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarGroupActionElement: {
+        prototype: HTMLSekiSidebarGroupActionElement;
+        new (): HTMLSekiSidebarGroupActionElement;
+    };
+    interface HTMLSekiSidebarGroupContentElement extends Components.SekiSidebarGroupContent, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarGroupContentElement: {
+        prototype: HTMLSekiSidebarGroupContentElement;
+        new (): HTMLSekiSidebarGroupContentElement;
+    };
+    interface HTMLSekiSidebarGroupLabelElement extends Components.SekiSidebarGroupLabel, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarGroupLabelElement: {
+        prototype: HTMLSekiSidebarGroupLabelElement;
+        new (): HTMLSekiSidebarGroupLabelElement;
+    };
     interface HTMLSekiSidebarHeaderElement extends Components.SekiSidebarHeader, HTMLStencilElement {
     }
     var HTMLSekiSidebarHeaderElement: {
         prototype: HTMLSekiSidebarHeaderElement;
         new (): HTMLSekiSidebarHeaderElement;
     };
+    interface HTMLSekiSidebarInsetElement extends Components.SekiSidebarInset, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarInsetElement: {
+        prototype: HTMLSekiSidebarInsetElement;
+        new (): HTMLSekiSidebarInsetElement;
+    };
     interface HTMLSekiSidebarMenuElement extends Components.SekiSidebarMenu, HTMLStencilElement {
     }
     var HTMLSekiSidebarMenuElement: {
         prototype: HTMLSekiSidebarMenuElement;
         new (): HTMLSekiSidebarMenuElement;
     };
-    interface HTMLSekiSidebarMenuItemElementEventMap {
-        "navigate": NavigateDetail;
+    interface HTMLSekiSidebarMenuActionElement extends Components.SekiSidebarMenuAction, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarMenuActionElement: {
+        prototype: HTMLSekiSidebarMenuActionElement;
+        new (): HTMLSekiSidebarMenuActionElement;
+    };
+    interface HTMLSekiSidebarMenuBadgeElement extends Components.SekiSidebarMenuBadge, HTMLStencilElement {
     }
+    var HTMLSekiSidebarMenuBadgeElement: {
+        prototype: HTMLSekiSidebarMenuBadgeElement;
+        new (): HTMLSekiSidebarMenuBadgeElement;
+    };
+    interface HTMLSekiSidebarMenuButtonElement extends Components.SekiSidebarMenuButton, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarMenuButtonElement: {
+        prototype: HTMLSekiSidebarMenuButtonElement;
+        new (): HTMLSekiSidebarMenuButtonElement;
+    };
     interface HTMLSekiSidebarMenuItemElement extends Components.SekiSidebarMenuItem, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLSekiSidebarMenuItemElementEventMap>(type: K, listener: (this: HTMLSekiSidebarMenuItemElement, ev: SekiSidebarMenuItemCustomEvent<HTMLSekiSidebarMenuItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLSekiSidebarMenuItemElementEventMap>(type: K, listener: (this: HTMLSekiSidebarMenuItemElement, ev: SekiSidebarMenuItemCustomEvent<HTMLSekiSidebarMenuItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSekiSidebarMenuItemElement: {
         prototype: HTMLSekiSidebarMenuItemElement;
         new (): HTMLSekiSidebarMenuItemElement;
     };
+    interface HTMLSekiSidebarMenuSkeletonElement extends Components.SekiSidebarMenuSkeleton, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarMenuSkeletonElement: {
+        prototype: HTMLSekiSidebarMenuSkeletonElement;
+        new (): HTMLSekiSidebarMenuSkeletonElement;
+    };
     interface HTMLSekiSidebarMenuSubElementEventMap {
-        "collapsedChange": CollapsedChangeDetail;
+        "openChange": boolean;
     }
     interface HTMLSekiSidebarMenuSubElement extends Components.SekiSidebarMenuSub, HTMLStencilElement {
         addEventListener<K extends keyof HTMLSekiSidebarMenuSubElementEventMap>(type: K, listener: (this: HTMLSekiSidebarMenuSubElement, ev: SekiSidebarMenuSubCustomEvent<HTMLSekiSidebarMenuSubElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1063,6 +1090,48 @@ declare global {
         prototype: HTMLSekiSidebarMenuSubElement;
         new (): HTMLSekiSidebarMenuSubElement;
     };
+    interface HTMLSekiSidebarMenuSubButtonElement extends Components.SekiSidebarMenuSubButton, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarMenuSubButtonElement: {
+        prototype: HTMLSekiSidebarMenuSubButtonElement;
+        new (): HTMLSekiSidebarMenuSubButtonElement;
+    };
+    interface HTMLSekiSidebarMenuSubItemElement extends Components.SekiSidebarMenuSubItem, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarMenuSubItemElement: {
+        prototype: HTMLSekiSidebarMenuSubItemElement;
+        new (): HTMLSekiSidebarMenuSubItemElement;
+    };
+    interface HTMLSekiSidebarProviderElementEventMap {
+        "openChange": boolean;
+        "sekiSidebarStateChange": SidebarStateChangeDetail;
+    }
+    interface HTMLSekiSidebarProviderElement extends Components.SekiSidebarProvider, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSekiSidebarProviderElementEventMap>(type: K, listener: (this: HTMLSekiSidebarProviderElement, ev: SekiSidebarProviderCustomEvent<HTMLSekiSidebarProviderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSekiSidebarProviderElementEventMap>(type: K, listener: (this: HTMLSekiSidebarProviderElement, ev: SekiSidebarProviderCustomEvent<HTMLSekiSidebarProviderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSekiSidebarProviderElement: {
+        prototype: HTMLSekiSidebarProviderElement;
+        new (): HTMLSekiSidebarProviderElement;
+    };
+    interface HTMLSekiSidebarRailElement extends Components.SekiSidebarRail, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarRailElement: {
+        prototype: HTMLSekiSidebarRailElement;
+        new (): HTMLSekiSidebarRailElement;
+    };
+    interface HTMLSekiSidebarSeparatorElement extends Components.SekiSidebarSeparator, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarSeparatorElement: {
+        prototype: HTMLSekiSidebarSeparatorElement;
+        new (): HTMLSekiSidebarSeparatorElement;
+    };
     interface HTMLSekiSidebarTriggerElement extends Components.SekiSidebarTrigger, HTMLStencilElement {
     }
     var HTMLSekiSidebarTriggerElement: {
@@ -1137,6 +1206,7 @@ declare global {
         new (): HTMLSekiTooltipElement;
     };
     interface HTMLElementTagNameMap {
+        "seki-badge": HTMLSekiBadgeElement;
         "seki-button": HTMLSekiButtonElement;
         "seki-card": HTMLSekiCardElement;
         "seki-card-action": HTMLSekiCardActionElement;
@@ -1162,10 +1232,23 @@ declare global {
         "seki-sidebar-content": HTMLSekiSidebarContentElement;
         "seki-sidebar-footer": HTMLSekiSidebarFooterElement;
         "seki-sidebar-group": HTMLSekiSidebarGroupElement;
+        "seki-sidebar-group-action": HTMLSekiSidebarGroupActionElement;
+        "seki-sidebar-group-content": HTMLSekiSidebarGroupContentElement;
+        "seki-sidebar-group-label": HTMLSekiSidebarGroupLabelElement;
         "seki-sidebar-header": HTMLSekiSidebarHeaderElement;
+        "seki-sidebar-inset": HTMLSekiSidebarInsetElement;
         "seki-sidebar-menu": HTMLSekiSidebarMenuElement;
+        "seki-sidebar-menu-action": HTMLSekiSidebarMenuActionElement;
+        "seki-sidebar-menu-badge": HTMLSekiSidebarMenuBadgeElement;
+        "seki-sidebar-menu-button": HTMLSekiSidebarMenuButtonElement;
         "seki-sidebar-menu-item": HTMLSekiSidebarMenuItemElement;
+        "seki-sidebar-menu-skeleton": HTMLSekiSidebarMenuSkeletonElement;
         "seki-sidebar-menu-sub": HTMLSekiSidebarMenuSubElement;
+        "seki-sidebar-menu-sub-button": HTMLSekiSidebarMenuSubButtonElement;
+        "seki-sidebar-menu-sub-item": HTMLSekiSidebarMenuSubItemElement;
+        "seki-sidebar-provider": HTMLSekiSidebarProviderElement;
+        "seki-sidebar-rail": HTMLSekiSidebarRailElement;
+        "seki-sidebar-separator": HTMLSekiSidebarSeparatorElement;
         "seki-sidebar-trigger": HTMLSekiSidebarTriggerElement;
         "seki-skeleton": HTMLSekiSkeletonElement;
         "seki-switch": HTMLSekiSwitchElement;
@@ -1173,6 +1256,37 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    /**
+     * seki-badge: Presentational badge component for displaying small pieces of information
+     * @component Badge
+     * @example <seki-badge variant="default">Label</seki-badge>
+     * <seki-badge variant="secondary">
+     *   <span slot="icon">ℹ</span>
+     *   Secondary
+     * </seki-badge>
+     */
+    interface SekiBadge {
+        /**
+          * Maximum limit for number badge If number exceeds this, shows "max+" instead Only used when number prop is set
+          * @default undefined
+         */
+        "max"?: number;
+        /**
+          * Number to display in the badge When set, displays the number instead of text content
+          * @default undefined
+         */
+        "number"?: number;
+        /**
+          * Enable rounded pill styling
+          * @default false
+         */
+        "rounded"?: boolean;
+        /**
+          * Visual variant of the badge
+          * @default 'default'
+         */
+        "variant"?: BadgeVariant;
+    }
     interface SekiButton {
         /**
           * Accessible label for screen readers. Required for icon-only buttons.
@@ -1579,177 +1693,174 @@ declare namespace LocalJSX {
     }
     interface SekiSidebar {
         /**
-          * Collapse mechanism: offcanvas (slides), icon (shrinks), or none (fixed)
-          * @type {'offcanvas' | 'icon' | 'none'}
+          * Collapsible behavior: 'offcanvas' | 'icon' | 'none'
           * @default 'offcanvas'
          */
-        "collapseMode"?: SidebarProps['collapseMode'];
+        "collapsible"?: 'offcanvas' | 'icon' | 'none';
         /**
-          * Initial open/closed state
-          * @type {boolean}
-          * @default true
-         */
-        "defaultOpen"?: boolean;
-        /**
-          * Viewport width for mobile detection (px)
-          * @type {number}
-          * @default 768
-         */
-        "mobileBreakpoint"?: number;
-        /**
-          * Event fired when collapse mode changes
-         */
-        "onCollapseModeChange"?: (event: SekiSidebarCustomEvent<CollapseModeChangeDetail>) => void;
-        /**
-          * Event fired when mobile state changes
+          * Side of the screen: 'left' | 'right'
+          * @default 'left'
          */
-        "onMobileStateChange"?: (event: SekiSidebarCustomEvent<MobileStateChangeDetail>) => void;
+        "side"?: 'left' | 'right';
         /**
-          * Callback fired when open state changes
+          * Sidebar variant: 'sidebar' | 'floating' | 'inset'
+          * @default 'sidebar'
          */
-        "onOpenChange"?: (isOpen: boolean) => void;
+        "variant"?: 'sidebar' | 'floating' | 'inset';
+    }
+    interface SekiSidebarContent {
+    }
+    interface SekiSidebarFooter {
+    }
+    interface SekiSidebarGroup {
         /**
-          * Event fired when sidebar opens/closes
+          * Label for the group
          */
-        "onOpenChange"?: (event: SekiSidebarCustomEvent<OpenChangeDetail>) => void;
+        "label"?: string;
+    }
+    interface SekiSidebarGroupAction {
         /**
-          * Event fired when variant changes
+          * Accessible label for the action
          */
-        "onVariantChange"?: (event: SekiSidebarCustomEvent<VariantChangeDetail>) => void;
+        "ariaLabel"?: string;
         /**
-          * Storage key for persisted state
-          * @type {string}
-          * @default 'seki-sidebar-state'
+          * Whether the action is disabled
+          * @default false
          */
-        "persistenceKey"?: string;
+        "disabled"?: boolean;
+    }
+    interface SekiSidebarGroupContent {
+    }
+    interface SekiSidebarGroupLabel {
+    }
+    interface SekiSidebarHeader {
+    }
+    interface SekiSidebarInset {
+    }
+    interface SekiSidebarMenu {
+    }
+    interface SekiSidebarMenuAction {
         /**
-          * Persist state to localStorage
-          * @type {boolean}
+          * Whether the action is disabled
           * @default false
          */
-        "persistent"?: boolean;
+        "disabled"?: boolean;
+    }
+    interface SekiSidebarMenuBadge {
+    }
+    interface SekiSidebarMenuButton {
         /**
-          * Position: left or right side of viewport
-          * @type {'left' | 'right'}
-          * @default 'left'
+          * Whether the menu button is active
+          * @default false
          */
-        "side"?: SidebarProps['side'];
+        "active"?: boolean;
         /**
-          * Layout variant: standard, floating (detached), or inset
-          * @type {'sidebar' | 'floating' | 'inset'}
-          * @default 'sidebar'
+          * Whether the menu button is disabled
+          * @default false
          */
-        "variant"?: SidebarProps['variant'];
-    }
-    interface SekiSidebarContent {
-    }
-    interface SekiSidebarFooter {
-    }
-    interface SekiSidebarGroup {
+        "disabled"?: boolean;
         /**
-          * Optional action button configuration
-          * @type {object}
+          * Optional href for link rendering
          */
-        "action"?: SidebarGroupProps['action'];
+        "href"?: string;
         /**
-          * Allow collapsing this group
-          * @type {boolean}
-          * @default false
+          * Size variant: 'default' | 'sm' | 'lg'
+          * @default 'default'
          */
-        "collapsible"?: boolean;
+        "size"?: 'default' | 'sm' | 'lg';
         /**
-          * Initial collapsed state
-          * @type {boolean}
+          * Whether to render as a tooltip trigger (for icon-only mode)
           * @default false
          */
-        "defaultCollapsed"?: boolean;
+        "tooltip"?: boolean;
         /**
-          * Event fired when collapsed state changes
+          * Tooltip text to show in icon mode
          */
-        "onCollapsedChange"?: (event: SekiSidebarGroupCustomEvent<CollapsedChangeDetail>) => void;
+        "tooltipText"?: string;
         /**
-          * Section header text (optional)
-          * @type {string}
+          * Button variant: 'default' | 'outline'
+          * @default 'default'
          */
-        "title"?: SidebarGroupProps['title'];
+        "variant"?: 'default' | 'outline';
     }
-    interface SekiSidebarHeader {
+    interface SekiSidebarMenuItem {
     }
-    interface SekiSidebarMenu {
+    interface SekiSidebarMenuSkeleton {
+        /**
+          * Whether to show an icon skeleton
+          * @default false
+         */
+        "showIcon"?: boolean;
     }
-    interface SekiSidebarMenuItem {
+    interface SekiSidebarMenuSub {
         /**
-          * ARIA current value for active items
-          * @type {string}
-          * @default 'page'
+          * Event emitted when open state changes
          */
-        "ariaCurrentValue"?: SidebarMenuItemProps['ariaCurrentValue'];
+        "onOpenChange"?: (event: SekiSidebarMenuSubCustomEvent<boolean>) => void;
         /**
-          * Accessibility label override
-          * @type {string}
+          * Whether the submenu is open
+          * @default false
          */
-        "ariaLabel"?: SidebarMenuItemProps['ariaLabel'];
+        "open"?: boolean;
+    }
+    interface SekiSidebarMenuSubButton {
         /**
-          * Badge indicator for the item
-          * @type {object}
+          * Whether the submenu button is active
+          * @default false
          */
-        "badge"?: SidebarMenuItemProps['badge'];
+        "active"?: boolean;
         /**
-          * Disable interaction
-          * @type {boolean}
+          * Whether the submenu button is disabled
           * @default false
          */
         "disabled"?: boolean;
+    }
+    interface SekiSidebarMenuSubItem {
+    }
+    interface SekiSidebarProvider {
         /**
-          * Navigation URL (optional)
-          * @type {string}
+          * Default open state
+          * @default true
          */
-        "href"?: SidebarMenuItemProps['href'];
+        "defaultOpen"?: boolean;
         /**
-          * Highlight as current page
-          * @type {boolean}
-          * @default false
+          * Event emitted when open state changes
          */
-        "isActive"?: boolean;
+        "onOpenChange"?: (event: SekiSidebarProviderCustomEvent<boolean>) => void;
         /**
-          * Event fired on item click
+          * Event emitted when sidebar state changes (for child components)
          */
-        "onNavigate"?: (event: SekiSidebarMenuItemCustomEvent<NavigateDetail>) => void;
+        "onSekiSidebarStateChange"?: (event: SekiSidebarProviderCustomEvent<SidebarStateChangeDetail>) => void;
         /**
-          * Link target: _blank, _self, etc.
-          * @type {string}
+          * Controlled open state
          */
-        "target"?: SidebarMenuItemProps['target'];
-    }
-    interface SekiSidebarMenuSub {
+        "open"?: boolean;
         /**
-          * Initial collapsed state
-          * @type {boolean}
-          * @default false
+          * Sidebar width when expanded
+          * @default '16rem'
          */
-        "defaultCollapsed"?: boolean;
+        "sidebarWidth"?: string;
         /**
-          * Label for the submenu (shown when expanded)
-          * @type {string}
+          * Sidebar width in icon mode
+          * @default '3rem'
          */
-        "label"?: SidebarMenuSubProps['label'];
+        "sidebarWidthIcon"?: string;
         /**
-          * Event fired when collapsed state changes
+          * Sidebar width on mobile
+          * @default '18rem'
          */
-        "onCollapsedChange"?: (event: SekiSidebarMenuSubCustomEvent<CollapsedChangeDetail>) => void;
+        "sidebarWidthMobile"?: string;
+    }
+    interface SekiSidebarRail {
+    }
+    interface SekiSidebarSeparator {
     }
     interface SekiSidebarTrigger {
         /**
-          * Accessibility label for the button
-          * @type {string}
-          * @default 'Toggle sidebar'
-         */
-        "ariaLabel"?: SidebarTriggerProps['ariaLabel'];
-        /**
-          * Icon name or SVG path (optional)
-          * @type {string}
+          * Whether the trigger is disabled
+          * @default false
          */
-        "icon"?: SidebarTriggerProps['icon'];
+        "disabled"?: boolean;
     }
     /**
      * @component seki-skeleton
@@ -1859,6 +1970,7 @@ declare namespace LocalJSX {
         "side"?: TooltipSide;
     }
     interface IntrinsicElements {
+        "seki-badge": SekiBadge;
         "seki-button": SekiButton;
         "seki-card": SekiCard;
         "seki-card-action": SekiCardAction;
@@ -1884,10 +1996,23 @@ declare namespace LocalJSX {
         "seki-sidebar-content": SekiSidebarContent;
         "seki-sidebar-footer": SekiSidebarFooter;
         "seki-sidebar-group": SekiSidebarGroup;
+        "seki-sidebar-group-action": SekiSidebarGroupAction;
+        "seki-sidebar-group-content": SekiSidebarGroupContent;
+        "seki-sidebar-group-label": SekiSidebarGroupLabel;
         "seki-sidebar-header": SekiSidebarHeader;
+        "seki-sidebar-inset": SekiSidebarInset;
         "seki-sidebar-menu": SekiSidebarMenu;
+        "seki-sidebar-menu-action": SekiSidebarMenuAction;
+        "seki-sidebar-menu-badge": SekiSidebarMenuBadge;
+        "seki-sidebar-menu-button": SekiSidebarMenuButton;
         "seki-sidebar-menu-item": SekiSidebarMenuItem;
+        "seki-sidebar-menu-skeleton": SekiSidebarMenuSkeleton;
         "seki-sidebar-menu-sub": SekiSidebarMenuSub;
+        "seki-sidebar-menu-sub-button": SekiSidebarMenuSubButton;
+        "seki-sidebar-menu-sub-item": SekiSidebarMenuSubItem;
+        "seki-sidebar-provider": SekiSidebarProvider;
+        "seki-sidebar-rail": SekiSidebarRail;
+        "seki-sidebar-separator": SekiSidebarSeparator;
         "seki-sidebar-trigger": SekiSidebarTrigger;
         "seki-skeleton": SekiSkeleton;
         "seki-switch": SekiSwitch;
@@ -1898,6 +2023,16 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * seki-badge: Presentational badge component for displaying small pieces of information
+             * @component Badge
+             * @example <seki-badge variant="default">Label</seki-badge>
+             * <seki-badge variant="secondary">
+             *   <span slot="icon">ℹ</span>
+             *   Secondary
+             * </seki-badge>
+             */
+            "seki-badge": LocalJSX.SekiBadge & JSXBase.HTMLAttributes<HTMLSekiBadgeElement>;
             "seki-button": LocalJSX.SekiButton & JSXBase.HTMLAttributes<HTMLSekiButtonElement>;
             /**
              * Flexible container for organizing related content with optional header,
@@ -1977,10 +2112,23 @@ declare module "@stencil/core" {
             "seki-sidebar-content": LocalJSX.SekiSidebarContent & JSXBase.HTMLAttributes<HTMLSekiSidebarContentElement>;
             "seki-sidebar-footer": LocalJSX.SekiSidebarFooter & JSXBase.HTMLAttributes<HTMLSekiSidebarFooterElement>;
             "seki-sidebar-group": LocalJSX.SekiSidebarGroup & JSXBase.HTMLAttributes<HTMLSekiSidebarGroupElement>;
+            "seki-sidebar-group-action": LocalJSX.SekiSidebarGroupAction & JSXBase.HTMLAttributes<HTMLSekiSidebarGroupActionElement>;
+            "seki-sidebar-group-content": LocalJSX.SekiSidebarGroupContent & JSXBase.HTMLAttributes<HTMLSekiSidebarGroupContentElement>;
+            "seki-sidebar-group-label": LocalJSX.SekiSidebarGroupLabel & JSXBase.HTMLAttributes<HTMLSekiSidebarGroupLabelElement>;
             "seki-sidebar-header": LocalJSX.SekiSidebarHeader & JSXBase.HTMLAttributes<HTMLSekiSidebarHeaderElement>;
+            "seki-sidebar-inset": LocalJSX.SekiSidebarInset & JSXBase.HTMLAttributes<HTMLSekiSidebarInsetElement>;
             "seki-sidebar-menu": LocalJSX.SekiSidebarMenu & JSXBase.HTMLAttributes<HTMLSekiSidebarMenuElement>;
+            "seki-sidebar-menu-action": LocalJSX.SekiSidebarMenuAction & JSXBase.HTMLAttributes<HTMLSekiSidebarMenuActionElement>;
+            "seki-sidebar-menu-badge": LocalJSX.SekiSidebarMenuBadge & JSXBase.HTMLAttributes<HTMLSekiSidebarMenuBadgeElement>;
+            "seki-sidebar-menu-button": LocalJSX.SekiSidebarMenuButton & JSXBase.HTMLAttributes<HTMLSekiSidebarMenuButtonElement>;
             "seki-sidebar-menu-item": LocalJSX.SekiSidebarMenuItem & JSXBase.HTMLAttributes<HTMLSekiSidebarMenuItemElement>;
+            "seki-sidebar-menu-skeleton": LocalJSX.SekiSidebarMenuSkeleton & JSXBase.HTMLAttributes<HTMLSekiSidebarMenuSkeletonElement>;
             "seki-sidebar-menu-sub": LocalJSX.SekiSidebarMenuSub & JSXBase.HTMLAttributes<HTMLSekiSidebarMenuSubElement>;
+            "seki-sidebar-menu-sub-button": LocalJSX.SekiSidebarMenuSubButton & JSXBase.HTMLAttributes<HTMLSekiSidebarMenuSubButtonElement>;
+            "seki-sidebar-menu-sub-item": LocalJSX.SekiSidebarMenuSubItem & JSXBase.HTMLAttributes<HTMLSekiSidebarMenuSubItemElement>;
+            "seki-sidebar-provider": LocalJSX.SekiSidebarProvider & JSXBase.HTMLAttributes<HTMLSekiSidebarProviderElement>;
+            "seki-sidebar-rail": LocalJSX.SekiSidebarRail & JSXBase.HTMLAttributes<HTMLSekiSidebarRailElement>;
+            "seki-sidebar-separator": LocalJSX.SekiSidebarSeparator & JSXBase.HTMLAttributes<HTMLSekiSidebarSeparatorElement>;
             "seki-sidebar-trigger": LocalJSX.SekiSidebarTrigger & JSXBase.HTMLAttributes<HTMLSekiSidebarTriggerElement>;
             /**
              * @component seki-skeleton