@lmvz-ds/components 0.39.0 → 0.41.0

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

@@ -1,28 +1,67 @@
 import { h, Host } from "@stencil/core";
+import { cardSizes } from "../../api/ds.constants";
+import { isAriaValidationEnabled } from "../../utils/aria/aria-validation-controller";
 import { createAssetUrlSafely } from "../../utils/stencil/assets";
+const HEADING_TAGS = new Set(['HEADER', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6']);
 export class LmvzCard {
+    el;
+    titleSlotElement;
+    warnedCases = new Set();
+    size = 'large';
     cardTitle;
-    imageUrl;
     description;
-    primaryActionLabel = '';
-    primaryAction;
+    imageUrl;
+    imageAlt = '';
+    actionLabel;
+    lmvzCardAction;
+    normalizeSize(value) {
+        const normalizedSize = cardSizes.includes(value) ? value : 'large';
+        if (normalizedSize !== this.size) {
+            this.size = normalizedSize;
+        }
+    }
+    componentWillLoad() {
+        this.normalizeSize(this.size);
+    }
+    componentDidLoad() {
+        const titleSlot = this.el.shadowRoot?.querySelector('slot[name="card-title"]');
+        titleSlot?.addEventListener('slotchange', () => this.checkTitleContent());
+        this.checkTitleContent();
+    }
     get fallbackImage() {
-        return createAssetUrlSafely('card-placeholder.svg');
+        return String(createAssetUrlSafely('card-placeholder.svg'));
+    }
+    handleActionClick = () => {
+        this.lmvzCardAction.emit();
+    };
+    get slottedTitleElement() {
+        return this.titleSlotElement?.assignedElements()?.at(0);
     }
-    _onPrimaryClick() {
-        this.primaryAction.emit();
+    checkTitleContent() {
+        if (!isAriaValidationEnabled())
+            return;
+        const slotted = this.slottedTitleElement;
+        if (slotted) {
+            const tag = slotted.tagName;
+            if (!HEADING_TAGS.has(tag)) {
+                this.warnOnce(`non-heading:${tag}`, `[lmvz-card] Element <${tag.toLowerCase()}> slotted into "card-title" is not a heading. Slot a heading element (h2-h5) instead.`);
+            }
+        }
+        else if (!this.cardTitle) {
+            this.warnOnce('missing-title', '[lmvz-card] Neither a "card-title" slotted heading nor a non-empty "cardTitle" prop was supplied.');
+        }
     }
-    _onOverflowClick(event) {
-        console.log(event);
+    warnOnce(key, message) {
+        if (this.warnedCases.has(key))
+            return;
+        this.warnedCases.add(key);
+        console.warn(message);
     }
     render() {
-        const imgStyle = {
-            backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
-        };
-        return (h(Host, { key: '1dd819fd7c752af8d15001c08f7f60c6ea7278b9', role: "article" }, h("div", { key: 'e0cc822e627b6bbe665e4faa705cc46a09bac7c6', class: "top" }, h("div", { key: 'db79cb5a67ebdd6097f985e4b4bd27665b6329ef', class: "image-wrapper", style: imgStyle }, h("div", { key: '90facc8595ddbbf31e3768faa8254a82ab8d3e65', class: "chip-slot" }, h("slot", { key: 'cb2e6a1053aae2b2ca90c52c175e3c4174c89d23', name: "chip" })))), h("div", { key: 'cb11069a329385178677e92d08044e0fe8e5b982', class: "bottom" }, h("header", { key: '1e6076352124ca03de2fb13c17a565b4f492567e' }, h("h2", { key: '73f11099fb751bd4f967dbe49b79763b6a8268f3', class: "title" }, this.cardTitle)), h("p", { key: '36cf87b4c2004bff1e65feedd13e137d67115de3', class: "description" }, this.description), h("div", { key: '6c1d82f4968ce8252307858e6ad0681274f06397', class: "actions" }, h("button", { key: '0366e0caaf9235a3eaf7bfcab116e6a828fb248d', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: '4f435e79d75a621d6fe065471a915b55308ad15d', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: '7dec97e0b0ca58c40fc5308cc7863acafa8c5147', class: "icon-placeholder" }, "..."))))));
+        return (h(Host, { key: '21ac0a567bb88d05d247cc3150bf2e7ce26972c5', role: "article" }, h("img", { key: '6cea11ee015059d5537ab64c7cbb1655ac984cb1', class: "image", src: this.imageUrl ?? this.fallbackImage, alt: this.imageAlt, loading: "lazy", decoding: "async" }), h("div", { key: 'cd29132d8268fb5a025cde5c33a858982c8eaaed', class: "content" }, h("div", { key: '0d353a46cae60d81417e5280b39020b2234ad304', class: "title-block" }, h("slot", { key: '4f2734a257ef877d258a717e23855f521c5132a6', name: "card-title", ref: (el) => (this.titleSlotElement = el) }, this.cardTitle && (h("header", { key: '7d526caba45dde6b13bee023e60943711347258a', role: "heading", class: "card-default-title" }, this.cardTitle))), this.description && h("p", { key: '18c3eac26562a592baa29d75674737d11f57beac', class: "description" }, this.description)), h("slot", { key: 'd0d9c40ca8501b0fdfa9d589eeb05692892316a2', name: "chip" }), this.actionLabel && (h("div", { key: '4bd5d9233c0ba1dcda6bebdeff89adbbfe37e4b1', class: "actions" }, h("lmvz-button", { key: '6cefc7ad2859d457ad11b3f4edb1300ba664ef63', class: "action", variant: "secondary", scale: this.size === 'small' ? 'small' : 'default', onLmvzActivation: this.handleActionClick }, this.actionLabel))))));
     }
     static get is() { return "lmvz-card"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["lmvz-card.css"]
@@ -36,26 +75,56 @@ export class LmvzCard {
     static get assetsDirs() { return ["../../assets"]; }
     static get properties() {
         return {
+            "size": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Card.Size",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {
+                        "Card": {
+                            "location": "import",
+                            "path": "../../api/ds.types",
+                            "id": "src/api/ds.types.d.ts::Card",
+                            "referenceLocation": "Card"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'large'"
+                        }],
+                    "text": "Size variant of the card.\nInvalid values are normalized to `large` at runtime."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'large'"
+            },
             "cardTitle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Card title (required)"
+                    "text": "Card title text, rendered as the fallback `<h3>` for the `card-title` slot.\nIgnored when a heading is slotted into `card-title`. One of `cardTitle` or a slotted heading should be supplied."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "card-title"
             },
-            "imageUrl": {
+            "description": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -67,14 +136,14 @@ export class LmvzCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional image URL; placeholder used if omitted"
+                    "text": "Optional description text."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "image-url"
+                "attribute": "description"
             },
-            "description": {
+            "imageUrl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -86,14 +155,14 @@ export class LmvzCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional description"
+                    "text": "Optional image URL; falls back to a bundled placeholder graphic when unset."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "description"
+                "attribute": "image-url"
             },
-            "primaryActionLabel": {
+            "imageAlt": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -104,38 +173,62 @@ export class LmvzCard {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Primary action button label"
+                    "tags": [{
+                            "name": "default",
+                            "text": "''"
+                        }],
+                    "text": "Accessible alt text for the image."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "primary-action-label",
+                "attribute": "image-alt",
                 "defaultValue": "''"
+            },
+            "actionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the card's single action button. The action row renders only when this is a non-empty string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-label"
             }
         };
     }
     static get events() {
         return [{
-                "method": "primaryAction",
-                "name": "primaryAction",
+                "method": "lmvzCardAction",
+                "name": "lmvzCardAction",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when primary button is clicked"
+                    "text": "Emitted once per activation of the action button."
                 },
                 "complexType": {
-                    "original": "PointerEvent",
-                    "resolved": "PointerEvent",
-                    "references": {
-                        "PointerEvent": {
-                            "location": "global",
-                            "id": "global::PointerEvent"
-                        }
-                    }
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "normalizeSize"
+            }];
+    }
 }

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

@@ -117,7 +117,7 @@ export class LmvzCheckbox extends ReactiveControllerHost {
         this.nativeError = true;
     }
     render() {
-        return (h(Host, { key: '089b23f8034fa089f358cc37923182c34f528cd2' }, h("div", { key: '0af011ebf062332c330b49fa3076828204433ac4', class: "pill" }, h("input", { key: 'a483a8c5bbe1d6da3cfab63ce32ad2e6392911ff', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: 'f21d34ab625c7eef23bd2761b399e8770cd62275', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: 'de2680ea17f34ab0124c529d88d4191c97d0a4c5', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: '1b2d24e43603033a5a77340164e002de326db11a', class: "content" }, h("label", { key: 'b18f17abb4459b3783dc41d0031f4b26795fdcf5', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: 'f32591c55fcc88d130815780a9999fcb235afd88', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: '076489f5baadab07d95fc787e9ac71bae0a6ab68', onClick: this.retargetInnerClicks.bind(this), class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (h(Host, { key: 'df48e8af0b992d4f2c564aae67dbd42b6454f2c1' }, h("div", { key: 'fe1256e373ee98cc26ca9031654d4d01f10b96e7', class: "pill" }, h("input", { key: '580af189cb0069dd057464efd8c876c1a2dd3826', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: '4a6b3522aa1a43f3c0a7ff203fb5791876555954', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '3a857015118d911832cdaa1287cee4c63f84afb2', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: 'aa543c4c37cf220084b3cce423e1d0e48b5c344f', class: "content" }, h("label", { key: '26c8551de719bdd99cce39b9129b59643f2aa44e', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '004ead4527953b10b4ab6d89366159d7727320b2', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: '0fa0dcfdf2fe61d510bfe9f0c4f8d16a341f97d7', onClick: this.retargetInnerClicks.bind(this), class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get is() { return "lmvz-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -48,7 +48,7 @@ export class LmvzChip extends ReactiveControllerHost {
         }
     }, 500);
     render() {
-        return (h(Host, { key: '63581b0c567d208b200464e9985ac32d97c1ad43', type: this.type, size: this.size }, h("slot", { key: '7aa740cc80b400893dcbe7021d5513d3f1ca476b', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: 'da5b9e272becef812b4914bf25b451da16bb9012', class: "content-overflow-wrapper" }, h("slot", { key: 'a925dcd383c86dbea63790b5623d159472b6684c', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: 'e018eafb75b85068c992e9f91c4fac89a4c95153', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
+        return (h(Host, { key: '2dcc9ccddd24f1db7ec65aeed24a1646cee80c76', type: this.type, size: this.size }, h("slot", { key: '756d785d9bdfdaba8c35641afee0743ff343a184', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: '3df490bd3149acca605da7d7910be11b80585adf', class: "content-overflow-wrapper" }, h("slot", { key: '5c252427faffaea5a95618df4afced110ff15703', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: '493c1ecd319d9afe0896339320cad67aa37289ab', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
     }
     static get is() { return "lmvz-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -441,13 +441,13 @@ export class LmvzDatepicker {
     render() {
         const validationLabels = getValidationLabels(this.locale);
         const popoverLabel = this.label ? `${this.label} ${validationLabels.popoverSuffix}` : undefined;
-        return (h(Host, { key: 'af9d7f075bf97d7eb58c6557f43cf8a245d5f712' }, h("lmvz-input", { key: 'eef4be58281b8356d443c65c5cf6451192e70f75', ref: (el) => {
+        return (h(Host, { key: '55c1293d79c3c9a1ca591e81c693797194498967' }, h("lmvz-input", { key: '054528d324a2fd99802659a41796da362412bcd9', ref: (el) => {
                 const wasUnset = !this.inputEl;
                 this.inputEl = el;
                 if (wasUnset && this.inputEl) {
                     forceUpdate(this);
                 }
-            }, label: this.label ?? '', placeholder: this.effectivePlaceholder, helperText: this.helperText, errorMessage: this.errorMessage, error: this.nativeError, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.inputText, autocomplete: "off", onLmvzInput: this.handleInputTextChange, onKeyDown: this.handleInputKeydown }, h("lmvz-icon", { key: 'fc39ef14720522a8089d33321b918e5577a36cc2', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), h("lmvz-popover", { key: '0076c57da02c7c9d0fcb53584f9dc4127317d6a5', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, h("div", { key: '4c1e716e52a5d9ed75155dded3c2c39649e1e844', part: "panel", class: "datepicker-panel" }, this.renderHeader(), this.renderGrid()))));
+            }, label: this.label ?? '', placeholder: this.effectivePlaceholder, helperText: this.helperText, errorMessage: this.errorMessage, error: this.nativeError, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.inputText, autocomplete: "off", onLmvzInput: this.handleInputTextChange, onKeyDown: this.handleInputKeydown }, h("lmvz-icon", { key: 'e109a59ba562ff0db88442119725cb38cc01ed6f', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), h("lmvz-popover", { key: 'df9046ff443232be3036fbb9ad2646681e7be697', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, h("div", { key: 'eea613edc10157650e2e11698afdcc85353bff49', part: "panel", class: "datepicker-panel" }, this.renderHeader(), this.renderGrid()))));
     }
     static get is() { return "lmvz-datepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,7 +87,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: 'a72c860d7f67c9631c462c0abcc798bb142dfc55', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '4ed87264d201c513bce284536793692424ed864b', class: "brand" }, h("slot", { key: '9291d81d7f8a630007b8ad827a16ebea7222b9d2', name: "brand" }, h("img", { key: '77da99409f40d93e4a2d190cbb2a8857f1e81c36', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '3c40c04bb23524ae58e391a54b044e225a25ad07', "aria-label": "Hauptnavigation" }, h("div", { key: '207b8032d3d11b4bfacb6e7fcffb683ad5da8ccc', role: "menubar", class: "primary-menubar" }, h("slot", { key: '8ae67a57ac7b6bb6083c469a857542e31b0c2294', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '86b9696c95e9ae0e3843fa1607f268dcae8cb279', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '67966de33555dc26ac2dc51fc8a85d456a2e8e85', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'bfb2831144cee723c3182d96d64f44be1cc5a78b', class: "actions" }, h("slot", { key: '6956b81fa8ed6c446edc5f7d9708462b39bc8cbb', name: "actions" }))));
+        return (h(Host, { key: '427f1fe61ea8809a17dc08518c3dca7218cd2c9b', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'b95c5d269c18001592b4ea853b9c945eeedfda07', class: "brand" }, h("slot", { key: 'd856c174220f6e17b1aa977745bd057f7ca12625', name: "brand" }, h("img", { key: '554896aadccb818f06d01ad88f9be96a1afa615a', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '414d208fe60eb4dd0c1400727b4198b81fc4a041', "aria-label": "Hauptnavigation" }, h("div", { key: '608ea0c8ddcfef024505505ae7f91f644bfc1298', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'b5de644c07b4ef809c7afa377bed5e48356fc93a', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'a6e308da89df8b705a0d03218778bc36fb0cbaf2', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'cf78a68329eadb96ad656ed81d8b3c72db582fc9', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'f7a00431635969cd0f3b29e52d002ec67c8dae04', class: "actions" }, h("slot", { key: '6ed3b3d6ef85646742f0a2cf5267464f06e20a05', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,7 @@ export class LmvzIcon extends ReactiveControllerHost {
         super.componentDidRender();
     }
     render() {
-        return h(Host, { key: 'be6032d11399289c3baddd63ebc7d9e1fb98b773', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
+        return h(Host, { key: '0dd3824c964cb73ba4758afbb8768535b7bf0820', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
     }
     waitUntilVisible(callback, rootMargin = 50) {
         if (!Build.isBrowser || typeof window === 'undefined' || !window.IntersectionObserver) {

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

@@ -204,9 +204,9 @@ export class LmvzInput extends ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (h("div", { key: '85f498773efdad53d309e8b1eb5b85ea0601277e', class: classNames('input-container', {
+        return (h("div", { key: '34535f927cceb5d28107f71a995b92f357f68df0', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: 'eb74bdd8170014c2a17c6046878b0f4d61fece25', class: "input-wrapper" }, h("slot", { key: 'ceb3acb5dcb641900caf9a22f43295d1c407ad2e', name: "before-input" }), h("div", { key: 'a7f626addd83cbf79b435989bec94f777818794e', class: "label-input-group" }, h("label", { key: '391e2d1f873f9aef9bd9e7f14b006d898a699abe', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '691251a0efb1a60fd5e53447a6204c13008545a1', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: 'f37d3d7d5076636638b2da59cca91c1cedc7504a', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onBlur: this.handleBlur, onInvalid: this.handleInvalid })), h("slot", { key: '22b2be3072fc274bbeff4d92f25dccc5ea50c4d0', name: "after-input" })), h("div", { key: '95f28aad61a5d7ea45fb4479801097036652b08f', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '9ea8420b336b33a0fd3b7e53cc4efa44983cbdc3', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, h("div", { key: 'a1e6ef88163bb7c081b295f11194ffc10a0754c4', class: "input-wrapper" }, h("slot", { key: '6634e9671691bd2a18513571706028994fe27efe', name: "before-input" }), h("div", { key: 'e5299fed299b5b5a29ae9f1da71c5294f264da05', class: "label-input-group" }, h("label", { key: '21cf26ec1ef8af81f22b0333299b21268063cda4', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '2f8ab042d8a89bbfdd37c8083d83a4b5298aa447', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '35551a0a618eb2b553449e7e59b0190ff026cdb4', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onBlur: this.handleBlur, onInvalid: this.handleInvalid })), h("slot", { key: '7c8e459eefd966d4b1227e233a6c599907240545', name: "after-input" })), h("div", { key: '66a53450185cb93f3c6c98a222b1e201aa5a6d03', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '587940e277570a5cc9bba9cfbbd1c42daa512ad1', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get is() { return "lmvz-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -44,7 +44,7 @@ export class LmvzLink {
         const rel = this.computeRel();
         const iconSvg = this.type === 'external' ? EXTERNAL_SVG : ARROW_RIGHT_SVG;
         const isBlank = this.target === '_blank';
-        return (h(Host, { key: 'ee4f5c107243ff858f9189840e56a0525fdac782' }, h("a", { key: '28229373bec276579c2bb7b9fcf254872baae9e8', href: this.computeHref(), target: this.target, rel: rel }, h("slot", { key: '7c58f3f7501e457ee4a35d2a9f2bf80ed0c33fb0' }), h("lmvz-icon", { key: '14784743d148d57e7c83da0f92ba96e4bb3a30a1', "aria-hidden": "true", icon: iconSvg }), isBlank && h("span", { key: 'f72adde57b462282d1a8313e2eb06cf6b68c2697', class: "sr-only" }, this.externalLabel))));
+        return (h(Host, { key: 'af31a58caac2d4ccb4c2a72d356e85bda7c61b86' }, h("a", { key: 'c677c43497f214259863cf8306fa2d838bcd9bef', href: this.computeHref(), target: this.target, rel: rel }, h("slot", { key: '63f18a9089a6864c513c3ef01c68268a6b0dbd60' }), h("lmvz-icon", { key: '115472b9eda8f55c27bc551a9b1988e9086b501a', "aria-hidden": "true", icon: iconSvg }), isBlank && h("span", { key: 'cf1d70fcb80fe0e61eeceeb41b43ab0f7211ea02', class: "sr-only" }, this.externalLabel))));
     }
     static get is() { return "lmvz-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class LmvzMenuItem extends ReactiveControllerHost {
         this.addController(new ElementActivationController(this));
     }
     render() {
-        return (h(Host, { key: 'cd5814d6bcfa9b0f5b1b2f5108ce0fc65722b909' }, h("slot", { key: 'b503b252c95bc09ca4b888d4576badd3976292e9', ref: (e) => (this.validationSlot = e) })));
+        return (h(Host, { key: '555ab8db190d0b80b47d903966e880aed51c31d4' }, h("slot", { key: '3987fb4644d8d2c47e936c0413e058a9221a2ad7', ref: (e) => (this.validationSlot = e) })));
     }
     static get is() { return "lmvz-menuitem"; }
     static get encapsulation() { return "scoped"; }

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

@@ -93,7 +93,7 @@ export class LmvzMessage {
     }
     render() {
         const role = this.live === 'assertive' ? 'alert' : this.live === 'polite' ? 'status' : 'note';
-        return (h(Host, { key: '1c45cf27f057535ffff047548a3d6681dd487d3c', role: role }, this.leadingIcon && h("span", { key: '8efab69f677dfaa06d333aa304479e17e6d60ad6', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), h("span", { key: '2e88e9053444e2aae23341b7cba923c7c440ff64', class: "message" }, h("slot", { key: 'd6b0ee6c95846a1de97e0e6ed707001c29c78c92', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (h("lmvz-button", { key: 'c55e38e274e98c8ac584ae16520fb0cab5e11d17', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (h("lmvz-button", { key: '1ae69fefbb23cd8a219aee1d624e9d7779ae0c08', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, h("lmvz-icon", { key: '572c5b3309a1b1b9798dc6fc3f4ad11d0a354ebc', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
+        return (h(Host, { key: '45bba3aa5050fcc993414c5d25b436c9a78b1b67', role: role }, this.leadingIcon && h("span", { key: '936327839c37f2aac83cca9db780dda0e47c2a42', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), h("span", { key: 'e05203642419ad734285495205625567e5110c5f', class: "message" }, h("slot", { key: '7ced34a5a75a83707cee108ce0e964f815feaa61', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (h("lmvz-button", { key: '705cd8ff5171d05f459ce09aaa10548de8362710', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (h("lmvz-button", { key: '90377bfb5e8fb69ad5dff323ca88d2ba9d0c444c', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, h("lmvz-icon", { key: '0064004bcb5ef5d9a3bf784f110b3cf0d267017d', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
     }
     static get is() { return "lmvz-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -223,7 +223,7 @@ export class LmvzModal extends ReactiveControllerHost {
         this.hasHeader = this.hasAssignedContent(this.headerSlot);
     };
     render() {
-        return (h(Host, { key: '9eb1aa89e4c682586d10291e2a8a2523b8fd17f7' }, h("dialog", { key: '477c537328622f85759dc72a0c499d56e3d5e345', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: 'b9fe9cb306938a117002e5213740ea20269080b8', class: "modal-shell" }, h("header", { key: '34d0cd8078d55d98ec526843f02710044663de70', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: '1408f0e0875f5e0508ad0f5682f4879a93df65df', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: '735c1757962e4f3804700a4669d0b49f2d11fb16', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: 'b0eb76cde508fb434023abdc0f764e1b809b6447', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onLmvzActivation: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '9f978d3117a4046202c3ba1df39aa0c7afc7ee28', icon: closeIconSvg }))), h("div", { key: '46ffd7e7315099189c0a2499d17bdeabeb0e46e5', class: "body" }, h("slot", { key: '095c3353f2ea00f6fa765ac0972ee0123f8e4154' })), h("footer", { key: '5b092b00f10acede66d0fac53f01584ecf528418', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: 'ce312e1b1c3407838b8704f20393e7120d6338f9', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: '6246782cbee1cc440cfdaf45dac36655f19c972e', name: "actions" })))))));
+        return (h(Host, { key: 'eaae4e7e1ecf8fb11db7582ffa3d1461a718a8d0' }, h("dialog", { key: '11d1bdd9cd94afd82a13f5328234ad8877e9d28b', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: '1c21a9266be21246ba8cbc55ac4559f7511294ff', class: "modal-shell" }, h("header", { key: '4077ec5bd9e434d954982884ab3306fc9db6d043', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: '82476490860365ba5ed3e8f47af7a85084e01693', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: '59dd145e07c6f310e8490ac7fa0e3d7577929a5d', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '66e53dca4eab1503f53e4d069d1e115a77d3672e', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onLmvzActivation: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '23579ef59870459b523e4adc20df3954567b31a5', icon: closeIconSvg }))), h("div", { key: '62d2d2288ac84c945b5f0c070b3c553815572e69', class: "body" }, h("slot", { key: 'e511ff34da74c38981ee54d0e8a5019adfda2a7e' })), h("footer", { key: '1a921cf63e446f434a6686de39e8e653eb1c30c1', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: '4280d47bb1f9bcc390253ff4286f25c4117612a2', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: 'a4a228ee4dbb1064cc4d7d005f202d69c66b8505', name: "actions" })))))));
     }
     static get is() { return "lmvz-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -180,7 +180,7 @@ export class LmvzPopover {
         this.closureController?.abort();
     }
     render() {
-        return (h(Host, { key: '83529aeac05cdc706193fa8bbbcc8f8672756111', role: this.containerRole, "aria-label": this.label || undefined }, h("div", { key: '97c255e788806c0dec2f4ed04c6fc815150912a2', part: "container", class: `container lmvz-wrapper-card-${this.size}`, ref: (el) => (this.containerEl = el) }, h("slot", { key: 'e4ea69d179557e7d34f1475c07c9284ea8d10a67', ref: (el) => (this.slotEl = el) }))));
+        return (h(Host, { key: '559167785de0a69c12e436740b6b17a206f6155c', role: this.containerRole, "aria-label": this.label || undefined }, h("div", { key: 'deaeb8ac94edd8eac38748cbc01e8f335a8fe7a1', part: "container", class: `container lmvz-wrapper-card-${this.size}`, ref: (el) => (this.containerEl = el) }, h("slot", { key: '87dd843041852b3d5b8b85497c0f4e4eb6791a45', ref: (el) => (this.slotEl = el) }))));
     }
     static get is() { return "lmvz-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -175,7 +175,7 @@ export class LmvzRadio extends ReactiveControllerHost {
         this.nativeInput?.click();
     }
     render() {
-        return (h(Host, { key: 'f1fdc1167c4e59c2524e1e545c3382ca32853788' }, h("input", { key: 'c1b711444475ed401766cc5827eeaec0c46b62cf', type: "radio", id: this.radioId, value: this.value, checked: this.checked, disabled: this.disabled, autoFocus: this.autofocus, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'b25e623269df05bdf8159e72da4df2e0bfb5d7bc', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '93d12890c7ba0abe203c63953ea1115aee37d7a0', class: "dot" })), h("span", { key: '44dcfdc4e7ee3820624b0d02a438139f45bb8733', class: "content" }, h("label", { key: 'd0547cd5e79642b298da155c9937715224b52cae', htmlFor: this.radioId }, this.label), h("span", { key: 'a9df5dd8a775a2f7422d5bac296869f88553e33f', onClick: this.retargetInnerClicks.bind(this), "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+        return (h(Host, { key: '0a3f2ee5c2aa0c27e2fc6c6482f463915a8475d1' }, h("input", { key: '707ee1a470c2a8b90dff54400490ae9366ab97ac', type: "radio", id: this.radioId, value: this.value, checked: this.checked, disabled: this.disabled, autoFocus: this.autofocus, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: '772a52ff4817b2332312bc597feee0de4fb3be4e', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '600e398709956b6cb3e95b2119268f805771f71e', class: "dot" })), h("span", { key: '446ee6d901dcbc2143f9772736746255ef2885db', class: "content" }, h("label", { key: '4ec55b6be95c847d564ec8dfff3486068f44580c', htmlFor: this.radioId }, this.label), h("span", { key: '678dcd677d22fb2c6c8983be8cb69100fc396378', onClick: this.retargetInnerClicks.bind(this), "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

@@ -345,7 +345,7 @@ export class LmvzSelect extends ReactiveControllerHost {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
         const showChips = this.multiple && hasValue;
-        return (h(Host, { key: '77cb72cdce635eae0f9a29cb9121dd7d16955219' }, h("div", { key: 'cc6c04090457df17c6a9e74354fc21875d378642', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '8dc52469a7b3333578494b2f7bdb4e870044ac6c', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && h("span", { key: 'c198fb4944e46c5219a42e16ae24dc3c414b1b00', "aria-hidden": "true" }, " *")), h("div", { key: '034cc67405aac73a6557036dea90e4644c1578ed', id: this.triggerId, ref: (el) => (this.triggerEl = el), class: "select-trigger", role: "combobox", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-controls": this.popoverId, "aria-activedescendant": this.isOpen ? this.activeId : undefined, "aria-label": this.triggerAriaLabel, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-errormessage": this.showErrorMessage ? this.errorId : undefined, "aria-describedby": this.describedBy, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onBlur: this.handleTriggerBlur }, h("span", { key: 'c61c136bfaab211572a988d3b16c2746f80b1ac6' }, showChips ? this.renderChips() : hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '24201baae63a4f6fdaef2441d304cd8f69430fb5', "aria-hidden": "true" }, " *")), h("span", { key: '547c61dfdc83f89cf7cd0582c785b9552190e533', "aria-hidden": "true" }, h("svg", { key: 'f6a0cb7c77682aec03cd146e84712c17df5ff910', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '35a8a50e27f18e54003974ae5b5ed578602664d3', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("lmvz-popover", { key: '0d5b94659c23763d59638046a397963d79a5e588', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, "aria-multiselectable": this.multiple ? 'true' : undefined, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), h("div", { key: 'c4a313fe4b6c53678a4f3dafced210f00e3c93d5', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, h("slot", { key: '1fb311e6938812e68ae5155184af2e2ba7c19861', onSlotchange: this.handleSlotChange }))), this.helperText && (h("div", { key: 'accade9aae4cb2e23fa1d8f62dd9b6efdf3ddfb5', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (h("div", { key: 'faa5eba225adda67b44b8a63ae98a678fddf49ad', id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (h(Host, { key: 'bcb5531eeb0c12cfebb0aacf01837004d95ab651' }, h("div", { key: '0df56d60126a321bc3e5070ecbacd29ef0653cea', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '9e0dcdb5134b85b38ec41c2c83a70e8f4aea9429', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && h("span", { key: '1c4a3499ef403cfff96ffd391255a3c1c175a80b', "aria-hidden": "true" }, " *")), h("div", { key: 'fe9f97ec6c476525e98efb9c2a0838697d7f2193', id: this.triggerId, ref: (el) => (this.triggerEl = el), class: "select-trigger", role: "combobox", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-controls": this.popoverId, "aria-activedescendant": this.isOpen ? this.activeId : undefined, "aria-label": this.triggerAriaLabel, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-errormessage": this.showErrorMessage ? this.errorId : undefined, "aria-describedby": this.describedBy, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onBlur: this.handleTriggerBlur }, h("span", { key: 'e769fcba8c5e31289f333dc53dcbc3a7bdce44e7' }, showChips ? this.renderChips() : hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'b5e0cd9a9ad4506f058508f6ee9957debe9e1bd2', "aria-hidden": "true" }, " *")), h("span", { key: 'e07c1ba4a99b1b72144a17bff940e08f2d93db2f', "aria-hidden": "true" }, h("svg", { key: 'eaa136b668baacb7bb6a4ad2e46a0f694a5b54b9', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '70744054f8ec445361551899ad637b54ace6322f', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("lmvz-popover", { key: '330d09ff1d7160c1f7471b208acb8005e7ea60c7', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, "aria-multiselectable": this.multiple ? 'true' : undefined, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), h("div", { key: '88e327fdb04ae5ca89ba2a4254f9807a8a051051', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, h("slot", { key: '3988124d6358464ba531d498f2e486117fe4c3ad', onSlotchange: this.handleSlotChange }))), this.helperText && (h("div", { key: 'ffd36af1cf02a807262ff7b7df6fe4be0cb82ed9', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (h("div", { key: '52d7f19bb6c7618d1ad7cd24c3c73487484d4542', id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     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: 'f58c7657bf5511c72930dfc54ace4af1ff7f3554', class: this.animationClass }, h("lmvz-icon", { key: '8632b42b9b246bf58480fb17ca336ce5f0883845', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), h("span", { key: '4ca56d2cdf29415c6d21cc50399dc28aebb8de99', class: "message" }, this.message), this.actionLabel && (h("lmvz-button", { key: 'd09043056b968421143aa180f464effcd7b781fe', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
+        return (h(Host, { key: '153859f89cb76e7119db0315208b7382ebe2ad9e', class: this.animationClass }, h("lmvz-icon", { key: 'f6a59adba28f3d0d0e50717f1d1010d7c5b391fa', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), h("span", { key: 'f0b60bd0787add320b3086841ea9c5b542c05f04', class: "message" }, this.message), this.actionLabel && (h("lmvz-button", { key: 'acb89693f29db072e98401fdb2007e149aeba044', 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: 'cf60fcf652f377a66596cc51138bb73f7465a4e7', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '121ab46a591242fbc0f1c3540e8f2a7b72c9582a', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, h("circle", { key: 'fe649394c9bd6e7a06113e9a50b595bb890a6fac', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
+        return (h(Host, { key: '53d1363cc2ec0219468d7a04e7f2cfc952a85fd6', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '2401cb663473e2bbce0491718ad71c2600154cd0', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, h("circle", { key: '61cbad421651f8dc7f684745a75b3249f251c8a6', 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.css

@@ -128,7 +128,6 @@ button:active {
   opacity: 0;
   transition: opacity 0.15s ease;
 
-  /* Horizontal: full-width bar at bottom */
   inset-block-end: 0;
   inset-inline: 0;
   block-size: var(--lmvz-tab-indicator-size);
@@ -140,18 +139,6 @@ button:active {
 :host([selected][has-media]) .indicator {
   opacity: 1;
 }
-:host([vertical]) button {
-  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
-}
-:host([vertical]) .indicator {
-  /* Vertical: narrow bar at inline-start edge */
-  inset-block: 0;
-  inset-inline: 0 auto;
-  inline-size: var(--lmvz-tab-indicator-size);
-  block-size: auto;
-  border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0;
-  background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));
-}
 ::slotted(*) {
   --lmvz-component-color: var(--lmvz-tab-color);
 }

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

@@ -5,7 +5,7 @@ export class LmvzTab {
     value;
     disabled = false;
     selected = false;
-    vertical = false;
+    panel;
     handleMediaSlotChange = () => {
         this.el.toggleAttribute('has-media', (this.mediaSlotEl?.assignedElements() ?? []).length > 0);
     };
@@ -14,7 +14,7 @@ export class LmvzTab {
         this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
     }
     render() {
-        return (h(Host, { key: '4380fe35cacb11bc7114664c126504e8f4fb09a0' }, h("button", { key: 'ac77443cbba5c94f864820088f60c0bac23d0775', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: '9988497505ca3effa6c41011ac408a5d25629ca1', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: '70566c46fba36b8717aa82917e45abd39cd7a2ea', class: "label" }, h("slot", { key: 'a595738c387ee2f4f77f6ccdfdfb0589751ce999' })), h("span", { key: '933758dc965d1151ca6a96367ea40290189384ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+        return (h(Host, { key: 'ff3fc4218e3da14cb2caaa3bbe8cb73be8ac0c3d' }, h("button", { key: '999ad84e8d27e787ba0f6ba1146b461b9e7b6ca9', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: '876a7431706f385f1ed7f542182f92dd386bc6f5', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: 'a0b0a0f22344678a2a6ee82dd997f24036f22ba5', class: "label" }, h("slot", { key: 'df4d11555f351a759ef69ba907d8d1b00d95a826' })), h("span", { key: '70830219e6dfa656a5ded8332f9171ad389c4ef8', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
     }
     static get is() { return "lmvz-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -96,28 +96,24 @@ export class LmvzTab {
                 "attribute": "selected",
                 "defaultValue": "false"
             },
-            "vertical": {
-                "type": "boolean",
+            "panel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Vertical orientation context.\nSet by the parent `lmvz-tabs` when `orientation=\"vertical\"` \u2014 do not set manually.\nWhen true the selection indicator moves to the inline-start edge."
+                    "tags": [],
+                    "text": "The `id` of the target `lmvz-tab-panel` this tab controls.\nWhen omitted, pairing falls back to DOM position."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "vertical",
-                "defaultValue": "false"
+                "attribute": "panel"
             }
         };
     }

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

@@ -62,11 +62,6 @@ legend {
   background: none;
   border-radius: 0;
 }
-/* ── Vertical orientation ────────────────────────────────────────────────── */
-:host([orientation='vertical']) .tablist {
-  flex-direction: column;
-  overflow: visible auto;
-}
 /* The panels slot renders inline; individual panels control their own display */
 ::slotted([role='tabpanel']) {
   display: block;