@lmvz-ds/components 0.25.0 → 0.27.0

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

@@ -1,8 +1,8 @@
 :host {
   display: flex;
   justify-content: flex-end;
-  gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+  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);
 
   /* TODO(LDHCID-135): Action wrapping threshold remains an assumption and currently follows intrinsic content width */

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

@@ -65,9 +65,9 @@ h6 {
   --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000));
   --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
   --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
-  --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
-  --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+  --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);
   --lmvz-button-border-width: 0;
@@ -177,18 +177,18 @@ button.tertiary:not([disabled], .disabled):active {
 button.small {
   --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
   --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-  --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));
   --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));
-  --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4
+  --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
     Router);
 }
 
 button.large {
   --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
   --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
-  --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
+  --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
   --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));
-  --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4
+  --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
     Router);
 }
 
@@ -205,7 +205,7 @@ 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.4
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
 }
 .top {
@@ -233,7 +233,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.2
+  font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.4
     Router);
 }
 .description {
@@ -243,7 +243,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.4
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
 }
 .image-wrapper {

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

@@ -58,7 +58,7 @@
 
   --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);
   --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
-  --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
+  --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);
   --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
   --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 
@@ -72,7 +72,6 @@
   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;
   /* WCAG 2.5.5 AAA: 44px minimum touch target */
   /* min-block-size: 44px;  */
   text-decoration: none;
@@ -98,6 +97,7 @@ input {
   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color);
   border-radius: var(--checkbox-border-radius);
   color: var(--checkbox-checkmark-color);
+  cursor: pointer;
   transition:
     border-color var(--checkbox-duration) var(--checkbox-easing),
     background-color var(--checkbox-duration) var(--checkbox-easing);
@@ -115,22 +115,24 @@ input {
   flex-direction: column;
   overflow-wrap: break-word;
   min-width: 0;
+  cursor: pointer;
 }
 label {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+  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.4
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 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.4
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
     Router);
   color: var(--checkbox-error-color);
   display: block;
