@lmvz-ds/components 0.37.0 → 0.39.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 (182) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/README.md +12 -20
  3. package/cjs/{aria-validation-controller-Do0uEK4t.js → aria-validation-controller-DKNXjnQr.js} +1 -1
  4. package/cjs/checkmark-CuKDPAcx.js +5 -0
  5. package/cjs/{directional-focus-controller-8Xd_7MHT.js → directional-focus-controller-DDnhfX5w.js} +15 -5
  6. package/cjs/{index-BgvZ4y-3.js → index-DWy4nuyZ.js} +41 -0
  7. package/cjs/index.cjs.js +3 -195
  8. package/cjs/lmvz-action-list.cjs.entry.js +4 -4
  9. package/cjs/lmvz-action.cjs.entry.js +1 -1
  10. package/cjs/lmvz-button-group.cjs.entry.js +5 -1
  11. package/cjs/lmvz-button_2.cjs.entry.js +3 -3
  12. package/cjs/lmvz-card.cjs.entry.js +2 -2
  13. package/cjs/lmvz-checkbox.cjs.entry.js +4 -5
  14. package/cjs/lmvz-chip.cjs.entry.js +5 -5
  15. package/cjs/lmvz-components.cjs.js +2 -2
  16. package/cjs/lmvz-datepicker.cjs.entry.js +1 -1
  17. package/cjs/lmvz-header_2.cjs.entry.js +5 -5
  18. package/cjs/lmvz-input.cjs.entry.js +4 -7
  19. package/cjs/lmvz-link.cjs.entry.js +1 -1
  20. package/cjs/lmvz-menuitem.cjs.entry.js +2 -2
  21. package/cjs/lmvz-message.cjs.entry.js +4 -2
  22. package/cjs/lmvz-modal.cjs.entry.js +2 -2
  23. package/cjs/lmvz-popover.cjs.entry.js +5 -14
  24. package/cjs/lmvz-radio.cjs.entry.js +2 -2
  25. package/cjs/lmvz-select.cjs.entry.js +110 -16
  26. package/cjs/lmvz-snackbar.cjs.entry.js +1 -1
  27. package/cjs/lmvz-spinner.cjs.entry.js +1 -1
  28. package/cjs/lmvz-tab.cjs.entry.js +1 -1
  29. package/cjs/lmvz-tabs.cjs.entry.js +9 -3
  30. package/cjs/lmvz-toggle.cjs.entry.js +2 -2
  31. package/cjs/loader.cjs.js +2 -2
  32. package/cjs/public-DTgpEs1_.js +206 -0
  33. package/collection/components/lmvz-action-list/lmvz-action-list.css +119 -116
  34. package/collection/components/lmvz-button/lmvz-button.css +109 -106
  35. package/collection/components/lmvz-card/lmvz-card.css +106 -103
  36. package/collection/components/lmvz-chip/lmvz-chip.css +1 -1
  37. package/collection/components/lmvz-chip/lmvz-chip.js +2 -2
  38. package/collection/components/lmvz-header/lmvz-header.js +2 -2
  39. package/collection/components/lmvz-input/lmvz-input.js +2 -5
  40. package/collection/components/lmvz-message/lmvz-message.css +1 -1
  41. package/collection/components/lmvz-popover/lmvz-popover.css +1 -1
  42. package/collection/components/lmvz-popover/lmvz-popover.js +2 -11
  43. package/collection/components/lmvz-select/lmvz-select.css +102 -53
  44. package/collection/components/lmvz-select/lmvz-select.js +151 -41
  45. package/collection/components/lmvz-snackbar/public.js +3 -0
  46. package/collection/components/lmvz-tabs/lmvz-tabs.js +7 -1
  47. package/collection/utils/aria/directional-focus-controller.js +16 -7
  48. package/collection/utils/icons/public.js +3 -0
  49. package/components/index.js +1 -1
  50. package/components/lmvz-action-list.js +1 -1
  51. package/components/lmvz-action.js +1 -1
  52. package/components/lmvz-button-group.js +1 -1
  53. package/components/lmvz-button.js +1 -1
  54. package/components/lmvz-card.js +1 -1
  55. package/components/lmvz-checkbox.js +1 -1
  56. package/components/lmvz-chip.js +1 -1
  57. package/components/lmvz-datepicker.js +1 -1
  58. package/components/lmvz-header.js +1 -1
  59. package/components/lmvz-icon.js +1 -1
  60. package/components/lmvz-input.js +1 -1
  61. package/components/lmvz-link.js +1 -1
  62. package/components/lmvz-menuitem.js +1 -1
  63. package/components/lmvz-message.js +1 -1
  64. package/components/lmvz-modal.js +1 -1
  65. package/components/lmvz-popover.js +1 -1
  66. package/components/lmvz-radio.js +1 -1
  67. package/components/lmvz-select.js +1 -1
  68. package/components/lmvz-snackbar.js +1 -1
  69. package/components/lmvz-spinner.js +1 -1
  70. package/components/lmvz-tab.js +1 -1
  71. package/components/lmvz-tabs.js +1 -1
  72. package/components/lmvz-toggle.js +1 -1
  73. package/components/{p-BLMXiDE0.js → p--mU29mrX.js} +1 -1
  74. package/components/p-BPa0FHVO.js +1 -0
  75. package/components/p-Bc5MM0zh.js +1 -0
  76. package/components/p-CyDgnpOB.js +1 -0
  77. package/components/p-DAikapVO.js +1 -0
  78. package/components/{p-C-pRMuMh.js → p-DIyiticz.js} +1 -1
  79. package/components/{p-BhALzK62.js → p-DJLdOjL4.js} +1 -1
  80. package/components/p-DSDBThqb.js +1 -0
  81. package/components/{p-diOze8wI.js → p-DXFoXTse.js} +1 -1
  82. package/components/p-DXhP6UeF.js +1 -0
  83. package/components/p-D_mff3n7.js +1 -0
  84. package/components/p-DbBJxuBm.js +1 -0
  85. package/components/p-DsTgD0_a.js +1 -0
  86. package/components/p-DyQ1GbaN.js +1 -0
  87. package/components/p-niXjuPxe.js +1 -0
  88. package/components/{p-BAj4FkUt.js → p-sACbyedu.js} +1 -1
  89. package/esm/{aria-validation-controller-Cp6pofER.js → aria-validation-controller-Dwv7n0rk.js} +1 -1
  90. package/esm/checkmark-DAikapVO.js +3 -0
  91. package/esm/{directional-focus-controller-QukTTWBE.js → directional-focus-controller-CJ0yNC00.js} +15 -5
  92. package/esm/{index-BOXP1Vx0.js → index-DVab4vzV.js} +41 -1
  93. package/esm/index.js +1 -197
  94. package/esm/lmvz-action-list.entry.js +4 -4
  95. package/esm/lmvz-action.entry.js +1 -1
  96. package/esm/lmvz-button-group.entry.js +5 -1
  97. package/esm/lmvz-button_2.entry.js +3 -3
  98. package/esm/lmvz-card.entry.js +2 -2
  99. package/esm/lmvz-checkbox.entry.js +3 -4
  100. package/esm/lmvz-chip.entry.js +5 -5
  101. package/esm/lmvz-components.js +3 -3
  102. package/esm/lmvz-datepicker.entry.js +1 -1
  103. package/esm/lmvz-header_2.entry.js +5 -5
  104. package/esm/lmvz-input.entry.js +4 -7
  105. package/esm/lmvz-link.entry.js +1 -1
  106. package/esm/lmvz-menuitem.entry.js +2 -2
  107. package/esm/lmvz-message.entry.js +4 -2
  108. package/esm/lmvz-modal.entry.js +2 -2
  109. package/esm/lmvz-popover.entry.js +5 -14
  110. package/esm/lmvz-radio.entry.js +2 -2
  111. package/esm/lmvz-select.entry.js +110 -16
  112. package/esm/lmvz-snackbar.entry.js +1 -1
  113. package/esm/lmvz-spinner.entry.js +1 -1
  114. package/esm/lmvz-tab.entry.js +1 -1
  115. package/esm/lmvz-tabs.entry.js +9 -3
  116. package/esm/lmvz-toggle.entry.js +2 -2
  117. package/esm/loader.js +3 -3
  118. package/esm/public-m6pRVUeP.js +204 -0
  119. package/hydrate/index.js +394 -50
  120. package/hydrate/index.mjs +394 -50
  121. package/lmvz-components/index.esm.js +1 -1
  122. package/lmvz-components/lmvz-components.esm.js +1 -1
  123. package/lmvz-components/p-1ba1af8d.entry.js +1 -0
  124. package/lmvz-components/{p-0f65d001.entry.js → p-27e8b4fa.entry.js} +1 -1
  125. package/lmvz-components/p-304c7554.entry.js +1 -0
  126. package/lmvz-components/p-316dd61a.entry.js +1 -0
  127. package/lmvz-components/{p-3d5867df.entry.js → p-335b3867.entry.js} +1 -1
  128. package/lmvz-components/{p-7872a6b4.entry.js → p-3b7203a3.entry.js} +1 -1
  129. package/lmvz-components/p-41286514.entry.js +1 -0
  130. package/lmvz-components/p-6aae1df9.entry.js +1 -0
  131. package/lmvz-components/p-743616c0.entry.js +1 -0
  132. package/lmvz-components/{p-26dd9684.entry.js → p-773e9d95.entry.js} +1 -1
  133. package/lmvz-components/{p-a6fe9b61.entry.js → p-7cbfbc88.entry.js} +1 -1
  134. package/lmvz-components/p-87f21ac9.entry.js +1 -0
  135. package/lmvz-components/{p-a680a7b2.entry.js → p-8ba6ec19.entry.js} +1 -1
  136. package/lmvz-components/p-93b781ca.entry.js +1 -0
  137. package/lmvz-components/p-BPa0FHVO.js +1 -0
  138. package/lmvz-components/p-BlkpdeQI.js +1 -0
  139. package/lmvz-components/p-DAikapVO.js +1 -0
  140. package/lmvz-components/p-DVab4vzV.js +2 -0
  141. package/lmvz-components/{p-BeY96W7m.js → p-Wi9d2-w9.js} +1 -1
  142. package/lmvz-components/p-c884c76e.entry.js +1 -0
  143. package/lmvz-components/{p-eabbf901.entry.js → p-d73bb7fd.entry.js} +1 -1
  144. package/lmvz-components/{p-137b1fe1.entry.js → p-e35f49a1.entry.js} +1 -1
  145. package/lmvz-components/p-ebad823c.entry.js +1 -0
  146. package/lmvz-components/p-edec4d09.entry.js +1 -0
  147. package/lmvz-components/{p-88661c50.entry.js → p-efd9d50e.entry.js} +1 -1
  148. package/lmvz-components/p-f24f5207.entry.js +1 -0
  149. package/lmvz-components/p-f911691c.entry.js +1 -0
  150. package/manifest.json +72 -39
  151. package/package.json +2 -1
  152. package/types/components/lmvz-input/lmvz-input.d.ts +0 -2
  153. package/types/components/lmvz-popover/lmvz-popover.d.ts +0 -1
  154. package/types/components/lmvz-select/lmvz-select.d.ts +12 -3
  155. package/types/components/lmvz-snackbar/public.d.ts +6 -0
  156. package/types/components/lmvz-tabs/lmvz-tabs.d.ts +1 -0
  157. package/types/components.d.ts +39 -19
  158. package/types/index.d.ts +5 -0
  159. package/types/utils/aria/directional-focus-controller.d.ts +9 -7
  160. package/types/utils/icons/public.d.ts +6 -0
  161. package/components/p--FDdvoIg.js +0 -1
  162. package/components/p-BApwCp0R.js +0 -1
  163. package/components/p-BPYBmylI.js +0 -1
  164. package/components/p-C5gRiLRR.js +0 -1
  165. package/components/p-CrQCHVKL.js +0 -1
  166. package/components/p-DiRcp9V6.js +0 -1
  167. package/components/p-DqdrUt_G.js +0 -1
  168. package/lmvz-components/p-00489151.entry.js +0 -1
  169. package/lmvz-components/p-0af0211a.entry.js +0 -1
  170. package/lmvz-components/p-398b5cf4.entry.js +0 -1
  171. package/lmvz-components/p-40716828.entry.js +0 -1
  172. package/lmvz-components/p-492adf21.entry.js +0 -1
  173. package/lmvz-components/p-4deaa010.entry.js +0 -1
  174. package/lmvz-components/p-4fa6e72f.entry.js +0 -1
  175. package/lmvz-components/p-57a366e6.entry.js +0 -1
  176. package/lmvz-components/p-70f1e31a.entry.js +0 -1
  177. package/lmvz-components/p-91eb71bb.entry.js +0 -1
  178. package/lmvz-components/p-BOXP1Vx0.js +0 -2
  179. package/lmvz-components/p-CHxiS3ja.js +0 -1
  180. package/lmvz-components/p-e14058e1.entry.js +0 -1
  181. package/lmvz-components/p-f3f0ed49.entry.js +0 -1
  182. package/lmvz-components/p-f516a949.entry.js +0 -1
