@limetech/lime-elements 36.4.0-next.2 → 36.4.0-next.4

package/dist/cjs/{limel-popover_4.cjs.entry.js → limel-popover_2.cjs.entry.js}

@@ -138,102 +138,5 @@ const PopoverSurface = class {
 };
 PopoverSurface.style = popoverSurfaceCss;
 
-const tooltipCss = ".trigger-anchor{position:relative}";
-
-const DEFAULT_MAX_LENGTH = 50;
-const Tooltip = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.showTooltip = () => {
-      const tooltipDelay = 500;
-      this.showTooltipTimeoutHandle = window.setTimeout(() => {
-        this.open = true;
-      }, tooltipDelay);
-    };
-    this.hideTooltip = () => {
-      clearTimeout(this.showTooltipTimeoutHandle);
-      this.open = false;
-    };
-    this.elementId = undefined;
-    this.label = undefined;
-    this.helperLabel = undefined;
-    this.maxlength = DEFAULT_MAX_LENGTH;
-    this.open = undefined;
-    this.portalId = randomString.createRandomString();
-    this.tooltipId = randomString.createRandomString();
-  }
-  connectedCallback() {
-    this.setOwnerAriaLabel();
-    this.addListeners();
-  }
-  disconnectedCallback() {
-    this.removeListeners();
-  }
-  render() {
-    const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
-    return (index.h("div", { class: "trigger-anchor" }, index.h("limel-portal", { openDirection: "bottom-start", visible: this.open, containerId: this.portalId, containerStyle: {
-        'z-index': tooltipZIndex,
-        'pointer-events': 'none',
-      } }, index.h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
-  }
-  setOwnerAriaLabel() {
-    const owner = this.getOwnerElement();
-    owner === null || owner === void 0 ? void 0 : owner.setAttribute('aria-describedby', this.tooltipId);
-  }
-  addListeners() {
-    const owner = this.getOwnerElement();
-    owner === null || owner === void 0 ? void 0 : owner.addEventListener('mouseover', this.showTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.addEventListener('mouseout', this.hideTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.addEventListener('click', this.hideTooltip);
-  }
-  removeListeners() {
-    const owner = this.getOwnerElement();
-    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('mouseover', this.showTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('mouseout', this.hideTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('click', this.hideTooltip);
-  }
-  getOwnerElement() {
-    let element = this.host;
-    do {
-      element = element.parentNode;
-    } while (element &&
-      element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
-      element.nodeType !== Node.DOCUMENT_NODE);
-    return element === null || element === void 0 ? void 0 : element.getElementById(this.elementId);
-  }
-  get host() { return index.getElement(this); }
-};
-Tooltip.style = tooltipCss;
-
-const tooltipContentCss = ":host{animation:display-tooltip 0.2s ease;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}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";
-
-const TooltipContent = class {
-  constructor(hostRef) {
-    index.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 [
-      index.h("text", Object.assign({ class: { 'has-column-layout': isLabelsTextLong } }, props), index.h("div", { class: "label" }, this.label), index.h("div", { class: "helper-label" }, this.helperLabel)),
-    ];
-  }
-};
-TooltipContent.style = tooltipContentCss;
-
 exports.limel_popover = Popover;
 exports.limel_popover_surface = PopoverSurface;
-exports.limel_tooltip = Tooltip;
-exports.limel_tooltip_content = TooltipContent;

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

@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-287e25e0.js');
+const randomString = require('./random-string-4c3b7f1c.js');
+
+const tooltipCss = ".trigger-anchor{position:relative}";
+
+const DEFAULT_MAX_LENGTH = 50;
+const Tooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.showTooltip = () => {
+      const tooltipDelay = 500;
+      this.showTooltipTimeoutHandle = window.setTimeout(() => {
+        this.open = true;
+      }, tooltipDelay);
+    };
+    this.hideTooltip = () => {
+      clearTimeout(this.showTooltipTimeoutHandle);
+      this.open = false;
+    };
+    this.elementId = undefined;
+    this.label = undefined;
+    this.helperLabel = undefined;
+    this.maxlength = DEFAULT_MAX_LENGTH;
+    this.open = undefined;
+    this.portalId = randomString.createRandomString();
+    this.tooltipId = randomString.createRandomString();
+  }
+  connectedCallback() {
+    this.setOwnerAriaLabel();
+    this.addListeners();
+  }
+  disconnectedCallback() {
+    this.removeListeners();
+  }
+  render() {
+    const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
+    return (index.h("div", { class: "trigger-anchor" }, index.h("limel-portal", { openDirection: "bottom-start", visible: this.open, containerId: this.portalId, containerStyle: {
+        'z-index': tooltipZIndex,
+        'pointer-events': 'none',
+      } }, index.h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
+  }
+  setOwnerAriaLabel() {
+    const owner = this.getOwnerElement();
+    owner === null || owner === void 0 ? void 0 : owner.setAttribute('aria-describedby', this.tooltipId);
+  }
+  addListeners() {
+    const owner = this.getOwnerElement();
+    owner === null || owner === void 0 ? void 0 : owner.addEventListener('mouseover', this.showTooltip);
+    owner === null || owner === void 0 ? void 0 : owner.addEventListener('mouseout', this.hideTooltip);
+    owner === null || owner === void 0 ? void 0 : owner.addEventListener('click', this.hideTooltip);
+  }
+  removeListeners() {
+    const owner = this.getOwnerElement();
+    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('mouseover', this.showTooltip);
+    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('mouseout', this.hideTooltip);
+    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('click', this.hideTooltip);
+  }
+  getOwnerElement() {
+    let element = this.host;
+    do {
+      element = element.parentNode;
+    } while (element &&
+      element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
+      element.nodeType !== Node.DOCUMENT_NODE);
+    return element === null || element === void 0 ? void 0 : element.getElementById(this.elementId);
+  }
+  get host() { return index.getElement(this); }
+};
+Tooltip.style = tooltipCss;
+
+const tooltipContentCss = ":host{animation:display-tooltip 0.2s ease;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}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";
+
+const TooltipContent = class {
+  constructor(hostRef) {
+    index.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 [
+      index.h("text", Object.assign({ class: { 'has-column-layout': isLabelsTextLong } }, props), index.h("div", { class: "label" }, this.label), index.h("div", { class: "helper-label" }, this.helperLabel)),
+    ];
+  }
+};
+TooltipContent.style = tooltipContentCss;
+
+exports.limel_tooltip = Tooltip;
+exports.limel_tooltip_content = TooltipContent;

package/dist/cjs/loader.cjs.js

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

package/dist/collection/collection-manifest.json

@@ -1,5 +1,8 @@
 {
   "entries": [
+    "./components/action-bar/action-bar.js",
+    "./components/action-bar/action-bar-item/action-bar-item.js",
+    "./components/action-bar/action-bar-item/action-bar-overflow-menu.js",
     "./components/badge/badge.js",
     "./components/banner/banner.js",
     "./components/button/button.js",

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

@@ -0,0 +1,129 @@
+/**
+ * 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.
+ */
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+limel-action-bar-item {
+  transition: opacity 0.2s ease-in-out;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+limel-action-bar-item:not([is-visible]) {
+  opacity: 0;
+}
+
+button {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  width: 100%;
+  min-width: var(--action-bar-item-height);
+  max-width: var(--action-bar-item-max-width, 10rem);
+  height: var(--action-bar-item-height);
+  border-radius: var(--action-bar-item-height);
+  font-size: 0.875rem;
+  padding: 0 0.25rem;
+}
+button:not([disabled]) {
+  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-action-bar-item-text-color);
+  background-color: var(--action-bar-background-color);
+}
+button:not([disabled]):hover {
+  color: var(--limel-action-bar-item-text-color);
+  background-color: var(--action-bar-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+button:not([disabled]):active {
+  background-color: var(--action-bar-background-color);
+  box-shadow: var(--button-shadow-inset-pressed);
+  transform: translate3d(0, 0.05rem, 0);
+}
+button:not([disabled]):focus {
+  outline: none;
+}
+button:not([disabled]):focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+button:has(.text) {
+  padding: 0 0.5rem;
+}
+button[disabled] {
+  opacity: 0.4;
+}
+
+.text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 0 0.25rem;
+}
+
+limel-icon {
+  flex-shrink: 0;
+  width: calc(var(--action-bar-item-height) - 0.75rem);
+  height: calc(var(--action-bar-item-height) - 0.75rem);
+  color: var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color));
+}
+
+limel-tooltip {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+div[role=separator] {
+  width: 1px;
+  height: 1.5rem;
+  border-radius: var(--action-bar-item-height);
+  background-color: var(--limel-action-bar-item-text-color);
+  opacity: 0.2;
+}
+@media (pointer: fine) {
+  div[role=separator] {
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+  }
+}
+
+limel-menu {
+  --notification-badge-background-color: rgb(var(--contrast-600));
+  --notification-badge-text-color: rgb(var(--contrast-1200));
+}
+limel-menu[open] button {
+  box-shadow: var(--button-shadow-inset);
+}
+
+button[slot=trigger] {
+  animation: fade-in ease-out 0.25s;
+  font-size: 0.75rem;
+  font-weight: bold;
+  transform: translate3d(0, 0, 0);
+}
+
+@keyframes fade-in {
+  0% {
+    scale: 0.8;
+    opacity: 0;
+  }
+  100% {
+    scale: 1;
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,144 @@
+import { h } from '@stencil/core';
+import { createRandomString } from '../../../util/random-string';
+/**
+ * @private
+ */
+export class ActionBarButton {
+  constructor() {
+    this.handleClick = (event) => {
+      event.stopPropagation();
+      this.select.emit(this.item);
+    };
+    this.item = undefined;
+    this.isVisible = true;
+    this.tooltipId = createRandomString();
+  }
+  render() {
+    if (!this.isItem(this.item) && this.item.separator) {
+      return h("div", { role: "separator" });
+    }
+    return (h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled() }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
+  }
+  isItem(item) {
+    return !('separator' in item);
+  }
+  isDisabled() {
+    if (this.isItem(this.item) && this.item.disabled) {
+      return true;
+    }
+    if (!this.isVisible) {
+      return true;
+    }
+  }
+  renderIcon() {
+    if (this.isItem(this.item) && !this.item.icon) {
+      return;
+    }
+    if ('icon' in this.item) {
+      return (h("limel-icon", { name: this.item.icon, style: {
+          '--action-bar-item-icon-color': `${this.item.iconColor}`,
+        } }));
+    }
+  }
+  renderLabel() {
+    if (!this.isItem(this.item) || this.item.iconOnly) {
+      return;
+    }
+    return h("span", { class: "text" }, this.item.text);
+  }
+  renderTooltip() {
+    if (!this.isItem(this.item)) {
+      return;
+    }
+    if (this.item.text) {
+      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.text, helperLabel: this.item.commandText }));
+    }
+    if (this.item.commandText) {
+      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.commandText }));
+    }
+  }
+  static get is() { return "limel-action-bar-item"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["action-bar-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["action-bar-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "item": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ActionBarItem | ListSeparator",
+          "resolved": "ActionBarItem | ListSeparator",
+          "references": {
+            "ActionBarItem": {
+              "location": "import",
+              "path": "../action-bar.types"
+            },
+            "ListSeparator": {
+              "location": "import",
+              "path": "src/interface"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Item that is placed in the action bar."
+        }
+      },
+      "isVisible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When the item is displayed in the available width,\nthis will be `false`."
+        },
+        "attribute": "is-visible",
+        "reflect": true,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "select",
+        "name": "select",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a action bar item has been clicked."
+        },
+        "complexType": {
+          "original": "ActionBarItem | ListSeparator",
+          "resolved": "ActionBarItem | ListSeparator",
+          "references": {
+            "ActionBarItem": {
+              "location": "import",
+              "path": "../action-bar.types"
+            },
+            "ListSeparator": {
+              "location": "import",
+              "path": "src/interface"
+            }
+          }
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,106 @@
+import { h } from '@stencil/core';
+/**
+ * @private
+ */
+export class ActionBarOverflowMenu {
+  constructor() {
+    this.countOverflowedItems = () => {
+      return `+${this.numberOfMenuItems}`;
+    };
+    this.handleSelect = (event) => {
+      event.stopPropagation();
+      this.select.emit(event.detail);
+    };
+    this.items = undefined;
+    this.openDirection = 'bottom-end';
+  }
+  render() {
+    return [
+      h("limel-menu", { openDirection: this.openDirection, items: this.items, onSelect: this.handleSelect }, h("button", { slot: "trigger" }, this.countOverflowedItems())),
+    ];
+  }
+  get numberOfMenuItems() {
+    return this.items.filter((item) => this.isMenuItem(item)).length;
+  }
+  isMenuItem(item) {
+    return !('separator' in item);
+  }
+  static get is() { return "limel-action-bar-overflow-menu"; }
+  static get properties() {
+    return {
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<MenuItem | ListSeparator>",
+          "resolved": "(MenuItem<any> | ListSeparator)[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "MenuItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            },
+            "ListSeparator": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of the items that should be rendered in the overflow menu."
+        }
+      },
+      "openDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OpenDirection",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "OpenDirection": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the location that the content of the overflow menu\nappears, in relation to its trigger.\nIt defaults to `bottom-end`, since in normal scenarios\n(for example when the action bar is not floating at the bottom of the screen)\nthis menu is the right-most item in the user interface of the component."
+        },
+        "attribute": "open-direction",
+        "reflect": true,
+        "defaultValue": "'bottom-end'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "select",
+        "name": "select",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ActionBarItem",
+          "resolved": "ActionBarItem",
+          "references": {
+            "ActionBarItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        }
+      }];
+  }
+}