@lmvz-ds/components 0.32.0 → 0.34.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 (191) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/cjs/{aria-loader-BRo2FTGh.js → aria-loader-DWUVcapD.js} +1 -1
  3. package/cjs/{aria-validation-controller-Z4TtOp2l.js → aria-validation-controller-BC0Eaiv4.js} +1 -1
  4. package/cjs/async.util-BQ60l-WC.js +20 -0
  5. package/cjs/{ds.constants-CKeXfK-s.js → ds.constants-C6eKRAEu.js} +5 -1
  6. package/cjs/{element.util-Cq4y-_iX.js → element.util-Dbyc8yUG.js} +35 -0
  7. package/cjs/{icons-BQASWgk-.js → icons-snv0hyf1.js} +1 -1
  8. package/cjs/{index-3g9Z9sfF.js → index-Bn3k5SiE.js} +1044 -508
  9. package/cjs/index.cjs.js +7 -5
  10. package/cjs/{list-keyboard-controller-StN6Yn8W.js → list-keyboard-controller-Dm5S_l0D.js} +1 -1
  11. package/cjs/lmvz-action-list.cjs.entry.js +13 -6
  12. package/cjs/lmvz-button-group.cjs.entry.js +4 -4
  13. package/cjs/lmvz-button_2.cjs.entry.js +7 -7
  14. package/cjs/lmvz-card.cjs.entry.js +1 -1
  15. package/cjs/lmvz-checkbox.cjs.entry.js +5 -5
  16. package/cjs/lmvz-chip.cjs.entry.js +3 -3
  17. package/cjs/lmvz-components.cjs.js +1 -1
  18. package/cjs/lmvz-header_2.cjs.entry.js +4 -4
  19. package/cjs/lmvz-input.cjs.entry.js +4 -3
  20. package/cjs/lmvz-link.cjs.entry.js +4 -4
  21. package/cjs/lmvz-menuitem.cjs.entry.js +3 -3
  22. package/cjs/lmvz-message.cjs.entry.js +3 -3
  23. package/cjs/lmvz-modal.cjs.entry.js +6 -6
  24. package/cjs/lmvz-popover.cjs.entry.js +1570 -0
  25. package/cjs/lmvz-radio.cjs.entry.js +4 -4
  26. package/cjs/lmvz-select.cjs.entry.js +3 -3
  27. package/cjs/lmvz-snackbar.cjs.entry.js +1 -1
  28. package/cjs/lmvz-spinner.cjs.entry.js +1 -1
  29. package/cjs/lmvz-tab.cjs.entry.js +1 -1
  30. package/cjs/lmvz-tabs.cjs.entry.js +3 -3
  31. package/cjs/lmvz-toggle.cjs.entry.js +6 -5
  32. package/cjs/loader.cjs.js +1 -1
  33. package/cjs/{logger-DsM6xg6V.js → logger-NBdKPSou.js} +1 -1
  34. package/cjs/{stencil.util-DzvzXSwk.js → stencil.util-DxdYjVoH.js} +2 -10
  35. package/cjs/{svg-BMBduILB.js → svg-CysxzZw7.js} +1 -1
  36. package/collection/api/ds.constants.js +3 -1
  37. package/collection/collection-manifest.json +1 -0
  38. package/collection/components/lmvz-action-list/lmvz-action-list.css +150 -38
  39. package/collection/components/lmvz-action-list/lmvz-action-list.js +9 -1
  40. package/collection/components/lmvz-button/lmvz-button.css +14 -18
  41. package/collection/components/lmvz-button/lmvz-button.js +1 -1
  42. package/collection/components/lmvz-button-group/lmvz-button-group.css +1 -2
  43. package/collection/components/lmvz-card/lmvz-card.css +16 -19
  44. package/collection/components/lmvz-checkbox/lmvz-checkbox.css +3 -6
  45. package/collection/components/lmvz-link/lmvz-link.css +1 -1
  46. package/collection/components/lmvz-menuitem/lmvz-menuitem.css +1 -2
  47. package/collection/components/lmvz-modal/lmvz-modal.css +1 -2
  48. package/collection/components/lmvz-popover/lmvz-popover.css +46 -0
  49. package/collection/components/lmvz-popover/lmvz-popover.js +470 -0
  50. package/collection/components/lmvz-radio/lmvz-radio.css +2 -4
  51. package/collection/components/lmvz-radio/lmvz-radio.js +1 -1
  52. package/collection/components/lmvz-select/lmvz-select.js +1 -1
  53. package/collection/components/lmvz-snackbar/lmvz-snackbar.js +1 -1
  54. package/collection/components/lmvz-spinner/lmvz-spinner.js +1 -1
  55. package/collection/components/lmvz-tab/lmvz-tab.js +1 -1
  56. package/collection/components/lmvz-tabs/lmvz-tabs.js +1 -1
  57. package/collection/components/lmvz-toggle/lmvz-toggle.css +1 -2
  58. package/collection/components/lmvz-toggle/lmvz-toggle.js +1 -1
  59. package/collection/integration/header-integration/header-integration.js +1 -1
  60. package/collection/utils/async/async.util.js +6 -0
  61. package/collection/utils/element/element.util.js +33 -0
  62. package/components/index.d.ts +2 -0
  63. package/components/index.d.ts.bak +2 -0
  64. package/components/index.js +1 -1
  65. package/components/lmvz-action-list.js +1 -1
  66. package/components/lmvz-button-group.js +1 -1
  67. package/components/lmvz-button.js +1 -1
  68. package/components/lmvz-card.js +1 -1
  69. package/components/lmvz-checkbox.js +1 -1
  70. package/components/lmvz-chip.js +1 -1
  71. package/components/lmvz-header.js +1 -1
  72. package/components/lmvz-icon.js +1 -1
  73. package/components/lmvz-input.js +1 -1
  74. package/components/lmvz-link.js +1 -1
  75. package/components/lmvz-menuitem.js +1 -1
  76. package/components/lmvz-message.js +1 -1
  77. package/components/lmvz-modal.js +1 -1
  78. package/components/lmvz-popover.d.ts +11 -0
  79. package/components/lmvz-popover.d.ts.bak +11 -0
  80. package/components/lmvz-popover.js +1 -0
  81. package/components/lmvz-radio.js +1 -1
  82. package/components/lmvz-select.js +1 -1
  83. package/components/lmvz-snackbar.js +1 -1
  84. package/components/lmvz-spinner.js +1 -1
  85. package/components/lmvz-tab.js +1 -1
  86. package/components/lmvz-tabs.js +1 -1
  87. package/components/lmvz-toggle.js +1 -1
  88. package/components/p-0ctLESas.js +1 -0
  89. package/components/{p-CdDO7mQa.js → p-BDonpCG8.js} +1 -1
  90. package/components/p-BhSTYZC6.js +1 -0
  91. package/components/p-CE-QR3Tp.js +1 -0
  92. package/components/{p-C8znmF2h.js → p-CFTmV4XZ.js} +1 -1
  93. package/components/{p-CxfT9IA1.js → p-CK3Ixl1K.js} +1 -1
  94. package/components/p-Cghfdblf.js +12 -0
  95. package/components/{p-B4m1n4et.js → p-D-2gj6LP.js} +1 -1
  96. package/components/{p-CGmJG63p.js → p-D06Ds9Dh.js} +1 -1
  97. package/components/{p-DeO5Vbxh.js → p-D7S1WiEC.js} +1 -1
  98. package/components/p-D9nUtvTm.js +1 -0
  99. package/components/{p-DJ90327O.js → p-De-xQqdU.js} +1 -1
  100. package/components/{p-CcxjkCOx.js → p-DjvtQE7c.js} +1 -1
  101. package/esm/{aria-loader-GfsGHZHY.js → aria-loader-BfH06m7H.js} +1 -1
  102. package/esm/{aria-validation-controller-BnyUKeJ6.js → aria-validation-controller-BvOU1BO8.js} +1 -1
  103. package/esm/async.util-D9nUtvTm.js +17 -0
  104. package/esm/{ds.constants-DuEtnKRj.js → ds.constants-0ctLESas.js} +4 -2
  105. package/esm/{element.util-CxfT9IA1.js → element.util-B0eCxdyI.js} +34 -1
  106. package/esm/{icons-CmuFKDRz.js → icons-DQOFaux5.js} +1 -1
  107. package/esm/{index-Dh_9sN0q.js → index-7ULiPTL_.js} +1044 -508
  108. package/esm/index.js +5 -5
  109. package/esm/{list-keyboard-controller-BKa9Kd2t.js → list-keyboard-controller-tle6IRkv.js} +1 -1
  110. package/esm/lmvz-action-list.entry.js +13 -6
  111. package/esm/lmvz-button-group.entry.js +4 -4
  112. package/esm/lmvz-button_2.entry.js +7 -7
  113. package/esm/lmvz-card.entry.js +1 -1
  114. package/esm/lmvz-checkbox.entry.js +5 -5
  115. package/esm/lmvz-chip.entry.js +3 -3
  116. package/esm/lmvz-components.js +1 -1
  117. package/esm/lmvz-header_2.entry.js +4 -4
  118. package/esm/lmvz-input.entry.js +4 -3
  119. package/esm/lmvz-link.entry.js +4 -4
  120. package/esm/lmvz-menuitem.entry.js +3 -3
  121. package/esm/lmvz-message.entry.js +3 -3
  122. package/esm/lmvz-modal.entry.js +6 -6
  123. package/esm/lmvz-popover.entry.js +1568 -0
  124. package/esm/lmvz-radio.entry.js +4 -4
  125. package/esm/lmvz-select.entry.js +3 -3
  126. package/esm/lmvz-snackbar.entry.js +1 -1
  127. package/esm/lmvz-spinner.entry.js +1 -1
  128. package/esm/lmvz-tab.entry.js +1 -1
  129. package/esm/lmvz-tabs.entry.js +3 -3
  130. package/esm/lmvz-toggle.entry.js +6 -5
  131. package/esm/loader.js +1 -1
  132. package/esm/{logger-CGmJG63p.js → logger-D06Ds9Dh.js} +1 -1
  133. package/esm/{stencil.util-CJRqhXjK.js → stencil.util-wGFRYLwZ.js} +1 -9
  134. package/esm/{svg-B2YoIRuh.js → svg-Dz3GD0LB.js} +1 -1
  135. package/hydrate/index.js +1652 -25
  136. package/hydrate/index.mjs +1652 -25
  137. package/lmvz-components/index.esm.js +1 -1
  138. package/lmvz-components/lmvz-components.esm.js +1 -1
  139. package/lmvz-components/p-03c38ff2.entry.js +1 -0
  140. package/lmvz-components/{p-582f44ff.entry.js → p-08613ba2.entry.js} +1 -1
  141. package/lmvz-components/p-0ctLESas.js +1 -0
  142. package/lmvz-components/{p-ed3c2b13.entry.js → p-11de5905.entry.js} +1 -1
  143. package/lmvz-components/{p-b79af711.entry.js → p-2036044c.entry.js} +1 -1
  144. package/lmvz-components/{p-c0d05a97.entry.js → p-4254aa38.entry.js} +1 -1
  145. package/lmvz-components/{p-8e1f66dd.entry.js → p-49e98627.entry.js} +1 -1
  146. package/lmvz-components/p-4f005b23.entry.js +1 -0
  147. package/lmvz-components/p-50063516.entry.js +1 -0
  148. package/lmvz-components/{p-48109e1d.entry.js → p-585470ef.entry.js} +1 -1
  149. package/lmvz-components/{p-24125bcf.entry.js → p-5bbbcfc0.entry.js} +1 -1
  150. package/lmvz-components/{p-c3e8092e.entry.js → p-6140866f.entry.js} +1 -1
  151. package/lmvz-components/p-9b7ce515.entry.js +1 -0
  152. package/lmvz-components/p-9f8fd077.entry.js +1 -0
  153. package/lmvz-components/{p-CxfT9IA1.js → p-B0eCxdyI.js} +1 -1
  154. package/lmvz-components/{p-CdDO7mQa.js → p-BDonpCG8.js} +1 -1
  155. package/lmvz-components/p-BhSTYZC6.js +1 -0
  156. package/lmvz-components/p-Cghfdblf.js +12 -0
  157. package/lmvz-components/p-CyDgnpOB.js +1 -0
  158. package/lmvz-components/{p-CGmJG63p.js → p-D06Ds9Dh.js} +1 -1
  159. package/lmvz-components/{p-CPOia2kT.js → p-D9PQIBzA.js} +1 -1
  160. package/lmvz-components/p-D9nUtvTm.js +1 -0
  161. package/lmvz-components/{p-CcxjkCOx.js → p-DjvtQE7c.js} +1 -1
  162. package/lmvz-components/{p-B4m1n4et.js → p-DuLiExhX.js} +1 -1
  163. package/lmvz-components/{p-1ce90ea7.entry.js → p-b0626234.entry.js} +1 -1
  164. package/lmvz-components/{p-fa2cd315.entry.js → p-b67ff2d1.entry.js} +1 -1
  165. package/lmvz-components/p-bfde444e.entry.js +1 -0
  166. package/lmvz-components/{p-703b10b5.entry.js → p-cc2734e9.entry.js} +1 -1
  167. package/lmvz-components/{p-25a78ead.entry.js → p-ce1a9f39.entry.js} +1 -1
  168. package/lmvz-components/{p-80a26307.entry.js → p-ddc28256.entry.js} +1 -1
  169. package/lmvz-components/p-fd455288.entry.js +1 -0
  170. package/manifest.json +386 -3
  171. package/package.json +7 -3
  172. package/types/api/ds.constants.d.ts +3 -1
  173. package/types/api/ds.types.d.ts +7 -0
  174. package/types/components/lmvz-popover/lmvz-popover.d.ts +37 -0
  175. package/types/components.d.ts +108 -1
  176. package/types/utils/async/async.util.d.ts +3 -0
  177. package/types/utils/element/element.util.d.ts +2 -0
  178. package/components/p-0s99QfRy.js +0 -12
  179. package/components/p-B0H9qIwE.js +0 -1
  180. package/components/p-CJRqhXjK.js +0 -1
  181. package/components/p-DuEtnKRj.js +0 -1
  182. package/lmvz-components/p-0s99QfRy.js +0 -12
  183. package/lmvz-components/p-4072b2fb.entry.js +0 -1
  184. package/lmvz-components/p-592d509b.entry.js +0 -1
  185. package/lmvz-components/p-6f61c24d.entry.js +0 -1
  186. package/lmvz-components/p-74c7521c.entry.js +0 -1
  187. package/lmvz-components/p-947e1fe6.entry.js +0 -1
  188. package/lmvz-components/p-CFsC37ww.js +0 -1
  189. package/lmvz-components/p-CJRqhXjK.js +0 -1
  190. package/lmvz-components/p-DuEtnKRj.js +0 -1
  191. package/lmvz-components/p-c00f0d96.entry.js +0 -1