package/hydrate/index.js CHANGED
@@ -807,6 +807,13 @@ var h = (nodeName, vnodeData, ...children) => {
807
807
  }
808
808
  }
809
809
  }
810
+ if (typeof nodeName === "function") {
811
+ return nodeName(
812
+ vnodeData === null ? {} : vnodeData,
813
+ vNodeChildren,
814
+ vdomFnUtils
815
+ );
816
+ }
810
817
  const vnode = newVNode(nodeName, null);
811
818
  vnode.$attrs$ = vnodeData;
812
819
  if (vNodeChildren.length > 0) {
@@ -842,6 +849,36 @@ var newVNode = (tag, text) => {
842
849
  };
843
850
  var Host = {};
844
851
  var isHost = (node) => node && node.$tag$ === Host;
852
+ var vdomFnUtils = {
853
+ forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
854
+ map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
855
+ };
856
+ var convertToPublic = (node) => ({
857
+ vattrs: node.$attrs$,
858
+ vchildren: node.$children$,
859
+ vkey: node.$key$,
860
+ vname: node.$name$,
861
+ vtag: node.$tag$,
862
+ vtext: node.$text$
863
+ });
864
+ var convertToPrivate = (node) => {
865
+ if (typeof node.vtag === "function") {
866
+ const vnodeData = { ...node.vattrs };
867
+ if (node.vkey) {
868
+ vnodeData.key = node.vkey;
869
+ }
870
+ if (node.vname) {
871
+ vnodeData.name = node.vname;
872
+ }
873
+ return h(node.vtag, vnodeData, ...node.vchildren || []);
874
+ }
875
+ const vnode = newVNode(node.vtag, node.vtext);
876
+ vnode.$attrs$ = node.vattrs;
877
+ vnode.$children$ = node.vchildren;
878
+ vnode.$key$ = node.vkey;
879
+ vnode.$name$ = node.vname;
880
+ return vnode;
881
+ };
845
882
 
846
883
  // src/runtime/client-hydrate.ts
847
884
  var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
@@ -3129,6 +3166,9 @@ var setContentReference = (elm) => {
3129
3166
  contentRefElm["s-cn"] = true;
3130
3167
  insertBefore(elm, contentRefElm, elm.firstChild);
3131
3168
  };
3169
+
3170
+ // src/runtime/fragment.ts
3171
+ var Fragment = (_, children) => children;
3132
3172
  var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
3133
3173
  if (listeners && win.document) {
3134
3174
  listeners.map(([flags, name, method]) => {
@@ -5863,9 +5903,6 @@ function getLmvzComponentMetaInfo(el, key) {
5863
5903
  return el?.[META_BASE]?.[key];
5864
5904
  }
5865
5905
 
5866
- function isFocusControllerHost(el) {
5867
- return Boolean(getLmvzComponentMetaInfo(el, 'isFocusControllerHost'));
5868
- }
5869
5906
  const defaultConfig$1 = {
5870
5907
  orientation: 'both',
5871
5908
  enableHomeAndEnd: false,
@@ -5885,11 +5922,21 @@ class DirectionalFocusController {
5885
5922
  }
5886
5923
  hostConnected() {
5887
5924
  registerLmvzComponentMetaInfo(this.host.el, 'isFocusControllerHost', true);
5888
- this.host.el.addEventListener('keydown', this.handleKeydown);
5925
+ this.getListenerTarget().addEventListener('keydown', this.handleKeydown);
5889
5926
  this.syncManagedFocusTarget();
5890
5927
  }
5891
5928
  hostDisconnected() {
5892
- this.host.el.removeEventListener('keydown', this.handleKeydown);
5929
+ this.getListenerTarget().removeEventListener('keydown', this.handleKeydown);
5930
+ }
5931
+ updateListenerTarget(listenerTarget) {
5932
+ if (listenerTarget === this.config.listenerTarget)
5933
+ return;
5934
+ this.getListenerTarget().removeEventListener('keydown', this.handleKeydown);
5935
+ this.config.listenerTarget = listenerTarget;
5936
+ this.getListenerTarget().addEventListener('keydown', this.handleKeydown);
5937
+ }
5938
+ getListenerTarget() {
5939
+ return this.config.listenerTarget ?? this.host.el;
5893
5940
  }
5894
5941
  updateElements(elements) {
5895
5942
  const previousElement = this.currentElement ?? this.getManagedActiveElement() ?? undefined;
@@ -6041,6 +6088,9 @@ class DirectionalFocusController {
6041
6088
  return isTabOrderable && element.getAttribute('aria-hidden') !== 'true' && (element.checkVisibility?.() ?? true) && element.offsetParent !== null;
6042
6089
  }
6043
6090
  }
6091
+ function isFocusControllerHost(el) {
6092
+ return Boolean(getLmvzComponentMetaInfo(el, 'isFocusControllerHost'));
6093
+ }
6044
6094
  function isDirectionalFocusReceiver(el) {
6045
6095
  return typeof el.resolveFocusableElement === 'function';
6046
6096
  }
@@ -6048,7 +6098,7 @@ function resolveElement(el) {
6048
6098
  return isDirectionalFocusReceiver(el) ? (el.resolveFocusableElement() ?? el) : el;
6049
6099
  }
6050
6100
 
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)); } } }`;
6101
+ 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, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); 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; } & > * { font: inherit; color: inherit; } &: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; } &:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } &:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } &:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } &.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); } &.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } &.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } &.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)); } &.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)); } &.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)); } &.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)); } &.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)); } &.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)); } &.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)); } &.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-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)); } } 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: normal; width: 100%; } }`;
6052
6102
 
