@limetech/lime-elements 36.3.1-next.1 → 36.3.1

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-dock.cjs",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-split-button.cjs",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["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],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-info-tile.cjs",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["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-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["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-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-shortcut.cjs",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[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"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout.cjs",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"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],"errors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["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-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-dock-button.cjs",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["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-menu.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["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-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"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-circular-progress_2.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-portal.cjs",[[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-list_2.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]}]]],["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],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"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-popover_4.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-popover-surface",{"contentCollection":[16]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], 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-dock.cjs",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[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-split-button.cjs",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"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-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-info-tile.cjs",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[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"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["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-shortcut.cjs",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout.cjs",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["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-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"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],"errors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-dock-button.cjs",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["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-menu.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["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-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],"formatter":[16]}]]],["limel-helper-line.cjs",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"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-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-portal.cjs",[[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-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"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-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-list_2.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]}]]],["limel-popover_4.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-popover-surface",{"contentCollection":[16]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
   });
 };
 

package/dist/cjs/{multiple-8fab83eb.js → multiple-2af83b6d.js}

@@ -4,7 +4,6 @@ const isArray = require('./isArray-d188a04f.js');
 
 /**
  * Type guard for checking if a value is multiple items or not
- *
  * @param {T | T[]} value the value to check
  * @returns {boolean} true if value is multiple items, false otherwise
  */

package/dist/collection/collection-manifest.json

@@ -23,6 +23,7 @@
     "./components/form/form.js",
     "./components/grid/grid.js",
     "./components/header/header.js",
+    "./components/helper-line/helper-line.js",
     "./components/icon/icon.js",
     "./components/icon-button/icon-button.js",
     "./components/info-tile/info-tile.js",

package/dist/collection/components/badge/badge.js

@@ -3,7 +3,6 @@ import { abbreviate } from './format';
 /**
  * The Badge component can be used to display a notification badge,
  * optionally with a number or a text label.
- *
  * @exampleComponent limel-example-badge
  * @exampleComponent limel-example-badge-number
  * @exampleComponent limel-example-badge-string

package/dist/collection/components/badge/format.js

@@ -1,7 +1,6 @@
 import NumAbbr from 'number-abbreviate';
 /**
  * Abbreviate a number
- *
  * @param {number} value the number to abbreviate
  * @returns {string} abbreviated number
  */

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

@@ -29,7 +29,6 @@ import { createRandomString } from '../../util/random-string';
  *
  * Within the group, icon buttons will all have the same width, while each text button
  * inherits its width from its content.
- *
  * @exampleComponent limel-example-button-group-icons
  * @exampleComponent limel-example-button-group
  * @exampleComponent limel-example-button-group-mix

package/dist/collection/components/callout/callout.js

@@ -15,7 +15,6 @@ import { getHeading, getIcon } from './callout.helpers';
  * presented. In such cases, a callout should not be used as a static and
  * constantly present element of the UI. Rather, it should be displayed when
  * something unusual or remarkable demands the user's attention.
- *
  * @exampleComponent limel-example-callout-note
  * @exampleComponent limel-example-callout-important
  * @exampleComponent limel-example-callout-tip

package/dist/collection/components/checkbox/checkbox.css

@@ -815,105 +815,21 @@
   color: var(--lime-error-text-color);
 }
 
