@lmvz-ds/components 0.29.0 → 0.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (225) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/cjs/{ds.constants-JXqgKnXL.js → ds.constants-CKeXfK-s.js} +12 -0
  3. package/cjs/{component-C7cavwmZ.js → element.util-Cq4y-_iX.js} +42 -31
  4. package/cjs/index.cjs.js +8 -1
  5. package/cjs/{list-keyboard-controller-CzZdPBeH.js → list-keyboard-controller-StN6Yn8W.js} +13 -8
  6. package/cjs/lmvz-action-list.cjs.entry.js +79 -0
  7. package/cjs/lmvz-button-group.cjs.entry.js +43 -47
  8. package/cjs/lmvz-button_2.cjs.entry.js +10 -8
  9. package/cjs/lmvz-card.cjs.entry.js +2 -2
  10. package/cjs/lmvz-checkbox.cjs.entry.js +2 -2
  11. package/cjs/lmvz-chip.cjs.entry.js +3 -3
  12. package/cjs/lmvz-components.cjs.js +1 -1
  13. package/cjs/lmvz-header_2.cjs.entry.js +3 -3
  14. package/cjs/lmvz-input.cjs.entry.js +6 -6
  15. package/cjs/lmvz-link.cjs.entry.js +69 -0
  16. package/cjs/lmvz-menuitem.cjs.entry.js +2 -2
  17. package/cjs/lmvz-message.cjs.entry.js +2 -2
  18. package/cjs/lmvz-modal.cjs.entry.js +5 -5
  19. package/cjs/lmvz-radio.cjs.entry.js +3 -3
  20. package/cjs/lmvz-select.cjs.entry.js +2 -2
  21. package/cjs/lmvz-snackbar.cjs.entry.js +2 -2
  22. package/cjs/lmvz-spinner.cjs.entry.js +1 -1
  23. package/cjs/lmvz-tab.cjs.entry.js +2 -2
  24. package/cjs/lmvz-tabs.cjs.entry.js +4 -4
  25. package/cjs/lmvz-toggle.cjs.entry.js +5 -5
  26. package/cjs/loader.cjs.js +1 -1
  27. package/cjs/stencil.util-DzvzXSwk.js +25 -0
  28. package/collection/api/ds.constants.js +1 -0
  29. package/collection/collection-manifest.json +2 -0
  30. package/collection/components/lmvz-action-list/lmvz-action-list.css +93 -0
  31. package/collection/components/lmvz-action-list/lmvz-action-list.js +104 -0
  32. package/collection/components/lmvz-button/lmvz-button.css +67 -44
  33. package/collection/components/lmvz-button/lmvz-button.js +28 -7
  34. package/collection/components/lmvz-button-group/lmvz-button-group.css +35 -3
  35. package/collection/components/lmvz-button-group/lmvz-button-group.js +54 -38
  36. package/collection/components/lmvz-card/lmvz-card.css +66 -47
  37. package/collection/components/lmvz-card/lmvz-card.js +2 -2
  38. package/collection/components/lmvz-checkbox/lmvz-checkbox.css +8 -5
  39. package/collection/components/lmvz-checkbox/lmvz-checkbox.js +2 -2
  40. package/collection/components/lmvz-chip/lmvz-chip.css +4 -2
  41. package/collection/components/lmvz-chip/lmvz-chip.js +7 -7
  42. package/collection/components/lmvz-header/lmvz-header.js +2 -2
  43. package/collection/components/lmvz-icon/lmvz-icon.js +2 -2
  44. package/collection/components/lmvz-input/lmvz-input.css +2 -2
  45. package/collection/components/lmvz-input/lmvz-input.js +5 -5
  46. package/collection/components/lmvz-link/lmvz-link.css +44 -0
  47. package/collection/components/lmvz-link/lmvz-link.js +183 -0
  48. package/collection/components/lmvz-menuitem/lmvz-menuitem.css +2 -1
  49. package/collection/components/lmvz-menuitem/lmvz-menuitem.js +2 -2
  50. package/collection/components/lmvz-message/lmvz-message.css +2 -1
  51. package/collection/components/lmvz-message/lmvz-message.js +1 -1
  52. package/collection/components/lmvz-modal/lmvz-modal.css +11 -2
  53. package/collection/components/lmvz-modal/lmvz-modal.js +3 -3
  54. package/collection/components/lmvz-radio/lmvz-radio.css +4 -2
  55. package/collection/components/lmvz-radio/lmvz-radio.js +2 -2
  56. package/collection/components/lmvz-select/lmvz-select.css +4 -3
  57. package/collection/components/lmvz-select/lmvz-select.js +2 -2
  58. package/collection/components/lmvz-snackbar/lmvz-snackbar.css +2 -1
  59. package/collection/components/lmvz-snackbar/lmvz-snackbar.js +1 -1
  60. package/collection/components/lmvz-spinner/lmvz-spinner.js +1 -1
  61. package/collection/components/lmvz-tab/lmvz-tab.css +11 -3
  62. package/collection/components/lmvz-tab/lmvz-tab.js +1 -1
  63. package/collection/components/lmvz-tabs/lmvz-tabs.css +7 -0
  64. package/collection/components/lmvz-tabs/lmvz-tabs.js +2 -2
  65. package/collection/components/lmvz-toggle/lmvz-toggle.css +2 -1
  66. package/collection/components/lmvz-toggle/lmvz-toggle.js +3 -3
  67. package/collection/index.js +1 -1
  68. package/collection/integration/header-integration/header-integration.js +1 -1
  69. package/collection/styles/fragments/_focus-within.css +2 -2
  70. package/collection/utils/aria/aria.constants.js +53 -0
  71. package/collection/utils/aria/list-keyboard-controller.js +12 -7
  72. package/collection/utils/async/async.util.js +62 -0
  73. package/collection/utils/data/event.utilt.js +19 -0
  74. package/collection/utils/data/number.util.js +6 -0
  75. package/collection/utils/data/object.util.js +20 -0
  76. package/collection/utils/data/time.util.js +3 -0
  77. package/collection/utils/element/element.util.js +117 -0
  78. package/collection/utils/{assets.js → stencil/assets.js} +1 -1
  79. package/collection/utils/stencil/stencil.util.js +12 -0
  80. package/components/index.d.ts +4 -0
  81. package/components/index.d.ts.bak +4 -0
  82. package/components/index.js +1 -1
  83. package/components/lmvz-action-list.d.ts +11 -0
  84. package/components/lmvz-action-list.d.ts.bak +11 -0
  85. package/components/lmvz-action-list.js +1 -0
  86. package/components/lmvz-button-group.js +1 -1
  87. package/components/lmvz-button.js +1 -1
  88. package/components/lmvz-card.js +1 -1
  89. package/components/lmvz-checkbox.js +1 -1
  90. package/components/lmvz-chip.js +1 -1
  91. package/components/lmvz-header.js +1 -1
  92. package/components/lmvz-icon.js +1 -1
  93. package/components/lmvz-input.js +1 -1
  94. package/components/lmvz-link.d.ts +11 -0
  95. package/components/lmvz-link.d.ts.bak +11 -0
  96. package/components/lmvz-link.js +1 -0
  97. package/components/lmvz-menuitem.js +1 -1
  98. package/components/lmvz-message.js +1 -1
  99. package/components/lmvz-modal.js +1 -1
  100. package/components/lmvz-radio.js +1 -1
  101. package/components/lmvz-select.js +1 -1
  102. package/components/lmvz-snackbar.js +1 -1
  103. package/components/lmvz-spinner.js +1 -1
  104. package/components/lmvz-tab.js +1 -1
  105. package/components/lmvz-tabs.js +1 -1
  106. package/components/lmvz-toggle.js +1 -1
  107. package/components/p-B0H9qIwE.js +1 -0
  108. package/components/p-B4m1n4et.js +1 -0
  109. package/components/p-CJRqhXjK.js +1 -0
  110. package/components/p-CxfT9IA1.js +1 -0
  111. package/components/{p-CXakymyP.js → p-DJ90327O.js} +1 -1
  112. package/components/p-DeO5Vbxh.js +1 -0
  113. package/components/p-DuEtnKRj.js +1 -0
  114. package/esm/ds.constants-DuEtnKRj.js +18 -0
  115. package/esm/{component-DOTK1OW3.js → element.util-CxfT9IA1.js} +37 -31
  116. package/esm/index.js +1 -1
  117. package/esm/{list-keyboard-controller-Coi8XfUH.js → list-keyboard-controller-BKa9Kd2t.js} +12 -7
  118. package/esm/lmvz-action-list.entry.js +77 -0
  119. package/esm/lmvz-button-group.entry.js +35 -39
  120. package/esm/lmvz-button_2.entry.js +9 -7
  121. package/esm/lmvz-card.entry.js +2 -2
  122. package/esm/lmvz-checkbox.entry.js +2 -2
  123. package/esm/lmvz-chip.entry.js +3 -3
  124. package/esm/lmvz-components.js +1 -1
  125. package/esm/lmvz-header_2.entry.js +3 -3
  126. package/esm/lmvz-input.entry.js +5 -5
  127. package/esm/lmvz-link.entry.js +67 -0
  128. package/esm/lmvz-menuitem.entry.js +2 -2
  129. package/esm/lmvz-message.entry.js +2 -2
  130. package/esm/lmvz-modal.entry.js +3 -3
  131. package/esm/lmvz-radio.entry.js +3 -3
  132. package/esm/lmvz-select.entry.js +2 -2
  133. package/esm/lmvz-snackbar.entry.js +2 -2
  134. package/esm/lmvz-spinner.entry.js +1 -1
  135. package/esm/lmvz-tab.entry.js +2 -2
  136. package/esm/lmvz-tabs.entry.js +4 -4
  137. package/esm/lmvz-toggle.entry.js +4 -4
  138. package/esm/loader.js +1 -1
  139. package/esm/stencil.util-CJRqhXjK.js +23 -0
  140. package/hydrate/index.js +586 -396
  141. package/hydrate/index.mjs +586 -396
  142. package/lmvz-components/index.esm.js +1 -1
  143. package/lmvz-components/lmvz-components.esm.js +1 -1
  144. package/lmvz-components/p-1ce90ea7.entry.js +1 -0
  145. package/lmvz-components/{p-4484ab62.entry.js → p-24125bcf.entry.js} +1 -1
  146. package/lmvz-components/p-25a78ead.entry.js +1 -0
  147. package/lmvz-components/p-4072b2fb.entry.js +1 -0
  148. package/lmvz-components/p-48109e1d.entry.js +1 -0
  149. package/lmvz-components/{p-3b3e532f.entry.js → p-582f44ff.entry.js} +1 -1
  150. package/lmvz-components/p-592d509b.entry.js +1 -0
  151. package/lmvz-components/{p-7fd7e04c.entry.js → p-6f61c24d.entry.js} +1 -1
  152. package/lmvz-components/{p-5fcc6f84.entry.js → p-703b10b5.entry.js} +1 -1
  153. package/lmvz-components/p-74c7521c.entry.js +1 -0
  154. package/lmvz-components/{p-7e9938e7.entry.js → p-80a26307.entry.js} +1 -1
  155. package/lmvz-components/p-8e1f66dd.entry.js +1 -0
  156. package/lmvz-components/p-947e1fe6.entry.js +1 -0
  157. package/lmvz-components/p-B4m1n4et.js +1 -0
  158. package/lmvz-components/p-CJRqhXjK.js +1 -0
  159. package/lmvz-components/p-CxfT9IA1.js +1 -0
  160. package/lmvz-components/p-DuEtnKRj.js +1 -0
  161. package/lmvz-components/{p-2981a238.entry.js → p-b79af711.entry.js} +1 -1
  162. package/lmvz-components/p-c00f0d96.entry.js +1 -0
  163. package/lmvz-components/p-c0d05a97.entry.js +1 -0
  164. package/lmvz-components/p-c3e8092e.entry.js +1 -0
  165. package/lmvz-components/{p-fe7999d4.entry.js → p-ed3c2b13.entry.js} +1 -1
  166. package/lmvz-components/{p-af4e26da.entry.js → p-fa2cd315.entry.js} +1 -1
  167. package/manifest.json +336 -14
  168. package/package.json +9 -1
  169. package/types/api/ds.constants.d.ts +1 -37
  170. package/types/api/ds.types.d.ts +68 -1
  171. package/types/components/lmvz-action-list/lmvz-action-list.d.ts +15 -0
  172. package/types/components/lmvz-button/lmvz-button.d.ts +6 -3
  173. package/types/components/lmvz-button-group/lmvz-button-group.d.ts +2 -0
  174. package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +1 -1
  175. package/types/components/lmvz-chip/lmvz-chip.d.ts +2 -2
  176. package/types/components/lmvz-header/lmvz-header.d.ts +1 -1
  177. package/types/components/lmvz-icon/lmvz-icon.d.ts +1 -1
  178. package/types/components/lmvz-input/lmvz-input.d.ts +1 -1
  179. package/types/components/lmvz-link/lmvz-link.d.ts +13 -0
  180. package/types/components/lmvz-menuitem/lmvz-menuitem.d.ts +1 -1
  181. package/types/components/lmvz-modal/lmvz-modal.d.ts +1 -1
  182. package/types/components/lmvz-radio/lmvz-radio.d.ts +1 -1
  183. package/types/components/lmvz-select/lmvz-select.d.ts +1 -1
  184. package/types/components/lmvz-tabs/lmvz-tabs.d.ts +1 -1
  185. package/types/components/lmvz-toggle/lmvz-toggle.d.ts +1 -1
  186. package/types/components.d.ts +153 -2
  187. package/types/index.d.ts +1 -1
  188. package/types/utils/aria/aria-validation-controller.d.ts +3 -3
  189. package/types/utils/aria/aria.constants.d.ts +1 -0
  190. package/types/utils/aria/element-activation-controller.d.ts +1 -1
  191. package/types/utils/aria/list-keyboard-controller.d.ts +4 -1
  192. package/types/utils/async/async.util.d.ts +8 -0
  193. package/types/utils/data/event.utilt.d.ts +4 -0
  194. package/types/utils/data/number.util.d.ts +2 -0
  195. package/types/utils/data/object.util.d.ts +5 -0
  196. package/types/utils/data/time.util.d.ts +1 -0
  197. package/types/utils/element/element.util.d.ts +21 -0
  198. package/types/utils/radio/radio-group-controller.d.ts +1 -1
  199. package/types/utils/{reactive-controller-host.d.ts → stencil/reactive-controller-host.d.ts} +1 -1
  200. package/types/utils/stencil/stencil.util.d.ts +6 -0
  201. package/collection/utils/component.js +0 -270
  202. package/collection/utils/http.js +0 -21
  203. package/collection/utils/http.unit.js +0 -47
  204. package/components/p-BxPuC-EQ.js +0 -1
  205. package/components/p-CtaMrBNE.js +0 -1
  206. package/components/p-DBZE-Jyu.js +0 -1
  207. package/components/p-DOTK1OW3.js +0 -1
  208. package/esm/ds.constants-DWePb-zu.js +0 -13
  209. package/lmvz-components/p-087853c3.entry.js +0 -1
  210. package/lmvz-components/p-35b5efdc.entry.js +0 -1
  211. package/lmvz-components/p-4ba3f830.entry.js +0 -1
  212. package/lmvz-components/p-83ab106c.entry.js +0 -1
  213. package/lmvz-components/p-87d207e7.entry.js +0 -1
  214. package/lmvz-components/p-912776f8.entry.js +0 -1
  215. package/lmvz-components/p-CtaMrBNE.js +0 -1
  216. package/lmvz-components/p-DOTK1OW3.js +0 -1
  217. package/lmvz-components/p-DWePb-zu.js +0 -1
  218. package/lmvz-components/p-ca497e57.entry.js +0 -1
  219. package/lmvz-components/p-d8b55d55.entry.js +0 -1
  220. package/lmvz-components/p-f030f6f6.entry.js +0 -1
  221. package/types/utils/component.d.ts +0 -33
  222. package/types/utils/http.d.ts +0 -26
  223. package/types/utils/http.unit.d.ts +0 -1
  224. /package/collection/utils/{reactive-controller-host.js → stencil/reactive-controller-host.js} +0 -0
  225. /package/types/utils/{assets.d.ts → stencil/assets.d.ts} +0 -0
