@lmvz-ds/components 0.36.0 → 0.36.1

package/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lmvz-datepicker.cjs",[[593,"lmvz-datepicker",{"value":[6145],"visibleMonth":[6145,"visible-month"],"min":[1],"max":[1],"locale":[1],"firstDayOfWeek":[2,"first-day-of-week"],"disabled":[516],"readonly":[516],"required":[516],"name":[513],"label":[1],"placeholder":[1],"helperText":[1,"helper-text"],"errorMessage":[1,"error-message"],"open":[1540],"displayFormat":[1,"display-format"],"focusedDate":[32],"valueDate":[32],"visibleMonthDate":[32],"inputText":[32],"hasUnparseableInput":[32],"isInvalid":[32],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"]],{"required":[{"handleValidityRelevantPropChange":0}],"min":[{"handleValidityRelevantPropChange":0}],"max":[{"handleValidityRelevantPropChange":0}],"locale":[{"handleDisplayFormatChange":0}],"displayFormat":[{"handleDisplayFormatChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message.cjs",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-link.cjs",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"],"initFocus":[64]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-action-list.cjs",[[774,"lmvz-action-list",{"label":[1],"initFocus":[64]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"size":[513],"highlighted":[516],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-spinner.cjs",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab.cjs",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"initFocus":[64],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[769,"lmvz-button-group",{"stacked":[516],"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-input_2.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"size":[513],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}],[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"label":[1],"anchorEl":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":1}]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[514,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1],"buttonRole":[1,"button-role"]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
+  return index.bootstrapLazy([["lmvz-datepicker.cjs",[[593,"lmvz-datepicker",{"value":[6145],"visibleMonth":[6145,"visible-month"],"min":[1],"max":[1],"locale":[1],"firstDayOfWeek":[2,"first-day-of-week"],"disabled":[516],"readonly":[516],"required":[516],"name":[513],"label":[1],"placeholder":[1],"helperText":[1,"helper-text"],"errorMessage":[1,"error-message"],"open":[1540],"displayFormat":[1,"display-format"],"focusedDate":[32],"valueDate":[32],"visibleMonthDate":[32],"inputText":[32],"hasUnparseableInput":[32],"isInvalid":[32],"nativeError":[32],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"],[0,"invalid","handleInvalid"]],{"required":[{"handleValidityRelevantPropChange":0}],"min":[{"handleValidityRelevantPropChange":0}],"max":[{"handleValidityRelevantPropChange":0}],"locale":[{"handleDisplayFormatChange":0}],"displayFormat":[{"handleDisplayFormatChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message.cjs",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-link.cjs",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":0}]}]]],["lmvz-select.cjs",[[838,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"error":[6660],"errorMessage":[1,"error-message"],"disabled":[516],"required":[516],"name":[513],"size":[513],"highlighted":[516],"nativeError":[32],"selectedLabel":[32],"selectedId":[32],"activeId":[32],"isOpen":[32],"optionGroups":[32],"focusTrigger":[64],"blurTrigger":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"value":[{"handleValueChange":0}],"required":[{"handleRequiredChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"],"initFocus":[64]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-action-list.cjs",[[774,"lmvz-action-list",{"label":[1],"initFocus":[64]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[513],"disabled":[516],"required":[516],"error":[6660],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"nativeError":[32],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[513],"disabled":[516],"required":[516],"error":[6660],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"nativeError":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"],[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-spinner.cjs",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab.cjs",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"initFocus":[64],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[769,"lmvz-button-group",{"stacked":[516],"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"size":[513],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-popover.cjs",[[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"containerRole":[1,"container-role"],"label":[1],"anchorEl":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":1}]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[514,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1],"buttonRole":[1,"button-role"]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/cjs/stencil.util-CBrPLd-F.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var async_util = require('./async.util-Dnl6c82X.js');
+
+const componentOnReady = (stencilEl, callback) => {
+    if (hasLazyBuild(stencilEl)) {
+        stencilEl.componentOnReady().then((resolvedEl) => callback(resolvedEl));
+    }
+    else {
+        async_util.raf(() => callback(stencilEl));
+    }
+};
+const hasLazyBuild = (stencilEl) => {
+    return stencilEl.componentOnReady !== undefined;
+};
+
+exports.componentOnReady = componentOnReady;

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

@@ -86,6 +86,7 @@ input {
   margin: 0;
   cursor: pointer;
   z-index: 1;
+  appearance: none;
 }
 .box {
   display: flex;
@@ -175,7 +176,8 @@ label {
     cursor: not-allowed;
   }
 }
-:host(:focus-within) .pill {
+/* :host(:focus-within) .pill { */
+:host:has(:focus-visible) .pill {
   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
 }
@@ -200,7 +202,7 @@ label {
     color: HighlightText;
   }
 
-  :host(:focus-within) .pill {
+  :host:has(:focus-visible) .pill {
     outline-color: Highlight;
     box-shadow: none;
   }

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

@@ -30,7 +30,14 @@ export class LmvzCheckbox 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;
+    }
     errorMessage;
     helperText;
     form;
@@ -39,6 +46,10 @@ export class LmvzCheckbox extends ReactiveControllerHost {
     handleCheckedChange(val) {
         this.checkedState = val;
         this.internals.setFormValue?.(val ? (this.value ?? 'on') : null);
+        this.updateValidity();
+    }
+    handleRequiredChange() {
+        this.updateValidity();
     }
     lmvzChange;
     async focusInput() {
@@ -50,6 +61,9 @@ export class LmvzCheckbox extends ReactiveControllerHost {
     async reportValidity() {
         return this.internals?.reportValidity() ?? true;
     }
+    async getValidationMessage() {
+        return this.internals?.validationMessage ?? '';
+    }
     constructor() {
         super();
         this.addController(new AriaValidationController(this, {
@@ -60,10 +74,15 @@ export class LmvzCheckbox extends ReactiveControllerHost {
         this.initialChecked = this.checked;
         this.checkedState = this.checked;
         this.internals.setFormValue?.(this.checked ? (this.value ?? 'on') : null);
+        this.updateValidity();
         super.componentWillLoad();
     }
+    componentDidLoad() {
+        this.updateValidity();
+        super.componentDidLoad();
+    }
     componentWillRender() {
-        if (this.error && !this.errorMessage) {
+        if (this.errorFromProp && !this.errorMessage) {
             console.warn('lmvz-checkbox: error=true set without errorMessage — no visual-only error state is rendered. Provide errorMessage to communicate the error to users.');
         }
         super.componentWillRender();
@@ -73,6 +92,7 @@ export class LmvzCheckbox extends ReactiveControllerHost {
     }
     formResetCallback() {
         this.checked = this.initialChecked;
+        this.updateValidity();
     }
     formStateRestoreCallback(state) {
         this.checked = state === (this.value ?? 'on');
@@ -85,8 +105,19 @@ export class LmvzCheckbox extends ReactiveControllerHost {
     retargetInnerClicks() {
         this.nativeInput?.click();
     }
+    updateValidity() {
+        if (this.required && !this.checked) {
+            this.internals.setValidity?.({ valueMissing: true }, 'Please check this box.', this.nativeInput);
+            return;
+        }
+        this.internals.setValidity?.({});
+        this.nativeError = false;
+    }
+    handleInvalid() {
+        this.nativeError = true;
+    }
     render() {
-        return (h(Host, { key: 'b6b4153dbf80af15cb15799889ca23b621b4ef73' }, h("div", { key: 'f11d6baaa4b04ee74b201be8c4e125ccd5c366aa', class: "pill" }, h("input", { key: 'd61dccfa163ecf4fffa95a5d44be35adbb8ee8ff', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "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: '87d62f1e0572e174e6d15f30ff59e37f6a5333cb', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '74d29a32599f6c1ee8bde0cb6f27e384de7fcc2d', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: '544990c81b3f7f90b53902d580d2eb2197edfa8b', class: "content" }, h("label", { key: '1884744656a280f85bec91b27315d3a6b70e8238', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '6783ff413a884c78dbd52e07cc7b433f5a9dcf29', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: '7c19fe406223a11e25df54cdfa304bc000eb421f', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        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))));
     }
     static get is() { return "lmvz-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -184,7 +215,7 @@ export class LmvzCheckbox extends ReactiveControllerHost {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name"
             },
             "disabled": {
@@ -250,11 +281,10 @@ export class LmvzCheckbox extends ReactiveControllerHost {
                         }],
                     "text": "Whether the checkbox is in an error state."
                 },
-                "getter": false,
-                "setter": false,
+                "getter": true,
+                "setter": true,
                 "reflect": true,
-                "attribute": "error",
-                "defaultValue": "false"
+                "attribute": "error"
             },
             "errorMessage": {
                 "type": "string",
@@ -340,6 +370,7 @@ export class LmvzCheckbox extends ReactiveControllerHost {
     }
     static get states() {
         return {
+            "nativeError": {},
             "checkedState": {}
         };
     }
@@ -413,6 +444,23 @@ export class LmvzCheckbox 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": []
+                }
             }
         };
     }
@@ -421,6 +469,18 @@ export class LmvzCheckbox extends ReactiveControllerHost {
         return [{
                 "propName": "checked",
                 "methodName": "handleCheckedChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleRequiredChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "invalid",
+                "method": "handleInvalid",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
     static get attachInternalsMemberName() { return "internals"; }

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

@@ -37,7 +37,6 @@
 }
 
 }
-/* ─── Host / Panel ─────────────────────────────────────────────────────────── */
 :host {
   display: inline-block;
   width: 100%;
@@ -51,7 +50,6 @@
   flex-direction: column;
   gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
 }
-/* ─── Header ────────────────────────────────────────────────────────────────── */
 .datepicker-header {
   display: flex;
   align-items: center;
@@ -71,7 +69,6 @@
   pointer-events: none;
   user-select: none;
 }
-/* ─── Weekday row ────────────────────────────────────────────────────────────── */
 .datepicker-weekday-row {
   display: flex;
   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
@@ -88,7 +85,6 @@
   min-width: 0;
   text-align: center;
 }
-/* ─── Grid ────────────────────────────────────────────────────────────────────── */
 .datepicker-grid {
   display: flex;
   flex-direction: column;
@@ -98,7 +94,6 @@
   display: flex;
   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
 }
-/* ─── Day cells ────────────────────────────────────────────────────────────────── */
 [part~='day'] {
   /* Reset native button */
   all: unset;

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

@@ -333,10 +333,17 @@ export class LmvzDatepicker {
         }
         const isInvalid = Object.values(flags).some(Boolean);
         this.isInvalid = isInvalid;
+        if (!isInvalid) {
+            this.nativeError = false;
+        }
         const validationLabels = getValidationLabels(this.locale);
         this.internals.setValidity?.(flags, isInvalid ? this.errorMessage || validationLabels.invalidDateMessage : undefined, isInvalid ? this.el : undefined);
     }
+    handleInvalid() {
+        this.nativeError = true;
+    }
     isInvalid = false;
+    nativeError = false;
     get effectivePlaceholder() {
         return this.placeholder ?? derivePatternFromLocale(this.locale).toLowerCase();
     }
@@ -434,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: 'df61136bb4d184e91e086a06f60e3c198f8a2b85' }, h("lmvz-input", { key: '04986afb4a0926df4da693de6210ee4fccd74bd7', ref: (el) => {
+        return (h(Host, { key: 'af9d7f075bf97d7eb58c6557f43cf8a245d5f712' }, h("lmvz-input", { key: 'eef4be58281b8356d443c65c5cf6451192e70f75', 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.isInvalid, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.inputText, autocomplete: "off", onLmvzInput: this.handleInputTextChange, onKeyDown: this.handleInputKeydown }, h("lmvz-icon", { key: '47897492e6df2f4b303c99aa33c48f326f3d9d63', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), h("lmvz-popover", { key: 'd2904def9519907f56dada15df992800da77db55', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, h("div", { key: 'dbdfe38144a63e5ac9de4c46e0df9918f898de28', 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: '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()))));
     }
     static get is() { return "lmvz-datepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -823,7 +830,8 @@ export class LmvzDatepicker {
             "visibleMonthDate": {},
             "inputText": {},
             "hasUnparseableInput": {},
-            "isInvalid": {}
+            "isInvalid": {},
+            "nativeError": {}
         };
     }
     static get events() {
@@ -982,6 +990,12 @@ export class LmvzDatepicker {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "invalid",
+                "method": "handleInvalid",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
     static get attachInternalsMemberName() { return "internals"; }

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

@@ -107,7 +107,7 @@
   cursor: not-allowed;
   pointer-events: none;
 }
-.input-container:focus-within .input-wrapper {
+:host:has(:focus-visible) .input-wrapper {
   border-color: var(--input-border-color-focus);
   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));

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

@@ -12,6 +12,7 @@ export class LmvzInput extends ReactiveControllerHost {
     }
     lmvzInput;
     internals;
+    inputValidityActive = false;
     nativeInputElement;
     inputId = `lmvz-input-${inputIdCounter++}`;
     initialValue = '';
@@ -68,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;
@@ -90,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));
@@ -148,8 +152,12 @@ export class LmvzInput extends ReactiveControllerHost {
         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);
@@ -163,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: 'b7e432c7dbc598189d85040252455c5163fe6395', class: classNames('input-container', {
+        return (h("div", { key: '626697f00e9ba3ad46e6304d06b04df0f27bb2c2', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: 'a912a49f4372423d06c7a4856fb5101cb0afd0c5', class: "input-wrapper" }, h("slot", { key: '88e4ee4518de0bfeef9e30a254e0d2ec6693048c', name: "before-input" }), h("div", { key: 'a413a7b7e8f6510f1c09fd0052889c8fad1653f1', class: "label-input-group" }, h("label", { key: '9639713adff74afcf4fb1eab0e74b7447d02b986', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '28c1069908a2f1905008f1decce9077e9ef1538a', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '421fd9bb50de8ba189a59578373060593e1a9aab', 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: '09557e1d84bb4ab2456caf391a177c8f80063ab9', name: "after-input" })), h("div", { key: '34162f744f8584991e4493ebcdb6a2f75a1f8990', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: 'a3c3bffbb439f9127278cedbfefa5e1986e68f23', 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"; }
@@ -887,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-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,23 @@ 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.el.getAttribute('id'));
+        anchorEl.setAttribute('aria-controls', this.containerEl?.id || this.el.getAttribute('id'));
         if (!anchorEl.hasAttribute('aria-expanded')) {
             anchorEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
         }
@@ -101,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();
         }
     }
@@ -179,7 +189,7 @@ export class LmvzPopover {
         this.closureController?.abort();
     }
     render() {
-        return (h(Host, { key: 'f996d0a561b8f6d00913b0e2e84ac9711b878f84' }, h("div", { key: 'f7fff89cf470a96b0d3d2adce43a92069d754861', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, h("slot", { key: '2263710272a745d74f118fab6d22f0d05319fc74', 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"; }
@@ -317,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,
@@ -325,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,