le-kit 0.5.3 → 0.5.4

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

@@ -1,231 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, transformTag } from '@stencil/core/internal/client';
-import { c as classnames } from './utils.js';
-import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, c as defineCustomElement$5, e as defineCustomElement$8, f as defineCustomElement$9, g as defineCustomElement$a } from './le-button2.js';
-import { d as defineCustomElement$7 } from './le-dropdown-base2.js';
-import { d as defineCustomElement$6 } from './le-popover2.js';
-
-const leCodeInputCss = () => `:host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-border-focus:2px solid var(--le-color-focus);--le-input-border-focus-offset:2px}.le-code-input-wrapper{position:relative;display:flex;flex-direction:column}.le-input-label{display:block;margin-bottom:var(--le-spacing-2, 0.5rem);color:var(--le-text-color, inherit);font-size:var(--le-font-size-sm, 0.875rem);font-weight:500}.input-group{position:relative;display:inline-flex;width:fit-content}.ghost-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:10;cursor:text;color:transparent;background:transparent;caret-color:transparent;border:none;outline:none;letter-spacing:1em;}.ghost-input:disabled{cursor:not-allowed}.visual-container{display:flex;gap:var(--le-spacing-2, 8px);pointer-events:none;}.code-box{position:relative;width:var(--le-code-box-size, 32px);height:var(--le-code-box-size, 42px);display:flex;align-items:center;justify-content:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);color:var(--le-input-color);font-size:1.2rem;transition:all 0.15s ease-in-out;box-sizing:border-box;user-select:none}.code-box.active{outline:var(--le-input-border-focus);outline-offset:var(--le-input-border-focus-offset);z-index:1}.code-box.selected{background-color:SelectedItem;outline:var(--le-input-border-focus);outline-offset:var(--le-input-border-focus-offset)}.input-group.has-error .code-box{border:var(--le-input-border-error, 1px solid #ef4444)}.input-group.has-error .code-box.active{border-width:2px}:host(.disabled) .code-box{background-color:var(--le-color-disabled-bg, #f3f4f6);color:var(--le-color-disabled-text, #9ca3af);border-color:var(--le-color-disabled-border, #e5e7eb)}.le-input-description,:host(p){margin-top:var(--le-spacing-1, 0.25rem);color:var(--le-text-muted, #6b7280);font-size:var(--le-font-size-sm, 0.875rem)}`;
-
-const LeCodeInput$1 = /*@__PURE__*/ proxyCustomElement(class LeCodeInput extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leChange = createEvent(this, "leChange", 7);
-        this.leInput = createEvent(this, "leInput", 7);
-        this.leFocus = createEvent(this, "leFocus", 7);
-        this.leBlur = createEvent(this, "leBlur", 7);
-        /**
-         * The value of the input
-         */
-        this.value = '';
-        /**
-         * Length of the code (number of characters)
-         */
-        this.length = 6;
-        /**
-         * The type of code (numeric or alphanumeric)
-         * This affects the keyboard layout on mobile devices.
-         */
-        this.type = 'text';
-        /**
-         * Whether the input is disabled
-         */
-        this.disabled = false;
-        /**
-         * Whether the input is read-only
-         */
-        this.readonly = false;
-        /**
-         * Internal validation state (can be set externally manually or via simple check)
-         */
-        this.error = false;
-        this.isFocused = false;
-        this.selectionStart = 0;
-        this.selectionEnd = 0;
-        this.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,
-            });
-        };
-        this.handleChange = () => {
-            this.leChange.emit({
-                value: this.value,
-                name: this.name,
-                externalId: this.externalId,
-            });
-        };
-        this.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();
-        };
-        this.handleBlur = () => {
-            this.isFocused = false;
-            this.leBlur.emit();
-            // Trigger change on blur
-            this.handleChange();
-        };
-        this.handleSelect = (ev) => {
-            this.updateSelection(ev.target);
-        };
-    }
-    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);
-        }
-    }
-    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: 'c9a4a92342645c54aee90091cd860fc439de6334', component: "le-code-input", hostClass: classnames({ 'disabled': this.disabled, 'has-error': this.error }) }, h("div", { key: '50480c7c827ba801421c260c4e6fef88f22dcbd0', class: "le-code-input-wrapper" }, this.label && (h("label", { key: '316653c42c51ea0a443d8401c5adaf3e4821d7c8', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '803789d07d538e1576dbb0ff7536110ab620632b', class: classnames('input-group', { 'has-error': this.error }) }, h("input", { key: '7bbf221d32aa9363066d799b5b2a4aac2e9ae77f', 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: '0ff57ab380039c4bbbbf0e347331eb6885f8ce63', class: "visual-container" }, this.renderBoxes())), !this.error && (h("div", { key: '7da46dfc052457588969a1c9631eb310d80030c4', class: "le-input-description" }, h("le-slot", { key: '7bcfa46fd981286736ea7ec490d65c962ef998d5', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'ee810bf920acc45c48b3cbc4ebf9598ac5937923', name: "description" }, this.description)))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
-    static get style() { return leCodeInputCss(); }
-}, [257, "le-code-input", {
-        "value": [1537],
-        "name": [1],
-        "label": [1],
-        "length": [2],
-        "description": [1],
-        "type": [1],
-        "disabled": [4],
-        "readonly": [4],
-        "externalId": [1, "external-id"],
-        "error": [4],
-        "isFocused": [32],
-        "selectionStart": [32],
-        "selectionEnd": [32]
-    }, undefined, {
-        "value": ["valueChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-code-input", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-code-input":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeCodeInput$1);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$a();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$9();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "le-dropdown-base":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const LeCodeInput = LeCodeInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LeCodeInput, defineCustomElement };
-//# sourceMappingURL=le-code-input.js.map
-
-//# sourceMappingURL=le-code-input.js.map

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

@@ -1 +0,0 @@
-{"file":"le-code-input.js","mappings":"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","names":["LeCodeInput","__stencil_proxyCustomElement"],"sources":["src/components/le-code-input/le-code-input.css?tag=le-code-input&encapsulation=shadow","src/components/le-code-input/le-code-input.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  --le-input-bg: var(--le-color-surface, #ffffff);\n  --le-input-color: var(--le-color-text-primary, #333333);\n  --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n  --le-input-radius: var(--le-radius-sm, 4px);\n  --le-input-border-focus: 2px solid var(--le-color-focus);\n  --le-input-border-focus-offset: 2px;\n}\n\n.le-code-input-wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n.le-input-label {\n  display: block;\n  margin-bottom: var(--le-spacing-2, 0.5rem);\n  color: var(--le-text-color, inherit);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  font-weight: 500;\n}\n\n.input-group {\n  position: relative;\n  display: inline-flex;\n  width: fit-content;\n}\n\n.ghost-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  z-index: 10;\n  cursor: text;\n  color: transparent;\n  background: transparent;\n  caret-color: transparent;\n  border: none;\n  outline: none;\n  letter-spacing: 1em; /* Try to match boxes? */\n}\n\n.ghost-input:disabled {\n  cursor: not-allowed;\n}\n\n.visual-container {\n  display: flex;\n  gap: var(--le-spacing-2, 8px);\n  pointer-events: none; /* Let clicks pass to ghost input */\n}\n\n.code-box {\n  position: relative;\n  width: var(--le-code-box-size, 32px);\n  height: var(--le-code-box-size, 42px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--le-input-bg);\n  border: var(--le-input-border);\n  border-radius: var(--le-input-radius);\n  color: var(--le-input-color);\n  font-size: 1.2rem;\n  transition: all 0.15s ease-in-out;\n  box-sizing: border-box;\n  user-select: none;\n}\n\n.code-box.active {\n  outline: var(--le-input-border-focus);\n  outline-offset: var(--le-input-border-focus-offset);\n  z-index: 1;\n}\n\n.code-box.selected {\n  background-color: SelectedItem;\n  outline: var(--le-input-border-focus);\n  outline-offset: var(--le-input-border-focus-offset);\n}\n\n.input-group.has-error .code-box {\n  border: var(--le-input-border-error, 1px solid #ef4444);\n}\n\n.input-group.has-error .code-box.active {\n  border-width: 2px;\n}\n\n:host(.disabled) .code-box {\n  background-color: var(--le-color-disabled-bg, #f3f4f6);\n  color: var(--le-color-disabled-text, #9ca3af);\n  border-color: var(--le-color-disabled-border, #e5e7eb);\n}\n\n.le-input-description,\n:host(p) {\n  margin-top: var(--le-spacing-1, 0.25rem);\n  color: var(--le-text-muted, #6b7280);\n  font-size: var(--le-font-size-sm, 0.875rem);\n}\n","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"],"version":3}

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

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

package/dist/components/le-collapse.js

@@ -1,9 +0,0 @@
-import { L as LeCollapse$1, d as defineCustomElement$1 } from './le-collapse2.js';
-
-const LeCollapse = LeCollapse$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LeCollapse, defineCustomElement };
-//# sourceMappingURL=le-collapse.js.map
-
-//# sourceMappingURL=le-collapse.js.map

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

@@ -1 +0,0 @@
-{"file":"le-collapse.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/le-collapse2.js

@@ -1,138 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host, transformTag } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1, a as defineCustomElement$2, b as defineCustomElement$3, c as defineCustomElement$4, e as defineCustomElement$7, f as defineCustomElement$8, g as defineCustomElement$9 } from './le-button2.js';
-import { d as defineCustomElement$6 } from './le-dropdown-base2.js';
-import { d as defineCustomElement$5 } from './le-popover2.js';
-
-const leCollapseCss = () => `:host{--le-collapse-duration:var(--le-transition-normal);display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--le-collapse-duration),
-    opacity var(--le-collapse-duration)}:host([data-open="false"]),:host([closed]){grid-template-rows:0fr;opacity:0}:host([no-fading][data-open="false"]),:host([no-fading][closed]){opacity:1}.region{display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.region.scroll-down{justify-content:flex-start}`;
-
-const LeCollapse = /*@__PURE__*/ proxyCustomElement(class LeCollapse extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * Since Stencil boolean props default to `false` when the attribute is missing.
-         * instead of `open` defaulting to `true`, using a `closed` prop.
-         */
-        this.closed = false;
-        /** Whether the content should scroll down from the top when open. */
-        this.scrollDown = false;
-        /** Stop fading the content when collapsing/expanding. */
-        this.noFading = false;
-        /** If true, collapse/expand based on the nearest header shrink event. */
-        this.collapseOnHeaderShrink = false;
-        this.headerShrunk = false;
-    }
-    /**
-     * 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) {
-        const e = ev;
-        this.headerShrunk = !!e.detail?.shrunk;
-    }
-    componentDidLoad() {
-        this.applyOpenState();
-    }
-    onOpenChange() {
-        this.applyOpenState();
-    }
-    onDrivenStateChange() {
-        this.applyOpenState();
-    }
-    shouldBeOpen() {
-        if (this.closed)
-            return false;
-        if (this.collapseOnHeaderShrink && this.headerShrunk)
-            return false;
-        return true;
-    }
-    applyOpenState() {
-        const nextOpen = this.shouldBeOpen();
-        this.el.toggleAttribute('data-open', nextOpen);
-    }
-    render() {
-        return (h(Host, { key: '81a03bdd47d7c6e7d4491f4ee6be2e2f7af66334', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, h("le-component", { key: '14cbe57c5cee1a3a7565175528d32b5d1be47919', component: "le-collapse" }, h("div", { key: 'c669a8d9f20776dba9d5ba162aaa6a58a31ad5b5', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, h("slot", { key: 'd56fd4c71032da7935800874c13a2ba5b7427c83' })))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "open": ["onOpenChange"],
-        "headerShrunk": ["onDrivenStateChange"]
-    }; }
-    static get style() { return leCollapseCss(); }
-}, [257, "le-collapse", {
-        "closed": [1540],
-        "scrollDown": [516, "scroll-down"],
-        "noFading": [516, "no-fading"],
-        "collapseOnHeaderShrink": [516, "collapse-on-header-shrink"],
-        "headerShrunk": [32]
-    }, [[8, "leHeaderShrinkChange", "handleHeaderShrink"]], {
-        "open": ["onOpenChange"],
-        "headerShrunk": ["onDrivenStateChange"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-collapse", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-collapse":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeCollapse);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$9();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-dropdown-base":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { LeCollapse as L, defineCustomElement as d };
-//# sourceMappingURL=le-collapse2.js.map
-
-//# sourceMappingURL=le-collapse2.js.map

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

@@ -1 +0,0 @@
-{"file":"le-collapse2.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC;AAC7B,kUAAkU,CAAC;;MCwBtT,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;;AAGG;AACqC,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAGZ,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;;AAG7B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGT,QAAA,IAAsB,CAAA,sBAAA,GACrF,KAAK;AAYU,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAsC/C;AAhDC;;;AAGG;AAEH,IAAA,kBAAkB,CAAC,EAAS,EAAA;QAC1B,MAAM,CAAC,GAAG,EAAsC;QAChD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM;;IAKxC,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;IAIb,YAAY,GAAA;QACpB,IAAI,CAAC,cAAc,EAAE;;IAIb,mBAAmB,GAAA;QAC3B,IAAI,CAAC,cAAc,EAAE;;IAGf,YAAY,GAAA;QAClB,IAAI,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,KAAK;AAC7B,QAAA,IAAI,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,YAAY;AAAE,YAAA,OAAO,KAAK;AAClE,QAAA,OAAO,IAAI;;IAGL,cAAc,GAAA;AACpB,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE;QACpC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,CAAC;;IAGhD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EAAY,IAAI,CAAC,YAAY,EAAE,GAAG,MAAM,GAAG,OAAO,EAAA,EACrD,CAAc,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,aAAa,EAAA,EACnC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,QAAQ,EAAA,EAC3E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACO,CACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/le-collapse/le-collapse.css?tag=le-collapse&encapsulation=shadow","src/components/le-collapse/le-collapse.tsx"],"sourcesContent":[":host {\n  --le-collapse-duration: var(--le-transition-normal);\n\n  display: grid;\n  grid-template-rows: 1fr;\n  opacity: 1;\n  transition:\n    grid-template-rows var(--le-collapse-duration),\n    opacity var(--le-collapse-duration);\n}\n\n:host([data-open=\"false\"]),\n:host([closed]) {\n  grid-template-rows: 0fr;\n  opacity: 0;\n}\n:host([no-fading][data-open=\"false\"]),\n:host([no-fading][closed]) {\n  opacity: 1;\n}\n\n.region {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  overflow: hidden;\n}\n\n.region.scroll-down {\n  justify-content: flex-start;\n}\n","import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nexport type LeCollapseAnimation = 'fade' | 'collapse' | 'fade-collapse';\n\n/**\n * Animated show/hide wrapper.\n *\n * Supports height collapse (auto->0) and/or fading.\n * Can optionally listen to the nearest `le-header` shrink events.\n *\n * @slot - Content to animate\n *\n * @cssprop --le-collapse-duration - Transition duration\n *\n * @csspart region - Collapsible region\n * @csspart content - Inner content\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-collapse',\n  styleUrl: 'le-collapse.css',\n  shadow: true,\n})\nexport class LeCollapse {\n  @Element() el: HTMLElement;\n\n  /**\n   * Since Stencil boolean props default to `false` when the attribute is missing.\n   * instead of `open` defaulting to `true`, using a `closed` prop.\n   */\n  @Prop({ mutable: true, reflect: true }) closed: boolean = false;\n\n  /** Whether the content should scroll down from the top when open. */\n  @Prop({ attribute: 'scroll-down', reflect: true }) scrollDown: boolean = false;\n\n  /** Stop fading the content when collapsing/expanding. */\n  @Prop({ attribute: 'no-fading', reflect: true }) noFading: boolean = false;\n\n  /** If true, collapse/expand based on the nearest header shrink event. */\n  @Prop({ attribute: 'collapse-on-header-shrink', reflect: true }) collapseOnHeaderShrink: boolean =\n    false;\n\n  /**\n   * Handles `leHeaderShrinkChange` events from the `le-header`.\n   * In case multiple headers are present, only the nearest one in the DOM tree is used.\n   */\n  @Listen('leHeaderShrinkChange', { target: 'window' })\n  handleHeaderShrink(ev: Event) {\n    const e = ev as CustomEvent<{ shrunk: boolean }>;\n    this.headerShrunk = !!e.detail?.shrunk;\n  }\n\n  @State() private headerShrunk: boolean = false;\n\n  componentDidLoad() {\n    this.applyOpenState();\n  }\n\n  @Watch('open')\n  protected onOpenChange() {\n    this.applyOpenState();\n  }\n\n  @Watch('headerShrunk')\n  protected onDrivenStateChange() {\n    this.applyOpenState();\n  }\n\n  private shouldBeOpen() {\n    if (this.closed) return false;\n    if (this.collapseOnHeaderShrink && this.headerShrunk) return false;\n    return true;\n  }\n\n  private applyOpenState() {\n    const nextOpen = this.shouldBeOpen();\n    this.el.toggleAttribute('data-open', nextOpen);\n  }\n\n  render() {\n    return (\n      <Host data-open={this.shouldBeOpen() ? 'true' : 'false'}>\n        <le-component component=\"le-collapse\">\n          <div class={{ 'region': true, 'scroll-down': this.scrollDown }} part=\"region\">\n            <slot></slot>\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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