@limetech/lime-elements 37.2.8 → 37.4.0

package/dist/cjs/limel-tab-bar.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-38eb64b5.js');
-const getIconProps = require('./get-icon-props-d74b10c9.js');
+const getIconProps = require('./get-icon-props-50be7440.js');
 const isEqual = require('./isEqual-d2a13a24.js');
 const component = require('./component-b37fd9bc.js');
 const component$1 = require('./component-a4eb183b.js');

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy(JSON.parse("[[\"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-action-bar.cjs\",[[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}]]],[\"limel-split-button.cjs\",[[1,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"formattedValue\":[32],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"message\":[1],\"timeout\":[2],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"show\":[64]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1],\"isDraggingOverDropZone\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"modified\":[32]}]]],[\"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-chip.cjs\",[[1,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"removable\":[516],\"type\":[513]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[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\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-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-icon-button.cjs\",[[1,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-spinner.cjs\",[[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-breadcrumbs_3.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"menuBreadCrumb\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[1,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}]]],[\"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],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}]]],[\"limel-button.cjs\",[[1,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-circular-progress_2.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}],[1,\"limel-linear-progress\",{\"value\":[514],\"indeterminate\":[516]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1]}]]],[\"limel-portal_3.cjs\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"parent\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-input-field_3.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\"],\"locale\":[513],\"isFocused\":[32],\"isModified\":[32],\"showCompletions\":[32]}],[1,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"limel-action-bar.cjs\",[[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}]]],[\"limel-split-button.cjs\",[[1,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-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-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"formattedValue\":[32],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"message\":[1],\"timeout\":[2],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"show\":[64]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1],\"isDraggingOverDropZone\":[32]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-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-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[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\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-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-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],\"invalid\":[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\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-helper-line.cjs\",[[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-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-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\":[514],\"indeterminate\":[516]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1]}]]],[\"limel-icon-button.cjs\",[[1,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[1,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"removable\":[516],\"type\":[513],\"identifier\":[520]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-spinner.cjs\",[[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}]]],[\"limel-portal_3.cjs\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"parent\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-input-field_3.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\"],\"locale\":[513],\"isFocused\":[32],\"isModified\":[32],\"showCompletions\":[32]}],[1,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}]]],[\"limel-breadcrumbs_3.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"menuBreadCrumb\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[1,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}]]]]"), options);
   });
 };
 

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

@@ -61,6 +61,7 @@
   isolation: isolate;
   display: inline-flex;
   align-items: center;
