le-kit 0.5.2 → 0.5.4

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

@@ -1,100 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export type LeSidePanelSide = 'start' | 'end';
-export type LeSidePanelNarrowBehavior = 'overlay' | 'push';
-export type LeSidePanelToggleAction = 'toggle' | 'open' | 'close';
-export type LeSidePanelRequestToggleDetail = {
-    panelId?: string;
-    action: LeSidePanelToggleAction;
-};
-export declare class LeSidePanel {
-    el: HTMLElement;
-    /**
-     * Optional id used to match toggle requests.
-     * If set, the panel only responds to toggle events with the same `panelId`.
-     */
-    panelId?: string;
-    /** Which side the panel is attached to. */
-    side: LeSidePanelSide;
-    /** Width breakpoint (in px or a CSS var like `--le-breakpoint-md`) below which the panel enters "narrow" mode. */
-    collapseAt?: string;
-    /** Behavior when in narrow mode. */
-    narrowBehavior: LeSidePanelNarrowBehavior;
-    /**
-     * Panel open state for narrow mode.
-     * - overlay: controls modal drawer visibility
-     * - push: controls whether panel is shown (non-modal)
-     */
-    open: boolean;
-    /** Panel collapsed state for wide mode (fully hidden). */
-    collapsed: boolean;
-    /** Default panel width in pixels. */
-    panelWidth: number;
-    /** Minimum allowed width when resizable. */
-    minPanelWidth: number;
-    /** Maximum allowed width when resizable. */
-    maxPanelWidth: number;
-    /** Allows users to resize the panel by dragging its edge. */
-    resizable: boolean;
-    /** When set, panel width + collapsed state are persisted in localStorage. */
-    persistKey?: string;
-    /** Show a close button inside the panel (primarily used in narrow overlay mode). */
-    showCloseButton: boolean;
-    /** When crossing to wide mode, automatically show the panel (collapsed=false). */
-    autoShowOnWide: boolean;
-    /** When crossing to narrow mode, automatically hide the panel (open=false). */
-    autoHideOnNarrow: boolean;
-    /** Accessible label for the panel navigation region. */
-    panelLabel: string;
-    leSidePanelOpenChange: EventEmitter<{
-        open: boolean;
-        panelId?: string;
-    }>;
-    leSidePanelCollapsedChange: EventEmitter<{
-        collapsed: boolean;
-        panelId?: string;
-    }>;
-    leSidePanelWidthChange: EventEmitter<{
-        width: number;
-        panelId?: string;
-    }>;
-    private isNarrow;
-    private responsiveReady;
-    private overlayMounted;
-    private overlayVisible;
-    private currentWidthPx;
-    private resizing;
-    private resizeObserver?;
-    private panelEl?;
-    private overlayWrapEl?;
-    private focusedBeforeOpen?;
-    private dragPointerId?;
-    private dragStartX?;
-    private dragStartWidth?;
-    connectedCallback(): void;
-    componentWillLoad(): void;
-    disconnectedCallback(): void;
-    private isModalOverlayActive;
-    private syncOverlayToState;
-    protected onPanelWidthChanged(): void;
-    protected onCollapsedChanged(): void;
-    protected onOpenChanged(newValue: boolean): void;
-    protected onResponsivePropChanged(): void;
-    protected onDocumentKeyDown(ev: KeyboardEvent): void;
-    protected onToggleRequest(ev: CustomEvent<LeSidePanelRequestToggleDetail>): void;
-    private applyActionToOpen;
-    private applyActionToCollapsed;
-    private recomputeNarrow;
-    private restorePersistedState;
-    private persistState;
-    private focusFirstInsidePanel;
-    private getFocusableElements;
-    private restoreFocusAfterClose;
-    private onOverlayTransitionEnd;
-    private onOverlayPointerDown;
-    private startResizeDrag;
-    private onResizeDragMove;
-    private onResizeDragEnd;
-    private teardownDragListeners;
-    private renderPanelInner;
-    render(): any;
-}

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

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

package/dist/types/components/le-slot/le-slot.d.ts

