@lmvz-ds/components 0.36.0 → 0.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (157) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/cjs/aria.constants-DPK5mQEL.js +65 -0
  3. package/cjs/{stencil.util-TjS8_DoU.js → async.util-Dnl6c82X.js} +1 -13
  4. package/cjs/{directional-focus-controller-3uDoin45.js → directional-focus-controller-8Xd_7MHT.js} +1 -1
  5. package/cjs/{element-activation-controller-BWtUKzu2.js → element-activation-controller-DzTUocEO.js} +1 -1
  6. package/cjs/{element.util-CctmBvUY.js → element.util-BlhcwmfR.js} +2 -62
  7. package/cjs/lmvz-action-list.cjs.entry.js +4 -3
  8. package/cjs/lmvz-button-group.cjs.entry.js +2 -1
  9. package/cjs/lmvz-button_2.cjs.entry.js +4 -3
  10. package/cjs/lmvz-card.cjs.entry.js +1 -1
  11. package/cjs/lmvz-checkbox.cjs.entry.js +38 -4
  12. package/cjs/lmvz-components.cjs.js +1 -1
  13. package/cjs/lmvz-datepicker.cjs.entry.js +10 -3
  14. package/cjs/lmvz-header_2.cjs.entry.js +4 -3
  15. package/cjs/lmvz-input.cjs.entry.js +242 -0
  16. package/cjs/lmvz-menuitem.cjs.entry.js +3 -2
  17. package/cjs/lmvz-modal.cjs.entry.js +3 -2
  18. package/cjs/{lmvz-input_2.cjs.entry.js → lmvz-popover.cjs.entry.js} +24 -228
  19. package/cjs/lmvz-radio.cjs.entry.js +61 -3
  20. package/cjs/lmvz-select.cjs.entry.js +423 -16
  21. package/cjs/lmvz-snackbar.cjs.entry.js +1 -1
  22. package/cjs/lmvz-spinner.cjs.entry.js +1 -1
  23. package/cjs/lmvz-tab.cjs.entry.js +2 -2
  24. package/cjs/lmvz-tabs.cjs.entry.js +5 -4
  25. package/cjs/lmvz-toggle.cjs.entry.js +7 -3
  26. package/cjs/loader.cjs.js +1 -1
  27. package/cjs/stencil.util-CBrPLd-F.js +17 -0
  28. package/collection/components/lmvz-action-list/lmvz-action-list.css +11 -0
  29. package/collection/components/lmvz-button/lmvz-button.css +11 -0
  30. package/collection/components/lmvz-card/lmvz-card.css +11 -0
  31. package/collection/components/lmvz-checkbox/lmvz-checkbox.css +4 -2
  32. package/collection/components/lmvz-checkbox/lmvz-checkbox.js +68 -8
  33. package/collection/components/lmvz-datepicker/lmvz-datepicker.css +0 -5
  34. package/collection/components/lmvz-datepicker/lmvz-datepicker.js +17 -3
  35. package/collection/components/lmvz-input/lmvz-input.css +1 -1
  36. package/collection/components/lmvz-input/lmvz-input.js +47 -12
  37. package/collection/components/lmvz-modal/lmvz-modal.css +11 -0
  38. package/collection/components/lmvz-popover/lmvz-popover.css +1 -1
  39. package/collection/components/lmvz-popover/lmvz-popover.js +45 -5
  40. package/collection/components/lmvz-radio/lmvz-radio.js +77 -9
  41. package/collection/components/lmvz-select/lmvz-select.css +96 -34
  42. package/collection/components/lmvz-select/lmvz-select.js +412 -21
  43. package/collection/components/lmvz-snackbar/lmvz-snackbar.js +1 -1
  44. package/collection/components/lmvz-spinner/lmvz-spinner.js +1 -1
  45. package/collection/components/lmvz-tab/lmvz-tab.css +11 -0
  46. package/collection/components/lmvz-tab/lmvz-tab.js +1 -1
  47. package/collection/components/lmvz-tabs/lmvz-tabs.css +11 -0
  48. package/collection/components/lmvz-tabs/lmvz-tabs.js +1 -1
  49. package/collection/components/lmvz-toggle/lmvz-toggle.js +21 -1
  50. package/collection/integration/header-integration/header-integration.js +1 -1
  51. package/collection/styles/fragments/_focus-within.css +2 -2
  52. package/collection/utils/aria/listbox-controller.js +154 -0
  53. package/collection/utils/radio/radio-group-controller.js +17 -0
  54. package/components/lmvz-action-list.js +1 -1
  55. package/components/lmvz-button.js +1 -1
  56. package/components/lmvz-card.js +1 -1
  57. package/components/lmvz-checkbox.js +1 -1
  58. package/components/lmvz-datepicker.js +1 -1
  59. package/components/lmvz-input.js +1 -1
  60. package/components/lmvz-message.js +1 -1
  61. package/components/lmvz-modal.js +1 -1
  62. package/components/lmvz-popover.js +1 -1
  63. package/components/lmvz-radio.js +1 -1
  64. package/components/lmvz-select.js +1 -1
  65. package/components/lmvz-snackbar.js +1 -1
  66. package/components/lmvz-spinner.js +1 -1
  67. package/components/lmvz-tab.js +1 -1
  68. package/components/lmvz-tabs.js +1 -1
  69. package/components/lmvz-toggle.js +1 -1
  70. package/components/p-BApwCp0R.js +1 -0
  71. package/components/p-C5gRiLRR.js +1 -0
  72. package/components/p-DiRcp9V6.js +1 -0
  73. package/esm/aria.constants-DIyiticz.js +62 -0
  74. package/esm/{stencil.util-C3QOYC8E.js → async.util-DZj20TV1.js} +1 -13
  75. package/esm/{directional-focus-controller-Bhu7RqYE.js → directional-focus-controller-QukTTWBE.js} +1 -1
  76. package/esm/{element-activation-controller-BuwyVq4A.js → element-activation-controller-dxJZKMag.js} +1 -1
  77. package/esm/{element.util-Bd9JyKJZ.js → element.util-3ydVsxUW.js} +2 -61
  78. package/esm/lmvz-action-list.entry.js +4 -3
  79. package/esm/lmvz-button-group.entry.js +2 -1
  80. package/esm/lmvz-button_2.entry.js +4 -3
  81. package/esm/lmvz-card.entry.js +1 -1
  82. package/esm/lmvz-checkbox.entry.js +38 -4
  83. package/esm/lmvz-components.js +1 -1
  84. package/esm/lmvz-datepicker.entry.js +10 -3
  85. package/esm/lmvz-header_2.entry.js +4 -3
  86. package/esm/lmvz-input.entry.js +240 -0
  87. package/esm/lmvz-menuitem.entry.js +3 -2
  88. package/esm/lmvz-modal.entry.js +3 -2
  89. package/esm/{lmvz-input_2.entry.js → lmvz-popover.entry.js} +23 -226
  90. package/esm/lmvz-radio.entry.js +61 -3
  91. package/esm/lmvz-select.entry.js +423 -16
  92. package/esm/lmvz-snackbar.entry.js +1 -1
  93. package/esm/lmvz-spinner.entry.js +1 -1
  94. package/esm/lmvz-tab.entry.js +2 -2
  95. package/esm/lmvz-tabs.entry.js +5 -4
  96. package/esm/lmvz-toggle.entry.js +7 -3
  97. package/esm/loader.js +1 -1
  98. package/esm/stencil.util-D2-5rsN3.js +15 -0
  99. package/hydrate/index.js +631 -74
  100. package/hydrate/index.mjs +631 -74
  101. package/lmvz-components/lmvz-components.esm.js +1 -1
  102. package/lmvz-components/p-00489151.entry.js +1 -0
  103. package/lmvz-components/{p-544e3ccb.entry.js → p-0f65d001.entry.js} +1 -1
  104. package/lmvz-components/p-137b1fe1.entry.js +1 -0
  105. package/lmvz-components/p-26dd9684.entry.js +1 -0
  106. package/lmvz-components/p-398b5cf4.entry.js +1 -0
  107. package/lmvz-components/p-40716828.entry.js +1 -0
  108. package/lmvz-components/p-4deaa010.entry.js +1 -0
  109. package/lmvz-components/p-57a366e6.entry.js +1 -0
  110. package/lmvz-components/p-70f1e31a.entry.js +1 -0
  111. package/lmvz-components/p-7872a6b4.entry.js +1 -0
  112. package/lmvz-components/{p-d280d21a.entry.js → p-88661c50.entry.js} +1 -1
  113. package/lmvz-components/p-91eb71bb.entry.js +1 -0
  114. package/lmvz-components/p-BA3wizqg.js +1 -0
  115. package/lmvz-components/{p-GGkwaiT6.js → p-CHxiS3ja.js} +1 -1
  116. package/lmvz-components/{p-UhNgD4L3.js → p-CPSyM_e-.js} +1 -1
  117. package/lmvz-components/p-DIyiticz.js +1 -0
  118. package/lmvz-components/p-DZj20TV1.js +1 -0
  119. package/lmvz-components/p-a680a7b2.entry.js +1 -0
  120. package/lmvz-components/{p-d48203f9.entry.js → p-a6fe9b61.entry.js} +1 -1
  121. package/lmvz-components/p-bh9cItsP.js +1 -0
  122. package/lmvz-components/p-e14058e1.entry.js +1 -0
  123. package/lmvz-components/p-eabbf901.entry.js +1 -0
  124. package/lmvz-components/p-f3f0ed49.entry.js +1 -0
  125. package/lmvz-components/p-f516a949.entry.js +1 -0
  126. package/manifest.json +366 -30
  127. package/package.json +1 -1
  128. package/types/api/ds.types.d.ts +1 -0
  129. package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +9 -1
  130. package/types/components/lmvz-datepicker/lmvz-datepicker.d.ts +2 -0
  131. package/types/components/lmvz-input/lmvz-input.d.ts +3 -0
  132. package/types/components/lmvz-popover/lmvz-popover.d.ts +2 -0
  133. package/types/components/lmvz-radio/lmvz-radio.d.ts +12 -2
  134. package/types/components/lmvz-select/lmvz-select.d.ts +53 -4
  135. package/types/components/lmvz-toggle/lmvz-toggle.d.ts +1 -0
  136. package/types/components.d.ts +96 -12
  137. package/types/utils/aria/listbox-controller.d.ts +42 -0
  138. package/types/utils/radio/radio-group-controller.d.ts +3 -0
  139. package/components/p-Bnri3fEI.js +0 -1
  140. package/components/p-CPuI0_r_.js +0 -1
  141. package/components/p-CWpl0WaZ.js +0 -1
  142. package/lmvz-components/p-63f6a596.entry.js +0 -1
  143. package/lmvz-components/p-7a7aa922.entry.js +0 -1
  144. package/lmvz-components/p-8022c6dc.entry.js +0 -1
  145. package/lmvz-components/p-Bd9JyKJZ.js +0 -1
  146. package/lmvz-components/p-C3QOYC8E.js +0 -1
  147. package/lmvz-components/p-a611c110.entry.js +0 -1
  148. package/lmvz-components/p-b1bb4393.entry.js +0 -1
  149. package/lmvz-components/p-b50b1cb5.entry.js +0 -1
  150. package/lmvz-components/p-b932cf91.entry.js +0 -1
  151. package/lmvz-components/p-bff115d4.entry.js +0 -1
  152. package/lmvz-components/p-d9aede81.entry.js +0 -1
  153. package/lmvz-components/p-dbfbcb74.entry.js +0 -1
  154. package/lmvz-components/p-f0e28f3a.entry.js +0 -1
  155. package/lmvz-components/p-f853faae.entry.js +0 -1
  156. package/lmvz-components/p-fa2efc42.entry.js +0 -1
  157. package/lmvz-components/p-fe6f5bdc.entry.js +0 -1
