le-kit 0.1.14 → 0.1.16

package/dist/types/components.d.ts

@@ -5,7 +5,11 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { LeMultiOptionSelectDetail, LeOption, LeOptionSelectDetail, LeOptionValue } from "./types/options";
+import { LeKitMode } from "./global/app";
 import { PopupPosition, PopupResult, PopupType } from "./components/le-popup/le-popup";
+export { LeMultiOptionSelectDetail, LeOption, LeOptionSelectDetail, LeOptionValue } from "./types/options";
+export { LeKitMode } from "./global/app";
 export { PopupPosition, PopupResult, PopupType } from "./components/le-popup/le-popup";
 export namespace Components {
     /**
@@ -125,10 +129,18 @@ export namespace Components {
      * @cssprop --le-button-padding-y - Button vertical padding
      * @csspart button - The native button element
      * @csspart content - The button content wrapper
+     * @csspart icon-start - The start icon slot
+     * @csspart icon-end - The end icon slot
      * @cmsEditable true
      * @cmsCategory Actions
      */
     interface LeButton {
+        /**
+          * Alignment of the button label without the end icon
+          * @allowedValues start | center | space-between | end
+          * @default 'center'
+         */
+        "align": 'start' | 'center' | 'space-between' | 'end';
         /**
           * Button color theme (uses theme semantic colors)
           * @allowedValues primary | secondary | success | warning | danger | info
@@ -150,10 +162,17 @@ export namespace Components {
          */
         "href"?: string;
         /**
-          * Whether the button displays only an icon (square aspect ratio)
-          * @default false
+          * End icon image or emoji
+         */
+        "iconEnd"?: string | Node;
+        /**
+          * Icon only button image or emoji if this prop is set, the button will render only the icon slot
+         */
+        "iconOnly"?: string | Node;
+        /**
+          * Start icon image or emoji
          */
-        "iconOnly": boolean;
+        "iconStart"?: string | Node;
         /**
           * Mode of the popover should be 'default' for internal use
          */
@@ -246,6 +265,132 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * Animated show/hide wrapper.
+     * Supports height collapse (auto->0) and/or fading.
+     * Can optionally listen to the nearest `le-header` shrink events.
+     * @cssprop --le-collapse-duration - Transition duration
+     * @csspart region - Collapsible region
+     * @csspart content - Inner content
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeCollapse {
+        /**
+          * If true, collapse/expand based on the nearest header shrink event.
+          * @default false
+         */
+        "collapseOnHeaderShrink": boolean;
+        /**
+          * Stop fading the content when collapsing/expanding.
+          * @default false
+         */
+        "noFading": boolean;
+        /**
+          * Whether the content should be shown.
+          * @default true
+         */
+        "open": boolean;
+        /**
+          * Whether the content should scroll down from the top when open.
+          * @default false
+         */
+        "scrollDown": boolean;
+    }
+    /**
+     * A combobox component with searchable dropdown.
+     * Combines a text input with a dropdown list, allowing users to
+     * filter options by typing or select from the list.
+     * @cmsEditable true
+     * @cmsCategory Form
+     * @example Basic combobox
+     * ```html
+     * <le-combobox
+     * placeholder="Search..."
+     * options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
+     * ></le-combobox>
+     * ```
+     * @example Allow custom values
+     * ```html
+     * <le-combobox
+     * placeholder="Type or select..."
+     * allow-custom
+     * options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
+     * ></le-combobox>
+     * ```
+     */
+    interface LeCombobox {
+        /**
+          * Whether to allow custom values not in the options list.
+          * @default false
+         */
+        "allowCustom": boolean;
+        /**
+          * Whether the combobox is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Text to show when no options match the search.
+          * @default 'No results found'
+         */
+        "emptyText": string;
+        /**
+          * Focuses the input element.
+         */
+        "focusInput": () => Promise<void>;
+        /**
+          * Whether the multiselect should take full width of its container.
+          * @default false
+         */
+        "fullWidth": boolean;
+        /**
+          * Closes the dropdown.
+         */
+        "hideDropdown": () => Promise<void>;
+        /**
+          * Minimum characters before showing filtered results.
+          * @default 0
+         */
+        "minSearchLength": number;
+        /**
+          * Name attribute for form submission.
+         */
+        "name"?: string;
+        /**
+          * Whether the dropdown is currently open.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * The options to display in the dropdown.
+          * @default []
+         */
+        "options": LeOption[] | string;
+        /**
+          * Placeholder text for the input.
+          * @default 'Type to search...'
+         */
+        "placeholder": string;
+        /**
+          * Whether selection is required.
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Opens the dropdown.
+         */
+        "showDropdown": () => Promise<void>;
+        /**
+          * Size variant of the combobox.
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * The currently selected value.
+         */
+        "value"?: LeOptionValue;
+    }
     /**
      * Component wrapper for admin mode editing.
      * This component is used internally by other components to provide admin-mode
@@ -285,6 +430,285 @@ export namespace Components {
          */
         "hostStyle"?: { [key: string]: string };
     }
+    /**
+     * Shows a "smart" header title based on what has scrolled out of view.
+     * When `selector` matches multiple elements, the title becomes the last element
+     * (top-to-bottom) that has fully scrolled out above the viewport.
+     * @csspart title - The rendered title
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeCurrentHeading {
+        /**
+          * CSS selector for page title/headings to watch (e.g. `.page-title`, `main h2`).
+          * @default ''
+         */
+        "selector": string;
+    }
+    /**
+     * Internal dropdown base component that provides shared functionality
+     * for select, combobox, and multiselect components.
+     * Wraps le-popover for positioning and provides:
+     * - Option list rendering with groups
+     * - Keyboard navigation (↑↓, Enter, Escape, Home/End)
+     * - Option filtering support
+     * - Single and multi-select modes
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface LeDropdownBase {
+        /**
+          * Whether to close the dropdown when clicking outside. (used to support combobox with input focus)
+          * @default true
+         */
+        "closeOnClickOutside": boolean;
+        /**
+          * Whether the dropdown is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Placeholder text when no options match filter.
+          * @default 'No options'
+         */
+        "emptyText": string;
+        /**
+          * Filter function for options. Return true to include the option.
+         */
+        "filterFn"?: (option: LeOption, query: string) => boolean;
+        /**
+          * Current filter query string.
+          * @default ''
+         */
+        "filterQuery": string;
+        /**
+          * Sets the dropdown to full width of the trigger.
+          * @default false
+         */
+        "fullWidth": boolean;
+        /**
+          * Closes the dropdown.
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Maximum height of the dropdown list.
+          * @default '300px'
+         */
+        "maxHeight": string;
+        /**
+          * Whether multiple selection is allowed.
+          * @default false
+         */
+        "multiple": boolean;
+        /**
+          * Whether the dropdown is open.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * The options to display in the dropdown.
+          * @default []
+         */
+        "options": LeOption[];
+        /**
+          * Opens the dropdown.
+         */
+        "show": () => Promise<void>;
+        /**
+          * Whether to show checkboxes for multiselect mode.
+          * @default true
+         */
+        "showCheckboxes": boolean;
+        /**
+          * Toggles the dropdown.
+         */
+        "toggle": () => Promise<void>;
+        /**
+          * Current value(s) - single value or array for multiselect.
+         */
+        "value"?: LeOptionValue | LeOptionValue[];
+        /**
+          * Width of the dropdown. If not set, matches trigger width.
+         */
+        "width"?: string;
+    }
+    /**
+     * A functional page header with scroll-aware behaviors.
+     * Features:
+     * - Static (default), sticky, or fixed positioning
+     * - Optional shrink-on-scroll behavior via `shrink-offset`
+     * - Optional reveal-on-scroll-up via `reveal-on-scroll` (sticky only)
+     * Slots:
+     * - `start`: left side (logo/back button)
+     * - `title`: centered/primary title content
+     * - `end`: right side actions
+     * - default: extra content row (e.g., tabs/search) rendered below main row
+     * @cssprop --le-header-bg - Background (color/gradient)
+     * @cssprop --le-header-color - Text color
+     * @cssprop --le-header-border - Border (e.g. 1px solid ...)
+     * @cssprop --le-header-shadow - Shadow/elevation
+     * @cssprop --le-header-max-width - Inner content max width
+     * @cssprop --le-header-padding-x - Horizontal padding
+     * @cssprop --le-header-padding-y - Vertical padding
+     * @cssprop --le-header-gap - Gap between zones
+     * @cssprop --le-header-height - Base height (main row)
+     * @cssprop --le-header-height-condensed - Condensed height when shrunk
+     * @cssprop --le-header-transition - Transition timing
+     * @cssprop --le-header-z - Z-index (fixed mode)
+     * @csspart header - The header container
+     * @csspart inner - Inner max-width container
+     * @csspart row - Main row
+     * @csspart start - Start zone
+     * @csspart title - Title zone
+     * @csspart end - End zone
+     * @csspart secondary - Secondary row
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeHeader {
+        /**
+          * If true, expand the header when hovered
+          * @default false
+         */
+        "expandOnHover": boolean;
+        /**
+          * Fixed positioning (out-of-flow). Takes precedence over `sticky`/`static`.
+          * @default false
+         */
+        "fixed": boolean;
+        /**
+          * Force static positioning (default). Ignored if `sticky` or `fixed` are true.
+          * @default false
+         */
+        "isStatic": boolean;
+        /**
+          * Sticky-only reveal behavior (hide on scroll down, show on scroll up). - missing/false: disabled - true/empty attribute: enabled with default threshold (16) - number (as string): enabled and used as threshold
+         */
+        "revealOnScroll"?: string;
+        /**
+          * Shrink trigger. - missing/0: disabled - number (px): shrink when scrollY >= that value (but never before header height) - css var name (e.g. --foo): shrink when scrollY >= resolved var value - selector (e.g. .page-title): shrink when that element scrolls out of view above the viewport
+         */
+        "shrinkOffset"?: string;
+        /**
+          * Sticky positioning (in-flow). Ignored if `fixed` is true.
+          * @default false
+         */
+        "sticky": boolean;
+    }
+    /**
+     * Placeholder for `le-header`.
+     * Reserves space using the global CSS variable `--le-header-height`.
+     * The header component updates that variable when it renders.
+     * @cssprop --le-header-height - Published header height (px)
+     * @cmsInternal true
+     */
+    interface LeHeaderPlaceholder {
+    }
+    /**
+     * A multiselect component for selecting multiple options.
+     * Displays selected items as tags with optional search filtering.
+     * @cmsEditable true
+     * @cmsCategory Form
+     * @example Basic multiselect
+     * ```html
+     * <le-multiselect
+     * placeholder="Select options..."
+     * options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
+     * ></le-multiselect>
+     * ```
+     * @example With max selections
+     * ```html
+     * <le-multiselect
+     * max-selections="3"
+     * options='[{"label": "Option 1"}, {"label": "Option 2"}, {"label": "Option 3"}, {"label": "Option 4"}]'
+     * ></le-multiselect>
+     * ```
+     * @example With search
+     * ```html
+     * <le-multiselect
+     * searchable
+     * placeholder="Search and select..."
+     * options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
+     * ></le-multiselect>
+     * ```
+     */
+    interface LeMultiselect {
+        /**
+          * Clears all selections.
+         */
+        "clearSelection": () => Promise<void>;
+        /**
+          * Whether the multiselect is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Text to show when no options match the search.
+          * @default 'No results found'
+         */
+        "emptyText": string;
+        /**
+          * Whether the multiselect should take full width of its container.
+          * @default false
+         */
+        "fullWidth": boolean;
+        /**
+          * Closes the dropdown.
+         */
+        "hideDropdown": () => Promise<void>;
+        /**
+          * Maximum number of selections allowed.
+         */
+        "maxSelections"?: number;
+        /**
+          * Name attribute for form submission.
+         */
+        "name"?: string;
+        /**
+          * Whether the dropdown is currently open.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * The options to display in the dropdown.
+          * @default []
+         */
+        "options": LeOption[] | string;
+        /**
+          * Placeholder text when no options are selected.
+          * @default 'Select options...'
+         */
+        "placeholder": string;
+        /**
+          * Whether selection is required.
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Whether the input is searchable.
+          * @default false
+         */
+        "searchable": boolean;
+        /**
+          * Opens the dropdown.
+         */
+        "showDropdown": () => Promise<void>;
+        /**
+          * Whether to show a "Select All" option. Also accepts a string or array of strings to customize the label(s).
+          * @default false
+         */
+        "showSelectAll": boolean | string | string[];
+        /**
+          * Size variant of the multiselect.
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * The currently selected values.
+          * @default []
+         */
+        "value": LeOptionValue[];
+    }
     /**
      * A number input component with validation, keyboard controls, and custom spinners.
      * @cssprop --le-input-bg - Input background color
@@ -358,6 +782,8 @@ export namespace Components {
      * A popover component for displaying floating content.
      * Uses the native HTML Popover API for proper layering with dialogs
      * and other top-layer elements. Falls back gracefully in older browsers.
+     * @csspart trigger - The popover trigger element
+     * @csspart content - The popover content wrapper
      * @cmsInternal true
      * @cmsCategory System
      */
