@limetech/lime-elements 33.13.0-next.6 → 33.14.0-next.11

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

@@ -55,6 +55,22 @@ const Menu = class {
      * obsolete.
      */
     this.fixed = false;
+    this.setTriggerAttributes = (element) => {
+      const attributes = {
+        'aria-haspopup': true,
+        'aria-expanded': this.open,
+        disabled: this.disabled,
+        role: 'button',
+      };
+      for (const [key, value] of Object.entries(attributes)) {
+        if (!value) {
+          element.removeAttribute(key);
+        }
+        else {
+          element.setAttribute(key, String(value));
+        }
+      }
+    };
     this.onClose = () => {
       this.cancel.emit();
       this.open = false;
@@ -76,6 +92,18 @@ const Menu = class {
       this.select.emit(event.detail);
       this.open = false;
     };
+    this.setListElement = (element) => {
+      this.list = element;
+    };
+    this.focusMenuItem = () => {
+      var _a;
+      const activeElement = this.list.shadowRoot.activeElement;
+      activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
+      const listItems = this.items.filter(this.isListItem);
+      const selectedIndex = Math.max(listItems.findIndex((item) => item.selected), 0);
+      const menuElements = Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'));
+      (_a = menuElements[selectedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
     this.portalId = randomString.createRandomString();
   }
   componentDidLoad() {
@@ -84,6 +112,16 @@ const Menu = class {
       console.warn('Using limel-menu with the default trigger is deprecated. Please provide your own trigger element.');
     }
   }
+  openWatcher() {
+    if (!this.open) {
+      return;
+    }
+    const observer = new IntersectionObserver(() => {
+      observer.unobserve(this.list);
+      this.focusMenuItem();
+    });
+    observer.observe(this.list);
+  }
   render() {
     const cssProperties = this.getCssProperties();
     const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
@@ -93,7 +131,11 @@ const Menu = class {
     const portalPosition = this.getPortalPosition();
     return (index.h("div", { class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, index.h("slot", { name: "trigger" }, this.renderTrigger()), index.h("limel-portal", { class: portalClasses, style: portalPosition, visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: this.fixed ? 'fixed' : 'absolute', containerStyle: { 'z-index': dropdownZIndex } }, index.h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties }, index.h("limel-list", { class: {
         'has-grid-layout has-interactive-items': this.gridLayout,
-      }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange })))));
+      }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange, ref: this.setListElement })))));
+  }
+  componentDidRender() {
+    const slotElement = this.host.shadowRoot.querySelector('slot');
+    slotElement.assignedElements().forEach(this.setTriggerAttributes);
   }
   renderTrigger() {
     return (index.h("button", { class: `
@@ -128,7 +170,13 @@ const Menu = class {
     });
     return zipObject.zipObject(propertyNames, values);
   }
+  isListItem(item) {
+    return !('separator' in item);
+  }
   get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["openWatcher"]
+  }; }
 };
 Menu.style = menuCss;
 

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

@@ -2255,11 +2255,16 @@ const TabBar = class {
   handleTabActivated(event) {
     const index = event.detail.index;
     const newTabs = setActiveTab(this.tabs, index);
-    difference(newTabs, this.tabs).forEach((tab) => {
+    difference(newTabs, this.tabs)
+      .sort(this.sortByInactive)
+      .forEach((tab) => {
       this.changeTab.emit(tab);
     });
     this.tabs = newTabs;
   }
+  sortByInactive(a, b) {
+    return Number(a.active) - Number(b.active);
+  }
   handleScroll() {
     const scrollLeft = this.scrollArea.scrollLeft;
     const scrollRight = Math.floor(this.scrollContent.getBoundingClientRect().width -

package/dist/cjs/limel-tooltip-content.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-153dc912.js');
+
+const tooltipContentCss = ".tooltip-content{display:flex;flex-direction:row;color:rgb(var(--color-gray-default));border-radius:0.5rem;width:auto;display:flex;padding:0.75rem;transition:opacity 150ms ease-out;margin-top:0.3rem;background-color:rgb(var(--color-gray-darker))}.tooltip-content .tooltip{color:rgb(var(--color-gray-lighter))}.tooltip-content .helperLabel{padding:0 0 0 1rem}.tooltip-content .helperLabel:empty{display:none}";
+
+const TooltipContent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { class: "tooltip-content" }, index.h("div", { class: "tooltip" }, this.label), index.h("div", { class: "helperLabel" }, this.helperLabel)));
+  }
+};
+TooltipContent.style = tooltipContentCss;
+
+exports.limel_tooltip_content = TooltipContent;

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

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-153dc912.js');
+const randomString = require('./random-string-4c3b7f1c.js');
+
+const tooltipCss = ".trigger-anchor{display:inline-block;position:relative}.tooltip-container{color:#f1f1f1;background-color:#232324}";
+
+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.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", { visible: this.open, containerId: this.portalId, containerStyle: {
+        'z-index': tooltipZIndex,
+        'pointer-events': 'none',
+      } }, index.h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, 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() {
+    var _a;
+    let element = this.host;
+    do {
+      element = element.parentNode;
+    } while (element &&
+      element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
+      element.nodeType !== Node.DOCUMENT_NODE);
+    return (_a = element) === null || _a === void 0 ? void 0 : _a.getElementById(this.elementId);
+  }
+  get host() { return index.getElement(this); }
+};
+Tooltip.style = tooltipCss;
+
+exports.limel_tooltip = Tooltip;

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-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"displayFullList":[4,"display-full-list"],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[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-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"label":[513],"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"fixed":[4]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[1],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-popover.cjs",[[1,"limel-popover",{"open":[4]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[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"]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"checked":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"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],"propsFactory":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-linear-progress.cjs",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["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-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-list_3.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]}],[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-flatpickr-adapter_2.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"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]}],[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"disabled":[516],"readonly":[516],"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-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]]], options);
+  return index.bootstrapLazy([["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"displayFullList":[4,"display-full-list"],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"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-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"label":[513],"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"fixed":[4]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[1],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-popover.cjs",[[1,"limel-popover",{"open":[4]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[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"]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"checked":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"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],"propsFactory":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-linear-progress.cjs",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["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-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-tooltip.cjs",[[1,"limel-tooltip",{"label":[513],"helperLabel":[513,"helper-label"],"elementId":[513,"element-id"],"open":[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-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-list_3.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]}],[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-flatpickr-adapter_2.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"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]}],[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"disabled":[516],"readonly":[516],"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-tooltip-content.cjs",[[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -38,7 +38,9 @@
     "./components/switch/switch.js",
     "./components/tab-bar/tab-bar.js",
     "./components/tab-panel/tab-panel.js",
-    "./components/table/table.js"
+    "./components/table/table.js",
+    "./components/tooltip/tooltip-content.js",
+    "./components/tooltip/tooltip.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/button-group/button-group.js

@@ -65,14 +65,17 @@ export class ButtonGroup {
     return (h("div", { class: classes, role: "grid" }, this.value.map(this.renderButton)));
   }
   renderButton(button) {
+    // Prefix with 'b' because html IDs cannot start with a digit,
+    // and we need to differentiate from the ID on the limel-icon. /Ads
+    const buttonId = `b${button.id}`;
     const classes = {
       'mdc-chip': true,
       'mdc-chip--selected': this.isButtonChecked(button),
     };
     return (h("div", { class: classes, role: "row" },
       h("span", { role: "gridcell" },
-        h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), id: button.id, onChange: this.onChange }),
-        h("label", { htmlFor: button.id }, this.renderContent(button)))));
+        h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), id: buttonId, onChange: this.onChange }),
+        h("label", { htmlFor: buttonId }, this.renderContent(button)))));
   }
   renderContent(button) {
     if (button.icon) {
@@ -87,14 +90,21 @@ export class ButtonGroup {
     return h("span", { class: "mdc-chip__text" }, button.title);
   }
   renderIcon(button) {
-    return (h("limel-icon", { class: "mdc-chip__icon", "aria-label": button.title, title: button.title, name: button.icon, size: "small", badge: true }));
+    // Prefix with 'i' because html IDs cannot start with a digit,
+    // and we need to differentiate from the "buttonId". /Ads
+    const iconId = `i${button.id}`;
+    return [
+      h("limel-icon", { id: iconId, class: "mdc-chip__icon", "aria-label": button.title, name: button.icon, size: "small", badge: true }),
+      h("limel-tooltip", { elementId: iconId, label: button.title }),
+    ];
   }
   onChange(event) {
     event.stopPropagation();
     const target = event.target;
-    this.selectedButtonId = target.id;
+    // The ID is prefixed with `b` in the HTML, remember? /Ads
+    this.selectedButtonId = target.id.substr(1);
     const button = this.value.find((item) => {
-      return `${item.id}` === target.id;
+      return item.id === this.selectedButtonId;
     });
     this.change.emit(button);
   }

package/dist/collection/components/dialog/dialog.css

@@ -674,4 +674,10 @@ slot[name=button] {
   gap: 0.5rem;
   width: 100%;
   justify-content: flex-end;
+}
+
+@media screen and (max-width: 760px) {
+  slot[name=button] {
+    flex-direction: column-reverse;
+  }
 }

package/dist/collection/components/list/list-renderer.js

@@ -16,6 +16,9 @@ export class ListRenderer {
     this.twoLines = items.some((item) => {
       return 'secondaryText' in item && !!item.secondaryText;
     });
+    this.commandKey = items.some((item) => {
+      return 'commandText' in item && !!item.commandText;
+    });
     this.hasIcons = items.some((item) => {
       return 'icon' in item && !!item.icon;
     });
@@ -40,6 +43,7 @@ export class ListRenderer {
       selectable: selectableListTypes.includes(this.config.type),
       'mdc-deprecated-list--avatar-list': this.avatarList,
       'list--compact': this.twoLines &&
+        this.commandKey &&
         ['small', 'x-small'].includes(this.config.iconSize),
     };
     return (h("ul", { class: classNames, "aria-hidden": (this.config.type === 'menu').toString(), role: role, "aria-orientation": "vertical" }, items.map(this.renderListItem)));
@@ -50,7 +54,7 @@ export class ListRenderer {
    * Returns `undefined` if no item should have the attribute set.
    * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
    *
-   * @param {Array<ListItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
+   * @param {Array<ListItem | ListSeparator | MenuItems>} items the items of the list, including any `ListSeparator`:s
    * @returns {number} the index as per the description
    */
   getIndexForWhichToApplyTabIndex(items) {
@@ -77,7 +81,7 @@ export class ListRenderer {
   /**
    * Render a single list item
    *
-   * @param {ListItem | ListSeparator} item the item to render
+   * @param {ListItem | ListSeparator | MenuItems} item the item to render
    * @param {number} index the index the item had in the `items` array
    * @returns {HTMLElement} the list item
    */
@@ -99,24 +103,40 @@ export class ListRenderer {
     }
     return (h("li", Object.assign({ class: classNames, role: this.config.type === 'menu' ? 'menuitem' : '', "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes),
       item.icon ? this.renderIcon(this.config, item) : null,
-      this.renderText(item.text, item.secondaryText),
+      this.renderText(item),
       this.twoLines && this.avatarList ? this.renderDivider() : null,
       this.renderActionMenu(item.actions)));
   }
   /**
    * Render the text of the list item
    *
-   * @param {string} text primary text for the list item
-   * @param {string} secondaryText secondary text for the list item
+   * @param {ListItem | MenuItem} item the list item
    * @returns {HTMLElement | string} the text for the list item
    */
-  renderText(text, secondaryText) {
-    if (!secondaryText) {
-      return h("span", { class: "mdc-deprecated-list-item__text" }, text);
+  renderText(item) {
+    if (this.isSimpleItem(item)) {
+      return (h("span", { class: "mdc-deprecated-list-item__text" }, item.text));
+    }
+    return (h("div", { class: "mdc-deprecated-list-item__text" },
+      h("div", { class: "mdc-deprecated-list-item__primary-command-text" },
+        h("div", { class: "mdc-deprecated-list-item__primary-text" }, item.text),
+        this.renderCommandText(item)),
+      h("div", { class: "mdc-deprecated-list-item__secondary-text" }, item.secondaryText)));
+  }
+  renderCommandText(item) {
+    if (!('commandText' in item)) {
+      return;
+    }
+    return (h("div", { class: "mdc-deprecated-list-item__command-text" }, item.commandText));
+  }
+  isSimpleItem(item) {
+    if ('commandText' in item) {
+      return false;
+    }
+    if ('secondaryText' in item) {
+      return false;
     }
-    return (h("span", { class: "mdc-deprecated-list-item__text" },
-      h("span", { class: "mdc-deprecated-list-item__primary-text" }, text),
-      h("span", { class: "mdc-deprecated-list-item__secondary-text" }, secondaryText)));
+    return true;
   }
   /**
    * Render an icon for a list item
@@ -177,13 +197,13 @@ export class ListRenderer {
     if (this.hasIcons) {
       return [
         item.icon ? this.renderIcon(config, item) : null,
-        this.renderText(item.text, item.secondaryText),
+        this.renderText(item),
         h("div", { class: "mdc-deprecated-list-item__meta" }, itemTemplate),
       ];
     }
     return [
       h("div", { class: "mdc-deprecated-list-item__graphic" }, itemTemplate),
-      this.renderText(item.text, item.secondaryText),
+      this.renderText(item),
     ];
   }
 }

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

@@ -3136,16 +3136,30 @@ a.mdc-list-item {
   margin-bottom: 0.25rem;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item__secondary-text,
-.mdc-deprecated-list .mdc-deprecated-list-item__primary-text {
+.mdc-deprecated-list .mdc-deprecated-list-item__primary-text,
+.mdc-deprecated-list .mdc-deprecated-list-item__command-text {
   margin: 0;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item__secondary-text:before, .mdc-deprecated-list .mdc-deprecated-list-item__secondary-text:after,
 .mdc-deprecated-list .mdc-deprecated-list-item__primary-text:before,
-.mdc-deprecated-list .mdc-deprecated-list-item__primary-text:after {
+.mdc-deprecated-list .mdc-deprecated-list-item__primary-text:after,
+.mdc-deprecated-list .mdc-deprecated-list-item__command-text:before,
+.mdc-deprecated-list .mdc-deprecated-list-item__command-text:after {
   display: none;
 }
+.mdc-deprecated-list .mdc-deprecated-list-item__command-text {
+  color: rgb(var(--contrast-800));
+  margin-left: 0.7rem;
+}
 .mdc-deprecated-list .mdc-deprecated-list-item__text {
   align-self: center;
+  width: 100%;
+}
+.mdc-deprecated-list .mdc-deprecated-list-item__primary-command-text {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
 }
 .mdc-deprecated-list limel-icon.mdc-deprecated-list-item__graphic {
   display: block;

package/dist/collection/components/list/list.js

@@ -107,6 +107,8 @@ export class List {
       return;
     }
     this.mdcMenu = new MDCMenu(element);
+    this.mdcMenu.hasTypeahead = true;
+    this.mdcMenu.wrapFocus = true;
     this.mdcMenu.items.forEach((item) => new MDCRipple(item));
   }
   setupListeners() {

package/dist/collection/components/menu/menu.js

@@ -1,4 +1,4 @@
-import { Component, Event, h, Prop, Element, } from '@stencil/core';
+import { Component, Event, h, Prop, Element, Watch, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 import { zipObject } from 'lodash-es';
 /**
@@ -10,6 +10,7 @@ import { zipObject } from 'lodash-es';
  * @exampleComponent limel-example-menu-badge-icons
  * @exampleComponent limel-example-menu-grid
  * @exampleComponent limel-example-menu-composite
+ * @exampleComponent limel-example-menu-hotkeys
  */
 export class Menu {
   constructor() {
@@ -52,6 +53,22 @@ export class Menu {
      * obsolete.
      */
     this.fixed = false;
+    this.setTriggerAttributes = (element) => {
+      const attributes = {
+        'aria-haspopup': true,
+        'aria-expanded': this.open,
+        disabled: this.disabled,
+        role: 'button',
+      };
+      for (const [key, value] of Object.entries(attributes)) {
+        if (!value) {
+          element.removeAttribute(key);
+        }
+        else {
+          element.setAttribute(key, String(value));
+        }
+      }
+    };
     this.onClose = () => {
       this.cancel.emit();
       this.open = false;
@@ -73,6 +90,18 @@ export class Menu {
       this.select.emit(event.detail);
       this.open = false;
     };
+    this.setListElement = (element) => {
+      this.list = element;
+    };
+    this.focusMenuItem = () => {
+      var _a;
+      const activeElement = this.list.shadowRoot.activeElement;
+      activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
+      const listItems = this.items.filter(this.isListItem);
+      const selectedIndex = Math.max(listItems.findIndex((item) => item.selected), 0);
+      const menuElements = Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'));
+      (_a = menuElements[selectedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
     this.portalId = createRandomString();
   }
   componentDidLoad() {
@@ -81,6 +110,16 @@ export class Menu {
       console.warn('Using limel-menu with the default trigger is deprecated. Please provide your own trigger element.');
     }
   }
+  openWatcher() {
+    if (!this.open) {
+      return;
+    }
+    const observer = new IntersectionObserver(() => {
+      observer.unobserve(this.list);
+      this.focusMenuItem();
+    });
+    observer.observe(this.list);
+  }
   render() {
     const cssProperties = this.getCssProperties();
     const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
@@ -94,7 +133,11 @@ export class Menu {
         h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties },
           h("limel-list", { class: {
               'has-grid-layout has-interactive-items': this.gridLayout,
-            }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange })))));
+            }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange, ref: this.setListElement })))));
+  }
+  componentDidRender() {
+    const slotElement = this.host.shadowRoot.querySelector('slot');
+    slotElement.assignedElements().forEach(this.setTriggerAttributes);
   }
   renderTrigger() {
     return (h("button", { class: `
@@ -130,6 +173,9 @@ export class Menu {
     });
     return zipObject(propertyNames, values);
   }
+  isListItem(item) {
+    return !('separator' in item);
+  }
   static get is() { return "limel-menu"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -164,15 +210,15 @@ export class Menu {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "Array<ListItem | ListSeparator>",
-        "resolved": "(ListItem<any> | ListSeparator)[]",
+        "original": "Array<MenuItem | ListSeparator>",
+        "resolved": "(ListSeparator | MenuItem<any>)[]",
         "references": {
           "Array": {
             "location": "global"
           },
-          "ListItem": {
+          "MenuItem": {
             "location": "import",
-            "path": "@limetech/lime-elements"
+            "path": "./menu.types"
           },
           "ListSeparator": {
             "location": "import",
@@ -342,4 +388,8 @@ export class Menu {
       }
     }]; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "openWatcher"
+    }]; }
 }

package/dist/collection/components/select/select.js

@@ -316,7 +316,7 @@ export class Select {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Currently selected value or values (if `multiple` is set)."
+        "text": "Currently selected value or values.\nIf `multiple` is `true`, this must be an array. Otherwise it must be a\nsingle value."
       }
     },
     "options": {

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

@@ -117,11 +117,16 @@ export class TabBar {
   handleTabActivated(event) {
     const index = event.detail.index;
     const newTabs = setActiveTab(this.tabs, index);
-    difference(newTabs, this.tabs).forEach((tab) => {
+    difference(newTabs, this.tabs)
+      .sort(this.sortByInactive)
+      .forEach((tab) => {
       this.changeTab.emit(tab);
     });
     this.tabs = newTabs;
   }
+  sortByInactive(a, b) {
+    return Number(a.active) - Number(b.active);
+  }
   handleScroll() {
     const scrollLeft = this.scrollArea.scrollLeft;
     const scrollRight = Math.floor(this.scrollContent.getBoundingClientRect().width -

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

@@ -4,7 +4,8 @@ import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
  * The `limel-tab-panel` component uses the `limel-tab-bar` component together
  * with custom slotted components and will display the content for the currently
  * active tab. Each slotted component must have an id equal to the id of the
- * corresponding tab it belongs to.
+ * corresponding tab it belongs to. These components should implement the
+ * [TabPanelComponent](#/type/TabPanelComponent/) interface.
  *
  * The `limel-tab-panel` component will automatically set each tab configuration
  * on the corresponding slotted component as a property named `tab` so that the

package/dist/collection/components/tab-panel/tab-panel.types.js

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

package/dist/collection/components/tooltip/tooltip-content.css

@@ -0,0 +1,21 @@
+.tooltip-content {
+  display: flex;
+  flex-direction: row;
+  color: rgb(var(--color-gray-default));
+  border-radius: 0.5rem;
+  width: auto;
+  display: flex;
+  padding: 0.75rem;
+  transition: opacity 150ms ease-out;
+  margin-top: 0.3rem;
+  background-color: rgb(var(--color-gray-darker));
+}
+.tooltip-content .tooltip {
+  color: rgb(var(--color-gray-lighter));
+}
+.tooltip-content .helperLabel {
+  padding: 0 0 0 1rem;
+}
+.tooltip-content .helperLabel:empty {
+  display: none;
+}