@limetech/lime-elements 33.14.0-next.9 → 34.0.0-next.4

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-153dc912.js');
+const index = require('./index-e63a89d7.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 tooltipCss = ".trigger-anchor{position:relative}";
 
-const Tooltip = class {
+let Tooltip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.showTooltip = () => {

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-153dc912.js');
+const index = require('./index-e63a89d7.js');
 
 /*
- Stencil Client Patch Esm v2.8.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -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-tooltip.cjs",[[1,"limel-tooltip",{"label":[513],"helperLabel":[513,"helper-label"],"elementId":[513,"element-id"],"open":[32]}]]],["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-tooltip-content.cjs",[[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"]}]]],["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",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["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-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-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-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["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-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"]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["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-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]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -24,6 +24,7 @@
     "./components/linear-progress/linear-progress.js",
     "./components/list/list.js",
     "./components/menu/menu.js",
+    "./components/menu-list/menu-list.js",
     "./components/menu-surface/menu-surface.js",
     "./components/picker/picker.js",
     "./components/popover/popover.js",
@@ -44,8 +45,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.8.1",
-    "typescriptVersion": "4.2.3"
+    "version": "2.10.0",
+    "typescriptVersion": "4.3.5"
   },
   "collections": [],
   "bundles": []

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/chip-set/chip-set.js

@@ -778,8 +778,8 @@ export class ChipSet {
         "signature": "(emptyInput?: boolean) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "emptyInput if `true`, any text in the input is discarded",
-                "name": "param"
+                "name": "param",
+                "text": "emptyInput if `true`, any text in the input is discarded"
               }],
             "text": "if `true`, any text in the input is discarded"
           }],

package/dist/collection/components/config/config.js

@@ -14,6 +14,9 @@ export class Config {
    * Copy any config settings to the global config object
    */
   setGlobalConfig() {
+    if (!this.config) {
+      return;
+    }
     Object.keys(this.config).forEach((key) => {
       globalConfig[key] = this.config[key];
     });

package/dist/collection/components/header/header.js

@@ -43,7 +43,6 @@ import { Component, h, Prop } from '@stencil/core';
  * @exampleComponent limel-example-header-responsive
  * @exampleComponent limel-example-header-narrow
  * @slot - Content (actions) to be put inside the far right surface of the header
- * @private
  */
 export class Header {
   render() {

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

@@ -7,8 +7,154 @@ export class ListRenderer {
       isOpen: true,
       badgeIcons: false,
     };
-    this.renderListItem = this.renderListItem.bind(this);
-    this.renderDivider = this.renderDivider.bind(this);
+    /**
+     * Determine which ListItem should have the `tab-index` attribute set,
+     * and return the index at which that ListItem is located in `items`.
+     * 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
+     * @returns {number} the index as per the description
+     */
+    this.getIndexForWhichToApplyTabIndex = (items) => {
+      let result;
+      for (let i = 0, max = items.length; i < max; i += 1) {
+        if ('separator' in items[i]) {
+          // Ignore ListSeparator
+        }
+        else {
+          const item = items[i];
+          if (item.selected) {
+            result = i;
+            break;
+          }
+          if (result === undefined && !item.disabled) {
+            result = i;
+            // Do NOT break, as any later item with
+            // `selected=true` should get the tab-index instead!
+          }
+        }
+      }
+      return result;
+    };
+    /**
+     * Render a single list item
+     *
+     * @param {ListItem | ListSeparator} item the item to render
+     * @param {number} index the index the item had in the `items` array
+     * @returns {HTMLElement} the list item
+     */
+    this.renderListItem = (item, index) => {
+      if ('separator' in item) {
+        return h("li", { class: "mdc-deprecated-list-divider", role: "separator" });
+      }
+      if (['radio', 'checkbox'].includes(this.config.type)) {
+        return this.renderVariantListItem(this.config, item, index);
+      }
+      const classNames = {
+        'mdc-deprecated-list-item': true,
+        'mdc-deprecated-list-item--disabled': item.disabled,
+        'mdc-deprecated-list-item--selected': item.selected,
+      };
+      const attributes = {};
+      if (index === this.applyTabIndexToItemAtIndex) {
+        attributes.tabindex = '0';
+      }
+      return (h("li", Object.assign({ class: classNames, "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),
+        this.twoLines && this.avatarList ? this.renderDivider() : null,
+        this.renderActionMenu(item.actions)));
+    };
+    /**
+     * Render the text of the list item
+     *
+     * @param {ListItem} item the list item
+     * @returns {HTMLElement | string} the text for the list item
+     */
+    this.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)),
+        h("div", { class: "mdc-deprecated-list-item__secondary-text" }, item.secondaryText)));
+    };
+    this.isSimpleItem = (item) => {
+      if ('secondaryText' in item) {
+        return false;
+      }
+      return true;
+    };
+    /**
+     * Render an icon for a list item
+     *
+     * @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function
+     * @param {ListItem} item the list item
+     * @returns {HTMLElement} the icon element
+     */
+    this.renderIcon = (config, item) => {
+      const style = {};
+      if (item.iconColor) {
+        if (config.badgeIcons) {
+          style['--icon-background-color'] = item.iconColor;
+        }
+        else {
+          style.color = item.iconColor;
+        }
+      }
+      return (h("limel-icon", { badge: config.badgeIcons, class: "mdc-deprecated-list-item__graphic", name: item.icon, style: style, size: config.iconSize }));
+    };
+    this.renderDivider = () => {
+      const classes = {
+        'mdc-deprecated-list-divider': true,
+        'mdc-deprecated-list-divider--inset': true,
+      };
+      if (this.config.iconSize) {
+        classes[this.config.iconSize] = true;
+      }
+      return h("hr", { class: classes });
+    };
+    this.renderActionMenu = (actions) => {
+      if (!actions || actions.length === 0) {
+        return;
+      }
+      return (h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left" },
+        h("limel-icon", { slot: "trigger", name: "menu_2", size: "small" })));
+    };
+    this.renderVariantListItem = (config, item, index) => {
+      let itemTemplate;
+      if (config.type === 'radio') {
+        itemTemplate = (h(RadioButtonTemplate, { id: `c_${index}`, checked: item.selected, disabled: item.disabled }));
+      }
+      else if (config.type === 'checkbox') {
+        itemTemplate = (h(CheckboxTemplate, { id: `c_${index}`, checked: item.selected, disabled: item.disabled }));
+      }
+      const classNames = {
+        'mdc-deprecated-list-item': true,
+        'mdc-deprecated-list-item--disabled': item.disabled,
+        'mdc-deprecated-list-item__text': !item.secondaryText,
+      };
+      const attributes = {};
+      if (index === this.applyTabIndexToItemAtIndex) {
+        attributes.tabindex = '0';
+      }
+      return (h("li", Object.assign({ class: classNames, role: config.type, "aria-checked": item.selected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', "data-index": index }, attributes), this.renderVariantListItemContent(config, item, itemTemplate)));
+    };
+    this.renderVariantListItemContent = (config, item, itemTemplate) => {
+      if (this.hasIcons) {
+        return [
+          item.icon ? this.renderIcon(config, item) : null,
+          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),
+      ];
+    };
   }
   render(items, config = {}) {
     items = items || [];
@@ -16,14 +162,11 @@ 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;
     });
     this.avatarList = this.config.badgeIcons && this.hasIcons;
-    const selectableListTypes = ['selectable', 'radio', 'checkbox', 'menu'];
+    const selectableListTypes = ['selectable', 'radio', 'checkbox'];
     let role;
     switch (this.config.type) {
       case 'checkbox':
@@ -33,7 +176,7 @@ export class ListRenderer {
         role = 'radiogroup';
         break;
       default:
-        role = this.config.type === 'menu' ? 'menu' : 'listbox';
+        role = 'listbox';
     }
     this.applyTabIndexToItemAtIndex =
       this.getIndexForWhichToApplyTabIndex(items);
@@ -46,164 +189,6 @@ export class ListRenderer {
         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)));
-  }
-  /**
-   * Determine which ListItem should have the `tab-index` attribute set,
-   * and return the index at which that ListItem is located in `items`.
-   * 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 | MenuItems>} items the items of the list, including any `ListSeparator`:s
-   * @returns {number} the index as per the description
-   */
-  getIndexForWhichToApplyTabIndex(items) {
-    let result;
-    for (let i = 0, max = items.length; i < max; i += 1) {
-      if ('separator' in items[i]) {
-        // Ignore ListSeparator
-      }
-      else {
-        const item = items[i];
-        if (item.selected) {
-          result = i;
-          break;
-        }
-        if (result === undefined && !item.disabled) {
-          result = i;
-          // Do NOT break, as any later item with
-          // `selected=true` should get the tab-index instead!
-        }
-      }
-    }
-    return result;
-  }
-  /**
-   * Render a single list item
-   *
-   * @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
-   */
-  renderListItem(item, index) {
-    if ('separator' in item) {
-      return h("li", { class: "mdc-deprecated-list-divider", role: "separator" });
-    }
-    if (['radio', 'checkbox'].includes(this.config.type)) {
-      return this.renderVariantListItem(this.config, item, index);
-    }
-    const classNames = {
-      'mdc-deprecated-list-item': true,
-      'mdc-deprecated-list-item--disabled': item.disabled,
-      'mdc-deprecated-list-item--selected': item.selected,
-    };
-    const attributes = {};
-    if (index === this.applyTabIndexToItemAtIndex) {
-      attributes.tabindex = '0';
-    }
-    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),
-      this.twoLines && this.avatarList ? this.renderDivider() : null,
-      this.renderActionMenu(item.actions)));
-  }
-  /**
-   * Render the text of the list item
-   *
-   * @param {ListItem | MenuItem} item the list item
-   * @returns {HTMLElement | string} the text for the list item
-   */
-  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 true;
-  }
-  /**
-   * Render an icon for a list item
-   *
-   * @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function
-   * @param {ListItem} item the list item
-   * @returns {HTMLElement} the icon element
-   */
-  renderIcon(config, item) {
-    const style = {};
-    if (item.iconColor) {
-      if (config.badgeIcons) {
-        style['--icon-background-color'] = item.iconColor;
-      }
-      else {
-        style.color = item.iconColor;
-      }
-    }
-    return (h("limel-icon", { badge: config.badgeIcons, class: "mdc-deprecated-list-item__graphic", name: item.icon, style: style, size: config.iconSize }));
-  }
-  renderDivider() {
-    const classes = {
-      'mdc-deprecated-list-divider': true,
-      'mdc-deprecated-list-divider--inset': true,
-    };
-    if (this.config.iconSize) {
-      classes[this.config.iconSize] = true;
-    }
-    return h("hr", { class: classes });
-  }
-  renderActionMenu(actions) {
-    if (!actions || actions.length === 0) {
-      return;
-    }
-    return (h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left" },
-      h("limel-icon", { slot: "trigger", name: "menu_2", size: "small" })));
-  }
-  renderVariantListItem(config, item, index) {
-    let itemTemplate;
-    if (config.type === 'radio') {
-      itemTemplate = (h(RadioButtonTemplate, { id: `c_${index}`, checked: item.selected, disabled: item.disabled }));
-    }
-    else if (config.type === 'checkbox') {
-      itemTemplate = (h(CheckboxTemplate, { id: `c_${index}`, checked: item.selected, disabled: item.disabled }));
-    }
-    const classNames = {
-      'mdc-deprecated-list-item': true,
-      'mdc-deprecated-list-item--disabled': item.disabled,
-      'mdc-deprecated-list-item__text': !item.secondaryText,
-    };
-    const attributes = {};
-    if (index === this.applyTabIndexToItemAtIndex) {
-      attributes.tabindex = '0';
-    }
-    return (h("li", Object.assign({ class: classNames, role: config.type, "aria-checked": item.selected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', "data-index": index }, attributes), this.renderVariantListItemContent(config, item, itemTemplate)));
-  }
-  renderVariantListItemContent(config, item, itemTemplate) {
-    if (this.hasIcons) {
-      return [
-        item.icon ? this.renderIcon(config, item) : null,
-        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),
-    ];
+    return (h("ul", { class: classNames, role: role, "aria-orientation": "vertical" }, items.map(this.renderListItem)));
   }
 }

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

@@ -3052,10 +3052,6 @@ a.mdc-list-item {
   pointer-events: none;
 }
 
-.mdc-menu {
-  max-height: 70vh;
-}
-
 .mdc-deprecated-list {
   --mdc-theme-text-icon-on-background: var(
       --icon-color,
@@ -3123,12 +3119,6 @@ a.mdc-list-item {
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item:last-child hr.mdc-deprecated-list-divider {
   display: none;
 }
-.mdc-deprecated-list .mdc-deprecated-list-item[role=menuitem] {
-  font-size: 0.8125rem;
-}
-.mdc-deprecated-list .mdc-deprecated-list-item[role=menuitem] .mdc-deprecated-list-item__graphic {
-  margin-right: 0.875rem;
-}
 .mdc-deprecated-list.mdc-deprecated-list--two-line .mdc-deprecated-list-item__text {
   padding: 0.5rem 0;
 }