le-kit 0.3.5 → 0.5.0

package/dist/components/le-card.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCust
 import { d as defineCustomElement$7 } from './le-dropdown-base2.js';
 import { d as defineCustomElement$6 } from './le-popover2.js';
 
-const leCardDefaultCss = () => `:host{display:block;--le-card-bg:var(--le-color-surface);--le-card-border-radius:var(--le-radius-lg);--le-card-shadow:var(--le-shadow-md);--le-card-shadow-elevated:var(--le-shadow-lg);--le-card-shadow-hover:var(--le-shadow-xl);--le-card-padding:var(--le-space-md);--le-card-border-color:var(--le-color-border);--le-card-transition:var(--le-transition-normal)}.card{background:var(--le-card-bg);border-radius:var(--le-card-border-radius);overflow:hidden;color:var(--le-color-text);box-shadow:var(--le-card-shadow)}:host>le-component.variant-outlined .card{border:1px solid var(--le-card-border-color);box-shadow:none}:host>le-component.variant-elevated .card{box-shadow:var(--le-card-shadow-elevated)}:host>le-component.interactive .card{cursor:pointer;transition:transform var(--le-card-transition), box-shadow var(--le-card-transition)}:host>le-component.interactive .card:hover{transform:translateY(-2px);box-shadow:var(--le-card-shadow-hover)}:host>le-component.interactive .card:focus-visible{outline:2px solid var(--le-color-border-focus);outline-offset:2px}.card-header{padding:var(--le-card-padding);padding-bottom:0}.card-header:empty{display:none}.card-content{padding:var(--le-card-padding)}.card-footer{padding:var(--le-card-padding);padding-top:0}.card-footer:empty{display:none}`;
+const leCardCss = () => `:host{display:block;--le-card-bg:var(--le-color-surface);--le-card-border-radius:var(--le-radius-lg);--le-card-shadow:var(--le-shadow-md);--le-card-shadow-elevated:var(--le-shadow-lg);--le-card-shadow-hover:var(--le-shadow-xl);--le-card-padding:var(--le-space-md);--le-card-border-color:var(--le-color-border);--le-card-transition:var(--le-transition-normal)}.card{background:var(--le-card-bg);border-radius:var(--le-card-border-radius);overflow:hidden;color:var(--le-color-text);box-shadow:var(--le-card-shadow)}:host>le-component.variant-outlined .card{border:1px solid var(--le-card-border-color);box-shadow:none}:host>le-component.variant-elevated .card{box-shadow:var(--le-card-shadow-elevated)}:host>le-component.interactive .card{cursor:pointer;transition:transform var(--le-card-transition), box-shadow var(--le-card-transition)}:host>le-component.interactive .card:hover{transform:translateY(-2px);box-shadow:var(--le-card-shadow-hover)}:host>le-component.interactive .card:focus-visible{outline:2px solid var(--le-color-border-focus);outline-offset:2px}.card-header{padding:var(--le-card-padding);padding-bottom:0}.card-header:empty{display:none}.card-content{padding:var(--le-card-padding)}.card-footer{padding:var(--le-card-padding);padding-top:0}.card-footer:empty{display:none}`;
 
 const LeCard$1 = /*@__PURE__*/ proxyCustomElement(class LeCard extends HTMLElement {
     constructor(registerHost) {
@@ -25,9 +25,9 @@ const LeCard$1 = /*@__PURE__*/ proxyCustomElement(class LeCard extends HTMLEleme
      */
     interactive = false;
     render() {
-        return (h("le-component", { key: '3b9b4c5f234bb3ac5d479a777c8069428baa4d8c', component: "le-card", hostClass: classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, h("div", { key: '7cad2dc42768d03b8d9af5dc52a8acc0d79027c0', class: "card", part: "card" }, h("div", { key: 'd00e14de2a216afd1362605849c387e8fa7cc522', class: "card-header", part: "header" }, h("le-slot", { key: 'a09922eae71962506351a6b3ddc4b2253573fa6d', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, h("slot", { key: '624efcc1f6e06e2876fb00d0b4efa10fdfd9083b', name: "header" }))), h("div", { key: '9aba5630de5d4fe24dbc59b5607fbb530ebd41e8', class: "card-content", part: "content" }, h("le-slot", { key: 'a6de438f65b747e6ecf8b7c573168c99cde3eb62', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, h("slot", { key: 'bca044329a0b88ad3f041aab94b702434124179c' }))), h("div", { key: '1c08846aa15cd44f71f6d79968412634009eea03', class: "card-footer", part: "footer" }, h("le-slot", { key: '4b65f8c6dd68e5995b42ed4ef18fa504d3b4f182', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, h("slot", { key: 'db199113de94b26bf19d0665938f5048a3587134', name: "footer" }))))));
+        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" }))))));
     }
-    static get style() { return leCardDefaultCss(); }
+    static get style() { return leCardCss(); }
 }, [769, "le-card", {
         "variant": [1],
         "interactive": [4]

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

@@ -1 +1 @@
-{"file":"le-card.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,2wCAA2wC,CAAC;;MCgC/xCA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;;;;;;;;;AAGjB;;;AAGG;IACK,OAAO,GAAwC,SAAS;AAEhE;;AAEG;IACK,WAAW,GAAY,KAAK;IAEpC,MAAM,GAAA;QACJ,QACE,qEAAc,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,UAAU,CAAC,CAAA,QAAA,EAAW,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EACrH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAA,EACjF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EACtC,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAC,GAAG,EAAC,QAAQ,EAAA,IAAA,EAAA,EAC1F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACL,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,0BAA0B,EAAA,oBAAA,EAAoB,mBAAmB,EAAA,EACjH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,CACF,CACO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["LeCard","__stencil_proxyCustomElement"],"sources":["src/components/le-card/le-card.default.css?tag=le-card&encapsulation=shadow","src/components/le-card/le-card.tsx"],"sourcesContent":["/**\n * Default mode styles for le-card\n * Uses global design tokens with component-specific overrides\n */\n:host {\n  display: block;\n  \n  /* Component-specific tokens that map to global tokens */\n  --le-card-bg: var(--le-color-surface);\n  --le-card-border-radius: var(--le-radius-lg);\n  --le-card-shadow: var(--le-shadow-md);\n  --le-card-shadow-elevated: var(--le-shadow-lg);\n  --le-card-shadow-hover: var(--le-shadow-xl);\n  --le-card-padding: var(--le-space-md);\n  --le-card-border-color: var(--le-color-border);\n  --le-card-transition: var(--le-transition-normal);\n}\n\n.card {\n  background: var(--le-card-bg);\n  border-radius: var(--le-card-border-radius);\n  overflow: hidden;\n  color: var(--le-color-text);\n  box-shadow: var(--le-card-shadow);\n}\n\n/* Variants - le-component gets the hostClass, so we use :host > le-component */\n:host > le-component.variant-outlined .card {\n  border: 1px solid var(--le-card-border-color);\n  box-shadow: none;\n}\n\n:host > le-component.variant-elevated .card {\n  box-shadow: var(--le-card-shadow-elevated);\n}\n\n/* Interactive state */\n:host > le-component.interactive .card {\n  cursor: pointer;\n  transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);\n}\n\n:host > le-component.interactive .card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--le-card-shadow-hover);\n}\n\n:host > le-component.interactive .card:focus-visible {\n  outline: 2px solid var(--le-color-border-focus);\n  outline-offset: 2px;\n}\n\n/* Sections */\n.card-header {\n  padding: var(--le-card-padding);\n  padding-bottom: 0;\n}\n\n.card-header:empty {\n  display: none;\n}\n\n.card-content {\n  padding: var(--le-card-padding);\n}\n\n.card-footer {\n  padding: var(--le-card-padding);\n  padding-top: 0;\n}\n\n.card-footer:empty {\n  display: none;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-card',\n  styleUrl: 'le-card.default.css',\n  shadow: true,\n})\nexport class LeCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * Card variant style\n   * @allowedValues default | outlined | elevated\n   */\n  @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n  /**\n   * Whether the card is interactive (clickable)\n   */\n  @Prop() interactive: boolean = false;\n\n  render() {\n    return (\n      <le-component component=\"le-card\" hostClass={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n        <div class=\"card\" part=\"card\">\n          <div class=\"card-header\" part=\"header\">\n            <le-slot name=\"header\" label=\"Header\" description=\"Card title\" type=\"text\" tag=\"h3\">\n              <slot name=\"header\"></slot>\n            </le-slot>\n          </div>\n\n          <div class=\"card-content\" part=\"content\">\n            <le-slot name=\"\" label=\"Content\" description=\"Card content\" type=\"textarea\" tag=\"p\" required>\n              <slot></slot>\n            </le-slot>\n          </div>\n\n          <div class=\"card-footer\" part=\"footer\">\n            <le-slot name=\"footer\" label=\"Footer\" description=\"Card footer with actions\" allowed-components=\"le-button,le-link\">\n              <slot name=\"footer\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"version":3}
+{"file":"le-card.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,2wCAA2wC,CAAC;;MCgCxxCA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;;;;;;;;;AAGjB;;;AAGG;IACK,OAAO,GAAwC,SAAS;AAEhE;;AAEG;IACK,WAAW,GAAY,KAAK;IAEpC,MAAM,GAAA;QACJ,QACE,qEAAc,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,UAAU,CAAC,CAAA,QAAA,EAAW,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EACrH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAA,EACjF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EACtC,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAC,GAAG,EAAC,QAAQ,EAAA,IAAA,EAAA,EAC1F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACL,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,0BAA0B,EAAA,oBAAA,EAAoB,mBAAmB,EAAA,EACjH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,CACF,CACO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["LeCard","__stencil_proxyCustomElement"],"sources":["src/components/le-card/le-card.css?tag=le-card&encapsulation=shadow","src/components/le-card/le-card.tsx"],"sourcesContent":["/**\n * Default mode styles for le-card\n * Uses global design tokens with component-specific overrides\n */\n:host {\n  display: block;\n  \n  /* Component-specific tokens that map to global tokens */\n  --le-card-bg: var(--le-color-surface);\n  --le-card-border-radius: var(--le-radius-lg);\n  --le-card-shadow: var(--le-shadow-md);\n  --le-card-shadow-elevated: var(--le-shadow-lg);\n  --le-card-shadow-hover: var(--le-shadow-xl);\n  --le-card-padding: var(--le-space-md);\n  --le-card-border-color: var(--le-color-border);\n  --le-card-transition: var(--le-transition-normal);\n}\n\n.card {\n  background: var(--le-card-bg);\n  border-radius: var(--le-card-border-radius);\n  overflow: hidden;\n  color: var(--le-color-text);\n  box-shadow: var(--le-card-shadow);\n}\n\n/* Variants - le-component gets the hostClass, so we use :host > le-component */\n:host > le-component.variant-outlined .card {\n  border: 1px solid var(--le-card-border-color);\n  box-shadow: none;\n}\n\n:host > le-component.variant-elevated .card {\n  box-shadow: var(--le-card-shadow-elevated);\n}\n\n/* Interactive state */\n:host > le-component.interactive .card {\n  cursor: pointer;\n  transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);\n}\n\n:host > le-component.interactive .card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--le-card-shadow-hover);\n}\n\n:host > le-component.interactive .card:focus-visible {\n  outline: 2px solid var(--le-color-border-focus);\n  outline-offset: 2px;\n}\n\n/* Sections */\n.card-header {\n  padding: var(--le-card-padding);\n  padding-bottom: 0;\n}\n\n.card-header:empty {\n  display: none;\n}\n\n.card-content {\n  padding: var(--le-card-padding);\n}\n\n.card-footer {\n  padding: var(--le-card-padding);\n  padding-top: 0;\n}\n\n.card-footer:empty {\n  display: none;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-card',\n  styleUrl: 'le-card.css',\n  shadow: true,\n})\nexport class LeCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * Card variant style\n   * @allowedValues default | outlined | elevated\n   */\n  @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n  /**\n   * Whether the card is interactive (clickable)\n   */\n  @Prop() interactive: boolean = false;\n\n  render() {\n    return (\n      <le-component component=\"le-card\" hostClass={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n        <div class=\"card\" part=\"card\">\n          <div class=\"card-header\" part=\"header\">\n            <le-slot name=\"header\" label=\"Header\" description=\"Card title\" type=\"text\" tag=\"h3\">\n              <slot name=\"header\"></slot>\n            </le-slot>\n          </div>\n\n          <div class=\"card-content\" part=\"content\">\n            <le-slot name=\"\" label=\"Content\" description=\"Card content\" type=\"textarea\" tag=\"p\" required>\n              <slot></slot>\n            </le-slot>\n          </div>\n\n          <div class=\"card-footer\" part=\"footer\">\n            <le-slot name=\"footer\" label=\"Footer\" description=\"Card footer with actions\" allowed-components=\"le-button,le-link\">\n              <slot name=\"footer\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"version":3}

package/dist/components/le-code-input.d.ts

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

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

@@ -0,0 +1,265 @@
+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);
+    }
+    get el() { return this; }
+    /**
+     * 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 watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return leCodeInputCss(); }
+}, [769, "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

@@ -0,0 +1 @@
+{"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-collapse2.js

@@ -56,7 +56,7 @@ const LeCollapse = /*@__PURE__*/ proxyCustomElement(class LeCollapse extends HTM
         this.el.toggleAttribute('data-open', nextOpen);
     }
     render() {
-        return (h(Host, { key: '19e96b22f47116cb9f5dc6ca9fc4ba8de2cb4299', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, h("le-component", { key: '0c16c094b155580849f59553c3e2ecb359f99816', component: "le-collapse" }, h("div", { key: '28448db4a519e558ac9c40dccddf123a462899b0', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, h("slot", { key: 'd14269819d746b985cf3b87052c9efdea08271d1' })))));
+        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 watchers() { return {
         "open": ["onOpenChange"],

package/dist/components/le-combobox.js

@@ -229,7 +229,7 @@ const LeCombobox$1 = /*@__PURE__*/ proxyCustomElement(class LeCombobox extends H
     }
     render() {
         const hasValue = this.inputValue.length > 0;
-        return (h("le-component", { key: 'f65aad2f17c8b15b08ea6719cc481a37cc68a081', component: "le-combobox" }, h("le-dropdown-base", { key: 'a1b518b8acd649bf1061e403d89f95ebc5d2e366', 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: '47339300365dca2c59e1d26fcae4faeef747ab18', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, h("le-string-input", { key: 'e3842d3ea970a14405fd555fd8d8f4e9dbd14e80', 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: '81caabc48183e8e93f84cd5a063a4d83edbfe87d', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, h("svg", { key: '02bc4d15d122119c3910b3bd03db76cd8a30b783', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'de0053be0eef471d35478a1c10a4408250a44dbf', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '72ea5b8bda38a8c08fff1763457dcf2377787c44', class: "combobox-arrow" }, h("svg", { key: 'c0f66766a7893978e142e63adec3863e792b6554', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'd6287e5dede972620a6f90632462dd7d495bf927', d: "M4 6l4 4 4-4" }))))), this.name && h("input", { key: 'fed8a8936750fafe7b58912954099da20a506907', 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 watchers() { return {
         "value": ["handleValueChange"],

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

@@ -58,7 +58,7 @@ const LeCurrentHeading$1 = /*@__PURE__*/ proxyCustomElement(class LeCurrentHeadi
         }
     }
     render() {
-        return (h(Host, { key: '684d2369883e7810ef0966f08f8ef835b8cf9343' }, 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 watchers() { return {
         "selector": ["onSelectorChange"]

package/dist/components/le-dropdown-base2.js

@@ -338,7 +338,7 @@ const LeDropdownBase = /*@__PURE__*/ proxyCustomElement(class LeDropdownBase ext
     }
     render() {
         const dropdownWidth = this.width || (this.triggerWidth ? `${this.triggerWidth}px` : undefined);
-        return (h(Host, { key: 'b8eb1155a22937ab148b5d3b91ec9ab688257dd9' }, h("le-popover", { key: '2dc509b3ef0f72b34d4e1d8d7556ded7569dc256', 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: '516aac3b9b267298e01dc38ab3f779015e3c1c37', name: "trigger", slot: "trigger" }), h("slot", { key: '38866292e03c304a2f7f4026bbc99972cd2b07c6', name: "header" }), h("div", { key: '9fa533a22f3235100150c24a4a95a51d9bad99a7', 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 watchers() { return {
         "options": ["handleOptionsChange"],

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

@@ -8,7 +8,7 @@ const LeHeaderPlaceholder$1 = /*@__PURE__*/ proxyCustomElement(class LeHeaderPla
         }
     }
     render() {
-        return (h(Host, { key: '7246b0391351a1b40e76b833b83f057a7a11d6eb', "aria-hidden": "true", style: {
+        return (h(Host, { key: '0b056eac512d668bc8c3aa7000bdc7363dace713', "aria-hidden": "true", style: {
                 display: 'block',
                 height: 'var(--le-header-height, 64px)',
             } }));

package/dist/components/le-header.js

@@ -243,7 +243,7 @@ const LeHeader$1 = /*@__PURE__*/ proxyCustomElement(class LeHeader extends HTMLE
             'is-hidden': !this.revealed,
             'is-shrunk': this.shrunk,
         });
-        return (h(Host, { key: '8226ce910c1f3538c9f753ae966555843e9de0ae', class: hostClass, onMouseEnter: () => {
+        return (h(Host, { key: 'd1a4ae64dff81139b1c35681698539fdf072ae66', class: hostClass, onMouseEnter: () => {
                 if (!this.expandOnHover)
                     return;
                 this.hoverActive = true;
@@ -253,7 +253,7 @@ const LeHeader$1 = /*@__PURE__*/ proxyCustomElement(class LeHeader extends HTMLE
                     return;
                 this.hoverActive = false;
                 this.scheduleUpdate(true);
-            } }, h("le-component", { key: '4ab9f55d577bbe626743d98ecceff43421297e04', component: "le-header" }, h("header", { key: '324780d62bce16b6b5031f99f60e77040b303536', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, h("div", { key: 'b85650426cf45c1e33e34472a44dc2153817cd19', class: "inner", part: "inner" }, h("div", { key: 'e5480cb4eeb609671b3a54e0e62078249024dd19', class: "row", part: "row" }, h("div", { key: '659abffd71c2316aa61bfd3c678faf8bd3b60e5c', class: "start", part: "start" }, h("le-slot", { key: '31e3c153875787983c4a0e40bd8cd7fcf1766972', name: "start", label: "Start", description: "Logo / back button / nav", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: '770f771ccb01d471a4f2042e90b18b4e8f9aaea8', name: "start" }))), h("div", { key: 'db5e4915c79b33fd839b91d2172d2ebd4ceb47fd', class: "title", part: "title" }, h("le-slot", { key: '038f08471fbfca1c923cd0f3e7985b9edfba1895', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, h("span", { key: 'fbb502918f0fd021ba8fd75ee9f36116fa0c77d2', class: "title-slot", part: "title" }, h("slot", { key: '99c46d12df0e52ac659af0fb2db0e7051cb2cc35', name: "title" })))), h("div", { key: 'c1b43c42fbe2858c3144dd4388da21a0fcf9d9dc', class: "end", part: "end" }, h("le-slot", { key: '13d1e92425997130378c80ac0eff7974a5ad5a97', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: 'ac1902fe3c990a358f6dbf64b7215eeb2bfd9cd4', name: "end" })))), h("div", { key: '07ede1a18c5400d68ea32cef965e7b2534db9d47', class: "secondary", part: "secondary" }, h("le-slot", { key: '4eede5a0616d82da0996878b41cea2000b1030e7', 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: 'c6b287cd00c3f5fc95931078307e5d0b007ec53b' }))))))));
+            } }, 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 watchers() { return {
         "revealOnScroll": ["onBehaviorPropsChange"],

package/dist/components/le-icon2.js

@@ -115,7 +115,7 @@ const LeIcon = /*@__PURE__*/ proxyCustomElement(class LeIcon extends HTMLElement
         return svgElements;
     }
     render() {
-        return (h("svg", { key: '0518b0d454e3f3f171413a8b7f03ea89f6f48c0b', 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 assetsDirs() { return ["assets/icons"]; }
     static get watchers() { return {

package/dist/components/le-multiselect.js

@@ -292,13 +292,13 @@ const LeMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class LeMultiselect ext
     render() {
         const hasSelections = this.selectedOptions.length > 0;
         const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;
-        return (h("le-component", { key: '3f2d29e466307145bb01d7dd8a5be7674ea72ec8', component: "le-multiselect" }, h("le-dropdown-base", { key: 'c551daf51424318394d883c86e1f6ec7499c4703', 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: '863e1bc369781fe3ddc0a8bad09e4e651536498e', 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: '8fa1afd6495d8054461a30c49ed10eda70d5c219', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: 'acca7ff73f0e5f50ba8d257c333a15f9de4b7569', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: '388610e0baa60ad75956ebfc2b2f1edb7cebbb94', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'cc6c0b17360942fd86b43d104f1fa822e67f42a2', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '81e7fe95233d439226ab262448e5157b20b8a2d5', class: "multiselect-arrow" }, h("svg", { key: 'a748a8c3647e45ab181659bc5061fe181ed50e63', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '319e8960ae71e16cd6aba1fdfae025e7ca7c03d7', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: '57ca976f1ce817a703d401af4fa19ea4fb73c8cc', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: '62b7c46edb93df22d6bce871dc948418ac388fb5', 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: 'd213d97108df7093de3fa979f4a082797584e24b', 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 watchers() { return {
         "value": ["handleValueChange"],

package/dist/components/le-navigation.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$8 } from './le-dropdown-base2.js';
 import { d as defineCustomElement$7 } from './le-icon2.js';
 import { d as defineCustomElement$6 } from './le-popover2.js';
 
-const leNavigationCss = () => `:host{display:block;--le-nav-radius:var(--le-radius-md);--le-nav-gap:var(--le-spacing-2);--le-nav-item-padding-x:var(--le-spacing-1);--le-nav-item-padding-y:var(--le-spacing-2);--le-nav-item-gap:var(--le-spacing-2);--le-nav-link-padding-x:var(--le-spacing-2);--le-nav-link-padding-y:var(--le-spacing-1);--le-nav-link-gap:var(--le-spacing-1);--le-nav-color:var(--le-color-text-primary);--le-nav-muted:var(--le-color-text-secondary);--le-nav-hover-bg:var(--le-color-gray-100);--le-nav-selected-bg:var(--le-color-primary);--le-nav-selected-color:var(--le-color-primary-contrast)}:host([orientation='horizontal']:not([wrap])){flex:1 1 0%;min-width:0}.nav-vertical{display:flex;flex-direction:column;gap:var(--le-nav-gap)}.nav-search{width:100%}.nav-search-input{--le-input-radius:var(--le-radius-md)}.nav-empty{padding:var(--le-spacing-2);color:var(--le-nav-muted);font-size:var(--le-font-size-sm)}.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--le-spacing-1)}.nav-row{display:flex;align-items:stretch;gap:var(--le-spacing-1);border-radius:var(--le-nav-radius)}.nav-row:hover{background:var(--le-nav-hover-bg)}.nav-toggle,.nav-toggle-spacer{box-sizing:border-box;width:var(--le-spacing-4);min-width:var(--le-spacing-4);display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--le-nav-radius);color:inherit}.nav-toggle{background:transparent;cursor:pointer;opacity:0.4}.nav-toggle:hover:not(:disabled){opacity:1}.nav-toggle:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px;opacity:1}.nav-chevron{display:inline-block;transition:transform var(--le-transition-fast)}.nav-chevron svg{display:block;width:var(--le-spacing-4);height:var(--le-spacing-4)}.nav-node>div>button>.nav-chevron{transform:rotate(-90deg)}.nav-node.open>div>button>.nav-chevron{transform:rotate(0deg)}.nav-item{flex:1;display:inline-flex;align-items:center;gap:var(--le-nav-item-gap);padding:var(--le-nav-item-padding-y) var(--le-nav-item-padding-x) var(--le-nav-item-padding-y) 0;border-radius:var(--le-nav-radius);border:1px solid transparent;background:transparent;text-decoration:none;color:var(--le-nav-color);font-family:var(--le-font-family-base);font-size:var(--le-font-size-md);line-height:var(--le-line-height-tight);cursor:pointer}.nav-item:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.nav-node.selected>.nav-row{background:var(--le-nav-selected-bg);color:var(--le-nav-selected-color)}.nav-node.selected>.nav-row>.nav-item{color:inherit}.nav-node.disabled>.nav-row>.nav-item{opacity:0.5;cursor:not-allowed}.nav-text{display:flex;flex-direction:column;min-width:0}.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-description{color:color-mix(in srgb, var(--le-nav-muted) 90%, transparent);font-size:var(--le-font-size-sm);line-height:var(--le-line-height-tight)}.nav-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.nav-icon-end{margin-left:auto}.nav-children{margin-top:var(--le-spacing-1)}.nav-horizontal-wrapper{display:flex;align-items:center;gap:var(--le-spacing-2)}.nav-bar{flex:1 1 0%;min-width:0;--le-bar-gap:var(--le-spacing-2)}.nav-bar.align-end{--le-bar-justify:flex-end}.nav-bar.align-center{--le-bar-justify:center}.nav-bar.align-space-between{--le-bar-justify:space-between}.h-item{display:flex;align-items:center}.h-link{display:inline-flex;align-items:center;gap:var(--le-nav-link-gap);padding:var(--le-nav-link-padding-y) var(--le-nav-link-padding-x);border-radius:var(--le-nav-radius);border:1px solid transparent;background:transparent;text-decoration:none;color:var(--le-nav-color);font-family:var(--le-font-family-base);font-size:var(--le-font-size-md);cursor:pointer}.h-link:hover{background:var(--le-nav-hover-bg)}.h-link:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.h-link.disabled,.h-trigger.disabled{opacity:0.5;pointer-events:none}.h-link.selected,.h-trigger.selected{background:var(--le-nav-selected-bg);color:var(--le-nav-selected-color)}.h-label{white-space:nowrap}.h-trigger{display:inline-flex;align-items:center;gap:var(--le-spacing-1);border-radius:var(--le-nav-radius)}.h-submenu-toggle{width:var(--le-spacing-3);height:var(--le-spacing-3);display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--le-nav-radius);background:transparent;color:currentColor;cursor:pointer}.h-submenu-toggle:hover{background:var(--le-nav-hover-bg)}.overflow-trigger{display:inline-flex;align-items:center;justify-content:center;gap:var(--le-spacing-2);padding:var(--le-spacing-2) var(--le-spacing-3);border-radius:var(--le-nav-radius);border:1px solid transparent;background:transparent;color:var(--le-nav-color);cursor:pointer;font-family:var(--le-font-family-base);font-size:var(--le-font-size-md)}.overflow-trigger:hover{background:var(--le-nav-hover-bg)}.overflow-trigger:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.nav-overflow-trigger{display:flex;align-items:center}le-popover::part(content){padding:var(--le-spacing-1)}`;
+const leNavigationCss = () => `:host{display:block;--le-nav-radius:var(--le-radius-md);--le-nav-gap:var(--le-spacing-2);--le-nav-item-padding-x:var(--le-spacing-1);--le-nav-item-padding-y:var(--le-spacing-2);--le-nav-item-gap:var(--le-spacing-2);--le-nav-link-padding-x:var(--le-spacing-2);--le-nav-link-padding-y:var(--le-spacing-1);--le-nav-link-gap:var(--le-spacing-1);--le-nav-color:var(--le-color-text-primary);--le-nav-muted:var(--le-color-text-secondary);--le-nav-hover-bg:var(--le-color-gray-100);--le-nav-selected-bg:var(--le-color-primary);--le-nav-selected-color:var(--le-color-primary-contrast)}:host([orientation='horizontal']:not([wrap])){flex:1 1 0%;min-width:0}.nav-vertical{display:flex;flex-direction:column;gap:var(--le-nav-gap)}.nav-search{width:100%}.nav-search-input{--le-input-radius:var(--le-radius-md)}.nav-empty{padding:var(--le-spacing-2);color:var(--le-nav-muted);font-size:var(--le-font-size-sm)}.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--le-spacing-1)}.nav-row{display:flex;align-items:stretch;gap:var(--le-spacing-1);border-radius:var(--le-nav-radius)}.nav-row:hover{background:var(--le-nav-hover-bg)}.nav-toggle,.nav-toggle-spacer{box-sizing:border-box;width:var(--le-spacing-4);min-width:var(--le-spacing-4);display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--le-nav-radius);color:inherit}.nav-toggle{background:transparent;cursor:pointer;opacity:0.4}.nav-toggle:hover:not(:disabled){opacity:1}.nav-toggle:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px;opacity:1}.nav-chevron{display:inline-block;transition:transform var(--le-transition-fast)}.nav-chevron svg{display:block;width:var(--le-spacing-4);height:var(--le-spacing-4)}.nav-node>div>button>.nav-chevron{transform:rotate(-90deg)}.nav-node.open>div>button>.nav-chevron{transform:rotate(0deg)}.nav-item{flex:1;display:inline-flex;align-items:center;gap:var(--le-nav-item-gap);padding:var(--le-nav-item-padding-y) var(--le-nav-item-padding-x) var(--le-nav-item-padding-y) 0;border-radius:var(--le-nav-radius);border:1px solid transparent;background:transparent;text-decoration:none;color:var(--le-nav-color);font-family:var(--le-font-family-base);font-size:var(--le-font-size-md);line-height:var(--le-line-height-tight);cursor:pointer}.nav-item:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.nav-node.selected>.nav-row{background:var(--le-nav-selected-bg);color:var(--le-nav-selected-color)}.nav-node.selected>.nav-row>.nav-item{color:inherit}.nav-node.disabled>.nav-row>.nav-item{opacity:0.5;cursor:not-allowed}.nav-text{display:flex;flex-direction:column;min-width:0}.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-description{color:color-mix(in srgb, var(--le-nav-muted) 90%, transparent);font-size:var(--le-font-size-sm);line-height:var(--le-line-height-tight)}.nav-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.nav-icon-end{margin-left:auto}.nav-children{margin-top:var(--le-spacing-1)}.nav-horizontal-wrapper{display:flex;align-items:center;gap:var(--le-nav-gap)}.nav-bar{flex:1 1 0%;min-width:0;--le-bar-gap:var(--le-nav-gap)}.nav-bar.align-end{--le-bar-justify:flex-end}.nav-bar.align-center{--le-bar-justify:center}.nav-bar.align-space-between{--le-bar-justify:space-between}.nav-bar.overflow-more.has-overflow,.nav-bar.overflow-hamburger.has-overflow{margin-inline-end:calc((var(--le-nav-gap) + (var(--le-nav-link-padding-x) * 2)) * -1)}.h-item{display:flex;align-items:center}.h-link{display:inline-flex;align-items:center;gap:var(--le-nav-link-gap);padding:var(--le-nav-link-padding-y) var(--le-nav-link-padding-x);border-radius:var(--le-nav-radius);border:1px solid transparent;background:transparent;text-decoration:none;color:var(--le-nav-color);font-family:var(--le-font-family-base);font-size:var(--le-font-size-md);cursor:pointer}.h-link:hover{background:var(--le-nav-hover-bg)}.h-link:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.h-link.disabled,.h-trigger.disabled{opacity:0.5;pointer-events:none}.h-link.selected,.h-trigger.selected{background:var(--le-nav-selected-bg);color:var(--le-nav-selected-color)}.h-label{white-space:nowrap}.h-trigger{display:inline-flex;align-items:center;gap:var(--le-spacing-1);border-radius:var(--le-nav-radius)}.h-submenu-toggle{width:var(--le-spacing-3);height:var(--le-spacing-3);display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--le-nav-radius);background:transparent;color:currentColor;cursor:pointer}.h-submenu-toggle:hover{background:var(--le-nav-hover-bg)}.overflow-trigger{display:inline-flex;align-items:center;justify-content:center;gap:var(--le-nav-link-gap);padding:var(--le-nav-link-padding-y) var(--le-nav-link-padding-x);border-radius:var(--le-nav-radius);border:1px solid transparent;background:transparent;color:var(--le-nav-color);cursor:pointer;font-family:var(--le-font-family-base);font-size:var(--le-font-size-md)}.overflow-trigger:hover{background:var(--le-nav-hover-bg)}.overflow-trigger:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.nav-overflow-trigger{display:flex;align-items:center}le-popover::part(content){padding:var(--le-spacing-1)}`;
 
 const LeNavigation$1 = /*@__PURE__*/ proxyCustomElement(class LeNavigation extends HTMLElement {
     constructor(registerHost) {