@lmvz-ds/components 0.34.0 → 0.35.1

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 (223) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +10 -0
  3. package/cjs/{async.util-BQ60l-WC.js → async.util-Dnl6c82X.js} +1 -0
  4. package/cjs/{list-keyboard-controller-Dm5S_l0D.js → directional-focus-controller-DBat-oF7.js} +13 -1
  5. package/cjs/element-activation-controller-BHqCUgQv.js +57 -0
  6. package/cjs/{element.util-Dbyc8yUG.js → element.util-CRS_YJ59.js} +10 -2
  7. package/cjs/lmvz-action-list.cjs.entry.js +9 -6
  8. package/cjs/lmvz-action.cjs.entry.js +1 -1
  9. package/cjs/lmvz-button-group.cjs.entry.js +1 -1
  10. package/cjs/lmvz-button_2.cjs.entry.js +6 -7
  11. package/cjs/lmvz-card.cjs.entry.js +1 -1
  12. package/cjs/lmvz-checkbox.cjs.entry.js +2 -2
  13. package/cjs/lmvz-chip.cjs.entry.js +2 -2
  14. package/cjs/lmvz-components.cjs.js +1 -1
  15. package/cjs/lmvz-header_2.cjs.entry.js +10 -7
  16. package/cjs/lmvz-input.cjs.entry.js +4 -4
  17. package/cjs/lmvz-link.cjs.entry.js +1 -1
  18. package/cjs/lmvz-menuitem.cjs.entry.js +3 -2
  19. package/cjs/lmvz-message.cjs.entry.js +43 -10
  20. package/cjs/lmvz-modal.cjs.entry.js +4 -4
  21. package/cjs/lmvz-popover.cjs.entry.js +48 -28
  22. package/cjs/lmvz-radio.cjs.entry.js +2 -2
  23. package/cjs/lmvz-select.cjs.entry.js +2 -2
  24. package/cjs/lmvz-snackbar.cjs.entry.js +1 -1
  25. package/cjs/lmvz-tab.cjs.entry.js +1 -1
  26. package/cjs/lmvz-tabs.cjs.entry.js +10 -7
  27. package/cjs/lmvz-toggle.cjs.entry.js +4 -4
  28. package/cjs/loader.cjs.js +1 -1
  29. package/{esm/reactive-controller-host-FBuCCcFC.js → cjs/reactive-controller-host-Bc6B_T45.js} +19 -1
  30. package/cjs/{stencil.util-DxdYjVoH.js → stencil.util-CBrPLd-F.js} +1 -1
  31. package/collection/components/lmvz-action/lmvz-action.js +1 -1
  32. package/collection/components/lmvz-action-list/lmvz-action-list.css +7 -7
  33. package/collection/components/lmvz-action-list/lmvz-action-list.js +26 -2
  34. package/collection/components/lmvz-button/lmvz-button.css +7 -7
  35. package/collection/components/lmvz-button/lmvz-button.js +1 -2
  36. package/collection/components/lmvz-card/lmvz-card.css +10 -10
  37. package/collection/components/lmvz-checkbox/lmvz-checkbox.css +8 -8
  38. package/collection/components/lmvz-chip/lmvz-chip.css +20 -20
  39. package/collection/components/lmvz-header/lmvz-header.css +3 -3
  40. package/collection/components/lmvz-header/lmvz-header.js +26 -2
  41. package/collection/components/lmvz-icon/lmvz-icon.css +1 -1
  42. package/collection/components/lmvz-input/lmvz-input.css +3 -3
  43. package/collection/components/lmvz-link/lmvz-link.css +6 -4
  44. package/collection/components/lmvz-message/lmvz-message.css +5 -5
  45. package/collection/components/lmvz-message/lmvz-message.js +42 -9
  46. package/collection/components/lmvz-modal/lmvz-modal.css +5 -5
  47. package/collection/components/lmvz-modal/lmvz-modal.js +1 -1
  48. package/collection/components/lmvz-modal/test/testing.js +36 -0
  49. package/collection/components/lmvz-popover/lmvz-popover.js +55 -28
  50. package/collection/components/lmvz-radio/lmvz-radio.css +9 -9
  51. package/collection/components/lmvz-select/lmvz-select.css +5 -5
  52. package/collection/components/lmvz-snackbar/lmvz-snackbar.css +13 -13
  53. package/collection/components/lmvz-tab/lmvz-tab.css +9 -9
  54. package/collection/components/lmvz-tabs/lmvz-tabs.css +2 -2
  55. package/collection/components/lmvz-tabs/lmvz-tabs.js +22 -2
  56. package/collection/components/lmvz-toggle/lmvz-toggle.css +3 -3
  57. package/collection/utils/aria/{list-keyboard-controller.js → directional-focus-controller.js} +11 -0
  58. package/collection/utils/aria/element-activation-controller.js +27 -11
  59. package/collection/utils/data/{event.utilt.js → event.util.js} +8 -0
  60. package/collection/utils/element/element.util.js +9 -2
  61. package/collection/utils/stencil/reactive-controller-host.js +14 -0
  62. package/components/index.js +1 -1
  63. package/components/lmvz-action-list.js +1 -1
  64. package/components/lmvz-action.js +1 -1
  65. package/components/lmvz-button-group.js +1 -1
  66. package/components/lmvz-button.js +1 -1
  67. package/components/lmvz-card.js +1 -1
  68. package/components/lmvz-checkbox.js +1 -1
  69. package/components/lmvz-chip.js +1 -1
  70. package/components/lmvz-header.js +1 -1
  71. package/components/lmvz-icon.js +1 -1
  72. package/components/lmvz-input.js +1 -1
  73. package/components/lmvz-link.js +1 -1
  74. package/components/lmvz-menuitem.js +1 -1
  75. package/components/lmvz-message.js +1 -1
  76. package/components/lmvz-modal.js +1 -1
  77. package/components/lmvz-popover.js +1 -1
  78. package/components/lmvz-radio.js +1 -1
  79. package/components/lmvz-select.js +1 -1
  80. package/components/lmvz-snackbar.js +1 -1
  81. package/components/lmvz-tab.js +1 -1
  82. package/components/lmvz-tabs.js +1 -1
  83. package/components/lmvz-toggle.js +1 -1
  84. package/components/p-BVzxNP7h.js +1 -0
  85. package/components/p-CgK6-SEe.js +1 -0
  86. package/components/{p-De-xQqdU.js → p-Chj7BuUZ.js} +1 -1
  87. package/components/p-CxLd309t.js +1 -0
  88. package/components/{p-D7S1WiEC.js → p-D5FL8n1q.js} +1 -1
  89. package/components/p-DLUsBYJH.js +1 -0
  90. package/components/p-DZj20TV1.js +1 -0
  91. package/components/p-bh9cItsP.js +1 -0
  92. package/components/p-zMWemcoB.js +1 -0
  93. package/esm/{async.util-D9nUtvTm.js → async.util-DZj20TV1.js} +1 -1
  94. package/esm/{list-keyboard-controller-tle6IRkv.js → directional-focus-controller-DgAdCZrG.js} +13 -2
  95. package/esm/element-activation-controller-7PNSl6io.js +54 -0
  96. package/esm/{element.util-B0eCxdyI.js → element.util-BFcYfHYq.js} +10 -3
  97. package/esm/lmvz-action-list.entry.js +8 -5
  98. package/esm/lmvz-action.entry.js +1 -1
  99. package/esm/lmvz-button-group.entry.js +1 -1
  100. package/esm/lmvz-button_2.entry.js +6 -7
  101. package/esm/lmvz-card.entry.js +1 -1
  102. package/esm/lmvz-checkbox.entry.js +2 -2
  103. package/esm/lmvz-chip.entry.js +2 -2
  104. package/esm/lmvz-components.js +1 -1
  105. package/esm/lmvz-header_2.entry.js +9 -6
  106. package/esm/lmvz-input.entry.js +4 -4
  107. package/esm/lmvz-link.entry.js +1 -1
  108. package/esm/lmvz-menuitem.entry.js +3 -2
  109. package/esm/lmvz-message.entry.js +43 -10
  110. package/esm/lmvz-modal.entry.js +4 -4
  111. package/esm/lmvz-popover.entry.js +48 -28
  112. package/esm/lmvz-radio.entry.js +2 -2
  113. package/esm/lmvz-select.entry.js +2 -2
  114. package/esm/lmvz-snackbar.entry.js +1 -1
  115. package/esm/lmvz-tab.entry.js +1 -1
  116. package/esm/lmvz-tabs.entry.js +8 -5
  117. package/esm/lmvz-toggle.entry.js +4 -4
  118. package/esm/loader.js +1 -1
  119. package/{cjs/reactive-controller-host-B_lZtcA6.js → esm/reactive-controller-host-CICeIanv.js} +15 -3
  120. package/esm/{stencil.util-wGFRYLwZ.js → stencil.util-D2-5rsN3.js} +1 -1
  121. package/hydrate/index.js +229 -114
  122. package/hydrate/index.mjs +229 -114
  123. package/lmvz-components/lmvz-components.esm.js +1 -1
  124. package/lmvz-components/{p-b0626234.entry.js → p-0c05f24b.entry.js} +1 -1
  125. package/lmvz-components/{p-b67ff2d1.entry.js → p-194a3af5.entry.js} +1 -1
  126. package/lmvz-components/{p-585470ef.entry.js → p-24d13be6.entry.js} +1 -1
  127. package/lmvz-components/p-4416d688.entry.js +1 -0
  128. package/lmvz-components/{p-08613ba2.entry.js → p-46edf36f.entry.js} +1 -1
  129. package/lmvz-components/{p-bfde444e.entry.js → p-489d9912.entry.js} +1 -1
  130. package/lmvz-components/p-5ff55ba9.entry.js +1 -0
  131. package/lmvz-components/{p-03c38ff2.entry.js → p-888e04d7.entry.js} +1 -1
  132. package/lmvz-components/p-9dc420e2.entry.js +1 -0
  133. package/lmvz-components/p-BFcYfHYq.js +1 -0
  134. package/lmvz-components/p-BuEA0MWd.js +1 -0
  135. package/lmvz-components/p-CICeIanv.js +1 -0
  136. package/lmvz-components/p-DZj20TV1.js +1 -0
  137. package/lmvz-components/p-a887018d.entry.js +1 -0
  138. package/lmvz-components/p-aaa7691c.entry.js +1 -0
  139. package/lmvz-components/p-af48eccb.entry.js +1 -0
  140. package/lmvz-components/{p-9b7ce515.entry.js → p-bc237ab7.entry.js} +1 -1
  141. package/lmvz-components/p-bh9cItsP.js +1 -0
  142. package/lmvz-components/{p-2036044c.entry.js → p-c2544495.entry.js} +1 -1
  143. package/lmvz-components/{p-ddc28256.entry.js → p-d4154a65.entry.js} +1 -1
  144. package/lmvz-components/p-e4ce63b3.entry.js +1 -0
  145. package/lmvz-components/{p-11de5905.entry.js → p-eb4c5a6f.entry.js} +1 -1
  146. package/lmvz-components/{p-6140866f.entry.js → p-eb62d4af.entry.js} +1 -1
  147. package/lmvz-components/{p-ce1a9f39.entry.js → p-ecbd9e93.entry.js} +1 -1
  148. package/lmvz-components/{p-4254aa38.entry.js → p-f42b16e6.entry.js} +1 -1
  149. package/lmvz-components/p-wlMjNjuv.js +1 -0
  150. package/manifest.json +79 -5
  151. package/package.json +1 -1
  152. package/types/api/ds.constants.d.ts +1 -0
  153. package/types/components/lmvz-action/lmvz-action.d.ts +1 -0
  154. package/types/components/lmvz-action-list/lmvz-action-list.d.ts +3 -1
  155. package/types/components/lmvz-button/lmvz-button.d.ts +2 -1
  156. package/types/components/lmvz-button-group/lmvz-button-group.d.ts +1 -0
  157. package/types/components/lmvz-card/lmvz-card.d.ts +1 -0
  158. package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +1 -0
  159. package/types/components/lmvz-chip/lmvz-chip.d.ts +1 -0
  160. package/types/components/lmvz-header/lmvz-header.d.ts +4 -2
  161. package/types/components/lmvz-icon/lmvz-icon.d.ts +1 -0
  162. package/types/components/lmvz-input/lmvz-input.d.ts +1 -0
  163. package/types/components/lmvz-link/lmvz-link.d.ts +1 -0
  164. package/types/components/lmvz-menuitem/lmvz-menuitem.d.ts +1 -0
  165. package/types/components/lmvz-message/lmvz-message.d.ts +1 -0
  166. package/types/components/lmvz-message/public.d.ts +1 -0
  167. package/types/components/lmvz-modal/lmvz-modal.d.ts +1 -0
  168. package/types/components/lmvz-modal/test/testing.d.ts +10 -0
  169. package/types/components/lmvz-popover/lmvz-popover.d.ts +6 -3
  170. package/types/components/lmvz-radio/lmvz-radio.d.ts +1 -0
  171. package/types/components/lmvz-select/lmvz-select.d.ts +1 -0
  172. package/types/components/lmvz-snackbar/lmvz-snackbar.d.ts +1 -0
  173. package/types/components/lmvz-snackbar/public.d.ts +1 -0
  174. package/types/components/lmvz-snackbar/snackbar-controller.d.ts +1 -0
  175. package/types/components/lmvz-spinner/lmvz-spinner.d.ts +1 -0
  176. package/types/components/lmvz-tab/lmvz-tab.d.ts +1 -0
  177. package/types/components/lmvz-tabs/lmvz-tabs.d.ts +3 -1
  178. package/types/components/lmvz-toggle/lmvz-toggle.d.ts +1 -0
  179. package/types/components.d.ts +18 -0
  180. package/types/index.d.ts +1 -0
  181. package/types/utils/aria/aria-validation-controller.d.ts +1 -0
  182. package/types/utils/aria/aria.constants.d.ts +1 -0
  183. package/types/utils/aria/{list-keyboard-controller.d.ts → directional-focus-controller.d.ts} +13 -2
  184. package/types/utils/aria/element-activation-controller.d.ts +11 -2
  185. package/types/utils/async/async.util.d.ts +1 -0
  186. package/types/utils/data/event.util.d.ts +6 -0
  187. package/types/utils/data/number.util.d.ts +1 -0
  188. package/types/utils/data/object.util.d.ts +1 -0
  189. package/types/utils/data/time.util.d.ts +1 -0
  190. package/types/utils/element/element.util.d.ts +2 -0
  191. package/types/utils/environment.d.ts +1 -0
  192. package/types/utils/icons/icons-registry.d.ts +1 -0
  193. package/types/utils/icons/icons.d.ts +1 -0
  194. package/types/utils/icons/icons.unit.d.ts +1 -0
  195. package/types/utils/icons/public.d.ts +1 -0
  196. package/types/utils/public.d.ts +1 -0
  197. package/types/utils/radio/radio-group-controller.d.ts +1 -0
  198. package/types/utils/stencil/assets.d.ts +1 -0
  199. package/types/utils/stencil/reactive-controller-host.d.ts +8 -1
  200. package/types/utils/stencil/stencil.util.d.ts +1 -0
  201. package/cjs/element-activation-controller-DC_6T0Rt.js +0 -31
  202. package/components/p-BhSTYZC6.js +0 -1
  203. package/components/p-CE-QR3Tp.js +0 -1
  204. package/components/p-CK3Ixl1K.js +0 -1
  205. package/components/p-CN0JX9-m.js +0 -1
  206. package/components/p-D-2gj6LP.js +0 -1
  207. package/components/p-D9nUtvTm.js +0 -1
  208. package/components/p-DAMVH-31.js +0 -1
  209. package/esm/element-activation-controller-CN0JX9-m.js +0 -29
  210. package/lmvz-components/p-45c3ccb6.entry.js +0 -1
  211. package/lmvz-components/p-49e98627.entry.js +0 -1
  212. package/lmvz-components/p-4f005b23.entry.js +0 -1
  213. package/lmvz-components/p-50063516.entry.js +0 -1
  214. package/lmvz-components/p-9f8fd077.entry.js +0 -1
  215. package/lmvz-components/p-B0eCxdyI.js +0 -1
  216. package/lmvz-components/p-BhSTYZC6.js +0 -1
  217. package/lmvz-components/p-CN0JX9-m.js +0 -1
  218. package/lmvz-components/p-D9nUtvTm.js +0 -1
  219. package/lmvz-components/p-DuLiExhX.js +0 -1
  220. package/lmvz-components/p-FBuCCcFC.js +0 -1
  221. package/lmvz-components/p-cc2734e9.entry.js +0 -1
  222. package/lmvz-components/p-fd455288.entry.js +0 -1
  223. package/types/utils/data/event.utilt.d.ts +0 -4
