le-kit 0.1.6 → 0.1.8

package/dist/core/types/components.d.ts

@@ -0,0 +1,1752 @@
+/* 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 { 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 {
+    /**
+     * 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;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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 LeStringInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLeStringInputElement;
+}
+declare global {
+    /**
+     * A flexible box component for use as a flex item within le-stack.
+     * `le-box` wraps content and provides flex item properties like grow, shrink,
+     * basis, and self-alignment. It can also control its internal content alignment.
+     * @cssprop --le-box-bg - Background color
+     * @cssprop --le-box-padding - Padding inside the box
+     * @cssprop --le-box-border-radius - Border radius
+     * @csspart box - The main box container
+     * @csspart content - The inner content wrapper
+     * @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;
+    };
+    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;
+    };
+    /**
+     * 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-number-input": HTMLLeNumberInputElement;
+        "le-popover": HTMLLePopoverElement;
+        "le-popup": HTMLLePopupElement;
+        "le-round-progress": HTMLLeRoundProgressElement;
+        "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;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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-number-input": LeNumberInput;
+        "le-popover": LePopover;
+        "le-popup": LePopup;
+        "le-round-progress": LeRoundProgress;
+        "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>;
+            /**
+             * 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>;
+            /**
+             * 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>;
+        }
+    }
+}