@sekiui/elements 0.0.56 → 0.0.59

package/dist/types/components.d.ts

@@ -5,13 +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 { 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 { 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.
@@ -416,6 +451,194 @@ export namespace Components {
     }
     interface SekiSelectTrigger {
     }
+    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'}
+          * @default 'offcanvas'
+         */
+        "collapseMode": SidebarProps['collapseMode'];
+        /**
+          * Initial open/closed state
+          * @type {boolean}
+          * @default true
+         */
+        "defaultOpen": boolean;
+        /**
+          * Get current sidebar state
+          * @returns
+         */
+        "getState": () => Promise<SidebarState>;
+        /**
+          * Viewport width for mobile detection (px)
+          * @type {number}
+          * @default 768
+         */
+        "mobileBreakpoint": number;
+        /**
+          * Callback fired when open state changes
+         */
+        "onOpenChange"?: (isOpen: boolean) => void;
+        /**
+          * Open the sidebar (set isOpen=true)
+          * @returns
+         */
+        "open": () => Promise<void>;
+        /**
+          * Storage key for persisted state
+          * @type {string}
+          * @default 'seki-sidebar-state'
+         */
+        "persistenceKey": string;
+        /**
+          * Persist state to localStorage
+          * @type {boolean}
+          * @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'];
+    }
+    interface SekiSidebarContent {
+    }
+    interface SekiSidebarFooter {
+    }
+    interface SekiSidebarGroup {
+        /**
+          * Optional action button configuration
+          * @type {object}
+         */
+        "action"?: SidebarGroupProps['action'];
+        /**
+          * Allow collapsing this group
+          * @type {boolean}
+          * @default false
+         */
+        "collapsible": boolean;
+        /**
+          * Initial collapsed state
+          * @type {boolean}
+          * @default false
+         */
+        "defaultCollapsed": boolean;
+        /**
+          * Get current collapsed state
+         */
+        "isCollapsedState": () => Promise<boolean>;
+        /**
+          * Set collapsed state
+         */
+        "setCollapsed": (collapsed: boolean) => Promise<void>;
+        /**
+          * Section header text (optional)
+          * @type {string}
+         */
+        "title"?: SidebarGroupProps['title'];
+    }
+    interface SekiSidebarHeader {
+    }
+    interface SekiSidebarMenu {
+    }
+    interface SekiSidebarMenuItem {
+        /**
+          * ARIA current value for active items
+          * @type {string}
+          * @default 'page'
+         */
+        "ariaCurrentValue": SidebarMenuItemProps['ariaCurrentValue'];
+        /**
+          * Accessibility label override
+          * @type {string}
+         */
+        "ariaLabel"?: SidebarMenuItemProps['ariaLabel'];
+        /**
+          * Badge indicator for the item
+          * @type {object}
+         */
+        "badge"?: SidebarMenuItemProps['badge'];
+        /**
+          * Disable interaction
+          * @type {boolean}
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Navigation URL (optional)
+          * @type {string}
+         */
+        "href"?: SidebarMenuItemProps['href'];
+        /**
+          * Highlight as current page
+          * @type {boolean}
+          * @default false
+         */
+        "isActive": boolean;
+        /**
+          * Link target: _blank, _self, etc.
+          * @type {string}
+         */
+        "target"?: SidebarMenuItemProps['target'];
+    }
+    interface SekiSidebarMenuSub {
+        /**
+          * Initial collapsed state
+          * @type {boolean}
+          * @default false
+         */
+        "defaultCollapsed": boolean;
+        /**
+          * Get current collapsed state
+         */
+        "isCollapsedState": () => Promise<boolean>;
+        /**
+          * Label for the submenu (shown when expanded)
+          * @type {string}
+         */
+        "label"?: SidebarMenuSubProps['label'];
+        /**
+          * Set collapsed state
+         */
+        "setCollapsed": (collapsed: boolean) => Promise<void>;
+    }
+    interface 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'];
+    }
     /**
      * @component seki-skeleton
      * @description A loading placeholder component that displays an animated skeleton while content is loading
@@ -534,6 +757,22 @@ 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 SekiSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSekiSwitchElement;
@@ -543,6 +782,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: {
@@ -762,6 +1016,107 @@ 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;
+        new (): HTMLSekiSidebarElement;
+    };
+    interface HTMLSekiSidebarContentElement extends Components.SekiSidebarContent, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarContentElement: {
+        prototype: HTMLSekiSidebarContentElement;
+        new (): HTMLSekiSidebarContentElement;
+    };
+    interface HTMLSekiSidebarFooterElement extends Components.SekiSidebarFooter, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarFooterElement: {
+        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 HTMLSekiSidebarHeaderElement extends Components.SekiSidebarHeader, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarHeaderElement: {
+        prototype: HTMLSekiSidebarHeaderElement;
+        new (): HTMLSekiSidebarHeaderElement;
+    };
+    interface HTMLSekiSidebarMenuElement extends Components.SekiSidebarMenu, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarMenuElement: {
+        prototype: HTMLSekiSidebarMenuElement;
+        new (): HTMLSekiSidebarMenuElement;
+    };
+    interface HTMLSekiSidebarMenuItemElementEventMap {
+        "navigate": NavigateDetail;
+    }
+    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 HTMLSekiSidebarMenuSubElementEventMap {
+        "collapsedChange": CollapsedChangeDetail;
+    }
+    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;
+        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 HTMLSekiSidebarMenuSubElementEventMap>(type: K, listener: (this: HTMLSekiSidebarMenuSubElement, ev: SekiSidebarMenuSubCustomEvent<HTMLSekiSidebarMenuSubElementEventMap[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 HTMLSekiSidebarMenuSubElement: {
+        prototype: HTMLSekiSidebarMenuSubElement;
+        new (): HTMLSekiSidebarMenuSubElement;
+    };
+    interface HTMLSekiSidebarTriggerElement extends Components.SekiSidebarTrigger, HTMLStencilElement {
+    }
+    var HTMLSekiSidebarTriggerElement: {
+        prototype: HTMLSekiSidebarTriggerElement;
+        new (): HTMLSekiSidebarTriggerElement;
+    };
     /**
      * @component seki-skeleton
      * @description A loading placeholder component that displays an animated skeleton while content is loading
@@ -830,6 +1185,7 @@ declare global {
         new (): HTMLSekiTooltipElement;
     };
     interface HTMLElementTagNameMap {
+        "seki-badge": HTMLSekiBadgeElement;
         "seki-button": HTMLSekiButtonElement;
         "seki-card": HTMLSekiCardElement;
         "seki-card-action": HTMLSekiCardActionElement;
@@ -851,12 +1207,52 @@ declare global {
         "seki-select-group": HTMLSekiSelectGroupElement;
         "seki-select-option": HTMLSekiSelectOptionElement;
         "seki-select-trigger": HTMLSekiSelectTriggerElement;
+        "seki-sidebar": HTMLSekiSidebarElement;
+        "seki-sidebar-content": HTMLSekiSidebarContentElement;
+        "seki-sidebar-footer": HTMLSekiSidebarFooterElement;
+        "seki-sidebar-group": HTMLSekiSidebarGroupElement;
+        "seki-sidebar-header": HTMLSekiSidebarHeaderElement;
+        "seki-sidebar-menu": HTMLSekiSidebarMenuElement;
+        "seki-sidebar-menu-item": HTMLSekiSidebarMenuItemElement;
+        "seki-sidebar-menu-sub": HTMLSekiSidebarMenuSubElement;
+        "seki-sidebar-trigger": HTMLSekiSidebarTriggerElement;
         "seki-skeleton": HTMLSekiSkeletonElement;
         "seki-switch": HTMLSekiSwitchElement;
         "seki-tooltip": HTMLSekiTooltipElement;
     }
 }
 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.
@@ -1261,6 +1657,180 @@ declare namespace LocalJSX {
     }
     interface SekiSelectTrigger {
     }
+    interface SekiSidebar {
+        /**
+          * 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;
+        /**
+          * 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
+         */
+        "onMobileStateChange"?: (event: SekiSidebarCustomEvent<MobileStateChangeDetail>) => void;
+        /**
+          * Callback fired when open state changes
+         */
+        "onOpenChange"?: (isOpen: boolean) => void;
+        /**
+          * Event fired when sidebar opens/closes
+         */
+        "onOpenChange"?: (event: SekiSidebarCustomEvent<OpenChangeDetail>) => void;
+        /**
+          * Event fired when variant changes
+         */
+        "onVariantChange"?: (event: SekiSidebarCustomEvent<VariantChangeDetail>) => void;
+        /**
+          * Storage key for persisted state
+          * @type {string}
+          * @default 'seki-sidebar-state'
+         */
+        "persistenceKey"?: string;
+        /**
+          * Persist state to localStorage
+          * @type {boolean}
+          * @default false
+         */
+        "persistent"?: boolean;
+        /**
+          * Position: left or right side of viewport
+          * @type {'left' | 'right'}
+          * @default 'left'
+         */
+        "side"?: SidebarProps['side'];
+        /**
+          * Layout variant: standard, floating (detached), or inset
+          * @type {'sidebar' | 'floating' | 'inset'}
+          * @default 'sidebar'
+         */
+        "variant"?: SidebarProps['variant'];
+    }
+    interface SekiSidebarContent {
+    }
+    interface SekiSidebarFooter {
+    }
+    interface SekiSidebarGroup {
+        /**
+          * Optional action button configuration
+          * @type {object}
+         */
+        "action"?: SidebarGroupProps['action'];
+        /**
+          * Allow collapsing this group
+          * @type {boolean}
+          * @default false
+         */
+        "collapsible"?: boolean;
+        /**
+          * Initial collapsed state
+          * @type {boolean}
+          * @default false
+         */
+        "defaultCollapsed"?: boolean;
+        /**
+          * Event fired when collapsed state changes
+         */
+        "onCollapsedChange"?: (event: SekiSidebarGroupCustomEvent<CollapsedChangeDetail>) => void;
+        /**
+          * Section header text (optional)
+          * @type {string}
+         */
+        "title"?: SidebarGroupProps['title'];
+    }
+    interface SekiSidebarHeader {
+    }
+    interface SekiSidebarMenu {
+    }
+    interface SekiSidebarMenuItem {
+        /**
+          * ARIA current value for active items
+          * @type {string}
+          * @default 'page'
+         */
+        "ariaCurrentValue"?: SidebarMenuItemProps['ariaCurrentValue'];
+        /**
+          * Accessibility label override
+          * @type {string}
+         */
+        "ariaLabel"?: SidebarMenuItemProps['ariaLabel'];
+        /**
+          * Badge indicator for the item
+          * @type {object}
+         */
+        "badge"?: SidebarMenuItemProps['badge'];
+        /**
+          * Disable interaction
+          * @type {boolean}
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Navigation URL (optional)
+          * @type {string}
+         */
+        "href"?: SidebarMenuItemProps['href'];
+        /**
+          * Highlight as current page
+          * @type {boolean}
+          * @default false
+         */
+        "isActive"?: boolean;
+        /**
+          * Event fired on item click
+         */
+        "onNavigate"?: (event: SekiSidebarMenuItemCustomEvent<NavigateDetail>) => void;
+        /**
+          * Link target: _blank, _self, etc.
+          * @type {string}
+         */
+        "target"?: SidebarMenuItemProps['target'];
+    }
+    interface SekiSidebarMenuSub {
+        /**
+          * Initial collapsed state
+          * @type {boolean}
+          * @default false
+         */
+        "defaultCollapsed"?: boolean;
+        /**
+          * Label for the submenu (shown when expanded)
+          * @type {string}
+         */
+        "label"?: SidebarMenuSubProps['label'];
+        /**
+          * Event fired when collapsed state changes
+         */
+        "onCollapsedChange"?: (event: SekiSidebarMenuSubCustomEvent<CollapsedChangeDetail>) => void;
+    }
+    interface 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'];
+    }
     /**
      * @component seki-skeleton
      * @description A loading placeholder component that displays an animated skeleton while content is loading
@@ -1369,6 +1939,7 @@ declare namespace LocalJSX {
         "side"?: TooltipSide;
     }
     interface IntrinsicElements {
+        "seki-badge": SekiBadge;
         "seki-button": SekiButton;
         "seki-card": SekiCard;
         "seki-card-action": SekiCardAction;
@@ -1390,6 +1961,15 @@ declare namespace LocalJSX {
         "seki-select-group": SekiSelectGroup;
         "seki-select-option": SekiSelectOption;
         "seki-select-trigger": SekiSelectTrigger;
+        "seki-sidebar": SekiSidebar;
+        "seki-sidebar-content": SekiSidebarContent;
+        "seki-sidebar-footer": SekiSidebarFooter;
+        "seki-sidebar-group": SekiSidebarGroup;
+        "seki-sidebar-header": SekiSidebarHeader;
+        "seki-sidebar-menu": SekiSidebarMenu;
+        "seki-sidebar-menu-item": SekiSidebarMenuItem;
+        "seki-sidebar-menu-sub": SekiSidebarMenuSub;
+        "seki-sidebar-trigger": SekiSidebarTrigger;
         "seki-skeleton": SekiSkeleton;
         "seki-switch": SekiSwitch;
         "seki-tooltip": SekiTooltip;
@@ -1399,6 +1979,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,
@@ -1474,6 +2064,15 @@ declare module "@stencil/core" {
             "seki-select-group": LocalJSX.SekiSelectGroup & JSXBase.HTMLAttributes<HTMLSekiSelectGroupElement>;
             "seki-select-option": LocalJSX.SekiSelectOption & JSXBase.HTMLAttributes<HTMLSekiSelectOptionElement>;
             "seki-select-trigger": LocalJSX.SekiSelectTrigger & JSXBase.HTMLAttributes<HTMLSekiSelectTriggerElement>;
+            "seki-sidebar": LocalJSX.SekiSidebar & JSXBase.HTMLAttributes<HTMLSekiSidebarElement>;
+            "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-header": LocalJSX.SekiSidebarHeader & JSXBase.HTMLAttributes<HTMLSekiSidebarHeaderElement>;
+            "seki-sidebar-menu": LocalJSX.SekiSidebarMenu & JSXBase.HTMLAttributes<HTMLSekiSidebarMenuElement>;
+            "seki-sidebar-menu-item": LocalJSX.SekiSidebarMenuItem & JSXBase.HTMLAttributes<HTMLSekiSidebarMenuItemElement>;
+            "seki-sidebar-menu-sub": LocalJSX.SekiSidebarMenuSub & JSXBase.HTMLAttributes<HTMLSekiSidebarMenuSubElement>;
+            "seki-sidebar-trigger": LocalJSX.SekiSidebarTrigger & JSXBase.HTMLAttributes<HTMLSekiSidebarTriggerElement>;
             /**
              * @component seki-skeleton
              * @description A loading placeholder component that displays an animated skeleton while content is loading