6053
6103
  class LmvzActionList extends ReactiveControllerHost {
6054
6104
  get el() { return getElement(this); }
@@ -6279,7 +6329,7 @@ function addElementActivationListener(...[target, handler, abortSignal, keys]) {
6279
6329
  bindHandlers(target, handler, abortSignal, keys);
6280
6330
  }
6281
6331
 
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); } `;
6332
+ 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 { display: inline-block; 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, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); 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; } & > * { font: inherit; color: inherit; } &: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; } &:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } &:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } &:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } &.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); } &.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } &.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } &.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)); } &.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)); } &.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)); } &.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)); } &.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)); } &.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)); } &.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)); } &.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)); } } width: 100%; } } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
6283
6333
 
6284
6334
  class LmvzButton extends ReactiveControllerHost {
6285
6335
  get el() { return getElement(this); }
@@ -6412,6 +6462,204 @@ const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
6412
6462
  const chipSizes = ['default', 'small'];
6413
6463
  const linkTypes = ['internal', 'external'];
6414
6464
 
6465
+ const PRIORITY_MAP = {
6466
+ low: 0,
6467
+ normal: 1,
6468
+ high: 2,
6469
+ };
6470
+ const STATUS_DURATION = {
6471
+ success: 5000,
6472
+ warning: 5000,
6473
+ error: 8000,
6474
+ };
6475
+ let idCounter = 0;
6476
+ function nextId() {
6477
+ idCounter += 1;
6478
+ return `snackbar-${idCounter}`;
6479
+ }
6480
+ function resolveHostElement() {
6481
+ if (typeof document === 'undefined') {
6482
+ return undefined;
6483
+ }
6484
+ const existing = document.querySelector('[data-snackbar-host]');
6485
+ if (existing) {
6486
+ return existing;
6487
+ }
6488
+ const el = document.createElement('lmvz-snackbar');
6489
+ el.setAttribute('data-snackbar-host', '');
6490
+ document.body.appendChild(el);
6491
+ return el;
6492
+ }
6493
+ class SnackbarController {
6494
+ hostEl = undefined;
6495
+ active = undefined;
6496
+ getHost() {
6497
+ if (this.hostEl !== undefined && !this.hostEl.isConnected) {
6498
+ this.hostEl = undefined;
6499
+ }
6500
+ if (this.hostEl === undefined) {
6501
+ this.hostEl = resolveHostElement();
6502
+ }
6503
+ return this.hostEl;
6504
+ }
6505
+ clearTimer(entry) {
6506
+ if (entry.timerId !== undefined) {
6507
+ clearTimeout(entry.timerId);
6508
+ entry.timerId = undefined;
6509
+ }
6510
+ }
6511
+ scheduleTimer(entry, delayMs) {
6512
+ if (delayMs <= 0) {
6513
+ return;
6514
+ }
6515
+ entry.timerStartedAt = Date.now();
6516
+ entry.timerId = setTimeout(() => {
6517
+ if (this.active !== undefined && this.active.id === entry.id) {
6518
+ this.dismissActive(entry, 'timeout');
6519
+ }
6520
+ }, delayMs);
6521
+ }
6522
+ dismissActive(entry, reason) {
6523
+ this.clearTimer(entry);
6524
+ const host = entry.hostEl;
6525
+ host.removeEventListener('pointerenter', entry.onPointerEnter);
6526
+ host.removeEventListener('pointerleave', entry.onPointerLeave);
6527
+ host.removeEventListener('focusin', entry.onFocusIn);
6528
+ host.removeEventListener('focusout', entry.onFocusOut);
6529
+ if (entry.onActionListener) {
6530
+ host.removeEventListener('lmvzAction', entry.onActionListener);
6531
+ }
6532
+ host.hide?.();
6533
+ if (this.active?.id === entry.id) {
6534
+ this.active = undefined;
6535
+ }
6536
+ if (reason !== 'action') {
6537
+ host.dispatchEvent(new CustomEvent('lmvzClose', { detail: { reason }, bubbles: true, composed: true }));
6538
+ }
6539
+ entry.resolve({ reason });
6540
+ }
6541
+ pauseTimer(entry) {
6542
+ entry.pauseCount += 1;
6543
+ if (entry.pauseCount > 1 || entry.timerId === undefined) {
6544
+ return;
6545
+ }
6546
+ const elapsed = entry.timerStartedAt !== undefined ? Date.now() - entry.timerStartedAt : 0;
6547
+ entry.remaining = Math.max(0, entry.remaining - elapsed);
6548
+ entry.timerStartedAt = undefined;
6549
+ this.clearTimer(entry);
6550
+ }
6551
+ resumeTimer(entry) {
6552
+ if (entry.pauseCount > 0) {
6553
+ entry.pauseCount -= 1;
6554
+ }
6555
+ if (entry.pauseCount > 0) {
6556
+ return;
6557
+ }
6558
+ if (entry.remaining > 0) {
6559
+ this.scheduleTimer(entry, entry.remaining);
6560
+ }
6561
+ }
6562
+ applyToHost(host, options) {
6563
+ host.setAttribute('status', options.status ?? 'success');
6564
+ if (options.actionLabel !== undefined) {
6565
+ host.setAttribute('action-label', options.actionLabel);
6566
+ }
6567
+ else {
6568
+ host.removeAttribute('action-label');
6569
+ }
6570
+ }
6571
+ open(options) {
6572
+ const incomingPriority = PRIORITY_MAP[options.priority ?? 'normal'];
6573
+ if (this.active !== undefined && incomingPriority < this.active.priority) {
6574
+ let swallowResolve;
6575
+ const closed = new Promise((resolve) => {
6576
+ swallowResolve = resolve;
6577
+ });
6578
+ swallowResolve({ reason: 'swallowed' });
6579
+ const id = nextId();
6580
+ return {
6581
+ id,
6582
+ closed,
6583
+ dismiss() {
6584
+ },
6585
+ };
6586
+ }
6587
+ if (this.active !== undefined) {
6588
+ this.dismissActive(this.active, 'overridden');
6589
+ }
6590
+ const host = this.getHost();
6591
+ if (host === undefined) {
6592
+ const id = nextId();
6593
+ let ssrResolve;
6594
+ const closed = new Promise((resolve) => {
6595
+ ssrResolve = resolve;
6596
+ });
6597
+ ssrResolve({ reason: 'swallowed' });
6598
+ return { id, closed, dismiss() { } };
6599
+ }
6600
+ const id = nextId();
6601
+ const status = options.status ?? 'success';
6602
+ const durationMs = options.duration === 0 ? 0 : (options.duration ?? STATUS_DURATION[status]);
6603
+ let entryResolve;
6604
+ const closed = new Promise((resolve) => {
6605
+ entryResolve = resolve;
6606
+ });
6607
+ const entry = {
6608
+ id,
6609
+ priority: incomingPriority,
6610
+ resolve: entryResolve,
6611
+ timerId: undefined,
6612
+ remaining: durationMs,
6613
+ timerStartedAt: undefined,
6614
+ pauseCount: 0,
6615
+ hostEl: host,
6616
+ onPointerEnter: () => this.pauseTimer(entry),
6617
+ onPointerLeave: () => this.resumeTimer(entry),
6618
+ onFocusIn: () => this.pauseTimer(entry),
6619
+ onFocusOut: () => this.resumeTimer(entry),
6620
+ };
6621
+ this.active = entry;
6622
+ host.addEventListener('pointerenter', entry.onPointerEnter);
6623
+ host.addEventListener('pointerleave', entry.onPointerLeave);
6624
+ host.addEventListener('focusin', entry.onFocusIn);
6625
+ host.addEventListener('focusout', entry.onFocusOut);
6626
+ this.applyToHost(host, options);
6627
+ const onAction = () => {
6628
+ if (this.active !== undefined && this.active.id === id) {
6629
+ options.onAction?.();
6630
+ this.dismissActive(entry, 'action');
6631
+ }
6632
+ };
6633
+ entry.onActionListener = onAction;
6634
+ host.addEventListener('lmvzAction', onAction, { once: true });
6635
+ host.show?.();
6636
+ queueMicrotask(() => host.setAttribute('message', options.message));
6637
+ if (durationMs > 0) {
6638
+ this.scheduleTimer(entry, durationMs);
6639
+ }
6640
+ return {
6641
+ id,
6642
+ closed,
6643
+ dismiss: () => {
6644
+ if (this.active?.id === id) {
6645
+ this.dismissActive(entry, 'manual');
6646
+ }
6647
+ },
6648
+ };
6649
+ }
6650
+ dismiss(id) {
6651
+ if (!this.active) {
6652
+ return;
6653
+ }
6654
+ if (!id || this.active.id === id) {
6655
+ this.dismissActive(this.active, 'manual');
6656
+ }
6657
+ }
6658
+ }
6659
+
6660
+ window.LmvzApi ??= {};
6661
+ window.LmvzApi.SnackbarController = SnackbarController;
6662
+
6415
6663
  /**
6416
6664
  * Tests if a value is a `function`.
6417
6665
  *
@@ -8562,6 +8810,16 @@ function toValidSvgStringWithFallback(value) {
8562
8810
  }
8563
8811
  }
8564
8812
 
8813
+ function typedIconFromSet(iconset, icon) {
8814
+ return {
8815
+ iconset,
8816
+ icon,
8817
+ };
8818
+ }
8819
+
8820
+ window.LmvzApi ??= {};
8821
+ window.LmvzApi.typedIconFromSet = typedIconFromSet;
8822
+
8565
8823
  const lmvzButtonGroupCss = () => `:host{display:flex;flex-flow:row-reverse wrap;gap:var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);}:host([stacked]){flex-flow:column nowrap;align-items:stretch;padding:0}:host([stacked]) ::slotted(*){display:block;width:100%}::slotted([hidden]){display:none !important}:host(:not([data-only-tertiary],[stacked])) ::slotted([data-first-tertiary]){margin-inline-end:auto}:host([data-only-tertiary]:not([stacked])){justify-content:flex-end}`;
8566
8824
 
8567
8825
  class LmvzButtonGroup {
@@ -8751,7 +9009,7 @@ function joinPath(...parts) {
8751
9009
  return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
8752
9010
  }
8753
9011
 
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; }`;
9012
+ 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 { & { & { --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, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); 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; } & > * { font: inherit; color: inherit; } &: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; } &:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } &:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } &:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } &.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); } &.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } &.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } &.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)); } &.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)); } &.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)); } &.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)); } &.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)); } &.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)); } &.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)); } &.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
9013
 
