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

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

@@ -0,0 +1,50 @@
+/**
+* @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.
+* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.
+* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.
+* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.
+* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.
+*/
+:host(limel-action-bar) {
+  --action-bar-item-height: 2rem;
+  --limel-action-bar-item-text-color: var(
+      --action-bar-item-text-color,
+      rgb(var(--contrast-1100))
+  );
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.25rem;
+  max-width: 100%;
+  border-radius: var(--action-bar-border-radius);
+  background-color: var(--action-bar-background-color, rgb(var(--contrast-100)));
+}
+
+:host(limel-action-bar),
+.items {
+  gap: 0.25rem;
+}
+@media (pointer: coarse) {
+  :host(limel-action-bar),
+  .items {
+    gap: 0.5rem;
+  }
+}
+
+.items {
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+}
+
+:host(limel-action-bar.is-full-width) {
+  width: 100%;
+}
+
+:host(limel-action-bar.is-floating) {
+  --action-bar-border-radius: 100vw;
+  padding-right: 0.125rem;
+  padding-left: 0.125rem;
+  max-width: calc(100% - 2rem);
+  box-shadow: var(--shadow-depth-16);
+}

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

@@ -0,0 +1,244 @@
+import { h, Host, } from '@stencil/core';
+import { isItem } from './isItem';
+/**
+ * An action bar is a user interface element commonly found in software applications and websites.
+ * It typically appears at the top of the screen or within a specific section
+ * and serves as a centralized hub for accessing various actions and commands
+ * relevant to the current context or page.
+ *
+ * The action bar often contains a set of clickable icons or buttons (icons + labels)
+ * that represent specific actions, such as saving, deleting, editing, sharing,
+ * or bulk operations for selected items.
+ *
+ * The purpose of an action bar is to provide quick and convenient access to
+ * frequently used functionalities, enabling users to perform common tasks efficiently.
+ * It enhances usability by organizing important actions in a visually prominent and easily accessible location.
+ *
+ * The action bar's design and layout can vary based on the platform or application,
+ * but its primary goal remains consistent—to
+ * empower users to interact with the software and perform desired actions effortlessly.
+ * @exampleComponent limel-example-action-bar
+ * @exampleComponent limel-example-action-bar-overflow-menu
+ * @exampleComponent limel-example-action-bar-colors
+ * @exampleComponent limel-example-action-bar-floating
+ * @exampleComponent limel-example-action-bar-styling
+ * @exampleComponent limel-example-action-bar-as-primary-component
+ * @private
+ */
+export class ActionBar {
+  constructor() {
+    this.firstRender = true;
+    this.actionBarItems = [];
+    this.renderActionBarItem = (item, index) => {
+      return (h("limel-action-bar-item", { item: item, onSelect: this.handleSelect, isVisible: this.isVisible(index) }));
+    };
+    this.renderOverflowMenu = (items) => {
+      if (!(this.actions.length - this.overflowCutoff)) {
+        return;
+      }
+      return (h("limel-action-bar-overflow-menu", { openDirection: this.openDirection, items: items, onSelect: this.handleSelect }));
+    };
+    this.handleSelect = (event) => {
+      event.stopPropagation();
+      if (isItem(event.detail)) {
+        this.itemSelected.emit(event.detail);
+      }
+    };
+    this.handleIntersection = (entries) => {
+      const intersectingItems = entries.filter((entry) => entry.isIntersecting);
+      const notIntersectingItems = entries.filter((entry) => !entry.isIntersecting);
+      if (this.firstRender) {
+        this.overflowCutoff = intersectingItems.length;
+      }
+      else {
+        this.overflowCutoff =
+          this.overflowCutoff +
+            intersectingItems.length -
+            notIntersectingItems.length;
+      }
+      this.firstRender = false;
+    };
+    this.actions = [];
+    this.accessibleLabel = undefined;
+    this.layout = undefined;
+    this.openDirection = undefined;
+    this.overflowCutoff = this.actions.length;
+  }
+  render() {
+    let overflowActions = [];
+    if (this.actions.length) {
+      overflowActions = this.actions.slice(this.overflowCutoff);
+    }
+    return (h(Host, { "aria-label": this.accessibleLabel, class: {
+        'is-full-width': this.layout === 'fullWidth',
+        'is-floating': this.layout === 'floating',
+      } }, h("div", { class: "items" }, this.actions.map(this.renderActionBarItem)), this.renderOverflowMenu(overflowActions)));
+  }
+  componentDidRender() {
+    var _a;
+    if (this.haveItemsChanged()) {
+      (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      this.createIntersectionObserver();
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.actionBarItems = [];
+  }
+  isVisible(index) {
+    return index < this.overflowCutoff;
+  }
+  createIntersectionObserver() {
+    const options = {
+      root: this.host.shadowRoot.querySelector('.items'),
+      rootMargin: '0px',
+      threshold: 1.0,
+    };
+    this.actionBarItems = [];
+    this.intersectionObserver = new IntersectionObserver(this.handleIntersection, options);
+    this.host.shadowRoot
+      .querySelectorAll('limel-action-bar-item')
+      .forEach((actionBarItem) => {
+      this.observe(actionBarItem);
+    });
+  }
+  observe(actionBarItem) {
+    this.intersectionObserver.observe(actionBarItem);
+    this.actionBarItems.push(actionBarItem);
+  }
+  haveItemsChanged() {
+    const someItemRemoved = this.actionBarItems.some((actionBarItem) => !this.host.shadowRoot.contains(actionBarItem));
+    const someItemAdded = Array.from(this.host.shadowRoot.querySelectorAll('limel-action-bar-item')).some((actionBarItem) => !this.actionBarItems.includes(actionBarItem));
+    return someItemRemoved || someItemAdded;
+  }
+  static get is() { return "limel-action-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["action-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["action-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "actions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<ActionBarItem | ListSeparator>",
+          "resolved": "(ListSeparator | ActionBarItem)[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ActionBarItem": {
+              "location": "import",
+              "path": "./action-bar.types"
+            },
+            "ListSeparator": {
+              "location": "import",
+              "path": "../list/list-item.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Items that are placed in the action bar.\nThese represent primary actions."
+        },
+        "defaultValue": "[]"
+      },
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A label used to describe the purpose of the element to users\nof assistive technologies, like screen readers.\nExample value: \"toolbar\""
+        },
+        "attribute": "accessible-label",
+        "reflect": true
+      },
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'fullWidth' | 'floating'",
+          "resolved": "\"floating\" | \"fullWidth\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "- When set to `fullWidth`, the component will take the\nentire width of its container.\n- When set to `floating`, the component will get basic stylings\nto visualize the floating state.\n:::note\nYou should still properly position the component\naccording to the structure of your user interface.\nFor example, use an `absolute` or `fixed` position.\n:::"
+        },
+        "attribute": "layout",
+        "reflect": true
+      },
+      "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": "../menu/menu.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the location that the content of the overflow menu\nappears, in relation to its trigger."
+        },
+        "attribute": "open-direction",
+        "reflect": true
+      }
+    };
+  }
+  static get states() {
+    return {
+      "overflowCutoff": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "itemSelected",
+        "name": "itemSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a action bar item has been clicked."
+        },
+        "complexType": {
+          "original": "ActionBarItem",
+          "resolved": "ActionBarItem",
+          "references": {
+            "ActionBarItem": {
+              "location": "import",
+              "path": "./action-bar.types"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export function isItem(item) {
+  return !('separator' in item);
+}

package/dist/collection/components/list/list.css

@@ -865,6 +865,7 @@ limel-helper-line {
  * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.
  * @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.
  * @prop --list-background-color-of-even-interactive-items:  Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.
+ * @prop --list-margin: Space around the list. Default to `0.25rem`;
  */
 :host(limel-list) {
   display: block;
@@ -4275,7 +4276,7 @@ a.mdc-list-item {
       --icon-color,
       rgb(var(--contrast-900))
   );
-  margin: 0.25rem;
+  margin: --list-margin, 0.25rem;
   padding: 0;
   border-radius: 0.375rem;
 }

package/dist/collection/components/menu-list/menu-list.css

@@ -937,6 +937,7 @@ limel-helper-line {
  * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.
  * @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.
  * @prop --list-background-color-of-even-interactive-items:  Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.
+ * @prop --list-margin: Space around the list. Default to `0.25rem`;
  */
 :host(limel-list) {
   display: block;
@@ -4347,7 +4348,7 @@ a.mdc-list-item {
       --icon-color,
       rgb(var(--contrast-900))
   );
-  margin: 0.25rem;
+  margin: --list-margin, 0.25rem;
   padding: 0;
   border-radius: 0.375rem;
 }

package/dist/esm/lime-elements.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-dock",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"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",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-info-tile",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-dock-button",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-menu-list",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-menu",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["limel-helper-line",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-chip-set",[[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",[[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",[[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",[[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",[[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",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-badge",[[1,"limel-badge",{"label":[520]}]]],["limel-list_2",[[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",[[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 bootstrapLazy([["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"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",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-info-tile",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-dock-button",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter",[[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",[[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",[[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",[[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",[[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",[[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",[[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",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-menu_2",[[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",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-helper-line",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["limel-portal",[[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",[[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/esm/limel-action-bar-item_2.entry.js

@@ -0,0 +1,92 @@
+import { r as registerInstance, c as createEvent, h } from './index-cdfd351d.js';
+import { c as createRandomString } from './random-string-2246b81e.js';
+
+const actionBarItemCss = "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}}";
+
+const ActionBarButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.select = createEvent(this, "select", 7);
+    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 }));
+    }
+  }
+};
+ActionBarButton.style = actionBarItemCss;
+
+const ActionBarOverflowMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.select = createEvent(this, "select", 7);
+    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);
+  }
+};
+
+export { ActionBarButton as limel_action_bar_item, ActionBarOverflowMenu as limel_action_bar_overflow_menu };

package/dist/esm/limel-action-bar.entry.js

@@ -0,0 +1,102 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cdfd351d.js';
+
+function isItem(item) {
+  return !('separator' in item);
+}
+
+const actionBarCss = ":host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(\n      --action-bar-item-text-color,\n      rgb(var(--contrast-1100))\n  );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)))}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16)}";
+
+const ActionBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemSelected = createEvent(this, "itemSelected", 7);
+    this.firstRender = true;
+    this.actionBarItems = [];
+    this.renderActionBarItem = (item, index) => {
+      return (h("limel-action-bar-item", { item: item, onSelect: this.handleSelect, isVisible: this.isVisible(index) }));
+    };
+    this.renderOverflowMenu = (items) => {
+      if (!(this.actions.length - this.overflowCutoff)) {
+        return;
+      }
+      return (h("limel-action-bar-overflow-menu", { openDirection: this.openDirection, items: items, onSelect: this.handleSelect }));
+    };
+    this.handleSelect = (event) => {
+      event.stopPropagation();
+      if (isItem(event.detail)) {
+        this.itemSelected.emit(event.detail);
+      }
+    };
+    this.handleIntersection = (entries) => {
+      const intersectingItems = entries.filter((entry) => entry.isIntersecting);
+      const notIntersectingItems = entries.filter((entry) => !entry.isIntersecting);
+      if (this.firstRender) {
+        this.overflowCutoff = intersectingItems.length;
+      }
+      else {
+        this.overflowCutoff =
+          this.overflowCutoff +
+            intersectingItems.length -
+            notIntersectingItems.length;
+      }
+      this.firstRender = false;
+    };
+    this.actions = [];
+    this.accessibleLabel = undefined;
+    this.layout = undefined;
+    this.openDirection = undefined;
+    this.overflowCutoff = this.actions.length;
+  }
+  render() {
+    let overflowActions = [];
+    if (this.actions.length) {
+      overflowActions = this.actions.slice(this.overflowCutoff);
+    }
+    return (h(Host, { "aria-label": this.accessibleLabel, class: {
+        'is-full-width': this.layout === 'fullWidth',
+        'is-floating': this.layout === 'floating',
+      } }, h("div", { class: "items" }, this.actions.map(this.renderActionBarItem)), this.renderOverflowMenu(overflowActions)));
+  }
+  componentDidRender() {
+    var _a;
+    if (this.haveItemsChanged()) {
+      (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      this.createIntersectionObserver();
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.actionBarItems = [];
+  }
+  isVisible(index) {
+    return index < this.overflowCutoff;
+  }
+  createIntersectionObserver() {
+    const options = {
+      root: this.host.shadowRoot.querySelector('.items'),
+      rootMargin: '0px',
+      threshold: 1.0,
+    };
+    this.actionBarItems = [];
+    this.intersectionObserver = new IntersectionObserver(this.handleIntersection, options);
+    this.host.shadowRoot
+      .querySelectorAll('limel-action-bar-item')
+      .forEach((actionBarItem) => {
+      this.observe(actionBarItem);
+    });
+  }
+  observe(actionBarItem) {
+    this.intersectionObserver.observe(actionBarItem);
+    this.actionBarItems.push(actionBarItem);
+  }
+  haveItemsChanged() {
+    const someItemRemoved = this.actionBarItems.some((actionBarItem) => !this.host.shadowRoot.contains(actionBarItem));
+    const someItemAdded = Array.from(this.host.shadowRoot.querySelectorAll('limel-action-bar-item')).some((actionBarItem) => !this.actionBarItems.includes(actionBarItem));
+    return someItemRemoved || someItemAdded;
+  }
+  get host() { return getElement(this); }
+};
+ActionBar.style = actionBarCss;
+
+export { ActionBar as limel_action_bar };

package/dist/esm/limel-flatpickr-adapter.entry.js

@@ -6908,7 +6908,11 @@ function style(node, value) {
     node.setAttribute("style", value);
   } else if (isObject(value)) {
     forEach(value, (val, key) => {
-      if (isNumber(val) && isUnitlessNumber[key] !== 0) {
+      if (key.indexOf("-") === 0) {
+        // CSS custom properties (variables) start with `-` (e.g. `--my-variable`)
+        // and must be assigned via `setProperty`.
+        node.style.setProperty(key, val);
+      } else if (isNumber(val) && isUnitlessNumber[key] !== 0) {
         node.style[key] = val + "px";
       } else {
         node.style[key] = val;