@lmvz-ds/components 0.32.0 → 0.34.0

package/collection/components/lmvz-popover/lmvz-popover.js

@@ -0,0 +1,470 @@
+import { Host, h } from "@stencil/core";
+import { computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { isAriaValidationEnabled } from "../../utils/aria/aria-validation-controller";
+import { waitFrame } from "../../utils/async/async.util";
+import { canReceiveFocus, getDeepActiveElement, isInteractiveElement, walkShadowDOMUntil } from "../../utils/element/element.util";
+export class LmvzPopover {
+    el;
+    closureController = new AbortController();
+    containerEl;
+    slotEl;
+    previouslyFocusedElement = null;
+    open = false;
+    anchor;
+    placement = 'bottom-start';
+    size = 'sm';
+    autoFocus = true;
+    label;
+    lmvzOpen;
+    lmvzClose;
+    lmvzCancel;
+    async show() {
+        this.open = true;
+    }
+    async hide() {
+        this.triggerClose();
+    }
+    async toggle() {
+        if (this.open) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    componentDidLoad() {
+        autoAssignId(this.el);
+        validatePopoverAria(this.el, this.label, this.anchor, this.resolveAnchor());
+    }
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.onOpen();
+        }
+        else {
+            this.onClose();
+        }
+    }
+    handleAnchorChange() {
+        if (this.open) {
+            this.updatePosition();
+        }
+    }
+    disconnectedCallback() {
+        this.removeCloseHandlers();
+    }
+    resolveAnchor() {
+        if (!this.anchor)
+            return null;
+        if (typeof this.anchor === 'string') {
+            return document.getElementById(this.anchor);
+        }
+        return this.anchor;
+    }
+    async updatePosition() {
+        const anchorEl = this.resolveAnchor();
+        const container = this.containerEl;
+        if (!anchorEl || !container)
+            return;
+        const placement = toFloatingUiPlacement(this.placement);
+        const { x, y } = await computePosition(anchorEl, container, {
+            placement,
+            middleware: [offset(4), flip(), shift({ padding: 8 })],
+        });
+        container.style.left = `${x}px`;
+        container.style.top = `${y}px`;
+    }
+    async onOpen() {
+        this.previouslyFocusedElement = getDeepActiveElement(document);
+        this.setupCloseHandlers();
+        console.log('onOpen');
+        await waitFrame();
+        await this.updatePosition();
+        autoAssignId(this.el);
+        this.applyAnchorAriaOpen();
+        this.lmvzOpen.emit();
+        await waitFrame();
+        if (this.autoFocus) {
+            this.focusFirst();
+        }
+    }
+    onClose() {
+        this.removeCloseHandlers();
+        this.applyAnchorAriaClose();
+        this.restoreFocus();
+        this.lmvzClose.emit();
+    }
+    applyAnchorAriaOpen() {
+        const anchorEl = this.resolveAnchor();
+        if (!anchorEl)
+            return;
+        if (!anchorEl.hasAttribute('aria-haspopup')) {
+            anchorEl.setAttribute('aria-haspopup', 'dialog');
+        }
+        anchorEl.setAttribute('aria-expanded', 'true');
+        anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
+    }
+    applyAnchorAriaClose() {
+        const anchorEl = this.resolveAnchor();
+        if (!anchorEl)
+            return;
+        anchorEl.setAttribute('aria-expanded', 'false');
+    }
+    focusFirst() {
+        const { slotEl } = this;
+        if (!slotEl)
+            return;
+        const assigned = slotEl.assignedElements({ flatten: true });
+        for (const el of assigned) {
+            const focusable = walkShadowDOMUntil(el, canReceiveFocus);
+            if (focusable) {
+                focusable.focus();
+                return;
+            }
+        }
+    }
+    restoreFocus() {
+        const el = this.previouslyFocusedElement;
+        if (el?.isConnected) {
+            el.focus();
+        }
+        this.previouslyFocusedElement = null;
+    }
+    triggerClose() {
+        const event = this.lmvzCancel.emit();
+        if (!event.defaultPrevented) {
+            this.open = false;
+        }
+    }
+    setupCloseHandlers() {
+        const options = { signal: this.closureController.signal };
+        document.addEventListener('mousedown', (event) => {
+            if (!this.open)
+                return;
+            if (this.el.contains(event.target))
+                return;
+            this.triggerClose();
+        }, options);
+        document.addEventListener('keydown', (event) => {
+            if (!this.open)
+                return;
+            if (event.key !== 'Escape')
+                return;
+            this.triggerClose();
+        }, options);
+    }
+    removeCloseHandlers() {
+        this.closureController.abort();
+    }
+    render() {
+        return (h(Host, { key: '3dd462a66f17c1617e44787107379d9e4d8ca321' }, h("div", { key: '27106bc8f3169eb07e0d671635074ddb53feb652', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, h("slot", { key: '3401e621d999a225aeb7cb23fa4f5412544a6dab', ref: (el) => (this.slotEl = el) }))));
+    }
+    static get is() { return "lmvz-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the popover is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "anchor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | HTMLElement",
+                    "resolved": "HTMLElement | string | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The anchor element or its id. Used for positioning."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Popover.Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"end\" | \"start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Popover": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Popover",
+                            "referenceLocation": "Popover"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom-start'"
+                        }],
+                    "text": "Preferred placement relative to the anchor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Popover.Size",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "Popover": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Popover",
+                            "referenceLocation": "Popover"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'sm'"
+                        }],
+                    "text": "Controls the size variant of the card surface."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to move focus to the first focusable element on open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-focus",
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the popover container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzOpen",
+                "name": "lmvzOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired after the popover opens."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "lmvzClose",
+                "name": "lmvzClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired after the popover closes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "lmvzCancel",
+                "name": "lmvzCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired before light-dismiss or Escape close.\nCall `event.preventDefault()` to veto the close."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the popover.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the popover, firing lmvzCancel first. If cancelled, the popover stays open.",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the popover open state.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }, {
+                "propName": "anchor",
+                "methodName": "handleAnchorChange"
+            }];
+    }
+}
+let popoverIdCounter = 0;
+function autoAssignId(hostEl) {
+    if (!hostEl.getAttribute('id')) {
+        hostEl.setAttribute('id', `lmvz-popover-${popoverIdCounter++}`);
+    }
+}
+function toFloatingUiPlacement(placement) {
+    if (placement === 'start')
+        return 'left';
+    if (placement === 'end')
+        return 'right';
+    return placement;
+}
+function validatePopoverAria(hostEl, label, anchorProp, anchorEl) {
+    if (!isAriaValidationEnabled())
+        return;
+    const hasAriaLabel = !!label;
+    const hasAriaLabelledBy = hostEl.hasAttribute('aria-labelledby');
+    if (!hasAriaLabel && !hasAriaLabelledBy) {
+        console.warn('[lmvz-popover] Host element has no accessible label. Provide a `label` prop or an `aria-labelledby` attribute pointing to a valid element.');
+    }
+    if (!anchorProp)
+        return;
+    if (!anchorEl) {
+        console.warn('[lmvz-popover] Anchor prop is set but resolved to null. Ensure the anchor element exists in the DOM when the component loads.');
+        return;
+    }
+    if (!isInteractiveElement(anchorEl)) {
+        console.warn('[lmvz-popover] Anchor element is not interactive. Ensure the anchor is a button, link, input, select, textarea, has a `tabindex` attribute, or has an ARIA role that implies interactivity (button, link, menuitem, option, combobox, listbox, checkbox, radio, switch, tab).');
+    }
+}

