le-kit 0.1.14 → 0.1.15

package/dist/themes/minimal.css

@@ -0,0 +1,103 @@
+/**
+ * Le-Kit Minimal Theme
+ * 
+ * Clean, subtle design with sharp edges and minimal shadows.
+ * 
+ * Usage: set theme="minimal" on any element, or import as your default.
+ */
+
+[theme="minimal"] {
+  /* Primary brand color - dark gray */
+  --le-color-primary: #111827;
+  --le-color-primary-light: #374151;
+  --le-color-primary-dark: #030712;
+  --le-color-primary-contrast: #ffffff;
+  
+  /* Secondary accent color */
+  --le-color-secondary: #6b7280;
+  --le-color-secondary-light: #9ca3af;
+  --le-color-secondary-dark: #4b5563;
+  --le-color-secondary-contrast: #ffffff;
+  
+  /* Semantic colors - muted */
+  --le-color-success: #059669;
+  --le-color-success-light: #10b981;
+  --le-color-success-dark: #047857;
+  --le-color-success-contrast: #ffffff;
+  
+  --le-color-warning: #d97706;
+  --le-color-warning-light: #f59e0b;
+  --le-color-warning-dark: #b45309;
+  --le-color-warning-contrast: #ffffff;
+  
+  --le-color-danger: #dc2626;
+  --le-color-danger-light: #ef4444;
+  --le-color-danger-dark: #b91c1c;
+  --le-color-danger-contrast: #ffffff;
+  
+  --le-color-info: #0284c7;
+  --le-color-info-light: #0ea5e9;
+  --le-color-info-dark: #0369a1;
+  --le-color-info-contrast: #ffffff;
+  
+  /* Neutral colors */
+  --le-color-white: #ffffff;
+  --le-color-black: #000000;
+  --le-color-gray-50: #f9fafb;
+  --le-color-gray-100: #f3f4f6;
+  --le-color-gray-200: #e5e7eb;
+  --le-color-gray-300: #d1d5db;
+  --le-color-gray-400: #9ca3af;
+  --le-color-gray-500: #6b7280;
+  --le-color-gray-600: #4b5563;
+  --le-color-gray-700: #374151;
+  --le-color-gray-800: #1f2937;
+  --le-color-gray-900: #111827;
+  
+  /* Background colors */
+  --le-color-background: #ffffff;
+  --le-color-background-secondary: #fafafa;
+  --le-color-background-tertiary: #f5f5f5;
+  
+  /* Surface colors */
+  --le-color-surface: #ffffff;
+  --le-color-surface-elevated: #ffffff;
+  --le-color-surface-alt: #f3f4f6;
+  
+  /* Text colors */
+  --le-color-text-primary: #111827;
+  --le-color-text-secondary: #6b7280;
+  --le-color-text-disabled: #9ca3af;
+  --le-color-text-inverse: #ffffff;
+  
+  /* Border colors */
+  --le-color-border: #e5e7eb;
+  --le-color-border-hover: #a7aaae;
+  --le-color-border-light: #f3f4f6;
+  --le-color-border-dark: #d1d5db;
+
+  /** Input borders */
+  --le-border-width: 1px;
+  --le-color-border-input: #c8cfdd;
+
+  /* Focus ring */
+  --le-color-focus: rgba(17, 24, 39, 0.15);
+  
+  /* Border radius - sharp/minimal */
+  --le-radius-none: 0;
+  --le-radius-sm: 0;
+  --le-radius-md: 2px;
+  --le-radius-lg: 4px;
+  --le-radius-xl: 6px;
+  --le-radius-2xl: 8px;
+  --le-radius-full: 9999px;
+  
+  /* Shadows - very subtle */
+  --le-color-shadow: color-mix(in srgb, var(--le-color-primary) 80%, transparent);
+  --le-shadow-none: none;
+  --le-shadow-sm: none;
+  --le-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --le-shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --le-shadow-xl: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --le-shadow-2xl: 0 4px 8px rgba(0, 0, 0, 0.1);
+}

package/dist/themes/warm.css