@@ -3,12 +3,12 @@
3
3
  var index = require('./index-TGsVZNDP.js');
4
4
  var index$1 = require('./index-Bp6Dd2i1.js');
5
5
  var ariaValidationController = require('./aria-validation-controller-BC0Eaiv4.js');
6
- var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
7
- var stencil_util = require('./stencil.util-DxdYjVoH.js');
6
+ var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
7
+ var stencil_util = require('./stencil.util-CBrPLd-F.js');
8
8
  require('./aria-loader-DWUVcapD.js');
9
- require('./async.util-BQ60l-WC.js');
9
+ require('./async.util-Dnl6c82X.js');
10
10
 
11
- const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } [size='sm'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem)); } [size='md'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: var(--input-font-size); font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: 1.5; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0.5em; transform: translateY(-100%); transform-origin: left top; font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 400; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: var(--input-font-size); outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--helper-text-color); font-weight: 400; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--error-text-color); font-weight: 400; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: 4px; }`;
11
+ const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } [size='sm'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='md'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: var(--input-font-size); font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: 1.5; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0.5em; transform: translateY(-100%); transform-origin: left top; font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 400; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: var(--input-font-size); outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--helper-text-color); font-weight: 400; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--error-text-color); font-weight: 400; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: 4px; }`;
12
12
 
