le-kit 0.0.3 → 0.1.0

package/dist/types/components.d.ts

@@ -1,71 +1,2039 @@
+/* eslint-disable */
 /* tslint:disable */
 /**
  * This is an autogenerated file created by the Stencil compiler.
  * It contains typing information for all components that exist in this project.
  */
-
-
-import './stencil.core';
-
-
-
-
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { PopupPosition, PopupResult, PopupType } from "./components/le-popup/le-popup";
+export { PopupPosition, PopupResult, PopupType } from "./components/le-popup/le-popup";
 export namespace Components {
-
-  interface LeRoundProgress {
-    'padding': number;
-    'paths': string;
-    'value': number;
-  }
-  interface LeRoundProgressAttributes extends StencilHTMLAttributes {
-    'padding'?: number;
-    'paths'?: string;
-    'value'?: number;
-  }
-
-  interface LeTurntable {
-    'center': string;
-    'value': number;
-  }
-  interface LeTurntableAttributes extends StencilHTMLAttributes {
-    'center'?: string;
-    'value'?: number;
-  }
+    /**
+     * A flexible box component for use as a flex item within le-stack.
+     * `le-box` wraps content and provides flex item properties like grow, shrink,
+     * basis, and self-alignment. It can also control its internal content alignment.
+     * @cssprop --le-box-bg - Background color
+     * @cssprop --le-box-padding - Padding inside the box
+     * @cssprop --le-box-border-radius - Border radius
+     * @csspart box - The main box container
+     * @csspart content - The inner content wrapper
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeBox {
+        /**
+          * Internal horizontal alignment of content
+          * @allowedValues start | center | end | stretch
+          * @default 'stretch'
+         */
+        "alignContent": 'start' | 'center' | 'end' | 'stretch';
+        /**
+          * Self-alignment override for this item on the cross axis
+          * @allowedValues auto | start | center | end | stretch | baseline
+          * @default 'auto'
+         */
+        "alignSelf": 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+        /**
+          * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')
+         */
+        "background"?: string;
+        /**
+          * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')
+          * @default 'auto'
+         */
+        "basis": string;
+        /**
+          * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')
+         */
+        "border"?: string;
+        /**
+          * Border radius (e.g., '8px', 'var(--le-radius-md)')
+         */
+        "borderRadius"?: string;
+        /**
+          * Whether to display box content as flex (for internal alignment)
+          * @default false
+         */
+        "displayFlex": boolean;
+        /**
+          * Flex grow factor - how much the item should grow relative to siblings
+          * @min 0
+          * @default 0
+         */
+        "grow": number;
+        /**
+          * Height of the box (CSS value)
+         */
+        "height"?: string;
+        /**
+          * Direction of internal flex layout when displayFlex is true
+          * @allowedValues horizontal | vertical
+          * @default 'vertical'
+         */
+        "innerDirection": 'horizontal' | 'vertical';
+        /**
+          * Gap between internal flex items when displayFlex is true
+         */
+        "innerGap"?: string;
+        /**
+          * Internal vertical alignment of content
+          * @allowedValues start | center | end | stretch
+          * @default 'start'
+         */
+        "justifyContent": 'start' | 'center' | 'end' | 'stretch';
+        /**
+          * Maximum height constraint
+         */
+        "maxHeight"?: string;
+        /**
+          * Maximum width constraint
+         */
+        "maxWidth"?: string;
+        /**
+          * Minimum height constraint
+         */
+        "minHeight"?: string;
+        /**
+          * Minimum width constraint
+         */
+        "minWidth"?: string;
+        /**
+          * Order in the flex container (lower values come first)
+         */
+        "order"?: number;
+        /**
+          * Padding inside the box (CSS value like '8px', '1rem')
+         */
+        "padding"?: string;
+        /**
+          * Flex shrink factor - how much the item should shrink relative to siblings
+          * @min 0
+          * @default 1
+         */
+        "shrink": number;
+        /**
+          * Width of the box (CSS value like '100px', '50%', 'auto')
+         */
+        "width"?: string;
+    }
+    /**
+     * A flexible button component with multiple variants and states.
+     * @cssprop --le-button-bg - Button background color
+     * @cssprop --le-button-color - Button text color
+     * @cssprop --le-button-border-radius - Button border radius
+     * @cssprop --le-button-padding-x - Button horizontal padding
+     * @cssprop --le-button-padding-y - Button vertical padding
+     * @csspart button - The native button element
+     * @csspart content - The button content wrapper
+     * @cmsEditable true
+     * @cmsCategory Actions
+     */
+    interface LeButton {
+        /**
+          * Button color theme (uses theme semantic colors)
+          * @allowedValues primary | secondary | success | warning | danger | info
+          * @default 'primary'
+         */
+        "color": 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+        /**
+          * Whether the button is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether the button takes full width of its container
+          * @default false
+         */
+        "fullWidth": boolean;
+        /**
+          * Optional href to make the button act as a link
+         */
+        "href"?: string;
+        /**
+          * Whether the button displays only an icon (square aspect ratio)
+          * @default false
+         */
+        "iconOnly": boolean;
+        /**
+          * Mode of the popover should be 'default' for internal use
+         */
+        "mode": 'default' | 'admin';
+        /**
+          * Whether the button is in a selected/active state
+          * @default false
+         */
+        "selected": boolean;
+        /**
+          * Button size
+          * @allowedValues small | medium | large
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Link target when href is set
+         */
+        "target"?: string;
+        /**
+          * The button type attribute
+          * @allowedValues button | submit | reset
+          * @default 'button'
+         */
+        "type": 'button' | 'submit' | 'reset';
+        /**
+          * Button variant style
+          * @allowedValues solid | outlined | clear
+          * @default 'solid'
+         */
+        "variant": 'solid' | 'outlined' | 'clear' | 'system';
+    }
+    /**
+     * A flexible card component with header, content, and footer slots.
+     * The card uses le-slot wrappers for each slot area. In admin mode,
+     * le-slot shows placeholders for CMS editing. In default mode,
+     * le-slot acts as a transparent passthrough.
+     * @cssprop --le-card-bg - Card background color
+     * @cssprop --le-card-border-radius - Card border radius
+     * @cssprop --le-card-shadow - Card box shadow
+     * @cssprop --le-card-padding - Card content padding
+     * @csspart card - The main card container
+     * @csspart header - The card header section
+     * @csspart content - The card content section
+     * @csspart footer - The card footer section
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeCard {
+        /**
+          * Whether the card is interactive (clickable)
+          * @default false
+         */
+        "interactive": boolean;
+        /**
+          * Card variant style
+          * @allowedValues default | outlined | elevated
+          * @default 'default'
+         */
+        "variant": 'default' | 'outlined' | 'elevated';
+    }
+    /**
+     * A checkbox component with support for labels, descriptions, and external IDs.
+     * @cssprop --le-checkbox-size - Size of the checkbox input
+     * @cssprop --le-checkbox-color - Color of the checkbox when checked
+     * @cssprop --le-checkbox-label-color - Color of the label text
+     * @cssprop --le-checkbox-desc-color - Color of the description text
+     */
+    interface LeCheckbox {
+        /**
+          * Whether the checkbox is checked
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * Whether the checkbox is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * External ID for linking with external systems (e.g. database ID, PDF form field ID)
+         */
+        "externalId": string;
+        /**
+          * The name of the checkbox input
+         */
+        "name": string;
+        /**
+          * The value of the checkbox input
+         */
+        "value": string;
+    }
+    /**
+     * Component wrapper for admin mode editing.
+     * This component is used internally by other components to provide admin-mode 
+     * editing capabilities. It wraps the component's rendered output and shows
+     * a settings popover for editing properties.
+     * In default mode, it acts as a simple passthrough (display: contents).
+     * In admin mode, it shows a border, component name header, and settings popover.
+     * The host element is found automatically by traversing up through the shadow DOM.
+     * Usage inside a component's render method:
+     * ```tsx
+     * render() {
+     *   return (
+     *     <le-component component="le-card">
+     *       <Host>...</Host>
+     *     </le-component>
+     *   );
+     * }
+     * ```
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface LeComponent {
+        /**
+          * The tag name of the component (e.g., 'le-card'). Used to look up property metadata and display the component name.
+         */
+        "component": string;
+        /**
+          * Optional display name for the component. If not provided, the tag name will be formatted as the display name.
+         */
+        "displayName"?: string;
+        /**
+          * Classes to apply to the host element. Allows parent components to pass their styling classes.
+         */
+        "hostClass"?: string;
+        /**
+          * Inline styles to apply to the host element. Allows parent components to pass dynamic styles (e.g., flex properties).
+         */
+        "hostStyle"?: { [key: string]: string };
+    }
+    /**
+     * A number input component with validation, keyboard controls, and custom spinners.
+     * @cssprop --le-input-bg - Input background color
+     * @cssprop --le-input-color - Input text color
+     * @cssprop --le-input-border - Input border style
+     * @cssprop --le-input-border-focus - Input border style when focused
+     * @cssprop --le-input-border-error - Input border style when invalid
+     * @cssprop --le-input-radius - Input border radius
+     * @cssprop --le-input-padding - Input padding
+     */
+    interface LeNumberInput {
+        /**
+          * Whether the input is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * External ID for linking with external systems
+         */
+        "externalId": string;
+        /**
+          * Icon for the start icon
+         */
+        "iconStart"?: string;
+        /**
+          * Label for the input
+         */
+        "label": string;
+        /**
+          * Maximum allowed value
+         */
+        "max"?: number;
+        /**
+          * Minimum allowed value
+         */
+        "min"?: number;
+        /**
+          * The name of the input
+         */
+        "name": string;
+        /**
+          * Placeholder text
+         */
+        "placeholder": string;
+        /**
+          * Whether the input is read-only
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * Whether the input is required
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Whether to show the spinner controls
+          * @default true
+         */
+        "showSpinners": boolean;
+        /**
+          * Step value for increment/decrement
+          * @default 1
+         */
+        "step": number;
+        /**
+          * The value of the input
+         */
+        "value": number;
+    }
+    /**
+     * 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.
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface LePopover {
+        /**
+          * Alignment of the popover
+          * @default 'start'
+         */
+        "align": 'start' | 'center' | 'end';
+        /**
+          * Whether clicking outside closes the popover
+          * @default true
+         */
+        "closeOnClickOutside": boolean;
+        /**
+          * Whether pressing Escape closes the popover
+          * @default true
+         */
+        "closeOnEscape": boolean;
+        /**
+          * Closes the popover
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Maximum width for the popover (e.g., '400px', '25rem')
+         */
+        "maxWidth"?: string;
+        /**
+          * Minimum width for the popover (e.g., '200px', '15rem')
+          * @default '200px'
+         */
+        "minWidth"?: string;
+        /**
+          * Mode of the popover should be 'default' for internal use
+         */
+        "mode": 'default' | 'admin';
+        /**
+          * Offset from the trigger element (in pixels)
+          * @default 8
+         */
+        "offset": number;
+        /**
+          * Whether the popover is currently open
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Optional title for the popover header
+         */
+        "popoverTitle"?: string;
+        /**
+          * Position of the popover relative to its trigger
+          * @default 'bottom'
+         */
+        "position": 'top' | 'bottom' | 'left' | 'right' | 'auto';
+        /**
+          * Opens the popover
+         */
+        "show": () => Promise<void>;
+        /**
+          * Whether to show a close button in the header
+          * @default true
+         */
+        "showClose": boolean;
+        /**
+          * Toggles the popover
+         */
+        "toggle": () => Promise<void>;
+        /**
+          * Fixed width for the popover (e.g., '300px', '20rem')
+         */
+        "width"?: string;
+    }
+    /**
+     * 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 
+     * via leAlert(), leConfirm(), lePrompt().
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface LePopup {
+        /**
+          * Text for the cancel button
+          * @default 'Cancel'
+         */
+        "cancelText": string;
+        /**
+          * Whether clicking the backdrop closes the popup (modal only)
+          * @default true
+         */
+        "closeOnBackdrop": boolean;
+        /**
+          * Text for the confirm/OK button
+          * @default 'OK'
+         */
+        "confirmText": string;
+        /**
+          * Default value for prompt input
+          * @default ''
+         */
+        "defaultValue": string;
+        /**
+          * Closes the popup with a result
+         */
+        "hide": (confirmed?: boolean) => Promise<void>;
+        /**
+          * Message text to display (for alert/confirm/prompt types)
+         */
+        "message"?: string;
+        /**
+          * Whether the popup is modal (blocks interaction with page behind)
+          * @default true
+         */
+        "modal": boolean;
+        /**
+          * 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;
+        /**
+          * Opens the popup and returns a promise that resolves when closed
+         */
+        "show": () => Promise<PopupResult>;
+        /**
+          * 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;
+    }
+    /**
+     * Slot placeholder component for admin/CMS mode.
+     * This component renders a visual placeholder for slots when in admin mode,
+     * allowing CMS systems to show available drop zones for content or inline editing.
+     * In non-admin mode, this component renders nothing and acts as a passthrough.
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface LeSlot {
+        /**
+          * Comma-separated list of allowed component tags for this slot. Used by CMS to filter available components.
+          * @example "le-card,le-button,le-text"
+         */
+        "allowedComponents"?: string;
+        /**
+          * Description of what content this slot accepts. Shown in admin mode to guide content editors.
+         */
+        "description"?: string;
+        /**
+          * Label to display in admin mode. If not provided, the slot name will be used.
+         */
+        "label"?: string;
+        /**
+          * Whether multiple components can be dropped in this slot.
+          * @default true
+         */
+        "multiple": boolean;
+        /**
+          * The name of the slot this placeholder represents. Should match the slot name in the parent component.
+          * @default ''
+         */
+        "name": string;
+        /**
+          * Placeholder text for text/textarea inputs in admin mode.
+         */
+        "placeholder"?: string;
+        /**
+          * Whether this slot is required to have content.
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * CSS styles for the slot dropzone container. Useful for layouts - e.g., "flex-direction: row" for horizontal stacks. Only applies in admin mode for type="slot".
+         */
+        "slotStyle"?: string;
+        /**
+          * The HTML tag to create when there's no slotted element. Used with type="text" or type="textarea" to auto-create elements.
+          * @example "h3" - creates <h3 slot="header">content</h3>
+          * @example "p" - creates <p slot="content">content</p>
+         */
+        "tag"?: string;
+        /**
+          * The type of slot content. - `slot`: Default, shows a dropzone for components (default) - `text`: Shows a single-line text input - `textarea`: Shows a multi-line text area
+          * @default 'slot'
+         */
+        "type": 'slot' | 'text' | 'textarea';
+    }
+    /**
+     * A flexible stack layout component using CSS flexbox.
+     * `le-stack` arranges its children in a row (horizontal) or column (vertical)
+     * with configurable spacing, alignment, and wrapping behavior. Perfect for
+     * creating responsive layouts.
+     * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))
+     * @csspart stack - The main stack container
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeStack {
+        /**
+          * Alignment of items on the cross axis
+          * @allowedValues start | center | end | stretch | baseline
+          * @default 'stretch'
+         */
+        "align": 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+        /**
+          * Alignment of wrapped lines (only applies when wrap is true)
+          * @allowedValues start | center | end | stretch | space-between | space-around
+          * @default 'stretch'
+         */
+        "alignContent": 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around';
+        /**
+          * Direction of the stack layout
+          * @allowedValues horizontal | vertical
+          * @default 'horizontal'
+         */
+        "direction": 'horizontal' | 'vertical';
+        /**
+          * Whether the stack should take full height of its container
+          * @default false
+         */
+        "fullHeight": boolean;
+        /**
+          * Whether the stack should take full width of its container
+          * @default false
+         */
+        "fullWidth": boolean;
+        /**
+          * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')
+         */
+        "gap"?: string;
+        /**
+          * Distribution of items on the main axis
+          * @allowedValues start | center | end | space-between | space-around | space-evenly
+          * @default 'start'
+         */
+        "justify": 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+        /**
+          * Maximum number of items allowed in the stack (for CMS validation)
+          * @min 1
+         */
+        "maxItems"?: number;
+        /**
+          * Padding inside the stack container (CSS value)
+         */
+        "padding"?: string;
+        /**
+          * Whether to reverse the order of items
+          * @default false
+         */
+        "reverse": boolean;
+        /**
+          * Whether items should wrap to multiple lines
+          * @default false
+         */
+        "wrap": boolean;
+    }
+    /**
+     * A text input component with support for labels, descriptions, icons, and external IDs.
+     * @cssprop --le-input-bg - Input background color
+     * @cssprop --le-input-color - Input text color
+     * @cssprop --le-input-border - Input border style
+     * @cssprop --le-input-border-focus - Input border style when focused
+     * @cssprop --le-input-radius - Input border radius
+     * @cssprop --le-input-padding - Input padding
+     */
+    interface LeStringInput {
+        /**
+          * Whether the input is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * External ID for linking with external systems
+         */
+        "externalId": string;
+        /**
+          * Icon for the end icon
+         */
+        "iconEnd": string;
+        /**
+          * Icon for the start icon
+         */
+        "iconStart": string;
+        /**
+          * Label for the input
+         */
+        "label": string;
+        /**
+          * Mode of the popover should be 'default' for internal use
+         */
+        "mode": 'default' | 'admin';
+        /**
+          * The name of the input
+         */
+        "name": string;
+        /**
+          * Placeholder text
+         */
+        "placeholder": string;
+        /**
+          * Whether the input is read-only
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * The type of the input (text, email, password, etc.)
+          * @default 'text'
+         */
+        "type": 'text' | 'email' | 'password' | 'tel' | 'url';
+        /**
+          * The value of the input
+         */
+        "value": string;
+    }
+    /**
+     * A text component with rich text editing capabilities in admin mode.
+     * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)
+     * and provides a Notion-like rich text editor in admin mode with formatting
+     * toolbar for bold, italic, links, and paragraph type selection.
+     * @cssprop --le-text-color - Text color
+     * @cssprop --le-text-font-size - Font size
+     * @cssprop --le-text-line-height - Line height
+     * @cssprop --le-text-font-weight - Font weight
+     * @csspart text - The text container element
+     * @cmsEditable true
+     * @cmsCategory Content
+     */
+    interface LeText {
+        /**
+          * Text alignment
+          * @allowedValues left | center | right | justify
+          * @default 'left'
+         */
+        "align": 'left' | 'center' | 'right' | 'justify';
+        /**
+          * Text color (CSS value or theme token)
+         */
+        "color"?: string;
+        /**
+          * Maximum number of lines before truncating (requires truncate=true)
+         */
+        "maxLines"?: number;
+        /**
+          * Whether the text should truncate with ellipsis
+          * @default false
+         */
+        "truncate": boolean;
+        /**
+          * The semantic variant/type of text element
+          * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small
+          * @default 'p'
+         */
+        "variant": 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'quote' | 'label' | 'small';
+    }
+    interface LeTurntable {
+        /**
+          * @default 'center'
+         */
+        "center": string;
+        /**
+          * @default 0
+         */
+        "value": number;
+    }
+}
+export interface LeButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeButtonElement;
+}
+export interface LeCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeCheckboxElement;
+}
+export interface LeNumberInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeNumberInputElement;
+}
+export interface LePopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLePopoverElement;
+}
+export interface LePopupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLePopupElement;
+}
+export interface LeSlotCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeSlotElement;
+}
+export interface LeStringInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeStringInputElement;
 }