@@ -1,149 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * 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.
- *
- * @slot - Default slot for placeholder content or drop zone UI
- *
- * @cmsInternal true
- * @cmsCategory System
- */
-export declare class LeSlot {
-    el: HTMLElement;
-    /**
-     * 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
-     */
-    type: 'slot' | 'text' | 'textarea';
-    /**
-     * The name of the slot this placeholder represents.
-     * Should match the slot name in the parent component.
-     */
-    name: string;
-    /**
-     * Label to display in admin mode.
-     * If not provided, the slot name will be used.
-     */
-    label?: string;
-    /**
-     * Description of what content this slot accepts.
-     * Shown in admin mode to guide content editors.
-     */
-    description?: string;
-    /**
-     * 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;
-    /**
-     * Whether multiple components can be dropped in this slot.
-     */
-    multiple: boolean;
-    /**
-     * Whether this slot is required to have content.
-     */
-    required: boolean;
-    /**
-     * Placeholder text for text/textarea inputs in admin mode.
-     */
-    placeholder?: 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;
-    /**
-     * 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;
-    /**
-     * Internal state to track admin mode
-     */
-    private adminMode;
-    /**
-     * Internal state for text input value (synced from slot content)
-     */
-    private textValue;
-    /**
-     * Whether the current textValue contains valid HTML
-     */
-    private isValidHtml;
-    /**
-     * Available components loaded from Custom Elements Manifest
-     */
-    private availableComponents;
-    /**
-     * Whether the component picker popover is open
-     */
-    private pickerOpen;
-    /**
-     * Reference to the slot element to access assignedNodes
-     */
-    private slotRef?;
-    /**
-     * The original slotted element (e.g., <h3 slot="header">)
-     */
-    private slottedElement?;
-    /**
-     * Emitted when text content changes in admin mode.
-     * The event detail contains the new text value and validity.
-     */
-    leSlotChange: EventEmitter<{
-        name: string;
-        value: string;
-        isValid: boolean;
-    }>;
-    private disconnectModeObserver?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Flag to prevent re-reading content right after we updated it
-     */
-    private isUpdating;
-    /**
-     * Read content from slotted elements via assignedNodes()
-     */
-    private readSlottedContent;
-    /**
-     * Validates if a string contains valid HTML
-     */
-    private validateHtml;
-    private handleTextInput;
-    /**
-     * Create a new slotted element when none exists.
-     * The element is appended to the host component's light DOM.
-     */
-    private createSlottedElement;
-    /**
-     * Load available components from Custom Elements Manifest
-     */
-    private loadAvailableComponents;
-    /**
-     * Format a tag name into a display name
-     * e.g., 'le-card' -> 'Card'
-     */
-    private formatComponentName;
-    /**
-     * Add a new component to the slot
-     */
-    private addComponent;
-    /**
-     * Handle slot change event to re-read content when nodes are assigned
-     */
-    private handleSlotChange;
-    render(): any;
-    private renderContent;
-}

package/dist/types/components/le-stack/le-stack.d.ts

@@ -1,73 +0,0 @@
-/**
- * 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.
- *
- * @slot - Default slot for stack items (le-box components recommended)
- *
- * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))
- *
- * @csspart stack - The main stack container
- *
- * @cmsEditable true
- * @cmsCategory Layout
- */
-export declare class LeStack {
-    el: HTMLElement;
-    /**
-     * Direction of the stack layout
-     * @allowedValues horizontal | vertical
-     */
-    direction: 'horizontal' | 'vertical';
-    /**
-     * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')
-     */
-    gap?: string;
-    /**
-     * Alignment of items on the cross axis
-     * @allowedValues start | center | end | stretch | baseline
-     */
-    align: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-    /**
-     * Distribution of items on the main axis
-     * @allowedValues start | center | end | space-between | space-around | space-evenly
-     */
-    justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
-    /**
-     * Whether items should wrap to multiple lines
-     */
-    wrap: boolean;
-    /**
-     * Alignment of wrapped lines (only applies when wrap is true)
-     * @allowedValues start | center | end | stretch | space-between | space-around
-     */
-    alignContent: 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around';
-    /**
-     * Whether to reverse the order of items
-     */
-    reverse: boolean;
-    /**
-     * Maximum number of items allowed in the stack (for CMS validation)
-     * @min 1
-     */
-    maxItems?: number;
-    /**
-     * Whether the stack should take full width of its container
-     */
-    fullWidth: boolean;
-    /**
-     * Whether the stack should take full height of its container
-     */
-    fullHeight: boolean;
-    /**
-     * Padding inside the stack container (CSS value)
-     */
-    padding?: string;
-    private getFlexDirection;
-    private getAlignItems;
-    private getJustifyContent;
-    private getAlignContent;
-    render(): any;
-}