@@ -165,16 +167,16 @@ label {
 :host([error]) .helper-text {
   color: var(--checkbox-error-color);
 }
-/* Disabled state */
 :host([disabled]) {
   opacity: var(--lmvz-component-input-disabled-opacity, 40%);
   pointer-events: none;
-}
-:host([disabled]) .pill {
-  cursor: not-allowed;
-}
-:host([disabled]) input {
-  cursor: not-allowed;
+
+  input,
+  label,
+  .box,
+  .content {
+    cursor: not-allowed;
+  }
 }
 :host(:focus-within) .pill {
   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);

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

@@ -82,8 +82,11 @@ export class LmvzCheckbox extends ReactiveControllerHost {
         this.checked = input.checked;
         this.lmvzChange.emit(this.checked);
     };
+    retargetInnerClicks() {
+        this.nativeInput?.click();
+    }
     render() {
-        return (h(Host, { key: '158efacac5c28a18003149d4acb0d1cf5385cef4' }, h("div", { key: '5deaf853f9c465b70b7e5472579c5d5212105c34', class: "pill" }, h("input", { key: '7e8da452d41cd48293569ec60dad0585ff3290f1', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: 'd1ee72be8e3fc2b4e70ff64b70bfcec93f08f063', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '73e123aa8c91e9098b4d8bbd48bbc7bae6c12383', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: '2a161e6db9e792dca1fa24c1562bd0b79d62235b', class: "content" }, h("label", { key: 'fb38792095bf6da433867472d866d6700db45dac', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: 'b8c16fc4782f67e1dca82329d081943a7d75a524', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: '87d6940217d379777e26c578cff761dcfd96e79a', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (h(Host, { key: 'cea4a962a76cab10c27adc6742fe0686b2ce6dbe' }, h("div", { key: '1addfd795587de85ecbc632fbeb45026a4e46050', class: "pill" }, h("input", { key: '8957359d0cc3f2c315badee7e20fcc81e85e0f00', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: '400dbe9379ceb4aceeb431fe6060c82b41009cda', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '9612093e65346b419ec8e4469fea7f00fe4c3ff4', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: 'fd1136ea0726941bc400b8970f7cae4bb3b59363', class: "content" }, h("label", { key: 'a06deb2d4bc76efb884701a17e4a28420a99965c', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '2bd33f14062bedbb0609dff3ac7fbcee6fa16f21', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: 'ac4fcb6f0a2de16a17f0287e42b70b6339a50acc', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get is() { return "lmvz-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -7,7 +7,7 @@
   padding-inline: var(--lmvz-dimension-8-10, 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.4
+  font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.5
     Router);
   background-color: var(--lmvz-chip-background-color);
   color: var(--lmvz-chip-foreground-color);
@@ -34,7 +34,7 @@
 :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));
-  font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.4
+  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));
 }

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
-import { ListKeyboardNavigationController } from "../../utils/aria/list-keyboard-controller";
+import { DirectionalFocusController } from "../../utils/aria/list-keyboard-controller";
 import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
 import logo from "../../assets/icons/Logo.svg";
 export class LmvzHeader extends ReactiveControllerHost {
@@ -11,7 +11,7 @@ export class LmvzHeader extends ReactiveControllerHost {
     primarySlot;
     secondarySlot;
     secondaryNav;
-    keyboardNavigationController = new ListKeyboardNavigationController(this);
+    keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both' });
     get primaryMenuitems() {
         return this.primarySlot?.assignedElements({ flatten: false }) || [];
     }
@@ -84,7 +84,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: '323b7b13ef147f48e5f06537c7f27ab6e8a649ca', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '518434d55b7bfc5c1a8988f707984b8e2a41163c', class: "brand" }, h("slot", { key: '1829a1ba10ba3a4e1a0e32564c534e960dc652d1', name: "brand" }, h("img", { key: '485c217a7fc920646ec531cac9744a10f29dab4e', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: 'df2cea9f42427c0bb51a498cc2627f0113a608a0', "aria-label": "Hauptnavigation" }, h("div", { key: '93d6e0edc45c0032c5d3c93ea5f22e204fb0617e', role: "menubar", class: "primary-menubar" }, h("slot", { key: '1b0238ca89023cc9a0ec4453e79a4597aaa92f2a', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'd7576b23a5f9268a106c98052a869825493e0485', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'ada5f271c58350c44bb55c3bd976450214795f2b', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'db47039ebf932942210fd3f0920f9f86f9d2b09b', class: "actions" }, h("slot", { key: '2d220a2946f26e69052d20dd4524e60fafbfe137', name: "actions" }))));
+        return (h(Host, { key: '0152283363802ea854334e0349e145e7d6219e09', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'cdc1d52dbfb658f99bffa2df2353b6a1ad232f97', class: "brand" }, h("slot", { key: '25a039ea2224058f97f8ec1cb1aa310b388f2b2e', name: "brand" }, h("img", { key: '9ca6f39b6e41382a438b3afd36348ee17b36d346', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: 'a6b7c1e7baca1ef2075d38cfaf631a277d2bb7ac', "aria-label": "Hauptnavigation" }, h("div", { key: 'eb8c2db72d86cf3c4e2b0d94271bf73882c3bd96', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'b8a2b3c031158ce73ada65995b0d4e6e0e4eac72', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '87dabdc52e40163b35e8c7681d3e4aa3a17d6d82', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '6cb38c14357ef682f1c804ab77cd70514308b6d4', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '9e46e6e484556c5fbe0f2c573188e845fbca801b', class: "actions" }, h("slot", { key: '4c1ea348528ccc3722c2dbbe0795e9f61d67edee', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -124,7 +124,7 @@ export class LmvzIcon extends ReactiveControllerHost {
                 "mutable": false,
                 "complexType": {
                     "original": "Icon.IconWeight",
-                    "resolved": "\"bold\" | \"filled\" | \"medium\" | \"thin\" | undefined",
+                    "resolved": "\"bold\" | \"medium\" | \"thin\" | undefined",
                     "references": {
                         "Icon": {
                             "location": "import",

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

@@ -44,7 +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.4
+  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-modal/lmvz-modal.css

@@ -89,8 +89,8 @@ dialog::backdrop {
   display: flex;
   flex-direction: column;
   gap: var(--lmvz-modal-shell-gap);
-  padding: var(--lmvz-component-card-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-card-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));
-  border-radius: var(--lmvz-component-card-lg-border-radius, 18px);
+  padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));
+  border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px);
   background: var(--lmvz-semantic-color-surface-primary, #ffffff);
 
   position: relative;
@@ -101,18 +101,6 @@ dialog::backdrop {
     right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
   }
 }
-@media (max-width: 402px) {
-  dialog {
-    margin: 0;
-    max-width: unset;
-    max-height: unset;
-  }
-  .modal-shell {
-    max-width: 100vw;
-    border-radius: 0;
-    height: 100%;
-  }
-}
 .header {
   display: flex;
   align-items: flex-start;
@@ -121,14 +109,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.4
+  font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.5
     Router);
 }
 .has-title .title {
   flex: 1 1 auto;
 }
 .body {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
   flex: 1;
   overflow: scroll;

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

@@ -55,14 +55,14 @@
 
   --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);
   --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
-  --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
+  --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);
 
   --radio-easing: var(--lmvz-global-easing-default, ease);
   --radio-duration: 0.2s;
 
   display: flex;
   align-items: center;
-  gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
   padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
@@ -110,7 +110,7 @@ input {
   min-width: 0;
 }
 label {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
   color: var(--radio-label-color);
   cursor: pointer;
@@ -118,7 +118,7 @@ label {
 }
 .helper-text {
   display: block;
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
     Router);
   color: var(--radio-helper-color);
   margin-block-start: 2px;

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

@@ -0,0 +1,101 @@
+: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; /* TODO(tokens): promote to design-token */
+
+  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);
+
+  /* this will be picked up by lmvz-icon as well */
+  --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;
+  }
+}
+
+/* var(--lmvz-global-duration-fast, 200ms) — token is unitless integer; separate ticket filed against packages/design-tokens */
+
+: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;
+  }
+}