-/*
- * This file is imported into every component!
- *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-:host {
-  --mdc-theme-primary: var(
-      --lime-primary-color,
-      rgb(var(--color-teal-default))
-  );
-  --mdc-theme-secondary: var(
-      --lime-secondary-color,
-      rgb(var(--contrast-1100))
-  );
-  --mdc-theme-on-primary: var(
-      --lime-on-primary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-secondary: var(
-      --lime-on-secondary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-text-disabled-on-background: var(
-      --lime-text-disabled-on-background-color,
-      rgba(var(--contrast-1700), 0.38)
-  );
-  --mdc-theme-text-primary-on-background: var(
-      --lime-text-primary-on-background-color,
-      rgba(var(--contrast-1700), 0.87)
-  );
-  --mdc-theme-text-secondary-on-background: var(
-      --lime-text-secondary-on-background-color,
-      rgba(var(--contrast-1700), 0.54)
-  );
-  --mdc-theme-error: var(
-      --lime-error-background-color,
-      rgb(var(--color-red-dark))
-  );
-  --lime-error-text-color: rgb(var(--color-red-darker));
-  --mdc-theme-surface: var(
-      --lime-surface-background-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-surface: var(
-      --lime-on-surface-color,
-      rgb(var(--contrast-1500))
-  );
-}
-
-.limel-checkbox-helper-line {
-  padding-right: 1rem;
-  padding-left: 1rem;
-  flex-basis: 100%;
-  width: 100%;
-}
-
-.limel-checkbox-helper-text {
-  font-family: Roboto, sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: 0.6875rem;
-  font-weight: 400;
-  letter-spacing: 0.0333333333em;
-  text-decoration: inherit;
-  text-transform: inherit;
-  display: block;
-  margin-top: 0;
-  line-height: normal;
-  margin: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+limel-helper-line {
   opacity: 0;
-  color: rgba(var(--contrast-1200), 1);
-}
-:host(:hover) .limel-checkbox-helper-text, :host(:focus) .limel-checkbox-helper-text, :host(:focus-within) .limel-checkbox-helper-text {
-  opacity: 1;
 }
 
 @media (pointer: coarse) {
-  .limel-checkbox-helper-text {
+  limel-helper-line {
     opacity: 1;
   }
 }
+:host(:focus) limel-helper-line,
+:host(:focus-visible) limel-helper-line,
+:host(:focus-within) limel-helper-line {
+  opacity: 1;
+}
+
 .lime-checkbox--readonly.mdc-checkbox--disabled {
   opacity: 1;
   --mdc-ripple-press-opacity: 1;

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

@@ -26,5 +26,5 @@ const HelperText = (props) => {
   if (typeof props.text !== 'string') {
     return;
   }
-  return (h("div", { class: "limel-checkbox-helper-line" }, h("p", { class: "limel-checkbox-helper-text", "aria-hidden": "true" }, props.text.trim())));
+  return h("limel-helper-line", { helperText: props.text.trim() });
 };

package/dist/collection/components/chip-set/chip-set-input-helpers.js

@@ -2,7 +2,6 @@ import { ARROW_LEFT, ARROW_LEFT_KEY_CODE, ARROW_RIGHT, ARROW_RIGHT_KEY_CODE, BAC
 /**
  * Key handler for the input field.
  * Lets the user select, activate, and remove chips with the keyboard.
- *
  * @param {KeyboardEvent} event event
  * @returns {void}
  */

package/dist/collection/components/chip-set/chip-set.css

@@ -2825,30 +2825,16 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
   max-width: 40%;
 }
 
