@limetech/lime-elements 40.6.0 → 40.6.2

package/dist/esm/limel-radio-button-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Bnc9lzk2.js';
+import { r as registerInstance, c as createEvent, h } from './index-BU9IJqli.js';
 
 const RadioButtonGroup = class {
     constructor(hostRef) {
@@ -24,7 +24,7 @@ const RadioButtonGroup = class {
         };
     }
     render() {
-        return (h("limel-list", { key: '467b17f3d721555c52d871ab3f7b6a36cd70d6a6', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
+        return (h("limel-list", { key: '1c3fef764fd84f4e84d38a4dbd04f2272fb73775', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
     }
     createItems() {
         return this.items.map((option) => {

package/dist/esm/limel-radio-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-Bnc9lzk2.js';
+import { r as registerInstance, h, H as Host } from './index-BU9IJqli.js';
 
 const radioButtonCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;overflow-wrap:var(--limel-boolean-input-label-overflow-wrap, normal);font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.box{}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{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);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}.radio-button{--limel-boolean-input-box-border-radius:var(       --limel-boolean-input-box-size   )}.radio-button .box:after{width:100%;height:100%;border-radius:50%}.boolean-input:has(input[type=radio]:checked) .box:after{opacity:1;transform:scale(0.6);box-shadow:var(--shadow-depth-8)}`;
 
@@ -7,12 +7,12 @@ const RadioButtonComponent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '01f0b56a991bc0a54e4ba09e7dd4a394d87d800a', class: {
+        return (h(Host, { key: '93e5adb101fd866a1c56e0233b32eddef6617a08', class: {
                 'boolean-input': true,
                 'radio-button': true,
                 checked: this.checked,
                 disabled: this.disabled,
-            } }, h("input", { key: '89371d4f79105022dc13ed8d50b9bf2004f4059a', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: '7e7e210a4c703f69bfca2a3c8a5487be4221f0b4', class: "box" }), h("label", { key: 'b00bd3ac42a5b8e3691d9b5e698b59752ab795f1', class: "boolean-input-label", htmlFor: this.id }, this.label)));
+            } }, h("input", { key: '816bc49ab2f8bd6fcbaa8d10c7b5250fd64aa044', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: 'e4656777d40210f46c5f28deace470a90f41cfdf', class: "box" }), h("label", { key: 'c27a557fea46c0951a0aed27df40a61b30809550', class: "boolean-input-label", htmlFor: this.id }, this.label)));
     }
 };
 RadioButtonComponent.style = radioButtonCss();

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

@@ -0,0 +1,178 @@
+import { r as registerInstance, h, H as Host } from './index-BU9IJqli.js';
+
+const scrollerCss = () => `@charset "UTF-8";:host(limel-scroller){display:block}div.scroller{position:relative;overflow:hidden;height:100%}div.scroll-area{display:flex;height:100%;scrollbar-width:none}div.scroll-area::-webkit-scrollbar{display:none}div.scroll-content{display:flex;flex:1 0 auto;position:relative;isolation:isolate;padding:var(--limel-scroller-content-padding, 0)}::slotted(*){flex-shrink:0}div.scroll-fade,div.scroll-button{position:absolute;transition:transform 0.3s ease-out}div.scroll-fade{pointer-events:none}div.scroll-button{display:flex;align-items:center;justify-content:center}div.scroll-button div.arrow-button{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;color:var(--limel-theme-on-surface-color)}div.scroll-button svg.arrow{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}div.scroller.horizontal div.scroll-area{overflow-x:auto;overflow-y:hidden}div.scroller.horizontal ::slotted(*){scroll-margin-inline:2.25rem}div.scroller.horizontal div.scroll-fade{top:0;width:4rem;height:100%}div.scroller.horizontal div.scroll-fade.start{left:0;transform:translate3d(-4rem, 0, 0);background:linear-gradient(270deg, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0) 0%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 40%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 100%)}div.scroller.horizontal div.scroll-fade.end{right:0;transform:translate3d(4rem, 0, 0);background:linear-gradient(90deg, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0) 0%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 40%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 100%)}div.scroller.horizontal div.scroll-button{top:0;bottom:0}div.scroller.horizontal div.scroll-button.start{left:0.25rem;transform:translate3d(-4rem, 0, 0)}div.scroller.horizontal div.scroll-button.start svg.arrow{transform:rotate(180deg)}div.scroller.horizontal div.scroll-button.end{right:0.25rem;transform:translate3d(4rem, 0, 0)}div.scroller.horizontal div.scroll-button div.arrow-button{width:1.25rem;height:calc(100% - 0.5rem)}div.scroller.vertical div.scroll-area{flex-direction:column;overflow-x:hidden;overflow-y:auto}div.scroller.vertical div.scroll-content{flex-direction:column}div.scroller.vertical ::slotted(*){scroll-margin-block:2.25rem}div.scroller.vertical div.scroll-fade{left:0;width:100%;height:4rem}div.scroller.vertical div.scroll-fade.start{top:0;transform:translate3d(0, -4rem, 0);background:linear-gradient(0deg, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0) 0%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 40%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 100%)}div.scroller.vertical div.scroll-fade.end{bottom:0;transform:translate3d(0, 4rem, 0);background:linear-gradient(180deg, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0) 0%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 40%, rgba(var(--limel-scroller-fade-color, var(--contrast-100)), 0.8) 100%)}div.scroller.vertical div.scroll-button{left:0;right:0}div.scroller.vertical div.scroll-button.start{top:0.25rem;transform:translate3d(0, -4rem, 0)}div.scroller.vertical div.scroll-button.start svg.arrow{transform:rotate(-90deg)}div.scroller.vertical div.scroll-button.end{bottom:0.25rem;transform:translate3d(0, 4rem, 0)}div.scroller.vertical div.scroll-button.end svg.arrow{transform:rotate(90deg)}div.scroller.vertical div.scroll-button div.arrow-button{height:1.25rem;width:calc(100% - 0.5rem)}div.scroller.can-scroll-to-start div.scroll-fade.start,div.scroller.can-scroll-to-start div.scroll-button.start{transform:translate3d(0, 0, 0)}div.scroller.can-scroll-to-end div.scroll-fade.end,div.scroller.can-scroll-to-end div.scroll-button.end{transform:translate3d(0, 0, 0)}div.scroller.can-scroll-to-start:not(.can-scroll-to-end) div.scroll-button.end,div.scroller.can-scroll-to-end:not(.can-scroll-to-start) div.scroll-button.start{opacity:0.5;transition-delay:0.5s}div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button,div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button{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:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:hover,div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:focus,div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:focus-visible,div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:hover,div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:focus,div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:focus-visible{will-change:color, background-color, box-shadow, transform}div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:hover,div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:focus-visible,div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:hover,div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:active,div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button: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)}div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:hover,div.scroller.can-scroll-to-start div.scroll-button.start div.arrow-button:active,div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:hover,div.scroller.can-scroll-to-end div.scroll-button.end div.arrow-button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}div.scroller div.scroll-button.start:hover,div.scroller div.scroll-button.end:hover{transform:translate3d(0, 0, 0)}`;
+
+const MIN_PAGE_SHARE = 0.5;
+const HIDE_BUTTON_WHEN_CLOSER_TO_EDGE_THAN_PX = 40;
+const PAGE_OVERLAP = 0.2;
+// A click on an arrow is no reason to take the focus from the item that has it.
+const keepFocusWhereItIs = (event) => event.preventDefault();
+// Points towards the end of the horizontal axis. The styles turn it around.
+const Arrow = () => (h("svg", { class: "arrow", viewBox: "0 0 48 48", "aria-hidden": "true", focusable: "false" }, h("path", { d: "M18 4l20 20-20 20" })));
+const Scroller = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The axis along which the content scrolls.
+         */
+        this.orientation = 'horizontal';
+        this.canScrollToStart = false;
+        this.canScrollToEnd = false;
+        this.fades = {};
+        this.handleResize = () => {
+            const pending = this.pendingReveal;
+            if (pending) {
+                this.revealItem(pending.item, pending.behavior);
+            }
+            this.updateScrollability();
+        };
+        this.updateScrollability = () => {
+            const area = this.scrollArea;
+            if (!area) {
+                return;
+            }
+            const vertical = this.orientation === 'vertical';
+            const scrolled = vertical ? area.scrollTop : area.scrollLeft;
+            const overflow = vertical
+                ? area.scrollHeight - area.clientHeight
+                : area.scrollWidth - area.clientWidth;
+            this.canScrollToStart =
+                scrolled > HIDE_BUTTON_WHEN_CLOSER_TO_EDGE_THAN_PX;
+            this.canScrollToEnd =
+                Math.floor(overflow - scrolled) >
+                    HIDE_BUTTON_WHEN_CLOSER_TO_EDGE_THAN_PX;
+        };
+        this.revealFocusedItem = (event) => {
+            const item = this.findItem(event.target);
+            if (!item) {
+                return;
+            }
+            // The browser scrolls a focused element into view too. Wait for it
+            // to be done, so that the position it leaves is what we adjust.
+            requestAnimationFrame(() => this.revealItem(item));
+        };
+    }
+    connectedCallback() {
+        this.observeSize();
+    }
+    componentDidLoad() {
+        this.observeSize();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (h(Host, { key: 'e84ebfb819a65ec4b655155c88fae8d3163f81e5' }, h("div", { key: '5de2d4b4ea1f5f423d69195fb66e2a9e83bd5b3f', class: {
+                scroller: true,
+                [this.orientation]: true,
+                'can-scroll-to-start': this.canScrollToStart,
+                'can-scroll-to-end': this.canScrollToEnd,
+            } }, h("div", { key: 'e6b6d2832c6d8eecd18f5b653ee39d1f107d212a', class: "scroll-area", ref: (element) => (this.scrollArea = element), onScroll: this.updateScrollability, onFocusin: this.revealFocusedItem }, h("div", { key: '696a605e2478ea31b256631df195cb3e0e64d07a', class: "scroll-content", ref: (element) => (this.scrollContent = element) }, h("slot", { key: 'c32bfe0c61b93c794e2837563ea081ffccf33440', ref: (element) => (this.slotElement = element) }))), this.renderEdge('start'), this.renderEdge('end'))));
+    }
+    renderEdge(edge) {
+        return [
+            h("div", { key: `fade-${edge}`, class: `scroll-fade ${edge}`, ref: (element) => (this.fades[edge] = element) }),
+            h("div", { key: `button-${edge}`, class: `scroll-button ${edge}`, "aria-hidden": "true" }, h("div", { class: "arrow-button", onMouseDown: keepFocusWhereItIs, onClick: () => this.scrollOnePage(edge) }, h(Arrow, null))),
+        ];
+    }
+    observeSize() {
+        var _a;
+        if (!this.scrollArea || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        (_a = this.resizeObserver) !== null && _a !== void 0 ? _a : (this.resizeObserver = new ResizeObserver(this.handleResize));
+        this.resizeObserver.observe(this.scrollArea);
+        this.resizeObserver.observe(this.scrollContent);
+    }
+    scrollOnePage(edge) {
+        const area = this.scrollArea;
+        const fade = this.fades[edge];
+        const vertical = this.orientation === 'vertical';
+        const [size, fadeSize] = vertical
+            ? [area.clientHeight, fade.offsetHeight]
+            : [area.clientWidth, fade.offsetWidth];
+        // What is under the arrow, and faded, on one edge must land clear of
+        // the fade and the arrow on the other edge.
+        const overlap = Math.max(size * PAGE_OVERLAP, fadeSize);
+        const distance = Math.max(size - overlap, size * MIN_PAGE_SHARE);
+        const delta = edge === 'start' ? -distance : distance;
+        const behavior = getScrollBehavior();
+        area.scrollBy(vertical ? { top: delta, behavior } : { left: delta, behavior });
+    }
+    // What has focus, or is asked to be revealed, can be deeper inside an item.
+    // The item is what gets revealed, since it is what carries the
+    // `scroll-margin`.
+    findItem(element) {
+        let node = element;
+        while (node && node.assignedSlot !== this.slotElement) {
+            node = node.parentElement;
+        }
+        return node;
+    }
+    /**
+     * Scrolls an item into view, together with a glimpse of its neighbors.
+     * Whatever receives focus is revealed without being asked to. This is for
+     * an item that becomes selected without receiving focus. If the scroller
+     * is hidden, in a dialog that is closed for instance, the item is revealed
+     * when the scroller is shown.
+     *
+     * @param item - one of the items of the scroller, or something inside one
+     * @param behavior - `auto` jumps to the item, and `smooth` glides there.
+     * Defaults to `smooth`, unless the user has asked to reduce motion.
+     */
+    async reveal(item, behavior = getScrollBehavior()) {
+        var _a;
+        this.revealItem((_a = this.findItem(item)) !== null && _a !== void 0 ? _a : item, behavior);
+    }
+    revealItem(item, behavior = getScrollBehavior()) {
+        const area = this.scrollArea;
+        this.pendingReveal = undefined;
+        if (!area || !item.isConnected) {
+            return;
+        }
+        // There is nothing to measure while the scroller is hidden.
+        if (area.getClientRects().length === 0) {
+            this.pendingReveal = { item, behavior };
+            return;
+        }
+        const vertical = this.orientation === 'vertical';
+        const [before, after] = vertical
+            ? ['top', 'bottom']
+            : ['left', 'right'];
+        const size = vertical ? 'height' : 'width';
+        const areaBox = area.getBoundingClientRect();
+        const itemBox = item.getBoundingClientRect();
+        const style = getComputedStyle(item);
+        // The boxes are measured on the screen, where a scroller that is
+        // scaled, as it is in a dialog that is opening, is larger or smaller
+        // than the distance it takes to scroll.
+        const scale = areaBox[size] / Number.parseFloat(getComputedStyle(area)[size]) ||
+            1;
+        const margin = (side) => Number.parseFloat(style.getPropertyValue(`scroll-margin-${side}`)) *
+            scale;
+        const hiddenBefore = areaBox[before] - (itemBox[before] - margin(before));
+        const hiddenAfter = itemBox[after] + margin(after) - areaBox[after];
+        let distance = 0;
+        if (hiddenBefore > 0) {
+            distance = -hiddenBefore;
+        }
+        else if (hiddenAfter > 0) {
+            distance = hiddenAfter;
+        }
+        if (distance === 0) {
+            return;
+        }
+        area.scrollBy(vertical
+            ? { top: distance / scale, behavior }
+            : { left: distance / scale, behavior });
+    }
+};
+function getScrollBehavior() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches
+        ? 'auto'
+        : 'smooth';
+}
+Scroller.style = scrollerCss();
+
+export { Scroller as limel_scroller };

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

@@ -1,12 +1,12 @@
-import { h, r as registerInstance, c as createEvent, a as getElement } from './index-Bnc9lzk2.js';
+import { h, r as registerInstance, c as createEvent, a as getElement } from './index-BU9IJqli.js';
 import { b as isMobileDevice } from './device-B-tmXAXV.js';
-import { S as SPACEBAR, a as ENTER } from './keycodes-C4_9qUMP.js';
+import { S as SPACEBAR, a as ENTER } from './keycodes-DQ5DmW_Y.js';
 import { i as isMultiple } from './multiple-BylwpiM6.js';
-import { c as createRandomString } from './random-string-JbKhhoXs.js';
-import { r as renderListComponent } from './render-list-component-cicbMp0l.js';
+import { c as createRandomString } from './random-string-BrjD-ITe.js';
+import { r as renderListComponent } from './render-list-component-J1IzNpbv.js';
 import { b as getIconColor, g as getIconName } from './get-icon-props-CgNJbSP4.js';
-import { M as MDCFloatingLabel } from './component-D4qgwaTf.js';
-import { _ as __extends, a as __assign, M as MDCFoundation, c as MDCComponent } from './ponyfill-ChRGk668.js';
+import { M as MDCFloatingLabel } from './component-CyFeUQ0l.js';
+import { _ as __extends, a as __assign, M as MDCFoundation, c as MDCComponent } from './ponyfill-6YuZiAPi.js';
 import './isArray-B8VKuhvH.js';
 
 /**
@@ -455,9 +455,7 @@ const floatLabelAbove = (props) => {
         if (isMultiple(value)) {
             return value.length > 0;
         }
-        else {
-            return value.text !== '';
-        }
+        return value.text !== '';
     }
     return false;
 };
@@ -714,14 +712,15 @@ const Select = class {
             }
             const isEnter = event.key === ENTER;
             const isSpace = event.key === SPACEBAR;
-            if (!this.menuOpen && (isSpace || isEnter)) {
-                event.stopPropagation();
-                event.preventDefault();
-                // `preventDefault` cancels the activation click that the trigger
-                // `button` would otherwise synthesize, so the menu has to be
-                // opened here rather than through the click handler.
-                this.openMenu();
+            if (this.menuOpen || !(isSpace || isEnter)) {
+                return;
             }
+            event.stopPropagation();
+            event.preventDefault();
+            // `preventDefault` cancels the activation click that the trigger
+            // `button` would otherwise synthesize, so the menu has to be
+            // opened here rather than through the click handler.
+            this.openMenu();
         };
         this.setListElement = (element) => {
             var _a, _b;
@@ -861,10 +860,11 @@ const Select = class {
             clearTimeout(this.focusTimeoutId);
             this.focusTimeoutId = undefined;
         }
-        if (this.focusObserver) {
-            this.focusObserver.disconnect();
-            this.focusObserver = undefined;
+        if (!this.focusObserver) {
+            return;
         }
+        this.focusObserver.disconnect();
+        this.focusObserver = undefined;
     }
     focusFirstMenuItem(list) {
         var _a;
@@ -933,7 +933,7 @@ const Select = class {
             requestAnimationFrame(() => {
                 setTimeout(() => {
                     menuSurface.scrollTop = scrollPosition;
-                });
+                }, 0);
             });
             return;
         }

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-Bnc9lzk2.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BU9IJqli.js';
 import { g as getRel } from './link-helper-5KsJICvh.js';
 import { g as getMouseEventHandlers } from './3d-tilt-hover-effect-CllX3RLB.js';
 

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

@@ -1,50 +1,41 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bnc9lzk2.js';
-import { c as createRandomString } from './random-string-JbKhhoXs.js';
-import { t as translate } from './translations-DMtX4tTX.js';
-import './language-C3hECvXE.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BU9IJqli.js';
+import { c as createRandomString } from './random-string-BrjD-ITe.js';
+import { t as translations } from './translations-Y4i8PVc9.js';
+import './language-ChagAaNf.js';
 
 /**
  *
  * @param value
  */
 function getPercentageClass(value) {
-    const tenPercent = 0.1;
-    const twentyPercent = 0.2;
-    const thirtyPercent = 0.3;
-    const fortyPercent = 0.4;
-    const fiftyPercent = 0.5;
-    const sixtyPercent = 0.6;
-    const seventyPercent = 0.7;
-    const eightyPercent = 0.8;
-    const ninetyPercent = 0.9;
     if (value === 0) {
         return 'percent-0';
     }
-    if (value < tenPercent) {
+    if (value < 0.1) {
         return 'percent-0-10';
     }
-    if (value < twentyPercent) {
+    if (value < 0.2) {
         return 'percent-10-20';
     }
-    if (value < thirtyPercent) {
+    if (value < 0.3) {
         return 'percent-20-30';
     }
-    if (value < fortyPercent) {
+    if (value < 0.4) {
         return 'percent-30-40';
     }
-    if (value < fiftyPercent) {
+    if (value < 0.5) {
         return 'percent-40-50';
     }
-    if (value < sixtyPercent) {
+    if (value < 0.6) {
         return 'percent-50-60';
     }
-    if (value < seventyPercent) {
+    if (value < 0.7) {
         return 'percent-60-70';
     }
-    if (value < eightyPercent) {
+    if (value < 0.8) {
         return 'percent-70-80';
     }
-    if (value < ninetyPercent) {
+    if (value < 0.9) {
         return 'percent-80-90';
     }
     return 'percent-90-100';
@@ -187,10 +178,10 @@ const Slider = class {
                 return;
             }
             const label = this.label
-                ? translate.get('clear-value-of', this.language, {
+                ? translations.get('clear-value-of', this.language, {
                     label: this.label,
                 })
-                : translate.get('clear-value', this.language);
+                : translations.get('clear-value', this.language);
             return (h("button", { type: "button", id: this.clearButtonId, class: "clear-button", "aria-label": label, onClick: this.handleClear, disabled: this.isUnset || this.disabled }, h("svg", { viewBox: "0 0 32 32", "aria-hidden": "true", focusable: "false" }, h("path", { d: "M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z" })), h("limel-tooltip", { elementId: this.clearButtonId, label: label })));
         };
         this.handleInput = (event) => {
@@ -317,12 +308,12 @@ const Slider = class {
         return (h(Host, { key: '47fedc34458f09ec0a67a6fc81efcd0d5aaba74e', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '89c319c35f59d8dbd72a40e894fb01a8b12dc88d', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, h("div", { key: 'f4c7c2475650c2c3be4b33271fc1f23aa8d40ee5', slot: "content" }, h("div", { key: 'c3c085ead113928e85bc9ab3cbadd7e8350b4a12', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: 'c1e255d94086cc3c77cec32d34a52fc06ffe77b4', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
                 ? this.helperTextId
                 : undefined, "aria-valuetext": this.isUnset
-                ? translate.get('value-not-set', this.language)
+                ? translations.get('value-not-set', this.language)
                 : undefined, ref: (el) => {
                 this.inputElement = el;
             }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: 'c287ade5d57268fbf3d0a203f4f94363709dcb74', class: "track" }, h("div", { key: 'd65e20a0bd2da417a797be2501f70860cae04857', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '72e6bf77fddaf64fcde86455bfddd1122a8f174c', class: "thumb" }, h("div", { key: '2066f97938cff1b20ffa0aad2e3c4803a5a2f6f9', class: "knob" }), h("div", { key: 'abd8845bf4d52faeffd1a4f25ca2068a8062bc09', class: "indicator", "aria-hidden": "true" }, this.isUnset
-            ? '\u2194\uFE0E'
-            : this.displayValue))), h("div", { key: '7107d522eb4732ca8e4ae6d901a3981853f9e97b', class: "range-labels" }, h("span", { key: 'babaa35149ef70070141f5f4e49be8fc55e367a4', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '92caa840cc1ac72681f7ee3b18754a912d1d0829', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
+            ? '\u{2194}\u{FE0E}'
+            : this.displayValue))), h("div", { key: '231a0836f6487fd99fb2aa60d075ad8d21a4ce10', class: "range-labels" }, h("span", { key: '966e8f9241124e9c61da1558ccb04ccb1cf0c402', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '427e6ff5bd7d894da16a6b9b006fd0e1a44f9348', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
     }
     watchValue() {
         this.syncStateFromValue();

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Bnc9lzk2.js';
-import { t as translate } from './translations-DMtX4tTX.js';
-import { c as createRandomString } from './random-string-JbKhhoXs.js';
-import './language-C3hECvXE.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BU9IJqli.js';
+import { t as translations } from './translations-Y4i8PVc9.js';
+import { c as createRandomString } from './random-string-BrjD-ITe.js';
+import './language-ChagAaNf.js';
 
 /**
  * Container to keep track of all snackbar elements that gets added to the page.
@@ -180,7 +180,7 @@ const Snackbar = class {
         if (!dismissible) {
             return;
         }
-        const label = translate.get('snackbar.dismiss', this.language);
+        const label = translations.get('snackbar.dismiss', this.language);
         return (h("div", { class: "dismiss" }, this.renderTimeoutVisualization(), h("limel-icon-button", { class: "dismiss-button", icon: "multiply", label: label, onClick: this.handleClose, "aria-controls": this.snackbarId })));
     }
     renderTimeoutVisualization() {

package/dist/esm/limel-split-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bnc9lzk2.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BU9IJqli.js';
 
 const splitButtonCss = () => `@charset "UTF-8";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:"";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--lime-primary-color, var(--limel-theme-primary-color))}limel-menu:not([disabled]).primary{color:var(--lime-on-primary-color, var(--limel-theme-on-primary-color))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}button.menu-trigger{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}button.menu-trigger:not(:disabled){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:"inherit";background-color:transparent}button.menu-trigger:not(:disabled):hover,button.menu-trigger:not(:disabled):focus,button.menu-trigger:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}button.menu-trigger:not(:disabled):hover,button.menu-trigger:not(:disabled):focus-visible{transform:translate3d(0, 0.01rem, 0);color:"inherit";background-color:var(--lime-elevated-surface-background-color)}button.menu-trigger:not(:disabled):hover{box-shadow:var(--button-shadow-hovered)}button.menu-trigger:not(:disabled):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.menu-trigger:not(:disabled):hover,button.menu-trigger:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.menu-trigger:not(:disabled):focus{outline:none}button.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.menu-trigger:not(:disabled){cursor:pointer}button.menu-trigger:not(:disabled):focus-visible,button.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}button.menu-trigger[aria-expanded]:not([aria-expanded=false]){box-shadow:var(--button-shadow-inset-pressed)}button.menu-trigger:before{content:"";position:absolute;inset:-0.25rem;z-index:-1}`;
 

package/dist/esm/limel-switch.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 createRandomString } from './random-string-JbKhhoXs.js';
-import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-BgTwPGeH.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BU9IJqli.js';
+import { c as createRandomString } from './random-string-BrjD-ITe.js';
+import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-CIf8aGSd.js';
 
 const switchCss = () => `@charset "UTF-8";:host(limel-switch){min-height:1.75rem;display:flex;flex-direction:column;align-items:flex-start}.switch{display:grid;grid-template-columns:auto 1fr;gap:0.5rem;align-items:center;width:100%;min-height:1.75rem}button{border:none;outline:none;cursor:pointer;transition:background-color calc(0.2s + 0.2s) ease;flex-shrink:0;display:inline-flex;align-items:center;padding:0;width:2.25rem;height:1.25rem;border-radius:1.25rem;background-color:rgb(var(--contrast-700))}:host([disabled]) button{opacity:0.4;cursor:not-allowed}button[aria-checked=true]{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.handle{position:relative;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;transition:transform 0.2s cubic-bezier(0.46, 0.52, 0.27, 1.55), box-shadow 0.2s ease, background-color 0.2s ease;transform:translateX(0)}button[aria-checked=true] .handle{transform:translateX(1rem)}button:focus-visible .handle{background-color:rgb(var(--color-white), 0.6);box-shadow:var(--shadow-depth-8-focused), var(--shadow-brighten-edges-inside)}.handle:after{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);content:"";position:absolute;inset:0.125rem;border-radius:50%;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal), var(--button-shadow-normal)}button:hover:not(:disabled) .handle:after{box-shadow:var(--button-shadow-normal), var(--button-shadow-hovered)}svg{width:0.625rem;height:0.625rem;fill:var(--lime-elevated-surface-background-color)}label{font-size:var(--limel-theme-default-font-size);cursor:pointer;width:fit-content;overflow-wrap:var(--switch-label-overflow-wrap, normal);max-width:100%;min-width:0}:host([disabled]) label{cursor:not-allowed;opacity:0.4}:host(limel-switch:focus),:host(limel-switch:focus-visible),:host(limel-switch:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-switch){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-switch:focus) limel-helper-line,:host(limel-switch:focus-visible) limel-helper-line,:host(limel-switch:focus-within) limel-helper-line,:host(limel-switch:hover) limel-helper-line{will-change:grid-template-rows}`;