le-kit 0.1.13 → 0.1.15

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

@@ -0,0 +1,125 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';
+/**
+ * A select dropdown component for single selection.
+ *
+ * @cmsEditable true
+ * @cmsCategory Form
+ *
+ * @example Basic select
+ * ```html
+ * <le-select
+ *   placeholder="Choose an option"
+ *   options='[{"label": "Option 1", "value": "1"}, {"label": "Option 2", "value": "2"}]'
+ * ></le-select>
+ * ```
+ *
+ * @example With icons
+ * ```html
+ * <le-select
+ *   options='[
+ *     {"label": "Apple", "value": "apple", "iconStart": "🍎"},
+ *     {"label": "Banana", "value": "banana", "iconStart": "🍌"}
+ *   ]'
+ * ></le-select>
+ * ```
+ *
+ * @example Grouped options
+ * ```html
+ * <le-select
+ *   options='[
+ *     {"label": "Apple", "value": "apple", "group": "Fruits"},
+ *     {"label": "Carrot", "value": "carrot", "group": "Vegetables"}
+ *   ]'
+ * ></le-select>
+ * ```
+ */
+export declare class LeSelect {
+    el: HTMLElement;
+    /**
+     * The options to display in the dropdown.
+     */
+    options: LeOption[] | string;
+    /**
+     * The currently selected value.
+     */
+    value?: LeOptionValue;
+    /**
+     * Placeholder text when no option is selected.
+     */
+    placeholder: string;
+    /**
+     * Whether the select is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether selection is required.
+     */
+    required: boolean;
+    /**
+     * Name attribute for form submission.
+     */
+    name?: string;
+    /**
+     * Whether the select should take full width of its container.
+     */
+    fullWidth: boolean;
+    /**
+     * Size variant of the select.
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Visual variant of the select.
+     */
+    variant: 'default' | 'outlined' | 'solid';
+    /**
+     * Whether the input is searchable.
+     */
+    searchable: boolean;
+    /**
+     * Text to show when no options match the search.
+     */
+    emptyText: string;
+    /**
+     * Whether the dropdown is currently open.
+     */
+    open: boolean;
+    /**
+     * Emitted when the selected value changes.
+     */
+    leChange: EventEmitter<LeOptionSelectDetail>;
+    /**
+     * Emitted when the dropdown opens.
+     */
+    leOpen: EventEmitter<void>;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leClose: EventEmitter<void>;
+    private selectedOption?;
+    private searchQuery;
+    private dropdownEl?;
+    private inputEl?;
+    handleValueChange(): void;
+    handleOptionsChange(): void;
+    componentWillLoad(): void;
+    private get parsedOptions();
+    private updateSelectedOption;
+    private filterOption;
+    private handleOptionSelect;
+    private handleDropdownOpen;
+    private handleDropdownClose;
+    private handleTriggerClick;
+    private handleTriggerKeyDown;
+    private handleSearchInput;
+    /**
+     * Opens the dropdown.
+     */
+    showDropdown(): Promise<void>;
+    /**
+     * Closes the dropdown.
+     */
+    hideDropdown(): Promise<void>;
+    private renderIcon;
+    render(): any;
+}

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

@@ -16,6 +16,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
  */
 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
      */
@@ -48,6 +52,10 @@ export declare class LeStringInput {
      * Placeholder text
      */
     placeholder: string;
+    /**
+     * Hide description slot
+     */
+    hideDescription: boolean;
     /**
      * Whether the input is disabled
      */

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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,88 @@
+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;
+}

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

@@ -0,0 +1,75 @@
+/**
+ * A tab panel component used as a child of le-tabs.
+ *
+ * Each le-tab-panel defines both the tab button label and the panel content.
+ * The parent le-tabs component automatically reads these panels and creates
+ * the tab interface.
+ *
+ * @slot - Default slot for panel content
+ *
+ * @cmsEditable true
+ * @cmsCategory Navigation
+ */
+export declare class LeTabPanel {
+    el: HTMLLeTabPanelElement;
+    /**
+     * The label displayed in the tab button.
+     */
+    label: string;
+    /**
+     * The value used to identify this tab.
+     * Defaults to the label if not provided.
+     */
+    value?: string;
+    /**
+     * Icon displayed at the start of the tab button.
+     * Can be an emoji, URL, or icon class.
+     */
+    iconStart?: string;
+    /**
+     * Icon displayed at the end of the tab button.
+     */
+    iconEnd?: string;
+    /**
+     * Whether this tab is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether to render the panel content only when active (lazy loading).
+     * When true, content is not rendered until the tab is first selected.
+     * When false (default), content is always in DOM but hidden when inactive.
+     */
+    lazy: boolean;
+    /**
+     * Internal: Whether this panel is currently active (set by parent le-tabs)
+     */
+    active: boolean;
+    /**
+     * Internal: Track if panel has ever been activated (for lazy rendering)
+     */
+    hasBeenActive: boolean;
+    activeChanged(isActive: boolean): void;
+    /**
+     * Get the effective value (value or label as fallback)
+     */
+    getValue(): Promise<string>;
+    /**
+     * Get tab configuration for parent component
+     */
+    getTabConfig(): Promise<{
+        label: string;
+        value: string;
+        iconStart?: string;
+        iconEnd?: string;
+        disabled: boolean;
+    }>;
+    /**
+     * Set the active state (called by parent le-tabs)
+     */
+    setActive(isActive: boolean): Promise<void>;
+    /**
+     * Check if panel should render content
+     */
+    private shouldRenderContent;
+    render(): any;
+}

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

