@limetech/lime-elements 37.1.0-next.28 → 37.1.0-next.29

package/dist/cjs/lime-elements.cjs.js

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar.cjs",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock.cjs",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[8],"searcher":[8],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button.cjs",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[520],"format":[513],"language":[520],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"isDraggingOverDropZone":[32]}]]],["limel-info-tile.cjs",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[8],"progress":[16]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"show":[64]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut.cjs",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[8]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout.cjs",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[8]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[32]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[520],"justify":[520],"align":[520],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-dock-button.cjs",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[8],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[8],"formatter":[16]}]]],["limel-action-bar-item_2.cjs",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[8],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["limel-list_2.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[520],"limeBranded":[4,"lime-branded"]}]]],["limel-portal.cjs",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["limel-menu_2.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover_2.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip_2.cjs",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["limel-helper-line.cjs",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]]], options);
+  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar.cjs",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock.cjs",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[8],"searcher":[8],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button.cjs",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[520],"format":[513],"language":[520],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-breadcrumbs.cjs",[[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"isDraggingOverDropZone":[32]}]]],["limel-info-tile.cjs",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[8],"progress":[16]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"show":[64]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut.cjs",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[8]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout.cjs",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[8]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[32]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[520],"justify":[520],"align":[520],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-dock-button.cjs",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[8],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[8],"formatter":[16]}]]],["limel-portal.cjs",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["limel-menu_2.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-action-bar-item_2.cjs",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[8],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[520],"limeBranded":[4,"lime-branded"]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["limel-helper-line.cjs",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["limel-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-popover_2.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip_2.cjs",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["limel-list_2.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/limel-breadcrumbs.cjs.entry.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-38eb64b5.js');
+const makeEnterClickable = require('./make-enter-clickable-59460fd6.js');
+const randomString = require('./random-string-c8445652.js');
+
+const breadcrumbsCss = ":host(limel-breadcrumbs){--limel-breadcrumbs-item-height:1.5rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-item-text-color:var(\n      --breadcrumbs-item-text-color,\n      rgb(var(--contrast-1500))\n  );-webkit-mask-image:linear-gradient(to right, transparent 0%, black calc(0% + 0.5rem), black calc(100% - 0.5rem), transparent 100%);mask-image:linear-gradient(to right, transparent 0%, black calc(0% + 0.5rem), black calc(100% - 0.5rem), transparent 100%)}ol,li,.step{all:unset}*{box-sizing:border-box}ol{padding:0.5rem;gap:var(--limel-breadcrumbs-gap)}.step{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:var(--breadcrumbs-item-max-width, 10rem);height:var(--limel-breadcrumbs-item-height);color:var(--limel-breadcrumbs-item-text-color);border-radius:100vw;font-size:0.875rem;padding:0 0.25rem}.step:not(:has(.text)){padding:0 0.125rem}.step:not(.last):focus{outline:none}.step:not(.last):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.step:not(.last):after{content:var(--limel-breadcrumbs-divider);width:var(--limel-breadcrumbs-gap);position:absolute;top:0;right:calc(var(--limel-breadcrumbs-gap) * -1);bottom:0;left:auto;text-align:center}a.step{cursor:pointer;transition:color 0.2s ease}a.step:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.step:hover{--limel-breadcrumbs-item-text-color:rgb(var(--color-blue-default))}a.step:hover:before{opacity:0.3;transform:scale(1)}button.step:not(.last){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-breadcrumbs-item-text-color);background-color:transparent}button.step:not(.last):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.step:not(.last):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}limel-icon{flex-shrink:0;width:calc(var(--limel-breadcrumbs-item-height) - 0.25rem);height:calc(var(--limel-breadcrumbs-item-height) - 0.25rem)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}.last{opacity:0.7}:host(limel-breadcrumbs){box-sizing:border-box;display:flex;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;direction:rtl}:host(limel-breadcrumbs)::-webkit-scrollbar{display:none}ol{display:flex;flex-direction:row-reverse;justify-content:flex-end;margin-right:auto}.step{direction:ltr}";
+
+const Breadcrumbs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.select = index.createEvent(this, "select", 7);
+    this.renderSteps = () => {
+      const allStepsWithoutLast = this.items.slice(0, -1);
+      if (this.areItemsLinks(this.items)) {
+        return allStepsWithoutLast.map(this.renderAsLink);
+      }
+      return allStepsWithoutLast.map(this.renderAsButton);
+    };
+    this.renderAsButton = (item) => {
+      const tooltipId = randomString.createRandomString();
+      return [
+        index.h("button", { role: "listitem", id: tooltipId, class: "step", onClick: this.handleClick(item) }, this.renderIcon(item), this.renderLabel(item)),
+        this.renderTooltip(item, tooltipId),
+      ];
+    };
+    this.renderAsLink = (item) => {
+      const tooltipId = randomString.createRandomString();
+      return [
+        index.h("a", { role: "listitem", id: randomString.createRandomString(), class: "step", href: item.link.href, title: item.link.title }, this.renderIcon(item), this.renderLabel(item)),
+        this.renderTooltip(item, tooltipId),
+      ];
+    };
+    this.renderLastStep = () => {
+      const lastItem = this.items.slice(-1);
+      return (index.h("li", { class: "last step", tabindex: "-1", "aria-current": this.areItemsLinks(this.items) ? 'page' : 'step' }, this.renderIcon(lastItem[0]), index.h("span", { class: "text" }, lastItem[0].text)));
+    };
+    this.renderIcon = (item) => {
+      if (!item.icon) {
+        return;
+      }
+      return (index.h("limel-icon", { style: {
+          color: `${item.icon.color}`,
+        }, name: item.icon.name }));
+    };
+    this.renderLabel = (item) => {
+      if (item.type === 'icon-only') {
+        return;
+      }
+      return index.h("span", { class: "text" }, item.text);
+    };
+    this.renderTooltip = (item, tooltipId) => {
+      if (item.type === 'icon-only') {
+        return index.h("limel-tooltip", { elementId: tooltipId, label: item.text });
+      }
+    };
+    this.areItemsLinks = (items) => {
+      return items.some((item) => 'link' in item);
+    };
+    this.handleClick = (item) => (event) => {
+      event.stopPropagation();
+      this.select.emit(item);
+    };
+    this.items = undefined;
+    this.divider = '›';
+  }
+  render() {
+    return (index.h("ol", { role: "navigation", "aria-label": "Breadcrumb", style: { '--limel-breadcrumbs-divider': `'${this.divider}'` } }, this.renderSteps(), this.renderLastStep()));
+  }
+  componentWillLoad() {
+    makeEnterClickable.makeEnterClickable(this.host);
+  }
+  disconnectedCallback() {
+    this.removeEnterClickable();
+  }
+  removeEnterClickable() {
+    var _a;
+    const element = (_a = this.button) !== null && _a !== void 0 ? _a : this.anchor;
+    makeEnterClickable.removeEnterClickable(element);
+  }
+  get host() { return index.getElement(this); }
+};
+Breadcrumbs.style = breadcrumbsCss;
+
+exports.limel_breadcrumbs = Breadcrumbs;
+
+//# sourceMappingURL=limel-breadcrumbs.cjs.entry.js.map

