le-kit 0.3.5 → 0.4.0

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

@@ -308,13 +308,13 @@ export class LeMultiselect {
     render() {
         const hasSelections = this.selectedOptions.length > 0;
         const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;
-        return (h("le-component", { key: '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: 'a2a63cfca9ce976fa4adfc8e6074928b2bff824e', component: "le-multiselect" }, h("le-dropdown-base", { key: '5df0d2b8ca639e4b21dcc2ad75d7cafb378d275c', ref: el => (this.dropdownEl = el), options: this.effectiveOptions, value: this.value, multiple: true, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, emptyText: this.emptyText, showCheckboxes: true, fullWidth: this.fullWidth, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: '8a0ed59a9a4f95b601c0feb41ab80d63628a6e96', slot: "trigger", class: {
                 '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: '1eb2d36631f9f9fc060d81fbbd09509584e46db4', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: 'bd5e5f6df6d87c0243390c5e39f0fd4e401d347c', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: 'ec5e02d4efe51fee37de296a3e9219638886fcf1', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '37a295fe1eaf777494b94994c42dcfaf6ebc18a4', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '570ab6b1808001f51ae005557aa57780bd6ed27a', class: "multiselect-arrow" }, h("svg", { key: '418a5e6d237994247dc052b80fae2544aef32053', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '3062461aa7c73439a8ff2a05e413f763984b0665', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: '33a55647b1d73a0ab87b5517194da8cff5e398fc', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: '2992c9500610e433da67767b6e02115f26731305', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name &&
+            this.value.map(val => (h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (h("span", { key: '864313565f2b263fd65df446f6dc899511e65b58', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
     }
     static get is() { return "le-multiselect"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-navigation/le-navigation.css

@@ -198,13 +198,13 @@
 .nav-horizontal-wrapper {
   display: flex;
   align-items: center;
-  gap: var(--le-spacing-2);
+  gap: var(--le-nav-gap);
 }
 
 .nav-bar {
   flex: 1 1 0%;
   min-width: 0;
-  --le-bar-gap: var(--le-spacing-2);
+  --le-bar-gap: var(--le-nav-gap);
 }
 
 .nav-bar.align-end {
@@ -219,6 +219,12 @@
   --le-bar-justify: space-between;
 }
 
+/* Compensate some of the width of the more-button when overflow is present */
+.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;
@@ -292,8 +298,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--le-spacing-2);
-  padding: var(--le-spacing-2) var(--le-spacing-3);
+  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;

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

@@ -195,7 +195,7 @@ export class LeNumberInput {
         this.emitChange();
     };
     render() {
-        return (h("le-component", { key: 'c6c327cad4a4df50aa270efcc203449f2c15d36c', component: "le-number-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '3745bd8a915fcfc6909c96afa882c22b2fea7e87', class: "le-input-wrapper" }, this.label && (h("label", { key: '557aa7702fab5ff75d9f547a677b3bc2e72ef8aa', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '5e5f68aaabba117db7680f0680e67dffcc15dc7c', class: classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (h("span", { key: 'ff47ad75a59cc6a35758eead376afcb3dd10ba59', class: "icon-start" }, this.iconStart)), h("input", { key: 'ec214ea43b6cb94d7e73129c53e55506c5b0b890', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (h("div", { key: 'e2fe4db81e51ff88447b8c27b83d0e7227516153', class: "le-input-controls" }, h("le-button", { key: '91c3d862066fbd13c222eebe043f89be5de39acd', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, h("span", { key: 'a7008c7bcee858324ae75eaf2a9eff0c818dc521', slot: "icon-only" }, "\u2191")), h("le-button", { key: 'bd075538967672ec669287682e21d832bf0732f4', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, h("span", { key: '915fbe4bcec150360f1f857a08675b00182a7ea3', slot: "icon-only" }, "\u2193"))))), !this.isValid && h("div", { key: '3a6b6c39aa89ad1295a6277f5b1d7b0b27ed8c4b', class: "le-input-error" }, this.validationMessage), h("div", { key: '2124de657df8f114fbcbf62dfcb878177d255274', class: "le-input-description" }, h("le-slot", { key: 'd5547bee7220cfedefe52b56f4c51a8eefde3b0e', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '643326ec71aa2b527fc7ac0baa75f329d9b460dd', name: "description" }))))));
+        return (h("le-component", { key: '966dacf86b59482b00576de5d86afdd470856250', component: "le-number-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '14ee10eb15c30d17fcf3d2c1a8bb2a7bfafd4c2a', class: "le-input-wrapper" }, this.label && (h("label", { key: '28ea233b530e918f26930e246deeccae21f13886', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '8e67e90f7402c52a2965404f4859ddb06c484aa5', class: classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (h("span", { key: '187589859d48c968e6264453359ea130187c0921', class: "icon-start" }, this.iconStart)), h("input", { key: '2c62909f0f4fb0897ed62c9bed65f4082fa1bf84', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (h("div", { key: 'dd5c86f866993b70be997631581a18d8368f2c7f', class: "le-input-controls" }, h("le-button", { key: '2e2828b3bf5f49eddd18bea1815e6ef834cefb63', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, h("span", { key: '7ba187623d069ced9d0b93c99bf897c6bc0356f5', slot: "icon-only" }, "\u2191")), h("le-button", { key: 'bd29e0d6aa0370cf0523a2e1828d101dee3ca1ce', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, h("span", { key: 'd78fa929daf6a56aaba8de5115f7eb73b5c201ab', slot: "icon-only" }, "\u2193"))))), !this.isValid && h("div", { key: 'ad66111e3eb326f9ab9b6dd00244001e3dd659b8', class: "le-input-error" }, this.validationMessage), h("div", { key: '261f01e9a7f1cfff57852bd46bc29d69d7fea0ed', class: "le-input-description" }, h("le-slot", { key: 'cbb6decae4d264620de64280cbfafc8bb6d0e755', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '2d711826f9e2f8e1a41905553fc425360dc5069e', name: "description" }))))));
     }
     static get is() { return "le-number-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -459,12 +459,12 @@ export class LePopover {
             popoverStyles.minWidth = this.minWidth;
         if (this.maxWidth)
             popoverStyles.maxWidth = this.maxWidth;
-        return (h(Host, { key: '16aec5e624881b728716d00fc6827b5b9c4049b1', "trigger-full-width": this.triggerFullWidth }, h("div", { key: 'f4171fc444414c68d43b4a081b574fb6ccbc3dfe', class: classnames('le-popover-trigger', {
+        return (h(Host, { key: '53b5f7b67ed2bff9b575fe74877b9e01a3f93cb5', "trigger-full-width": this.triggerFullWidth }, h("div", { key: 'c788cc07ee7c3fc925b8f82b4b992423a8878a93', class: classnames('le-popover-trigger', {
                 'le-popover-trigger-full-width': this.triggerFullWidth,
-            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, h("slot", { key: '039a6b55fc666443605178c6f86ecd0155bfab1f', name: "trigger" }, h("button", { key: 'f7140509d06b764d3da9086a895036bccb72b939', type: "button", class: "le-popover-default-trigger" }, h("span", { key: 'd618acd932b9489020373820a81bde4bc8ec01e6' }, "\u2295")))), h("div", { key: '678d09edfa103eecd3fe04b03933d8c4c7c7f847', id: this.uniqueId, class: "le-popover-content",
+            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, h("slot", { key: '1014de044c0c01f8143ae5cb3ad517f0d0daf6ff', name: "trigger" }, h("button", { key: '065ec5a55eacd869154463dd02f80346770eafb4', type: "button", class: "le-popover-default-trigger" }, h("span", { key: 'd3fb5d8e09fa2ecdd317a2529e43e274b8350306' }, "\u2295")))), h("div", { key: 'fd9a333a7022582c80132e50d7f2b0f4a8cccbbc', 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) && (h("div", { key: '98404abda58b31d5a405be271180924bc140cb45', class: "le-popover-header" }, this.popoverTitle && h("span", { key: '43b1559400087ea256485c4755bf2db61feff3de', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: '99ef18a9f3b0268b0010bc3cb1637a9409a47888', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: '1631159f18e60932960449f86da91cd00f859fac', class: "le-popover-body", part: "content" }, 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) && (h("div", { key: 'a78484f785a6c1f890a01b9e10c46fd8583f0ae8', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'd4ecd774aa49b8ca3d50340a426e42ea78b3eac1', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: 'fe6941fd4116d78812a1564cf0d8fa3d8dcc1264', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: '5ba9a2dac4523c98c8ce6f15bbba340500aa18c2', class: "le-popover-body", part: "content" }, h("slot", { key: '72913f121df20bdc59ec7ed1ac5781f6e665ab73' })))));
     }
     static get is() { return "le-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-round-progress/le-round-progress.js

@@ -85,7 +85,7 @@ export class LeRoundProgress {
         return (h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
     }
     render() {
-        return (h("div", { key: '6379320fd320009f649c11d58f2e918c733de68d', class: "round-progress--container" }, this.getPaths(), h("svg", { key: 'af63bb6fdf93e2d0d8060be60fcd41b4f74c294e', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: '7b8e0b41a9487b6ba02ef90b1f0a0177aac058f6', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '659336629730730ba96f5fbc788dc01e4f280fed' })));
+        return (h("div", { key: '254325e88bf931a52415ddea51775700c404bd86', class: "round-progress--container" }, this.getPaths(), h("svg", { key: '9680797956195b3bdb09162df9227f11757608e5', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: 'd0c9fbd69f34619a252eade6f8ee800757fa9a76', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '99d330f846846ef200404db257596f15dd18e08e' })));
     }
     static get is() { return "le-round-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-scroll-progress/le-scroll-progress.js

@@ -118,7 +118,7 @@ export class LeScrollProgress {
     }
     render() {
         const width = `${this.progress * 100}%`;
-        return (h(Host, { key: '5aa4fc59f57bbb1de387debf27b4a39c073c85bf' }, h("div", { key: '7bce9ba58ce43340c6e1c56afe7cb50eb0117079', class: "track", part: "track", "aria-hidden": "true" }, h("div", { key: 'adc0c2fe77b49d9496c67d05ce2b1a38dcafef05', class: "fill", part: "fill", style: { width } }))));
+        return (h(Host, { key: '7cfe453e9738eeff5d967cd26f5635ca5b17f986' }, h("div", { key: '39422f65b3695b849d7fb29a23914fb1d84159d4', class: "track", part: "track", "aria-hidden": "true" }, h("div", { key: '4848b9b07e898d21fe68882af5763e9c8c37bafd', class: "fill", part: "fill", style: { width } }))));
     }
     static get is() { return "le-scroll-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-segmented-control/le-segmented-control.js

@@ -236,7 +236,7 @@ export class LeSegmentedControl {
             'full-width': fullWidth,
             'disabled': disabled,
         };
-        return (h(Host, { key: 'a285c7c0ca824e96670b51dc638301c2c8ab6a6b', class: `overflow-${this.overflow}` }, h("le-component", { key: '6afe6d0861d3e797efabac23b24ad9731e19b6dd', component: "le-segmented-control" }, h("div", { key: '251f4d07960c6f464001cf6fda7643fe8db6af09', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
+        return (h(Host, { key: '8cf5102c9418447bc6648a367261d1ebe9dd8e96', class: `overflow-${this.overflow}` }, h("le-component", { key: '035ed7391d0ca24d020383a8e03fee4e366c1216', component: "le-segmented-control" }, h("div", { key: '7273688a85a0f3b4b4fabb5e754bcd1b69adefb3', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
             const optValue = this.getOptionValue(option);
             const isSelected = optValue === value;
             const isDisabled = option.disabled || disabled;

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

@@ -192,13 +192,13 @@ export class LeSelect {
     }
     render() {
         const hasValue = this.selectedOption !== undefined;
-        return (h("le-component", { key: '1d67b699f3638ef75a15fecdbba80a531ea90681', component: "le-select" }, 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 }, h("le-button", { key: '20c02507679ed44cca089e15801ac8f57cbe3938', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
+        return (h("le-component", { key: '6edb2eef1f5bab89b57739ac86218343c7590433', component: "le-select" }, h("le-dropdown-base", { key: 'cc36749a3999c7ab0f5c1853a76a357ff4584e1b', 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 }, h("le-button", { key: '0c2e67c97b3bcdf3af8885a9d8c980171674a8f8', 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: h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M4 6l4 4 4-4" })) }, h("span", { key: '5eea76015ea63775315e5bf46e7b99c65cd5bc22', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: 'c3cb84ae7d333ee84d40639fae5ebea7ba4eda36', class: "multiselect-search", slot: "header" }, 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 && h("input", { key: '1cbcbe00822aeda2ccfecedef506f0de01c1b010', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+                : null, iconEnd: h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M4 6l4 4 4-4" })) }, h("span", { key: '9fd3bab8442ed94d2c282423ef69cbf22badedf8', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: '366d778182b1818b2c4d995d4cb8262228e55bf0', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'b15a6d879857ac5ef3d8b041ba9902f3d8f29309', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: '60582cf4d7024d35df34d871fbe154bc13c5937a', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
     }
     static get is() { return "le-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-side-panel/le-side-panel.css

@@ -0,0 +1,193 @@
+:host {
+  display: block;
+  height: 100%;
+
+  /* Default values */
+  --le-side-panel-width: 280px;
+  --le-side-panel-margin: 0px;
+  --le-side-panel-backdrop: var(--le-color-backdrop);
+  --le-side-panel-border-radius: var(--le-radius-lg);
+}
+
+.host {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+}
+
+.layout {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.layout.start {
+  flex-direction: row;
+}
+
+.layout.end {
+  flex-direction: row-reverse;
+}
+
+.inlinePanel {
+  flex: 0 0 auto;
+  width: var(--le-side-panel-width);
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+  transition: width var(--le-side-panel-transition, var(--le-transition-normal));
+}
+
+.inlinePanel.hidden {
+  width: 0;
+}
+
+.inlinePanel .panel {
+  transform: translateX(0);
+  opacity: 1;
+  transition:
+    transform var(--le-side-panel-transition, var(--le-transition-normal)),
+    opacity var(--le-side-panel-transition, var(--le-transition-normal));
+}
+
+.layout.start .inlinePanel.hidden .panel {
+  transform: translateX(-100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.layout.end .inlinePanel.hidden .panel {
+  transform: translateX(100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.content {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.panel {
+  position: relative;
+  height: 100%;
+  max-height: min(calc(100% - (var(--le-side-panel-margin) * 2)), calc(100vh - (var(--le-side-panel-margin) * 2)));
+  margin: var(--le-side-panel-margin);
+  border-radius: var(--le-side-panel-border-radius);
+
+  background: var(--le-color-surface, #fff);
+  color: var(--le-color-text, #000);
+
+  border-right: 1px solid var(--le-color-border, rgba(0, 0, 0, 0.12));
+  box-sizing: border-box;
+}
+
+.panel.end {
+  border-right: 0;
+  border-left: 1px solid var(--le-color-border, rgba(0, 0, 0, 0.12));
+}
+
+.panel-scroller {
+  height: 100%;
+  overflow: auto;
+}
+
+.close {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 1;
+
+  border: 0;
+  border-radius: 6px;
+
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  cursor: col-resize;
+}
+
+.handle.start {
+  right: -5px;
+}
+
+.handle.end {
+  left: -5px;
+}
+
+/* Overlay (contained within component) */
+.overlayRoot {
+  position: absolute;
+  inset: 0;
+  background: var(--le-side-panel-backdrop);
+  z-index: var(--le-z-modal-backdrop, 1040);
+
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--le-side-panel-transition, var(--le-transition-normal));
+
+  height: 100%;
+}
+
+.overlayRoot.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.overlayPanelWrap {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: min(100%, var(--le-side-panel-width));
+
+  height: 100%;
+
+  z-index: var(--le-z-modal, 1050);
+
+  display: flex;
+  align-items: stretch;
+}
+
+.overlayPanelWrap.start {
+  left: 0;
+  transform: translateX(-100%);
+}
+
+.overlayPanelWrap.end {
+  right: 0;
+  transform: translateX(100%);
+}
+
+.overlayPanelWrap.visible.start,
+.overlayPanelWrap.visible.end {
+  transform: translateX(0);
+}
+
+.overlayPanelWrap {
+  transition: transform var(--le-side-panel-transition, var(--le-transition-normal));
+}
+
+/* Disable transitions while dragging */
+.host[data-resizing='true'] .panel,
+.host[data-resizing='true'] .overlayPanelWrap,
+.host[data-resizing='true'] .inlinePanel {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .overlayPanelWrap,
+  .overlayRoot,
+  .inlinePanel {
+    transition: none;
+  }
+}