@@ -5,7 +5,7 @@ var ariaValidationController = require('./aria-validation-controller-Z4TtOp2l.js
5
5
  var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
6
6
  require('./aria-loader-BRo2FTGh.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); outline-offset: var(--lmvz-ds-outline-offset); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { flex: 1 0 0; font: var(--lmvz-typography-body-md-strong); 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, #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)); }`;
9
9
 
10
10
  let selectIdCounter = 0;
11
11
  const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
@@ -59,7 +59,7 @@ const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
59
59
  render() {
60
60
  const hasValue = this.hasValue;
61
61
  const shouldShowLabel = hasValue;
62
- return (index.h(index.Host, { key: 'ce6cbd48640762e2d2c41f939c2bd0d400ada7a6', "data-highlighted": String(this.highlighted) }, index.h("div", { key: 'b89edad5195bfe39e1a236e67cd03ea61d20556e', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, index.h("label", { key: '29b4b78a8dd6e67107c6ae3bcfbf105f5f70de32', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '0a6f4af49a0e842470b6babace9201a995dc625d', "aria-hidden": "true" }, " *")), index.h("div", { key: '277e73e2cc7aca046c66c6516e48cbcdec86b544', "aria-hidden": "true" }, index.h("span", { key: '763dbccfb4624f4996fb7f412e8792a1cc006f34' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '1881c6bdbb577aed043fb19069398ca096c4cbc9', "aria-hidden": "true" }, " *")), index.h("span", { key: 'bcb3202de388bccb82882af748c7275327bb615b' }, index.h("svg", { key: '6a06e9eacb4c1e726b06b26243541c99f8b4ca1f', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { key: '4984bd9b193183b03ab4858b4e8bea1ec3d2f471', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("select", { key: '24b57f7ad6a3f2c010485ecd0e7aa4749d204320', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && index.h("option", { key: '8fc22471bb91bb1ec62bc49ec2c07bf3abb39b5c', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: '5273b6fae866178fa7c334c7d12d228634f65279' }))), this.helperText && index.h("div", { key: 'd3b93cac08ca5e74f335d6d867ac587036810482', role: "status" }, this.helperText)));
62
+ return (index.h(index.Host, { key: 'c753006bdabf1723fa9ff61eb35f58d5bef3157b', "data-highlighted": String(this.highlighted) }, index.h("div", { key: '6b06056fd48ef4f837cbe17383756e3726c68f90', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, index.h("label", { key: '819901582fc449566a112cd4544fa0af903a7011', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '14ad70c1cf1a96c7398698fa86baeadd5fe4257b', "aria-hidden": "true" }, " *")), index.h("div", { key: '589c6946bee6e320a36dfa0ed765ff9e02af4c2f', "aria-hidden": "true" }, index.h("span", { key: '04444223ed66a5ddff3eb7bd581cf5a7e615cf6b' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '9631d4a655514957a4564be939d8bd16c3a036f0', "aria-hidden": "true" }, " *")), index.h("span", { key: '3950abf6ee9528adb5895fe6bc88be67b39d458e' }, index.h("svg", { key: '98a0a380e9ca5044ca1fefb03b74bfc178974a60', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { key: '19fe8b40e315fabee982ba37fe2d397493429519', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("select", { key: '7480ff36ef3acfe10fb0122bfdf7feb5af406c67', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && index.h("option", { key: '5d00f696c2c4d7c35c180018a4c487cbb0229d37', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: '218fe11d224d7ca72c8555301d41d8878b6b34b4' }))), this.helperText && index.h("div", { key: 'edbb738590305f6724a590a3532fd9284a187866', role: "status" }, this.helperText)));
63
63
  }
64
64
  static get watchers() { return {
65
65
  "value": [{
@@ -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);--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-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}}`;
9
9
 
10
10
  const STATUS_SVG = {
11
11
  success: warning.infoSvg,
@@ -67,7 +67,7 @@ const LmvzSnackbar = class {
67
67
  this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
68
68
  };
69
69
  render() {
70
- return (index.h(index.Host, { key: '4018b33b7d4263c1e138217d5181231e3562a2ad', class: this.animationClass }, index.h("lmvz-icon", { key: '351f90e1fd9eb7b4f5e864bccd46a643cd158bf1', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), index.h("span", { key: 'fea43a01e328c7922d563e73256d7c3012b49fd9', class: "message" }, this.message), this.actionLabel && (index.h("lmvz-button", { key: '5ef8589a379ccbcfaf42197227dc95ba51c225fe', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
70
+ return (index.h(index.Host, { key: 'f207854371f8423ff8dc9b732d1dabe1ab06e0b1', class: this.animationClass }, index.h("lmvz-icon", { key: 'e0ffdd4c51d11f94aa33c5a9678a15e4162d4bdd', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), index.h("span", { key: 'fcce1cbef0597af7e86de7b33a4f8a40c09f0cc8', class: "message" }, this.message), this.actionLabel && (index.h("lmvz-button", { key: '3cdbd81ba0c9102d0539c913f530e2abfbed0fb6', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
71
71
  }
72
72
  static get watchers() { return {
73
73
  "status": [{
@@ -12,7 +12,7 @@ const LmvzSpinner = class {
12
12
  ariaLabel;
13
13
  render() {
14
14
  const hasLabel = !!this.ariaLabel?.trim();
15
- return (index.h(index.Host, { key: 'c788616cdce6548fe228671cb78dfcd98740c42b', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, index.h("svg", { key: '01d2fd9a20454ae051f63fc3403e4b1679db2697', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, index.h("circle", { key: '1bc55615f8fc46b26031d4dc24a24b6e79ca8b98', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
15
+ return (index.h(index.Host, { key: '1953e9328170f6203b0936fd051fcaae44cba1d6', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, index.h("svg", { key: '4393e17fe0b2e899cdd84f0bfba2047d3a08bac1', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, index.h("circle", { key: 'a321ad329e7a94680b37f2e11bb0ab3ef6344708', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
16
16
  }
17
17
  };
18
18
  LmvzSpinner.style = lmvzSpinnerCss();
@@ -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; } } :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); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } button:focus-visible { outline: var(--lmvz-ds-outline); outline-offset: var(--lmvz-ds-outline-offset); 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-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; } `;
6
6
 
7
7
  const LmvzTab = class {
8
8
  constructor(hostRef) {
@@ -22,7 +22,7 @@ const LmvzTab = class {
22
22
  this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
23
23
  }
24
24
  render() {
25
- return (index.h(index.Host, { key: '1232c42d1e4b0a22710076dcd021e910e9b71c3c' }, index.h("button", { key: 'a5d85b761836038a93b102052ff9b09cab04bd7f', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, index.h("slot", { key: 'ce429f5e6d05ed4ef506276231aa0a54cd9f050f', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), index.h("span", { key: '637e0da61c21950b0b1c8d5622315c8921007fdb', class: "label" }, index.h("slot", { key: '1c035b6763d0fa894d9dadb1407b87ca3e2f0da5' })), index.h("span", { key: '88c6e4d8fe990e6b722664641d23310748afd7c0', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
25
+ return (index.h(index.Host, { key: '642a74020dfe8e3f96ebbdf8067b1eba5c07bd15' }, index.h("button", { key: 'b786b259aed2f2e1f61f3ef14959f564841b3761', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, index.h("slot", { key: 'e29265a24673c39397266ef21419cebdf9a05a2c', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), index.h("span", { key: 'c74ae843e36f85291e404955056ba1f34d0393e7', class: "label" }, index.h("slot", { key: '0f13548f3ec10a126016bfc92aa93a4c21b86e0f' })), index.h("span", { key: '2f969a70550975bffd1884a55b12fec733331b01', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
26
26
  }
27
27
  static get delegatesFocus() { return true; }
28
28
  };
@@ -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-CzZdPBeH.js');
4
+ var listKeyboardController = require('./list-keyboard-controller-StN6Yn8W.js');
5
5
  var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
6
- require('./component-C7cavwmZ.js');
6
+ require('./element.util-Cq4y-_iX.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; } } :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-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; } `;
9
9
 
10
10
  let tabsIdCounter = 0;
11
11
  const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
@@ -240,7 +240,7 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
240
240
  this.selectTab(value);
241
241
  };
242
242
  render() {
243
- return (index.h(index.Host, { key: '5f15ece5a15ef010e84c169171acc3647386ac76', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: '38fca070606c4e15fe3218d818c9c271619088c6', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: 'a18f16a5fbcd5bdd7694abfd362cd601e852b546', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '2d84a819e13e658a677835e629e057f7a19556a0', part: "panels-container", class: "panels-container" }, index.h("slot", { key: 'e66d34d3f861b23700ad5a29076744fa1f93a5f2', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
243
+ return (index.h(index.Host, { key: '0247aeab4ec148274ab25c78a5444d14c1b70d89', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: 'aa8baa8e55f84ee0fa75ce02a172adebfe4fefcd', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: 'b626f8dc73503c5013fa2e0a7623752eeb6f733f', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '230e7cc4686d643e8562aa93db6b2a3e94fccb5f', part: "panels-container", class: "panels-container" }, index.h("slot", { key: '713f88911b7cb14d3487d0945aac818b6727dee7', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
244
244
  }
245
245
  static get watchers() { return {
246
246
  "value": [{
@@ -2,13 +2,13 @@
2
2
 
3
3
  var index = require('./index-TGsVZNDP.js');
4
4
  var ariaValidationController = require('./aria-validation-controller-Z4TtOp2l.js');
5
- var component = require('./component-C7cavwmZ.js');
6
5
  var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
6
+ var stencil_util = require('./stencil.util-DzvzXSwk.js');
7
7
  require('./aria-loader-BRo2FTGh.js');
8
8
 
9
- 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); color: var(--lmvz-semantic-color-on-surface-primary, #000000); cursor: pointer; }`;
9
+ 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
10
 
11
- const focusWithinCss = () => `.sc-lmvz-toggle-h:focus-within{outline:var(--lmvz-ds-outline);outline-offset:var(--lmvz-ds-outline-offset)}@media (forced-colors: active){.sc-lmvz-toggle-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
11
+ 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}}`;
12
12
 
13
13
  let toggleIdCounter = 0;
14
14
  const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
@@ -72,7 +72,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
72
72
  }
73
73
  async getInputElement() {
74
74
  if (!this.nativeInputElement) {
75
- await new Promise((resolve) => component.componentOnReady(this.el, resolve));
75
+ await new Promise((resolve) => stencil_util.componentOnReady(this.el, resolve));
76
76
  }
77
77
  return Promise.resolve(this.nativeInputElement);
78
78
  }
@@ -82,7 +82,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
82
82
  this.lmvzChange.emit(newChecked);
83
83
  };
84
84
  render() {
85
- return (index.h(index.Host, { key: '0b0266a50b2307a13c635ee1a2c1b7e44cacccb4' }, index.h("span", { key: 'e8cf4c4e35e013627bb6eeb4b7bae46060c3a846', class: "track" }, index.h("input", { key: '6dc43e819aa89c5b6394c3d2eed0e8852213766a', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), index.h("span", { key: '7e57a501ebcb9f560d0a03c35dbaa7744933246b', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '0e8d733132e72593048ce3eb1f8c2049f3420b2a', htmlFor: this.toggleId }, this.label)));
85
+ return (index.h(index.Host, { key: '56c73859d7eeb40842744a29392598678268d7e8' }, index.h("span", { key: '145915fb9d77976328c39c00e7ef73426220b3ca', class: "track" }, index.h("input", { key: '4363e8e3a614ce18da19abc70257b82363b291da', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), index.h("span", { key: '794ef6a50e8442dd1c460df7c42ffcf3009aab15', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '9432dc73d637ea8dbeb5c3b3ff8d0941c662f707', htmlFor: this.toggleId }, this.label)));
86
86
  }
87
87
  static get formAssociated() { return true; }
88
88
  static get watchers() { return {
package/cjs/loader.cjs.js CHANGED
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
6
6
  const defineCustomElements = async (win, options) => {
7
7
  if (typeof window === 'undefined') return undefined;
8
8
  await appGlobals.globalScripts();
9
- return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message.cjs",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"size":[513],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"size":[513],"highlighted":[516],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-spinner.cjs",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab.cjs",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
9
+ return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message.cjs",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-link.cjs",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-action-list.cjs",[[774,"lmvz-action-list",{"label":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"size":[513],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"size":[513],"highlighted":[516],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-spinner.cjs",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab.cjs",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[769,"lmvz-button-group",{"stacked":[516],"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[514,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1],"buttonRole":[1,"button-role"]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
10
10
  };
11
11
 
12
12
  exports.setNonce = index.setNonce;
@@ -0,0 +1,25 @@
1
+ 'use strict';
2
+
3
+ const raf = (h) => {
4
+ if (typeof __zone_symbol__requestAnimationFrame === 'function') {
5
+ return __zone_symbol__requestAnimationFrame(h);
6
+ }
7
+ if (typeof requestAnimationFrame === 'function') {
8
+ return requestAnimationFrame(h);
9
+ }
10
+ return setTimeout(h);
11
+ };
12
+
13
+ const componentOnReady = (stencilEl, callback) => {
14
+ if (hasLazyBuild(stencilEl)) {
15
+ stencilEl.componentOnReady().then((resolvedEl) => callback(resolvedEl));
16
+ }
17
+ else {
18
+ raf(() => callback(stencilEl));
19
+ }
20
+ };
21
+ const hasLazyBuild = (stencilEl) => {
22
+ return stencilEl.componentOnReady !== undefined;
23
+ };
24
+
25
+ exports.componentOnReady = componentOnReady;
@@ -9,6 +9,7 @@ export const iconSizes = [...sizes, 'inherit'];
9
9
  export const iconWeights = ['thin', 'medium', 'bold'];
10
10
  export const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
11
11
  export const chipSizes = ['default', 'small'];
12
+ export const linkTypes = ['internal', 'external'];
12
13
  export const messageTypes = ['neutral', 'warning'];
13
14
  export const snackbarStatuses = ['success', 'warning', 'error'];
14
15
  export const snackbarPriorities = ['low', 'normal', 'high'];
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "entries": [
3
3
  "components/lmvz-action/lmvz-action.js",
4
+ "components/lmvz-action-list/lmvz-action-list.js",
4
5
  "components/lmvz-button/lmvz-button.js",
5
6
  "components/lmvz-button-group/lmvz-button-group.js",
6
7
  "components/lmvz-card/lmvz-card.js",
@@ -9,6 +10,7 @@
9
10
  "components/lmvz-header/lmvz-header.js",
10
11
  "components/lmvz-icon/lmvz-icon.js",
11
12
  "components/lmvz-input/lmvz-input.js",
13
+ "components/lmvz-link/lmvz-link.js",
12
14
  "components/lmvz-menuitem/lmvz-menuitem.js",
13
15
  "components/lmvz-message/lmvz-message.js",
14
16
  "components/lmvz-modal/lmvz-modal.js",
@@ -0,0 +1,93 @@
1
+
2
+ @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
3
+ /**
4
+ * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
5
+ * Important: Always import this file _before_ layering your own styles!
6
+ */
7
+ @layer lmvz-ds.reset {
8
+ body {
9
+ margin: 0;
10
+ }
11
+
12
+ h1,
13
+ h2,
14
+ h3,
15
+ h4,
16
+ h5,
17
+ h6 {
18
+ margin: 0;
19
+ }
20
+
21
+ *[hidden] {
22
+ display: none !important;
23
+ }
24
+
25
+ hr {
26
+ height: 0;
27
+ border: none;
28
+ margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
29
+ border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
30
+ }
31
+
32
+ }
33
+ @layer lmvz-ds.components {
34
+ .lmvz-wrapper-card-sm,
35
+ .lmvz-wrapper-card-md,
36
+ .lmvz-wrapper-card-lg {
37
+ background: var(--lmvz-semantic-color-surface-primary, #ffffff);
38
+ box-shadow: var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11));
39
+ }
40
+
41
+ .lmvz-wrapper-card-sm {
42
+ padding: var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
43
+ border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);
44
+ }
45
+ .lmvz-wrapper-card-md {
46
+ padding: var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
47
+ border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);
48
+ }
49
+ .lmvz-wrapper-card-lg {
50
+ 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));
51
+ border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px);
52
+ }
53
+
54
+ }
55
+ :host {
56
+ display: flex;
57
+ flex-direction: column;
58
+ gap: 0;
59
+
60
+ lmvz-button,
61
+ button {
62
+ --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary, #ffffff);
63
+ --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary, #000000);
64
+ --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px);
65
+ --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
66
+ --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
67
+
68
+ width: 100%;
69
+ display: block;
70
+
71
+ &:hover {
72
+ --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
73
+ --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000);
74
+ }
75
+ &:active {
76
+ --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
77
+ --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary-active, #000000);
78
+ }
79
+ }
80
+
81
+ .lmvz-action-list-item--danger {
82
+ --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31);
83
+
84
+ &:hover {
85
+ --lmvz-button-background-override: var(--lmvz-semantic-color-status-danger, #fdf1f2);
86
+ --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31);
87
+ }
88
+ &:active {
89
+ --lmvz-button-background-override: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);
90
+ --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31);
91
+ }
92
+ }
93
+ }
@@ -0,0 +1,104 @@
1
+ import { Host, h } from "@stencil/core";
2
+ import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
3
+ import { DirectionalFocusController } from "../../utils/aria/list-keyboard-controller";
4
+ import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
5
+ export class LmvzActionList extends ReactiveControllerHost {
6
+ el;
7
+ slotEl;
8
+ get validationEl() {
9
+ return this.el;
10
+ }
11
+ get validationSlot() {
12
+ return this.slotEl;
13
+ }
14
+ focusController = new DirectionalFocusController(this, {
15
+ orientation: 'vertical',
16
+ manageTabIndex: true,
17
+ enableHomeAndEnd: true,
18
+ });
19
+ label;
20
+ constructor() {
21
+ super();
22
+ this.addController(this.focusController);
23
+ this.addController(new AriaValidationController(this, {
24
+ validationTiming: 'slot',
25
+ }));
26
+ }
27
+ componentDidLoad() {
28
+ this.handleSlotChange();
29
+ super.componentDidLoad();
30
+ }
31
+ handleSlotChange = () => {
32
+ const slot = this.slotEl;
33
+ if (!slot)
34
+ return;
35
+ const assigned = slot.assignedElements();
36
+ const interactive = [];
37
+ for (const el of assigned) {
38
+ collectInteractiveButtonsRecursively(el, interactive);
39
+ }
40
+ this.focusController.updateElements(interactive);
41
+ };
42
+ render() {
43
+ const ariaLabel = this.label || undefined;
44
+ return (h(Host, { key: '79e2d77c9aca02fb3ef2e58d241664598253334b', role: "menu", "aria-label": ariaLabel, class: "lmvz-wrapper-card-sm" }, h("slot", { key: '941b875a5be536c3d0e2ff9287da5af1a416d356', onSlotchange: this.handleSlotChange, ref: (el) => (this.slotEl = el) })));
45
+ }
46
+ static get is() { return "lmvz-action-list"; }
47
+ static get encapsulation() { return "scoped"; }
48
+ static get originalStyleUrls() {
49
+ return {
50
+ "$": ["./lmvz-action-list.css"]
51
+ };
52
+ }
53
+ static get styleUrls() {
54
+ return {
55
+ "$": ["lmvz-action-list.css"]
56
+ };
57
+ }
58
+ static get properties() {
59
+ return {
60
+ "label": {
61
+ "type": "string",
62
+ "mutable": false,
63
+ "complexType": {
64
+ "original": "string",
65
+ "resolved": "string | undefined",
66
+ "references": {}
67
+ },
68
+ "required": false,
69
+ "optional": true,
70
+ "docs": {
71
+ "tags": [],
72
+ "text": "Accessible label for the menu, reflected as `aria-label` on the host Element.\nWhen absent, `aria-label` is not rendered on the host."
73
+ },
74
+ "getter": false,
75
+ "setter": false,
76
+ "reflect": false,
77
+ "attribute": "label"
78
+ }
79
+ };
80
+ }
81
+ static get elementRef() { return "el"; }
82
+ }
83
+ function collectInteractiveButtonsRecursively(el, collection) {
84
+ const tag = el.tagName.toLowerCase();
85
+ if (tag === 'lmvz-button') {
86
+ el.buttonRole = 'menuitem';
87
+ collection.push(el);
88
+ return;
89
+ }
90
+ if (tag === 'button') {
91
+ el.setAttribute('role', 'menuitem');
92
+ collection.push(el);
93
+ return;
94
+ }
95
+ if (tag === 'hr') {
96
+ return;
97
+ }
98
+ if (el.getAttribute('role') === 'group') {
99
+ const children = el.querySelectorAll('lmvz-button, button');
100
+ children.forEach((child) => collectInteractiveButtonsRecursively(child, collection));
101
+ return;
102
+ }
103
+ console.warn('Unexpected element encountered in ActionList:', tag);
104
+ }