@limetech/lime-elements 34.2.0-next.2 → 34.2.0-next.6

package/dist/cjs/limel-tooltip_2.cjs.entry.js

@@ -7,9 +7,15 @@ const randomString = require('./random-string-4c3b7f1c.js');
 
 const tooltipCss = ".trigger-anchor{position:relative}";
 
+const DEFAULT_MAX_LENGTH = 50;
 let Tooltip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * The maximum amount of characters before rendering 'label' and
+     * 'helperLabel' in two rows.
+     */
+    this.maxlength = DEFAULT_MAX_LENGTH;
     this.showTooltip = () => {
       const tooltipDelay = 500;
       this.showTooltipTimeoutHandle = window.setTimeout(() => {
@@ -35,7 +41,7 @@ let Tooltip = class {
     return (index.h("div", { class: "trigger-anchor" }, index.h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: {
         'z-index': tooltipZIndex,
         'pointer-events': 'none',
-      } }, index.h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
+      } }, index.h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
   }
   setOwnerAriaLabel() {
     const owner = this.getOwnerElement();
@@ -67,16 +73,26 @@ let Tooltip = class {
 };
 Tooltip.style = tooltipCss;
 
-const tooltipContentCss = ":host{animation:display-tooltip 0.2s ease;display:flex;flex-direction:row;border-radius:0.25rem;padding:0.25rem 0.5rem;font-size:0.875rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800));padding:0 0 0 1rem}.helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";
+const tooltipContentCss = ":host{animation:display-tooltip 0.2s ease;display:flex;border-radius:0.25rem;padding:0.25rem 0.5rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}text{font-size:0.875rem;line-height:1.25;display:flex;column-gap:1rem}text.has-column-layout{display:table-cell;width:fit-content;max-width:min(var(--tooltip-max-width-of-text), 80vw)}text.has-column-layout .label{padding-bottom:0.5rem}text.has-column-layout .helper-label{padding-bottom:0.25rem}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800))}.helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";
 
 let TooltipContent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
   render() {
+    let isLabelsTextLong = false;
+    if (this.helperLabel && this.maxlength) {
+      isLabelsTextLong =
+        this.label.length + this.helperLabel.length > this.maxlength;
+    }
+    const props = {};
+    if (this.maxlength) {
+      props.style = {
+        '--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',
+      };
+    }
     return [
-      index.h("div", { class: "label" }, this.label),
-      index.h("div", { class: "helper-label" }, this.helperLabel),
+      index.h("text", Object.assign({ class: { 'has-column-layout': isLabelsTextLong } }, props), index.h("div", { class: "label" }, this.label), index.h("div", { class: "helper-label" }, this.helperLabel)),
     ];
   }
 };

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-linear-progress.cjs",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-menu-list.cjs",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-color-picker-palette_2.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}],[1,"limel-popover",{"open":[4]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-list_3.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-tooltip_2.cjs",[[1,"limel-tooltip",{"label":[513],"helperLabel":[513,"helper-label"],"elementId":[513,"element-id"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"]}]]]], options);
+  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-linear-progress.cjs",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-menu-list.cjs",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-color-picker-palette_2.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}],[1,"limel-popover",{"open":[4]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-list_3.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-tooltip_2.cjs",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
   });
 };
 

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

