@lmvz-ds/components 0.36.0 → 0.36.1

package/hydrate/index.mjs

@@ -5864,7 +5864,7 @@ function getLmvzComponentMetaInfo(el, key) {
 function isFocusControllerHost(el) {
     return Boolean(getLmvzComponentMetaInfo(el, 'isFocusControllerHost'));
 }
-const defaultConfig = {
+const defaultConfig$1 = {
     orientation: 'both',
     enableHomeAndEnd: false,
     manageTabIndex: false,
@@ -5877,7 +5877,7 @@ class DirectionalFocusController {
     constructor(host, config = {}) {
         this.host = host;
         this.config = {
-            ...defaultConfig,
+            ...defaultConfig$1,
             ...config,
         };
     }
@@ -8795,7 +8795,7 @@ class LmvzCard {
 
 const checkmarkSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
 
-const lmvzCheckboxCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-checkbox-h {   display: inline-block;    --checkbox-box-size: var(--lmvz-global-s18, 18px);    --checkbox-border-radius: var(--lmvz-global-s4, 4px);     --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);   --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);   --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419);    --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe);    --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);    --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc);    --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);   --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);   --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419);   --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);    --checkbox-easing: var(--lmvz-global-easing-default, ease);   --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox {   display: flex;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   border-radius: var(--lmvz-semantic-border-radius-round, 999px);         text-decoration: none;   background-color: transparent;   transition: background-color var(--checkbox-duration) var(--checkbox-easing); } input.sc-lmvz-checkbox {   position: absolute;   opacity: 0;   width: var(--checkbox-box-size);   height: var(--checkbox-box-size);   margin: 0;   cursor: pointer;   z-index: 1; } .box.sc-lmvz-checkbox {   display: flex;   align-items: center;   justify-content: center;   width: var(--checkbox-box-size);   height: var(--checkbox-box-size);   background-color: var(--checkbox-bg);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color);   border-radius: var(--checkbox-border-radius);   color: var(--checkbox-checkmark-color);   cursor: pointer;   transition:     border-color var(--checkbox-duration) var(--checkbox-easing),     background-color var(--checkbox-duration) var(--checkbox-easing);   pointer-events: none;   flex-shrink: 0; } .indicator.sc-lmvz-checkbox {   display: flex;   align-items: center;   justify-content: center;   line-height: 0; } .content.sc-lmvz-checkbox {   display: flex;   flex-direction: column;   overflow-wrap: break-word;   min-width: 0;   cursor: pointer; } label.sc-lmvz-checkbox {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);   color: var(--checkbox-label-color);   transition: color var(--checkbox-duration) var(--checkbox-easing);   cursor: pointer; } .helper-text.sc-lmvz-checkbox {   font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);      color: var(--checkbox-helper-color);   margin-block-start: 2px; } .error-text.sc-lmvz-checkbox {   font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);   color: var(--checkbox-error-color);   display: block;   margin-block-start: 4px;   padding-inline: 10px; }  @media (hover: hover) {   .pill.sc-lmvz-checkbox:hover {     background-color: var(--checkbox-wrapper-bg-hover);   }    .pill.sc-lmvz-checkbox:hover .box.sc-lmvz-checkbox {     border-color: var(--checkbox-border-color-hover);   } }  [checked].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox {   background-color: var(--checkbox-wrapper-bg-checked); } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox {   border-color: var(--checkbox-border-color-checked); } [checked].sc-lmvz-checkbox-h label.sc-lmvz-checkbox {   color: var(--checkbox-label-color-checked);    }  [error].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox {   border-color: var(--checkbox-border-color-error); } [error].sc-lmvz-checkbox-h .helper-text.sc-lmvz-checkbox {   color: var(--checkbox-error-color); } [disabled].sc-lmvz-checkbox-h {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;    input,   label,   .box,   .content {     cursor: not-allowed;   } } .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); }  @media (forced-colors: active) {   .box.sc-lmvz-checkbox {     forced-color-adjust: auto;     border-color: ButtonText;     background-color: Field;   }    [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox {     border-color: Highlight;     background-color: Field;   }    .indicator.sc-lmvz-checkbox {     color: ButtonText;   }    [checked].sc-lmvz-checkbox-h .indicator.sc-lmvz-checkbox {     color: HighlightText;   }    .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox {     outline-color: Highlight;     box-shadow: none;   } }`;
+const lmvzCheckboxCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-checkbox-h {   display: inline-block;    --checkbox-box-size: var(--lmvz-global-s18, 18px);    --checkbox-border-radius: var(--lmvz-global-s4, 4px);     --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);   --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);   --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419);    --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe);    --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);    --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc);    --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);   --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);   --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419);   --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);    --checkbox-easing: var(--lmvz-global-easing-default, ease);   --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox {   display: flex;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   border-radius: var(--lmvz-semantic-border-radius-round, 999px);         text-decoration: none;   background-color: transparent;   transition: background-color var(--checkbox-duration) var(--checkbox-easing); } input.sc-lmvz-checkbox {   position: absolute;   opacity: 0;   width: var(--checkbox-box-size);   height: var(--checkbox-box-size);   margin: 0;   cursor: pointer;   z-index: 1;   appearance: none; } .box.sc-lmvz-checkbox {   display: flex;   align-items: center;   justify-content: center;   width: var(--checkbox-box-size);   height: var(--checkbox-box-size);   background-color: var(--checkbox-bg);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color);   border-radius: var(--checkbox-border-radius);   color: var(--checkbox-checkmark-color);   cursor: pointer;   transition:     border-color var(--checkbox-duration) var(--checkbox-easing),     background-color var(--checkbox-duration) var(--checkbox-easing);   pointer-events: none;   flex-shrink: 0; } .indicator.sc-lmvz-checkbox {   display: flex;   align-items: center;   justify-content: center;   line-height: 0; } .content.sc-lmvz-checkbox {   display: flex;   flex-direction: column;   overflow-wrap: break-word;   min-width: 0;   cursor: pointer; } label.sc-lmvz-checkbox {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);   color: var(--checkbox-label-color);   transition: color var(--checkbox-duration) var(--checkbox-easing);   cursor: pointer; } .helper-text.sc-lmvz-checkbox {   font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);      color: var(--checkbox-helper-color);   margin-block-start: 2px; } .error-text.sc-lmvz-checkbox {   font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);   color: var(--checkbox-error-color);   display: block;   margin-block-start: 4px;   padding-inline: 10px; }  @media (hover: hover) {   .pill.sc-lmvz-checkbox:hover {     background-color: var(--checkbox-wrapper-bg-hover);   }    .pill.sc-lmvz-checkbox:hover .box.sc-lmvz-checkbox {     border-color: var(--checkbox-border-color-hover);   } }  [checked].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox {   background-color: var(--checkbox-wrapper-bg-checked); } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox {   border-color: var(--checkbox-border-color-checked); } [checked].sc-lmvz-checkbox-h label.sc-lmvz-checkbox {   color: var(--checkbox-label-color-checked);    }  [error].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox {   border-color: var(--checkbox-border-color-error); } [error].sc-lmvz-checkbox-h .helper-text.sc-lmvz-checkbox {   color: var(--checkbox-error-color); } [disabled].sc-lmvz-checkbox-h {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;    input,   label,   .box,   .content {     cursor: not-allowed;   } }  .sc-lmvz-checkbox-h:has(:focus-visible) .pill.sc-lmvz-checkbox {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); }  @media (forced-colors: active) {   .box.sc-lmvz-checkbox {     forced-color-adjust: auto;     border-color: ButtonText;     background-color: Field;   }    [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox {     border-color: Highlight;     background-color: Field;   }    .indicator.sc-lmvz-checkbox {     color: ButtonText;   }    [checked].sc-lmvz-checkbox-h .indicator.sc-lmvz-checkbox {     color: HighlightText;   }    .sc-lmvz-checkbox-h:has(:focus-visible) .pill.sc-lmvz-checkbox {     outline-color: Highlight;     box-shadow: none;   } }`;
 
 const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmarkSvg);
 let checkboxIdCounter = 0;