-.mdc-text-field-helper-line {
-  flex-basis: 100%;
-}
-
-.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,
-.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-character-counter,
-.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
-  color: rgba(var(--contrast-1200), 1);
-}
-
-.mdc-text-field-helper-text:before {
-  height: 0.75rem;
-  display: inline-block;
-  width: 0;
-  content: "";
-  vertical-align: 0;
+:not(.mdc-text-field--focused):not(.mdc-text-field--invalid):not(.force-invalid) + limel-helper-line {
+  opacity: 0;
 }
 
-:host(:not([type=input])) .mdc-chip-set:hover .mdc-text-field-helper-text, :host(:not([type=input])) .mdc-chip-set:focus .mdc-text-field-helper-text, :host(:not([type=input])) .mdc-chip-set:focus-visible .mdc-text-field-helper-text, :host(:not([type=input])) .mdc-chip-set:focus-within .mdc-text-field-helper-text {
+:host(:not([type=input])) .mdc-chip-set:hover limel-helper-line, :host(:not([type=input])) .mdc-chip-set:focus limel-helper-line, :host(:not([type=input])) .mdc-chip-set:focus-visible limel-helper-line, :host(:not([type=input])) .mdc-chip-set:focus-within limel-helper-line {
   opacity: 1;
 }
 
 @media (pointer: coarse) {
-  :host(:not([type=input])) .mdc-chip-set .mdc-text-field-helper-text {
+  :host(:not([type=input])) limel-helper-line {
     opacity: 1;
   }
 }

package/dist/collection/components/chip-set/chip-set.js

@@ -34,24 +34,14 @@ export class ChipSet {
     this.dropZoneTip = () => {
       return translate.get('file.drag-and-drop-tips', this.language);
     };
-    this.renderHelperLine = () => {
-      if (!this.hasHelperText()) {
-        return;
-      }
-      return (h("div", { tabIndex: -1, class: "mdc-text-field-helper-line" }, this.renderHelperText()));
+    this.hasHelperText = () => {
+      return this.helperText !== null && this.helperText !== undefined;
     };
-    this.renderHelperText = () => {
-      if (!this.hasHelperText()) {
+    this.renderHelperLine = () => {
+      if (!this.maxItems && !this.hasHelperText()) {
         return;
       }
-      const classList = {
-        'mdc-text-field-helper-text': true,
-        'mdc-text-field-helper-text--validation-msg': this.isInvalid(),
-      };
-      return h("p", { class: classList }, this.helperText);
-    };
-    this.hasHelperText = () => {
-      return this.helperText !== null && this.helperText !== undefined;
+      return (h("limel-helper-line", { length: this.value.length, maxLength: this.maxItems, helperText: this.helperText, invalid: this.isInvalid() }));
     };
     this.clearAllChipsLabel = () => {
       return translate.get('chip-set.clear-all', this.language);
@@ -95,7 +85,6 @@ export class ChipSet {
   }
   /**
    * Used to find out whether the chip-set is in edit mode.
-   *
    * @returns {Promise<boolean>} `true` if the chip-set is in edit mode, `false` otherwise.
    */
   async getEditMode() {
@@ -103,7 +92,6 @@ export class ChipSet {
   }
   /**
    * Used to set focus to the chip-set input field.
-   *
    * @param {boolean} emptyInput if `true`, any text in the input is discarded
    * @returns {Promise<void>} does not return anything, but methods have to be async
    */
@@ -121,7 +109,6 @@ export class ChipSet {
   /**
    * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the
    * consumer control when the input is emptied.
-   *
    * @returns {Promise<void>} does not return anything, but methods have to be async
    */
   async emptyInput() {
@@ -250,7 +237,6 @@ export class ChipSet {
   }
   /**
    * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible
-   *
    * @returns {void}
    */
   handleTextFieldFocus() {
@@ -266,7 +252,6 @@ export class ChipSet {
   /**
    * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any
    * additional space when the user it not typing anything
-   *
    * @returns {void}
    */
   handleInputBlur() {

package/dist/collection/components/circular-progress/circular-progress.js

@@ -18,7 +18,6 @@ const PERCENT = 100;
  * Of course such numbers, if bigger than `maxValue` will be visualized as a
  * full progress.
  * :::
- *
  * @exampleComponent limel-example-circular-progress
  * @exampleComponent limel-example-circular-progress-sizes
  * @exampleComponent limel-example-circular-progress-props

package/dist/collection/components/code-editor/code-editor.js

@@ -10,8 +10,7 @@ import 'codemirror/addon/fold/brace-fold';
 import jslint from 'jsonlint-mod';
 /**
  * Currently this component support syntax highlighting for `javascript`,
- `json` and `typescript` formats.
- *
+ * `json` and `typescript` formats.
  * @exampleComponent limel-example-code-editor
  * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
  * @exampleComponent limel-example-code-editor-fold-lint

package/dist/collection/components/color-picker/color-picker.js

@@ -10,7 +10,6 @@ import { h } from '@stencil/core';
  * :::note
  * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
  * :::
- *
  * @exampleComponent limel-example-color-picker
  * @exampleComponent limel-example-color-picker-readonly
  */

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js

@@ -11,7 +11,6 @@ import { YearPicker } from '../pickers/YearPicker';
  * This component is internal and only supposed to be used by
  * the limel-date-picker. This component is needed in order for us
  * to render the flatpickr calendar in a portal.
- *
  * @private
  */
 export class DatePickerCalendar {

package/dist/collection/components/dialog/dialog.js

@@ -19,7 +19,6 @@ import { createRandomString } from '../../util/random-string';
  * you should use the [DialogService](https://lundalogik.github.io/lime-web-components/versions/latest/#/api/dialog-service)
  * from Lime Web Components to open dialogs in Lime CRM.
  * :::
- *
  * @exampleComponent limel-example-dialog
  * @exampleComponent limel-example-dialog-nested-close-events
  * @exampleComponent limel-example-dialog-heading

package/dist/collection/components/file/file.js

@@ -20,7 +20,7 @@ const DEFAULT_FILE_CHIP = {
  * visual design including the upload icon hints end-users that this is not a
  * normal input field like other fields in the form for example.
  *
- *:::important
+ * :::important
  * you need to use a descriptive `label` that clarifies the
  * functionality of the file picker, and/or provides users with clear
  * instructions.
@@ -36,8 +36,7 @@ const DEFAULT_FILE_CHIP = {
  * - Choose a file
  *
  * and similar phrases...
- *:::
- *
+ * :::
  * @exampleComponent limel-example-file
  * @exampleComponent limel-example-file-custom-icon
  * @exampleComponent limel-example-file-accepted-types

package/dist/collection/components/flex-container/flex-container.js

@@ -3,7 +3,6 @@ import { h } from '@stencil/core';
  * This component is deprecated and will be removed in a future version of
  * Lime Elements. Please use CSS for your flexible container needs 🙂
  * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- *
  * @deprecated
  * @private
  * @slot - Container content

package/dist/collection/components/form/adapters/base-adapter.js

@@ -7,7 +7,6 @@ import { isNil, isNumber, isString, isBoolean, pickBy, negate, kebabCase, mapKey
  * the real definition of a primitive in javascript. In this context, primitive
  * really means "can be properly rendered to the dom by react". It just so
  * happens that react can render most primitives to the dom correctly.
- *
  * @see https://developer.mozilla.org/en-US/docs/Glossary/Primitive
  * @param {any} value the value to check
  * @returns {boolean} Whether or not the value is primitive
@@ -43,7 +42,6 @@ export class LimeElementsAdapter extends React.Component {
   /**
    * Given a key a value set the value of property named `key` to
    * the value of `value`
-   *
    * @param {string} key The name of the property
    * @param {any} value The value of the property
    * @returns {void}
@@ -57,7 +55,6 @@ export class LimeElementsAdapter extends React.Component {
    *
    * Events must be bound using this function otherwise events will bubble up too far
    * since react events are different that native dom events
-   *
    * @param {string} eventName the name of the event to get the handler for
    * @returns {any} the handler to bind to the component for the event name
    */
@@ -70,7 +67,6 @@ export class LimeElementsAdapter extends React.Component {
   }
   /**
    * Set events on the web component
-   *
    * @param {object} events Event names to handlers
    * @returns {void}
    */
@@ -82,7 +78,6 @@ export class LimeElementsAdapter extends React.Component {
   }
   /**
    * Remove events on the web component
-   *
    * @param {object} events Event names to handlers
    * @returns {void}
    */
@@ -94,7 +89,6 @@ export class LimeElementsAdapter extends React.Component {
   }
   /**
    * Get the events to remove from the component
-   *
    * @param {object} prevEvents previous events
    * @param {object} nextEvents new events
    * @returns {object} the events to remove
@@ -104,7 +98,6 @@ export class LimeElementsAdapter extends React.Component {
   }
   /**
    * Get the events to add to the component
-   *
    * @param {object} prevEvents previous events
    * @param {object} nextEvents new events
    * @returns {object} the events to add
@@ -116,7 +109,6 @@ export class LimeElementsAdapter extends React.Component {
    * Detect if event handlers have changed. If they
    * have changed, store them in the state, and remove and
    * re-add the changed event handlers
-   *
    * @returns {void}
    */
   updateEvents() {
@@ -141,7 +133,6 @@ export class LimeElementsAdapter extends React.Component {
   }
   /**
    * Get non primitive props. i.e. object, function, array, etc
-   *
    * @param {object} elementProps the props to pass the webcomponet
    * @returns {object} non primitive props
    */
@@ -150,7 +141,6 @@ export class LimeElementsAdapter extends React.Component {
   }
   /**
    * Get primitive props. i.e. integer, boolean, etc
-   *
    * @param {object} elementProps the props to pass the webcomponet
    * @returns {object} primitive props
    */
@@ -161,7 +151,6 @@ export class LimeElementsAdapter extends React.Component {
    * Given the previous renders props and the next renders props,
    * check if any of the property values have changed and return an
    * object with only those values
-   *
    * @param {object} prevNonPrimitiveProps the previous renders non primitive props
    * @param {object} nextNonPrimitiveProps the current renders non primitive props
    * @returns {object} the changed primitive props
@@ -176,7 +165,6 @@ export class LimeElementsAdapter extends React.Component {
    * instead of passing them as props the the React.createElement
    * function because non primitive props are not passed properly to the web
    * component via React.createElement
-   *
    * @param {object} elementProps element props to set
    * @returns {void}
    */

package/dist/collection/components/form/fields/field-helpers.js

@@ -3,7 +3,6 @@ import { retrieveSchema, ADDITIONAL_PROPERTY_FLAG } from '@rjsf/core/lib/utils';
 /**
  * Given two objects, get a list of keys for each value that is different between
  * the two objects. Compares using deep comparison
- *
  * @param {object} a first object
  * @param {object} b second object
  * @returns {any[]} the array of keys
@@ -19,7 +18,6 @@ const getDifferentKeys = (a = {}, b = {}) => {
  * has any other fields that are dependent on it, and if so reset those dependent fields
  * (by deleting them from the data so that their defaults are populated on the next rerender).
  * Call onChange with the updated data
- *
  * @param {any} oldData The previous data before a data change event
  * @param {any} newData The form data from a change event
  * @param {object} schema The schema associated with the data
@@ -52,7 +50,6 @@ export const resetDependentFields = (oldData, newData, schema, rootSchema) => {
 };
 /**
  * Check if the schema is of type object and have no declared properties
- *
  * @param {any} schema the schema
  * @returns {boolean} true if the schema is for a custom object
  */

package/dist/collection/components/form/fields/schema-field.js

@@ -23,7 +23,6 @@ import { FieldTemplate } from '../templates';
  * from the form data I would delete all the text from the name input field. Web components would emit this empty value
  * as '' or null. If the web component tries to emit `undefined`, null would be emitted instead because CustomEvent has
  * a default `detail` value of null
- *
  * @param {any} value the value associated with the schema
  * @param {any} schema the schema for the value
  * @returns {boolean} whether or not null should be changed to undefined
@@ -52,7 +51,6 @@ const getCustomComponent = (schema) => {
 };
 /**
  * Create properties from the factory that is set on `limel-form`
- *
  * @param {*} formContext the form context
  * @param {*} schema the schema for the current field
  * @returns {object} the properties created by the factory
@@ -178,7 +176,6 @@ export class SchemaField extends React.Component {
   }
   /**
    * Gets the path to the current property within the schema
-   *
    * @param {string} schemaId the id of the schema
    * @returns {string[]} an array with the schema path for the current property
    * @example

package/dist/collection/components/form/templates/common.js

@@ -19,7 +19,6 @@ export function renderDescription(description) {
  * If an object has the key 'title' it will have priority, followed by the key 'name'.
  * If 'title' nor 'name' is found, a required item will be considered.
  * Otherwise the first occurrence of a nonempty string is chosen.
- *
  * @param {*} data the data to find the title for
  * @param {*} fieldSchema schema for the item
  * @param {*} formSchema schema for the form

package/dist/collection/components/grid/grid.js

@@ -3,7 +3,6 @@ import { h } from '@stencil/core';
  * The `limel-grid` component creates a grid which can be used to control the
  * layout of other components. It uses CSS [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
  * to enable easy configuration of its child-elements.
- *
  * @exampleComponent limel-example-grid
  * @slot - Grid content
  */

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

@@ -38,7 +38,6 @@ import { h } from '@stencil/core';
  * Background colors behind icons make them look like "call to action" buttons
  * and take a lot of attention from users.
  * :::
- *
  * @exampleComponent limel-example-header
  * @exampleComponent limel-example-header-colors
  * @exampleComponent limel-example-header-responsive

package/dist/collection/components/helper-line/helper-line.css

@@ -0,0 +1,30 @@
+:host(limel-helper-line) {
+  transition: opacity 0.2s ease;
+  box-sizing: border-box;
+  display: none;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.125rem 1rem 0 1rem;
+  min-width: 0;
+  font-family: Roboto, sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-size: 0.6875rem;
+  font-weight: 400;
+  letter-spacing: 0.0333333333em;
+  line-height: normal;
+  color: rgb(var(--contrast-1200));
+}
+
+:host(limel-helper-line.show) {
+  display: flex;
+}
+
+:host(limel-helper-line.invalid) .helper-text {
+  color: var(--mdc-theme-error);
+}
+
+.counter {
+  flex-shrink: 0;
+  margin-left: auto;
+}