8756
9014
  class LmvzCard {
8757
9015
  constructor(hostRef) {
@@ -8799,7 +9057,7 @@ const checkmarkSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0i
8799
9057
 
8800
9058
  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
9059
 
8802
- const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmarkSvg);
9060
+ const CHECKMARK_SVG$1 = toValidSvgStringWithFallback(checkmarkSvg);
8803
9061
  let checkboxIdCounter = 0;
8804
9062
  class LmvzCheckbox extends ReactiveControllerHost {
8805
9063
  get el() { return getElement(this); }
@@ -8922,7 +9180,7 @@ class LmvzCheckbox extends ReactiveControllerHost {
8922
9180
  this.nativeError = true;
8923
9181
  }
8924
9182
  render() {
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))));
9183
+ 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$1 })), 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))));
8926
9184
  }
8927
9185
  static get formAssociated() { return true; }
8928
9186
  static get watchers() { return {
@@ -8975,7 +9233,7 @@ function debounce(func, wait) {
8975
9233
  };
8976
9234
  }
8977
9235
 
8978
- const lmvzChipCss = () => `:host { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #000000); padding-block: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); padding-inline: var(--lmvz-dimension-10-8, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); border: 1px solid var(--lmvz-chip-border-color); border-radius: var(--lmvz-semantic-border-radius-round, 999px); font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem) / 1.5 Router); background-color: var(--lmvz-chip-background-color); color: var(--lmvz-chip-foreground-color); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); box-sizing: border-box; max-width: 100%; overflow: hidden; white-space: nowrap; > .content-overflow-wrapper { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } :host([size='small']) { padding-block: var(--lmvz-dimension-4-2, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); padding-inline: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.5 Router); gap: var(--lmvz-dimension-4-2, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); } ::slotted(*) { display: inline; white-space: inherit; } ::slotted(lmvz-icon) { --lmvz-component-color: var(--lmvz-chip-foreground-color); --lmvz-component-size: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } :host([size='small']) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } :host([type='active']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } :host([type='warning']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #ffeeb8); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #614a00); } :host([type='success']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #4eb6a9); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #c2e6e1); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #28625b); } :host([type='error']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fbdfe0); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #a31419); } :host([type='neutral']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #000000); } `;
9236
+ const lmvzChipCss = () => `:host { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #000000); padding-block: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); padding-inline: var(--lmvz-dimension-10-8, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); border: 1px solid var(--lmvz-chip-border-color); border-radius: var(--lmvz-semantic-border-radius-round, 999px); font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem) / 1.5 Router); background-color: var(--lmvz-chip-background-color); color: var(--lmvz-chip-foreground-color); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); box-sizing: border-box; max-width: 100%; overflow: hidden; white-space: nowrap; > .content-overflow-wrapper { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } :host([size='small']) { padding-block: var(--lmvz-dimension-4-2, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); padding-inline: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.5 Router); gap: var(--lmvz-dimension-4-2, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); } ::slotted(*) { display: inline; white-space: inherit; } ::slotted(lmvz-icon) { --lmvz-component-color: var(--lmvz-chip-foreground-color); --lmvz-component-size: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } :host([size='small']) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } :host([type='active']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #7fccf5); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } :host([type='warning']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #ffeeb8); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #614a00); } :host([type='success']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #4eb6a9); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #c2e6e1); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #28625b); } :host([type='error']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fbdfe0); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #a31419); } :host([type='neutral']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #000000); } `;
8979
9237
 
8980
9238
  class LmvzChip extends ReactiveControllerHost {
8981
9239
  ariaValidationController = new AriaValidationController(this);
@@ -9017,13 +9275,13 @@ class LmvzChip extends ReactiveControllerHost {
9017
9275
  checkContent = debounce(() => {
9018
9276
  if (!isAriaValidationEnabled())
9019
9277
  return;
9020
- const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.assignedElements() ?? []), ...(this.afterSlot?.assignedElements() ?? [])];
9278
+ const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.assignedNodes() ?? []), ...(this.afterSlot?.assignedElements() ?? [])];
9021
9279
  if (!elements.length) {
9022
9280
  console.warn('LmvzChip has no assigned content. Please add content to the default slot or the before-text/after-text slots.');
9023
9281
  }
9024
9282
  }, 500);