+  min-width: 0;
 }
 
 * {
@@ -70,6 +71,7 @@
 .chip {
   all: unset;
   position: relative;
+  min-width: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -195,6 +197,7 @@ limel-badge {
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
   z-index: 1;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -46,16 +46,15 @@ import { BACKSPACE, BACKSPACE_KEY_CODE, DELETE, DELETE_KEY_CODE, } from '../../u
  */
 export class Chip {
   constructor() {
-    this.chipId = 'chip-' + crypto.randomUUID();
     this.renderAsButton = () => {
       return [
-        h("button", { id: this.chipId, class: "chip", role: "button", disabled: this.disabled || this.readonly, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
+        h("button", { id: 'chip-' + this.identifier, class: "chip", role: "button", disabled: this.disabled || this.readonly, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
         this.renderRemoveButton(),
       ];
     };
     this.renderAsLink = () => {
       return [
-        h("a", { id: this.chipId, class: "chip", href: this.link.href, title: this.link.title, target: this.link.target, "aria-disabled": this.disabled || this.readonly, tabindex: this.disabled || this.readonly ? -1 : 0, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
+        h("a", { id: 'chip-' + this.identifier, class: "chip", href: this.link.href, title: this.link.title, target: this.link.target, "aria-disabled": this.disabled || this.readonly, tabindex: this.disabled || this.readonly ? -1 : 0, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
         this.renderRemoveButton(),
       ];
     };
@@ -69,7 +68,7 @@ export class Chip {
     };
     this.handleRemoveClick = (event) => {
       event.stopPropagation();
-      this.remove.emit();
+      this.remove.emit(this.identifier);
     };
     this.handleDeleteKeyDown = (event) => {
       if (!this.removable) {
@@ -93,7 +92,8 @@ export class Chip {
     this.readonly = false;
     this.selected = false;
     this.removable = false;
-    this.type = undefined;
+    this.type = 'default';
+    this.identifier = crypto.randomUUID();
   }
   componentWillLoad() {
     makeEnterClickable(this.host);
@@ -126,7 +126,7 @@ export class Chip {
       return;
     }
     const svgData = '<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-width="2" d="m8 8 16 16M24 8 8 24"/></svg>';
-    return (h("button", { class: "trailing-button remove-button", tabIndex: -1, "aria-label": this.removeChipLabel, "aria-controls": this.chipId, innerHTML: svgData, onClick: this.handleRemoveClick }));
+    return (h("button", { class: "trailing-button remove-button", tabIndex: -1, "aria-label": this.removeChipLabel, "aria-controls": 'chip-' + this.identifier, innerHTML: svgData, onClick: this.handleRemoveClick }));
   }
   static get is() { return "limel-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -320,18 +320,45 @@ export class Chip {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'filter'",
-          "resolved": "\"filter\"",
-          "references": {}
+          "original": "ChipType",
+          "resolved": "\"default\" | \"filter\"",
+          "references": {
+            "ChipType": {
+              "location": "import",
+              "path": "../chip-set/chip.types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "beta",
+              "text": undefined
+            }],
           "text": "Set to `filter` to render the chip with a distinct style\nsuitable for visualizing filters."
         },
         "attribute": "type",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "'default'"
+      },
+      "identifier": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | string",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Identifier for the chip. Must be unique."
+        },
+        "attribute": "identifier",
+        "reflect": true,
+        "defaultValue": "crypto.randomUUID()"
       }
     };
   }
@@ -344,11 +371,11 @@ export class Chip {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fired when clicking on the remove button of a `removable` chip."
+          "text": "Fired when clicking on the remove button of a `removable` chip.\nThe value of `identifier` is emitted as the event detail."
         },
         "complexType": {
-          "original": "void",
-          "resolved": "void",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         }
       }];

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

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon, Languages, Link } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport {\n    BACKSPACE,\n    BACKSPACE_KEY_CODE,\n    DELETE,\n    DELETE_KEY_CODE,\n} from '../../util/keycodes';\nimport { Chip as OldChipInterface } from '../chip-set/chip.types';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @private\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: true,\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     */\n    @Prop({ reflect: true })\n    public type?: 'filter';\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     */\n    @Event()\n    public remove: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    private chipId = 'chip-' + crypto.randomUUID();\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={this.chipId}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n            </button>,\n            this.renderRemoveButton(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        return [\n            <a\n                id={this.chipId}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n            </a>,\n            this.renderRemoveButton(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (!this.removable || this.readonly || this.disabled) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel}\n                aria-controls={this.chipId}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit();\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n        const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];\n\n        if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('chip-set.remove-chip', this.language);\n    };\n}\n"]}
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon, Languages, Link } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport {\n    BACKSPACE,\n    BACKSPACE_KEY_CODE,\n    DELETE,\n    DELETE_KEY_CODE,\n} from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    identifier?: number | string;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @private\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: true,\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     *\n     * @beta\n     */\n    @Prop({ reflect: true })\n    public type?: ChipType = 'default';\n\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    @Prop({ reflect: true })\n    public identifier?: number | string = crypto.randomUUID();\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     * The value of `identifier` is emitted as the event detail.\n     */\n    @Event()\n    public remove: EventEmitter<number | string>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\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            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n            </button>,\n            this.renderRemoveButton(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        return [\n            <a\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n            </a>,\n            this.renderRemoveButton(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (!this.removable || this.readonly || this.disabled) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel}\n                aria-controls={'chip-' + this.identifier}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit(this.identifier);\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n        const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];\n\n        if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('chip-set.remove-chip', this.language);\n    };\n}\n"]}