le-kit 0.5.2 → 0.5.4

package/dist/components/le-multiselect.js

@@ -1,405 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, transformTag } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3, a as defineCustomElement$4, b as defineCustomElement$5, c as defineCustomElement$6, e as defineCustomElement$9, f as defineCustomElement$a, g as defineCustomElement$b } from './le-button2.js';
-import { d as defineCustomElement$8 } from './le-dropdown-base2.js';
-import { d as defineCustomElement$7 } from './le-popover2.js';
-import { d as defineCustomElement$2 } from './le-tag2.js';
-
-const leMultiselectCss = () => `:host{display:inline-block;min-width:250px;--le-multiselect-min-height:0;--le-multiselect-padding:var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);--le-multiselect-border-color:var(--le-color-primary, #3b82f6)}:host([disabled]){opacity:0.5;pointer-events:none}.multiselect-trigger{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;min-height:var(--le-multiselect-min-height);padding:var(--le-multiselect-padding);line-height:var(--le-line-height-tight);background:var(--le-multiselect-bg, var(--le-color-surface, #fff));border:1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);border-radius:var(--le-multiselect-border-radius, 0.375rem);cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.multiselect-trigger:hover:not(.is-disabled),:host(:focus-within) .multiselect-trigger:not(.is-disabled){border-color:var(--le-multiselect-border-color)}:host(:focus-within) .multiselect-trigger{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([full-width]){width:100%}.multiselect-trigger.is-open{border-color:var(--le-color-primary, #3b82f6)}.multiselect-trigger.is-disabled{cursor:not-allowed;background:var(--le-color-surface-disabled, #f9fafb)}.multiselect-placeholder{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.multiselect-tags{display:flex;flex-wrap:wrap;gap:0.25rem;flex:1;min-width:0}.multiselect-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.multiselect-clear{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;background:transparent;color:var(--le-color-primary, #3b82f6);border:none;border-radius:0.25rem;cursor:pointer;opacity:0.6;transition:opacity 0.15s ease, background-color 0.15s ease}.multiselect-clear:hover{opacity:1;background:var(--le-color-surface-hover, #f3f4f6)}.multiselect-clear svg{width:0.875rem;height:0.875rem}.multiselect-arrow{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1rem;color:var(--le-color-primary, #3b82f6);transition:transform 0.2s ease}.multiselect-arrow svg{width:1rem;height:1rem}.multiselect-trigger.is-open .multiselect-arrow{transform:rotate(180deg)}.search-input::part(container):focus-within{outline:none !important}.search-input{--le-input-radius:var(--le-radius-md)}.multiselect-status{display:block;margin-top:0.25rem;font-size:0.75rem;color:var(--le-color-text-muted, #6b7280)}:host([size='small']) .multiselect-trigger{--le-multiselect-min-height:2rem;--le-multiselect-padding:0.25rem 0.375rem;--le-multiselect-font-size:0.75rem}:host([size='large']) .multiselect-trigger{--le-multiselect-min-height:3rem;--le-multiselect-padding:0.5rem 0.625rem;--le-multiselect-font-size:1rem}`;
-
-const LeMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class LeMultiselect extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leChange = createEvent(this, "leChange", 7);
-        this.leOpen = createEvent(this, "leOpen", 7);
-        this.leClose = createEvent(this, "leClose", 7);
-    }
-    get el() { return this; }
-    /**
-     * The options to display in the dropdown.
-     */
-    options = [];
-    /**
-     * The currently selected values.
-     */
-    value = [];
-    /**
-     * Placeholder text when no options are selected.
-     */
-    placeholder = 'Select options...';
-    /**
-     * Whether the multiselect is disabled.
-     */
-    disabled = false;
-    /**
-     * Whether selection is required.
-     */
-    required = false;
-    /**
-     * Name attribute for form submission.
-     */
-    name;
-    /**
-     * Whether the multiselect should take full width of its container.
-     */
-    fullWidth = false;
-    /**
-     * Size variant of the multiselect.
-     */
-    size = 'medium';
-    /**
-     * Maximum number of selections allowed.
-     */
-    maxSelections;
-    /**
-     * Labels for the "Select All" option.
-     */
-    selectAllLabel = 'Select All';
-    deselectAllLabel = 'Deselect All';
-    /**
-     * Whether to show a "Select All" option.
-     * Also accepts a string or array of strings to customize the label(s).
-     */
-    showSelectAll = false;
-    /**
-     * Whether the input is searchable.
-     */
-    searchable = false;
-    /**
-     * Text to show when no options match the search.
-     */
-    emptyText = 'No results found';
-    /**
-     * Whether the dropdown is currently open.
-     */
-    open = false;
-    /**
-     * Emitted when the selected values change.
-     */
-    leChange;
-    /**
-     * Emitted when the dropdown opens.
-     */
-    leOpen;
-    /**
-     * Emitted when the dropdown closes.
-     */
-    leClose;
-    selectedOptions = [];
-    searchQuery = '';
-    dropdownEl;
-    inputEl;
-    handleValueChange() {
-        this.updateSelectedOptions();
-    }
-    handleOptionsChange() {
-        this.updateSelectedOptions();
-    }
-    handleShowSelectAllChange(newValue) {
-        if (typeof newValue !== 'boolean' && typeof newValue !== 'string') {
-            this.showSelectAll = false;
-        }
-        else if (typeof newValue === 'boolean') {
-            this.showSelectAll = newValue;
-        }
-        else if (Array.isArray(newValue)) {
-            this.showSelectAll = true;
-            this.selectAllLabel = newValue[0];
-            this.deselectAllLabel = newValue[1] || newValue[0];
-        }
-        else if (typeof newValue === 'string') {
-            this.showSelectAll = true;
-            try {
-                const parsed = JSON.parse(newValue);
-                if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {
-                    this.selectAllLabel = parsed[0];
-                    this.deselectAllLabel = parsed[1] || parsed[0];
-                }
-                else {
-                    this.selectAllLabel = newValue;
-                    this.deselectAllLabel = newValue;
-                }
-            }
-            catch {
-                this.selectAllLabel = newValue;
-                this.deselectAllLabel = newValue;
-            }
-        }
-    }
-    componentWillLoad() {
-        this.updateSelectedOptions();
-        this.handleShowSelectAllChange(this.showSelectAll);
-    }
-    get parsedOptions() {
-        if (typeof this.options === 'string') {
-            try {
-                return JSON.parse(this.options);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.options;
-    }
-    get effectiveOptions() {
-        let options = [...this.parsedOptions];
-        // Add "Select All" option if enabled
-        if (this.showSelectAll && options.length > 0) {
-            const allSelected = this.selectedOptions.length === this.parsedOptions.filter(opt => !opt.disabled).length;
-            options = [
-                {
-                    label: allSelected ? this.deselectAllLabel : this.selectAllLabel,
-                    value: '__select_all__',
-                    iconStart: allSelected ? '✕' : '⇣',
-                },
-                ...options,
-            ];
-        }
-        return options;
-    }
-    updateSelectedOptions() {
-        const valueArray = Array.isArray(this.value) ? this.value : [];
-        this.selectedOptions = this.parsedOptions.filter(opt => valueArray.includes(opt.value ?? opt.label));
-    }
-    filterOption = (option, query) => {
-        if (!query)
-            return true;
-        // Always show "Select All" option
-        if (option.value === '__select_all__')
-            return true;
-        const searchLower = query.toLowerCase();
-        return (option.label.toLowerCase().includes(searchLower) ||
-            (option.description?.toLowerCase().includes(searchLower) ?? false));
-    };
-    handleOptionSelect = (e) => {
-        const { value } = e.detail;
-        const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);
-        if (enabledOptions.length === 0)
-            return;
-        // Handle "Select All" option
-        if (value === '__select_all__') {
-            if (this.selectedOptions.length === enabledOptions.length) {
-                // Deselect all
-                this.value = [];
-            }
-            else {
-                // Select all (respect maxSelections)
-                const selectableOptions = this.maxSelections
-                    ? enabledOptions.slice(0, this.maxSelections)
-                    : enabledOptions;
-                this.value = selectableOptions.map(opt => opt.value ?? opt.label);
-            }
-            this.emitChange();
-            return;
-        }
-        const isSelected = this.value.includes(value);
-        if (isSelected) {
-            // Remove from selection
-            this.value = this.value.filter(v => v !== value);
-            this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);
-        }
-        else {
-            // Add to selection (if not at max)
-            if (this.maxSelections && this.value.length >= this.maxSelections) {
-                return; // Don't add more
-            }
-            this.value = [...this.value, value];
-        }
-        this.emitChange();
-        // Clear search after szelection
-        this.searchQuery = '';
-    };
-    emitChange() {
-        this.leChange.emit({
-            values: this.value,
-            options: this.selectedOptions,
-        });
-    }
-    handleDropdownOpen = () => {
-        this.open = true;
-        this.leOpen.emit();
-        // Focus search input if searchable
-        if (this.searchable) {
-            setTimeout(() => {
-                this.inputEl?.focus();
-            }, 50);
-        }
-    };
-    handleDropdownClose = () => {
-        this.open = false;
-        this.searchQuery = '';
-        this.leClose.emit();
-    };
-    handleTriggerClick = () => {
-        if (!this.disabled) {
-            this.dropdownEl?.toggle();
-        }
-    };
-    handleTriggerKeyDown = (e) => {
-        if (this.disabled)
-            return;
-        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            this.dropdownEl?.show();
-        }
-    };
-    handleTagDismiss = (option, e) => {
-        e.stopPropagation();
-        const value = option.value ?? option.label;
-        this.value = this.value.filter(v => v !== value);
-        this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);
-        this.emitChange();
-    };
-    handleSearchInput = (e) => {
-        const target = e.target;
-        this.searchQuery = target.value;
-    };
-    handleClearAll = (e) => {
-        e.stopPropagation();
-        this.value = [];
-        this.selectedOptions = [];
-        this.emitChange();
-    };
-    /**
-     * Opens the dropdown.
-     */
-    async showDropdown() {
-        await this.dropdownEl?.show();
-    }
-    /**
-     * Closes the dropdown.
-     */
-    async hideDropdown() {
-        await this.dropdownEl?.hide();
-    }
-    /**
-     * Clears all selections.
-     */
-    async clearSelection() {
-        this.value = [];
-        this.selectedOptions = [];
-        this.emitChange();
-    }
-    renderTags() {
-        if (this.selectedOptions.length === 0) {
-            return h("span", { class: "multiselect-placeholder" }, this.placeholder);
-        }
-        return (h("div", { class: "multiselect-tags" }, this.selectedOptions.map(option => (h("le-tag", { key: option.value ?? option.label, label: option.label, icon: option.iconStart, size: this.size === 'large' ? 'medium' : 'small', dismissible: true, disabled: this.disabled, onLeDismiss: e => this.handleTagDismiss(option, e), mode: "default" })))));
-    }
-    render() {
-        const hasSelections = this.selectedOptions.length > 0;
-        const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;
-        return (h("le-component", { key: 'e6183adb112775737e6a7f47b0be614a76a1c110', component: "le-multiselect" }, h("le-dropdown-base", { key: 'ee8ba9e02608a5c26d8a8b0a659e89e5631f3f6a', ref: el => (this.dropdownEl = el), options: this.effectiveOptions, value: this.value, multiple: true, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, emptyText: this.emptyText, showCheckboxes: true, fullWidth: this.fullWidth, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: '4c87bf167dd876476dae3b0259cda2f28e3787a5', slot: "trigger", class: {
-                'multiselect-trigger': true,
-                'has-selections': hasSelections,
-                'is-open': this.open,
-                'is-disabled': this.disabled,
-            }, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.renderTags(), h("div", { key: 'be629671c75d408127edb480df54c6649e28ca2a', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: '67f4c2152e4b2f8f52b8b98093fbb238571f6105', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: '5894bfb10a310a29f21c865323b2175cde05173e', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '50f7445b3627bf110a899dbba2b5f7244d706a49', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '58ef10834f74ce5b21b675b47a4c2a96df4bd173', class: "multiselect-arrow" }, h("svg", { key: '74a20681e12aff0295c219c8ff8f953908aa9a94', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '8e48c5333f7f3035e4c4f80f7c3507e5d3d4caaa', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: '906f9596d6a0da2840d534570d38ea008d7cdb4b', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'ccd7f1b2594be3440adb16ef5c001beaa5547396', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name &&
-            this.value.map(val => (h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (h("span", { key: 'c329c06d0e00a1516c9d3323ad4a83b81a205f13', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
-    }
-    static get watchers() { return {
-        "value": ["handleValueChange"],
-        "options": ["handleOptionsChange"],
-        "showSelectAll": ["handleShowSelectAllChange"]
-    }; }
-    static get style() { return leMultiselectCss(); }
-}, [769, "le-multiselect", {
-        "options": [1],
-        "value": [1040],
-        "placeholder": [1],
-        "disabled": [516],
-        "required": [4],
-        "name": [1],
-        "fullWidth": [516, "full-width"],
-        "size": [513],
-        "maxSelections": [2, "max-selections"],
-        "showSelectAll": [1032, "show-select-all"],
-        "searchable": [4],
-        "emptyText": [1, "empty-text"],
-        "open": [1540],
-        "selectAllLabel": [32],
-        "deselectAllLabel": [32],
-        "selectedOptions": [32],
-        "searchQuery": [32],
-        "showDropdown": [64],
-        "hideDropdown": [64],
-        "clearSelection": [64]
-    }, undefined, {
-        "value": ["handleValueChange"],
-        "options": ["handleOptionsChange"],
-        "showSelectAll": ["handleShowSelectAllChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-multiselect", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input", "le-tag"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-multiselect":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeMultiselect$1);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$b();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$a();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$9();
-            }
-            break;
-        case "le-dropdown-base":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-tag":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const LeMultiselect = LeMultiselect$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LeMultiselect, defineCustomElement };
-//# sourceMappingURL=le-multiselect.js.map
-
-//# sourceMappingURL=le-multiselect.js.map

package/dist/components/le-multiselect.js.map

@@ -1 +0,0 @@
-{"file":"le-multiselect.js","mappings":"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","names":["LeMultiselect","__stencil_proxyCustomElement"],"sources":["src/components/le-multiselect/le-multiselect.css?tag=le-multiselect&encapsulation=shadow","src/components/le-multiselect/le-multiselect.tsx"],"sourcesContent":["/**\n * le-multiselect component styles\n *\n * CSS Custom Properties:\n * --le-multiselect-min-height\n * --le-multiselect-padding\n * --le-multiselect-font-size\n * --le-multiselect-border-radius\n * --le-multiselect-border-color\n * --le-multiselect-bg\n * --le-multiselect-color\n */\n\n:host {\n  display: inline-block;\n  min-width: 250px;\n\n  --le-multiselect-min-height: 0;\n  --le-multiselect-padding: var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);\n  --le-multiselect-border-color: var(--le-color-primary, #3b82f6);\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Trigger wrapper */\n.multiselect-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  width: 100%;\n  min-height: var(--le-multiselect-min-height);\n  padding: var(--le-multiselect-padding);\n  line-height: var(--le-line-height-tight);\n  background: var(--le-multiselect-bg, var(--le-color-surface, #fff));\n  border: 1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);\n  border-radius: var(--le-multiselect-border-radius, 0.375rem);\n  cursor: pointer;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.multiselect-trigger:hover:not(.is-disabled),\n:host(:focus-within) .multiselect-trigger:not(.is-disabled) {\n  border-color: var(--le-multiselect-border-color);\n}\n\n:host(:focus-within) .multiselect-trigger {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n:host([full-width]) {\n  width: 100%;\n}\n\n.multiselect-trigger.is-open {\n  border-color: var(--le-color-primary, #3b82f6);\n}\n\n.multiselect-trigger.is-disabled {\n  cursor: not-allowed;\n  background: var(--le-color-surface-disabled, #f9fafb);\n}\n\n/* Placeholder */\n.multiselect-placeholder {\n  color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n/* Tags container */\n.multiselect-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Actions (clear + arrow) */\n.multiselect-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  flex-shrink: 0;\n}\n\n/* Clear button */\n.multiselect-clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: 0;\n  background: transparent;\n  color: var(--le-color-primary, #3b82f6);\n  border: none;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.multiselect-clear:hover {\n  opacity: 1;\n  background: var(--le-color-surface-hover, #f3f4f6);\n}\n\n.multiselect-clear svg {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n/* Arrow icon */\n.multiselect-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1rem;\n  color: var(--le-color-primary, #3b82f6);\n  transition: transform 0.2s ease;\n}\n\n.multiselect-arrow svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n.multiselect-trigger.is-open .multiselect-arrow {\n  transform: rotate(180deg);\n}\n\n/* Search in dropdown */\n.search-input::part(container):focus-within {\n  outline: none !important;\n}\n.search-input {\n  --le-input-radius: var(--le-radius-md);\n}\n\n/* Status message */\n.multiselect-status {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: 0.75rem;\n  color: var(--le-color-text-muted, #6b7280);\n}\n\n/* Size variants */\n:host([size='small']) .multiselect-trigger {\n  --le-multiselect-min-height: 2rem;\n  --le-multiselect-padding: 0.25rem 0.375rem;\n  --le-multiselect-font-size: 0.75rem;\n}\n\n:host([size='large']) .multiselect-trigger {\n  --le-multiselect-min-height: 3rem;\n  --le-multiselect-padding: 0.5rem 0.625rem;\n  --le-multiselect-font-size: 1rem;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Element,\n  Watch,\n  h,\n} from '@stencil/core';\nimport {\n  LeOption,\n  LeOptionValue,\n  LeMultiOptionSelectDetail,\n  LeOptionSelectDetail,\n} from '../../types/options';\n\n/**\n * A multiselect component for selecting multiple options.\n *\n * Displays selected items as tags with optional search filtering.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic multiselect\n * ```html\n * <le-multiselect\n *   placeholder=\"Select options...\"\n *   options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With max selections\n * ```html\n * <le-multiselect\n *   max-selections=\"3\"\n *   options='[{\"label\": \"Option 1\"}, {\"label\": \"Option 2\"}, {\"label\": \"Option 3\"}, {\"label\": \"Option 4\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With search\n * ```html\n * <le-multiselect\n *   searchable\n *   placeholder=\"Search and select...\"\n *   options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-multiselect>\n * ```\n */\n@Component({\n  tag: 'le-multiselect',\n  styleUrl: 'le-multiselect.css',\n  shadow: true,\n})\nexport class LeMultiselect {\n  @Element() el: HTMLElement;\n\n  /**\n   * The options to display in the dropdown.\n   */\n  @Prop() options: LeOption[] | string = [];\n\n  /**\n   * The currently selected values.\n   */\n  @Prop({ mutable: true }) value: LeOptionValue[] = [];\n\n  /**\n   * Placeholder text when no options are selected.\n   */\n  @Prop() placeholder: string = 'Select options...';\n\n  /**\n   * Whether the multiselect is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether selection is required.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Name attribute for form submission.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the multiselect should take full width of its container.\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Size variant of the multiselect.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Maximum number of selections allowed.\n   */\n  @Prop() maxSelections?: number;\n\n  /**\n   * Labels for the \"Select All\" option.\n   */\n  @State() private selectAllLabel: string = 'Select All';\n  @State() private deselectAllLabel: string = 'Deselect All';\n\n  /**\n   * Whether to show a \"Select All\" option.\n   * Also accepts a string or array of strings to customize the label(s).\n   */\n  @Prop({ mutable: true }) showSelectAll: boolean | string | string[] = false;\n\n  /**\n   * Whether the input is searchable.\n   */\n  @Prop() searchable: boolean = false;\n\n  /**\n   * Text to show when no options match the search.\n   */\n  @Prop() emptyText: string = 'No results found';\n\n  /**\n   * Whether the dropdown is currently open.\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Emitted when the selected values change.\n   */\n  @Event() leChange: EventEmitter<LeMultiOptionSelectDetail>;\n\n  /**\n   * Emitted when the dropdown opens.\n   */\n  @Event() leOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the dropdown closes.\n   */\n  @Event() leClose: EventEmitter<void>;\n\n  @State() private selectedOptions: LeOption[] = [];\n  @State() private searchQuery: string = '';\n\n  private dropdownEl?: HTMLLeDropdownBaseElement;\n  private inputEl?: HTMLInputElement;\n\n  @Watch('value')\n  handleValueChange() {\n    this.updateSelectedOptions();\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    this.updateSelectedOptions();\n  }\n\n  @Watch('showSelectAll')\n  handleShowSelectAllChange(newValue: boolean | string | string[]) {\n    if (typeof newValue !== 'boolean' && typeof newValue !== 'string') {\n      this.showSelectAll = false;\n    } else if (typeof newValue === 'boolean') {\n      this.showSelectAll = newValue;\n    } else if (Array.isArray(newValue)) {\n      this.showSelectAll = true;\n      this.selectAllLabel = newValue[0];\n      this.deselectAllLabel = newValue[1] || newValue[0];\n    } else if (typeof newValue === 'string') {\n      this.showSelectAll = true;\n      try {\n        const parsed = JSON.parse(newValue);\n        if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {\n          this.selectAllLabel = parsed[0];\n          this.deselectAllLabel = parsed[1] || parsed[0];\n        } else {\n          this.selectAllLabel = newValue;\n          this.deselectAllLabel = newValue;\n        }\n      } catch {\n        this.selectAllLabel = newValue;\n        this.deselectAllLabel = newValue;\n      }\n    }\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOptions();\n    this.handleShowSelectAllChange(this.showSelectAll);\n  }\n\n  private get parsedOptions(): LeOption[] {\n    if (typeof this.options === 'string') {\n      try {\n        return JSON.parse(this.options);\n      } catch {\n        return [];\n      }\n    }\n    return this.options;\n  }\n\n  private get effectiveOptions(): LeOption[] {\n    let options = [...this.parsedOptions];\n\n    // Add \"Select All\" option if enabled\n    if (this.showSelectAll && options.length > 0) {\n      const allSelected =\n        this.selectedOptions.length === this.parsedOptions.filter(opt => !opt.disabled).length;\n      options = [\n        {\n          label: allSelected ? this.deselectAllLabel : this.selectAllLabel,\n          value: '__select_all__',\n          iconStart: allSelected ? '✕' : '⇣',\n        },\n        ...options,\n      ];\n    }\n\n    return options;\n  }\n\n  private updateSelectedOptions() {\n    const valueArray = Array.isArray(this.value) ? this.value : [];\n    this.selectedOptions = this.parsedOptions.filter(opt =>\n      valueArray.includes(opt.value ?? opt.label),\n    );\n  }\n\n  private filterOption = (option: LeOption, query: string): boolean => {\n    if (!query) return true;\n    // Always show \"Select All\" option\n    if (option.value === '__select_all__') return true;\n\n    const searchLower = query.toLowerCase();\n    return (\n      option.label.toLowerCase().includes(searchLower) ||\n      (option.description?.toLowerCase().includes(searchLower) ?? false)\n    );\n  };\n\n  private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n    const { value } = e.detail;\n\n    const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);\n    if (enabledOptions.length === 0) return;\n\n    // Handle \"Select All\" option\n    if (value === '__select_all__') {\n      if (this.selectedOptions.length === enabledOptions.length) {\n        // Deselect all\n        this.value = [];\n      } else {\n        // Select all (respect maxSelections)\n        const selectableOptions = this.maxSelections\n          ? enabledOptions.slice(0, this.maxSelections)\n          : enabledOptions;\n        this.value = selectableOptions.map(opt => opt.value ?? opt.label);\n      }\n      this.emitChange();\n      return;\n    }\n\n    const isSelected = this.value.includes(value);\n\n    if (isSelected) {\n      // Remove from selection\n      this.value = this.value.filter(v => v !== value);\n      this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);\n    } else {\n      // Add to selection (if not at max)\n      if (this.maxSelections && this.value.length >= this.maxSelections) {\n        return; // Don't add more\n      }\n      this.value = [...this.value, value];\n    }\n\n    this.emitChange();\n\n    // Clear search after szelection\n    this.searchQuery = '';\n  };\n\n  private emitChange() {\n    this.leChange.emit({\n      values: this.value,\n      options: this.selectedOptions,\n    });\n  }\n\n  private handleDropdownOpen = () => {\n    this.open = true;\n    this.leOpen.emit();\n\n    // Focus search input if searchable\n    if (this.searchable) {\n      setTimeout(() => {\n        this.inputEl?.focus();\n      }, 50);\n    }\n  };\n\n  private handleDropdownClose = () => {\n    this.open = false;\n    this.searchQuery = '';\n    this.leClose.emit();\n  };\n\n  private handleTriggerClick = () => {\n    if (!this.disabled) {\n      this.dropdownEl?.toggle();\n    }\n  };\n\n  private handleTriggerKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.dropdownEl?.show();\n    }\n  };\n\n  private handleTagDismiss = (option: LeOption, e: CustomEvent) => {\n    e.stopPropagation();\n    const value = option.value ?? option.label;\n    this.value = this.value.filter(v => v !== value);\n    this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);\n    this.emitChange();\n  };\n\n  private handleSearchInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.searchQuery = target.value;\n  };\n\n  private handleClearAll = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.value = [];\n    this.selectedOptions = [];\n    this.emitChange();\n  };\n\n  /**\n   * Opens the dropdown.\n   */\n  @Method()\n  async showDropdown() {\n    await this.dropdownEl?.show();\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async hideDropdown() {\n    await this.dropdownEl?.hide();\n  }\n\n  /**\n   * Clears all selections.\n   */\n  @Method()\n  async clearSelection() {\n    this.value = [];\n    this.selectedOptions = [];\n    this.emitChange();\n  }\n\n  private renderTags() {\n    if (this.selectedOptions.length === 0) {\n      return <span class=\"multiselect-placeholder\">{this.placeholder}</span>;\n    }\n\n    return (\n      <div class=\"multiselect-tags\">\n        {this.selectedOptions.map(option => (\n          <le-tag\n            key={option.value ?? option.label}\n            label={option.label}\n            icon={option.iconStart}\n            size={this.size === 'large' ? 'medium' : 'small'}\n            dismissible\n            disabled={this.disabled}\n            onLeDismiss={e => this.handleTagDismiss(option, e)}\n            mode=\"default\"\n          />\n        ))}\n      </div>\n    );\n  }\n\n  render() {\n    const hasSelections = this.selectedOptions.length > 0;\n    const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;\n\n    return (\n      <le-component component=\"le-multiselect\">\n        <le-dropdown-base\n          ref={el => (this.dropdownEl = el)}\n          options={this.effectiveOptions}\n          value={this.value}\n          multiple={true}\n          disabled={this.disabled}\n          filterFn={this.searchable ? this.filterOption : undefined}\n          filterQuery={this.searchQuery}\n          emptyText={this.emptyText}\n          showCheckboxes={true}\n          fullWidth={this.fullWidth}\n          onLeOptionSelect={this.handleOptionSelect}\n          onLeDropdownOpen={this.handleDropdownOpen}\n          onLeDropdownClose={this.handleDropdownClose}\n        >\n          <div\n            slot=\"trigger\"\n            class={{\n              'multiselect-trigger': true,\n              'has-selections': hasSelections,\n              'is-open': this.open,\n              'is-disabled': this.disabled,\n            }}\n            tabIndex={this.disabled ? -1 : 0}\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : undefined}\n            onClick={this.handleTriggerClick}\n            onKeyDown={this.handleTriggerKeyDown}\n          >\n            {this.renderTags()}\n\n            <div class=\"multiselect-actions\">\n              {hasSelections && !this.disabled && (\n                <button\n                  type=\"button\"\n                  class=\"multiselect-clear\"\n                  onClick={this.handleClearAll}\n                  aria-label=\"Clear all\"\n                  tabIndex={-1}\n                >\n                  <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <path d=\"M4 4l8 8M12 4l-8 8\" />\n                  </svg>\n                </button>\n              )}\n              <span class=\"multiselect-arrow\">\n                <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M4 6l4 4 4-4\" />\n                </svg>\n              </span>\n            </div>\n          </div>\n\n          {/* Search input shown in dropdown header */}\n          {this.searchable && this.open && (\n            <div class=\"multiselect-search\" slot=\"header\">\n              <le-string-input\n                mode=\"default\"\n                inputRef={el => (this.inputEl = el)}\n                class=\"search-input\"\n                placeholder=\"Search...\"\n                value={this.searchQuery}\n                onInput={this.handleSearchInput}\n              />\n            </div>\n          )}\n        </le-dropdown-base>\n\n        {/* Hidden inputs for form submission */}\n        {this.name &&\n          this.value.map(val => (\n            <input type=\"hidden\" name={this.name} value={val.toString()} key={val.toString()} />\n          ))}\n\n        {/* Status message */}\n        {atMaxSelections && (\n          <span class=\"multiselect-status\">Maximum {this.maxSelections} selections</span>\n        )}\n      </le-component>\n    );\n  }\n}\n"],"version":3}

package/dist/components/le-navigation.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface LeNavigation extends Components.LeNavigation, HTMLElement {}
-export const LeNavigation: {
-    prototype: LeNavigation;
-    new (): LeNavigation;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;