@lmvz-ds/components 0.24.0 → 0.25.0

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

@@ -50,7 +50,7 @@
   --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);
 
   --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
-  --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f1f9fe);
+  --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe);
 
   --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
 
@@ -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, #7a7a7a);
+  --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
   --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
   --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 
@@ -123,14 +123,14 @@ label {
   transition: color var(--checkbox-duration) var(--checkbox-easing);
 }
 .helper-text {
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4
     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.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4
     Router);
   color: var(--checkbox-error-color);
   display: block;
@@ -176,12 +176,9 @@ label {
 :host([disabled]) input {
   cursor: not-allowed;
 }
-/* Focus ring, applied via sibling combinator on the native input */
-input:focus-visible ~ .box {
-  outline: 2px solid var(--checkbox-focus-color);
-  outline-offset: 2px;
-  /* box-shadow: 0 0 0 3px rgba(15, 138, 204, 0.2); TODO: no design token available for focus shadow color/spread */
-  box-shadow: 0 var(--lmvz-semantic-shadow-l1-1-position-y, 2px) 0 var(--lmvz-semantic-shadow-l1-1-blur, 4px) var(--lmvz-semantic-color-shadow-l1-colored, rgba(175, 223, 249, 0.42));
+:host(:focus-within) .pill {
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
 }
 /* Forced Colors / Windows High Contrast */
 @media (forced-colors: active) {
@@ -204,7 +201,7 @@ input:focus-visible ~ .box {
     color: HighlightText;
   }
 
-  input:focus-visible ~ .box {
+  :host(:focus-within) .pill {
     outline-color: Highlight;
     box-shadow: none;
   }

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

@@ -1,6 +1,6 @@
+import checkmark from "@lmvz-ds/icons/assets/checkmark.svg";
 import { toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
 import { h, Host } from "@stencil/core";
-import checkmark from "../../assets/icons/checkmark.svg";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
 const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmark);
@@ -83,7 +83,7 @@ export class LmvzCheckbox extends ReactiveControllerHost {
         this.lmvzChange.emit(this.checked);
     };
     render() {
-        return (h(Host, { key: '70201fa49465f1e29b98bb251ea254be0293b1df' }, h("div", { key: 'dfeb788e3e2d9a8329e7798954c744eee616692e', class: "pill" }, h("input", { key: '79fefaa297a5fbbb1b7f180c7cf4cccf8650a1f0', 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: '8808a026274979678515b3e750065af38d62fff9', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '861c08fb2a5cc6f24d3ae0a9f28cb6d2f51beda4', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: '6dc36656d76bd3a6816553b4dcbdbea2c9bd2b0f', class: "content" }, h("label", { key: 'c343c4261e2eb231925d0f3ca0a83f9f3cdd0b9b', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '8473ed19adfe975b715a5e0b78c949c6b11de99e', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: 'e934cec1cc622908188cf9090e24988e5df45799', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        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))));
     }
     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.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4
+  font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.4
     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.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.4
+  font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.4
     Router);
   gap: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
 }
@@ -57,7 +57,7 @@
 
 :host([type='active']) {
   --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa);
-  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
   --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 }
 

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

@@ -50,9 +50,9 @@
   --input-height: 48px; /* From Figma input-size=48 */
   --input-padding-x: 16px;
 
-  --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);
+  --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, #7a7a7a);
+  --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
 
   --label-floating-scale: 0.85; /* 14px -> 12px approx */
@@ -87,13 +87,9 @@
   pointer-events: none;
 }
 .input-container:focus-within .input-wrapper {
-  border-color: var(--input-border-color-focus);
-  outline: 2px solid var(--input-border-color-focus);
-  outline-offset: 2px;
-}
-/* Enhanced focus indicator for keyboard users */
-.input-container:has(input:focus-visible) .input-wrapper {
-  box-shadow: 0 0 0 3px rgb(0 86 214 / 20%);
+  /* border-color: var(--input-border-color-focus); */
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
 }
 /* Error State */
 :host([error]) .input-wrapper {

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

@@ -49,7 +49,7 @@
   padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
   cursor: pointer;
 
-  --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #545454);
+  --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
   --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
 
   background: var(--lmvz-menuitem-background);
@@ -66,6 +66,6 @@
   z-index: 1;
 }
 :host([aria-expanded='true']) {
-  --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f1f9fe);
+  --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f6fbfe);
   --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 }

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