package/hydrate/index.js CHANGED
@@ -5866,7 +5866,7 @@ function getLmvzComponentMetaInfo(el, key) {
5866
5866
  function isFocusControllerHost(el) {
5867
5867
  return Boolean(getLmvzComponentMetaInfo(el, 'isFocusControllerHost'));
5868
5868
  }
5869
- const defaultConfig = {
5869
+ const defaultConfig$1 = {
5870
5870
  orientation: 'both',
5871
5871
  enableHomeAndEnd: false,
5872
5872
  manageTabIndex: false,
@@ -5879,7 +5879,7 @@ class DirectionalFocusController {
5879
5879
  constructor(host, config = {}) {
5880
5880
  this.host = host;
5881
5881
  this.config = {
5882
- ...defaultConfig,
5882
+ ...defaultConfig$1,
5883
5883
  ...config,
5884
5884
  };
5885
5885
  }
@@ -6048,7 +6048,7 @@ function resolveElement(el) {
6048
6048
  return isDirectionalFocusReceiver(el) ? (el.resolveFocusableElement() ?? el) : el;
6049
6049
  }
6050
6050
 
6051
- 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)); } } }`;
6051
+ 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); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .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)); } } }`;
6052
6052
 
6053
6053
  class LmvzActionList extends ReactiveControllerHost {
6054
6054
  get el() { return getElement(this); }
@@ -6279,7 +6279,7 @@ function addElementActivationListener(...[target, handler, abortSignal, keys]) {
6279
6279
  bindHandlers(target, handler, abortSignal, keys);
6280
6280
  }
6281
6281
 
6282
- 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); } `;
6282
+ 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); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } :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); } `;
6283
6283
 
6284
6284
  class LmvzButton extends ReactiveControllerHost {
6285
6285
  get el() { return getElement(this); }
@@ -8751,7 +8751,7 @@ function joinPath(...parts) {
8751
8751
  return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
8752
8752
  }
8753
8753
 
8754
- const lmvzCardCss = () => `@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); } } .sc-lmvz-card-h { 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: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }`;
8754
+ const lmvzCardCss = () => `@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); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .sc-lmvz-card-h { 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: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }`;
8755
8755
 
8756
8756
  class LmvzCard {
8757
8757
  constructor(hostRef) {
@@ -8797,7 +8797,7 @@ class LmvzCard {
8797
8797
 
8798
8798
  const checkmarkSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
8799
8799
 
8800
- 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; } }`;
8800
+ 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; } }`;
8801
8801
 
8802
8802
  const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmarkSvg);
8803
8803
  let checkboxIdCounter = 0;
@@ -8826,7 +8826,14 @@ class LmvzCheckbox extends ReactiveControllerHost {
8826
8826
  name;
8827
8827
  disabled = false;
8828
8828
  required = false;
8829
- error = false;
8829
+ nativeError = false;
8830
+ errorFromProp = false;
8831
+ get error() {
8832
+ return this.errorFromProp || this.nativeError;
8833
+ }
8834
+ set error(value) {
8835
+ this.errorFromProp = value;
8836
+ }
8830
8837
  errorMessage;
8831
8838
  helperText;
8832
8839
  form;
@@ -8835,6 +8842,10 @@ class LmvzCheckbox extends ReactiveControllerHost {
8835
8842
  handleCheckedChange(val) {
8836
8843
  this.checkedState = val;
8837
8844
  this.internals.setFormValue?.(val ? (this.value ?? 'on') : null);
8845
+ this.updateValidity();
8846
+ }
8847
+ handleRequiredChange() {
8848
+ this.updateValidity();
8838
8849
  }
8839
8850
  lmvzChange;
8840
8851
  async focusInput() {
@@ -8846,6 +8857,9 @@ class LmvzCheckbox extends ReactiveControllerHost {
8846
8857
  async reportValidity() {
8847
8858
  return this.internals?.reportValidity() ?? true;
8848
8859
  }
8860
+ async getValidationMessage() {
8861
+ return this.internals?.validationMessage ?? '';
8862
+ }
8849
8863
  constructor(hostRef) {
8850
8864
  super();
8851
8865
  registerInstance(this, hostRef);
@@ -8865,10 +8879,15 @@ class LmvzCheckbox extends ReactiveControllerHost {
8865
8879
  this.initialChecked = this.checked;
8866
8880
  this.checkedState = this.checked;
8867
8881
  this.internals.setFormValue?.(this.checked ? (this.value ?? 'on') : null);
8882
+ this.updateValidity();
8868
8883
  super.componentWillLoad();
8869
8884
  }
8885
+ componentDidLoad() {
8886
+ this.updateValidity();
8887
+ super.componentDidLoad();
8888
+ }
8870
8889
  componentWillRender() {
8871
- if (this.error && !this.errorMessage) {
8890
+ if (this.errorFromProp && !this.errorMessage) {
8872
8891
  console.warn('lmvz-checkbox: error=true set without errorMessage — no visual-only error state is rendered. Provide errorMessage to communicate the error to users.');
8873
8892
  }
8874
8893
  super.componentWillRender();
@@ -8878,6 +8897,7 @@ class LmvzCheckbox extends ReactiveControllerHost {
8878
8897
  }
8879
8898
  formResetCallback() {
8880
8899
  this.checked = this.initialChecked;
8900
+ this.updateValidity();
8881
8901
  }
8882
8902
  formStateRestoreCallback(state) {
8883
8903
  this.checked = state === (this.value ?? 'on');
@@ -8890,13 +8910,27 @@ class LmvzCheckbox extends ReactiveControllerHost {
8890
8910
  retargetInnerClicks() {
8891
8911
  this.nativeInput?.click();
8892
8912
  }
8913
+ updateValidity() {
8914
+ if (this.required && !this.checked) {
8915
+ this.internals.setValidity?.({ valueMissing: true }, 'Please check this box.', this.nativeInput);
8916
+ return;
8917
+ }
8918
+ this.internals.setValidity?.({});
8919
+ this.nativeError = false;
8920
+ }
8921
+ handleInvalid() {
8922
+ this.nativeError = true;
8923
+ }
8893
8924
  render() {
8894
- 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))));
8925
+ 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))));
8895
8926
  }
8896
8927
  static get formAssociated() { return true; }
8897
8928
  static get watchers() { return {
8898
8929
  "checked": [{
8899
8930
  "handleCheckedChange": 0
8931
+ }],
8932
+ "required": [{
8933
+ "handleRequiredChange": 0
8900
8934
  }]
8901
8935
  }; }
8902
8936
  static get style() { return lmvzCheckboxCss(); }
@@ -8907,22 +8941,24 @@ class LmvzCheckbox extends ReactiveControllerHost {
8907
8941
  "label": [1],
8908
8942
  "checked": [1540],
8909
8943
  "value": [1],
8910
- "name": [1],
8944
+ "name": [513],
8911
8945
  "disabled": [516],
8912
8946
  "required": [516],
8913
- "error": [516],
8947
+ "error": [6660],
8914
8948
  "errorMessage": [1, "error-message"],
8915
8949
  "helperText": [1, "helper-text"],
8916
8950
  "form": [1],
8917
8951
  "autofocus": [4],
8952
+ "nativeError": [32],
8918
8953
  "checkedState": [32],
8919
8954
  "focusInput": [64],
8920
8955
  "checkValidity": [64],
8921
- "reportValidity": [64]
8956
+ "reportValidity": [64],
8957
+ "getValidationMessage": [64]
8922
8958
  },
8923
- "$listeners$": undefined,
8959
+ "$listeners$": [[0, "invalid", "handleInvalid"]],
8924
8960
  "$lazyBundleId$": "-",
8925
- "$attrsToReflect$": [["checked", "checked"], ["disabled", "disabled"], ["required", "required"], ["error", "error"]]
8961
+ "$attrsToReflect$": [["checked", "checked"], ["name", "name"], ["disabled", "disabled"], ["required", "required"], ["error", "error"]]
8926
8962
  }; }
