@limetech/lime-elements 38.9.5 → 38.9.6

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-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"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],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"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-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],\"internalFormat\":[32],\"showPortal\":[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-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"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-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"invalid\":[516],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[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-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"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],\"readonlyLabels\":[16],\"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-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"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-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-badge_3.cjs\",[[1,\"limel-badge\",{\"label\":[520]}],[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]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16]}]]],[\"limel-portal.cjs\",[[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-dynamic-label_2.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-breadcrumbs_8.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],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[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],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"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]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"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],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"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],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"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-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],\"internalFormat\":[32],\"showPortal\":[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-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"invalid\":[516],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"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-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-dynamic-label_2.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"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-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-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-portal_2.cjs\",[[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],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-badge_2.cjs\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}]]],[\"limel-breadcrumbs_8.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],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[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],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"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]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"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],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]]]"), options);
   });
 };
 

package/dist/collection/components/tab-bar/tab-bar.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
  * This file is imported into every component!
  *
@@ -529,12 +530,80 @@
   will-change: transform, opacity;
 }
 
-/*
- * This file is imported into every component!
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
  */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 .scroll-fade,
 .scroll-button {
   position: absolute;
@@ -546,38 +615,79 @@
 .scroll-fade {
   top: 0;
   height: 100%;
-  width: 4.0625rem;
+  width: 4rem;
   pointer-events: none;
 }
 .scroll-fade.left {
-  transform: translate3d(-4.0625rem, 0, 0);
+  transform: translate3d(-4rem, 0, 0);
   left: 0;
   background: linear-gradient(270deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%);
 }
 .scroll-fade.right {
-  transform: translate3d(4.0625rem, 0, 0);
+  transform: translate3d(4rem, 0, 0);
   right: 0;
   background: linear-gradient(90deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%);
 }
 
 .scroll-button {
-  --icon-background-color: rgb(var(--contrast-100));
   display: flex;
   align-items: center;
   top: 0;
   bottom: 0;
 }
 .scroll-button.left {
-  transform: translate3d(-4.0625rem, 0, 0);
+  transform: translate3d(-4rem, 0, 0);
   left: 0.25rem;
 }
 .scroll-button.right {
-  transform: translate3d(4.0625rem, 0, 0);
+  transform: translate3d(4rem, 0, 0);
   right: 0.25rem;
 }
 .scroll-button:hover {
   transform: translate3d(0, 0, 0);
 }
+.scroll-button button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: calc(100% - (0.25rem * 2));
+  border-radius: 0.25rem;
+}
+.scroll-button button:not(:disabled) {
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
+  cursor: pointer;
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal);
+}
+.scroll-button button:not(:disabled):hover, .scroll-button button:not(:disabled):focus, .scroll-button button:not(:disabled):focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
+.scroll-button button:not(:disabled):hover {
+  transform: translate3d(0, -0.04rem, 0);
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+.scroll-button button:not(:disabled):active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
+  box-shadow: var(--button-shadow-pressed);
+}
+.scroll-button button:not(:disabled):hover, .scroll-button button:not(:disabled):active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
+}
+.scroll-button limel-icon {
+  width: 1rem;
+}
 
 .mdc-tab-scroller {
   position: relative;
@@ -639,11 +749,12 @@
 
 .mdc-tab {
   border-radius: 0;
-  padding-right: 1.25rem;
-  padding-left: 1.25rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
   min-width: 2.5rem;
   background-color: transparent;
   flex: 0 0 auto;
+  height: 2.5rem;
 }
 .mdc-tab:not(.mdc-tab--active) {
   --badge-background-color: rgb(var(--contrast-600));
@@ -664,6 +775,12 @@
 .mdc-tab:not(.mdc-tab--active):last-of-type:after {
   display: none;
 }
+.mdc-tab .mdc-tab__icon {
+  margin-left: -0.25rem;
+}
+.mdc-tab limel-badge {
+  margin-right: -0.25rem;
+}
 
 .mdc-tab--active {
   border-radius: 0.625rem 0.625rem 0 0;

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

@@ -7,6 +7,8 @@ import { getIconColor, getIconName } from '../icon/get-icon-props';
 const { TAB_ACTIVATED_EVENT } = strings;
 const SCROLL_DISTANCE_ON_CLICK_PX = 150;
 const HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX = 40;
+const TOTAL_WIDTH_PERCENTAGE = 100;
+const OVERLAP_PERCENTAGE = 20;
 /**
  * Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.
  * :::warning
@@ -61,7 +63,7 @@ export class TabBar {
         'mdc-tab-scroller': true,
         'can-scroll-left': this.canScrollLeft,
         'can-scroll-right': this.canScrollRight,
-      } }, h("div", { class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { class: "scroll-fade left" }), h("div", { class: "scroll-button left" }, h("limel-icon-button", { icon: "angle_left", elevated: true, tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick })), h("div", { class: "scroll-fade right" }), h("div", { class: "scroll-button right" }, h("limel-icon-button", { icon: "angle_right", elevated: true, tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick })))));
+      } }, h("div", { class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { class: "scroll-fade left" }), h("div", { class: "scroll-button left" }, h("button", { type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, h("limel-icon", { name: "angle_left" }))), h("div", { class: "scroll-fade right" }), h("div", { class: "scroll-button right" }, h("button", { type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, h("limel-icon", { name: "angle_right" }))))));
   }
   tabsChanged(newTabs = [], oldTabs = []) {
     const newIds = newTabs.map((tab) => tab.id);
@@ -139,17 +141,32 @@ export class TabBar {
     }
   }
   handleLeftScrollClick() {
+    const scrollDistance = this.getScrollDistance();
     this.scrollArea.scroll({
-      left: this.scrollArea.scrollLeft - SCROLL_DISTANCE_ON_CLICK_PX,
+      left: this.scrollArea.scrollLeft - scrollDistance,
       behavior: 'smooth',
     });
   }
   handleRightScrollClick() {
+    const scrollDistance = this.getScrollDistance();
     this.scrollArea.scroll({
-      left: this.scrollArea.scrollLeft + SCROLL_DISTANCE_ON_CLICK_PX,
+      left: this.scrollArea.scrollLeft + scrollDistance,
       behavior: 'smooth',
     });
   }
+  /**
+   * Calculates how far to scroll when navigation buttons are clicked.
+   * Returns the visible width minus an overlap percentage to maintain context.
+   * Falls back to the constant value if something goes wrong.
+   */
+  getScrollDistance() {
+    if (!this.scrollArea) {
+      return SCROLL_DISTANCE_ON_CLICK_PX;
+    }
+    const containerWidth = this.scrollArea.getBoundingClientRect().width;
+    const scrollDistance = containerWidth * (1 - OVERLAP_PERCENTAGE / TOTAL_WIDTH_PERCENTAGE);
+    return Math.max(scrollDistance, SCROLL_DISTANCE_ON_CLICK_PX);
+  }
   renderIcon(tab) {
     if (!tab.icon) {
       return;

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

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../../src/components/tab-bar/tab-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,CAAC,EACD,MAAM,EACN,IAAI,EACJ,OAAO,EAEP,KAAK,EACL,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAA2B,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEnE,MAAM,EAAE,mBAAmB,EAAE,GAAG,OAAO,CAAC;AACxC,MAAM,2BAA2B,GAAG,GAAG,CAAC;AACxC,MAAM,8CAA8C,GAAG,EAAE,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,MAAM,OAAO,MAAM;EA2Bf;IAJQ,aAAQ,GAAG,KAAK,CAAC;gBAlBJ,EAAE;yBAYC,KAAK;0BAGJ,KAAK;IAQ1B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC9C;EAEM,iBAAiB;IACpB,IAAI,CAAC,KAAK,EAAE,CAAC;EACjB,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,IAAI,CAAC,uBAAuB,EAAE,CAAC;EACnC,CAAC;EAEM,kBAAkB;IACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAChB,OAAO;KACV;IAED,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;EAC1B,CAAC;EAEM,oBAAoB;IACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;EACpB,CAAC;EAEM,MAAM;IACT,OAAO,CACH,WAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS;MACnC,WACI,KAAK,EAAE;UACH,kBAAkB,EAAE,IAAI;UACxB,iBAAiB,EAAE,IAAI,CAAC,aAAa;UACrC,kBAAkB,EAAE,IAAI,CAAC,cAAc;SAC1C;QAED,WAAK,KAAK,EAAC,oDAAoD;UAC3D,WAAK,KAAK,EAAC,kCAAkC,IACxC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAC5B,CACJ;QACN,WAAK,KAAK,EAAC,kBAAkB,GAAG;QAChC,WAAK,KAAK,EAAC,oBAAoB;UAC3B,yBACI,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAC,IAAI,iBACD,MAAM,EAClB,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,qBAAqB,GACrC,CACA;QACN,WAAK,KAAK,EAAC,mBAAmB,GAAG;QACjC,WAAK,KAAK,EAAC,qBAAqB;UAC5B,yBACI,IAAI,EAAC,aAAa,EAClB,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAC,IAAI,iBACD,MAAM,EAClB,QAAQ,EAAE,CAAC,IAAI,CAAC,cAAc,EAC9B,OAAO,EAAE,IAAI,CAAC,sBAAsB,GACtC,CACA,CACJ,CACJ,CACT,CAAC;EACN,CAAC;EAGS,WAAW,CAAC,UAAiB,EAAE,EAAE,UAAiB,EAAE;IAC1D,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC5C,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAE5C,IAAI,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE;MACzB,OAAO;KACV;IAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,QAAQ,EAAE,CAAC;EACpB,CAAC;EAGS,kBAAkB;IACxB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MAClB,OAAO;KACV;IAED,IAAI,CAAC,YAAY,EAAE,CAAC;EACxB,CAAC;EAEO,KAAK;IACT,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACnE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;IACxC,IAAI,CAAC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC;IACtC,IAAI,CAAC,SAAS,CAAC,sBAAsB,GAAG,IAAI,CAAC;IAC7C,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,aAAa,CACnC,gCAAgC,CACnC,CAAC;IACF,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,aAAa,CACtC,mCAAmC,CACtC,CAAC;IAEF,IAAI,CAAC,cAAc,EAAE,CAAC;IAEtB,8DAA8D;IAC9D,UAAU,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;EACrC,CAAC;EAEO,QAAQ;IACZ,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KACpE;IAED,IAAI,IAAI,CAAC,SAAS,EAAE;MAChB,IAAI,CAAC,SAAS,CAAC,QAAQ,CACnB,mBAAmB,EACnB,IAAI,CAAC,kBAAkB,CAC1B,CAAC;MACF,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;KAC5B;EACL,CAAC;EAEO,cAAc;IAClB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACpE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE;MAC1D,OAAO,EAAE,IAAI;KAChB,CAAC,CAAC;EACP,CAAC;EAEO,kBAAkB,CAAC,KAA8B;IACrD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACjC,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAE/C,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC;OACzB,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;OACzB,OAAO,CAAC,CAAC,GAAQ,EAAE,EAAE;MAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEP,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;EACxB,CAAC;EAEO,cAAc,CAAC,CAAM,EAAE,CAAM;IACjC,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;EAC/C,CAAC;EAEO,YAAY;IAChB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;IAC9C,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAC1B,IAAI,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,KAAK;MAC5C,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK;MAC7C,UAAU,CACjB,CAAC;IAEF,IAAI,UAAU,GAAG,8CAA8C,EAAE;MAC7D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC7B;SAAM;MACH,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC9B;IAED,IAAI,WAAW,GAAG,8CAA8C,EAAE;MAC9D,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC9B;SAAM;MACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC/B;EACL,CAAC;EAEO,qBAAqB;IACzB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;MACnB,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,UAAU,GAAG,2BAA2B;MAC9D,QAAQ,EAAE,QAAQ;KACrB,CAAC,CAAC;EACP,CAAC;EAEO,sBAAsB;IAC1B,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;MACnB,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,UAAU,GAAG,2BAA2B;MAC9D,QAAQ,EAAE,QAAQ;KACrB,CAAC,CAAC;EACP,CAAC;EAEO,UAAU,CAAC,GAAQ;IACvB,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;MACX,OAAO;KACV;IAED,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACnC,+CAA+C;IAC/C,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;IAE5B,IAAI,KAAK,EAAE;MACP,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;KACvB;IAED,OAAO,CACH,kBACI,KAAK,EAAC,eAAe,EACrB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,iBACA,MAAM,GACpB,CACL,CAAC;EACN,CAAC;EAEO,SAAS,CAAC,GAAQ;IACtB,OAAO,CACH,cACI,KAAK,EAAE;QACH,SAAS,EAAE,IAAI;QACf,iBAAiB,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM;OAClC,EACD,IAAI,EAAC,KAAK,mBACK,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC5C,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MAE7B,YAAM,KAAK,EAAC,kBAAkB;QACzB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;QACrB,YAAM,KAAK,EAAC,qBAAqB,IAAE,GAAG,CAAC,IAAI,CAAQ;QAClD,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAa,KAAK,EAAE,GAAG,CAAC,KAAK,GAAI,CAAC,CAAC,CAAC,EAAE,CAChD;MACP,YACI,KAAK,EAAE;UACH,mBAAmB,EAAE,IAAI;UACzB,2BAA2B,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM;SAC5C;QAED,YAAM,KAAK,EAAC,kEAAkE,GAAG,CAC9E;MACP,YAAM,KAAK,EAAC,iBAAiB,GAAG,CAC3B,CACZ,CAAC;EACN,CAAC;EAEO,uBAAuB;IAC3B,+CAA+C;IAC/C,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;MACxC,yCAAyC;MACzC,OAAO,CAAC,IAAI,CACR,sKAAsK,CACzK,CAAC;KACL;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    h,\n    Listen,\n    Prop,\n    Element,\n    EventEmitter,\n    Event,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { MDCTabBar, MDCTabBarActivatedEvent } from '@material/tab-bar';\nimport { strings } from '@material/tab-bar/constants';\nimport { Tab } from './tab.types';\nimport { isEqual, difference } from 'lodash-es';\nimport { setActiveTab } from './tabs';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\nconst { TAB_ACTIVATED_EVENT } = strings;\nconst SCROLL_DISTANCE_ON_CLICK_PX = 150;\nconst HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX = 40;\n\n/**\n * Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.\n * :::warning\n * Tab bars should be strictly used for navigation at the top levels.\n * They should never be used to perform actions, or navigate away from the view which contains them.\n * :::\n * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.\n * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.\n * :::tip Other things to consider\n * Never divide the content of a tab using a nested tab bar.\n * Never place two tab bars within the same screen.\n * Never use background color for icons in tabs.\n * Avoid having long labels for tabs.\n * A tab will never be removed or get disabled, even if there is no content under it.\n * :::\n *\n * @exampleComponent limel-example-tab-bar\n * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width\n * @exampleComponent limel-example-tab-bar-with-equal-tab-width\n */\n@Component({\n    tag: 'limel-tab-bar',\n    styleUrl: 'tab-bar.scss',\n    shadow: true,\n})\nexport class TabBar {\n    /**\n     * List of tabs to display\n     */\n    @Prop({ mutable: true })\n    public tabs: Tab[] = [];\n\n    /**\n     * Emitted when a tab has been changed\n     */\n    @Event()\n    private changeTab: EventEmitter<Tab>;\n\n    @Element()\n    private host: HTMLLimelTabBarElement;\n\n    @State()\n    private canScrollLeft = false;\n\n    @State()\n    private canScrollRight = false;\n\n    private mdcTabBar: MDCTabBar;\n    private setupMdc = false;\n    private scrollArea: HTMLElement;\n    private scrollContent: HTMLElement;\n\n    constructor() {\n        this.handleTabActivated = this.handleTabActivated.bind(this);\n        this.handleScroll = this.handleScroll.bind(this);\n        this.handleLeftScrollClick = this.handleLeftScrollClick.bind(this);\n        this.handleRightScrollClick = this.handleRightScrollClick.bind(this);\n        this.renderTab = this.renderTab.bind(this);\n    }\n\n    public connectedCallback() {\n        this.setup();\n    }\n\n    public componentDidLoad() {\n        this.setup();\n        this.triggerIconColorWarning();\n    }\n\n    public componentDidUpdate() {\n        if (!this.setupMdc) {\n            return;\n        }\n\n        this.setup();\n        this.setupMdc = false;\n    }\n\n    public disconnectedCallback() {\n        this.tearDown();\n    }\n\n    public render() {\n        return (\n            <div class=\"mdc-tab-bar\" role=\"tablist\">\n                <div\n                    class={{\n                        'mdc-tab-scroller': true,\n                        'can-scroll-left': this.canScrollLeft,\n                        'can-scroll-right': this.canScrollRight,\n                    }}\n                >\n                    <div class=\"mdc-tab-scroller__scroll-area lime-hide-scrollbars\">\n                        <div class=\"mdc-tab-scroller__scroll-content\">\n                            {this.tabs.map(this.renderTab)}\n                        </div>\n                    </div>\n                    <div class=\"scroll-fade left\" />\n                    <div class=\"scroll-button left\">\n                        <limel-icon-button\n                            icon=\"angle_left\"\n                            elevated={true}\n                            tabindex=\"-1\"\n                            aria-hidden=\"true\"\n                            disabled={!this.canScrollLeft}\n                            onClick={this.handleLeftScrollClick}\n                        />\n                    </div>\n                    <div class=\"scroll-fade right\" />\n                    <div class=\"scroll-button right\">\n                        <limel-icon-button\n                            icon=\"angle_right\"\n                            elevated={true}\n                            tabindex=\"-1\"\n                            aria-hidden=\"true\"\n                            disabled={!this.canScrollRight}\n                            onClick={this.handleRightScrollClick}\n                        />\n                    </div>\n                </div>\n            </div>\n        );\n    }\n\n    @Watch('tabs')\n    protected tabsChanged(newTabs: Tab[] = [], oldTabs: Tab[] = []) {\n        const newIds = newTabs.map((tab) => tab.id);\n        const oldIds = oldTabs.map((tab) => tab.id);\n\n        if (isEqual(newIds, oldIds)) {\n            return;\n        }\n\n        this.setupMdc = true;\n        this.tearDown();\n    }\n\n    @Listen('resize', { passive: true, target: 'window' })\n    protected handleWindowResize() {\n        if (!this.scrollArea) {\n            return;\n        }\n\n        this.handleScroll();\n    }\n\n    private setup() {\n        const element = this.host.shadowRoot.querySelector('.mdc-tab-bar');\n        if (!element) {\n            return;\n        }\n\n        this.mdcTabBar = new MDCTabBar(element);\n        this.mdcTabBar.focusOnActivate = true;\n        this.mdcTabBar.useAutomaticActivation = true;\n        this.scrollArea = element.querySelector(\n            '.mdc-tab-scroller__scroll-area',\n        );\n        this.scrollContent = element.querySelector(\n            '.mdc-tab-scroller__scroll-content',\n        );\n\n        this.setupListeners();\n\n        // Use timeout to avoid Stencil warning about re-renders. /Ads\n        setTimeout(this.handleScroll, 0);\n    }\n\n    private tearDown() {\n        if (this.scrollArea) {\n            this.scrollArea.removeEventListener('scroll', this.handleScroll);\n        }\n\n        if (this.mdcTabBar) {\n            this.mdcTabBar.unlisten(\n                TAB_ACTIVATED_EVENT,\n                this.handleTabActivated,\n            );\n            this.mdcTabBar.destroy();\n        }\n    }\n\n    private setupListeners() {\n        this.mdcTabBar.listen(TAB_ACTIVATED_EVENT, this.handleTabActivated);\n        this.scrollArea.addEventListener('scroll', this.handleScroll, {\n            passive: true,\n        });\n    }\n\n    private handleTabActivated(event: MDCTabBarActivatedEvent) {\n        const index = event.detail.index;\n        const newTabs = setActiveTab(this.tabs, index);\n\n        difference(newTabs, this.tabs)\n            .sort(this.sortByInactive)\n            .forEach((tab: Tab) => {\n                this.changeTab.emit(tab);\n            });\n\n        this.tabs = newTabs;\n    }\n\n    private sortByInactive(a: Tab, b: Tab) {\n        return Number(a.active) - Number(b.active);\n    }\n\n    private handleScroll() {\n        const scrollLeft = this.scrollArea.scrollLeft;\n        const scrollRight = Math.floor(\n            this.scrollContent.getBoundingClientRect().width -\n                this.scrollArea.getBoundingClientRect().width -\n                scrollLeft,\n        );\n\n        if (scrollLeft > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {\n            this.canScrollLeft = true;\n        } else {\n            this.canScrollLeft = false;\n        }\n\n        if (scrollRight > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {\n            this.canScrollRight = true;\n        } else {\n            this.canScrollRight = false;\n        }\n    }\n\n    private handleLeftScrollClick() {\n        this.scrollArea.scroll({\n            left: this.scrollArea.scrollLeft - SCROLL_DISTANCE_ON_CLICK_PX,\n            behavior: 'smooth',\n        });\n    }\n\n    private handleRightScrollClick() {\n        this.scrollArea.scroll({\n            left: this.scrollArea.scrollLeft + SCROLL_DISTANCE_ON_CLICK_PX,\n            behavior: 'smooth',\n        });\n    }\n\n    private renderIcon(tab: Tab) {\n        if (!tab.icon) {\n            return;\n        }\n\n        const name = getIconName(tab.icon);\n        // eslint-disable-next-line sonarjs/deprecation\n        const color = getIconColor(tab.icon, tab.iconColor);\n        const style = { color: '' };\n\n        if (color) {\n            style.color = color;\n        }\n\n        return (\n            <limel-icon\n                class=\"mdc-tab__icon\"\n                name={name}\n                style={style}\n                size=\"small\"\n                aria-hidden=\"true\"\n            />\n        );\n    }\n\n    private renderTab(tab: Tab) {\n        return (\n            <button\n                class={{\n                    'mdc-tab': true,\n                    'mdc-tab--active': !!tab.active,\n                }}\n                role=\"tab\"\n                aria-selected={tab.active ? 'true' : 'false'}\n                tabindex={tab.active ? 0 : -1}\n            >\n                <span class=\"mdc-tab__content\">\n                    {this.renderIcon(tab)}\n                    <span class=\"mdc-tab__text-label\">{tab.text}</span>\n                    {tab.badge ? <limel-badge label={tab.badge} /> : ''}\n                </span>\n                <span\n                    class={{\n                        'mdc-tab-indicator': true,\n                        'mdc-tab-indicator--active': !!tab.active,\n                    }}\n                >\n                    <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\" />\n                </span>\n                <span class=\"mdc-tab__ripple\" />\n            </button>\n        );\n    }\n\n    private triggerIconColorWarning() {\n        // eslint-disable-next-line sonarjs/deprecation\n        if (this.tabs.some((tab) => tab.iconColor)) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n            );\n        }\n    }\n}\n"]}
+{"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../../src/components/tab-bar/tab-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    h,\n    Listen,\n    Prop,\n    Element,\n    EventEmitter,\n    Event,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { MDCTabBar, MDCTabBarActivatedEvent } from '@material/tab-bar';\nimport { strings } from '@material/tab-bar/constants';\nimport { Tab } from './tab.types';\nimport { isEqual, difference } from 'lodash-es';\nimport { setActiveTab } from './tabs';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\nconst { TAB_ACTIVATED_EVENT } = strings;\nconst SCROLL_DISTANCE_ON_CLICK_PX = 150;\nconst HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX = 40;\nconst TOTAL_WIDTH_PERCENTAGE = 100;\nconst OVERLAP_PERCENTAGE = 20;\n\n/**\n * Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.\n * :::warning\n * Tab bars should be strictly used for navigation at the top levels.\n * They should never be used to perform actions, or navigate away from the view which contains them.\n * :::\n * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.\n * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.\n * :::tip Other things to consider\n * Never divide the content of a tab using a nested tab bar.\n * Never place two tab bars within the same screen.\n * Never use background color for icons in tabs.\n * Avoid having long labels for tabs.\n * A tab will never be removed or get disabled, even if there is no content under it.\n * :::\n *\n * @exampleComponent limel-example-tab-bar\n * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width\n * @exampleComponent limel-example-tab-bar-with-equal-tab-width\n */\n@Component({\n    tag: 'limel-tab-bar',\n    styleUrl: 'tab-bar.scss',\n    shadow: true,\n})\nexport class TabBar {\n    /**\n     * List of tabs to display\n     */\n    @Prop({ mutable: true })\n    public tabs: Tab[] = [];\n\n    /**\n     * Emitted when a tab has been changed\n     */\n    @Event()\n    private changeTab: EventEmitter<Tab>;\n\n    @Element()\n    private host: HTMLLimelTabBarElement;\n\n    @State()\n    private canScrollLeft = false;\n\n    @State()\n    private canScrollRight = false;\n\n    private mdcTabBar: MDCTabBar;\n    private setupMdc = false;\n    private scrollArea: HTMLElement;\n    private scrollContent: HTMLElement;\n\n    constructor() {\n        this.handleTabActivated = this.handleTabActivated.bind(this);\n        this.handleScroll = this.handleScroll.bind(this);\n        this.handleLeftScrollClick = this.handleLeftScrollClick.bind(this);\n        this.handleRightScrollClick = this.handleRightScrollClick.bind(this);\n        this.renderTab = this.renderTab.bind(this);\n    }\n\n    public connectedCallback() {\n        this.setup();\n    }\n\n    public componentDidLoad() {\n        this.setup();\n        this.triggerIconColorWarning();\n    }\n\n    public componentDidUpdate() {\n        if (!this.setupMdc) {\n            return;\n        }\n\n        this.setup();\n        this.setupMdc = false;\n    }\n\n    public disconnectedCallback() {\n        this.tearDown();\n    }\n\n    public render() {\n        return (\n            <div class=\"mdc-tab-bar\" role=\"tablist\">\n                <div\n                    class={{\n                        'mdc-tab-scroller': true,\n                        'can-scroll-left': this.canScrollLeft,\n                        'can-scroll-right': this.canScrollRight,\n                    }}\n                >\n                    <div class=\"mdc-tab-scroller__scroll-area lime-hide-scrollbars\">\n                        <div class=\"mdc-tab-scroller__scroll-content\">\n                            {this.tabs.map(this.renderTab)}\n                        </div>\n                    </div>\n                    <div class=\"scroll-fade left\" />\n                    <div class=\"scroll-button left\">\n                        <button\n                            type=\"button\"\n                            tabindex=\"-1\"\n                            aria-hidden=\"true\"\n                            disabled={!this.canScrollLeft}\n                            onClick={this.handleLeftScrollClick}\n                        >\n                            <limel-icon name=\"angle_left\" />\n                        </button>\n                    </div>\n                    <div class=\"scroll-fade right\" />\n                    <div class=\"scroll-button right\">\n                        <button\n                            type=\"button\"\n                            tabindex=\"-1\"\n                            aria-hidden=\"true\"\n                            disabled={!this.canScrollRight}\n                            onClick={this.handleRightScrollClick}\n                        >\n                            <limel-icon name=\"angle_right\" />\n                        </button>\n                    </div>\n                </div>\n            </div>\n        );\n    }\n\n    @Watch('tabs')\n    protected tabsChanged(newTabs: Tab[] = [], oldTabs: Tab[] = []) {\n        const newIds = newTabs.map((tab) => tab.id);\n        const oldIds = oldTabs.map((tab) => tab.id);\n\n        if (isEqual(newIds, oldIds)) {\n            return;\n        }\n\n        this.setupMdc = true;\n        this.tearDown();\n    }\n\n    @Listen('resize', { passive: true, target: 'window' })\n    protected handleWindowResize() {\n        if (!this.scrollArea) {\n            return;\n        }\n\n        this.handleScroll();\n    }\n\n    private setup() {\n        const element = this.host.shadowRoot.querySelector('.mdc-tab-bar');\n        if (!element) {\n            return;\n        }\n\n        this.mdcTabBar = new MDCTabBar(element);\n        this.mdcTabBar.focusOnActivate = true;\n        this.mdcTabBar.useAutomaticActivation = true;\n        this.scrollArea = element.querySelector(\n            '.mdc-tab-scroller__scroll-area',\n        );\n        this.scrollContent = element.querySelector(\n            '.mdc-tab-scroller__scroll-content',\n        );\n\n        this.setupListeners();\n\n        // Use timeout to avoid Stencil warning about re-renders. /Ads\n        setTimeout(this.handleScroll, 0);\n    }\n\n    private tearDown() {\n        if (this.scrollArea) {\n            this.scrollArea.removeEventListener('scroll', this.handleScroll);\n        }\n\n        if (this.mdcTabBar) {\n            this.mdcTabBar.unlisten(\n                TAB_ACTIVATED_EVENT,\n                this.handleTabActivated,\n            );\n            this.mdcTabBar.destroy();\n        }\n    }\n\n    private setupListeners() {\n        this.mdcTabBar.listen(TAB_ACTIVATED_EVENT, this.handleTabActivated);\n        this.scrollArea.addEventListener('scroll', this.handleScroll, {\n            passive: true,\n        });\n    }\n\n    private handleTabActivated(event: MDCTabBarActivatedEvent) {\n        const index = event.detail.index;\n        const newTabs = setActiveTab(this.tabs, index);\n\n        difference(newTabs, this.tabs)\n            .sort(this.sortByInactive)\n            .forEach((tab: Tab) => {\n                this.changeTab.emit(tab);\n            });\n\n        this.tabs = newTabs;\n    }\n\n    private sortByInactive(a: Tab, b: Tab) {\n        return Number(a.active) - Number(b.active);\n    }\n\n    private handleScroll() {\n        const scrollLeft = this.scrollArea.scrollLeft;\n        const scrollRight = Math.floor(\n            this.scrollContent.getBoundingClientRect().width -\n                this.scrollArea.getBoundingClientRect().width -\n                scrollLeft,\n        );\n\n        if (scrollLeft > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {\n            this.canScrollLeft = true;\n        } else {\n            this.canScrollLeft = false;\n        }\n\n        if (scrollRight > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {\n            this.canScrollRight = true;\n        } else {\n            this.canScrollRight = false;\n        }\n    }\n\n    private handleLeftScrollClick() {\n        const scrollDistance = this.getScrollDistance();\n        this.scrollArea.scroll({\n            left: this.scrollArea.scrollLeft - scrollDistance,\n            behavior: 'smooth',\n        });\n    }\n\n    private handleRightScrollClick() {\n        const scrollDistance = this.getScrollDistance();\n        this.scrollArea.scroll({\n            left: this.scrollArea.scrollLeft + scrollDistance,\n            behavior: 'smooth',\n        });\n    }\n\n    /**\n     * Calculates how far to scroll when navigation buttons are clicked.\n     * Returns the visible width minus an overlap percentage to maintain context.\n     * Falls back to the constant value if something goes wrong.\n     */\n    private getScrollDistance(): number {\n        if (!this.scrollArea) {\n            return SCROLL_DISTANCE_ON_CLICK_PX;\n        }\n\n        const containerWidth = this.scrollArea.getBoundingClientRect().width;\n        const scrollDistance =\n            containerWidth * (1 - OVERLAP_PERCENTAGE / TOTAL_WIDTH_PERCENTAGE);\n\n        return Math.max(scrollDistance, SCROLL_DISTANCE_ON_CLICK_PX);\n    }\n\n    private renderIcon(tab: Tab) {\n        if (!tab.icon) {\n            return;\n        }\n\n        const name = getIconName(tab.icon);\n        // eslint-disable-next-line sonarjs/deprecation\n        const color = getIconColor(tab.icon, tab.iconColor);\n        const style = { color: '' };\n\n        if (color) {\n            style.color = color;\n        }\n\n        return (\n            <limel-icon\n                class=\"mdc-tab__icon\"\n                name={name}\n                style={style}\n                size=\"small\"\n                aria-hidden=\"true\"\n            />\n        );\n    }\n\n    private renderTab(tab: Tab) {\n        return (\n            <button\n                class={{\n                    'mdc-tab': true,\n                    'mdc-tab--active': !!tab.active,\n                }}\n                role=\"tab\"\n                aria-selected={tab.active ? 'true' : 'false'}\n                tabindex={tab.active ? 0 : -1}\n            >\n                <span class=\"mdc-tab__content\">\n                    {this.renderIcon(tab)}\n                    <span class=\"mdc-tab__text-label\">{tab.text}</span>\n                    {tab.badge ? <limel-badge label={tab.badge} /> : ''}\n                </span>\n                <span\n                    class={{\n                        'mdc-tab-indicator': true,\n                        'mdc-tab-indicator--active': !!tab.active,\n                    }}\n                >\n                    <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\" />\n                </span>\n                <span class=\"mdc-tab__ripple\" />\n            </button>\n        );\n    }\n\n    private triggerIconColorWarning() {\n        // eslint-disable-next-line sonarjs/deprecation\n        if (this.tabs.some((tab) => tab.iconColor)) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n            );\n        }\n    }\n}\n"]}

package/dist/esm/lime-elements.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy(JSON.parse("[[\"limel-text-editor\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer\",[[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\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker\",[[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],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock\",[[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-select\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-snackbar\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-tab-panel\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-button-group\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"invalid\":[516],\"actions\":[16]}]]],[\"limel-help\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile\",[[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\",[[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-shortcut\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-dialog\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-banner\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor\",[[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\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid\",[[1,\"limel-grid\"]]],[\"limel-prosemirror-adapter\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-dock-button\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-tab-bar\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-checkbox\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-header\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-file-dropzone_2\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-3d-hover-effect-glow\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-badge_3\",[[1,\"limel-badge\",{\"label\":[520]}],[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]}]]],[\"limel-icon-button\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-markdown\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16]}]]],[\"limel-portal\",[[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-dynamic-label_2\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-breadcrumbs_8\",[[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],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[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],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"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]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"limel-chip_2\",[[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],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-action-bar-item_2\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-popover_2\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"limel-text-editor\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer\",[[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\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker\",[[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],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock\",[[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-select\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-snackbar\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-button-group\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"invalid\":[516],\"actions\":[16]}]]],[\"limel-help\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-tab-bar\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-circular-progress\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-info-tile\",[[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\",[[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-shortcut\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-dynamic-label_2\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-switch\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-panel\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-banner\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor\",[[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\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid\",[[1,\"limel-grid\"]]],[\"limel-icon\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-action-bar_2\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-prosemirror-adapter\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-popover_2\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-dock-button\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-checkbox\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-header\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-flatpickr-adapter\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-icon-button\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-3d-hover-effect-glow\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-markdown\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16]}]]],[\"limel-linear-progress\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-portal_2\",[[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],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-badge_2\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}]]],[\"limel-breadcrumbs_8\",[[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],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[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],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"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]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"limel-chip_2\",[[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],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-action-bar-item_2\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]]]"), options);
 });
 
 //# sourceMappingURL=lime-elements.js.map

package/dist/esm/{limel-badge_3.entry.js → limel-badge_2.entry.js}

@@ -123,34 +123,6 @@ const Tooltip = class {
 };
 Tooltip.style = tooltipCss;
 
-const tooltipContentCss = ":host(limel-tooltip-content){display:flex;border-radius:0.25rem;padding:0.25rem 0.5rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}text{font-size:0.875rem;line-height:1.25;display:flex;column-gap:1rem}text.has-column-layout{display:table-cell;width:fit-content;max-width:min(var(--tooltip-max-width-of-text), 80vw)}text.has-column-layout .label{padding-bottom:0.5rem}text.has-column-layout .helper-label{padding-bottom:0.25rem}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800))}.helper-label:empty{display:none}";
+export { Badge as limel_badge, Tooltip as limel_tooltip };
 
-const TooltipContent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.label = undefined;
-    this.helperLabel = undefined;
-    this.maxlength = undefined;
-  }
-  render() {
-    let isLabelsTextLong = false;
-    if (this.helperLabel && this.maxlength) {
-      isLabelsTextLong =
-        this.label.length + this.helperLabel.length > this.maxlength;
-    }
-    const props = {};
-    if (this.maxlength) {
-      props.style = {
-        '--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',
-      };
-    }
-    return [
-      h("text", Object.assign({ class: { 'has-column-layout': isLabelsTextLong } }, props), h("div", { class: "label" }, this.label), h("div", { class: "helper-label" }, this.helperLabel)),
-    ];
-  }
-};
-TooltipContent.style = tooltipContentCss;
-
-export { Badge as limel_badge, Tooltip as limel_tooltip, TooltipContent as limel_tooltip_content };
-
-//# sourceMappingURL=limel-badge_3.entry.js.map
+//# sourceMappingURL=limel-badge_2.entry.js.map