le-kit 0.5.2 → 0.5.3

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

@@ -0,0 +1,372 @@
+import { h, Host, Fragment, } from "@stencil/core";
+import { classnames, generateId } from "../../utils/utils";
+export class LeBreadcrumbs {
+    constructor() {
+        /**
+         * Breadcrumb items (supports JSON string).
+         */
+        this.items = [];
+        /**
+         * Accessible label for the breadcrumbs navigation.
+         */
+        this.label = 'Breadcrumbs';
+        /**
+         * Separator icon name (used if no separator slot is provided).
+         */
+        this.separatorIcon = 'chevron-right';
+        /**
+         * Overflow behavior: collapse (default), wrap, or scroll.
+         */
+        this.overflowMode = 'collapse';
+        /**
+         * Minimum visible items before collapsing.
+         */
+        this.minVisibleItems = 2;
+        this.hiddenIndices = [];
+        this.separatorTemplate = '';
+        this.instanceId = generateId('le-breadcrumbs');
+        this.recomputeQueued = false;
+        this.handleSeparatorSlotChange = (ev) => {
+            const slot = ev.target;
+            const nodes = slot.assignedNodes({ flatten: true });
+            const html = nodes
+                .map(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    return node.textContent || '';
+                }
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    return node.outerHTML || '';
+                }
+                return '';
+            })
+                .join('')
+                .trim();
+            this.separatorTemplate = html;
+            this.scheduleOverflowRecompute();
+        };
+        this.handleItemClick = (item, id, ev) => {
+            const href = item.href || item.url;
+            this.leBreadcrumbSelect.emit({ item, id, href, originalEvent: ev });
+        };
+        this.handleKeyDown = (ev) => {
+            if (ev.key !== 'ArrowRight' && ev.key !== 'ArrowLeft')
+                return;
+            const focusables = Array.from(this.el.shadowRoot?.querySelectorAll('a,button,[tabindex="0"]') || []);
+            if (focusables.length === 0)
+                return;
+            const current = document.activeElement;
+            const idx = focusables.findIndex(el => el === current);
+            if (idx === -1)
+                return;
+            ev.preventDefault();
+            const nextIdx = ev.key === 'ArrowRight' ? idx + 1 : idx - 1;
+            const target = focusables[(nextIdx + focusables.length) % focusables.length];
+            target?.focus();
+        };
+    }
+    componentDidLoad() {
+        this.setupResizeObserver();
+        this.scheduleOverflowRecompute();
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+    }
+    handleInputsChange() {
+        this.scheduleOverflowRecompute();
+    }
+    setupResizeObserver() {
+        if (typeof window === 'undefined' || !('ResizeObserver' in window))
+            return;
+        this.resizeObserver = new ResizeObserver(() => this.scheduleOverflowRecompute());
+        this.resizeObserver.observe(this.el);
+    }
+    get parsedItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.items;
+    }
+    getItemId(item, index) {
+        return item.id ?? `${this.instanceId}:${index}`;
+    }
+    scheduleOverflowRecompute() {
+        if (this.overflowMode !== 'collapse') {
+            if (this.hiddenIndices.length) {
+                this.hiddenIndices = [];
+            }
+            return;
+        }
+        if (this.recomputeQueued)
+            return;
+        this.recomputeQueued = true;
+        requestAnimationFrame(() => this.recomputeOverflow());
+    }
+    nextFrame() {
+        return new Promise(resolve => requestAnimationFrame(() => resolve()));
+    }
+    async recomputeOverflow() {
+        this.recomputeQueued = false;
+        if (this.overflowMode !== 'collapse') {
+            return;
+        }
+        const items = this.parsedItems;
+        if (!this.listEl || items.length <= Math.max(2, this.minVisibleItems)) {
+            if (this.hiddenIndices.length) {
+                this.hiddenIndices = [];
+            }
+            return;
+        }
+        // Reset hidden items first
+        if (this.hiddenIndices.length) {
+            this.hiddenIndices = [];
+            await this.nextFrame();
+        }
+        const containerWidth = this.listEl.clientWidth;
+        if (!containerWidth)
+            return;
+        const candidates = items.map((_, idx) => idx).slice(1, -1);
+        const hidden = [];
+        let attempts = 0;
+        while (this.listEl.scrollWidth > containerWidth &&
+            attempts < candidates.length &&
+            items.length - hidden.length > this.minVisibleItems) {
+            const next = candidates.shift();
+            if (next === undefined)
+                break;
+            hidden.push(next);
+            this.hiddenIndices = [...hidden];
+            await this.nextFrame();
+            attempts += 1;
+        }
+        // If still overflowing, hide first then last as a last resort
+        if (this.listEl.scrollWidth > containerWidth &&
+            items.length - hidden.length > this.minVisibleItems) {
+            if (!hidden.includes(0)) {
+                hidden.unshift(0);
+                this.hiddenIndices = [...hidden];
+                await this.nextFrame();
+            }
+        }
+        if (this.listEl.scrollWidth > containerWidth &&
+            items.length - hidden.length > this.minVisibleItems) {
+            const lastIndex = items.length - 1;
+            if (!hidden.includes(lastIndex)) {
+                hidden.push(lastIndex);
+                this.hiddenIndices = [...hidden];
+                await this.nextFrame();
+            }
+        }
+    }
+    renderSeparator() {
+        console.log('separatorTemplate', this.separatorTemplate || 'no-template', this.separatorIcon);
+        if (this.separatorTemplate) {
+            return h("span", { class: "separator", "aria-hidden": "true", innerHTML: this.separatorTemplate });
+        }
+        return (h("span", { class: "separator", "aria-hidden": "true" }, h("le-icon", { name: this.separatorIcon })));
+    }
+    renderItem(item, index) {
+        const id = this.getItemId(item, index);
+        const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+        const isCurrent = !!item.selected;
+        const itemClass = classnames('item', { current: isCurrent });
+        const icontent = item.icon || item.iconStart;
+        const content = (h("le-button", { slot: hasChildren ? 'trigger' : undefined, variant: "clear", color: "secondary", class: itemClass, onClick: ev => this.handleItemClick(item, id, ev), "aria-haspopup": "menu", "aria-current": isCurrent ? 'page' : null, part: item.part, iconStart: icontent }, h("span", { class: "item-label" }, item.label)));
+        if (hasChildren) {
+            return (h("le-popover", { position: "bottom", align: "start", "show-close": "false", class: "item-popover" }, content, h("le-navigation", { orientation: "vertical", items: item.children, style: { minWidth: '200px' } })));
+        }
+        return content;
+    }
+    renderMore(hiddenItems) {
+        if (hiddenItems.length === 0)
+            return null;
+        return (h("le-popover", { position: "bottom", align: "start", "show-close": "false" }, h("button", { slot: "trigger", class: "more-trigger", type: "button", "aria-haspopup": "menu" }, h("slot", { name: "more-trigger" }, h("le-icon", { name: "ellipsis-horizontal" }))), h("le-navigation", { orientation: "vertical", items: hiddenItems, style: { minWidth: '200px' } })));
+    }
+    render() {
+        const items = this.parsedItems;
+        const indexedItems = items.map((item, index) => ({ item, index }));
+        const hiddenSet = new Set(this.hiddenIndices);
+        const hiddenItems = indexedItems.filter(({ index }) => hiddenSet.has(index));
+        const visibleItems = indexedItems.filter(({ index }) => !hiddenSet.has(index));
+        const shouldCollapse = this.overflowMode === 'collapse' && hiddenItems.length > 0;
+        const firstVisible = visibleItems[0];
+        const remainingVisible = visibleItems.slice(1);
+        const firstHidden = hiddenSet.has(0);
+        return (h(Host, { key: '6da8c091e08c97f903d6e840d02bca6a321ed0ba', onKeyDown: this.handleKeyDown }, h("nav", { key: 'ddc78c68de5a49d59a3d7cfa446ce7a4dea02366', class: "breadcrumbs", "aria-label": this.label }, h("slot", { key: 'c76c6164b589bdad8715a8adbe94d39dab261e71', name: "start" }), h("div", { key: '80fecb4159d873e7d5994299229f80610f0ca1ed', class: classnames('list', {
+                wrap: this.overflowMode === 'wrap',
+                scroll: this.overflowMode === 'scroll',
+            }), ref: el => (this.listEl = el) }, !firstHidden && firstVisible
+            ? this.renderItem(firstVisible.item, firstVisible.index)
+            : null, shouldCollapse && !firstHidden && firstVisible ? this.renderSeparator() : null, shouldCollapse ? this.renderMore(hiddenItems.map(h => h.item)) : null, (firstHidden ? visibleItems : remainingVisible).map(({ item, index }, i) => (h(Fragment, null, this.renderSeparator(), h("span", { class: "crumb", key: `${item.label}-${index}-${i}` }, this.renderItem(item, index)))))), h("slot", { key: 'cd9f1f1200554f43cd144f07870aa3063de9a843', name: "end" })), h("span", { key: '3bd953f8c8a4bae9d2e1b3bbe61977d92b1f0f50', class: "hidden-slot", "aria-hidden": "true" }, h("slot", { key: '5deeddaba836a0ac6c698d25ed799670231c3acd', name: "separator", onSlotchange: this.handleSeparatorSlotChange }))));
+    }
+    static get is() { return "le-breadcrumbs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-breadcrumbs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-breadcrumbs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LeOption[] | string",
+                    "resolved": "LeOption[] | string",
+                    "references": {
+                        "LeOption": {
+                            "location": "import",
+                            "path": "../../types/options",
+                            "id": "src/types/options.ts::LeOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breadcrumb items (supports JSON string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the breadcrumbs navigation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Breadcrumbs'"
+            },
+            "separatorIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Separator icon name (used if no separator slot is provided)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator-icon",
+                "defaultValue": "'chevron-right'"
+            },
+            "overflowMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'collapse' | 'wrap' | 'scroll'",
+                    "resolved": "\"collapse\" | \"scroll\" | \"wrap\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overflow behavior: collapse (default), wrap, or scroll."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overflow-mode",
+                "defaultValue": "'collapse'"
+            },
+            "minVisibleItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum visible items before collapsing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-visible-items",
+                "defaultValue": "2"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hiddenIndices": {},
+            "separatorTemplate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "leBreadcrumbSelect",
+                "name": "leBreadcrumbSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a breadcrumb item is selected."
+                },
+                "complexType": {
+                    "original": "LeBreadcrumbSelectDetail",
+                    "resolved": "LeBreadcrumbSelectDetail",
+                    "references": {
+                        "LeBreadcrumbSelectDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/le-kit/le-kit/src/components/le-breadcrumbs/le-breadcrumbs.tsx",
+                            "id": "src/components/le-breadcrumbs/le-breadcrumbs.tsx::LeBreadcrumbSelectDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "handleInputsChange"
+            }, {
+                "propName": "overflowMode",
+                "methodName": "handleInputsChange"
+            }, {
+                "propName": "minVisibleItems",
+                "methodName": "handleInputsChange"
+            }];
+    }
+}
+//# sourceMappingURL=le-breadcrumbs.js.map

