le-kit 0.1.13 → 0.1.15

package/dist/themes/warm.css

@@ -62,6 +62,7 @@
   /* Surface colors */
   --le-color-surface: #ffffff;
   --le-color-surface-elevated: #ffffff;
+  --le-color-surface-alt: #ffebba;
   
   /* Text colors */
   --le-color-text-primary: #78350f;
@@ -71,6 +72,7 @@
   
   /* Border colors */
   --le-color-border: #fcd34d;
+  --le-color-border-hover: #ee8349;
   --le-color-border-light: #fde68a;
   --le-color-border-dark: #fbbf24;
 
@@ -79,7 +81,7 @@
   --le-color-border-input: #e7d4c4;
 
   /* Focus ring */
-  --le-color-focus: rgba(234, 88, 12, 0.5);
+  --le-color-focus: rgba(234, 88, 12, 0.15);
   
   /* Border radius - slightly rounded */
   --le-radius-none: 0;
@@ -91,6 +93,7 @@
   --le-radius-full: 9999px;
   
   /* Shadows - warm tinted */
+  --le-color-shadow: color-mix(in srgb, var(--le-color-primary) 80%, transparent);
   --le-shadow-none: none;
   --le-shadow-sm: 0 1px 2px rgba(234, 88, 12, 0.05);
   --le-shadow-md: 0 4px 6px rgba(234, 88, 12, 0.1), 0 2px 4px rgba(234, 88, 12, 0.06);

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

@@ -3,8 +3,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * A flexible button component with multiple variants and states.
  *
  * @slot - Button text content
- * @slot icon-start - Icon before the text
- * @slot icon-end - Icon after the text
+ * @slot icon-only - Icon for icon-only buttons
  *
  * @cssprop --le-button-bg - Button background color
  * @cssprop --le-button-color - Button text color
@@ -14,6 +13,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
  *
  * @csspart button - The native button element
  * @csspart content - The button content wrapper
+ * @csspart icon-start - The start icon slot
+ * @csspart icon-end - The end icon slot
  *
  * @cmsEditable true
  * @cmsCategory Actions
