le-kit 0.1.14 → 0.1.16

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-collapse/le-collapse.d.ts

@@ -0,0 +1,41 @@
+export type LeCollapseAnimation = 'fade' | 'collapse' | 'fade-collapse';
+/**
+ * Animated show/hide wrapper.
+ *
+ * Supports height collapse (auto->0) and/or fading.
+ * Can optionally listen to the nearest `le-header` shrink events.
+ *
+ * @slot - Content to animate
+ *
+ * @cssprop --le-collapse-duration - Transition duration
+ *
+ * @csspart region - Collapsible region
+ * @csspart content - Inner content
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export declare class LeCollapse {
+    el: HTMLElement;
+    /** Whether the content should be shown. */
+    open: boolean;
+    /** Whether the content should scroll down from the top when open. */
+    scrollDown: boolean;
+    /** Stop fading the content when collapsing/expanding. */
+    noFading: boolean;
+    /** If true, collapse/expand based on the nearest header shrink event. */
+    collapseOnHeaderShrink: boolean;
+    /**
+     * Handles `leHeaderShrinkChange` events from the `le-header`.
+     * In case multiple headers are present, only the nearest one in the DOM tree is used.
+     */
+    handleHeaderShrink(ev: Event): void;
+    private headerShrunk;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    protected onOpenChange(): void;
+    protected onDrivenStateChange(): void;
+    private shouldBeOpen;
+    private applyOpenState;
+    render(): any;
+}

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-current-heading/le-current-heading.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Shows a "smart" header title based on what has scrolled out of view.
+ *
+ * When `selector` matches multiple elements, the title becomes the last element
+ * (top-to-bottom) that has fully scrolled out above the viewport.
+ *
+ * @slot - Optional fallback content if no watched title is active
+ *
+ * @csspart title - The rendered title
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export declare class LeCurrentHeading {
+    el: HTMLElement;
+    /** CSS selector for page title/headings to watch (e.g. `.page-title`, `main h2`). */
+    selector: string;
+    private activeText;
+    componentWillLoad(): void;
+    protected onSelectorChange(): void;
+    protected onScroll(): void;
+    protected onResize(): void;
+    private updateActiveTitle;
+    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-header/le-header.d.ts

@@ -0,0 +1,115 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type LeHeaderPosition = 'static' | 'sticky' | 'fixed';
+/**
+ * A functional page header with scroll-aware behaviors.
+ *
+ * Features:
+ * - Static (default), sticky, or fixed positioning
+ * - Optional shrink-on-scroll behavior via `shrink-offset`
+ * - Optional reveal-on-scroll-up via `reveal-on-scroll` (sticky only)
+ *
+ * Slots:
+ * - `start`: left side (logo/back button)
+ * - `title`: centered/primary title content
+ * - `end`: right side actions
+ * - default: extra content row (e.g., tabs/search) rendered below main row
+ *
+ * @slot start - Start area content
+ * @slot title - Title content
+ * @slot end - End area content
+ * @slot - Optional secondary row content
+ *
+ * @cssprop --le-header-bg - Background (color/gradient)
+ * @cssprop --le-header-color - Text color
+ * @cssprop --le-header-border - Border (e.g. 1px solid ...)
+ * @cssprop --le-header-shadow - Shadow/elevation
+ * @cssprop --le-header-max-width - Inner content max width
+ * @cssprop --le-header-padding-x - Horizontal padding
+ * @cssprop --le-header-padding-y - Vertical padding
+ * @cssprop --le-header-gap - Gap between zones
+ * @cssprop --le-header-height - Base height (main row)
+ * @cssprop --le-header-height-condensed - Condensed height when shrunk
+ * @cssprop --le-header-transition - Transition timing
+ * @cssprop --le-header-z - Z-index (fixed mode)
+ *
+ * @csspart header - The header container
+ * @csspart inner - Inner max-width container
+ * @csspart row - Main row
+ * @csspart start - Start zone
+ * @csspart title - Title zone
+ * @csspart end - End zone
+ * @csspart secondary - Secondary row
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export declare class LeHeader {
+    el: HTMLElement;
+    /** Force static positioning (default). Ignored if `sticky` or `fixed` are true. */
+    isStatic: boolean;
+    /** Sticky positioning (in-flow). Ignored if `fixed` is true. */
+    sticky: boolean;
+    /** Fixed positioning (out-of-flow). Takes precedence over `sticky`/`static`. */
+    fixed: boolean;
+    /**
+     * Sticky-only reveal behavior (hide on scroll down, show on scroll up).
+     * - missing/false: disabled
+     * - true/empty attribute: enabled with default threshold (16)
+     * - number (as string): enabled and used as threshold
+     */
+    revealOnScroll?: string;
+    /**
+     * Shrink trigger.
+     * - missing/0: disabled
+     * - number (px): shrink when scrollY >= that value (but never before header height)
+     * - css var name (e.g. --foo): shrink when scrollY >= resolved var value
+     * - selector (e.g. .page-title): shrink when that element scrolls out of view above the viewport
+     */
+    shrinkOffset?: string;
+    /**
+     * If true, expand the header when hovered
+     */
+    expandOnHover: boolean;
+    /** Emits whenever scroll-driven state changes. */
+    leHeaderState: EventEmitter<{
+        y: number;
+        direction: 'up' | 'down';
+        revealed: boolean;
+        shrunk: boolean;
+    }>;
+    /** Emits when the header shrinks/expands (only on change). */
+    leHeaderShrinkChange: EventEmitter<{
+        shrunk: boolean;
+        y: number;
+    }>;
+    /** Emits when the header hides/shows (only on change). */
+    leHeaderVisibilityChange: EventEmitter<{
+        visible: boolean;
+        y: number;
+    }>;
+    private revealed;
+    private shrunk;
+    private placeholderHeight;
+    private hoverActive;
+    private disconnectModeObserver?;
+    private rafId;
+    private measureRafId;
+    private lastY;
+    private lastEmittedDirection;
+    private headerEl?;
+    private shrinkSelectorEl?;
+    private setShrunk;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    protected onBehaviorPropsChange(): void;
+    protected onWindowScroll(): void;
+    protected onWindowResize(): void;
+    private getPosition;
+    private parseRevealThreshold;
+    private resolveShrinkStartPx;
+    private scheduleUpdate;
+    private scheduleMeasure;
+    private measurePlaceholderHeight;
+    private updateFromScroll;
+    render(): any;
+}

package/dist/types/components/le-header-placeholder/le-header-placeholder.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Placeholder for `le-header`.
+ *
+ * Reserves space using the global CSS variable `--le-header-height`.
+ * The header component updates that variable when it renders.
+ *
+ * @cssprop --le-header-height - Published header height (px)
+ *
+ * @cmsInternal true
+ */
+export declare class LeHeaderPlaceholder {
+    render(): any;
+}