@limetech/lime-elements 40.8.1 → 40.10.0

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

@@ -7,12 +7,12 @@ const RadioButtonComponent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '93e5adb101fd866a1c56e0233b32eddef6617a08', class: {
+        return (h(Host, { key: '7cdb4d6a667a0afe8ed668cc32b4a38c39817d75', class: {
                 'boolean-input': true,
                 'radio-button': true,
                 checked: this.checked,
                 disabled: this.disabled,
-            } }, 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)));
+            } }, h("input", { key: 'f51cfa414dd1e2f50ea211a690a55dc7525d5501', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: 'a6ec3d879e3410c9973a1b8c66469a852e4e4995', class: "box" }), h("label", { key: '978984158d1c8344da8bcc6a4e3d7aa8003f75b2', class: "boolean-input-label", htmlFor: this.id }, this.label)));
     }
 };
 RadioButtonComponent.style = radioButtonCss();

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

@@ -0,0 +1,238 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BU9IJqli.js';
+import { A as ARROW_UP, b as ARROW_DOWN, c as ARROW_LEFT, d as ARROW_RIGHT } from './keycodes-Bu6-QXrA.js';
+
+const KEYBOARD_SIZE_STEP = 8;
+const resizeLocations = {
+    left: {
+        axis: 'x',
+        cursor: 'col-resize',
+        direction: -1,
+        growKey: ARROW_LEFT,
+        shrinkKey: ARROW_RIGHT,
+    },
+    right: {
+        axis: 'x',
+        cursor: 'col-resize',
+        direction: 1,
+        growKey: ARROW_RIGHT,
+        shrinkKey: ARROW_LEFT,
+    },
+    top: {
+        axis: 'y',
+        cursor: 'row-resize',
+        direction: -1,
+        growKey: ARROW_UP,
+        shrinkKey: ARROW_DOWN,
+    },
+    bottom: {
+        axis: 'y',
+        cursor: 'row-resize',
+        direction: 1,
+        growKey: ARROW_DOWN,
+        shrinkKey: ARROW_UP,
+    },
+};
+/**
+ * Returns the orientation of a separator that is a handle at the given
+ * location.
+ *
+ * @param location - the location of the handle
+ * @returns the orientation
+ */
+function getOrientation(location) {
+    return resizeLocations[location].axis === 'x' ? 'vertical' : 'horizontal';
+}
+/**
+ * Returns how many pixels the size of the element changes when the key is
+ * pressed while the handle has focus.
+ *
+ * @param location - the location of the handle
+ * @param key - the `key` of the keyboard event
+ * @returns the change in pixels, or `undefined` when the key does not resize
+ */
+function getKeyboardSizeChange(location, key) {
+    const { growKey, shrinkKey } = resizeLocations[location];
+    if (key === growKey) {
+        return KEYBOARD_SIZE_STEP;
+    }
+    if (key === shrinkKey) {
+        return -KEYBOARD_SIZE_STEP;
+    }
+}
+/**
+ * Returns the size of the element along the axis that a handle at the given
+ * location resizes: the width for `left` and `right`, the height for `top` and
+ * `bottom`.
+ *
+ * `offsetWidth` and `offsetHeight` are used and not `getBoundingClientRect`,
+ * because an ancestor can be scaled with a transform.
+ *
+ * @param element - the element that the handle resizes
+ * @param location - the location of the handle
+ * @returns the size in pixels
+ */
+function measureSize(element, location) {
+    return resizeLocations[location].axis === 'x'
+        ? element.offsetWidth
+        : element.offsetHeight;
+}
+
+// Several handles can be dragged at the same time, for example with two
+// fingers. The styles from before the first drag come back when the last drag
+// ends.
+const dragStyles = {
+    activeDrags: 0,
+};
+/**
+ * The handle has captured the pointer, but the browser draws the cursor of the
+ * element under the pointer, which after the first pixel is the page, not the
+ * handle. Without these styles the cursor changes when the drag leaves the
+ * handle, and the drag selects the text that the pointer moves across.
+ *
+ * @param cursor - the cursor to show during the drag
+ */
+function applyDragStylesToBody(cursor) {
+    if (dragStyles.activeDrags === 0) {
+        dragStyles.before = getBodyStyles();
+    }
+    dragStyles.activeDrags += 1;
+    setBodyStyles({ cursor: cursor, userSelect: 'none' });
+}
+function restoreBodyStyles() {
+    dragStyles.activeDrags -= 1;
+    if (dragStyles.activeDrags === 0) {
+        setBodyStyles(dragStyles.before);
+    }
+}
+function getBodyStyles() {
+    return {
+        cursor: document.body.style.cursor,
+        userSelect: document.body.style.userSelect,
+    };
+}
+function setBodyStyles(styles) {
+    document.body.style.cursor = styles.cursor;
+    document.body.style.userSelect = styles.userSelect;
+}
+/**
+ * Makes an element resizable with a drag handle on one of its edges.
+ *
+ * @param handle - the drag handle
+ * @param listener - gives the location and the size, and is told about the
+ * resize
+ * @returns a function that removes the event listeners
+ */
+function dragToResize(handle, listener) {
+    let activePointerId;
+    let traits = resizeLocations.left;
+    let startedAt;
+    let startedSize;
+    let hasResized = false;
+    const pointerPosition = (event) => {
+        return traits.axis === 'x' ? event.clientX : event.clientY;
+    };
+    const start = (event) => {
+        if (activePointerId !== undefined) {
+            return;
+        }
+        event.preventDefault();
+        activePointerId = event.pointerId;
+        hasResized = false;
+        traits = resizeLocations[listener.getLocation()];
+        startedAt = pointerPosition(event);
+        startedSize = listener.getSize();
+        handle.setPointerCapture(event.pointerId);
+        applyDragStylesToBody(traits.cursor);
+    };
+    const drag = (event) => {
+        if (event.pointerId !== activePointerId) {
+            return;
+        }
+        hasResized = true;
+        listener.resize(startedSize +
+            traits.direction * (pointerPosition(event) - startedAt));
+    };
+    const end = (event) => {
+        if (event.pointerId !== activePointerId) {
+            return;
+        }
+        stop();
+        if (hasResized) {
+            listener.end();
+        }
+    };
+    // Cleanup also calls this, also between drags. The body styles can then
+    // belong to a different drag, so they are only reset for an active drag.
+    const stop = () => {
+        if (activePointerId === undefined) {
+            return;
+        }
+        activePointerId = undefined;
+        restoreBodyStyles();
+    };
+    handle.addEventListener('pointerdown', start);
+    handle.addEventListener('pointermove', drag);
+    handle.addEventListener('pointerup', end);
+    handle.addEventListener('pointercancel', end);
+    handle.addEventListener('lostpointercapture', end);
+    return () => {
+        stop();
+        handle.removeEventListener('pointerdown', start);
+        handle.removeEventListener('pointermove', drag);
+        handle.removeEventListener('pointerup', end);
+        handle.removeEventListener('pointercancel', end);
+        handle.removeEventListener('lostpointercapture', end);
+    };
+}
+
+const resizeHandleCss = () => `@charset "UTF-8";:host(limel-resize-handle){position:absolute;z-index:1;touch-action:none;display:flex;align-items:center;justify-content:center;border-radius:100vh}:host::before,:host::after{pointer-events:none;content:"";display:block;position:absolute;inset:0;border-radius:100vh;margin:auto}:host::before{transition:scale 0.3s ease, opacity 0.3s ease;transition-delay:0.2s;opacity:0}:host::after{transition:background-color 0.4s ease;transition-delay:0.2s;background-color:rgb(var(--contrast-600))}:host([location=top]),:host([location=bottom]){cursor:row-resize;height:var(--limel-resize-handle-thickness, 0.5rem) !important;right:0;left:0}:host([location=top])::before,:host([location=bottom])::before{scale:1 0.9;height:0.5rem;width:var(--limel-resize-handle-visual-length, auto)}:host([location=top])::after,:host([location=bottom])::after{height:0.125rem;width:var(--limel-resize-handle-visual-length, auto)}:host([location=top]){top:0}:host([location=top])::before{top:0;bottom:auto}:host([location=top])::after{top:calc((0.5rem - 0.125rem) / 2);bottom:auto}:host([location=bottom]){bottom:0}:host([location=bottom])::before{top:auto;bottom:0}:host([location=bottom])::after{top:auto;bottom:calc((0.5rem - 0.125rem) / 2)}:host([location=left]),:host([location=right]){cursor:col-resize;width:0.5rem;top:0;bottom:0}:host([location=left])::before,:host([location=right])::before{scale:0.9 1}:host([location=left])::after,:host([location=right])::after{width:0.125rem}:host([location=left]){left:0}:host([location=right]){right:0}:host(:focus-visible){outline:none}:host(:hover)::before,:host(:focus-visible)::before{transition-duration:0.46s;transition-timing-function:ease-in;opacity:1;scale:1 1;background-color:rgb(var(--color-sky-light), 0.4)}:host(:hover)::after,:host(:focus-visible)::after{transition-duration:0.2s;transition-timing-function:ease-in;background-color:rgb(var(--color-sky-default))}div{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);pointer-events:none;position:relative;z-index:1;display:flex;gap:0.25rem;align-items:center;justify-content:center;width:fit-content;padding:0.1875rem 0.25rem;border-radius:100vh;margin:auto;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-pressed)}div span{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);border-radius:0.125rem;width:0.25rem;height:0.125rem;background-color:rgb(var(--contrast-700))}:host([location=top]) div{margin-top:0;margin-bottom:auto}:host([location=bottom]) div{margin-top:auto;margin-bottom:0}:host([aria-orientation=vertical]) div{rotate:90deg}:host(:hover),:host(:focus-visible){--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(:hover) div,:host(:focus-visible) div{will-change:background-color, box-shadow, transform;transform:translate3d(0, -0.04rem, 0);box-shadow:var(--button-shadow-normal)}:host(:hover) span,:host(:focus-visible) span{will-change:background-color;background-color:var(--mdc-theme-primary)}`;
+
+const ResizeHandle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.changeSize = createEvent(this, "changeSize", 1);
+        this.endResize = createEvent(this, "endResize", 1);
+        /**
+         * The location of the handle relative to the resizable element.
+         */
+        this.location = 'left';
+        this.handleKeyDown = (event) => {
+            const change = getKeyboardSizeChange(this.location, event.key);
+            if (change === undefined) {
+                return;
+            }
+            event.preventDefault();
+            this.changeSize.emit(this.elementSize() + change);
+            this.endResize.emit();
+        };
+        this.elementSize = () => {
+            return measureSize(this.resizableElement(), this.location);
+        };
+    }
+    connectedCallback() {
+        this.stopResizing = dragToResize(this.host, {
+            getLocation: () => this.location,
+            getSize: this.elementSize,
+            resize: (size) => this.changeSize.emit(size),
+            end: () => this.endResize.emit(),
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.stopResizing) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.stopResizing = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'b4f84fff38ded8d6493be55685fbe1c8d27affdb', role: "separator", "aria-orientation": getOrientation(this.location), "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, tabindex: "0", onKeyDown: this.handleKeyDown }, h("div", { key: '02b4abbc61b0dd571ceda1d69de057605523e29a', role: "presentation" }, h("span", { key: 'ea5083fca722c11df72f4b0f647f087732a28033' }), h("span", { key: '81a176e0594f20572dbc94aea0e5dc7709a21d96' }), h("span", { key: '4c39fcd49f2ad087f16a032dfa085d3a8630c41e' }))));
+    }
+    resizableElement() {
+        if (this.host.parentElement) {
+            return this.host.parentElement;
+        }
+        return this.host.getRootNode().host;
+    }
+    get host() { return getElement(this); }
+};
+ResizeHandle.style = resizeHandleCss();
+
+export { ResizeHandle as limel_resize_handle };

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

