le-kit 0.4.0 → 0.5.0

package/dist/collection/components/le-code-input/le-code-input.js

@@ -0,0 +1,466 @@
+import { h } from "@stencil/core";
+import { classnames } from "../../utils/utils";
+/**
+ * A one-time code input component with individual frames for each character.
+ * Supports standard copy/paste and range selection behaviors.
+ *
+ * @slot description - Additional description text displayed below the input
+ *
+ * @cssprop --le-code-box-size - Size of each character box (default: 40px width, 48px height)
+ * @cssprop --le-input-bg - Input background color
+ * @cssprop --le-input-color - Input text color
+ * @cssprop --le-input-border - Input border style
+ * @cssprop --le-input-border-focus - Input border style when focused
+ * @cssprop --le-input-border-error - Input border style when invalid
+ * @cssprop --le-input-radius - Input border radius
+ */
+export class LeCodeInput {
+    el;
+    /**
+     * The value of the input
+     */
+    value = '';
+    /**
+     * The name of the input
+     */
+    name;
+    /**
+     * Label for the input
+     */
+    label;
+    /**
+     * Length of the code (number of characters)
+     */
+    length = 6;
+    /**
+     * Description text displayed below the input
+     * in case there is a more complex markup,
+     * it can be provided via slot as well
+     */
+    description;
+    /**
+     * The type of code (numeric or alphanumeric)
+     * This affects the keyboard layout on mobile devices.
+     */
+    type = 'text';
+    /**
+     * Whether the input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the input is read-only
+     */
+    readonly = false;
+    /**
+     * External ID for linking with external systems
+     */
+    externalId;
+    /**
+     * Internal validation state (can be set externally manually or via simple check)
+     */
+    error = false;
+    /**
+     * Emitted when the value changes (on blur or Enter)
+     */
+    leChange;
+    /**
+     * Emitted when the input value changes (on keystroke)
+     */
+    leInput;
+    /**
+     * Emitted when the input is focused
+     */
+    leFocus;
+    /**
+     * Emitted when the input is blurred
+     */
+    leBlur;
+    isFocused = false;
+    selectionStart = 0;
+    selectionEnd = 0;
+    valueChanged(newValue) {
+        if (newValue && newValue.length > this.length) {
+            this.value = newValue.slice(0, this.length);
+        }
+    }
+    componentWillLoad() {
+        if (this.value && this.value.length > this.length) {
+            this.value = this.value.slice(0, this.length);
+        }
+    }
+    handleInput = (ev) => {
+        const input = ev.target;
+        let val = input.value;
+        // Enforce length limit
+        if (val.length > this.length) {
+            val = val.slice(0, this.length);
+            // We need to force update the input value if it exceeded length
+            // because Stencil prop update might not happen if value is same as prop but input is different
+            input.value = val;
+        }
+        this.value = val;
+        this.updateSelection(input);
+        this.leInput.emit({
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId,
+        });
+    };
+    handleChange = () => {
+        this.leChange.emit({
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId,
+        });
+    };
+    handleFocus = (ev) => {
+        this.isFocused = true;
+        const input = ev.target;
+        // Move cursor to the end on focus so typing appends to current value
+        window.requestAnimationFrame(() => {
+            const len = input.value.length;
+            input.setSelectionRange(len, len);
+            this.updateSelection(input);
+        });
+        this.leFocus.emit();
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        this.leBlur.emit();
+        // Trigger change on blur
+        this.handleChange();
+    };
+    handleSelect = (ev) => {
+        this.updateSelection(ev.target);
+    };
+    updateSelection(input) {
+        this.selectionStart = input.selectionStart || 0;
+        this.selectionEnd = input.selectionEnd || 0;
+    }
+    /**
+     * Helper to determine active index for focus ring
+     */
+    getActiveIndex() {
+        if (!this.isFocused)
+            return -1;
+        // If we have a range selection, usually focus ring is not shown or shown around selection?
+        // We'll stick to showing it at the cursor end (selectionEnd) or start?
+        // If range selected, `selectionStart` is start of range.
+        // If cursor is at the very end (pos == length), we highlight the last box
+        if (this.selectionStart === this.length && this.length > 0) {
+            return this.length - 1;
+        }
+        return this.selectionStart;
+    }
+    renderBoxes() {
+        const boxes = [];
+        const activeIndex = this.getActiveIndex();
+        const isRangeSelection = this.selectionEnd - this.selectionStart > 0;
+        for (let i = 0; i < this.length; i++) {
+            const char = this.value ? this.value[i] : '';
+            const isActive = this.isFocused && !isRangeSelection && i === activeIndex;
+            const isSelected = this.isFocused && isRangeSelection && i >= this.selectionStart && i < this.selectionEnd;
+            boxes.push(h("div", { class: classnames('code-box', {
+                    'active': isActive,
+                    'selected': isSelected,
+                    'has-value': !!char,
+                }) }, char));
+        }
+        return boxes;
+    }
+    render() {
+        return (h("le-component", { key: '74615aa06971f7b2883e4a8e6f77b76918722e53', component: "le-code-input", hostClass: classnames({ 'disabled': this.disabled, 'has-error': this.error }) }, h("div", { key: '423a974717f0676b266a362d0151540577ae8845', class: "le-code-input-wrapper" }, this.label && (h("label", { key: 'f2ba7d9c8a8a400ca31adc944919e4750785503d', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: 'f56b80ffc1362c164bdfe473877d934c252c9bd5', class: classnames('input-group', { 'has-error': this.error }) }, h("input", { key: 'a94d422a0884c731ecfc6221133d725057fbb87c', class: "ghost-input", id: this.name, name: this.name, type: "text", inputMode: this.type === 'number' ? 'numeric' : 'text', pattern: this.type === 'number' ? '[0-9]*' : undefined, autocomplete: "one-time-code", value: this.value, maxLength: this.length, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onSelect: this.handleSelect,
+            // Prevent browser autofill background from messing up visual
+            spellcheck: false, autoCapitalize: "none", autoCorrect: "off" }), h("div", { key: '9436ca5298d83aae923e762748d634b9517a3b17', class: "visual-container" }, this.renderBoxes())), !this.error && (h("div", { key: '398a377af9c6c26f441e94b3598a1007c64e6ea0', class: "le-input-description" }, h("le-slot", { key: '3d9a8c248efc57ffa026f9ffdf889599b276f344', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '6873dec4bea990f9fe6de013e8fa729fc385871c', name: "description" }, this.description)))))));
+    }
+    static get is() { return "le-code-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-code-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-code-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "length": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Length of the code (number of characters)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "length",
+                "defaultValue": "6"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text displayed below the input\nin case there is a more complex markup,\nit can be provided via slot as well"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'number'",
+                    "resolved": "\"number\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of code (numeric or alphanumeric)\nThis affects the keyboard layout on mobile devices."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is read-only"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "externalId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "External ID for linking with external systems"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "external-id"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal validation state (can be set externally manually or via simple check)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "selectionStart": {},
+            "selectionEnd": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "leChange",
+                "name": "leChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes (on blur or Enter)"
+                },
+                "complexType": {
+                    "original": "{ value: string; name: string; externalId: string }",
+                    "resolved": "{ value: string; name: string; externalId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "leInput",
+                "name": "leInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input value changes (on keystroke)"
+                },
+                "complexType": {
+                    "original": "{ value: string; name: string; externalId: string }",
+                    "resolved": "{ value: string; name: string; externalId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "leFocus",
+                "name": "leFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input is focused"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "leBlur",
+                "name": "leBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input is blurred"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}
+//# sourceMappingURL=le-code-input.js.map

package/dist/collection/components/le-code-input/le-code-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-code-input.js","sourceRoot":"","sources":["../../../src/components/le-code-input/le-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A one-time code input component with individual frames for each character.\n * Supports standard copy/paste and range selection behaviors.\n *\n * @slot description - Additional description text displayed below the input\n *\n * @cssprop --le-code-box-size - Size of each character box (default: 40px width, 48px height)\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n */\n@Component({\n  tag: 'le-code-input',\n  styleUrl: 'le-code-input.css',\n  shadow: true,\n})\nexport class LeCodeInput {\n  @Element() el: HTMLElement;\n\n  /**\n   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Length of the code (number of characters)\n   */\n  @Prop() length: number = 6;\n\n  /**\n   * Description text displayed below the input\n   * in case there is a more complex markup,\n   * it can be provided via slot as well\n   */\n  @Prop() description?: string;\n\n  /**\n   * The type of code (numeric or alphanumeric)\n   * This affects the keyboard layout on mobile devices.\n   */\n  @Prop() type: 'text' | 'number' = 'text';\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Internal validation state (can be set externally manually or via simple check)\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event() leChange: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke)\n   */\n  @Event() leInput: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  /**\n   * Emitted when the input is focused\n   */\n  @Event() leFocus: EventEmitter<void>;\n\n  /**\n   * Emitted when the input is blurred\n   */\n  @Event() leBlur: EventEmitter<void>;\n\n  @State() private isFocused: boolean = false;\n  @State() private selectionStart: number = 0;\n  @State() private selectionEnd: number = 0;\n\n  @Watch('value')\n  valueChanged(newValue: string) {\n    if (newValue && newValue.length > this.length) {\n      this.value = newValue.slice(0, this.length);\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value && this.value.length > this.length) {\n      this.value = this.value.slice(0, this.length);\n    }\n  }\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    let val = input.value;\n\n    // Enforce length limit\n    if (val.length > this.length) {\n      val = val.slice(0, this.length);\n      // We need to force update the input value if it exceeded length\n      // because Stencil prop update might not happen if value is same as prop but input is different\n      input.value = val;\n    }\n\n    this.value = val;\n    this.updateSelection(input);\n\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n    });\n  };\n\n  private handleChange = () => {\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n    });\n  };\n\n  private handleFocus = (ev: Event) => {\n    this.isFocused = true;\n    const input = ev.target as HTMLInputElement;\n\n    // Move cursor to the end on focus so typing appends to current value\n    window.requestAnimationFrame(() => {\n      const len = input.value.length;\n      input.setSelectionRange(len, len);\n      this.updateSelection(input);\n    });\n\n    this.leFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n    this.leBlur.emit();\n    // Trigger change on blur\n    this.handleChange();\n  };\n\n  private handleSelect = (ev: Event) => {\n    this.updateSelection(ev.target as HTMLInputElement);\n  };\n\n  private updateSelection(input: HTMLInputElement) {\n    this.selectionStart = input.selectionStart || 0;\n    this.selectionEnd = input.selectionEnd || 0;\n  }\n\n  /**\n   * Helper to determine active index for focus ring\n   */\n  private getActiveIndex(): number {\n    if (!this.isFocused) return -1;\n\n    // If we have a range selection, usually focus ring is not shown or shown around selection?\n    // We'll stick to showing it at the cursor end (selectionEnd) or start?\n    // If range selected, `selectionStart` is start of range.\n\n    // If cursor is at the very end (pos == length), we highlight the last box\n    if (this.selectionStart === this.length && this.length > 0) {\n      return this.length - 1;\n    }\n\n    return this.selectionStart;\n  }\n\n  private renderBoxes() {\n    const boxes = [];\n    const activeIndex = this.getActiveIndex();\n    const isRangeSelection = this.selectionEnd - this.selectionStart > 0;\n\n    for (let i = 0; i < this.length; i++) {\n      const char = this.value ? this.value[i] : '';\n      const isActive = this.isFocused && !isRangeSelection && i === activeIndex;\n      const isSelected =\n        this.isFocused && isRangeSelection && i >= this.selectionStart && i < this.selectionEnd;\n\n      boxes.push(\n        <div\n          class={classnames('code-box', {\n            'active': isActive,\n            'selected': isSelected,\n            'has-value': !!char,\n          })}\n        >\n          {char}\n        </div>,\n      );\n    }\n    return boxes;\n  }\n\n  render() {\n    return (\n      <le-component\n        component=\"le-code-input\"\n        hostClass={classnames({ 'disabled': this.disabled, 'has-error': this.error })}\n      >\n        <div class=\"le-code-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>\n              {this.label}\n            </label>\n          )}\n\n          <div class={classnames('input-group', { 'has-error': this.error })}>\n            <input\n              class=\"ghost-input\"\n              id={this.name}\n              name={this.name}\n              type=\"text\"\n              inputMode={this.type === 'number' ? 'numeric' : 'text'}\n              pattern={this.type === 'number' ? '[0-9]*' : undefined}\n              autocomplete=\"one-time-code\"\n              value={this.value}\n              maxLength={this.length}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              onSelect={this.handleSelect}\n              // Prevent browser autofill background from messing up visual\n              spellcheck={false}\n              autoCapitalize=\"none\"\n              autoCorrect=\"off\"\n            />\n\n            <div class=\"visual-container\">{this.renderBoxes()}</div>\n          </div>\n\n          {!this.error && (\n            <div class=\"le-input-description\">\n              <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n                <slot name=\"description\">{this.description}</slot>\n              </le-slot>\n            </div>\n          )}\n        </div>\n      </le-component>\n    );\n  }\n}\n"]}

package/dist/collection/components/le-collapse/le-collapse.js

@@ -58,7 +58,7 @@ export class LeCollapse {
         this.el.toggleAttribute('data-open', nextOpen);
     }
     render() {
-        return (h(Host, { key: 'e4df69be14a3693bc68a699a5976787f37eaded3', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, h("le-component", { key: '7feb39eb288b5d07baee781a57a3750e204831be', component: "le-collapse" }, h("div", { key: '57873975bdcf529277a5ae27ffee075718a1a1ea', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, h("slot", { key: 'd5bb01ca6c07413bde337b7401d45c458d549a9d' })))));
+        return (h(Host, { key: 'e0882ec40ed132dbd6eeaa43da4aff03b6e45352', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, h("le-component", { key: '55c98e5382ddd6b5ef8a8f506f9a2901fc0b48ce', component: "le-collapse" }, h("div", { key: '0bcfa5aada8a7a6f9c86011e6a3dfa5bbb5e08c4', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, h("slot", { key: '7b762e372802512a287ae98d4aeecdb3160bb54e' })))));
     }
     static get is() { return "le-collapse"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-combobox/le-combobox.js

@@ -238,7 +238,7 @@ export class LeCombobox {
     }
     render() {
         const hasValue = this.inputValue.length > 0;
-        return (h("le-component", { key: 'e5cdd2f466fa9f63dea7577d27d2a465b69c4d07', component: "le-combobox" }, h("le-dropdown-base", { key: '0266db9e59d7f35b07d515b78d265bb4cc987979', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.filterOption, filterQuery: this.inputValue, emptyText: this.emptyText, fullWidth: this.fullWidth, closeOnClickOutside: false, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: '01c44e676e9e55bc5d9df98c43c4a350c69e9c40', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, h("le-string-input", { key: 'dd7a91dcd35f0bdfd3d0d2695aeadebf5ec6f997', mode: "default", hideDescription: true, inputRef: el => (this.inputEl = el), type: "text", class: "combobox-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list", onInput: this.handleInputChange, onFocus: this.handleInputFocus, onKeyDown: this.handleInputKeyDown }), hasValue && !this.disabled && (h("button", { key: 'dadc76ed16245f133cd57a2151dcfc2e8cf90806', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, h("svg", { key: '1e0f2ff6acaf99d82aa15f5b6db983b4dd0d66e7', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'cb432ca68c84837dd6f99086835206691fb6b49c', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '133470f68a827868ac6a754906dc66df7cbb2716', class: "combobox-arrow" }, h("svg", { key: '404e2fd3edcdd7e7e6564017a5faa5c5cb89a787', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '514b76dc80dc2115943eb14bfd8c5aa8f54637ad', d: "M4 6l4 4 4-4" }))))), this.name && h("input", { key: '2e6423b5c01125b5452b35bcfd6a7fbaf63a0e60', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+        return (h("le-component", { key: '77660875e900dceb4cca50087a9ea7fad38d0de8', component: "le-combobox" }, h("le-dropdown-base", { key: 'a7d46b3226322945465a8d22c87c3df1939d0c11', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.filterOption, filterQuery: this.inputValue, emptyText: this.emptyText, fullWidth: this.fullWidth, closeOnClickOutside: false, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: 'bc402ba87163d604c49d41acf32a2da7710c12d5', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, h("le-string-input", { key: 'd676bb665963d090e88195b133f7a0f5e379b9e9', mode: "default", hideDescription: true, inputRef: el => (this.inputEl = el), type: "text", class: "combobox-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list", onInput: this.handleInputChange, onFocus: this.handleInputFocus, onKeyDown: this.handleInputKeyDown }), hasValue && !this.disabled && (h("button", { key: '78446bc41c35fa2815acbfc34ea377dc33a1e55b', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, h("svg", { key: 'a596191694990ebb2e48d1529da0e0a6eb61e5b9', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'd6503800924e82555571c8955b33bcfddd90c7d0', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: 'a032adbc03c135bf0e9c28f7272fa125c22fd37c', class: "combobox-arrow" }, h("svg", { key: '258a8d6a98071654a8bf59ac23dc517a9af19daa', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '5960ffe0d91ae52563420fa901653e17d458b522', d: "M4 6l4 4 4-4" }))))), this.name && h("input", { key: '44791ad0af7eae39a3d8b7cabf12a68b11fc20ba', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
     }
     static get is() { return "le-combobox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-current-heading/le-current-heading.js

@@ -61,7 +61,7 @@ export class LeCurrentHeading {
         }
     }
     render() {
-        return (h(Host, { key: '028e550ecf987156ec431772147061fa5aadd25b' }, this.activeText ? (h("span", { class: "title", part: "title" }, this.activeText)) : (h("slot", null))));
+        return (h(Host, { key: 'c8d94a695a402039000210914b6780264a034a89' }, this.activeText ? (h("span", { class: "title", part: "title" }, this.activeText)) : (h("slot", null))));
     }
     static get is() { return "le-current-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-dropdown-base/le-dropdown-base.js

@@ -339,7 +339,7 @@ export class LeDropdownBase {
     }
     render() {
         const dropdownWidth = this.width || (this.triggerWidth ? `${this.triggerWidth}px` : undefined);
-        return (h(Host, { key: '3a315f23fe74e31268e6decc30973983a118b877' }, h("le-popover", { key: 'b79a77be208e7e8f373dbc36a56b0a1e9e5556b4', ref: el => (this.popoverEl = el), position: "bottom", align: "start", showClose: false, closeOnClickOutside: this.closeOnClickOutside, closeOnEscape: true, offset: 4, width: dropdownWidth, minWidth: "150px", "trigger-full-width": this.fullWidth, onLePopoverOpen: this.handlePopoverOpen, onLePopoverClose: this.handlePopoverClose }, h("slot", { key: '2bb2996a1cb81018f19c710524b41fd1ddbaa10b', name: "trigger", slot: "trigger" }), h("slot", { key: '0fc8ce22948b69071b58622bc876c121a61043bc', name: "header" }), h("div", { key: '412af7260014a319c7889624ac359186e3e27857', class: "dropdown-list", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: el => (this.listEl = el), style: { maxHeight: this.maxHeight } }, this.renderOptions()))));
+        return (h(Host, { key: '90bca5763b9110f8e5cad70870110cab1efeeec6' }, h("le-popover", { key: 'ebded64a4f2b23c8b1a954dd995c4d6171ef9c88', ref: el => (this.popoverEl = el), position: "bottom", align: "start", showClose: false, closeOnClickOutside: this.closeOnClickOutside, closeOnEscape: true, offset: 4, width: dropdownWidth, minWidth: "150px", "trigger-full-width": this.fullWidth, onLePopoverOpen: this.handlePopoverOpen, onLePopoverClose: this.handlePopoverClose }, h("slot", { key: '57e540660ee269de594209186d6fbe066b9c8fc1', name: "trigger", slot: "trigger" }), h("slot", { key: 'e58a76a0097f938873f5462c844ee9f1a5eece72', name: "header" }), h("div", { key: 'c4fa35069438df82894e45e87f46aef67a189c43', class: "dropdown-list", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: el => (this.listEl = el), style: { maxHeight: this.maxHeight } }, this.renderOptions()))));
     }
     static get is() { return "le-dropdown-base"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-header/le-header.js

@@ -268,7 +268,7 @@ export class LeHeader {
             'is-hidden': !this.revealed,
             'is-shrunk': this.shrunk,
         });
-        return (h(Host, { key: 'b7ed8d1208c9b25bf51df7adfbe0314a218ff9cd', class: hostClass, onMouseEnter: () => {
+        return (h(Host, { key: 'd1a4ae64dff81139b1c35681698539fdf072ae66', class: hostClass, onMouseEnter: () => {
                 if (!this.expandOnHover)
                     return;
                 this.hoverActive = true;
@@ -278,7 +278,7 @@ export class LeHeader {
                     return;
                 this.hoverActive = false;
                 this.scheduleUpdate(true);
-            } }, h("le-component", { key: '661da8897d22f2f68a5e204d95ad0e752a82bb80', component: "le-header" }, h("header", { key: '17fb8590fb9c77ae0b7bbd035779c8baedfcfd81', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, h("div", { key: '7e6a8c4513faea999238f04b89f1ae8e0b6e9e14', class: "inner", part: "inner" }, h("div", { key: 'dd0096602b5d43b53df9a183b43db882bc7bbd80', class: "row", part: "row" }, h("div", { key: '1266ebdbc9ed4ab768ab5ab3fc238d83fbc9073d', class: "start", part: "start" }, h("le-slot", { key: 'de676387770a8c11ba10e202dc693cce3a135a1d', name: "start", label: "Start", description: "Logo / back button / nav", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: 'd4cd5d4b13dea34f42dc9585d4fabb42dd2e014e', name: "start" }))), h("div", { key: 'd4d1b192b19589f9dd6181f34e88d549ef93a4b6', class: "title", part: "title" }, h("le-slot", { key: '7e3d81978c17bfde2b25368349cd57a74c77473e', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, h("span", { key: '32622e4910ff8d6391d0183c7be87a172c0a47d7', class: "title-slot", part: "title" }, h("slot", { key: '05882cf5752e3a1951672b029e7992d6a2d6304c', name: "title" })))), h("div", { key: 'ed4ae04bdda4d47bc51239f0d5d87b9084c0bb52', class: "end", part: "end" }, h("le-slot", { key: 'acc6c5386e2a0e453ce025e06313c3b43b5fc63d', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: '4a295322956320c87974b2ffc276bb1fd17b1e65', name: "end" })))), h("div", { key: '95670490864701d5ec3fd55f28dc8ae4a1bd3ed3', class: "secondary", part: "secondary" }, h("le-slot", { key: '289d8af446f8c662472498e514c3ecc663cfdf5a', name: "", label: "Secondary", description: "Secondary row content", "allowed-components": "le-tabs,le-tab-bar,le-select,le-combobox,le-text,le-stack,le-box" }, h("slot", { key: '684a8e0f9aff40a14e08ddc64c4f21d14f174499' }))))))));
+            } }, h("le-component", { key: '305bc8b4aefaf2ef1dd7287422167cfd68d3e8c2', component: "le-header" }, h("header", { key: '1cf3b2ab01140e14870c1282e49e6eb3dbae5bf8', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, h("div", { key: 'b238e3762dd31228f3ab3627fbca2ff1a9c630fd', class: "inner", part: "inner" }, h("div", { key: 'f186fbecc9c9b6f6f08f45c272c292af9333450e', class: "row", part: "row" }, h("div", { key: 'e496055801a36f4cf7a045513df2bc917a573786', class: "start", part: "start" }, h("le-slot", { key: '697b90a8291836452c17d2c9d3759c23b7238e93', name: "start", label: "Start", description: "Logo / back button / nav", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: 'e7e2b7ad283ce089def47d1f11f78a8a1603face', name: "start" }))), h("div", { key: '145aaadb93972b9018f9303baee2d5b3c42db319', class: "title", part: "title" }, h("le-slot", { key: 'c488ef0d01da476a6351ae4b7dfb397950f9c3ce', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, h("span", { key: '78c21f46cbc81dc720e2f803cb3edc81ba5f76cf', class: "title-slot", part: "title" }, h("slot", { key: 'a47d5c8d4d0ae42b1cb4d7fab98022cbb380a27e', name: "title" })))), h("div", { key: '5fb7c5febcfb9b837f313caa65ea9b5e08b6f9cb', class: "end", part: "end" }, h("le-slot", { key: 'cc2ed75ea779a29e5c616daafec3ef90bbec3cfc', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: '135e8c2c0d7a7d9bef174f380d1f31d377cb043f', name: "end" })))), h("div", { key: 'b0d9e5fba045b7cfd5640e7ba700cb44d673f982', class: "secondary", part: "secondary" }, h("le-slot", { key: '75ed60e3ddef918db1534f8818cd0f337c71e8db', name: "", label: "Secondary", description: "Secondary row content", "allowed-components": "le-tabs,le-tab-bar,le-select,le-combobox,le-text,le-stack,le-box" }, h("slot", { key: '1266dc5bb54bf22055acbfc23befb398c1ee5a31' }))))))));
     }
     static get is() { return "le-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-header-placeholder/le-header-placeholder.js

@@ -11,7 +11,7 @@ import { h, Host } from "@stencil/core";
  */
 export class LeHeaderPlaceholder {
     render() {
-        return (h(Host, { key: '944e0118b48d068ddf49e18a2d3e881783b68a21', "aria-hidden": "true", style: {
+        return (h(Host, { key: '0b056eac512d668bc8c3aa7000bdc7363dace713', "aria-hidden": "true", style: {
                 display: 'block',
                 height: 'var(--le-header-height, 64px)',
             } }));

package/dist/collection/components/le-icon/le-icon.js

@@ -109,7 +109,7 @@ export class LeIcon {
         return svgElements;
     }
     render() {
-        return (h("svg", { key: 'ca1bf648c3ea7cd129854fed4d42a02b87624b96', xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: this.size || 16, width: this.size || 16, viewBox: this.iconData?.viewBox || `0 0 ${this.size || 16} ${this.size || 16}` }, this.renderSVGContent(this.iconData?.children)));
+        return (h("svg", { key: '679c2641c722c5321ffc90a372d3f5fa5d748946', xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: this.size || 16, width: this.size || 16, viewBox: this.iconData?.viewBox || `0 0 ${this.size || 16} ${this.size || 16}` }, this.renderSVGContent(this.iconData?.children)));
     }
     static get is() { return "le-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -308,13 +308,13 @@ export class LeMultiselect {
     render() {
         const hasSelections = this.selectedOptions.length > 0;
         const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;
-        return (h("le-component", { key: 'a2a63cfca9ce976fa4adfc8e6074928b2bff824e', component: "le-multiselect" }, h("le-dropdown-base", { key: '5df0d2b8ca639e4b21dcc2ad75d7cafb378d275c', 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: '8a0ed59a9a4f95b601c0feb41ab80d63628a6e96', slot: "trigger", class: {
+        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: '1eb2d36631f9f9fc060d81fbbd09509584e46db4', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: 'bd5e5f6df6d87c0243390c5e39f0fd4e401d347c', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: 'ec5e02d4efe51fee37de296a3e9219638886fcf1', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '37a295fe1eaf777494b94994c42dcfaf6ebc18a4', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '570ab6b1808001f51ae005557aa57780bd6ed27a', class: "multiselect-arrow" }, h("svg", { key: '418a5e6d237994247dc052b80fae2544aef32053', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '3062461aa7c73439a8ff2a05e413f763984b0665', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: '33a55647b1d73a0ab87b5517194da8cff5e398fc', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: '2992c9500610e433da67767b6e02115f26731305', 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: '864313565f2b263fd65df446f6dc899511e65b58', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
+            }, 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 is() { return "le-multiselect"; }
     static get encapsulation() { return "shadow"; }