le-kit 0.1.18 → 0.2.0

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

@@ -127,7 +127,7 @@ const LeTurntable = class {
         this.el.style.transform = `rotate(${angle}deg)`;
     }
     render() {
-        return (index.h("div", { key: '6968cf3f13586bbbf981152567d280e1b72412a7', class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, index.h("slot", { key: '673eb5c7d2ad2ba46e703c0eb0cd7f520b961204' })));
+        return (index.h("div", { key: 'ddc71a1cc9dd4e1d61c460969b056e75a0c26e29', class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, index.h("slot", { key: '12df0788fd0baeae7d73badfdfe21976ff989497' })));
     }
     static get watchers() { return {
         "value": ["updateValue"]

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ var index = require('./index-pT2cVC5w.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["le-button_13.cjs",[[769,"le-collapse",{"open":[1540],"scrollDown":[516,"scroll-down"],"noFading":[516,"no-fading"],"collapseOnHeaderShrink":[516,"collapse-on-header-shrink"],"headerShrunk":[32]},[[8,"leHeaderShrinkChange","handleHeaderShrink"]],{"open":["onOpenChange"],"headerShrunk":["onDrivenStateChange"]}],[769,"le-header",{"isStatic":[516,"static"],"sticky":[516],"fixed":[516],"revealOnScroll":[513,"reveal-on-scroll"],"shrinkOffset":[513,"shrink-offset"],"expandOnHover":[516,"expand-on-hover"],"revealed":[32],"shrunk":[32],"placeholderHeight":[32],"hoverActive":[32]},[[9,"scroll","onWindowScroll"],[9,"resize","onWindowResize"]],{"revealOnScroll":["onBehaviorPropsChange"],"shrinkOffset":["onBehaviorPropsChange"],"fixed":["onBehaviorPropsChange"],"sticky":["onBehaviorPropsChange"],"isStatic":["onBehaviorPropsChange"]}],[769,"le-current-heading",{"selector":[1],"activeText":[32]},[[9,"scroll","onScroll"],[9,"resize","onResize"]],{"selector":["onSelectorChange"]}],[769,"le-scroll-progress",{"trackScrollProgress":[513,"track-scroll-progress"],"progress":[32]},[[9,"scroll","onScroll"],[9,"resize","onResize"]],{"trackScrollProgress":["onTrackChange"]}],[769,"le-dropdown-base",{"options":[16],"value":[8],"multiple":[4],"open":[1540],"disabled":[516],"filterFn":[16],"filterQuery":[1,"filter-query"],"emptyText":[1,"empty-text"],"showCheckboxes":[4,"show-checkboxes"],"maxHeight":[1,"max-height"],"width":[1],"fullWidth":[4,"full-width"],"closeOnClickOutside":[4,"close-on-click-outside"],"focusedIndex":[32],"filteredOptions":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"options":["handleOptionsChange"],"filterQuery":["handleOptionsChange"]}],[769,"le-popup",{"mode":[1537],"open":[1540],"type":[1],"popupTitle":[1,"popup-title"],"message":[1],"modal":[4],"position":[1],"confirmText":[1,"confirm-text"],"cancelText":[1,"cancel-text"],"placeholder":[1],"defaultValue":[1,"default-value"],"closeOnBackdrop":[4,"close-on-backdrop"],"inputValue":[32],"show":[64],"hide":[64]}],[769,"le-button",{"mode":[1537],"variant":[1],"color":[1],"size":[1],"selected":[4],"fullWidth":[516,"full-width"],"iconOnly":[1,"icon-only"],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"type":[1],"href":[1],"target":[1],"align":[1]}],[769,"le-checkbox",{"checked":[1540],"disabled":[4],"name":[1],"value":[1],"externalId":[1,"external-id"]}],[769,"le-component",{"component":[1],"displayName":[1,"display-name"],"hostClass":[1,"host-class"],"hostStyle":[16],"adminMode":[32],"componentMeta":[32],"propertyValues":[32]}],[769,"le-select",{"options":[1],"value":[1032],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[4,"full-width"],"size":[513],"variant":[513],"searchable":[4],"emptyText":[1,"empty-text"],"open":[1540],"selectedOption":[32],"searchQuery":[32],"showDropdown":[64],"hideDropdown":[64]},null,{"value":["handleValueChange"],"options":["handleOptionsChange"]}],[769,"le-slot",{"type":[1],"name":[1],"label":[1],"description":[1],"allowedComponents":[1,"allowed-components"],"multiple":[4],"required":[4],"placeholder":[1],"tag":[1],"slotStyle":[1,"slot-style"],"adminMode":[32],"textValue":[32],"isValidHtml":[32],"availableComponents":[32],"pickerOpen":[32]}],[769,"le-string-input",{"inputRef":[16],"mode":[1537],"value":[1537],"name":[1],"type":[1],"label":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"placeholder":[1],"hideDescription":[4,"hide-description"],"disabled":[4],"readonly":[4],"externalId":[1,"external-id"]}],[769,"le-popover",{"mode":[1537],"open":[1540],"position":[1],"align":[1],"popoverTitle":[1,"popover-title"],"showClose":[4,"show-close"],"closeOnClickOutside":[4,"close-on-click-outside"],"closeOnEscape":[4,"close-on-escape"],"offset":[2],"width":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"triggerFullWidth":[4,"trigger-full-width"],"isPositioned":[32],"updatePosition":[64],"show":[64],"hide":[64],"toggle":[64]}]]],["le-multiselect.cjs",[[769,"le-multiselect",{"options":[1],"value":[1040],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[516,"full-width"],"size":[513],"maxSelections":[2,"max-selections"],"showSelectAll":[1032,"show-select-all"],"searchable":[4],"emptyText":[1,"empty-text"],"open":[1540],"selectAllLabel":[32],"deselectAllLabel":[32],"selectedOptions":[32],"searchQuery":[32],"showDropdown":[64],"hideDropdown":[64],"clearSelection":[64]},null,{"value":["handleValueChange"],"options":["handleOptionsChange"],"showSelectAll":["handleShowSelectAllChange"]}]]],["le-segmented-control.cjs",[[769,"le-segmented-control",{"options":[16],"value":[1032],"size":[1],"overflow":[1],"fullWidth":[4,"full-width"],"disabled":[4],"segmentConfigs":[32],"focusedIndex":[32],"isDeclarativeMode":[32]},[[0,"slotchange","handleSlotChange"]],{"options":["tabsChanged"]}]]],["le-tab-bar.cjs",[[769,"le-tab-bar",{"tabs":[16],"selected":[1032],"fullWidth":[4,"full-width"],"showLabels":[4,"show-labels"],"position":[1],"size":[1],"bordered":[4],"tabConfigs":[32],"isDeclarativeMode":[32],"focusedIndex":[32]},[[0,"slotchange","handleSlotChange"]],{"selected":["selectedChanged"],"tabs":["tabsChanged"]}]]],["le-tabs.cjs",[[769,"le-tabs",{"tabs":[16],"selected":[1032],"orientation":[1],"position":[1],"variant":[1],"fullWidth":[4,"full-width"],"size":[1],"wrap":[4],"overflow":[1],"tabConfigs":[32],"focusedIndex":[32],"isDeclarativeMode":[32]},[[0,"slotchange","handleSlotChange"]],{"selected":["selectedChanged"],"tabs":["tabsChanged"]}]]],["le-box.cjs",[[769,"le-box",{"grow":[2],"shrink":[2],"basis":[1],"width":[1],"height":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"minHeight":[1,"min-height"],"maxHeight":[1,"max-height"],"background":[1],"borderRadius":[1,"border-radius"],"border":[1],"alignSelf":[1,"align-self"],"alignContent":[1,"align-content"],"justifyContent":[1,"justify-content"],"padding":[1],"order":[2],"displayFlex":[4,"display-flex"],"innerDirection":[1,"inner-direction"],"innerGap":[1,"inner-gap"]}]]],["le-card.cjs",[[769,"le-card",{"variant":[1],"interactive":[4]}]]],["le-combobox.cjs",[[769,"le-combobox",{"options":[1],"value":[1032],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[516,"full-width"],"size":[513],"allowCustom":[4,"allow-custom"],"minSearchLength":[2,"min-search-length"],"emptyText":[1,"empty-text"],"open":[1540],"inputValue":[32],"selectedOption":[32],"showDropdown":[64],"hideDropdown":[64],"focusInput":[64]},[[8,"click","handleWindowClick"]],{"value":["handleValueChange"],"options":["handleOptionsChange"]}]]],["le-number-input.cjs",[[769,"le-number-input",{"value":[1538],"name":[1],"label":[1],"placeholder":[1],"min":[2],"max":[2],"step":[2],"required":[4],"disabled":[4],"readonly":[4],"iconStart":[1,"icon-start"],"showSpinners":[4,"show-spinners"],"externalId":[1,"external-id"],"isValid":[32],"validationMessage":[32]},null,{"value":["valueChanged"]}]]],["le-stack.cjs",[[769,"le-stack",{"direction":[1],"gap":[1],"align":[1],"justify":[1],"wrap":[4],"alignContent":[1,"align-content"],"reverse":[4],"maxItems":[2,"max-items"],"fullWidth":[4,"full-width"],"fullHeight":[4,"full-height"],"padding":[1]}]]],["le-tab-panel.cjs",[[769,"le-tab-panel",{"label":[1],"value":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"lazy":[4],"active":[32],"hasBeenActive":[32],"getValue":[64],"getTabConfig":[64],"setActive":[64]},null,{"active":["activeChanged"]}]]],["le-text.cjs",[[769,"le-text",{"variant":[1537],"align":[513],"color":[1],"truncate":[4],"maxLines":[2,"max-lines"],"adminMode":[32],"content":[32],"isFocused":[32],"selectionState":[32]},null,{"variant":["onVariantChange"]}]]],["le-header-placeholder.cjs",[[256,"le-header-placeholder"]]],["le-round-progress.cjs",[[769,"le-round-progress",{"value":[2],"padding":[2],"paths":[1],"params":[32]},null,{"value":["updateValue"],"padding":["updatePadding"],"paths":["updateProgressBackgrounds"]}]]],["le-turntable.cjs",[[769,"le-turntable",{"center":[1],"value":[2]},[[9,"mousemove","handleMouseMove"],[9,"mouseup","handleMouseUp"],[9,"resize","handleWindowResize"]],{"value":["updateValue"]}]]],["le-tag.cjs",[[769,"le-tag",{"label":[1],"mode":[1537],"icon":[1],"dismissible":[4],"disabled":[516],"size":[513],"variant":[513]}]]],["le-tab.cjs",[[769,"le-tab",{"mode":[1537],"label":[1],"value":[1],"variant":[1],"position":[1],"size":[1],"focusable":[4],"selected":[4],"fullWidth":[516,"full-width"],"icon":[1],"showLabel":[4,"show-label"],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"href":[1],"target":[1],"align":[1],"getTabConfig":[64]}]]]], options);
+  return index.bootstrapLazy([["le-button_13.cjs",[[769,"le-header",{"isStatic":[516,"static"],"sticky":[516],"fixed":[516],"revealOnScroll":[513,"reveal-on-scroll"],"shrinkOffset":[513,"shrink-offset"],"expandOnHover":[516,"expand-on-hover"],"revealed":[32],"shrunk":[32],"placeholderHeight":[32],"hoverActive":[32]},[[9,"scroll","onWindowScroll"],[9,"resize","onWindowResize"]],{"revealOnScroll":["onBehaviorPropsChange"],"shrinkOffset":["onBehaviorPropsChange"],"fixed":["onBehaviorPropsChange"],"sticky":["onBehaviorPropsChange"],"isStatic":["onBehaviorPropsChange"]}],[769,"le-current-heading",{"selector":[1],"activeText":[32]},[[9,"scroll","onScroll"],[9,"resize","onResize"]],{"selector":["onSelectorChange"]}],[769,"le-scroll-progress",{"trackScrollProgress":[513,"track-scroll-progress"],"progress":[32]},[[9,"scroll","onScroll"],[9,"resize","onResize"]],{"trackScrollProgress":["onTrackChange"]}],[769,"le-collapse",{"closed":[1540],"scrollDown":[516,"scroll-down"],"noFading":[516,"no-fading"],"collapseOnHeaderShrink":[516,"collapse-on-header-shrink"],"headerShrunk":[32]},[[8,"leHeaderShrinkChange","handleHeaderShrink"]],{"open":["onOpenChange"],"headerShrunk":["onDrivenStateChange"]}],[769,"le-dropdown-base",{"options":[16],"value":[8],"multiple":[4],"open":[1540],"disabled":[516],"filterFn":[16],"filterQuery":[1,"filter-query"],"emptyText":[1,"empty-text"],"showCheckboxes":[4,"show-checkboxes"],"maxHeight":[1,"max-height"],"width":[1],"fullWidth":[4,"full-width"],"closeOnClickOutside":[4,"close-on-click-outside"],"focusedIndex":[32],"filteredOptions":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"options":["handleOptionsChange"],"filterQuery":["handleOptionsChange"]}],[769,"le-popup",{"mode":[1537],"open":[1540],"type":[1],"popupTitle":[1,"popup-title"],"message":[1],"modal":[4],"position":[1],"confirmText":[1,"confirm-text"],"cancelText":[1,"cancel-text"],"placeholder":[1],"defaultValue":[1,"default-value"],"closeOnBackdrop":[4,"close-on-backdrop"],"inputValue":[32],"show":[64],"hide":[64]}],[769,"le-button",{"mode":[1537],"variant":[1],"color":[1],"size":[1],"selected":[4],"fullWidth":[516,"full-width"],"iconOnly":[1,"icon-only"],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"type":[1],"href":[1],"target":[1],"align":[1]}],[769,"le-checkbox",{"checked":[1540],"disabled":[4],"name":[1],"value":[1],"externalId":[1,"external-id"]}],[769,"le-component",{"component":[1],"displayName":[1,"display-name"],"hostClass":[1,"host-class"],"hostStyle":[16],"adminMode":[32],"componentMeta":[32],"propertyValues":[32]}],[769,"le-select",{"options":[1],"value":[1032],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[4,"full-width"],"size":[513],"variant":[513],"searchable":[4],"emptyText":[1,"empty-text"],"open":[1540],"selectedOption":[32],"searchQuery":[32],"showDropdown":[64],"hideDropdown":[64]},null,{"value":["handleValueChange"],"options":["handleOptionsChange"]}],[769,"le-slot",{"type":[1],"name":[1],"label":[1],"description":[1],"allowedComponents":[1,"allowed-components"],"multiple":[4],"required":[4],"placeholder":[1],"tag":[1],"slotStyle":[1,"slot-style"],"adminMode":[32],"textValue":[32],"isValidHtml":[32],"availableComponents":[32],"pickerOpen":[32]}],[769,"le-string-input",{"inputRef":[16],"mode":[1537],"value":[1537],"name":[1],"type":[1],"label":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"placeholder":[1],"hideDescription":[4,"hide-description"],"disabled":[4],"readonly":[4],"externalId":[1,"external-id"]}],[769,"le-popover",{"mode":[1537],"open":[1540],"position":[1],"align":[1],"popoverTitle":[1,"popover-title"],"showClose":[4,"show-close"],"closeOnClickOutside":[4,"close-on-click-outside"],"closeOnEscape":[4,"close-on-escape"],"offset":[2],"width":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"triggerFullWidth":[4,"trigger-full-width"],"isPositioned":[32],"updatePosition":[64],"show":[64],"hide":[64],"toggle":[64]}]]],["le-navigation.cjs",[[769,"le-navigation",{"items":[1],"orientation":[513],"wrap":[516],"overflowMode":[513,"overflow-mode"],"searchable":[4],"searchPlaceholder":[1,"search-placeholder"],"emptyText":[1,"empty-text"],"submenuSearchable":[4,"submenu-searchable"],"searchQuery":[32],"openState":[32],"overflowIds":[32],"hamburgerActive":[32],"submenuQueries":[32]},null,{"items":["handleLayoutInputsChange"],"orientation":["handleLayoutInputsChange"],"wrap":["handleLayoutInputsChange"],"overflowMode":["handleLayoutInputsChange"]}]]],["le-multiselect.cjs",[[769,"le-multiselect",{"options":[1],"value":[1040],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[516,"full-width"],"size":[513],"maxSelections":[2,"max-selections"],"showSelectAll":[1032,"show-select-all"],"searchable":[4],"emptyText":[1,"empty-text"],"open":[1540],"selectAllLabel":[32],"deselectAllLabel":[32],"selectedOptions":[32],"searchQuery":[32],"showDropdown":[64],"hideDropdown":[64],"clearSelection":[64]},null,{"value":["handleValueChange"],"options":["handleOptionsChange"],"showSelectAll":["handleShowSelectAllChange"]}]]],["le-segmented-control.cjs",[[769,"le-segmented-control",{"options":[16],"value":[1032],"size":[1],"overflow":[1],"fullWidth":[4,"full-width"],"disabled":[4],"segmentConfigs":[32],"focusedIndex":[32],"isDeclarativeMode":[32]},[[0,"slotchange","handleSlotChange"]],{"options":["tabsChanged"]}]]],["le-tab-bar.cjs",[[769,"le-tab-bar",{"tabs":[16],"selected":[1032],"fullWidth":[4,"full-width"],"showLabels":[4,"show-labels"],"position":[1],"size":[1],"bordered":[4],"tabConfigs":[32],"isDeclarativeMode":[32],"focusedIndex":[32]},[[0,"slotchange","handleSlotChange"]],{"selected":["selectedChanged"],"tabs":["tabsChanged"]}]]],["le-tabs.cjs",[[769,"le-tabs",{"tabs":[16],"selected":[1032],"orientation":[1],"position":[1],"variant":[1],"fullWidth":[4,"full-width"],"size":[1],"wrap":[4],"overflow":[1],"tabConfigs":[32],"focusedIndex":[32],"isDeclarativeMode":[32]},[[0,"slotchange","handleSlotChange"]],{"selected":["selectedChanged"],"tabs":["tabsChanged"]}]]],["le-box.cjs",[[769,"le-box",{"grow":[2],"shrink":[2],"basis":[1],"width":[1],"height":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"minHeight":[1,"min-height"],"maxHeight":[1,"max-height"],"background":[1],"borderRadius":[1,"border-radius"],"border":[1],"alignSelf":[1,"align-self"],"alignContent":[1,"align-content"],"justifyContent":[1,"justify-content"],"padding":[1],"order":[2],"displayFlex":[4,"display-flex"],"innerDirection":[1,"inner-direction"],"innerGap":[1,"inner-gap"]}]]],["le-card.cjs",[[769,"le-card",{"variant":[1],"interactive":[4]}]]],["le-combobox.cjs",[[769,"le-combobox",{"options":[1],"value":[1032],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[516,"full-width"],"size":[513],"allowCustom":[4,"allow-custom"],"minSearchLength":[2,"min-search-length"],"emptyText":[1,"empty-text"],"open":[1540],"inputValue":[32],"selectedOption":[32],"showDropdown":[64],"hideDropdown":[64],"focusInput":[64]},[[8,"click","handleWindowClick"]],{"value":["handleValueChange"],"options":["handleOptionsChange"]}]]],["le-number-input.cjs",[[769,"le-number-input",{"value":[1538],"name":[1],"label":[1],"placeholder":[1],"min":[2],"max":[2],"step":[2],"required":[4],"disabled":[4],"readonly":[4],"iconStart":[1,"icon-start"],"showSpinners":[4,"show-spinners"],"externalId":[1,"external-id"],"isValid":[32],"validationMessage":[32]},null,{"value":["valueChanged"]}]]],["le-stack.cjs",[[769,"le-stack",{"direction":[1],"gap":[1],"align":[1],"justify":[1],"wrap":[4],"alignContent":[1,"align-content"],"reverse":[4],"maxItems":[2,"max-items"],"fullWidth":[4,"full-width"],"fullHeight":[4,"full-height"],"padding":[1]}]]],["le-tab-panel.cjs",[[769,"le-tab-panel",{"label":[1],"value":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"lazy":[4],"active":[32],"hasBeenActive":[32],"getValue":[64],"getTabConfig":[64],"setActive":[64]},null,{"active":["activeChanged"]}]]],["le-text.cjs",[[769,"le-text",{"variant":[1537],"align":[513],"color":[1],"truncate":[4],"maxLines":[2,"max-lines"],"adminMode":[32],"content":[32],"isFocused":[32],"selectionState":[32]},null,{"variant":["onVariantChange"]}]]],["le-header-placeholder.cjs",[[256,"le-header-placeholder"]]],["le-round-progress.cjs",[[769,"le-round-progress",{"value":[2],"padding":[2],"paths":[1],"params":[32]},null,{"value":["updateValue"],"padding":["updatePadding"],"paths":["updateProgressBackgrounds"]}]]],["le-turntable.cjs",[[769,"le-turntable",{"center":[1],"value":[2]},[[9,"mousemove","handleMouseMove"],[9,"mouseup","handleMouseUp"],[9,"resize","handleWindowResize"]],{"value":["updateValue"]}]]],["le-tag.cjs",[[769,"le-tag",{"label":[1],"mode":[1537],"icon":[1],"dismissible":[4],"disabled":[516],"size":[513],"variant":[513]}]]],["le-icon.cjs",[[769,"le-icon",{"name":[1],"size":[2],"iconData":[32],"visible":[32]},null,{"name":["loadIconData"]}]]],["le-tab.cjs",[[769,"le-tab",{"mode":[1537],"label":[1],"value":[1],"variant":[1],"position":[1],"size":[1],"focusable":[4],"selected":[4],"fullWidth":[516,"full-width"],"icon":[1],"showLabel":[4,"show-label"],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"href":[1],"target":[1],"align":[1],"getTabConfig":[64]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/assets/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="2" />
+</svg>

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "components/le-navigation/le-navigation.js",
     "components/le-popup/le-popup.js",
     "components/le-box/le-box.js",
     "components/le-button/le-button.js",
@@ -12,6 +13,7 @@
     "components/le-dropdown-base/le-dropdown-base.js",
     "components/le-header/le-header.js",
     "components/le-header-placeholder/le-header-placeholder.js",
+    "components/le-icon/le-icon.js",
     "components/le-multiselect/le-multiselect.js",
     "components/le-number-input/le-number-input.js",
     "components/le-popover/le-popover.js",

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

@@ -62,7 +62,7 @@
 }
 
 .le-button-container:active:not(:disabled) {
-  box-shadow: inset 0 0 6px var(--le-color-shadow);
+  box-shadow: inset 0 0 5px color-mix(in srgb, var(--_btn-bg) 50%, transparent);
 }
 
 .le-button-container:focus-visible {
@@ -88,7 +88,7 @@
  * =========================================== */
 
 /* Primary (default) */
-:host > le-component.color-primary {
+:host(.color-primary) {
   --_btn-bg: var(--le-color-primary);
   --_btn-bg-hover: var(--le-color-primary-dark);
   --_btn-color: var(--le-button-color);
@@ -96,7 +96,7 @@
 }
 
 /* Secondary */
-:host > le-component.color-secondary {
+:host(.color-secondary) {
   --_btn-bg: var(--le-color-secondary);
   --_btn-bg-hover: var(--le-color-secondary-dark);
   --_btn-color: var(--le-color-secondary-contrast);
@@ -104,7 +104,7 @@
 }
 
 /* Success */
-:host > le-component.color-success {
+:host(.color-success) {
   --_btn-bg: var(--le-color-success);
   --_btn-bg-hover: var(--le-color-success-dark);
   --_btn-color: var(--le-color-success-contrast);
@@ -112,7 +112,7 @@
 }
 
 /* Warning */
-:host > le-component.color-warning {
+:host(.color-warning) {
   --_btn-bg: var(--le-color-warning);
   --_btn-bg-hover: var(--le-color-warning-dark);
   --_btn-color: var(--le-color-warning-contrast);
@@ -120,7 +120,7 @@
 }
 
 /* Danger */
-:host > le-component.color-danger {
+:host(.color-danger) {
   --_btn-bg: var(--le-color-danger);
   --_btn-bg-hover: var(--le-color-danger-dark);
   --_btn-color: var(--le-color-danger-contrast);
@@ -128,7 +128,7 @@
 }
 
 /* Info */
-:host > le-component.color-info {
+:host(.color-info) {
   --_btn-bg: var(--le-color-info);
   --_btn-bg-hover: var(--le-color-info-dark);
   --_btn-color: var(--le-color-info-contrast);
@@ -140,39 +140,39 @@
  * =========================================== */
 
 /* Solid (default) - already styled by color classes */
-:host > le-component.variant-solid .le-button-container {
+:host(.variant-solid) .le-button-container {
   box-shadow: var(--le-shadow-sm);
 }
 
-:host > le-component.variant-solid .le-button-container:hover:not(:disabled) {
+:host(.variant-solid) .le-button-container:hover:not(:disabled) {
   box-shadow: var(--le-shadow-md);
 }
 
 /* Outlined */
-:host > le-component.variant-outlined .le-button-container {
+: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 > le-component.variant-outlined .le-button-container:hover:not(:disabled) {
+:host(.variant-outlined) .le-button-container:hover:not(:disabled) {
   border-color: var(--_btn-border-color);
 }
 
 /* Clear (ghost) */
-:host > le-component.variant-clear .le-button-container {
+:host(.variant-clear) .le-button-container {
   background: transparent;
   color: var(--_btn-bg);
   border-color: transparent;
 }
 
-:host > le-component.variant-clear .le-button-container:hover:not(:disabled) {
+:host(.variant-clear) .le-button-container:hover:not(:disabled) {
   background: var(--le-color-gray-100);
   border-color: transparent;
 }
 
 /* System (controls without access) */
-:host > le-component.variant-system .le-button-container {
+:host(.variant-system) .le-button-container {
   background: transparent;
   color: var(--_btn-bg-system);
   border-color: transparent;
@@ -181,14 +181,14 @@
 /* ===========================================
  * SIZES
  * =========================================== */
-:host > le-component.size-small .le-button-container {
+: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 > le-component.size-large .le-button-container {
+:host(.size-large) {
   --le-button-padding-x: 0.9rem;
   --le-button-padding-y: 0.6rem;
   --le-button-font-size: var(--le-font-size-xl);
@@ -199,39 +199,39 @@
  * =========================================== */
 
 /* Full width */
-:host > le-component.full-width {
+:host(.full-width) {
   display: block;
   width: 100%;
 }
 
 /* Selected state */
-:host > le-component.selected .le-button-container {
+:host(.selected) .le-button-container {
   box-shadow: inset 0 0 4px var(--le-color-shadow);
 }
 
-:host > le-component.variant-outlined.selected .le-button-container,
-:host > le-component.variant-clear.selected .le-button-container {
+:host(.variant-outlined.selected) .le-button-container,
+:host(.variant-clear.selected) .le-button-container {
   background: var(--_btn-bg);
   color: var(--_btn-color);
 }
 
 /* Icon only */
-:host > le-component.icon-only .le-button-container {
+:host(.icon-only) .le-button-container {
   padding: 0.5rem;
   padding-bottom: 0.6rem;
   aspect-ratio: var(--le-button-icon-aspect-ratio, 1);
 }
 
-:host > le-component.icon-only.size-small .le-button-container {
+:host(.icon-only.size-small) .le-button-container {
   padding: var(--le-button-small-padding, 0.25rem);
 }
 
-:host > le-component.icon-only.size-large .le-button-container {
+:host(.icon-only.size-large) .le-button-container {
   padding: 0.75rem;
 }
 
 /* Hide content in icon-only mode */
-:host > le-component.icon-only .content {
+:host(.icon-only) .content {
   display: none;
 }
 

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

@@ -1,4 +1,4 @@
-import { h, Fragment } from "@stencil/core";
+import { h, Fragment, Host } from "@stencil/core";
 import { classnames } from "../../utils/utils";
 /**
  * A flexible button component with multiple variants and states.
@@ -110,7 +110,7 @@ export class LeButton {
         const attrs = this.href
             ? { href: this.href, target: this.target, role: 'button' }
             : { type: this.type, disabled: this.disabled };
-        return (h("le-component", { key: 'e66d4daa2e124540b12eb93e219dea224b38a5ba', component: "le-button", hostClass: classes }, h(TagType, { key: 'b230e6338727d68a41170e4c0d5043ab10434586', class: classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (h(Fragment, null, h("span", { class: "le-button-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd)))))));
+        return (h(Host, { key: 'bc9515b65357611b9a29f8c4f89edfdfb1535bf0', class: classes }, h("le-component", { key: 'bb5367d16d781e6af44f709d5f132faa3b0fc88e', component: "le-button" }, h(TagType, { key: '09118bccd54456ee8dadaaff92d9fedfa91831ec', class: classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (h(Fragment, null, h("span", { class: "le-button-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
     }
     static get is() { return "le-button"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -36,7 +36,7 @@ export class LeCard {
      */
     interactive = false;
     render() {
-        return (h("le-component", { key: '3878b21dafb24349fd9c178c784028302fb95214', component: "le-card", hostClass: classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, h("div", { key: '41470ad363928c5a5f70947a1fc859db03cf7619', class: "card", part: "card" }, h("div", { key: '9e0d85016f98ee15eba90bbd4db004f9210b1bf3', class: "card-header", part: "header" }, h("le-slot", { key: 'dcd23b7da86e4026f2cc7fb62b410d7317ab2e2b', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, h("slot", { key: '0f2f616c950d7548484bd8c87befa7ecff6d374f', name: "header" }))), h("div", { key: '1d77598852e8755e477a505d29c77643cea446d4', class: "card-content", part: "content" }, h("le-slot", { key: 'fd94892b8489f727a3e951f1771cab53b0667799', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, h("slot", { key: 'dc1c2deff9405fd838aee733bc6e4394f60fefd7' }))), h("div", { key: '2944fa4515119b1868567545fa131fe178d7a3cf', class: "card-footer", part: "footer" }, h("le-slot", { key: 'bdd9b5a1baf2ebf487120afa458ae85285b05fcf', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, h("slot", { key: '8a79b1baaf6720f1397c0bacf5f71dc97dff2777', name: "footer" }))))));
+        return (h("le-component", { key: 'b7eb138d4df55f27716d53c41ff7e1035e058cbe', component: "le-card", hostClass: classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, h("div", { key: 'db58aceaf332727671c73f121bd7c7b7c00c798e', class: "card", part: "card" }, h("div", { key: '1eb45033cee8e18dc9edfaba3341b1c8df8c737c', class: "card-header", part: "header" }, h("le-slot", { key: 'e77e29b0cf5965063554a50936fa0e9026fbc73a', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, h("slot", { key: 'b67e02c52fbfa2a7b1ed58e0c1537355af9a125e', name: "header" }))), h("div", { key: 'bcdbdc7c2e7addaaa4892d41cf5af2e43260c876', class: "card-content", part: "content" }, h("le-slot", { key: 'e4dc82322cbcb0ca884ac55c7805fa860fdaf588', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, h("slot", { key: 'e9576903dfc9c04c01614207078ee02a03d9f4b8' }))), h("div", { key: '6f684335dfc5acd55cbd832e2cd6f8a468df7a9a', class: "card-footer", part: "footer" }, h("le-slot", { key: 'b4013edc8431ba54f44cabd4763916c6e83bc6a8', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, h("slot", { key: '9e9d1c9d99beb2d877a9b8d59b13659e0c9c6459', name: "footer" }))))));
     }
     static get is() { return "le-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class LeCheckbox {
         });
     };
     render() {
-        return (h("le-component", { key: '43399929e07835e0019d509803e50a151921fa72', component: "le-checkbox", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '7ddbf2ac1690bb09082adfea70b9767c972d007a', class: "le-checkbox-wrapper" }, h("label", { key: '8eec4055c713e8b3b155695751b10bff64c9f903', class: "le-checkbox-label" }, h("span", { key: '2118b1cbe7911ff1674e522d723949d81cade185', class: "le-checkbox-input" }, h("input", { key: 'd0a30af5c14497fa6fa294c07ba74ae2e032481f', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), h("span", { key: '02cf9588431240039a53ee50e02b08ba5d63b974', class: "le-checkbox-text" }, h("le-slot", { key: 'e7d7b253deab72e627164eb72fc06109abfca6a5', name: "", type: "text", tag: "span" }, h("slot", { key: '1d8c443073e48848513a8a6d04cd7805a394e54e' })))), h("div", { key: '16c2c927dc0c0f7844a203a0628bf0e561009bd0', class: "le-checkbox-description" }, h("le-slot", { key: 'c6898ecc8992dce4786e68ab4b136bf5c3a4d3aa', name: "description", type: "text", tag: "div", label: "Description" }, h("slot", { key: '3342add8ed1400ab74681e445163eeb3dd415941', name: "description" }))))));
+        return (h("le-component", { key: '15e49aa77c2d904b1610f68802428e9dd86b3631', component: "le-checkbox", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '50691376a207f004112820742df46ef9ff8016e0', class: "le-checkbox-wrapper" }, h("label", { key: '339a209a9a649ff491dd1867e617f71e4bca7365', class: "le-checkbox-label" }, h("span", { key: '1086e8989abe5a23ac01bd2323a8ae2454c4acb6', class: "le-checkbox-input" }, h("input", { key: '90126054fb3aa8ed58d043694275cac416d06578', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), h("span", { key: '8b47592103fbd4f7e3b7b1b01f27d42bf6dccbc7', class: "le-checkbox-text" }, h("le-slot", { key: 'c5f5aaff0b69bcf7d993ea84181a63d30b794774', name: "", type: "text", tag: "span" }, h("slot", { key: 'bc615ec211b6db8f5f22760ae5298560384a1b84' })))), h("div", { key: '0c6037f4d7948b262beb4a5b969018fb6b0cad4a', class: "le-checkbox-description" }, h("le-slot", { key: '17631ed776592063601dd37052f43d7e4732af21', name: "description", type: "text", tag: "div", label: "Description" }, h("slot", { key: '13a3138cd0101fc1f9175a89ed933a2f2d4df79f', name: "description" }))))));
     }
     static get is() { return "le-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,12 +10,12 @@
 }
 
 :host([data-open="false"]),
-:host([open="false"]) {
+:host([closed]) {
   grid-template-rows: 0fr;
   opacity: 0;
 }
 :host([no-fading][data-open="false"]),
-:host([no-fading][open="false"]) {
+:host([no-fading][closed]) {
   opacity: 1;
 }
 
@@ -26,6 +26,6 @@
   overflow: hidden;
 }
 
-:host([scroll-down]) .region {
+.region.scroll-down {
   justify-content: flex-start;
 }

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

@@ -17,8 +17,11 @@ import { h, Host } from "@stencil/core";
  */
 export class LeCollapse {
     el;
-    /** Whether the content should be shown. */
-    open = true;
+    /**
+     * Since Stencil boolean props default to `false` when the attribute is missing.
+     * instead of `open` defaulting to `true`, using a `closed` prop.
+     */
+    closed = false;
     /** Whether the content should scroll down from the top when open. */
     scrollDown = false;
     /** Stop fading the content when collapsing/expanding. */
@@ -34,13 +37,6 @@ export class LeCollapse {
         this.headerShrunk = !!e.detail?.shrunk;
     }
     headerShrunk = false;
-    componentWillLoad() {
-        // Stencil boolean props default to `false` when the attribute is missing.
-        // For this component, the desired default is open=true.
-        if (!this.el.hasAttribute('open')) {
-            this.open = true;
-        }
-    }
     componentDidLoad() {
         this.applyOpenState();
     }
@@ -51,7 +47,7 @@ export class LeCollapse {
         this.applyOpenState();
     }
     shouldBeOpen() {
-        if (!this.open)
+        if (this.closed)
             return false;
         if (this.collapseOnHeaderShrink && this.headerShrunk)
             return false;
@@ -62,7 +58,7 @@ export class LeCollapse {
         this.el.toggleAttribute('data-open', nextOpen);
     }
     render() {
-        return (h(Host, { key: '30fe288583bae1645ce00714de95c40ed92b7af0', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, h("le-component", { key: '5fdc1e83caaff73fedb61d7286fc56f03fa8127a', component: "le-collapse" }, h("div", { key: '185df372a5039be23abf42ff262ef2d3eaa1602f', class: "region", part: "region" }, h("slot", { key: '1790f5457264342d71aecb94a67ce4ee11149af2' })))));
+        return (h(Host, { key: '946501d440fa391cfea13283072c387fd1e98b65', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, h("le-component", { key: 'fb5c7e9f9e15dc3ef440f9703977ee7f09ffe676', component: "le-collapse" }, h("div", { key: '83ec865adb8a11cc9de7a6a173b85245414360e8', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, h("slot", { key: '6b402e2beac8bde188da48719f47e5f9fc12581d' })))));
     }
     static get is() { return "le-collapse"; }
     static get encapsulation() { return "shadow"; }
@@ -78,7 +74,7 @@ export class LeCollapse {
     }
     static get properties() {
         return {
-            "open": {
+            "closed": {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
@@ -90,13 +86,13 @@ export class LeCollapse {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the content should be shown."
+                    "text": "Since Stencil boolean props default to `false` when the attribute is missing.\ninstead of `open` defaulting to `true`, using a `closed` prop."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "open",
-                "defaultValue": "true"
+                "attribute": "closed",
+                "defaultValue": "false"
             },
             "scrollDown": {
                 "type": "boolean",

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

@@ -1 +1 @@
-{"version":3,"file":"le-collapse.js","sourceRoot":"","sources":["../../../src/components/le-collapse/le-collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIxF;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;IACV,EAAE,CAAc;IAE3B,2CAA2C;IACH,IAAI,GAAY,IAAI,CAAC;IAE7D,qEAAqE;IAClB,UAAU,GAAY,KAAK,CAAC;IAE/E,yDAAyD;IACR,QAAQ,GAAY,KAAK,CAAC;IAE3E,yEAAyE;IACR,sBAAsB,GACrF,KAAK,CAAC;IAER;;;OAGG;IAEH,kBAAkB,CAAC,EAAS;QAC1B,MAAM,CAAC,GAAG,EAAsC,CAAC;QACjD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC;IACzC,CAAC;IAEgB,YAAY,GAAY,KAAK,CAAC;IAE/C,iBAAiB;QACf,0EAA0E;QAC1E,wDAAwD;QACxD,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACnB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGS,YAAY;QACpB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGS,mBAAmB;QAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QAC7B,IAAI,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO,KAAK,CAAC;QACnE,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,cAAc;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACrC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,kEAAY,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YACrD,qEAAc,SAAS,EAAC,aAAa;gBACnC,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;oBAC/B,8DAAa,CACT,CACO,CACV,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nexport type LeCollapseAnimation = 'fade' | 'collapse' | 'fade-collapse';\n\n/**\n * Animated show/hide wrapper.\n *\n * Supports height collapse (auto->0) and/or fading.\n * Can optionally listen to the nearest `le-header` shrink events.\n *\n * @slot - Content to animate\n *\n * @cssprop --le-collapse-duration - Transition duration\n *\n * @csspart region - Collapsible region\n * @csspart content - Inner content\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-collapse',\n  styleUrl: 'le-collapse.css',\n  shadow: true,\n})\nexport class LeCollapse {\n  @Element() el: HTMLElement;\n\n  /** Whether the content should be shown. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = true;\n\n  /** Whether the content should scroll down from the top when open. */\n  @Prop({ attribute: 'scroll-down', reflect: true }) scrollDown: boolean = false;\n\n  /** Stop fading the content when collapsing/expanding. */\n  @Prop({ attribute: 'no-fading', reflect: true }) noFading: boolean = false;\n\n  /** If true, collapse/expand based on the nearest header shrink event. */\n  @Prop({ attribute: 'collapse-on-header-shrink', reflect: true }) collapseOnHeaderShrink: boolean =\n    false;\n\n  /**\n   * Handles `leHeaderShrinkChange` events from the `le-header`.\n   * In case multiple headers are present, only the nearest one in the DOM tree is used.\n   */\n  @Listen('leHeaderShrinkChange', { target: 'window' })\n  handleHeaderShrink(ev: Event) {\n    const e = ev as CustomEvent<{ shrunk: boolean }>;\n    this.headerShrunk = !!e.detail?.shrunk;\n  }\n\n  @State() private headerShrunk: boolean = false;\n\n  componentWillLoad() {\n    // Stencil boolean props default to `false` when the attribute is missing.\n    // For this component, the desired default is open=true.\n    if (!this.el.hasAttribute('open')) {\n      this.open = true;\n    }\n  }\n\n  componentDidLoad() {\n    this.applyOpenState();\n  }\n\n  @Watch('open')\n  protected onOpenChange() {\n    this.applyOpenState();\n  }\n\n  @Watch('headerShrunk')\n  protected onDrivenStateChange() {\n    this.applyOpenState();\n  }\n\n  private shouldBeOpen() {\n    if (!this.open) return false;\n    if (this.collapseOnHeaderShrink && this.headerShrunk) return false;\n    return true;\n  }\n\n  private applyOpenState() {\n    const nextOpen = this.shouldBeOpen();\n    this.el.toggleAttribute('data-open', nextOpen);\n  }\n\n  render() {\n    return (\n      <Host data-open={this.shouldBeOpen() ? 'true' : 'false'}>\n        <le-component component=\"le-collapse\">\n          <div class=\"region\" part=\"region\">\n            <slot></slot>\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"le-collapse.js","sourceRoot":"","sources":["../../../src/components/le-collapse/le-collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIxF;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;IACV,EAAE,CAAc;IAE3B;;;OAGG;IACqC,MAAM,GAAY,KAAK,CAAC;IAEhE,qEAAqE;IAClB,UAAU,GAAY,KAAK,CAAC;IAE/E,yDAAyD;IACR,QAAQ,GAAY,KAAK,CAAC;IAE3E,yEAAyE;IACR,sBAAsB,GACrF,KAAK,CAAC;IAER;;;OAGG;IAEH,kBAAkB,CAAC,EAAS;QAC1B,MAAM,CAAC,GAAG,EAAsC,CAAC;QACjD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC;IACzC,CAAC;IAEgB,YAAY,GAAY,KAAK,CAAC;IAE/C,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGS,YAAY;QACpB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGS,mBAAmB;QAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAC9B,IAAI,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO,KAAK,CAAC;QACnE,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,cAAc;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACrC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,kEAAY,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YACrD,qEAAc,SAAS,EAAC,aAAa;gBACnC,4DAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,QAAQ;oBAC3E,8DAAa,CACT,CACO,CACV,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nexport type LeCollapseAnimation = 'fade' | 'collapse' | 'fade-collapse';\n\n/**\n * Animated show/hide wrapper.\n *\n * Supports height collapse (auto->0) and/or fading.\n * Can optionally listen to the nearest `le-header` shrink events.\n *\n * @slot - Content to animate\n *\n * @cssprop --le-collapse-duration - Transition duration\n *\n * @csspart region - Collapsible region\n * @csspart content - Inner content\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-collapse',\n  styleUrl: 'le-collapse.css',\n  shadow: true,\n})\nexport class LeCollapse {\n  @Element() el: HTMLElement;\n\n  /**\n   * Since Stencil boolean props default to `false` when the attribute is missing.\n   * instead of `open` defaulting to `true`, using a `closed` prop.\n   */\n  @Prop({ mutable: true, reflect: true }) closed: boolean = false;\n\n  /** Whether the content should scroll down from the top when open. */\n  @Prop({ attribute: 'scroll-down', reflect: true }) scrollDown: boolean = false;\n\n  /** Stop fading the content when collapsing/expanding. */\n  @Prop({ attribute: 'no-fading', reflect: true }) noFading: boolean = false;\n\n  /** If true, collapse/expand based on the nearest header shrink event. */\n  @Prop({ attribute: 'collapse-on-header-shrink', reflect: true }) collapseOnHeaderShrink: boolean =\n    false;\n\n  /**\n   * Handles `leHeaderShrinkChange` events from the `le-header`.\n   * In case multiple headers are present, only the nearest one in the DOM tree is used.\n   */\n  @Listen('leHeaderShrinkChange', { target: 'window' })\n  handleHeaderShrink(ev: Event) {\n    const e = ev as CustomEvent<{ shrunk: boolean }>;\n    this.headerShrunk = !!e.detail?.shrunk;\n  }\n\n  @State() private headerShrunk: boolean = false;\n\n  componentDidLoad() {\n    this.applyOpenState();\n  }\n\n  @Watch('open')\n  protected onOpenChange() {\n    this.applyOpenState();\n  }\n\n  @Watch('headerShrunk')\n  protected onDrivenStateChange() {\n    this.applyOpenState();\n  }\n\n  private shouldBeOpen() {\n    if (this.closed) return false;\n    if (this.collapseOnHeaderShrink && this.headerShrunk) return false;\n    return true;\n  }\n\n  private applyOpenState() {\n    const nextOpen = this.shouldBeOpen();\n    this.el.toggleAttribute('data-open', nextOpen);\n  }\n\n  render() {\n    return (\n      <Host data-open={this.shouldBeOpen() ? 'true' : 'false'}>\n        <le-component component=\"le-collapse\">\n          <div class={{ 'region': true, 'scroll-down': this.scrollDown }} part=\"region\">\n            <slot></slot>\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -238,7 +238,7 @@ export class LeCombobox {
     }
     render() {
         const hasValue = this.inputValue.length > 0;
-        return (h("le-component", { key: '465108f53d7f7f4952288894d9e8fe7963d37275', component: "le-combobox" }, h("le-dropdown-base", { key: '202960374cb445e5b45856dd50f973ebfbdc9b8d', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.filterOption, filterQuery: this.inputValue, emptyText: this.emptyText, fullWidth: this.fullWidth, closeOnClickOutside: false, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: 'a45f5c63e4b4f854b076a59b89b2002ae4ad7647', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, h("le-string-input", { key: '1b4ba18526eb55434dec28d6a033bdb8a2db6d79', mode: "default", hideDescription: true, inputRef: el => (this.inputEl = el), type: "text", class: "combobox-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list", onInput: this.handleInputChange, onFocus: this.handleInputFocus, onKeyDown: this.handleInputKeyDown }), hasValue && !this.disabled && (h("button", { key: '950b1a1ba5b8060b373c8fb0f25f64d29b38d5b9', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, h("svg", { key: '43c975d5797cf669c298d96e4fcd85d85fcf5780', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'b3ab58b014abac2cc509447b940d3f95d713f2c2', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '32723ec3ebcd615c8fdd3f8e29bc7e418efdfd17', class: "combobox-arrow" }, h("svg", { key: '9cb0e39189b7cffb6723185a7800d93c367e8557', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '80f4010bce48ab71a31b9681c18c9d2f6041b763', d: "M4 6l4 4 4-4" }))))), this.name && h("input", { key: 'b1ae25e4537e3fed0d3a9f43ececb85f39e8c57a', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+        return (h("le-component", { key: '5d1aae34a01c8e9d4744dee3921ad07733961158', component: "le-combobox" }, h("le-dropdown-base", { key: '449d64f2b8744828709c32051d4c6528621e7c4d', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.filterOption, filterQuery: this.inputValue, emptyText: this.emptyText, fullWidth: this.fullWidth, closeOnClickOutside: false, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: '5d4c616f2c55fba8ca5836a27af445123ef0755d', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, h("le-string-input", { key: '70f876a2a8842ce3fd20994e11501bc7766e6570', mode: "default", hideDescription: true, inputRef: el => (this.inputEl = el), type: "text", class: "combobox-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list", onInput: this.handleInputChange, onFocus: this.handleInputFocus, onKeyDown: this.handleInputKeyDown }), hasValue && !this.disabled && (h("button", { key: 'ca5e8bdd951650f63c2284bf4d4634964462838c', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, h("svg", { key: '49b3e50b68a9c5f8a6c0708a43a60be559f6cdd8', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '33b347862ce2321bcc38823a3b25774f06e625f3', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: 'aa4080873acd15706757f33c032ad4c0caa03f01', class: "combobox-arrow" }, h("svg", { key: '86782ee6405d553baecac64d6a780a79dd5deda0', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '93cc4e3a3898c7f9b4149c2bd54934f7d9d4519b', d: "M4 6l4 4 4-4" }))))), this.name && h("input", { key: 'b0766761f5e8f48428af5e1a360cb2a51a9bf316', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
     }
     static get is() { return "le-combobox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,7 +61,7 @@ export class LeCurrentHeading {
         }
     }
     render() {
-        return (h(Host, { key: 'e6b473d3633eb8f194edf19e88850390f4319929' }, this.activeText ? (h("span", { class: "title", part: "title" }, this.activeText)) : (h("slot", null))));
+        return (h(Host, { key: 'd6773c072799d0337b7d2bade9de2c169e35d3c8' }, this.activeText ? (h("span", { class: "title", part: "title" }, this.activeText)) : (h("slot", null))));
     }
     static get is() { return "le-current-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-dropdown-base/le-dropdown-base.js

@@ -339,7 +339,7 @@ export class LeDropdownBase {
     }
     render() {
         const dropdownWidth = this.width || (this.triggerWidth ? `${this.triggerWidth}px` : undefined);
-        return (h(Host, { key: '838bef3556e494770fbb34cbff69c782ca717fe4' }, h("le-popover", { key: 'd72576e799c6cc065d3b0f3f1b918e84a7c5f690', ref: el => (this.popoverEl = el), position: "bottom", align: "start", showClose: false, closeOnClickOutside: this.closeOnClickOutside, closeOnEscape: true, offset: 4, width: dropdownWidth, minWidth: "150px", "trigger-full-width": this.fullWidth, onLePopoverOpen: this.handlePopoverOpen, onLePopoverClose: this.handlePopoverClose }, h("slot", { key: 'fbe84a553a126ad34f3ea159b182f825a065d1f6', name: "trigger", slot: "trigger" }), h("slot", { key: '957ac9208cdfe8be96a15979853e0b5cfdfc756f', name: "header" }), h("div", { key: '8c15f620b55035191979aca56514771c860051e3', class: "dropdown-list", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: el => (this.listEl = el), style: { maxHeight: this.maxHeight } }, this.renderOptions()))));
+        return (h(Host, { key: 'eeb6316ffb006adb8d53f3c2f81cadde32d261ae' }, h("le-popover", { key: '703c57bf2185590df226787778ad67cd423ce943', ref: el => (this.popoverEl = el), position: "bottom", align: "start", showClose: false, closeOnClickOutside: this.closeOnClickOutside, closeOnEscape: true, offset: 4, width: dropdownWidth, minWidth: "150px", "trigger-full-width": this.fullWidth, onLePopoverOpen: this.handlePopoverOpen, onLePopoverClose: this.handlePopoverClose }, h("slot", { key: 'bc401b4af80c9e6d15c4f5fe2a5ff2687b9ae582', name: "trigger", slot: "trigger" }), h("slot", { key: '3414d6eb1d4fecfe642b31e2a1abd271c83ab2df', name: "header" }), h("div", { key: '685d0aa6e15b6a191d517e194ae96302cfb4a191', class: "dropdown-list", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: el => (this.listEl = el), style: { maxHeight: this.maxHeight } }, this.renderOptions()))));
     }
     static get is() { return "le-dropdown-base"; }
     static get encapsulation() { return "shadow"; }

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

@@ -268,7 +268,7 @@ export class LeHeader {
             'is-hidden': !this.revealed,
             'is-shrunk': this.shrunk,
         });
-        return (h(Host, { key: '3fc823975a0ebcae3cb799bf94e35a289813cd35', class: hostClass, onMouseEnter: () => {
+        return (h(Host, { key: '564328055a69a1646c7f9030ac274a30c3baad0a', class: hostClass, onMouseEnter: () => {
                 if (!this.expandOnHover)
                     return;
                 this.hoverActive = true;
@@ -278,7 +278,7 @@ export class LeHeader {
                     return;
                 this.hoverActive = false;
                 this.scheduleUpdate(true);
-            } }, h("le-component", { key: 'bb8e3c5717112e427fd86a6af4231b33147769e7', component: "le-header" }, h("header", { key: 'da96d6a1eb91a85ea8050870895fcd13bdb28391', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, h("div", { key: '04386a3d535189012655ee352822812349d386d7', class: "inner", part: "inner" }, h("div", { key: '4b1fc43ca08e981f3dc810a23c14e6ed3200a1de', class: "row", part: "row" }, h("div", { key: '8fad255865a0d2e2662f3ad1030d48f8586ae8c7', class: "start", part: "start" }, h("le-slot", { key: '702eeebfe3133dae44e5268848ce5cac81f3b306', name: "start", label: "Start", description: "Logo / back button / nav", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: 'bdd3478abbdcd46143ce8a79d096baab84d12588', name: "start" }))), h("div", { key: 'e5b7d3d42e28d80b2df89a3ab365a29b39544f14', class: "title", part: "title" }, h("le-slot", { key: 'b5a68c8baaf05769ea838ca0482fa1db52b03b3a', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, h("span", { key: '91763f968886e052a637959253863e583da51b76', class: "title-slot", part: "title" }, h("slot", { key: '060be7c91cca50c26db56cd15ad5d38962c8003f', name: "title" })))), h("div", { key: '938222741cbe15e531ff355185c4f599a3d26147', class: "end", part: "end" }, h("le-slot", { key: '8e1c91426dc87f1bdcb98d33b7da4cc6988781cf', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: '67e4bda7e7c754dda5a7d9505a9b451f2487f47b', name: "end" })))), h("div", { key: '84dfedd30ec9bd49b668b2e1676ce3712b9d2faf', class: "secondary", part: "secondary" }, h("le-slot", { key: '95c56a8e3dbaaf284b03d72f1d9ec01d24c148d2', name: "", label: "Secondary", description: "Secondary row content", "allowed-components": "le-tabs,le-tab-bar,le-select,le-combobox,le-text,le-stack,le-box" }, h("slot", { key: '240df8fc23a9bc4e7aa294c52b229c7abf7c427d' }))))))));
+            } }, h("le-component", { key: 'a9feac7b7229ed250b4c2cade7e5dce8bb79e634', component: "le-header" }, h("header", { key: 'acebe4ea5222593e65190a35515c60ee7e15549a', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, h("div", { key: 'bf37e677a5058e4e9bf74a4f6a3c62112daaea20', class: "inner", part: "inner" }, h("div", { key: 'd6886dba1b0e8003a2080f03f6bfe3fa0ffdca18', class: "row", part: "row" }, h("div", { key: 'd4c328bb74c955fa377a06f1a33783750bd83237', class: "start", part: "start" }, h("le-slot", { key: '1b9d58c81f8a498637eefd7a1310c961b014d1a5', name: "start", label: "Start", description: "Logo / back button / nav", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: 'd5c2727c4f427b60cad9575c0e74a18e7b229462', name: "start" }))), h("div", { key: '35831f9dfb3ff584cdc573081ebdeef1968f06c7', class: "title", part: "title" }, h("le-slot", { key: 'bed684a7880dfa79b4b7585dcb3c2bd024e0cc93', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, h("span", { key: 'f523ee36ff1f0c6a2793e5d813d6b9a9c632f2bf', class: "title-slot", part: "title" }, h("slot", { key: '39e750e3f4231406552187e961ae7e9a206d240b', name: "title" })))), h("div", { key: 'c99435b41a905b6780c07e7103125d7c439af7cb', class: "end", part: "end" }, h("le-slot", { key: 'efca1aadcf9108add84dbb5a2ea539fb95e795c6', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: 'd04b78ca1eeb1cbae4b3575f03231b93ed4d9692', name: "end" })))), h("div", { key: 'd83bda303c5fcd63da3e0419bd9276677d8f5cc7', class: "secondary", part: "secondary" }, h("le-slot", { key: '1f5f6d317e969c54d87a6ad516fed071e72f342c', name: "", label: "Secondary", description: "Secondary row content", "allowed-components": "le-tabs,le-tab-bar,le-select,le-combobox,le-text,le-stack,le-box" }, h("slot", { key: 'fb5a6a434190658f8fb55e3bc21d5f952a559ad5' }))))))));
     }
     static get is() { return "le-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ import { h, Host } from "@stencil/core";
  */
 export class LeHeaderPlaceholder {
     render() {
-        return (h(Host, { key: '759dfba2a50f5d3240b78c46526f9d246098e4c3', "aria-hidden": "true", style: {
+        return (h(Host, { key: '53a4cd451e1b53a4be3b6b20c82e12f53a982a17', "aria-hidden": "true", style: {
                 display: 'block',
                 height: 'var(--le-header-height, 64px)',
             } }));

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

@@ -0,0 +1,13 @@
+:host {
+  display: inline-block;
+
+  width: var(--le-icon-size, var(--le-size-4));
+  height: var(--le-icon-size, var(--le-size-4));
+
+  color: var(--le-icon-color, var(--le-color-text-primary));
+}
+
+:host svg {
+  display: block;
+  fill: currentColor;
+}