package/collection/components/lmvz-button/lmvz-button.css CHANGED
@@ -79,14 +79,14 @@ hr {
79
79
  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));
80
80
  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
81
81
  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
82
- --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
82
+ --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
83
83
  Router));
84
84
  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
85
85
  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
86
86
 
87
87
  display: inline-flex;
88
88
  align-items: center;
89
- justify-content: center;
89
+ justify-content: var(--lmvz-button-content-justification-override, center);
90
90
  gap: var(--lmvz-button-gap);
91
91
  padding-block: var(--lmvz-button-padding-block);
92
92
  padding-inline: var(--lmvz-button-padding-inline);
@@ -97,7 +97,7 @@ hr {
97
97
  color: var(--lmvz-button-color);
98
98
  cursor: pointer;
99
99
  font: var(--lmvz-button-font);
100
- text-align: center;
100
+ /* text-align: center; */
101
101
  text-decoration: none;
102
102
  white-space: nowrap;
103
103
  transition:
@@ -154,21 +154,20 @@ button.primary:not([disabled], .disabled):active {
154
154
  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
155
155
  }
156
156
 
157
- button.secondary {
158
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
159
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
160
- --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
157
+ button.danger {
158
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
161
159
  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
160
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
162
161
  }
163
162
 
164
- button.secondary:not([disabled], .disabled):hover {
165
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
166
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000));
163
+ button.danger:not([disabled], .disabled):hover {
164
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fdf1f2));
165
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
167
166
  }