8927
8963
  }
8928
8964
 
@@ -11298,7 +11334,7 @@ function parseFromDisplay(text, locale, displayFormat) {
11298
11334
  return `${String(yyyy).padStart(4, '0')}-${String(MM).padStart(2, '0')}-${String(dd).padStart(2, '0')}`;
11299
11335
  }
11300
11336
 
11301
- 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); } `;
11337
+ 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); } `;
11302
11338
 
11303
11339
  const CHEVRON_LEFT = toValidSvgStringWithFallback(chevronLeftSvg);
11304
11340
  const CHEVRON_RIGHT = toValidSvgStringWithFallback(chevronRightSvg);
@@ -11634,10 +11670,17 @@ class LmvzDatepicker {
11634
11670
  }
11635
11671
  const isInvalid = Object.values(flags).some(Boolean);
11636
11672
  this.isInvalid = isInvalid;
11673
+ if (!isInvalid) {
11674
+ this.nativeError = false;
11675
+ }
11637
11676
  const validationLabels = getValidationLabels(this.locale);
11638
11677
  this.internals.setValidity?.(flags, isInvalid ? this.errorMessage || validationLabels.invalidDateMessage : undefined, isInvalid ? this.el : undefined);
11639
11678
  }
11679
+ handleInvalid() {
11680
+ this.nativeError = true;
11681
+ }
11640
11682
  isInvalid = false;
11683
+ nativeError = false;
11641
11684
  get effectivePlaceholder() {
11642
11685
  return this.placeholder ?? derivePatternFromLocale(this.locale).toLowerCase();
11643
11686
  }
@@ -11735,9 +11778,9 @@ class LmvzDatepicker {
11735
11778
  render() {
11736
11779
  const validationLabels = getValidationLabels(this.locale);
11737
11780
  const popoverLabel = this.label ? `${this.label} ${validationLabels.popoverSuffix}` : undefined;
11738
- return (hAsync(Host, { key: 'df61136bb4d184e91e086a06f60e3c198f8a2b85' }, hAsync("lmvz-input", { key: '04986afb4a0926df4da693de6210ee4fccd74bd7', ref: (el) => {
11781
+ return (hAsync(Host, { key: 'af9d7f075bf97d7eb58c6557f43cf8a245d5f712' }, hAsync("lmvz-input", { key: 'eef4be58281b8356d443c65c5cf6451192e70f75', ref: (el) => {
11739
11782
  this.inputEl = el;
11740
- }, 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()))));
11783
+ }, 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()))));
11741
11784
  }
11742
11785
  static get delegatesFocus() { return true; }
11743
11786
  static get formAssociated() { return true; }
@@ -11788,10 +11831,11 @@ class LmvzDatepicker {
11788
11831
  "inputText": [32],
11789
11832
  "hasUnparseableInput": [32],
11790
11833
  "isInvalid": [32],
11834
+ "nativeError": [32],
11791
11835
  "checkValidity": [64],
11792
11836
  "reportValidity": [64]
11793
11837
  },
11794
- "$listeners$": [[0, "keydown", "handleKeydown"], [0, "focusin", "handleInputFocus"], [0, "click", "handleInputFocus"]],
11838
+ "$listeners$": [[0, "keydown", "handleKeydown"], [0, "focusin", "handleInputFocus"], [0, "click", "handleInputFocus"], [0, "invalid", "handleInvalid"]],
11795
11839
  "$lazyBundleId$": "-",
11796
11840
  "$attrsToReflect$": [["disabled", "disabled"], ["readonly", "readonly"], ["required", "required"], ["name", "name"], ["open", "open"]]
11797
11841
  }; }
@@ -12018,7 +12062,7 @@ const hasLazyBuild = (stencilEl) => {
12018
12062
  return stencilEl.componentOnReady !== undefined;
12019
12063
  };
12020
12064
 
12021
- 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)); }`;
12065
+ 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)); }`;
12022
12066
 
12023
12067
  let inputIdCounter = 0;