13
13
  let inputIdCounter = 0;
14
14
  const LmvzInput = class extends reactiveControllerHost.ReactiveControllerHost {
@@ -9,7 +9,7 @@ const arrowRightSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0
9
9
 
10
10
  const externalSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxIDlWM0gxNU0yMSAzTDEwIDE0TTE4IDEzVjE5QzE4IDE5LjUzMDQgMTcuNzg5MyAyMC4wMzkxIDE3LjQxNDIgMjAuNDE0MkMxNy4wMzkxIDIwLjc4OTMgMTYuNTMwNCAyMSAxNiAyMUg1QzQuNDY5NTcgMjEgMy45NjA4NiAyMC43ODkzIDMuNTg1NzkgMjAuNDE0MkMzLjIxMDcxIDIwLjAzOTEgMyAxOS41MzA0IDMgMTlWOEMzIDcuNDY5NTcgMy4yMTA3MSA2Ljk2MDg2IDMuNTg1NzkgNi41ODU3OUMzLjk2MDg2IDYuMjEwNzEgNC40Njk1NyA2IDUgNkgxMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
11
11
 
12
- const lmvzLinkCss = () => `:host{display:inline}a{display:inline-flex;align-items:center;gap:var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));padding-inline:var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)) var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));padding-block:var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));border-radius:var(--lmvz-semantic-border-radius-round, 999px);color:var(--lmvz-semantic-color-int-on-tertiary, #000000);font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);text-decoration:underline;transition:background-color 0.15s ease, color 0.15s ease}a:hover{background-color:var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);color:var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)}a:active{background-color:var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);color:var(--lmvz-semantic-color-int-on-tertiary-active, #000000)}a: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))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:rect(0 0 0 0);white-space:nowrap;border-width:0}`;
12
+ const lmvzLinkCss = () => `:host{display:inline}a{display:inline-flex;align-items:center;gap:var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));padding-inline:var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)) var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));padding-block:var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));border-radius:var(--lmvz-semantic-border-radius-round, 999px);color:var(--lmvz-semantic-color-int-on-tertiary, #000000);font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);text-decoration:underline;transition:background-color 0.15s ease, color 0.15s ease}a:hover{background-color:var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);color:var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)}a:active{background-color:var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);color:var(--lmvz-semantic-color-int-on-tertiary-active, #000000)}a: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))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:rect(0 0 0 0);white-space:nowrap;border-width:0}`;
13
13
 
14
14
  const ARROW_RIGHT_SVG = svg.toValidSvgStringWithFallback(arrowRightSvg);
15
15
  const EXTERNAL_SVG = svg.toValidSvgStringWithFallback(externalSvg);
@@ -2,9 +2,10 @@
2
2
 
3
3
  var index = require('./index-TGsVZNDP.js');
4
4
  var ariaValidationController = require('./aria-validation-controller-BC0Eaiv4.js');
5
- var elementActivationController = require('./element-activation-controller-DC_6T0Rt.js');
6
- var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
5
+ var elementActivationController = require('./element-activation-controller-BHqCUgQv.js');
6
+ var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
7
7
  require('./aria-loader-DWUVcapD.js');
8
+ require('./element.util-CRS_YJ59.js');
8
9
 
9
10
  const lmvzMenuitemCss = () => `@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-menuitem-h { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); cursor: pointer; --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); background: var(--lmvz-menuitem-background); color: var(--lmvz-menuitem-color); } .sc-lmvz-menuitem-h:hover { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } .sc-lmvz-menuitem-h:active { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } .sc-lmvz-menuitem-h:focus-visible { z-index: 1; } [aria-expanded='true'].sc-lmvz-menuitem-h { --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f6fbfe); --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); }`;
10
11
 
@@ -7,7 +7,7 @@ var closeSm = require('./close-sm-CATLoxxd.js');
7
7
  var warning = require('./warning-WEX_ABWL.js');
8
8
  require('./logger-NBdKPSou.js');
9
9
 
10
- const lmvzMessageCss = () => `:host{display:flex;flex-direction:row;align-items:flex-start;width:100%;padding:var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));gap:var(--lmvz-dimension-8-12, 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, #fffbf0);border-color:var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);color:var(--lmvz-semantic-color-status-on-warning, #7a5e00)}.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}`;
10
+ 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}`;
11
11
 
12
12
  const INFO_SVG = svg.toValidSvgStringWithFallback(warning.infoSvg);
13
13
  const WARNING_SVG = svg.toValidSvgStringWithFallback(warning.warningSvg);
@@ -17,14 +17,47 @@ const TYPE_SVG = {
17
17
  warning: WARNING_SVG,
18
18
  };
19
19
  const BLOCK_TAGS = new Set([
20
- 'ADDRESS', 'ARTICLE', 'ASIDE', 'BLOCKQUOTE',
21
- 'CAPTION', 'COLGROUP',
22
- 'DD', 'DETAILS', 'DIALOG', 'DIV', 'DL', 'DT',
23
- 'FIELDSET', 'FIGCAPTION', 'FIGURE', 'FOOTER', 'FORM',
24
- 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'HEADER', 'HGROUP', 'HR',
25
- 'LI', 'MAIN', 'MENU', 'NAV',
26
- 'OL', 'P', 'PRE',
27
- 'SECTION', 'TABLE', 'TBODY', 'TD', 'TH', 'THEAD', 'TFOOT', 'TR',
20
+ 'ADDRESS',
21
+ 'ARTICLE',
22
+ 'ASIDE',
23
+ 'BLOCKQUOTE',
24
+ 'CAPTION',
25
+ 'COLGROUP',
26
+ 'DD',
27
+ 'DETAILS',
28
+ 'DIALOG',
29
+ 'DIV',
30
+ 'DL',
31
+ 'DT',
32
+ 'FIELDSET',
33
+ 'FIGCAPTION',
34
+ 'FIGURE',
35
+ 'FOOTER',
36
+ 'FORM',
37
+ 'H1',
38
+ 'H2',
39
+ 'H3',
40
+ 'H4',
41
+ 'H5',
42
+ 'H6',
43
+ 'HEADER',
44
+ 'HGROUP',
45
+ 'HR',
46
+ 'LI',
47
+ 'MAIN',
48
+ 'MENU',
49
+ 'NAV',
50
+ 'OL',
51
+ 'P',
52
+ 'PRE',
53
+ 'SECTION',
54
+ 'TABLE',
55
+ 'TBODY',
56
+ 'TD',
57
+ 'TH',
58
+ 'THEAD',
59
+ 'TFOOT',
60
+ 'TR',
28
61
  'UL',
29
62
  ]);
30
63
  const LmvzMessage = class {
@@ -70,7 +103,7 @@ const LmvzMessage = class {
70
103
  }
71
104
  render() {
72
105
  const role = this.live === 'assertive' ? 'alert' : this.live === 'polite' ? 'status' : 'note';
73
- return (index.h(index.Host, { key: 'f422e8ee4bb4466757c081bc6b33761db15cb02d', role: role }, this.leadingIcon && index.h("span", { key: 'c4077083db459a65cacce2cbb8e8dbb477572d95', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), index.h("span", { key: '77c3af94194adc2b663c6d6626951e5789e17686', class: "message" }, index.h("slot", { key: '8db714f6bd0ac80a3c77a2768431baa37a63b3d1', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (index.h("lmvz-button", { key: 'f75e835f39e97ea217727b55dc842ceda004834b', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (index.h("lmvz-button", { key: '51b04ad48a68e0843445104e303eae5bb4cdd351', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, index.h("lmvz-icon", { key: '5949210f479a6a19f1c4bb9d3c91a77a1c0ad8a6', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
106
+ return (index.h(index.Host, { key: '99dad82a6300fb8d089f1ea688186d4b4316a058', role: role }, this.leadingIcon && index.h("span", { key: '2adf33102f7075a83ebf29d9b6e0d433a17beb68', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), index.h("span", { key: '286d3d0ea065534b84be18c927b2fcd7f30f34bd', class: "message" }, index.h("slot", { key: '261e865980515a816382b2c7c6b3a52b500308bf', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (index.h("lmvz-button", { key: '46d964c0490bbdd47426fc228db0e3ccb108b416', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (index.h("lmvz-button", { key: 'ce1ec8beb756c2e11c948e227f94f81bd5568c88', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, index.h("lmvz-icon", { key: '5361c424e77ffea7984c2fd42357666cd86ba1d6', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
74
107
  }
75
108
  };
76
109
  LmvzMessage.style = lmvzMessageCss();
@@ -4,12 +4,12 @@ var index = require('./index-TGsVZNDP.js');
4
4
  var closeSm = require('./close-sm-CATLoxxd.js');
5
5
  var svg = require('./svg-CysxzZw7.js');
6
6
  var ariaValidationController = require('./aria-validation-controller-BC0Eaiv4.js');
7
- var element_util = require('./element.util-Dbyc8yUG.js');
8
- var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
7
+ var element_util = require('./element.util-CRS_YJ59.js');
8
+ var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
9
9
  require('./logger-NBdKPSou.js');
10
10
  require('./aria-loader-DWUVcapD.js');
11
11
 
12
- const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { margin-inline: auto; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: fit-content; max-height: 100%; max-width: clamp(20rem, 100%, 90vw); display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .close-button { position: absolute; top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.5 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); flex: 1; overflow: scroll; } `;
12
+ const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { margin-inline: auto; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: fit-content; max-height: 100%; max-width: clamp(20rem, 100%, 90vw); display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .close-button { position: absolute; top: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); flex: 1; overflow: scroll; } `;
13
13
 
14
14
  const closeIconSvg = svg.toValidSvgStringWithFallback(closeSm.closeSmSvg);
15
15
  let modalIdCounter = 0;
@@ -233,7 +233,7 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
233
233
  this.hasHeader = this.hasAssignedContent(this.headerSlot);
234
234
  };
235
235
  render() {
236
- return (index.h(index.Host, { key: '8b5f506cdac223a440309d472639fe965b94f8c2' }, index.h("dialog", { key: '0b70ac4d9590266271052c4d7fdef03c684d9b72', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, index.h("div", { key: '25b529bec1905408c2041b7370ab37586eade47d', class: "modal-shell" }, index.h("header", { key: 'd86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb', class: { header: true, 'has-title': this.hasHeader } }, index.h("div", { key: '7fd7059bfb0b90834895a87c2f2598e2e8c2ba80', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, index.h("slot", { key: 'b6eb7885e220e5def4c3c8420d5b83f4a7e30907', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), index.h("lmvz-button", { key: 'dcebb06482cdef7423c6b62ef877ca9aaabf55a4', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, index.h("lmvz-icon", { key: '0db22c68fe164ed2a33bfaeacf9eac619424f464', icon: closeIconSvg }))), index.h("div", { key: 'ef402c343f2c68210351f7556eec08f2e9be851b', class: "body" }, index.h("slot", { key: '3fe86dc88c88c2cf7bfe3429c62cb2047b64611a' })), index.h("footer", { key: '92b7bdab1ffe700749fc029723f70913f436397d', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, index.h("lmvz-button-group", { key: '7e1b310fb1b20449ead14d0702af4977c74198dd', ref: (element) => (this.buttonGroupEl = element) }, index.h("slot", { key: 'cb2187ab2758c61e80b65f9fc55c6be5f9fd0458', name: "actions" })))))));
236
+ return (index.h(index.Host, { key: '8b5f506cdac223a440309d472639fe965b94f8c2' }, index.h("dialog", { key: '0b70ac4d9590266271052c4d7fdef03c684d9b72', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, index.h("div", { key: '25b529bec1905408c2041b7370ab37586eade47d', class: "modal-shell" }, index.h("header", { key: 'd86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb', class: { header: true, 'has-title': this.hasHeader } }, index.h("div", { key: '7fd7059bfb0b90834895a87c2f2598e2e8c2ba80', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, index.h("slot", { key: 'b6eb7885e220e5def4c3c8420d5b83f4a7e30907', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), index.h("lmvz-button", { key: '72e17391097dfa756e572764f40080b6eec222b2', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onLmvzActivation: this.handleCloseButtonClick, variant: "tertiary" }, index.h("lmvz-icon", { key: '7bbae1aefa9ccc6646d5861683e3476339a545e4', icon: closeIconSvg }))), index.h("div", { key: '9f22628448e9af527eb10ef2602c498afc55c029', class: "body" }, index.h("slot", { key: '413e72707749b3abc987ef47a81cccda4b874c84' })), index.h("footer", { key: 'a1a8f648e88d1f9045e9cf866d332aac69e033df', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, index.h("lmvz-button-group", { key: '7d7eeee7a2551a09bfb4fc513bde48828be5ee8b', ref: (element) => (this.buttonGroupEl = element) }, index.h("slot", { key: '76b00523167c5fa08f11fc351a37638227401711', name: "actions" })))))));
237
237
  }
238
238
  static get watchers() { return {
239
239
  "open": [{
@@ -2,8 +2,11 @@
2
2
 
3
3
  var index = require('./index-TGsVZNDP.js');
4
4
  var ariaLoader = require('./aria-loader-DWUVcapD.js');
5
- var async_util = require('./async.util-BQ60l-WC.js');
6
- var element_util = require('./element.util-Dbyc8yUG.js');
5
+ var directionalFocusController = require('./directional-focus-controller-DBat-oF7.js');
6
+ var elementActivationController = require('./element-activation-controller-BHqCUgQv.js');
7
+ var async_util = require('./async.util-Dnl6c82X.js');
8
+ var element_util = require('./element.util-CRS_YJ59.js');
9
+ require('./reactive-controller-host-Bc6B_T45.js');
7
10
 
8
11
  /**
9
12
  * Custom positioning reference element.
@@ -1372,10 +1375,12 @@ const LmvzPopover = class {
1372
1375
  this.lmvzCancel = index.createEvent(this, "lmvzCancel", 7);
1373
1376
  }
1374
1377
  get el() { return index.getElement(this); }
1375
- closureController = new AbortController();
1378
+ extEventController = new AbortController();
1379
+ closureController;
1376
1380
  containerEl;
1377
1381
  slotEl;
1378
1382
  previouslyFocusedElement = null;
1383
+ anchorEl;
1379
1384
  open = false;
1380
1385
  anchor;
1381
1386
  placement = 'bottom-start';
@@ -1401,7 +1406,6 @@ const LmvzPopover = class {
1401
1406
  }
1402
1407
  componentDidLoad() {
1403
1408
  autoAssignId(this.el);
1404
- validatePopoverAria(this.el, this.label, this.anchor, this.resolveAnchor());
1405
1409
  }
1406
1410
  handleOpenChange(isOpen) {
1407
1411
  if (isOpen) {
@@ -1411,24 +1415,40 @@ const LmvzPopover = class {
1411
1415
  this.onClose();
1412
1416
  }
1413
1417
  }
1414
- handleAnchorChange() {
1415
- if (this.open) {
1416
- this.updatePosition();
1418
+ async handleAnchorChange(anchor) {
1419
+ if (!anchor) {
1420
+ console.warn('anchor property missing for popover', this.el?.id);
1421
+ this.anchor = undefined;
1422
+ return;
1417
1423
  }
1424
+ await async_util.wait();
1425
+ this.anchorEl = typeof anchor === 'string' ? document.getElementById(anchor) : anchor;
1426
+ this.setupAnchorEl();
1427
+ if (!this.open)
1428
+ return;
1429
+ this.updatePosition();
1418
1430
  }
1419
1431
  disconnectedCallback() {
1420
1432
  this.removeCloseHandlers();
1433
+ this.extEventController.abort();
1421
1434
  }
1422
- resolveAnchor() {
1423
- if (!this.anchor)
1424
- return null;
1425
- if (typeof this.anchor === 'string') {
1426
- return document.getElementById(this.anchor);
1435
+ setupAnchorEl() {
1436
+ const { anchorEl } = this;
1437
+ if (!anchorEl) {
1438
+ console.warn('no anchor element set for', this);
1439
+ return;
1427
1440
  }
1428
- return this.anchor;
1441
+ if (!anchorEl.hasAttribute('aria-haspopup')) {
1442
+ anchorEl.setAttribute('aria-haspopup', 'dialog');
1443
+ }
1444
+ anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
1445
+ if (element_util.isActionButton(anchorEl)) {
1446
+ elementActivationController.addElementActivationListener(anchorEl, this.toggle.bind(this), this.extEventController.signal);
1447
+ }
1448
+ validatePopoverAria(this.el, this.label, this.anchor, anchorEl);
1429
1449
  }
1430
1450
  async updatePosition() {
1431
- const anchorEl = this.resolveAnchor();
1451
+ const { anchorEl } = this;
1432
1452
  const container = this.containerEl;
1433
1453
  if (!anchorEl || !container)
1434
1454
  return;
@@ -1443,7 +1463,6 @@ const LmvzPopover = class {
1443
1463
  async onOpen() {
1444
1464
  this.previouslyFocusedElement = element_util.getDeepActiveElement(document);
1445
1465
  this.setupCloseHandlers();
1446
- console.log('onOpen');
1447
1466
  await async_util.waitFrame();
1448
1467
  await this.updatePosition();
1449
1468
  autoAssignId(this.el);
@@ -1461,20 +1480,14 @@ const LmvzPopover = class {
1461
1480
  this.lmvzClose.emit();
1462
1481
  }
1463
1482
  applyAnchorAriaOpen() {
1464
- const anchorEl = this.resolveAnchor();
1465
- if (!anchorEl)
1483
+ if (!this.anchorEl)
1466
1484
  return;
1467
- if (!anchorEl.hasAttribute('aria-haspopup')) {
1468
- anchorEl.setAttribute('aria-haspopup', 'dialog');
1469
- }
1470
- anchorEl.setAttribute('aria-expanded', 'true');
1471
- anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
1485
+ this.anchorEl.setAttribute('aria-expanded', 'true');
1472
1486
  }
1473
1487
  applyAnchorAriaClose() {
1474
- const anchorEl = this.resolveAnchor();
1475
- if (!anchorEl)
1488
+ if (!this.anchorEl)
1476
1489
  return;
1477
- anchorEl.setAttribute('aria-expanded', 'false');
1490
+ this.anchorEl.setAttribute('aria-expanded', 'false');
1478
1491
  }
1479
1492
  focusFirst() {
1480
1493
  const { slotEl } = this;
@@ -1482,6 +1495,12 @@ const LmvzPopover = class {
1482
1495
  return;
1483
1496
  const assigned = slotEl.assignedElements({ flatten: true });
1484
1497
  for (const el of assigned) {
1498
+ if (!element_util.isHtmlElement(el))
1499
+ continue;
1500
+ if (directionalFocusController.isFocusControllerHost(el)) {
1501
+ el.initFocus();
1502
+ return;
1503
+ }
1485
1504
  const focusable = element_util.walkShadowDOMUntil(el, element_util.canReceiveFocus);
1486
1505
  if (focusable) {
1487
1506
  focusable.focus();
@@ -1503,6 +1522,7 @@ const LmvzPopover = class {
1503
1522
  }
1504
1523
  }
1505
1524
  setupCloseHandlers() {
1525
+ this.closureController = new AbortController();
1506
1526
  const options = { signal: this.closureController.signal };
1507
1527
  document.addEventListener('mousedown', (event) => {
1508
1528
  if (!this.open)
@@ -1520,17 +1540,17 @@ const LmvzPopover = class {
1520
1540
  }, options);
1521
1541
  }
1522
1542
  removeCloseHandlers() {
1523
- this.closureController.abort();
1543
+ this.closureController?.abort();
1524
1544
  }
1525
1545
  render() {
1526
- return (index.h(index.Host, { key: '3dd462a66f17c1617e44787107379d9e4d8ca321' }, index.h("div", { key: '27106bc8f3169eb07e0d671635074ddb53feb652', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, index.h("slot", { key: '3401e621d999a225aeb7cb23fa4f5412544a6dab', ref: (el) => (this.slotEl = el) }))));
1546
+ return (index.h(index.Host, { key: '744dae23d80c1e81a0b8bd2e9fcb02c6669d54cd' }, index.h("div", { key: '7f40e25f1e05738b2bbf900b90613004eb188395', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, index.h("slot", { key: '5a400fd9e697254007973f2dce172588fe3760ee', ref: (el) => (this.slotEl = el) }))));
1527
1547
  }
1528
1548
  static get watchers() { return {
1529
1549
  "open": [{
1530
1550
  "handleOpenChange": 0
1531
1551
  }],
1532
1552
  "anchor": [{
1533
- "handleAnchorChange": 0
1553
+ "handleAnchorChange": 1
1534
1554
  }]
1535
1555
  }; }
1536
1556
  };
@@ -2,7 +2,7 @@
2
2
 
3
3
  var index = require('./index-TGsVZNDP.js');
4
4
  var ariaValidationController = require('./aria-validation-controller-BC0Eaiv4.js');
5
- var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
5
+ var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
6
6
  require('./aria-loader-DWUVcapD.js');
7
7
 
8
8
  function groupKey(name, scope) {
@@ -166,7 +166,7 @@ class RadioGroupController {
166
166
  }
167
167
  }
168
168
 
169
- const lmvzRadioCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-radio-h { display: inline-block; --radio-circle-size: var(--lmvz-global-s18, 18px); --radio-dot-size: 0.5rem; --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31); --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc); --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a); --radio-easing: var(--lmvz-global-easing-default, ease); --radio-duration: 0.2s; display: flex; align-items: center; gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: clip; cursor: pointer; background-color: transparent; position: relative; transition: background-color var(--radio-duration) var(--radio-easing); } input.sc-lmvz-radio { position: absolute; inset-block-start: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); inset-inline-start: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); opacity: 0; width: var(--radio-circle-size); height: var(--radio-circle-size); margin: 0; cursor: pointer; z-index: 1; } .circle.sc-lmvz-radio { width: var(--radio-circle-size); height: var(--radio-circle-size); border-radius: 50%; border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color); background-color: var(--radio-bg); pointer-events: none; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: border-color var(--radio-duration) var(--radio-easing); } .dot.sc-lmvz-radio { width: var(--radio-dot-size); height: var(--radio-dot-size); border-radius: 50%; background-color: var(--radio-dot-color); } .content.sc-lmvz-radio { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; } label.sc-lmvz-radio { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--radio-label-color); cursor: pointer; transition: color var(--radio-duration) var(--radio-easing); } .helper-text.sc-lmvz-radio { display: block; font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); color: var(--radio-helper-color); margin-block-start: 2px; } .helper-text.sc-lmvz-radio:empty { display: none; } @media (hover: hover) { .sc-lmvz-radio-h:hover .circle.sc-lmvz-radio { border-color: var(--radio-border-color-hover); } .sc-lmvz-radio-h:hover { background-color: var(--radio-wrapper-bg-hover); } } .sc-lmvz-radio-h:active { background-color: var(--radio-wrapper-bg-active); } [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: var(--radio-border-color-checked); } [checked].sc-lmvz-radio-h label.sc-lmvz-radio { color: var(--radio-label-color-checked); } [error].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: var(--radio-border-color-error); } [error].sc-lmvz-radio-h .helper-text.sc-lmvz-radio { color: var(--lmvz-semantic-color-status-on-danger, #e52a31); } [disabled].sc-lmvz-radio-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } @media (forced-colors: active) { .circle.sc-lmvz-radio { forced-color-adjust: auto; border-color: ButtonText; background-color: Field; } [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: Highlight; } .dot.sc-lmvz-radio { background-color: ButtonText; } [checked].sc-lmvz-radio-h .dot.sc-lmvz-radio { background-color: HighlightText; } }`;
169
+ const lmvzRadioCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-radio-h { display: inline-block; --radio-circle-size: var(--lmvz-global-s18, 18px); --radio-dot-size: 0.5rem; --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419); --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc); --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454); --radio-easing: var(--lmvz-global-easing-default, ease); --radio-duration: 0.2s; display: flex; align-items: center; gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: clip; cursor: pointer; background-color: transparent; position: relative; transition: background-color var(--radio-duration) var(--radio-easing); } input.sc-lmvz-radio { position: absolute; inset-block-start: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); inset-inline-start: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); opacity: 0; width: var(--radio-circle-size); height: var(--radio-circle-size); margin: 0; cursor: pointer; z-index: 1; } .circle.sc-lmvz-radio { width: var(--radio-circle-size); height: var(--radio-circle-size); border-radius: 50%; border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color); background-color: var(--radio-bg); pointer-events: none; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: border-color var(--radio-duration) var(--radio-easing); } .dot.sc-lmvz-radio { width: var(--radio-dot-size); height: var(--radio-dot-size); border-radius: 50%; background-color: var(--radio-dot-color); } .content.sc-lmvz-radio { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; } label.sc-lmvz-radio { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--radio-label-color); cursor: pointer; transition: color var(--radio-duration) var(--radio-easing); } .helper-text.sc-lmvz-radio { display: block; font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router); color: var(--radio-helper-color); margin-block-start: 2px; } .helper-text.sc-lmvz-radio:empty { display: none; } @media (hover: hover) { .sc-lmvz-radio-h:hover .circle.sc-lmvz-radio { border-color: var(--radio-border-color-hover); } .sc-lmvz-radio-h:hover { background-color: var(--radio-wrapper-bg-hover); } } .sc-lmvz-radio-h:active { background-color: var(--radio-wrapper-bg-active); } [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: var(--radio-border-color-checked); } [checked].sc-lmvz-radio-h label.sc-lmvz-radio { color: var(--radio-label-color-checked); } [error].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: var(--radio-border-color-error); } [error].sc-lmvz-radio-h .helper-text.sc-lmvz-radio { color: var(--lmvz-semantic-color-status-on-danger, #a31419); } [disabled].sc-lmvz-radio-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } @media (forced-colors: active) { .circle.sc-lmvz-radio { forced-color-adjust: auto; border-color: ButtonText; background-color: Field; } [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: Highlight; } .dot.sc-lmvz-radio { background-color: ButtonText; } [checked].sc-lmvz-radio-h .dot.sc-lmvz-radio { background-color: HighlightText; } }`;
170
170
 
171
171
  const focusWithinCss = () => `.sc-lmvz-radio-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-radio-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
172
172
 
@@ -2,10 +2,10 @@
2
2
 
3
3
  var index = require('./index-TGsVZNDP.js');
4
4
  var ariaValidationController = require('./aria-validation-controller-BC0Eaiv4.js');
5
- var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
5
+ var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
6
6
  require('./aria-loader-DWUVcapD.js');
7
7
 
8
- const lmvzSelectCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-select-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --lmvz-internal-select-floating-label-top-offset: 0.375rem; padding-top: var(--lmvz-internal-select-floating-label-top-offset); --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --lmvz-select-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --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.61rem + 0.06vw, 0.69rem)); --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, #e52a31); } .select-wrapper.sc-lmvz-select { position: relative; height: var(--lmvz-select-height); } label.sc-lmvz-select { position: absolute; top: 50%; left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-label-color); line-height: normal; white-space: nowrap; pointer-events: none; z-index: 2; transform: translateY(-50%); transform-origin: left top; transition: top 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select { opacity: 0; padding: 0; } label.floating-label.sc-lmvz-select { top: var(--lmvz-select-label-top-offset); transform: translateY(0) scale(0.85); left: calc(var(--lmvz-select-padding-x) - 2px); background-color: var(--lmvz-select-bg); padding: 0 var(--lmvz-select-label-minimized-padding-x); opacity: 1; font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select { color: var(--lmvz-select-error-color); margin-left: 2px; display: inline-block; line-height: 0; vertical-align: middle; } div[aria-hidden].sc-lmvz-select { display: flex; align-items: center; gap: var(--lmvz-select-gap); height: 100%; padding: 0 var(--lmvz-select-padding-x); border-radius: var(--lmvz-select-radius); background-color: var(--lmvz-select-bg); border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color); box-sizing: border-box; cursor: pointer; position: relative; z-index: 1; transition: border-color 0.15s ease; } .sc-lmvz-select-h:not([disabled] .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select, [highlighted]).sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select { border-color: var(--lmvz-select-border-color-hover); } [highlighted].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select { background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); border-color: var(--lmvz-semantic-color-border-active, #0f8acc); color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h label.floating-label.sc-lmvz-select { background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .select-wrapper.sc-lmvz-select:focus-within div[aria-hidden].sc-lmvz-select { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { flex: 1 0 0; font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--lmvz-select-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-lmvz-select-h:not([highlighted]) .select-wrapper.has-value.sc-lmvz-select div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); height: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); flex-shrink: 0; } select.sc-lmvz-select { appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; border: none; background: transparent; margin: 0; padding: 0; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select { opacity: var(--lmvz-select-disabled-opacity); pointer-events: none; cursor: not-allowed; } [role='status'].sc-lmvz-select { margin-top: 4px; padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-helper-color); line-height: normal; } [size='small'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='small'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem)); } [size='small'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); height: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='large'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem)); } [size='large'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } [size='large'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); }`;
8
+ const lmvzSelectCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-select-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --lmvz-internal-select-floating-label-top-offset: 0.375rem; padding-top: var(--lmvz-internal-select-floating-label-top-offset); --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --lmvz-select-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-select-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1); --lmvz-select-label-minimized-padding-x: 4px; --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419); } .select-wrapper.sc-lmvz-select { position: relative; height: var(--lmvz-select-height); } label.sc-lmvz-select { position: absolute; top: 50%; left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-label-color); line-height: normal; white-space: nowrap; pointer-events: none; z-index: 2; transform: translateY(-50%); transform-origin: left top; transition: top 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select { opacity: 0; padding: 0; } label.floating-label.sc-lmvz-select { top: var(--lmvz-select-label-top-offset); transform: translateY(0) scale(0.85); left: calc(var(--lmvz-select-padding-x) - 2px); background-color: var(--lmvz-select-bg); padding: 0 var(--lmvz-select-label-minimized-padding-x); opacity: 1; font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select { color: var(--lmvz-select-error-color); margin-left: 2px; display: inline-block; line-height: 0; vertical-align: middle; } div[aria-hidden].sc-lmvz-select { display: flex; align-items: center; gap: var(--lmvz-select-gap); height: 100%; padding: 0 var(--lmvz-select-padding-x); border-radius: var(--lmvz-select-radius); background-color: var(--lmvz-select-bg); border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color); box-sizing: border-box; cursor: pointer; position: relative; z-index: 1; transition: border-color 0.15s ease; } .sc-lmvz-select-h:not([disabled] .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select, [highlighted]).sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select { border-color: var(--lmvz-select-border-color-hover); } [highlighted].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select { background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); border-color: var(--lmvz-semantic-color-border-active, #0f8acc); color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h label.floating-label.sc-lmvz-select { background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .select-wrapper.sc-lmvz-select:focus-within div[aria-hidden].sc-lmvz-select { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { flex: 1 0 0; font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--lmvz-select-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-lmvz-select-h:not([highlighted]) .select-wrapper.has-value.sc-lmvz-select div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); height: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); flex-shrink: 0; } select.sc-lmvz-select { appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; border: none; background: transparent; margin: 0; padding: 0; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select { opacity: var(--lmvz-select-disabled-opacity); pointer-events: none; cursor: not-allowed; } [role='status'].sc-lmvz-select { margin-top: 4px; padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-helper-color); line-height: normal; } [size='small'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='small'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='small'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); height: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='large'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } [size='large'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); }`;
9
9
 
10
10
  let selectIdCounter = 0;
11
11
  const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
@@ -5,7 +5,7 @@ var warning = require('./warning-WEX_ABWL.js');
5
5
 
6
6
  const alertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0Nl8zODApIj4KPHBhdGggZD0iTTEyIDUuMjVWMTMuMTI1TTIyLjUgMTJDMjIuNSAxNy43OTkgMTcuNzk5IDIyLjUgMTIgMjIuNUM2LjIwMTAxIDIyLjUgMS41IDE3Ljc5OSAxLjUgMTJDMS41IDYuMjAxMDEgNi4yMDEwMSAxLjUgMTIgMS41QzE3Ljc5OSAxLjUgMjIuNSA2LjIwMTAxIDIyLjUgMTJaTTEzLjEyNSAxNi44NzVDMTMuMTI1IDE3LjQ5NjMgMTIuNjIxMyAxOCAxMiAxOEMxMS4zNzg3IDE4IDEwLjg3NSAxNy40OTYzIDEwLjg3NSAxNi44NzVDMTAuODc1IDE2LjI1MzcgMTEuMzc4NyAxNS43NSAxMiAxNS43NUMxMi42MjEzIDE1Ljc1IDEzLjEyNSAxNi4yNTM3IDEzLjEyNSAxNi44NzVaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM0Nl8zODAiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==';
7
7
 
8
- const lmvzSnackbarCss = () => `:host{position:fixed;bottom:var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));left:50%;transform:translateX(-50%);z-index:2147483000;width:max-content;border:1px solid transparent;border-radius:var(--lmvz-semantic-border-radius-lg, 14px);padding:var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));pointer-events:auto;font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);--lmvz-component-color:var(--lmvz-semantic-color-status-on-success, #37867c);color:var(--lmvz-component-color)}:host([status='success']){background-color:var(--lmvz-semantic-color-status-success, #f1f9f8);border-color:var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3);--lmvz-component-color:var(--lmvz-semantic-color-status-on-success, #37867c)}:host([status='warning']){background-color:var(--lmvz-semantic-color-status-warning, #fffbf0);border-color:var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);--lmvz-component-color:var(--lmvz-semantic-color-status-on-warning, #7a5e00)}:host([status='error']){background-color:var(--lmvz-semantic-color-status-danger, #fdf1f2);border-color:var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);--lmvz-component-color:var(--lmvz-semantic-color-status-on-danger, #e52a31)}lmvz-icon{flex-shrink:0}.message{white-space:nowrap}@keyframes snackbar-enter{from{transform:translateX(-50%) translateY(100%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}@keyframes snackbar-leave{from{transform:translateX(-50%) translateY(0);opacity:1}to{transform:translateX(-50%) translateY(100%);opacity:0}}:host(.entering){animation:snackbar-enter 200ms cubic-bezier(0, 0, 0.2, 1) forwards}:host(.leaving){pointer-events:none;animation:snackbar-leave 200ms cubic-bezier(0.4, 0, 1, 1) forwards}@media (prefers-reduced-motion: reduce){:host(.entering){animation:none;transition:opacity 80ms ease;opacity:1}:host(.leaving){pointer-events:none;animation:none;transition:opacity 80ms ease;opacity:0}}`;
8
+ const lmvzSnackbarCss = () => `:host{position:fixed;bottom:var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));left:50%;transform:translateX(-50%);z-index:2147483000;width:max-content;border:1px solid transparent;border-radius:var(--lmvz-semantic-border-radius-lg, 14px);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));display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));pointer-events:auto;font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);--lmvz-component-color:var(--lmvz-semantic-color-status-on-success, #28625b);color:var(--lmvz-component-color)}:host([status='success']){background-color:var(--lmvz-semantic-color-status-success, #c2e6e1);border-color:var(--lmvz-semantic-color-status-on-success-subtle, #4eb6a9);--lmvz-component-color:var(--lmvz-semantic-color-status-on-success, #28625b)}:host([status='warning']){background-color:var(--lmvz-semantic-color-status-warning, #ffeeb8);border-color:var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);--lmvz-component-color:var(--lmvz-semantic-color-status-on-warning, #614a00)}:host([status='error']){background-color:var(--lmvz-semantic-color-status-danger, #fbdfe0);border-color:var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b);--lmvz-component-color:var(--lmvz-semantic-color-status-on-danger, #a31419)}lmvz-icon{flex-shrink:0}.message{white-space:nowrap}@keyframes snackbar-enter{from{transform:translateX(-50%) translateY(100%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}@keyframes snackbar-leave{from{transform:translateX(-50%) translateY(0);opacity:1}to{transform:translateX(-50%) translateY(100%);opacity:0}}:host(.entering){animation:snackbar-enter 200ms cubic-bezier(0, 0, 0.2, 1) forwards}:host(.leaving){pointer-events:none;animation:snackbar-leave 200ms cubic-bezier(0.4, 0, 1, 1) forwards}@media (prefers-reduced-motion: reduce){:host(.entering){animation:none;transition:opacity 80ms ease;opacity:1}:host(.leaving){pointer-events:none;animation:none;transition:opacity 80ms ease;opacity:0}}`;
9
9
 
10
10
  const STATUS_SVG = {
11
11
  success: warning.infoSvg,
@@ -2,7 +2,7 @@
2
2
 
3
3
  var index = require('./index-TGsVZNDP.js');
4
4
 
5
- const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: inline-block; flex: none; } :host([disabled]) { cursor: not-allowed; pointer-events: none; } button { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lmvz-component-component-spacing-0-default, 4px); padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem)); padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border: none; border-radius: var(--lmvz-semantic-border-radius-round, 999px); background: var(--lmvz-tab-background); color: var(--lmvz-tab-color); font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); z-index: 1; } button:disabled { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } button:hover { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button { padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator { --lmvz-tab-indicator-size: 4px; position: absolute; background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); opacity: 0; transition: opacity 0.15s ease; inset-block-end: 0; inset-inline: 0; block-size: var(--lmvz-tab-indicator-size); border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--lmvz-tab-indicator-size); border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator { opacity: 1; } :host([vertical]) button { border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator { inset-block: 0; inset-inline: 0 auto; inline-size: var(--lmvz-tab-indicator-size); block-size: auto; border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0; background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) { --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem)); } .label { display: contents; } `;
5
+ const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: inline-block; flex: none; } :host([disabled]) { cursor: not-allowed; pointer-events: none; } button { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lmvz-component-component-spacing-0-default, 4px); padding-top: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-bottom: var(--lmvz-dimension-14-8, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem)); padding-inline: var(--lmvz-dimension-24-16, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border: none; border-radius: var(--lmvz-semantic-border-radius-round, 999px); background: var(--lmvz-tab-background); color: var(--lmvz-tab-color); font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); z-index: 1; } button:disabled { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } button:hover { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button { padding-top: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); padding-bottom: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); padding-inline: var(--lmvz-dimension-48-40, clamp(2.5rem, 2.38rem + 0.52vw, 3rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator { --lmvz-tab-indicator-size: 4px; position: absolute; background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); opacity: 0; transition: opacity 0.15s ease; inset-block-end: 0; inset-inline: 0; block-size: var(--lmvz-tab-indicator-size); border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--lmvz-tab-indicator-size); border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator { opacity: 1; } :host([vertical]) button { border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator { inset-block: 0; inset-inline: 0 auto; inline-size: var(--lmvz-tab-indicator-size); block-size: auto; border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0; background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) { --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem)); } .label { display: contents; } `;
6
6
 
