@limetech/lime-elements 37.0.0-next.1 → 37.1.0-dev.1

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 
 /*
  Stencil Client Patch Esm v3.4.1 | MIT Licensed | https://stenciljs.com
@@ -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-action-bar.cjs",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[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":[8],"searcher":[8],"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":[520],"format":[513],"language":[520],"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":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"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":[8],"progress":[16]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"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":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["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":[8]}]]],["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":[8]}]]],["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":[520],"justify":[520],"align":[520],"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-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["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-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["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":[8],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[8],"formatter":[16]}]]],["limel-action-bar-item_2.cjs",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["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":[8],"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-list_2.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["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-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[520],"limeBranded":[4,"lime-branded"]}]]],["limel-menu_2.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover_2.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[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-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-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);
+  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-action-bar.cjs",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[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":[8],"searcher":[8],"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":[520],"format":[513],"language":[520],"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":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"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":[8],"progress":[16]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"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":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["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":[8]}]]],["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":[8]}]]],["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],"helperText":[513,"helper-text"],"fieldId":[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":[520],"justify":[520],"align":[520],"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-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["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-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["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":[8],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[8],"formatter":[16]}]]],["limel-action-bar-item_2.cjs",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["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":[8],"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-list_2.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["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-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[520],"limeBranded":[4,"lime-branded"]}]]],["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-menu_2.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover_2.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["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]}]]],["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"]}]]]], options);
   });
 };
 

package/dist/cjs/makeEnterClickable-aa2ed75b.js

@@ -0,0 +1,68 @@
+'use strict';
+
+const index = require('./index-38eb64b5.js');
+
+const eventHandlers = new WeakMap();
+/**
+ * Overrides the default browser behavior for clickable elements
+ * When focused and pressing down enter, avoids calling onClick repeatedly
+ * @param {HTMLElement} element the clickable element
+ */
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function makeEnterClickable(element) {
+  if (eventHandlers.has(element)) {
+    return;
+  }
+  let isActive = false;
+  let hasJustReleasedEnter = true;
+  const keydownHandler = (event) => {
+    if (event.key === 'Enter' && !isActive) {
+      isActive = true;
+      if (element === null || element === void 0 ? void 0 : element.shadowRoot) {
+        index.forceUpdate(element);
+      }
+    }
+  };
+  const keyupHandler = (event) => {
+    if (event.key === 'Enter' && isActive) {
+      isActive = false;
+      hasJustReleasedEnter = true;
+      if (element === null || element === void 0 ? void 0 : element.shadowRoot) {
+        index.forceUpdate(element);
+      }
+    }
+  };
+  const clickHandler = (event) => {
+    if (!isActive) {
+      return;
+    }
+    if (hasJustReleasedEnter) {
+      hasJustReleasedEnter = false;
+      return;
+    }
+    event.stopImmediatePropagation();
+  };
+  eventHandlers.set(element, {
+    keydownHandler: keydownHandler,
+    keyupHandler: keyupHandler,
+    clickHandler: clickHandler,
+  });
+  element.addEventListener('keydown', keydownHandler);
+  element.addEventListener('keyup', keyupHandler);
+  element.addEventListener('click', clickHandler, true);
+}
+function removeEnterClickable(element) {
+  const callBacks = eventHandlers.get(element);
+  if (!callBacks || !eventHandlers.has(element)) {
+    return;
+  }
+  element.removeEventListener('keydown', callBacks.keydownHandler);
+  element.removeEventListener('keyup', callBacks.keyupHandler);
+  element.removeEventListener('click', callBacks.clickHandler, true);
+  eventHandlers.delete(element);
+}
+
+exports.makeEnterClickable = makeEnterClickable;
+exports.removeEnterClickable = removeEnterClickable;
+
+//# sourceMappingURL=makeEnterClickable-aa2ed75b.js.map

package/dist/cjs/makeEnterClickable-aa2ed75b.js.map