@@ -1,4 +1,4 @@
-import { MDCCheckbox } from '@material/checkbox';
+import { MDCCheckbox, cssClasses } from '@material/checkbox';
 import { MDCFormField } from '@material/form-field';
 import { Component, Element, Event, h, Prop, State, Watch, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
@@ -33,6 +33,18 @@ export class Checkbox {
     this.required = false;
     this.modified = false;
     this.id = createRandomString();
+    this.initialize = () => {
+      const element = this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');
+      if (!element) {
+        return;
+      }
+      this.formField = new MDCFormField(element);
+      this.mdcCheckbox = new MDCCheckbox(this.getCheckboxElement());
+      this.formField.input = this.mdcCheckbox;
+    };
+    this.getCheckboxElement = () => {
+      return this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox');
+    };
     this.onChange = (event) => {
       event.stopPropagation();
       this.change.emit(this.mdcCheckbox.checked);
@@ -52,19 +64,14 @@ export class Checkbox {
   componentDidLoad() {
     this.initialize();
   }
-  initialize() {
-    const element = this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');
-    if (!element) {
-      return;
-    }
-    this.formField = new MDCFormField(element);
-    this.mdcCheckbox = new MDCCheckbox(this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox'));
-    this.formField.input = this.mdcCheckbox;
-  }
   disconnectedCallback() {
     var _a, _b;
     (_a = this.mdcCheckbox) === null || _a === void 0 ? void 0 : _a.destroy();
     (_b = this.formField) === null || _b === void 0 ? void 0 : _b.destroy();
+    const checkboxElement = this.getCheckboxElement();
+    if (checkboxElement) {
+      checkboxElement.classList.remove(cssClasses.ANIM_CHECKED_INDETERMINATE, cssClasses.ANIM_CHECKED_UNCHECKED, cssClasses.ANIM_INDETERMINATE_CHECKED, cssClasses.ANIM_INDETERMINATE_UNCHECKED, cssClasses.ANIM_UNCHECKED_CHECKED, cssClasses.ANIM_UNCHECKED_INDETERMINATE);
+    }
   }
   render() {
     return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, invalid: this.required && this.modified && !this.checked, onChange: this.onChange, id: this.id }));

package/dist/collection/components/dialog/dialog.css

@@ -680,4 +680,8 @@ slot[name=button] {
   slot[name=button] {
     flex-direction: column-reverse;
   }
+
+  .mdc-dialog__actions {
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
+  }
 }

package/dist/collection/components/list/list.css

@@ -3102,23 +3102,23 @@ a.mdc-list-item {
   bottom: 0;
 }
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list hr.mdc-deprecated-list-divider.mdc-deprecated-list-divider--inset {
-  --icon-width: 2.5625rem;
-  --icon-right-padding: 1rem;
-  --list-right-padding: 1rem;
-  margin-left: calc( var(--icon-width) + var(--icon-right-padding) );
+  --icon-width: 2.5rem;
+  --icon-right-padding: 0.75rem;
+  --list-right-padding: 0.75rem;
+  right: 0;
   width: calc( 100% - var(--icon-width) - var(--icon-right-padding) - var(--list-right-padding) );
 }
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list hr.mdc-deprecated-list-divider.mdc-deprecated-list-divider--inset.x-small {
-  --icon-width: 1.4375rem;
+  --icon-width: 1.5rem;
 }
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list hr.mdc-deprecated-list-divider.mdc-deprecated-list-divider--inset.small {
-  --icon-width: 1.875rem;
+  --icon-width: 2rem;
 }
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list hr.mdc-deprecated-list-divider.mdc-deprecated-list-divider--inset.medium {
   --icon-width: 2.5rem;
 }
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list hr.mdc-deprecated-list-divider.mdc-deprecated-list-divider--inset.large {
-  --icon-width: 2.875rem;
+  --icon-width: 3rem;
 }
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item:last-child hr.mdc-deprecated-list-divider {
   display: none;

package/dist/collection/components/menu/menu.js

@@ -9,8 +9,9 @@ import { zipObject } from 'lodash-es';
  * @exampleComponent limel-example-menu-icons
  * @exampleComponent limel-example-menu-badge-icons
  * @exampleComponent limel-example-menu-grid
- * @exampleComponent limel-example-menu-composite
  * @exampleComponent limel-example-menu-hotkeys
+ * @exampleComponent limel-example-menu-secondary-text
+ * @exampleComponent limel-example-menu-composite
  */
 export class Menu {
   constructor() {

package/dist/collection/components/menu-list/menu-list-renderer.js

@@ -145,6 +145,6 @@ export class MenuListRenderer {
         this.commandKey &&
         ['small', 'x-small'].includes(this.config.iconSize),
     };
-    return (h("ul", { class: classNames, "aria-hidden": true, role: "menu", "aria-orientation": "vertical" }, items.map(this.renderMenuItem)));
+    return (h("ul", { class: classNames, "aria-hidden": true, role: "menu", "aria-orientation": "vertical", style: { '--maxLinesSecondaryText': '2' } }, items.map(this.renderMenuItem)));
   }
 }

package/dist/collection/components/menu-list/menu-list.css

@@ -3108,23 +3108,23 @@ a.mdc-list-item {
   bottom: 0;
 }
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list hr.mdc-deprecated-list-divider.mdc-deprecated-list-divider--inset {
-  --icon-width: 2.5625rem;
-  --icon-right-padding: 1rem;
-  --list-right-padding: 1rem;
-  margin-left: calc( var(--icon-width) + var(--icon-right-padding) );
+  --icon-width: 2.5rem;
+  --icon-right-padding: 0.75rem;
+  --list-right-padding: 0.75rem;
+  right: 0;
   width: calc( 100% - var(--icon-width) - var(--icon-right-padding) - var(--list-right-padding) );
 }
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list hr.mdc-deprecated-list-divider.mdc-deprecated-list-divider--inset.x-small {
-  --icon-width: 1.4375rem;
+  --icon-width: 1.5rem;
 }
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list hr.mdc-deprecated-list-divider.mdc-deprecated-list-divider--inset.small {
-  --icon-width: 1.875rem;
+  --icon-width: 2rem;
 }
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list hr.mdc-deprecated-list-divider.mdc-deprecated-list-divider--inset.medium {
   --icon-width: 2.5rem;
 }
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list hr.mdc-deprecated-list-divider.mdc-deprecated-list-divider--inset.large {
-  --icon-width: 2.875rem;
+  --icon-width: 3rem;
 }
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item:last-child hr.mdc-deprecated-list-divider {
   display: none;
@@ -4701,4 +4701,7 @@ a.mdc-list-item {
 }
 .mdc-deprecated-list .mdc-deprecated-list-item[role=menuitem] .mdc-deprecated-list-item__graphic {
   margin-right: 0.875rem;
+}
+.mdc-deprecated-list hr.mdc-deprecated-list-divider.mdc-deprecated-list-divider--inset {
+  display: none;
 }

package/dist/collection/components/tooltip/tooltip-content.css

@@ -1,21 +1,36 @@
 :host {
   animation: display-tooltip 0.2s ease;
   display: flex;
-  flex-direction: row;
   border-radius: 0.25rem;
   padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
   background-color: rgb(var(--contrast-1300));
   box-shadow: var(--shadow-depth-16);
 }
 
+text {
+  font-size: 0.875rem;
+  line-height: 1.25;
+  display: flex;
+  column-gap: 1rem;
+}
+text.has-column-layout {
+  display: table-cell;
+  width: fit-content;
+  max-width: min(var(--tooltip-max-width-of-text), 80vw);
+}
+text.has-column-layout .label {
+  padding-bottom: 0.5rem;
+}
+text.has-column-layout .helper-label {
+  padding-bottom: 0.25rem;
+}
+
 .label {
   color: rgb(var(--contrast-200));
 }
 
 .helper-label {
   color: rgb(var(--contrast-800));
-  padding: 0 0 0 1rem;
 }
 .helper-label:empty {
   display: none;

package/dist/collection/components/tooltip/tooltip-content.js

@@ -6,9 +6,21 @@ import { Component, h, Prop } from '@stencil/core';
  */
 export class TooltipContent {
   render() {
+    let isLabelsTextLong = false;
+    if (this.helperLabel && this.maxlength) {
+      isLabelsTextLong =
+        this.label.length + this.helperLabel.length > this.maxlength;
+    }
+    const props = {};
+    if (this.maxlength) {
+      props.style = {
+        '--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',
+      };
+    }
     return [
-      h("div", { class: "label" }, this.label),
-      h("div", { class: "helper-label" }, this.helperLabel),
+      h("text", Object.assign({ class: { 'has-column-layout': isLabelsTextLong } }, props),
+        h("div", { class: "label" }, this.label),
+        h("div", { class: "helper-label" }, this.helperLabel)),
     ];
   }
   static get is() { return "limel-tooltip-content"; }
@@ -28,11 +40,11 @@ export class TooltipContent {
         "resolved": "string",
         "references": {}
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Short descriptive text of the owner element."
+        "text": "Read more in tooltip.tsx"
       },
       "attribute": "label",
       "reflect": true
@@ -46,13 +58,30 @@ export class TooltipContent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Additional helper text for the element.\nExample usage can be a keyboard shortcut to activate the function of the\nowner element."
+        "text": "Read more in tooltip.tsx"
       },
       "attribute": "helper-label",
       "reflect": true
+    },
+    "maxlength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Read more in tooltip.tsx"
+      },
+      "attribute": "maxlength",
+      "reflect": true
     }
   }; }
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -1,5 +1,6 @@
 import { Component, h, Prop, Element, State } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
+const DEFAULT_MAX_LENGTH = 50;
 /**
  * A tooltip can be used to display a descriptive text for any element.
  * The displayed content must be a brief and supplemental string of text,
@@ -40,10 +41,17 @@ import { createRandomString } from '../../util/random-string';
  * effortlessly recognize can be hovered.
  *
  * @exampleComponent limel-example-tooltip
+ * @exampleComponent limel-example-tooltip-max-character
+ * @exampleComponent limel-example-tooltip-composite
  * @private
  */
 export class Tooltip {
   constructor() {
+    /**
+     * The maximum amount of characters before rendering 'label' and
+     * 'helperLabel' in two rows.
+     */
+    this.maxlength = DEFAULT_MAX_LENGTH;
     this.showTooltip = () => {
       const tooltipDelay = 500;
       this.showTooltipTimeoutHandle = window.setTimeout(() => {
@@ -71,7 +79,7 @@ export class Tooltip {
           'z-index': tooltipZIndex,
           'pointer-events': 'none',
         } },
-        h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
+        h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
   }
   setOwnerAriaLabel() {
     const owner = this.getOwnerElement();
@@ -108,6 +116,23 @@ export class Tooltip {
     "$": ["tooltip.css"]
   }; }
   static get properties() { return {
+    "elementId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "ID of the owner element that the tooltip should describe.\nMust be a child within the same document fragment as the tooltip element\nitself."
+      },
+      "attribute": "element-id",
+      "reflect": true
+    },
     "label": {
       "type": "string",
       "mutable": false,
@@ -134,7 +159,7 @@ export class Tooltip {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Additional helper text for the element.\nExample usage can be a keyboard shortcut to activate the function of the\nowner element."
@@ -142,22 +167,23 @@ export class Tooltip {
       "attribute": "helper-label",
       "reflect": true
     },
-    "elementId": {
-      "type": "string",
+    "maxlength": {
+      "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
-      "required": true,
-      "optional": false,
+      "required": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "ID of the owner element that the tooltip should describe.\nMust be a child within the same document fragment as the tooltip element\nitself."
+        "text": "The maximum amount of characters before rendering 'label' and\n'helperLabel' in two rows."
       },
-      "attribute": "element-id",
-      "reflect": true
+      "attribute": "maxlength",
+      "reflect": true,
+      "defaultValue": "DEFAULT_MAX_LENGTH"
     }
   }; }
   static get states() { return {

package/dist/esm/lime-elements.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"]}]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-linear-progress",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-menu-list",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover-surface",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-input-field",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-color-picker-palette_2",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}],[1,"limel-popover",{"open":[4]}]]],["limel-badge",[[1,"limel-badge",{"label":[514]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-list_3",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-tooltip_2",[[1,"limel-tooltip",{"label":[513],"helperLabel":[513,"helper-label"],"elementId":[513,"element-id"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"]}]]]], options);
+  return bootstrapLazy([["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"]}]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-linear-progress",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-menu-list",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover-surface",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-input-field",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-color-picker-palette_2",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}],[1,"limel-popover",{"open":[4]}]]],["limel-badge",[[1,"limel-badge",{"label":[514]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-list_3",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-tooltip_2",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
 });

package/dist/esm/limel-checkbox.entry.js

@@ -714,6 +714,18 @@ let Checkbox = class {
     this.required = false;
     this.modified = false;
     this.id = createRandomString();
+    this.initialize = () => {
+      const element = this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');
+      if (!element) {
+        return;
+      }
+      this.formField = new MDCFormField(element);
+      this.mdcCheckbox = new MDCCheckbox(this.getCheckboxElement());
+      this.formField.input = this.mdcCheckbox;
+    };
+    this.getCheckboxElement = () => {
+      return this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox');
+    };
     this.onChange = (event) => {
       event.stopPropagation();
       this.change.emit(this.mdcCheckbox.checked);
@@ -733,19 +745,14 @@ let Checkbox = class {
   componentDidLoad() {
     this.initialize();
   }
-  initialize() {
-    const element = this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');
-    if (!element) {
-      return;
-    }
-    this.formField = new MDCFormField(element);
-    this.mdcCheckbox = new MDCCheckbox(this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox'));
-    this.formField.input = this.mdcCheckbox;
-  }
   disconnectedCallback() {
     var _a, _b;
     (_a = this.mdcCheckbox) === null || _a === void 0 ? void 0 : _a.destroy();
     (_b = this.formField) === null || _b === void 0 ? void 0 : _b.destroy();
+    const checkboxElement = this.getCheckboxElement();
+    if (checkboxElement) {
+      checkboxElement.classList.remove(cssClasses$1.ANIM_CHECKED_INDETERMINATE, cssClasses$1.ANIM_CHECKED_UNCHECKED, cssClasses$1.ANIM_INDETERMINATE_CHECKED, cssClasses$1.ANIM_INDETERMINATE_UNCHECKED, cssClasses$1.ANIM_UNCHECKED_CHECKED, cssClasses$1.ANIM_UNCHECKED_INDETERMINATE);
+    }
   }
   render() {
     return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, invalid: this.required && this.modified && !this.checked, onChange: this.onChange, id: this.id }));