@lmvz-ds/components 0.33.0 → 0.35.0

package/collection/components/lmvz-button/lmvz-button.css

@@ -58,7 +58,7 @@ h6 {
 hr {
   height: 0;
   border: none;
-  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
@@ -79,14 +79,14 @@ hr {
   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));
   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router));
   --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
 
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  justify-content: var(--lmvz-button-content-justification-override, center);
   gap: var(--lmvz-button-gap);
   padding-block: var(--lmvz-button-padding-block);
   padding-inline: var(--lmvz-button-padding-inline);
@@ -97,7 +97,7 @@ hr {
   color: var(--lmvz-button-color);
   cursor: pointer;
   font: var(--lmvz-button-font);
-  text-align: center;
+  /* text-align: center; */
   text-decoration: none;
   white-space: nowrap;
   transition:
@@ -154,21 +154,20 @@ button.primary:not([disabled], .disabled):active {
   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
 }
 
-button.secondary {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
-  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
+button.danger {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
 }
 
-button.secondary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000));
+button.danger:not([disabled], .disabled):hover {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
 }
 
-button.secondary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000));
+button.danger:not([disabled], .disabled):active {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
 }
 
 button.tertiary {
@@ -191,7 +190,7 @@ button.small {
   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
     Router));
 }
 
@@ -200,7 +199,7 @@ button.large {
   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
     Router));
 }
 
@@ -211,9 +210,6 @@ button.large {
     width: 100%;
   }
 }
-button {
-  width: 100%;
-}
 ::slotted(*) {
   --lmvz-component-color: var(--lmvz-button-color);
 }

package/collection/components/lmvz-button/lmvz-button.js

@@ -162,7 +162,7 @@ export class LmvzButton extends ReactiveControllerHost {
                 "mutable": false,
                 "complexType": {
                     "original": "Button.Variant",
-                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\" | undefined",
+                    "resolved": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined",
                     "references": {
                         "Button": {
                             "location": "import",

package/collection/components/lmvz-button-group/lmvz-button-group.css

@@ -2,8 +2,7 @@
   display: flex;
   flex-flow: row-reverse wrap;
   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
 
   /* TODO(LDHCID-135): Action wrapping threshold remains an assumption and currently follows intrinsic content width */
 }

package/collection/components/lmvz-card/lmvz-card.css

@@ -58,7 +58,7 @@ h6 {
 hr {
   height: 0;
   border: none;
-  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
@@ -80,14 +80,14 @@ hr {
   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));
   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router));
   --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
 
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  justify-content: var(--lmvz-button-content-justification-override, center);
   gap: var(--lmvz-button-gap);
   padding-block: var(--lmvz-button-padding-block);
   padding-inline: var(--lmvz-button-padding-inline);
@@ -98,7 +98,7 @@ hr {
   color: var(--lmvz-button-color);
   cursor: pointer;
   font: var(--lmvz-button-font);
-  text-align: center;
+  /* text-align: center; */
   text-decoration: none;
   white-space: nowrap;
   transition:
@@ -155,21 +155,20 @@ button.primary:not([disabled], .disabled):active {
   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
 }
 
-button.secondary {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
-  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
+button.danger {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
 }
 
-button.secondary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000));
+button.danger:not([disabled], .disabled):hover {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
 }
 
-button.secondary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000));
+button.danger:not([disabled], .disabled):active {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
 }
 
 button.tertiary {
@@ -192,7 +191,7 @@ button.small {
   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
     Router));
 }
 
@@ -201,7 +200,7 @@ button.large {
   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
     Router));
 }
 
@@ -218,12 +217,11 @@ button.large {
 }
 * {
   color: var(--lmvz-semantic-color-on-surface-primary, #000000);
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
 }
 .top {
   display: flex;
-  padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  padding: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -232,7 +230,7 @@ button.large {
 .bottom {
   display: flex;
   min-width: 150px;
-  padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem));
+  padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem));
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
@@ -246,7 +244,7 @@ button.large {
 
   padding-bottom: var(--lmvz-global-s4, 4px);
   overflow-wrap: break-word;
-  font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.4
+  font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4
     Router);
 }
 .description {
@@ -256,8 +254,7 @@ button.large {
   align-items: flex-start;
   align-self: stretch;
   white-space: pre-line;
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
 }
 .image-wrapper {
   aspect-ratio: 4 / 3;

package/collection/components/lmvz-checkbox/lmvz-checkbox.css

@@ -45,9 +45,9 @@
 
   --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
   --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
-  --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);
   --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);