@@ -0,0 +1,103 @@
+/**
+ * Le-Kit Warm Theme
+ * 
+ * Cozy, warm colors with orange/amber tones.
+ * 
+ * Usage: set theme="warm" on any element, or import as your default.
+ */
+
+[theme="warm"] {
+  /* Primary brand color - orange */
+  --le-color-primary: #ea580c;
+  --le-color-primary-light: #fb923c;
+  --le-color-primary-dark: #c2410c;
+  --le-color-primary-contrast: #ffffff;
+  
+  /* Secondary accent color - amber */
+  --le-color-secondary: #b45309;
+  --le-color-secondary-light: #d97706;
+  --le-color-secondary-dark: #92400e;
+  --le-color-secondary-contrast: #ffffff;
+  
+  /* Semantic colors */
+  --le-color-success: #16a34a;
+  --le-color-success-light: #22c55e;
+  --le-color-success-dark: #15803d;
+  --le-color-success-contrast: #ffffff;
+  
+  --le-color-warning: #ca8a04;
+  --le-color-warning-light: #eab308;
+  --le-color-warning-dark: #a16207;
+  --le-color-warning-contrast: #000000;
+  
+  --le-color-danger: #dc2626;
+  --le-color-danger-light: #ef4444;
+  --le-color-danger-dark: #b91c1c;
+  --le-color-danger-contrast: #ffffff;
+  
+  --le-color-info: #0891b2;
+  --le-color-info-light: #06b6d4;
+  --le-color-info-dark: #0e7490;
+  --le-color-info-contrast: #ffffff;
+  
+  /* Neutral colors - warm tinted */
+  --le-color-white: #ffffff;
+  --le-color-black: #000000;
+  --le-color-gray-50: #fffbeb;
+  --le-color-gray-100: #fef3c7;
+  --le-color-gray-200: #fde68a;
+  --le-color-gray-300: #fcd34d;
+  --le-color-gray-400: #fbbf24;
+  --le-color-gray-500: #f59e0b;
+  --le-color-gray-600: #d97706;
+  --le-color-gray-700: #b45309;
+  --le-color-gray-800: #92400e;
+  --le-color-gray-900: #78350f;
+  
+  /* Background colors */
+  --le-color-background: #fffbeb;
+  --le-color-background-secondary: #fef3c7;
+  --le-color-background-tertiary: #fde68a;
+  
+  /* Surface colors */
+  --le-color-surface: #ffffff;
+  --le-color-surface-elevated: #ffffff;
+  --le-color-surface-alt: #ffebba;
+  
+  /* Text colors */
+  --le-color-text-primary: #78350f;
+  --le-color-text-secondary: #92400e;
+  --le-color-text-disabled: #d97706;
+  --le-color-text-inverse: #ffffff;
+  
+  /* Border colors */
+  --le-color-border: #fcd34d;
+  --le-color-border-hover: #ee8349;
+  --le-color-border-light: #fde68a;
+  --le-color-border-dark: #fbbf24;
+
+  /** Input borders */
+  --le-border-width: 2px;
+  --le-color-border-input: #e7d4c4;
+
+  /* Focus ring */
+  --le-color-focus: rgba(234, 88, 12, 0.15);
+  
+  /* Border radius - slightly rounded */
+  --le-radius-none: 0;
+  --le-radius-sm: 0.125rem;
+  --le-radius-md: 0.375rem;
+  --le-radius-lg: 0.625rem;
+  --le-radius-xl: 0.875rem;
+  --le-radius-2xl: 1.125rem;
+  --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);
+  --le-shadow-lg: 0 10px 15px rgba(234, 88, 12, 0.15), 0 4px 6px rgba(234, 88, 12, 0.08);
+  --le-shadow-xl: 0 20px 25px rgba(234, 88, 12, 0.15), 0 10px 10px rgba(234, 88, 12, 0.1);
+  --le-shadow-2xl: 0 25px 50px rgba(234, 88, 12, 0.2), 0 12px 24px rgba(234, 88, 12, 0.12);
+}

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
      */