7
7
  const LmvzTab = class {
8
8
  constructor(hostRef) {
@@ -1,11 +1,11 @@
1
1
  'use strict';
2
2
 
3
3
  var index = require('./index-TGsVZNDP.js');
4
- var listKeyboardController = require('./list-keyboard-controller-Dm5S_l0D.js');
5
- var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
6
- require('./element.util-Dbyc8yUG.js');
4
+ var directionalFocusController = require('./directional-focus-controller-DBat-oF7.js');
5
+ var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
6
+ require('./element.util-CRS_YJ59.js');
7
7
 
8
- const lmvzTabsCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: inline-block; } .tablist { display: inline-flex; flex-direction: row; background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: auto hidden; scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; } :host([has-icon-tabs]) .tablist { gap: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); background: none; border-radius: 0; } :host([orientation='vertical']) .tablist { flex-direction: column; overflow: visible auto; } ::slotted([role='tabpanel']) { display: block; } ::slotted([role='tabpanel'][hidden]) { display: none; } `;
8
+ const lmvzTabsCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: inline-block; } .tablist { display: inline-flex; flex-direction: row; background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: auto hidden; scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; } :host([has-icon-tabs]) .tablist { gap: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); background: none; border-radius: 0; } :host([orientation='vertical']) .tablist { flex-direction: column; overflow: visible auto; } ::slotted([role='tabpanel']) { display: block; } ::slotted([role='tabpanel'][hidden]) { display: none; } `;
9
9
 