-  --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419);
 
   --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
   --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe);
@@ -58,8 +58,8 @@
 
   --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);
   --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
-  --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);
-  --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
+  --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
   --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 
   --checkbox-easing: var(--lmvz-global-easing-default, ease);
@@ -69,8 +69,8 @@
   display: flex;
   align-items: center;
   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
-  padding-block: var(--lmvz-dimension-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));
+  padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
   /* WCAG 2.5.5 AAA: 44px minimum touch target */
   /* min-block-size: 44px;  */
@@ -118,22 +118,19 @@ input {
   cursor: pointer;
 }
 label {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
   color: var(--checkbox-label-color);
   transition: color var(--checkbox-duration) var(--checkbox-easing);
   cursor: pointer;
 }
 .helper-text {
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);
   /* 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 */
   color: var(--checkbox-helper-color);
   margin-block-start: 2px;
 }
 .error-text {
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);
   color: var(--checkbox-error-color);
   display: block;
   margin-block-start: 4px;

package/collection/components/lmvz-chip/lmvz-chip.css

@@ -1,13 +1,13 @@
 :host {
   --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4);
   --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc);
-  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #000000);
 
-  padding-block: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
-  padding-inline: var(--lmvz-dimension-8-10, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
+  padding-block: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
+  padding-inline: var(--lmvz-dimension-10-8, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
   border: 1px solid var(--lmvz-chip-border-color);
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
-  font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.5
+  font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem) / 1.5
     Router);
   background-color: var(--lmvz-chip-background-color);
   color: var(--lmvz-chip-foreground-color);
@@ -15,7 +15,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
+  gap: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
 
   /* enable truncated content */
   box-sizing: border-box;
@@ -32,11 +32,11 @@
 }
 
 :host([size='small']) {
-  padding-block: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
-  padding-inline: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  padding-block: var(--lmvz-dimension-4-2, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
+  padding-inline: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
   font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.5
     Router);
-  gap: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
+  gap: var(--lmvz-dimension-4-2, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
 }
 
 ::slotted(*) {
@@ -48,11 +48,11 @@
 
 ::slotted(lmvz-icon) {
   --lmvz-component-color: var(--lmvz-chip-foreground-color);
-  --lmvz-component-size: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  --lmvz-component-size: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
 
 :host([size='small']) ::slotted(lmvz-icon) {
-  --lmvz-component-size: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+  --lmvz-component-size: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
 }
 
 :host([type='active']) {
@@ -62,25 +62,25 @@
 }
 
 :host([type='warning']) {
-  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);
-  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #fffbf0);
-  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #7a5e00);
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #ffeeb8);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #614a00);
 }
 
 :host([type='success']) {
-  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3);
-  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #f1f9f8);
-  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #37867c);
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #4eb6a9);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #c2e6e1);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #28625b);
 }
 
 :host([type='error']) {
-  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);
-  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fdf1f2);
-  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fbdfe0);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
 }
 
 :host([type='neutral']) {
   --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4);
   --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc);
-  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #000000);
 }

package/collection/components/lmvz-header/lmvz-header.css

@@ -8,14 +8,14 @@
 
   background-color: var(--lmvz-semantic-color-surface-primary, #ffffff);
 
-  --lmvz-header-x-spacing-level-1: var(--lmvz-dimension-8-28, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));
+  --lmvz-header-x-spacing-level-1: var(--lmvz-dimension-28-8, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));
   --lmvz-header-x-spacing-level-2: var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
 
-  padding: var(--lmvz-dimension-8-16, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);
+  padding: var(--lmvz-dimension-16-8, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);
   gap: var(--lmvz-header-x-spacing-level-1);
 
   .brand {
-    /* min-width: var(--lmvz-dimension-48-96); */
+    /* min-width: var(--lmvz-dimension-96-48); */
     display: inline-flex;
     justify-content: center;
     align-items: center;

package/collection/components/lmvz-icon/lmvz-icon.css

@@ -45,7 +45,7 @@
 
 :host([size='lg']) {
   svg {
-    --lmvz-icon-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));
+    --lmvz-icon-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem));
   }
 }
 

