le-kit 0.3.5 → 0.5.0

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: '38670cabc16dd9a966a5f430e1d4d5e2fc618744', component: "le-number-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '473450ef637fa744c7a83416beabd87fe9540436', class: "le-input-wrapper" }, this.label && (h("label", { key: 'c74d4166c1925f02c743dc1250b574a679415ae8', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '9066bfe0737700717bf902f46a6a6fa51b22a3a1', class: classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (h("span", { key: 'dcabeda7256fc25dc8bacd4ecbd2cc2941ea02d7', class: "icon-start" }, this.iconStart)), h("input", { key: '85d9040a37f4f5cf5c8c403dd58a3b1e9947d21d', 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: '9a197fc41798ff09b5618f5fb901b51ca2581d28', class: "le-input-controls" }, h("le-button", { key: '8befc86b373c03417ba87110d4092c8f6bf2f19c', 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: '70b53c26b9e061cd747bd1ccaa39d14c4ac69b68', slot: "icon-only" }, "\u2191")), h("le-button", { key: '3f9f65048977127cc2faaf911b9db6861005e17d', 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: 'ecbdfd9a72b357b1daca7be54ba5188795a44929', slot: "icon-only" }, "\u2193"))))), !this.isValid && h("div", { key: '41b7315c03d7caba36a535375e6a4774f9ff82b9', class: "le-input-error" }, this.validationMessage), h("div", { key: '3eda10b4e02add4dd780f6b51b5fd9565882dba8', class: "le-input-description" }, h("le-slot", { key: '7f9d9e5299dde3bc2f003687830f6d26d9f234b1', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'a80e340b5ba3c4b84e6d684156ccdfae106d6fc0', 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: '542d4ab391a9b176d110fe00c0dd61f2c46d73ef', "trigger-full-width": this.triggerFullWidth }, h("div", { key: '2248ab763d65e8a9150e62644452085f01c6a238', 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: '9d9a5f05f4b9f1b11f1fcbb09d29f0c1e36a2cd6', name: "trigger" }, h("button", { key: 'ed573daefaffb7b1effb3c7891722aa40e4b606e', type: "button", class: "le-popover-default-trigger" }, h("span", { key: '61f00ea9761935224e1529adc3b102b85efd4f33' }, "\u2295")))), 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) && (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: '50fe79bb415b5de315aea7f766d57ae911a90343', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'd809f12c512197bd34ca215a05820b533f4d8734', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: '2baee3e910ad65243a66eee2bba1c46d9fa628b4', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: 'eacad60a20becde7f4f8b9fa01d195dd3f4c08f1', class: "le-popover-body", part: "content" }, h("slot", { key: 'f8aa2edd170ee039d5277a1b9ebc8ee077a1a9dc' })))));
     }
     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: 'dd678c7e3ff93c60f9eb6c2c09cbf1eab963ec69', class: "round-progress--container" }, this.getPaths(), h("svg", { key: '4a7fc03af132741d9bcddb10d94db800a51e53bc', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: 'd3091d22a5c5e696d0e58748f880471d99f4ac4d', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '8dabb64461b68928e1e58c48dcaec84f504d4639' })));
     }
     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: '7a93dbfd8b14e5e581ff1480ad0e657f8f33bcf4' }, h("div", { key: 'fe4ff14af541e2a610d0b32605aaadb87ccea957', class: "track", part: "track", "aria-hidden": "true" }, h("div", { key: 'f46a09358bf77a7cff64deafa63702360a686c6a', 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: 'dfe7d637e07af470756a57e8878e455c472a2790', class: `overflow-${this.overflow}` }, h("le-component", { key: '5ffa309951b8f509fe0b0db09a9273256ec5a1b5', component: "le-segmented-control" }, h("div", { key: 'a448e9be4011230c689a4bab5963f1588496c1ba', 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: '670430a0ca8f310b7454c7dd93098b6b57f3bb82', component: "le-select" }, 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 }, 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: 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: '592267788f6a02d6b501941863e91bcd68742233', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: 'd4d2611e8b1f7fb243675cc11fa4982331b3c330', class: "multiselect-search", slot: "header" }, 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 && h("input", { key: 'bf9dc8141d02c272b0b81557dbc7c24a419ce558', 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;
+  }
+}