package/dist/collection/components/le-breadcrumbs/le-breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/le-breadcrumbs/le-breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  h,\n  Host,\n  Fragment,\n} from '@stencil/core';\nimport { LeOption } from '../../types/options';\nimport { classnames, generateId } from '../../utils/utils';\n\nexport interface LeBreadcrumbSelectDetail {\n  item: LeOption;\n  id: string;\n  href?: string;\n  originalEvent: MouseEvent | KeyboardEvent;\n}\n\n@Component({\n  tag: 'le-breadcrumbs',\n  styleUrl: 'le-breadcrumbs.css',\n  shadow: true,\n})\nexport class LeBreadcrumbs {\n  @Element() el: HTMLElement;\n\n  /**\n   * Breadcrumb items (supports JSON string).\n   */\n  @Prop() items: LeOption[] | string = [];\n\n  /**\n   * Accessible label for the breadcrumbs navigation.\n   */\n  @Prop() label: string = 'Breadcrumbs';\n\n  /**\n   * Separator icon name (used if no separator slot is provided).\n   */\n  @Prop() separatorIcon: string = 'chevron-right';\n\n  /**\n   * Overflow behavior: collapse (default), wrap, or scroll.\n   */\n  @Prop() overflowMode: 'collapse' | 'wrap' | 'scroll' = 'collapse';\n\n  /**\n   * Minimum visible items before collapsing.\n   */\n  @Prop() minVisibleItems: number = 2;\n\n  /**\n   * Emitted when a breadcrumb item is selected.\n   */\n  @Event({ cancelable: true }) leBreadcrumbSelect: EventEmitter<LeBreadcrumbSelectDetail>;\n\n  @State() private hiddenIndices: number[] = [];\n  @State() private separatorTemplate: string = '';\n\n  private listEl?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private instanceId: string = generateId('le-breadcrumbs');\n  private recomputeQueued: boolean = false;\n\n  componentDidLoad() {\n    this.setupResizeObserver();\n    this.scheduleOverflowRecompute();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  @Watch('items')\n  @Watch('overflowMode')\n  @Watch('minVisibleItems')\n  handleInputsChange() {\n    this.scheduleOverflowRecompute();\n  }\n\n  private setupResizeObserver() {\n    if (typeof window === 'undefined' || !('ResizeObserver' in window)) return;\n    this.resizeObserver = new ResizeObserver(() => this.scheduleOverflowRecompute());\n    this.resizeObserver.observe(this.el);\n  }\n\n  private get parsedItems(): LeOption[] {\n    if (typeof this.items === 'string') {\n      try {\n        return JSON.parse(this.items);\n      } catch {\n        return [];\n      }\n    }\n    return this.items;\n  }\n\n  private getItemId(item: LeOption, index: number): string {\n    return item.id ?? `${this.instanceId}:${index}`;\n  }\n\n  private handleSeparatorSlotChange = (ev: Event) => {\n    const slot = ev.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    const html = nodes\n      .map(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          return node.textContent || '';\n        }\n        if (node.nodeType === Node.ELEMENT_NODE) {\n          return (node as HTMLElement).outerHTML || '';\n        }\n        return '';\n      })\n      .join('')\n      .trim();\n\n    this.separatorTemplate = html;\n    this.scheduleOverflowRecompute();\n  };\n\n  private scheduleOverflowRecompute() {\n    if (this.overflowMode !== 'collapse') {\n      if (this.hiddenIndices.length) {\n        this.hiddenIndices = [];\n      }\n      return;\n    }\n\n    if (this.recomputeQueued) return;\n    this.recomputeQueued = true;\n    requestAnimationFrame(() => this.recomputeOverflow());\n  }\n\n  private nextFrame(): Promise<void> {\n    return new Promise(resolve => requestAnimationFrame(() => resolve()));\n  }\n\n  private async recomputeOverflow() {\n    this.recomputeQueued = false;\n\n    if (this.overflowMode !== 'collapse') {\n      return;\n    }\n\n    const items = this.parsedItems;\n    if (!this.listEl || items.length <= Math.max(2, this.minVisibleItems)) {\n      if (this.hiddenIndices.length) {\n        this.hiddenIndices = [];\n      }\n      return;\n    }\n\n    // Reset hidden items first\n    if (this.hiddenIndices.length) {\n      this.hiddenIndices = [];\n      await this.nextFrame();\n    }\n\n    const containerWidth = this.listEl.clientWidth;\n    if (!containerWidth) return;\n\n    const candidates = items.map((_, idx) => idx).slice(1, -1);\n    const hidden: number[] = [];\n\n    let attempts = 0;\n    while (\n      this.listEl.scrollWidth > containerWidth &&\n      attempts < candidates.length &&\n      items.length - hidden.length > this.minVisibleItems\n    ) {\n      const next = candidates.shift();\n      if (next === undefined) break;\n      hidden.push(next);\n      this.hiddenIndices = [...hidden];\n      await this.nextFrame();\n      attempts += 1;\n    }\n\n    // If still overflowing, hide first then last as a last resort\n    if (\n      this.listEl.scrollWidth > containerWidth &&\n      items.length - hidden.length > this.minVisibleItems\n    ) {\n      if (!hidden.includes(0)) {\n        hidden.unshift(0);\n        this.hiddenIndices = [...hidden];\n        await this.nextFrame();\n      }\n    }\n\n    if (\n      this.listEl.scrollWidth > containerWidth &&\n      items.length - hidden.length > this.minVisibleItems\n    ) {\n      const lastIndex = items.length - 1;\n      if (!hidden.includes(lastIndex)) {\n        hidden.push(lastIndex);\n        this.hiddenIndices = [...hidden];\n        await this.nextFrame();\n      }\n    }\n  }\n\n  private handleItemClick = (item: LeOption, id: string, ev: MouseEvent) => {\n    const href = (item as any).href || (item as any).url;\n    this.leBreadcrumbSelect.emit({ item, id, href, originalEvent: ev });\n  };\n\n  private handleKeyDown = (ev: KeyboardEvent) => {\n    if (ev.key !== 'ArrowRight' && ev.key !== 'ArrowLeft') return;\n    const focusables = Array.from(\n      this.el.shadowRoot?.querySelectorAll<HTMLElement>('a,button,[tabindex=\"0\"]') || [],\n    );\n\n    if (focusables.length === 0) return;\n    const current = document.activeElement as HTMLElement | null;\n    const idx = focusables.findIndex(el => el === current);\n    if (idx === -1) return;\n\n    ev.preventDefault();\n    const nextIdx = ev.key === 'ArrowRight' ? idx + 1 : idx - 1;\n    const target = focusables[(nextIdx + focusables.length) % focusables.length];\n    target?.focus();\n  };\n\n  private renderSeparator() {\n    console.log('separatorTemplate', this.separatorTemplate || 'no-template', this.separatorIcon);\n    if (this.separatorTemplate) {\n      return <span class=\"separator\" aria-hidden=\"true\" innerHTML={this.separatorTemplate}></span>;\n    }\n\n    return (\n      <span class=\"separator\" aria-hidden=\"true\">\n        <le-icon name={this.separatorIcon} />\n      </span>\n    );\n  }\n\n  private renderItem(item: LeOption, index: number) {\n    const id = this.getItemId(item, index);\n    const hasChildren = Array.isArray(item.children) && item.children.length > 0;\n    const isCurrent = !!item.selected;\n\n    const itemClass = classnames('item', { current: isCurrent });\n    const icontent = item.icon || item.iconStart;\n    const content = (\n      <le-button\n        slot={hasChildren ? 'trigger' : undefined}\n        variant=\"clear\"\n        color=\"secondary\"\n        class={itemClass}\n        onClick={ev => this.handleItemClick(item, id, ev)}\n        aria-haspopup=\"menu\"\n        aria-current={isCurrent ? 'page' : null}\n        part={item.part}\n        iconStart={icontent}\n      >\n        <span class=\"item-label\">{item.label}</span>\n      </le-button>\n    );\n\n    if (hasChildren) {\n      return (\n        <le-popover position=\"bottom\" align=\"start\" show-close=\"false\" class=\"item-popover\">\n          {content}\n          <le-navigation\n            orientation=\"vertical\"\n            items={item.children as LeOption[]}\n            style={{ minWidth: '200px' }}\n          ></le-navigation>\n        </le-popover>\n      );\n    }\n\n    return content;\n  }\n\n  private renderMore(hiddenItems: LeOption[]) {\n    if (hiddenItems.length === 0) return null;\n\n    return (\n      <le-popover position=\"bottom\" align=\"start\" show-close=\"false\">\n        <button slot=\"trigger\" class=\"more-trigger\" type=\"button\" aria-haspopup=\"menu\">\n          <slot name=\"more-trigger\">\n            <le-icon name=\"ellipsis-horizontal\" />\n          </slot>\n        </button>\n        <le-navigation\n          orientation=\"vertical\"\n          items={hiddenItems}\n          style={{ minWidth: '200px' }}\n        ></le-navigation>\n      </le-popover>\n    );\n  }\n\n  render() {\n    const items = this.parsedItems;\n    const indexedItems = items.map((item, index) => ({ item, index }));\n    const hiddenSet = new Set(this.hiddenIndices);\n    const hiddenItems = indexedItems.filter(({ index }) => hiddenSet.has(index));\n    const visibleItems = indexedItems.filter(({ index }) => !hiddenSet.has(index));\n    const shouldCollapse = this.overflowMode === 'collapse' && hiddenItems.length > 0;\n\n    const firstVisible = visibleItems[0];\n    const remainingVisible = visibleItems.slice(1);\n    const firstHidden = hiddenSet.has(0);\n\n    return (\n      <Host onKeyDown={this.handleKeyDown}>\n        <nav class=\"breadcrumbs\" aria-label={this.label}>\n          <slot name=\"start\"></slot>\n\n          <div\n            class={classnames('list', {\n              wrap: this.overflowMode === 'wrap',\n              scroll: this.overflowMode === 'scroll',\n            })}\n            ref={el => (this.listEl = el as HTMLElement)}\n          >\n            {!firstHidden && firstVisible\n              ? this.renderItem(firstVisible.item, firstVisible.index)\n              : null}\n\n            {shouldCollapse && !firstHidden && firstVisible ? this.renderSeparator() : null}\n            {shouldCollapse ? this.renderMore(hiddenItems.map(h => h.item)) : null}\n\n            {(firstHidden ? visibleItems : remainingVisible).map(({ item, index }, i) => (\n              <Fragment>\n                {this.renderSeparator()}\n                <span class=\"crumb\" key={`${item.label}-${index}-${i}`}>\n                  {this.renderItem(item, index)}\n                </span>\n              </Fragment>\n            ))}\n          </div>\n\n          <slot name=\"end\"></slot>\n        </nav>\n\n        <span class=\"hidden-slot\" aria-hidden=\"true\">\n          <slot name=\"separator\" onSlotchange={this.handleSeparatorSlotChange}></slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -21,84 +21,55 @@ import { classnames } from "../../utils/utils";
  * @cmsCategory Actions
  */
 export class LeButton {
-    el;
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * Button variant style
-     * @allowedValues solid | outlined | clear
-     */
-    variant = 'solid';
-    /**
-     * Button color theme (uses theme semantic colors)
-     * @allowedValues primary | secondary | success | warning | danger | info
-     */
-    color = 'primary';
-    /**
-     * Button size
-     * @allowedValues small | medium | large
-     */
-    size = 'medium';
-    /**
-     * Whether the button is in a selected/active state
-     */
-    selected = false;
-    /**
-     * Whether the button takes full width of its container
-     */
-    fullWidth = false;
-    /**
-     * Icon only button image or emoji
-     * if this prop is set, the button will render only the icon slot
-     */
-    iconOnly;
-    /**
-     * Start icon image or emoji
-     */
-    iconStart;
-    /**
-     * End icon image or emoji
-     */
-    iconEnd;
-    /**
-     * Whether the button is disabled
-     */
-    disabled = false;
-    /**
-     * The button type attribute
-     * @allowedValues button | submit | reset
-     */
-    type = 'button';
-    /**
-     * Optional href to make the button act as a link
-     */
-    href;
-    /**
-     * Link target when href is set
-     */
-    target;
-    /**
-     * Alignment of the button label without the end icon
-     * @allowedValues start | center | space-between | end
-     */
-    align = 'center';
-    /**
-     * Emitted when the button is clicked.
-     * This is a custom event that wraps the native click but ensures the target is the le-button.
-     */
-    leClick;
-    handleClick = (event) => {
-        // We stop the internal button click from bubbling up
-        event.stopPropagation();
-        if (this.disabled) {
-            event.preventDefault();
-            return;
-        }
-        // And emit our own click event from the host element
-        this.leClick.emit(event);
-    };
+    constructor() {
+        /**
+         * Button variant style
+         * @allowedValues solid | outlined | clear
+         */
+        this.variant = 'solid';
+        /**
+         * Button color theme (uses theme semantic colors)
+         * @allowedValues primary | secondary | success | warning | danger | info
+         */
+        this.color = 'primary';
+        /**
+         * Button size
+         * @allowedValues small | medium | large
+         */
+        this.size = 'medium';
+        /**
+         * Whether the button is in a selected/active state
+         */
+        this.selected = false;
+        /**
+         * Whether the button takes full width of its container
+         */
+        this.fullWidth = false;
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        /**
+         * The button type attribute
+         * @allowedValues button | submit | reset
+         */
+        this.type = 'button';
+        /**
+         * Alignment of the button label without the end icon
+         * @allowedValues start | center | space-between | end
+         */
+        this.align = 'center';
+        this.handleClick = (event) => {
+            // We stop the internal button click from bubbling up
+            event.stopPropagation();
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            // And emit our own click event from the host element
+            this.leClick.emit(event);
+        };
+    }
     render() {
         const classes = classnames(`variant-${this.variant}`, `color-${this.color}`, `size-${this.size}`, {
             'selected': this.selected,
@@ -110,7 +81,7 @@ export class LeButton {
         const attrs = this.href
             ? { href: this.href, target: this.target, role: 'button' }
             : { type: this.type, disabled: this.disabled };
-        return (h(Host, { key: 'a42aef03b5faf34f47b50dff799316a6815babd5', class: classes }, h("le-component", { key: '86ef8acf04d43e829b83d3e225f210acefc99515', component: "le-button" }, h(TagType, { key: '44145a5244577aab167c103501b788f0088799e3', class: classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (h(Fragment, null, h("span", { class: "le-button-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
+        return (h(Host, { key: '4bf9fb21e9bf0ca5a19193d977ad9fab90b519a0', class: classes }, h("le-component", { key: '8e0edefabbe9196eba935a1e8cce788c686c170c', component: "le-button" }, h(TagType, { key: '30f88ea834a9029c0f8ec24819107ba318dc6397', class: classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (h(Fragment, null, h("span", { class: "le-button-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
     }
     static get is() { return "le-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-button/le-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"le-button.js","sourceRoot":"","sources":["../../../src/components/le-button/le-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Fragment, Event, EventEmitter, Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible button component with multiple variants and states.\n *\n * @slot - Button text content\n * @slot icon-only - Icon for icon-only buttons\n *\n * @cssprop --le-button-bg - Button background color\n * @cssprop --le-button-color - Button text color\n * @cssprop --le-button-border-radius - Button border radius\n * @cssprop --le-button-padding-x - Button horizontal padding\n * @cssprop --le-button-padding-y - Button vertical padding\n *\n * @csspart button - The native button element\n * @csspart content - The button content wrapper\n * @csspart icon-start - The start icon slot\n * @csspart icon-end - The end icon slot\n *\n * @cmsEditable true\n * @cmsCategory Actions\n */\n@Component({\n  tag: 'le-button',\n  styleUrl: 'le-button.css',\n  shadow: true,\n})\nexport class LeButton {\n  @Element() el: HTMLElement;\n\n  /**\n   * Mode of the popover should be 'default' for internal use\n   */\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n  /**\n   * Button variant style\n   * @allowedValues solid | outlined | clear\n   */\n  @Prop() variant: 'solid' | 'outlined' | 'clear' | 'system' = 'solid';\n\n  /**\n   * Button color theme (uses theme semantic colors)\n   * @allowedValues primary | secondary | success | warning | danger | info\n   */\n  @Prop() color: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';\n\n  /**\n   * Button size\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the button is in a selected/active state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Whether the button takes full width of its container\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Icon only button image or emoji\n   * if this prop is set, the button will render only the icon slot\n   */\n  @Prop() iconOnly?: string | Node;\n\n  /**\n   * Start icon image or emoji\n   */\n  @Prop() iconStart?: string | Node;\n\n  /**\n   * End icon image or emoji\n   */\n  @Prop() iconEnd?: string | Node;\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The button type attribute\n   * @allowedValues button | submit | reset\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to make the button act as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Link target when href is set\n   */\n  @Prop() target?: string;\n\n  /**\n   * Alignment of the button label without the end icon\n   * @allowedValues start | center | space-between | end\n   */\n  @Prop() align: 'start' | 'center' | 'space-between' | 'end' = 'center';\n\n  /**\n   * Emitted when the button is clicked.\n   * This is a custom event that wraps the native click but ensures the target is the le-button.\n   */\n  @Event({ eventName: 'click' }) leClick: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    // We stop the internal button click from bubbling up\n    event.stopPropagation();\n\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // And emit our own click event from the host element\n    this.leClick.emit(event);\n  };\n\n  render() {\n    const classes = classnames(\n      `variant-${this.variant}`,\n      `color-${this.color}`,\n      `size-${this.size}`,\n      {\n        'selected': this.selected,\n        'full-width': this.fullWidth,\n        'icon-only': this.iconOnly,\n        'disabled': this.disabled,\n      },\n    );\n\n    const TagType = this.href ? 'a' : 'button';\n    const attrs = this.href\n      ? { href: this.href, target: this.target, role: 'button' }\n      : { type: this.type, disabled: this.disabled };\n\n    return (\n      <Host class={classes}>\n        <le-component component=\"le-button\">\n          <TagType\n            class={classnames('le-button-container', `le-button-align-${this.align}`)}\n            part=\"button\"\n            {...attrs}\n            onClick={this.handleClick}\n          >\n            {this.iconOnly !== undefined ? (\n              <slot name=\"icon-only\">\n                {typeof this.iconOnly === 'string' ? this.iconOnly : null}\n              </slot>\n            ) : (\n              <Fragment>\n                <span class=\"le-button-label\">\n                  {this.iconStart && (\n                    <span class=\"icon-start\" part=\"icon-start\">\n                      {this.iconStart}\n                    </span>\n                  )}\n                  <le-slot\n                    name=\"\"\n                    description=\"Button text\"\n                    type=\"text\"\n                    class=\"content\"\n                    part=\"content\"\n                  >\n                    <slot></slot>\n                  </le-slot>\n                </span>\n                {this.iconEnd && (\n                  <span class=\"icon-end\" part=\"icon-end\">\n                    {this.iconEnd}\n                  </span>\n                )}\n              </Fragment>\n            )}\n          </TagType>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"le-button.js","sourceRoot":"","sources":["../../../src/components/le-button/le-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Fragment, Event, EventEmitter, Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible button component with multiple variants and states.\n *\n * @slot - Button text content\n * @slot icon-only - Icon for icon-only buttons\n *\n * @cssprop --le-button-bg - Button background color\n * @cssprop --le-button-color - Button text color\n * @cssprop --le-button-border-radius - Button border radius\n * @cssprop --le-button-padding-x - Button horizontal padding\n * @cssprop --le-button-padding-y - Button vertical padding\n *\n * @csspart button - The native button element\n * @csspart content - The button content wrapper\n * @csspart icon-start - The start icon slot\n * @csspart icon-end - The end icon slot\n *\n * @cmsEditable true\n * @cmsCategory Actions\n */\n@Component({\n  tag: 'le-button',\n  styleUrl: 'le-button.css',\n  shadow: true,\n})\nexport class LeButton {\n  @Element() el: HTMLElement;\n\n  /**\n   * Mode of the popover should be 'default' for internal use\n   */\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n  /**\n   * Button variant style\n   * @allowedValues solid | outlined | clear\n   */\n  @Prop() variant: 'solid' | 'outlined' | 'clear' | 'system' = 'solid';\n\n  /**\n   * Button color theme (uses theme semantic colors)\n   * @allowedValues primary | secondary | success | warning | danger | info\n   */\n  @Prop() color: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';\n\n  /**\n   * Button size\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the button is in a selected/active state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Whether the button takes full width of its container\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Icon only button image or emoji\n   * if this prop is set, the button will render only the icon slot\n   */\n  @Prop() iconOnly?: string | Node;\n\n  /**\n   * Start icon image or emoji\n   */\n  @Prop() iconStart?: string | Node;\n\n  /**\n   * End icon image or emoji\n   */\n  @Prop() iconEnd?: string | Node;\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The button type attribute\n   * @allowedValues button | submit | reset\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to make the button act as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Link target when href is set\n   */\n  @Prop() target?: string;\n\n  /**\n   * Alignment of the button label without the end icon\n   * @allowedValues start | center | space-between | end\n   */\n  @Prop() align: 'start' | 'center' | 'space-between' | 'end' = 'center';\n\n  /**\n   * Emitted when the button is clicked.\n   * This is a custom event that wraps the native click but ensures the target is the le-button.\n   */\n  @Event({ eventName: 'click' }) leClick: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    // We stop the internal button click from bubbling up\n    event.stopPropagation();\n\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // And emit our own click event from the host element\n    this.leClick.emit(event);\n  };\n\n  render() {\n    const classes = classnames(\n      `variant-${this.variant}`,\n      `color-${this.color}`,\n      `size-${this.size}`,\n      {\n        'selected': this.selected,\n        'full-width': this.fullWidth,\n        'icon-only': this.iconOnly,\n        'disabled': this.disabled,\n      },\n    );\n\n    const TagType = this.href ? 'a' : 'button';\n    const attrs = this.href\n      ? { href: this.href, target: this.target, role: 'button' }\n      : { type: this.type, disabled: this.disabled };\n\n    return (\n      <Host class={classes}>\n        <le-component component=\"le-button\">\n          <TagType\n            class={classnames('le-button-container', `le-button-align-${this.align}`)}\n            part=\"button\"\n            {...attrs}\n            onClick={this.handleClick}\n          >\n            {this.iconOnly !== undefined ? (\n              <slot name=\"icon-only\">\n                {typeof this.iconOnly === 'string' ? this.iconOnly : null}\n              </slot>\n            ) : (\n              <Fragment>\n                <span class=\"le-button-label\">\n                  {this.iconStart && (\n                    <span class=\"icon-start\" part=\"icon-start\">\n                      {this.iconStart}\n                    </span>\n                  )}\n                  <le-slot\n                    name=\"\"\n                    description=\"Button text\"\n                    type=\"text\"\n                    class=\"content\"\n                    part=\"content\"\n                  >\n                    <slot></slot>\n                  </le-slot>\n                </span>\n                {this.iconEnd && (\n                  <span class=\"icon-end\" part=\"icon-end\">\n                    {this.iconEnd}\n                  </span>\n                )}\n              </Fragment>\n            )}\n          </TagType>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -25,18 +25,19 @@ import { classnames } from "../../utils/utils";
  * @cmsCategory Layout
  */
 export class LeCard {
-    el;
-    /**
-     * Card variant style
-     * @allowedValues default | outlined | elevated
-     */
-    variant = 'default';
-    /**
-     * Whether the card is interactive (clickable)
-     */
-    interactive = false;
+    constructor() {
+        /**
+         * Card variant style
+         * @allowedValues default | outlined | elevated
+         */
+        this.variant = 'default';
+        /**
+         * Whether the card is interactive (clickable)
+         */
+        this.interactive = false;
+    }
     render() {
-        return (h("le-component", { key: 'b4203e8775f711c1ce4d8b9a4270815f122271f2', component: "le-card", hostClass: classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, h("div", { key: '0dc9231529fc6d2eb29bc5cde2c1dbf18b332a43', class: "card", part: "card" }, h("div", { key: '511fcec73b51b0931d92e0fee4d17b108c827e74', class: "card-header", part: "header" }, h("le-slot", { key: 'e50dbadbe53ce6fa343ac7cfccb5a5d8f58fbd01', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, h("slot", { key: '36e1f7c3c5c1c5a9d49261d1b1406efe4004389b', name: "header" }))), h("div", { key: 'f9da55c0661d7906161b77aa22edc1c6bb7fb8d4', class: "card-content", part: "content" }, h("le-slot", { key: '01670058d67851f1bd70b21fc4111b4bf2509f25', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, h("slot", { key: 'e6eff48970eca2b3971f0ea7bfda3ca12bd1a3a1' }))), h("div", { key: 'ccd29257bc339a0d26c4750823fc635a182123cc', class: "card-footer", part: "footer" }, h("le-slot", { key: '198499afcbb9b0e82cac6cf976ab407697263c1f', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, h("slot", { key: '4d495b49f48ac142cdf739472b48d4bfb37933af', name: "footer" }))))));
+        return (h("le-component", { key: '50b722661132acca9396539021caebd0beb99c13', component: "le-card", hostClass: classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, h("div", { key: '4fa7de6abb9460281b1a98a158b76dcd0ee9fe8d', class: "card", part: "card" }, h("div", { key: '60b67d4d7416628fbd07aae2623aebeb10e78366', class: "card-header", part: "header" }, h("le-slot", { key: '1ef59c336f43b1292eae242b00e92d1b90ec1fd1', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, h("slot", { key: 'cdbf9d8ee5b832a7c7314443e974b6f3fe0d6ffd', name: "header" }))), h("div", { key: '11290af7a2fc3f927e825e06f5ae51797013592e', class: "card-content", part: "content" }, h("le-slot", { key: '29d5890f7b841138910c84bf9017462edb90a851', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, h("slot", { key: '6e30f0ca8881825cf474e9d28ca7f16cc9e2feb6' }))), h("div", { key: '6e4824adaafef5e440e7d9e26d29048841e3cdba', class: "card-footer", part: "footer" }, h("le-slot", { key: 'aa734bdb5f1166bae0868949225bfc50cdb6e898', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, h("slot", { key: '6d3bf34e9585b38ce19aaeacf8259543560856a4', name: "footer" }))))));
     }
     static get is() { return "le-card"; }
     static get encapsulation() { return "shadow"; }