package/dist/types/components/le-string-input/le-string-input.d.ts

@@ -1,91 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * A text input component with support for labels, descriptions, icons, and external IDs.
- *
- * @slot - The label text for the input
- * @slot description - Additional description text displayed below the input
- * @slot icon-start - Icon to display at the start of the input
- * @slot icon-end - Icon to display at the end of the input
- *
- * @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
- */
-export declare class LeStringInput {
-    el: HTMLElement;
-    /**
-     * Pass the ref of the input element to the parent component
-     */
-    inputRef?: (el: HTMLInputElement) => void;
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode: 'default' | 'admin';
-    /**
-     * The value of the input
-     */
-    value: string;
-    /**
-     * The name of the input
-     */
-    name: string;
-    /**
-     * The type of the input (text, email, password, etc.)
-     */
-    type: 'text' | 'email' | 'password' | 'tel' | 'url';
-    /**
-     * Label for the input
-     */
-    label: string;
-    /**
-     * Icon for the start icon
-     */
-    iconStart: string;
-    /**
-     * Icon for the end icon
-     */
-    iconEnd: string;
-    /**
-     * Placeholder text
-     */
-    placeholder: string;
-    /**
-     * Hide description slot
-     */
-    hideDescription: boolean;
-    /**
-     * Whether the input is disabled
-     */
-    disabled: boolean;
-    /**
-     * Whether the input is read-only
-     */
-    readonly: boolean;
-    /**
-     * External ID for linking with external systems
-     */
-    externalId: string;
-    /**
-     * Emitted when the value changes (on blur or Enter)
-     */
-    leChange: EventEmitter<{
-        value: string;
-        name: string;
-        externalId: string;
-    }>;
-    /**
-     * Emitted when the input value changes (on keystroke)
-     */
-    leInput: EventEmitter<{
-        value: string;
-        name: string;
-        externalId: string;
-    }>;
-    private handleInput;
-    private handleChange;
-    private handleClick;
-    render(): any;
-}

package/dist/types/components/le-tab/le-tab.d.ts

@@ -1,116 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * A flexible tab component with multiple variants and states.
- *
- * @slot - Tab text content
- * @slot icon-only - Icon for icon-only tabs
- *
- * @cssprop --le-tab-bg - Tab background color
- * @cssprop --le-tab-color - Tab text color
- * @cssprop --le-tab-border-radius - Tab border radius
- * @cssprop --le-tab-padding-x - Tab horizontal padding
- * @cssprop --le-tab-padding-y - Tab vertical padding
- *
- * @csspart button - The native button element
- * @csspart content - The tab content wrapper
- * @csspart icon-start - The start icon slot
- * @csspart icon-end - The end icon slot
- *
- * @cmsEditable true
- * @cmsCategory Actions
- */
-export declare class LeTab {
-    el: HTMLElement;
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode: 'default' | 'admin';
-    /**
-     * Label if it is not provided via slot
-     */
-    label?: string;
-    /**
-     * Value of the tab, defaults to label if not provided
-     */
-    value?: string;
-    /**
-     * Tab variant style
-     * @allowedValues solid | underlined | clear | enclosed | icon-only
-     */
-    variant: 'underlined' | 'solid' | 'pills' | 'enclosed' | 'icon-only';
-    /**
-     * Position of the tabs when used within a le-tabs component
-     * @allowedValues top | bottom | start | end
-     */
-    position: 'top' | 'bottom' | 'start' | 'end';
-    /**
-     * Tab size
-     * @allowedValues small | medium | large
-     */
-    size: 'small' | 'medium' | 'large';
-    /**
-     * Whether the tab can get focus
-     * needed for accessibility when used in custom tab implementations
-     */
-    focusable: boolean;
-    /**
-     * Whether the tab is in a selected/active state
-     */
-    selected: boolean;
-    /**
-     * Whether the tab takes full width of its container
-     */
-    fullWidth: boolean;
-    /**
-     * Icon only tab image or emoji
-     * if this prop is set, the tab will render only the icon slot
-     */
-    icon?: string | Node;
-    /**
-     * Whether to show the label when in icon-only mode
-     */
-    showLabel: boolean;
-    /**
-     * Start icon image or emoji
-     */
-    iconStart?: string | Node;
-    /**
-     * End icon image or emoji
-     */
-    iconEnd?: string | Node;
-    /**
-     * Whether the tab is disabled
-     */
-    disabled: boolean;
-    /**
-     * Optional href to make the tab act as a link
-     */
-    href?: string;
-    /**
-     * Link target when href is set
-     */
-    target?: string;
-    /**
-     * Alignment of the tab label without the end icon
-     * @allowedValues start | center | space-between | end
-     */
-    align: 'start' | 'center' | 'space-between' | 'end';
-    /**
-     * Get tab configuration for parent component
-     */
-    getTabConfig(): Promise<{
-        label: string;
-        value: string;
-        icon: string | Node;
-        iconStart?: string | Node;
-        iconEnd?: string | Node;
-        disabled: boolean;
-    }>;
-    /**
-     * Emitted when the tab is clicked.
-     * This is a custom event that wraps the native click but ensures the target is the le-tab.
-     */
-    leClick: EventEmitter<PointerEvent>;
-    private handleClick;
-    render(): any;
-}