12024
12068
  class LmvzInput extends ReactiveControllerHost {
@@ -12028,6 +12072,7 @@ class LmvzInput extends ReactiveControllerHost {
12028
12072
  }
12029
12073
  lmvzInput;
12030
12074
  internals;
12075
+ inputValidityActive = false;
12031
12076
  nativeInputElement;
12032
12077
  inputId = `lmvz-input-${inputIdCounter++}`;
12033
12078
  initialValue = '';
@@ -12084,7 +12129,7 @@ class LmvzInput extends ReactiveControllerHost {
12084
12129
  async setValue(newValue) {
12085
12130
  const input = this.nativeInputElement;
12086
12131
  const val = newValue ?? '';
12087
- if (input) {
12132
+ if (input && input.value !== val) {
12088
12133
  input.value = val;
12089
12134
  }
12090
12135
  this.value = val;
@@ -12106,6 +12151,9 @@ class LmvzInput extends ReactiveControllerHost {
12106
12151
  async reportValidity() {
12107
12152
  return this.nativeInputElement?.reportValidity?.() ?? false;
12108
12153
  }
12154
+ async getValidationMessage() {
12155
+ return this.nativeInputElement?.validationMessage ?? '';
12156
+ }
12109
12157
  async getInputElement() {
12110
12158
  if (!this.nativeInputElement) {
12111
12159
  await new Promise((resolve) => componentOnReady(this.el, resolve));
@@ -12173,8 +12221,12 @@ class LmvzInput extends ReactiveControllerHost {
12173
12221
  this.internals.setFormValue?.(this.value ?? '');
12174
12222
  }
12175
12223
  formResetCallback() {
12224
+ this.inputValidityActive = false;
12176
12225
  this.internals.setValidity({});
12177
12226
  this.setValue(this.initialValue);
12227
+ if (this.nativeInputElement?.checkValidity?.()) {
12228
+ this.nativeError = false;
12229
+ }
12178
12230
  }
12179
12231
  formStateRestoreCallback(state) {
12180
12232
  this.setValue(state);
@@ -12188,35 +12240,45 @@ class LmvzInput extends ReactiveControllerHost {
12188
12240
  this.setValue(newValue);
12189
12241
  }
12190
12242
  handleDisabledChange(disabled) {
12191
- if (disabled && this.nativeInputElement) {
12243
+ if (!this.nativeInputElement)
12244
+ return;
12245
+ if (disabled) {
12192
12246
  this.nativeInputElement.blur();
12193
12247
  }
12248
+ else {
12249
+ this.inputValidityActive = false;
12250
+ }
12194
12251
  }
12195
12252
  handleInput = (event) => {
12196
12253
  const input = event.target;
12197
12254
  this.setValue(input.value);
12255
+ if (!this.inputValidityActive)
12256
+ return;
12257
+ this.updateNativeError('input');
12198
12258
  };
12199
12259
  handleChange = (event) => {
12200
- const input = event.target ?? this.nativeInputElement;
12201
- this.updateNativeError(input);
12202
12260
  };
12203
12261
  handleFocus = () => { };
12204
- handleBlur = (event) => {
12205
- const input = event.target;
12206
- input.checkValidity?.();
12262
+ handleInvalid = () => this.updateNativeError('invalid');
12263
+ handleBlur = () => {
12264
+ this.inputValidityActive = true;
12265
+ this.updateNativeError('blur');
12207
12266
  };
12208
- updateNativeError(fromEvent) {
12209
- const input = fromEvent ?? this.nativeInputElement;
12267
+ updateNativeError(sourceEvent) {
12268
+ const input = this.nativeInputElement;
12210
12269
  if (!input)
12211
12270
  return;
12212
- this.nativeError = !(input.checkValidity?.() ?? true);
12271
+ const newState = sourceEvent === 'invalid' ? true : !(input.checkValidity?.() ?? true);
12272
+ if (this.nativeError === newState)
12273
+ return;
12274
+ this.nativeError = newState;
12213
12275
  }
12214
12276
  render() {
12215
12277
  const hasValue = Boolean(this.value);
12216
12278
  const shouldFloatLabel = hasValue || Boolean(this.placeholder);
12217
- return (hAsync("div", { key: 'b7e432c7dbc598189d85040252455c5163fe6395', class: classNames('input-container', {
12279
+ return (hAsync("div", { key: '626697f00e9ba3ad46e6304d06b04df0f27bb2c2', class: classNames('input-container', {
12218
12280
  'interaction-filled': hasValue,
12219
- }) }, 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)));
12281
+ }) }, 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)));
12220
12282
  }
12221
12283
  static get formAssociated() { return true; }
12222
12284
  static get watchers() { return {
@@ -12264,6 +12326,7 @@ class LmvzInput extends ReactiveControllerHost {
12264
12326
  "select": [64],
12265
12327
  "checkValidity": [64],
12266
12328
  "reportValidity": [64],
12329
+ "getValidationMessage": [64],
12267
12330
  "getInputElement": [64]
12268
12331
  },
12269
12332
  "$listeners$": undefined,
@@ -12508,7 +12571,7 @@ class LmvzMessage {
12508
12571
  }; }
12509
12572
  }
12510
12573
 
12511
- const lmvzModalCss = () => ` @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 { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { margin-inline: auto; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: fit-content; max-height: 100%; max-width: clamp(20rem, 100%, 90vw); display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); 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); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .close-button { position: absolute; top: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); flex: 1; overflow: scroll; } `;
12574
+ const lmvzModalCss = () => ` @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); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { margin-inline: auto; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: fit-content; max-height: 100%; max-width: clamp(20rem, 100%, 90vw); display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); 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); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .close-button { position: absolute; top: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); flex: 1; overflow: scroll; } `;
12512
12575
 
12513
12576
  const closeIconSvg = toValidSvgStringWithFallback(closeSmSvg);
12514
12577
  let modalIdCounter = 0;
@@ -14111,7 +14174,7 @@ const computePosition = (reference, floating, options) => {
14111
14174
  });
14112
14175
  };
14113
14176
 
14114
- 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}`;
14177
+ 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}`;
14115
14178
 
14116
14179
  class LmvzPopover {
14117
14180
  constructor(hostRef) {
@@ -14132,6 +14195,7 @@ class LmvzPopover {
14132
14195
  placement = 'bottom-start';
14133
14196
  size = 'sm';
14134
14197
  autoFocus = true;
14198
+ containerRole = 'dialog';
14135
14199
  label;
14136
14200
  lmvzOpen;
14137
14201
  lmvzClose;
@@ -14152,6 +14216,7 @@ class LmvzPopover {
14152
14216
  }
14153
14217
  componentDidLoad() {
14154
14218
  autoAssignId(this.el);
14219
+ this.syncContainerId();
14155
14220
  }
14156
14221
  handleOpenChange(isOpen) {
14157
14222
  if (isOpen) {
@@ -14178,16 +14243,23 @@ class LmvzPopover {
14178
14243
  this.removeCloseHandlers();
14179
14244
  this.extEventController.abort();
14180
14245
  }
14246
+ syncContainerId() {
14247
+ const hostId = this.el.getAttribute('id');
14248
+ if (!hostId || !this.containerEl)
14249
+ return;
14250
+ this.containerEl.id = hostId;
14251
+ }
14181
14252
  setupAnchorEl() {
14182
14253
  const { anchorEl } = this;
14183
14254
  if (!anchorEl) {
14184
14255
  console.warn('no anchor element set for', this);
14185
14256
  return;
14186
14257
  }
14258
+ this.syncContainerId();
14187
14259
  if (!anchorEl.hasAttribute('aria-haspopup')) {
14188
- anchorEl.setAttribute('aria-haspopup', 'dialog');
14260
+ anchorEl.setAttribute('aria-haspopup', this.containerRole === 'dialog' ? 'dialog' : this.containerRole);
14189
14261
  }
14190
- anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
14262
+ anchorEl.setAttribute('aria-controls', this.containerEl?.id || this.el.getAttribute('id'));
14191
14263
  if (!anchorEl.hasAttribute('aria-expanded')) {
14192
14264
  anchorEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
14193
14265
  }
@@ -14215,10 +14287,11 @@ class LmvzPopover {
14215
14287
  await waitFrame();
14216
14288
  await this.updatePosition();
14217
14289
  autoAssignId(this.el);
14290
+ this.syncContainerId();
14218
14291
  this.applyAnchorAriaOpen();
14219
14292
  this.lmvzOpen.emit();
14220
14293
  await waitFrame();
14221
- if (this.autoFocus) {
14294
+ if (this.autoFocus && this.containerRole === 'dialog') {
14222
14295
  this.focusFirst();
14223
14296
  }
14224
14297
  }
@@ -14293,7 +14366,7 @@ class LmvzPopover {
14293
14366
  this.closureController?.abort();
14294
14367
  }
14295
14368
  render() {
14296
- 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) }))));
14369
+ 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) }))));
14297
14370
  }
14298
14371
  static get watchers() { return {
14299
14372
  "open": [{
@@ -14313,6 +14386,7 @@ class LmvzPopover {
14313
14386
  "placement": [1],
14314
14387
  "size": [1],
14315
14388
  "autoFocus": [4, "auto-focus"],
14389
+ "containerRole": [1, "container-role"],
14316
14390
  "label": [1],
14317
14391
  "anchorEl": [32],
14318
14392
  "show": [64],
@@ -14387,6 +14461,7 @@ class RadioGroup {
14387
14461
  if (wasEmpty) {
14388
14462
  document.addEventListener('focusin', this._focusinHandler, true);
14389
14463
  }
14464
+ this.refreshValidity();
14390
14465
  }
14391
14466
  }
14392
14467
  unregister(host) {
@@ -14397,10 +14472,19 @@ class RadioGroup {
14397
14472
  if (this.hosts.length === 0) {
14398
14473
  document.removeEventListener('focusin', this._focusinHandler, true);
14399
14474
  }
14475
+ this.refreshValidity();
14400
14476
  }
14401
14477
  get sortedEnabled() {
14402
14478
  return this.hosts.filter((h) => !h.disabled);
14403
14479
  }
14480
+ isAnyChecked() {
14481
+ return this.hosts.some((host) => host.checked);
14482
+ }
14483
+ refreshValidity() {
14484
+ for (const host of this.hosts) {
14485
+ host.updateValidity();
14486
+ }
14487
+ }
14404
14488
  setFocused(host) {
14405
14489
  this._focusedHost = host;
14406
14490
  this.updateTabindex();
@@ -14416,6 +14500,7 @@ class RadioGroup {
14416
14500
  host.checked = host === selectedHost;
14417
14501
  }
14418
14502
  this.updateTabindex();
14503
+ this.refreshValidity();
14419
14504
  }
14420
14505
  updateTabindex() {
14421
14506
  const enabled = this.sortedEnabled;
@@ -14477,6 +14562,12 @@ class RadioGroupController {
14477
14562
  select(selectedHost) {
14478
14563
  this.group?.select(selectedHost);
14479
14564
  }
14565
+ isAnyChecked() {
14566
+ return this.group?.isAnyChecked() ?? false;
14567
+ }
14568
+ refreshValidity() {
14569
+ this.group?.refreshValidity();
14570
+ }
14480
14571
  setFocused(host) {
14481
14572
  this.group?.setFocused(host);
14482
14573
  }
@@ -14519,7 +14610,7 @@ class RadioGroupController {
14519
14610
 
14520
14611
  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; } }`;
14521
14612
 
14522
- 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}}`;
14613
+ 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}}`;
14523
14614
 
14524
14615
  let radioIdCounter = 0;
14525
14616
  class LmvzRadio extends ReactiveControllerHost {
@@ -14541,7 +14632,14 @@ class LmvzRadio extends ReactiveControllerHost {
14541
14632
  name;
14542
14633
  disabled = false;
14543
14634
  required = false;
14544
- error = false;
14635
+ nativeError = false;
14636
+ errorFromProp = false;
14637
+ get error() {
14638
+ return this.errorFromProp || this.nativeError;
14639
+ }
14640
+ set error(value) {
14641
+ this.errorFromProp = value;
14642
+ }
14545
14643
  helperText;
14546
14644
  form;
14547
14645
  autofocus = false;
@@ -14549,6 +14647,7 @@ class LmvzRadio extends ReactiveControllerHost {
14549
14647
  _handlingFormReset = false;
14550
14648
  handleCheckedChange(newVal, oldVal) {
14551
14649
  this.internals.setFormValue?.(newVal ? this.value : null);
14650
+ this.updateValidity();
14552
14651
  if (!newVal && oldVal && !this._handlingNativeChange && !this._handlingFormReset) {
14553
14652
  this.lmvzChange.emit(false);
14554
14653
  }
@@ -14556,6 +14655,9 @@ class LmvzRadio extends ReactiveControllerHost {
14556
14655
  this.lmvzChange.emit(true);
14557
14656
  }
14558
14657
  }
14658
+ handleRequiredChange() {
14659
+ this.updateValidity();
14660
+ }
14559
14661
  handleValueChange(newVal) {
14560
14662
  if (this.checked) {
14561
14663
  this.internals.setFormValue?.(newVal);
@@ -14577,6 +14679,9 @@ class LmvzRadio extends ReactiveControllerHost {
14577
14679
  async reportValidity() {
14578
14680
  return this.internals?.reportValidity() ?? true;
14579
14681
  }
14682
+ async getValidationMessage() {
14683
+ return this.internals?.validationMessage ?? '';
14684
+ }
14580
14685
  constructor(hostRef) {
14581
14686
  super();
14582
14687
  registerInstance(this, hostRef);
@@ -14598,8 +14703,13 @@ class LmvzRadio extends ReactiveControllerHost {
14598
14703
  componentWillLoad() {
14599
14704
  this.initialChecked = this.checked;
14600
14705
  this.internals.setFormValue?.(this.checked ? this.value : null);
14706
+ this.updateValidity();
14601
14707
  super.componentWillLoad();
14602
14708
  }
14709
+ componentDidLoad() {
14710
+ this.updateValidity();
14711
+ super.componentDidLoad();
14712
+ }
14603
14713
  formAssociatedCallback() {
14604
14714
  this.internals.setFormValue?.(this.checked ? this.value : null);
14605
14715
  }
@@ -14611,6 +14721,8 @@ class LmvzRadio extends ReactiveControllerHost {
14611
14721
  finally {
14612
14722
  this._handlingFormReset = false;
14613
14723
  }
14724
+ this.updateValidity();
14725
+ this.radioGroupController.refreshValidity();
14614
14726
  }
14615
14727
  formStateRestoreCallback(state) {
14616
14728
  if (typeof state !== 'string')
@@ -14623,6 +14735,20 @@ class LmvzRadio extends ReactiveControllerHost {
14623
14735
  this._handlingFormReset = false;
14624
14736
  }
14625
14737
  }
14738
+ isAnyInGroupChecked() {
14739
+ return this.radioGroupController.isAnyChecked();
14740
+ }
14741
+ updateValidity() {
14742
+ if (this.required && !this.isAnyInGroupChecked()) {
14743
+ this.internals.setValidity?.({ valueMissing: true }, 'Please select an option.', this.nativeInput);
14744
+ return;
14745
+ }
14746
+ this.internals.setValidity?.({});
14747
+ this.nativeError = false;
14748
+ }
14749
+ handleInvalid() {
14750
+ this.nativeError = true;
14751
+ }
14626
14752
  handleChange = (event) => {
14627
14753
  this._handlingNativeChange = true;
14628
14754
  try {
@@ -14665,14 +14791,20 @@ class LmvzRadio extends ReactiveControllerHost {
14665
14791
  return;
14666
14792
  this.radioGroupController.setFocused(target);
14667
14793
  }
14794
+ retargetInnerClicks() {
14795
+ this.nativeInput?.click();
14796
+ }
14668
14797
  render() {
14669
- 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))));
14798
+ 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))));
14670
14799
  }
14671
14800
  static get formAssociated() { return true; }
14672
14801
  static get watchers() { return {
14673
14802
  "checked": [{
14674
14803
  "handleCheckedChange": 0
14675
14804
  }],
14805
+ "required": [{
14806
+ "handleRequiredChange": 0
14807
+ }],
14676
14808
  "value": [{
14677
14809
  "handleValueChange": 0
14678
14810
  }],
@@ -14688,24 +14820,181 @@ class LmvzRadio extends ReactiveControllerHost {
14688
14820
  "label": [1],
14689
14821
  "checked": [1540],
14690
14822
  "value": [1],
14691
- "name": [1],
14823
+ "name": [513],
14692
14824
  "disabled": [516],
14693
14825
  "required": [516],
14694
- "error": [516],
14826
+ "error": [6660],
14695
14827
  "helperText": [1, "helper-text"],
14696
14828
  "form": [513],
14697
14829
  "autofocus": [4],
14830
+ "nativeError": [32],
14698
14831
  "focusInput": [64],
14699
14832
  "checkValidity": [64],
14700
- "reportValidity": [64]
14833
+ "reportValidity": [64],
14834
+ "getValidationMessage": [64]
14701
14835
  },
14702
- "$listeners$": [[0, "keydown", "handleKeydown"]],
14836
+ "$listeners$": [[0, "invalid", "handleInvalid"], [0, "keydown", "handleKeydown"]],
14703
14837
  "$lazyBundleId$": "-",
14704
- "$attrsToReflect$": [["checked", "checked"], ["disabled", "disabled"], ["required", "required"], ["error", "error"], ["form", "form"]]
14838
+ "$attrsToReflect$": [["checked", "checked"], ["name", "name"], ["disabled", "disabled"], ["required", "required"], ["error", "error"], ["form", "form"]]
14705
14839
  }; }
14706
14840
  }
14707
14841
 
14708
- 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)); }`;
14842
+ const defaultConfig = {
14843
+ wrap: true,
14844
+ typeaheadTimeoutMs: 500,
14845
+ };
14846
+ class ListboxController {
14847
+ options = [];
14848
+ _activeId;
14849
+ _selectedId;
14850
+ config;
14851
+ typeaheadBuffer = '';
14852
+ typeaheadTimer;
14853
+ constructor(config = {}) {
14854
+ this.config = { ...defaultConfig, ...config };
14855
+ }
14856
+ hostDisconnected() {
14857
+ this.clearTypeaheadTimer();
14858
+ }
14859
+ get activeId() {
14860
+ return this._activeId;
14861
+ }
14862
+ get activeDescendantId() {
14863
+ return this._activeId;
14864
+ }
14865
+ get selectedId() {
14866
+ return this._selectedId;
14867
+ }
14868
+ setOptions(options) {
14869
+ this.options = options;
14870
+ if (this._activeId && this.findEnabledIndex(this._activeId) !== -1)
14871
+ return;
14872
+ const fallback = (this._selectedId && this.findEnabledIndex(this._selectedId) !== -1 ? this._selectedId : undefined) ?? this.firstEnabledOption()?.id;
14873
+ this.setActiveId(fallback);
14874
+ }
14875
+ setActiveId(id) {
14876
+ if (id !== undefined && !this.isEnabledId(id))
14877
+ return;
14878
+ if (id === this._activeId)
14879
+ return;
14880
+ this._activeId = id;
14881
+ this.config.onActiveChange?.(id);
14882
+ }
14883
+ setSelectedId(id) {
14884
+ this._selectedId = id;
14885
+ }
14886
+ selectOption(id) {
14887
+ if (!this.isEnabledId(id))
14888
+ return;
14889
+ this._selectedId = id;
14890
+ this.config.onSelect?.(id);
14891
+ }
14892
+ selectActive() {
14893
+ if (this._activeId)
14894
+ this.selectOption(this._activeId);
14895
+ }
14896
+ handleKeydown(event) {
14897
+ switch (event.key) {
14898
+ case 'ArrowDown':
14899
+ event.preventDefault();
14900
+ this.moveActive('next');
14901
+ return true;
14902
+ case 'ArrowUp':
14903
+ event.preventDefault();
14904
+ this.moveActive('previous');
14905
+ return true;
14906
+ case 'Home':
14907
+ event.preventDefault();
14908
+ this.setActiveId(this.firstEnabledOption()?.id);
14909
+ return true;
14910
+ case 'End':
14911
+ event.preventDefault();
14912
+ this.setActiveId(this.lastEnabledOption()?.id);
14913
+ return true;
14914
+ case 'Enter':
14915
+ case ' ':
14916
+ event.preventDefault();
14917
+ this.selectActive();
14918
+ return true;
14919
+ case 'Escape':
14920
+ event.preventDefault();
14921
+ this.config.onClose?.();
14922
+ return true;
14923
+ default:
14924
+ return this.handleTypeahead(event);
14925
+ }
14926
+ }
14927
+ clearTypeahead() {
14928
+ this.typeaheadBuffer = '';
14929
+ this.clearTypeaheadTimer();
14930
+ }
14931
+ moveActive(direction) {
14932
+ const enabledOptions = this.enabledOptions();
14933
+ if (!enabledOptions.length)
14934
+ return;
14935
+ const currentIndex = this._activeId ? enabledOptions.findIndex((option) => option.id === this._activeId) : -1;
14936
+ if (currentIndex === -1) {
14937
+ this.setActiveId((direction === 'next' ? enabledOptions[0] : enabledOptions[enabledOptions.length - 1])?.id);
14938
+ return;
14939
+ }
14940
+ const step = direction === 'next' ? 1 : -1;
14941
+ const rawIndex = currentIndex + step;
14942
+ if (rawIndex < 0 || rawIndex >= enabledOptions.length) {
14943
+ if (!this.config.wrap)
14944
+ return;
14945
+ const wrappedIndex = (rawIndex + enabledOptions.length) % enabledOptions.length;
14946
+ this.setActiveId(enabledOptions[wrappedIndex]?.id);
14947
+ return;
14948
+ }
14949
+ this.setActiveId(enabledOptions[rawIndex]?.id);
14950
+ }
14951
+ handleTypeahead(event) {
14952
+ if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey)
14953
+ return false;
14954
+ event.preventDefault();
14955
+ this.typeaheadBuffer += event.key.toLowerCase();
14956
+ this.restartTypeaheadTimer();
14957
+ const enabledOptions = this.enabledOptions();
14958
+ if (!enabledOptions.length)
14959
+ return true;
14960
+ const currentIndex = this._activeId ? enabledOptions.findIndex((option) => option.id === this._activeId) : -1;
14961
+ const orderedFromCurrent = [...enabledOptions.slice(currentIndex + 1), ...enabledOptions.slice(0, currentIndex + 1)];
14962
+ const match = orderedFromCurrent.find((option) => option.label.toLowerCase().startsWith(this.typeaheadBuffer));
14963
+ if (match)
14964
+ this.setActiveId(match.id);
14965
+ return true;
14966
+ }
14967
+ restartTypeaheadTimer() {
14968
+ this.clearTypeaheadTimer();
14969
+ this.typeaheadTimer = setTimeout(() => {
14970
+ this.typeaheadBuffer = '';
14971
+ }, this.config.typeaheadTimeoutMs);
14972
+ }
14973
+ clearTypeaheadTimer() {
14974
+ if (this.typeaheadTimer !== undefined) {
14975
+ clearTimeout(this.typeaheadTimer);
14976
+ this.typeaheadTimer = undefined;
14977
+ }
14978
+ }
14979
+ enabledOptions() {
14980
+ return this.options.filter((option) => !option.disabled);
14981
+ }
14982
+ firstEnabledOption() {
14983
+ return this.enabledOptions()[0];
14984
+ }
14985
+ lastEnabledOption() {
14986
+ const enabledOptions = this.enabledOptions();
14987
+ return enabledOptions[enabledOptions.length - 1];
14988
+ }
14989
+ isEnabledId(id) {
14990
+ return this.findEnabledIndex(id) !== -1;
14991
+ }
14992
+ findEnabledIndex(id) {
14993
+ return this.enabledOptions().findIndex((option) => option.id === id);
14994
+ }
14995
+ }
14996
+
14997
+ 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%); }`;
14709
14998
 
14710
14999
  let selectIdCounter = 0;
14711
15000
  class LmvzSelect extends ReactiveControllerHost {
@@ -14713,79 +15002,343 @@ class LmvzSelect extends ReactiveControllerHost {
14713
15002
  get validationEl() {
14714
15003
  return this.el;
14715
15004
  }
15005
+ internals;
14716
15006
  selectId = `lmvz-select-${selectIdCounter++}`;
14717
- nativeSelectEl;
15007
+ triggerId = `${this.selectId}-trigger`;
15008
+ popoverId = `${this.selectId}-listbox`;
15009
+ triggerEl;
15010
+ optionsSourceEl;
15011
+ optionsMutationObserver;
15012
+ initialValue;
15013
+ initialValueCaptured = false;
15014
+ flatOptions = [];
15015
+ optionsById = new Map();
15016
+ listboxController = new ListboxController({
15017
+ onActiveChange: (id) => {
15018
+ this.activeId = id;
15019
+ },
15020
+ onSelect: (id) => this.handleOptionSelect(id),
15021
+ onClose: () => this.closePopover(),
15022
+ });
15023
+ get helperId() {
15024
+ return this.helperText ? `${this.selectId}-helper` : undefined;
15025
+ }
15026
+ get showErrorMessage() {
15027
+ return this.error && Boolean(this.errorMessage);
15028
+ }
15029
+ get errorId() {
15030
+ return `${this.selectId}-error`;
15031
+ }
15032
+ get describedBy() {
15033
+ const ids = [];
15034
+ if (this.helperId)
15035
+ ids.push(this.helperId);
15036
+ if (this.showErrorMessage)
15037
+ ids.push(this.errorId);
15038
+ return ids.length > 0 ? ids.join(' ') : undefined;
15039
+ }
14718
15040
  constructor(hostRef) {
14719
15041
  super();
14720
15042
  registerInstance(this, hostRef);
14721
15043
  this.lmvzChange = createEvent(this, "lmvzChange", 7);
15044
+ if (hostRef.$hostElement$["s-ei"]) {
15045
+ this.internals = hostRef.$hostElement$["s-ei"];
15046
+ }
15047
+ else {
15048
+ this.internals = hostRef.$hostElement$.attachInternals();
15049
+ hostRef.$hostElement$["s-ei"] = this.internals;
15050
+ }
14722
15051
  this.addController(new AriaValidationController(this));
15052
+ this.addController(this.listboxController);
14723
15053
  }
14724
15054
  lmvzChange;
14725
15055
  value;
14726
15056
  label;
14727
15057
  helperText;
15058
+ nativeError = false;
15059
+ errorFromProp = false;
15060
+ get error() {
15061
+ return this.errorFromProp || this.nativeError;
15062
+ }
15063
+ set error(value) {
15064
+ this.errorFromProp = value;
15065
+ }
15066
+ errorMessage;
14728
15067
  disabled = false;
14729
15068
  required = false;
14730
15069
  name;
14731
15070
  size = 'default';
14732
15071
  highlighted = false;
14733
15072
  selectedLabel = '';
15073
+ selectedId;
15074
+ activeId;
15075
+ isOpen = false;
15076
+ optionGroups = [];
14734
15077
  get hasValue() {
14735
15078
  return Boolean(this.value);
14736
15079
  }
15080
+ componentWillLoad() {
15081
+ this.updateValidity();
15082
+ super.componentWillLoad();
15083
+ }
14737
15084
  componentDidLoad() {
14738
- this.syncSelectedLabel();
15085
+ this.handleSlotChange();
15086
+ this.observeSlottedOptionMutations();
15087
+ this.updateValidity();
14739
15088
  super.componentDidLoad();
14740
15089
  }
15090
+ disconnectedCallback() {
15091
+ this.optionsMutationObserver?.disconnect();
15092
+ super.disconnectedCallback();
15093
+ }
15094
+ observeSlottedOptionMutations() {
15095
+ if (typeof MutationObserver === 'undefined')
15096
+ return;
15097
+ this.optionsMutationObserver?.disconnect();
15098
+ this.optionsMutationObserver = new MutationObserver(this.handleSlotChange);
15099
+ this.optionsMutationObserver.observe(this.el, {
15100
+ attributes: true,
15101
+ attributeFilter: ['disabled', 'selected', 'value', 'label'],
15102
+ characterData: true,
15103
+ childList: true,
15104
+ subtree: true,
15105
+ });
15106
+ }
15107
+ async focusTrigger() {
15108
+ this.triggerEl?.focus();
15109
+ }
15110
+ async blurTrigger() {
15111
+ this.triggerEl?.blur();
15112
+ }
15113
+ async checkValidity() {
15114
+ return this.internals.checkValidity?.() ?? true;
15115
+ }
15116
+ async reportValidity() {
15117
+ return this.internals.reportValidity?.() ?? true;
15118
+ }
15119
+ async getValidationMessage() {
15120
+ return this.internals.validationMessage ?? '';
15121
+ }
15122
+ formAssociatedCallback(form) {
15123
+ if (!form)
15124
+ return;
15125
+ this.internals.setFormValue?.(this.value ?? '');
15126
+ }
15127
+ formResetCallback() {
15128
+ this.internals.setValidity?.({});
15129
+ this.value = this.initialValue;
15130
+ this.updateValidity();
15131
+ }
15132
+ formStateRestoreCallback(state) {
15133
+ this.value = state;
15134
+ }
14741
15135
  handleValueChange(newValue) {
14742
- if (this.nativeSelectEl && this.nativeSelectEl.value !== (newValue ?? '')) {
14743
- this.nativeSelectEl.value = newValue ?? '';
15136
+ this.applySelectionFromValue();
15137
+ if (this.selectedId && !this.isOpen) {
15138
+ this.listboxController.setActiveId(this.selectedId);
14744
15139
  }
14745
- this.syncSelectedLabel();
15140
+ this.internals.setFormValue?.(newValue ?? '');
15141
+ this.updateValidity();
15142
+ }
15143
+ handleRequiredChange() {
15144
+ this.updateValidity();
14746
15145
  }
14747
- syncSelectedLabel() {
14748
- if (!this.nativeSelectEl)
15146
+ handleDisabledChange(disabled) {
15147
+ if (!disabled)
14749
15148
  return;
14750
- const idx = this.nativeSelectEl.selectedIndex;
14751
- this.selectedLabel = idx >= 0 ? (this.nativeSelectEl.options[idx]?.text ?? '') : '';
15149
+ this.closePopover();
15150
+ this.triggerEl?.blur();
14752
15151
  }
14753
- handleChange = (event) => {
14754
- const select = event.target;
14755
- this.value = select.value;
14756
- this.syncSelectedLabel();
14757
- this.lmvzChange.emit(select.value);
15152
+ handleSlotChange = () => {
15153
+ const container = this.optionsSourceEl;
15154
+ if (!container)
15155
+ return;
15156
+ const { flat, groups } = parseOptionElements(container, this.selectId);
15157
+ this.flatOptions = flat;
15158
+ this.optionsById = new Map(flat.map((option) => [option.id, option]));
15159
+ this.optionGroups = groups;
15160
+ if (!this.value) {
15161
+ const preselected = flat.find((option) => option.selected && !option.disabled);
15162
+ if (preselected) {
15163
+ this.value = preselected.value;
15164
+ }
15165
+ }
15166
+ this.applySelectionFromValue();
15167
+ this.listboxController.setOptions(flat.map(({ id, label, disabled }) => ({ id, label, disabled })));
15168
+ if (!this.initialValueCaptured) {
15169
+ this.initialValue = this.value;
15170
+ this.initialValueCaptured = true;
15171
+ }
15172
+ };
15173
+ applySelectionFromValue() {
15174
+ const match = this.value ? this.flatOptions.find((option) => option.value === this.value) : undefined;
15175
+ this.selectedId = match?.id;
15176
+ this.selectedLabel = match?.label ?? '';
15177
+ this.listboxController.setSelectedId(match?.id);
15178
+ }
15179
+ updateValidity() {
15180
+ if (this.required && !this.value) {
15181
+ this.internals.setValidity?.({ valueMissing: true }, 'Please select a value.', this.triggerEl);
15182
+ return;
15183
+ }
15184
+ this.internals.setValidity?.({});
15185
+ this.nativeError = false;
15186
+ }
15187
+ handleInvalid() {
15188
+ this.nativeError = true;
15189
+ }
15190
+ handleOptionSelect(id) {
15191
+ const option = this.optionsById.get(id);
15192
+ if (!option)
15193
+ return;
15194
+ const isNewValue = option.value !== this.value;
15195
+ this.value = option.value;
15196
+ if (isNewValue) {
15197
+ this.lmvzChange.emit(option.value);
15198
+ }
15199
+ this.closePopover();
15200
+ }
15201
+ handleOptionClick = (option) => {
15202
+ if (option.disabled || this.disabled)
15203
+ return;
15204
+ this.listboxController.selectOption(option.id);
15205
+ };
15206
+ handleLabelClick = () => {
15207
+ if (this.disabled)
15208
+ return;
15209
+ this.triggerEl?.focus();
15210
+ this.openPopover();
15211
+ };
15212
+ handleTriggerClick = () => {
15213
+ if (this.disabled)
15214
+ return;
15215
+ if (this.isOpen) {
15216
+ this.closePopover();
15217
+ }
15218
+ else {
15219
+ this.openPopover();
15220
+ }
15221
+ };
15222
+ handleTriggerKeydown = (event) => {
15223
+ if (this.disabled)
15224
+ return;
15225
+ if (!this.isOpen) {
15226
+ if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {
15227
+ event.preventDefault();
15228
+ this.openPopover();
15229
+ }
15230
+ return;
15231
+ }
15232
+ this.listboxController.handleKeydown(event);
14758
15233
  };
15234
+ handleTriggerBlur = () => {
15235
+ this.closePopover();
15236
+ };
15237
+ handlePopoverClose = () => {
15238
+ this.isOpen = false;
15239
+ this.listboxController.clearTypeahead();
15240
+ };
15241
+ openPopover() {
15242
+ if (this.isOpen || this.disabled)
15243
+ return;
15244
+ this.isOpen = true;
15245
+ }
15246
+ closePopover() {
15247
+ if (!this.isOpen)
15248
+ return;
15249
+ this.isOpen = false;
15250
+ this.listboxController.clearTypeahead();
15251
+ }
15252
+ renderOptionGroups() {
15253
+ 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))));
15254
+ }
15255
+ renderOption(option) {
15256
+ 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));
15257
+ }
14759
15258
  render() {
14760
15259
  const hasValue = this.hasValue;
14761
15260
  const shouldShowLabel = hasValue;
14762
- 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)));
15261
+ 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))));
14763
15262
  }
15263
+ static get formAssociated() { return true; }
14764
15264
  static get watchers() { return {
14765
15265
  "value": [{
14766
15266
  "handleValueChange": 0
15267
+ }],
15268
+ "required": [{
15269
+ "handleRequiredChange": 0
15270
+ }],
15271
+ "disabled": [{
15272
+ "handleDisabledChange": 0
14767
15273
  }]
14768
15274
  }; }
14769
15275
  static get style() { return lmvzSelectCss(); }
14770
15276
  static get cmpMeta() { return {
14771
- "$flags$": 774,
15277
+ "$flags$": 838,
14772
15278
  "$tagName$": "lmvz-select",
14773
15279
  "$members$": {
14774
15280
  "value": [1025],
14775
15281
  "label": [1],
14776
15282
  "helperText": [1, "helper-text"],
15283
+ "error": [6660],
15284
+ "errorMessage": [1, "error-message"],
14777
15285
  "disabled": [516],
14778
15286
  "required": [516],
14779
- "name": [1],
15287
+ "name": [513],
14780
15288
  "size": [513],
14781
15289
  "highlighted": [516],
14782
- "selectedLabel": [32]
15290
+ "nativeError": [32],
15291
+ "selectedLabel": [32],
15292
+ "selectedId": [32],
15293
+ "activeId": [32],
15294
+ "isOpen": [32],
15295
+ "optionGroups": [32],
15296
+ "focusTrigger": [64],
15297
+ "blurTrigger": [64],
15298
+ "checkValidity": [64],
15299
+ "reportValidity": [64],
15300
+ "getValidationMessage": [64]
14783
15301
  },
14784
- "$listeners$": undefined,
15302
+ "$listeners$": [[0, "invalid", "handleInvalid"]],
14785
15303
  "$lazyBundleId$": "-",
14786
- "$attrsToReflect$": [["disabled", "disabled"], ["required", "required"], ["size", "size"], ["highlighted", "highlighted"]]
15304
+ "$attrsToReflect$": [["error", "error"], ["disabled", "disabled"], ["required", "required"], ["name", "name"], ["size", "size"], ["highlighted", "highlighted"]]
14787
15305
  }; }
14788
15306
  }
15307
+ function parseOptionElements(container, idPrefix) {
15308
+ const flat = [];
15309
+ const groups = [];
15310
+ let looseGroup;
15311
+ let optionIndex = 0;
15312
+ const toOptionData = (optionEl, disabledOverride = false) => {
15313
+ const option = optionEl;
15314
+ const data = {
15315
+ id: `${idPrefix}-option-${optionIndex++}`,
15316
+ value: option.value,
15317
+ label: (option.textContent ?? '').trim(),
15318
+ disabled: disabledOverride || option.disabled,
15319
+ selected: option.selected,
15320
+ };
15321
+ flat.push(data);
15322
+ return data;
15323
+ };
15324
+ Array.from(container.children).forEach((child) => {
15325
+ if (child.tagName === 'OPTGROUP') {
15326
+ looseGroup = undefined;
15327
+ const optgroup = child;
15328
+ const options = Array.from(optgroup.querySelectorAll('option')).map((option) => toOptionData(option, optgroup.disabled));
15329
+ groups.push({ label: optgroup.label || undefined, options });
15330
+ return;
15331
+ }
15332
+ if (child.tagName === 'OPTION') {
15333
+ if (!looseGroup) {
15334
+ looseGroup = { label: undefined, options: [] };
15335
+ groups.push(looseGroup);
15336
+ }
15337
+ looseGroup.options.push(toOptionData(child));
15338
+ }
15339
+ });
15340
+ return { flat, groups };
15341
+ }
14789
15342
 
14790
15343
  const alertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0Nl8zODApIj4KPHBhdGggZD0iTTEyIDUuMjVWMTMuMTI1TTIyLjUgMTJDMjIuNSAxNy43OTkgMTcuNzk5IDIyLjUgMTIgMjIuNUM2LjIwMTAxIDIyLjUgMS41IDE3Ljc5OSAxLjUgMTJDMS41IDYuMjAxMDEgNi4yMDEwMSAxLjUgMTIgMS41QzE3Ljc5OSAxLjUgMjIuNSA2LjIwMTAxIDIyLjUgMTJaTTEzLjEyNSAxNi44NzVDMTMuMTI1IDE3LjQ5NjMgMTIuNjIxMyAxOCAxMiAxOEMxMS4zNzg3IDE4IDEwLjg3NSAxNy40OTYzIDEwLjg3NSAxNi44NzVDMTAuODc1IDE2LjI1MzcgMTEuMzc4NyAxNS43NSAxMiAxNS43NUMxMi42MjEzIDE1Ljc1IDEzLjEyNSAxNi4yNTM3IDEzLjEyNSAxNi44NzVaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM0Nl8zODAiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==';
14791
15344
 
@@ -14851,7 +15404,7 @@ class LmvzSnackbar {
14851
15404
  this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
14852
15405
  };
14853
15406
  render() {
14854
- 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))));
15407
+ 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))));
14855
15408
  }
14856
15409
  static get watchers() { return {
14857
15410
  "status": [{
@@ -14888,7 +15441,7 @@ class LmvzSpinner {
14888
15441
  ariaLabel;
14889
15442
  render() {
14890
15443
  const hasLabel = !!this.ariaLabel?.trim();
14891
- 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" }))));
15444
+ 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" }))));
14892
15445
  }
14893
15446
  static get style() { return lmvzSpinnerCss(); }
14894
15447
  static get cmpMeta() { return {
@@ -14904,7 +15457,7 @@ class LmvzSpinner {
14904
15457
  }; }
14905
15458
  }
14906
15459
 
14907
- const lmvzTabCss = () => ` @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); } } :host { display: inline-block; flex: none; } :host([disabled]) { cursor: not-allowed; pointer-events: none; } button { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lmvz-component-component-spacing-0-default, 4px); padding-top: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-bottom: var(--lmvz-dimension-14-8, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem)); padding-inline: var(--lmvz-dimension-24-16, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border: none; border-radius: var(--lmvz-semantic-border-radius-round, 999px); background: var(--lmvz-tab-background); color: var(--lmvz-tab-color); font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } 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)); z-index: 1; } button:disabled { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } button:hover { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button { padding-top: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); padding-bottom: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); padding-inline: var(--lmvz-dimension-48-40, clamp(2.5rem, 2.38rem + 0.52vw, 3rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator { --lmvz-tab-indicator-size: 4px; position: absolute; background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); opacity: 0; transition: opacity 0.15s ease; inset-block-end: 0; inset-inline: 0; block-size: var(--lmvz-tab-indicator-size); border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--lmvz-tab-indicator-size); border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator { opacity: 1; } :host([vertical]) button { border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator { inset-block: 0; inset-inline: 0 auto; inline-size: var(--lmvz-tab-indicator-size); block-size: auto; border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0; background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) { --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem)); } .label { display: contents; } `;
15460
+ const lmvzTabCss = () => ` @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); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } :host { display: inline-block; flex: none; } :host([disabled]) { cursor: not-allowed; pointer-events: none; } button { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lmvz-component-component-spacing-0-default, 4px); padding-top: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-bottom: var(--lmvz-dimension-14-8, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem)); padding-inline: var(--lmvz-dimension-24-16, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border: none; border-radius: var(--lmvz-semantic-border-radius-round, 999px); background: var(--lmvz-tab-background); color: var(--lmvz-tab-color); font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } 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)); z-index: 1; } button:disabled { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } button:hover { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button { padding-top: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); padding-bottom: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); padding-inline: var(--lmvz-dimension-48-40, clamp(2.5rem, 2.38rem + 0.52vw, 3rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator { --lmvz-tab-indicator-size: 4px; position: absolute; background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); opacity: 0; transition: opacity 0.15s ease; inset-block-end: 0; inset-inline: 0; block-size: var(--lmvz-tab-indicator-size); border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--lmvz-tab-indicator-size); border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator { opacity: 1; } :host([vertical]) button { border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator { inset-block: 0; inset-inline: 0 auto; inline-size: var(--lmvz-tab-indicator-size); block-size: auto; border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0; background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) { --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem)); } .label { display: contents; } `;
14908
15461
 
14909
15462
  class LmvzTab {
14910
15463
  constructor(hostRef) {
@@ -14924,7 +15477,7 @@ class LmvzTab {
14924
15477
  this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
14925
15478
  }
14926
15479
  render() {
14927
- 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" }))));
15480
+ 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" }))));
14928
15481
  }
14929
15482
  static get delegatesFocus() { return true; }
14930
15483
  static get style() { return lmvzTabCss(); }
@@ -14943,7 +15496,7 @@ class LmvzTab {
14943
15496
  }; }
14944
15497
  }
14945
15498
 
14946
- const lmvzTabsCss = () => ` @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); } } :host { display: inline-block; } .tablist { display: inline-flex; flex-direction: row; background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: auto hidden; scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; } :host([has-icon-tabs]) .tablist { gap: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); background: none; border-radius: 0; } :host([orientation='vertical']) .tablist { flex-direction: column; overflow: visible auto; } ::slotted([role='tabpanel']) { display: block; } ::slotted([role='tabpanel'][hidden]) { display: none; } `;
15499
+ const lmvzTabsCss = () => ` @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); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } :host { display: inline-block; } .tablist { display: inline-flex; flex-direction: row; background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: auto hidden; scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; } :host([has-icon-tabs]) .tablist { gap: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); background: none; border-radius: 0; } :host([orientation='vertical']) .tablist { flex-direction: column; overflow: visible auto; } ::slotted([role='tabpanel']) { display: block; } ::slotted([role='tabpanel'][hidden]) { display: none; } `;
14947
15500
 
14948
15501
  let tabsIdCounter = 0;
14949
15502
  class LmvzTabs extends ReactiveControllerHost {
@@ -15181,7 +15734,7 @@ class LmvzTabs extends ReactiveControllerHost {
15181
15734
  this.selectTab(value);
15182
15735
  };
15183
15736
  render() {
15184
- 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) }))));
15737
+ 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) }))));
15185
15738
  }
15186
15739
  static get watchers() { return {
15187
15740
  "value": [{
@@ -15212,7 +15765,7 @@ class LmvzTabs extends ReactiveControllerHost {
15212
15765
 
15213
15766
  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; }`;
