le-kit 0.3.5 → 0.5.0

package/dist/types/components/le-side-panel-toggle/le-side-panel-toggle.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type LeSidePanelToggleAction = 'toggle' | 'open' | 'close';
+export type LeSidePanelRequestToggleDetail = {
+    panelId?: string;
+    action: LeSidePanelToggleAction;
+};
+export declare class LeSidePanelToggle {
+    el: HTMLElement;
+    /** Optional id used to target a specific panel. */
+    panelId?: string;
+    /** Action to emit. Default toggles the panel. */
+    action: LeSidePanelToggleAction;
+    /** Optional keyboard shortcut like `Mod+B` or `Alt+N`. */
+    shortcut?: string;
+    /** Disables the toggle. */
+    disabled: boolean;
+    mode: 'default' | 'admin';
+    variant: 'solid' | 'outlined' | 'clear' | 'system';
+    color: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+    size: 'small' | 'medium' | 'large';
+    selected: boolean;
+    fullWidth: boolean;
+    iconOnly?: string | Node;
+    iconStart?: string | Node;
+    iconEnd?: string | Node;
+    type: 'button' | 'submit' | 'reset';
+    href?: string;
+    target?: string;
+    align: 'start' | 'center' | 'space-between' | 'end';
+    leSidePanelRequestToggle: EventEmitter<LeSidePanelRequestToggleDetail>;
+    private shortcutSpec?;
+    private expanded;
+    private buttonEl?;
+    private forwardedNodes?;
+    protected onShortcutChanged(): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    private syncShortcutListener;
+    private getResolvedPanelId;
+    private emitRequest;
+    private onDocumentKeyDown;
+    private onPanelStateChange;
+    private syncForwardedNodesIntoButton;
+    private syncAriaExpanded;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -10,11 +10,15 @@ import { LeMultiOptionSelectDetail, LeOption, LeOptionSelectDetail, LeOptionValu
 import { LeNavigationItemSelectDetail, LeNavigationItemToggleDetail } from "./components/le-navigation/le-navigation";
 import { LeKitMode } from "./global/app";
 import { PopupPosition, PopupResult, PopupType } from "./components/le-popup/le-popup";
+import { LeSidePanelNarrowBehavior, LeSidePanelSide } from "./components/le-side-panel/le-side-panel";
+import { LeSidePanelRequestToggleDetail, LeSidePanelToggleAction } from "./components/le-side-panel-toggle/le-side-panel-toggle";
 export { LeBarOverflowChangeDetail } from "./components/le-bar/le-bar";
 export { LeMultiOptionSelectDetail, LeOption, LeOptionSelectDetail, LeOptionValue } from "./types/options";
 export { LeNavigationItemSelectDetail, LeNavigationItemToggleDetail } from "./components/le-navigation/le-navigation";
 export { LeKitMode } from "./global/app";
 export { PopupPosition, PopupResult, PopupType } from "./components/le-popup/le-popup";
+export { LeSidePanelNarrowBehavior, LeSidePanelSide } from "./components/le-side-panel/le-side-panel";
+export { LeSidePanelRequestToggleDetail, LeSidePanelToggleAction } from "./components/le-side-panel-toggle/le-side-panel-toggle";
 export namespace Components {
     /**
      * A flexible bar component that handles overflow gracefully.
@@ -320,6 +324,65 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * A one-time code input component with individual frames for each character.
+     * Supports standard copy/paste and range selection behaviors.
+     * @cssprop --le-code-box-size - Size of each character box (default: 40px width, 48px height)
+     * @cssprop --le-input-bg - Input background color
+     * @cssprop --le-input-color - Input text color
+     * @cssprop --le-input-border - Input border style
+     * @cssprop --le-input-border-focus - Input border style when focused
+     * @cssprop --le-input-border-error - Input border style when invalid
+     * @cssprop --le-input-radius - Input border radius
+     */
+    interface LeCodeInput {
+        /**
+          * Description text displayed below the input in case there is a more complex markup, it can be provided via slot as well
+         */
+        "description"?: string;
+        /**
+          * Whether the input is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Internal validation state (can be set externally manually or via simple check)
+          * @default false
+         */
+        "error": boolean;
+        /**
+          * External ID for linking with external systems
+         */
+        "externalId": string;
+        /**
+          * Label for the input
+         */
+        "label": string;
+        /**
+          * Length of the code (number of characters)
+          * @default 6
+         */
+        "length": number;
+        /**
+          * The name of the input
+         */
+        "name": string;
+        /**
+          * Whether the input is read-only
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * The type of code (numeric or alphanumeric) This affects the keyboard layout on mobile devices.
+          * @default 'text'
+         */
+        "type": 'text' | 'number';
+        /**
+          * The value of the input
+          * @default ''
+         */
+        "value": string;
+    }
     /**
      * Animated show/hide wrapper.
      * Supports height collapse (auto->0) and/or fading.
@@ -1252,6 +1315,134 @@ export namespace Components {
          */
         "variant": 'default' | 'outlined' | 'solid';
     }
+    interface LeSidePanel {
+        /**
+          * When crossing to narrow mode, automatically hide the panel (open=false).
+          * @default true
+         */
+        "autoHideOnNarrow": boolean;
+        /**
+          * When crossing to wide mode, automatically show the panel (collapsed=false).
+          * @default true
+         */
+        "autoShowOnWide": boolean;
+        /**
+          * Width breakpoint (in px or a CSS var like `--le-breakpoint-md`) below which the panel enters "narrow" mode.
+         */
+        "collapseAt"?: string;
+        /**
+          * Panel collapsed state for wide mode (fully hidden).
+          * @default false
+         */
+        "collapsed": boolean;
+        /**
+          * Maximum allowed width when resizable.
+          * @default 420
+         */
+        "maxPanelWidth": number;
+        /**
+          * Minimum allowed width when resizable.
+          * @default 220
+         */
+        "minPanelWidth": number;
+        /**
+          * Behavior when in narrow mode.
+          * @default 'overlay'
+         */
+        "narrowBehavior": LeSidePanelNarrowBehavior;
+        /**
+          * Panel open state for narrow mode. - overlay: controls modal drawer visibility - push: controls whether panel is shown (non-modal)
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Optional id used to match toggle requests. If set, the panel only responds to toggle events with the same `panelId`.
+         */
+        "panelId"?: string;
+        /**
+          * Accessible label for the panel navigation region.
+          * @default 'Navigation'
+         */
+        "panelLabel": string;
+        /**
+          * Default panel width in pixels.
+          * @default 280
+         */
+        "panelWidth": number;
+        /**
+          * When set, panel width + collapsed state are persisted in localStorage.
+         */
+        "persistKey"?: string;
+        /**
+          * Allows users to resize the panel by dragging its edge.
+          * @default false
+         */
+        "resizable": boolean;
+        /**
+          * Show a close button inside the panel (primarily used in narrow overlay mode).
+          * @default true
+         */
+        "showCloseButton": boolean;
+        /**
+          * Which side the panel is attached to.
+          * @default 'start'
+         */
+        "side": LeSidePanelSide;
+    }
+    interface LeSidePanelToggle {
+        /**
+          * Action to emit. Default toggles the panel.
+          * @default 'toggle'
+         */
+        "action": LeSidePanelToggleAction;
+        /**
+          * @default 'center'
+         */
+        "align": 'start' | 'center' | 'space-between' | 'end';
+        /**
+          * @default 'primary'
+         */
+        "color": 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+        /**
+          * Disables the toggle.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * @default false
+         */
+        "fullWidth": boolean;
+        "href"?: string;
+        "iconEnd"?: string | Node;
+        "iconOnly"?: string | Node;
+        "iconStart"?: string | Node;
+        "mode": 'default' | 'admin';
+        /**
+          * Optional id used to target a specific panel.
+         */
+        "panelId"?: string;
+        /**
+          * @default false
+         */
+        "selected": boolean;
+        /**
+          * Optional keyboard shortcut like `Mod+B` or `Alt+N`.
+         */
+        "shortcut"?: string;
+        /**
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        "target"?: string;
+        /**
+          * @default 'button'
+         */
+        "type": 'button' | 'submit' | 'reset';
+        /**
+          * @default 'solid'
+         */
+        "variant": 'solid' | 'outlined' | 'clear' | 'system';
+    }
     /**
      * Slot placeholder component for admin/CMS mode.
      * This component renders a visual placeholder for slots when in admin mode,
@@ -1821,7 +2012,17 @@ export namespace Components {
           * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small
           * @default 'p'
          */
-        "variant": 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'quote' | 'label' | 'small';
+        "variant": | 'p'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'code'
+    | 'quote'
+    | 'label'
+    | 'small';
     }
     interface LeTurntable {
         /**
@@ -1846,6 +2047,10 @@ export interface LeCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLeCheckboxElement;
 }
+export interface LeCodeInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeCodeInputElement;
+}
 export interface LeComboboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLeComboboxElement;
@@ -1886,6 +2091,14 @@ export interface LeSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLeSelectElement;
 }
+export interface LeSidePanelCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeSidePanelElement;
+}
+export interface LeSidePanelToggleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeSidePanelToggleElement;
+}
 export interface LeSlotCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLeSlotElement;
@@ -2038,6 +2251,37 @@ declare global {
         prototype: HTMLLeCheckboxElement;
         new (): HTMLLeCheckboxElement;
     };
+    interface HTMLLeCodeInputElementEventMap {
+        "leChange": { value: string; name: string; externalId: string };
+        "leInput": { value: string; name: string; externalId: string };
+        "leFocus": void;
+        "leBlur": void;
+    }
+    /**
+     * A one-time code input component with individual frames for each character.
+     * Supports standard copy/paste and range selection behaviors.
+     * @cssprop --le-code-box-size - Size of each character box (default: 40px width, 48px height)
+     * @cssprop --le-input-bg - Input background color
+     * @cssprop --le-input-color - Input text color
+     * @cssprop --le-input-border - Input border style
+     * @cssprop --le-input-border-focus - Input border style when focused
+     * @cssprop --le-input-border-error - Input border style when invalid
+     * @cssprop --le-input-radius - Input border radius
+     */
+    interface HTMLLeCodeInputElement extends Components.LeCodeInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeCodeInputElementEventMap>(type: K, listener: (this: HTMLLeCodeInputElement, ev: LeCodeInputCustomEvent<HTMLLeCodeInputElementEventMap[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 HTMLLeCodeInputElementEventMap>(type: K, listener: (this: HTMLLeCodeInputElement, ev: LeCodeInputCustomEvent<HTMLLeCodeInputElementEventMap[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 HTMLLeCodeInputElement: {
+        prototype: HTMLLeCodeInputElement;
+        new (): HTMLLeCodeInputElement;
+    };
     /**
      * Animated show/hide wrapper.
      * Supports height collapse (auto->0) and/or fading.
@@ -2507,6 +2751,42 @@ declare global {
         prototype: HTMLLeSelectElement;
         new (): HTMLLeSelectElement;
     };
+    interface HTMLLeSidePanelElementEventMap {
+        "leSidePanelOpenChange": { open: boolean; panelId?: string };
+        "leSidePanelCollapsedChange": { collapsed: boolean; panelId?: string };
+        "leSidePanelWidthChange": { width: number; panelId?: string };
+    }
+    interface HTMLLeSidePanelElement extends Components.LeSidePanel, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeSidePanelElementEventMap>(type: K, listener: (this: HTMLLeSidePanelElement, ev: LeSidePanelCustomEvent<HTMLLeSidePanelElementEventMap[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 HTMLLeSidePanelElementEventMap>(type: K, listener: (this: HTMLLeSidePanelElement, ev: LeSidePanelCustomEvent<HTMLLeSidePanelElementEventMap[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 HTMLLeSidePanelElement: {
+        prototype: HTMLLeSidePanelElement;
+        new (): HTMLLeSidePanelElement;
+    };
+    interface HTMLLeSidePanelToggleElementEventMap {
+        "leSidePanelRequestToggle": LeSidePanelRequestToggleDetail;
+    }
+    interface HTMLLeSidePanelToggleElement extends Components.LeSidePanelToggle, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeSidePanelToggleElementEventMap>(type: K, listener: (this: HTMLLeSidePanelToggleElement, ev: LeSidePanelToggleCustomEvent<HTMLLeSidePanelToggleElementEventMap[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 HTMLLeSidePanelToggleElementEventMap>(type: K, listener: (this: HTMLLeSidePanelToggleElement, ev: LeSidePanelToggleCustomEvent<HTMLLeSidePanelToggleElementEventMap[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 HTMLLeSidePanelToggleElement: {
+        prototype: HTMLLeSidePanelToggleElement;
+        new (): HTMLLeSidePanelToggleElement;
+    };
     interface HTMLLeSlotElementEventMap {
         "leSlotChange": { name: string; value: string; isValid: boolean };
     }
@@ -2776,6 +3056,7 @@ declare global {
         "le-button": HTMLLeButtonElement;
         "le-card": HTMLLeCardElement;
         "le-checkbox": HTMLLeCheckboxElement;
+        "le-code-input": HTMLLeCodeInputElement;
         "le-collapse": HTMLLeCollapseElement;
         "le-combobox": HTMLLeComboboxElement;
         "le-component": HTMLLeComponentElement;
@@ -2793,6 +3074,8 @@ declare global {
         "le-scroll-progress": HTMLLeScrollProgressElement;
         "le-segmented-control": HTMLLeSegmentedControlElement;
         "le-select": HTMLLeSelectElement;
+        "le-side-panel": HTMLLeSidePanelElement;
+        "le-side-panel-toggle": HTMLLeSidePanelToggleElement;
         "le-slot": HTMLLeSlotElement;
         "le-stack": HTMLLeStackElement;
         "le-string-input": HTMLLeStringInputElement;
@@ -3118,6 +3401,81 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * A one-time code input component with individual frames for each character.
+     * Supports standard copy/paste and range selection behaviors.
+     * @cssprop --le-code-box-size - Size of each character box (default: 40px width, 48px height)
+     * @cssprop --le-input-bg - Input background color
+     * @cssprop --le-input-color - Input text color
+     * @cssprop --le-input-border - Input border style
+     * @cssprop --le-input-border-focus - Input border style when focused
+     * @cssprop --le-input-border-error - Input border style when invalid
+     * @cssprop --le-input-radius - Input border radius
+     */
+    interface LeCodeInput {
+        /**
+          * Description text displayed below the input in case there is a more complex markup, it can be provided via slot as well
+         */
+        "description"?: string;
+        /**
+          * Whether the input is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Internal validation state (can be set externally manually or via simple check)
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * External ID for linking with external systems
+         */
+        "externalId"?: string;
+        /**
+          * Label for the input
+         */
+        "label"?: string;
+        /**
+          * Length of the code (number of characters)
+          * @default 6
+         */
+        "length"?: number;
+        /**
+          * The name of the input
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input is blurred
+         */
+        "onLeBlur"?: (event: LeCodeInputCustomEvent<void>) => void;
+        /**
+          * Emitted when the value changes (on blur or Enter)
+         */
+        "onLeChange"?: (event: LeCodeInputCustomEvent<{ value: string; name: string; externalId: string }>) => void;
+        /**
+          * Emitted when the input is focused
+         */
+        "onLeFocus"?: (event: LeCodeInputCustomEvent<void>) => void;
+        /**
+          * Emitted when the input value changes (on keystroke)
+         */
+        "onLeInput"?: (event: LeCodeInputCustomEvent<{ value: string; name: string; externalId: string }>) => void;
+        /**
+          * Whether the input is read-only
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * The type of code (numeric or alphanumeric) This affects the keyboard layout on mobile devices.
+          * @default 'text'
+         */
+        "type"?: 'text' | 'number';
+        /**
+          * The value of the input
+          * @default ''
+         */
+        "value"?: string;
+    }
     /**
      * Animated show/hide wrapper.
      * Supports height collapse (auto->0) and/or fading.
@@ -4095,6 +4453,138 @@ declare namespace LocalJSX {
          */
         "variant"?: 'default' | 'outlined' | 'solid';
     }
+    interface LeSidePanel {
+        /**
+          * When crossing to narrow mode, automatically hide the panel (open=false).
+          * @default true
+         */
+        "autoHideOnNarrow"?: boolean;
+        /**
+          * When crossing to wide mode, automatically show the panel (collapsed=false).
+          * @default true
+         */
+        "autoShowOnWide"?: boolean;
+        /**
+          * Width breakpoint (in px or a CSS var like `--le-breakpoint-md`) below which the panel enters "narrow" mode.
+         */
+        "collapseAt"?: string;
+        /**
+          * Panel collapsed state for wide mode (fully hidden).
+          * @default false
+         */
+        "collapsed"?: boolean;
+        /**
+          * Maximum allowed width when resizable.
+          * @default 420
+         */
+        "maxPanelWidth"?: number;
+        /**
+          * Minimum allowed width when resizable.
+          * @default 220
+         */
+        "minPanelWidth"?: number;
+        /**
+          * Behavior when in narrow mode.
+          * @default 'overlay'
+         */
+        "narrowBehavior"?: LeSidePanelNarrowBehavior;
+        "onLeSidePanelCollapsedChange"?: (event: LeSidePanelCustomEvent<{ collapsed: boolean; panelId?: string }>) => void;
+        "onLeSidePanelOpenChange"?: (event: LeSidePanelCustomEvent<{ open: boolean; panelId?: string }>) => void;
+        "onLeSidePanelWidthChange"?: (event: LeSidePanelCustomEvent<{ width: number; panelId?: string }>) => void;
+        /**
+          * Panel open state for narrow mode. - overlay: controls modal drawer visibility - push: controls whether panel is shown (non-modal)
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Optional id used to match toggle requests. If set, the panel only responds to toggle events with the same `panelId`.
+         */
+        "panelId"?: string;
+        /**
+          * Accessible label for the panel navigation region.
+          * @default 'Navigation'
+         */
+        "panelLabel"?: string;
+        /**
+          * Default panel width in pixels.
+          * @default 280
+         */
+        "panelWidth"?: number;
+        /**
+          * When set, panel width + collapsed state are persisted in localStorage.
+         */
+        "persistKey"?: string;
+        /**
+          * Allows users to resize the panel by dragging its edge.
+          * @default false
+         */
+        "resizable"?: boolean;
+        /**
+          * Show a close button inside the panel (primarily used in narrow overlay mode).
+          * @default true
+         */
+        "showCloseButton"?: boolean;
+        /**
+          * Which side the panel is attached to.
+          * @default 'start'
+         */
+        "side"?: LeSidePanelSide;
+    }
+    interface LeSidePanelToggle {
+        /**
+          * Action to emit. Default toggles the panel.
+          * @default 'toggle'
+         */
+        "action"?: LeSidePanelToggleAction;
+        /**
+          * @default 'center'
+         */
+        "align"?: 'start' | 'center' | 'space-between' | 'end';
+        /**
+          * @default 'primary'
+         */
+        "color"?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+        /**
+          * Disables the toggle.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        "href"?: string;
+        "iconEnd"?: string | Node;
+        "iconOnly"?: string | Node;
+        "iconStart"?: string | Node;
+        "mode"?: 'default' | 'admin';
+        "onLeSidePanelRequestToggle"?: (event: LeSidePanelToggleCustomEvent<LeSidePanelRequestToggleDetail>) => void;
+        /**
+          * Optional id used to target a specific panel.
+         */
+        "panelId"?: string;
+        /**
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * Optional keyboard shortcut like `Mod+B` or `Alt+N`.
+         */
+        "shortcut"?: string;
+        /**
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        "target"?: string;
+        /**
+          * @default 'button'
+         */
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * @default 'solid'
+         */
+        "variant"?: 'solid' | 'outlined' | 'clear' | 'system';
+    }
     /**
      * Slot placeholder component for admin/CMS mode.
      * This component renders a visual placeholder for slots when in admin mode,
@@ -4684,7 +5174,17 @@ declare namespace LocalJSX {
           * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small
           * @default 'p'
          */
-        "variant"?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'quote' | 'label' | 'small';
+        "variant"?: | 'p'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'code'
+    | 'quote'
+    | 'label'
+    | 'small';
     }
     interface LeTurntable {
         /**
@@ -4702,6 +5202,7 @@ declare namespace LocalJSX {
         "le-button": LeButton;
         "le-card": LeCard;
         "le-checkbox": LeCheckbox;
+        "le-code-input": LeCodeInput;
         "le-collapse": LeCollapse;
         "le-combobox": LeCombobox;
         "le-component": LeComponent;
@@ -4719,6 +5220,8 @@ declare namespace LocalJSX {
         "le-scroll-progress": LeScrollProgress;
         "le-segmented-control": LeSegmentedControl;
         "le-select": LeSelect;
+        "le-side-panel": LeSidePanel;
+        "le-side-panel-toggle": LeSidePanelToggle;
         "le-slot": LeSlot;
         "le-stack": LeStack;
         "le-string-input": LeStringInput;
@@ -4804,6 +5307,18 @@ declare module "@stencil/core" {
              * @cssprop --le-checkbox-desc-color - Color of the description text
              */
             "le-checkbox": LocalJSX.LeCheckbox & JSXBase.HTMLAttributes<HTMLLeCheckboxElement>;
+            /**
+             * A one-time code input component with individual frames for each character.
+             * Supports standard copy/paste and range selection behaviors.
+             * @cssprop --le-code-box-size - Size of each character box (default: 40px width, 48px height)
+             * @cssprop --le-input-bg - Input background color
+             * @cssprop --le-input-color - Input text color
+             * @cssprop --le-input-border - Input border style
+             * @cssprop --le-input-border-focus - Input border style when focused
+             * @cssprop --le-input-border-error - Input border style when invalid
+             * @cssprop --le-input-radius - Input border radius
+             */
+            "le-code-input": LocalJSX.LeCodeInput & JSXBase.HTMLAttributes<HTMLLeCodeInputElement>;
             /**
              * Animated show/hide wrapper.
              * Supports height collapse (auto->0) and/or fading.
@@ -5056,6 +5571,8 @@ declare module "@stencil/core" {
              * ```
              */
             "le-select": LocalJSX.LeSelect & JSXBase.HTMLAttributes<HTMLLeSelectElement>;
+            "le-side-panel": LocalJSX.LeSidePanel & JSXBase.HTMLAttributes<HTMLLeSidePanelElement>;
+            "le-side-panel-toggle": LocalJSX.LeSidePanelToggle & JSXBase.HTMLAttributes<HTMLLeSidePanelToggleElement>;
             /**
              * Slot placeholder component for admin/CMS mode.
              * This component renders a visual placeholder for slots when in admin mode,