@@ -66,6 +66,9 @@ dialog {
   border: none;
   padding: 0;
   background: transparent;
+  height: 100vh;
+  width: 100vw;
+  contain: layout size;
 }
 dialog::backdrop {
   /* TODO(LDHCID-135): Missing token for the modal backdrop color */
@@ -74,18 +77,23 @@ dialog::backdrop {
   background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29);
 }
 .modal-shell {
-  position: relative;
+  margin-inline: auto;
+  top: 50%;
+  transform: translateY(-50%);
+
+  box-sizing: border-box;
+  width: fit-content;
+  max-height: 100%;
+  max-width: clamp(20rem, 100%, 90vw);
+
   display: flex;
   flex-direction: column;
-  inline-size: fit-content;
-  max-inline-size: clamp(40rem, 100%, 80vw);
   gap: var(--lmvz-modal-shell-gap);
-  padding-block: var(--lmvz-component-modal-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem));
-  padding-inline: var(--lmvz-component-modal-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));
-  border-radius: var(--lmvz-component-modal-border-radius, 18px);
+  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);
   background: var(--lmvz-semantic-color-surface-primary, #ffffff);
-  /* TODO(LDHCID-135): clarify overflow behaviour */
-  overflow: auto;
+
+  position: relative;
 
   .close-button {
     position: absolute;
@@ -93,9 +101,16 @@ dialog::backdrop {
     right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
   }
 }
-@media (min-width: 768px) {
+@media (max-width: 402px) {
+  dialog {
+    margin: 0;
+    max-width: unset;
+    max-height: unset;
+  }
   .modal-shell {
-    max-inline-size: 100vw;
+    max-width: 100vw;
+    border-radius: 0;
+    height: 100%;
   }
 }
 .header {
@@ -115,4 +130,7 @@ dialog::backdrop {
 .body {
   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
     Router);
+  flex: 1;
+  overflow: scroll;
+  /* min-block-size: clamp(8rem, 40vw, 60vh); */
 }

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

@@ -1,6 +1,6 @@
+import closeIcon from "@lmvz-ds/icons/assets/close-sm.svg";
 import { toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
 import { Host, h } from "@stencil/core";
-import closeIcon from "../../assets/icons/close-sm.svg";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { getDeepActiveElement, inheritAriaAttributes } from "../../utils/component";
 import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
@@ -223,7 +223,7 @@ export class LmvzModal extends ReactiveControllerHost {
         this.hasHeader = this.hasAssignedContent(this.headerSlot);
     };
     render() {
-        return (h(Host, { key: 'f014c692b82fae6dd96dffdbda4043aa9174004f' }, h("dialog", { key: '8939eda4aba44f1b6c9e8983cacddba83f668692', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: '93f43c5f7c258494c86f9604b7eeac0046f912d6', class: "modal-shell" }, h("header", { key: '2e8177a5e0812007fede430533e6a0aa9b7bc0ea', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: 'fb4b537386077b837758f4b61c45433ad6c747cc', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: '2507b2b7af3b18e859e87b7d682bdf189c4df53d', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '5e4bcd8771babae9a9dc34fc908eb9210639a497', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '32aada0eea679fd1610eb704ac02cca1f27168ff', icon: closeIconSvg }))), h("div", { key: '1dc811f3edcd9ab1611483c90345483fee94b318', class: "body" }, h("slot", { key: 'cf870234c54d659cdd85d1a736626707f65cca4a' })), h("footer", { key: 'c2ed7badb41a09d1187af2221f33fc2a87bcb606', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: 'c4846b44ff94b0411d79d88b3bb8447dd2a5967a', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: '3aa5aa7b3a5d68c5c3c2da1739bee57316db07ff', name: "actions" })))))));
+        return (h(Host, { key: '1fbdbb1ab2d3ad423075465108d4ff807d07404e' }, h("dialog", { key: '622dd60366ad594e16471cc8921c97d23af14ccb', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: 'bcdfbefbd5f380e2bf946aed479d542a33927af1', class: "modal-shell" }, h("header", { key: 'dcd23467473d58b51bddaf613b3ac8c922eecdc6', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: 'b2aa21fda4a80d2ea003e6ec876c2b74df5d29fd', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: 'b7238e5b24c0822a94087d4ff0567e6406542c73', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '5059671fb4d81c685becd3adb0be52dd92ec4dec', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '498447e60e0e33fc165f39cea35434080e869d3c', icon: closeIconSvg }))), h("div", { key: '39ecefb52d5990cb689b0e4f18a8b6fc501c840d', class: "body" }, h("slot", { key: 'b014d0633c28fb6b399f11f2323e102949548776' })), h("footer", { key: '201dae98bcf810f369d77b7e9f36d7cc71ed5db4', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: 'e4559d383992e059f915670a0874cc3b9ef655a3', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: '88b007e139d4a166a2ee886dcd0256293d5d33c9', name: "actions" })))))));
     }
     static get is() { return "lmvz-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,182 @@
+
+@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.theme {
+/**
+ * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
+ */
+
+@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;
+}
+
+}
+:host {
+  display: inline-block;
+
+  --radio-circle-size: var(--lmvz-global-s18, 18px);
+  --radio-dot-size: 0.5rem;
+
+  --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
+  --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
+  --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);
+  --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc);
+
+  --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+  --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
+
+  --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);
+  --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+  --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
+
+  --radio-easing: var(--lmvz-global-easing-default, ease);
+  --radio-duration: 0.2s;
+
+  display: flex;
+  align-items: center;
+  gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  overflow: clip;
+  cursor: pointer;
+  background-color: transparent;
+  position: relative;
+  transition: background-color var(--radio-duration) var(--radio-easing);
+}
+input {
+  position: absolute;
+  inset-block-start: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  inset-inline-start: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  opacity: 0;
+  width: var(--radio-circle-size);
+  height: var(--radio-circle-size);
+  margin: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.circle {
+  width: var(--radio-circle-size);
+  height: var(--radio-circle-size);
+  border-radius: 50%;
+  border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color);
+  background-color: var(--radio-bg);
+  pointer-events: none;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  transition: border-color var(--radio-duration) var(--radio-easing);
+}
+.dot {
+  width: var(--radio-dot-size);
+  height: var(--radio-dot-size);
+  border-radius: 50%;
+  background-color: var(--radio-dot-color);
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  overflow-wrap: break-word;
+  min-width: 0;
+}
+label {
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+    Router);
+  color: var(--radio-label-color);
+  cursor: pointer;
+  transition: color var(--radio-duration) var(--radio-easing);
+}
+.helper-text {
+  display: block;
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4
+    Router);
+  color: var(--radio-helper-color);
+  margin-block-start: 2px;
+}
+.helper-text:empty {
+  display: none;
+}
+/* Hover state, guarded to prevent sticky hover on touch devices */
+@media (hover: hover) {
+  :host(:hover) .circle {
+    border-color: var(--radio-border-color-hover);
+  }
+
+  :host(:hover) {
+    background-color: var(--radio-wrapper-bg-hover);
+  }
+}
+/* Active state */
+:host(:active) {
+  background-color: var(--radio-wrapper-bg-active);
+}
+/* Checked state */
+:host([checked]) .circle {
+  border-color: var(--radio-border-color-checked);
+}
+:host([checked]) label {
+  color: var(--radio-label-color-checked);
+}
+/* Error state. MUST appear AFTER checked state rules (error takes visual precedence) */
+:host([error]) .circle {
+  border-color: var(--radio-border-color-error);
+}
+:host([error]) .helper-text {
+  color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+}
+/* Disabled state */
+:host([disabled]) {
+  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+/* Forced Colors / Windows High Contrast */
+@media (forced-colors: active) {
+  .circle {
+    forced-color-adjust: auto;
+    border-color: ButtonText;
+    background-color: Field;
+  }
+
+  :host([checked]) .circle {
+    border-color: Highlight;
+  }
+
+  .dot {
+    background-color: ButtonText;
+  }
+
+  :host([checked]) .dot {
+    background-color: HighlightText;
+  }
+}