9025
9283
  render() {
9026
- return (hAsync(Host, { key: 'f326ca8e4dba40941db6b9a711ba46989c4cf1b3', type: this.type, size: this.size }, hAsync("slot", { key: 'f9925e107c2e474ecbaca756451dc4249000b0db', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), hAsync("span", { key: '0b6ea980e0b0500d2955a03088d08eb2ca67f64f', class: "content-overflow-wrapper" }, hAsync("slot", { key: '2b7f5c02e9a09128e0a404c7fe35f6278ce1fa61', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), hAsync("slot", { key: '929291cdaccf26d332823f9a100c6b6a84dc04f2', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
9284
+ return (hAsync(Host, { key: '63581b0c567d208b200464e9985ac32d97c1ad43', type: this.type, size: this.size }, hAsync("slot", { key: '7aa740cc80b400893dcbe7021d5513d3f1ca476b', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), hAsync("span", { key: 'da5b9e272becef812b4914bf25b451da16bb9012', class: "content-overflow-wrapper" }, hAsync("slot", { key: 'a925dcd383c86dbea63790b5623d159472b6684c', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), hAsync("slot", { key: 'e018eafb75b85068c992e9f91c4fac89a4c95153', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
9027
9285
  }
9028
9286
  static get watchers() { return {
9029
9287
  "type": [{
@@ -11853,7 +12111,7 @@ class LmvzHeader extends ReactiveControllerHost {
11853
12111
  primarySlot;
11854
12112
  secondarySlot;
11855
12113
  secondaryNav;
11856
- keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both' });
12114
+ keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both', manageTabIndex: false, enableHomeAndEnd: false });
11857
12115
  get primaryMenuitems() {
11858
12116
  return this.primarySlot?.assignedElements({ flatten: false }) || [];
11859
12117
  }
@@ -11930,7 +12188,7 @@ class LmvzHeader extends ReactiveControllerHost {
11930
12188
  }
11931
12189
  }
11932
12190
  render() {
11933
- return (hAsync(Host, { key: '77744fd74160551232eb0347e9ebb01eb3b9bec0', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: 'dfd78b2a2ab06b010d9f29dd61f57aced82243fe', class: "brand" }, hAsync("slot", { key: 'c6d29bbdbcbe581a8a170fbeb3d6ab1e31d27dcd', name: "brand" }, hAsync("img", { key: '80cea3b254d153411864d52c2ba300e0eb3c57a7', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: '71c53ae0300b61291d0763cdb23f1f645a83928a', "aria-label": "Hauptnavigation" }, hAsync("div", { key: '09949b77a66c54a10c4c141de846fd5697b9d445', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: 'acec0cf7e13325c49d1e0929b90b056ad1cbbe64', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: 'd35860c71ad5e28ee2e3aaafb157acbeff41d83e', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: 'a4c3a1ad1b1de5bd903b54ed6bd1616ce6517bbb', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: 'ff50045d9ab28bf66a619a48d9ea1f0ed2f5f952', class: "actions" }, hAsync("slot", { key: '6ead0b7a54bf93bb06f0eab2aa8159bd6e96e8f5', name: "actions" }))));
12191
+ return (hAsync(Host, { key: 'a72c860d7f67c9631c462c0abcc798bb142dfc55', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: '4ed87264d201c513bce284536793692424ed864b', class: "brand" }, hAsync("slot", { key: '9291d81d7f8a630007b8ad827a16ebea7222b9d2', name: "brand" }, hAsync("img", { key: '77da99409f40d93e4a2d190cbb2a8857f1e81c36', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: '3c40c04bb23524ae58e391a54b044e225a25ad07', "aria-label": "Hauptnavigation" }, hAsync("div", { key: '207b8032d3d11b4bfacb6e7fcffb683ad5da8ccc', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: '8ae67a57ac7b6bb6083c469a857542e31b0c2294', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: '86b9696c95e9ae0e3843fa1607f268dcae8cb279', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: '67966de33555dc26ac2dc51fc8a85d456a2e8e85', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: 'bfb2831144cee723c3182d96d64f44be1cc5a78b', class: "actions" }, hAsync("slot", { key: '6956b81fa8ed6c446edc5f7d9708462b39bc8cbb', name: "actions" }))));
11934
12192
  }
11935
12193
  static get watchers() { return {
11936
12194
  "lmvzActiveNav": [{
@@ -12256,9 +12514,6 @@ class LmvzInput extends ReactiveControllerHost {
12256
12514
  return;
12257
12515
  this.updateNativeError('input');
12258
12516
  };
12259
- handleChange = (event) => {
12260
- };
12261
- handleFocus = () => { };
12262
12517
  handleInvalid = () => this.updateNativeError('invalid');
12263
12518
  handleBlur = () => {
12264
12519
  this.inputValidityActive = true;
@@ -12276,9 +12531,9 @@ class LmvzInput extends ReactiveControllerHost {
12276
12531
  render() {
12277
12532
  const hasValue = Boolean(this.value);
12278
12533
  const shouldFloatLabel = hasValue || Boolean(this.placeholder);
12279
- return (hAsync("div", { key: '626697f00e9ba3ad46e6304d06b04df0f27bb2c2', class: classNames('input-container', {
12534
+ return (hAsync("div", { key: '85f498773efdad53d309e8b1eb5b85ea0601277e', class: classNames('input-container', {
12280
12535
  'interaction-filled': hasValue,
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)));
12536
+ }) }, hAsync("div", { key: 'eb74bdd8170014c2a17c6046878b0f4d61fece25', class: "input-wrapper" }, hAsync("slot", { key: 'ceb3acb5dcb641900caf9a22f43295d1c407ad2e', name: "before-input" }), hAsync("div", { key: 'a7f626addd83cbf79b435989bec94f777818794e', class: "label-input-group" }, hAsync("label", { key: '391e2d1f873f9aef9bd9e7f14b006d898a699abe', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: '691251a0efb1a60fd5e53447a6204c13008545a1', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("input", { key: 'f37d3d7d5076636638b2da59cca91c1cedc7504a', 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, onBlur: this.handleBlur, onInvalid: this.handleInvalid })), hAsync("slot", { key: '22b2be3072fc274bbeff4d92f25dccc5ea50c4d0', name: "after-input" })), hAsync("div", { key: '95f28aad61a5d7ea45fb4479801097036652b08f', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: '9ea8420b336b33a0fd3b7e53cc4efa44983cbdc3', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
12282
12537
  }
12283
12538
  static get formAssociated() { return true; }
12284
12539
  static get watchers() { return {
@@ -12455,7 +12710,7 @@ const infoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiI
12455
12710
 
12456
12711
  const warningSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjI4NjQgMy4wNDkzOEMxMS4wMzgwIDEuNjUwMjEgMTIuOTYyMCAxLjY1MDIxIDEzLjcxMzYgMy4wNDkzOEwyMi42NjY4IDE5LjI0OTRDMjMuNDAyNiAyMC42MTYxIDIyLjQ1ODggMjIuMjUwMCAyMC45NTMyIDIyLjI1MDBIMy4wNDY4MEMxLjU0MTIwIDIyLjI1MDAgMC41OTc0MTAgMjAuNjE2MSAxLjMzMzIwIDE5LjI0OTRMMTAuMjg2NCAzLjA0OTM4Wk0xMiA4QzExLjQ0NzcgOCAxMSA4LjQ0NzcyIDExIDlWMTRDMTEgMTQuNTUyMyAxMS40NDc3IDE1IDEyIDE1QzEyLjU1MjMgMTUgMTMgMTQuNTUyMyAxMyAxNFY5QzEzIDguNDQ3NzIgMTIuNTUyMyA4IDEyIDhaTTEyIDE2QzExLjQ0NzcgMTYgMTEgMTYuNDQ3NyAxMSAxN0MxMSAxNy41NTIzIDExLjQ0NzcgMTggMTIgMThDMTIuNTUyMyAxOCAxMyAxNy41NTIzIDEzIDE3QzEzIDE2LjQ0NzcgMTIuNTUyMyAxNiAxMiAxNloiLz4KPC9zdmc+Cg==';
12457
12712
 
12458
- const lmvzMessageCss = () => `:host{display:flex;flex-direction:row;align-items:flex-start;width:100%;padding:var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));gap:var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));border:var(--lmvz-semantic-border-width-default, 1px) solid;border-radius:var(--lmvz-semantic-border-radius-md, 6px);font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)}:host([type='neutral']){background-color:var(--lmvz-semantic-color-status-active, #f6fbfe);border-color:var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa);color:var(--lmvz-semantic-color-status-on-active, #0e7ab4)}:host([type='warning']){background-color:var(--lmvz-semantic-color-status-warning, #ffeeb8);border-color:var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);color:var(--lmvz-semantic-color-status-on-warning, #614a00)}.leading-icon{flex-shrink:0;display:flex;align-items:flex-start;padding-top:2px;width:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));height:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}.leading-icon svg{width:100%;height:100%}.message{flex:1}`;
12713
+ const lmvzMessageCss = () => `:host{display:flex;flex-direction:row;align-items:flex-start;width:100%;padding:var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));gap:var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));border:var(--lmvz-semantic-border-width-default, 1px) solid;border-radius:var(--lmvz-semantic-border-radius-md, 6px);font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)}:host([type='neutral']){background-color:var(--lmvz-semantic-color-status-active, #f6fbfe);border-color:var(--lmvz-semantic-color-status-on-active-subtle, #7fccf5);color:var(--lmvz-semantic-color-status-on-active, #0e7ab4)}:host([type='warning']){background-color:var(--lmvz-semantic-color-status-warning, #ffeeb8);border-color:var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);color:var(--lmvz-semantic-color-status-on-warning, #614a00)}.leading-icon{flex-shrink:0;display:flex;align-items:flex-start;padding-top:2px;width:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));height:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}.leading-icon svg{width:100%;height:100%}.message{flex:1}`;
12459
12714
 
12460
12715
  const INFO_SVG = toValidSvgStringWithFallback(infoSvg);
12461
12716
  const WARNING_SVG = toValidSvgStringWithFallback(warningSvg);
@@ -14174,7 +14429,7 @@ const computePosition = (reference, floating, options) => {
14174
14429
  });
14175
14430
  };
14176
14431
 
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}`;
14432
+ 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])){display:none}`;
14178
14433
 
14179
14434
  class LmvzPopover {
14180
14435
  constructor(hostRef) {
@@ -14216,7 +14471,6 @@ class LmvzPopover {
14216
14471
  }
14217
14472
  componentDidLoad() {
14218
14473
  autoAssignId(this.el);
14219
- this.syncContainerId();
14220
14474
  }
14221
14475
  handleOpenChange(isOpen) {
14222
14476
  if (isOpen) {
@@ -14243,23 +14497,16 @@ class LmvzPopover {
14243
14497
  this.removeCloseHandlers();
14244
14498
  this.extEventController.abort();
14245
14499
  }
14246
- syncContainerId() {
14247
- const hostId = this.el.getAttribute('id');
14248
- if (!hostId || !this.containerEl)
14249
- return;
14250
- this.containerEl.id = hostId;
14251
- }
14252
14500
  setupAnchorEl() {
14253
14501
  const { anchorEl } = this;
14254
14502
  if (!anchorEl) {
14255
14503
  console.warn('no anchor element set for', this);
14256
14504
  return;
14257
14505
  }
14258
- this.syncContainerId();
14259
14506
  if (!anchorEl.hasAttribute('aria-haspopup')) {
14260
14507
  anchorEl.setAttribute('aria-haspopup', this.containerRole === 'dialog' ? 'dialog' : this.containerRole);
14261
14508
  }
14262
- anchorEl.setAttribute('aria-controls', this.containerEl?.id || this.el.getAttribute('id'));
14509
+ anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
14263
14510
  if (!anchorEl.hasAttribute('aria-expanded')) {
14264
14511
  anchorEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
14265
14512
  }
@@ -14287,7 +14534,6 @@ class LmvzPopover {
14287
14534
  await waitFrame();
14288
14535
  await this.updatePosition();
14289
14536
  autoAssignId(this.el);
14290
- this.syncContainerId();
14291
14537
  this.applyAnchorAriaOpen();
14292
14538
  this.lmvzOpen.emit();
14293
14539
  await waitFrame();
@@ -14366,7 +14612,7 @@ class LmvzPopover {
14366
14612
  this.closureController?.abort();
14367
14613
  }
14368
14614
  render() {
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) }))));
14615
+ return (hAsync(Host, { key: '83529aeac05cdc706193fa8bbbcc8f8672756111', role: this.containerRole, "aria-label": this.label || undefined }, hAsync("div", { key: '97c255e788806c0dec2f4ed04c6fc815150912a2', part: "container", class: `container lmvz-wrapper-card-${this.size}`, ref: (el) => (this.containerEl = el) }, hAsync("slot", { key: 'e4ea69d179557e7d34f1475c07c9284ea8d10a67', ref: (el) => (this.slotEl = el) }))));
14370
14616
  }
14371
14617
  static get watchers() { return {
14372
14618
  "open": [{
@@ -14994,9 +15240,10 @@ class ListboxController {
14994
15240
  }
14995
15241
  }
14996
15242
 
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%); }`;
15243
+ 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); --lmvz-select-chevron-size: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); 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, [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); } .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; } .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:first-child + span.sc-lmvz-select { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .select-trigger.sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-select-chevron-size); height: var(--lmvz-select-chevron-size); flex-shrink: 0; } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child lmvz-chip.sc-lmvz-select { vertical-align: middle; } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child lmvz-chip.sc-lmvz-select + lmvz-chip.sc-lmvz-select { margin-inline-start: var(--lmvz-select-gap); } .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)); --lmvz-select-chevron-size: var(--lmvz-component-icon-size-4xs, 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='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)); --lmvz-select-chevron-size: var(--lmvz-component-icon-size-xs, 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)); } .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); --lmvz-button-background-override: var(--lmvz-select-option-background); --lmvz-button-color-override: var(--lmvz-select-option-color); --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px); --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-content-justification: normal; --lmvz-button-font-override: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); & { --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, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); 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; } display: flex; } .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); } .sc-lmvz-select-h:not([multiple]) .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%); } .lmvz-select-option-checkbox.sc-lmvz-select { display: flex; align-items: center; justify-content: center; width: var(--lmvz-global-s18, 18px); height: var(--lmvz-global-s18, 18px); border: var(--lmvz-semantic-border-width-default, 1px) solid currentcolor; border-radius: var(--lmvz-global-s4, 4px); flex-shrink: 0; } .lmvz-select-option-checkbox-indicator.sc-lmvz-select { display: flex; align-items: center; justify-content: center; line-height: 0; } .lmvz-select-option-checkbox-indicator.sc-lmvz-select svg.sc-lmvz-select { width: 100%; height: 100%; }`;
14998
15244
 
14999
15245
  let selectIdCounter = 0;
15246
+ const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmarkSvg);
15000
15247
  class LmvzSelect extends ReactiveControllerHost {
15001
15248
  get el() { return getElement(this); }
15002
15249
  get validationEl() {
@@ -15011,6 +15258,8 @@ class LmvzSelect extends ReactiveControllerHost {
15011
15258
  optionsMutationObserver;
15012
15259
  initialValue;
15013
15260
  initialValueCaptured = false;
15261
+ initialValues;
15262
+ initialValuesCaptured = false;
15014
15263
  flatOptions = [];
15015
15264
  optionsById = new Map();
15016
15265
  listboxController = new ListboxController({
@@ -15053,6 +15302,8 @@ class LmvzSelect extends ReactiveControllerHost {
15053
15302
  }
15054
15303
  lmvzChange;
15055
15304
  value;
15305
+ multiple = false;
15306
+ values;
15056
15307
  label;
15057
15308
  helperText;
15058
15309
  nativeError = false;
@@ -15068,14 +15319,23 @@ class LmvzSelect extends ReactiveControllerHost {
15068
15319
  required = false;
15069
15320
  name;
15070
15321
  size = 'default';
15071
- highlighted = false;
15072
15322
  selectedLabel = '';
15073
15323
  selectedId;
15074
15324
  activeId;
15075
15325
  isOpen = false;
15076
15326
  optionGroups = [];
15077
15327
  get hasValue() {
15078
- return Boolean(this.value);
15328
+ return this.multiple ? Boolean(this.values && this.values.length > 0) : Boolean(this.value);
15329
+ }
15330
+ get triggerAriaLabel() {
15331
+ if (this.multiple) {
15332
+ const count = this.values?.length ?? 0;
15333
+ return count > 0 ? `${this.label}, ${count} selected` : this.label;
15334
+ }
15335
+ return this.hasValue ? `${this.label}, ${this.selectedLabel}` : this.label;
15336
+ }
15337
+ get chipSize() {
15338
+ return this.size === 'small' ? 'small' : 'default';
15079
15339
  }
15080
15340
  componentWillLoad() {
15081
15341
  this.updateValidity();
@@ -15122,17 +15382,28 @@ class LmvzSelect extends ReactiveControllerHost {
15122
15382
  formAssociatedCallback(form) {
15123
15383
  if (!form)
15124
15384
  return;
15125
- this.internals.setFormValue?.(this.value ?? '');
15385
+ this.syncFormValue();
15126
15386
  }
15127
15387
  formResetCallback() {
15128
15388
  this.internals.setValidity?.({});
15129
- this.value = this.initialValue;
15389
+ if (this.multiple) {
15390
+ this.values = this.initialValues ? [...this.initialValues] : [];
15391
+ }
15392
+ else {
15393
+ this.value = this.initialValue;
15394
+ }
15130
15395
  this.updateValidity();
15131
15396
  }
15132
15397
  formStateRestoreCallback(state) {
15398
+ if (this.multiple) {
15399
+ this.values = state instanceof FormData && this.name ? state.getAll(this.name).map(String) : [];
15400
+ return;
15401
+ }
15133
15402
  this.value = state;
15134
15403
  }
15135
15404
  handleValueChange(newValue) {
15405
+ if (this.multiple)
15406
+ return;
15136
15407
  this.applySelectionFromValue();
15137
15408
  if (this.selectedId && !this.isOpen) {
15138
15409
  this.listboxController.setActiveId(this.selectedId);
@@ -15140,6 +15411,12 @@ class LmvzSelect extends ReactiveControllerHost {
15140
15411
  this.internals.setFormValue?.(newValue ?? '');
15141
15412
  this.updateValidity();
15142
15413
  }
15414
+ handleValuesChange() {
15415
+ if (!this.multiple)
15416
+ return;
15417
+ this.syncFormValue();
15418
+ this.updateValidity();
15419
+ }
15143
15420
  handleRequiredChange() {
15144
15421
  this.updateValidity();
15145
15422
  }
@@ -15157,15 +15434,31 @@ class LmvzSelect extends ReactiveControllerHost {
15157
15434
  this.flatOptions = flat;
15158
15435
  this.optionsById = new Map(flat.map((option) => [option.id, option]));
15159
15436
  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;
15437
+ if (this.multiple) {
15438
+ if (!this.values) {
15439
+ const preselected = flat.filter((option) => option.selected && !option.disabled).map((option) => option.value);
15440
+ if (preselected.length > 0) {
15441
+ this.values = preselected;
15442
+ }
15164
15443
  }
15165
15444
  }
15166
- this.applySelectionFromValue();
15445
+ else {
15446
+ if (!this.value) {
15447
+ const preselected = flat.find((option) => option.selected && !option.disabled);
15448
+ if (preselected) {
15449
+ this.value = preselected.value;
15450
+ }
15451
+ }
15452
+ this.applySelectionFromValue();
15453
+ }
15167
15454
  this.listboxController.setOptions(flat.map(({ id, label, disabled }) => ({ id, label, disabled })));
15168
- if (!this.initialValueCaptured) {
15455
+ if (this.multiple) {
15456
+ if (!this.initialValuesCaptured) {
15457
+ this.initialValues = this.values ? [...this.values] : [];
15458
+ this.initialValuesCaptured = true;
15459
+ }
15460
+ }
15461
+ else if (!this.initialValueCaptured) {
15169
15462
  this.initialValue = this.value;
15170
15463
  this.initialValueCaptured = true;
15171
15464
  }
@@ -15176,8 +15469,28 @@ class LmvzSelect extends ReactiveControllerHost {
15176
15469
  this.selectedLabel = match?.label ?? '';
15177
15470
  this.listboxController.setSelectedId(match?.id);
15178
15471
  }
15472
+ isOptionSelected(option) {
15473
+ if (this.multiple) {
15474
+ return (this.values ?? []).includes(option.value);
15475
+ }
15476
+ return option.id === this.selectedId;
15477
+ }
15478
+ syncFormValue() {
15479
+ if (this.multiple) {
15480
+ const formData = new FormData();
15481
+ if (this.name) {
15482
+ for (const value of this.values ?? []) {
15483
+ formData.append(this.name, value);
15484
+ }
15485
+ }
15486
+ this.internals.setFormValue?.(formData);
15487
+ return;
15488
+ }
15489
+ this.internals.setFormValue?.(this.value ?? '');
15490
+ }
15179
15491
  updateValidity() {
15180
- if (this.required && !this.value) {
15492
+ const missing = this.multiple ? !(this.values && this.values.length > 0) : !this.value;
15493
+ if (this.required && missing) {
15181
15494
  this.internals.setValidity?.({ valueMissing: true }, 'Please select a value.', this.triggerEl);
15182
15495
  return;
15183
15496
  }
@@ -15191,6 +15504,13 @@ class LmvzSelect extends ReactiveControllerHost {
15191
15504
  const option = this.optionsById.get(id);
15192
15505
  if (!option)
15193
15506
  return;
15507
+ if (this.multiple) {
15508
+ const current = this.values ?? [];
15509
+ const updated = current.includes(option.value) ? current.filter((value) => value !== option.value) : [...current, option.value];
15510
+ this.values = updated;
15511
+ this.lmvzChange.emit(updated);
15512
+ return;
15513
+ }
15194
15514
  const isNewValue = option.value !== this.value;
15195
15515
  this.value = option.value;
15196
15516
  if (isNewValue) {
@@ -15253,18 +15573,35 @@ class LmvzSelect extends ReactiveControllerHost {
15253
15573
  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
15574
  }
15255
15575
  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));
15576
+ const selected = this.isOptionSelected(option);
15577
+ return (hAsync("div", { id: option.id, key: option.id, role: "option", class: "lmvz-select-option", "aria-selected": selected ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, "data-active": option.id === this.activeId ? 'true' : undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleOptionClick(option) }, this.multiple && (hAsync("span", { class: "lmvz-select-option-checkbox", "aria-hidden": "true" }, selected && hAsync("span", { class: "lmvz-select-option-checkbox-indicator", innerHTML: CHECKMARK_SVG }))), option.label));
15578
+ }
15579
+ renderChips() {
15580
+ const values = this.values ?? [];
15581
+ const occurrenceCounts = new Map();
15582
+ return (hAsync(Fragment, null, values.map((value) => {
15583
+ const occurrence = occurrenceCounts.get(value) ?? 0;
15584
+ occurrenceCounts.set(value, occurrence + 1);
15585
+ const chipKey = occurrence === 0 ? value : `${value}-dup-${occurrence}`;
15586
+ const option = this.flatOptions.find((candidate) => candidate.value === value);
15587
+ const chipLabel = option?.label ?? value;
15588
+ return (hAsync("lmvz-chip", { key: chipKey, size: this.chipSize }, chipLabel));
15589
+ })));
15257
15590
  }
15258
15591
  render() {
15259
15592
  const hasValue = this.hasValue;
15260
15593
  const shouldShowLabel = hasValue;
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))));
15594
+ const showChips = this.multiple && hasValue;
15595
+ return (hAsync(Host, { key: '77cb72cdce635eae0f9a29cb9121dd7d16955219' }, hAsync("div", { key: 'cc6c04090457df17c6a9e74354fc21875d378642', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, hAsync("label", { key: '8dc52469a7b3333578494b2f7bdb4e870044ac6c', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && hAsync("span", { key: 'c198fb4944e46c5219a42e16ae24dc3c414b1b00', "aria-hidden": "true" }, " *")), hAsync("div", { key: '034cc67405aac73a6557036dea90e4644c1578ed', 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": this.triggerAriaLabel, "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: 'c61c136bfaab211572a988d3b16c2746f80b1ac6' }, showChips ? this.renderChips() : hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: '24201baae63a4f6fdaef2441d304cd8f69430fb5', "aria-hidden": "true" }, " *")), hAsync("span", { key: '547c61dfdc83f89cf7cd0582c785b9552190e533', "aria-hidden": "true" }, hAsync("svg", { key: 'f6a0cb7c77682aec03cd146e84712c17df5ff910', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '35a8a50e27f18e54003974ae5b5ed578602664d3', 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: '0d5b94659c23763d59638046a397963d79a5e588', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, "aria-multiselectable": this.multiple ? 'true' : undefined, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), hAsync("div", { key: 'c4a313fe4b6c53678a4f3dafced210f00e3c93d5', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, hAsync("slot", { key: '1fb311e6938812e68ae5155184af2e2ba7c19861', onSlotchange: this.handleSlotChange }))), this.helperText && (hAsync("div", { key: 'accade9aae4cb2e23fa1d8f62dd9b6efdf3ddfb5', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (hAsync("div", { key: 'faa5eba225adda67b44b8a63ae98a678fddf49ad', id: this.errorId, role: "alert" }, this.errorMessage))));
15262
15596
  }
15263
15597
  static get formAssociated() { return true; }
15264
15598
  static get watchers() { return {
15265
15599
  "value": [{
15266
15600
  "handleValueChange": 0
15267
15601
  }],
15602
+ "values": [{
15603
+ "handleValuesChange": 0
15604
+ }],
15268
15605
  "required": [{
15269
15606
  "handleRequiredChange": 0
15270
15607
  }],
@@ -15278,6 +15615,8 @@ class LmvzSelect extends ReactiveControllerHost {
15278
15615
  "$tagName$": "lmvz-select",
15279
15616
  "$members$": {
15280
15617
  "value": [1025],
15618
+ "multiple": [516],
15619
+ "values": [1040],
15281
15620
  "label": [1],
15282
15621
  "helperText": [1, "helper-text"],
15283
15622
  "error": [6660],
@@ -15286,7 +15625,6 @@ class LmvzSelect extends ReactiveControllerHost {
15286
15625
  "required": [516],
15287
15626
  "name": [513],
15288
15627
  "size": [513],
15289
- "highlighted": [516],
15290
15628
  "nativeError": [32],
15291
15629
  "selectedLabel": [32],
15292
15630
  "selectedId": [32],
@@ -15301,7 +15639,7 @@ class LmvzSelect extends ReactiveControllerHost {
15301
15639
  },
15302
15640
  "$listeners$": [[0, "invalid", "handleInvalid"]],
15303
15641
  "$lazyBundleId$": "-",
15304
- "$attrsToReflect$": [["error", "error"], ["disabled", "disabled"], ["required", "required"], ["name", "name"], ["size", "size"], ["highlighted", "highlighted"]]
15642
+ "$attrsToReflect$": [["multiple", "multiple"], ["error", "error"], ["disabled", "disabled"], ["required", "required"], ["name", "name"], ["size", "size"]]
15305
15643
  }; }
15306
15644
  }
15307
15645
  function parseOptionElements(container, idPrefix) {
@@ -15504,10 +15842,12 @@ class LmvzTabs extends ReactiveControllerHost {
15504
15842
  instanceId = ++tabsIdCounter;
15505
15843
  tabSlotEl;
15506
15844
  panelSlotEl;
15845
+ tablistEl;
15507
15846
  focusController = new DirectionalFocusController(this, {
15508
15847
  orientation: 'horizontal',
15509
15848
  manageTabIndex: true,
15510
15849
  enableHomeAndEnd: true,
15850
+ listenerTarget: this.tablistEl,
15511
15851
  });
15512
15852
  value;
15513
15853
  orientation = 'horizontal';
@@ -15528,6 +15868,9 @@ class LmvzTabs extends ReactiveControllerHost {
15528
15868
  this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange);
15529
15869
  this.el.addEventListener('lmvzTabReady', this.handleTabReady);
15530
15870
  this.handleTabSlotChange();
15871
+ if (this.tablistEl) {
15872
+ this.focusController.updateListenerTarget(this.tablistEl);
15873
+ }
15531
15874
  super.componentDidLoad();
15532
15875
  }
15533
15876
  disconnectedCallback() {
@@ -15612,6 +15955,7 @@ class LmvzTabs extends ReactiveControllerHost {
15612
15955
  orientation: this.orientation,
15613
15956
  manageTabIndex: true,
15614
15957
  enableHomeAndEnd: true,
15958
+ listenerTarget: this.tablistEl,
15615
15959
  });
15616
15960
  this.addController(this.focusController);
15617
15961
  if (this.el.isConnected) {
@@ -15734,7 +16078,7 @@ class LmvzTabs extends ReactiveControllerHost {
15734
16078
  this.selectTab(value);
15735
16079
  };
15736
16080
  render() {
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) }))));
16081
+ return (hAsync(Host, { key: 'be4fe04b1374a2793d3b1e9a658a449474efdd03', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: 'd91015eddf16dfad5d49e942eb86e9f568978f34', role: "tablist", "aria-orientation": this.orientation, class: "tablist", ref: (el) => (this.tablistEl = el) }, hAsync("slot", { key: 'be0990a7c668bc96a67c01561e3142ec028dabd0', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '338323738dfdbb436d86cdb4f6041a67c1af433d', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: 'd225be099c8cb902776ce0a7dbf7dcb2aef2d03b', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
15738
16082
  }
15739
16083
  static get watchers() { return {
15740
16084
  "value": [{