package/collection/components/lmvz-radio/lmvz-radio.css

@@ -110,16 +110,14 @@ input {
   min-width: 0;
 }
 label {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
   color: var(--radio-label-color);
   cursor: pointer;
   transition: color var(--radio-duration) var(--radio-easing);
 }
 .helper-text {
   display: block;
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router);
   color: var(--radio-helper-color);
   margin-block-start: 2px;
 }

package/collection/components/lmvz-radio/lmvz-radio.js

@@ -137,7 +137,7 @@ export class LmvzRadio extends ReactiveControllerHost {
         this.radioGroupController.setFocused(target);
     }
     render() {
-        return (h(Host, { key: '9b8fbfe18376f9411f792630065dfd219f9ddb32' }, h("input", { key: '24a0675eff854bbd751c07905db4be11e5353d11', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'f888c1f76f6f929609584d378dbe0974fd980f68', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '57fbb1e7abdca10861cf8709d4300459e1f62e5c', class: "dot" })), h("span", { key: '1c845611162be86500e8475ac37412e2d3f2fd99', class: "content" }, h("label", { key: '1399f4d34ff0e6d369cefc9f5d08208a4dee593f', htmlFor: this.radioId }, this.label), h("span", { key: '1345435ff2f4773260ea3f73e943f043c2b88bdb', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+        return (h(Host, { key: 'c233b8f8e67016dd9a8622359bd91d3193735438' }, h("input", { key: '6a0a028f4ae346b60f86109d33058f7a04f0f2f8', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'f86096dd776236e07292dab77a37aeedffb8d8d4', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '8e93beefee742af62775d4d5945df8d13adb739f', class: "dot" })), h("span", { key: '19df96e6d015d0f74c96781ae49191a542a4f41d', class: "content" }, h("label", { key: 'b678b54ca139191ff78d5f503b73ea407eeb0708', htmlFor: this.radioId }, this.label), h("span", { key: '4a1e8a60594e959cb5549dd20b3d35a715ce1d99', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
     }
     static get is() { return "lmvz-radio"; }
     static get encapsulation() { return "scoped"; }

package/collection/components/lmvz-select/lmvz-select.js

@@ -51,7 +51,7 @@ export class LmvzSelect extends ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (h(Host, { key: 'c753006bdabf1723fa9ff61eb35f58d5bef3157b', "data-highlighted": String(this.highlighted) }, h("div", { key: '6b06056fd48ef4f837cbe17383756e3726c68f90', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '819901582fc449566a112cd4544fa0af903a7011', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '14ad70c1cf1a96c7398698fa86baeadd5fe4257b', "aria-hidden": "true" }, " *")), h("div", { key: '589c6946bee6e320a36dfa0ed765ff9e02af4c2f', "aria-hidden": "true" }, h("span", { key: '04444223ed66a5ddff3eb7bd581cf5a7e615cf6b' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '9631d4a655514957a4564be939d8bd16c3a036f0', "aria-hidden": "true" }, " *")), h("span", { key: '3950abf6ee9528adb5895fe6bc88be67b39d458e' }, h("svg", { key: '98a0a380e9ca5044ca1fefb03b74bfc178974a60', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { key: '19fe8b40e315fabee982ba37fe2d397493429519', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("select", { key: '7480ff36ef3acfe10fb0122bfdf7feb5af406c67', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && h("option", { key: '5d00f696c2c4d7c35c180018a4c487cbb0229d37', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '218fe11d224d7ca72c8555301d41d8878b6b34b4' }))), this.helperText && h("div", { key: 'edbb738590305f6724a590a3532fd9284a187866', role: "status" }, this.helperText)));
+        return (h(Host, { key: 'f1180d4a5f1c30414b06c19314eb75630aa181f7', "data-highlighted": String(this.highlighted) }, h("div", { key: '01088c7f3315faab1fb23c99cf8b30f7d59abfc6', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '34d23292b6b65fac000f822e1e2839e28b1bfee9', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: 'ba171cdd9b53f8fa7b7fcb2c39a0b4aa69940b95', "aria-hidden": "true" }, " *")), h("div", { key: '798a6ef187b4aaaa45ecb3d6f94c30e7facb7a38', "aria-hidden": "true" }, h("span", { key: '33ea2169d94f4f8cf6263ed0c3bd6a9e593207a4' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '0ea2d4987587a1a42dfd037dcefeed3f1b3356ef', "aria-hidden": "true" }, " *")), h("span", { key: '7bd24b3921cc5cd261f563476a79d61a288d60bb' }, h("svg", { key: '9887853724abada1fe36f7225db7903ee6e4040d', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { key: 'b55a82230d46944ca3bd46f00f8c59b1a75ab8b8', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("select", { key: 'd786f49b4522baf4c803ed3046b3606f29d6dae1', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && h("option", { key: '5ffa7ffb7cd79c28a8bd212cc4d123dceb77aad4', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '8a4141ead35cfd07c14d869715397d12ea8b64d7' }))), this.helperText && h("div", { key: 'dc5ccd28b0a903f6ed674d994e302caed1d9e9bb', role: "status" }, this.helperText)));
     }
     static get is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }

package/collection/components/lmvz-snackbar/lmvz-snackbar.js

@@ -58,7 +58,7 @@ export class LmvzSnackbar {
         this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
     };
     render() {
-        return (h(Host, { key: 'f207854371f8423ff8dc9b732d1dabe1ab06e0b1', class: this.animationClass }, h("lmvz-icon", { key: 'e0ffdd4c51d11f94aa33c5a9678a15e4162d4bdd', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), h("span", { key: 'fcce1cbef0597af7e86de7b33a4f8a40c09f0cc8', class: "message" }, this.message), this.actionLabel && (h("lmvz-button", { key: '3cdbd81ba0c9102d0539c913f530e2abfbed0fb6', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
+        return (h(Host, { key: '6c2898f187ed9b456dd0c13294eb466270b116cb', class: this.animationClass }, h("lmvz-icon", { key: '9b4903f0e2099d44f0ed1773ed23f948b894f603', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), h("span", { key: '38163523ce0bba29dbe387e5c808ae9f5f2c2c55', class: "message" }, this.message), this.actionLabel && (h("lmvz-button", { key: 'bf5eb3e5075dec7c10f95a46db207ccb3181c88b', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
     }
     static get is() { return "lmvz-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-spinner/lmvz-spinner.js

@@ -4,7 +4,7 @@ export class LmvzSpinner {
     ariaLabel;
     render() {
         const hasLabel = !!this.ariaLabel?.trim();
-        return (h(Host, { key: '1953e9328170f6203b0936fd051fcaae44cba1d6', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '4393e17fe0b2e899cdd84f0bfba2047d3a08bac1', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, h("circle", { key: 'a321ad329e7a94680b37f2e11bb0ab3ef6344708', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
+        return (h(Host, { key: '75f8aabfe2eae72d29c5f0aa0663d0c37286ab78', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: 'aadf9daaa1f363752e08eed3136fc8a8f15d3bdf', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, h("circle", { key: 'e658f4be70b5bd03b3828071cbce977576afa3c8', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
     }
     static get is() { return "lmvz-spinner"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-tab/lmvz-tab.js

@@ -14,7 +14,7 @@ export class LmvzTab {
         this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
     }
     render() {
-        return (h(Host, { key: '642a74020dfe8e3f96ebbdf8067b1eba5c07bd15' }, h("button", { key: 'b786b259aed2f2e1f61f3ef14959f564841b3761', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: 'e29265a24673c39397266ef21419cebdf9a05a2c', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: 'c74ae843e36f85291e404955056ba1f34d0393e7', class: "label" }, h("slot", { key: '0f13548f3ec10a126016bfc92aa93a4c21b86e0f' })), h("span", { key: '2f969a70550975bffd1884a55b12fec733331b01', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+        return (h(Host, { key: '6bb908c4956e84cd344fc8e81b400d33bb2dce98' }, h("button", { key: 'fbc5b650c9bfb5653d17f9a66a14ffbf0fe87f83', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: 'a16da4d11ecca9db3d03da3b0076b698295ead1f', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: 'e9e83fd4aa556716af3c7b7e52e1e1d8a5a33061', class: "label" }, h("slot", { key: 'a4c0378e62d67d7bcc772ff6a77ae1a86f41208c' })), h("span", { key: 'de03b763d99f55b8773334df3d18c2d3855de4de', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
     }
     static get is() { return "lmvz-tab"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-tabs/lmvz-tabs.js

@@ -232,7 +232,7 @@ export class LmvzTabs extends ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (h(Host, { key: '0247aeab4ec148274ab25c78a5444d14c1b70d89', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: 'aa8baa8e55f84ee0fa75ce02a172adebfe4fefcd', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: 'b626f8dc73503c5013fa2e0a7623752eeb6f733f', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '230e7cc4686d643e8562aa93db6b2a3e94fccb5f', part: "panels-container", class: "panels-container" }, h("slot", { key: '713f88911b7cb14d3487d0945aac818b6727dee7', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (h(Host, { key: '2f681e7bfc21bd513bcb994f92c893bbc03ff713', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: '456ce3d11ccacd3e79995ffa643bb164127344b3', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: 'e4e4c698dde6416e0ba4d319e64d9ba3a2f79a19', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '3b90c8e7006dbf75e22b8377a18ac47488b1184f', part: "panels-container", class: "panels-container" }, h("slot", { key: '4cb4a9b04ab529a1bc7744a1893acf9a71c5c65e', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get is() { return "lmvz-tabs"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-toggle/lmvz-toggle.css

@@ -110,8 +110,7 @@ input {
   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 }
 label {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
   color: var(--lmvz-semantic-color-on-surface-primary, #000000);
   cursor: pointer;
 }

package/collection/components/lmvz-toggle/lmvz-toggle.js

@@ -65,7 +65,7 @@ export class LmvzToggle extends ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (h(Host, { key: '56c73859d7eeb40842744a29392598678268d7e8' }, h("span", { key: '145915fb9d77976328c39c00e7ef73426220b3ca', class: "track" }, h("input", { key: '4363e8e3a614ce18da19abc70257b82363b291da', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: '794ef6a50e8442dd1c460df7c42ffcf3009aab15', class: "thumb", "aria-hidden": "true" })), h("label", { key: '9432dc73d637ea8dbeb5c3b3ff8d0941c662f707', htmlFor: this.toggleId }, this.label)));
+        return (h(Host, { key: '901f821ddae696fe877435bf20d08e4032cd61ee' }, h("span", { key: 'bbac0ab3e40e426be511cc49a0dcb2497edd7a9a', class: "track" }, h("input", { key: '1df7a78df28517189f690c6d453193e30d97d9ea', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: 'e975c1c280983355f2504fba15553a9f19e4216f', class: "thumb", "aria-hidden": "true" })), h("label", { key: '09b3305a1d0d6c116310cf88d1f8a92f6856f57e', htmlFor: this.toggleId }, this.label)));
     }
     static get is() { return "lmvz-toggle"; }
     static get encapsulation() { return "scoped"; }

package/collection/integration/header-integration/header-integration.js

@@ -20,7 +20,7 @@ export class HeaderIntegration {
         this.activeNav = navId;
     }
     render() {
-        return (h(Host, { key: 'ebc2b4339568b47368f941f4b4771ccbaa6a4eeb' }, h("lmvz-header", { key: '85a1799f16e513db71e0475dd8d85d2fb880c002', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '6c50b1a6308c20e93ff93fe9a33ebee413b265c2', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '665c24100d40b0285bf0c6387e3d59bc2842ff51', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '15655bcb6e443837df2427d930b980fdb198a038', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '90f0fddc72671b948dc7fcedd2e1592aeeb97c1d', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '6997f5e88ae16639c72d3c65c5d37a690a4d8c22', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '8aefbaac518eb8ace38945cbaa892d4532e60f78', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '1ee162b6adeb0151815122edb35c245d77635697', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'bc40228254458c8ad5099d227e81f02e3cf760dd', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '57ead3b0ef5c3db1a1910827e3161e6030df9064', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '56b8c01e30764a6cc6687589034f580f359d4856', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: 'd0f3058017c06d7cf0a2301d6aec0a9fdb410685', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '39fe3ec2d11cc716ec385a7cd4ca9e1ef8fa05df', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '175bc0c4f5593b2a9f3985f5a487eeadf5e2e1fe', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '4873746ad3d8e2ee424c69074ec52e71844f7f2d', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
+        return (h(Host, { key: '0f1fa3c964fddcf63eb73be55916d8c2f4a630e5' }, h("lmvz-header", { key: '89d4a59c997a1ff05e536fdde5898a3763f86653', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'fa781e3736311d06fab93203736bac84a3900450', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '7dd41dd42c216fb13f0702db2365c8445ddd99a3', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: 'd3b5ea3523c3cb908d543b9a37dd6e6e00f1b034', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '18dc59245cc938959ac693a910687eaa7be5d657', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '149f5349580f0934b41c86bc77cc8a86659fc89f', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'd71d55a21fee01b1f8041e7bb60f5848374dd133', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '2821335ea576bff31d06c684544ec049985dc054', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '8f1779694542aa3f28b15deaa4c0690b34280984', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '993dd7117c561c3428e27623e290a782997ca638', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: 'a95c11de062609b7d88d369872c8521472decaac', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '6fd78c92f39adf2eeba6e562cd7eb1a5a9fc0660', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '579ec3fc78d316e2746b7bd9744f05eb7fc7989b', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '836beb07c150f02095431d29f4b7945cb2b6e55d', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: 'e47cca91742bf91fca8bbb20e47073deb6e7463a', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
     }
     static get is() { return "header-integration"; }
     static get encapsulation() { return "shadow"; }

package/collection/utils/async/async.util.js

@@ -34,6 +34,12 @@ const transitionEnd = (el, expectedDuration = 0, callback) => {
     }
     return unregister;
 };
+export const nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
+export const wait = () => new Promise((resolve) => setTimeout(() => resolve()));
+export const waitFrame = async () => {
+    await wait();
+    await nextFrame();
+};
 export const raf = (h) => {
     if (typeof __zone_symbol__requestAnimationFrame === 'function') {
         return __zone_symbol__requestAnimationFrame(h);