le-kit 0.1.14 → 0.1.16

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

@@ -0,0 +1,143 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { LeOption, LeOptionValue, LeMultiOptionSelectDetail } from '../../types/options';
+/**
+ * A multiselect component for selecting multiple options.
+ *
+ * Displays selected items as tags with optional search filtering.
+ *
+ * @cmsEditable true
+ * @cmsCategory Form
+ *
+ * @example Basic multiselect
+ * ```html
+ * <le-multiselect
+ *   placeholder="Select options..."
+ *   options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
+ * ></le-multiselect>
+ * ```
+ *
+ * @example With max selections
+ * ```html
+ * <le-multiselect
+ *   max-selections="3"
+ *   options='[{"label": "Option 1"}, {"label": "Option 2"}, {"label": "Option 3"}, {"label": "Option 4"}]'
+ * ></le-multiselect>
+ * ```
+ *
+ * @example With search
+ * ```html
+ * <le-multiselect
+ *   searchable
+ *   placeholder="Search and select..."
+ *   options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
+ * ></le-multiselect>
+ * ```
+ */
+export declare class LeMultiselect {
+    el: HTMLElement;
+    /**
+     * The options to display in the dropdown.
+     */
+    options: LeOption[] | string;
+    /**
+     * The currently selected values.
+     */
+    value: LeOptionValue[];
+    /**
+     * Placeholder text when no options are selected.
+     */
+    placeholder: string;
+    /**
+     * Whether the multiselect is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether selection is required.
+     */
+    required: boolean;
+    /**
+     * Name attribute for form submission.
+     */
+    name?: string;
+    /**
+     * Whether the multiselect should take full width of its container.
+     */
+    fullWidth: boolean;
+    /**
+     * Size variant of the multiselect.
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Maximum number of selections allowed.
+     */
+    maxSelections?: number;
+    /**
+     * Labels for the "Select All" option.
+     */
+    private selectAllLabel;
+    private deselectAllLabel;
+    /**
+     * Whether to show a "Select All" option.
+     * Also accepts a string or array of strings to customize the label(s).
+     */
+    showSelectAll: boolean | string | string[];
+    /**
+     * 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 values change.
+     */
+    leChange: EventEmitter<LeMultiOptionSelectDetail>;
+    /**
+     * Emitted when the dropdown opens.
+     */
+    leOpen: EventEmitter<void>;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leClose: EventEmitter<void>;
+    private selectedOptions;
+    private searchQuery;
+    private dropdownEl?;
+    private inputEl?;
+    handleValueChange(): void;
+    handleOptionsChange(): void;
+    handleShowSelectAllChange(newValue: boolean | string | string[]): void;
+    componentWillLoad(): void;
+    private get parsedOptions();
+    private get effectiveOptions();
+    private updateSelectedOptions;
+    private filterOption;
+    private handleOptionSelect;
+    private emitChange;
+    private handleDropdownOpen;
+    private handleDropdownClose;
+    private handleTriggerClick;
+    private handleTriggerKeyDown;
+    private handleTagDismiss;
+    private handleSearchInput;
+    private handleClearAll;
+    /**
+     * Opens the dropdown.
+     */
+    showDropdown(): Promise<void>;
+    /**
+     * Closes the dropdown.
+     */
+    hideDropdown(): Promise<void>;
+    /**
+     * Clears all selections.
+     */
+    clearSelection(): Promise<void>;
+    private renderTags;
+    render(): any;
+}

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

@@ -8,6 +8,9 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @slot - Content to display inside the popover
  * @slot trigger - Element that triggers the popover (optional)
  *
+ * @csspart trigger - The popover trigger element
+ * @csspart content - The popover content wrapper
+ *
  * @cmsInternal true
  * @cmsCategory System
  */
