@limetech/lime-elements 34.1.1-next.5 → 34.2.0-next.4

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],"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.css

@@ -764,6 +764,9 @@
   display: flex;
   flex-wrap: wrap;
 }
+.mdc-form-field .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background, .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
+  background-color: rgb(var(--contrast-300));
+}
 .mdc-form-field .mdc-checkbox.mdc-checkbox--invalid .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   border-color: var(--lime-error-text-color);
 }
@@ -775,14 +778,14 @@
   border-radius: 0.25rem;
   box-shadow: var(--shadow-depth-8-focused);
 }
+.mdc-form-field .mdc-checkbox--disabled {
+  opacity: 0.5;
+}
 .mdc-form-field label {
   cursor: pointer;
   line-height: normal;
   padding-left: 0;
 }
-.mdc-form-field label.mdc-checkbox--disabled {
-  opacity: 0.37;
-}
 .mdc-form-field label.mdc-checkbox--required::after {
   margin-left: 0.0625rem;
   content: "*";

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

@@ -1,6 +1,6 @@
 import { MDCCheckbox } from '@material/checkbox';
 import { MDCFormField } from '@material/form-field';
-import { Component, Element, Event, h, Prop, State, } from '@stencil/core';
+import { Component, Element, Event, h, Prop, State, Watch, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 import { CheckboxTemplate } from './checkbox.template';
 /**
@@ -23,13 +23,28 @@ export class Checkbox {
      * The value of the checkbox. Set to `true` to make the checkbox checked.
      */
     this.checked = false;
+    /**
+     * Enables indeterminate state. Set to `true` to signal indeterminate check.
+     */
+    this.indeterminate = false;
     /**
      * Set to `true` to indicate that the checkbox must be checked.
      */
     this.required = false;
     this.modified = false;
     this.id = createRandomString();
-    this.onChange = this.onChange.bind(this);
+    this.onChange = (event) => {
+      event.stopPropagation();
+      this.change.emit(this.mdcCheckbox.checked);
+      this.modified = true;
+    };
+  }
+  handleCheckedChange(newValue) {
+    this.mdcCheckbox.checked = newValue;
+  }
+  handleIndeterminateChange(newValue) {
+    this.mdcCheckbox.checked = this.checked;
+    this.mdcCheckbox.indeterminate = newValue;
   }
   connectedCallback() {
     this.initialize();
@@ -52,12 +67,7 @@ export class Checkbox {
     (_b = this.formField) === null || _b === void 0 ? void 0 : _b.destroy();
   }
   render() {
-    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, checked: this.checked, required: this.required, invalid: this.required && this.modified && !this.checked, onChange: this.onChange, id: this.id }));
-  }
-  onChange(event) {
-    event.stopPropagation();
-    this.change.emit(this.mdcCheckbox.checked);
-    this.modified = true;
+    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 }));
   }
   static get is() { return "limel-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -156,6 +166,24 @@ export class Checkbox {
       "reflect": true,
       "defaultValue": "false"
     },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enables indeterminate state. Set to `true` to signal indeterminate check."
+      },
+      "attribute": "indeterminate",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "required": {
       "type": "boolean",
       "mutable": false,
@@ -195,4 +223,11 @@ export class Checkbox {
       }
     }]; }
   static get elementRef() { return "limelCheckbox"; }
+  static get watchers() { return [{
+      "propName": "checked",
+      "methodName": "handleCheckedChange"
+    }, {
+      "propName": "indeterminate",
+      "methodName": "handleIndeterminateChange"
+    }]; }
 }

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