@@ -63,12 +63,12 @@ const Scroller = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'e84ebfb819a65ec4b655155c88fae8d3163f81e5' }, h("div", { key: '5de2d4b4ea1f5f423d69195fb66e2a9e83bd5b3f', class: {
+        return (h(Host, { key: 'c208de7a73b1d3d040a0a76b2bdc7bad3d5ab739' }, h("div", { key: '5e69255f710a5f5f439553fa1f9b183e9dc5a9bd', 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'))));
+            } }, h("div", { key: 'fc1b91baa65f317ae7bad667cba13813400ac546', class: "scroll-area", ref: (element) => (this.scrollArea = element), onScroll: this.updateScrollability, onFocusin: this.revealFocusedItem }, h("div", { key: '43c02c4acba2ba647aaf6a7516a0326ffc0f16b1', class: "scroll-content", ref: (element) => (this.scrollContent = element) }, h("slot", { key: '3d2e82f50748410b5370741c8e8b1f44117adc35', ref: (element) => (this.slotElement = element) }))), this.renderEdge('start'), this.renderEdge('end'))));
     }
     renderEdge(edge) {
         return [

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

@@ -1,6 +1,6 @@
 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-DQ5DmW_Y.js';
+import { S as SPACEBAR, a as ENTER } from './keycodes-Bu6-QXrA.js';
 import { i as isMultiple } from './multiple-BylwpiM6.js';
 import { c as createRandomString } from './random-string-BrjD-ITe.js';
 import { r as renderListComponent } from './render-list-component-J1IzNpbv.js';
@@ -798,7 +798,7 @@ const Select = class {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: '0def26ad84ac6317b6f5fa0c18bd4b66f320dff1', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerKeyDown: this.handleMenuTriggerKeyDown, listRef: this.setListElement, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: 'dd610ca15d4efd4ebc6bc52dae88625dcbca241f', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerKeyDown: this.handleMenuTriggerKeyDown, listRef: this.setListElement, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
     }
     watchOpen(newValue, oldValue) {
         if (this.checkValid) {

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

@@ -51,7 +51,7 @@ const Shortcut = class {
     render() {
         var _a, _b, _c, _d, _e;
         const rel = getRel((_a = this.link) === null || _a === void 0 ? void 0 : _a.target, (_b = this.link) === null || _b === void 0 ? void 0 : _b.rel);
-        return (h(Host, { key: '69f27974df1fd3fea7b9822714c0a3d59b6a7fab', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: '9f8c7b9dc8e2f27007cb46687cb7bf10314e2a8a', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, h("limel-icon", { key: '3c10a0091ad0e1549b2765ad429ed2966220246e', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '17011ca6b7d73130b73b85fd30d54921bd07ec54' })), this.renderLabel(), this.renderNotification()));
+        return (h(Host, { key: 'a5b5f21fa6c27511357c3fdf498384ad7b8c3f6e', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: '74496e167864c94b9169fe2d5ed1aea82c4e2d20', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, h("limel-icon", { key: '7ba30c4e1f4aae41ad2626228f238979bcce1405', name: this.icon }), h("limel-3d-hover-effect-glow", { key: 'f6dd1cedf07c7bce7eba7d8b8eb44f948ab4ce25' })), this.renderLabel(), this.renderNotification()));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/limel-side-panel.entry.js

@@ -0,0 +1,281 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BU9IJqli.js';
+import { E as ESCAPE } from './keycodes-Bu6-QXrA.js';
+import { c as createRandomString } from './random-string-BrjD-ITe.js';
+
+/**
+ * Returns the element that has focus, also when it is inside shadow roots.
+ * `document.activeElement` returns the host of the outermost shadow root that
+ * contains the focused element.
+ *
+ * @returns the element that has focus, or `null` when no element has focus
+ */
+function getDeepActiveElement() {
+    var _a;
+    let element = document.activeElement;
+    while ((_a = element === null || element === void 0 ? void 0 : element.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+        element = element.shadowRoot.activeElement;
+    }
+    return element;
+}
+
+const sidePanelCss = () => `@charset "UTF-8";:host(limel-side-panel){--_side-panel-width:var(--side-panel-width, 37.5rem);--_side-panel-min-width:var(--side-panel-min-width, 25rem);--_side-panel-top-inset:var(--side-panel-top-inset, 0px);--_side-panel-right-inset:var(--side-panel-right-inset, 0px);--_side-panel-bottom-inset:var(--side-panel-bottom-inset, 0px);--_side-panel-z-index:var(--side-panel-z-index, 6)}@keyframes show-side-panel{0%{transform:translate3d(12.5rem, 0, 0) scale(0.95);opacity:0}60%{opacity:1}100%{transform:translate3d(0, 0, 0) scale(1)}}section{position:absolute;z-index:var(--_side-panel-z-index);top:var(--_side-panel-top-inset);right:var(--_side-panel-right-inset);bottom:var(--_side-panel-bottom-inset);margin:0.5rem;display:flex;flex-direction:column;isolation:isolate;width:var(--_side-panel-width);min-width:min(var(--_side-panel-min-width), 100% - 1rem);max-width:min(100% - 1rem - 3rem, 60%);max-height:100%;border-radius:1rem;box-shadow:var(--shadow-depth-64);transform-origin:left center;transition:background-color 0.5s ease, transform 0.3s ease, opacity 0.2s ease, right 0.2s ease;animation:show-side-panel 0.46s cubic-bezier(0.08, 0.54, 0.06, 1.11) forwards}section:focus{outline:none}@media (prefers-reduced-motion){section{animation:none;transition:none}}.content{display:flex;flex-direction:column;flex-grow:1;min-height:0;overflow:hidden;border-radius:1rem;background-color:rgb(var(--contrast-100))}.toolbar{flex-shrink:0;display:flex;align-items:center;gap:0.25rem;box-sizing:border-box;min-height:2.375rem;padding:0.25rem 0.125rem;background-color:rgb(var(--contrast-300))}.close{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;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}.close:hover,.close:focus,.close:focus-visible{will-change:color, background-color, box-shadow, transform}.close:hover,.close:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.close:hover{box-shadow:var(--button-shadow-hovered)}.close: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)}.close:hover,.close:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.close:focus{outline:none}.close:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.close{isolation:isolate;position:relative;display:flex;justify-content:center;align-items:center;width:1.875rem;height:1.875rem;border-radius:50%}.close limel-icon{width:1.25rem;transition:transform 0.2s ease, color 0.2s ease}.close:before,.close:after{content:"";position:absolute;z-index:-1;inset:0;border-radius:50%;opacity:0;transition-delay:0.1s}.close:before{transition:transform 0.3s ease, opacity 0.3s ease;background-color:rgb(var(--color-orange-dark))}.close:after{transition:transform 0.6s ease, opacity 0.6s ease;background-color:rgb(var(--color-orange-light))}.close:hover limel-icon{color:rgb(var(--color-white));transform:scale(0.7) rotate(90deg)}.close:hover:before{opacity:1;transform:scale(0.4)}.close:hover:after{opacity:0.4;transform:scale(0.6)}.body{flex-grow:1;min-height:0;display:flex;flex-direction:column;overflow:hidden auto}.handle{position:absolute;z-index:1;top:calc(2.375rem + 0.5rem);bottom:1rem;left:calc(0.5rem / -2);width:0.5rem}[data-limit]{position:absolute;visibility:hidden;pointer-events:none;height:0}[data-limit=min]{width:min(var(--_side-panel-min-width), 100% - 1rem)}[data-limit=max]{width:min(100% - 1rem - 3rem, 60%)}`;
+
+/**
+ * Open panels, in the order they were connected. Only the last one handles
+ * Escape.
+ */
+const openPanels = [];
+function stopEvent(event) {
+    event.stopPropagation();
+}
+const SidePanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close", 7);
+        this.changeWidth = createEvent(this, "changeWidth", 7);
+        /**
+         * Label of the close button. Shown as a tooltip and used as the accessible
+         * name.
+         */
+        this.closeLabel = 'Close';
+        /**
+         * Label of the resize handle. Used as the accessible name.
+         */
+        this.resizeLabel = 'Resize';
+        /**
+         * Whether pressing Escape emits `close`. Set to `false` to let only the
+         * close button emit `close`. The panel then does not prevent the Escape
+         * event either.
+         */
+        this.closeOnEscape = true;
+        this.closeButtonId = createRandomString();
+        this.setBody = (element) => {
+            this.body = element;
+            this.stopContentEventsInBody();
+        };
+        // Moving the panel in the DOM also disconnects it. It is then connected
+        // again before the microtask runs. Focus only returns when it was lost with
+        // the panel, and not when the user has moved it to another element.
+        this.restoreFocus = () => {
+            const hasLostFocus = !document.activeElement || document.activeElement === document.body;
+            if (this.host.isConnected || !hasLostFocus) {
+                return;
+            }
+            const element = this.focusedBefore;
+            this.focusedBefore = undefined;
+            if (element === null || element === void 0 ? void 0 : element.isConnected) {
+                element.focus();
+            }
+        };
+        this.setPanel = (element) => {
+            this.panel = element;
+        };
+        this.setMinLimit = (element) => {
+            this.minLimit = element;
+        };
+        this.setMaxLimit = (element) => {
+            this.maxLimit = element;
+        };
+        this.handleKeyDown = (event) => {
+            if (!this.closeOnEscape ||
+                event.key !== ESCAPE ||
+                event.defaultPrevented ||
+                !this.isLastOpened()) {
+                return;
+            }
+            event.preventDefault();
+            this.close.emit();
+        };
+        this.handleChangeSize = (event) => {
+            this.rememberWidthBeforeResize();
+            this.setWidth(event.detail);
+        };
+        this.handleEndResize = () => {
+            if (!this.isResizing()) {
+                return;
+            }
+            const widthBefore = this.widthBeforeResize;
+            this.widthBeforeResize = undefined;
+            this.keepClampedWidth();
+            this.updateWidthRange();
+            this.emitWidthIfChanged(widthBefore);
+        };
+        // The height of the panel, and a width that `updateWidthRange` has already
+        // measured, for example after an arrow key press, need no new measurement.
+        this.handleSizeChange = (entries) => {
+            if (entries.every(this.isMeasured)) {
+                return;
+            }
+            this.updateWidthRange();
+        };
+        this.isMeasured = (entry) => {
+            var _a;
+            return (entry.target === this.panel &&
+                Math.round(entry.borderBoxSize[0].inlineSize) ===
+                    ((_a = this.widthRange) === null || _a === void 0 ? void 0 : _a.now));
+        };
+        // Reading the current width forces a layout of the content, which is slow
+        // when the content is large. The range does not change during a resize, so it
+        // is measured when the resize ends.
+        this.updateWidthRange = () => {
+            if (this.isResizing()) {
+                return;
+            }
+            this.widthRange = this.measureWidthRange();
+        };
+        this.handleClickClose = () => {
+            this.close.emit();
+        };
+    }
+    connectedCallback() {
+        openPanels.push(this);
+        window.addEventListener('keydown', this.handleKeyDown);
+        this.rememberFocusedElement();
+        this.observeWidth();
+    }
+    componentDidLoad() {
+        this.observeWidth();
+        this.moveFocusIntoPanel();
+    }
+    disconnectedCallback() {
+        this.widthBeforeResize = undefined;
+        this.stopObservingWidth();
+        window.removeEventListener('keydown', this.handleKeyDown);
+        this.removeFromOpenPanels();
+        queueMicrotask(this.restoreFocus);
+    }
+    render() {
+        return (h(Host, { key: '1c18f40fb45731bdf157d651d4e649446de5230b' }, h("section", { key: 'e8b41bded39732750ae3db9b1daf14dc742e1cb7', ref: this.setPanel, role: "dialog", "aria-label": this.label, tabindex: "-1" }, this.renderHandle(), h("div", { key: '3cba5523e0cbe45fa328daaa40136c063a8c3ac3', class: "content" }, h("div", { key: 'b5cbc1260b4e6f31ac789179ab4b5a0281b9133b', class: "toolbar" }, this.renderCloseButton()), this.renderBody())), h("span", { key: '5fe872f05a6cc49027f84d71a765baa59a53adb9', "data-limit": "min", ref: this.setMinLimit }), h("span", { key: '5042e7437e61ae5308e13b1a30f5df24747e2cdf', "data-limit": "max", ref: this.setMaxLimit })));
+    }
+    // A native button and not `limel-icon-button`, because the hover animation
+    // styles the icon, which is inside the shadow root of `limel-icon-button`.
+    renderCloseButton() {
+        return (h("button", { class: "close", id: this.closeButtonId, "aria-label": this.closeLabel, onClick: this.handleClickClose }, h("limel-icon", { name: "multiply", "aria-hidden": "true" }), h("limel-tooltip", { elementId: this.closeButtonId, label: this.closeLabel })));
+    }
+    renderHandle() {
+        var _a, _b, _c;
+        return (h("limel-resize-handle", { class: "handle", label: this.resizeLabel, value: (_a = this.widthRange) === null || _a === void 0 ? void 0 : _a.now, min: (_b = this.widthRange) === null || _b === void 0 ? void 0 : _b.min, max: (_c = this.widthRange) === null || _c === void 0 ? void 0 : _c.max, onChangeSize: this.handleChangeSize, onEndResize: this.handleEndResize }));
+    }
+    renderBody() {
+        return (h("div", { class: "body", ref: this.setBody }, h("slot", null)));
+    }
+    /**
+     * Components in the content can emit events with the same names as the
+     * panel's events, for example `close` from `limel-dialog` or
+     * `limel-collapsible-section`. Events from slotted content pass through
+     * `.body` before they reach the host, so they are stopped there. The panel's
+     * own events are dispatched on the host, so they are not affected.
+     *
+     * Keep the event names in sync with {@link SidePanel.stopContentEventAtHost}.
+     */
+    stopContentEventsInBody() {
+        var _a, _b;
+        // Adding the same listener again has no effect, so re-renders are safe.
+        (_a = this.body) === null || _a === void 0 ? void 0 : _a.addEventListener('close', stopEvent);
+        (_b = this.body) === null || _b === void 0 ? void 0 : _b.addEventListener('changeWidth', stopEvent);
+    }
+    /**
+     * Fallback for {@link SidePanel.stopContentEventsInBody}.
+     * Stops `close` and `changeWidth` events that reach the host from any
+     * element other than the host.
+     *
+     * This does not replace the slot listener. A consumer listener that is added
+     * before the panel is connected runs before this one, and would still
+     * receive the event.
+     *
+     * @param event - the event
+     */
+    stopContentEventAtHost(event) {
+        if (event.target === this.host) {
+            return;
+        }
+        event.stopImmediatePropagation();
+    }
+    moveFocusIntoPanel() {
+        this.panel.focus({ preventScroll: true });
+    }
+    rememberFocusedElement() {
+        const element = getDeepActiveElement();
+        if (!element || element === document.body) {
+            return;
+        }
+        this.focusedBefore = element;
+    }
+    removeFromOpenPanels() {
+        const index = openPanels.indexOf(this);
+        if (index === -1) {
+            return;
+        }
+        openPanels.splice(index, 1);
+    }
+    isLastOpened() {
+        return openPanels.at(-1) === this;
+    }
+    // An inline width wins over `--side-panel-width`, and is still limited by
+    // `min-width` and `max-width`. The width is set on the element and not with
+    // a state, because a render and a measurement on each pointer move make
+    // the drag slow when the content is large.
+    setWidth(width) {
+        this.panel.style.width = `${width}px`;
+    }
+    rememberWidthBeforeResize() {
+        if (this.isResizing()) {
+            return;
+        }
+        this.widthBeforeResize = this.currentWidth();
+    }
+    isResizing() {
+        return this.widthBeforeResize !== undefined;
+    }
+    // A drag past a limit sets a width that CSS clamps. Without the clamped
+    // width, the panel grows when its container grows.
+    keepClampedWidth() {
+        this.setWidth(this.currentWidth());
+    }
+    emitWidthIfChanged(widthBefore) {
+        const width = this.currentWidth();
+        if (width === widthBefore) {
+            return;
+        }
+        this.changeWidth.emit(width);
+    }
+    // A focusable separator must always have its values. The width changes when
+    // the consumer sets `--side-panel-width`, and the limits change with the
+    // width of the positioned ancestor, so the range is measured when the panel
+    // or an element for the limits changes size.
+    observeWidth() {
+        this.stopObservingWidth();
+        if (!this.panel) {
+            return;
+        }
+        this.widthObserver = new ResizeObserver(this.handleSizeChange);
+        for (const element of [this.panel, this.minLimit, this.maxLimit]) {
+            if (element) {
+                this.widthObserver.observe(element);
+            }
+        }
+    }
+    stopObservingWidth() {
+        var _a;
+        (_a = this.widthObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.widthObserver = undefined;
+    }
+    measureWidthRange() {
+        const min = this.minLimit.offsetWidth;
+        const max = Math.max(min, this.maxLimit.offsetWidth);
+        return {
+            now: Math.round(this.currentWidth()),
+            min: Math.round(min),
+            max: Math.round(max),
+        };
+    }
+    // `offsetWidth` and not `getBoundingClientRect`, because the opening
+    // animation scales the panel with a transform.
+    currentWidth() {
+        return this.panel.offsetWidth;
+    }
+    get host() { return getElement(this); }
+};
+SidePanel.style = sidePanelCss();
+
+export { SidePanel as limel_side_panel };

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

@@ -305,15 +305,15 @@ const Slider = class {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        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
+        return (h(Host, { key: '6d910879894ffc7ff36df228e4252e4758622ab9', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '56e3b4dbc963b6923c63a33acb21895f4e86c947', 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: 'f74ef31e0b7d67dcc8a231a05f9b00b84de50b33', slot: "content" }, h("div", { key: '4a4018ac095977f89cba99a0222603469d11ce30', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '8e45c543c4ba524e5257169f79d0e86b4cf95635', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
                 ? this.helperTextId
                 : undefined, "aria-valuetext": this.isUnset
                 ? 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
+            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: '83a5600495635b0fd19cb93be94b59a333f574a5', class: "track" }, h("div", { key: '771452b79092adfea7aa82ab87d18910fe6bda8c', class: "active" }), this.renderStepDots(min, max)), h("div", { key: 'f3819b77285addfdd15b378943ca2ef16748f319', class: "thumb" }, h("div", { key: '46802964d1de2d5ee42faa6f02c1a51f6e35d37e', class: "knob" }), h("div", { key: '273328b017f98f7d581331b0ea1817d370b402f0', class: "indicator", "aria-hidden": "true" }, this.isUnset
             ? '\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()));
+            : this.displayValue))), h("div", { key: '92b16e21ce4cbf4e78136f5475581dc82c7aaac7', class: "range-labels" }, h("span", { key: 'be3be26585786ed002a4ad8678cc4f759b2ff510', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: 'abe4058f7a055ec348971ebf5a5d26c3a5ccb0f5', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
     }
     watchValue() {
         this.syncStateFromValue();

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

@@ -146,14 +146,14 @@ const Snackbar = class {
         }
     }
     render() {
-        return (h("aside", { key: '5612185e67dfea963fc9df340a288540f63db94e', popover: "manual", style: {
+        return (h("aside", { key: 'afddc11b55b4f3bdf05bc9ff50ed8c05851d53ac', popover: "manual", style: {
                 '--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,
                 '--snackbar-distance-to-top-edge': `${this.offset}px`,
             }, class: {
                 open: this.open,
                 'is-closing': this.closing,
                 'limel-portal--parent': true,
-            }, id: this.snackbarId, role: this.setAriaRoles(), "aria-atomic": this.open ? 'true' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, h("div", { key: 'a6221f26df374bac45ee3e5cd4a7f6c966340a06', class: "surface" }, h("limel-markdown", { key: '2da6a24cc92319fea7dde9a79a77f9719735a669', class: "label", value: this.message }), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
+            }, id: this.snackbarId, role: this.setAriaRoles(), "aria-atomic": this.open ? 'true' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, h("div", { key: 'ea4aff6aba7f089e34e48aeb91a2a2d7382f3ca4', class: "surface" }, h("limel-markdown", { key: '3b2cc771e74d951a2dc2118e179c5a7670e2eab2', class: "label", value: this.message }), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
     }
     setAriaRoles() {
         if (!this.open) {

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

@@ -43,9 +43,9 @@ const SplitButton = class {
         };
     }
     render() {
-        return (h(Host, { key: '2b103843490284b194de5dbf2c6030973889aa64', class: {
+        return (h(Host, { key: 'cb82f37e28c686da8dbdd1d5e0dafc00f5f47f4d', class: {
                 'has-menu': this.items.length > 0,
-            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: '3badf574bf892cb26198166405739ef3a45fac49', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
+            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: '227c768350a7e822f766043c31f4d3ccb5d5181c', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -65,7 +65,7 @@ const Switch = class {
         removeEnterClickable(this.host);
     }
     render() {
-        return (h(Host, { key: 'ad0cfa0f9b495ba197ca27f8975d8499cfdace52' }, this.readonly
+        return (h(Host, { key: '5193987be5def9c42517ecbc1affc9cbb08d6ff6' }, this.readonly
             ? this.renderReadonly()
             : this.renderInteractive(), this.renderHelperLine()));
     }