15214
15767
 
15215
- 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}}`;
15768
+ 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}}`;
15216
15769
 
15217
15770
  let toggleIdCounter = 0;
15218
15771
  class LmvzToggle extends ReactiveControllerHost {
@@ -15274,6 +15827,9 @@ class LmvzToggle extends ReactiveControllerHost {
15274
15827
  async reportValidity() {
15275
15828
  return this.nativeInputElement?.reportValidity?.() ?? false;
15276
15829
  }
15830
+ async getValidationMessage() {
15831
+ return this.nativeInputElement?.validationMessage ?? '';
15832
+ }
15277
15833
  async getInputElement() {
15278
15834
  if (!this.nativeInputElement) {
15279
15835
  await new Promise((resolve) => componentOnReady(this.el, resolve));
@@ -15286,7 +15842,7 @@ class LmvzToggle extends ReactiveControllerHost {
15286
15842
  this.lmvzChange.emit(newChecked);
15287
15843
  };
15288
15844
  render() {
15289
- 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)));
15845
+ 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)));
15290
15846
  }
15291
15847
  static get formAssociated() { return true; }
15292
15848
  static get watchers() { return {
@@ -15313,6 +15869,7 @@ class LmvzToggle extends ReactiveControllerHost {
15313
15869
  "blurToggle": [64],
15314
15870
  "checkValidity": [64],
15315
15871
  "reportValidity": [64],
15872
+ "getValidationMessage": [64],
15316
15873
  "getInputElement": [64]
15317
15874
  },
15318
15875
  "$listeners$": undefined,