@justeattakeaway/pie-radio 0.11.5 → 0.12.0

package/custom-elements.json

@@ -168,6 +168,24 @@
               "name": "formResetCallback",
               "privacy": "public",
               "description": "Called when the form that contains this component is reset.\nIf the current checked state is different to the default checked state,\nthe checked state is reset to the default checked state and a `change` event is emitted."
+            },
+            {
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             }
           ],
           "events": [

package/dist/index.d.ts

@@ -49,6 +49,7 @@ export declare class PieRadio extends PieRadio_base implements RadioProps {
      * the checked state is reset to the default checked state and a `change` event is emitted.
      */
     formResetCallback(): void;
+    private _handleClick;
     updated(): void;
     render(): TemplateResult<1>;
     static styles: CSSResult;

package/dist/index.js

@@ -3,13 +3,13 @@ import { state as u, property as c, query as x } from "lit/decorators.js";
 import { ifDefined as w } from "lit/directives/if-defined.js";
 import { live as _ } from "lit/directives/live.js";
 import { classMap as C } from "lit/directives/class-map.js";
-import { FormControlMixin as A, RtlMixin as z, wrapNativeEvent as P, requiredProperty as $, validPropertyValues as q, safeCustomElement as B } from "@justeattakeaway/pie-webc-core";
+import { FormControlMixin as A, RtlMixin as z, wrapNativeEvent as P, requiredProperty as B, validPropertyValues as $, safeCustomElement as q } from "@justeattakeaway/pie-webc-core";
 const b = class b extends k {
   willUpdate() {
     this.getAttribute("v") || this.setAttribute("v", b.v);
   }
 };
-b.v = "0.11.5";
+b.v = "0.12.0";
 let h = b;
 const E = ["default", "error"], l = {
   checked: !1,
@@ -17,7 +17,7 @@ const E = ["default", "error"], l = {
   disabled: !1,
   required: !1,
   status: "default"
-}, S = '*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-radio{--radio-dot-bg-color: var(--dt-color-content-interactive-primary);--radio-bg-color: transparent;--radio-bg-color--checked: var(--dt-color-interactive-brand);--radio-border-color: var(--dt-color-border-form);--radio-font-size: calc(var(--dt-font-body-l-size) * 1px);--radio-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--radio-font-weight: var(--dt-font-weight-regular);--radio-text-color: var(--dt-color-content-default);--radio-size: 24px;--radio-dot-size: 8px;--radio-cursor: pointer;--radio-motion-easing: var(--dt-motion-easing-persistent-functional);--radio-border-width: 1px;display:flex;align-items:center;gap:var(--dt-spacing-b);cursor:var(--radio-cursor);font-size:var(--radio-font-size);line-height:var(--radio-line-height);font-weight:var(--radio-font-weight);color:var(--radio-text-color)}.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(dt-color-interactive-brand))}}.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(dt-color-interactive-brand))}}.c-radio.is-disabled{--radio-cursor: not-allowed}.c-radio.c-radio--status-error{--radio-bg-color--checked: var(--dt-color-support-error);--radio-border-color: var(--dt-color-support-error)}.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(dt-color-support-error))}}.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(dt-color-support-error))}}.c-radio .c-radio-input{align-self:flex-start;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;inline-size:var(--radio-size);block-size:var(--radio-size);border:var(--radio-border-width) solid var(--radio-border-color);border-radius:50%;margin:0;cursor:var(--radio-cursor);background-color:var(--radio-bg-color);flex-shrink:0}.c-radio .c-radio-input:before{--circle-size: calc(var(--radio-border-width) * -1);content:"";display:block;inset:var(--circle-size);border-radius:inherit;background-color:var(--radio-bg-color--checked);position:absolute;transform:scale(0)}.c-radio .c-radio-input:after{content:"";position:absolute;top:50%;left:50%;width:var(--radio-dot-size);height:var(--radio-dot-size);background-color:var(--radio-dot-bg-color);border-radius:50%;transform:translate(-50%,-50%) scale(0)}.c-radio .c-radio-input:checked:after{transform:translate(-50%,-50%) scale(1)}.c-radio .c-radio-input:checked:before{transform:scale(1)}.c-radio .c-radio-input:disabled{--radio-bg-color: var(--dt-color-disabled-01);--radio-border-color: var(--dt-color-border-default)}.c-radio .c-radio-input:checked:disabled{--radio-dot-bg-color: var(--dt-color-content-disabled);--radio-bg-color--checked: var(--dt-color-disabled-01)}.c-radio--allow-animation .c-radio-input{transition:background-color var(--dt-motion-timing-100) var(--radio-motion-easing)}@media (prefers-reduced-motion: no-preference){.c-radio--allow-animation .c-radio-input:not(:disabled):before{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-radio--allow-animation .c-radio-input:not(:disabled):after{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-radio--allow-animation .c-radio-input:not(:disabled):checked:after{transition:all var(--dt-motion-timing-150) var(--radio-motion-easing)}}:host(:focus-visible){outline:none}:host(:focus-visible) .c-radio .c-radio-input{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}';
+}, S = '*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-radio{--radio-dot-bg-color: var(--dt-color-content-interactive-primary);--radio-bg-color: transparent;--radio-bg-color--checked: var(--dt-color-interactive-brand);--radio-border-color: var(--dt-color-border-form);--radio-font-size: calc(var(--dt-font-body-l-size) * 1px);--radio-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--radio-font-weight: var(--dt-font-weight-regular);--radio-text-color: var(--dt-color-content-default-solid);--radio-size: 24px;--radio-dot-size: 8px;--radio-cursor: pointer;--radio-motion-easing: var(--dt-motion-easing-persistent-functional);--radio-border-width: 1px;display:flex;align-items:center;gap:var(--dt-spacing-b);cursor:var(--radio-cursor);font-size:var(--radio-font-size);line-height:var(--radio-line-height);font-weight:var(--radio-font-weight);color:var(--radio-text-color)}.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(dt-color-interactive-brand))}}.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(dt-color-interactive-brand))}}.c-radio.is-disabled{--radio-cursor: not-allowed}.c-radio.c-radio--status-error{--radio-bg-color--checked: var(--dt-color-support-error);--radio-border-color: var(--dt-color-support-error)}.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(dt-color-support-error))}}.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(dt-color-support-error))}}.c-radio .c-radio-input{align-self:flex-start;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;inline-size:var(--radio-size);block-size:var(--radio-size);border:var(--radio-border-width) solid var(--radio-border-color);border-radius:50%;margin:0;cursor:var(--radio-cursor);background-color:var(--radio-bg-color);flex-shrink:0}.c-radio .c-radio-input:before{--circle-size: calc(var(--radio-border-width) * -1);content:"";display:block;inset:var(--circle-size);border-radius:inherit;background-color:var(--radio-bg-color--checked);position:absolute;transform:scale(0)}.c-radio .c-radio-input:after{content:"";position:absolute;top:50%;left:50%;width:var(--radio-dot-size);height:var(--radio-dot-size);background-color:var(--radio-dot-bg-color);border-radius:50%;transform:translate(-50%,-50%) scale(0)}.c-radio .c-radio-input:checked:after{transform:translate(-50%,-50%) scale(1)}.c-radio .c-radio-input:checked:before{transform:scale(1)}.c-radio .c-radio-input:disabled{--radio-bg-color: var(--dt-color-disabled-01);--radio-border-color: var(--dt-color-border-default)}.c-radio .c-radio-input:checked:disabled{--radio-dot-bg-color: var(--dt-color-content-disabled);--radio-bg-color--checked: var(--dt-color-disabled-01)}.c-radio--allow-animation .c-radio-input{transition:background-color var(--dt-motion-timing-100) var(--radio-motion-easing)}@media (prefers-reduced-motion: no-preference){.c-radio--allow-animation .c-radio-input:not(:disabled):before{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-radio--allow-animation .c-radio-input:not(:disabled):after{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-radio--allow-animation .c-radio-input:not(:disabled):checked:after{transition:all var(--dt-motion-timing-150) var(--radio-motion-easing)}}:host(:focus-visible){outline:none}:host(:focus-visible) .c-radio .c-radio-input{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}';
 var F = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (r, a, i, d) => {
   for (var t = d > 1 ? void 0 : d ? D(a, i) : a, s = r.length - 1, n; s >= 0; s--)
     (n = r[s]) && (t = (d ? n(a, i, t) : n(t)) || t);
@@ -33,7 +33,7 @@ let o = class extends A(z(h)) {
     const { signal: r } = this._abortController;
     this.setAttribute("role", "radio"), this.addEventListener("pie-radio-group-disabled", (a) => {
       this._disabledByParent = a.detail.disabled;
-    }, { signal: r });
+    }, { signal: r }), this.addEventListener("click", this._handleClick, { signal: r });
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._abortController.abort();
@@ -73,6 +73,11 @@ let o = class extends A(z(h)) {
     const r = new Event("change", { bubbles: !0, composed: !0 });
     this.dispatchEvent(r), this._handleFormAssociation();
   }
+  // Triggers a programmatic click on the  underlying radio input.
+  // This is primarily used to ensure that the radio input is selected when using screenreaders like Apple VoiceOver.
+  _handleClick(r) {
+    r.composedPath()[0] !== this._radio && (this.disabled || this._disabledByParent || this._radio.click());
+  }
   updated() {
     this.setAttribute("aria-checked", String(this.checked)), this._handleFormAssociation();
   }
@@ -93,7 +98,7 @@ let o = class extends A(z(h)) {
       "c-radio--allow-animation": d
     };
     return m`
-        <label class=${C(f)} for="radioId">
+        <label class=${C(f)}>
             <input
                 tabindex="-1"
                 class="c-radio-input"
@@ -135,17 +140,17 @@ e([
 ], o.prototype, "required", 2);
 e([
   c({ type: String }),
-  $(g)
+  B(g)
 ], o.prototype, "value", 2);
 e([
   c({ type: String }),
-  q(g, E, l.status)
+  $(g, E, l.status)
 ], o.prototype, "status", 2);
 e([
   x('input[type="radio"]')
 ], o.prototype, "_radio", 2);
 o = e([
-  B("pie-radio")
+  q("pie-radio")
 ], o);
 export {
   o as PieRadio,

package/dist/react.d.ts

@@ -52,6 +52,7 @@ declare class PieRadio_2 extends PieRadio_base implements RadioProps {
      * the checked state is reset to the default checked state and a `change` event is emitted.
      */
     formResetCallback(): void;
+    private _handleClick;
     updated(): void;
     render(): TemplateResult<1>;
     static styles: CSSResult;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-radio",
   "description": "PIE Design System Radio built using Web Components",
-  "version": "0.11.5",
+  "version": "0.12.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -40,12 +40,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.19.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.6.0",
+    "@justeattakeaway/pie-css": "0.22.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "1.0.0"
+    "@justeattakeaway/pie-webc-core": "2.0.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -71,6 +71,11 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
         const { signal } = this._abortController;
         this.setAttribute('role', 'radio');
         this.addEventListener('pie-radio-group-disabled', (e: CustomEventInit) => { this._disabledByParent = e.detail.disabled; }, { signal });
+
+        // This is required to ensure that programmatic clicks correctly select the radio input in the template. This is primarily
+        // how screen readers such as Apple VoiceOver interact with the component.
+        // Without this, double tapping the radio input would not select it when using VoiceOver.
+        this.addEventListener('click', this._handleClick, { signal });
     }
 
     disconnectedCallback () : void {
@@ -133,6 +138,22 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
         this._handleFormAssociation();
     }
 
+    // Triggers a programmatic click on the  underlying radio input.
+    // This is primarily used to ensure that the radio input is selected when using screenreaders like Apple VoiceOver.
+    private _handleClick (event: MouseEvent): void {
+        // This guard prevents an infinite loop by ignoring the programmatic click
+        // that this handler generates as it bubbles back up from the internal input.
+        if (event.composedPath()[0] === this._radio) {
+            return;
+        }
+
+        if (this.disabled || this._disabledByParent) {
+            return;
+        }
+
+        this._radio.click();
+    }
+
     updated () {
         // Ensure aria-checked reflects the checked state
         this.setAttribute('aria-checked', String(this.checked));
@@ -161,8 +182,11 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
             'c-radio--allow-animation': _isAnimationAllowed,
         };
 
+        // NOTE: The label element here does not require a `for` attribute. This is because the click logic is handled by the component itself.
+        // Adding a `for` attribute would cause multiple click events to be fired which could lead to unexpected behaviour that might impact accessibility, performance and analytics.
+        // We still use a label element for good semantics.
         return html`
-        <label class=${classMap(classes)} for="radioId">
+        <label class=${classMap(classes)}>
             <input
                 tabindex="-1"
                 class="c-radio-input"

package/src/radio.scss

@@ -54,7 +54,7 @@
     --radio-font-size: #{p.font-size(--dt-font-body-l-size)};
     --radio-line-height: #{p.font-size(--dt-font-body-l-line-height)};
     --radio-font-weight: var(--dt-font-weight-regular);
-    --radio-text-color: var(--dt-color-content-default);
+    --radio-text-color: var(--dt-color-content-default-solid);
     --radio-size: 24px;
     --radio-dot-size: 8px;
     --radio-cursor: pointer;