@sekiui/elements 0.0.55 → 0.0.57

package/dist/types/components.d.ts

@@ -7,9 +7,11 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 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 { 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 {
     interface SekiButton {
@@ -38,6 +40,116 @@ export namespace Components {
          */
         "variant": 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
     }
+    /**
+     * Flexible container for organizing related content with optional header,
+     * content, and footer sections. Composition-based using subcomponents.
+     * @example <seki-card>
+     *   <seki-card-header>
+     *     <seki-card-title>Title</seki-card-title>
+     *   </seki-card-header>
+     *   <seki-card-content>Content here</seki-card-content>
+     * </seki-card>
+     */
+    interface SekiCard {
+        /**
+          * Optional CSS class for custom styling hooks
+         */
+        "class"?: string;
+        /**
+          * Optional data attribute for testing
+         */
+        "dataTestid"?: string;
+    }
+    /**
+     * Optional action area within card header for buttons or menus.
+     * Provides flex layout with automatic right-alignment.
+     * @example <seki-card-action>
+     *   <button icon>⋯</button>
+     * </seki-card-action>
+     */
+    interface SekiCardAction {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * Main content body of the card.
+     * Flexible container for any content (text, forms, lists, etc.)
+     * @example <seki-card-content>
+     *   <input type="text" placeholder="Email" />
+     *   <input type="password" placeholder="Password" />
+     * </seki-card-content>
+     */
+    interface SekiCardContent {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * Secondary descriptive text below the card title.
+     * Renders as paragraph with muted text color.
+     * @example <seki-card-description>Description text</seki-card-description>
+     */
+    interface SekiCardDescription {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * Bottom section of a card for action buttons or footer content.
+     * Provides flex layout with optional alignment control.
+     * @example <seki-card-footer alignment="flex-end">
+     *   <button>Cancel</button>
+     *   <button primary>Submit</button>
+     * </seki-card-footer>
+     */
+    interface SekiCardFooter {
+        /**
+          * Flex alignment for footer items. Default: flex-start Options: flex-start, center, flex-end
+          * @default 'flex-start'
+         */
+        "alignment": Alignment;
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * Header section of a card, typically containing title and description.
+     * Provides flex layout for arranging title + action elements.
+     * @example <seki-card-header>
+     *   <seki-card-title>Title</seki-card-title>
+     *   <seki-card-description>Description</seki-card-description>
+     *   <seki-card-action>
+     *     <button>Action</button>
+     *   </seki-card-action>
+     * </seki-card-header>
+     */
+    interface SekiCardHeader {
+        /**
+          * Optional CSS class for custom styling
+         */
+        "class"?: string;
+    }
+    /**
+     * Primary heading text within a card header.
+     * Renders as semantic heading (h1-h6) with typography tokens.
+     * @example <seki-card-title level="h2">My Card Title</seki-card-title>
+     */
+    interface SekiCardTitle {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+        /**
+          * Semantic heading level (h1-h6). Default: h2
+          * @default 'h2'
+         */
+        "level": HeadingLevel;
+    }
     interface SekiField {
         /**
           * Whether the field is in an invalid/error state Applies data-invalid attribute for styling
@@ -306,6 +418,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
@@ -424,6 +724,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;
@@ -439,6 +755,102 @@ declare global {
         prototype: HTMLSekiButtonElement;
         new (): HTMLSekiButtonElement;
     };
+    /**
+     * Flexible container for organizing related content with optional header,
+     * content, and footer sections. Composition-based using subcomponents.
+     * @example <seki-card>
+     *   <seki-card-header>
+     *     <seki-card-title>Title</seki-card-title>
+     *   </seki-card-header>
+     *   <seki-card-content>Content here</seki-card-content>
+     * </seki-card>
+     */
+    interface HTMLSekiCardElement extends Components.SekiCard, HTMLStencilElement {
+    }
+    var HTMLSekiCardElement: {
+        prototype: HTMLSekiCardElement;
+        new (): HTMLSekiCardElement;
+    };
+    /**
+     * Optional action area within card header for buttons or menus.
+     * Provides flex layout with automatic right-alignment.
+     * @example <seki-card-action>
+     *   <button icon>⋯</button>
+     * </seki-card-action>
+     */
+    interface HTMLSekiCardActionElement extends Components.SekiCardAction, HTMLStencilElement {
+    }
+    var HTMLSekiCardActionElement: {
+        prototype: HTMLSekiCardActionElement;
+        new (): HTMLSekiCardActionElement;
+    };
+    /**
+     * Main content body of the card.
+     * Flexible container for any content (text, forms, lists, etc.)
+     * @example <seki-card-content>
+     *   <input type="text" placeholder="Email" />
+     *   <input type="password" placeholder="Password" />
+     * </seki-card-content>
+     */
+    interface HTMLSekiCardContentElement extends Components.SekiCardContent, HTMLStencilElement {
+    }
+    var HTMLSekiCardContentElement: {
+        prototype: HTMLSekiCardContentElement;
+        new (): HTMLSekiCardContentElement;
+    };
+    /**
+     * Secondary descriptive text below the card title.
+     * Renders as paragraph with muted text color.
+     * @example <seki-card-description>Description text</seki-card-description>
+     */
+    interface HTMLSekiCardDescriptionElement extends Components.SekiCardDescription, HTMLStencilElement {
+    }
+    var HTMLSekiCardDescriptionElement: {
+        prototype: HTMLSekiCardDescriptionElement;
+        new (): HTMLSekiCardDescriptionElement;
+    };
+    /**
+     * Bottom section of a card for action buttons or footer content.
+     * Provides flex layout with optional alignment control.
+     * @example <seki-card-footer alignment="flex-end">
+     *   <button>Cancel</button>
+     *   <button primary>Submit</button>
+     * </seki-card-footer>
+     */
+    interface HTMLSekiCardFooterElement extends Components.SekiCardFooter, HTMLStencilElement {
+    }
+    var HTMLSekiCardFooterElement: {
+        prototype: HTMLSekiCardFooterElement;
+        new (): HTMLSekiCardFooterElement;
+    };
+    /**
+     * Header section of a card, typically containing title and description.
+     * Provides flex layout for arranging title + action elements.
+     * @example <seki-card-header>
+     *   <seki-card-title>Title</seki-card-title>
+     *   <seki-card-description>Description</seki-card-description>
+     *   <seki-card-action>
+     *     <button>Action</button>
+     *   </seki-card-action>
+     * </seki-card-header>
+     */
+    interface HTMLSekiCardHeaderElement extends Components.SekiCardHeader, HTMLStencilElement {
+    }
+    var HTMLSekiCardHeaderElement: {
+        prototype: HTMLSekiCardHeaderElement;
+        new (): HTMLSekiCardHeaderElement;
+    };
+    /**
+     * Primary heading text within a card header.
+     * Renders as semantic heading (h1-h6) with typography tokens.
+     * @example <seki-card-title level="h2">My Card Title</seki-card-title>
+     */
+    interface HTMLSekiCardTitleElement extends Components.SekiCardTitle, HTMLStencilElement {
+    }
+    var HTMLSekiCardTitleElement: {
+        prototype: HTMLSekiCardTitleElement;
+        new (): HTMLSekiCardTitleElement;
+    };
     interface HTMLSekiFieldElement extends Components.SekiField, HTMLStencilElement {
     }
     var HTMLSekiFieldElement: {
@@ -556,6 +968,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
@@ -625,6 +1138,13 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "seki-button": HTMLSekiButtonElement;
+        "seki-card": HTMLSekiCardElement;
+        "seki-card-action": HTMLSekiCardActionElement;
+        "seki-card-content": HTMLSekiCardContentElement;
+        "seki-card-description": HTMLSekiCardDescriptionElement;
+        "seki-card-footer": HTMLSekiCardFooterElement;
+        "seki-card-header": HTMLSekiCardHeaderElement;
+        "seki-card-title": HTMLSekiCardTitleElement;
         "seki-field": HTMLSekiFieldElement;
         "seki-field-description": HTMLSekiFieldDescriptionElement;
         "seki-field-error": HTMLSekiFieldErrorElement;
@@ -638,6 +1158,15 @@ 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;
@@ -670,6 +1199,116 @@ declare namespace LocalJSX {
          */
         "variant"?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
     }
+    /**
+     * Flexible container for organizing related content with optional header,
+     * content, and footer sections. Composition-based using subcomponents.
+     * @example <seki-card>
+     *   <seki-card-header>
+     *     <seki-card-title>Title</seki-card-title>
+     *   </seki-card-header>
+     *   <seki-card-content>Content here</seki-card-content>
+     * </seki-card>
+     */
+    interface SekiCard {
+        /**
+          * Optional CSS class for custom styling hooks
+         */
+        "class"?: string;
+        /**
+          * Optional data attribute for testing
+         */
+        "dataTestid"?: string;
+    }
+    /**
+     * Optional action area within card header for buttons or menus.
+     * Provides flex layout with automatic right-alignment.
+     * @example <seki-card-action>
+     *   <button icon>⋯</button>
+     * </seki-card-action>
+     */
+    interface SekiCardAction {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * Main content body of the card.
+     * Flexible container for any content (text, forms, lists, etc.)
+     * @example <seki-card-content>
+     *   <input type="text" placeholder="Email" />
+     *   <input type="password" placeholder="Password" />
+     * </seki-card-content>
+     */
+    interface SekiCardContent {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * Secondary descriptive text below the card title.
+     * Renders as paragraph with muted text color.
+     * @example <seki-card-description>Description text</seki-card-description>
+     */
+    interface SekiCardDescription {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * Bottom section of a card for action buttons or footer content.
+     * Provides flex layout with optional alignment control.
+     * @example <seki-card-footer alignment="flex-end">
+     *   <button>Cancel</button>
+     *   <button primary>Submit</button>
+     * </seki-card-footer>
+     */
+    interface SekiCardFooter {
+        /**
+          * Flex alignment for footer items. Default: flex-start Options: flex-start, center, flex-end
+          * @default 'flex-start'
+         */
+        "alignment"?: Alignment;
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+    }
+    /**
+     * Header section of a card, typically containing title and description.
+     * Provides flex layout for arranging title + action elements.
+     * @example <seki-card-header>
+     *   <seki-card-title>Title</seki-card-title>
+     *   <seki-card-description>Description</seki-card-description>
+     *   <seki-card-action>
+     *     <button>Action</button>
+     *   </seki-card-action>
+     * </seki-card-header>
+     */
+    interface SekiCardHeader {
+        /**
+          * Optional CSS class for custom styling
+         */
+        "class"?: string;
+    }
+    /**
+     * Primary heading text within a card header.
+     * Renders as semantic heading (h1-h6) with typography tokens.
+     * @example <seki-card-title level="h2">My Card Title</seki-card-title>
+     */
+    interface SekiCardTitle {
+        /**
+          * Optional CSS class
+         */
+        "class"?: string;
+        /**
+          * Semantic heading level (h1-h6). Default: h2
+          * @default 'h2'
+         */
+        "level"?: HeadingLevel;
+    }
     interface SekiField {
         /**
           * Whether the field is in an invalid/error state Applies data-invalid attribute for styling
@@ -938,6 +1577,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
@@ -1047,6 +1860,13 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "seki-button": SekiButton;
+        "seki-card": SekiCard;
+        "seki-card-action": SekiCardAction;
+        "seki-card-content": SekiCardContent;
+        "seki-card-description": SekiCardDescription;
+        "seki-card-footer": SekiCardFooter;
+        "seki-card-header": SekiCardHeader;
+        "seki-card-title": SekiCardTitle;
         "seki-field": SekiField;
         "seki-field-description": SekiFieldDescription;
         "seki-field-error": SekiFieldError;
@@ -1060,6 +1880,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;
@@ -1070,6 +1899,67 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "seki-button": LocalJSX.SekiButton & JSXBase.HTMLAttributes<HTMLSekiButtonElement>;
+            /**
+             * Flexible container for organizing related content with optional header,
+             * content, and footer sections. Composition-based using subcomponents.
+             * @example <seki-card>
+             *   <seki-card-header>
+             *     <seki-card-title>Title</seki-card-title>
+             *   </seki-card-header>
+             *   <seki-card-content>Content here</seki-card-content>
+             * </seki-card>
+             */
+            "seki-card": LocalJSX.SekiCard & JSXBase.HTMLAttributes<HTMLSekiCardElement>;
+            /**
+             * Optional action area within card header for buttons or menus.
+             * Provides flex layout with automatic right-alignment.
+             * @example <seki-card-action>
+             *   <button icon>⋯</button>
+             * </seki-card-action>
+             */
+            "seki-card-action": LocalJSX.SekiCardAction & JSXBase.HTMLAttributes<HTMLSekiCardActionElement>;
+            /**
+             * Main content body of the card.
+             * Flexible container for any content (text, forms, lists, etc.)
+             * @example <seki-card-content>
+             *   <input type="text" placeholder="Email" />
+             *   <input type="password" placeholder="Password" />
+             * </seki-card-content>
+             */
+            "seki-card-content": LocalJSX.SekiCardContent & JSXBase.HTMLAttributes<HTMLSekiCardContentElement>;
+            /**
+             * Secondary descriptive text below the card title.
+             * Renders as paragraph with muted text color.
+             * @example <seki-card-description>Description text</seki-card-description>
+             */
+            "seki-card-description": LocalJSX.SekiCardDescription & JSXBase.HTMLAttributes<HTMLSekiCardDescriptionElement>;
+            /**
+             * Bottom section of a card for action buttons or footer content.
+             * Provides flex layout with optional alignment control.
+             * @example <seki-card-footer alignment="flex-end">
+             *   <button>Cancel</button>
+             *   <button primary>Submit</button>
+             * </seki-card-footer>
+             */
+            "seki-card-footer": LocalJSX.SekiCardFooter & JSXBase.HTMLAttributes<HTMLSekiCardFooterElement>;
+            /**
+             * Header section of a card, typically containing title and description.
+             * Provides flex layout for arranging title + action elements.
+             * @example <seki-card-header>
+             *   <seki-card-title>Title</seki-card-title>
+             *   <seki-card-description>Description</seki-card-description>
+             *   <seki-card-action>
+             *     <button>Action</button>
+             *   </seki-card-action>
+             * </seki-card-header>
+             */
+            "seki-card-header": LocalJSX.SekiCardHeader & JSXBase.HTMLAttributes<HTMLSekiCardHeaderElement>;
+            /**
+             * Primary heading text within a card header.
+             * Renders as semantic heading (h1-h6) with typography tokens.
+             * @example <seki-card-title level="h2">My Card Title</seki-card-title>
+             */
+            "seki-card-title": LocalJSX.SekiCardTitle & JSXBase.HTMLAttributes<HTMLSekiCardTitleElement>;
             "seki-field": LocalJSX.SekiField & JSXBase.HTMLAttributes<HTMLSekiFieldElement>;
             "seki-field-description": LocalJSX.SekiFieldDescription & JSXBase.HTMLAttributes<HTMLSekiFieldDescriptionElement>;
             "seki-field-error": LocalJSX.SekiFieldError & JSXBase.HTMLAttributes<HTMLSekiFieldErrorElement>;
@@ -1083,6 +1973,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