168
167
 
169
- button.secondary:not([disabled], .disabled):active {
170
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
171
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000));
168
+ button.danger:not([disabled], .disabled):active {
169
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2));
170
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
172
171
  }
173
172
 
174
173
  button.tertiary {
@@ -191,7 +190,7 @@ button.small {
191
190
  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
192
191
  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
193
192
  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
194
- --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
193
+ --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
195
194
  Router));
196
195
  }
197
196
 
@@ -200,7 +199,7 @@ button.large {
200
199
  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
201
200
  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
202
201
  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
203
- --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
202
+ --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
204
203
  Router));
205
204
  }
206
205
 
@@ -211,9 +210,6 @@ button.large {
211
210
  width: 100%;
212
211
  }
213
212
  }
214
- button {
215
- width: 100%;
216
- }
217
213
  ::slotted(*) {
218
214
  --lmvz-component-color: var(--lmvz-button-color);
219
215
  }
package/collection/components/lmvz-button/lmvz-button.js CHANGED
@@ -162,7 +162,7 @@ export class LmvzButton extends ReactiveControllerHost {
162
162
  "mutable": false,
163
163
  "complexType": {
164
164
  "original": "Button.Variant",
165
- "resolved": "\"primary\" | \"secondary\" | \"tertiary\" | undefined",
165
+ "resolved": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined",
166
166
  "references": {
167
167
  "Button": {
168
168
  "location": "import",
package/collection/components/lmvz-button-group/lmvz-button-group.css CHANGED
@@ -2,8 +2,7 @@
2
2
  display: flex;
3
3
  flex-flow: row-reverse wrap;
4
4
  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
5
- font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
6
- Router);
5
+ font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
7
6
 
8
7
  /* TODO(LDHCID-135): Action wrapping threshold remains an assumption and currently follows intrinsic content width */
9
8
  }
package/collection/components/lmvz-card/lmvz-card.css CHANGED
@@ -80,14 +80,14 @@ hr {
80
80
  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));
81
81
  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
82
82
  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
83
- --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
83
+ --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
84
84
  Router));