@@ -0,0 +1,108 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';
+/**
+ * A flexible tabs component for organizing content into tabbed panels.
+ *
+ * Supports two modes:
+ * 1. **Declarative**: Use `<le-tab-panel>` children to define tabs and content
+ * 2. **Programmatic**: Use the `tabs` prop with named slots for content
+ *
+ * Full keyboard navigation and ARIA support included.
+ *
+ * @slot - Default slot for le-tab-panel children (declarative mode)
+ * @slot panel-{value} - Named slots for panel content (programmatic mode)
+ *
+ * @cssprop --le-tabs-border-color - Border color for tab list
+ * @cssprop --le-tabs-gap - Gap between tabs
+ * @cssprop --le-tabs-indicator-color - Active tab indicator color
+ * @cssprop --le-tabs-padding-x - Horizontal padding for tab buttons
+ * @cssprop --le-tabs-padding-y - Vertical padding for tab buttons
+ *
+ * @csspart tablist - The tab button container (role="tablist")
+ * @csspart tab - Individual tab buttons
+ * @csspart tab-active - The currently active tab
+ * @csspart panels - Container for panel content
+ * @csspart panel - Individual panel containers
+ *
+ * @cmsEditable true
+ * @cmsCategory Navigation
+ */
+export declare class LeTabs {
+    el: HTMLElement;
+    /**
+     * Array of tab options (programmatic mode).
+     * If le-tab-panel children exist, they take precedence.
+     */
+    tabs: LeOption[];
+    /**
+     * The value of the currently selected tab.
+     * If not provided, defaults to the first tab.
+     */
+    selected?: LeOptionValue;
+    /**
+     * Orientation of the tabs.
+     * @allowedValues horizontal | vertical
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Position of the tabs relative to the panels.
+     * @allowedValues start | end
+     */
+    position: 'start' | 'end';
+    /**
+     * Tab variant style.
+     * @allowedValues underlined | solid | pills | enclosed | icon-only
+     */
+    variant: 'underlined' | 'solid' | 'pills' | 'enclosed' | 'icon-only';
+    /**
+     * Whether tabs should stretch to fill available width.
+     */
+    fullWidth: boolean;
+    /**
+     * Size of the tabs.
+     * @allowedValues sm | md | lg
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Wrap the tabs if they exceed container width.
+     */
+    wrap: boolean;
+    /**
+     * Scroll behavior for overflowing tabs.
+     * @allowedValues auto | hidden | visible | scroll
+     */
+    overflow: 'auto' | 'hidden' | 'visible' | 'scroll';
+    /**
+     * Internal tab configurations (built from children or tabs prop)
+     */
+    private tabConfigs;
+    /**
+     * Internal state for focused tab index (for keyboard navigation)
+     */
+    private focusedIndex;
+    /**
+     * Whether we're using declarative mode (le-tab-panel children)
+     */
+    private isDeclarativeMode;
+    /**
+     * 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 updatePanelStates;
+    private selectTab;
+    private handleTabClick;
+    private handleKeyDown;
+    private findNextEnabledTab;
+    private findFirstEnabledTab;
+    private findLastEnabledTab;
+    private focusTab;
+    render(): any;
+}

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

@@ -0,0 +1,78 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A tag/chip component for displaying labels with optional dismiss functionality.
+ *
+ * @cmsEditable false
+ * @cmsCategory Form
+ *
+ * @slot - Default slot for custom content (overrides label prop)
+ *
+ * @example Basic tag
+ * ```html
+ * <le-tag label="JavaScript"></le-tag>
+ * ```
+ *
+ * @example Dismissible tag
+ * ```html
+ * <le-tag label="Remove me" dismissible></le-tag>
+ * ```
+ *
+ * @example With icon
+ * ```html
+ * <le-tag label="Settings" icon="⚙️"></le-tag>
+ * ```
+ *
+ * @example Different sizes
+ * ```html
+ * <le-tag label="Small" size="small"></le-tag>
+ * <le-tag label="Medium" size="medium"></le-tag>
+ * <le-tag label="Large" size="large"></le-tag>
+ * ```
+ *
+ * @example Different variants
+ * ```html
+ * <le-tag label="Default" variant="default"></le-tag>
+ * <le-tag label="Primary" variant="primary"></le-tag>
+ * <le-tag label="Success" variant="success"></le-tag>
+ * <le-tag label="Warning" variant="warning"></le-tag>
+ * <le-tag label="Danger" variant="danger"></le-tag>
+ * ```
+ */
+export declare class LeTag {
+    /**
+     * The text label to display in the tag.
+     */
+    label: string;
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode: 'default' | 'admin';
+    /**
+     * Icon to display before the label.
+     * Can be an emoji, URL, or icon name.
+     */
+    icon?: string;
+    /**
+     * Whether the tag can be dismissed (shows close button).
+     */
+    dismissible: boolean;
+    /**
+     * Whether the tag is disabled.
+     */
+    disabled: boolean;
+    /**
+     * The size of the tag.
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * The visual variant of the tag.
+     */
+    variant: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    /**
+     * Emitted when the dismiss button is clicked.
+     */
+    leDismiss: EventEmitter<void>;
+    private handleDismiss;
+    private renderIcon;
+    render(): any;
+}