@@ -61,6 +64,10 @@ export declare class LePopover {
      * Maximum width for the popover (e.g., '400px', '25rem')
      */
     maxWidth?: string;
+    /**
+     * Should the popover's trigger take full width of its container
+     */
+    triggerFullWidth: boolean;
     /**
      * Emitted when the popover opens
      */
@@ -69,13 +76,24 @@ export declare class LePopover {
      * Emitted when the popover closes
      */
     lePopoverClose: EventEmitter<void>;
+    /**
+     * Method to update the popover position from a parent component
+     */
+    updatePosition(): Promise<void>;
     private isPositioned;
     private triggerEl?;
     private popoverEl?;
     private uniqueId;
     private scrollParents;
+    private isListeningForDismiss;
+    private get supportsPopoverApi();
+    private shadowContains;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private addDismissListeners;
+    private removeDismissListeners;
+    private handleDocumentPointerDown;
+    private handleDocumentKeyDown;
     /**
      * Find all scrollable parent elements
      */
@@ -89,6 +107,8 @@ export declare class LePopover {
      */
     private removeScrollListeners;
     private handleScroll;
+    private handleOpened;
+    private handleClosed;
     private handlePopoverToggle;
     private handleOtherPopoverOpen;
     /**
@@ -104,6 +124,6 @@ export declare class LePopover {
      */
     toggle(): Promise<void>;
     private handleTriggerClick;
-    private updatePosition;
-    render(): any[];
+    private _updatePosition;
+    render(): any;
 }

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { LeKitMode } from '../../global/app';
 /**
  * Popup type determines the buttons shown
  */
@@ -30,6 +31,10 @@ export interface PopupResult {
  */
 export declare class LePopup {
     el: HTMLElement;
+    /**
+     * The mode of the Le Kit (e.g., 'default' or 'admin')
+     */
+    mode: LeKitMode;
     /**
      * Whether the popup is currently visible
      */

package/dist/types/components/le-scroll-progress/le-scroll-progress.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Displays scroll progress as a simple bar.
+ *
+ * If `track-scroll-progress` is present without a value, tracks the full document.
+ * If it is a selector string, tracks progress within the matched element.
+ *
+ * @cssprop --le-scroll-progress-height - Bar height
+ * @cssprop --le-scroll-progress-bg - Track background
+ * @cssprop --le-scroll-progress-fill - Fill color
+ * @cssprop --le-scroll-progress-sticky-top - If sticky, stop position to parent top
+ * @cssprop --le-scroll-progress-fixed-top - If fixed, distance from window top
+ * @cssprop --le-scroll-progress-fixed-left - If fixed, distance from window left
+ * @cssprop --le-scroll-progress-fixed-right - If fixed, distance from window right
+ * @cssprop --le-scroll-progress-z - Z-index of the progress bar (1001 by default, above header)
+ *
+ * @csspart track - Outer track
+ * @csspart fill - Inner fill
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export declare class LeScrollProgress {
+    el: HTMLElement;
+    /** Boolean or selector string. */
+    trackScrollProgress?: string;
+    private progress;
+    private rafId;
+    private targetEl;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    protected onTrackChange(): void;
+    protected onScroll(): void;
+    protected onResize(): void;
+    private scheduleUpdate;
+    private resolveTarget;
+    private clamp01;
+    private updateProgress;
+    render(): any;
+}

package/dist/types/components/le-segmented-control/le-segmented-control.d.ts

@@ -0,0 +1,82 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';
+/**
+ * A segmented control component (iOS-style toggle buttons).
+ *
+ * Perfect for toggling between a small set of related options.
+ *
+ * @cssprop --le-segmented-bg - Background color of the control
+ * @cssprop --le-segmented-padding - Padding around segments
+ * @cssprop --le-segmented-gap - Gap between segments
+ * @cssprop --le-segmented-radius - Border radius of the control
+ *
+ * @csspart container - The main container
+ * @csspart segment - Individual segment buttons
+ * @csspart segment-active - The currently active segment
+ *
+ * @cmsEditable true
+ * @cmsCategory Form
+ */
+export declare class LeSegmentedControl {
+    el: HTMLElement;
+    private containerRef?;
+    /**
+     * Array of options for the segmented control.
+     */
+    options: LeOption[];
+    /**
+     * The value of the currently selected option.
+     */
+    value?: LeOptionValue;
+    /**
+     * Size of the control.
+     * @allowedValues small | medium | large
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Scroll behavior for overflowing tabs.
+     * @allowedValues auto | hidden | visible | scroll
+     */
+    overflow: 'auto' | 'hidden' | 'visible' | 'scroll';
+    /**
+     * Whether the control should take full width.
+     */
+    fullWidth: boolean;
+    /**
+     * Whether the control is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Internal tab configurations (built from children or tabs prop)
+     */
+    private segmentConfigs;
+    /**
+     * Internal state for focused index (keyboard navigation)
+     */
+    private focusedIndex;
+    /**
+     * Whether we're using declarative mode (le-tab children)
+     */
+    private isDeclarativeMode;
+    /**
+     * Emitted when the selection changes.
+     */
+    leChange: EventEmitter<LeOptionSelectDetail>;
+    private mutationObserver?;
+    tabsChanged(): void;
+    handleSlotChange(): void;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private buildSegmentsConfigs;
+    private getOptionValue;
+    private getOptionIndex;
+    private selectOption;
+    private handleClick;
+    private handleKeyDown;
+    private findNextEnabled;
+    private findFirstEnabled;
+    private findLastEnabled;
+    private focusSegment;
+    render(): any;
+}

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;
+}