package/collection/components/lmvz-input/lmvz-input.css

@@ -44,7 +44,7 @@
   --input-radius: var(--lmvz-component-input-radius-default, 999px);
   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
-  --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);
   --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc);
   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);
 
@@ -57,7 +57,7 @@
   --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
   --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
-  --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --error-text-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
 
   --label-minimized-bg: var(--input-bg);
   --label-minimized-padding-x: 4px;
@@ -70,7 +70,7 @@
   --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));
   --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
   --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));
-  --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem));
+  --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
 :host([size='md']) {
   --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));

package/collection/components/lmvz-link/lmvz-link.css

@@ -5,15 +5,17 @@
 a {
   display: inline-flex;
   align-items: center;
-  gap: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
-  padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)) var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
-  padding-block: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  gap: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
+  padding-inline: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)) var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+  padding-block: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
   color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
   text-decoration: underline;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
 }
 
 a:hover {

package/collection/components/lmvz-menuitem/lmvz-menuitem.css

@@ -44,8 +44,7 @@
   justify-content: center;
   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
   border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
   padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
   cursor: pointer;
 

package/collection/components/lmvz-message/lmvz-message.css

@@ -4,8 +4,8 @@
   align-items: flex-start;
   width: 100%;
 
-  padding: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-  gap: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  padding: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  gap: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
 
   border: var(--lmvz-semantic-border-width-default, 1px) solid;
   border-radius: var(--lmvz-semantic-border-radius-md, 6px);
@@ -24,9 +24,9 @@
 }
 
 :host([type='warning']) {
-  background-color: var(--lmvz-semantic-color-status-warning, #fffbf0);
-  border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);
-  color: var(--lmvz-semantic-color-status-on-warning, #7a5e00);
+  background-color: var(--lmvz-semantic-color-status-warning, #ffeeb8);
+  border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);
+  color: var(--lmvz-semantic-color-status-on-warning, #614a00);
 }
 
 .leading-icon {

package/collection/components/lmvz-modal/lmvz-modal.css

@@ -58,7 +58,7 @@ h6 {
 hr {
   height: 0;
   border: none;
-  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
@@ -67,7 +67,7 @@ hr {
   display: contents;
 
   /* TODO: missing token for modal/box gap */
-  --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
+  --lmvz-modal-shell-gap: var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
 }
 dialog {
   border: none;
@@ -104,8 +104,8 @@ dialog::backdrop {
 
   .close-button {
     position: absolute;
-    top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
-    right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+    top: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+    right: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
   }
 }
 .header {
@@ -116,15 +116,14 @@ dialog::backdrop {
 }
 .title {
   min-inline-size: 0;
-  font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.5
+  font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5
     Router);
 }
 .has-title .title {
   flex: 1 1 auto;
 }
 .body {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
   flex: 1;
   overflow: scroll;
   /* min-block-size: clamp(8rem, 40vw, 60vh); */

package/collection/components/lmvz-popover/lmvz-popover.css

@@ -0,0 +1,46 @@
+
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
+ * Important: Always import this file _before_ layering your own styles!
+ */
+@layer lmvz-ds.components {
+.lmvz-wrapper-card-sm,
+.lmvz-wrapper-card-md,
+.lmvz-wrapper-card-lg {
+  background: var(--lmvz-semantic-color-surface-primary, #ffffff);
+  box-shadow: var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11));
+}
+
+.lmvz-wrapper-card-sm {
+  padding: var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);
+}
+.lmvz-wrapper-card-md {
+  padding: var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+  border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);
+}
+.lmvz-wrapper-card-lg {
+  padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));
+  border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px);
+}
+
+}
+:host {
+  --lmvz-popover-z-index-internal: var(--lmvz-popover-z-index, 1);
+  display: contents;
+
+  .container {
+    position: absolute;
+    top: -9999999999px;
+    left: -9999999999px;
+    max-width: var(--lmvz-popover-max-width, none);
+    max-height: var(--lmvz-popover-max-height, none);
+    z-index: var(--lmvz-popover-z-index-internal);
+    overflow: auto;
+    box-sizing: border-box;
+  }
+}
+:host(:not([open])) .container {
+  display: none;
+}