@@ -0,0 +1 @@
+{"file":"makeEnterClickable-aa2ed75b.js","mappings":";;;;AAEA,MAAM,aAAa,GAAoC,IAAI,OAAO,EAAE,CAAC;AAErE;;;;;AAKA;SACgB,kBAAkB,CAAC,OAAoB;EACnD,IAAI,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;IAC5B,OAAO;GACV;EAED,IAAI,QAAQ,GAAG,KAAK,CAAC;EACrB,IAAI,oBAAoB,GAAG,IAAI,CAAC;EAEhC,MAAM,cAAc,GAAG,CAAC,KAAoB;IACxC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,QAAQ,EAAE;MACpC,QAAQ,GAAG,IAAI,CAAC;MAEhB,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,EAAE;QACrBA,iBAAW,CAAC,OAAO,CAAC,CAAC;OACxB;KACJ;GACJ,CAAC;EAEF,MAAM,YAAY,GAAG,CAAC,KAAoB;IACtC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,QAAQ,EAAE;MACnC,QAAQ,GAAG,KAAK,CAAC;MACjB,oBAAoB,GAAG,IAAI,CAAC;MAE5B,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,EAAE;QACrBA,iBAAW,CAAC,OAAO,CAAC,CAAC;OACxB;KACJ;GACJ,CAAC;EAEF,MAAM,YAAY,GAAG,CAAC,KAAiB;IACnC,IAAI,CAAC,QAAQ,EAAE;MACX,OAAO;KACV;IAED,IAAI,oBAAoB,EAAE;MACtB,oBAAoB,GAAG,KAAK,CAAC;MAE7B,OAAO;KACV;IAED,KAAK,CAAC,wBAAwB,EAAE,CAAC;GACpC,CAAC;EAEF,aAAa,CAAC,GAAG,CAAC,OAAO,EAAE;IACvB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,YAAY,EAAE,YAAY;GAC7B,CAAC,CAAC;EAEH,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;EACpD,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;EAChD,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;AAC1D,CAAC;SAEe,oBAAoB,CAAC,OAAoB;EACrD,MAAM,SAAS,GAAc,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;EAExD,IAAI,CAAC,SAAS,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;IAC3C,OAAO;GACV;EAED,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;EACjE,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;EAC7D,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;EAEnE,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAClC;;;;;","names":["forceUpdate"],"sources":["./src/util/makeEnterClickable.ts"],"sourcesContent":["import { forceUpdate } from '@stencil/core';\n\nconst eventHandlers: WeakMap<HTMLElement, CallBacks> = new WeakMap();\n\n/**\n * Overrides the default browser behavior for clickable elements\n * When focused and pressing down enter, avoids calling onClick repeatedly\n * @param {HTMLElement} element the clickable element\n */\n// eslint-disable-next-line sonarjs/cognitive-complexity\nexport function makeEnterClickable(element: HTMLElement) {\n    if (eventHandlers.has(element)) {\n        return;\n    }\n\n    let isActive = false;\n    let hasJustReleasedEnter = true;\n\n    const keydownHandler = (event: KeyboardEvent) => {\n        if (event.key === 'Enter' && !isActive) {\n            isActive = true;\n\n            if (element?.shadowRoot) {\n                forceUpdate(element);\n            }\n        }\n    };\n\n    const keyupHandler = (event: KeyboardEvent) => {\n        if (event.key === 'Enter' && isActive) {\n            isActive = false;\n            hasJustReleasedEnter = true;\n\n            if (element?.shadowRoot) {\n                forceUpdate(element);\n            }\n        }\n    };\n\n    const clickHandler = (event: MouseEvent) => {\n        if (!isActive) {\n            return;\n        }\n\n        if (hasJustReleasedEnter) {\n            hasJustReleasedEnter = false;\n\n            return;\n        }\n\n        event.stopImmediatePropagation();\n    };\n\n    eventHandlers.set(element, {\n        keydownHandler: keydownHandler,\n        keyupHandler: keyupHandler,\n        clickHandler: clickHandler,\n    });\n\n    element.addEventListener('keydown', keydownHandler);\n    element.addEventListener('keyup', keyupHandler);\n    element.addEventListener('click', clickHandler, true);\n}\n\nexport function removeEnterClickable(element: HTMLElement) {\n    const callBacks: CallBacks = eventHandlers.get(element);\n\n    if (!callBacks || !eventHandlers.has(element)) {\n        return;\n    }\n\n    element.removeEventListener('keydown', callBacks.keydownHandler);\n    element.removeEventListener('keyup', callBacks.keyupHandler);\n    element.removeEventListener('click', callBacks.clickHandler, true);\n\n    eventHandlers.delete(element);\n}\n\ninterface CallBacks {\n    keydownHandler: (arg: KeyboardEvent) => void;\n    keyupHandler: (arg: KeyboardEvent) => void;\n    clickHandler: (arg: MouseEvent) => void;\n}\n"],"version":3}

package/dist/cjs/{random-string-4c3b7f1c.js → random-string-c8445652.js}

@@ -1,6 +1,14 @@
 'use strict';
 
 const createRandomString = () => {
+  var _a;
+  if (!('crypto' in window) ||
+    typeof ((_a = window.crypto) === null || _a === void 0 ? void 0 : _a.randomUUID) !== 'function') {
+    return legacyCreateRandomString();
+  }
+  return 'a_' + crypto.randomUUID(); // ids must start with letters
+};
+function legacyCreateRandomString() {
   const USE_HEX = 36;
   const SKIP_LEADING_ZERODOT = 2;
   const ASCII_A = 97;
@@ -8,8 +16,8 @@ const createRandomString = () => {
   return (String.fromCharCode(ASCII_A + Math.floor(Math.random() * NUMBER_OF_LETTERS)) +
     Math.random().toString(USE_HEX).substring(SKIP_LEADING_ZERODOT) +
     Math.random().toString(USE_HEX).substring(SKIP_LEADING_ZERODOT));
-};
+}
 
 exports.createRandomString = createRandomString;
 
-//# sourceMappingURL=random-string-4c3b7f1c.js.map
+//# sourceMappingURL=random-string-c8445652.js.map

package/dist/cjs/random-string-c8445652.js.map

@@ -0,0 +1 @@
+{"file":"random-string-c8445652.js","mappings":";;MAAa,kBAAkB,GAAG;;EAC9B,IACI,EAAE,QAAQ,IAAI,MAAM,CAAC;IACrB,QAAO,MAAA,MAAM,CAAC,MAAM,0CAAE,UAAU,CAAA,KAAK,UAAU,EACjD;IACE,OAAO,wBAAwB,EAAE,CAAC;GACrC;EAED,OAAO,IAAI,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;AACtC,EAAE;AAEF,SAAS,wBAAwB;EAC7B,MAAM,OAAO,GAAG,EAAE,CAAC;EACnB,MAAM,oBAAoB,GAAG,CAAC,CAAC;EAC/B,MAAM,OAAO,GAAG,EAAE,CAAC;EACnB,MAAM,iBAAiB,GAAG,EAAE,CAAC;EAE7B,QACI,MAAM,CAAC,YAAY,CACf,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,iBAAiB,CAAC,CAC1D;IACD,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,oBAAoB,CAAC;IAC/D,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,oBAAoB,CAAC,EACjE;AACN;;;;","names":[],"sources":["./src/util/random-string.ts"],"sourcesContent":["export const createRandomString = () => {\n    if (\n        !('crypto' in window) ||\n        typeof window.crypto?.randomUUID !== 'function'\n    ) {\n        return legacyCreateRandomString();\n    }\n\n    return 'a_' + crypto.randomUUID(); // ids must start with letters\n};\n\nfunction legacyCreateRandomString() {\n    const USE_HEX = 36;\n    const SKIP_LEADING_ZERODOT = 2;\n    const ASCII_A = 97;\n    const NUMBER_OF_LETTERS = 26;\n\n    return (\n        String.fromCharCode(\n            ASCII_A + Math.floor(Math.random() * NUMBER_OF_LETTERS)\n        ) +\n        Math.random().toString(USE_HEX).substring(SKIP_LEADING_ZERODOT) +\n        Math.random().toString(USE_HEX).substring(SKIP_LEADING_ZERODOT)\n    );\n}\n"],"version":3}

package/dist/collection/components/action-bar/action-bar-item/action-bar-item.js

@@ -1,5 +1,6 @@
-import { h } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { createRandomString } from '../../../util/random-string';
+import { makeEnterClickable, removeEnterClickable, } from 'src/util/makeEnterClickable';
 /**
  * @private
  */
