@limetech/lime-elements 35.1.0-next.9 → 36.0.0-next.3

package/dist/cjs/limel-icon-button.cjs.entry.js

@@ -3,11 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2a28697b.js');
-const component = require('./component-cf490570.js');
-require('./component-67144c1c.js');
-require('./ponyfill-98ca4766.js');
 
-const iconButtonCss = ".mdc-icon-button{font-size:24px;width:48px;height:48px;padding:12px}.mdc-icon-button.mdc-icon-button--reduced-size{width:40px;height:40px;padding:8px}.mdc-icon-button.mdc-icon-button--reduced-size.mdc-icon-button--touch{margin-top:4px;margin-bottom:4px;margin-right:4px;margin-left:4px}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38))}.mdc-icon-button svg,.mdc-icon-button img{width:24px;height:24px}.mdc-icon-button{display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:transparent;fill:currentColor;color:inherit;text-decoration:none;cursor:pointer;user-select:none;overflow:visible}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{cursor:default;pointer-events:none}.mdc-icon-button--display-flex{align-items:center;display:inline-flex;justify-content:center}.mdc-icon-button__icon{display:inline-block}.mdc-icon-button__icon.mdc-icon-button__icon--on{display:none}.mdc-icon-button--touch{margin-top:0px;margin-bottom:0px}.mdc-icon-button--on .mdc-icon-button__icon{display:none}.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on{display:inline-block}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-icon-button .mdc-icon-button__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-icon-button .mdc-icon-button__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-icon-button:hover .mdc-icon-button__ripple::before,.mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after{transition:opacity 150ms linear}.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-icon-button .mdc-icon-button__ripple{pointer-events:none;z-index:1}@media (pointer: coarse){.mdc-icon-button:hover::before{opacity:0}}:host{display:inline-flex;align-items:center;justify-content:center}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([elevated]) .mdc-icon-button{padding:0.5625rem}:host([elevated]) limel-icon{transition:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;box-shadow:var(--button-shadow-normal)}:host([elevated]) limel-icon:hover{box-shadow:var(--button-shadow-hovered)}:host([elevated]) limel-icon:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.mdc-icon-button:disabled{color:var(--mdc-theme-text-disabled-on-background)}.mdc-icon-button:focus-visible{box-shadow:var(--shadow-depth-8-focused);border-radius:50%}";
+const iconButtonCss = ".mdc-icon-button{font-size:24px;width:48px;height:48px;padding:12px}.mdc-icon-button.mdc-icon-button--reduced-size{width:40px;height:40px;padding:8px}.mdc-icon-button.mdc-icon-button--reduced-size.mdc-icon-button--touch{margin-top:4px;margin-bottom:4px;margin-right:4px;margin-left:4px}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38))}.mdc-icon-button svg,.mdc-icon-button img{width:24px;height:24px}.mdc-icon-button{display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:transparent;fill:currentColor;color:inherit;text-decoration:none;cursor:pointer;user-select:none;overflow:visible}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{cursor:default;pointer-events:none}.mdc-icon-button--display-flex{align-items:center;display:inline-flex;justify-content:center}.mdc-icon-button__icon{display:inline-block}.mdc-icon-button__icon.mdc-icon-button__icon--on{display:none}.mdc-icon-button--touch{margin-top:0px;margin-bottom:0px}.mdc-icon-button--on .mdc-icon-button__icon{display:none}.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on{display:inline-block}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-icon-button .mdc-icon-button__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-icon-button .mdc-icon-button__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-icon-button:hover .mdc-icon-button__ripple::before,.mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after{transition:opacity 150ms linear}.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-icon-button .mdc-icon-button__ripple{pointer-events:none;z-index:1}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.mdc-icon-button{transition:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:2.25rem;width:2.25rem;padding:0.125rem;border-radius:50%;background-color:var(--icon-background-color, transparent)}.mdc-icon-button:hover{box-shadow:var(--button-shadow-hovered)}.mdc-icon-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}:host([elevated]) .mdc-icon-button:not(:hover):not(:active):not(:focus-visible){box-shadow:var(--button-shadow-normal)}.mdc-icon-button:disabled{color:var(--mdc-theme-text-disabled-on-background)}.mdc-icon-button:focus-visible{box-shadow:var(--shadow-depth-8-focused);border-radius:50%}limel-icon{width:1.25rem;height:1.25rem}";
 
 const IconButton = class {
   constructor(hostRef) {
@@ -21,23 +18,6 @@ const IconButton = class {
      * Set to `true` to disable the button.
      */
     this.disabled = false;
-    this.removeFocusedStyleOnClick =
-      this.removeFocusedStyleOnClick.bind(this);
-  }
-  /**
-   * If the button is hidden or inside another element that is animating
-   * while the button is instantiated, the hover-highlight may become
-   * misaligned. If so, calling this method will make the button re-layout
-   * the highlight.
-   */
-  async relayout() {
-    if (this.mdcIconButtonRipple) {
-      this.mdcIconButtonRipple.layout();
-    }
-  }
-  removeFocusedStyleOnClick() {
-    const mdcButton = this.host.shadowRoot.querySelector('.mdc-icon-button');
-    mdcButton.classList.remove('mdc-ripple-upgraded--background-focused');
   }
   connectedCallback() {
     this.initialize();
@@ -50,26 +30,13 @@ const IconButton = class {
     if (!element) {
       return;
     }
-    this.mdcIconButtonRipple = new component.MDCRipple(element);
-    this.mdcIconButtonRipple.unbounded = true;
-    this.host.addEventListener('click', this.removeFocusedStyleOnClick);
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mdcIconButtonRipple) === null || _a === void 0 ? void 0 : _a.destroy();
-    this.host.removeEventListener('click', this.removeFocusedStyleOnClick);
   }
   render() {
     const buttonAttributes = {};
     if (this.host.hasAttribute('tabindex')) {
       buttonAttributes.tabindex = this.host.getAttribute('tabindex');
     }
-    const iconAttributes = {};
-    if (this.elevated) {
-      iconAttributes.badge = true;
-      iconAttributes.size = 'small';
-    }
-    return (index.h("button", Object.assign({ class: "mdc-icon-button", disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes), index.h("div", { class: "mdc-icon-button__ripple" }), index.h("limel-icon", Object.assign({ name: this.icon }, iconAttributes))));
+    return (index.h("button", Object.assign({ class: "mdc-icon-button", disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes), index.h("limel-icon", { name: this.icon, badge: true })));
   }
   get host() { return index.getElement(this); }
 };

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

@@ -146,8 +146,8 @@ class ListRenderer {
       if (!actions || actions.length === 0) {
         return;
       }
-      return (index.h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left" },
-        index.h("limel-icon", { slot: "trigger", name: "menu_2", size: "small" })));
+      return (index.h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left-start" },
+        index.h("limel-icon-button", { class: "action-menu-trigger", slot: "trigger", icon: "menu_2" })));
     };
     this.renderVariantListItem = (config, item, index$1) => {
       let itemTemplate;
@@ -2297,7 +2297,7 @@ const Portal = class {
     /**
      * Decides which direction the portal content should open.
      */
-    this.openDirection = 'right';
+    this.openDirection = 'bottom';
     /**
      * Position of the content.
      */
@@ -2453,12 +2453,8 @@ const Portal = class {
     this.popperInstance = null;
   }
   createPopperConfig() {
-    let placement = 'bottom-start';
-    let flipPlacement = 'top-start';
-    if (this.openDirection === 'left') {
-      placement = 'bottom-end';
-      flipPlacement = 'top-end';
-    }
+    const placement = this.getPlacement(this.openDirection);
+    const flipPlacement = this.getFlipPlacement(this.openDirection);
     return {
       strategy: this.position,
       placement: placement,
@@ -2472,6 +2468,40 @@ const Portal = class {
       ],
     };
   }
+  getPlacement(direction) {
+    const placements = {
+      'left-start': 'left-start',
+      left: 'left',
+      'left-end': 'left-end',
+      'right-start': 'right-start',
+      right: 'right',
+      'right-end': 'right-end',
+      'top-start': 'top-start',
+      top: 'top',
+      'top-end': 'top-end',
+      'bottom-start': 'bottom-start',
+      bottom: 'bottom',
+      'bottom-end': 'bottom-end',
+    };
+    return placements[direction];
+  }
+  getFlipPlacement(direction) {
+    const flipPlacements = {
+      'left-start': 'right-start',
+      left: 'right',
+      'left-end': 'right-end',
+      'right-start': 'left-start',
+      right: 'left',
+      'right-end': 'left-end',
+      'top-start': 'bottom-start',
+      top: 'bottom',
+      'top-end': 'bottom-end',
+      'bottom-start': 'top-start',
+      bottom: 'top',
+      'bottom-end': 'top-end',
+    };
+    return flipPlacements[direction];
+  }
   ensureContainerFitsInViewPort() {
     const viewHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
     const { top, bottom } = this.host.getBoundingClientRect();

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

@@ -27,9 +27,9 @@ const Menu = class {
      */
     this.disabled = false;
     /**
-     * Decides if the menu should open right or left.
+     * Decides the menu's location in relation to its trigger
      */
-    this.openDirection = 'right';
+    this.openDirection = 'bottom-start';
     /**
      * Sets the open state of the menu.
      */

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

@@ -320,7 +320,7 @@ const Picker = class {
       props.maxItems = 1;
     }
     return [
-      index.h("limel-chip-set", Object.assign({ type: "input", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, clearAllButton: this.multiple }, props)),
+      index.h("limel-chip-set", Object.assign({ type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, clearAllButton: this.multiple }, props)),
       this.renderDropdown(),
     ];
   }

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

@@ -38,7 +38,7 @@ const Tooltip = class {
   }
   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: {
+    return (index.h("div", { class: "trigger-anchor" }, index.h("limel-portal", { openDirection: "bottom-start", visible: this.open, containerId: this.portalId, containerStyle: {
         'z-index': tooltipZIndex,
         'pointer-events': 'none',
       } }, index.h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-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":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[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"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["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],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[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-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["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-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[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-color-picker-palette_2.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}],[1,"limel-popover",{"open":[4]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"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"]}]]],["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-tooltip_2.cjs",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
+  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-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":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[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"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["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],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[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-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["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-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[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-color-picker-palette_2.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}],[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-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-tooltip_2.cjs",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
   });
 };
 

package/dist/collection/components/chip-set/chip-set.css

@@ -2813,6 +2813,13 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
   position: absolute;
   z-index: -100;
 }
+.mdc-text-field .mdc-text-field__input[type=search] {
+  -webkit-appearance: textfield;
+  background-color: transparent;
+}
+.mdc-text-field .mdc-text-field__input[type=search]::-webkit-search-cancel-button {
+  display: none;
+}
 
 .mdc-text-field--disabled .mdc-chip {
   pointer-events: all;

package/dist/collection/components/chip-set/chip-set.js

@@ -12,6 +12,8 @@ const INPUT_FIELD_TABINDEX = 1;
  * @exampleComponent limel-example-chip-set-filter
  * @exampleComponent limel-example-chip-set-filter-badge
  * @exampleComponent limel-example-chip-set-input
+ * @exampleComponent limel-example-chip-set-input-type-text
+ * @exampleComponent limel-example-chip-set-input-type-search
  * @exampleComponent limel-example-chip-icon-color
  * @exampleComponent limel-example-chip-set-composite
  */
@@ -32,6 +34,11 @@ export class ChipSet {
      * the chip-set.
      */
     this.readonly = false;
+    /**
+     * For chip-sets of type `input`. Value to use for the `type` attribute on the
+     * input field inside the chip-set.
+     */
+    this.inputType = 'text';
     /**
      * True if the control requires a value
      */
@@ -221,7 +228,7 @@ export class ChipSet {
           'has-clear-all-button': this.clearAllButton,
         }, onClick: this.handleTextFieldFocus },
         this.value.map(this.renderInputChip),
-        h("input", { tabIndex: INPUT_FIELD_TABINDEX, type: "text", id: "input-element", disabled: this.readonly || this.disabled, class: {
+        h("input", { tabIndex: INPUT_FIELD_TABINDEX, type: this.inputType, id: "input-element", disabled: this.readonly || this.disabled, class: {
             'mdc-text-field__input': true,
             hidden: this.inputHidden(),
           }, value: this.textValue, onBlur: this.handleInputBlur, onFocus: this.handleTextFieldFocus, onKeyDown: this.handleKeyDown, onInput: this.handleTextInput, 
@@ -410,9 +417,7 @@ export class ChipSet {
       event.stopPropagation();
       this.removeChip(chip.id);
     };
-    return (h("button", { class: "mdc-chip__icon mdc-chip__icon--trailing mdc-deprecated-chip-trailing-action", "aria-label": this.removeChipLabel, tabindex: "-1", innerHTML: svgData, 
-      // eslint-disable-next-line react/jsx-no-bind
-      onClick: removeFunc }));
+    return (h("button", { class: "mdc-chip__icon mdc-chip__icon--trailing mdc-deprecated-chip-trailing-action", "aria-label": this.removeChipLabel, tabindex: "-1", innerHTML: svgData, onClick: removeFunc }));
   }
   renderClearAllChipsButton() {
     if (this.disabled || this.readonly || !this.clearAllButton) {
@@ -553,6 +558,24 @@ export class ChipSet {
       "reflect": true,
       "defaultValue": "false"
     },
+    "inputType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'search' | 'text'",
+        "resolved": "\"search\" | \"text\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "For chip-sets of type `input`. Value to use for the `type` attribute on the\ninput field inside the chip-set."
+      },
+      "attribute": "input-type",
+      "reflect": true,
+      "defaultValue": "'text'"
+    },
     "maxItems": {
       "type": "number",
       "mutable": false,

package/dist/collection/components/color-picker/color-picker.js

@@ -26,7 +26,7 @@ export class ColorPicker {
       if (this.readonly) {
         return this.renderPickerTrigger();
       }
-      return (h("limel-popover", { open: this.isOpen, onClose: this.onPopoverClose },
+      return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose },
         this.renderPickerTrigger(),
         h("limel-color-picker-palette", { value: this.value, label: this.label, helperText: this.helperText, onChange: this.handleChange, required: this.required })));
     };

package/dist/collection/components/date-picker/date-picker.css

@@ -1,6 +1,11 @@
 /**
  * @prop --dropdown-z-index: z-index of the dropdown menu.
  */
-div.container {
+:host(limel-date-picker) {
   position: relative;
+}
+
+limel-input-field[disabled],
+limel-input-field[readonly] {
+  pointer-events: none;
 }

package/dist/collection/components/date-picker/date-picker.js

@@ -110,14 +110,14 @@ export class DatePicker {
       inputProps.trailingIcon = 'clear_symbol';
     }
     if (this.useNative) {
-      return (h("div", { class: "container" },
-        h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: this.helperText, required: this.required, value: this.formattedValue, type: this.nativeType, onChange: this.nativeChangeHandler })));
+      return (h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: this.helperText, required: this.required, value: this.formattedValue, type: this.nativeType, onChange: this.nativeChangeHandler }));
     }
     const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-    return (h("div", { class: "container" },
+    return [
       h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: this.helperText, required: this.required, value: this.formattedValue, onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
       h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } },
-        h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, onChange: this.handleCalendarChange }))));
+        h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, onChange: this.handleCalendarChange })),
+    ];
   }
   onValueChange(newValue, oldValue) {
     if (newValue !== oldValue && newValue !== this.formattedValue) {

package/dist/collection/components/date-picker/pickers/MonthPicker.js

@@ -74,9 +74,7 @@ export class MonthPicker extends Picker {
     })));
   }
   renderMonth(month, fp) {
-    return (h("div", { className: "datepicker-month", 
-      // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => {
+    return (h("div", { className: "datepicker-month", onClick: () => {
         const date = moment([fp.currentYear]).month(month).toDate();
         fp.setDate(date, true);
         fp.close();

package/dist/collection/components/date-picker/pickers/QuarterPicker.js

@@ -78,9 +78,7 @@ export class QuarterPicker extends Picker {
     })));
   }
   renderQuarter(quarter, fp) {
-    return (h("div", { className: "datepicker-quarter", id: `datepicker-quarter-${quarter}`, 
-      // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => {
+    return (h("div", { className: "datepicker-quarter", id: `datepicker-quarter-${quarter}`, onClick: () => {
         const date = moment([fp.currentYear])
           .quarter(quarter)
           .toDate();

package/dist/collection/components/date-picker/pickers/YearPicker.js

@@ -106,9 +106,7 @@ export class YearPicker extends Picker {
     })));
   }
   renderYear(year, fp) {
-    return (h("div", { className: "datepicker-year", 
-      // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => {
+    return (h("div", { className: "datepicker-year", onClick: () => {
         const date = moment(year).toDate();
         fp.setDate(date, true);
         fp.close();

package/dist/collection/components/form/templates/common.js

@@ -41,6 +41,9 @@ export function findTitle(data, fieldSchema, formSchema) {
   if (!firstEntry) {
     return null;
   }
+  if (!subSchema.properties) {
+    return null;
+  }
   const [key, value] = firstEntry;
   return findTitle(value, subSchema.properties[key], formSchema);
 }

package/dist/collection/components/icon-button/icon-button.css

@@ -231,20 +231,9 @@
   z-index: 1;
 }
 
-@media (pointer: coarse) {
-  .mdc-icon-button:hover::before {
-    opacity: 0;
-  }
-}
 /**
- * @prop --icon-background-color: Background color when attribute `elevated` is set to `true`.
+ * @prop --icon-background-color: Background color of the button.
  */
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
 :host([hidden]) {
   display: none;
 }
@@ -253,25 +242,37 @@
   pointer-events: none;
 }
 
-:host([elevated]) .mdc-icon-button {
-  padding: 0.5625rem;
-}
-:host([elevated]) limel-icon {
+.mdc-icon-button {
   transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-  box-shadow: var(--button-shadow-normal);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 2.25rem;
+  width: 2.25rem;
+  padding: 0.125rem;
+  border-radius: 50%;
+  background-color: var(--icon-background-color, transparent);
 }
-:host([elevated]) limel-icon:hover {
+.mdc-icon-button:hover {
   box-shadow: var(--button-shadow-hovered);
 }
-:host([elevated]) limel-icon:active {
+.mdc-icon-button:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
-
+:host([elevated]) .mdc-icon-button:not(:hover):not(:active):not(:focus-visible) {
+  box-shadow: var(--button-shadow-normal);
+}
 .mdc-icon-button:disabled {
   color: var(--mdc-theme-text-disabled-on-background);
 }
 .mdc-icon-button:focus-visible {
   box-shadow: var(--shadow-depth-8-focused);
   border-radius: 50%;
+}
+
+limel-icon {
+  width: 1.25rem;
+  height: 1.25rem;
 }

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

@@ -1,5 +1,4 @@
-import { MDCRipple } from '@material/ripple';
-import { Component, Element, h, Method, Prop } from '@stencil/core';
+import { Component, Element, h, Prop } from '@stencil/core';
 /**
  * @exampleComponent limel-example-icon-button-basic
  * @exampleComponent limel-example-icon-button-disabled
@@ -18,23 +17,6 @@ export class IconButton {
      * Set to `true` to disable the button.
      */
     this.disabled = false;
-    this.removeFocusedStyleOnClick =
-      this.removeFocusedStyleOnClick.bind(this);
-  }
-  /**
-   * If the button is hidden or inside another element that is animating
-   * while the button is instantiated, the hover-highlight may become
-   * misaligned. If so, calling this method will make the button re-layout
-   * the highlight.
-   */
-  async relayout() {
-    if (this.mdcIconButtonRipple) {
-      this.mdcIconButtonRipple.layout();
-    }
-  }
-  removeFocusedStyleOnClick() {
-    const mdcButton = this.host.shadowRoot.querySelector('.mdc-icon-button');
-    mdcButton.classList.remove('mdc-ripple-upgraded--background-focused');
   }
   connectedCallback() {
     this.initialize();
@@ -47,28 +29,14 @@ export class IconButton {
     if (!element) {
       return;
     }
-    this.mdcIconButtonRipple = new MDCRipple(element);
-    this.mdcIconButtonRipple.unbounded = true;
-    this.host.addEventListener('click', this.removeFocusedStyleOnClick);
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mdcIconButtonRipple) === null || _a === void 0 ? void 0 : _a.destroy();
-    this.host.removeEventListener('click', this.removeFocusedStyleOnClick);
   }
   render() {
     const buttonAttributes = {};
     if (this.host.hasAttribute('tabindex')) {
       buttonAttributes.tabindex = this.host.getAttribute('tabindex');
     }
-    const iconAttributes = {};
-    if (this.elevated) {
-      iconAttributes.badge = true;
-      iconAttributes.size = 'small';
-    }
     return (h("button", Object.assign({ class: "mdc-icon-button", disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes),
-      h("div", { class: "mdc-icon-button__ripple" }),
-      h("limel-icon", Object.assign({ name: this.icon }, iconAttributes))));
+      h("limel-icon", { name: this.icon, badge: true })));
   }
   static get is() { return "limel-icon-button"; }
   static get encapsulation() { return "shadow"; }
@@ -150,23 +118,5 @@ export class IconButton {
       "defaultValue": "false"
     }
   }; }
-  static get methods() { return {
-    "relayout": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "If the button is hidden or inside another element that is animating\nwhile the button is instantiated, the hover-highlight may become\nmisaligned. If so, calling this method will make the button re-layout\nthe highlight.",
-        "tags": []
-      }
-    }
-  }; }
   static get elementRef() { return "host"; }
 }

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

@@ -123,8 +123,8 @@ export class ListRenderer {
       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" })));
+      return (h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left-start" },
+        h("limel-icon-button", { class: "action-menu-trigger", slot: "trigger", icon: "menu_2" })));
     };
     this.renderVariantListItem = (config, item, index) => {
       let itemTemplate;

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

@@ -5,7 +5,7 @@ import { zipObject } from 'lodash-es';
  * @slot trigger - Element to use as a trigger for the menu.
  * @exampleComponent limel-example-menu-basic
  * @exampleComponent limel-example-menu-disabled
- * @exampleComponent limel-example-menu-open-left
+ * @exampleComponent limel-example-menu-open-direction
  * @exampleComponent limel-example-menu-icons
  * @exampleComponent limel-example-menu-badge-icons
  * @exampleComponent limel-example-menu-grid
@@ -24,9 +24,9 @@ export class Menu {
      */
     this.disabled = false;
     /**
-     * Decides if the menu should open right or left.
+     * Decides the menu's location in relation to its trigger
      */
-    this.openDirection = 'right';
+    this.openDirection = 'bottom-start';
     /**
      * Sets the open state of the menu.
      */
@@ -199,7 +199,7 @@ export class Menu {
       "mutable": false,
       "complexType": {
         "original": "OpenDirection",
-        "resolved": "\"left\" | \"right\"",
+        "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",
@@ -211,11 +211,11 @@ export class Menu {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Decides if the menu should open right or left."
+        "text": "Decides the menu's location in relation to its trigger"
       },
       "attribute": "open-direction",
       "reflect": true,
-      "defaultValue": "'right'"
+      "defaultValue": "'bottom-start'"
     },
     "open": {
       "type": "boolean",