@lmvz-ds/components 0.35.2 → 0.36.1

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
+import { ariaHostMirrorAttributes } from "../../utils/aria/aria.constants";
 import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 import { componentOnReady } from "../../utils/stencil/stencil.util";
 let inputIdCounter = 0;
@@ -11,9 +12,11 @@ export class LmvzInput extends ReactiveControllerHost {
     }
     lmvzInput;
     internals;
+    inputValidityActive = false;
     nativeInputElement;
     inputId = `lmvz-input-${inputIdCounter++}`;
     initialValue = '';
+    ariaHostMirrorObserver;
     nativeError = false;
     errorFromProp = false;
     get helperId() {
@@ -66,7 +69,7 @@ export class LmvzInput extends ReactiveControllerHost {
     async setValue(newValue) {
         const input = this.nativeInputElement;
         const val = newValue ?? '';
-        if (input) {
+        if (input && input.value !== val) {
             input.value = val;
         }
         this.value = val;
@@ -88,6 +91,9 @@ export class LmvzInput extends ReactiveControllerHost {
     async reportValidity() {
         return this.nativeInputElement?.reportValidity?.() ?? false;
     }
+    async getValidationMessage() {
+        return this.nativeInputElement?.validationMessage ?? '';
+    }
     async getInputElement() {
         if (!this.nativeInputElement) {
             await new Promise((resolve) => componentOnReady(this.el, resolve));
@@ -104,14 +110,54 @@ export class LmvzInput extends ReactiveControllerHost {
         this.initialValue = this.value ?? '';
         super.componentWillLoad();
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.ariaHostMirrorObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                this.mirrorHostAriaAttribute(mutation.attributeName);
+            }
+        });
+        this.ariaHostMirrorObserver.observe(this.el, {
+            attributes: true,
+            attributeFilter: [...ariaHostMirrorAttributes],
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.ariaHostMirrorObserver?.disconnect();
+        this.ariaHostMirrorObserver = undefined;
+    }
+    componentDidLoad() {
+        super.componentDidLoad();
+        for (const attr of ariaHostMirrorAttributes) {
+            this.mirrorHostAriaAttribute(attr);
+        }
+    }
+    mirrorHostAriaAttribute(attr) {
+        if (!attr || !this.nativeInputElement)
+            return;
+        if (this.el.hasAttribute(attr)) {
+            const value = this.el.getAttribute(attr);
+            if (value !== null) {
+                this.nativeInputElement.setAttribute(attr, value);
+            }
+        }
+        else {
+            this.nativeInputElement.removeAttribute(attr);
+        }
+    }
     formAssociatedCallback(form) {
         if (!form)
             return;
         this.internals.setFormValue?.(this.value ?? '');
     }
     formResetCallback() {
+        this.inputValidityActive = false;
         this.internals.setValidity({});
         this.setValue(this.initialValue);
+        if (this.nativeInputElement?.checkValidity?.()) {
+            this.nativeError = false;
+        }
     }
     formStateRestoreCallback(state) {
         this.setValue(state);
@@ -125,35 +171,45 @@ export class LmvzInput extends ReactiveControllerHost {
         this.setValue(newValue);
     }
     handleDisabledChange(disabled) {
-        if (disabled && this.nativeInputElement) {
+        if (!this.nativeInputElement)
+            return;
+        if (disabled) {
             this.nativeInputElement.blur();
         }
+        else {
+            this.inputValidityActive = false;
+        }
     }
     handleInput = (event) => {
         const input = event.target;
         this.setValue(input.value);
+        if (!this.inputValidityActive)
+            return;
+        this.updateNativeError('input');
     };
     handleChange = (event) => {
-        const input = event.target ?? this.nativeInputElement;
-        this.updateNativeError(input);
     };
     handleFocus = () => { };
-    handleBlur = (event) => {
-        const input = event.target;
-        input.checkValidity?.();
+    handleInvalid = () => this.updateNativeError('invalid');
+    handleBlur = () => {
+        this.inputValidityActive = true;
+        this.updateNativeError('blur');
     };
-    updateNativeError(fromEvent) {
-        const input = fromEvent ?? this.nativeInputElement;
+    updateNativeError(sourceEvent) {
+        const input = this.nativeInputElement;
         if (!input)
             return;
-        this.nativeError = !(input.checkValidity?.() ?? true);
+        const newState = sourceEvent === 'invalid' ? true : !(input.checkValidity?.() ?? true);
+        if (this.nativeError === newState)
+            return;
+        this.nativeError = newState;
     }
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (h("div", { key: '693614c334a94373dcef56b461455bf872249a69', class: classNames('input-container', {
+        return (h("div", { key: '626697f00e9ba3ad46e6304d06b04df0f27bb2c2', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: '0eb36d76661d70bea71027ca7b30763d89bd6cb6', class: "input-wrapper" }, h("slot", { key: '03adf18ebe01fe70dc821dcea2bb2963df40f8b4', name: "before-input" }), h("div", { key: 'f1254561b53e321d0f2e4cf4ac93936119083f3f', class: "label-input-group" }, h("label", { key: 'e17cdec368fd36a041d9d8853f4a82249f1b5d8c', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: 'b3e003bf972c3ad5b6c5b25f8ee509bd5d8df758', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '75f192118b7a4c3e507172e13d0ae7e32118aad3', 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, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("slot", { key: '58a9701259ca92fd7441c1480de741d92bc47bc9', name: "after-input" })), h("div", { key: '396b719d080c781f38d736e28e9c048f629d6ffe', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '9e5c86e6098f58d95c0984348d3da07b9e34e1fb', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, h("div", { key: '25ec1f448b689ff80defded1323f321d95d6b197', class: "input-wrapper" }, h("slot", { key: '1d5f301e0327b4cd1714f403615f94658a754466', name: "before-input" }), h("div", { key: 'ef553e6e8f6b74a5bb7cddef003d3b51650c7c9d', class: "label-input-group" }, h("label", { key: '17d92ff7c65598739e8a379680580561936e21dc', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: 'cd40da3c85cc6cea49d7d8d270bba317534779f5', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '3ede0644d383c2a3f702230de2aac6fbcb2c7a06', 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, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid })), h("slot", { key: 'b282c5d9553b72af7fd05ed0f872af0d7b8a5689', name: "after-input" })), h("div", { key: 'da6008e798cb5ee29fa7d1ba3208057c1845a217', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '5e7717a2d0dd32c53dd7ba6e170152239f3bfae9', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get is() { return "lmvz-input"; }
     static get encapsulation() { return "scoped"; }
@@ -849,6 +905,23 @@ export class LmvzInput extends ReactiveControllerHost {
                     "tags": []
                 }
             },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the current validation message, if any.",
+                    "tags": []
+                }
+            },
             "getInputElement": {
                 "complexType": {
                     "signature": "() => Promise<HTMLInputElement | undefined>",

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: '338116d5af3112ec2a4a09b652048b733565a7d4' }, h("a", { key: 'ae70aa2320ea2eeca56a14714de4dcfb06b8c94c', href: this.computeHref(), target: this.target, rel: rel }, h("slot", { key: '4852b3336a94a46f363a83fb2c4f6d267f680d3d' }), h("lmvz-icon", { key: 'e7f72016611a7d741eef7c81a047e026c699bdef', "aria-hidden": "true", icon: iconSvg }), isBlank && h("span", { key: 'b4138b479b7c36c3b16c8e96fc6e39736222b26f', class: "sr-only" }, this.externalLabel))));
+        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))));
     }
     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: '9c86e99a0427a5d11925a30bcdb9f88124006413' }, h("slot", { key: '9a578cdf49bd1edd981d68d7b28c39b784980345', ref: (e) => (this.validationSlot = e) })));
+        return (h(Host, { key: 'cd5814d6bcfa9b0f5b1b2f5108ce0fc65722b909' }, h("slot", { key: 'b503b252c95bc09ca4b888d4576badd3976292e9', 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: '99dad82a6300fb8d089f1ea688186d4b4316a058', role: role }, this.leadingIcon && h("span", { key: '2adf33102f7075a83ebf29d9b6e0d433a17beb68', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), h("span", { key: '286d3d0ea065534b84be18c927b2fcd7f30f34bd', class: "message" }, h("slot", { key: '261e865980515a816382b2c7c6b3a52b500308bf', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (h("lmvz-button", { key: '46d964c0490bbdd47426fc228db0e3ccb108b416', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (h("lmvz-button", { key: 'ce1ec8beb756c2e11c948e227f94f81bd5568c88', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, h("lmvz-icon", { key: '5361c424e77ffea7984c2fd42357666cd86ba1d6', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
+        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 })))));
     }
     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: '8b5f506cdac223a440309d472639fe965b94f8c2' }, h("dialog", { key: '0b70ac4d9590266271052c4d7fdef03c684d9b72', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: '25b529bec1905408c2041b7370ab37586eade47d', class: "modal-shell" }, h("header", { key: 'd86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: '7fd7059bfb0b90834895a87c2f2598e2e8c2ba80', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: 'b6eb7885e220e5def4c3c8420d5b83f4a7e30907', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '72e17391097dfa756e572764f40080b6eec222b2', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onLmvzActivation: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '7bbae1aefa9ccc6646d5861683e3476339a545e4', icon: closeIconSvg }))), h("div", { key: '9f22628448e9af527eb10ef2602c498afc55c029', class: "body" }, h("slot", { key: '413e72707749b3abc987ef47a81cccda4b874c84' })), h("footer", { key: 'a1a8f648e88d1f9045e9cf866d332aac69e033df', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: '7d7eeee7a2551a09bfb4fc513bde48828be5ee8b', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: '76b00523167c5fa08f11fc351a37638227401711', name: "actions" })))))));
+        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" })))))));
     }
     static get is() { return "lmvz-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@
 
 }
 :host {
-  --lmvz-popover-z-index-internal: var(--lmvz-popover-z-index, 1);
+  --lmvz-popover-z-index-internal: var(--lmvz-popover-z-index, 100);
   display: contents;
 
   .container {

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

@@ -18,6 +18,7 @@ export class LmvzPopover {
     placement = 'bottom-start';
     size = 'sm';
     autoFocus = true;
+    containerRole = 'dialog';
     label;
     lmvzOpen;
     lmvzClose;
@@ -38,6 +39,7 @@ export class LmvzPopover {
     }
     componentDidLoad() {
         autoAssignId(this.el);
+        this.syncContainerId();
     }
     handleOpenChange(isOpen) {
         if (isOpen) {
@@ -64,16 +66,26 @@ export class LmvzPopover {
         this.removeCloseHandlers();
         this.extEventController.abort();
     }
+    syncContainerId() {
+        const hostId = this.el.getAttribute('id');
+        if (!hostId || !this.containerEl)
+            return;
+        this.containerEl.id = hostId;
+    }
     setupAnchorEl() {
         const { anchorEl } = this;
         if (!anchorEl) {
             console.warn('no anchor element set for', this);
             return;
         }
+        this.syncContainerId();
         if (!anchorEl.hasAttribute('aria-haspopup')) {
-            anchorEl.setAttribute('aria-haspopup', 'dialog');
+            anchorEl.setAttribute('aria-haspopup', this.containerRole === 'dialog' ? 'dialog' : this.containerRole);
+        }
+        anchorEl.setAttribute('aria-controls', this.containerEl?.id || this.el.getAttribute('id'));
+        if (!anchorEl.hasAttribute('aria-expanded')) {
+            anchorEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
         }
-        anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
         if (isActionButton(anchorEl)) {
             addElementActivationListener(anchorEl, this.toggle.bind(this), this.extEventController.signal);
         }
@@ -98,10 +110,11 @@ export class LmvzPopover {
         await waitFrame();
         await this.updatePosition();
         autoAssignId(this.el);
+        this.syncContainerId();
         this.applyAnchorAriaOpen();
         this.lmvzOpen.emit();
         await waitFrame();
-        if (this.autoFocus) {
+        if (this.autoFocus && this.containerRole === 'dialog') {
             this.focusFirst();
         }
     }
@@ -159,7 +172,8 @@ export class LmvzPopover {
         document.addEventListener('mousedown', (event) => {
             if (!this.open)
                 return;
-            if (this.el.contains(event.target))
+            const mouseTarget = (event.target?.shadowRoot ?? document).elementFromPoint(event.x, event.y) ?? event.target;
+            if (this.el === event.target || this.el.contains(mouseTarget) || this.el.contains(event.target))
                 return;
             this.triggerClose();
         }, options);
@@ -175,7 +189,7 @@ export class LmvzPopover {
         this.closureController?.abort();
     }
     render() {
-        return (h(Host, { key: '744dae23d80c1e81a0b8bd2e9fcb02c6669d54cd' }, h("div", { key: '7f40e25f1e05738b2bbf900b90613004eb188395', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, h("slot", { key: '5a400fd9e697254007973f2dce172588fe3760ee', ref: (el) => (this.slotEl = el) }))));
+        return (h(Host, { key: '8dadcc766deebc03ea744fd1002078b382bfd48d' }, h("div", { key: 'd332714964212db6f5446afb1b8f38ff031a87b9', role: this.containerRole, part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, h("slot", { key: '0fa1d214c8c48942751cbd4759ebc992eacc8f72', ref: (el) => (this.slotEl = el) }))));
     }
     static get is() { return "lmvz-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -313,7 +327,7 @@ export class LmvzPopover {
                             "name": "default",
                             "text": "true"
                         }],
-                    "text": "Whether to move focus to the first focusable element on open."
+                    "text": "Whether to move focus to the first focusable element on open.\nIgnored (treated as `false`) when `containerRole` is not `'dialog'`, since\nnon-dialog roles (e.g. `'listbox'` for combobox/activedescendant integrations)\nmust keep focus on the anchor/trigger element."
                 },
                 "getter": false,
                 "setter": false,
@@ -321,6 +335,36 @@ export class LmvzPopover {
                 "attribute": "auto-focus",
                 "defaultValue": "true"
             },
+            "containerRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Popover.ContainerRole",
+                    "resolved": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"",
+                    "references": {
+                        "Popover": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Popover",
+                            "referenceLocation": "Popover"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'dialog'"
+                        }],
+                    "text": "ARIA role applied to the popover container.\nUse `'dialog'` (default) for focus-moving dialog-style popovers.\nUse a non-dialog role such as `'listbox'` to integrate with a `role=\"combobox\"`\ntrigger using the activedescendant model, in which case focus is kept on the\nanchor/trigger element instead of being moved into the popover."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "container-role",
+                "defaultValue": "'dialog'"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,

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

@@ -22,7 +22,14 @@ export class LmvzRadio extends ReactiveControllerHost {
     name;
     disabled = false;
     required = false;
-    error = false;
+    nativeError = false;
+    errorFromProp = false;
+    get error() {
+        return this.errorFromProp || this.nativeError;
+    }
+    set error(value) {
+        this.errorFromProp = value;
+    }
     helperText;
     form;
     autofocus = false;
@@ -30,6 +37,7 @@ export class LmvzRadio extends ReactiveControllerHost {
     _handlingFormReset = false;
     handleCheckedChange(newVal, oldVal) {
         this.internals.setFormValue?.(newVal ? this.value : null);
+        this.updateValidity();
         if (!newVal && oldVal && !this._handlingNativeChange && !this._handlingFormReset) {
             this.lmvzChange.emit(false);
         }
@@ -37,6 +45,9 @@ export class LmvzRadio extends ReactiveControllerHost {
             this.lmvzChange.emit(true);
         }
     }
+    handleRequiredChange() {
+        this.updateValidity();
+    }
     handleValueChange(newVal) {
         if (this.checked) {
             this.internals.setFormValue?.(newVal);
@@ -58,6 +69,9 @@ export class LmvzRadio extends ReactiveControllerHost {
     async reportValidity() {
         return this.internals?.reportValidity() ?? true;
     }
+    async getValidationMessage() {
+        return this.internals?.validationMessage ?? '';
+    }
     constructor() {
         super();
         this.addController(new AriaValidationController(this, {
@@ -69,8 +83,13 @@ export class LmvzRadio extends ReactiveControllerHost {
     componentWillLoad() {
         this.initialChecked = this.checked;
         this.internals.setFormValue?.(this.checked ? this.value : null);
+        this.updateValidity();
         super.componentWillLoad();
     }
+    componentDidLoad() {
+        this.updateValidity();
+        super.componentDidLoad();
+    }
     formAssociatedCallback() {
         this.internals.setFormValue?.(this.checked ? this.value : null);
     }
@@ -82,6 +101,8 @@ export class LmvzRadio extends ReactiveControllerHost {
         finally {
             this._handlingFormReset = false;
         }
+        this.updateValidity();
+        this.radioGroupController.refreshValidity();
     }
     formStateRestoreCallback(state) {
         if (typeof state !== 'string')
@@ -94,6 +115,20 @@ export class LmvzRadio extends ReactiveControllerHost {
             this._handlingFormReset = false;
         }
     }
+    isAnyInGroupChecked() {
+        return this.radioGroupController.isAnyChecked();
+    }
+    updateValidity() {
+        if (this.required && !this.isAnyInGroupChecked()) {
+            this.internals.setValidity?.({ valueMissing: true }, 'Please select an option.', this.nativeInput);
+            return;
+        }
+        this.internals.setValidity?.({});
+        this.nativeError = false;
+    }
+    handleInvalid() {
+        this.nativeError = true;
+    }
     handleChange = (event) => {
         this._handlingNativeChange = true;
         try {
@@ -136,8 +171,11 @@ export class LmvzRadio extends ReactiveControllerHost {
             return;
         this.radioGroupController.setFocused(target);
     }
+    retargetInnerClicks() {
+        this.nativeInput?.click();
+    }
     render() {
-        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))));
+        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))));
     }
     static get is() { return "lmvz-radio"; }
     static get encapsulation() { return "scoped"; }
@@ -232,13 +270,13 @@ export class LmvzRadio extends ReactiveControllerHost {
                 "docs": {
                     "tags": [{
                             "name": "remarks",
-                            "text": "A value of `\"\"` (empty string) is forwarded to the native `<input>`, but\n`RadioGroupController` treats it as unnamed \u2014 no group coordination occurs between\nradios with `name=\"\"`."
+                            "text": "A value of `\"\"` (empty string) is treated as unnamed by `RadioGroupController` \u2014\nno group coordination occurs between radios with `name=\"\"`."
                         }],
-                    "text": "Name attribute for form submission via ElementInternals.\n\nWhen multiple `lmvz-radio` elements share the same `name` and form scope,\nthe `name` is forwarded directly to the native `<input type=\"radio\">`,\nenabling browser-native mutual exclusion: selecting one radio automatically\ndeselects all others with the same name in that form. If a radio is outside\nany form, its scope defaults to the document level \u2014 same-name radios\noutside forms form a document-scoped group. Radios with the same `name` in\ndifferent forms are independent groups.\n\nThe `RadioGroupController` automatically manages roving tabindex (only the\nchecked radio has `tabindex=\"0\"`) and keyboard navigation (Arrow keys, Home, End)\nwithin the form-scoped group."
+                    "text": "Name attribute for form submission via ElementInternals.\n\nThe `name` is NOT forwarded to the native `<input type=\"radio\">` \u2014 this component\nrenders in `scoped` (light DOM) mode, so a native `name` attribute would make the\ninner `<input>` an independent, genuinely form-associated element of the outer\n`<form>`, submitting a duplicate value alongside the host's own `ElementInternals`\nparticipation. Instead, `name` is used purely as a JS-level grouping key: the\n`RadioGroupController` tracks all `lmvz-radio` hosts sharing the same `name` and form\nscope in an internal registry and enforces mutual exclusion itself (via\n`RadioGroup.select()`, which sets `checked = false` on every other host in the group).\nIf a radio is outside any form, its scope defaults to the document level \u2014 same-name\nradios outside forms form a document-scoped group. Radios with the same `name` in\ndifferent forms are independent groups.\n\nThe `RadioGroupController` also manages roving tabindex (only the checked radio has\n`tabindex=\"0\"`) and keyboard navigation (Arrow keys, Home, End) within the group."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name"
             },
             "disabled": {
@@ -304,11 +342,10 @@ export class LmvzRadio extends ReactiveControllerHost {
                         }],
                     "text": "Whether the radio is in an error state."
                 },
-                "getter": false,
-                "setter": false,
+                "getter": true,
+                "setter": true,
                 "reflect": true,
-                "attribute": "error",
-                "defaultValue": "false"
+                "attribute": "error"
             },
             "helperText": {
                 "type": "string",
@@ -373,6 +410,11 @@ export class LmvzRadio extends ReactiveControllerHost {
             }
         };
     }
+    static get states() {
+        return {
+            "nativeError": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "lmvzChange",
@@ -458,6 +500,23 @@ export class LmvzRadio extends ReactiveControllerHost {
                     "text": "Reports validation errors to the user.",
                     "tags": []
                 }
+            },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the current validation message, if any.",
+                    "tags": []
+                }
             }
         };
     }
@@ -466,6 +525,9 @@ export class LmvzRadio extends ReactiveControllerHost {
         return [{
                 "propName": "checked",
                 "methodName": "handleCheckedChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleRequiredChange"
             }, {
                 "propName": "value",
                 "methodName": "handleValueChange"
@@ -476,6 +538,12 @@ export class LmvzRadio extends ReactiveControllerHost {
     }
     static get listeners() {
         return [{
+                "name": "invalid",
+                "method": "handleInvalid",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "keydown",
                 "method": "handleKeydown",
                 "target": undefined,