@@ -13,6 +14,12 @@ export class ActionBarButton {
     this.isVisible = true;
     this.tooltipId = createRandomString();
   }
+  componentWillLoad() {
+    makeEnterClickable(this.host);
+  }
+  disconnectedCallback() {
+    removeEnterClickable(this.host);
+  }
   render() {
     if (!this.isItem(this.item) && this.item.separator) {
       return h("div", { role: "separator" });
@@ -141,5 +148,6 @@ export class ActionBarButton {
         }
       }];
   }
+  static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=action-bar-item.js.map

package/dist/collection/components/action-bar/action-bar-item/action-bar-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-bar-item.js","sourceRoot":"","sources":["../../../../src/components/action-bar/action-bar-item/action-bar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { ActionBarItem } from '../action-bar.types';\nimport { createRandomString } from '../../../util/random-string';\nimport { ListSeparator } from 'src/interface';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-item',\n    shadow: false,\n    styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n    /**\n     * Item that is placed in the action bar.\n     */\n    @Prop()\n    public item!: ActionBarItem | ListSeparator;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n    /**\n     * When the item is displayed in the available width,\n     * this will be `false`.\n     */\n    @Prop({ reflect: true })\n    public isVisible: boolean = true;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <div role=\"separator\" />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(this.item);\n    };\n\n    private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n        return !('separator' in item);\n    }\n\n    private isDisabled() {\n        if (this.isItem(this.item) && this.item.disabled) {\n            return true;\n        }\n\n        if (!this.isVisible) {\n            return true;\n        }\n    }\n\n    private renderIcon() {\n        if (this.isItem(this.item) && !this.item.icon) {\n            return;\n        }\n\n        if ('icon' in this.item) {\n            return (\n                <limel-icon\n                    name={this.item.icon}\n                    style={{\n                        '--action-bar-item-icon-color': `${this.item.iconColor}`,\n                    }}\n                />\n            );\n        }\n    }\n\n    private renderLabel() {\n        if (!this.isItem(this.item) || this.item.iconOnly) {\n            return;\n        }\n\n        return <span class=\"text\">{this.item.text}</span>;\n    }\n\n    private renderTooltip() {\n        if (!this.isItem(this.item)) {\n            return;\n        }\n\n        if (this.item.text) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.text}\n                    helperLabel={this.item.commandText}\n                />\n            );\n        }\n\n        if (this.item.commandText) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.commandText}\n                />\n            );\n        }\n    }\n}\n"]}
+{"version":3,"file":"action-bar-item.js","sourceRoot":"","sources":["../../../../src/components/action-bar/action-bar-item/action-bar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../action-bar.types';\nimport { createRandomString } from '../../../util/random-string';\nimport { ListSeparator } from 'src/interface';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/makeEnterClickable';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-item',\n    shadow: false,\n    styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n    /**\n     * Item that is placed in the action bar.\n     */\n    @Prop()\n    public item!: ActionBarItem | ListSeparator;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n    /**\n     * When the item is displayed in the available width,\n     * this will be `false`.\n     */\n    @Prop({ reflect: true })\n    public isVisible: boolean = true;\n\n    @Element()\n    private host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <div role=\"separator\" />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(this.item);\n    };\n\n    private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n        return !('separator' in item);\n    }\n\n    private isDisabled() {\n        if (this.isItem(this.item) && this.item.disabled) {\n            return true;\n        }\n\n        if (!this.isVisible) {\n            return true;\n        }\n    }\n\n    private renderIcon() {\n        if (this.isItem(this.item) && !this.item.icon) {\n            return;\n        }\n\n        if ('icon' in this.item) {\n            return (\n                <limel-icon\n                    name={this.item.icon}\n                    style={{\n                        '--action-bar-item-icon-color': `${this.item.iconColor}`,\n                    }}\n                />\n            );\n        }\n    }\n\n    private renderLabel() {\n        if (!this.isItem(this.item) || this.item.iconOnly) {\n            return;\n        }\n\n        return <span class=\"text\">{this.item.text}</span>;\n    }\n\n    private renderTooltip() {\n        if (!this.isItem(this.item)) {\n            return;\n        }\n\n        if (this.item.text) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.text}\n                    helperLabel={this.item.commandText}\n                />\n            );\n        }\n\n        if (this.item.commandText) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.commandText}\n                />\n            );\n        }\n    }\n}\n"]}

package/dist/collection/components/action-bar/action-bar.js

@@ -23,7 +23,6 @@ import { isItem } from './isItem';
  * @exampleComponent limel-example-action-bar-floating
  * @exampleComponent limel-example-action-bar-styling
  * @exampleComponent limel-example-action-bar-as-primary-component
