le-kit 0.1.14 → 0.1.15

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,100 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * 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 +398,198 @@ export namespace Components {
          */
         "hostStyle"?: { [key: string]: 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 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 +663,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 +733,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 +750,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 +789,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
@@ -513,6 +834,150 @@ export namespace Components {
          */
         "value": number;
     }
+    /**
+     * 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;
+        /**
+          * 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;
+        /**
+          * 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,
@@ -658,6 +1123,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 +1136,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,12 +1172,350 @@ 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
+     * 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;
+        /**
+          * Get tab configuration for parent component
+         */
+        "getTabConfig": () => Promise<{ label: string; value: string; icon: string | Node; iconStart?: string | Node; iconEnd?: string | Node; disabled: 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';
+        /**
+          * 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;
+        /**
+          * 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;
+        /**
+          * 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
@@ -756,6 +1568,18 @@ 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 LeMultiselectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeMultiselectElement;
+}
 export interface LeNumberInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLeNumberInputElement;
@@ -768,6 +1592,14 @@ 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;
@@ -776,6 +1608,22 @@ 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.
@@ -807,6 +1655,8 @@ declare global {
      * @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
      */
@@ -870,6 +1720,48 @@ declare global {
         prototype: HTMLLeCheckboxElement;
         new (): HTMLLeCheckboxElement;
     };
+    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,6 +1789,83 @@ declare global {
         prototype: HTMLLeComponentElement;
         new (): HTMLLeComponentElement;
     };
+    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 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 };
@@ -933,6 +1902,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 +1930,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 +1955,85 @@ declare global {
         prototype: HTMLLeRoundProgressElement;
         new (): HTMLLeRoundProgressElement;
     };
+    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 +2076,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 +2110,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 +2302,24 @@ declare global {
         "le-button": HTMLLeButtonElement;
         "le-card": HTMLLeCardElement;
         "le-checkbox": HTMLLeCheckboxElement;
+        "le-combobox": HTMLLeComboboxElement;
         "le-component": HTMLLeComponentElement;
+        "le-dropdown-base": HTMLLeDropdownBaseElement;
+        "le-multiselect": HTMLLeMultiselectElement;
         "le-number-input": HTMLLeNumberInputElement;
         "le-popover": HTMLLePopoverElement;
         "le-popup": HTMLLePopupElement;
         "le-round-progress": HTMLLeRoundProgressElement;
+        "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;
     }
@@ -1212,10 +2442,18 @@ declare namespace LocalJSX {
      * @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
@@ -1237,10 +2475,17 @@ declare namespace LocalJSX {
          */
         "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
          */
@@ -1341,6 +2586,104 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * 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
@@ -1380,6 +2723,198 @@ declare namespace LocalJSX {
          */
         "hostStyle"?: { [key: string]: 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.
+         */
+        "onLeOptionSelect"?: (event: LeDropdownBaseCustomEvent<LeOptionSelectDetail>) => void;
+        /**
+          * Whether the dropdown is open.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * The options to display in the dropdown.
+          * @default []
+         */
+        "options"?: LeOption[];
+        /**
+          * Whether to show checkboxes for multiselect mode.
+          * @default true
+         */
+        "showCheckboxes"?: boolean;
+        /**
+          * 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 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 {
+        /**
+          * 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;
+        /**
+          * Maximum number of selections allowed.
+         */
+        "maxSelections"?: number;
+        /**
+          * Name attribute for form submission.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the selected values change.
+         */
+        "onLeChange"?: (event: LeMultiselectCustomEvent<LeMultiOptionSelectDetail>) => void;
+        /**
+          * Emitted when the dropdown closes.
+         */
+        "onLeClose"?: (event: LeMultiselectCustomEvent<void>) => void;
+        /**
+          * Emitted when the dropdown opens.
+         */
+        "onLeOpen"?: (event: LeMultiselectCustomEvent<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 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;
+        /**
+          * 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
@@ -1461,6 +2996,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 +3062,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 +3075,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 +3110,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)
          */
@@ -1581,44 +3128,196 @@ declare namespace LocalJSX {
          */
         "onLeConfirm"?: (event: LePopupCustomEvent<PopupResult>) => void;
         /**
-          * Emitted when the popup opens
+          * Emitted when the popup opens
+         */
+        "onLeOpen"?: (event: LePopupCustomEvent<void>) => void;
+        /**
+          * Whether the popup is currently visible
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Placeholder text for prompt input
+          * @default ''
+         */
+        "placeholder"?: string;
+        /**
+          * Optional title for the popup header
+         */
+        "popupTitle"?: string;
+        /**
+          * Position of the popup on screen
+          * @default 'center'
+         */
+        "position"?: PopupPosition;
+        /**
+          * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom
+          * @default 'alert'
+         */
+        "type"?: PopupType;
+    }
+    interface LeRoundProgress {
+        /**
+          * @default 0
+         */
+        "padding"?: number;
+        "paths"?: string;
+        /**
+          * @default 0
+         */
+        "value"?: number;
+    }
+    /**
+     * 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: LePopupCustomEvent<void>) => void;
+        "onLeOpen"?: (event: LeSelectCustomEvent<void>) => void;
         /**
-          * Whether the popup is currently visible
+          * Whether the dropdown is currently open.
           * @default false
          */
         "open"?: boolean;
         /**
-          * Placeholder text for prompt input
-          * @default ''
+          * The options to display in the dropdown.
+          * @default []
+         */
+        "options"?: LeOption[] | string;
+        /**
+          * Placeholder text when no option is selected.
+          * @default 'Select an option'
          */
         "placeholder"?: string;
         /**
-          * Optional title for the popup header
+          * Whether selection is required.
+          * @default false
          */
-        "popupTitle"?: string;
+        "required"?: boolean;
         /**
-          * Position of the popup on screen
-          * @default 'center'
+          * Whether the input is searchable.
+          * @default false
          */
-        "position"?: PopupPosition;
+        "searchable"?: boolean;
         /**
-          * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom
-          * @default 'alert'
+          * Size variant of the select.
+          * @default 'medium'
          */
-        "type"?: PopupType;
-    }
-    interface LeRoundProgress {
+        "size"?: 'small' | 'medium' | 'large';
         /**
-          * @default 0
+          * 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 +3468,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 +3481,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 +3500,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 +3532,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 +3925,24 @@ declare namespace LocalJSX {
         "le-button": LeButton;
         "le-card": LeCard;
         "le-checkbox": LeCheckbox;
+        "le-combobox": LeCombobox;
         "le-component": LeComponent;
+        "le-dropdown-base": LeDropdownBase;
+        "le-multiselect": LeMultiselect;
         "le-number-input": LeNumberInput;
         "le-popover": LePopover;
         "le-popup": LePopup;
         "le-round-progress": LeRoundProgress;
+        "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 +3973,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 +4004,29 @@ declare module "@stencil/core" {
              * @cssprop --le-checkbox-desc-color - Color of the description text
              */
             "le-checkbox": LocalJSX.LeCheckbox & JSXBase.HTMLAttributes<HTMLLeCheckboxElement>;
+            /**
+             * 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 +4049,47 @@ declare module "@stencil/core" {
              * @cmsCategory System
              */
             "le-component": LocalJSX.LeComponent & JSXBase.HTMLAttributes<HTMLLeComponentElement>;
+            /**
+             * 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 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 +4105,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 +4114,58 @@ 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>;
+            /**
+             * 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 +4196,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)