85
85
  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
86
86
  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
87
87
 
88
88
  display: inline-flex;
89
89
  align-items: center;
90
- justify-content: center;
90
+ justify-content: var(--lmvz-button-content-justification-override, center);
91
91
  gap: var(--lmvz-button-gap);
92
92
  padding-block: var(--lmvz-button-padding-block);
93
93
  padding-inline: var(--lmvz-button-padding-inline);
@@ -98,7 +98,7 @@ hr {
98
98
  color: var(--lmvz-button-color);
99
99
  cursor: pointer;
100
100
  font: var(--lmvz-button-font);
101
- text-align: center;
101
+ /* text-align: center; */
102
102
  text-decoration: none;
103
103
  white-space: nowrap;
104
104
  transition:
@@ -155,21 +155,20 @@ button.primary:not([disabled], .disabled):active {
155
155
  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
156
156
  }
157
157
 
158
- button.secondary {
159
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
160
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
161
- --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
158
+ button.danger {
159
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
162
160
  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
161
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
163
162
  }
164
163
 
165
- button.secondary:not([disabled], .disabled):hover {
166
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
167
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000));
164
+ button.danger:not([disabled], .disabled):hover {
165
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fdf1f2));
166
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
168
167
  }
169
168
 
170
- button.secondary:not([disabled], .disabled):active {
171
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
172
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000));
169
+ button.danger:not([disabled], .disabled):active {
170
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2));
171
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
173
172
  }