package/dist/cjs/limel-breadcrumbs.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-breadcrumbs.entry.cjs.js","mappings":"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","names":["createRandomString","h","makeEnterClickable","removeEnterClickable"],"sources":["./src/components/breadcrumbs/breadcrumbs.scss?tag=limel-breadcrumbs&encapsulation=shadow","./src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n* @prop --breadcrumbs-item-text-color: Text color of breadcrumbs items, defaults to `--contrast-1100`.\n* @prop --breadcrumbs-item-max-width: Maximum width of a button in the breadcrumbs. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n*/\n\n$padding: 0.5rem;\n$mask: linear-gradient(\n    to right,\n    transparent 0%,\n    black calc(0% + #{$padding}),\n    black calc(100% - #{$padding}),\n    transparent 100%\n);\n\n:host(limel-breadcrumbs) {\n    --limel-breadcrumbs-item-height: 1.5rem; // for internal use\n    --limel-breadcrumbs-gap: 0.75rem; // for internal use\n    --limel-breadcrumbs-gap: 0.75rem; // for internal use\n    --limel-breadcrumbs-item-text-color: var(\n        --breadcrumbs-item-text-color,\n        rgb(var(--contrast-1500))\n    ); // for internal use\n    -webkit-mask-image: $mask;\n    mask-image: $mask;\n}\n\nol,\nli,\n.step {\n    all: unset;\n}\n\n* {\n    box-sizing: border-box;\n}\n\nol {\n    padding: $padding; // needed for the focus and hover effects, since we are using overflow\n    gap: var(--limel-breadcrumbs-gap);\n}\n\n.step {\n    position: relative;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    max-width: var(--breadcrumbs-item-max-width, 10rem);\n    height: var(--limel-breadcrumbs-item-height);\n\n    color: var(--limel-breadcrumbs-item-text-color);\n    border-radius: 100vw;\n    font-size: 0.875rem;\n    padding: 0 0.25rem;\n\n    &:not(:has(.text)) {\n        padding: 0 0.125rem;\n    }\n\n    &:not(.last) {\n        @include mixins.visualize-keyboard-focus;\n\n        &:after {\n            content: var(--limel-breadcrumbs-divider);\n            width: var(--limel-breadcrumbs-gap);\n\n            position: absolute;\n            top: 0;\n            right: calc(var(--limel-breadcrumbs-gap) * -1);\n            bottom: 0;\n            left: auto;\n\n            text-align: center;\n        }\n    }\n}\n\na.step {\n    cursor: pointer;\n    transition: color 0.2s ease;\n    &:before {\n        transition: opacity 0.2s ease, transform 0.3s ease-out;\n        content: '';\n        position: absolute;\n        inset: auto 0 0 0;\n        width: calc(100% - 0.5rem);\n        margin: auto;\n        height: 0.125rem;\n        border-radius: 1rem;\n\n        background-color: currentColor;\n        opacity: 0;\n        transform: scale(0.6);\n    }\n\n    &:hover {\n        --limel-breadcrumbs-item-text-color: rgb(var(--color-blue-default));\n        &:before {\n            opacity: 0.3;\n            transform: scale(1);\n        }\n    }\n}\n\nbutton.step {\n    &:not(.last) {\n        @include mixins.is-flat-clickable(\n            $color: var(--limel-breadcrumbs-item-text-color)\n        );\n    }\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);\n    height: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);\n}\n\n.text {\n    @include mixins.truncate-text;\n    padding: 0 0.25rem;\n}\n\n.last {\n    opacity: 0.7;\n}\n\n// LAYOUT:\n// The code below makes sure that the last item is always visible,\n// and previous items overflow out of the container\n// while keeping the container scrollable.\n// All without any additional scripts in the component code.\n\n:host(limel-breadcrumbs) {\n    box-sizing: border-box;\n\n    display: flex;\n    width: 100%;\n    overflow-x: auto;\n    scrollbar-width: none; // This hides the scrollbars appearing under in Firefox\n    -ms-overflow-style: none; // Same as above for IE 11\n    &::-webkit-scrollbar {\n        display: none; // This hides the scrollbars appearing under in Chrome\n    }\n\n    direction: rtl;\n}\n\nol {\n    display: flex;\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n    margin-right: auto;\n}\n\n.step {\n    direction: ltr;\n}\n","import {\n    Component,\n    Element,\n    h,\n    Event,\n    EventEmitter,\n    Prop,\n} from '@stencil/core';\nimport { BreadcrumbsItem } from './breadcrumbs.types';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * A Breadcrumb consists of a list of distinct \"places\" that a user has gone through,\n * before ending up where they are right now, in a website or an application.\n *\n * These \"places\" can be for example _pages_ of a website, which are hierarchically\n * laid out before the current page that the user is looking at.\n * They could also be _steps_ which the user has gone through, which perhaps have no\n * hierarchical relation with each other, but has eventually led the user \"here\".\n *\n * :::note\n * - Where the user currently is, is always the last step of the breadcrumb.\n * - A breadcrumbs never shows where users can go after this place.\n * It only illustrates where user has been before ending up here.\n * If the path that a user can take is not changing and if next steps are clear,\n * you can use the [Progress flow component](#/component/limel-progress-flow) instead.\n * :::\n *\n * Breadcrumbs are often placed horizontally before the main content of the current screen.\n * @exampleComponent limel-example-breadcrumbs-links\n * @exampleComponent limel-example-breadcrumbs-buttons\n * @exampleComponent limel-example-breadcrumbs-icons\n * @exampleComponent limel-example-breadcrumbs-divider\n * @exampleComponent limel-example-breadcrumbs-icon-color\n * @exampleComponent limel-example-breadcrumbs-styling\n */\n\n@Component({\n    tag: 'limel-breadcrumbs',\n    shadow: true,\n    styleUrl: 'breadcrumbs.scss',\n})\nexport class Breadcrumbs {\n    /**\n     * List of items in the breadcrumbs,\n     * each representing a step or a page.\n     */\n    @Prop()\n    public items: BreadcrumbsItem[];\n\n    /**\n     * The visual divider that separates items.\n     * It must be a single character such as `-` or `,`.\n     */\n    @Prop()\n    public divider: string = '›';\n\n    /**\n     * Fired when clicking on buttons (not links!)\n     * inside the breadcrumbs.\n     */\n    @Event()\n    public select: EventEmitter<BreadcrumbsItem>;\n\n    @Element()\n    private host: HTMLLimelBreadcrumbsElement;\n\n    private button: HTMLButtonElement;\n    private anchor: HTMLAnchorElement;\n\n    public render() {\n        return (\n            <ol\n                role=\"navigation\"\n                aria-label=\"Breadcrumb\"\n                style={{ '--limel-breadcrumbs-divider': `'${this.divider}'` }}\n            >\n                {this.renderSteps()}\n                {this.renderLastStep()}\n            </ol>\n        );\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        this.removeEnterClickable();\n    }\n\n    private renderSteps = () => {\n        const allStepsWithoutLast = this.items.slice(0, -1);\n\n        if (this.areItemsLinks(this.items)) {\n            return allStepsWithoutLast.map(this.renderAsLink);\n        }\n\n        return allStepsWithoutLast.map(this.renderAsButton);\n    };\n\n    private renderAsButton = (item: BreadcrumbsItem) => {\n        const tooltipId = createRandomString();\n\n        return [\n            <button\n                role=\"listitem\"\n                id={tooltipId}\n                class=\"step\"\n                onClick={this.handleClick(item)}\n            >\n                {this.renderIcon(item)}\n                {this.renderLabel(item)}\n            </button>,\n            this.renderTooltip(item, tooltipId),\n        ];\n    };\n\n    private renderAsLink = (item: BreadcrumbsItem) => {\n        const tooltipId = createRandomString();\n\n        return [\n            <a\n                role=\"listitem\"\n                id={createRandomString()}\n                class=\"step\"\n                href={item.link.href}\n                title={item.link.title}\n            >\n                {this.renderIcon(item)}\n                {this.renderLabel(item)}\n            </a>,\n            this.renderTooltip(item, tooltipId),\n        ];\n    };\n\n    private renderLastStep = () => {\n        const lastItem = this.items.slice(-1);\n\n        return (\n            <li\n                class=\"last step\"\n                tabindex=\"-1\"\n                aria-current={this.areItemsLinks(this.items) ? 'page' : 'step'}\n            >\n                {this.renderIcon(lastItem[0])}\n                <span class=\"text\">{lastItem[0].text}</span>\n            </li>\n        );\n    };\n\n    private renderIcon = (item: BreadcrumbsItem) => {\n        if (!item.icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                style={{\n                    color: `${item.icon.color}`,\n                }}\n                name={item.icon.name}\n            />\n        );\n    };\n\n    private renderLabel = (item: BreadcrumbsItem) => {\n        if (item.type === 'icon-only') {\n            return;\n        }\n\n        return <span class=\"text\">{item.text}</span>;\n    };\n\n    private renderTooltip = (item: BreadcrumbsItem, tooltipId: string) => {\n        if (item.type === 'icon-only') {\n            return <limel-tooltip elementId={tooltipId} label={item.text} />;\n        }\n    };\n\n    private areItemsLinks = (items: BreadcrumbsItem[]) => {\n        return items.some((item) => 'link' in item);\n    };\n\n    private handleClick = (item: BreadcrumbsItem) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(item);\n    };\n\n    private removeEnterClickable() {\n        const element = this.button ?? this.anchor;\n        removeEnterClickable(element);\n    }\n}\n"],"version":3}

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar.cjs",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock.cjs",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[8],"searcher":[8],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button.cjs",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[520],"format":[513],"language":[520],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"isDraggingOverDropZone":[32]}]]],["limel-info-tile.cjs",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[8],"progress":[16]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"show":[64]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut.cjs",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[8]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout.cjs",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[8]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[32]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[520],"justify":[520],"align":[520],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-dock-button.cjs",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[8],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[8],"formatter":[16]}]]],["limel-action-bar-item_2.cjs",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[8],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["limel-list_2.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[520],"limeBranded":[4,"lime-branded"]}]]],["limel-portal.cjs",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["limel-menu_2.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover_2.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip_2.cjs",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["limel-helper-line.cjs",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]]], options);
+  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar.cjs",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock.cjs",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[8],"searcher":[8],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button.cjs",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[520],"format":[513],"language":[520],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-breadcrumbs.cjs",[[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"isDraggingOverDropZone":[32]}]]],["limel-info-tile.cjs",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[8],"progress":[16]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"show":[64]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut.cjs",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[8]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout.cjs",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[8]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[32]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[520],"justify":[520],"align":[520],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-dock-button.cjs",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[8],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[8],"formatter":[16]}]]],["limel-portal.cjs",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["limel-menu_2.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-action-bar-item_2.cjs",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[8],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[520],"limeBranded":[4,"lime-branded"]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["limel-helper-line.cjs",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["limel-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-popover_2.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip_2.cjs",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["limel-list_2.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -5,6 +5,7 @@
     "./components/action-bar/action-bar-item/action-bar-overflow-menu.js",
     "./components/badge/badge.js",
     "./components/banner/banner.js",
+    "./components/breadcrumbs/breadcrumbs.js",
     "./components/button/button.js",
     "./components/button-group/button-group.js",
     "./components/callout/callout.js",

package/dist/collection/components/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,154 @@
+/**
+ * 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.
+ *
+ * Or, just don't import anything, that works too.
+ */
+/**
+* @prop --breadcrumbs-item-text-color: Text color of breadcrumbs items, defaults to `--contrast-1100`.
+* @prop --breadcrumbs-item-max-width: Maximum width of a button in the breadcrumbs. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.
+*/
+:host(limel-breadcrumbs) {
+  --limel-breadcrumbs-item-height: 1.5rem;
+  --limel-breadcrumbs-gap: 0.75rem;
+  --limel-breadcrumbs-gap: 0.75rem;
+  --limel-breadcrumbs-item-text-color: var(
+      --breadcrumbs-item-text-color,
+      rgb(var(--contrast-1500))
+  );
+  -webkit-mask-image: linear-gradient(to right, transparent 0%, black calc(0% + 0.5rem), black calc(100% - 0.5rem), transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0%, black calc(0% + 0.5rem), black calc(100% - 0.5rem), transparent 100%);
+}
+
+ol,
+li,
+.step {
+  all: unset;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+ol {
+  padding: 0.5rem;
+  gap: var(--limel-breadcrumbs-gap);
+}
+
+.step {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  max-width: var(--breadcrumbs-item-max-width, 10rem);
+  height: var(--limel-breadcrumbs-item-height);
+  color: var(--limel-breadcrumbs-item-text-color);
+  border-radius: 100vw;
+  font-size: 0.875rem;
+  padding: 0 0.25rem;
+}
+.step:not(:has(.text)) {
+  padding: 0 0.125rem;
+}
+.step:not(.last):focus {
+  outline: none;
+}
+.step:not(.last):focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.step:not(.last):after {
+  content: var(--limel-breadcrumbs-divider);
+  width: var(--limel-breadcrumbs-gap);
+  position: absolute;
+  top: 0;
+  right: calc(var(--limel-breadcrumbs-gap) * -1);
+  bottom: 0;
+  left: auto;
+  text-align: center;
+}
+
+a.step {
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+a.step:before {
+  transition: opacity 0.2s ease, transform 0.3s ease-out;
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  width: calc(100% - 0.5rem);
+  margin: auto;
+  height: 0.125rem;
+  border-radius: 1rem;
+  background-color: currentColor;
+  opacity: 0;
+  transform: scale(0.6);
+}
+a.step:hover {
+  --limel-breadcrumbs-item-text-color: rgb(var(--color-blue-default));
+}
+a.step:hover:before {
+  opacity: 0.3;
+  transform: scale(1);
+}
+
+button.step:not(.last) {
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+  color: var(--limel-breadcrumbs-item-text-color);
+  background-color: transparent;
+}
+button.step:not(.last):hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+button.step:not(.last):active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+
+limel-icon {
+  flex-shrink: 0;
+  width: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);
+  height: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);
+}
+
+.text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 0 0.25rem;
+}
+
+.last {
+  opacity: 0.7;
+}
+
+:host(limel-breadcrumbs) {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  direction: rtl;
+}
+:host(limel-breadcrumbs)::-webkit-scrollbar {
+  display: none;
+}
+
+ol {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  margin-right: auto;
+}
+
+.step {
+  direction: ltr;
+}

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,178 @@
+import { h, } from '@stencil/core';
+import { makeEnterClickable, removeEnterClickable, } from '../../util/make-enter-clickable';
+import { createRandomString } from '../../util/random-string';
+/**
+ * A Breadcrumb consists of a list of distinct "places" that a user has gone through,
+ * before ending up where they are right now, in a website or an application.
+ *
+ * These "places" can be for example _pages_ of a website, which are hierarchically
+ * laid out before the current page that the user is looking at.
+ * They could also be _steps_ which the user has gone through, which perhaps have no
+ * hierarchical relation with each other, but has eventually led the user "here".
+ *
+ * :::note
+ * - Where the user currently is, is always the last step of the breadcrumb.
+ * - A breadcrumbs never shows where users can go after this place.
+ * It only illustrates where user has been before ending up here.
+ * If the path that a user can take is not changing and if next steps are clear,
+ * you can use the [Progress flow component](#/component/limel-progress-flow) instead.
+ * :::
+ *
+ * Breadcrumbs are often placed horizontally before the main content of the current screen.
+ * @exampleComponent limel-example-breadcrumbs-links
+ * @exampleComponent limel-example-breadcrumbs-buttons
+ * @exampleComponent limel-example-breadcrumbs-icons
+ * @exampleComponent limel-example-breadcrumbs-divider
+ * @exampleComponent limel-example-breadcrumbs-icon-color
+ * @exampleComponent limel-example-breadcrumbs-styling
+ */
+export class Breadcrumbs {
+  constructor() {
+    this.renderSteps = () => {
+      const allStepsWithoutLast = this.items.slice(0, -1);
+      if (this.areItemsLinks(this.items)) {
+        return allStepsWithoutLast.map(this.renderAsLink);
+      }
+      return allStepsWithoutLast.map(this.renderAsButton);
+    };
+    this.renderAsButton = (item) => {
+      const tooltipId = createRandomString();
+      return [
+        h("button", { role: "listitem", id: tooltipId, class: "step", onClick: this.handleClick(item) }, this.renderIcon(item), this.renderLabel(item)),
+        this.renderTooltip(item, tooltipId),
+      ];
+    };
+    this.renderAsLink = (item) => {
+      const tooltipId = createRandomString();
+      return [
+        h("a", { role: "listitem", id: createRandomString(), class: "step", href: item.link.href, title: item.link.title }, this.renderIcon(item), this.renderLabel(item)),
+        this.renderTooltip(item, tooltipId),
+      ];
+    };
+    this.renderLastStep = () => {
+      const lastItem = this.items.slice(-1);
+      return (h("li", { class: "last step", tabindex: "-1", "aria-current": this.areItemsLinks(this.items) ? 'page' : 'step' }, this.renderIcon(lastItem[0]), h("span", { class: "text" }, lastItem[0].text)));
+    };
+    this.renderIcon = (item) => {
+      if (!item.icon) {
+        return;
+      }
+      return (h("limel-icon", { style: {
+          color: `${item.icon.color}`,
+        }, name: item.icon.name }));
+    };
+    this.renderLabel = (item) => {
+      if (item.type === 'icon-only') {
+        return;
+      }
+      return h("span", { class: "text" }, item.text);
+    };
+    this.renderTooltip = (item, tooltipId) => {
+      if (item.type === 'icon-only') {
+        return h("limel-tooltip", { elementId: tooltipId, label: item.text });
+      }
+    };
+    this.areItemsLinks = (items) => {
+      return items.some((item) => 'link' in item);
+    };
+    this.handleClick = (item) => (event) => {
+      event.stopPropagation();
+      this.select.emit(item);
+    };
+    this.items = undefined;
+    this.divider = '›';
+  }
+  render() {
+    return (h("ol", { role: "navigation", "aria-label": "Breadcrumb", style: { '--limel-breadcrumbs-divider': `'${this.divider}'` } }, this.renderSteps(), this.renderLastStep()));
+  }
+  componentWillLoad() {
+    makeEnterClickable(this.host);
+  }
+  disconnectedCallback() {
+    this.removeEnterClickable();
+  }
+  removeEnterClickable() {
+    var _a;
+    const element = (_a = this.button) !== null && _a !== void 0 ? _a : this.anchor;
+    removeEnterClickable(element);
+  }
+  static get is() { return "limel-breadcrumbs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["breadcrumbs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["breadcrumbs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "BreadcrumbsItem[]",
+          "resolved": "BreadcrumbsItem[]",
+          "references": {
+            "BreadcrumbsItem": {
+              "location": "import",
+              "path": "./breadcrumbs.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of items in the breadcrumbs,\neach representing a step or a page."
+        }
+      },
+      "divider": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The visual divider that separates items.\nIt must be a single character such as `-` or `,`."
+        },
+        "attribute": "divider",
+        "reflect": false,
+        "defaultValue": "'\u203A'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "select",
+        "name": "select",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when clicking on buttons (not links!)\ninside the breadcrumbs."
+        },
+        "complexType": {
+          "original": "BreadcrumbsItem",
+          "resolved": "BreadcrumbsItem",
+          "references": {
+            "BreadcrumbsItem": {
+              "location": "import",
+              "path": "./breadcrumbs.types"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    h,\n    Event,\n    EventEmitter,\n    Prop,\n} from '@stencil/core';\nimport { BreadcrumbsItem } from './breadcrumbs.types';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * A Breadcrumb consists of a list of distinct \"places\" that a user has gone through,\n * before ending up where they are right now, in a website or an application.\n *\n * These \"places\" can be for example _pages_ of a website, which are hierarchically\n * laid out before the current page that the user is looking at.\n * They could also be _steps_ which the user has gone through, which perhaps have no\n * hierarchical relation with each other, but has eventually led the user \"here\".\n *\n * :::note\n * - Where the user currently is, is always the last step of the breadcrumb.\n * - A breadcrumbs never shows where users can go after this place.\n * It only illustrates where user has been before ending up here.\n * If the path that a user can take is not changing and if next steps are clear,\n * you can use the [Progress flow component](#/component/limel-progress-flow) instead.\n * :::\n *\n * Breadcrumbs are often placed horizontally before the main content of the current screen.\n * @exampleComponent limel-example-breadcrumbs-links\n * @exampleComponent limel-example-breadcrumbs-buttons\n * @exampleComponent limel-example-breadcrumbs-icons\n * @exampleComponent limel-example-breadcrumbs-divider\n * @exampleComponent limel-example-breadcrumbs-icon-color\n * @exampleComponent limel-example-breadcrumbs-styling\n */\n\n@Component({\n    tag: 'limel-breadcrumbs',\n    shadow: true,\n    styleUrl: 'breadcrumbs.scss',\n})\nexport class Breadcrumbs {\n    /**\n     * List of items in the breadcrumbs,\n     * each representing a step or a page.\n     */\n    @Prop()\n    public items: BreadcrumbsItem[];\n\n    /**\n     * The visual divider that separates items.\n     * It must be a single character such as `-` or `,`.\n     */\n    @Prop()\n    public divider: string = '›';\n\n    /**\n     * Fired when clicking on buttons (not links!)\n     * inside the breadcrumbs.\n     */\n    @Event()\n    public select: EventEmitter<BreadcrumbsItem>;\n\n    @Element()\n    private host: HTMLLimelBreadcrumbsElement;\n\n    private button: HTMLButtonElement;\n    private anchor: HTMLAnchorElement;\n\n    public render() {\n        return (\n            <ol\n                role=\"navigation\"\n                aria-label=\"Breadcrumb\"\n                style={{ '--limel-breadcrumbs-divider': `'${this.divider}'` }}\n            >\n                {this.renderSteps()}\n                {this.renderLastStep()}\n            </ol>\n        );\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        this.removeEnterClickable();\n    }\n\n    private renderSteps = () => {\n        const allStepsWithoutLast = this.items.slice(0, -1);\n\n        if (this.areItemsLinks(this.items)) {\n            return allStepsWithoutLast.map(this.renderAsLink);\n        }\n\n        return allStepsWithoutLast.map(this.renderAsButton);\n    };\n\n    private renderAsButton = (item: BreadcrumbsItem) => {\n        const tooltipId = createRandomString();\n\n        return [\n            <button\n                role=\"listitem\"\n                id={tooltipId}\n                class=\"step\"\n                onClick={this.handleClick(item)}\n            >\n                {this.renderIcon(item)}\n                {this.renderLabel(item)}\n            </button>,\n            this.renderTooltip(item, tooltipId),\n        ];\n    };\n\n    private renderAsLink = (item: BreadcrumbsItem) => {\n        const tooltipId = createRandomString();\n\n        return [\n            <a\n                role=\"listitem\"\n                id={createRandomString()}\n                class=\"step\"\n                href={item.link.href}\n                title={item.link.title}\n            >\n                {this.renderIcon(item)}\n                {this.renderLabel(item)}\n            </a>,\n            this.renderTooltip(item, tooltipId),\n        ];\n    };\n\n    private renderLastStep = () => {\n        const lastItem = this.items.slice(-1);\n\n        return (\n            <li\n                class=\"last step\"\n                tabindex=\"-1\"\n                aria-current={this.areItemsLinks(this.items) ? 'page' : 'step'}\n            >\n                {this.renderIcon(lastItem[0])}\n                <span class=\"text\">{lastItem[0].text}</span>\n            </li>\n        );\n    };\n\n    private renderIcon = (item: BreadcrumbsItem) => {\n        if (!item.icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                style={{\n                    color: `${item.icon.color}`,\n                }}\n                name={item.icon.name}\n            />\n        );\n    };\n\n    private renderLabel = (item: BreadcrumbsItem) => {\n        if (item.type === 'icon-only') {\n            return;\n        }\n\n        return <span class=\"text\">{item.text}</span>;\n    };\n\n    private renderTooltip = (item: BreadcrumbsItem, tooltipId: string) => {\n        if (item.type === 'icon-only') {\n            return <limel-tooltip elementId={tooltipId} label={item.text} />;\n        }\n    };\n\n    private areItemsLinks = (items: BreadcrumbsItem[]) => {\n        return items.some((item) => 'link' in item);\n    };\n\n    private handleClick = (item: BreadcrumbsItem) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(item);\n    };\n\n    private removeEnterClickable() {\n        const element = this.button ?? this.anchor;\n        removeEnterClickable(element);\n    }\n}\n"]}

package/dist/collection/components/breadcrumbs/breadcrumbs.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=breadcrumbs.types.js.map

package/dist/collection/components/breadcrumbs/breadcrumbs.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.types.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Link } from '@limetech/lime-elements';\nimport { Icon } from 'src/global/shared-types/icon.types';\n\nexport interface BreadcrumbsItem {\n    /**\n     * label displayed on the step.\n     */\n    text: string;\n\n    /**\n     * Icon of the step.\n     */\n    icon?: Omit<Icon, 'backgroundColor'>;\n\n    /**\n     * If set to `icon-only`, the `text` will be rendered as a tooltip\n     * and the item will only display the defined `icon`.\n     */\n    type?: 'icon-only';\n\n    /**\n     * If supplied, the breadcrumbs steps will be a clickable links.\n     */\n    link?: Omit<Link, 'target' | 'text'>;\n}\n"]}