@@ -426,6 +852,15 @@ export namespace Components {
           * Toggles the popover
          */
         "toggle": () => Promise<void>;
+        /**
+          * Should the popover's trigger take full width of its container
+          * @default false
+         */
+        "triggerFullWidth": boolean;
+        /**
+          * Method to update the popover position from a parent component
+         */
+        "updatePosition": () => Promise<void>;
         /**
           * Fixed width for the popover (e.g., '300px', '20rem')
          */
@@ -434,7 +869,7 @@ export namespace Components {
     /**
      * A flexible popup/dialog component for alerts, confirms, prompts, and custom content.
      * Uses the native HTML <dialog> element for proper modal behavior, accessibility,
-     * and focus management. Can be used declaratively in HTML or programmatically 
+     * and focus management. Can be used declaratively in HTML or programmatically
      * via leAlert(), leConfirm(), lePrompt().
      * @cmsInternal true
      * @cmsCategory System
@@ -473,6 +908,11 @@ export namespace Components {
           * @default true
          */
         "modal": boolean;
+        /**
+          * The mode of the Le Kit (e.g., 'default' or 'admin')
+          * @default 'default'
+         */
+        "mode": LeKitMode;
         /**
           * Whether the popup is currently visible
           * @default false
@@ -514,40 +954,207 @@ export namespace Components {
         "value": number;
     }
     /**
-     * Slot placeholder component for admin/CMS mode.
-     * This component renders a visual placeholder for slots when in admin mode,
-     * allowing CMS systems to show available drop zones for content or inline editing.
-     * In non-admin mode, this component renders nothing and acts as a passthrough.
-     * @cmsInternal true
-     * @cmsCategory System
+     * Displays scroll progress as a simple bar.
+     * If `track-scroll-progress` is present without a value, tracks the full document.
+     * If it is a selector string, tracks progress within the matched element.
+     * @cssprop --le-scroll-progress-height - Bar height
+     * @cssprop --le-scroll-progress-bg - Track background
+     * @cssprop --le-scroll-progress-fill - Fill color
+     * @cssprop --le-scroll-progress-sticky-top - If sticky, stop position to parent top
+     * @cssprop --le-scroll-progress-fixed-top - If fixed, distance from window top
+     * @cssprop --le-scroll-progress-fixed-left - If fixed, distance from window left
+     * @cssprop --le-scroll-progress-fixed-right - If fixed, distance from window right
+     * @cssprop --le-scroll-progress-z - Z-index of the progress bar (1001 by default, above header)
+     * @csspart track - Outer track
+     * @csspart fill - Inner fill
+     * @cmsEditable true
+     * @cmsCategory Layout
      */
-    interface LeSlot {
+    interface LeScrollProgress {
         /**
-          * Comma-separated list of allowed component tags for this slot. Used by CMS to filter available components.
-          * @example "le-card,le-button,le-text"
+          * Boolean or selector string.
          */
-        "allowedComponents"?: string;
+        "trackScrollProgress"?: string;
+    }
+    /**
+     * A segmented control component (iOS-style toggle buttons).
+     * Perfect for toggling between a small set of related options.
+     * @cssprop --le-segmented-bg - Background color of the control
+     * @cssprop --le-segmented-padding - Padding around segments
+     * @cssprop --le-segmented-gap - Gap between segments
+     * @cssprop --le-segmented-radius - Border radius of the control
+     * @csspart container - The main container
+     * @csspart segment - Individual segment buttons
+     * @csspart segment-active - The currently active segment
+     * @cmsEditable true
+     * @cmsCategory Form
+     */
+    interface LeSegmentedControl {
         /**
-          * Description of what content this slot accepts. Shown in admin mode to guide content editors.
+          * Whether the control is disabled.
+          * @default false
          */
-        "description"?: string;
+        "disabled": boolean;
         /**
-          * Label to display in admin mode. If not provided, the slot name will be used.
+          * Whether the control should take full width.
+          * @default false
          */
-        "label"?: string;
+        "fullWidth": boolean;
         /**
-          * Whether multiple components can be dropped in this slot.
-          * @default true
+          * Array of options for the segmented control.
+          * @default []
          */
-        "multiple": boolean;
+        "options": LeOption[];
         /**
-          * The name of the slot this placeholder represents. Should match the slot name in the parent component.
-          * @default ''
+          * Scroll behavior for overflowing tabs.
+          * @allowedValues auto | hidden | visible | scroll
+          * @default 'auto'
          */
-        "name": string;
+        "overflow": 'auto' | 'hidden' | 'visible' | 'scroll';
         /**
-          * Placeholder text for text/textarea inputs in admin mode.
-         */
+          * Size of the control.
+          * @allowedValues small | medium | large
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * The value of the currently selected option.
+         */
+        "value"?: LeOptionValue;
+    }
+    /**
+     * A select dropdown component for single selection.
+     * @cmsEditable true
+     * @cmsCategory Form
+     * @example Basic select
+     * ```html
+     * <le-select
+     * placeholder="Choose an option"
+     * options='[{"label": "Option 1", "value": "1"}, {"label": "Option 2", "value": "2"}]'
+     * ></le-select>
+     * ```
+     * @example With icons
+     * ```html
+     * <le-select
+     * options='[
+     * {"label": "Apple", "value": "apple", "iconStart": "🍎"},
+     * {"label": "Banana", "value": "banana", "iconStart": "🍌"}
+     * ]'
+     * ></le-select>
+     * ```
+     * @example Grouped options
+     * ```html
+     * <le-select
+     * options='[
+     * {"label": "Apple", "value": "apple", "group": "Fruits"},
+     * {"label": "Carrot", "value": "carrot", "group": "Vegetables"}
+     * ]'
+     * ></le-select>
+     * ```
+     */
+    interface LeSelect {
+        /**
+          * Whether the select is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Text to show when no options match the search.
+          * @default 'No results found'
+         */
+        "emptyText": string;
+        /**
+          * Whether the select should take full width of its container.
+          * @default false
+         */
+        "fullWidth": boolean;
+        /**
+          * Closes the dropdown.
+         */
+        "hideDropdown": () => Promise<void>;
+        /**
+          * Name attribute for form submission.
+         */
+        "name"?: string;
+        /**
+          * Whether the dropdown is currently open.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * The options to display in the dropdown.
+          * @default []
+         */
+        "options": LeOption[] | string;
+        /**
+          * Placeholder text when no option is selected.
+          * @default 'Select an option'
+         */
+        "placeholder": string;
+        /**
+          * Whether selection is required.
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Whether the input is searchable.
+          * @default false
+         */
+        "searchable": boolean;
+        /**
+          * Opens the dropdown.
+         */
+        "showDropdown": () => Promise<void>;
+        /**
+          * Size variant of the select.
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * The currently selected value.
+         */
+        "value"?: LeOptionValue;
+        /**
+          * Visual variant of the select.
+          * @default 'default'
+         */
+        "variant": 'default' | 'outlined' | 'solid';
+    }
+    /**
+     * Slot placeholder component for admin/CMS mode.
+     * This component renders a visual placeholder for slots when in admin mode,
+     * allowing CMS systems to show available drop zones for content or inline editing.
+     * In non-admin mode, this component renders nothing and acts as a passthrough.
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface LeSlot {
+        /**
+          * Comma-separated list of allowed component tags for this slot. Used by CMS to filter available components.
+          * @example "le-card,le-button,le-text"
+         */
+        "allowedComponents"?: string;
+        /**
+          * Description of what content this slot accepts. Shown in admin mode to guide content editors.
+         */
+        "description"?: string;
+        /**
+          * Label to display in admin mode. If not provided, the slot name will be used.
+         */
+        "label"?: string;
+        /**
+          * Whether multiple components can be dropped in this slot.
+          * @default true
+         */
+        "multiple": boolean;
+        /**
+          * The name of the slot this placeholder represents. Should match the slot name in the parent component.
+          * @default ''
+         */
+        "name": string;
+        /**
+          * Placeholder text for text/textarea inputs in admin mode.
+         */
         "placeholder"?: string;
         /**
           * Whether this slot is required to have content.
@@ -658,6 +1265,11 @@ export namespace Components {
           * External ID for linking with external systems
          */
         "externalId": string;
+        /**
+          * Hide description slot
+          * @default false
+         */
+        "hideDescription": boolean;
         /**
           * Icon for the end icon
          */
@@ -666,6 +1278,10 @@ export namespace Components {
           * Icon for the start icon
          */
         "iconStart": string;
+        /**
+          * Pass the ref of the input element to the parent component
+         */
+        "inputRef"?: (el: HTMLInputElement) => void;
         /**
           * Label for the input
          */
@@ -698,128 +1314,508 @@ export namespace Components {
         "value": string;
     }
     /**
-     * A text component with rich text editing capabilities in admin mode.
-     * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)
-     * and provides a Notion-like rich text editor in admin mode with formatting
-     * toolbar for bold, italic, links, and paragraph type selection.
-     * @cssprop --le-text-color - Text color
-     * @cssprop --le-text-font-size - Font size
-     * @cssprop --le-text-line-height - Line height
-     * @cssprop --le-text-font-weight - Font weight
-     * @csspart text - The text container element
+     * A flexible tab component with multiple variants and states.
+     * @cssprop --le-tab-bg - Tab background color
+     * @cssprop --le-tab-color - Tab text color
+     * @cssprop --le-tab-border-radius - Tab border radius
+     * @cssprop --le-tab-padding-x - Tab horizontal padding
+     * @cssprop --le-tab-padding-y - Tab vertical padding
+     * @csspart button - The native button element
+     * @csspart content - The tab content wrapper
+     * @csspart icon-start - The start icon slot
+     * @csspart icon-end - The end icon slot
      * @cmsEditable true
-     * @cmsCategory Content
+     * @cmsCategory Actions
      */
-    interface LeText {
+    interface LeTab {
         /**
-          * Text alignment
-          * @allowedValues left | center | right | justify
-          * @default 'left'
+          * Alignment of the tab label without the end icon
+          * @allowedValues start | center | space-between | end
+          * @default 'center'
          */
-        "align": 'left' | 'center' | 'right' | 'justify';
+        "align": 'start' | 'center' | 'space-between' | 'end';
         /**
-          * Text color (CSS value or theme token)
+          * Whether the tab is disabled
+          * @default false
          */
-        "color"?: string;
+        "disabled": boolean;
         /**
-          * Maximum number of lines before truncating (requires truncate=true)
+          * Whether the tab can get focus needed for accessibility when used in custom tab implementations
+          * @default true
          */
-        "maxLines"?: number;
+        "focusable": boolean;
         /**
-          * Whether the text should truncate with ellipsis
+          * Whether the tab takes full width of its container
           * @default false
          */
-        "truncate": boolean;
+        "fullWidth": boolean;
         /**
-          * The semantic variant/type of text element
-          * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small
-          * @default 'p'
+          * Get tab configuration for parent component
          */
-        "variant": 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'quote' | 'label' | 'small';
-    }
-    interface LeTurntable {
+        "getTabConfig": () => Promise<{ label: string; value: string; icon: string | Node; iconStart?: string | Node; iconEnd?: string | Node; disabled: boolean; }>;
         /**
-          * @default 'center'
+          * Optional href to make the tab act as a link
          */
-        "center": string;
+        "href"?: string;
         /**
-          * @default 0
+          * Icon only tab image or emoji if this prop is set, the tab will render only the icon slot
          */
-        "value": number;
+        "icon"?: string | Node;
+        /**
+          * End icon image or emoji
+         */
+        "iconEnd"?: string | Node;
+        /**
+          * Start icon image or emoji
+         */
+        "iconStart"?: string | Node;
+        /**
+          * Label if it is not provided via slot
+         */
+        "label"?: string;
+        /**
+          * Mode of the popover should be 'default' for internal use
+         */
+        "mode": 'default' | 'admin';
+        /**
+          * Position of the tabs when used within a le-tabs component
+          * @allowedValues top | bottom | start | end
+          * @default 'top'
+         */
+        "position": 'top' | 'bottom' | 'start' | 'end';
+        /**
+          * Whether the tab is in a selected/active state
+          * @default false
+         */
+        "selected": boolean;
+        /**
+          * Whether to show the label when in icon-only mode
+          * @default false
+         */
+        "showLabel": boolean;
+        /**
+          * Tab size
+          * @allowedValues small | medium | large
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Link target when href is set
+         */
+        "target"?: string;
+        /**
+          * Value of the tab, defaults to label if not provided
+         */
+        "value"?: string;
+        /**
+          * Tab variant style
+          * @allowedValues solid | underlined | clear | enclosed | icon-only
+          * @default 'underlined'
+         */
+        "variant": 'underlined' | 'solid' | 'pills' | 'enclosed' | 'icon-only';
     }
-}
-export interface LeButtonCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLLeButtonElement;
-}
-export interface LeCheckboxCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLLeCheckboxElement;
-}
-export interface LeNumberInputCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLLeNumberInputElement;
-}
-export interface LePopoverCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLLePopoverElement;
-}
-export interface LePopupCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLLePopupElement;
-}
-export interface LeSlotCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLLeSlotElement;
-}
-export interface LeStringInputCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLLeStringInputElement;
-}
-declare global {
     /**
-     * A flexible box component for use as a flex item within le-stack.
-     * `le-box` wraps content and provides flex item properties like grow, shrink,
-     * basis, and self-alignment. It can also control its internal content alignment.
-     * @cssprop --le-box-bg - Background color
-     * @cssprop --le-box-padding - Padding inside the box
-     * @cssprop --le-box-border-radius - Border radius
-     * @csspart box - The main box container
-     * @csspart content - The inner content wrapper
+     * A presentational tab bar component without panels.
+     * Use this for navigation/routing scenarios where you manage the content
+     * externally based on the selection events. For tabs with built-in panels,
+     * use `le-tabs` instead.
+     * @cssprop --le-tab-bar-border-color - Border color
+     * @cssprop --le-tab-bar-gap - Gap between tabs
+     * @cssprop --le-tab-bar-indicator-color - Active indicator color
+     * @cssprop --le-tab-bar-padding-x - Horizontal padding for tabs
+     * @cssprop --le-tab-bar-padding-y - Vertical padding for tabs
+     * @csspart tablist - The tab button container
+     * @csspart tab - Individual tab buttons
+     * @csspart tab-active - The currently active tab
      * @cmsEditable true
-     * @cmsCategory Layout
+     * @cmsCategory Navigation
      */
-    interface HTMLLeBoxElement extends Components.LeBox, HTMLStencilElement {
-    }
-    var HTMLLeBoxElement: {
-        prototype: HTMLLeBoxElement;
-        new (): HTMLLeBoxElement;
-    };
-    interface HTMLLeButtonElementEventMap {
-        "click": PointerEvent;
+    interface LeTabBar {
+        /**
+          * Whether to show a border below the tab bar.
+          * @default true
+         */
+        "bordered": boolean;
+        /**
+          * Whether tabs should stretch to fill available width.
+          * @default true
+         */
+        "fullWidth": boolean;
+        /**
+          * Position of the tab bar.
+          * @allowedValues top | bottom
+          * @default 'top'
+         */
+        "position": 'top' | 'bottom';
+        /**
+          * The value of the currently selected tab.
+         */
+        "selected"?: LeOptionValue;
+        /**
+          * Whether to show labels in icon-only mode.
+          * @default false
+         */
+        "showLabels": boolean;
+        /**
+          * Size of the tabs.
+          * @allowedValues small | medium | large
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Array of tab options defining the tabs to display.
+          * @default []
+         */
+        "tabs": LeOption[];
     }
     /**
-     * A flexible button component with multiple variants and states.
-     * @cssprop --le-button-bg - Button background color
-     * @cssprop --le-button-color - Button text color
-     * @cssprop --le-button-border-radius - Button border radius
-     * @cssprop --le-button-padding-x - Button horizontal padding
-     * @cssprop --le-button-padding-y - Button vertical padding
-     * @csspart button - The native button element
-     * @csspart content - The button content wrapper
+     * A tab panel component used as a child of le-tabs.
+     * Each le-tab-panel defines both the tab button label and the panel content.
+     * The parent le-tabs component automatically reads these panels and creates
+     * the tab interface.
      * @cmsEditable true
-     * @cmsCategory Actions
+     * @cmsCategory Navigation
      */
-    interface HTMLLeButtonElement extends Components.LeButton, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLLeButtonElementEventMap>(type: K, listener: (this: HTMLLeButtonElement, ev: LeButtonCustomEvent<HTMLLeButtonElementEventMap[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 HTMLLeButtonElementEventMap>(type: K, listener: (this: HTMLLeButtonElement, ev: LeButtonCustomEvent<HTMLLeButtonElementEventMap[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;
-    }
+    interface LeTabPanel {
+        /**
+          * Whether this tab is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Get tab configuration for parent component
+         */
+        "getTabConfig": () => Promise<{ label: string; value: string; iconStart?: string; iconEnd?: string; disabled: boolean; }>;
+        /**
+          * Get the effective value (value or label as fallback)
+         */
+        "getValue": () => Promise<string>;
+        /**
+          * Icon displayed at the end of the tab button.
+         */
+        "iconEnd"?: string;
+        /**
+          * Icon displayed at the start of the tab button. Can be an emoji, URL, or icon class.
+         */
+        "iconStart"?: string;
+        /**
+          * The label displayed in the tab button.
+         */
+        "label": string;
+        /**
+          * Whether to render the panel content only when active (lazy loading). When true, content is not rendered until the tab is first selected. When false (default), content is always in DOM but hidden when inactive.
+          * @default false
+         */
+        "lazy": boolean;
+        /**
+          * Set the active state (called by parent le-tabs)
+         */
+        "setActive": (isActive: boolean) => Promise<void>;
+        /**
+          * The value used to identify this tab. Defaults to the label if not provided.
+         */
+        "value"?: string;
+    }
+    /**
+     * A flexible tabs component for organizing content into tabbed panels.
+     * Supports two modes:
+     * 1. **Declarative**: Use `<le-tab-panel>` children to define tabs and content
+     * 2. **Programmatic**: Use the `tabs` prop with named slots for content
+     * Full keyboard navigation and ARIA support included.
+     * @cssprop --le-tabs-border-color - Border color for tab list
+     * @cssprop --le-tabs-gap - Gap between tabs
+     * @cssprop --le-tabs-indicator-color - Active tab indicator color
+     * @cssprop --le-tabs-padding-x - Horizontal padding for tab buttons
+     * @cssprop --le-tabs-padding-y - Vertical padding for tab buttons
+     * @csspart tablist - The tab button container (role="tablist")
+     * @csspart tab - Individual tab buttons
+     * @csspart tab-active - The currently active tab
+     * @csspart panels - Container for panel content
+     * @csspart panel - Individual panel containers
+     * @cmsEditable true
+     * @cmsCategory Navigation
+     */
+    interface LeTabs {
+        /**
+          * Whether tabs should stretch to fill available width.
+          * @default false
+         */
+        "fullWidth": boolean;
+        /**
+          * Orientation of the tabs.
+          * @allowedValues horizontal | vertical
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
+        /**
+          * Scroll behavior for overflowing tabs.
+          * @allowedValues auto | hidden | visible | scroll
+          * @default 'auto'
+         */
+        "overflow": 'auto' | 'hidden' | 'visible' | 'scroll';
+        /**
+          * Position of the tabs relative to the panels.
+          * @allowedValues start | end
+          * @default 'start'
+         */
+        "position": 'start' | 'end';
+        /**
+          * The value of the currently selected tab. If not provided, defaults to the first tab.
+         */
+        "selected"?: LeOptionValue;
+        /**
+          * Size of the tabs.
+          * @allowedValues sm | md | lg
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Array of tab options (programmatic mode). If le-tab-panel children exist, they take precedence.
+          * @default []
+         */
+        "tabs": LeOption[];
+        /**
+          * Tab variant style.
+          * @allowedValues underlined | solid | pills | enclosed | icon-only
+          * @default 'underlined'
+         */
+        "variant": 'underlined' | 'solid' | 'pills' | 'enclosed' | 'icon-only';
+        /**
+          * Wrap the tabs if they exceed container width.
+          * @default false
+         */
+        "wrap": boolean;
+    }
+    /**
+     * A tag/chip component for displaying labels with optional dismiss functionality.
+     * @cmsEditable false
+     * @cmsCategory Form
+     * @example Basic tag
+     * ```html
+     * <le-tag label="JavaScript"></le-tag>
+     * ```
+     * @example Dismissible tag
+     * ```html
+     * <le-tag label="Remove me" dismissible></le-tag>
+     * ```
+     * @example With icon
+     * ```html
+     * <le-tag label="Settings" icon="⚙️"></le-tag>
+     * ```
+     * @example Different sizes
+     * ```html
+     * <le-tag label="Small" size="small"></le-tag>
+     * <le-tag label="Medium" size="medium"></le-tag>
+     * <le-tag label="Large" size="large"></le-tag>
+     * ```
+     * @example Different variants
+     * ```html
+     * <le-tag label="Default" variant="default"></le-tag>
+     * <le-tag label="Primary" variant="primary"></le-tag>
+     * <le-tag label="Success" variant="success"></le-tag>
+     * <le-tag label="Warning" variant="warning"></le-tag>
+     * <le-tag label="Danger" variant="danger"></le-tag>
+     * ```
+     */
+    interface LeTag {
+        /**
+          * Whether the tag is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether the tag can be dismissed (shows close button).
+          * @default false
+         */
+        "dismissible": boolean;
+        /**
+          * Icon to display before the label. Can be an emoji, URL, or icon name.
+         */
+        "icon"?: string;
+        /**
+          * The text label to display in the tag.
+         */
+        "label": string;
+        /**
+          * Mode of the popover should be 'default' for internal use
+         */
+        "mode": 'default' | 'admin';
+        /**
+          * The size of the tag.
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * The visual variant of the tag.
+          * @default 'default'
+         */
+        "variant": 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    }
+    /**
+     * A text component with rich text editing capabilities in admin mode.
+     * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)
+     * and provides a Notion-like rich text editor in admin mode with formatting
+     * toolbar for bold, italic, links, and paragraph type selection.
+     * @cssprop --le-text-color - Text color
+     * @cssprop --le-text-font-size - Font size
+     * @cssprop --le-text-line-height - Line height
+     * @cssprop --le-text-font-weight - Font weight
+     * @csspart text - The text container element
+     * @cmsEditable true
+     * @cmsCategory Content
+     */
+    interface LeText {
+        /**
+          * Text alignment
+          * @allowedValues left | center | right | justify
+          * @default 'left'
+         */
+        "align": 'left' | 'center' | 'right' | 'justify';
+        /**
+          * Text color (CSS value or theme token)
+         */
+        "color"?: string;
+        /**
+          * Maximum number of lines before truncating (requires truncate=true)
+         */
+        "maxLines"?: number;
+        /**
+          * Whether the text should truncate with ellipsis
+          * @default false
+         */
+        "truncate": boolean;
+        /**
+          * The semantic variant/type of text element
+          * @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';
+    }
+    interface LeTurntable {
+        /**
+          * @default 'center'
+         */
+        "center": string;
+        /**
+          * @default 0
+         */
+        "value": number;
+    }
+}
+export interface LeButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeButtonElement;
+}
+export interface LeCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeCheckboxElement;
+}
+export interface LeComboboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeComboboxElement;
+}
+export interface LeDropdownBaseCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeDropdownBaseElement;
+}
+export interface LeHeaderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeHeaderElement;
+}
+export interface LeMultiselectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeMultiselectElement;
+}
+export interface LeNumberInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeNumberInputElement;
+}
+export interface LePopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLePopoverElement;
+}
+export interface LePopupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLePopupElement;
+}
+export interface LeSegmentedControlCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeSegmentedControlElement;
+}
+export interface LeSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeSelectElement;
+}
+export interface LeSlotCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeSlotElement;
+}
+export interface LeStringInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeStringInputElement;
+}
+export interface LeTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeTabElement;
+}
+export interface LeTabBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeTabBarElement;
+}
+export interface LeTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeTabsElement;
+}
+export interface LeTagCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeTagElement;
+}
+declare global {
+    /**
+     * A flexible box component for use as a flex item within le-stack.
+     * `le-box` wraps content and provides flex item properties like grow, shrink,
+     * basis, and self-alignment. It can also control its internal content alignment.
+     * @cssprop --le-box-bg - Background color
+     * @cssprop --le-box-padding - Padding inside the box
+     * @cssprop --le-box-border-radius - Border radius
+     * @csspart box - The main box container
+     * @csspart content - The inner content wrapper
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface HTMLLeBoxElement extends Components.LeBox, HTMLStencilElement {
+    }
+    var HTMLLeBoxElement: {
+        prototype: HTMLLeBoxElement;
+        new (): HTMLLeBoxElement;
+    };
+    interface HTMLLeButtonElementEventMap {
+        "click": PointerEvent;
+    }
+    /**
+     * A flexible button component with multiple variants and states.
+     * @cssprop --le-button-bg - Button background color
+     * @cssprop --le-button-color - Button text color
+     * @cssprop --le-button-border-radius - Button border radius
+     * @cssprop --le-button-padding-x - Button horizontal padding
+     * @cssprop --le-button-padding-y - Button vertical padding
+     * @csspart button - The native button element
+     * @csspart content - The button content wrapper
+     * @csspart icon-start - The start icon slot
+     * @csspart icon-end - The end icon slot
+     * @cmsEditable true
+     * @cmsCategory Actions
+     */
+    interface HTMLLeButtonElement extends Components.LeButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeButtonElementEventMap>(type: K, listener: (this: HTMLLeButtonElement, ev: LeButtonCustomEvent<HTMLLeButtonElementEventMap[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 HTMLLeButtonElementEventMap>(type: K, listener: (this: HTMLLeButtonElement, ev: LeButtonCustomEvent<HTMLLeButtonElementEventMap[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 HTMLLeButtonElement: {
         prototype: HTMLLeButtonElement;
         new (): HTMLLeButtonElement;
@@ -870,6 +1866,64 @@ declare global {
         prototype: HTMLLeCheckboxElement;
         new (): HTMLLeCheckboxElement;
     };
+    /**
+     * Animated show/hide wrapper.
+     * Supports height collapse (auto->0) and/or fading.
+     * Can optionally listen to the nearest `le-header` shrink events.
+     * @cssprop --le-collapse-duration - Transition duration
+     * @csspart region - Collapsible region
+     * @csspart content - Inner content
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface HTMLLeCollapseElement extends Components.LeCollapse, HTMLStencilElement {
+    }
+    var HTMLLeCollapseElement: {
+        prototype: HTMLLeCollapseElement;
+        new (): HTMLLeCollapseElement;
+    };
+    interface HTMLLeComboboxElementEventMap {
+        "leChange": LeOptionSelectDetail;
+        "leInput": { value: string };
+        "leOpen": void;
+        "leClose": void;
+    }
+    /**
+     * A combobox component with searchable dropdown.
+     * Combines a text input with a dropdown list, allowing users to
+     * filter options by typing or select from the list.
+     * @cmsEditable true
+     * @cmsCategory Form
+     * @example Basic combobox
+     * ```html
+     * <le-combobox
+     * placeholder="Search..."
+     * options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
+     * ></le-combobox>
+     * ```
+     * @example Allow custom values
+     * ```html
+     * <le-combobox
+     * placeholder="Type or select..."
+     * allow-custom
+     * options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
+     * ></le-combobox>
+     * ```
+     */
+    interface HTMLLeComboboxElement extends Components.LeCombobox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeComboboxElementEventMap>(type: K, listener: (this: HTMLLeComboboxElement, ev: LeComboboxCustomEvent<HTMLLeComboboxElementEventMap[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 HTMLLeComboboxElementEventMap>(type: K, listener: (this: HTMLLeComboboxElement, ev: LeComboboxCustomEvent<HTMLLeComboboxElementEventMap[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 HTMLLeComboboxElement: {
+        prototype: HTMLLeComboboxElement;
+        new (): HTMLLeComboboxElement;
+    };
     /**
      * Component wrapper for admin mode editing.
      * This component is used internally by other components to provide admin-mode
@@ -897,9 +1951,170 @@ declare global {
         prototype: HTMLLeComponentElement;
         new (): HTMLLeComponentElement;
     };
-    interface HTMLLeNumberInputElementEventMap {
-        "leChange": { value: number; name: string; externalId: string; isValid: boolean };
-        "leInput": { value: number; name: string; externalId: string; isValid: boolean };
+    /**
+     * Shows a "smart" header title based on what has scrolled out of view.
+     * When `selector` matches multiple elements, the title becomes the last element
+     * (top-to-bottom) that has fully scrolled out above the viewport.
+     * @csspart title - The rendered title
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface HTMLLeCurrentHeadingElement extends Components.LeCurrentHeading, HTMLStencilElement {
+    }
+    var HTMLLeCurrentHeadingElement: {
+        prototype: HTMLLeCurrentHeadingElement;
+        new (): HTMLLeCurrentHeadingElement;
+    };
+    interface HTMLLeDropdownBaseElementEventMap {
+        "leOptionSelect": LeOptionSelectDetail;
+        "leDropdownOpen": void;
+        "leDropdownClose": void;
+    }
+    /**
+     * Internal dropdown base component that provides shared functionality
+     * for select, combobox, and multiselect components.
+     * Wraps le-popover for positioning and provides:
+     * - Option list rendering with groups
+     * - Keyboard navigation (↑↓, Enter, Escape, Home/End)
+     * - Option filtering support
+     * - Single and multi-select modes
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface HTMLLeDropdownBaseElement extends Components.LeDropdownBase, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeDropdownBaseElementEventMap>(type: K, listener: (this: HTMLLeDropdownBaseElement, ev: LeDropdownBaseCustomEvent<HTMLLeDropdownBaseElementEventMap[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 HTMLLeDropdownBaseElementEventMap>(type: K, listener: (this: HTMLLeDropdownBaseElement, ev: LeDropdownBaseCustomEvent<HTMLLeDropdownBaseElementEventMap[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 HTMLLeDropdownBaseElement: {
+        prototype: HTMLLeDropdownBaseElement;
+        new (): HTMLLeDropdownBaseElement;
+    };
+    interface HTMLLeHeaderElementEventMap {
+        "leHeaderState": {
+    y: number;
+    direction: 'up' | 'down';
+    revealed: boolean;
+    shrunk: boolean;
+  };
+        "leHeaderShrinkChange": { shrunk: boolean; y: number };
+        "leHeaderVisibilityChange": { visible: boolean; y: number };
+    }
+    /**
+     * A functional page header with scroll-aware behaviors.
+     * Features:
+     * - Static (default), sticky, or fixed positioning
+     * - Optional shrink-on-scroll behavior via `shrink-offset`
+     * - Optional reveal-on-scroll-up via `reveal-on-scroll` (sticky only)
+     * Slots:
+     * - `start`: left side (logo/back button)
+     * - `title`: centered/primary title content
+     * - `end`: right side actions
+     * - default: extra content row (e.g., tabs/search) rendered below main row
+     * @cssprop --le-header-bg - Background (color/gradient)
+     * @cssprop --le-header-color - Text color
+     * @cssprop --le-header-border - Border (e.g. 1px solid ...)
+     * @cssprop --le-header-shadow - Shadow/elevation
+     * @cssprop --le-header-max-width - Inner content max width
+     * @cssprop --le-header-padding-x - Horizontal padding
+     * @cssprop --le-header-padding-y - Vertical padding
+     * @cssprop --le-header-gap - Gap between zones
+     * @cssprop --le-header-height - Base height (main row)
+     * @cssprop --le-header-height-condensed - Condensed height when shrunk
+     * @cssprop --le-header-transition - Transition timing
+     * @cssprop --le-header-z - Z-index (fixed mode)
+     * @csspart header - The header container
+     * @csspart inner - Inner max-width container
+     * @csspart row - Main row
+     * @csspart start - Start zone
+     * @csspart title - Title zone
+     * @csspart end - End zone
+     * @csspart secondary - Secondary row
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface HTMLLeHeaderElement extends Components.LeHeader, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeHeaderElementEventMap>(type: K, listener: (this: HTMLLeHeaderElement, ev: LeHeaderCustomEvent<HTMLLeHeaderElementEventMap[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 HTMLLeHeaderElementEventMap>(type: K, listener: (this: HTMLLeHeaderElement, ev: LeHeaderCustomEvent<HTMLLeHeaderElementEventMap[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 HTMLLeHeaderElement: {
+        prototype: HTMLLeHeaderElement;
+        new (): HTMLLeHeaderElement;
+    };
+    /**
+     * Placeholder for `le-header`.
+     * Reserves space using the global CSS variable `--le-header-height`.
+     * The header component updates that variable when it renders.
+     * @cssprop --le-header-height - Published header height (px)
+     * @cmsInternal true
+     */
+    interface HTMLLeHeaderPlaceholderElement extends Components.LeHeaderPlaceholder, HTMLStencilElement {
+    }
+    var HTMLLeHeaderPlaceholderElement: {
+        prototype: HTMLLeHeaderPlaceholderElement;
+        new (): HTMLLeHeaderPlaceholderElement;
+    };
+    interface HTMLLeMultiselectElementEventMap {
+        "leChange": LeMultiOptionSelectDetail;
+        "leOpen": void;
+        "leClose": void;
+    }
+    /**
+     * A multiselect component for selecting multiple options.
+     * Displays selected items as tags with optional search filtering.
+     * @cmsEditable true
+     * @cmsCategory Form
+     * @example Basic multiselect
+     * ```html
+     * <le-multiselect
+     * placeholder="Select options..."
+     * options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
+     * ></le-multiselect>
+     * ```
+     * @example With max selections
+     * ```html
+     * <le-multiselect
+     * max-selections="3"
+     * options='[{"label": "Option 1"}, {"label": "Option 2"}, {"label": "Option 3"}, {"label": "Option 4"}]'
+     * ></le-multiselect>
+     * ```
+     * @example With search
+     * ```html
+     * <le-multiselect
+     * searchable
+     * placeholder="Search and select..."
+     * options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
+     * ></le-multiselect>
+     * ```
+     */
+    interface HTMLLeMultiselectElement extends Components.LeMultiselect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeMultiselectElementEventMap>(type: K, listener: (this: HTMLLeMultiselectElement, ev: LeMultiselectCustomEvent<HTMLLeMultiselectElementEventMap[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 HTMLLeMultiselectElementEventMap>(type: K, listener: (this: HTMLLeMultiselectElement, ev: LeMultiselectCustomEvent<HTMLLeMultiselectElementEventMap[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 HTMLLeMultiselectElement: {
+        prototype: HTMLLeMultiselectElement;
+        new (): HTMLLeMultiselectElement;
+    };
+    interface HTMLLeNumberInputElementEventMap {
+        "leChange": { value: number; name: string; externalId: string; isValid: boolean };
+        "leInput": { value: number; name: string; externalId: string; isValid: boolean };
     }
     /**
      * A number input component with validation, keyboard controls, and custom spinners.
@@ -933,6 +2148,8 @@ declare global {
      * A popover component for displaying floating content.
      * Uses the native HTML Popover API for proper layering with dialogs
      * and other top-layer elements. Falls back gracefully in older browsers.
+     * @csspart trigger - The popover trigger element
+     * @csspart content - The popover content wrapper
      * @cmsInternal true
      * @cmsCategory System
      */
@@ -959,7 +2176,7 @@ declare global {
     /**
      * A flexible popup/dialog component for alerts, confirms, prompts, and custom content.
      * Uses the native HTML <dialog> element for proper modal behavior, accessibility,
-     * and focus management. Can be used declaratively in HTML or programmatically 
+     * and focus management. Can be used declaratively in HTML or programmatically
      * via leAlert(), leConfirm(), lePrompt().
      * @cmsInternal true
      * @cmsCategory System
@@ -984,6 +2201,108 @@ declare global {
         prototype: HTMLLeRoundProgressElement;
         new (): HTMLLeRoundProgressElement;
     };
+    /**
+     * Displays scroll progress as a simple bar.
+     * If `track-scroll-progress` is present without a value, tracks the full document.
+     * If it is a selector string, tracks progress within the matched element.
+     * @cssprop --le-scroll-progress-height - Bar height
+     * @cssprop --le-scroll-progress-bg - Track background
+     * @cssprop --le-scroll-progress-fill - Fill color
+     * @cssprop --le-scroll-progress-sticky-top - If sticky, stop position to parent top
+     * @cssprop --le-scroll-progress-fixed-top - If fixed, distance from window top
+     * @cssprop --le-scroll-progress-fixed-left - If fixed, distance from window left
+     * @cssprop --le-scroll-progress-fixed-right - If fixed, distance from window right
+     * @cssprop --le-scroll-progress-z - Z-index of the progress bar (1001 by default, above header)
+     * @csspart track - Outer track
+     * @csspart fill - Inner fill
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface HTMLLeScrollProgressElement extends Components.LeScrollProgress, HTMLStencilElement {
+    }
+    var HTMLLeScrollProgressElement: {
+        prototype: HTMLLeScrollProgressElement;
+        new (): HTMLLeScrollProgressElement;
+    };
+    interface HTMLLeSegmentedControlElementEventMap {
+        "leChange": LeOptionSelectDetail;
+    }
+    /**
+     * A segmented control component (iOS-style toggle buttons).
+     * Perfect for toggling between a small set of related options.
+     * @cssprop --le-segmented-bg - Background color of the control
+     * @cssprop --le-segmented-padding - Padding around segments
+     * @cssprop --le-segmented-gap - Gap between segments
+     * @cssprop --le-segmented-radius - Border radius of the control
+     * @csspart container - The main container
+     * @csspart segment - Individual segment buttons
+     * @csspart segment-active - The currently active segment
+     * @cmsEditable true
+     * @cmsCategory Form
+     */
+    interface HTMLLeSegmentedControlElement extends Components.LeSegmentedControl, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeSegmentedControlElementEventMap>(type: K, listener: (this: HTMLLeSegmentedControlElement, ev: LeSegmentedControlCustomEvent<HTMLLeSegmentedControlElementEventMap[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 HTMLLeSegmentedControlElementEventMap>(type: K, listener: (this: HTMLLeSegmentedControlElement, ev: LeSegmentedControlCustomEvent<HTMLLeSegmentedControlElementEventMap[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 HTMLLeSegmentedControlElement: {
+        prototype: HTMLLeSegmentedControlElement;
+        new (): HTMLLeSegmentedControlElement;
+    };
+    interface HTMLLeSelectElementEventMap {
+        "leChange": LeOptionSelectDetail;
+        "leOpen": void;
+        "leClose": void;
+    }
+    /**
+     * A select dropdown component for single selection.
+     * @cmsEditable true
+     * @cmsCategory Form
+     * @example Basic select
+     * ```html
+     * <le-select
+     * placeholder="Choose an option"
+     * options='[{"label": "Option 1", "value": "1"}, {"label": "Option 2", "value": "2"}]'
+     * ></le-select>
+     * ```
+     * @example With icons
+     * ```html
+     * <le-select
+     * options='[
+     * {"label": "Apple", "value": "apple", "iconStart": "🍎"},
+     * {"label": "Banana", "value": "banana", "iconStart": "🍌"}
+     * ]'
+     * ></le-select>
+     * ```
+     * @example Grouped options
+     * ```html
+     * <le-select
+     * options='[
+     * {"label": "Apple", "value": "apple", "group": "Fruits"},
+     * {"label": "Carrot", "value": "carrot", "group": "Vegetables"}
+     * ]'
+     * ></le-select>
+     * ```
+     */
+    interface HTMLLeSelectElement extends Components.LeSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeSelectElementEventMap>(type: K, listener: (this: HTMLLeSelectElement, ev: LeSelectCustomEvent<HTMLLeSelectElementEventMap[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 HTMLLeSelectElementEventMap>(type: K, listener: (this: HTMLLeSelectElement, ev: LeSelectCustomEvent<HTMLLeSelectElementEventMap[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 HTMLLeSelectElement: {
+        prototype: HTMLLeSelectElement;
+        new (): HTMLLeSelectElement;
+    };
     interface HTMLLeSlotElementEventMap {
         "leSlotChange": { name: string; value: string; isValid: boolean };
     }
@@ -1026,8 +2345,16 @@ declare global {
         new (): HTMLLeStackElement;
     };
     interface HTMLLeStringInputElementEventMap {
-        "change": { value: string; name: string; externalId: string };
-        "input": { value: string; name: string; externalId: string };
+        "change": {
+    value: string;
+    name: string;
+    externalId: string;
+  };
+        "input": {
+    value: string;
+    name: string;
+    externalId: string;
+  };
     }
     /**
      * A text input component with support for labels, descriptions, icons, and external IDs.
@@ -1052,6 +2379,168 @@ declare global {
         prototype: HTMLLeStringInputElement;
         new (): HTMLLeStringInputElement;
     };
+    interface HTMLLeTabElementEventMap {
+        "click": PointerEvent;
+    }
+    /**
+     * A flexible tab component with multiple variants and states.
+     * @cssprop --le-tab-bg - Tab background color
+     * @cssprop --le-tab-color - Tab text color
+     * @cssprop --le-tab-border-radius - Tab border radius
+     * @cssprop --le-tab-padding-x - Tab horizontal padding
+     * @cssprop --le-tab-padding-y - Tab vertical padding
+     * @csspart button - The native button element
+     * @csspart content - The tab content wrapper
+     * @csspart icon-start - The start icon slot
+     * @csspart icon-end - The end icon slot
+     * @cmsEditable true
+     * @cmsCategory Actions
+     */
+    interface HTMLLeTabElement extends Components.LeTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeTabElementEventMap>(type: K, listener: (this: HTMLLeTabElement, ev: LeTabCustomEvent<HTMLLeTabElementEventMap[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 HTMLLeTabElementEventMap>(type: K, listener: (this: HTMLLeTabElement, ev: LeTabCustomEvent<HTMLLeTabElementEventMap[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 HTMLLeTabElement: {
+        prototype: HTMLLeTabElement;
+        new (): HTMLLeTabElement;
+    };
+    interface HTMLLeTabBarElementEventMap {
+        "leTabChange": LeOptionSelectDetail;
+    }
+    /**
+     * A presentational tab bar component without panels.
+     * Use this for navigation/routing scenarios where you manage the content
+     * externally based on the selection events. For tabs with built-in panels,
+     * use `le-tabs` instead.
+     * @cssprop --le-tab-bar-border-color - Border color
+     * @cssprop --le-tab-bar-gap - Gap between tabs
+     * @cssprop --le-tab-bar-indicator-color - Active indicator color
+     * @cssprop --le-tab-bar-padding-x - Horizontal padding for tabs
+     * @cssprop --le-tab-bar-padding-y - Vertical padding for tabs
+     * @csspart tablist - The tab button container
+     * @csspart tab - Individual tab buttons
+     * @csspart tab-active - The currently active tab
+     * @cmsEditable true
+     * @cmsCategory Navigation
+     */
+    interface HTMLLeTabBarElement extends Components.LeTabBar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeTabBarElementEventMap>(type: K, listener: (this: HTMLLeTabBarElement, ev: LeTabBarCustomEvent<HTMLLeTabBarElementEventMap[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 HTMLLeTabBarElementEventMap>(type: K, listener: (this: HTMLLeTabBarElement, ev: LeTabBarCustomEvent<HTMLLeTabBarElementEventMap[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 HTMLLeTabBarElement: {
+        prototype: HTMLLeTabBarElement;
+        new (): HTMLLeTabBarElement;
+    };
+    /**
+     * A tab panel component used as a child of le-tabs.
+     * Each le-tab-panel defines both the tab button label and the panel content.
+     * The parent le-tabs component automatically reads these panels and creates
+     * the tab interface.
+     * @cmsEditable true
+     * @cmsCategory Navigation
+     */
+    interface HTMLLeTabPanelElement extends Components.LeTabPanel, HTMLStencilElement {
+    }
+    var HTMLLeTabPanelElement: {
+        prototype: HTMLLeTabPanelElement;
+        new (): HTMLLeTabPanelElement;
+    };
+    interface HTMLLeTabsElementEventMap {
+        "leTabChange": LeOptionSelectDetail;
+    }
+    /**
+     * A flexible tabs component for organizing content into tabbed panels.
+     * Supports two modes:
+     * 1. **Declarative**: Use `<le-tab-panel>` children to define tabs and content
+     * 2. **Programmatic**: Use the `tabs` prop with named slots for content
+     * Full keyboard navigation and ARIA support included.
+     * @cssprop --le-tabs-border-color - Border color for tab list
+     * @cssprop --le-tabs-gap - Gap between tabs
+     * @cssprop --le-tabs-indicator-color - Active tab indicator color
+     * @cssprop --le-tabs-padding-x - Horizontal padding for tab buttons
+     * @cssprop --le-tabs-padding-y - Vertical padding for tab buttons
+     * @csspart tablist - The tab button container (role="tablist")
+     * @csspart tab - Individual tab buttons
+     * @csspart tab-active - The currently active tab
+     * @csspart panels - Container for panel content
+     * @csspart panel - Individual panel containers
+     * @cmsEditable true
+     * @cmsCategory Navigation
+     */
+    interface HTMLLeTabsElement extends Components.LeTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeTabsElementEventMap>(type: K, listener: (this: HTMLLeTabsElement, ev: LeTabsCustomEvent<HTMLLeTabsElementEventMap[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 HTMLLeTabsElementEventMap>(type: K, listener: (this: HTMLLeTabsElement, ev: LeTabsCustomEvent<HTMLLeTabsElementEventMap[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 HTMLLeTabsElement: {
+        prototype: HTMLLeTabsElement;
+        new (): HTMLLeTabsElement;
+    };
+    interface HTMLLeTagElementEventMap {
+        "leDismiss": void;
+    }
+    /**
+     * A tag/chip component for displaying labels with optional dismiss functionality.
+     * @cmsEditable false
+     * @cmsCategory Form
+     * @example Basic tag
+     * ```html
+     * <le-tag label="JavaScript"></le-tag>
+     * ```
+     * @example Dismissible tag
+     * ```html
+     * <le-tag label="Remove me" dismissible></le-tag>
+     * ```
+     * @example With icon
+     * ```html
+     * <le-tag label="Settings" icon="⚙️"></le-tag>
+     * ```
+     * @example Different sizes
+     * ```html
+     * <le-tag label="Small" size="small"></le-tag>
+     * <le-tag label="Medium" size="medium"></le-tag>
+     * <le-tag label="Large" size="large"></le-tag>
+     * ```
+     * @example Different variants
+     * ```html
+     * <le-tag label="Default" variant="default"></le-tag>
+     * <le-tag label="Primary" variant="primary"></le-tag>
+     * <le-tag label="Success" variant="success"></le-tag>
+     * <le-tag label="Warning" variant="warning"></le-tag>
+     * <le-tag label="Danger" variant="danger"></le-tag>
+     * ```
+     */
+    interface HTMLLeTagElement extends Components.LeTag, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeTagElementEventMap>(type: K, listener: (this: HTMLLeTagElement, ev: LeTagCustomEvent<HTMLLeTagElementEventMap[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 HTMLLeTagElementEventMap>(type: K, listener: (this: HTMLLeTagElement, ev: LeTagCustomEvent<HTMLLeTagElementEventMap[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 HTMLLeTagElement: {
+        prototype: HTMLLeTagElement;
+        new (): HTMLLeTagElement;
+    };
     /**
      * A text component with rich text editing capabilities in admin mode.
      * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)
@@ -1082,14 +2571,29 @@ declare global {
         "le-button": HTMLLeButtonElement;
         "le-card": HTMLLeCardElement;
         "le-checkbox": HTMLLeCheckboxElement;
+        "le-collapse": HTMLLeCollapseElement;
+        "le-combobox": HTMLLeComboboxElement;
         "le-component": HTMLLeComponentElement;
+        "le-current-heading": HTMLLeCurrentHeadingElement;
+        "le-dropdown-base": HTMLLeDropdownBaseElement;
+        "le-header": HTMLLeHeaderElement;
+        "le-header-placeholder": HTMLLeHeaderPlaceholderElement;
+        "le-multiselect": HTMLLeMultiselectElement;
         "le-number-input": HTMLLeNumberInputElement;
         "le-popover": HTMLLePopoverElement;
         "le-popup": HTMLLePopupElement;
         "le-round-progress": HTMLLeRoundProgressElement;
+        "le-scroll-progress": HTMLLeScrollProgressElement;
+        "le-segmented-control": HTMLLeSegmentedControlElement;
+        "le-select": HTMLLeSelectElement;
         "le-slot": HTMLLeSlotElement;
         "le-stack": HTMLLeStackElement;
         "le-string-input": HTMLLeStringInputElement;
+        "le-tab": HTMLLeTabElement;
+        "le-tab-bar": HTMLLeTabBarElement;
+        "le-tab-panel": HTMLLeTabPanelElement;
+        "le-tabs": HTMLLeTabsElement;
+        "le-tag": HTMLLeTagElement;
         "le-text": HTMLLeTextElement;
         "le-turntable": HTMLLeTurntableElement;
     }
@@ -1177,208 +2681,649 @@ declare namespace LocalJSX {
          */
         "maxWidth"?: string;
         /**
-          * Minimum height constraint
+          * Minimum height constraint
+         */
+        "minHeight"?: string;
+        /**
+          * Minimum width constraint
+         */
+        "minWidth"?: string;
+        /**
+          * Order in the flex container (lower values come first)
+         */
+        "order"?: number;
+        /**
+          * Padding inside the box (CSS value like '8px', '1rem')
+         */
+        "padding"?: string;
+        /**
+          * Flex shrink factor - how much the item should shrink relative to siblings
+          * @min 0
+          * @default 1
+         */
+        "shrink"?: number;
+        /**
+          * Width of the box (CSS value like '100px', '50%', 'auto')
+         */
+        "width"?: string;
+    }
+    /**
+     * A flexible button component with multiple variants and states.
+     * @cssprop --le-button-bg - Button background color
+     * @cssprop --le-button-color - Button text color
+     * @cssprop --le-button-border-radius - Button border radius
+     * @cssprop --le-button-padding-x - Button horizontal padding
+     * @cssprop --le-button-padding-y - Button vertical padding
+     * @csspart button - The native button element
+     * @csspart content - The button content wrapper
+     * @csspart icon-start - The start icon slot
+     * @csspart icon-end - The end icon slot
+     * @cmsEditable true
+     * @cmsCategory Actions
+     */
+    interface LeButton {
+        /**
+          * Alignment of the button label without the end icon
+          * @allowedValues start | center | space-between | end
+          * @default 'center'
+         */
+        "align"?: 'start' | 'center' | 'space-between' | 'end';
+        /**
+          * Button color theme (uses theme semantic colors)
+          * @allowedValues primary | secondary | success | warning | danger | info
+          * @default 'primary'
+         */
+        "color"?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+        /**
+          * Whether the button is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the button takes full width of its container
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Optional href to make the button act as a link
+         */
+        "href"?: string;
+        /**
+          * End icon image or emoji
+         */
+        "iconEnd"?: string | Node;
+        /**
+          * Icon only button image or emoji if this prop is set, the button will render only the icon slot
+         */
+        "iconOnly"?: string | Node;
+        /**
+          * Start icon image or emoji
+         */
+        "iconStart"?: string | Node;
+        /**
+          * Mode of the popover should be 'default' for internal use
+         */
+        "mode"?: 'default' | 'admin';
+        /**
+          * Emitted when the button is clicked. This is a custom event that wraps the native click but ensures the target is the le-button.
+         */
+        "onClick"?: (event: LeButtonCustomEvent<PointerEvent>) => void;
+        /**
+          * Whether the button is in a selected/active state
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * Button size
+          * @allowedValues small | medium | large
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Link target when href is set
+         */
+        "target"?: string;
+        /**
+          * The button type attribute
+          * @allowedValues button | submit | reset
+          * @default 'button'
+         */
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * Button variant style
+          * @allowedValues solid | outlined | clear
+          * @default 'solid'
+         */
+        "variant"?: 'solid' | 'outlined' | 'clear' | 'system';
+    }
+    /**
+     * A flexible card component with header, content, and footer slots.
+     * The card uses le-slot wrappers for each slot area. In admin mode,
+     * le-slot shows placeholders for CMS editing. In default mode,
+     * le-slot acts as a transparent passthrough.
+     * @cssprop --le-card-bg - Card background color
+     * @cssprop --le-card-border-radius - Card border radius
+     * @cssprop --le-card-shadow - Card box shadow
+     * @cssprop --le-card-padding - Card content padding
+     * @csspart card - The main card container
+     * @csspart header - The card header section
+     * @csspart content - The card content section
+     * @csspart footer - The card footer section
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeCard {
+        /**
+          * Whether the card is interactive (clickable)
+          * @default false
+         */
+        "interactive"?: boolean;
+        /**
+          * Card variant style
+          * @allowedValues default | outlined | elevated
+          * @default 'default'
+         */
+        "variant"?: 'default' | 'outlined' | 'elevated';
+    }
+    /**
+     * A checkbox component with support for labels, descriptions, and external IDs.
+     * @cssprop --le-checkbox-size - Size of the checkbox input
+     * @cssprop --le-checkbox-color - Color of the checkbox when checked
+     * @cssprop --le-checkbox-label-color - Color of the label text
+     * @cssprop --le-checkbox-desc-color - Color of the description text
+     */
+    interface LeCheckbox {
+        /**
+          * Whether the checkbox is checked
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * Whether the checkbox is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * External ID for linking with external systems (e.g. database ID, PDF form field ID)
+         */
+        "externalId"?: string;
+        /**
+          * The name of the checkbox input
+         */
+        "name"?: string;
+        /**
+          * Emitted when the checked state changes
+         */
+        "onChange"?: (event: LeCheckboxCustomEvent<{ checked: boolean; value: string; name: string; externalId: string }>) => void;
+        /**
+          * The value of the checkbox input
+         */
+        "value"?: string;
+    }
+    /**
+     * Animated show/hide wrapper.
+     * Supports height collapse (auto->0) and/or fading.
+     * Can optionally listen to the nearest `le-header` shrink events.
+     * @cssprop --le-collapse-duration - Transition duration
+     * @csspart region - Collapsible region
+     * @csspart content - Inner content
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeCollapse {
+        /**
+          * If true, collapse/expand based on the nearest header shrink event.
+          * @default false
+         */
+        "collapseOnHeaderShrink"?: boolean;
+        /**
+          * Stop fading the content when collapsing/expanding.
+          * @default false
+         */
+        "noFading"?: boolean;
+        /**
+          * Whether the content should be shown.
+          * @default true
+         */
+        "open"?: boolean;
+        /**
+          * Whether the content should scroll down from the top when open.
+          * @default false
+         */
+        "scrollDown"?: boolean;
+    }
+    /**
+     * A combobox component with searchable dropdown.
+     * Combines a text input with a dropdown list, allowing users to
+     * filter options by typing or select from the list.
+     * @cmsEditable true
+     * @cmsCategory Form
+     * @example Basic combobox
+     * ```html
+     * <le-combobox
+     * placeholder="Search..."
+     * options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
+     * ></le-combobox>
+     * ```
+     * @example Allow custom values
+     * ```html
+     * <le-combobox
+     * placeholder="Type or select..."
+     * allow-custom
+     * options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
+     * ></le-combobox>
+     * ```
+     */
+    interface LeCombobox {
+        /**
+          * Whether to allow custom values not in the options list.
+          * @default false
+         */
+        "allowCustom"?: boolean;
+        /**
+          * Whether the combobox is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Text to show when no options match the search.
+          * @default 'No results found'
+         */
+        "emptyText"?: string;
+        /**
+          * Whether the multiselect should take full width of its container.
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Minimum characters before showing filtered results.
+          * @default 0
+         */
+        "minSearchLength"?: number;
+        /**
+          * Name attribute for form submission.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the selected value changes.
+         */
+        "onLeChange"?: (event: LeComboboxCustomEvent<LeOptionSelectDetail>) => void;
+        /**
+          * Emitted when the dropdown closes.
+         */
+        "onLeClose"?: (event: LeComboboxCustomEvent<void>) => void;
+        /**
+          * Emitted when the input value changes (for custom values).
+         */
+        "onLeInput"?: (event: LeComboboxCustomEvent<{ value: string }>) => void;
+        /**
+          * Emitted when the dropdown opens.
+         */
+        "onLeOpen"?: (event: LeComboboxCustomEvent<void>) => void;
+        /**
+          * Whether the dropdown is currently open.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * The options to display in the dropdown.
+          * @default []
+         */
+        "options"?: LeOption[] | string;
+        /**
+          * Placeholder text for the input.
+          * @default 'Type to search...'
+         */
+        "placeholder"?: string;
+        /**
+          * Whether selection is required.
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * Size variant of the combobox.
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The currently selected value.
+         */
+        "value"?: LeOptionValue;
+    }
+    /**
+     * Component wrapper for admin mode editing.
+     * This component is used internally by other components to provide admin-mode
+     * editing capabilities. It wraps the component's rendered output and shows
+     * a settings popover for editing properties.
+     * In default mode, it acts as a simple passthrough (display: contents).
+     * In admin mode, it shows a border, component name header, and settings popover.
+     * The host element is found automatically by traversing up through the shadow DOM.
+     * Usage inside a component's render method:
+     * ```tsx
+     * render() {
+     *   return (
+     *     <le-component component="le-card">
+     *       <Host>...</Host>
+     *     </le-component>
+     *   );
+     * }
+     * ```
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface LeComponent {
+        /**
+          * The tag name of the component (e.g., 'le-card'). Used to look up property metadata and display the component name.
+         */
+        "component": string;
+        /**
+          * Optional display name for the component. If not provided, the tag name will be formatted as the display name.
+         */
+        "displayName"?: string;
+        /**
+          * Classes to apply to the host element. Allows parent components to pass their styling classes.
+         */
+        "hostClass"?: string;
+        /**
+          * Inline styles to apply to the host element. Allows parent components to pass dynamic styles (e.g., flex properties).
+         */
+        "hostStyle"?: { [key: string]: string };
+    }
+    /**
+     * Shows a "smart" header title based on what has scrolled out of view.
+     * When `selector` matches multiple elements, the title becomes the last element
+     * (top-to-bottom) that has fully scrolled out above the viewport.
+     * @csspart title - The rendered title
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeCurrentHeading {
+        /**
+          * CSS selector for page title/headings to watch (e.g. `.page-title`, `main h2`).
+          * @default ''
+         */
+        "selector"?: string;
+    }
+    /**
+     * Internal dropdown base component that provides shared functionality
+     * for select, combobox, and multiselect components.
+     * Wraps le-popover for positioning and provides:
+     * - Option list rendering with groups
+     * - Keyboard navigation (↑↓, Enter, Escape, Home/End)
+     * - Option filtering support
+     * - Single and multi-select modes
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface LeDropdownBase {
+        /**
+          * Whether to close the dropdown when clicking outside. (used to support combobox with input focus)
+          * @default true
+         */
+        "closeOnClickOutside"?: boolean;
+        /**
+          * Whether the dropdown is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Placeholder text when no options match filter.
+          * @default 'No options'
+         */
+        "emptyText"?: string;
+        /**
+          * Filter function for options. Return true to include the option.
+         */
+        "filterFn"?: (option: LeOption, query: string) => boolean;
+        /**
+          * Current filter query string.
+          * @default ''
+         */
+        "filterQuery"?: string;
+        /**
+          * Sets the dropdown to full width of the trigger.
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Maximum height of the dropdown list.
+          * @default '300px'
+         */
+        "maxHeight"?: string;
+        /**
+          * Whether multiple selection is allowed.
+          * @default false
+         */
+        "multiple"?: boolean;
+        /**
+          * Emitted when the dropdown closes.
+         */
+        "onLeDropdownClose"?: (event: LeDropdownBaseCustomEvent<void>) => void;
+        /**
+          * Emitted when the dropdown opens.
+         */
+        "onLeDropdownOpen"?: (event: LeDropdownBaseCustomEvent<void>) => void;
+        /**
+          * Emitted when an option is selected.
          */
-        "minHeight"?: string;
+        "onLeOptionSelect"?: (event: LeDropdownBaseCustomEvent<LeOptionSelectDetail>) => void;
         /**
-          * Minimum width constraint
+          * Whether the dropdown is open.
+          * @default false
          */
-        "minWidth"?: string;
+        "open"?: boolean;
         /**
-          * Order in the flex container (lower values come first)
+          * The options to display in the dropdown.
+          * @default []
          */
-        "order"?: number;
+        "options"?: LeOption[];
         /**
-          * Padding inside the box (CSS value like '8px', '1rem')
+          * Whether to show checkboxes for multiselect mode.
+          * @default true
          */
-        "padding"?: string;
+        "showCheckboxes"?: boolean;
         /**
-          * Flex shrink factor - how much the item should shrink relative to siblings
-          * @min 0
-          * @default 1
+          * Current value(s) - single value or array for multiselect.
          */
-        "shrink"?: number;
+        "value"?: LeOptionValue | LeOptionValue[];
         /**
-          * Width of the box (CSS value like '100px', '50%', 'auto')
+          * Width of the dropdown. If not set, matches trigger width.
          */
         "width"?: string;
     }
     /**
-     * A flexible button component with multiple variants and states.
-     * @cssprop --le-button-bg - Button background color
-     * @cssprop --le-button-color - Button text color
-     * @cssprop --le-button-border-radius - Button border radius
-     * @cssprop --le-button-padding-x - Button horizontal padding
-     * @cssprop --le-button-padding-y - Button vertical padding
-     * @csspart button - The native button element
-     * @csspart content - The button content wrapper
+     * A functional page header with scroll-aware behaviors.
+     * Features:
+     * - Static (default), sticky, or fixed positioning
+     * - Optional shrink-on-scroll behavior via `shrink-offset`
+     * - Optional reveal-on-scroll-up via `reveal-on-scroll` (sticky only)
+     * Slots:
+     * - `start`: left side (logo/back button)
+     * - `title`: centered/primary title content
+     * - `end`: right side actions
+     * - default: extra content row (e.g., tabs/search) rendered below main row
+     * @cssprop --le-header-bg - Background (color/gradient)
+     * @cssprop --le-header-color - Text color
+     * @cssprop --le-header-border - Border (e.g. 1px solid ...)
+     * @cssprop --le-header-shadow - Shadow/elevation
+     * @cssprop --le-header-max-width - Inner content max width
+     * @cssprop --le-header-padding-x - Horizontal padding
+     * @cssprop --le-header-padding-y - Vertical padding
+     * @cssprop --le-header-gap - Gap between zones
+     * @cssprop --le-header-height - Base height (main row)
+     * @cssprop --le-header-height-condensed - Condensed height when shrunk
+     * @cssprop --le-header-transition - Transition timing
+     * @cssprop --le-header-z - Z-index (fixed mode)
+     * @csspart header - The header container
+     * @csspart inner - Inner max-width container
+     * @csspart row - Main row
+     * @csspart start - Start zone
+     * @csspart title - Title zone
+     * @csspart end - End zone
+     * @csspart secondary - Secondary row
      * @cmsEditable true
-     * @cmsCategory Actions
+     * @cmsCategory Layout
      */
-    interface LeButton {
-        /**
-          * Button color theme (uses theme semantic colors)
-          * @allowedValues primary | secondary | success | warning | danger | info
-          * @default 'primary'
-         */
-        "color"?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+    interface LeHeader {
         /**
-          * Whether the button is disabled
+          * If true, expand the header when hovered
           * @default false
          */
-        "disabled"?: boolean;
+        "expandOnHover"?: boolean;
         /**
-          * Whether the button takes full width of its container
+          * Fixed positioning (out-of-flow). Takes precedence over `sticky`/`static`.
           * @default false
          */
-        "fullWidth"?: boolean;
-        /**
-          * Optional href to make the button act as a link
-         */
-        "href"?: string;
+        "fixed"?: boolean;
         /**
-          * Whether the button displays only an icon (square aspect ratio)
+          * Force static positioning (default). Ignored if `sticky` or `fixed` are true.
           * @default false
          */
-        "iconOnly"?: boolean;
-        /**
-          * Mode of the popover should be 'default' for internal use
-         */
-        "mode"?: 'default' | 'admin';
+        "isStatic"?: boolean;
         /**
-          * Emitted when the button is clicked. This is a custom event that wraps the native click but ensures the target is the le-button.
+          * Emits when the header shrinks/expands (only on change).
          */
-        "onClick"?: (event: LeButtonCustomEvent<PointerEvent>) => void;
+        "onLeHeaderShrinkChange"?: (event: LeHeaderCustomEvent<{ shrunk: boolean; y: number }>) => void;
         /**
-          * Whether the button is in a selected/active state
-          * @default false
+          * Emits whenever scroll-driven state changes.
          */
-        "selected"?: boolean;
+        "onLeHeaderState"?: (event: LeHeaderCustomEvent<{
+    y: number;
+    direction: 'up' | 'down';
+    revealed: boolean;
+    shrunk: boolean;
+  }>) => void;
         /**
-          * Button size
-          * @allowedValues small | medium | large
-          * @default 'medium'
+          * Emits when the header hides/shows (only on change).
          */
-        "size"?: 'small' | 'medium' | 'large';
+        "onLeHeaderVisibilityChange"?: (event: LeHeaderCustomEvent<{ visible: boolean; y: number }>) => void;
         /**
-          * Link target when href is set
+          * Sticky-only reveal behavior (hide on scroll down, show on scroll up). - missing/false: disabled - true/empty attribute: enabled with default threshold (16) - number (as string): enabled and used as threshold
          */
-        "target"?: string;
+        "revealOnScroll"?: string;
         /**
-          * The button type attribute
-          * @allowedValues button | submit | reset
-          * @default 'button'
+          * Shrink trigger. - missing/0: disabled - number (px): shrink when scrollY >= that value (but never before header height) - css var name (e.g. --foo): shrink when scrollY >= resolved var value - selector (e.g. .page-title): shrink when that element scrolls out of view above the viewport
          */
-        "type"?: 'button' | 'submit' | 'reset';
+        "shrinkOffset"?: string;
         /**
-          * Button variant style
-          * @allowedValues solid | outlined | clear
-          * @default 'solid'
+          * Sticky positioning (in-flow). Ignored if `fixed` is true.
+          * @default false
          */
-        "variant"?: 'solid' | 'outlined' | 'clear' | 'system';
+        "sticky"?: boolean;
     }
     /**
-     * A flexible card component with header, content, and footer slots.
-     * The card uses le-slot wrappers for each slot area. In admin mode,
-     * le-slot shows placeholders for CMS editing. In default mode,
-     * le-slot acts as a transparent passthrough.
-     * @cssprop --le-card-bg - Card background color
-     * @cssprop --le-card-border-radius - Card border radius
-     * @cssprop --le-card-shadow - Card box shadow
-     * @cssprop --le-card-padding - Card content padding
-     * @csspart card - The main card container
-     * @csspart header - The card header section
-     * @csspart content - The card content section
-     * @csspart footer - The card footer section
+     * Placeholder for `le-header`.
+     * Reserves space using the global CSS variable `--le-header-height`.
+     * The header component updates that variable when it renders.
+     * @cssprop --le-header-height - Published header height (px)
+     * @cmsInternal true
+     */
+    interface LeHeaderPlaceholder {
+    }
+    /**
+     * A multiselect component for selecting multiple options.
+     * Displays selected items as tags with optional search filtering.
      * @cmsEditable true
-     * @cmsCategory Layout
+     * @cmsCategory Form
+     * @example Basic multiselect
+     * ```html
+     * <le-multiselect
+     * placeholder="Select options..."
+     * options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
+     * ></le-multiselect>
+     * ```
+     * @example With max selections
+     * ```html
+     * <le-multiselect
+     * max-selections="3"
+     * options='[{"label": "Option 1"}, {"label": "Option 2"}, {"label": "Option 3"}, {"label": "Option 4"}]'
+     * ></le-multiselect>
+     * ```
+     * @example With search
+     * ```html
+     * <le-multiselect
+     * searchable
+     * placeholder="Search and select..."
+     * options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
+     * ></le-multiselect>
+     * ```
      */
-    interface LeCard {
+    interface LeMultiselect {
         /**
-          * Whether the card is interactive (clickable)
+          * Whether the multiselect is disabled.
           * @default false
          */
-        "interactive"?: boolean;
+        "disabled"?: boolean;
         /**
-          * Card variant style
-          * @allowedValues default | outlined | elevated
-          * @default 'default'
+          * Text to show when no options match the search.
+          * @default 'No results found'
          */
-        "variant"?: 'default' | 'outlined' | 'elevated';
-    }
-    /**
-     * A checkbox component with support for labels, descriptions, and external IDs.
-     * @cssprop --le-checkbox-size - Size of the checkbox input
-     * @cssprop --le-checkbox-color - Color of the checkbox when checked
-     * @cssprop --le-checkbox-label-color - Color of the label text
-     * @cssprop --le-checkbox-desc-color - Color of the description text
-     */
-    interface LeCheckbox {
+        "emptyText"?: string;
         /**
-          * Whether the checkbox is checked
+          * Whether the multiselect should take full width of its container.
           * @default false
          */
-        "checked"?: boolean;
+        "fullWidth"?: boolean;
         /**
-          * Whether the checkbox is disabled
-          * @default false
+          * Maximum number of selections allowed.
          */
-        "disabled"?: boolean;
+        "maxSelections"?: number;
         /**
-          * External ID for linking with external systems (e.g. database ID, PDF form field ID)
+          * Name attribute for form submission.
          */
-        "externalId"?: string;
+        "name"?: string;
         /**
-          * The name of the checkbox input
+          * Emitted when the selected values change.
          */
-        "name"?: string;
+        "onLeChange"?: (event: LeMultiselectCustomEvent<LeMultiOptionSelectDetail>) => void;
         /**
-          * Emitted when the checked state changes
+          * Emitted when the dropdown closes.
          */
-        "onChange"?: (event: LeCheckboxCustomEvent<{ checked: boolean; value: string; name: string; externalId: string }>) => void;
+        "onLeClose"?: (event: LeMultiselectCustomEvent<void>) => void;
         /**
-          * The value of the checkbox input
+          * Emitted when the dropdown opens.
          */
-        "value"?: string;
-    }
-    /**
-     * Component wrapper for admin mode editing.
-     * This component is used internally by other components to provide admin-mode
-     * editing capabilities. It wraps the component's rendered output and shows
-     * a settings popover for editing properties.
-     * In default mode, it acts as a simple passthrough (display: contents).
-     * In admin mode, it shows a border, component name header, and settings popover.
-     * The host element is found automatically by traversing up through the shadow DOM.
-     * Usage inside a component's render method:
-     * ```tsx
-     * render() {
-     *   return (
-     *     <le-component component="le-card">
-     *       <Host>...</Host>
-     *     </le-component>
-     *   );
-     * }
-     * ```
-     * @cmsInternal true
-     * @cmsCategory System
-     */
-    interface LeComponent {
+        "onLeOpen"?: (event: LeMultiselectCustomEvent<void>) => void;
         /**
-          * The tag name of the component (e.g., 'le-card'). Used to look up property metadata and display the component name.
+          * Whether the dropdown is currently open.
+          * @default false
          */
-        "component": string;
+        "open"?: boolean;
         /**
-          * Optional display name for the component. If not provided, the tag name will be formatted as the display name.
+          * The options to display in the dropdown.
+          * @default []
          */
-        "displayName"?: string;
+        "options"?: LeOption[] | string;
         /**
-          * Classes to apply to the host element. Allows parent components to pass their styling classes.
+          * Placeholder text when no options are selected.
+          * @default 'Select options...'
          */
-        "hostClass"?: string;
+        "placeholder"?: string;
         /**
-          * Inline styles to apply to the host element. Allows parent components to pass dynamic styles (e.g., flex properties).
+          * Whether selection is required.
+          * @default false
          */
-        "hostStyle"?: { [key: string]: string };
+        "required"?: boolean;
+        /**
+          * Whether the input is searchable.
+          * @default false
+         */
+        "searchable"?: boolean;
+        /**
+          * Whether to show a "Select All" option. Also accepts a string or array of strings to customize the label(s).
+          * @default false
+         */
+        "showSelectAll"?: boolean | string | string[];
+        /**
+          * Size variant of the multiselect.
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The currently selected values.
+          * @default []
+         */
+        "value"?: LeOptionValue[];
     }
     /**
      * A number input component with validation, keyboard controls, and custom spinners.
@@ -1461,6 +3406,8 @@ declare namespace LocalJSX {
      * A popover component for displaying floating content.
      * Uses the native HTML Popover API for proper layering with dialogs
      * and other top-layer elements. Falls back gracefully in older browsers.
+     * @csspart trigger - The popover trigger element
+     * @csspart content - The popover content wrapper
      * @cmsInternal true
      * @cmsCategory System
      */
@@ -1525,6 +3472,11 @@ declare namespace LocalJSX {
           * @default true
          */
         "showClose"?: boolean;
+        /**
+          * Should the popover's trigger take full width of its container
+          * @default false
+         */
+        "triggerFullWidth"?: boolean;
         /**
           * Fixed width for the popover (e.g., '300px', '20rem')
          */
@@ -1533,7 +3485,7 @@ declare namespace LocalJSX {
     /**
      * A flexible popup/dialog component for alerts, confirms, prompts, and custom content.
      * Uses the native HTML <dialog> element for proper modal behavior, accessibility,
-     * and focus management. Can be used declaratively in HTML or programmatically 
+     * and focus management. Can be used declaratively in HTML or programmatically
      * via leAlert(), leConfirm(), lePrompt().
      * @cmsInternal true
      * @cmsCategory System
@@ -1568,6 +3520,11 @@ declare namespace LocalJSX {
           * @default true
          */
         "modal"?: boolean;
+        /**
+          * The mode of the Le Kit (e.g., 'default' or 'admin')
+          * @default 'default'
+         */
+        "mode"?: LeKitMode;
         /**
           * Emitted when the popup is cancelled (Cancel clicked or dismissed)
          */
@@ -1611,14 +3568,189 @@ declare namespace LocalJSX {
     }
     interface LeRoundProgress {
         /**
-          * @default 0
+          * @default 0
+         */
+        "padding"?: number;
+        "paths"?: string;
+        /**
+          * @default 0
+         */
+        "value"?: number;
+    }
+    /**
+     * Displays scroll progress as a simple bar.
+     * If `track-scroll-progress` is present without a value, tracks the full document.
+     * If it is a selector string, tracks progress within the matched element.
+     * @cssprop --le-scroll-progress-height - Bar height
+     * @cssprop --le-scroll-progress-bg - Track background
+     * @cssprop --le-scroll-progress-fill - Fill color
+     * @cssprop --le-scroll-progress-sticky-top - If sticky, stop position to parent top
+     * @cssprop --le-scroll-progress-fixed-top - If fixed, distance from window top
+     * @cssprop --le-scroll-progress-fixed-left - If fixed, distance from window left
+     * @cssprop --le-scroll-progress-fixed-right - If fixed, distance from window right
+     * @cssprop --le-scroll-progress-z - Z-index of the progress bar (1001 by default, above header)
+     * @csspart track - Outer track
+     * @csspart fill - Inner fill
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeScrollProgress {
+        /**
+          * Boolean or selector string.
+         */
+        "trackScrollProgress"?: string;
+    }
+    /**
+     * A segmented control component (iOS-style toggle buttons).
+     * Perfect for toggling between a small set of related options.
+     * @cssprop --le-segmented-bg - Background color of the control
+     * @cssprop --le-segmented-padding - Padding around segments
+     * @cssprop --le-segmented-gap - Gap between segments
+     * @cssprop --le-segmented-radius - Border radius of the control
+     * @csspart container - The main container
+     * @csspart segment - Individual segment buttons
+     * @csspart segment-active - The currently active segment
+     * @cmsEditable true
+     * @cmsCategory Form
+     */
+    interface LeSegmentedControl {
+        /**
+          * Whether the control is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the control should take full width.
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Emitted when the selection changes.
+         */
+        "onLeChange"?: (event: LeSegmentedControlCustomEvent<LeOptionSelectDetail>) => void;
+        /**
+          * Array of options for the segmented control.
+          * @default []
+         */
+        "options"?: LeOption[];
+        /**
+          * Scroll behavior for overflowing tabs.
+          * @allowedValues auto | hidden | visible | scroll
+          * @default 'auto'
+         */
+        "overflow"?: 'auto' | 'hidden' | 'visible' | 'scroll';
+        /**
+          * Size of the control.
+          * @allowedValues small | medium | large
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The value of the currently selected option.
+         */
+        "value"?: LeOptionValue;
+    }
+    /**
+     * A select dropdown component for single selection.
+     * @cmsEditable true
+     * @cmsCategory Form
+     * @example Basic select
+     * ```html
+     * <le-select
+     * placeholder="Choose an option"
+     * options='[{"label": "Option 1", "value": "1"}, {"label": "Option 2", "value": "2"}]'
+     * ></le-select>
+     * ```
+     * @example With icons
+     * ```html
+     * <le-select
+     * options='[
+     * {"label": "Apple", "value": "apple", "iconStart": "🍎"},
+     * {"label": "Banana", "value": "banana", "iconStart": "🍌"}
+     * ]'
+     * ></le-select>
+     * ```
+     * @example Grouped options
+     * ```html
+     * <le-select
+     * options='[
+     * {"label": "Apple", "value": "apple", "group": "Fruits"},
+     * {"label": "Carrot", "value": "carrot", "group": "Vegetables"}
+     * ]'
+     * ></le-select>
+     * ```
+     */
+    interface LeSelect {
+        /**
+          * Whether the select is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Text to show when no options match the search.
+          * @default 'No results found'
+         */
+        "emptyText"?: string;
+        /**
+          * Whether the select should take full width of its container.
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Name attribute for form submission.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the selected value changes.
+         */
+        "onLeChange"?: (event: LeSelectCustomEvent<LeOptionSelectDetail>) => void;
+        /**
+          * Emitted when the dropdown closes.
+         */
+        "onLeClose"?: (event: LeSelectCustomEvent<void>) => void;
+        /**
+          * Emitted when the dropdown opens.
+         */
+        "onLeOpen"?: (event: LeSelectCustomEvent<void>) => void;
+        /**
+          * Whether the dropdown is currently open.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * The options to display in the dropdown.
+          * @default []
+         */
+        "options"?: LeOption[] | string;
+        /**
+          * Placeholder text when no option is selected.
+          * @default 'Select an option'
+         */
+        "placeholder"?: string;
+        /**
+          * Whether selection is required.
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * Whether the input is searchable.
+          * @default false
+         */
+        "searchable"?: boolean;
+        /**
+          * Size variant of the select.
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The currently selected value.
          */
-        "padding"?: number;
-        "paths"?: string;
+        "value"?: LeOptionValue;
         /**
-          * @default 0
+          * Visual variant of the select.
+          * @default 'default'
          */
-        "value"?: number;
+        "variant"?: 'default' | 'outlined' | 'solid';
     }
     /**
      * Slot placeholder component for admin/CMS mode.
@@ -1769,6 +3901,11 @@ declare namespace LocalJSX {
           * External ID for linking with external systems
          */
         "externalId"?: string;
+        /**
+          * Hide description slot
+          * @default false
+         */
+        "hideDescription"?: boolean;
         /**
           * Icon for the end icon
          */
@@ -1777,6 +3914,10 @@ declare namespace LocalJSX {
           * Icon for the start icon
          */
         "iconStart"?: string;
+        /**
+          * Pass the ref of the input element to the parent component
+         */
+        "inputRef"?: (el: HTMLInputElement) => void;
         /**
           * Label for the input
          */
@@ -1792,11 +3933,19 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value changes (on blur or Enter)
          */
-        "onChange"?: (event: LeStringInputCustomEvent<{ value: string; name: string; externalId: string }>) => void;
+        "onChange"?: (event: LeStringInputCustomEvent<{
+    value: string;
+    name: string;
+    externalId: string;
+  }>) => void;
         /**
           * Emitted when the input value changes (on keystroke)
          */
-        "onInput"?: (event: LeStringInputCustomEvent<{ value: string; name: string; externalId: string }>) => void;
+        "onInput"?: (event: LeStringInputCustomEvent<{
+    value: string;
+    name: string;
+    externalId: string;
+  }>) => void;
         /**
           * Placeholder text
          */
@@ -1816,6 +3965,344 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * A flexible tab component with multiple variants and states.
+     * @cssprop --le-tab-bg - Tab background color
+     * @cssprop --le-tab-color - Tab text color
+     * @cssprop --le-tab-border-radius - Tab border radius
+     * @cssprop --le-tab-padding-x - Tab horizontal padding
+     * @cssprop --le-tab-padding-y - Tab vertical padding
+     * @csspart button - The native button element
+     * @csspart content - The tab content wrapper
+     * @csspart icon-start - The start icon slot
+     * @csspart icon-end - The end icon slot
+     * @cmsEditable true
+     * @cmsCategory Actions
+     */
+    interface LeTab {
+        /**
+          * Alignment of the tab label without the end icon
+          * @allowedValues start | center | space-between | end
+          * @default 'center'
+         */
+        "align"?: 'start' | 'center' | 'space-between' | 'end';
+        /**
+          * Whether the tab is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the tab can get focus needed for accessibility when used in custom tab implementations
+          * @default true
+         */
+        "focusable"?: boolean;
+        /**
+          * Whether the tab takes full width of its container
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Optional href to make the tab act as a link
+         */
+        "href"?: string;
+        /**
+          * Icon only tab image or emoji if this prop is set, the tab will render only the icon slot
+         */
+        "icon"?: string | Node;
+        /**
+          * End icon image or emoji
+         */
+        "iconEnd"?: string | Node;
+        /**
+          * Start icon image or emoji
+         */
+        "iconStart"?: string | Node;
+        /**
+          * Label if it is not provided via slot
+         */
+        "label"?: string;
+        /**
+          * Mode of the popover should be 'default' for internal use
+         */
+        "mode"?: 'default' | 'admin';
+        /**
+          * Emitted when the tab is clicked. This is a custom event that wraps the native click but ensures the target is the le-tab.
+         */
+        "onClick"?: (event: LeTabCustomEvent<PointerEvent>) => void;
+        /**
+          * Position of the tabs when used within a le-tabs component
+          * @allowedValues top | bottom | start | end
+          * @default 'top'
+         */
+        "position"?: 'top' | 'bottom' | 'start' | 'end';
+        /**
+          * Whether the tab is in a selected/active state
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * Whether to show the label when in icon-only mode
+          * @default false
+         */
+        "showLabel"?: boolean;
+        /**
+          * Tab size
+          * @allowedValues small | medium | large
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Link target when href is set
+         */
+        "target"?: string;
+        /**
+          * Value of the tab, defaults to label if not provided
+         */
+        "value"?: string;
+        /**
+          * Tab variant style
+          * @allowedValues solid | underlined | clear | enclosed | icon-only
+          * @default 'underlined'
+         */
+        "variant"?: 'underlined' | 'solid' | 'pills' | 'enclosed' | 'icon-only';
+    }
+    /**
+     * A presentational tab bar component without panels.
+     * Use this for navigation/routing scenarios where you manage the content
+     * externally based on the selection events. For tabs with built-in panels,
+     * use `le-tabs` instead.
+     * @cssprop --le-tab-bar-border-color - Border color
+     * @cssprop --le-tab-bar-gap - Gap between tabs
+     * @cssprop --le-tab-bar-indicator-color - Active indicator color
+     * @cssprop --le-tab-bar-padding-x - Horizontal padding for tabs
+     * @cssprop --le-tab-bar-padding-y - Vertical padding for tabs
+     * @csspart tablist - The tab button container
+     * @csspart tab - Individual tab buttons
+     * @csspart tab-active - The currently active tab
+     * @cmsEditable true
+     * @cmsCategory Navigation
+     */
+    interface LeTabBar {
+        /**
+          * Whether to show a border below the tab bar.
+          * @default true
+         */
+        "bordered"?: boolean;
+        /**
+          * Whether tabs should stretch to fill available width.
+          * @default true
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Emitted when the selected tab changes.
+         */
+        "onLeTabChange"?: (event: LeTabBarCustomEvent<LeOptionSelectDetail>) => void;
+        /**
+          * Position of the tab bar.
+          * @allowedValues top | bottom
+          * @default 'top'
+         */
+        "position"?: 'top' | 'bottom';
+        /**
+          * The value of the currently selected tab.
+         */
+        "selected"?: LeOptionValue;
+        /**
+          * Whether to show labels in icon-only mode.
+          * @default false
+         */
+        "showLabels"?: boolean;
+        /**
+          * Size of the tabs.
+          * @allowedValues small | medium | large
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Array of tab options defining the tabs to display.
+          * @default []
+         */
+        "tabs"?: LeOption[];
+    }
+    /**
+     * A tab panel component used as a child of le-tabs.
+     * Each le-tab-panel defines both the tab button label and the panel content.
+     * The parent le-tabs component automatically reads these panels and creates
+     * the tab interface.
+     * @cmsEditable true
+     * @cmsCategory Navigation
+     */
+    interface LeTabPanel {
+        /**
+          * Whether this tab is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Icon displayed at the end of the tab button.
+         */
+        "iconEnd"?: string;
+        /**
+          * Icon displayed at the start of the tab button. Can be an emoji, URL, or icon class.
+         */
+        "iconStart"?: string;
+        /**
+          * The label displayed in the tab button.
+         */
+        "label": string;
+        /**
+          * Whether to render the panel content only when active (lazy loading). When true, content is not rendered until the tab is first selected. When false (default), content is always in DOM but hidden when inactive.
+          * @default false
+         */
+        "lazy"?: boolean;
+        /**
+          * The value used to identify this tab. Defaults to the label if not provided.
+         */
+        "value"?: string;
+    }
+    /**
+     * A flexible tabs component for organizing content into tabbed panels.
+     * Supports two modes:
+     * 1. **Declarative**: Use `<le-tab-panel>` children to define tabs and content
+     * 2. **Programmatic**: Use the `tabs` prop with named slots for content
+     * Full keyboard navigation and ARIA support included.
+     * @cssprop --le-tabs-border-color - Border color for tab list
+     * @cssprop --le-tabs-gap - Gap between tabs
+     * @cssprop --le-tabs-indicator-color - Active tab indicator color
+     * @cssprop --le-tabs-padding-x - Horizontal padding for tab buttons
+     * @cssprop --le-tabs-padding-y - Vertical padding for tab buttons
+     * @csspart tablist - The tab button container (role="tablist")
+     * @csspart tab - Individual tab buttons
+     * @csspart tab-active - The currently active tab
+     * @csspart panels - Container for panel content
+     * @csspart panel - Individual panel containers
+     * @cmsEditable true
+     * @cmsCategory Navigation
+     */
+    interface LeTabs {
+        /**
+          * Whether tabs should stretch to fill available width.
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Emitted when the selected tab changes.
+         */
+        "onLeTabChange"?: (event: LeTabsCustomEvent<LeOptionSelectDetail>) => void;
+        /**
+          * Orientation of the tabs.
+          * @allowedValues horizontal | vertical
+          * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+        /**
+          * Scroll behavior for overflowing tabs.
+          * @allowedValues auto | hidden | visible | scroll
+          * @default 'auto'
+         */
+        "overflow"?: 'auto' | 'hidden' | 'visible' | 'scroll';
+        /**
+          * Position of the tabs relative to the panels.
+          * @allowedValues start | end
+          * @default 'start'
+         */
+        "position"?: 'start' | 'end';
+        /**
+          * The value of the currently selected tab. If not provided, defaults to the first tab.
+         */
+        "selected"?: LeOptionValue;
+        /**
+          * Size of the tabs.
+          * @allowedValues sm | md | lg
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Array of tab options (programmatic mode). If le-tab-panel children exist, they take precedence.
+          * @default []
+         */
+        "tabs"?: LeOption[];
+        /**
+          * Tab variant style.
+          * @allowedValues underlined | solid | pills | enclosed | icon-only
+          * @default 'underlined'
+         */
+        "variant"?: 'underlined' | 'solid' | 'pills' | 'enclosed' | 'icon-only';
+        /**
+          * Wrap the tabs if they exceed container width.
+          * @default false
+         */
+        "wrap"?: boolean;
+    }
+    /**
+     * A tag/chip component for displaying labels with optional dismiss functionality.
+     * @cmsEditable false
+     * @cmsCategory Form
+     * @example Basic tag
+     * ```html
+     * <le-tag label="JavaScript"></le-tag>
+     * ```
+     * @example Dismissible tag
+     * ```html
+     * <le-tag label="Remove me" dismissible></le-tag>
+     * ```
+     * @example With icon
+     * ```html
+     * <le-tag label="Settings" icon="⚙️"></le-tag>
+     * ```
+     * @example Different sizes
+     * ```html
+     * <le-tag label="Small" size="small"></le-tag>
+     * <le-tag label="Medium" size="medium"></le-tag>
+     * <le-tag label="Large" size="large"></le-tag>
+     * ```
+     * @example Different variants
+     * ```html
+     * <le-tag label="Default" variant="default"></le-tag>
+     * <le-tag label="Primary" variant="primary"></le-tag>
+     * <le-tag label="Success" variant="success"></le-tag>
+     * <le-tag label="Warning" variant="warning"></le-tag>
+     * <le-tag label="Danger" variant="danger"></le-tag>
+     * ```
+     */
+    interface LeTag {
+        /**
+          * Whether the tag is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the tag can be dismissed (shows close button).
+          * @default false
+         */
+        "dismissible"?: boolean;
+        /**
+          * Icon to display before the label. Can be an emoji, URL, or icon name.
+         */
+        "icon"?: string;
+        /**
+          * The text label to display in the tag.
+         */
+        "label"?: string;
+        /**
+          * Mode of the popover should be 'default' for internal use
+         */
+        "mode"?: 'default' | 'admin';
+        /**
+          * Emitted when the dismiss button is clicked.
+         */
+        "onLeDismiss"?: (event: LeTagCustomEvent<void>) => void;
+        /**
+          * The size of the tag.
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The visual variant of the tag.
+          * @default 'default'
+         */
+        "variant"?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    }
     /**
      * A text component with rich text editing capabilities in admin mode.
      * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)
@@ -1871,14 +4358,29 @@ declare namespace LocalJSX {
         "le-button": LeButton;
         "le-card": LeCard;
         "le-checkbox": LeCheckbox;
+        "le-collapse": LeCollapse;
+        "le-combobox": LeCombobox;
         "le-component": LeComponent;
+        "le-current-heading": LeCurrentHeading;
+        "le-dropdown-base": LeDropdownBase;
+        "le-header": LeHeader;
+        "le-header-placeholder": LeHeaderPlaceholder;
+        "le-multiselect": LeMultiselect;
         "le-number-input": LeNumberInput;
         "le-popover": LePopover;
         "le-popup": LePopup;
         "le-round-progress": LeRoundProgress;
+        "le-scroll-progress": LeScrollProgress;
+        "le-segmented-control": LeSegmentedControl;
+        "le-select": LeSelect;
         "le-slot": LeSlot;
         "le-stack": LeStack;
         "le-string-input": LeStringInput;
+        "le-tab": LeTab;
+        "le-tab-bar": LeTabBar;
+        "le-tab-panel": LeTabPanel;
+        "le-tabs": LeTabs;
+        "le-tag": LeTag;
         "le-text": LeText;
         "le-turntable": LeTurntable;
     }
@@ -1909,6 +4411,8 @@ declare module "@stencil/core" {
              * @cssprop --le-button-padding-y - Button vertical padding
              * @csspart button - The native button element
              * @csspart content - The button content wrapper
+             * @csspart icon-start - The start icon slot
+             * @csspart icon-end - The end icon slot
              * @cmsEditable true
              * @cmsCategory Actions
              */
@@ -1938,6 +4442,40 @@ declare module "@stencil/core" {
              * @cssprop --le-checkbox-desc-color - Color of the description text
              */
             "le-checkbox": LocalJSX.LeCheckbox & JSXBase.HTMLAttributes<HTMLLeCheckboxElement>;
+            /**
+             * Animated show/hide wrapper.
+             * Supports height collapse (auto->0) and/or fading.
+             * Can optionally listen to the nearest `le-header` shrink events.
+             * @cssprop --le-collapse-duration - Transition duration
+             * @csspart region - Collapsible region
+             * @csspart content - Inner content
+             * @cmsEditable true
+             * @cmsCategory Layout
+             */
+            "le-collapse": LocalJSX.LeCollapse & JSXBase.HTMLAttributes<HTMLLeCollapseElement>;
+            /**
+             * A combobox component with searchable dropdown.
+             * Combines a text input with a dropdown list, allowing users to
+             * filter options by typing or select from the list.
+             * @cmsEditable true
+             * @cmsCategory Form
+             * @example Basic combobox
+             * ```html
+             * <le-combobox
+             * placeholder="Search..."
+             * options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
+             * ></le-combobox>
+             * ```
+             * @example Allow custom values
+             * ```html
+             * <le-combobox
+             * placeholder="Type or select..."
+             * allow-custom
+             * options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
+             * ></le-combobox>
+             * ```
+             */
+            "le-combobox": LocalJSX.LeCombobox & JSXBase.HTMLAttributes<HTMLLeComboboxElement>;
             /**
              * Component wrapper for admin mode editing.
              * This component is used internally by other components to provide admin-mode
@@ -1960,6 +4498,98 @@ declare module "@stencil/core" {
              * @cmsCategory System
              */
             "le-component": LocalJSX.LeComponent & JSXBase.HTMLAttributes<HTMLLeComponentElement>;
+            /**
+             * Shows a "smart" header title based on what has scrolled out of view.
+             * When `selector` matches multiple elements, the title becomes the last element
+             * (top-to-bottom) that has fully scrolled out above the viewport.
+             * @csspart title - The rendered title
+             * @cmsEditable true
+             * @cmsCategory Layout
+             */
+            "le-current-heading": LocalJSX.LeCurrentHeading & JSXBase.HTMLAttributes<HTMLLeCurrentHeadingElement>;
+            /**
+             * Internal dropdown base component that provides shared functionality
+             * for select, combobox, and multiselect components.
+             * Wraps le-popover for positioning and provides:
+             * - Option list rendering with groups
+             * - Keyboard navigation (↑↓, Enter, Escape, Home/End)
+             * - Option filtering support
+             * - Single and multi-select modes
+             * @cmsInternal true
+             * @cmsCategory System
+             */
+            "le-dropdown-base": LocalJSX.LeDropdownBase & JSXBase.HTMLAttributes<HTMLLeDropdownBaseElement>;
+            /**
+             * A functional page header with scroll-aware behaviors.
+             * Features:
+             * - Static (default), sticky, or fixed positioning
+             * - Optional shrink-on-scroll behavior via `shrink-offset`
+             * - Optional reveal-on-scroll-up via `reveal-on-scroll` (sticky only)
+             * Slots:
+             * - `start`: left side (logo/back button)
+             * - `title`: centered/primary title content
+             * - `end`: right side actions
+             * - default: extra content row (e.g., tabs/search) rendered below main row
+             * @cssprop --le-header-bg - Background (color/gradient)
+             * @cssprop --le-header-color - Text color
+             * @cssprop --le-header-border - Border (e.g. 1px solid ...)
+             * @cssprop --le-header-shadow - Shadow/elevation
+             * @cssprop --le-header-max-width - Inner content max width
+             * @cssprop --le-header-padding-x - Horizontal padding
+             * @cssprop --le-header-padding-y - Vertical padding
+             * @cssprop --le-header-gap - Gap between zones
+             * @cssprop --le-header-height - Base height (main row)
+             * @cssprop --le-header-height-condensed - Condensed height when shrunk
+             * @cssprop --le-header-transition - Transition timing
+             * @cssprop --le-header-z - Z-index (fixed mode)
+             * @csspart header - The header container
+             * @csspart inner - Inner max-width container
+             * @csspart row - Main row
+             * @csspart start - Start zone
+             * @csspart title - Title zone
+             * @csspart end - End zone
+             * @csspart secondary - Secondary row
+             * @cmsEditable true
+             * @cmsCategory Layout
+             */
+            "le-header": LocalJSX.LeHeader & JSXBase.HTMLAttributes<HTMLLeHeaderElement>;
+            /**
+             * Placeholder for `le-header`.
+             * Reserves space using the global CSS variable `--le-header-height`.
+             * The header component updates that variable when it renders.
+             * @cssprop --le-header-height - Published header height (px)
+             * @cmsInternal true
+             */
+            "le-header-placeholder": LocalJSX.LeHeaderPlaceholder & JSXBase.HTMLAttributes<HTMLLeHeaderPlaceholderElement>;
+            /**
+             * A multiselect component for selecting multiple options.
+             * Displays selected items as tags with optional search filtering.
+             * @cmsEditable true
+             * @cmsCategory Form
+             * @example Basic multiselect
+             * ```html
+             * <le-multiselect
+             * placeholder="Select options..."
+             * options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
+             * ></le-multiselect>
+             * ```
+             * @example With max selections
+             * ```html
+             * <le-multiselect
+             * max-selections="3"
+             * options='[{"label": "Option 1"}, {"label": "Option 2"}, {"label": "Option 3"}, {"label": "Option 4"}]'
+             * ></le-multiselect>
+             * ```
+             * @example With search
+             * ```html
+             * <le-multiselect
+             * searchable
+             * placeholder="Search and select..."
+             * options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
+             * ></le-multiselect>
+             * ```
+             */
+            "le-multiselect": LocalJSX.LeMultiselect & JSXBase.HTMLAttributes<HTMLLeMultiselectElement>;
             /**
              * A number input component with validation, keyboard controls, and custom spinners.
              * @cssprop --le-input-bg - Input background color
@@ -1975,6 +4605,8 @@ declare module "@stencil/core" {
              * A popover component for displaying floating content.
              * Uses the native HTML Popover API for proper layering with dialogs
              * and other top-layer elements. Falls back gracefully in older browsers.
+             * @csspart trigger - The popover trigger element
+             * @csspart content - The popover content wrapper
              * @cmsInternal true
              * @cmsCategory System
              */
@@ -1982,13 +4614,76 @@ declare module "@stencil/core" {
             /**
              * A flexible popup/dialog component for alerts, confirms, prompts, and custom content.
              * Uses the native HTML <dialog> element for proper modal behavior, accessibility,
-             * and focus management. Can be used declaratively in HTML or programmatically 
+             * and focus management. Can be used declaratively in HTML or programmatically
              * via leAlert(), leConfirm(), lePrompt().
              * @cmsInternal true
              * @cmsCategory System
              */
             "le-popup": LocalJSX.LePopup & JSXBase.HTMLAttributes<HTMLLePopupElement>;
             "le-round-progress": LocalJSX.LeRoundProgress & JSXBase.HTMLAttributes<HTMLLeRoundProgressElement>;
+            /**
+             * Displays scroll progress as a simple bar.
+             * If `track-scroll-progress` is present without a value, tracks the full document.
+             * If it is a selector string, tracks progress within the matched element.
+             * @cssprop --le-scroll-progress-height - Bar height
+             * @cssprop --le-scroll-progress-bg - Track background
+             * @cssprop --le-scroll-progress-fill - Fill color
+             * @cssprop --le-scroll-progress-sticky-top - If sticky, stop position to parent top
+             * @cssprop --le-scroll-progress-fixed-top - If fixed, distance from window top
+             * @cssprop --le-scroll-progress-fixed-left - If fixed, distance from window left
+             * @cssprop --le-scroll-progress-fixed-right - If fixed, distance from window right
+             * @cssprop --le-scroll-progress-z - Z-index of the progress bar (1001 by default, above header)
+             * @csspart track - Outer track
+             * @csspart fill - Inner fill
+             * @cmsEditable true
+             * @cmsCategory Layout
+             */
+            "le-scroll-progress": LocalJSX.LeScrollProgress & JSXBase.HTMLAttributes<HTMLLeScrollProgressElement>;
+            /**
+             * A segmented control component (iOS-style toggle buttons).
+             * Perfect for toggling between a small set of related options.
+             * @cssprop --le-segmented-bg - Background color of the control
+             * @cssprop --le-segmented-padding - Padding around segments
+             * @cssprop --le-segmented-gap - Gap between segments
+             * @cssprop --le-segmented-radius - Border radius of the control
+             * @csspart container - The main container
+             * @csspart segment - Individual segment buttons
+             * @csspart segment-active - The currently active segment
+             * @cmsEditable true
+             * @cmsCategory Form
+             */
+            "le-segmented-control": LocalJSX.LeSegmentedControl & JSXBase.HTMLAttributes<HTMLLeSegmentedControlElement>;
+            /**
+             * A select dropdown component for single selection.
+             * @cmsEditable true
+             * @cmsCategory Form
+             * @example Basic select
+             * ```html
+             * <le-select
+             * placeholder="Choose an option"
+             * options='[{"label": "Option 1", "value": "1"}, {"label": "Option 2", "value": "2"}]'
+             * ></le-select>
+             * ```
+             * @example With icons
+             * ```html
+             * <le-select
+             * options='[
+             * {"label": "Apple", "value": "apple", "iconStart": "🍎"},
+             * {"label": "Banana", "value": "banana", "iconStart": "🍌"}
+             * ]'
+             * ></le-select>
+             * ```
+             * @example Grouped options
+             * ```html
+             * <le-select
+             * options='[
+             * {"label": "Apple", "value": "apple", "group": "Fruits"},
+             * {"label": "Carrot", "value": "carrot", "group": "Vegetables"}
+             * ]'
+             * ></le-select>
+             * ```
+             */
+            "le-select": LocalJSX.LeSelect & JSXBase.HTMLAttributes<HTMLLeSelectElement>;
             /**
              * Slot placeholder component for admin/CMS mode.
              * This component renders a visual placeholder for slots when in admin mode,
@@ -2019,6 +4714,99 @@ declare module "@stencil/core" {
              * @cssprop --le-input-padding - Input padding
              */
             "le-string-input": LocalJSX.LeStringInput & JSXBase.HTMLAttributes<HTMLLeStringInputElement>;
+            /**
+             * A flexible tab component with multiple variants and states.
+             * @cssprop --le-tab-bg - Tab background color
+             * @cssprop --le-tab-color - Tab text color
+             * @cssprop --le-tab-border-radius - Tab border radius
+             * @cssprop --le-tab-padding-x - Tab horizontal padding
+             * @cssprop --le-tab-padding-y - Tab vertical padding
+             * @csspart button - The native button element
+             * @csspart content - The tab content wrapper
+             * @csspart icon-start - The start icon slot
+             * @csspart icon-end - The end icon slot
+             * @cmsEditable true
+             * @cmsCategory Actions
+             */
+            "le-tab": LocalJSX.LeTab & JSXBase.HTMLAttributes<HTMLLeTabElement>;
+            /**
+             * A presentational tab bar component without panels.
+             * Use this for navigation/routing scenarios where you manage the content
+             * externally based on the selection events. For tabs with built-in panels,
+             * use `le-tabs` instead.
+             * @cssprop --le-tab-bar-border-color - Border color
+             * @cssprop --le-tab-bar-gap - Gap between tabs
+             * @cssprop --le-tab-bar-indicator-color - Active indicator color
+             * @cssprop --le-tab-bar-padding-x - Horizontal padding for tabs
+             * @cssprop --le-tab-bar-padding-y - Vertical padding for tabs
+             * @csspart tablist - The tab button container
+             * @csspart tab - Individual tab buttons
+             * @csspart tab-active - The currently active tab
+             * @cmsEditable true
+             * @cmsCategory Navigation
+             */
+            "le-tab-bar": LocalJSX.LeTabBar & JSXBase.HTMLAttributes<HTMLLeTabBarElement>;
+            /**
+             * A tab panel component used as a child of le-tabs.
+             * Each le-tab-panel defines both the tab button label and the panel content.
+             * The parent le-tabs component automatically reads these panels and creates
+             * the tab interface.
+             * @cmsEditable true
+             * @cmsCategory Navigation
+             */
+            "le-tab-panel": LocalJSX.LeTabPanel & JSXBase.HTMLAttributes<HTMLLeTabPanelElement>;
+            /**
+             * A flexible tabs component for organizing content into tabbed panels.
+             * Supports two modes:
+             * 1. **Declarative**: Use `<le-tab-panel>` children to define tabs and content
+             * 2. **Programmatic**: Use the `tabs` prop with named slots for content
+             * Full keyboard navigation and ARIA support included.
+             * @cssprop --le-tabs-border-color - Border color for tab list
+             * @cssprop --le-tabs-gap - Gap between tabs
+             * @cssprop --le-tabs-indicator-color - Active tab indicator color
+             * @cssprop --le-tabs-padding-x - Horizontal padding for tab buttons
+             * @cssprop --le-tabs-padding-y - Vertical padding for tab buttons
+             * @csspart tablist - The tab button container (role="tablist")
+             * @csspart tab - Individual tab buttons
+             * @csspart tab-active - The currently active tab
+             * @csspart panels - Container for panel content
+             * @csspart panel - Individual panel containers
+             * @cmsEditable true
+             * @cmsCategory Navigation
+             */
+            "le-tabs": LocalJSX.LeTabs & JSXBase.HTMLAttributes<HTMLLeTabsElement>;
+            /**
+             * A tag/chip component for displaying labels with optional dismiss functionality.
+             * @cmsEditable false
+             * @cmsCategory Form
+             * @example Basic tag
+             * ```html
+             * <le-tag label="JavaScript"></le-tag>
+             * ```
+             * @example Dismissible tag
+             * ```html
+             * <le-tag label="Remove me" dismissible></le-tag>
+             * ```
+             * @example With icon
+             * ```html
+             * <le-tag label="Settings" icon="⚙️"></le-tag>
+             * ```
+             * @example Different sizes
+             * ```html
+             * <le-tag label="Small" size="small"></le-tag>
+             * <le-tag label="Medium" size="medium"></le-tag>
+             * <le-tag label="Large" size="large"></le-tag>
+             * ```
+             * @example Different variants
+             * ```html
+             * <le-tag label="Default" variant="default"></le-tag>
+             * <le-tag label="Primary" variant="primary"></le-tag>
+             * <le-tag label="Success" variant="success"></le-tag>
+             * <le-tag label="Warning" variant="warning"></le-tag>
+             * <le-tag label="Danger" variant="danger"></le-tag>
+             * ```
+             */
+            "le-tag": LocalJSX.LeTag & JSXBase.HTMLAttributes<HTMLLeTagElement>;
             /**
              * A text component with rich text editing capabilities in admin mode.
              * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)