@lmvz-ds/components 0.36.0 → 0.36.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lmvz-ds/components
 
+## 0.36.1
+
+### Patch Changes
+
+- 87eb9db: Custom Select Dropdown hinzugefügt
+- a8cbbfb: Synchronisierung von aria-invalid für form-input-Elemente.
+- 011b9e5: Fehlerstatus für lmvz-select hinzugefügt.
+
 ## 0.36.0
 
 ### Minor Changes

package/cjs/aria.constants-DPK5mQEL.js

@@ -0,0 +1,65 @@
+'use strict';
+
+const ariaAttributes = [
+    'role',
+    'aria-activedescendant',
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-braillelabel',
+    'aria-brailleroledescription',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colindextext',
+    'aria-colspan',
+    'aria-controls',
+    'aria-current',
+    'aria-describedby',
+    'aria-description',
+    'aria-details',
+    'aria-disabled',
+    'aria-errormessage',
+    'aria-expanded',
+    'aria-flowto',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-labelledby',
+    'aria-level',
+    'aria-live',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-owns',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowindextext',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext',
+];
+const ariaHostMirrorAttributes = [
+    'aria-haspopup',
+    'aria-controls',
+    'aria-expanded',
+    'aria-activedescendant',
+    'aria-autocomplete',
+];
+
+exports.ariaAttributes = ariaAttributes;
+exports.ariaHostMirrorAttributes = ariaHostMirrorAttributes;

package/cjs/{stencil.util-TjS8_DoU.js → async.util-Dnl6c82X.js}

@@ -16,18 +16,6 @@ const raf = (h) => {
     return setTimeout(h);
 };
 
-const componentOnReady = (stencilEl, callback) => {
-    if (hasLazyBuild(stencilEl)) {
-        stencilEl.componentOnReady().then((resolvedEl) => callback(resolvedEl));
-    }
-    else {
-        raf(() => callback(stencilEl));
-    }
-};
-const hasLazyBuild = (stencilEl) => {
-    return stencilEl.componentOnReady !== undefined;
-};
-
-exports.componentOnReady = componentOnReady;
+exports.raf = raf;
 exports.wait = wait;
 exports.waitFrame = waitFrame;