10
10
  let tabsIdCounter = 0;
11
11
  const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
@@ -13,7 +13,7 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
13
13
  instanceId = ++tabsIdCounter;
14
14
  tabSlotEl;
15
15
  panelSlotEl;
16
- focusController = new listKeyboardController.DirectionalFocusController(this, {
16
+ focusController = new directionalFocusController.DirectionalFocusController(this, {
17
17
  orientation: 'horizontal',
18
18
  manageTabIndex: true,
19
19
  enableHomeAndEnd: true,
@@ -51,6 +51,9 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
51
51
  this.syncFocusTargets();
52
52
  this.syncTabOrientation();
53
53
  }
54
+ async initFocus() {
55
+ this.focusController.initFocus();
56
+ }
54
57
  async activateTab(value) {
55
58
  const tab = this.findTabByValue(value);
56
59
  if (!tab || this.isTabDisabled(tab))
@@ -114,7 +117,7 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
114
117
  syncOrientation() {
115
118
  this.removeController(this.focusController);
116
119
  this.focusController.hostDisconnected?.();
117
- this.focusController = new listKeyboardController.DirectionalFocusController(this, {
120
+ this.focusController = new directionalFocusController.DirectionalFocusController(this, {
118
121
  orientation: this.orientation,
119
122
  manageTabIndex: true,
120
123
  enableHomeAndEnd: true,
@@ -240,7 +243,7 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
240
243
  this.selectTab(value);
241
244
  };
242
245
  render() {
243
- return (index.h(index.Host, { key: '2f681e7bfc21bd513bcb994f92c893bbc03ff713', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: '456ce3d11ccacd3e79995ffa643bb164127344b3', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: 'e4e4c698dde6416e0ba4d319e64d9ba3a2f79a19', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '3b90c8e7006dbf75e22b8377a18ac47488b1184f', part: "panels-container", class: "panels-container" }, index.h("slot", { key: '4cb4a9b04ab529a1bc7744a1893acf9a71c5c65e', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
246
+ return (index.h(index.Host, { key: '98df29f336a3ea47efa6c76a773de28c5174c718', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: '7e35ae180c4ebf2f5a82e0fad0977cd3c38ac659', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: '2520bc8b8988a60b37a067828ad237bf8dcfcc59', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: 'bd4a954b6caca2d9f2eb588f58590821ec4af888', part: "panels-container", class: "panels-container" }, index.h("slot", { key: 'b4dffff530328e6e4c8d305895ef4dd2d5952757', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
244
247
  }
245
248
  static get watchers() { return {
246
249
  "value": [{
@@ -2,12 +2,12 @@
2
2
 
3
3
  var index = require('./index-TGsVZNDP.js');
4
4
  var ariaValidationController = require('./aria-validation-controller-BC0Eaiv4.js');
5
- var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
6
- var stencil_util = require('./stencil.util-DxdYjVoH.js');
5
+ var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
6
+ var stencil_util = require('./stencil.util-CBrPLd-F.js');
7
7
  require('./aria-loader-DWUVcapD.js');
8
- require('./async.util-BQ60l-WC.js');
8
+ require('./async.util-Dnl6c82X.js');
9
9
 
10
- const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-toggle-h { display: inline-flex; align-items: center; gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); cursor: pointer; background-color: transparent; user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover { background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled][checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled].sc-lmvz-toggle-h { cursor: not-allowed; opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; } .track.sc-lmvz-toggle { position: relative; flex-shrink: 0; width: var(--lmvz-global-s32, 32px); height: var(--lmvz-global-s20, 20px); border-radius: var(--lmvz-semantic-border-radius-round, 999px); background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: inherit; } .thumb.sc-lmvz-toggle { position: absolute; width: var(--lmvz-global-s13, 13px); height: var(--lmvz-global-s13, 13px); border-radius: 50%; background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); top: 50%; transform: translateY(-50%); left: var(--lmvz-global-s4, 4px); transition: left 0.2s ease, background-color 0.2s ease; pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle { left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px)); background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--lmvz-semantic-color-on-surface-primary, #000000); cursor: pointer; }`;
10
+ const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-toggle-h { display: inline-flex; align-items: center; gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); cursor: pointer; background-color: transparent; user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover { background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled][checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled].sc-lmvz-toggle-h { cursor: not-allowed; opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; } .track.sc-lmvz-toggle { position: relative; flex-shrink: 0; width: var(--lmvz-global-s32, 32px); height: var(--lmvz-global-s20, 20px); border-radius: var(--lmvz-semantic-border-radius-round, 999px); background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-hover, #a1a1a1); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: inherit; } .thumb.sc-lmvz-toggle { position: absolute; width: var(--lmvz-global-s13, 13px); height: var(--lmvz-global-s13, 13px); border-radius: 50%; background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); top: 50%; transform: translateY(-50%); left: var(--lmvz-global-s4, 4px); transition: left 0.2s ease, background-color 0.2s ease; pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle { left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px)); background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--lmvz-semantic-color-on-surface-primary, #000000); cursor: pointer; }`;
11
11
 
12
12
  const focusWithinCss = () => `.sc-lmvz-toggle-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-toggle-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
13
13