le-kit 0.3.5 → 0.5.0

package/dist/cjs/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var utils = require('./utils-BYsLPHN1.js');
-var index = require('./index-BPF04Jvb.js');
+var utils = require('./utils-Dxx9WhWK.js');
+var index = require('./index-BzadfLTc.js');
 
 /**
  * Programmatic API for le-popup component

package/dist/cjs/le-bar_16.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BPF04Jvb.js');
-var utils = require('./utils-BYsLPHN1.js');
+var index = require('./index-BzadfLTc.js');
+var utils = require('./utils-Dxx9WhWK.js');
 var index$1 = require('./index.cjs.js');
 
 const leBarCss = () => `:host{display:block;--le-bar-gap:var(--le-spacing-2);--le-bar-padding:var(--le-spacing-2);--le-bar-min-height:2.5rem;--le-bar-background:transparent;--le-bar-border-color:var(--le-color-border);--le-bar-border-radius:var(--le-radius-md);--le-bar-button-size:2rem;--le-bar-button-color:var(--le-color-text-primary);--le-bar-button-hover-bg:var(--le-color-gray-100);--le-bar-button-border-radius:var(--le-radius-sm);--le-bar-arrow-size:1.5rem;--le-bar-popover-min-width:200px;--le-bar-popover-gap:var(--le-spacing-1)}.bar-container{display:flex;align-items:center;gap:var(--le-bar-gap);min-height:var(--le-bar-min-height);background:var(--le-bar-background);border-radius:var(--le-bar-border-radius);padding:var(--le-bar-padding)}.bar-container.align-start{justify-content:flex-start}.bar-container.align-end .bar-items{justify-content:flex-end}.bar-container.align-center .bar-items{justify-content:center}.bar-container.align-stretch .bar-items{justify-content:space-evenly}.bar-items{display:flex;flex-wrap:wrap;align-items:center;gap:var(--le-bar-gap);overflow:hidden;min-width:0;flex:1 1 0%;position:relative}.bar-items[style*="height"]{overflow:hidden}.bar-items.is-scrollable{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.bar-items.is-scrollable::-webkit-scrollbar{display:none}.bar-items.is-scrollable ::slotted(*){scroll-snap-align:start;flex-shrink:0}.bar-items.is-wrapping{flex-wrap:wrap;overflow:visible;height:auto !important}.bar-controls{display:flex;align-items:center;gap:var(--le-spacing-1);flex-shrink:0}.bar-controls-start{order:-1}.bar-controls-end{order:1}.bar-more-button,.bar-hamburger-button,.bar-all-menu-button{display:inline-flex;align-items:center;justify-content:center;width:var(--le-bar-button-size);height:var(--le-bar-button-size);padding:0;border:none;background:transparent;color:var(--le-bar-button-color);border-radius:var(--le-bar-button-border-radius);cursor:pointer;transition:background-color 0.15s ease}.bar-more-button:hover,.bar-hamburger-button:hover,.bar-all-menu-button:hover{background:var(--le-bar-button-hover-bg)}.bar-more-button:focus-visible,.bar-hamburger-button:focus-visible,.bar-all-menu-button:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.bar-arrow{display:inline-flex;align-items:center;justify-content:center;width:var(--le-bar-arrow-size);height:var(--le-bar-arrow-size);padding:0;border:none;background:transparent;color:var(--le-bar-button-color);border-radius:var(--le-bar-button-border-radius);cursor:pointer;transition:background-color 0.15s ease, opacity 0.15s ease}.bar-arrow:hover:not(:disabled){background:var(--le-bar-button-hover-bg)}.bar-arrow:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.bar-arrow:disabled,.bar-arrow.disabled{opacity:0.3;cursor:not-allowed}.arrow-icon-start{transform:rotate(90deg)}.arrow-icon-end{transform:rotate(-90deg)}.bar-overflow-trigger,.bar-all-menu-trigger{display:inline-flex}.bar-popover-content{display:flex;flex-direction:column;gap:var(--le-bar-popover-gap);min-width:var(--le-bar-popover-min-width);padding:var(--le-spacing-2)}.bar-popover-item{cursor:pointer}.bar-popover-item:hover{background:var(--le-bar-button-hover-bg);border-radius:var(--le-bar-button-border-radius)}:host(.hamburger-active) .bar-items{visibility:hidden;pointer-events:none}`;
@@ -460,7 +460,7 @@ LeBar.style = leBarCss();
 const leButtonCss = () => `:host{display:inline-block;--le-button-border-radius:var(--le-radius-md);--le-button-padding-x:var(--le-spacing-3);--le-button-padding-y:var(--le-spacing-1);--le-button-padding:var(--le-button-padding-y) var(--le-button-padding-x);--le-button-small-padding:0.25rem;--le-button-font-size:var(--le-font-size-md);--le-button-font-weight:var(--le-font-weight-medium);--le-button-transition:var(--le-transition-fast);--le-transition-easing:ease-in-out;--le-button-icon-aspect-ratio:1;--le-button-color:var(--le-color-primary-contrast);--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-bg-system:var(--le-color-black);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.le-button-container{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-button-padding);border:1px solid var(--_btn-border-color);border-radius:var(--le-button-border-radius);background:var(--_btn-bg);color:var(--_btn-color);font-family:var(--le-font-family-base);font-size:var(--le-button-font-size);font-weight:var(--le-button-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-button-transition) var(--le-transition-easing),
     border-color var(--le-button-transition) var(--le-transition-easing),
     box-shadow var(--le-button-transition) var(--le-transition-easing),
-    transform var(--le-button-transition) var(--le-transition-easing)}.le-button-container:hover:not(:disabled){background:var(--_btn-bg-hover);border-color:var(--_btn-bg-hover)}.le-button-container:active:not(:disabled){box-shadow:inset 0 0 5px color-mix(in srgb, var(--_btn-bg) 50%, transparent)}.le-button-container:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-button-container:disabled{opacity:0.5;cursor:not-allowed}.le-button-label{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-2)}:host(.color-primary){--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host(.color-secondary){--_btn-bg:var(--le-color-secondary);--_btn-bg-hover:var(--le-color-secondary-dark);--_btn-color:var(--le-color-secondary-contrast);--_btn-border-color:var(--le-color-secondary)}:host(.color-success){--_btn-bg:var(--le-color-success);--_btn-bg-hover:var(--le-color-success-dark);--_btn-color:var(--le-color-success-contrast);--_btn-border-color:var(--le-color-success)}:host(.color-warning){--_btn-bg:var(--le-color-warning);--_btn-bg-hover:var(--le-color-warning-dark);--_btn-color:var(--le-color-warning-contrast);--_btn-border-color:var(--le-color-warning)}:host(.color-danger){--_btn-bg:var(--le-color-danger);--_btn-bg-hover:var(--le-color-danger-dark);--_btn-color:var(--le-color-danger-contrast);--_btn-border-color:var(--le-color-danger)}:host(.color-info){--_btn-bg:var(--le-color-info);--_btn-bg-hover:var(--le-color-info-dark);--_btn-color:var(--le-color-info-contrast);--_btn-border-color:var(--le-color-info)}:host(.variant-solid) .le-button-container{box-shadow:var(--le-shadow-sm)}:host(.variant-solid) .le-button-container:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host(.variant-outlined) .le-button-container{background:transparent;color:var(--_btn-bg);border-color:color-mix(in srgb, var(--_btn-border-color) 33%, transparent)}:host(.variant-outlined) .le-button-container:hover:not(:disabled){border-color:var(--_btn-border-color)}:host(.variant-clear) .le-button-container{background:transparent;color:var(--_btn-bg);border-color:transparent}:host(.variant-clear) .le-button-container:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host(.variant-system) .le-button-container{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host(.size-small){--le-button-padding-x:0.4rem;--le-button-padding-y:0.3rem;--le-button-padding-top:0.35rem;--le-button-font-size:var(--le-button-small-font-size, var(--le-font-size-xs))}:host(.size-large){--le-button-padding-x:0.9rem;--le-button-padding-y:0.6rem;--le-button-font-size:var(--le-font-size-xl)}:host(.full-width){display:block;width:100%}:host(.selected) .le-button-container{box-shadow:inset 0 0 4px var(--le-color-shadow)}:host(.variant-outlined.selected) .le-button-container,:host(.variant-clear.selected) .le-button-container{background:var(--_btn-bg);color:var(--_btn-color)}:host(.icon-only) .le-button-container{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host(.icon-only.size-small) .le-button-container{padding:var(--le-button-small-padding, 0.25rem)}:host(.icon-only.size-large) .le-button-container{padding:0.75rem}:host(.icon-only) .content{display:none}.content{display:inline}.content:empty{display:none}.icon-start,.icon-only,.icon-end{display:flex;align-items:center;justify-content:center}.icon-start:empty,.icon-only:empty,.icon-end:empty{display:none}::slotted([slot="icon-start"]),::slotted([slot="icon-only"]),::slotted([slot="icon-end"]){display:flex;align-items:center;justify-content:center;width:1.125em;height:1.125em}.le-button-align-start{justify-content:flex-start}.le-button-align-center{justify-content:center}.le-button-align-space-between{justify-content:space-between}.le-button-align-end{justify-content:flex-end}`;
+    transform var(--le-button-transition) var(--le-transition-easing)}.le-button-container:hover:not(:disabled){background:var(--_btn-bg-hover);border-color:var(--_btn-bg-hover)}.le-button-container:active:not(:disabled){box-shadow:inset 0 0 5px color-mix(in srgb, var(--_btn-bg) 50%, transparent)}.le-button-container:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-button-container:disabled{opacity:0.5;cursor:not-allowed}.le-button-label{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-2)}:host(.color-primary){--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host(.color-secondary){--_btn-bg:var(--le-color-secondary);--_btn-bg-hover:var(--le-color-secondary-dark);--_btn-color:var(--le-color-secondary-contrast);--_btn-border-color:var(--le-color-secondary)}:host(.color-success){--_btn-bg:var(--le-color-success);--_btn-bg-hover:var(--le-color-success-dark);--_btn-color:var(--le-color-success-contrast);--_btn-border-color:var(--le-color-success)}:host(.color-warning){--_btn-bg:var(--le-color-warning);--_btn-bg-hover:var(--le-color-warning-dark);--_btn-color:var(--le-color-warning-contrast);--_btn-border-color:var(--le-color-warning)}:host(.color-danger){--_btn-bg:var(--le-color-danger);--_btn-bg-hover:var(--le-color-danger-dark);--_btn-color:var(--le-color-danger-contrast);--_btn-border-color:var(--le-color-danger)}:host(.color-info){--_btn-bg:var(--le-color-info);--_btn-bg-hover:var(--le-color-info-dark);--_btn-color:var(--le-color-info-contrast);--_btn-border-color:var(--le-color-info)}:host(.variant-solid) .le-button-container{box-shadow:var(--le-shadow-sm)}:host(.variant-solid) .le-button-container:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host(.variant-outlined) .le-button-container{background:transparent;color:var(--_btn-bg);border-color:color-mix(in srgb, var(--_btn-border-color) 33%, transparent)}:host(.variant-outlined) .le-button-container:hover:not(:disabled){border-color:var(--_btn-border-color)}:host(.variant-clear) .le-button-container{background:transparent;color:var(--_btn-bg);border-color:transparent}:host(.variant-clear) .le-button-container:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host(.variant-system) .le-button-container{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host(.size-small){--le-button-padding-x:0.4rem;--le-button-padding-y:0.3rem;--le-button-padding-top:0.35rem;--le-button-font-size:var(--le-button-small-font-size, var(--le-font-size-xs))}:host(.size-large){--le-button-padding-x:0.9rem;--le-button-padding-y:0.6rem;--le-button-font-size:var(--le-font-size-xl)}:host(.full-width){display:block;width:100%}:host(.selected) .le-button-container{box-shadow:inset 0 0 4px var(--le-color-shadow)}:host(.variant-outlined.selected) .le-button-container,:host(.variant-clear.selected) .le-button-container{background:var(--_btn-bg);color:var(--_btn-color)}:host(.icon-only) .le-button-container{padding:var(--le-button-icon-only-padding, 0.5rem);padding-bottom:var(--le-button-icon-only-padding, 0.6rem);aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host(.icon-only.size-small) .le-button-container{padding:var(--le-button-small-padding, 0.25rem)}:host(.icon-only.size-large) .le-button-container{padding:0.75rem}:host(.icon-only) .content{display:none}.content{display:inline}.content:empty{display:none}.icon-start,.icon-only,.icon-end{display:flex;align-items:center;justify-content:center}.icon-start:empty,.icon-only:empty,.icon-end:empty{display:none}::slotted([slot="icon-start"]),::slotted([slot="icon-only"]),::slotted([slot="icon-end"]){display:flex;align-items:center;justify-content:center;width:1.125em;height:1.125em}.le-button-align-start{justify-content:flex-start}.le-button-align-center{justify-content:center}.le-button-align-space-between{justify-content:space-between}.le-button-align-end{justify-content:flex-end}`;
 
 const LeButton = class {
     constructor(hostRef) {
@@ -556,7 +556,7 @@ const LeButton = class {
         const attrs = this.href
             ? { href: this.href, target: this.target, role: 'button' }
             : { type: this.type, disabled: this.disabled };
-        return (index.h(index.Host, { key: '44fc577066f362e17d74b9a426caf98c5c146203', class: classes }, index.h("le-component", { key: '7fcb11591ecaf0dc69510a6e5fa1a481dc822bb1', component: "le-button" }, index.h(TagType, { key: '9065b7f4df2dffa763f0e2c8ad64fda4af80d4a6', class: utils.classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (index.h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (index.h(index.Fragment, null, index.h("span", { class: "le-button-label" }, this.iconStart && (index.h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), index.h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, index.h("slot", null))), this.iconEnd && (index.h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
+        return (index.h(index.Host, { key: 'a42aef03b5faf34f47b50dff799316a6815babd5', class: classes }, index.h("le-component", { key: '86ef8acf04d43e829b83d3e225f210acefc99515', component: "le-button" }, index.h(TagType, { key: '44145a5244577aab167c103501b788f0088799e3', class: utils.classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (index.h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (index.h(index.Fragment, null, index.h("span", { class: "le-button-label" }, this.iconStart && (index.h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), index.h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, index.h("slot", null))), this.iconEnd && (index.h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
     }
 };
 LeButton.style = leButtonCss();
@@ -610,7 +610,7 @@ const LeCheckbox = class {
         });
     };
     render() {
-        return (index.h("le-component", { key: '31d975847b6d3bd137a6436d5f91f0af2c035576', component: "le-checkbox", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: '64d079beaf930bf4ebb244cc6511c1ed048b4699', class: "le-checkbox-wrapper" }, index.h("label", { key: '4ba352ae7cf709afd25d1ff5cc93fe87ff305920', class: "le-checkbox-label" }, index.h("span", { key: 'ee33b972a07d2a46f3beff8ba19a3902891f21d1', class: "le-checkbox-input" }, index.h("input", { key: '74825406b4b16e4fc0d351ec8266c2a14776fc3d', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), index.h("span", { key: 'c6badbadb976ddaeeade6b75a6ac0f547c95cffb', class: "le-checkbox-text" }, index.h("le-slot", { key: '6cf2e6c835838db1a0a9ed8398b9b3e638ea640b', name: "", type: "text", tag: "span" }, index.h("slot", { key: 'a587324c7e8e91a1c3ab9bafad7d0030510e5272' })))), index.h("div", { key: '0a8aff276f51027e25b9367d6e50b2eefc1a9148', class: "le-checkbox-description" }, index.h("le-slot", { key: '33b411d6b69cba44d3821b4bb6ab3a5c72e4e517', name: "description", type: "text", tag: "div", label: "Description" }, index.h("slot", { key: '266af814c2a16aa1cd3a51db8dabb1bf952cf7a7', name: "description" }))))));
+        return (index.h("le-component", { key: 'cb04cc6a990ee321dd7e8fca2f0bf56c76a865fa', component: "le-checkbox", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: '1b8737eb0d572ba5fdf8c2cfc5ced4af5ef30997', class: "le-checkbox-wrapper" }, index.h("label", { key: '1d26d68565ade32489f2fade8120c7b8ad75b251', class: "le-checkbox-label" }, index.h("span", { key: '7e6b5e610c9f16c36b93c57284891366e6b3b756', class: "le-checkbox-input" }, index.h("input", { key: 'a12a374aa69526d802f36f00b0ae4bcd4ed27bc3', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), index.h("span", { key: 'e4ea1f85102c99751f9853b8e23fbd40ebd24780', class: "le-checkbox-text" }, index.h("le-slot", { key: 'cdda2111e4dfa6d7270280bac305255980842d48', name: "", type: "text", tag: "span" }, index.h("slot", { key: '32f57155d7a56f48e5780e37ea1ccac308db6848' })))), index.h("div", { key: '37d54d8c87b90987653f66a319958849893e7d91', class: "le-checkbox-description" }, index.h("le-slot", { key: 'fceedc24ef6a3561120456e9b387801a40c5919c', name: "description", type: "text", tag: "div", label: "Description" }, index.h("slot", { key: 'f1f87b7192565831a2f20428e8e2c0a974166dfd', name: "description" }))))));
     }
 };
 LeCheckbox.style = leCheckboxCss();
@@ -664,7 +664,7 @@ const LeCollapse = class {
         this.el.toggleAttribute('data-open', nextOpen);
     }
     render() {
-        return (index.h(index.Host, { key: '19e96b22f47116cb9f5dc6ca9fc4ba8de2cb4299', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, index.h("le-component", { key: '0c16c094b155580849f59553c3e2ecb359f99816', component: "le-collapse" }, index.h("div", { key: '28448db4a519e558ac9c40dccddf123a462899b0', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, index.h("slot", { key: 'd14269819d746b985cf3b87052c9efdea08271d1' })))));
+        return (index.h(index.Host, { key: 'e0882ec40ed132dbd6eeaa43da4aff03b6e45352', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, index.h("le-component", { key: '55c98e5382ddd6b5ef8a8f506f9a2901fc0b48ce', component: "le-collapse" }, index.h("div", { key: '0bcfa5aada8a7a6f9c86011e6a3dfa5bbb5e08c4', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, index.h("slot", { key: '7b762e372802512a287ae98d4aeecdb3160bb54e' })))));
     }
     static get watchers() { return {
         "open": ["onOpenChange"],
@@ -970,7 +970,7 @@ const LeCurrentHeading = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '684d2369883e7810ef0966f08f8ef835b8cf9343' }, this.activeText ? (index.h("span", { class: "title", part: "title" }, this.activeText)) : (index.h("slot", null))));
+        return (index.h(index.Host, { key: 'c8d94a695a402039000210914b6780264a034a89' }, this.activeText ? (index.h("span", { class: "title", part: "title" }, this.activeText)) : (index.h("slot", null))));
     }
     static get watchers() { return {
         "selector": ["onSelectorChange"]
@@ -1310,7 +1310,7 @@ const LeDropdownBase = class {
     }
     render() {
         const dropdownWidth = this.width || (this.triggerWidth ? `${this.triggerWidth}px` : undefined);
-        return (index.h(index.Host, { key: 'b8eb1155a22937ab148b5d3b91ec9ab688257dd9' }, index.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 }, index.h("slot", { key: '516aac3b9b267298e01dc38ab3f779015e3c1c37', name: "trigger", slot: "trigger" }), index.h("slot", { key: '38866292e03c304a2f7f4026bbc99972cd2b07c6', name: "header" }), index.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 (index.h(index.Host, { key: '90bca5763b9110f8e5cad70870110cab1efeeec6' }, index.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 }, index.h("slot", { key: '57e540660ee269de594209186d6fbe066b9c8fc1', name: "trigger", slot: "trigger" }), index.h("slot", { key: 'e58a76a0097f938873f5462c844ee9f1a5eece72', name: "header" }), index.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"],
@@ -1554,7 +1554,7 @@ const LeHeader = class {
             'is-hidden': !this.revealed,
             'is-shrunk': this.shrunk,
         });
-        return (index.h(index.Host, { key: '8226ce910c1f3538c9f753ae966555843e9de0ae', class: hostClass, onMouseEnter: () => {
+        return (index.h(index.Host, { key: 'd1a4ae64dff81139b1c35681698539fdf072ae66', class: hostClass, onMouseEnter: () => {
                 if (!this.expandOnHover)
                     return;
                 this.hoverActive = true;
@@ -1564,7 +1564,7 @@ const LeHeader = class {
                     return;
                 this.hoverActive = false;
                 this.scheduleUpdate(true);
-            } }, index.h("le-component", { key: '4ab9f55d577bbe626743d98ecceff43421297e04', component: "le-header" }, index.h("header", { key: '324780d62bce16b6b5031f99f60e77040b303536', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, index.h("div", { key: 'b85650426cf45c1e33e34472a44dc2153817cd19', class: "inner", part: "inner" }, index.h("div", { key: 'e5480cb4eeb609671b3a54e0e62078249024dd19', class: "row", part: "row" }, index.h("div", { key: '659abffd71c2316aa61bfd3c678faf8bd3b60e5c', class: "start", part: "start" }, index.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" }, index.h("slot", { key: '770f771ccb01d471a4f2042e90b18b4e8f9aaea8', name: "start" }))), index.h("div", { key: 'db5e4915c79b33fd839b91d2172d2ebd4ceb47fd', class: "title", part: "title" }, index.h("le-slot", { key: '038f08471fbfca1c923cd0f3e7985b9edfba1895', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, index.h("span", { key: 'fbb502918f0fd021ba8fd75ee9f36116fa0c77d2', class: "title-slot", part: "title" }, index.h("slot", { key: '99c46d12df0e52ac659af0fb2db0e7051cb2cc35', name: "title" })))), index.h("div", { key: 'c1b43c42fbe2858c3144dd4388da21a0fcf9d9dc', class: "end", part: "end" }, index.h("le-slot", { key: '13d1e92425997130378c80ac0eff7974a5ad5a97', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, index.h("slot", { key: 'ac1902fe3c990a358f6dbf64b7215eeb2bfd9cd4', name: "end" })))), index.h("div", { key: '07ede1a18c5400d68ea32cef965e7b2534db9d47', class: "secondary", part: "secondary" }, index.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" }, index.h("slot", { key: 'c6b287cd00c3f5fc95931078307e5d0b007ec53b' }))))))));
+            } }, index.h("le-component", { key: '305bc8b4aefaf2ef1dd7287422167cfd68d3e8c2', component: "le-header" }, index.h("header", { key: '1cf3b2ab01140e14870c1282e49e6eb3dbae5bf8', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, index.h("div", { key: 'b238e3762dd31228f3ab3627fbca2ff1a9c630fd', class: "inner", part: "inner" }, index.h("div", { key: 'f186fbecc9c9b6f6f08f45c272c292af9333450e', class: "row", part: "row" }, index.h("div", { key: 'e496055801a36f4cf7a045513df2bc917a573786', class: "start", part: "start" }, index.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" }, index.h("slot", { key: 'e7e2b7ad283ce089def47d1f11f78a8a1603face', name: "start" }))), index.h("div", { key: '145aaadb93972b9018f9303baee2d5b3c42db319', class: "title", part: "title" }, index.h("le-slot", { key: 'c488ef0d01da476a6351ae4b7dfb397950f9c3ce', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, index.h("span", { key: '78c21f46cbc81dc720e2f803cb3edc81ba5f76cf', class: "title-slot", part: "title" }, index.h("slot", { key: 'a47d5c8d4d0ae42b1cb4d7fab98022cbb380a27e', name: "title" })))), index.h("div", { key: '5fb7c5febcfb9b837f313caa65ea9b5e08b6f9cb', class: "end", part: "end" }, index.h("le-slot", { key: 'cc2ed75ea779a29e5c616daafec3ef90bbec3cfc', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, index.h("slot", { key: '135e8c2c0d7a7d9bef174f380d1f31d377cb043f', name: "end" })))), index.h("div", { key: 'b0d9e5fba045b7cfd5640e7ba700cb44d673f982', class: "secondary", part: "secondary" }, index.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" }, index.h("slot", { key: '1266dc5bb54bf22055acbfc23befb398c1ee5a31' }))))))));
     }
     static get watchers() { return {
         "revealOnScroll": ["onBehaviorPropsChange"],
@@ -1685,7 +1685,7 @@ const LeIcon = class {
         return svgElements;
     }
     render() {
-        return (index.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 (index.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 {
@@ -1694,7 +1694,7 @@ const LeIcon = class {
 };
 LeIcon.style = leIconCss();
 
-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 = class {
     constructor(hostRef) {
@@ -2694,12 +2694,12 @@ const LePopover = class {
             popoverStyles.minWidth = this.minWidth;
         if (this.maxWidth)
             popoverStyles.maxWidth = this.maxWidth;
-        return (index.h(index.Host, { key: '16aec5e624881b728716d00fc6827b5b9c4049b1', "trigger-full-width": this.triggerFullWidth }, index.h("div", { key: 'f4171fc444414c68d43b4a081b574fb6ccbc3dfe', class: utils.classnames('le-popover-trigger', {
+        return (index.h(index.Host, { key: '542d4ab391a9b176d110fe00c0dd61f2c46d73ef', "trigger-full-width": this.triggerFullWidth }, index.h("div", { key: '2248ab763d65e8a9150e62644452085f01c6a238', class: utils.classnames('le-popover-trigger', {
                 'le-popover-trigger-full-width': this.triggerFullWidth,
-            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, index.h("slot", { key: '039a6b55fc666443605178c6f86ecd0155bfab1f', name: "trigger" }, index.h("button", { key: 'f7140509d06b764d3da9086a895036bccb72b939', type: "button", class: "le-popover-default-trigger" }, index.h("span", { key: 'd618acd932b9489020373820a81bde4bc8ec01e6' }, "\u2295")))), index.h("div", { key: '678d09edfa103eecd3fe04b03933d8c4c7c7f847', id: this.uniqueId, class: "le-popover-content",
+            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, index.h("slot", { key: '9d9a5f05f4b9f1b11f1fcbb09d29f0c1e36a2cd6', name: "trigger" }, index.h("button", { key: 'ed573daefaffb7b1effb3c7891722aa40e4b606e', type: "button", class: "le-popover-default-trigger" }, index.h("span", { key: '61f00ea9761935224e1529adc3b102b85efd4f33' }, "\u2295")))), index.h("div", { key: 'bf447493c9c7dedb7f2ae7083c80a7a2d06aebe0', id: this.uniqueId, class: "le-popover-content",
             // Always use manual mode so nested popovers can be open together.
             // We implement click-outside and Escape handling ourselves.
-            popover: "manual", ref: el => (this.popoverEl = el), style: popoverStyles, "data-fallback-open": this.supportsPopoverApi ? undefined : String(this.open) }, (this.popoverTitle || this.showClose) && (index.h("div", { key: '98404abda58b31d5a405be271180924bc140cb45', class: "le-popover-header" }, this.popoverTitle && index.h("span", { key: '43b1559400087ea256485c4755bf2db61feff3de', class: "le-popover-title" }, this.popoverTitle), this.showClose && (index.h("button", { key: '99ef18a9f3b0268b0010bc3cb1637a9409a47888', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), index.h("div", { key: '1631159f18e60932960449f86da91cd00f859fac', class: "le-popover-body", part: "content" }, index.h("slot", { key: '87a4a321122749546b18d1706dd39911eab3b843' })))));
+            popover: "manual", ref: el => (this.popoverEl = el), style: popoverStyles, "data-fallback-open": this.supportsPopoverApi ? undefined : String(this.open) }, (this.popoverTitle || this.showClose) && (index.h("div", { key: '50fe79bb415b5de315aea7f766d57ae911a90343', class: "le-popover-header" }, this.popoverTitle && index.h("span", { key: 'd809f12c512197bd34ca215a05820b533f4d8734', class: "le-popover-title" }, this.popoverTitle), this.showClose && (index.h("button", { key: '2baee3e910ad65243a66eee2bba1c46d9fa628b4', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), index.h("div", { key: 'eacad60a20becde7f4f8b9fa01d195dd3f4c08f1', class: "le-popover-body", part: "content" }, index.h("slot", { key: 'f8aa2edd170ee039d5277a1b9ebc8ee077a1a9dc' })))));
     }
 };
 LePopover.style = lePopoverCss();
@@ -3018,7 +3018,7 @@ const LeScrollProgress = class {
     }
     render() {
         const width = `${this.progress * 100}%`;
-        return (index.h(index.Host, { key: '5aa4fc59f57bbb1de387debf27b4a39c073c85bf' }, index.h("div", { key: '7bce9ba58ce43340c6e1c56afe7cb50eb0117079', class: "track", part: "track", "aria-hidden": "true" }, index.h("div", { key: 'adc0c2fe77b49d9496c67d05ce2b1a38dcafef05', class: "fill", part: "fill", style: { width } }))));
+        return (index.h(index.Host, { key: '7a93dbfd8b14e5e581ff1480ad0e657f8f33bcf4' }, index.h("div", { key: 'fe4ff14af541e2a610d0b32605aaadb87ccea957', class: "track", part: "track", "aria-hidden": "true" }, index.h("div", { key: 'f46a09358bf77a7cff64deafa63702360a686c6a', class: "fill", part: "fill", style: { width } }))));
     }
     static get watchers() { return {
         "trackScrollProgress": ["onTrackChange"]
@@ -3193,13 +3193,13 @@ const LeSelect = class {
     }
     render() {
         const hasValue = this.selectedOption !== undefined;
-        return (index.h("le-component", { key: '1d67b699f3638ef75a15fecdbba80a531ea90681', component: "le-select" }, index.h("le-dropdown-base", { key: '9a52d99cdf1f0f0c1b9de6e10f5a694b580469ab', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, index.h("le-button", { key: '20c02507679ed44cca089e15801ac8f57cbe3938', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
+        return (index.h("le-component", { key: '670430a0ca8f310b7454c7dd93098b6b57f3bb82', component: "le-select" }, index.h("le-dropdown-base", { key: '58716c031b14513b67a1106b90b6174fa363c8b4', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, index.h("le-button", { key: 'b9cb202179c8fbc6dea9bc7af5ccf11deeb7c0f1', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
                 'select-trigger': true,
                 'has-value': hasValue,
                 'is-open': this.open,
             }, mode: "default", size: this.size, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, fullWidth: this.fullWidth, iconStart: hasValue && this.selectedOption?.iconStart
                 ? this.renderIcon(this.selectedOption.iconStart)
-                : null, iconEnd: index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M4 6l4 4 4-4" })) }, index.h("span", { key: '5eea76015ea63775315e5bf46e7b99c65cd5bc22', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (index.h("div", { key: 'c3cb84ae7d333ee84d40639fae5ebea7ba4eda36', class: "multiselect-search", slot: "header" }, index.h("le-string-input", { key: '1e887755cb1ec376f49d4bda1e86d5bb0709fbce', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && index.h("input", { key: '1cbcbe00822aeda2ccfecedef506f0de01c1b010', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+                : null, iconEnd: index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M4 6l4 4 4-4" })) }, index.h("span", { key: '592267788f6a02d6b501941863e91bcd68742233', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (index.h("div", { key: 'd4d2611e8b1f7fb243675cc11fa4982331b3c330', class: "multiselect-search", slot: "header" }, index.h("le-string-input", { key: 'f2a7e477eaf730173cfbca35b33d263eda860dc2', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && index.h("input", { key: 'bf9dc8141d02c272b0b81557dbc7c24a419ce558', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
     }
     static get watchers() { return {
         "value": ["handleValueChange"],
@@ -3543,7 +3543,7 @@ const LeSlot = class {
     render() {
         const displayLabel = this.label || this.name;
         // Always render the same structure, CSS handles visibility via .admin-mode class
-        return (index.h(index.Host, { key: '02bfcbc32ff96bcbdcb531430283b67a257a8333', class: {
+        return (index.h(index.Host, { key: '8a48f7865340d9a2e201a2f878b2f1c66c55d86c', class: {
                 'admin-mode': this.adminMode,
                 'invalid-html': !this.isValidHtml,
             }, role: this.adminMode ? 'region' : undefined, "aria-label": this.adminMode ? `Slot: ${displayLabel}` : undefined, "data-slot-name": this.name, "data-slot-type": this.type, "data-allowed": this.allowedComponents, "data-multiple": this.multiple, "data-required": this.required }, this.adminMode ? (index.h("div", { class: "le-slot-container" }, index.h("div", { class: utils.classnames('le-slot-header', {
@@ -3681,11 +3681,11 @@ const LeStringInput = class {
         ev.stopPropagation();
     };
     render() {
-        return (index.h("le-component", { key: 'd77913214c129e32a8707b984d2a32cc9daa27b0', component: "le-string-input", hostClass: utils.classnames({ disabled: this.disabled }) }, index.h("div", { key: '0059b3a7b915096469c0c9ad4f24f431cff96d30', class: "le-input-wrapper" }, this.label && (index.h("label", { key: '20cac379c5a5a3ff6554997fb8a1504b5fdbac02', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: '7a5460949f07c16e333fe4fd641e5d003aeddeaf', class: "le-input-container", part: "container" }, this.iconStart && index.h("span", { key: 'bd1996639dfafab0f77149f5a66debcbf9d229f7', class: "icon-start" }, this.iconStart), index.h("input", { key: 'e768f8af9b47ce493dd8d0aee01655ee48521f15', ref: el => {
+        return (index.h("le-component", { key: '385fe7607d573ab4cfe81315f74e650f8e57faa1', component: "le-string-input", hostClass: utils.classnames({ disabled: this.disabled }) }, index.h("div", { key: 'a36c5a32238eb6c9c574aeb3955343e042d89225', class: "le-input-wrapper" }, this.label && (index.h("label", { key: 'c1ff01932ada19ecea0cd2e2b477615d0c873ff0', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: '7c8909ed5e4e3404a2900a3f9beef8b0f331d62c', class: "le-input-container", part: "container" }, this.iconStart && index.h("span", { key: 'cf7e7355e22de3100bade2399ba63702731350e0', class: "icon-start" }, this.iconStart), index.h("input", { key: '6d71245d395f6cd2c55110ca902fc0374c74026b', ref: el => {
                 if (this.inputRef) {
                     this.inputRef(el);
                 }
-            }, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && index.h("span", { key: 'afe7c876edccbf0fa15f838ef3ccf8a0cbb51fca', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (index.h("div", { key: '9a4d068a1b3fffd9b5beae410382631ec0c4f737', class: "le-input-description" }, index.h("le-slot", { key: 'bc738beb28f7d7c6890f09a4a5b2a59cd328a625', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: '716953e93011f8b2d323f19b0c21a30997ea566e', name: "description" })))))));
+            }, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && index.h("span", { key: 'e086f9559b086212be3cd231b7c870cdb229a733', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (index.h("div", { key: '531ac78b43382166023a79475152345956188bcc', class: "le-input-description" }, index.h("le-slot", { key: '38700e86adc0c3bf049b0ad828d14993ddef7844', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: 'c2982e93304a872ec79446fe525eb5448e764401', name: "description" })))))));
     }
 };
 LeStringInput.style = leStringInputCss();

package/dist/cjs/le-box.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-BPF04Jvb.js');
-var utils = require('./utils-BYsLPHN1.js');
+var index = require('./index-BzadfLTc.js');
+var utils = require('./utils-Dxx9WhWK.js');
 
-const leBoxDefaultCss = () => `:host{display:block;box-sizing:border-box}:host([hidden]){display:none}.box{width:100%;height:100%;box-sizing:border-box}.content{width:100%;height:100%;box-sizing:border-box;background:var(--le-box-bg, transparent);border-radius:var(--le-box-border-radius, 0);padding:var(--le-box-padding, 0)}:host(.display-flex) .content{min-height:100%}`;
+const leBoxCss = () => `:host{display:block;box-sizing:border-box}:host([hidden]){display:none}.box{width:100%;height:100%;box-sizing:border-box}.content{width:100%;height:100%;box-sizing:border-box;background:var(--le-box-bg, transparent);border-radius:var(--le-box-border-radius, 0);padding:var(--le-box-padding, 0)}:host(.display-flex) .content{min-height:100%}`;
 
 const LeBox = class {
     constructor(hostRef) {
@@ -175,10 +175,10 @@ const LeBox = class {
             'display-flex': this.displayFlex,
             [`inner-${this.innerDirection}`]: this.displayFlex,
         });
-        return (index.h(index.Host, { key: '2d64b5a59e9eb12701ffd68ee2db293868b232a1', style: hostStyle, class: hostClass }, index.h("le-component", { key: '3b4c73ad636e9a884a212d6ca06ffbe55b3c438f', component: "le-box" }, index.h("div", { key: '00f1a922ba7d8c2c070d8254da9d4b9335e82bff', class: "box", part: "box" }, index.h("div", { key: 'bd974a033501e5b99d56892329017b95c95e753c', class: "content", part: "content", style: contentStyle }, index.h("le-slot", { key: '62ddce60dc17d6da11c033b2b94f1a3ce69f69da', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, index.h("slot", { key: '780fdfd1873ad3a629d1afbfcd0d5ca60cd4c679' })))))));
+        return (index.h(index.Host, { key: '01fad47e9fdff2931a8f0a26d540bb1a5da6a626', style: hostStyle, class: hostClass }, index.h("le-component", { key: '2d6b2588889925835e91ecbf6be811d21b47b015', component: "le-box" }, index.h("div", { key: 'd43fd71f7f9e1211bb2dfaaf577c6c9bef78b794', class: "box", part: "box" }, index.h("div", { key: '1b8b1680dfeb7e6f31ac627d55ae05796bef4f02', class: "content", part: "content", style: contentStyle }, index.h("le-slot", { key: '8af26e1c5047b9d5ab9f4ae0464c34bf3e931805', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, index.h("slot", { key: 'db95a80650aa9846eb27ccd75ee074a86a9ef47c' })))))));
     }
 };
-LeBox.style = leBoxDefaultCss();
+LeBox.style = leBoxCss();
 
 exports.le_box = LeBox;
 //# sourceMappingURL=le-box.entry.cjs.js.map

package/dist/cjs/le-card.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-BPF04Jvb.js');
-var utils = require('./utils-BYsLPHN1.js');
+var index = require('./index-BzadfLTc.js');
+var utils = require('./utils-Dxx9WhWK.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 = class {
     constructor(hostRef) {
@@ -20,10 +20,10 @@ const LeCard = class {
      */
     interactive = false;
     render() {
-        return (index.h("le-component", { key: '3b9b4c5f234bb3ac5d479a777c8069428baa4d8c', component: "le-card", hostClass: utils.classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, index.h("div", { key: '7cad2dc42768d03b8d9af5dc52a8acc0d79027c0', class: "card", part: "card" }, index.h("div", { key: 'd00e14de2a216afd1362605849c387e8fa7cc522', class: "card-header", part: "header" }, index.h("le-slot", { key: 'a09922eae71962506351a6b3ddc4b2253573fa6d', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, index.h("slot", { key: '624efcc1f6e06e2876fb00d0b4efa10fdfd9083b', name: "header" }))), index.h("div", { key: '9aba5630de5d4fe24dbc59b5607fbb530ebd41e8', class: "card-content", part: "content" }, index.h("le-slot", { key: 'a6de438f65b747e6ecf8b7c573168c99cde3eb62', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, index.h("slot", { key: 'bca044329a0b88ad3f041aab94b702434124179c' }))), index.h("div", { key: '1c08846aa15cd44f71f6d79968412634009eea03', class: "card-footer", part: "footer" }, index.h("le-slot", { key: '4b65f8c6dd68e5995b42ed4ef18fa504d3b4f182', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, index.h("slot", { key: 'db199113de94b26bf19d0665938f5048a3587134', name: "footer" }))))));
+        return (index.h("le-component", { key: 'b4203e8775f711c1ce4d8b9a4270815f122271f2', component: "le-card", hostClass: utils.classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, index.h("div", { key: '0dc9231529fc6d2eb29bc5cde2c1dbf18b332a43', class: "card", part: "card" }, index.h("div", { key: '511fcec73b51b0931d92e0fee4d17b108c827e74', class: "card-header", part: "header" }, index.h("le-slot", { key: 'e50dbadbe53ce6fa343ac7cfccb5a5d8f58fbd01', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, index.h("slot", { key: '36e1f7c3c5c1c5a9d49261d1b1406efe4004389b', name: "header" }))), index.h("div", { key: 'f9da55c0661d7906161b77aa22edc1c6bb7fb8d4', class: "card-content", part: "content" }, index.h("le-slot", { key: '01670058d67851f1bd70b21fc4111b4bf2509f25', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, index.h("slot", { key: 'e6eff48970eca2b3971f0ea7bfda3ca12bd1a3a1' }))), index.h("div", { key: 'ccd29257bc339a0d26c4750823fc635a182123cc', class: "card-footer", part: "footer" }, index.h("le-slot", { key: '198499afcbb9b0e82cac6cf976ab407697263c1f', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, index.h("slot", { key: '4d495b49f48ac142cdf739472b48d4bfb37933af', name: "footer" }))))));
     }
 };
-LeCard.style = leCardDefaultCss();
+LeCard.style = leCardCss();
 
 exports.le_card = LeCard;
 //# sourceMappingURL=le-card.entry.cjs.js.map

package/dist/cjs/le-code-input.cjs.entry.js

@@ -0,0 +1,181 @@
+'use strict';
+
+var index = require('./index-BzadfLTc.js');
+var utils = require('./utils-Dxx9WhWK.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leChange = index.createEvent(this, "leChange");
+        this.leInput = index.createEvent(this, "leInput");
+        this.leFocus = index.createEvent(this, "leFocus");
+        this.leBlur = index.createEvent(this, "leBlur");
+    }
+    get el() { return index.getElement(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(index.h("div", { class: utils.classnames('code-box', {
+                    'active': isActive,
+                    'selected': isSelected,
+                    'has-value': !!char,
+                }) }, char));
+        }
+        return boxes;
+    }
+    render() {
+        return (index.h("le-component", { key: '74615aa06971f7b2883e4a8e6f77b76918722e53', component: "le-code-input", hostClass: utils.classnames({ 'disabled': this.disabled, 'has-error': this.error }) }, index.h("div", { key: '423a974717f0676b266a362d0151540577ae8845', class: "le-code-input-wrapper" }, this.label && (index.h("label", { key: 'f2ba7d9c8a8a400ca31adc944919e4750785503d', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: 'f56b80ffc1362c164bdfe473877d934c252c9bd5', class: utils.classnames('input-group', { 'has-error': this.error }) }, index.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" }), index.h("div", { key: '9436ca5298d83aae923e762748d634b9517a3b17', class: "visual-container" }, this.renderBoxes())), !this.error && (index.h("div", { key: '398a377af9c6c26f441e94b3598a1007c64e6ea0', class: "le-input-description" }, index.h("le-slot", { key: '3d9a8c248efc57ffa026f9ffdf889599b276f344', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: '6873dec4bea990f9fe6de013e8fa729fc385871c', name: "description" }, this.description)))))));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+};
+LeCodeInput.style = leCodeInputCss();
+
+exports.le_code_input = LeCodeInput;
+//# sourceMappingURL=le-code-input.entry.cjs.js.map

package/dist/cjs/le-combobox.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPF04Jvb.js');
+var index = require('./index-BzadfLTc.js');
 
 const leComboboxCss = () => `:host{display:inline-block;min-width:200px;--le-combobox-border-color:var(--le-color-primary, #3b82f6)}:host([disabled]){opacity:0.5;pointer-events:none}:host([full-width]){width:100%}.combobox-trigger{display:flex;align-items:center;width:100%;background:var(--le-combobox-bg, var(--le-color-surface, #fff));border:1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);border-radius:var(--le-combobox-border-radius, 0.375rem);transition:border-color 0.15s ease, box-shadow 0.15s ease}.combobox-trigger:hover:not(.is-disabled),:host(:focus-within) .combobox-trigger:not(.is-disabled){border-color:var(--le-combobox-border-color)}.combobox-trigger:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.combobox-trigger.is-open{border-color:var(--le-color-primary, #3b82f6)}.combobox-input{flex:1;border:none;outline:none}.combobox-input::part(container){border:none}.combobox-input::part(container):focus-within{outline:none !important}.combobox-input::placeholder{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.combobox-trigger.is-disabled{cursor:not-allowed;background:var(--le-color-surface-disabled, #f9fafb)}.combobox-input:disabled{cursor:not-allowed}.combobox-clear{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;margin-right:0.25rem;color:var(--le-color-primary, #3b82f6);background:transparent;border:none;border-radius:0.25rem;cursor:pointer;opacity:0.6;transition:opacity 0.15s ease, background-color 0.15s ease}.combobox-clear:hover{opacity:1;background:var(--le-color-surface-hover, #f3f4f6)}.combobox-clear svg{width:0.875rem;height:0.875rem}.combobox-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:100%;color:var(--le-color-primary, #3b82f6);transition:transform 0.2s ease}.combobox-arrow svg{width:1rem;height:1rem}.combobox-trigger.is-open .combobox-arrow{transform:rotate(180deg)}:host([size='small']) .combobox-trigger{--le-combobox-height:2rem}:host([size='small']) .combobox-input{--le-combobox-padding-x:0.5rem;--le-combobox-font-size:0.75rem}:host([size='large']) .combobox-trigger{--le-combobox-height:3rem}:host([size='large']) .combobox-input{--le-combobox-padding-x:1rem;--le-combobox-font-size:1rem}`;
 
@@ -224,7 +224,7 @@ const LeCombobox = class {
     }
     render() {
         const hasValue = this.inputValue.length > 0;
-        return (index.h("le-component", { key: 'f65aad2f17c8b15b08ea6719cc481a37cc68a081', component: "le-combobox" }, index.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 }, index.h("div", { key: '47339300365dca2c59e1d26fcae4faeef747ab18', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, index.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 && (index.h("button", { key: '81caabc48183e8e93f84cd5a063a4d83edbfe87d', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, index.h("svg", { key: '02bc4d15d122119c3910b3bd03db76cd8a30b783', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: 'de0053be0eef471d35478a1c10a4408250a44dbf', d: "M4 4l8 8M12 4l-8 8" })))), index.h("span", { key: '72ea5b8bda38a8c08fff1763457dcf2377787c44', class: "combobox-arrow" }, index.h("svg", { key: 'c0f66766a7893978e142e63adec3863e792b6554', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: 'd6287e5dede972620a6f90632462dd7d495bf927', d: "M4 6l4 4 4-4" }))))), this.name && index.h("input", { key: 'fed8a8936750fafe7b58912954099da20a506907', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+        return (index.h("le-component", { key: '77660875e900dceb4cca50087a9ea7fad38d0de8', component: "le-combobox" }, index.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 }, index.h("div", { key: 'bc402ba87163d604c49d41acf32a2da7710c12d5', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, index.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 && (index.h("button", { key: '78446bc41c35fa2815acbfc34ea377dc33a1e55b', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, index.h("svg", { key: 'a596191694990ebb2e48d1529da0e0a6eb61e5b9', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: 'd6503800924e82555571c8955b33bcfddd90c7d0', d: "M4 4l8 8M12 4l-8 8" })))), index.h("span", { key: 'a032adbc03c135bf0e9c28f7272fa125c22fd37c', class: "combobox-arrow" }, index.h("svg", { key: '258a8d6a98071654a8bf59ac23dc517a9af19daa', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '5960ffe0d91ae52563420fa901653e17d458b522', d: "M4 6l4 4 4-4" }))))), this.name && index.h("input", { key: '44791ad0af7eae39a3d8b7cabf12a68b11fc20ba', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
     }
     static get watchers() { return {
         "value": ["handleValueChange"],

package/dist/cjs/le-header-placeholder.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-BPF04Jvb.js');
+var index = require('./index-BzadfLTc.js');
 
 const LeHeaderPlaceholder = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7246b0391351a1b40e76b833b83f057a7a11d6eb', "aria-hidden": "true", style: {
+        return (index.h(index.Host, { key: '0b056eac512d668bc8c3aa7000bdc7363dace713', "aria-hidden": "true", style: {
                 display: 'block',
                 height: 'var(--le-header-height, 64px)',
             } }));