@justeattakeaway/pie-radio 0.2.2 → 0.4.0

package/custom-elements.json

@@ -41,6 +41,15 @@
           "description": "",
           "name": "PieRadio",
           "members": [
+            {
+              "kind": "field",
+              "name": "_disabledByParent",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -89,21 +98,29 @@
             },
             {
               "kind": "field",
-              "name": "radio",
+              "name": "_radio",
               "type": {
                 "text": "HTMLInputElement"
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_abortController",
+              "type": {
+                "text": "AbortController"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "method",
-              "name": "handleFormAssociation",
+              "name": "_handleFormAssociation",
               "privacy": "private",
               "description": "Ensures that the form value is in sync with the component."
             },
             {
               "kind": "method",
-              "name": "handleChange",
+              "name": "_handleChange",
               "privacy": "private",
               "parameters": [
                 {
@@ -133,6 +150,15 @@
               "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."
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "when the radio state is changed.",
+              "name": "change"
+            }
+          ],
           "attributes": [
             {
               "name": "checked",

package/dist/index.d.ts

@@ -12,24 +12,29 @@ export declare const defaultProps: DefaultProps;
 
 /**
  * @tagname pie-radio
+ * @event {CustomEvent} change - when the radio state is changed.
  */
 export declare class PieRadio extends PieRadio_base implements RadioProps {
+    private _disabledByParent;
     checked: boolean;
     defaultChecked: boolean;
     disabled: boolean;
     name: RadioProps['name'];
     required: boolean;
     value: RadioProps['value'];
-    private radio;
+    private _radio;
+    private _abortController;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Ensures that the form value is in sync with the component.
      */
-    private handleFormAssociation;
+    private _handleFormAssociation;
     /**
      * Captures the native change event and wraps it in a custom event.
      * @param {Event} event - This should be the change event that was listened for on an input element with `type="radio"`.
      */
-    private handleChange;
+    private _handleChange;
     /**
      * (Read-only) returns a ValidityState with the validity states that this element is in.
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity

package/dist/index.js

@@ -1,45 +1,56 @@
-import { LitElement as u, html as f, unsafeCSS as m } from "lit";
-import { property as s, query as y } from "lit/decorators.js";
-import { ifDefined as k } from "lit/directives/if-defined.js";
-import { live as b } from "lit/directives/live.js";
-import { FormControlMixin as v, RtlMixin as C, wrapNativeEvent as g, requiredProperty as q, defineCustomElement as E } from "@justeattakeaway/pie-webc-core";
-const n = {
+import { LitElement as v, html as u, unsafeCSS as f } from "lit";
+import { state as m, property as i, query as k } from "lit/decorators.js";
+import { ifDefined as g } from "lit/directives/if-defined.js";
+import { live as y } from "lit/directives/live.js";
+import { classMap as C } from "lit/directives/class-map.js";
+import { FormControlMixin as _, RtlMixin as z, wrapNativeEvent as x, requiredProperty as w, defineCustomElement as E } from "@justeattakeaway/pie-webc-core";
+const l = {
   checked: !1,
   defaultChecked: !1,
   disabled: !1,
   required: !1
-}, F = "*,*:after,*:before{box-sizing:inherit}";
-var $ = Object.defineProperty, i = (c, e, o, d) => {
-  for (var r = void 0, a = c.length - 1, h; a >= 0; a--)
-    (h = c[a]) && (r = h(e, o, r) || r);
-  return r && $(e, o, r), r;
+}, q = '*,*:after,*:before{box-sizing:inherit}.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-interactive-form);--radio-font-size: p.font-size(--dt-font-body-l-size);--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);font-weight:var(--radio-font-weight);color:var(--radio-text-color)}.c-radio.c-radio--disabled{--radio-cursor: not-allowed}.c-radio input[type=radio]{-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:transparent;transition:background-color var(--dt-motion-timing-100) var(--radio-motion-easing);flex-shrink:0}.c-radio input[type=radio]:focus{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-radio input[type=radio]: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)}@media (prefers-reduced-motion: no-preference){.c-radio input[type=radio]:not(:disabled):before{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}.c-radio input[type=radio]: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 input[type=radio]:checked:after{transform:translate(-50%,-50%) scale(1)}.c-radio input[type=radio]:checked:before{transform:scale(1)}@media (prefers-reduced-motion: no-preference){.c-radio input[type=radio]:not(:disabled):after{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-radio input[type=radio]:not(:disabled):checked:after{transition:all var(--dt-motion-timing-150) var(--radio-motion-easing)}}.c-radio input[type=radio]:disabled{background-color:var(--dt-color-disabled-01);border-color:var(--dt-color-border-default)}.c-radio input[type=radio]:checked:disabled{--radio-dot-bg-color: var(--dt-color-content-disabled);--radio-bg-color--checked: var(--dt-color-disabled-01)}.c-radio input[type=radio]:hover:not(:checked,:disabled){background-color:hsl(var(--dt-color-black-h),var(--dt-color-black-s),var(--dt-color-black-l),var(--dt-color-hover-01))}.c-radio input[type=radio]:active:not(:checked,:disabled){background-color:hsl(var(--dt-color-black-h),var(--dt-color-black-s),var(--dt-color-black-l),var(--dt-color-active-01))}.c-radio input[type=radio]:hover:checked:not(:disabled):before{background-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)));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)))}.c-radio input[type=radio]:active:checked:not(:disabled):before{background-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)));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)))}';
+var B = Object.defineProperty, a = (p, r, o, c) => {
+  for (var t = void 0, d = p.length - 1, n; d >= 0; d--)
+    (n = p[d]) && (t = n(r, o, t) || t);
+  return t && B(r, o, t), t;
 };
-const p = "pie-radio", l = class l extends v(C(u)) {
+const h = "pie-radio", s = class s extends _(z(v)) {
   constructor() {
-    super(...arguments), this.checked = n.checked, this.defaultChecked = n.defaultChecked, this.disabled = n.disabled, this.required = n.required;
+    super(...arguments), this._disabledByParent = !1, this.checked = l.checked, this.defaultChecked = l.defaultChecked, this.disabled = l.disabled, this.required = l.required;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._abortController = new AbortController();
+    const { signal: r } = this._abortController;
+    this.addEventListener("pie-radio-group-disabled", (o) => {
+      this._disabledByParent = o.detail.disabled;
+    }, { signal: r });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._abortController.abort();
   }
   /**
    * Ensures that the form value is in sync with the component.
    */
-  handleFormAssociation() {
+  _handleFormAssociation() {
     this.form && this.name && this._internals.setFormValue(this.checked ? this.value : null);
   }
   /**
    * Captures the native change event and wraps it in a custom event.
    * @param {Event} event - This should be the change event that was listened for on an input element with `type="radio"`.
    */
-  handleChange(e) {
-    const { checked: o } = e == null ? void 0 : e.currentTarget;
+  _handleChange(r) {
+    const { checked: o } = r == null ? void 0 : r.currentTarget;
     this.checked = o;
-    const d = g(e);
-    this.dispatchEvent(d), this.handleFormAssociation();
+    const c = x(r);
+    this.dispatchEvent(c), this._handleFormAssociation();
   }
   /**
    * (Read-only) returns a ValidityState with the validity states that this element is in.
    * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
    */
   get validity() {
-    return this.radio.validity;
+    return this._radio.validity;
   }
   /**
    * Called when the form that contains this component is reset.
@@ -50,62 +61,69 @@ const p = "pie-radio", l = class l extends v(C(u)) {
     if (this.checked === this.defaultChecked)
       return;
     this.checked = this.defaultChecked;
-    const e = new Event("change", { bubbles: !0, composed: !0 });
-    this.dispatchEvent(e), this.handleFormAssociation();
+    const r = new Event("change", { bubbles: !0, composed: !0 });
+    this.dispatchEvent(r), this._handleFormAssociation();
   }
   updated() {
-    this.handleFormAssociation();
+    this._handleFormAssociation();
   }
   render() {
     const {
-      checked: e,
+      checked: r,
       disabled: o,
-      name: d,
-      required: r,
-      value: a
-    } = this;
-    return f`
-        <input
-            type="radio"
-            id="radioId"
-            data-test-id="pie-radio"
-            .checked="${b(e)}"
-            .value="${a}"
-            name="${k(d)}"
-            ?disabled="${o}"
-            ?required="${r}"
-            @change="${this.handleChange}">
-        <label for="radioId">
+      _disabledByParent: c,
+      name: t,
+      required: d,
+      value: n
+    } = this, b = o || c;
+    return u`
+        <label class=${C({
+      "c-radio": !0,
+      "c-radio--disabled": b
+    })} for="radioId">
+            <input
+                type="radio"
+                id="radioId"
+                data-test-id="pie-radio"
+                .checked="${y(r)}"
+                .value="${n}"
+                name="${g(t)}"
+                ?disabled="${b}"
+                ?required="${d}"
+                @change="${this._handleChange}">
             <slot></slot>
         </label>`;
   }
 };
-l.styles = m(F);
-let t = l;
-i([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "checked");
-i([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "defaultChecked");
-i([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled");
-i([
-  s({ type: String })
-], t.prototype, "name");
-i([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "required");
-i([
-  s({ type: String }),
-  q(p)
-], t.prototype, "value");
-i([
-  y('input[type="radio"]')
-], t.prototype, "radio");
-E(p, t);
+s.styles = f(q);
+let e = s;
+a([
+  m()
+], e.prototype, "_disabledByParent");
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "checked");
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "defaultChecked");
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled");
+a([
+  i({ type: String })
+], e.prototype, "name");
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "required");
+a([
+  i({ type: String }),
+  w(h)
+], e.prototype, "value");
+a([
+  k('input[type="radio"]')
+], e.prototype, "_radio");
+E(h, e);
 export {
-  t as PieRadio,
-  n as defaultProps
+  e as PieRadio,
+  l as defaultProps
 };

package/dist/react.d.ts

@@ -11,28 +11,33 @@ export declare type DefaultProps = ComponentDefaultProps<RadioProps, keyof Omit<
 
 export declare const defaultProps: DefaultProps;
 
-export declare const PieRadio: React_2.ForwardRefExoticComponent<RadioProps & React_2.RefAttributes<PieRadio_2> & ReactBaseType>;
+export declare const PieRadio: React_2.ForwardRefExoticComponent<RadioProps & React_2.RefAttributes<PieRadio_2> & PieRadioEvents & ReactBaseType>;
 
 /**
  * @tagname pie-radio
+ * @event {CustomEvent} change - when the radio state is changed.
  */
 declare class PieRadio_2 extends PieRadio_base implements RadioProps {
+    private _disabledByParent;
     checked: boolean;
     defaultChecked: boolean;
     disabled: boolean;
     name: RadioProps['name'];
     required: boolean;
     value: RadioProps['value'];
-    private radio;
+    private _radio;
+    private _abortController;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Ensures that the form value is in sync with the component.
      */
-    private handleFormAssociation;
+    private _handleFormAssociation;
     /**
      * Captures the native change event and wraps it in a custom event.
      * @param {Event} event - This should be the change event that was listened for on an input element with `type="radio"`.
      */
-    private handleChange;
+    private _handleChange;
     /**
      * (Read-only) returns a ValidityState with the validity states that this element is in.
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
@@ -51,6 +56,10 @@ declare class PieRadio_2 extends PieRadio_base implements RadioProps {
 
 declare const PieRadio_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
 
+declare type PieRadioEvents = {
+    onChange?: (event: CustomEvent) => void;
+};
+
 export declare interface RadioProps {
     /**
      * The checked state of the radio.

package/dist/react.js

@@ -1,15 +1,18 @@
 import * as e from "react";
 import { createComponent as o } from "@lit/react";
 import { PieRadio as a } from "./index.js";
-import { defaultProps as d } from "./index.js";
+import { defaultProps as s } from "./index.js";
 const i = o({
   displayName: "PieRadio",
   elementClass: a,
   react: e,
   tagName: "pie-radio",
-  events: {}
+  events: {
+    onChange: "change"
+    // when the radio state is changed.
+  }
 }), m = i;
 export {
   m as PieRadio,
-  d as defaultProps
+  s as defaultProps
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-radio",
   "description": "PIE Design System Radio built using Web Components",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/index.ts

@@ -1,10 +1,15 @@
 import { LitElement, html, unsafeCSS } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 import {
-    defineCustomElement, FormControlMixin, requiredProperty, RtlMixin, wrapNativeEvent,
+    defineCustomElement,
+    FormControlMixin,
+    requiredProperty,
+    RtlMixin,
+    wrapNativeEvent,
 } from '@justeattakeaway/pie-webc-core';
 
 import { type RadioProps, defaultProps } from './defs';
@@ -17,8 +22,12 @@ const componentSelector = 'pie-radio';
 
 /**
  * @tagname pie-radio
+ * @event {CustomEvent} change - when the radio state is changed.
  */
 export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements RadioProps {
+    @state()
+    private _disabledByParent = false;
+
     @property({ type: Boolean, reflect: true })
     public checked = defaultProps.checked;
 
@@ -39,12 +48,27 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
     public value!: RadioProps['value'];
 
     @query('input[type="radio"]')
-    private radio!: HTMLInputElement;
+    private _radio!: HTMLInputElement;
+
+    private _abortController!: AbortController;
+
+    connectedCallback () : void {
+        super.connectedCallback();
+        this._abortController = new AbortController();
+        const { signal } = this._abortController;
+
+        this.addEventListener('pie-radio-group-disabled', (e: CustomEventInit) => { this._disabledByParent = e.detail.disabled; }, { signal });
+    }
+
+    disconnectedCallback () : void {
+        super.disconnectedCallback();
+        this._abortController.abort();
+    }
 
     /**
      * Ensures that the form value is in sync with the component.
      */
-    private handleFormAssociation () {
+    private _handleFormAssociation () {
         if (this.form && this.name) {
             this._internals.setFormValue(this.checked ? this.value : null);
         }
@@ -54,7 +78,7 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
      * Captures the native change event and wraps it in a custom event.
      * @param {Event} event - This should be the change event that was listened for on an input element with `type="radio"`.
      */
-    private handleChange (event: Event) {
+    private _handleChange (event: Event) {
         const { checked } = event?.currentTarget as HTMLInputElement;
         this.checked = checked;
         // This is because some events set `composed` to `false`.
@@ -62,7 +86,7 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
         const customChangeEvent = wrapNativeEvent(event);
         this.dispatchEvent(customChangeEvent);
 
-        this.handleFormAssociation();
+        this._handleFormAssociation();
     }
 
     /**
@@ -70,7 +94,7 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
      */
     public get validity () : ValidityState {
-        return this.radio.validity;
+        return this._radio.validity;
     }
 
     /**
@@ -88,30 +112,42 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
         const changeEvent = new Event('change', { bubbles: true, composed: true });
         this.dispatchEvent(changeEvent);
 
-        this.handleFormAssociation();
+        this._handleFormAssociation();
     }
 
     updated () {
-        this.handleFormAssociation();
+        this._handleFormAssociation();
     }
 
     render () {
         const {
-            checked, disabled, name, required, value,
+            checked,
+            disabled,
+            _disabledByParent,
+            name,
+            required,
+            value,
         } = this;
 
+        const componentDisabled = disabled || _disabledByParent;
+
+        const classes = {
+            'c-radio': true,
+            'c-radio--disabled': componentDisabled,
+        };
+
         return html`
-        <input
-            type="radio"
-            id="radioId"
-            data-test-id="pie-radio"
-            .checked="${live(checked)}"
-            .value="${value}"
-            name="${ifDefined(name)}"
-            ?disabled="${disabled}"
-            ?required="${required}"
-            @change="${this.handleChange}">
-        <label for="radioId">
+        <label class=${classMap(classes)} for="radioId">
+            <input
+                type="radio"
+                id="radioId"
+                data-test-id="pie-radio"
+                .checked="${live(checked)}"
+                .value="${value}"
+                name="${ifDefined(name)}"
+                ?disabled="${componentDisabled}"
+                ?required="${required}"
+                @change="${this._handleChange}">
             <slot></slot>
         </label>`;
     }

package/src/radio.scss

@@ -1 +1,145 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+.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-interactive-form);
+    --radio-font-size: p.font-size(--dt-font-body-l-size);
+    --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);
+    font-weight: var(--radio-font-weight);
+    color: var(--radio-text-color);
+
+    &.c-radio--disabled {
+        --radio-cursor: not-allowed;
+    }
+
+    input[type="radio"] {
+        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: transparent;
+        transition: background-color var(--dt-motion-timing-100) var(--radio-motion-easing);
+        flex-shrink: 0;
+
+        &:focus {
+            @include p.focus;
+        }
+
+        // The filled circle before checking the radio
+        &: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);
+        }
+
+        &:not(:disabled):before {
+            @media (prefers-reduced-motion: no-preference) {
+                transition: all var(--dt-motion-timing-100) var(--radio-motion-easing);
+            }
+        }
+
+        // The dot in the middle before checking the radio
+        &: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);
+        }
+
+        &:checked {
+            // The dot in the middle after checking the radio
+            &:after {
+                transform: translate(-50%, -50%) scale(1);
+            }
+
+            // The filled circle after checking the radio
+            &:before {
+                transform: scale(1);
+            }
+        }
+
+        // Scales down at 100ms when unchecked
+        &:not(:disabled):after {
+            @media (prefers-reduced-motion: no-preference) {
+                transition: all var(--dt-motion-timing-100) var(--radio-motion-easing);
+            }
+        }
+
+        // Scales up at 150ms when checked
+        &:not(:disabled):checked:after {
+            @media (prefers-reduced-motion: no-preference) {
+                transition: all var(--dt-motion-timing-150) var(--radio-motion-easing);
+            }
+        }
+
+        &:disabled {
+            background-color: var(--dt-color-disabled-01);
+            border-color: var(--dt-color-border-default);
+        }
+
+        &:checked:disabled {
+            --radio-dot-bg-color: var(--dt-color-content-disabled);
+            --radio-bg-color--checked: var(--dt-color-disabled-01);
+        }
+
+        &:hover:not(:checked, :disabled) {
+            background-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01));
+        }
+
+        &:active:not(:checked, :disabled) {
+            background-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01));
+        }
+
+        &:hover:checked:not(:disabled) {
+            &:before {
+                background-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)));
+                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)));
+            }
+        }
+
+        &:active:checked:not(:disabled) {
+            &:before {
+                background-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)));
+                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)));
+            }
+        }
+    }
+}

package/src/react.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent, type EventName } from '@lit/react';
 import { PieRadio as PieRadioLit } from './index';
 import { type RadioProps } from './defs';
 
@@ -10,10 +10,16 @@ const PieRadioReact = createComponent({
     elementClass: PieRadioLit,
     react: React,
     tagName: 'pie-radio',
-    events: {},
+    events: {
+        onChange: 'change' as EventName<CustomEvent>, // when the radio state is changed.
+    },
 });
 
 type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>;
 
+type PieRadioEvents = {
+    onChange?: (event: CustomEvent) => void;
+};
+
 export const PieRadio = PieRadioReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<RadioProps>
-    & React.RefAttributes<PieRadioLit> & ReactBaseType>;
+    & React.RefAttributes<PieRadioLit> & PieRadioEvents & ReactBaseType>;