@@ -1,13 +1,18 @@
 import { h } from '@stencil/core';
 export const CheckboxTemplate = (props) => {
+  const inputProps = {};
+  if (props.indeterminate) {
+    inputProps['data-indeterminate'] = 'true';
+  }
   return (h("div", { class: "mdc-form-field " },
     h("div", { class: {
         'mdc-checkbox': true,
         'mdc-checkbox--invalid': props.invalid,
         'mdc-checkbox--disabled': props.disabled,
         'mdc-checkbox--required': props.required,
+        'mdc-checkbox--indeterminate': props.indeterminate,
       } },
-      h("input", { type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled, required: props.required, onChange: props.onChange }),
+      h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled, required: props.required, onChange: props.onChange }, inputProps)),
       h("div", { class: "mdc-checkbox__background" },
         h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" },
           h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
@@ -16,6 +21,7 @@ export const CheckboxTemplate = (props) => {
         'mdc-checkbox--invalid': props.invalid,
         'mdc-checkbox--disabled': props.disabled,
         'mdc-checkbox--required': props.required,
+        'mdc-checkbox--indeterminate': props.indeterminate,
       }, htmlFor: props.id }, props.label),
     h(HelperText, { text: props.helperText })));
 };

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;
@@ -4030,6 +4030,9 @@ a.mdc-list-item {
   display: flex;
   flex-wrap: wrap;
 }
+.mdc-form-field .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background, .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
+  background-color: rgb(var(--contrast-300));
+}
 .mdc-form-field .mdc-checkbox.mdc-checkbox--invalid .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   border-color: var(--lime-error-text-color);
 }
@@ -4041,14 +4044,14 @@ a.mdc-list-item {
   border-radius: 0.25rem;
   box-shadow: var(--shadow-depth-8-focused);
 }
+.mdc-form-field .mdc-checkbox--disabled {
+  opacity: 0.5;
+}
 .mdc-form-field label {
   cursor: pointer;
   line-height: normal;
   padding-left: 0;
 }
-.mdc-form-field label.mdc-checkbox--disabled {
-  opacity: 0.37;
-}
 .mdc-form-field label.mdc-checkbox--required::after {
   margin-left: 0.0625rem;
   content: "*";

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;
@@ -4036,6 +4036,9 @@ a.mdc-list-item {
   display: flex;
   flex-wrap: wrap;
 }
+.mdc-form-field .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background, .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
+  background-color: rgb(var(--contrast-300));
+}
 .mdc-form-field .mdc-checkbox.mdc-checkbox--invalid .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   border-color: var(--lime-error-text-color);
 }
@@ -4047,14 +4050,14 @@ a.mdc-list-item {
   border-radius: 0.25rem;
   box-shadow: var(--shadow-depth-8-focused);
 }
+.mdc-form-field .mdc-checkbox--disabled {
+  opacity: 0.5;
+}
 .mdc-form-field label {
   cursor: pointer;
   line-height: normal;
   padding-left: 0;
 }
-.mdc-form-field label.mdc-checkbox--disabled {
-  opacity: 0.37;
-}
 .mdc-form-field label.mdc-checkbox--required::after {
   margin-left: 0.0625rem;
   content: "*";
@@ -4698,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/{checkbox.template-652ef73b.js → checkbox.template-50f7c07b.js}

@@ -1,14 +1,19 @@
 import { h } from './index-2316f345.js';
 
 const CheckboxTemplate = (props) => {
+  const inputProps = {};
+  if (props.indeterminate) {
+    inputProps['data-indeterminate'] = 'true';
+  }
   return (h("div", { class: "mdc-form-field " },
     h("div", { class: {
         'mdc-checkbox': true,
         'mdc-checkbox--invalid': props.invalid,
         'mdc-checkbox--disabled': props.disabled,
         'mdc-checkbox--required': props.required,
+        'mdc-checkbox--indeterminate': props.indeterminate,
       } },
-      h("input", { type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled, required: props.required, onChange: props.onChange }),
+      h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled, required: props.required, onChange: props.onChange }, inputProps)),
       h("div", { class: "mdc-checkbox__background" },
         h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" },
           h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
@@ -17,6 +22,7 @@ const CheckboxTemplate = (props) => {
         'mdc-checkbox--invalid': props.invalid,
         'mdc-checkbox--disabled': props.disabled,
         'mdc-checkbox--required': props.required,
+        'mdc-checkbox--indeterminate': props.indeterminate,
       }, htmlFor: props.id }, props.label),
     h(HelperText, { text: props.helperText })));
 };