174
173
 
175
174
  button.tertiary {
@@ -192,7 +191,7 @@ button.small {
192
191
  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
193
192
  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
194
193
  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
195
- --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
194
+ --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
196
195
  Router));
197
196
  }
198
197
 
@@ -201,7 +200,7 @@ button.large {
201
200
  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
202
201
  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
203
202
  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
204
- --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
203
+ --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
205
204
  Router));
206
205
  }
207
206
 
@@ -218,8 +217,7 @@ button.large {
218
217
  }
219
218
  * {
220
219
  color: var(--lmvz-semantic-color-on-surface-primary, #000000);
221
- font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
222
- Router);
220
+ font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
223
221
  }
224
222
  .top {
225
223
  display: flex;
@@ -256,8 +254,7 @@ button.large {
256
254
  align-items: flex-start;
257
255
  align-self: stretch;
258
256
  white-space: pre-line;
259
- font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
260
- Router);
257
+ font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
261
258
  }
262
259
  .image-wrapper {
263
260
  aspect-ratio: 4 / 3;
package/collection/components/lmvz-checkbox/lmvz-checkbox.css CHANGED
@@ -118,22 +118,19 @@ input {
118
118
  cursor: pointer;
119
119
  }
120
120
  label {
121
- font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
122
- Router);
121
+ font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
123
122
  color: var(--checkbox-label-color);
124
123
  transition: color var(--checkbox-duration) var(--checkbox-easing);
125
124
  cursor: pointer;
126
125
  }