- * @private
  */
 export class ActionBar {
   constructor() {

package/dist/collection/components/action-bar/action-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-bar.js","sourceRoot":"","sources":["../../../src/components/action-bar/action-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Element,\n} from '@stencil/core';\nimport { ActionBarItem } from './action-bar.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ListSeparator } from '../list/list-item.types';\nimport { isItem } from './isItem';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n * @exampleComponent limel-example-action-bar\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n * @private\n */\n@Component({\n    tag: 'limel-action-bar',\n    shadow: true,\n    styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n    /**\n     * Items that are placed in the action bar.\n     * These represent primary actions.\n     */\n    @Prop()\n    public actions: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * A label used to describe the purpose of the element to users\n     * of assistive technologies, like screen readers.\n     * Example value: \"toolbar\"\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * - When set to `fullWidth`, the component will take the\n     * entire width of its container.\n     * - When set to `floating`, the component will get basic stylings\n     * to visualize the floating state.\n     * :::note\n     * You should still properly position the component\n     * according to the structure of your user interface.\n     * For example, use an `absolute` or `fixed` position.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public layout?: 'fullWidth' | 'floating';\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public itemSelected: EventEmitter<ActionBarItem>;\n\n    @Element()\n    private host: HTMLElement;\n\n    @State()\n    private overflowCutoff: number = this.actions.length;\n\n    private intersectionObserver: IntersectionObserver;\n    private firstRender = true;\n    private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n    public render() {\n        let overflowActions: Array<MenuItem | ListSeparator> = [];\n        if (this.actions.length) {\n            overflowActions = this.actions.slice(this.overflowCutoff);\n        }\n\n        return (\n            <Host\n                aria-label={this.accessibleLabel}\n                class={{\n                    'is-full-width': this.layout === 'fullWidth',\n                    'is-floating': this.layout === 'floating',\n                }}\n            >\n                <div class=\"items\">\n                    {this.actions.map(this.renderActionBarItem)}\n                </div>\n                {this.renderOverflowMenu(overflowActions)}\n            </Host>\n        );\n    }\n\n    public connectedCallback() {}\n\n    public componentDidRender() {\n        if (this.haveItemsChanged()) {\n            this.intersectionObserver?.disconnect();\n            this.createIntersectionObserver();\n        }\n    }\n\n    public disconnectedCallback() {\n        this.intersectionObserver?.disconnect();\n        this.intersectionObserver = undefined;\n        this.actionBarItems = [];\n        this.connectedCallback = () => this.createIntersectionObserver();\n    }\n\n    private renderActionBarItem = (item: ActionBarItem, index: number) => {\n        return (\n            <limel-action-bar-item\n                item={item}\n                onSelect={this.handleSelect}\n                isVisible={this.isVisible(index)}\n            />\n        );\n    };\n\n    private renderOverflowMenu = (items: Array<MenuItem | ListSeparator>) => {\n        if (!(this.actions.length - this.overflowCutoff)) {\n            return;\n        }\n\n        return (\n            <limel-action-bar-overflow-menu\n                openDirection={this.openDirection}\n                items={items}\n                onSelect={this.handleSelect}\n            />\n        );\n    };\n\n    private isVisible(index: number) {\n        return index < this.overflowCutoff;\n    }\n\n    private handleSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.itemSelected.emit(event.detail);\n        }\n    };\n\n    private handleIntersection = (entries: IntersectionObserverEntry[]) => {\n        const intersectingItems = entries.filter(\n            (entry) => entry.isIntersecting\n        );\n\n        const notIntersectingItems = entries.filter(\n            (entry) => !entry.isIntersecting\n        );\n\n        if (this.firstRender) {\n            this.overflowCutoff = intersectingItems.length;\n        } else {\n            this.overflowCutoff =\n                this.overflowCutoff +\n                intersectingItems.length -\n                notIntersectingItems.length;\n        }\n\n        this.firstRender = false;\n    };\n\n    private createIntersectionObserver() {\n        const options = {\n            root: this.host.shadowRoot.querySelector('.items'),\n            rootMargin: '0px',\n            threshold: 1.0,\n        };\n\n        this.overflowCutoff = this.actions.length;\n        this.firstRender = true;\n\n        this.actionBarItems = [];\n\n        this.intersectionObserver = new IntersectionObserver(\n            this.handleIntersection,\n            options\n        );\n\n        this.host.shadowRoot\n            .querySelectorAll('limel-action-bar-item')\n            .forEach((actionBarItem) => {\n                this.observe(actionBarItem);\n            });\n    }\n\n    private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n        this.intersectionObserver.observe(actionBarItem);\n        this.actionBarItems.push(actionBarItem);\n    }\n\n    private haveItemsChanged() {\n        const someItemRemoved = this.actionBarItems.some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.host.shadowRoot.contains(actionBarItem)\n        );\n\n        const someItemAdded = Array.from(\n            this.host.shadowRoot.querySelectorAll('limel-action-bar-item')\n        ).some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.actionBarItems.includes(actionBarItem)\n        );\n\n        return someItemRemoved || someItemAdded;\n    }\n}\n"]}
+{"version":3,"file":"action-bar.js","sourceRoot":"","sources":["../../../src/components/action-bar/action-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Element,\n} from '@stencil/core';\nimport { ActionBarItem } from './action-bar.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ListSeparator } from '../list/list-item.types';\nimport { isItem } from './isItem';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n * @exampleComponent limel-example-action-bar\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n */\n@Component({\n    tag: 'limel-action-bar',\n    shadow: true,\n    styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n    /**\n     * Items that are placed in the action bar.\n     * These represent primary actions.\n     */\n    @Prop()\n    public actions: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * A label used to describe the purpose of the element to users\n     * of assistive technologies, like screen readers.\n     * Example value: \"toolbar\"\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * - When set to `fullWidth`, the component will take the\n     * entire width of its container.\n     * - When set to `floating`, the component will get basic stylings\n     * to visualize the floating state.\n     * :::note\n     * You should still properly position the component\n     * according to the structure of your user interface.\n     * For example, use an `absolute` or `fixed` position.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public layout?: 'fullWidth' | 'floating';\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public itemSelected: EventEmitter<ActionBarItem>;\n\n    @Element()\n    private host: HTMLElement;\n\n    @State()\n    private overflowCutoff: number = this.actions.length;\n\n    private intersectionObserver: IntersectionObserver;\n    private firstRender = true;\n    private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n    public render() {\n        let overflowActions: Array<MenuItem | ListSeparator> = [];\n        if (this.actions.length) {\n            overflowActions = this.actions.slice(this.overflowCutoff);\n        }\n\n        return (\n            <Host\n                aria-label={this.accessibleLabel}\n                class={{\n                    'is-full-width': this.layout === 'fullWidth',\n                    'is-floating': this.layout === 'floating',\n                }}\n            >\n                <div class=\"items\">\n                    {this.actions.map(this.renderActionBarItem)}\n                </div>\n                {this.renderOverflowMenu(overflowActions)}\n            </Host>\n        );\n    }\n\n    public connectedCallback() {}\n\n    public componentDidRender() {\n        if (this.haveItemsChanged()) {\n            this.intersectionObserver?.disconnect();\n            this.createIntersectionObserver();\n        }\n    }\n\n    public disconnectedCallback() {\n        this.intersectionObserver?.disconnect();\n        this.intersectionObserver = undefined;\n        this.actionBarItems = [];\n        this.connectedCallback = () => this.createIntersectionObserver();\n    }\n\n    private renderActionBarItem = (item: ActionBarItem, index: number) => {\n        return (\n            <limel-action-bar-item\n                item={item}\n                onSelect={this.handleSelect}\n                isVisible={this.isVisible(index)}\n            />\n        );\n    };\n\n    private renderOverflowMenu = (items: Array<MenuItem | ListSeparator>) => {\n        if (!(this.actions.length - this.overflowCutoff)) {\n            return;\n        }\n\n        return (\n            <limel-action-bar-overflow-menu\n                openDirection={this.openDirection}\n                items={items}\n                onSelect={this.handleSelect}\n            />\n        );\n    };\n\n    private isVisible(index: number) {\n        return index < this.overflowCutoff;\n    }\n\n    private handleSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.itemSelected.emit(event.detail);\n        }\n    };\n\n    private handleIntersection = (entries: IntersectionObserverEntry[]) => {\n        const intersectingItems = entries.filter(\n            (entry) => entry.isIntersecting\n        );\n\n        const notIntersectingItems = entries.filter(\n            (entry) => !entry.isIntersecting\n        );\n\n        if (this.firstRender) {\n            this.overflowCutoff = intersectingItems.length;\n        } else {\n            this.overflowCutoff =\n                this.overflowCutoff +\n                intersectingItems.length -\n                notIntersectingItems.length;\n        }\n\n        this.firstRender = false;\n    };\n\n    private createIntersectionObserver() {\n        const options = {\n            root: this.host.shadowRoot.querySelector('.items'),\n            rootMargin: '0px',\n            threshold: 1.0,\n        };\n\n        this.overflowCutoff = this.actions.length;\n        this.firstRender = true;\n\n        this.actionBarItems = [];\n\n        this.intersectionObserver = new IntersectionObserver(\n            this.handleIntersection,\n            options\n        );\n\n        this.host.shadowRoot\n            .querySelectorAll('limel-action-bar-item')\n            .forEach((actionBarItem) => {\n                this.observe(actionBarItem);\n            });\n    }\n\n    private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n        this.intersectionObserver.observe(actionBarItem);\n        this.actionBarItems.push(actionBarItem);\n    }\n\n    private haveItemsChanged() {\n        const someItemRemoved = this.actionBarItems.some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.host.shadowRoot.contains(actionBarItem)\n        );\n\n        const someItemAdded = Array.from(\n            this.host.shadowRoot.querySelectorAll('limel-action-bar-item')\n        ).some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.actionBarItems.includes(actionBarItem)\n        );\n\n        return someItemRemoved || someItemAdded;\n    }\n}\n"]}

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { makeEnterClickable, removeEnterClickable, } from '../../util/makeEnterClickable';
 /**
  * @exampleComponent limel-example-button-basic
  * @exampleComponent limel-example-button-primary
@@ -23,6 +24,12 @@ export class Button {
     this.loadingFailed = false;
     this.justLoaded = false;
   }
+  componentWillLoad() {
+    makeEnterClickable(this.host);
+  }
+  disconnectedCallback() {
+    removeEnterClickable(this.host);
+  }
   render() {
     return (h("button", { class: {
         'mdc-button': true,
@@ -212,6 +219,7 @@ export class Button {
       "justLoaded": {}
     };
   }
+  static get elementRef() { return "host"; }
   static get watchers() {
     return [{
         "propName": "loading",

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjE;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,MAAM;;;mBAWE,KAAK;oBAMJ,KAAK;;oBAYL,KAAK;mBAON,KAAK;yBAOC,KAAK;sBAGP,KAAK;;EAInB,MAAM;IACT,OAAO,CACH,cACI,KAAK,EAAE;QACH,YAAY,EAAE,IAAI;QAClB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,aAAa,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,aAAa;QACrD,aAAa,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa;QACpD,sBAAsB,EAAE,IAAI,CAAC,QAAQ;OACxC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MAEtC,IAAI,CAAC,UAAU,EAAE;MAClB,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ;MACzD,qBAAe,WAAW,EAAE,KAAK,GAAI;MACrC,WAAK,OAAO,EAAC,WAAW,IAAE,IAAI,CAAC,kBAAkB,EAAE,CAAO,CACrD,CACZ,CAAC;EACN,CAAC;EAGS,cAAc,CAAC,QAAiB,EAAE,QAAiB;IACzD,IAAI,QAAQ,IAAI,CAAC,QAAQ,EAAE;MACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,MAAM,OAAO,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;QAC5C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;MAC5B,CAAC,EAAE,OAAO,CAAC,CAAC;KACf;SAAM,IAAI,QAAQ,EAAE;MACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;MACxB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAC/C;EACL,CAAC;EAEO,kBAAkB;IACtB,IAAI,IAAI,CAAC,aAAa,EAAE;MACpB,OAAO;QACH,YAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAQ;QAC3C,YAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAQ;OAC9C,CAAC;KACL;IAED,OAAO;MACH,YAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAQ;MAC5C,YAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAQ;KAC/C,CAAC;EACN,CAAC;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,IAAI,iBAAiB,GAAG,EAAE,CAAC;IAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,iBAAiB,GAAG,UAAU,CAAC;KAClC;IAED,OAAO,CACH,SAAG,KAAK,EAAE,oBAAoB,iBAAiB,EAAE;MAC7C,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC/B,CACP,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\n\n/**\n * @exampleComponent limel-example-button-basic\n * @exampleComponent limel-example-button-primary\n * @exampleComponent limel-example-button-outlined\n * @exampleComponent limel-example-button-disabled\n * @exampleComponent limel-example-button-icon\n * @exampleComponent limel-example-button-loading\n * @exampleComponent limel-example-button-click-success\n * @exampleComponent limel-example-button-click-fail\n * @exampleComponent limel-example-button-reduce-presence\n * @exampleComponent limel-example-button-colors\n * @exampleComponent limel-example-button-composite\n */\n@Component({\n    tag: 'limel-button',\n    shadow: true,\n    styleUrl: 'button.scss',\n})\nexport class Button {\n    /**\n     * The text to show on the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set to `true` to make the button outlined.\n     */\n    @Prop({ reflect: true })\n    public outlined = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to put the button in the `loading` state.\n     * This also disables the button.\n     */\n    @Prop({ reflect: true })\n    public loading = false;\n\n    /**\n     * Set to `true` to indicate failure instead of success when the button is\n     * no longer in the `loading` state.\n     */\n    @Prop({ reflect: true })\n    public loadingFailed = false;\n\n    @State()\n    private justLoaded = false;\n\n    private justLoadedTimeout?: number;\n\n    public render() {\n        return (\n            <button\n                class={{\n                    'mdc-button': true,\n                    loading: this.loading,\n                    'just-loaded': this.justLoaded && !this.loadingFailed,\n                    'just-failed': this.justLoaded && this.loadingFailed,\n                    'mdc-button--outlined': this.outlined,\n                }}\n                disabled={this.disabled || this.loading}\n            >\n                {this.renderIcon()}\n                <span class=\"label mdc-button__label\">{this.label}</span>\n                <limel-spinner limeBranded={false} />\n                <svg viewBox=\"0 0 30 30\">{this.renderLoadingIcons()}</svg>\n            </button>\n        );\n    }\n\n    @Watch('loading')\n    protected loadingWatcher(newValue: boolean, oldValue: boolean) {\n        if (oldValue && !newValue) {\n            this.justLoaded = true;\n            const TIMEOUT = 2000;\n            this.justLoadedTimeout = window.setTimeout(() => {\n                this.justLoaded = false;\n            }, TIMEOUT);\n        } else if (newValue) {\n            this.justLoaded = false;\n            window.clearTimeout(this.justLoadedTimeout);\n        }\n    }\n\n    private renderLoadingIcons() {\n        if (this.loadingFailed) {\n            return [\n                <line x1=\"9\" y1=\"9\" x2=\"21\" y2=\"21\"></line>,\n                <line x1=\"21\" y1=\"9\" x2=\"9\" y2=\"21\"></line>,\n            ];\n        }\n\n        return [\n            <line x1=\"8\" y1=\"14\" x2=\"15\" y2=\"20\"></line>,\n            <line x1=\"23\" y1=\"9\" x2=\"14\" y2=\"20\"></line>,\n        ];\n    }\n\n    private renderIcon(): HTMLElement {\n        if (!this.icon) {\n            return;\n        }\n\n        let withoutLabelClass = '';\n        if (!this.label) {\n            withoutLabelClass = 'no-label';\n        }\n\n        return (\n            <i class={`mdc-button__icon ${withoutLabelClass}`}>\n                <limel-icon name={this.icon} />\n            </i>\n        );\n    }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/makeEnterClickable';\n\n/**\n * @exampleComponent limel-example-button-basic\n * @exampleComponent limel-example-button-primary\n * @exampleComponent limel-example-button-outlined\n * @exampleComponent limel-example-button-disabled\n * @exampleComponent limel-example-button-icon\n * @exampleComponent limel-example-button-loading\n * @exampleComponent limel-example-button-click-success\n * @exampleComponent limel-example-button-click-fail\n * @exampleComponent limel-example-button-reduce-presence\n * @exampleComponent limel-example-button-colors\n * @exampleComponent limel-example-button-composite\n */\n@Component({\n    tag: 'limel-button',\n    shadow: true,\n    styleUrl: 'button.scss',\n})\nexport class Button {\n    /**\n     * The text to show on the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set to `true` to make the button outlined.\n     */\n    @Prop({ reflect: true })\n    public outlined = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to put the button in the `loading` state.\n     * This also disables the button.\n     */\n    @Prop({ reflect: true })\n    public loading = false;\n\n    /**\n     * Set to `true` to indicate failure instead of success when the button is\n     * no longer in the `loading` state.\n     */\n    @Prop({ reflect: true })\n    public loadingFailed = false;\n\n    @State()\n    private justLoaded = false;\n\n    @Element()\n    private host: HTMLElement;\n\n    private justLoadedTimeout?: number;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <button\n                class={{\n                    'mdc-button': true,\n                    loading: this.loading,\n                    'just-loaded': this.justLoaded && !this.loadingFailed,\n                    'just-failed': this.justLoaded && this.loadingFailed,\n                    'mdc-button--outlined': this.outlined,\n                }}\n                disabled={this.disabled || this.loading}\n            >\n                {this.renderIcon()}\n                <span class=\"label mdc-button__label\">{this.label}</span>\n                <limel-spinner limeBranded={false} />\n                <svg viewBox=\"0 0 30 30\">{this.renderLoadingIcons()}</svg>\n            </button>\n        );\n    }\n\n    @Watch('loading')\n    protected loadingWatcher(newValue: boolean, oldValue: boolean) {\n        if (oldValue && !newValue) {\n            this.justLoaded = true;\n            const TIMEOUT = 2000;\n            this.justLoadedTimeout = window.setTimeout(() => {\n                this.justLoaded = false;\n            }, TIMEOUT);\n        } else if (newValue) {\n            this.justLoaded = false;\n            window.clearTimeout(this.justLoadedTimeout);\n        }\n    }\n\n    private renderLoadingIcons() {\n        if (this.loadingFailed) {\n            return [\n                <line x1=\"9\" y1=\"9\" x2=\"21\" y2=\"21\"></line>,\n                <line x1=\"21\" y1=\"9\" x2=\"9\" y2=\"21\"></line>,\n            ];\n        }\n\n        return [\n            <line x1=\"8\" y1=\"14\" x2=\"15\" y2=\"20\"></line>,\n            <line x1=\"23\" y1=\"9\" x2=\"14\" y2=\"20\"></line>,\n        ];\n    }\n\n    private renderIcon(): HTMLElement {\n        if (!this.icon) {\n            return;\n        }\n\n        let withoutLabelClass = '';\n        if (!this.label) {\n            withoutLabelClass = 'no-label';\n        }\n\n        return (\n            <i class={`mdc-button__icon ${withoutLabelClass}`}>\n                <limel-icon name={this.icon} />\n            </i>\n        );\n    }\n}\n"]}

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

@@ -4,12 +4,29 @@ import { h, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 import { CheckboxTemplate } from './checkbox.template';
 /**
+ * The Checkbox component is a classic and essential element in UI design that allows
+ * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
+ * select one or more items from a list of choices.
+ *
+ * ## States of a Checkbox
+ * When a user clicks or taps on the box, it toggles between two states:
+ * Checked and Unchecked.
+ *
+ * However, a Checkbox can visualize a third state called the "Indeterminate" state.
+ * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
+ *
+ * The Indeterminate state is typically used when dealing with checkbox groups
+ * that have hierarchical relationships or when the group contains sub-items.
+ * This state is used to indicate that that some, but not all, of the items in a group are selected.
+ *
+ * <limel-example-switch-vs-checkbox />
  * @exampleComponent limel-example-checkbox
  * @exampleComponent limel-example-checkbox-helper-text
  */
 export class Checkbox {
   constructor() {
     this.id = createRandomString();
+    this.helperTextId = createRandomString();
     this.initialize = () => {
       const element = this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');
       if (!element) {
@@ -59,7 +76,7 @@ export class Checkbox {
     }
   }
   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, readonly: this.readonly, invalid: this.required && this.modified && !this.checked, onChange: this.onChange, id: this.id }));
+    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.required && this.modified && !this.checked, onChange: this.onChange, id: this.id }));
   }
   static get is() { return "limel-checkbox"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCCheckbox, cssClasses } from '@material/checkbox';\nimport { MDCFormField } from '@material/form-field';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\n\n/**\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    @State()\n    private modified = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n\n    private formField: MDCFormField;\n    private mdcCheckbox: MDCCheckbox;\n    private id: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        this.mdcCheckbox.checked = newValue;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        this.mdcCheckbox.checked = this.checked;\n        this.mdcCheckbox.indeterminate = newValue;\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    public disconnectedCallback() {\n        this.mdcCheckbox?.destroy();\n        this.formField?.destroy();\n\n        const checkboxElement = this.getCheckboxElement();\n        if (checkboxElement) {\n            checkboxElement.classList.remove(\n                cssClasses.ANIM_CHECKED_INDETERMINATE,\n                cssClasses.ANIM_CHECKED_UNCHECKED,\n                cssClasses.ANIM_INDETERMINATE_CHECKED,\n                cssClasses.ANIM_INDETERMINATE_UNCHECKED,\n                cssClasses.ANIM_UNCHECKED_CHECKED,\n                cssClasses.ANIM_UNCHECKED_INDETERMINATE\n            );\n        }\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                helperText={this.helperText}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.required && this.modified && !this.checked}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private initialize = () => {\n        const element =\n            this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');\n        if (!element) {\n            return;\n        }\n\n        this.formField = new MDCFormField(element);\n        this.mdcCheckbox = new MDCCheckbox(this.getCheckboxElement());\n        this.formField.input = this.mdcCheckbox;\n    };\n\n    private getCheckboxElement = () => {\n        return this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox');\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        this.change.emit(this.mdcCheckbox.checked);\n        this.modified = true;\n    };\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCCheckbox, cssClasses } from '@material/checkbox';\nimport { MDCFormField } from '@material/form-field';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\n\n/**\n * The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n *\n * ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n *\n * However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n *\n * The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n *\n * <limel-example-switch-vs-checkbox />\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    @State()\n    private modified = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n\n    private formField: MDCFormField;\n    private mdcCheckbox: MDCCheckbox;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        this.mdcCheckbox.checked = newValue;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        this.mdcCheckbox.checked = this.checked;\n        this.mdcCheckbox.indeterminate = newValue;\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    public disconnectedCallback() {\n        this.mdcCheckbox?.destroy();\n        this.formField?.destroy();\n\n        const checkboxElement = this.getCheckboxElement();\n        if (checkboxElement) {\n            checkboxElement.classList.remove(\n                cssClasses.ANIM_CHECKED_INDETERMINATE,\n                cssClasses.ANIM_CHECKED_UNCHECKED,\n                cssClasses.ANIM_INDETERMINATE_CHECKED,\n                cssClasses.ANIM_INDETERMINATE_UNCHECKED,\n                cssClasses.ANIM_UNCHECKED_CHECKED,\n                cssClasses.ANIM_UNCHECKED_INDETERMINATE\n            );\n        }\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.required && this.modified && !this.checked}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private initialize = () => {\n        const element =\n            this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');\n        if (!element) {\n            return;\n        }\n\n        this.formField = new MDCFormField(element);\n        this.mdcCheckbox = new MDCCheckbox(this.getCheckboxElement());\n        this.formField.input = this.mdcCheckbox;\n    };\n\n    private getCheckboxElement = () => {\n        return this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox');\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        this.change.emit(this.mdcCheckbox.checked);\n        this.modified = true;\n    };\n}\n"]}

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

@@ -12,20 +12,20 @@ export const CheckboxTemplate = (props) => {
         'mdc-checkbox--required': props.required,
         'mdc-checkbox--indeterminate': props.indeterminate,
         'lime-checkbox--readonly': props.readonly,
-      } }, h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, 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" })), h("div", { class: "mdc-checkbox__mixedmark" }))), h("label", { class: {
+      } }, h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange, "aria-controls": props.helperTextId, "aria-describedby": props.helperTextId }, 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" })), h("div", { class: "mdc-checkbox__mixedmark" }))), h("label", { class: {
         'mdc-checkbox--invalid': props.invalid,
         'mdc-checkbox--disabled': props.disabled,
         'mdc-checkbox--required': props.required,
         'mdc-checkbox--indeterminate': props.indeterminate,
         'lime-checkbox--readonly': props.readonly,
       }, htmlFor: props.id }, props.label)),
-    h(HelperText, { text: props.helperText }),
+    h(HelperText, { text: props.helperText, helperTextId: props.helperTextId }),
   ];
 };
 const HelperText = (props) => {
   if (typeof props.text !== 'string') {
     return;
   }
-  return h("limel-helper-line", { helperText: props.text.trim() });
+  return (h("limel-helper-line", { helperText: props.text.trim(), helperTextId: props.helperTextId }));
 };
 //# sourceMappingURL=checkbox.template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAevD,MAAM,CAAC,MAAM,gBAAgB,GAA+C,CACxE,KAAK,EACP,EAAE;EACA,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;GAC7C;EAED,OAAO;IACH,WAAK,KAAK,EAAC,iBAAiB;MACxB,WACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAED,2BACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACpB,UAAU,EAChB;QACF,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpD,YACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACN,WAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACN,aACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN;IACN,EAAC,UAAU,IAAC,IAAI,EAAE,KAAK,CAAC,UAAU,GAAI;GACzC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAA0C,CAAC,KAAK,EAAE,EAAE;EAChE,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,OAAO,yBAAmB,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,GAAI,CAAC;AAChE,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props\n) => {\n    const inputProps = {};\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n    }\n\n    return [\n        <div class=\"mdc-form-field \">\n            <div\n                class={{\n                    'mdc-checkbox': true,\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n            >\n                <input\n                    type=\"checkbox\"\n                    class=\"mdc-checkbox__native-control\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled || props.readonly}\n                    required={props.required}\n                    onChange={props.onChange}\n                    {...inputProps}\n                />\n                <div class=\"mdc-checkbox__background\">\n                    <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                        <path\n                            class=\"mdc-checkbox__checkmark-path\"\n                            fill=\"none\"\n                            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n                        />\n                    </svg>\n                    <div class=\"mdc-checkbox__mixedmark\" />\n                </div>\n            </div>\n            <label\n                class={{\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>,\n        <HelperText text={props.helperText} />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{ text: string }> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return <limel-helper-line helperText={props.text.trim()} />;\n};\n"]}
+{"version":3,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAgBvD,MAAM,CAAC,MAAM,gBAAgB,GAA+C,CACxE,KAAK,EACP,EAAE;EACA,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;GAC7C;EAED,OAAO;IACH,WAAK,KAAK,EAAC,iBAAiB;MACxB,WACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAED,2BACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,mBACT,KAAK,CAAC,YAAY,sBACf,KAAK,CAAC,YAAY,IAChC,UAAU,EAChB;QACF,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpD,YACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACN,WAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACN,aACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN;IACN,EAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,GAClC;GACL,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAGX,CAAC,KAAK,EAAE,EAAE;EACX,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,OAAO,CACH,yBACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,GAClC,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n    helperTextId?: string;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props\n) => {\n    const inputProps = {};\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n    }\n\n    return [\n        <div class=\"mdc-form-field \">\n            <div\n                class={{\n                    'mdc-checkbox': true,\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n            >\n                <input\n                    type=\"checkbox\"\n                    class=\"mdc-checkbox__native-control\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled || props.readonly}\n                    required={props.required}\n                    onChange={props.onChange}\n                    aria-controls={props.helperTextId}\n                    aria-describedby={props.helperTextId}\n                    {...inputProps}\n                />\n                <div class=\"mdc-checkbox__background\">\n                    <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                        <path\n                            class=\"mdc-checkbox__checkmark-path\"\n                            fill=\"none\"\n                            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n                        />\n                    </svg>\n                    <div class=\"mdc-checkbox__mixedmark\" />\n                </div>\n            </div>\n            <label\n                class={{\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>,\n        <HelperText\n            text={props.helperText}\n            helperTextId={props.helperTextId}\n        />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{\n    helperTextId: string;\n    text: string;\n}> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return (\n        <limel-helper-line\n            helperText={props.text.trim()}\n            helperTextId={props.helperTextId}\n        />\n    );\n};\n"]}

package/dist/collection/components/collapsible-section/collapsible-section.js

@@ -1,5 +1,6 @@
-import { h } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
+import { makeEnterClickable, removeEnterClickable, } from 'src/util/makeEnterClickable';
 /**
  * @slot - Content to put inside the collapsible section
  * @exampleComponent limel-example-collapsible-section
@@ -41,6 +42,14 @@ export class CollapsibleSection {
     this.header = undefined;
     this.actions = undefined;
   }
+  componentDidRender() {
+    const button = this.host.shadowRoot.querySelector('.open-close-toggle');
+    makeEnterClickable(button);
+  }
+  disconnectedCallback() {
+    const button = this.host.shadowRoot.querySelector('.open-close-toggle');
+    removeEnterClickable(button);
+  }
   render() {
     return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "divider-line" }), this.renderActions()), h("div", { class: "body" }, h("slot", null))));
   }
@@ -168,5 +177,6 @@ export class CollapsibleSection {
         }
       }];
   }
+  static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=collapsible-section.js.map

package/dist/collection/components/collapsible-section/collapsible-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-section.js","sourceRoot":"","sources":["../../../src/components/collapsible-section/collapsible-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE;;;;;;;GAOG;AAMH,MAAM,OAAO,kBAAkB;;IA6DnB,YAAO,GAAG,GAAG,EAAE;MACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;MAE3B,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAG,CAAC;QAC9B,UAAU,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;OACtD;WAAM;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB;IACL,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,OAAO,CACH,WAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CACxC,CACT,CAAC;IACN,CAAC,CAAC;IAEM,uBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;MAC5C,OAAO,CACH,yBACI,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACzC,CACL,CAAC;IACN,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC,KAAiB,EAAE,EAAE;MAClE,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC;kBAlGuB,KAAK;;;;EAgCvB,MAAM;IACT,OAAO,CACH,eAAS,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;MAC1C;QACI,cAAQ,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI;QAC3D,WAAK,KAAK,EAAC,aAAa;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG,CAClB;QACN,UAAI,KAAK,EAAC,gDAAgD,IACrD,IAAI,CAAC,MAAM,CACX;QACL,WAAK,KAAK,EAAC,cAAc,GAAG;QAC3B,IAAI,CAAC,aAAa,EAAE,CAChB;MACT,WAAK,KAAK,EAAC,MAAM;QACb,eAAQ,CACN,CACA,CACb,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CJ","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    public render() {\n        return (\n            <section class={`${this.isOpen ? 'open' : ''}`}>\n                <header>\n                    <button class=\"open-close-toggle\" onClick={this.onClick} />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderActions()}\n                </header>\n                <div class=\"body\">\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"]}
+{"version":3,"file":"collapsible-section.js","sourceRoot":"","sources":["../../../src/components/collapsible-section/collapsible-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/makeEnterClickable';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle'\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle'\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section class={`${this.isOpen ? 'open' : ''}`}>\n                <header>\n                    <button class=\"open-close-toggle\" onClick={this.onClick} />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderActions()}\n                </header>\n                <div class=\"body\">\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"]}