@@ -8824,7 +8824,14 @@ 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;
@@ -8833,6 +8840,10 @@ 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() {
@@ -8844,6 +8855,9 @@ class LmvzCheckbox extends ReactiveControllerHost {
     async reportValidity() {
         return this.internals?.reportValidity() ?? true;
     }
+    async getValidationMessage() {
+        return this.internals?.validationMessage ?? '';
+    }
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
@@ -8863,10 +8877,15 @@ 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();
@@ -8876,6 +8895,7 @@ class LmvzCheckbox extends ReactiveControllerHost {
     }
     formResetCallback() {
         this.checked = this.initialChecked;
+        this.updateValidity();
     }
     formStateRestoreCallback(state) {
         this.checked = state === (this.value ?? 'on');
@@ -8888,13 +8908,27 @@ 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 (hAsync(Host, { key: 'b6b4153dbf80af15cb15799889ca23b621b4ef73' }, hAsync("div", { key: 'f11d6baaa4b04ee74b201be8c4e125ccd5c366aa', class: "pill" }, hAsync("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 }), hAsync("span", { key: '87d62f1e0572e174e6d15f30ff59e37f6a5333cb', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: '74d29a32599f6c1ee8bde0cb6f27e384de7fcc2d', class: "indicator", innerHTML: CHECKMARK_SVG })), hAsync("span", { key: '544990c81b3f7f90b53902d580d2eb2197edfa8b', class: "content" }, hAsync("label", { key: '1884744656a280f85bec91b27315d3a6b70e8238', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: '6783ff413a884c78dbd52e07cc7b433f5a9dcf29', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: '7c19fe406223a11e25df54cdfa304bc000eb421f', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (hAsync(Host, { key: '089b23f8034fa089f358cc37923182c34f528cd2' }, hAsync("div", { key: '0af011ebf062332c330b49fa3076828204433ac4', class: "pill" }, hAsync("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 }), hAsync("span", { key: 'f21d34ab625c7eef23bd2761b399e8770cd62275', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: 'de2680ea17f34ab0124c529d88d4191c97d0a4c5', class: "indicator", innerHTML: CHECKMARK_SVG })), hAsync("span", { key: '1b2d24e43603033a5a77340164e002de326db11a', class: "content" }, hAsync("label", { key: 'b18f17abb4459b3783dc41d0031f4b26795fdcf5', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: 'f32591c55fcc88d130815780a9999fcb235afd88', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: '076489f5baadab07d95fc787e9ac71bae0a6ab68', onClick: this.retargetInnerClicks.bind(this), class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
         "checked": [{
                 "handleCheckedChange": 0
+            }],
+        "required": [{
+                "handleRequiredChange": 0
             }]
     }; }
     static get style() { return lmvzCheckboxCss(); }
@@ -8905,22 +8939,24 @@ class LmvzCheckbox extends ReactiveControllerHost {
             "label": [1],
             "checked": [1540],
             "value": [1],
-            "name": [1],
+            "name": [513],
             "disabled": [516],
             "required": [516],
-            "error": [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]
+            "reportValidity": [64],
+            "getValidationMessage": [64]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "invalid", "handleInvalid"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["checked", "checked"], ["disabled", "disabled"], ["required", "required"], ["error", "error"]]
+        "$attrsToReflect$": [["checked", "checked"], ["name", "name"], ["disabled", "disabled"], ["required", "required"], ["error", "error"]]
     }; }
 }
 
@@ -11296,7 +11332,7 @@ function parseFromDisplay(text, locale, displayFormat) {
     return `${String(yyyy).padStart(4, '0')}-${String(MM).padStart(2, '0')}-${String(dd).padStart(2, '0')}`;
 }
 
-const lmvzDatepickerCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  }  :host {   display: inline-block;   width: 100%; }  .datepicker-panel {   display: flex;   flex-direction: column;   gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); }  .datepicker-header {   display: flex;   align-items: center;   justify-content: space-between;   width: 100%; } .datepicker-month-label {      all: unset;      font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   text-align: center;   cursor: default;      pointer-events: none;   user-select: none; }  .datepicker-weekday-row {   display: flex;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   width: 100%; } .datepicker-weekday {   flex: 1;   display: flex;   align-items: center;   justify-content: center;   font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5     Router);   color: var(--lmvz-semantic-color-on-surface-secondary, #545454);   min-width: 0;   text-align: center; }  .datepicker-grid {   display: flex;   flex-direction: column;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } .datepicker-week-row {   display: flex;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); }  [part~='day'] {      all: unset;      flex: 1;      width: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   min-width: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   box-sizing: border-box;    display: flex;   align-items: center;   justify-content: center;    border-radius: var(--lmvz-semantic-border-radius-round, 999px);   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   background-color: transparent;   cursor: pointer;      transition:     background-color 0.15s ease,     color 0.15s ease;      position: relative; } [part~='day--disabled'], [part~='day']:disabled {   opacity: var(--lmvz-global-opacity-disabled, 40%);   pointer-events: none; } [part~='day']:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [part~='day']:not(:disabled):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   color: var(--lmvz-semantic-color-on-surface-primary, #000000); } [part~='day--today'] {   box-shadow: inset 0 0 0 1px var(--lmvz-semantic-color-border-active, #0f8acc); } [part~='day--today']:not(:disabled):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   box-shadow: inset 0 0 0 1px var(--lmvz-semantic-color-border-active, #0f8acc); } [part~='day--selected'] {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);   box-shadow: none; } [part~='day--today'][part~='day--selected'] {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);   box-shadow: none; } [part~='day--selected']:not(:disabled):hover {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [part~='day--out-of-month'] {   color: var(--lmvz-semantic-color-on-surface-tertiary, #7a7a7a); } `;
+const lmvzDatepickerCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } :host {   display: inline-block;   width: 100%; }  .datepicker-panel {   display: flex;   flex-direction: column;   gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); } .datepicker-header {   display: flex;   align-items: center;   justify-content: space-between;   width: 100%; } .datepicker-month-label {      all: unset;      font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   text-align: center;   cursor: default;      pointer-events: none;   user-select: none; } .datepicker-weekday-row {   display: flex;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   width: 100%; } .datepicker-weekday {   flex: 1;   display: flex;   align-items: center;   justify-content: center;   font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5     Router);   color: var(--lmvz-semantic-color-on-surface-secondary, #545454);   min-width: 0;   text-align: center; } .datepicker-grid {   display: flex;   flex-direction: column;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } .datepicker-week-row {   display: flex;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } [part~='day'] {      all: unset;      flex: 1;      width: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   min-width: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   box-sizing: border-box;    display: flex;   align-items: center;   justify-content: center;    border-radius: var(--lmvz-semantic-border-radius-round, 999px);   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   background-color: transparent;   cursor: pointer;      transition:     background-color 0.15s ease,     color 0.15s ease;      position: relative; } [part~='day--disabled'], [part~='day']:disabled {   opacity: var(--lmvz-global-opacity-disabled, 40%);   pointer-events: none; } [part~='day']:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [part~='day']:not(:disabled):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   color: var(--lmvz-semantic-color-on-surface-primary, #000000); } [part~='day--today'] {   box-shadow: inset 0 0 0 1px var(--lmvz-semantic-color-border-active, #0f8acc); } [part~='day--today']:not(:disabled):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   box-shadow: inset 0 0 0 1px var(--lmvz-semantic-color-border-active, #0f8acc); } [part~='day--selected'] {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);   box-shadow: none; } [part~='day--today'][part~='day--selected'] {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);   box-shadow: none; } [part~='day--selected']:not(:disabled):hover {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [part~='day--out-of-month'] {   color: var(--lmvz-semantic-color-on-surface-tertiary, #7a7a7a); } `;
 
 const CHEVRON_LEFT = toValidSvgStringWithFallback(chevronLeftSvg);
 const CHEVRON_RIGHT = toValidSvgStringWithFallback(chevronRightSvg);
@@ -11632,10 +11668,17 @@ 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();
     }