package/dist/types/components/le-tab-bar/le-tab-bar.d.ts

@@ -1,88 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';
-/**
- * A presentational tab bar component without panels.
- *
- * Use this for navigation/routing scenarios where you manage the content
- * externally based on the selection events. For tabs with built-in panels,
- * use `le-tabs` instead.
- *
- * @cssprop --le-tab-bar-border-color - Border color
- * @cssprop --le-tab-bar-gap - Gap between tabs
- * @cssprop --le-tab-bar-indicator-color - Active indicator color
- * @cssprop --le-tab-bar-padding-x - Horizontal padding for tabs
- * @cssprop --le-tab-bar-padding-y - Vertical padding for tabs
- *
- * @csspart tablist - The tab button container
- * @csspart tab - Individual tab buttons
- * @csspart tab-active - The currently active tab
- *
- * @cmsEditable true
- * @cmsCategory Navigation
- */
-export declare class LeTabBar {
-    el: HTMLElement;
-    /**
-     * Array of tab options defining the tabs to display.
-     */
-    tabs: LeOption[];
-    /**
-     * The value of the currently selected tab.
-     */
-    selected?: LeOptionValue;
-    /**
-     * Whether tabs should stretch to fill available width.
-     */
-    fullWidth: boolean;
-    /**
-     * Whether to show labels in icon-only mode.
-     */
-    showLabels: boolean;
-    /**
-     * Position of the tab bar.
-     * @allowedValues top | bottom
-     */
-    position: 'top' | 'bottom';
-    /**
-     * Size of the tabs.
-     * @allowedValues small | medium | large
-     */
-    size: 'small' | 'medium' | 'large';
-    /**
-     * Whether to show a border below the tab bar.
-     */
-    bordered: boolean;
-    /**
-     * Internal tab configurations (built from children or tabs prop)
-     */
-    private tabConfigs;
-    /**
-     * Whether we're using declarative mode (le-tab-panel children)
-     */
-    private isDeclarativeMode;
-    /**
-     * Internal state for focused tab index (for keyboard navigation)
-     */
-    private focusedIndex;
-    /**
-     * Emitted when the selected tab changes.
-     */
-    leTabChange: EventEmitter<LeOptionSelectDetail>;
-    private mutationObserver?;
-    selectedChanged(newValue: LeOptionValue): void;
-    tabsChanged(): void;
-    handleSlotChange(): void;
-    componentWillLoad(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private buildTabConfigs;
-    private getTabValue;
-    private getTabIndex;
-    private selectTab;
-    private handleTabClick;
-    private handleKeyDown;
-    private findNextEnabledTab;
-    private findFirstEnabledTab;
-    private findLastEnabledTab;
-    render(): any;
-}