127
126
  .helper-text {
128
- font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
129
- Router);
127
+ font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router);
130
128
  /* font-weight: 400 per DS token standard (body-sm). Note: lmvz-input.css [role='status'] incorrectly uses font-weight: 500 — DS inconsistency, see lmvz-input.css line ~153 */
131
129
  color: var(--checkbox-helper-color);
132
130
  margin-block-start: 2px;
133
131
  }
134
132
  .error-text {
135
- font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
136
- Router);
133
+ font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router);
137
134
  color: var(--checkbox-error-color);
138
135
  display: block;
139
136
  margin-block-start: 4px;
package/collection/components/lmvz-link/lmvz-link.css CHANGED
@@ -38,7 +38,7 @@ a:focus-visible {
38
38
  padding: 0;
39
39
  margin: -1px;
40
40
  overflow: hidden;
41
- clip: rect(0, 0, 0, 0);
41
+ clip-path: rect(0 0 0 0);
42
42
  white-space: nowrap;
43
43
  border-width: 0;
44
44
  }
package/collection/components/lmvz-menuitem/lmvz-menuitem.css CHANGED
@@ -44,8 +44,7 @@
44
44
  justify-content: center;
45
45
  gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
46
46
  border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
47
- font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
48
- Router);
47
+ font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
49
48
  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));
50
49
  cursor: pointer;
51
50
 
package/collection/components/lmvz-modal/lmvz-modal.css CHANGED
@@ -123,8 +123,7 @@ dialog::backdrop {
123
123
  flex: 1 1 auto;
124
124
  }
125
125
  .body {
126
- font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
127
- Router);
126
+ font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
128
127
  flex: 1;
129
128
  overflow: scroll;
130
129
  /* min-block-size: clamp(8rem, 40vw, 60vh); */
package/collection/components/lmvz-popover/lmvz-popover.css ADDED
@@ -0,0 +1,46 @@
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.components {
8
+ .lmvz-wrapper-card-sm,
9
+ .lmvz-wrapper-card-md,
10
+ .lmvz-wrapper-card-lg {
11
+ background: var(--lmvz-semantic-color-surface-primary, #ffffff);
12
+ box-shadow: var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11));
13
+ }
14
+
15
+ .lmvz-wrapper-card-sm {
16
+ 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));
17
+ border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);
18
+ }
19
+ .lmvz-wrapper-card-md {
20
+ 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));
21
+ border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);
22
+ }
23
+ .lmvz-wrapper-card-lg {
24
+ 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));
25
+ border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px);
26
+ }
27
+
28
+ }
29
+ :host {
30
+ --lmvz-popover-z-index-internal: var(--lmvz-popover-z-index, 1);
31
+ display: contents;
32
+
33
+ .container {
34
+ position: absolute;
35
+ top: -9999999999px;
36
+ left: -9999999999px;
37
+ max-width: var(--lmvz-popover-max-width, none);
38
+ max-height: var(--lmvz-popover-max-height, none);
39
+ z-index: var(--lmvz-popover-z-index-internal);
40
+ overflow: auto;
41
+ box-sizing: border-box;
42
+ }
43
+ }
44
+ :host(:not([open])) .container {
45
+ display: none;
46
+ }