@@ -48,9 +49,18 @@ export declare class LeButton {
      */
     fullWidth: boolean;
     /**
-     * Whether the button displays only an icon (square aspect ratio)
+     * Icon only button image or emoji
+     * if this prop is set, the button will render only the icon slot
      */
-    iconOnly: boolean;
+    iconOnly?: string | Node;
+    /**
+     * Start icon image or emoji
+     */
+    iconStart?: string | Node;
+    /**
+     * End icon image or emoji
+     */
+    iconEnd?: string | Node;
     /**
      * Whether the button is disabled
      */
@@ -68,6 +78,11 @@ export declare class LeButton {
      * Link target when href is set
      */
     target?: string;
+    /**
+     * Alignment of the button label without the end icon
+     * @allowedValues start | center | space-between | end
+     */
+    align: 'start' | 'center' | 'space-between' | 'end';
     /**
      * Emitted when the button is clicked.
      * This is a custom event that wraps the native click but ensures the target is the le-button.

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

@@ -0,0 +1,128 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';
+/**
+ * A combobox component with searchable dropdown.
+ *
+ * Combines a text input with a dropdown list, allowing users to
+ * filter options by typing or select from the list.
+ *
+ * @cmsEditable true
+ * @cmsCategory Form
+ *
+ * @example Basic combobox
+ * ```html
+ * <le-combobox
+ *   placeholder="Search..."
+ *   options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
+ * ></le-combobox>
+ * ```
+ *
+ * @example Allow custom values
+ * ```html
+ * <le-combobox
+ *   placeholder="Type or select..."
+ *   allow-custom
+ *   options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
+ * ></le-combobox>
+ * ```
+ */
+export declare class LeCombobox {
+    el: HTMLElement;
+    /**
+     * The options to display in the dropdown.
+     */
+    options: LeOption[] | string;
+    /**
+     * The currently selected value.
+     */
+    value?: LeOptionValue;
+    /**
+     * Placeholder text for the input.
+     */
+    placeholder: string;
+    /**
+     * Whether the combobox 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 combobox.
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Whether to allow custom values not in the options list.
+     */
+    allowCustom: boolean;
+    /**
+     * Minimum characters before showing filtered results.
+     */
+    minSearchLength: number;
+    /**
+     * 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 input value changes (for custom values).
+     */
+    leInput: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * Emitted when the dropdown opens.
+     */
+    leOpen: EventEmitter<void>;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leClose: EventEmitter<void>;
+    handleWindowClick(event: MouseEvent): void;
+    private inputValue;
+    private selectedOption?;
+    private dropdownEl?;
+    private inputEl?;
+    handleValueChange(): void;
+    handleOptionsChange(): void;
+    componentWillLoad(): void;
+    private get parsedOptions();
+    private updateSelectedOption;
+    private filterOption;
+    private handleOptionSelect;
+    private handleDropdownOpen;
+    private handleDropdownClose;
+    private handleInputChange;
+    private handleInputFocus;
+    private handleInputKeyDown;
+    private handleClear;
+    /**
+     * Opens the dropdown.
+     */
+    showDropdown(): Promise<void>;
+    /**
+     * Closes the dropdown.
+     */
+    hideDropdown(): Promise<void>;
+    /**
+     * Focuses the input element.
+     */
+    focusInput(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/le-dropdown-base/le-dropdown-base.d.ts

@@ -0,0 +1,118 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';
+/**
+ * Internal dropdown base component that provides shared functionality
+ * for select, combobox, and multiselect components.
+ *
+ * Wraps le-popover for positioning and provides:
+ * - Option list rendering with groups
+ * - Keyboard navigation (↑↓, Enter, Escape, Home/End)
+ * - Option filtering support
+ * - Single and multi-select modes
+ *
+ * @cmsInternal true
+ * @cmsCategory System
+ *
+ * @slot trigger - The element that triggers the dropdown
+ */
+export declare class LeDropdownBase {
+    el: HTMLElement;
+    /**
+     * The options to display in the dropdown.
+     */
+    options: LeOption[];
+    /**
+     * Current value(s) - single value or array for multiselect.
+     */
+    value?: LeOptionValue | LeOptionValue[];
+    /**
+     * Whether multiple selection is allowed.
+     */
+    multiple: boolean;
+    /**
+     * Whether the dropdown is open.
+     */
+    open: boolean;
+    /**
+     * Whether the dropdown is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Filter function for options.
+     * Return true to include the option.
+     */
+    filterFn?: (option: LeOption, query: string) => boolean;
+    /**
+     * Current filter query string.
+     */
+    filterQuery: string;
+    /**
+     * Placeholder text when no options match filter.
+     */
+    emptyText: string;
+    /**
+     * Whether to show checkboxes for multiselect mode.
+     */
+    showCheckboxes: boolean;
+    /**
+     * Maximum height of the dropdown list.
+     */
+    maxHeight: string;
+    /**
+     * Width of the dropdown. If not set, matches trigger width.
+     */
+    width?: string;
+    /**
+     * Sets the dropdown to full width of the trigger.
+     */
+    fullWidth: boolean;
+    /**
+     * Whether to close the dropdown when clicking outside.
+     * (used to support combobox with input focus)
+     */
+    closeOnClickOutside: boolean;
+    /**
+     * Emitted when an option is selected.
+     */
+    leOptionSelect: EventEmitter<LeOptionSelectDetail>;
+    /**
+     * Emitted when the dropdown opens.
+     */
+    leDropdownOpen: EventEmitter<void>;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leDropdownClose: EventEmitter<void>;
+    private focusedIndex;
+    private filteredOptions;
+    private popoverEl?;
+    private listEl?;
+    private triggerWidth;
+    handleOptionsChange(): void;
+    componentWillLoad(): void;
+    private updateFilteredOptions;
+    private getSelectableOptions;
+    private isSelected;
+    private handleOptionClick;
+    private handleKeyDown;
+    private scrollToFocused;
+    private handlePopoverOpen;
+    private handlePopoverClose;
+    private getInitialFocusIndex;
+    /**
+     * Opens the dropdown.
+     */
+    show(): Promise<void>;
+    /**
+     * Closes the dropdown.
+     */
+    hide(): Promise<void>;
+    /**
+     * Toggles the dropdown.
+     */
+    toggle(): Promise<void>;
+    private renderIcon;
+    private renderOption;
+    private renderOptions;
+    render(): any;
+}

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,6 +76,10 @@ 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?;
@@ -104,6 +115,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-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;
+}