-
 declare global {
-  interface StencilElementInterfaces {
-    'LeRoundProgress': Components.LeRoundProgress;
-    'LeTurntable': Components.LeTurntable;
-  }
-
-  interface StencilIntrinsicElements {
-    'le-round-progress': Components.LeRoundProgressAttributes;
-    'le-turntable': Components.LeTurntableAttributes;
-  }
-
-
-  interface HTMLLeRoundProgressElement extends Components.LeRoundProgress, HTMLStencilElement {}
-  var HTMLLeRoundProgressElement: {
-    prototype: HTMLLeRoundProgressElement;
-    new (): HTMLLeRoundProgressElement;
-  };
-
-  interface HTMLLeTurntableElement extends Components.LeTurntable, HTMLStencilElement {}
-  var HTMLLeTurntableElement: {
-    prototype: HTMLLeTurntableElement;
-    new (): HTMLLeTurntableElement;
-  };
-
-  interface HTMLElementTagNameMap {
-    'le-round-progress': HTMLLeRoundProgressElement
-    'le-turntable': HTMLLeTurntableElement
-  }
-
-  interface ElementTagNameMap {
-    'le-round-progress': HTMLLeRoundProgressElement;
-    'le-turntable': HTMLLeTurntableElement;
-  }
-
-
+    /**
+     * A flexible box component for use as a flex item within le-stack.
+     * `le-box` wraps content and provides flex item properties like grow, shrink,
+     * basis, and self-alignment. It can also control its internal content alignment.
+     * @cssprop --le-box-bg - Background color
+     * @cssprop --le-box-padding - Padding inside the box
+     * @cssprop --le-box-border-radius - Border radius
+     * @csspart box - The main box container
+     * @csspart content - The inner content wrapper
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface HTMLLeBoxElement extends Components.LeBox, HTMLStencilElement {
+    }
+    var HTMLLeBoxElement: {
+        prototype: HTMLLeBoxElement;
+        new (): HTMLLeBoxElement;
+    };
+    interface HTMLLeButtonElementEventMap {
+        "click": PointerEvent;
+    }
+    /**
+     * A flexible button component with multiple variants and states.
+     * @cssprop --le-button-bg - Button background color
+     * @cssprop --le-button-color - Button text color
+     * @cssprop --le-button-border-radius - Button border radius
+     * @cssprop --le-button-padding-x - Button horizontal padding
+     * @cssprop --le-button-padding-y - Button vertical padding
+     * @csspart button - The native button element
+     * @csspart content - The button content wrapper
+     * @cmsEditable true
+     * @cmsCategory Actions
+     */
+    interface HTMLLeButtonElement extends Components.LeButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeButtonElementEventMap>(type: K, listener: (this: HTMLLeButtonElement, ev: LeButtonCustomEvent<HTMLLeButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLLeButtonElementEventMap>(type: K, listener: (this: HTMLLeButtonElement, ev: LeButtonCustomEvent<HTMLLeButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLLeButtonElement: {
+        prototype: HTMLLeButtonElement;
+        new (): HTMLLeButtonElement;
+    };
+    /**
+     * A flexible card component with header, content, and footer slots.
+     * The card uses le-slot wrappers for each slot area. In admin mode,
+     * le-slot shows placeholders for CMS editing. In default mode,
+     * le-slot acts as a transparent passthrough.
+     * @cssprop --le-card-bg - Card background color
+     * @cssprop --le-card-border-radius - Card border radius
+     * @cssprop --le-card-shadow - Card box shadow
+     * @cssprop --le-card-padding - Card content padding
+     * @csspart card - The main card container
+     * @csspart header - The card header section
+     * @csspart content - The card content section
+     * @csspart footer - The card footer section
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface HTMLLeCardElement extends Components.LeCard, HTMLStencilElement {
+    }
+    var HTMLLeCardElement: {
+        prototype: HTMLLeCardElement;
+        new (): HTMLLeCardElement;
+    };
+    interface HTMLLeCheckboxElementEventMap {
+        "change": { checked: boolean; value: string; name: string; externalId: string };
+    }
+    /**
+     * A checkbox component with support for labels, descriptions, and external IDs.
+     * @cssprop --le-checkbox-size - Size of the checkbox input
+     * @cssprop --le-checkbox-color - Color of the checkbox when checked
+     * @cssprop --le-checkbox-label-color - Color of the label text
+     * @cssprop --le-checkbox-desc-color - Color of the description text
+     */
+    interface HTMLLeCheckboxElement extends Components.LeCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeCheckboxElementEventMap>(type: K, listener: (this: HTMLLeCheckboxElement, ev: LeCheckboxCustomEvent<HTMLLeCheckboxElementEventMap[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 HTMLLeCheckboxElementEventMap>(type: K, listener: (this: HTMLLeCheckboxElement, ev: LeCheckboxCustomEvent<HTMLLeCheckboxElementEventMap[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 HTMLLeCheckboxElement: {
+        prototype: HTMLLeCheckboxElement;
+        new (): HTMLLeCheckboxElement;
+    };
+    /**
+     * Component wrapper for admin mode editing.
+     * This component is used internally by other components to provide admin-mode 
+     * editing capabilities. It wraps the component's rendered output and shows
+     * a settings popover for editing properties.
+     * In default mode, it acts as a simple passthrough (display: contents).
+     * In admin mode, it shows a border, component name header, and settings popover.
+     * The host element is found automatically by traversing up through the shadow DOM.
+     * Usage inside a component's render method:
+     * ```tsx
+     * render() {
+     *   return (
+     *     <le-component component="le-card">
+     *       <Host>...</Host>
+     *     </le-component>
+     *   );
+     * }
+     * ```
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface HTMLLeComponentElement extends Components.LeComponent, HTMLStencilElement {
+    }
+    var HTMLLeComponentElement: {
+        prototype: HTMLLeComponentElement;
+        new (): HTMLLeComponentElement;
+    };
+    interface HTMLLeNumberInputElementEventMap {
+        "leChange": { value: number; name: string; externalId: string; isValid: boolean };
+        "leInput": { value: number; name: string; externalId: string; isValid: boolean };
+    }
+    /**
+     * A number input component with validation, keyboard controls, and custom spinners.
+     * @cssprop --le-input-bg - Input background color
+     * @cssprop --le-input-color - Input text color
+     * @cssprop --le-input-border - Input border style
+     * @cssprop --le-input-border-focus - Input border style when focused
+     * @cssprop --le-input-border-error - Input border style when invalid
+     * @cssprop --le-input-radius - Input border radius
+     * @cssprop --le-input-padding - Input padding
+     */
+    interface HTMLLeNumberInputElement extends Components.LeNumberInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeNumberInputElementEventMap>(type: K, listener: (this: HTMLLeNumberInputElement, ev: LeNumberInputCustomEvent<HTMLLeNumberInputElementEventMap[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 HTMLLeNumberInputElementEventMap>(type: K, listener: (this: HTMLLeNumberInputElement, ev: LeNumberInputCustomEvent<HTMLLeNumberInputElementEventMap[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 HTMLLeNumberInputElement: {
+        prototype: HTMLLeNumberInputElement;
+        new (): HTMLLeNumberInputElement;
+    };
+    interface HTMLLePopoverElementEventMap {
+        "lePopoverOpen": void;
+        "lePopoverClose": void;
+    }
+    /**
+     * 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.
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface HTMLLePopoverElement extends Components.LePopover, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLePopoverElementEventMap>(type: K, listener: (this: HTMLLePopoverElement, ev: LePopoverCustomEvent<HTMLLePopoverElementEventMap[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 HTMLLePopoverElementEventMap>(type: K, listener: (this: HTMLLePopoverElement, ev: LePopoverCustomEvent<HTMLLePopoverElementEventMap[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 HTMLLePopoverElement: {
+        prototype: HTMLLePopoverElement;
+        new (): HTMLLePopoverElement;
+    };
+    interface HTMLLePopupElementEventMap {
+        "leConfirm": PopupResult;
+        "leCancel": PopupResult;
+        "leOpen": void;
+        "leClose": PopupResult;
+    }
+    /**
+     * 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 
+     * via leAlert(), leConfirm(), lePrompt().
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface HTMLLePopupElement extends Components.LePopup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLePopupElementEventMap>(type: K, listener: (this: HTMLLePopupElement, ev: LePopupCustomEvent<HTMLLePopupElementEventMap[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 HTMLLePopupElementEventMap>(type: K, listener: (this: HTMLLePopupElement, ev: LePopupCustomEvent<HTMLLePopupElementEventMap[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 HTMLLePopupElement: {
+        prototype: HTMLLePopupElement;
+        new (): HTMLLePopupElement;
+    };
+    interface HTMLLeRoundProgressElement extends Components.LeRoundProgress, HTMLStencilElement {
+    }
+    var HTMLLeRoundProgressElement: {
+        prototype: HTMLLeRoundProgressElement;
+        new (): HTMLLeRoundProgressElement;
+    };
+    interface HTMLLeSlotElementEventMap {
+        "leSlotChange": { name: string; value: string; isValid: boolean };
+    }
+    /**
+     * Slot placeholder component for admin/CMS mode.
+     * This component renders a visual placeholder for slots when in admin mode,
+     * allowing CMS systems to show available drop zones for content or inline editing.
+     * In non-admin mode, this component renders nothing and acts as a passthrough.
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface HTMLLeSlotElement extends Components.LeSlot, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeSlotElementEventMap>(type: K, listener: (this: HTMLLeSlotElement, ev: LeSlotCustomEvent<HTMLLeSlotElementEventMap[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 HTMLLeSlotElementEventMap>(type: K, listener: (this: HTMLLeSlotElement, ev: LeSlotCustomEvent<HTMLLeSlotElementEventMap[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 HTMLLeSlotElement: {
+        prototype: HTMLLeSlotElement;
+        new (): HTMLLeSlotElement;
+    };
+    /**
+     * A flexible stack layout component using CSS flexbox.
+     * `le-stack` arranges its children in a row (horizontal) or column (vertical)
+     * with configurable spacing, alignment, and wrapping behavior. Perfect for
+     * creating responsive layouts.
+     * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))
+     * @csspart stack - The main stack container
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface HTMLLeStackElement extends Components.LeStack, HTMLStencilElement {
+    }
+    var HTMLLeStackElement: {
+        prototype: HTMLLeStackElement;
+        new (): HTMLLeStackElement;
+    };
+    interface HTMLLeStringInputElementEventMap {
+        "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.
+     * @cssprop --le-input-bg - Input background color
+     * @cssprop --le-input-color - Input text color
+     * @cssprop --le-input-border - Input border style
+     * @cssprop --le-input-border-focus - Input border style when focused
+     * @cssprop --le-input-radius - Input border radius
+     * @cssprop --le-input-padding - Input padding
+     */
+    interface HTMLLeStringInputElement extends Components.LeStringInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLeStringInputElementEventMap>(type: K, listener: (this: HTMLLeStringInputElement, ev: LeStringInputCustomEvent<HTMLLeStringInputElementEventMap[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 HTMLLeStringInputElementEventMap>(type: K, listener: (this: HTMLLeStringInputElement, ev: LeStringInputCustomEvent<HTMLLeStringInputElementEventMap[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 HTMLLeStringInputElement: {
+        prototype: HTMLLeStringInputElement;
+        new (): HTMLLeStringInputElement;
+    };
+    /**
+     * A text component with rich text editing capabilities in admin mode.
+     * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)
+     * and provides a Notion-like rich text editor in admin mode with formatting
+     * toolbar for bold, italic, links, and paragraph type selection.
+     * @cssprop --le-text-color - Text color
+     * @cssprop --le-text-font-size - Font size
+     * @cssprop --le-text-line-height - Line height
+     * @cssprop --le-text-font-weight - Font weight
+     * @csspart text - The text container element
+     * @cmsEditable true
+     * @cmsCategory Content
+     */
+    interface HTMLLeTextElement extends Components.LeText, HTMLStencilElement {
+    }
+    var HTMLLeTextElement: {
+        prototype: HTMLLeTextElement;
+        new (): HTMLLeTextElement;
+    };
+    interface HTMLLeTurntableElement extends Components.LeTurntable, HTMLStencilElement {
+    }
+    var HTMLLeTurntableElement: {
+        prototype: HTMLLeTurntableElement;
+        new (): HTMLLeTurntableElement;
+    };
+    interface HTMLElementTagNameMap {
+        "le-box": HTMLLeBoxElement;
+        "le-button": HTMLLeButtonElement;
+        "le-card": HTMLLeCardElement;
+        "le-checkbox": HTMLLeCheckboxElement;
+        "le-component": HTMLLeComponentElement;
+        "le-number-input": HTMLLeNumberInputElement;
+        "le-popover": HTMLLePopoverElement;
+        "le-popup": HTMLLePopupElement;
+        "le-round-progress": HTMLLeRoundProgressElement;
+        "le-slot": HTMLLeSlotElement;
+        "le-stack": HTMLLeStackElement;
+        "le-string-input": HTMLLeStringInputElement;
+        "le-text": HTMLLeTextElement;
+        "le-turntable": HTMLLeTurntableElement;
+    }
+}
+declare namespace LocalJSX {
+    /**
+     * A flexible box component for use as a flex item within le-stack.
+     * `le-box` wraps content and provides flex item properties like grow, shrink,
+     * basis, and self-alignment. It can also control its internal content alignment.
+     * @cssprop --le-box-bg - Background color
+     * @cssprop --le-box-padding - Padding inside the box
+     * @cssprop --le-box-border-radius - Border radius
+     * @csspart box - The main box container
+     * @csspart content - The inner content wrapper
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeBox {
+        /**
+          * Internal horizontal alignment of content
+          * @allowedValues start | center | end | stretch
+          * @default 'stretch'
+         */
+        "alignContent"?: 'start' | 'center' | 'end' | 'stretch';
+        /**
+          * Self-alignment override for this item on the cross axis
+          * @allowedValues auto | start | center | end | stretch | baseline
+          * @default 'auto'
+         */
+        "alignSelf"?: 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+        /**
+          * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')
+         */
+        "background"?: string;
+        /**
+          * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')
+          * @default 'auto'
+         */
+        "basis"?: string;
+        /**
+          * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')
+         */
+        "border"?: string;
+        /**
+          * Border radius (e.g., '8px', 'var(--le-radius-md)')
+         */
+        "borderRadius"?: string;
+        /**
+          * Whether to display box content as flex (for internal alignment)
+          * @default false
+         */
+        "displayFlex"?: boolean;
+        /**
+          * Flex grow factor - how much the item should grow relative to siblings
+          * @min 0
+          * @default 0
+         */
+        "grow"?: number;
+        /**
+          * Height of the box (CSS value)
+         */
+        "height"?: string;
+        /**
+          * Direction of internal flex layout when displayFlex is true
+          * @allowedValues horizontal | vertical
+          * @default 'vertical'
+         */
+        "innerDirection"?: 'horizontal' | 'vertical';
+        /**
+          * Gap between internal flex items when displayFlex is true
+         */
+        "innerGap"?: string;
+        /**
+          * Internal vertical alignment of content
+          * @allowedValues start | center | end | stretch
+          * @default 'start'
+         */
+        "justifyContent"?: 'start' | 'center' | 'end' | 'stretch';
+        /**
+          * Maximum height constraint
+         */
+        "maxHeight"?: string;
+        /**
+          * Maximum width constraint
+         */
+        "maxWidth"?: string;
+        /**
+          * Minimum height constraint
+         */
+        "minHeight"?: string;
+        /**
+          * Minimum width constraint
+         */
+        "minWidth"?: string;
+        /**
+          * Order in the flex container (lower values come first)
+         */
+        "order"?: number;
+        /**
+          * Padding inside the box (CSS value like '8px', '1rem')
+         */
+        "padding"?: string;
+        /**
+          * Flex shrink factor - how much the item should shrink relative to siblings
+          * @min 0
+          * @default 1
+         */
+        "shrink"?: number;
+        /**
+          * Width of the box (CSS value like '100px', '50%', 'auto')
+         */
+        "width"?: string;
+    }
+    /**
+     * A flexible button component with multiple variants and states.
+     * @cssprop --le-button-bg - Button background color
+     * @cssprop --le-button-color - Button text color
+     * @cssprop --le-button-border-radius - Button border radius
+     * @cssprop --le-button-padding-x - Button horizontal padding
+     * @cssprop --le-button-padding-y - Button vertical padding
+     * @csspart button - The native button element
+     * @csspart content - The button content wrapper
+     * @cmsEditable true
+     * @cmsCategory Actions
+     */
+    interface LeButton {
+        /**
+          * Button color theme (uses theme semantic colors)
+          * @allowedValues primary | secondary | success | warning | danger | info
+          * @default 'primary'
+         */
+        "color"?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+        /**
+          * Whether the button is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the button takes full width of its container
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Optional href to make the button act as a link
+         */
+        "href"?: string;
+        /**
+          * Whether the button displays only an icon (square aspect ratio)
+          * @default false
+         */
+        "iconOnly"?: boolean;
+        /**
+          * Mode of the popover should be 'default' for internal use
+         */
+        "mode"?: 'default' | 'admin';
+        /**
+          * Emitted when the button is clicked. This is a custom event that wraps the native click but ensures the target is the le-button.
+         */
+        "onClick"?: (event: LeButtonCustomEvent<PointerEvent>) => void;
+        /**
+          * Whether the button is in a selected/active state
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * Button size
+          * @allowedValues small | medium | large
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Link target when href is set
+         */
+        "target"?: string;
+        /**
+          * The button type attribute
+          * @allowedValues button | submit | reset
+          * @default 'button'
+         */
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * Button variant style
+          * @allowedValues solid | outlined | clear
+          * @default 'solid'
+         */
+        "variant"?: 'solid' | 'outlined' | 'clear' | 'system';
+    }
+    /**
+     * A flexible card component with header, content, and footer slots.
+     * The card uses le-slot wrappers for each slot area. In admin mode,
+     * le-slot shows placeholders for CMS editing. In default mode,
+     * le-slot acts as a transparent passthrough.
+     * @cssprop --le-card-bg - Card background color
+     * @cssprop --le-card-border-radius - Card border radius
+     * @cssprop --le-card-shadow - Card box shadow
+     * @cssprop --le-card-padding - Card content padding
+     * @csspart card - The main card container
+     * @csspart header - The card header section
+     * @csspart content - The card content section
+     * @csspart footer - The card footer section
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeCard {
+        /**
+          * Whether the card is interactive (clickable)
+          * @default false
+         */
+        "interactive"?: boolean;
+        /**
+          * Card variant style
+          * @allowedValues default | outlined | elevated
+          * @default 'default'
+         */
+        "variant"?: 'default' | 'outlined' | 'elevated';
+    }
+    /**
+     * A checkbox component with support for labels, descriptions, and external IDs.
+     * @cssprop --le-checkbox-size - Size of the checkbox input
+     * @cssprop --le-checkbox-color - Color of the checkbox when checked
+     * @cssprop --le-checkbox-label-color - Color of the label text
+     * @cssprop --le-checkbox-desc-color - Color of the description text
+     */
+    interface LeCheckbox {
+        /**
+          * Whether the checkbox is checked
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * Whether the checkbox is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * External ID for linking with external systems (e.g. database ID, PDF form field ID)
+         */
+        "externalId"?: string;
+        /**
+          * The name of the checkbox input
+         */
+        "name"?: string;
+        /**
+          * Emitted when the checked state changes
+         */
+        "onChange"?: (event: LeCheckboxCustomEvent<{ checked: boolean; value: string; name: string; externalId: string }>) => void;
+        /**
+          * The value of the checkbox input
+         */
+        "value"?: string;
+    }
+    /**
+     * Component wrapper for admin mode editing.
+     * This component is used internally by other components to provide admin-mode 
+     * editing capabilities. It wraps the component's rendered output and shows
+     * a settings popover for editing properties.
+     * In default mode, it acts as a simple passthrough (display: contents).
+     * In admin mode, it shows a border, component name header, and settings popover.
+     * The host element is found automatically by traversing up through the shadow DOM.
+     * Usage inside a component's render method:
+     * ```tsx
+     * render() {
+     *   return (
+     *     <le-component component="le-card">
+     *       <Host>...</Host>
+     *     </le-component>
+     *   );
+     * }
+     * ```
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface LeComponent {
+        /**
+          * The tag name of the component (e.g., 'le-card'). Used to look up property metadata and display the component name.
+         */
+        "component": string;
+        /**
+          * Optional display name for the component. If not provided, the tag name will be formatted as the display name.
+         */
+        "displayName"?: string;
+        /**
+          * Classes to apply to the host element. Allows parent components to pass their styling classes.
+         */
+        "hostClass"?: string;
+        /**
+          * Inline styles to apply to the host element. Allows parent components to pass dynamic styles (e.g., flex properties).
+         */
+        "hostStyle"?: { [key: string]: string };
+    }
+    /**
+     * A number input component with validation, keyboard controls, and custom spinners.
+     * @cssprop --le-input-bg - Input background color
+     * @cssprop --le-input-color - Input text color
+     * @cssprop --le-input-border - Input border style
+     * @cssprop --le-input-border-focus - Input border style when focused
+     * @cssprop --le-input-border-error - Input border style when invalid
+     * @cssprop --le-input-radius - Input border radius
+     * @cssprop --le-input-padding - Input padding
+     */
+    interface LeNumberInput {
+        /**
+          * Whether the input is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * External ID for linking with external systems
+         */
+        "externalId"?: string;
+        /**
+          * Icon for the start icon
+         */
+        "iconStart"?: string;
+        /**
+          * Label for the input
+         */
+        "label"?: string;
+        /**
+          * Maximum allowed value
+         */
+        "max"?: number;
+        /**
+          * Minimum allowed value
+         */
+        "min"?: number;
+        /**
+          * The name of the input
+         */
+        "name"?: string;
+        /**
+          * Emitted when the value changes (on blur or Enter)
+         */
+        "onLeChange"?: (event: LeNumberInputCustomEvent<{ value: number; name: string; externalId: string; isValid: boolean }>) => void;
+        /**
+          * Emitted when the input value changes (on keystroke/spin)
+         */
+        "onLeInput"?: (event: LeNumberInputCustomEvent<{ value: number; name: string; externalId: string; isValid: boolean }>) => void;
+        /**
+          * Placeholder text
+         */
+        "placeholder"?: string;
+        /**
+          * Whether the input is read-only
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Whether the input is required
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * Whether to show the spinner controls
+          * @default true
+         */
+        "showSpinners"?: boolean;
+        /**
+          * Step value for increment/decrement
+          * @default 1
+         */
+        "step"?: number;
+        /**
+          * The value of the input
+         */
+        "value"?: number;
+    }
+    /**
+     * 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.
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface LePopover {
+        /**
+          * Alignment of the popover
+          * @default 'start'
+         */
+        "align"?: 'start' | 'center' | 'end';
+        /**
+          * Whether clicking outside closes the popover
+          * @default true
+         */
+        "closeOnClickOutside"?: boolean;
+        /**
+          * Whether pressing Escape closes the popover
+          * @default true
+         */
+        "closeOnEscape"?: boolean;
+        /**
+          * Maximum width for the popover (e.g., '400px', '25rem')
+         */
+        "maxWidth"?: string;
+        /**
+          * Minimum width for the popover (e.g., '200px', '15rem')
+          * @default '200px'
+         */
+        "minWidth"?: string;
+        /**
+          * Mode of the popover should be 'default' for internal use
+         */
+        "mode"?: 'default' | 'admin';
+        /**
+          * Offset from the trigger element (in pixels)
+          * @default 8
+         */
+        "offset"?: number;
+        /**
+          * Emitted when the popover closes
+         */
+        "onLePopoverClose"?: (event: LePopoverCustomEvent<void>) => void;
+        /**
+          * Emitted when the popover opens
+         */
+        "onLePopoverOpen"?: (event: LePopoverCustomEvent<void>) => void;
+        /**
+          * Whether the popover is currently open
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Optional title for the popover header
+         */
+        "popoverTitle"?: string;
+        /**
+          * Position of the popover relative to its trigger
+          * @default 'bottom'
+         */
+        "position"?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+        /**
+          * Whether to show a close button in the header
+          * @default true
+         */
+        "showClose"?: boolean;
+        /**
+          * Fixed width for the popover (e.g., '300px', '20rem')
+         */
+        "width"?: string;
+    }
+    /**
+     * 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 
+     * via leAlert(), leConfirm(), lePrompt().
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface LePopup {
+        /**
+          * Text for the cancel button
+          * @default 'Cancel'
+         */
+        "cancelText"?: string;
+        /**
+          * Whether clicking the backdrop closes the popup (modal only)
+          * @default true
+         */
+        "closeOnBackdrop"?: boolean;
+        /**
+          * Text for the confirm/OK button
+          * @default 'OK'
+         */
+        "confirmText"?: string;
+        /**
+          * Default value for prompt input
+          * @default ''
+         */
+        "defaultValue"?: string;
+        /**
+          * Message text to display (for alert/confirm/prompt types)
+         */
+        "message"?: string;
+        /**
+          * Whether the popup is modal (blocks interaction with page behind)
+          * @default true
+         */
+        "modal"?: boolean;
+        /**
+          * Emitted when the popup is cancelled (Cancel clicked or dismissed)
+         */
+        "onLeCancel"?: (event: LePopupCustomEvent<PopupResult>) => void;
+        /**
+          * Emitted when the popup closes
+         */
+        "onLeClose"?: (event: LePopupCustomEvent<PopupResult>) => void;
+        /**
+          * Emitted when the popup is confirmed (OK clicked)
+         */
+        "onLeConfirm"?: (event: LePopupCustomEvent<PopupResult>) => void;
+        /**
+          * 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;
+    }
+    /**
+     * Slot placeholder component for admin/CMS mode.
+     * This component renders a visual placeholder for slots when in admin mode,
+     * allowing CMS systems to show available drop zones for content or inline editing.
+     * In non-admin mode, this component renders nothing and acts as a passthrough.
+     * @cmsInternal true
+     * @cmsCategory System
+     */
+    interface LeSlot {
+        /**
+          * Comma-separated list of allowed component tags for this slot. Used by CMS to filter available components.
+          * @example "le-card,le-button,le-text"
+         */
+        "allowedComponents"?: string;
+        /**
+          * Description of what content this slot accepts. Shown in admin mode to guide content editors.
+         */
+        "description"?: string;
+        /**
+          * Label to display in admin mode. If not provided, the slot name will be used.
+         */
+        "label"?: string;
+        /**
+          * Whether multiple components can be dropped in this slot.
+          * @default true
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the slot this placeholder represents. Should match the slot name in the parent component.
+          * @default ''
+         */
+        "name"?: string;
+        /**
+          * Emitted when text content changes in admin mode. The event detail contains the new text value and validity.
+         */
+        "onLeSlotChange"?: (event: LeSlotCustomEvent<{ name: string; value: string; isValid: boolean }>) => void;
+        /**
+          * Placeholder text for text/textarea inputs in admin mode.
+         */
+        "placeholder"?: string;
+        /**
+          * Whether this slot is required to have content.
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * CSS styles for the slot dropzone container. Useful for layouts - e.g., "flex-direction: row" for horizontal stacks. Only applies in admin mode for type="slot".
+         */
+        "slotStyle"?: string;
+        /**
+          * The HTML tag to create when there's no slotted element. Used with type="text" or type="textarea" to auto-create elements.
+          * @example "h3" - creates <h3 slot="header">content</h3>
+          * @example "p" - creates <p slot="content">content</p>
+         */
+        "tag"?: string;
+        /**
+          * The type of slot content. - `slot`: Default, shows a dropzone for components (default) - `text`: Shows a single-line text input - `textarea`: Shows a multi-line text area
+          * @default 'slot'
+         */
+        "type"?: 'slot' | 'text' | 'textarea';
+    }
+    /**
+     * A flexible stack layout component using CSS flexbox.
+     * `le-stack` arranges its children in a row (horizontal) or column (vertical)
+     * with configurable spacing, alignment, and wrapping behavior. Perfect for
+     * creating responsive layouts.
+     * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))
+     * @csspart stack - The main stack container
+     * @cmsEditable true
+     * @cmsCategory Layout
+     */
+    interface LeStack {
+        /**
+          * Alignment of items on the cross axis
+          * @allowedValues start | center | end | stretch | baseline
+          * @default 'stretch'
+         */
+        "align"?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+        /**
+          * Alignment of wrapped lines (only applies when wrap is true)
+          * @allowedValues start | center | end | stretch | space-between | space-around
+          * @default 'stretch'
+         */
+        "alignContent"?: 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around';
+        /**
+          * Direction of the stack layout
+          * @allowedValues horizontal | vertical
+          * @default 'horizontal'
+         */
+        "direction"?: 'horizontal' | 'vertical';
+        /**
+          * Whether the stack should take full height of its container
+          * @default false
+         */
+        "fullHeight"?: boolean;
+        /**
+          * Whether the stack should take full width of its container
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')
+         */
+        "gap"?: string;
+        /**
+          * Distribution of items on the main axis
+          * @allowedValues start | center | end | space-between | space-around | space-evenly
+          * @default 'start'
+         */
+        "justify"?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+        /**
+          * Maximum number of items allowed in the stack (for CMS validation)
+          * @min 1
+         */
+        "maxItems"?: number;
+        /**
+          * Padding inside the stack container (CSS value)
+         */
+        "padding"?: string;
+        /**
+          * Whether to reverse the order of items
+          * @default false
+         */
+        "reverse"?: boolean;
+        /**
+          * Whether items should wrap to multiple lines
+          * @default false
+         */
+        "wrap"?: boolean;
+    }
+    /**
+     * A text input component with support for labels, descriptions, icons, and external IDs.
+     * @cssprop --le-input-bg - Input background color
+     * @cssprop --le-input-color - Input text color
+     * @cssprop --le-input-border - Input border style
+     * @cssprop --le-input-border-focus - Input border style when focused
+     * @cssprop --le-input-radius - Input border radius
+     * @cssprop --le-input-padding - Input padding
+     */
+    interface LeStringInput {
+        /**
+          * Whether the input is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * External ID for linking with external systems
+         */
+        "externalId"?: string;
+        /**
+          * Icon for the end icon
+         */
+        "iconEnd"?: string;
+        /**
+          * Icon for the start icon
+         */
+        "iconStart"?: string;
+        /**
+          * Label for the input
+         */
+        "label"?: string;
+        /**
+          * Mode of the popover should be 'default' for internal use
+         */
+        "mode"?: 'default' | 'admin';
+        /**
+          * The name of the input
+         */
+        "name"?: string;
+        /**
+          * Emitted when the value changes (on blur or Enter)
+         */
+        "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;
+        /**
+          * Placeholder text
+         */
+        "placeholder"?: string;
+        /**
+          * Whether the input is read-only
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * The type of the input (text, email, password, etc.)
+          * @default 'text'
+         */
+        "type"?: 'text' | 'email' | 'password' | 'tel' | 'url';
+        /**
+          * The value of the input
+         */
+        "value"?: string;
+    }
+    /**
+     * A text component with rich text editing capabilities in admin mode.
+     * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)
+     * and provides a Notion-like rich text editor in admin mode with formatting
+     * toolbar for bold, italic, links, and paragraph type selection.
+     * @cssprop --le-text-color - Text color
+     * @cssprop --le-text-font-size - Font size
+     * @cssprop --le-text-line-height - Line height
+     * @cssprop --le-text-font-weight - Font weight
+     * @csspart text - The text container element
+     * @cmsEditable true
+     * @cmsCategory Content
+     */
+    interface LeText {
+        /**
+          * Text alignment
+          * @allowedValues left | center | right | justify
+          * @default 'left'
+         */
+        "align"?: 'left' | 'center' | 'right' | 'justify';
+        /**
+          * Text color (CSS value or theme token)
+         */
+        "color"?: string;
+        /**
+          * Maximum number of lines before truncating (requires truncate=true)
+         */
+        "maxLines"?: number;
+        /**
+          * Whether the text should truncate with ellipsis
+          * @default false
+         */
+        "truncate"?: boolean;
+        /**
+          * The semantic variant/type of text element
+          * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small
+          * @default 'p'
+         */
+        "variant"?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'quote' | 'label' | 'small';
+    }
+    interface LeTurntable {
+        /**
+          * @default 'center'
+         */
+        "center"?: string;
+        /**
+          * @default 0
+         */
+        "value"?: number;
+    }
+    interface IntrinsicElements {
+        "le-box": LeBox;
+        "le-button": LeButton;
+        "le-card": LeCard;
+        "le-checkbox": LeCheckbox;
+        "le-component": LeComponent;
+        "le-number-input": LeNumberInput;
+        "le-popover": LePopover;
+        "le-popup": LePopup;
+        "le-round-progress": LeRoundProgress;
+        "le-slot": LeSlot;
+        "le-stack": LeStack;
+        "le-string-input": LeStringInput;
+        "le-text": LeText;
+        "le-turntable": LeTurntable;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * A flexible box component for use as a flex item within le-stack.
+             * `le-box` wraps content and provides flex item properties like grow, shrink,
+             * basis, and self-alignment. It can also control its internal content alignment.
+             * @cssprop --le-box-bg - Background color
+             * @cssprop --le-box-padding - Padding inside the box
+             * @cssprop --le-box-border-radius - Border radius
+             * @csspart box - The main box container
+             * @csspart content - The inner content wrapper
+             * @cmsEditable true
+             * @cmsCategory Layout
+             */
+            "le-box": LocalJSX.LeBox & JSXBase.HTMLAttributes<HTMLLeBoxElement>;
+            /**
+             * A flexible button component with multiple variants and states.
+             * @cssprop --le-button-bg - Button background color
+             * @cssprop --le-button-color - Button text color
+             * @cssprop --le-button-border-radius - Button border radius
+             * @cssprop --le-button-padding-x - Button horizontal padding
+             * @cssprop --le-button-padding-y - Button vertical padding
+             * @csspart button - The native button element
+             * @csspart content - The button content wrapper
+             * @cmsEditable true
+             * @cmsCategory Actions
+             */
+            "le-button": LocalJSX.LeButton & JSXBase.HTMLAttributes<HTMLLeButtonElement>;
+            /**
+             * A flexible card component with header, content, and footer slots.
+             * The card uses le-slot wrappers for each slot area. In admin mode,
+             * le-slot shows placeholders for CMS editing. In default mode,
+             * le-slot acts as a transparent passthrough.
+             * @cssprop --le-card-bg - Card background color
+             * @cssprop --le-card-border-radius - Card border radius
+             * @cssprop --le-card-shadow - Card box shadow
+             * @cssprop --le-card-padding - Card content padding
+             * @csspart card - The main card container
+             * @csspart header - The card header section
+             * @csspart content - The card content section
+             * @csspart footer - The card footer section
+             * @cmsEditable true
+             * @cmsCategory Layout
+             */
+            "le-card": LocalJSX.LeCard & JSXBase.HTMLAttributes<HTMLLeCardElement>;
+            /**
+             * A checkbox component with support for labels, descriptions, and external IDs.
+             * @cssprop --le-checkbox-size - Size of the checkbox input
+             * @cssprop --le-checkbox-color - Color of the checkbox when checked
+             * @cssprop --le-checkbox-label-color - Color of the label text
+             * @cssprop --le-checkbox-desc-color - Color of the description text
+             */
+            "le-checkbox": LocalJSX.LeCheckbox & JSXBase.HTMLAttributes<HTMLLeCheckboxElement>;
+            /**
+             * Component wrapper for admin mode editing.
+             * This component is used internally by other components to provide admin-mode 
+             * editing capabilities. It wraps the component's rendered output and shows
+             * a settings popover for editing properties.
+             * In default mode, it acts as a simple passthrough (display: contents).
+             * In admin mode, it shows a border, component name header, and settings popover.
+             * The host element is found automatically by traversing up through the shadow DOM.
+             * Usage inside a component's render method:
+             * ```tsx
+             * render() {
+             *   return (
+             *     <le-component component="le-card">
+             *       <Host>...</Host>
+             *     </le-component>
+             *   );
+             * }
+             * ```
+             * @cmsInternal true
+             * @cmsCategory System
+             */
+            "le-component": LocalJSX.LeComponent & JSXBase.HTMLAttributes<HTMLLeComponentElement>;
+            /**
+             * A number input component with validation, keyboard controls, and custom spinners.
+             * @cssprop --le-input-bg - Input background color
+             * @cssprop --le-input-color - Input text color
+             * @cssprop --le-input-border - Input border style
+             * @cssprop --le-input-border-focus - Input border style when focused
+             * @cssprop --le-input-border-error - Input border style when invalid
+             * @cssprop --le-input-radius - Input border radius
+             * @cssprop --le-input-padding - Input padding
+             */
+            "le-number-input": LocalJSX.LeNumberInput & JSXBase.HTMLAttributes<HTMLLeNumberInputElement>;
+            /**
+             * 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.
+             * @cmsInternal true
+             * @cmsCategory System
+             */
+            "le-popover": LocalJSX.LePopover & JSXBase.HTMLAttributes<HTMLLePopoverElement>;
+            /**
+             * 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 
+             * via leAlert(), leConfirm(), lePrompt().
+             * @cmsInternal true
+             * @cmsCategory System
+             */
+            "le-popup": LocalJSX.LePopup & JSXBase.HTMLAttributes<HTMLLePopupElement>;
+            "le-round-progress": LocalJSX.LeRoundProgress & JSXBase.HTMLAttributes<HTMLLeRoundProgressElement>;
+            /**
+             * Slot placeholder component for admin/CMS mode.
+             * This component renders a visual placeholder for slots when in admin mode,
+             * allowing CMS systems to show available drop zones for content or inline editing.
+             * In non-admin mode, this component renders nothing and acts as a passthrough.
+             * @cmsInternal true
+             * @cmsCategory System
+             */
+            "le-slot": LocalJSX.LeSlot & JSXBase.HTMLAttributes<HTMLLeSlotElement>;
+            /**
+             * A flexible stack layout component using CSS flexbox.
+             * `le-stack` arranges its children in a row (horizontal) or column (vertical)
+             * with configurable spacing, alignment, and wrapping behavior. Perfect for
+             * creating responsive layouts.
+             * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))
+             * @csspart stack - The main stack container
+             * @cmsEditable true
+             * @cmsCategory Layout
+             */
+            "le-stack": LocalJSX.LeStack & JSXBase.HTMLAttributes<HTMLLeStackElement>;
+            /**
+             * A text input component with support for labels, descriptions, icons, and external IDs.
+             * @cssprop --le-input-bg - Input background color
+             * @cssprop --le-input-color - Input text color
+             * @cssprop --le-input-border - Input border style
+             * @cssprop --le-input-border-focus - Input border style when focused
+             * @cssprop --le-input-radius - Input border radius
+             * @cssprop --le-input-padding - Input padding
+             */
+            "le-string-input": LocalJSX.LeStringInput & JSXBase.HTMLAttributes<HTMLLeStringInputElement>;
+            /**
+             * A text component with rich text editing capabilities in admin mode.
+             * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)
+             * and provides a Notion-like rich text editor in admin mode with formatting
+             * toolbar for bold, italic, links, and paragraph type selection.
+             * @cssprop --le-text-color - Text color
+             * @cssprop --le-text-font-size - Font size
+             * @cssprop --le-text-line-height - Line height
+             * @cssprop --le-text-font-weight - Font weight
+             * @csspart text - The text container element
+             * @cmsEditable true
+             * @cmsCategory Content
+             */
+            "le-text": LocalJSX.LeText & JSXBase.HTMLAttributes<HTMLLeTextElement>;
+            "le-turntable": LocalJSX.LeTurntable & JSXBase.HTMLAttributes<HTMLLeTurntableElement>;
+        }
+    }
 }