@@ -11733,9 +11776,9 @@ class LmvzDatepicker {
     render() {
         const validationLabels = getValidationLabels(this.locale);
         const popoverLabel = this.label ? `${this.label} ${validationLabels.popoverSuffix}` : undefined;
-        return (hAsync(Host, { key: 'df61136bb4d184e91e086a06f60e3c198f8a2b85' }, hAsync("lmvz-input", { key: '04986afb4a0926df4da693de6210ee4fccd74bd7', ref: (el) => {
+        return (hAsync(Host, { key: 'af9d7f075bf97d7eb58c6557f43cf8a245d5f712' }, hAsync("lmvz-input", { key: 'eef4be58281b8356d443c65c5cf6451192e70f75', ref: (el) => {
                 this.inputEl = el;
-            }, 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 }, hAsync("lmvz-icon", { key: '47897492e6df2f4b303c99aa33c48f326f3d9d63', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), hAsync("lmvz-popover", { key: 'd2904def9519907f56dada15df992800da77db55', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, hAsync("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 }, hAsync("lmvz-icon", { key: 'fc39ef14720522a8089d33321b918e5577a36cc2', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), hAsync("lmvz-popover", { key: '0076c57da02c7c9d0fcb53584f9dc4127317d6a5', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, hAsync("div", { key: '4c1e716e52a5d9ed75155dded3c2c39649e1e844', part: "panel", class: "datepicker-panel" }, this.renderHeader(), this.renderGrid()))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -11786,10 +11829,11 @@ class LmvzDatepicker {
             "inputText": [32],
             "hasUnparseableInput": [32],
             "isInvalid": [32],
+            "nativeError": [32],
             "checkValidity": [64],
             "reportValidity": [64]
         },
-        "$listeners$": [[0, "keydown", "handleKeydown"], [0, "focusin", "handleInputFocus"], [0, "click", "handleInputFocus"]],
+        "$listeners$": [[0, "keydown", "handleKeydown"], [0, "focusin", "handleInputFocus"], [0, "click", "handleInputFocus"], [0, "invalid", "handleInvalid"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["disabled", "disabled"], ["readonly", "readonly"], ["required", "required"], ["name", "name"], ["open", "open"]]
     }; }
@@ -12016,7 +12060,7 @@ const hasLazyBuild = (stencilEl) => {
     return stencilEl.componentOnReady !== undefined;
 };
 
-const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-input-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);      --input-radius: var(--lmvz-component-input-radius-default, 999px);   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);   --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc);   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);       --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));   --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));    --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --error-text-color: var(--lmvz-semantic-color-status-on-danger, #a31419);    --label-minimized-bg: var(--input-bg);   --label-minimized-padding-x: 4px;       --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  [size='sm'].sc-lmvz-input-h {   --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));   --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));   --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='md'].sc-lmvz-input-h {   --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));   --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h {   --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));   --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));   --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input {   display: flex;   flex-direction: column;   position: relative;   width: 100%; } .input-wrapper.sc-lmvz-input {   background-color: var(--input-bg);   border: var(--input-border-width) solid var(--input-border-color);   border-radius: var(--input-radius);   display: flex;   align-items: center;   height: var(--input-height);   padding: 0 var(--input-padding-x);   position: relative;   transition: border-color 0.2s ease;   gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   opacity: var(--input-disabled-opacity);   cursor: not-allowed;   pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input {   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)); }  [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   border-color: var(--error-text-color); }  .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover {   border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input {   position: relative;   flex-grow: 1;   display: flex;   align-items: center;   height: 100%; } label.sc-lmvz-input {   position: absolute;   left: 0;   top: 50%;   transform: translateY(-50%);   color: var(--label-color);   font-size: var(--input-font-size);   font-weight: 400;   pointer-events: none;   transition: all 0.2s ease-out;   background-color: transparent;   padding: 0;   margin: 0;   line-height: 1.5;   white-space: nowrap; } label.floating.sc-lmvz-input {   top: 0.5em;   transform: translateY(-100%);   transform-origin: left top;   font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));   background-color: var(--label-minimized-bg);   padding: 0 var(--label-minimized-padding-x);   left: -2px;    color: var(--input-text-color);    font-weight: 400; } .required-indicator.sc-lmvz-input {   color: var(--error-text-color);   margin-left: 2px; } input.sc-lmvz-input {   border: none;   background: transparent;   width: 100%;   height: 100%;   color: var(--input-text-color);   font-family: inherit;   font-size: var(--input-font-size);   outline: none;   padding: 0;   margin: 0;   font-weight: 400; } input.sc-lmvz-input::placeholder {   color: var(--label-color); } div.sc-lmvz-input:empty {   display: none; } [role='status'].sc-lmvz-input {   padding-top: 8px;    padding-left: var(--input-padding-x);   font-size: 12px;   color: var(--helper-text-color);   font-weight: 400; } [role='alert'].sc-lmvz-input {   padding-top: 8px;   padding-left: var(--input-padding-x);   font-size: 12px;   color: var(--error-text-color);   font-weight: 400; } .sc-lmvz-input-s > lmvz-button {      --lmvz-button-padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));   --lmvz-button-min-height-override: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); }`;
+const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-input-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);      --input-radius: var(--lmvz-component-input-radius-default, 999px);   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);   --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc);   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);       --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));   --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));    --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --error-text-color: var(--lmvz-semantic-color-status-on-danger, #a31419);    --label-minimized-bg: var(--input-bg);   --label-minimized-padding-x: 4px;       --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  [size='sm'].sc-lmvz-input-h {   --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));   --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));   --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='md'].sc-lmvz-input-h {   --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));   --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h {   --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));   --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));   --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input {   display: flex;   flex-direction: column;   position: relative;   width: 100%; } .input-wrapper.sc-lmvz-input {   background-color: var(--input-bg);   border: var(--input-border-width) solid var(--input-border-color);   border-radius: var(--input-radius);   display: flex;   align-items: center;   height: var(--input-height);   padding: 0 var(--input-padding-x);   position: relative;   transition: border-color 0.2s ease;   gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   opacity: var(--input-disabled-opacity);   cursor: not-allowed;   pointer-events: none; } .sc-lmvz-input-h:has(:focus-visible) .input-wrapper.sc-lmvz-input {   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)); }  [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   border-color: var(--error-text-color); }  .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover {   border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input {   position: relative;   flex-grow: 1;   display: flex;   align-items: center;   height: 100%; } label.sc-lmvz-input {   position: absolute;   left: 0;   top: 50%;   transform: translateY(-50%);   color: var(--label-color);   font-size: var(--input-font-size);   font-weight: 400;   pointer-events: none;   transition: all 0.2s ease-out;   background-color: transparent;   padding: 0;   margin: 0;   line-height: 1.5;   white-space: nowrap; } label.floating.sc-lmvz-input {   top: 0.5em;   transform: translateY(-100%);   transform-origin: left top;   font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));   background-color: var(--label-minimized-bg);   padding: 0 var(--label-minimized-padding-x);   left: -2px;    color: var(--input-text-color);    font-weight: 400; } .required-indicator.sc-lmvz-input {   color: var(--error-text-color);   margin-left: 2px; } input.sc-lmvz-input {   border: none;   background: transparent;   width: 100%;   height: 100%;   color: var(--input-text-color);   font-family: inherit;   font-size: var(--input-font-size);   outline: none;   padding: 0;   margin: 0;   font-weight: 400; } input.sc-lmvz-input::placeholder {   color: var(--label-color); } div.sc-lmvz-input:empty {   display: none; } [role='status'].sc-lmvz-input {   padding-top: 8px;    padding-left: var(--input-padding-x);   font-size: 12px;   color: var(--helper-text-color);   font-weight: 400; } [role='alert'].sc-lmvz-input {   padding-top: 8px;   padding-left: var(--input-padding-x);   font-size: 12px;   color: var(--error-text-color);   font-weight: 400; } .sc-lmvz-input-s > lmvz-button {      --lmvz-button-padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));   --lmvz-button-min-height-override: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); }`;
 
 let inputIdCounter = 0;
 class LmvzInput extends ReactiveControllerHost {
@@ -12026,6 +12070,7 @@ class LmvzInput extends ReactiveControllerHost {
     }
     lmvzInput;
     internals;
+    inputValidityActive = false;
     nativeInputElement;
     inputId = `lmvz-input-${inputIdCounter++}`;
     initialValue = '';
@@ -12082,7 +12127,7 @@ 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;
@@ -12104,6 +12149,9 @@ 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));
@@ -12171,8 +12219,12 @@ 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);
@@ -12186,35 +12238,45 @@ 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 (hAsync("div", { key: 'b7e432c7dbc598189d85040252455c5163fe6395', class: classNames('input-container', {
+        return (hAsync("div", { key: '626697f00e9ba3ad46e6304d06b04df0f27bb2c2', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, hAsync("div", { key: 'a912a49f4372423d06c7a4856fb5101cb0afd0c5', class: "input-wrapper" }, hAsync("slot", { key: '88e4ee4518de0bfeef9e30a254e0d2ec6693048c', name: "before-input" }), hAsync("div", { key: 'a413a7b7e8f6510f1c09fd0052889c8fad1653f1', class: "label-input-group" }, hAsync("label", { key: '9639713adff74afcf4fb1eab0e74b7447d02b986', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: '28c1069908a2f1905008f1decce9077e9ef1538a', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("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 })), hAsync("slot", { key: '09557e1d84bb4ab2456caf391a177c8f80063ab9', name: "after-input" })), hAsync("div", { key: '34162f744f8584991e4493ebcdb6a2f75a1f8990', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: 'a3c3bffbb439f9127278cedbfefa5e1986e68f23', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, hAsync("div", { key: '25ec1f448b689ff80defded1323f321d95d6b197', class: "input-wrapper" }, hAsync("slot", { key: '1d5f301e0327b4cd1714f403615f94658a754466', name: "before-input" }), hAsync("div", { key: 'ef553e6e8f6b74a5bb7cddef003d3b51650c7c9d', class: "label-input-group" }, hAsync("label", { key: '17d92ff7c65598739e8a379680580561936e21dc', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: 'cd40da3c85cc6cea49d7d8d270bba317534779f5', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("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 })), hAsync("slot", { key: 'b282c5d9553b72af7fd05ed0f872af0d7b8a5689', name: "after-input" })), hAsync("div", { key: 'da6008e798cb5ee29fa7d1ba3208057c1845a217', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: '5e7717a2d0dd32c53dd7ba6e170152239f3bfae9', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -12262,6 +12324,7 @@ class LmvzInput extends ReactiveControllerHost {
             "select": [64],
             "checkValidity": [64],
             "reportValidity": [64],
+            "getValidationMessage": [64],
             "getInputElement": [64]
         },
         "$listeners$": undefined,
@@ -14109,7 +14172,7 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-const lmvzPopoverCss = () => `@layer lmvz-ds.reset,lmvz-ds.theme,lmvz-ds.components,lmvz-ds.overrides; @layer lmvz-ds.components{.lmvz-wrapper-card-sm,.lmvz-wrapper-card-md,.lmvz-wrapper-card-lg{background:var(--lmvz-semantic-color-surface-primary, #ffffff);box-shadow:var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11))}.lmvz-wrapper-card-sm{padding:var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));border-radius:var(--lmvz-component-wrapper-sm-border-radius, 14px)}.lmvz-wrapper-card-md{padding:var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));border-radius:var(--lmvz-component-wrapper-md-border-radius, 18px)}.lmvz-wrapper-card-lg{padding:var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));border-radius:var(--lmvz-component-wrapper-lg-border-radius, 18px)}}:host{--lmvz-popover-z-index-internal:var(--lmvz-popover-z-index, 1);display:contents;.container{position:absolute;top:-9999999999px;left:-9999999999px;max-width:var(--lmvz-popover-max-width, none);max-height:var(--lmvz-popover-max-height, none);z-index:var(--lmvz-popover-z-index-internal);overflow:auto;box-sizing:border-box}}:host(:not([open])) .container{display:none}`;
+const lmvzPopoverCss = () => `@layer lmvz-ds.reset,lmvz-ds.theme,lmvz-ds.components,lmvz-ds.overrides; @layer lmvz-ds.components{.lmvz-wrapper-card-sm,.lmvz-wrapper-card-md,.lmvz-wrapper-card-lg{background:var(--lmvz-semantic-color-surface-primary, #ffffff);box-shadow:var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11))}.lmvz-wrapper-card-sm{padding:var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));border-radius:var(--lmvz-component-wrapper-sm-border-radius, 14px)}.lmvz-wrapper-card-md{padding:var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));border-radius:var(--lmvz-component-wrapper-md-border-radius, 18px)}.lmvz-wrapper-card-lg{padding:var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));border-radius:var(--lmvz-component-wrapper-lg-border-radius, 18px)}}:host{--lmvz-popover-z-index-internal:var(--lmvz-popover-z-index, 100);display:contents;.container{position:absolute;top:-9999999999px;left:-9999999999px;max-width:var(--lmvz-popover-max-width, none);max-height:var(--lmvz-popover-max-height, none);z-index:var(--lmvz-popover-z-index-internal);overflow:auto;box-sizing:border-box}}:host(:not([open])) .container{display:none}`;
 
 class LmvzPopover {
     constructor(hostRef) {
@@ -14130,6 +14193,7 @@ class LmvzPopover {
     placement = 'bottom-start';
     size = 'sm';
     autoFocus = true;
+    containerRole = 'dialog';
     label;
     lmvzOpen;
     lmvzClose;
@@ -14150,6 +14214,7 @@ class LmvzPopover {
     }
     componentDidLoad() {
         autoAssignId(this.el);
+        this.syncContainerId();
     }
     handleOpenChange(isOpen) {
         if (isOpen) {
@@ -14176,16 +14241,23 @@ 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');
         }
@@ -14213,10 +14285,11 @@ 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();
         }
     }
@@ -14291,7 +14364,7 @@ class LmvzPopover {
         this.closureController?.abort();
     }
     render() {
-        return (hAsync(Host, { key: 'f996d0a561b8f6d00913b0e2e84ac9711b878f84' }, hAsync("div", { key: 'f7fff89cf470a96b0d3d2adce43a92069d754861', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, hAsync("slot", { key: '2263710272a745d74f118fab6d22f0d05319fc74', ref: (el) => (this.slotEl = el) }))));
+        return (hAsync(Host, { key: '8dadcc766deebc03ea744fd1002078b382bfd48d' }, hAsync("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) }, hAsync("slot", { key: '0fa1d214c8c48942751cbd4759ebc992eacc8f72', ref: (el) => (this.slotEl = el) }))));
     }
     static get watchers() { return {
         "open": [{
@@ -14311,6 +14384,7 @@ class LmvzPopover {
             "placement": [1],
             "size": [1],
             "autoFocus": [4, "auto-focus"],
+            "containerRole": [1, "container-role"],
             "label": [1],
             "anchorEl": [32],
             "show": [64],
@@ -14385,6 +14459,7 @@ class RadioGroup {
             if (wasEmpty) {
                 document.addEventListener('focusin', this._focusinHandler, true);
             }
+            this.refreshValidity();
         }
     }
     unregister(host) {
@@ -14395,10 +14470,19 @@ class RadioGroup {
         if (this.hosts.length === 0) {
             document.removeEventListener('focusin', this._focusinHandler, true);
         }
+        this.refreshValidity();
     }
     get sortedEnabled() {
         return this.hosts.filter((h) => !h.disabled);
     }
+    isAnyChecked() {
+        return this.hosts.some((host) => host.checked);
+    }
+    refreshValidity() {
+        for (const host of this.hosts) {
+            host.updateValidity();
+        }
+    }
     setFocused(host) {
         this._focusedHost = host;
         this.updateTabindex();
@@ -14414,6 +14498,7 @@ class RadioGroup {
             host.checked = host === selectedHost;
         }
         this.updateTabindex();
+        this.refreshValidity();
     }
     updateTabindex() {
         const enabled = this.sortedEnabled;
@@ -14475,6 +14560,12 @@ class RadioGroupController {
     select(selectedHost) {
         this.group?.select(selectedHost);
     }
+    isAnyChecked() {
+        return this.group?.isAnyChecked() ?? false;
+    }
+    refreshValidity() {
+        this.group?.refreshValidity();
+    }
     setFocused(host) {
         this.group?.setFocused(host);
     }
@@ -14517,7 +14608,7 @@ class RadioGroupController {
 
 const lmvzRadioCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-radio-h {   display: inline-block;    --radio-circle-size: var(--lmvz-global-s18, 18px);   --radio-dot-size: 0.5rem;    --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);   --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);   --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419);   --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc);    --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);    --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);   --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);    --radio-easing: var(--lmvz-global-easing-default, ease);   --radio-duration: 0.2s;    display: flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   overflow: clip;   cursor: pointer;   background-color: transparent;   position: relative;   transition: background-color var(--radio-duration) var(--radio-easing); } input.sc-lmvz-radio {   position: absolute;   inset-block-start: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   inset-inline-start: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   opacity: 0;   width: var(--radio-circle-size);   height: var(--radio-circle-size);   margin: 0;   cursor: pointer;   z-index: 1; } .circle.sc-lmvz-radio {   width: var(--radio-circle-size);   height: var(--radio-circle-size);   border-radius: 50%;   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color);   background-color: var(--radio-bg);   pointer-events: none;   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center;   box-sizing: border-box;   transition: border-color var(--radio-duration) var(--radio-easing); } .dot.sc-lmvz-radio {   width: var(--radio-dot-size);   height: var(--radio-dot-size);   border-radius: 50%;   background-color: var(--radio-dot-color); } .content.sc-lmvz-radio {   display: flex;   flex-direction: column;   overflow-wrap: break-word;   min-width: 0; } label.sc-lmvz-radio {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);   color: var(--radio-label-color);   cursor: pointer;   transition: color var(--radio-duration) var(--radio-easing); } .helper-text.sc-lmvz-radio {   display: block;   font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);   color: var(--radio-helper-color);   margin-block-start: 2px; } .helper-text.sc-lmvz-radio:empty {   display: none; }  @media (hover: hover) {   .sc-lmvz-radio-h:hover .circle.sc-lmvz-radio {     border-color: var(--radio-border-color-hover);   }    .sc-lmvz-radio-h:hover {     background-color: var(--radio-wrapper-bg-hover);   } }  .sc-lmvz-radio-h:active {   background-color: var(--radio-wrapper-bg-active); }  [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-checked); } [checked].sc-lmvz-radio-h label.sc-lmvz-radio {   color: var(--radio-label-color-checked); }  [error].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-error); } [error].sc-lmvz-radio-h .helper-text.sc-lmvz-radio {   color: var(--lmvz-semantic-color-status-on-danger, #a31419); }  [disabled].sc-lmvz-radio-h {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; }  @media (forced-colors: active) {   .circle.sc-lmvz-radio {     forced-color-adjust: auto;     border-color: ButtonText;     background-color: Field;   }    [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {     border-color: Highlight;   }    .dot.sc-lmvz-radio {     background-color: ButtonText;   }    [checked].sc-lmvz-radio-h .dot.sc-lmvz-radio {     background-color: HighlightText;   } }`;
 
-const focusWithinCss$1 = () => `.sc-lmvz-radio-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-radio-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
+const focusWithinCss$1 = () => `.sc-lmvz-radio-h:has(:focus-visible){outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-radio-h:has(:focus-visible){outline-color:Highlight;box-shadow:none}}`;
 
 let radioIdCounter = 0;
 class LmvzRadio extends ReactiveControllerHost {
@@ -14539,7 +14630,14 @@ 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;
@@ -14547,6 +14645,7 @@ 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);
         }
@@ -14554,6 +14653,9 @@ class LmvzRadio extends ReactiveControllerHost {
             this.lmvzChange.emit(true);
         }
     }
+    handleRequiredChange() {
+        this.updateValidity();
+    }
     handleValueChange(newVal) {
         if (this.checked) {
             this.internals.setFormValue?.(newVal);
@@ -14575,6 +14677,9 @@ class LmvzRadio extends ReactiveControllerHost {
     async reportValidity() {
         return this.internals?.reportValidity() ?? true;
     }
+    async getValidationMessage() {
+        return this.internals?.validationMessage ?? '';
+    }
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
@@ -14596,8 +14701,13 @@ 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);
     }
@@ -14609,6 +14719,8 @@ class LmvzRadio extends ReactiveControllerHost {
         finally {
             this._handlingFormReset = false;
         }
+        this.updateValidity();
+        this.radioGroupController.refreshValidity();
     }
     formStateRestoreCallback(state) {
         if (typeof state !== 'string')
@@ -14621,6 +14733,20 @@ 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 {
@@ -14663,14 +14789,20 @@ class LmvzRadio extends ReactiveControllerHost {
             return;
         this.radioGroupController.setFocused(target);
     }
+    retargetInnerClicks() {
+        this.nativeInput?.click();
+    }
     render() {
-        return (hAsync(Host, { key: 'cb2db48956ca781f226fbbddcf1d8ea819f9192a' }, hAsync("input", { key: 'ec208dbaa714ae015415370b0d38ef916955b023', 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 }), hAsync("span", { key: 'ef8221077d410d59248ce30678989f6bf7fbbebb', class: "circle", "aria-hidden": "true" }, this.checked && hAsync("span", { key: '7faa45b58d39f05f64a7782329046fe07b0c2a98', class: "dot" })), hAsync("span", { key: 'e508b4bf061ab0e038df7c169a80285bb7930dc3', class: "content" }, hAsync("label", { key: '8117be47e7b0ae9cc17bab21bb7cc5d9300d2146', htmlFor: this.radioId }, this.label), hAsync("span", { key: '44ab845ee18415b54fb5d23e533f85644f4e5e50', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+        return (hAsync(Host, { key: 'f1fdc1167c4e59c2524e1e545c3382ca32853788' }, hAsync("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 }), hAsync("span", { key: 'b25e623269df05bdf8159e72da4df2e0bfb5d7bc', class: "circle", "aria-hidden": "true" }, this.checked && hAsync("span", { key: '93d12890c7ba0abe203c63953ea1115aee37d7a0', class: "dot" })), hAsync("span", { key: '44dcfdc4e7ee3820624b0d02a438139f45bb8733', class: "content" }, hAsync("label", { key: 'd0547cd5e79642b298da155c9937715224b52cae', htmlFor: this.radioId }, this.label), hAsync("span", { key: 'a9df5dd8a775a2f7422d5bac296869f88553e33f', onClick: this.retargetInnerClicks.bind(this), "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
         "checked": [{
                 "handleCheckedChange": 0
             }],
+        "required": [{
+                "handleRequiredChange": 0
+            }],
         "value": [{
                 "handleValueChange": 0
             }],
@@ -14686,24 +14818,181 @@ class LmvzRadio extends ReactiveControllerHost {
             "label": [1],
             "checked": [1540],
             "value": [1],
-            "name": [1],
+            "name": [513],
             "disabled": [516],
             "required": [516],
-            "error": [516],
+            "error": [6660],
             "helperText": [1, "helper-text"],
             "form": [513],
             "autofocus": [4],
+            "nativeError": [32],
             "focusInput": [64],
             "checkValidity": [64],
-            "reportValidity": [64]
+            "reportValidity": [64],
+            "getValidationMessage": [64]
         },
-        "$listeners$": [[0, "keydown", "handleKeydown"]],
+        "$listeners$": [[0, "invalid", "handleInvalid"], [0, "keydown", "handleKeydown"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["checked", "checked"], ["disabled", "disabled"], ["required", "required"], ["error", "error"], ["form", "form"]]
+        "$attrsToReflect$": [["checked", "checked"], ["name", "name"], ["disabled", "disabled"], ["required", "required"], ["error", "error"], ["form", "form"]]
     }; }
 }
 
-const lmvzSelectCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-select-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);       --lmvz-internal-select-floating-label-top-offset: 0.375rem;    padding-top: var(--lmvz-internal-select-floating-label-top-offset);    --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --lmvz-select-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);   --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --lmvz-select-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));   --lmvz-select-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-select-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);   --lmvz-select-label-minimized-padding-x: 4px;   --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);   --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419); } .select-wrapper.sc-lmvz-select {   position: relative;   height: var(--lmvz-select-height); }  label.sc-lmvz-select {   position: absolute;   top: 50%;   left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-label-color);   line-height: normal;   white-space: nowrap;   pointer-events: none;   z-index: 2;   transform: translateY(-50%);   transform-origin: left top;   transition:     top 0.2s ease-out,     transform 0.2s ease-out,     opacity 0.2s ease-out,     padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select {   opacity: 0;   padding: 0; } label.floating-label.sc-lmvz-select {   top: var(--lmvz-select-label-top-offset);   transform: translateY(0) scale(0.85);   left: calc(var(--lmvz-select-padding-x) - 2px);   background-color: var(--lmvz-select-bg);   padding: 0 var(--lmvz-select-label-minimized-padding-x);   opacity: 1;   font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select {   color: var(--lmvz-select-error-color);   margin-left: 2px;   display: inline-block;   line-height: 0;   vertical-align: middle; }  div[aria-hidden].sc-lmvz-select {   display: flex;   align-items: center;   gap: var(--lmvz-select-gap);   height: 100%;   padding: 0 var(--lmvz-select-padding-x);   border-radius: var(--lmvz-select-radius);   background-color: var(--lmvz-select-bg);   border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color);   box-sizing: border-box;   cursor: pointer;   position: relative;   z-index: 1;   transition: border-color 0.15s ease; } .sc-lmvz-select-h:not([disabled] .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select, [highlighted]).sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select {   border-color: var(--lmvz-select-border-color-hover); } [highlighted].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   border-color: var(--lmvz-semantic-color-border-active, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h label.floating-label.sc-lmvz-select {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .select-wrapper.sc-lmvz-select:focus-within div[aria-hidden].sc-lmvz-select {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   flex: 1 0 0;   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--lmvz-select-text-color);   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; }  .sc-lmvz-select-h:not([highlighted]) .select-wrapper.has-value.sc-lmvz-select div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child {   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center; } div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select {   width: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   height: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   flex-shrink: 0; }  select.sc-lmvz-select {   appearance: none;   position: absolute;   inset: 0;   width: 100%;   height: 100%;   opacity: 0;   cursor: pointer;   z-index: 2;   border: none;   background: transparent;   margin: 0;   padding: 0; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select {   opacity: var(--lmvz-select-disabled-opacity);   pointer-events: none;   cursor: not-allowed; } [role='status'].sc-lmvz-select {   margin-top: 4px;   padding-left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-helper-color);   line-height: normal; } [size='small'].sc-lmvz-select-h {   --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));   --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));   --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='small'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='small'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select {   width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));   height: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='large'].sc-lmvz-select-h {   --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));   --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));   --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } [size='large'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select {   width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); }`;
+const defaultConfig = {
+    wrap: true,
+    typeaheadTimeoutMs: 500,
+};
+class ListboxController {
+    options = [];
+    _activeId;
+    _selectedId;
+    config;
+    typeaheadBuffer = '';
+    typeaheadTimer;
+    constructor(config = {}) {
+        this.config = { ...defaultConfig, ...config };
+    }
+    hostDisconnected() {
+        this.clearTypeaheadTimer();
+    }
+    get activeId() {
+        return this._activeId;
+    }
+    get activeDescendantId() {
+        return this._activeId;
+    }
+    get selectedId() {
+        return this._selectedId;
+    }
+    setOptions(options) {
+        this.options = options;
+        if (this._activeId && this.findEnabledIndex(this._activeId) !== -1)
+            return;
+        const fallback = (this._selectedId && this.findEnabledIndex(this._selectedId) !== -1 ? this._selectedId : undefined) ?? this.firstEnabledOption()?.id;
+        this.setActiveId(fallback);
+    }
+    setActiveId(id) {
+        if (id !== undefined && !this.isEnabledId(id))
+            return;
+        if (id === this._activeId)
+            return;
+        this._activeId = id;
+        this.config.onActiveChange?.(id);
+    }
+    setSelectedId(id) {
+        this._selectedId = id;
+    }
+    selectOption(id) {
+        if (!this.isEnabledId(id))
+            return;
+        this._selectedId = id;
+        this.config.onSelect?.(id);
+    }
+    selectActive() {
+        if (this._activeId)
+            this.selectOption(this._activeId);
+    }
+    handleKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveActive('next');
+                return true;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveActive('previous');
+                return true;
+            case 'Home':
+                event.preventDefault();
+                this.setActiveId(this.firstEnabledOption()?.id);
+                return true;
+            case 'End':
+                event.preventDefault();
+                this.setActiveId(this.lastEnabledOption()?.id);
+                return true;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.selectActive();
+                return true;
+            case 'Escape':
+                event.preventDefault();
+                this.config.onClose?.();
+                return true;
+            default:
+                return this.handleTypeahead(event);
+        }
+    }
+    clearTypeahead() {
+        this.typeaheadBuffer = '';
+        this.clearTypeaheadTimer();
+    }
+    moveActive(direction) {
+        const enabledOptions = this.enabledOptions();
+        if (!enabledOptions.length)
+            return;
+        const currentIndex = this._activeId ? enabledOptions.findIndex((option) => option.id === this._activeId) : -1;
+        if (currentIndex === -1) {
+            this.setActiveId((direction === 'next' ? enabledOptions[0] : enabledOptions[enabledOptions.length - 1])?.id);
+            return;
+        }
+        const step = direction === 'next' ? 1 : -1;
+        const rawIndex = currentIndex + step;
+        if (rawIndex < 0 || rawIndex >= enabledOptions.length) {
+            if (!this.config.wrap)
+                return;
+            const wrappedIndex = (rawIndex + enabledOptions.length) % enabledOptions.length;
+            this.setActiveId(enabledOptions[wrappedIndex]?.id);
+            return;
+        }
+        this.setActiveId(enabledOptions[rawIndex]?.id);
+    }
+    handleTypeahead(event) {
+        if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey)
+            return false;
+        event.preventDefault();
+        this.typeaheadBuffer += event.key.toLowerCase();
+        this.restartTypeaheadTimer();
+        const enabledOptions = this.enabledOptions();
+        if (!enabledOptions.length)
+            return true;
+        const currentIndex = this._activeId ? enabledOptions.findIndex((option) => option.id === this._activeId) : -1;
+        const orderedFromCurrent = [...enabledOptions.slice(currentIndex + 1), ...enabledOptions.slice(0, currentIndex + 1)];
+        const match = orderedFromCurrent.find((option) => option.label.toLowerCase().startsWith(this.typeaheadBuffer));
+        if (match)
+            this.setActiveId(match.id);
+        return true;
+    }
+    restartTypeaheadTimer() {
+        this.clearTypeaheadTimer();
+        this.typeaheadTimer = setTimeout(() => {
+            this.typeaheadBuffer = '';
+        }, this.config.typeaheadTimeoutMs);
+    }
+    clearTypeaheadTimer() {
+        if (this.typeaheadTimer !== undefined) {
+            clearTimeout(this.typeaheadTimer);
+            this.typeaheadTimer = undefined;
+        }
+    }
+    enabledOptions() {
+        return this.options.filter((option) => !option.disabled);
+    }
+    firstEnabledOption() {
+        return this.enabledOptions()[0];
+    }
+    lastEnabledOption() {
+        const enabledOptions = this.enabledOptions();
+        return enabledOptions[enabledOptions.length - 1];
+    }
+    isEnabledId(id) {
+        return this.findEnabledIndex(id) !== -1;
+    }
+    findEnabledIndex(id) {
+        return this.enabledOptions().findIndex((option) => option.id === id);
+    }
+}
+
+const lmvzSelectCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-select-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);       --lmvz-internal-select-floating-label-top-offset: 0.375rem;   --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --lmvz-select-border-color: var(--lmvz-semantic-color-border-alternate, #c7c7c7);   --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);   --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --lmvz-select-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));   --lmvz-select-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-select-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);   --lmvz-select-label-minimized-padding-x: 4px;   --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);   --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419);    padding-top: var(--lmvz-internal-select-floating-label-top-offset); } .select-wrapper.sc-lmvz-select {   position: relative;   height: var(--lmvz-select-height); }  label.sc-lmvz-select {   position: absolute;   top: 50%;   left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-label-color);   line-height: normal;   white-space: nowrap;   pointer-events: none;   z-index: 2;   transform: translateY(-50%);   transform-origin: left top;   transition:     top 0.2s ease-out,     transform 0.2s ease-out,     opacity 0.2s ease-out,     padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select {   opacity: 0;   padding: 0; } label.floating-label.sc-lmvz-select {   top: var(--lmvz-select-label-top-offset);   transform: translateY(0) scale(0.85);   left: calc(var(--lmvz-select-padding-x) - 2px);   background-color: var(--lmvz-select-bg);   padding: 0 var(--lmvz-select-label-minimized-padding-x);   opacity: 1;   font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select {   color: var(--lmvz-select-error-color);   margin-left: 2px;   display: inline-block;   line-height: 0;   vertical-align: middle; }  .select-trigger.sc-lmvz-select {   display: flex;   align-items: center;   gap: var(--lmvz-select-gap);   height: 100%;   width: 100%;   padding: 0 var(--lmvz-select-padding-x);   border-radius: var(--lmvz-select-radius);   background-color: var(--lmvz-select-bg);   border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color);   box-sizing: border-box;   cursor: pointer;   position: relative;   z-index: 1;   transition: border-color 0.15s ease; } .sc-lmvz-select-h:not([disabled] .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select, [highlighted].sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select, [error]).sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select {   border-color: var(--lmvz-select-border-color-hover); } [error].sc-lmvz-select-h .select-trigger.sc-lmvz-select {   border-color: var(--lmvz-select-error-color); } [highlighted].sc-lmvz-select-h .select-trigger.sc-lmvz-select {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   border-color: var(--lmvz-semantic-color-border-active, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child {   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h label.floating-label.sc-lmvz-select {   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .sc-lmvz-select-h:has(:focus-visible) .select-trigger.sc-lmvz-select {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child {   flex: 1 0 0;   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--lmvz-select-text-color);   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap;   text-align: left; }  .sc-lmvz-select-h:not([highlighted]) .select-wrapper.has-value.sc-lmvz-select .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child {   color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:last-child {   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center; } .select-trigger.sc-lmvz-select svg.sc-lmvz-select {   width: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   height: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   flex-shrink: 0; }  .lmvz-select-native-options.sc-lmvz-select {   display: none; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select {   opacity: var(--lmvz-select-disabled-opacity);   pointer-events: none;   cursor: not-allowed; } [role='status'].sc-lmvz-select {   padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   padding-left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-helper-color);   line-height: normal; } [role='alert'].sc-lmvz-select {   padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   padding-left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   color: var(--lmvz-select-error-color);   line-height: normal; } [size='small'].sc-lmvz-select-h {   --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));   --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));   --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='small'].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child {   font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='small'].sc-lmvz-select-h .select-trigger.sc-lmvz-select svg.sc-lmvz-select {   width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));   height: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='large'].sc-lmvz-select-h {   --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));   --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));   --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child {   font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } [size='large'].sc-lmvz-select-h .select-trigger.sc-lmvz-select svg.sc-lmvz-select {   width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); }  .lmvz-select-option.sc-lmvz-select {   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);    display: flex;   align-items: center;   gap: var(--lmvz-select-gap);   padding: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   border-radius: var(--lmvz-semantic-border-radius-md, 6px);   background-color: var(--lmvz-select-option-background);   color: var(--lmvz-select-option-color);   cursor: pointer;   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   transition:     background-color 0.15s ease,     color 0.15s ease; } .lmvz-select-option.sc-lmvz-select:not([aria-disabled='true']):hover {   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } .lmvz-select-option.sc-lmvz-select:not([aria-disabled='true']):active {   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);   --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } .lmvz-select-option.sc-lmvz-select:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));   position: relative;   z-index: 1; } .lmvz-select-option[data-active='true'].sc-lmvz-select:not([aria-disabled='true']) {   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } .lmvz-select-option[aria-selected='true'].sc-lmvz-select {   --lmvz-select-option-background: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);   --lmvz-select-option-color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .lmvz-select-option[aria-disabled='true'].sc-lmvz-select {   cursor: not-allowed;   pointer-events: none;   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }`;
 
 let selectIdCounter = 0;
 class LmvzSelect extends ReactiveControllerHost {
@@ -14711,79 +15000,343 @@ class LmvzSelect extends ReactiveControllerHost {
     get validationEl() {
         return this.el;
     }
+    internals;
     selectId = `lmvz-select-${selectIdCounter++}`;
-    nativeSelectEl;
+    triggerId = `${this.selectId}-trigger`;
+    popoverId = `${this.selectId}-listbox`;
+    triggerEl;
+    optionsSourceEl;
+    optionsMutationObserver;
+    initialValue;
+    initialValueCaptured = false;
+    flatOptions = [];
+    optionsById = new Map();
+    listboxController = new ListboxController({
+        onActiveChange: (id) => {
+            this.activeId = id;
+        },
+        onSelect: (id) => this.handleOptionSelect(id),
+        onClose: () => this.closePopover(),
+    });
+    get helperId() {
+        return this.helperText ? `${this.selectId}-helper` : undefined;
+    }
+    get showErrorMessage() {
+        return this.error && Boolean(this.errorMessage);
+    }
+    get errorId() {
+        return `${this.selectId}-error`;
+    }
+    get describedBy() {
+        const ids = [];
+        if (this.helperId)
+            ids.push(this.helperId);
+        if (this.showErrorMessage)
+            ids.push(this.errorId);
+        return ids.length > 0 ? ids.join(' ') : undefined;
+    }
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
         this.lmvzChange = createEvent(this, "lmvzChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
         this.addController(new AriaValidationController(this));
+        this.addController(this.listboxController);
     }
     lmvzChange;
     value;
     label;
     helperText;
+    nativeError = false;
+    errorFromProp = false;
+    get error() {
+        return this.errorFromProp || this.nativeError;
+    }
+    set error(value) {
+        this.errorFromProp = value;
+    }
+    errorMessage;
     disabled = false;
     required = false;
     name;
     size = 'default';
     highlighted = false;
     selectedLabel = '';
+    selectedId;
+    activeId;
+    isOpen = false;
+    optionGroups = [];
     get hasValue() {
         return Boolean(this.value);
     }
+    componentWillLoad() {
+        this.updateValidity();
+        super.componentWillLoad();
+    }
     componentDidLoad() {
-        this.syncSelectedLabel();
+        this.handleSlotChange();
+        this.observeSlottedOptionMutations();
+        this.updateValidity();
         super.componentDidLoad();
     }
+    disconnectedCallback() {
+        this.optionsMutationObserver?.disconnect();
+        super.disconnectedCallback();
+    }
+    observeSlottedOptionMutations() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.optionsMutationObserver?.disconnect();
+        this.optionsMutationObserver = new MutationObserver(this.handleSlotChange);
+        this.optionsMutationObserver.observe(this.el, {
+            attributes: true,
+            attributeFilter: ['disabled', 'selected', 'value', 'label'],
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    async focusTrigger() {
+        this.triggerEl?.focus();
+    }
+    async blurTrigger() {
+        this.triggerEl?.blur();
+    }
+    async checkValidity() {
+        return this.internals.checkValidity?.() ?? true;
+    }
+    async reportValidity() {
+        return this.internals.reportValidity?.() ?? true;
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage ?? '';
+    }
+    formAssociatedCallback(form) {
+        if (!form)
+            return;
+        this.internals.setFormValue?.(this.value ?? '');
+    }
+    formResetCallback() {
+        this.internals.setValidity?.({});
+        this.value = this.initialValue;
+        this.updateValidity();
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+    }
     handleValueChange(newValue) {
-        if (this.nativeSelectEl && this.nativeSelectEl.value !== (newValue ?? '')) {
-            this.nativeSelectEl.value = newValue ?? '';
+        this.applySelectionFromValue();
+        if (this.selectedId && !this.isOpen) {
+            this.listboxController.setActiveId(this.selectedId);
         }
-        this.syncSelectedLabel();
+        this.internals.setFormValue?.(newValue ?? '');
+        this.updateValidity();
+    }
+    handleRequiredChange() {
+        this.updateValidity();
     }
-    syncSelectedLabel() {
-        if (!this.nativeSelectEl)
+    handleDisabledChange(disabled) {
+        if (!disabled)
             return;
-        const idx = this.nativeSelectEl.selectedIndex;
-        this.selectedLabel = idx >= 0 ? (this.nativeSelectEl.options[idx]?.text ?? '') : '';
+        this.closePopover();
+        this.triggerEl?.blur();
     }
-    handleChange = (event) => {
-        const select = event.target;
-        this.value = select.value;
-        this.syncSelectedLabel();
-        this.lmvzChange.emit(select.value);
+    handleSlotChange = () => {
+        const container = this.optionsSourceEl;
+        if (!container)
+            return;
+        const { flat, groups } = parseOptionElements(container, this.selectId);
+        this.flatOptions = flat;
+        this.optionsById = new Map(flat.map((option) => [option.id, option]));
+        this.optionGroups = groups;
+        if (!this.value) {
+            const preselected = flat.find((option) => option.selected && !option.disabled);
+            if (preselected) {
+                this.value = preselected.value;
+            }
+        }
+        this.applySelectionFromValue();
+        this.listboxController.setOptions(flat.map(({ id, label, disabled }) => ({ id, label, disabled })));
+        if (!this.initialValueCaptured) {
+            this.initialValue = this.value;
+            this.initialValueCaptured = true;
+        }
+    };
+    applySelectionFromValue() {
+        const match = this.value ? this.flatOptions.find((option) => option.value === this.value) : undefined;
+        this.selectedId = match?.id;
+        this.selectedLabel = match?.label ?? '';
+        this.listboxController.setSelectedId(match?.id);
+    }
+    updateValidity() {
+        if (this.required && !this.value) {
+            this.internals.setValidity?.({ valueMissing: true }, 'Please select a value.', this.triggerEl);
+            return;
+        }
+        this.internals.setValidity?.({});
+        this.nativeError = false;
+    }
+    handleInvalid() {
+        this.nativeError = true;
+    }
+    handleOptionSelect(id) {
+        const option = this.optionsById.get(id);
+        if (!option)
+            return;
+        const isNewValue = option.value !== this.value;
+        this.value = option.value;
+        if (isNewValue) {
+            this.lmvzChange.emit(option.value);
+        }
+        this.closePopover();
+    }
+    handleOptionClick = (option) => {
+        if (option.disabled || this.disabled)
+            return;
+        this.listboxController.selectOption(option.id);
+    };
+    handleLabelClick = () => {
+        if (this.disabled)
+            return;
+        this.triggerEl?.focus();
+        this.openPopover();
+    };
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.closePopover();
+        }
+        else {
+            this.openPopover();
+        }
+    };
+    handleTriggerKeydown = (event) => {
+        if (this.disabled)
+            return;
+        if (!this.isOpen) {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.openPopover();
+            }
+            return;
+        }
+        this.listboxController.handleKeydown(event);
     };
+    handleTriggerBlur = () => {
+        this.closePopover();
+    };
+    handlePopoverClose = () => {
+        this.isOpen = false;
+        this.listboxController.clearTypeahead();
+    };
+    openPopover() {
+        if (this.isOpen || this.disabled)
+            return;
+        this.isOpen = true;
+    }
+    closePopover() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.listboxController.clearTypeahead();
+    }
+    renderOptionGroups() {
+        return this.optionGroups.map((group, groupIndex) => group.label ? (hAsync("div", { role: "group", "aria-label": group.label, key: `lmvz-select-group-${groupIndex}` }, group.options.map((option) => this.renderOption(option)))) : (group.options.map((option) => this.renderOption(option))));
+    }
+    renderOption(option) {
+        return (hAsync("div", { id: option.id, key: option.id, role: "option", class: "lmvz-select-option", "aria-selected": option.id === this.selectedId ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, "data-active": option.id === this.activeId ? 'true' : undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleOptionClick(option) }, option.label));
+    }
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (hAsync(Host, { key: '764be3255f76406e66600e800da85d84de8a5b62', "data-highlighted": String(this.highlighted) }, hAsync("div", { key: '81c6c1eb04d9062b142f30c201b3ec24feec8814', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, hAsync("label", { key: '49199adcb31515ce4b4789f27cc2520805c29a3c', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && hAsync("span", { key: 'e7e02e878d8a130d61e426774d9d362a49e481a7', "aria-hidden": "true" }, " *")), hAsync("div", { key: 'bc5ff1214d856a084918c8e68d1b1567a97b41bb', "aria-hidden": "true" }, hAsync("span", { key: 'cc3513a16e4e621bc47f35c252e981bc25bc0d77' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: 'a34658592f038b9438808418cc106842d98e63d5', "aria-hidden": "true" }, " *")), hAsync("span", { key: 'cd71dd492d758e7e53e6212cc9549ec4057abe3f' }, hAsync("svg", { key: 'fa1ea83d316fa9280516316b695163634264151c', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, hAsync("path", { key: '7750c64531e98cc5cdebafa1ecacf624945ab198', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), hAsync("select", { key: '53a4e34ad1405447177675e67afcc2e9c18319cb', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && hAsync("option", { key: '78ba2e2225d3d3b558c8a20f276f6fbbc0a670b8', value: "", disabled: true, selected: true, hidden: true }), hAsync("slot", { key: 'bbc561f3f55dbc42b705f251fdc146b0496c72a1' }))), this.helperText && hAsync("div", { key: '5bc860035c0ee46f62fefdb74d752b419bb19f7c', role: "status" }, this.helperText)));
+        return (hAsync(Host, { key: '0bcc303a802db20a6be6558b8add53d0fa398493', "data-highlighted": String(this.highlighted) }, hAsync("div", { key: 'e248f8277b4786b34dfd064cb9c7b70302cf018a', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, hAsync("label", { key: '1c97c830d5782cadad98fb895d70c438031d3457', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && hAsync("span", { key: '16157962846bffc111f5c672852f7b23e9ed2b73', "aria-hidden": "true" }, " *")), hAsync("div", { key: 'bc5e3e6b335723cfd9872ff955a1e8d664d4eeb8', 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": hasValue ? `${this.label}, ${this.selectedLabel}` : this.label, "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 }, hAsync("span", { key: '620c6108f679c8e5563c0e21d7b89d71434c01a2' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: 'a2183941c7843bae3e9989f8e8b26be28fbbf6d7', "aria-hidden": "true" }, " *")), hAsync("span", { key: 'b57e14bda44dc0de5a35623a5cb203b7f570c802', "aria-hidden": "true" }, hAsync("svg", { key: '71ac319e398f07f7e65fe1f73f6d2a7c08b631a8', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '80b4a978471251ee8d2cce2d74a48fad750db125', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), hAsync("lmvz-popover", { key: '15528c9a3f1404c385f4eb865cf78ef5891dcb32', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), hAsync("div", { key: 'f1b833973497e6dfd2013522e067382c73baa7a1', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, hAsync("slot", { key: '670bf62c50cbdd965342279b99e303614771ffa1', onSlotchange: this.handleSlotChange }))), this.helperText && (hAsync("div", { key: '849e35da09bff25896b08f275c265baa0ee12960', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (hAsync("div", { key: 'd01c2dca8767aa815d08d895f308c42150cc3263', id: this.errorId, role: "alert" }, this.errorMessage))));
     }
+    static get formAssociated() { return true; }
     static get watchers() { return {
         "value": [{
                 "handleValueChange": 0
+            }],
+        "required": [{
+                "handleRequiredChange": 0
+            }],
+        "disabled": [{
+                "handleDisabledChange": 0
             }]
     }; }
     static get style() { return lmvzSelectCss(); }
     static get cmpMeta() { return {
-        "$flags$": 774,
+        "$flags$": 838,
         "$tagName$": "lmvz-select",
         "$members$": {
             "value": [1025],
             "label": [1],
             "helperText": [1, "helper-text"],
+            "error": [6660],
+            "errorMessage": [1, "error-message"],
             "disabled": [516],
             "required": [516],
-            "name": [1],
+            "name": [513],
             "size": [513],
             "highlighted": [516],
-            "selectedLabel": [32]
+            "nativeError": [32],
+            "selectedLabel": [32],
+            "selectedId": [32],
+            "activeId": [32],
+            "isOpen": [32],
+            "optionGroups": [32],
+            "focusTrigger": [64],
+            "blurTrigger": [64],
+            "checkValidity": [64],
+            "reportValidity": [64],
+            "getValidationMessage": [64]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "invalid", "handleInvalid"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["disabled", "disabled"], ["required", "required"], ["size", "size"], ["highlighted", "highlighted"]]
+        "$attrsToReflect$": [["error", "error"], ["disabled", "disabled"], ["required", "required"], ["name", "name"], ["size", "size"], ["highlighted", "highlighted"]]
     }; }
 }
+function parseOptionElements(container, idPrefix) {
+    const flat = [];
+    const groups = [];
+    let looseGroup;
+    let optionIndex = 0;
+    const toOptionData = (optionEl, disabledOverride = false) => {
+        const option = optionEl;
+        const data = {
+            id: `${idPrefix}-option-${optionIndex++}`,
+            value: option.value,
+            label: (option.textContent ?? '').trim(),
+            disabled: disabledOverride || option.disabled,
+            selected: option.selected,
+        };
+        flat.push(data);
+        return data;
+    };
+    Array.from(container.children).forEach((child) => {
+        if (child.tagName === 'OPTGROUP') {
+            looseGroup = undefined;
+            const optgroup = child;
+            const options = Array.from(optgroup.querySelectorAll('option')).map((option) => toOptionData(option, optgroup.disabled));
+            groups.push({ label: optgroup.label || undefined, options });
+            return;
+        }
+        if (child.tagName === 'OPTION') {
+            if (!looseGroup) {
+                looseGroup = { label: undefined, options: [] };
+                groups.push(looseGroup);
+            }
+            looseGroup.options.push(toOptionData(child));
+        }
+    });
+    return { flat, groups };
+}
 
 const alertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0Nl8zODApIj4KPHBhdGggZD0iTTEyIDUuMjVWMTMuMTI1TTIyLjUgMTJDMjIuNSAxNy43OTkgMTcuNzk5IDIyLjUgMTIgMjIuNUM2LjIwMTAxIDIyLjUgMS41IDE3Ljc5OSAxLjUgMTJDMS41IDYuMjAxMDEgNi4yMDEwMSAxLjUgMTIgMS41QzE3Ljc5OSAxLjUgMjIuNSA2LjIwMTAxIDIyLjUgMTJaTTEzLjEyNSAxNi44NzVDMTMuMTI1IDE3LjQ5NjMgMTIuNjIxMyAxOCAxMiAxOEMxMS4zNzg3IDE4IDEwLjg3NSAxNy40OTYzIDEwLjg3NSAxNi44NzVDMTAuODc1IDE2LjI1MzcgMTEuMzc4NyAxNS43NSAxMiAxNS43NUMxMi42MjEzIDE1Ljc1IDEzLjEyNSAxNi4yNTM3IDEzLjEyNSAxNi44NzVaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM0Nl8zODAiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==';
 
@@ -14849,7 +15402,7 @@ class LmvzSnackbar {
         this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
     };
     render() {
-        return (hAsync(Host, { key: '3526d31aa5842f2d4bf5b5b878a7ca03bb4bf731', class: this.animationClass }, hAsync("lmvz-icon", { key: '52080f476e527c9af337eb1997db1b29a90fb5c0', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), hAsync("span", { key: 'a18eaf04ca959432fc76037efd24ecf1001bd798', class: "message" }, this.message), this.actionLabel && (hAsync("lmvz-button", { key: '3126781af40ea74854db8e7c2aa7e1fb1b632d38', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
+        return (hAsync(Host, { key: 'f58c7657bf5511c72930dfc54ace4af1ff7f3554', class: this.animationClass }, hAsync("lmvz-icon", { key: '8632b42b9b246bf58480fb17ca336ce5f0883845', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), hAsync("span", { key: '4ca56d2cdf29415c6d21cc50399dc28aebb8de99', class: "message" }, this.message), this.actionLabel && (hAsync("lmvz-button", { key: 'd09043056b968421143aa180f464effcd7b781fe', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
     }
     static get watchers() { return {
         "status": [{
@@ -14886,7 +15439,7 @@ class LmvzSpinner {
     ariaLabel;
     render() {
         const hasLabel = !!this.ariaLabel?.trim();
-        return (hAsync(Host, { key: '96a151ca5586df967f9973e73cfb7be458254dc4', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, hAsync("svg", { key: '27d404b929294aba50170e0ad4951c0c03d7a286', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, hAsync("circle", { key: 'bcf47ee3a704f46ab4ec26de41dd859db17266e9', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
+        return (hAsync(Host, { key: 'cf60fcf652f377a66596cc51138bb73f7465a4e7', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, hAsync("svg", { key: '121ab46a591242fbc0f1c3540e8f2a7b72c9582a', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, hAsync("circle", { key: 'fe649394c9bd6e7a06113e9a50b595bb890a6fac', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
     }
     static get style() { return lmvzSpinnerCss(); }
     static get cmpMeta() { return {
@@ -14922,7 +15475,7 @@ class LmvzTab {
         this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
     }
     render() {
-        return (hAsync(Host, { key: '992500dcc371efbeab4eb83fbcfb9745384fa423' }, hAsync("button", { key: 'e346c88625b701636704e89b749971e6a016a3ff', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: 'ee0790e6f04c1c05fbbb7a624e0c791e1db24506', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: '45b0c2c38dcec72ab02cd308e0301d1c912e96f7', class: "label" }, hAsync("slot", { key: 'e31e6c8ade0c7b44684836c29fbb65464db7ae59' })), hAsync("span", { key: '03016f465e673bf27261e8ceb5c3a6a1666551a7', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+        return (hAsync(Host, { key: '4380fe35cacb11bc7114664c126504e8f4fb09a0' }, hAsync("button", { key: 'ac77443cbba5c94f864820088f60c0bac23d0775', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: '9988497505ca3effa6c41011ac408a5d25629ca1', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: '70566c46fba36b8717aa82917e45abd39cd7a2ea', class: "label" }, hAsync("slot", { key: 'a595738c387ee2f4f77f6ccdfdfb0589751ce999' })), hAsync("span", { key: '933758dc965d1151ca6a96367ea40290189384ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return lmvzTabCss(); }
@@ -15179,7 +15732,7 @@ class LmvzTabs extends ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (hAsync(Host, { key: '27d096ac6ed21fb72a5c6336c6f07ee2fe36bd92', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: 'c3b530f13cf6829e8519a678e577e8aa6bf1c3d6', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, hAsync("slot", { key: '018641f52dfcab6dea884c95a5e550dbe60f74f6', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '6f7cce2b8e551683ba04c53ebae8233c3ef61969', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: '8e9f0c1e1866180a763dd41aa1974f5cf354fb44', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (hAsync(Host, { key: '33205038c047420618800be3ef755e1d13a0127c', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: 'e803f772c5b187326fc80cfa2d3b9d74f6ee1df8', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, hAsync("slot", { key: '6871a7b6b26c6251ceb544c03b245450aa53373d', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '17721962da2ecf107a5b878dea996812c61be998', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: '485de66efc7812ecb2368a6b01b0d8ab63971497', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get watchers() { return {
         "value": [{
@@ -15210,7 +15763,7 @@ class LmvzTabs extends ReactiveControllerHost {
 
 const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-toggle-h {   display: inline-flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));         border-radius: var(--lmvz-semantic-border-radius-round, 999px);   cursor: pointer;   background-color: transparent;   user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled][checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled].sc-lmvz-toggle-h {   cursor: not-allowed;   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none; } .track.sc-lmvz-toggle {   position: relative;   flex-shrink: 0;   width: var(--lmvz-global-s32, 32px);   height: var(--lmvz-global-s20, 20px);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-hover, #a1a1a1); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle {      position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   opacity: 0;   margin: 0;   cursor: inherit; } .thumb.sc-lmvz-toggle {   position: absolute;   width: var(--lmvz-global-s13, 13px);   height: var(--lmvz-global-s13, 13px);   border-radius: 50%;   background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   top: 50%;   transform: translateY(-50%);   left: var(--lmvz-global-s4, 4px);      transition:     left 0.2s ease,     background-color 0.2s ease;   pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle {   left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px));   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   cursor: pointer; }`;
 
-const focusWithinCss = () => `.sc-lmvz-toggle-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-toggle-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
+const focusWithinCss = () => `.sc-lmvz-toggle-h:has(:focus-visible){outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-toggle-h:has(:focus-visible){outline-color:Highlight;box-shadow:none}}`;
 
 let toggleIdCounter = 0;
 class LmvzToggle extends ReactiveControllerHost {
@@ -15272,6 +15825,9 @@ class LmvzToggle 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));
@@ -15284,7 +15840,7 @@ class LmvzToggle extends ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (hAsync(Host, { key: 'bde08dcbd39c0c02602590bc0c536b5d671fa76e' }, hAsync("span", { key: '2567f70f81014d8ab7b9073a0d59f33bfeeca6a5', class: "track" }, hAsync("input", { key: '88c9fc7523489dd0decf5b5f3ddda604aadcf8a9', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), hAsync("span", { key: '816fc007d7c87acc8ff0286eb861bd29059b44eb', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '9525cd785d2c6c3b6242c6f5eac215996b881873', htmlFor: this.toggleId }, this.label)));
+        return (hAsync(Host, { key: 'a0e0272a8457ee6b07a102aa10e5a7c0292a55d9' }, hAsync("span", { key: '5d14029bee4b66f5ed2ee1eb189a1d80a68abe3e', class: "track" }, hAsync("input", { key: '926b1ca6065750717577ece30e8e78b9004ec0e8', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), hAsync("span", { key: 'bdee06bab6acba72d019134828f7415d7b347c49', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: 'b8eaa9305352f7146bf95bb517766310517d60e6', htmlFor: this.toggleId }, this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -15311,6 +15867,7 @@ class LmvzToggle extends ReactiveControllerHost {
             "blurToggle": [64],
             "checkValidity": [64],
             "reportValidity": [64],
+            "getValidationMessage": [64],
             "getInputElement": [64]
         },
         "$listeners$": undefined,