package/cjs/{directional-focus-controller-3uDoin45.js → directional-focus-controller-8Xd_7MHT.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var element_util = require('./element.util-CctmBvUY.js');
+var element_util = require('./element.util-BlhcwmfR.js');
 var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
 
 function isFocusControllerHost(el) {

package/cjs/{element-activation-controller-BWtUKzu2.js → element-activation-controller-DzTUocEO.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var element_util = require('./element.util-CctmBvUY.js');
+var element_util = require('./element.util-BlhcwmfR.js');
 var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
 
 function filterKeysAndCallback(callback, keys = [' ']) {

package/cjs/{element.util-CctmBvUY.js → element.util-BlhcwmfR.js}

@@ -1,65 +1,6 @@
 'use strict';
 
-const ariaAttributes = [
-    'role',
-    'aria-activedescendant',
-    'aria-atomic',
-    'aria-autocomplete',
-    'aria-braillelabel',
-    'aria-brailleroledescription',
-    'aria-busy',
-    'aria-checked',
-    'aria-colcount',
-    'aria-colindex',
-    'aria-colindextext',
-    'aria-colspan',
-    'aria-controls',
-    'aria-current',
-    'aria-describedby',
-    'aria-description',
-    'aria-details',
-    'aria-disabled',
-    'aria-errormessage',
-    'aria-expanded',
-    'aria-flowto',
-    'aria-haspopup',
-    'aria-hidden',
-    'aria-invalid',
-    'aria-keyshortcuts',
-    'aria-label',
-    'aria-labelledby',
-    'aria-level',
-    'aria-live',
-    'aria-multiline',
-    'aria-multiselectable',
-    'aria-orientation',
-    'aria-owns',
-    'aria-placeholder',
-    'aria-posinset',
-    'aria-pressed',
-    'aria-readonly',
-    'aria-relevant',
-    'aria-required',
-    'aria-roledescription',
-    'aria-rowcount',
-    'aria-rowindex',
-    'aria-rowindextext',
-    'aria-rowspan',
-    'aria-selected',
-    'aria-setsize',
-    'aria-sort',
-    'aria-valuemax',
-    'aria-valuemin',
-    'aria-valuenow',
-    'aria-valuetext',
-];
-const ariaHostMirrorAttributes = [
-    'aria-haspopup',
-    'aria-controls',
-    'aria-expanded',
-    'aria-activedescendant',
-    'aria-autocomplete',
-];
+var aria_constants = require('./aria.constants-DPK5mQEL.js');
 
 function isInputElement(element) {
     if (!element)
@@ -102,7 +43,7 @@ const inheritAttributes = (el, attributes = []) => {
     return attributeObject;
 };
 const inheritAriaAttributes = (el, ignoreList) => {
-    let attributesToInherit = ariaAttributes;
+    let attributesToInherit = aria_constants.ariaAttributes;
     if (ignoreList && ignoreList.length > 0) {
         attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
     }
@@ -194,7 +135,6 @@ function isHtmlElement(element) {
     return element instanceof HTMLElement;
 }
 
-exports.ariaHostMirrorAttributes = ariaHostMirrorAttributes;
 exports.canReceiveFocus = canReceiveFocus;
 exports.findFormByRef = findFormByRef;
 exports.getDeepActiveElement = getDeepActiveElement;

package/cjs/lmvz-action-list.cjs.entry.js

@@ -2,10 +2,11 @@
 
 var index = require('./index-BgvZ4y-3.js');
 var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
-var directionalFocusController = require('./directional-focus-controller-3uDoin45.js');
-var element_util = require('./element.util-CctmBvUY.js');
+var directionalFocusController = require('./directional-focus-controller-8Xd_7MHT.js');
+var element_util = require('./element.util-BlhcwmfR.js');
 var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
 require('./aria-loader-DWUVcapD.js');
+require('./aria.constants-DPK5mQEL.js');
 
 const lmvzActionListCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  } .sc-lmvz-action-list-h {   display: flex;   flex-direction: column;   gap: 0;   min-width: 15vw;          button {         --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));   --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px));   --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));   --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router));   --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);    display: inline-flex;   align-items: center;   justify-content: var(--lmvz-button-content-justification-override, center);   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   min-height: var(--lmvz-button-min-height);   min-width: var(--lmvz-button-min-height);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   background-color: var(--lmvz-button-background);   color: var(--lmvz-button-color);   cursor: pointer;   font: var(--lmvz-button-font);      text-decoration: none;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button: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; }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); }  button.primary {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); }  button.primary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); }  button.primary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); }  button.danger {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); }  button.danger:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); }  button.danger:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); }  button.tertiary {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); }  button.small {   --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));   --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5     Router)); }  button.large {   --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));   --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5     Router)); }     lmvz-button,   button {     --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px);     --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));     --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));     --lmvz-button-font-override: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);     --lmvz-button-content-justification-override: normal;      width: 100%;     display: block;   }    button {     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));     --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));      &:not([disabled], .disabled):hover {       --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));       --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));     }      &:not([disabled], .disabled):active {       --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));       --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));     }   } }`;
 

package/cjs/lmvz-button-group.cjs.entry.js

@@ -3,7 +3,8 @@
 var index = require('./index-BgvZ4y-3.js');
 var ariaLoader = require('./aria-loader-DWUVcapD.js');
 var ds_constants = require('./ds.constants-C6eKRAEu.js');
-var element_util = require('./element.util-CctmBvUY.js');
+var element_util = require('./element.util-BlhcwmfR.js');
+require('./aria.constants-DPK5mQEL.js');
 
 /**
  * Returns a function that delegates to the given predicate/filter and negates its result.

package/cjs/lmvz-button_2.cjs.entry.js

@@ -3,12 +3,13 @@
 var index = require('./index-BgvZ4y-3.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
-var elementActivationController = require('./element-activation-controller-BWtUKzu2.js');
-var element_util = require('./element.util-CctmBvUY.js');
+var elementActivationController = require('./element-activation-controller-DzTUocEO.js');
+var element_util = require('./element.util-BlhcwmfR.js');
 var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
 var svg = require('./svg-CysxzZw7.js');
 var icons = require('./icons-snv0hyf1.js');
 require('./aria-loader-DWUVcapD.js');
+require('./aria.constants-DPK5mQEL.js');
 require('./logger-NBdKPSou.js');
 
 const lmvzButtonCss = () => ` @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; }  } @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  } :host {         button {         --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));   --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px));   --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));   --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router));   --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);    display: inline-flex;   align-items: center;   justify-content: var(--lmvz-button-content-justification-override, center);   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   min-height: var(--lmvz-button-min-height);   min-width: var(--lmvz-button-min-height);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   background-color: var(--lmvz-button-background);   color: var(--lmvz-button-color);   cursor: pointer;   font: var(--lmvz-button-font);      text-decoration: none;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button: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; }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); }  button.primary {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); }  button.primary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); }  button.primary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); }  button.danger {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); }  button.danger:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); }  button.danger:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); }  button.tertiary {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); }  button.small {   --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));   --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5     Router)); }  button.large {   --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));   --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5     Router)); }     display: inline-block;    button {     width: 100%;   } } ::slotted(*) {   --lmvz-component-color: var(--lmvz-button-color); } `;

package/cjs/lmvz-checkbox.cjs.entry.js

@@ -9,7 +9,7 @@ require('./aria-loader-DWUVcapD.js');
 
 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 = svg.toValidSvgStringWithFallback(checkmarkSvg);
 let checkboxIdCounter = 0;
@@ -38,7 +38,14 @@ const LmvzCheckbox = class extends reactiveControllerHost.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;
@@ -47,6 +54,10 @@ const LmvzCheckbox = class extends reactiveControllerHost.ReactiveControllerHost
     handleCheckedChange(val) {
         this.checkedState = val;
         this.internals.setFormValue?.(val ? (this.value ?? 'on') : null);
+        this.updateValidity();
+    }
+    handleRequiredChange() {
+        this.updateValidity();
     }
     lmvzChange;
     async focusInput() {
@@ -58,6 +69,9 @@ const LmvzCheckbox = class extends reactiveControllerHost.ReactiveControllerHost
     async reportValidity() {
         return this.internals?.reportValidity() ?? true;
     }
+    async getValidationMessage() {
+        return this.internals?.validationMessage ?? '';
+    }
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -77,10 +91,15 @@ const LmvzCheckbox = class extends reactiveControllerHost.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();
@@ -90,6 +109,7 @@ const LmvzCheckbox = class extends reactiveControllerHost.ReactiveControllerHost
     }
     formResetCallback() {
         this.checked = this.initialChecked;
+        this.updateValidity();
     }
     formStateRestoreCallback(state) {
         this.checked = state === (this.value ?? 'on');
@@ -102,13 +122,27 @@ const LmvzCheckbox = class extends reactiveControllerHost.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 (index.h(index.Host, { key: 'b6b4153dbf80af15cb15799889ca23b621b4ef73' }, index.h("div", { key: 'f11d6baaa4b04ee74b201be8c4e125ccd5c366aa', class: "pill" }, index.h("input", { key: 'd61dccfa163ecf4fffa95a5d44be35adbb8ee8ff', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), index.h("span", { key: '87d62f1e0572e174e6d15f30ff59e37f6a5333cb', class: "box", "aria-hidden": "true" }, this.checkedState && index.h("span", { key: '74d29a32599f6c1ee8bde0cb6f27e384de7fcc2d', class: "indicator", innerHTML: CHECKMARK_SVG })), index.h("span", { key: '544990c81b3f7f90b53902d580d2eb2197edfa8b', class: "content" }, index.h("label", { key: '1884744656a280f85bec91b27315d3a6b70e8238', htmlFor: this.checkboxId }, this.label), this.helperText && (index.h("span", { key: '6783ff413a884c78dbd52e07cc7b433f5a9dcf29', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (index.h("span", { key: '7c19fe406223a11e25df54cdfa304bc000eb421f', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (index.h(index.Host, { key: '089b23f8034fa089f358cc37923182c34f528cd2' }, index.h("div", { key: '0af011ebf062332c330b49fa3076828204433ac4', class: "pill" }, index.h("input", { key: 'a483a8c5bbe1d6da3cfab63ce32ad2e6392911ff', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), index.h("span", { key: 'f21d34ab625c7eef23bd2761b399e8770cd62275', class: "box", "aria-hidden": "true" }, this.checkedState && index.h("span", { key: 'de2680ea17f34ab0124c529d88d4191c97d0a4c5', class: "indicator", innerHTML: CHECKMARK_SVG })), index.h("span", { key: '1b2d24e43603033a5a77340164e002de326db11a', class: "content" }, index.h("label", { key: 'b18f17abb4459b3783dc41d0031f4b26795fdcf5', htmlFor: this.checkboxId }, this.label), this.helperText && (index.h("span", { key: 'f32591c55fcc88d130815780a9999fcb235afd88', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (index.h("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
             }]
     }; }
 };

package/cjs/lmvz-components.cjs.js

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

package/cjs/lmvz-datepicker.cjs.entry.js

@@ -2291,7 +2291,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 = svg.toValidSvgStringWithFallback(chevronLeftSvg);
 const CHEVRON_RIGHT = svg.toValidSvgStringWithFallback(chevronRightSvg);
@@ -2627,10 +2627,17 @@ const LmvzDatepicker = class {
         }
         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();
     }
@@ -2728,13 +2735,13 @@ const LmvzDatepicker = class {
     render() {
         const validationLabels = getValidationLabels(this.locale);
         const popoverLabel = this.label ? `${this.label} ${validationLabels.popoverSuffix}` : undefined;
-        return (index.h(index.Host, { key: 'df61136bb4d184e91e086a06f60e3c198f8a2b85' }, index.h("lmvz-input", { key: '04986afb4a0926df4da693de6210ee4fccd74bd7', ref: (el) => {
+        return (index.h(index.Host, { key: 'af9d7f075bf97d7eb58c6557f43cf8a245d5f712' }, index.h("lmvz-input", { key: 'eef4be58281b8356d443c65c5cf6451192e70f75', ref: (el) => {
                 const wasUnset = !this.inputEl;
                 this.inputEl = el;
                 if (wasUnset && this.inputEl) {
                     index.forceUpdate(this);
                 }
-            }, label: this.label ?? '', placeholder: this.effectivePlaceholder, helperText: this.helperText, errorMessage: this.errorMessage, error: this.isInvalid, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.inputText, autocomplete: "off", onLmvzInput: this.handleInputTextChange, onKeyDown: this.handleInputKeydown }, index.h("lmvz-icon", { key: '47897492e6df2f4b303c99aa33c48f326f3d9d63', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), index.h("lmvz-popover", { key: 'd2904def9519907f56dada15df992800da77db55', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, index.h("div", { key: 'dbdfe38144a63e5ac9de4c46e0df9918f898de28', part: "panel", class: "datepicker-panel" }, this.renderHeader(), this.renderGrid()))));
+            }, label: this.label ?? '', placeholder: this.effectivePlaceholder, helperText: this.helperText, errorMessage: this.errorMessage, error: this.nativeError, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.inputText, autocomplete: "off", onLmvzInput: this.handleInputTextChange, onKeyDown: this.handleInputKeydown }, index.h("lmvz-icon", { key: 'fc39ef14720522a8089d33321b918e5577a36cc2', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), index.h("lmvz-popover", { key: '0076c57da02c7c9d0fcb53584f9dc4127317d6a5', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, index.h("div", { key: '4c1e716e52a5d9ed75155dded3c2c39649e1e844', part: "panel", class: "datepicker-panel" }, this.renderHeader(), this.renderGrid()))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

package/cjs/lmvz-header_2.cjs.entry.js

@@ -2,12 +2,13 @@
 
 var index = require('./index-BgvZ4y-3.js');
 var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
-var directionalFocusController = require('./directional-focus-controller-3uDoin45.js');
+var directionalFocusController = require('./directional-focus-controller-8Xd_7MHT.js');
 var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
 var lmvzMenuitem_entry = require('./lmvz-menuitem.cjs.entry.js');
 require('./aria-loader-DWUVcapD.js');
-require('./element.util-CctmBvUY.js');
-require('./element-activation-controller-BWtUKzu2.js');
+require('./element.util-BlhcwmfR.js');
+require('./aria.constants-DPK5mQEL.js');
+require('./element-activation-controller-DzTUocEO.js');
 
 const logoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA0NiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI3Ml80MDUpIj4KPHBhdGggZD0iTTEyLjUgMjAuNjVDMTMuMSAyMC42NSAxNC4yIDIwLjM1IDE0LjcgMjAuMzVDMTYuMSAyMC4zNSAxNy4yIDIxLjQ1IDE3LjIgMjIuODVDMTcuMiAyNC4yNSAxNi4xIDI1LjM1IDE0LjcgMjUuMzVIMi44QzEuMiAyNS4zNSAwIDI0LjE1IDAgMjIuNTVDMCAyMS45NSAwLjIgMjAuNjUgMC4yIDIwLjA1VjUuODQ5OTlDMC4yIDUuMTQ5OTkgMCAzLjk0OTk5IDAgMy4zNDk5OUMwIDEuNzQ5OTkgMS4yIDAuNTQ5OTg4IDIuOCAwLjU0OTk4OEM0LjMgMC41NDk5ODggNS42IDEuNzQ5OTkgNS42IDMuMzQ5OTlDNS42IDMuOTQ5OTkgNS40IDUuMTQ5OTkgNS40IDUuODQ5OTlWMjAuNTVIMTIuNVYyMC42NVpNMjIuMSAyMi43NUMyMi4xIDIyLjE1IDIyLjMgMjAuOTUgMjIuMyAyMC4yNVY1Ljg0OTk5QzIyLjMgNS4xNDk5OSAyMi4xIDMuOTQ5OTkgMjIuMSAzLjQ0OTk5QzIyLjEgMS45NDk5OSAyMy4yIDAuNzQ5OTg4IDI0LjYgMC43NDk5ODhIMjUuMkMyNi40IDAuNzQ5OTg4IDI3LjIgMS41NDk5OSAyNy42IDIuNjQ5OTlMMjggMy40NDk5OUwzMi45IDE0LjA1QzMzLjMgMTQuOTUgMzMuNyAxNi4wNSAzNCAxNi43NUMzNC4zIDE2LjA1IDM0LjcgMTQuOTUgMzUuMSAxNC4wNUw0MCAzLjU0OTk5TDQwLjMgMi41NDk5OUM0MC43IDEuNTQ5OTkgNDEuNSAwLjY0OTk4OCA0Mi42IDAuNjQ5OTg4SDQzLjJDNDQuNyAwLjY0OTk4OCA0NS43IDEuODQ5OTkgNDUuNyAzLjM0OTk5QzQ1LjcgMy45NDk5OSA0NS41IDUuMTQ5OTkgNDUuNSA1Ljc0OTk5VjIwLjE1QzQ1LjUgMjAuODUgNDUuNyAyMi4wNSA0NS43IDIyLjY1QzQ1LjcgMjQuMjUgNDQuNSAyNS40NSA0MyAyNS40NUM0MS40IDI1LjQ1IDQwLjMgMjQuMjUgNDAuMyAyMi42NUM0MC4zIDIxLjk1IDQwLjQgMjAuNzUgNDAuNCAyMC4xNUw0MC42IDE0LjA1QzQwLjYgMTMuMTUgNDAuNyAxMS43NSA0MC43IDEwLjY1TDM3IDE5LjA1QzM2LjcgMTkuNzUgMzYuNiAxOS45NSAzNi40IDIwLjM1QzM2IDIxLjI1IDM1LjMgMjEuODUgMzMuOSAyMS44NUMzMi41IDIxLjg1IDMxLjggMjEuMjUgMzEuNCAyMC40NUMzMS4yIDIwLjA1IDMxLjIgMTkuNzUgMzAuOCAxOS4wNUwyNyAxMC43NUMyNyAxMC43NSAyNy4xIDEzLjE1IDI3LjIgMTQuMDVMMjcuNCAyMC4xNUMyNy40IDIwLjg1IDI3LjUgMjEuOTUgMjcuNSAyMi42NUMyNy41IDI0LjI1IDI2LjQgMjUuNDUgMjQuOCAyNS40NUMyMy4zIDI1LjU1IDIyLjEgMjQuMjUgMjIuMSAyMi43NVpNMjguNyAzMi45NUMyOS4xIDMyLjk1IDMwLjIgMzMuMTUgMzAuNyAzMy4xNUg0MS44QzQyLjMgMzMuMTUgNDMuMiAzMi45NSA0My43IDMyLjk1QzQ0LjkgMzIuOTUgNDUuOCAzMy44NSA0NS44IDM1LjA1QzQ1LjggMzYuMTUgNDQuOSAzNy4xNSA0My43IDM3LjE1QzQzLjMgMzcuMTUgNDIuMyAzNi45NSA0MS44IDM2Ljk1SDMwLjhDMzAuMyAzNi45NSAyOS4yIDM3LjE1IDI4LjggMzcuMTVDMjcuNiAzNy4xNSAyNi43IDM2LjI1IDI2LjcgMzUuMDVDMjYuNiAzMy45NSAyNy41IDMyLjk1IDI4LjcgMzIuOTVaTTIuMSA2Ny4yNUMyLjUgNjcuMjUgMy42IDY3LjQ1IDQuMSA2Ny40NUgxOC41QzE5IDY3LjQ1IDE5LjkgNjcuMjUgMjAuNCA2Ny4yNUMyMS42IDY3LjI1IDIyLjUgNjguMTUgMjIuNSA2OS4zNUMyMi41IDcwLjQ1IDIxLjYgNzEuNDUgMjAuNCA3MS40NUMyMCA3MS40NSAxOSA3MS4yNSAxOC41IDcxLjI1SDQuMUMzLjYgNzEuMjUgMi41IDcxLjQ1IDIuMSA3MS40NUMwLjkgNzEuNDUgMCA3MC41NSAwIDY5LjM1QzAgNjguMjUgMC45IDY3LjI1IDIuMSA2Ny4yNVpNMjEuOSAzNS42NUMyMS45IDM1Ljk1IDIxLjggMzYuMzUgMjEuNiAzNi43NUMyMS4zIDM3LjQ1IDIwLjkgMzguMzUgMjAuNyAzOC44NUwxNC43IDU0LjY1QzE0LjUgNTUuMDUgMTQuNCA1NS41NSAxNC4yIDU2LjM1QzEzLjggNTcuNjUgMTIuNiA1OC4yNSAxMS4yIDU4LjI1SDEwLjhDOS40IDU4LjI1IDguMiA1Ny43NSA3LjggNTYuMzVDNy42IDU1LjU1IDcuNCA1NS4xNSA3LjIgNTQuNjVMMS4yIDM4Ljg1QzEgMzguMzUgMC42IDM3LjU1IDAuMiAzNi44NUMwLjEgMzYuNDUgMCAzNS45NSAwIDM1LjY1QzAgMzQuMTUgMS4yIDMyLjg1IDIuOCAzMi44NUMzLjkgMzIuODUgNSAzMy41NSA1LjMgMzQuNzVDNS41IDM1LjU1IDUuNSAzNi4xNSA2IDM3LjU1TDEwLjIgNDkuNDVDMTAuNSA1MC4zNSAxMC45IDUxLjQ1IDExLjEgNTIuMzVDMTEuMyA1MS40NSAxMS42IDUwLjQ1IDExLjkgNDkuNTVMMTYgMzcuNTVDMTYuNSAzNi4wNSAxNi40IDM1LjY1IDE2LjcgMzQuODVDMTcuMSAzMy42NSAxOC4xIDMyLjg1IDE5LjMgMzIuODVDMjAuOSAzMi44NSAyMS45IDM0LjE1IDIxLjkgMzUuNjVaTTI5LjcgNzEuNDVDMjguMiA3MS40NSAyNy4yIDcwLjQ1IDI3LjIgNjkuMTVDMjcuMiA2OC43NSAyNy4yIDY4LjI1IDI3LjggNjcuNDVMMzcuNCA1My40NUMzNy45IDUyLjc1IDM4LjUgNTIuMDUgMzkuMSA1MS4zNUgzMi4yQzMxLjUgNTEuMzUgMzAuNyA1MS42NSAzMC4xIDUxLjY1QzI4LjcgNTEuNjUgMjcuNiA1MC43NSAyNy42IDQ5LjM1QzI3LjYgNDcuOTUgMjguNyA0Ni45NSAzMC4xIDQ2Ljk1SDQyLjdDNDQuMiA0Ni45NSA0NS4yIDQ3Ljg1IDQ1LjIgNDkuMjVDNDUuMiA0OS42NSA0NSA1MC4zNSA0NC41IDUxLjA1TDM1LjIgNjQuODVDMzQuNyA2NS42NSAzNC4xIDY2LjQ1IDMzLjUgNjcuMDVINDEuMUM0MS45IDY3LjA1IDQyLjcgNjYuNzUgNDMuMyA2Ni43NUM0NC43IDY2Ljc1IDQ1LjcgNjcuNzUgNDUuNyA2OS4wNUM0NS43IDcwLjU1IDQ0LjUgNzEuNTUgNDMuMiA3MS41NUgyOS43VjcxLjQ1WiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNzJfNDA1Ij4KPHJlY3Qgd2lkdGg9IjQ2IiBoZWlnaHQ9IjcyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=';