@limetech/lime-elements 40.4.2 → 40.5.1

package/dist/esm/limel-callout.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-Bnc9lzk2.js';
-import { t as translate } from './translations-Bwm2y2E4.js';
+import { t as translate } from './translations-DMtX4tTX.js';
 import './language-C3hECvXE.js';
 
 const calloutIcons = {

package/dist/esm/limel-chart.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-Bnc9lzk2.js';
-import { t as translate } from './translations-Bwm2y2E4.js';
+import { t as translate } from './translations-DMtX4tTX.js';
 import { c as createRandomString } from './random-string-JbKhhoXs.js';
 import './language-C3hECvXE.js';
 

package/dist/esm/limel-chip-set.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Bnc9lzk2.js';
 import { c as ARROW_LEFT, d as ARROW_RIGHT, a as ENTER, D as DELETE, B as BACKSPACE, E as ESCAPE } from './keycodes-C4_9qUMP.js';
-import { t as translate } from './translations-Bwm2y2E4.js';
+import { t as translate } from './translations-DMtX4tTX.js';
 import { a as getTarget, b as getHref } from './link-helper-5KsJICvh.js';
 import { c as createRandomString } from './random-string-JbKhhoXs.js';
 import { i as isEqual } from './isEqual-4tbMaaf_.js';

package/dist/esm/limel-chip_2.entry.js

@@ -3,7 +3,7 @@ import { I as ImageTemplate } from './image.template-wqMwmOF-.js';
 import { g as getRel } from './link-helper-5KsJICvh.js';
 import { g as getIconName } from './get-icon-props-CgNJbSP4.js';
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-BgTwPGeH.js';
-import { t as translate } from './translations-Bwm2y2E4.js';
+import { t as translate } from './translations-DMtX4tTX.js';
 import { D as DELETE, B as BACKSPACE } from './keycodes-C4_9qUMP.js';
 import { i as isEmpty } from './isEmpty-DHgukT5k.js';
 import './language-C3hECvXE.js';

package/dist/esm/limel-code-diff.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-Bnc9lzk2.js';
-import { t as translate } from './translations-Bwm2y2E4.js';
+import { t as translate } from './translations-DMtX4tTX.js';
 import './language-C3hECvXE.js';
 
 class Diff {

package/dist/esm/limel-code-editor.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Bnc9lzk2.js';
 import { c as createRandomString } from './random-string-JbKhhoXs.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-B85MJLTf.js';
-import { t as translate } from './translations-Bwm2y2E4.js';
+import { t as translate } from './translations-DMtX4tTX.js';
 import './language-C3hECvXE.js';
 
 var codemirror$1 = {exports: {}};

package/dist/esm/limel-collapsible-section.entry.js

@@ -3,7 +3,7 @@ import { d as dispatchResizeEvent } from './dispatch-resize-event-z_E3sq3p.js';
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-BgTwPGeH.js';
 import { c as createRandomString } from './random-string-JbKhhoXs.js';
 import { b as getIconColor, d as getIconTitle, g as getIconName } from './get-icon-props-CgNJbSP4.js';
-import { t as translate } from './translations-Bwm2y2E4.js';
+import { t as translate } from './translations-DMtX4tTX.js';
 import './language-C3hECvXE.js';
 
 const collapsibleSectionCss = () => `@charset "UTF-8";.expand-icon{position:relative;display:flex;align-items:center;justify-content:center;height:1.875rem;margin:0 0 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;inset:auto;margin:auto;width:100%;border-radius:1rem;height:0.125rem}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;opacity:0;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:nth-of-type(2){transform:translate3d(0, 0.25rem, 0) rotate(90deg)}.line:nth-of-type(3){transform:translate3d(0, -0.25rem, 0) rotate(-90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}.line:nth-of-type(2):before,.line:nth-of-type(2):after,.line:nth-of-type(3):before,.line:nth-of-type(3):after{content:"";position:absolute;inset:0;margin:auto;width:50%;height:100%;border-radius:inherit;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:nth-of-type(2):before,.line:nth-of-type(3):before{transform:translate3d(0, -0.1rem, 0) rotate(45deg)}.line:nth-of-type(2):after,.line:nth-of-type(3):after{transform:translate3d(0, 0.1rem, 0) rotate(-45deg)}.open-close-toggle:hover+.expand-icon .line:first-of-type,.open-close-toggle:hover+.expand-icon .line:last-of-type,.open-close-toggle:focus-visible+.expand-icon .line:first-of-type,.open-close-toggle:focus-visible+.expand-icon .line:last-of-type{transition:opacity 0.8s ease 0.4s, transform 0.4s ease 0.3s;opacity:1}.open-close-toggle:hover+.expand-icon .line:first-of-type,.open-close-toggle:focus-visible+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type,.open-close-toggle:focus-visible+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3),.open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(2),.open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(2){transform:translate3d(0, 0.5rem, 0) rotate(90deg);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3),.open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(3){transform:translate3d(0, -0.5rem, 0) rotate(-90deg);opacity:0.4}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;opacity:1}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, 1rem, 0) rotate(90deg);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, -1rem, 0) rotate(-90deg);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type,section.open .open-close-toggle:focus-visible+.expand-icon .line:first-of-type,section.open .open-close-toggle:focus-visible+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:focus-visible+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type,section.open .open-close-toggle:focus-visible+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2),section.open .open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(2){transform:translate3d(0, 1rem, 0) rotate(90deg);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3),section.open .open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(3){transform:translate3d(0, -1rem, 0) rotate(-90deg);opacity:0}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}button.open-close-toggle{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;position:absolute;inset:0;width:100%}button.open-close-toggle:focus{outline:none}button.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.open-close-toggle{transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}button.open-close-toggle:hover,button.open-close-toggle:focus-visible{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open button.open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) var(--limel-cs-open-header-bottom-border-radius, 0) var(--limel-cs-open-header-bottom-border-radius, 0)}section.open button.open-close-toggle:hover,section.open button.open-close-toggle:focus-visible{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}section{transition:box-shadow 0.4s ease;border-radius:var(--border-radius-of-header)}section[aria-invalid]:not([aria-invalid=false]){--header-stroke-color:rgb(var(--color-red-default)) !important}section[aria-invalid]:not([aria-invalid=false]):not(.open){box-shadow:0 0 0 1px rgb(var(--color-red-default))}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;gap:0.5rem;padding-left:0.5rem;height:2.5rem}limel-icon{width:1.5rem;flex-shrink:0}.title{font-size:1rem;font-weight:300;color:var(--limel-theme-on-surface-color);justify-self:flex-start;user-select:none;height:auto;max-height:3rem;line-height:1.2rem;display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));opacity:0;margin-right:0.5rem}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}::slotted([slot=header]){margin-right:0.5rem}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:var(--limel-cs-grid-template-rows)}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden}:host(limel-collapsible-section:not([is-open])){--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;--limel-cs-grid-template-rows:0fr}:host(limel-collapsible-section:not([is-open])) slot{opacity:0}:host(limel-collapsible-section[is-open]){--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;--limel-cs-grid-template-rows:1fr}:host(limel-collapsible-section[is-open]) slot{opacity:1}header:hover+.body,header:has(.open-close-toggle:hover)+.body,header:has(.open-close-toggle:focus-visible)+.body{will-change:grid-template-rows}header:hover+.body slot,header:has(.open-close-toggle:hover)+.body slot,header:has(.open-close-toggle:focus-visible)+.body slot{will-change:opacity}`;

package/dist/esm/limel-drag-handle.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-Bnc9lzk2.js';
-import { t as translate } from './translations-Bwm2y2E4.js';
+import { t as translate } from './translations-DMtX4tTX.js';
 import './language-C3hECvXE.js';
 
 const dragHandleCss = () => `@charset "UTF-8";limel-drag-handle{display:inline-flex;align-items:center;justify-content:center}button.limel-drag-handle{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit}button.limel-drag-handle:focus{outline:none}button.limel-drag-handle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.limel-drag-handle{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}button.limel-drag-handle:hover,button.limel-drag-handle:focus,button.limel-drag-handle:focus-visible{will-change:color, background-color, box-shadow, transform}button.limel-drag-handle:hover,button.limel-drag-handle:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-primary);background-color:transparent}button.limel-drag-handle:hover{box-shadow:var(--button-shadow-hovered)}button.limel-drag-handle:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.limel-drag-handle:hover,button.limel-drag-handle:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.limel-drag-handle{touch-action:none;cursor:grab}button.limel-drag-handle:active{cursor:grabbing}button.limel-drag-handle:active,button.limel-drag-handle:hover{box-shadow:none !important}button.limel-drag-handle{display:inline-flex;align-items:center;justify-content:center;border-radius:0.4rem;padding:0.5rem;max-height:2.25rem;max-width:2.25rem;color:rgb(var(--contrast-900))}button.limel-drag-handle .drag-icon{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.2rem}limel-drag-handle[drag-direction=horizontal] button.limel-drag-handle .drag-icon{grid-template-columns:1fr 1fr}button.limel-drag-handle .drag-icon div{transition:transform 0.2s ease, background-color 0.2s ease;height:0.125rem;width:0.125rem;border-radius:1rem;background-color:currentColor;transform:scale(1)}.is-being-dragged button.limel-drag-handle .drag-icon div,button.limel-drag-handle:active .drag-icon div,button.limel-drag-handle:focus .drag-icon div,button.limel-drag-handle:hover .drag-icon div,button.limel-drag-handle:focus-visible .drag-icon div{background-color:var(--mdc-theme-primary);transform:scale(1.5)}`;

package/dist/esm/limel-email-viewer.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bnc9lzk2.js';
-import { t as translate } from './translations-Bwm2y2E4.js';
+import { t as translate } from './translations-DMtX4tTX.js';
 import { f as formatBytes } from './format-bytes-u_sd2HMb.js';
 import { a as adaptColorContrast } from './adapt-color-contrast-Dgcw_h7C.js';
 import { g as getIconBackgroundColorForFile, a as getIconFillColorForFile, b as getIconForFile } from './icons-Bu_YRgCL.js';

package/dist/esm/limel-file-viewer.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-Bnc9lzk2.js';
-import { t as translate } from './translations-Bwm2y2E4.js';
+import { t as translate } from './translations-DMtX4tTX.js';
 import { d as defaultSchema, u as unified, r as rehypeParse, a as rehypeSanitize, v as visit, b as rehypeStringify } from './index-CbciMfiU.js';
 import { I as ImageTemplate } from './image.template-wqMwmOF-.js';
 import './language-C3hECvXE.js';

package/dist/esm/limel-file.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bnc9lzk2.js';
-import { t as translate } from './translations-Bwm2y2E4.js';
+import { t as translate } from './translations-DMtX4tTX.js';
 import { g as getFileBackgroundColor, a as getFileColor, b as getFileExtensionTitle, c as getFileIcon } from './file-metadata-BHzkIH4g.js';
 import { f as formatBytes } from './format-bytes-u_sd2HMb.js';
 import { r as resizeImage } from './image-resize-BTSG--2-.js';

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-Bnc9lzk2.js';
-import { t as translate } from './translations-Bwm2y2E4.js';
+import { t as translate } from './translations-DMtX4tTX.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-B85MJLTf.js';
 import './sv-CY-6-yEp.js';
 import { m as moment } from './moment-DQRNe8qq.js';

package/dist/esm/limel-helper-line_3.entry.js

@@ -0,0 +1,450 @@
+import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-Bnc9lzk2.js';
+import { a as MDCList, s as strings } from './component-B2Vy44Z3.js';
+import './ponyfill-ChRGk668.js';
+
+const helperLineCss = () => `:host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:grid;min-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;line-height:normal;color:rgb(var(--contrast-1200))}div{display:flex;justify-content:space-between;gap:0.75rem;overflow:hidden;padding:0 1rem}:host(limel-helper-line.invalid){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-helper-line.invalid) .helper-text{color:var(--limel-theme-error-color)}.counter{flex-shrink:0;margin-left:auto}.helper-text,.counter{padding-top:0.125rem}:host(limel-helper-line){transition:grid-template-rows var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);grid-template-rows:var(--limel-h-l-grid-template-rows, 1fr)}:host(limel-helper-line.hide){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}`;
+
+const HelperLine = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Turns `true`, when the parent component is invalid.
+         * For example, when the parent component is `required` but is left empty.
+         * Or when the input format is invalid.
+         */
+        this.invalid = false;
+        this.hasContent = () => {
+            return !!(this.maxLength > 0 ||
+                (this.helperText && this.helperText.length > 0));
+        };
+        this.renderHelperText = () => {
+            if (!this.helperText) {
+                return;
+            }
+            return (h("span", { class: "helper-text", id: this.helperTextId }, this.helperText));
+        };
+        this.renderCharacterCounter = () => {
+            const counter = `${this.length} / ${this.maxLength}`;
+            if (!this.maxLength) {
+                return;
+            }
+            return h("span", { class: "counter" }, counter);
+        };
+    }
+    render() {
+        return (h(Host, { key: '5ecd83d58e8412274b36def796d0a9c24b67e582', tabIndex: -1, class: {
+                invalid: this.invalid,
+            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: 'f10706f6e5f7be45da53a58a13b44a936eb091b4' }, this.renderHelperText(), this.renderCharacterCounter())));
+    }
+};
+HelperLine.style = helperLineCss();
+
+class ListRenderer {
+    constructor() {
+        this.defaultConfig = {
+            isOpen: true,
+            badgeIcons: false,
+        };
+        /**
+         * `aria-orientation` is valid for `listbox` and `radiogroup`,
+         * but not for group (used for checkboxes).
+         * @param role
+         */
+        this.getAriaOrientation = (role) => {
+            if (role === 'listbox' || role === 'radiogroup') {
+                return 'vertical';
+            }
+            else {
+                return null;
+            }
+        };
+        /**
+         * 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 items - the items of the list, including any `ListSeparator`:s
+         * @returns 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]) ;
+                else {
+                    const item = items[i];
+                    if (item.disabled) {
+                        // Skip disabled items - they should never get tabindex
+                        continue;
+                    }
+                    if (item.selected) {
+                        result = i;
+                        break;
+                    }
+                    if (result === undefined) {
+                        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 item - the item to render
+         * @param index - the index the item had in the `items` array
+         * @returns the list item
+         */
+        this.renderListItem = (item, index) => {
+            var _a;
+            if ('separator' in item) {
+                return (h("li", { class: "mdc-deprecated-list-divider", role: "separator", key: `sep-${index}` }, this.renderTextForSeparator(item), h("div", { class: "limel-list-divider-line" })));
+            }
+            const attributes = {};
+            if (index === this.applyTabIndexToItemAtIndex) {
+                attributes.tabindex = '0';
+            }
+            let itemType;
+            if (this.config.type === 'radio' || this.config.type === 'checkbox') {
+                itemType = this.config.type;
+            }
+            else if (this.config.type === 'selectable') {
+                itemType = 'option';
+            }
+            else {
+                itemType = 'listitem';
+            }
+            const key = (_a = item.id) !== null && _a !== void 0 ? _a : `item-${index}`;
+            const classNames = {
+                'mdc-deprecated-list-item': true, // required for keyboard navigation with arrow keys
+                'mdc-deprecated-list-item--disabled': !!item.disabled, // MDC’s foundation checks for the disabled class before toggling selected state
+            };
+            return (h("limel-list-item", Object.assign({ key: key, class: classNames }, attributes, { "data-index": index, type: itemType, text: item.text, secondaryText: item.secondaryText, icon: item.icon, image: item.image, primaryComponent: item.primaryComponent, badgeIcon: this.config.badgeIcons, iconSize: this.config.iconSize, selected: item.selected, disabled: item.disabled, actions: item.actions })));
+        };
+        this.renderTextForSeparator = (item) => {
+            if ('text' in item) {
+                return h("h2", { class: "limel-list-divider-title" }, item.text);
+            }
+        };
+    }
+    render(items, config = {}) {
+        items = items || [];
+        this.config = Object.assign(Object.assign({}, this.defaultConfig), config);
+        let role;
+        switch (this.config.type) {
+            case 'checkbox': {
+                role = 'group';
+                break;
+            }
+            case 'radio': {
+                role = 'radiogroup';
+                break;
+            }
+            default: {
+                role = 'listbox';
+            }
+        }
+        this.applyTabIndexToItemAtIndex =
+            this.getIndexForWhichToApplyTabIndex(items);
+        return (h("ul", { class: "mdc-deprecated-list", role: role, "aria-orientation": this.getAriaOrientation(role) }, items.map(this.renderListItem)));
+    }
+}
+
+const listCss = () => `@charset "UTF-8";:host(.has-striped-rows) .mdc-deprecated-list{border:1px solid rgb(var(--contrast-400))}:host(.has-striped-rows) limel-list-item:not([disabled]):not([disabled=true]):not(:hover):nth-child(even),:host(.has-striped-rows.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):not(:hover):nth-child(even){background-color:var(--list-background-color-of-odd-interactive-items, rgb(var(--contrast-200)))}:host(.has-striped-rows) limel-list-item:not([disabled]):not([disabled=true]):not(:hover):nth-child(odd),:host(.has-striped-rows.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):not(:hover):nth-child(odd){background-color:var(--list-background-color-of-even-interactive-items, rgb(var(--contrast-100)))}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):hover,:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):focus,:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):focus-visible{will-change:color, background-color, box-shadow, transform}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):hover,:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):hover{box-shadow:var(--button-shadow-hovered)}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):hover,:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(.has-grid-layout){--gap:var(--list-grid-gap, 0.5rem);padding:var(--gap);}:host(.has-grid-layout) .mdc-deprecated-list{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit, minmax(min(100%, max(var(--list-grid-item-max-width, 10rem) - var(--gap), var(--list-grid-item-min-width, 7.5rem))), 1fr));max-width:var(--list-grid-max-width, 100%)}:host(.has-grid-layout) .mdc-deprecated-list limel-list-item{border-radius:var(--limel-list-border-radius) !important}:host(.has-grid-layout) .mdc-deprecated-list-divider{grid-column:1/-1}:host(.static-actions-list){z-index:1;background-color:var(--limel-theme-surface-background-color)}:host(.has-position-sticky){position:sticky;box-shadow:0 0 0.75rem 0.5rem var(--limel-theme-surface-background-color)}:host(.has-position-sticky.is-on-top){top:0}:host(.has-position-sticky.is-at-bottom){bottom:0}:host(.is-on-top){border-bottom:1px solid rgb(var(--contrast-400));margin-bottom:0.5rem;padding-bottom:0.25rem}:host(.is-at-bottom){border-top:1px solid rgb(var(--contrast-400));margin-top:0.5rem;padding-top:0.25rem}:host(limel-list){--limel-list-border-radius:0.5rem;display:block;isolation:isolate}:host([hidden]){display:none}ul{--mdc-theme-text-icon-on-background:var(       --icon-color,       rgb(var(--contrast-900))   );margin:var(--list-margin, 0.25rem);border-radius:var(--limel-list-border-radius);padding:0;list-style:none}.mdc-deprecated-list-divider{border-bottom-color:transparent;display:flex;align-items:center;gap:0.75rem;height:auto;padding:0 0.25rem;margin-bottom:0.5rem}.mdc-deprecated-list-divider:not(:first-child){margin-top:0.75rem}:host(.has-striped-rows) .mdc-deprecated-list-divider{margin-top:0.5rem}.limel-list-divider-line{background-color:rgb(var(--contrast-400));height:0.125rem;border-radius:1rem;min-width:1rem;flex-grow:1}.limel-list-divider-title{all:unset;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:rgb(var(--contrast-900));font-size:var(--limel-theme-default-small-font-size)}`;
+
+const { ACTION_EVENT } = strings;
+const List = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change", 7);
+        this.select = createEvent(this, "select", 7);
+        this.interact = createEvent(this, "interact", 7);
+        /**
+         * Size of the icons in the list
+         */
+        this.iconSize = 'small';
+        /**
+         * By default, lists will display 3 lines of text, and then truncate the rest.
+         * Consumers can increase or decrease this number by specifying
+         * `maxLinesSecondaryText`. If consumer enters zero or negative
+         * numbers we default to 1; and if they type decimals we round up.
+         */
+        this.maxLinesSecondaryText = 3;
+        this.listRenderer = new ListRenderer();
+        this.setup = () => {
+            this.setupList();
+            this.setupListeners();
+        };
+        this.setupList = () => {
+            if (this.mdcList) {
+                this.teardown();
+                this.mdcList = null;
+            }
+            const element = this.element.shadowRoot.querySelector('.mdc-deprecated-list');
+            if (!element) {
+                return;
+            }
+            this.listElement = element;
+            this.listElement.removeEventListener('mousedown', this.handleItemMouseDown);
+            this.listElement.addEventListener('mousedown', this.handleItemMouseDown);
+            this.mdcList = new MDCList(element);
+            // NOTE: This has no effect. It is kept as a marker rather than
+            // removed, so that its absence isn't mistaken for an oversight.
+            //
+            // MDC indexes each row for typeahead by looking for
+            // `.mdc-deprecated-list-item__primary-text` inside it, while
+            // `limel-list-item` renders its label as `<span class="label">`. MDC
+            // therefore builds an empty index, and typing does nothing.
+            //
+            // Do not "fix" this by adding MDC's class name to `limel-list-item`.
+            // That revives MDC's typeahead along with three behaviors that cannot
+            // be configured from the outside: a hard coded 300ms buffer, `Enter`
+            // being ignored for as long as that buffer lives (its `notifyAction`
+            // is guarded by `isTypeaheadInProgress`), and the space bar being
+            // excluded from matches. It would also collide with `limel-menu`,
+            // where single characters are used as item hotkeys.
+            //
+            // `limel-select` implements its own typeahead instead, see
+            // `src/util/typeahead.ts`. It intercepts typed characters in the
+            // capture phase on this very element, so they never reach MDC.
+            this.mdcList.hasTypeahead = true;
+        };
+        /**
+         * Focus the pressed list item directly, without scrolling.
+         *
+         * Since the list uses `delegatesFocus`, pressing a non-focusable part of
+         * a list item (e.g. its text) would otherwise delegate focus to the first
+         * focusable row, scrolling it into view. In a scrolled list that moves the
+         * pressed row out from under the pointer before the click completes, so the
+         * click lands on empty space and no item gets selected.
+         *
+         * Bound to `mousedown` only (not `pointerdown`) so a touch-drag to scroll
+         * that starts on a row is not blocked by `preventDefault`.
+         *
+         * @param event - the mousedown event
+         */
+        this.handleItemMouseDown = (event) => {
+            var _a;
+            const target = event.target;
+            const itemElement = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '.mdc-deprecated-list-item');
+            if (!itemElement) {
+                return;
+            }
+            // Suppress the default focus delegation (and its scroll) for any row,
+            // but only move focus to interactive (non-disabled) rows.
+            event.preventDefault();
+            if (!itemElement.classList.contains('mdc-deprecated-list-item--disabled')) {
+                itemElement.focus({ preventScroll: true });
+            }
+        };
+        this.setupListeners = () => {
+            if (!this.mdcList) {
+                return;
+            }
+            this.mdcList.unlisten(ACTION_EVENT, this.handleAction);
+            this.selectable = ['selectable', 'radio', 'checkbox'].includes(this.type);
+            this.multiple = this.type === 'checkbox';
+            if (!this.selectable) {
+                return;
+            }
+            this.mdcList.listen(ACTION_EVENT, this.handleAction);
+            this.mdcList.singleSelection = !this.multiple;
+        };
+        this.teardown = () => {
+            var _a, _b, _c;
+            (_a = this.listElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', this.handleItemMouseDown);
+            (_b = this.mdcList) === null || _b === void 0 ? void 0 : _b.unlisten(ACTION_EVENT, this.handleAction);
+            (_c = this.mdcList) === null || _c === void 0 ? void 0 : _c.destroy();
+        };
+        this.handleAction = (event) => {
+            if (!this.multiple) {
+                this.handleSingleSelect(event.detail.index);
+                return;
+            }
+            this.handleMultiSelect(event.detail.index);
+        };
+        this.handleSingleSelect = (index) => {
+            const listItems = this.items.filter(this.isListItem);
+            if (listItems[index].disabled) {
+                return;
+            }
+            const selectedItem = listItems.find((item) => {
+                return !!item.selected;
+            });
+            let interactedItem;
+            if (selectedItem) {
+                if (this.type !== 'radio') {
+                    this.mdcList.selectedIndex = -1;
+                }
+                interactedItem = Object.assign(Object.assign({}, selectedItem), { selected: false });
+                this.change.emit(interactedItem);
+            }
+            if (listItems[index] !== selectedItem) {
+                interactedItem = Object.assign(Object.assign({}, listItems[index]), { selected: true });
+                this.change.emit(interactedItem);
+            }
+            this.interact.emit(interactedItem);
+        };
+        this.handleMultiSelect = (index) => {
+            const listItems = this.items.filter(this.isListItem);
+            if (listItems[index].disabled) {
+                return;
+            }
+            const selectedItems = listItems
+                .filter((item, listIndex) => {
+                if (listIndex === index) {
+                    // This is the item that was selected or deselected,
+                    // so we negate its previous selection status.
+                    return !item.selected;
+                }
+                // This is an item that didn't change, so we keep its selection status.
+                return item.selected;
+            })
+                .map((item) => {
+                return Object.assign(Object.assign({}, item), { selected: true });
+            });
+            this.change.emit(selectedItems);
+            this.interact.emit(Object.assign({}, selectedItems[index]));
+        };
+        this.isListItem = (item) => {
+            return !('separator' in item);
+        };
+    }
+    connectedCallback() {
+        this.setup();
+    }
+    disconnectedCallback() {
+        this.teardown();
+    }
+    componentDidLoad() {
+        this.setup();
+        this.triggerIconColorWarning();
+    }
+    render() {
+        var _a;
+        this.config = {
+            badgeIcons: this.badgeIcons,
+            type: this.type,
+            iconSize: this.iconSize,
+        };
+        let maxLinesSecondaryText = +((_a = this.maxLinesSecondaryText) === null || _a === void 0 ? void 0 : _a.toFixed());
+        if (this.maxLinesSecondaryText < 1) {
+            maxLinesSecondaryText = 1;
+        }
+        const html = this.listRenderer.render(this.items, this.config);
+        return (h(Host, { key: 'f15badb0936caf891cd8bd272ef5d3224645c3c7', style: {
+                '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
+            } }, html));
+    }
+    handleType() {
+        this.setupListeners();
+    }
+    itemsChanged() {
+        if (!this.mdcList) {
+            return;
+        }
+        setTimeout(() => {
+            this.setup();
+            const listItems = this.items.filter(this.isListItem);
+            if (this.multiple) {
+                this.mdcList.selectedIndex = listItems
+                    .filter((item) => item.selected)
+                    .map((item) => listItems.indexOf(item));
+            }
+            else {
+                const selectedIndex = listItems.findIndex((item) => item.selected);
+                if (selectedIndex === -1) {
+                    this.mdcList.initializeListType();
+                }
+                else {
+                    this.mdcList.selectedIndex = selectedIndex;
+                }
+            }
+        }, 0);
+    }
+    triggerIconColorWarning() {
+        var _a;
+        if ((_a = this.items) === null || _a === void 0 ? void 0 : _a.some((item) => 'iconColor' in item)) {
+            console.warn("The `iconColor` prop is deprecated, has no visual effect anymore, and will soon be removed! Use the new `Icon` interface, and instead of `iconColor: 'color-name'` write `icon: { name: 'icon-name', color: 'color-name' }`.");
+        }
+    }
+    static get delegatesFocus() { return true; }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "type": [{
+                "handleType": 0
+            }],
+        "items": [{
+                "itemsChanged": 0
+            }]
+    }; }
+};
+List.style = listCss();
+
+const notchedOutlineCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}limel-notched-outline{--limel-notched-outline-border-color:rgba(var(--contrast-700), 0.65);--limel-notched-outline-background-color:rgba(var(--contrast-200), 0.5);display:block;width:100%;height:fit-content}.limel-notched-outline{position:relative;width:100%;height:100%}.limel-notched-outline [slot=content]{background-color:var(--limel-notched-outline-background-color);border-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--outlines{pointer-events:none;position:absolute;inset:0;z-index:var(--limel-notched-outline-z-index, 0);display:flex}.limel-notched-outline--leading-outline,.limel-notched-outline--notch,.limel-notched-outline--trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-notched-outline-border-color)}.limel-notched-outline--leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:var(--limel-notched-outline-border-radius, 0.25rem);border-bottom-left-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--notch{flex-shrink:0;position:relative;z-index:2;border-top-color:var(--limel-notched-outline-notch-border-top-color, var(--limel-notched-outline-border-color));border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.limel-notched-outline--notch label{all:unset;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;transition:color 0.2s ease, font-size 0.2s ease, transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);transform:translate3d(var(--limel-notched-outline-label-transform-x, 0), var(--limel-notched-outline-label-transform-y, 0.62rem), 0);display:block;padding:0 0.25rem;color:var(--limel-notched-outline-label-color, rgba(var(--contrast-1200), 1));font-size:var(--limel-notched-outline-label-font-size, var(--limel-theme-default-font-size));letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);line-height:normal}.limel-notched-outline--notch label:after{position:absolute;right:0;padding:0 0.25rem}.limel-notched-outline--trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:var(--limel-notched-outline-border-radius, 0.25rem);border-bottom-right-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--empty-readonly-value .lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:var(--limel-theme-default-font-size);font-weight:400;font-family:inherit;letter-spacing:0.009375em}.mdc-text-field--disabled .limel-notched-outline--empty-readonly-value .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.limel-notched-outline--empty-readonly-value{position:absolute;top:0.62rem;left:1rem}limel-notched-outline:not([disabled]:not([disabled=false])):hover{--limel-notched-outline-border-color:rgba(var(--contrast-700), 1);--limel-notched-outline-background-color:rgba(var(--contrast-200), 1)}limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-visible),limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-within){--limel-notched-outline-border-color:var(--lime-primary-color, var(--limel-theme-primary-color));--limel-notched-outline-background-color:rgba(var(--contrast-100), 0.8)}limel-notched-outline[disabled]:not([disabled=false]){--limel-notched-outline-label-color:rgba(var(--contrast-1200), 0.5)}limel-notched-outline[required]:not([required=false]) .limel-notched-outline--notch label{padding-right:0.75rem}limel-notched-outline[required]:not([required=false]) .limel-notched-outline--notch label:after{content:"*";scale:1.3}limel-notched-outline[invalid]:not([invalid=false]):not([disabled]:not([disabled=false])){--limel-notched-outline-border-color:var(       --limel-theme-error-text-color   )}limel-notched-outline[invalid]:not([invalid=false]):not([disabled]:not([disabled=false])):hover{--limel-notched-outline-border-color:var(       --limel-theme-error-color   )}limel-notched-outline[invalid]:not([invalid=false]) .limel-notched-outline--notch label:after{color:var(--limel-theme-error-text-color)}limel-notched-outline[readonly]:not([readonly=false]){--limel-notched-outline-border-color:transparent !important;--limel-notched-outline-background-color:transparent !important}limel-notched-outline[readonly]:not([readonly=false]) .limel-notched-outline--notch label{transition-duration:0s}limel-notched-outline[has-leading-icon]:not([has-leading-icon=false]):not([has-floating-label]):not([has-value]){--limel-notched-outline-label-transform-x:1.25rem}limel-notched-outline[has-leading-icon] .limel-notched-outline--empty-readonly-value{left:2.25rem}limel-notched-outline:not([disabled]:not([disabled=false])):hover label,limel-notched-outline:not([disabled]:not([disabled=false])):focus label,limel-notched-outline:not([disabled]:not([disabled=false])):focus-within label{will-change:color, transform, font-size}limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-visible),limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-within){--limel-notched-outline-label-font-size:0.65rem;--limel-notched-outline-label-transform-x:0;--limel-notched-outline-label-transform-y:calc(-50% - 0.09375rem);--limel-notched-outline-notch-border-top-color:transparent}limel-notched-outline[has-floating-label],limel-notched-outline[has-value]:not([has-value=false]),limel-notched-outline[readonly]:not([has-value]:not([has-value=true])){--limel-notched-outline-label-font-size:0.65rem;--limel-notched-outline-label-transform-x:0;--limel-notched-outline-label-transform-y:calc(-50% - 0.09375rem);--limel-notched-outline-notch-border-top-color:transparent}`;
+
+const NotchedOutline = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Set to `true` when the input element is required.
+         * This applies proper visual styles, such as inclusion of an asterisk
+         * beside the label.
+         */
+        this.required = false;
+        /**
+         * Set to `true` when the input element is readonly.
+         * This applies proper visual styles, such as making the outline transparent.
+         */
+        this.readonly = false;
+        /**
+         * Set to `true` to indicate that the current value of the input element is
+         * invalid. This applies proper visual styles, such as making the outlines red.
+         */
+        this.invalid = false;
+        /**
+         * Set to `true` to indicate that the input element is
+         * disabled. This applies proper visual styles, such as making the outlines
+         * and the label transparent.
+         */
+        this.disabled = false;
+        /**
+         * Set to `true` when the user has entered a value for the input element,
+         * shrinking the label in size, and visually rendering it above the entered value.
+         */
+        this.hasValue = false;
+        /**
+         * Set to `true` when the consumer element displays a leading icon.
+         * This applies proper visual styles, such as rendering the label
+         * correctly placed beside the leading icon.
+         */
+        this.hasLeadingIcon = false;
+        /**
+         * Set to `true` when the consumer element needs to render the
+         * label above the input element, despite existence of a `value`.
+         * For example in the `text-editor` or `limel-select`,
+         * where the default layout requires a floating label.
+         */
+        this.hasFloatingLabel = false;
+    }
+    render() {
+        return (h("div", { key: '928b12e7565dd3a827b29e57dfb94cbd668feb91', class: "limel-notched-outline" }, h("slot", { key: 'ae0a6205b1e8aeed3edea040a198ba7faebecc85', name: "content" }), h("span", { key: '84b1fd4feb65005eea9280717dd2cb6d74fc513c', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '4ae9c02d23197109c5ea0721a4f1abfab802822e', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: 'd7b70aa632b22b7b639bf208ea57fd39a82884e3', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+    }
+    renderLabel() {
+        if (!this.label) {
+            return;
+        }
+        return (h("span", { class: "limel-notched-outline--notch" }, h("label", { htmlFor: this.labelId }, this.label)));
+    }
+    renderEmptyReadonlyValue() {
+        if (!this.readonly || this.hasValue) {
+            return;
+        }
+        return (h("span", { class: "limel-notched-outline--empty-readonly-value", "aria-hidden": "true" }, "\u2013"));
+    }
+};
+NotchedOutline.style = notchedOutlineCss();
+
+export { HelperLine as limel_helper_line, List as limel_list, NotchedOutline as limel_notched_outline };

package/dist/esm/limel-hotkey_4.entry.js

@@ -1955,6 +1955,7 @@ const Portal = class {
         this.anchor = null;
         this.loaded = false;
         this.writtenStyles = {};
+        this.scheduledRestyle = null;
         this.parents = new WeakMap();
     }
     disconnectedCallback() {
@@ -1989,7 +1990,7 @@ const Portal = class {
         }
     }
     render() {
-        return h("slot", { key: '32f6da268363dd30db38fb8189ee2d6414890959' });
+        return h("slot", { key: 'ce5bfa7d65680773e1917e0a6d54256f5852bd65' });
     }
     onVisible() {
         if (!this.container && this.visible) {
@@ -2115,6 +2116,7 @@ const Portal = class {
     destroyPopper() {
         var _a, _b;
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.cancelScheduledRestyle();
         (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.destroy();
         this.popperInstance = null;
     }
@@ -2124,14 +2126,33 @@ const Portal = class {
             return;
         }
         (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new ResizeObserver(() => {
-            if (this.popperInstance) {
-                this.styleContainer();
-                this.popperInstance.update();
-            }
+            this.scheduleRestyle();
         }));
         this.observer.observe(this.container);
         this.observer.observe(this.anchorElement);
     }
+    // Restyling can resize the container this observer watches, so writing from
+    // inside the callback re-enters it as a `ResizeObserver loop`.
+    scheduleRestyle() {
+        if (this.scheduledRestyle !== null) {
+            return;
+        }
+        this.scheduledRestyle = requestAnimationFrame(() => {
+            this.scheduledRestyle = null;
+            if (!this.popperInstance) {
+                return;
+            }
+            this.styleContainer();
+            this.popperInstance.update();
+        });
+    }
+    cancelScheduledRestyle() {
+        if (this.scheduledRestyle === null) {
+            return;
+        }
+        cancelAnimationFrame(this.scheduledRestyle);
+        this.scheduledRestyle = null;
+    }
     createPopperConfig() {
         const placement = this.getPlacement(this.openDirection);
         const flipPlacement = this.getFlipPlacement(this.openDirection);