@justeattakeaway/pie-radio-group 0.2.1 → 0.3.1

package/README.md

@@ -8,15 +8,6 @@
   </a>
 </p>
 
-# Table of Contents
-
-1. [Introduction](#pie-radio-group)
-2. [Installation](#installation)
-3. [Importing the component](#importing-the-component)
-4. [Peer Dependencies](#peer-dependencies)
-5. [Props](#props)
-6. [Contributing](#contributing)
-
 ## pie-radio-group
 
 `pie-radio-group` is a Web Component built using the Lit library.
@@ -29,63 +20,22 @@ This component can be easily integrated into various frontend frameworks and cus
 To install `pie-radio-group` in your application, run the following on your command line:
 
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-radio-group
-
-# yarn
-$ yarn add @justeattakeaway/pie-radio-group
-```
-
-For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
-
-
-### Importing the component
-
-#### JavaScript
-```js
-// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
-import { PieRadioGroup } from '@justeattakeaway/pie-radio-group';
-
-// If you don't need to reference the imported object, you can simply
-// import the module which registers the component as a custom element.
-import '@justeattakeaway/pie-radio-group';
+npm i @justeattakeaway/pie-radio-group
 ```
-
-#### React
-```js
-// React
-// For React, you will need to import our React-specific component build
-// which wraps the web component using ​@lit/react
-import { PieRadioGroup } from '@justeattakeaway/pie-radio-group/dist/react';
+```bash
+yarn add @justeattakeaway/pie-radio-group
 ```
 
-> [!NOTE]
-> When using the React version of the component, please make sure to also
-> include React as a [peer dependency](#peer-dependencies) in your project.
-
-
-## Peer Dependencies
-
-> [!IMPORTANT]
-> When using `pie-radio-group`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
-
-
-## Props
+For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
 
-| Property | Type | Default | Description |
-|---|---|---|---|
-| - | - | - | - |
+## Documentation
 
-In your markup or JSX, you can then use these to set the properties for the `pie-radio-group` component:
+Visit  [Radio Group | PIE Design System](https://pie.design/components/radio-group/code) to view more information on this component.
 
-```html
-<!-- Native HTML -->
-<pie-radio-group></pie-radio-group>
+## Questions
 
-<!-- JSX -->
-<PieRadioGroup></PieRadioGroup>
-```
+Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
 
 ## Contributing
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/custom-elements.json

@@ -12,6 +12,14 @@
       "kind": "javascript-module",
       "path": "src/defs.js",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "statusTypes",
+          "type": {
+            "text": "['default', 'success', 'error']"
+          },
+          "default": "['default', 'success', 'error']"
+        },
         {
           "kind": "variable",
           "name": "ON_RADIO_GROUP_DISABLED",
@@ -27,10 +35,18 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    disabled: false,\n    isInline: false,\n    value: '',\n}"
+          "default": "{\n    status: 'default',\n    disabled: false,\n    isInline: false,\n    value: '',\n}"
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "statusTypes",
+          "declaration": {
+            "name": "statusTypes",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ON_RADIO_GROUP_DISABLED",
@@ -105,6 +121,21 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "assistiveText",
+              "type": {
+                "text": "RadioGroupProps['assistiveText'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "assistiveText"
+            },
+            {
+              "kind": "field",
+              "name": "status",
+              "privacy": "public",
+              "attribute": "status"
+            },
             {
               "kind": "field",
               "name": "_slottedChildren",
@@ -131,6 +162,17 @@
               },
               "description": "Dispatches a custom event to notify each slotted child radio element\nwhen the radio group is disabled."
             },
+            {
+              "kind": "method",
+              "name": "_handleStatus",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Updates the `status` attribute of all slotted children."
+            },
             {
               "kind": "method",
               "name": "_handleRadioSelection",
@@ -231,6 +273,17 @@
             {
               "name": "disabled",
               "fieldName": "disabled"
+            },
+            {
+              "name": "assistiveText",
+              "type": {
+                "text": "RadioGroupProps['assistiveText'] | undefined"
+              },
+              "fieldName": "assistiveText"
+            },
+            {
+              "name": "status",
+              "fieldName": "status"
             }
           ],
           "mixins": [

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import type { PropertyValues } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
 
-export declare type DefaultProps = ComponentDefaultProps<RadioGroupProps, keyof Omit<RadioGroupProps, 'name'>>;
+export declare type DefaultProps = ComponentDefaultProps<RadioGroupProps, keyof Omit<RadioGroupProps, 'assistiveText' | 'name'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -30,6 +30,8 @@ export declare class PieRadioGroup extends PieRadioGroup_base implements RadioGr
     value: string;
     isInline: boolean;
     disabled: boolean;
+    assistiveText?: RadioGroupProps['assistiveText'];
+    status: "default" | "error" | "success";
     _slottedChildren: Array<HTMLInputElement>;
     private _abortController;
     /**
@@ -38,6 +40,12 @@ export declare class PieRadioGroup extends PieRadioGroup_base implements RadioGr
      * @private
      */
     private _handleDisabled;
+    /**
+     * Updates the `status` attribute of all slotted children.
+     * @private
+     * @returns {void}
+     */
+    private _handleStatus;
     /**
      * Unselects all radios that are not the selected value.
      * @param {string} selectedValue - The value of the currently selected radio.
@@ -88,6 +96,16 @@ export declare interface RadioGroupProps {
      * The value of the radio group (used as a key/value pair in HTML forms with `name`).
      */
     value?: string;
+    /**
+     * The status of the radio group component / assistive text. Can be default, success or error.
+     */
+    status?: typeof statusTypes[number];
+    /**
+     * An optional assistive text to display below the checkbox group.
+     */
+    assistiveText?: string;
 }
 
+export declare const statusTypes: readonly ["default", "success", "error"];
+
 export { }

package/dist/index.js

@@ -1,22 +1,23 @@
-import { LitElement as g, html as r, unsafeCSS as b } from "lit";
-import { state as u, property as s, queryAssignedElements as f } from "lit/decorators.js";
-import { FormControlMixin as m, RtlMixin as _, wrapNativeEvent as v, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
-import { ifDefined as y } from "lit/directives/if-defined.js";
-import { classMap as E } from "lit/directives/class-map.js";
+import { LitElement as v, html as p, nothing as u, unsafeCSS as m } from "lit";
+import { state as _, property as l, queryAssignedElements as y } from "lit/decorators.js";
+import { FormControlMixin as C, RtlMixin as x, wrapNativeEvent as S, validPropertyValues as E, defineCustomElement as $ } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as w } from "lit/directives/if-defined.js";
+import { classMap as L } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-assistive-text";
-const S = "*,*:after,*:before{box-sizing:inherit}.c-radioGroup{--radio-group-gap: var(--dt-spacing-c);--radio-group-gap--inline: var(--dt-spacing-c) var(--dt-spacing-e);margin:0;padding:0;border:0;min-width:0;display:flex;flex-flow:column wrap;gap:var(--radio-group-gap)}.c-radioGroup.c-radioGroup--inline{flex-flow:row wrap;gap:var(--radio-group-gap--inline)}", w = "pie-radio-group-disabled", d = {
+const A = "*,*:after,*:before{box-sizing:inherit}.c-radioGroup{--radio-group-gap: var(--dt-spacing-c);--radio-group-gap--inline: var(--dt-spacing-c) var(--dt-spacing-e);margin:0;padding:0;border:0;min-width:0;display:flex;flex-flow:column wrap;gap:var(--radio-group-gap)}.c-radioGroup.c-radioGroup--inline{flex-flow:row wrap;gap:var(--radio-group-gap--inline)}.c-radioGroup.c-radioGroup--hasAssistiveText{margin-block-end:var(--dt-spacing-a)}", I = ["default", "success", "error"], G = "pie-radio-group-disabled", n = {
+  status: "default",
   disabled: !1,
   isInline: !1,
   value: ""
 };
-var L = Object.defineProperty, l = (h, e, t, o) => {
-  for (var i = void 0, n = h.length - 1, c; n >= 0; n--)
-    (c = h[n]) && (i = c(e, t, i) || i);
-  return i && L(e, t, i), i;
+var R = Object.defineProperty, o = (c, e, t, d) => {
+  for (var a = void 0, i = c.length - 1, r; i >= 0; i--)
+    (r = c[i]) && (a = r(e, t, a) || a);
+  return a && R(e, t, a), a;
 };
-const x = "pie-radio-group", p = class p extends m(_(g)) {
+const b = "pie-radio-group", g = "assistive-text", h = class h extends C(x(v)) {
   constructor() {
-    super(...arguments), this._hasLabel = !1, this.value = d.value, this.isInline = d.isInline, this.disabled = d.disabled;
+    super(...arguments), this._hasLabel = !1, this.value = n.value, this.isInline = n.isInline, this.disabled = n.disabled, this.status = n.status;
   }
   /**
    * Dispatches a custom event to notify each slotted child radio element
@@ -24,12 +25,20 @@ const x = "pie-radio-group", p = class p extends m(_(g)) {
    * @private
    */
   _handleDisabled() {
-    this._slottedChildren.forEach((e) => e.dispatchEvent(new CustomEvent(w, {
+    this._slottedChildren.forEach((e) => e.dispatchEvent(new CustomEvent(G, {
       bubbles: !1,
       composed: !1,
       detail: { disabled: this.disabled }
     })));
   }
+  /**
+   * Updates the `status` attribute of all slotted children.
+   * @private
+   * @returns {void}
+   */
+  _handleStatus() {
+    this._slottedChildren.forEach((e) => e.setAttribute("status", this.status === "error" ? "error" : "default"));
+  }
   /**
    * Unselects all radios that are not the selected value.
    * @param {string} selectedValue - The value of the currently selected radio.
@@ -49,8 +58,8 @@ const x = "pie-radio-group", p = class p extends m(_(g)) {
     e.stopPropagation();
     const t = e.target;
     this._handleRadioSelection(t.value);
-    const o = v(e);
-    this.dispatchEvent(o);
+    const d = S(e);
+    this.dispatchEvent(d);
   }
   /**
    * Updates the `_hasLabel` state when content is added to the label slot.
@@ -67,10 +76,10 @@ const x = "pie-radio-group", p = class p extends m(_(g)) {
    * @private
    */
   _renderWrappedLabel() {
-    return this._hasLabel ? r`<legend><slot name='label' @slotchange=${this._handleSlotChange}></slot></legend>` : r`<slot name='label' @slotchange=${this._handleSlotChange}></slot>`;
+    return this._hasLabel ? p`<legend><slot name='label' @slotchange=${this._handleSlotChange}></slot></legend>` : p`<slot name='label' @slotchange=${this._handleSlotChange}></slot>`;
   }
   updated(e) {
-    e.has("disabled") && this._handleDisabled(), e.has("value") && this._handleRadioSelection(this.value);
+    e.has("disabled") && this._handleDisabled(), e.has("value") && this._handleRadioSelection(this.value), e.has("status") && this._handleStatus();
   }
   connectedCallback() {
     var t;
@@ -85,46 +94,65 @@ const x = "pie-radio-group", p = class p extends m(_(g)) {
     const {
       name: e,
       isInline: t,
-      disabled: o
-    } = this, i = {
+      disabled: d,
+      status: a,
+      assistiveText: i
+    } = this, r = !!(i != null && i.length), f = {
       "c-radioGroup": !0,
-      "c-radioGroup--inline": t
+      "c-radioGroup--inline": t,
+      "c-radioGroup--hasAssistiveText": r
     };
-    return r`
+    return p`
             <fieldset
-                name=${y(e)}
-                ?disabled=${o}
+                name=${w(e)}
+                ?disabled=${d}
                 data-test-id="pie-radio-group"
-                class="${E(i)}">
+                aria-describedby=${r ? g : u}
+                class="${L(f)}">
                     ${this._renderWrappedLabel()}
                 <slot></slot>
             </fieldset>
+            ${r ? p`
+                <pie-assistive-text
+                    id=${g}
+                    variant=${a}
+                    data-test-id="pie-radio-group-assistive-text">
+                        ${i}
+                    </pie-assistive-text>` : u}
         `;
   }
 };
-p.styles = b(S);
-let a = p;
-l([
-  u()
-], a.prototype, "_hasLabel");
-l([
-  s({ type: String })
-], a.prototype, "name");
-l([
-  s({ type: String })
-], a.prototype, "value");
-l([
-  s({ type: Boolean })
-], a.prototype, "isInline");
-l([
-  s({ type: Boolean, reflect: !0 })
-], a.prototype, "disabled");
-l([
-  f({ selector: "pie-radio" })
-], a.prototype, "_slottedChildren");
-C(x, a);
+h.styles = m(A);
+let s = h;
+o([
+  _()
+], s.prototype, "_hasLabel");
+o([
+  l({ type: String })
+], s.prototype, "name");
+o([
+  l({ type: String })
+], s.prototype, "value");
+o([
+  l({ type: Boolean })
+], s.prototype, "isInline");
+o([
+  l({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled");
+o([
+  l({ type: String })
+], s.prototype, "assistiveText");
+o([
+  l({ type: String }),
+  E(b, I, n.status)
+], s.prototype, "status");
+o([
+  y({ selector: "pie-radio" })
+], s.prototype, "_slottedChildren");
+$(b, s);
 export {
-  w as ON_RADIO_GROUP_DISABLED,
-  a as PieRadioGroup,
-  d as defaultProps
+  G as ON_RADIO_GROUP_DISABLED,
+  s as PieRadioGroup,
+  n as defaultProps,
+  I as statusTypes
 };

package/dist/react.d.ts

@@ -8,7 +8,7 @@ import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
 
-export declare type DefaultProps = ComponentDefaultProps<RadioGroupProps, keyof Omit<RadioGroupProps, 'name'>>;
+export declare type DefaultProps = ComponentDefaultProps<RadioGroupProps, keyof Omit<RadioGroupProps, 'assistiveText' | 'name'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -33,6 +33,8 @@ declare class PieRadioGroup_2 extends PieRadioGroup_base implements RadioGroupPr
     value: string;
     isInline: boolean;
     disabled: boolean;
+    assistiveText?: RadioGroupProps['assistiveText'];
+    status: "default" | "error" | "success";
     _slottedChildren: Array<HTMLInputElement>;
     private _abortController;
     /**
@@ -41,6 +43,12 @@ declare class PieRadioGroup_2 extends PieRadioGroup_base implements RadioGroupPr
      * @private
      */
     private _handleDisabled;
+    /**
+     * Updates the `status` attribute of all slotted children.
+     * @private
+     * @returns {void}
+     */
+    private _handleStatus;
     /**
      * Unselects all radios that are not the selected value.
      * @param {string} selectedValue - The value of the currently selected radio.
@@ -95,8 +103,18 @@ export declare interface RadioGroupProps {
      * The value of the radio group (used as a key/value pair in HTML forms with `name`).
      */
     value?: string;
+    /**
+     * The status of the radio group component / assistive text. Can be default, success or error.
+     */
+    status?: typeof statusTypes[number];
+    /**
+     * An optional assistive text to display below the checkbox group.
+     */
+    assistiveText?: string;
 }
 
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
 
+export declare const statusTypes: readonly ["default", "success", "error"];
+
 export { }

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as o from "react";
 import { createComponent as e } from "@lit/react";
 import { PieRadioGroup as a } from "./index.js";
-import { ON_RADIO_GROUP_DISABLED as s, defaultProps as R } from "./index.js";
+import { ON_RADIO_GROUP_DISABLED as n, defaultProps as R, statusTypes as d } from "./index.js";
 const r = e({
   displayName: "PieRadioGroup",
   elementClass: a,
@@ -13,7 +13,8 @@ const r = e({
   }
 }), p = r;
 export {
-  s as ON_RADIO_GROUP_DISABLED,
+  n as ON_RADIO_GROUP_DISABLED,
   p as PieRadioGroup,
-  R as defaultProps
+  R as defaultProps,
+  d as statusTypes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-radio-group",
   "description": "PIE Design System Radio Group built using Web Components",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -38,11 +38,11 @@
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
     "@justeattakeaway/pie-css": "0.13.1",
-    "@justeattakeaway/pie-radio": "0.4.0",
+    "@justeattakeaway/pie-radio": "0.5.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.7.5",
+    "@justeattakeaway/pie-assistive-text": "0.8.1",
     "@justeattakeaway/pie-webc-core": "0.24.2"
   },
   "volta": {

package/src/defs.ts

@@ -1,5 +1,7 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
+export const statusTypes = ['default', 'success', 'error'] as const;
+
 export interface RadioGroupProps {
     /**
     * The name associated with the group.
@@ -20,6 +22,16 @@ export interface RadioGroupProps {
      * The value of the radio group (used as a key/value pair in HTML forms with `name`).
      */
     value?: string;
+
+    /**
+     * The status of the radio group component / assistive text. Can be default, success or error.
+     */
+    status?: typeof statusTypes[number];
+
+    /**
+     * An optional assistive text to display below the checkbox group.
+     */
+    assistiveText?: string;
 }
 
 /**
@@ -29,9 +41,10 @@ export interface RadioGroupProps {
  */
 export const ON_RADIO_GROUP_DISABLED = 'pie-radio-group-disabled';
 
-export type DefaultProps = ComponentDefaultProps<RadioGroupProps, keyof Omit<RadioGroupProps, 'name'>>;
+export type DefaultProps = ComponentDefaultProps<RadioGroupProps, keyof Omit<RadioGroupProps, 'assistiveText' | 'name'>>;
 
 export const defaultProps: DefaultProps = {
+    status: 'default',
     disabled: false,
     isInline: false,
     value: '',

package/src/index.ts

@@ -1,5 +1,10 @@
 import {
-    LitElement, html, unsafeCSS, type PropertyValues, type TemplateResult,
+    LitElement,
+    html,
+    unsafeCSS,
+    nothing,
+    type PropertyValues,
+    type TemplateResult,
 } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
 import {
@@ -7,6 +12,7 @@ import {
     defineCustomElement,
     FormControlMixin,
     wrapNativeEvent,
+    validPropertyValues,
 } from '@justeattakeaway/pie-webc-core';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -14,6 +20,7 @@ import styles from './radio-group.scss?inline';
 import {
     type RadioGroupProps,
     defaultProps,
+    statusTypes,
     ON_RADIO_GROUP_DISABLED,
 } from './defs';
 import '@justeattakeaway/pie-assistive-text';
@@ -22,6 +29,7 @@ import '@justeattakeaway/pie-assistive-text';
 export * from './defs';
 
 const componentSelector = 'pie-radio-group';
+const assistiveTextId = 'assistive-text';
 
 /**
  * @tagname pie-radio-group
@@ -45,6 +53,13 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem
     @property({ type: Boolean, reflect: true })
     public disabled = defaultProps.disabled;
 
+    @property({ type: String })
+    public assistiveText?: RadioGroupProps['assistiveText'];
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
+    public status = defaultProps.status;
+
     @queryAssignedElements({ selector: 'pie-radio' })
         _slottedChildren!: Array<HTMLInputElement>;
 
@@ -61,6 +76,15 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem
         })));
     }
 
+    /**
+     * Updates the `status` attribute of all slotted children.
+     * @private
+     * @returns {void}
+     */
+    private _handleStatus (): void {
+        this._slottedChildren.forEach((child) => child.setAttribute('status', this.status === 'error' ? 'error' : 'default'));
+    }
+
     /**
      * Unselects all radios that are not the selected value.
      * @param {string} selectedValue - The value of the currently selected radio.
@@ -117,6 +141,10 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem
         if (_changedProperties.has('value')) {
             this._handleRadioSelection(this.value);
         }
+
+        if (_changedProperties.has('status')) {
+            this._handleStatus();
+        }
     }
 
     connectedCallback (): void {
@@ -137,11 +165,16 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem
             name,
             isInline,
             disabled,
+            status,
+            assistiveText,
         } = this;
 
+        const hasAssistiveText = Boolean(assistiveText?.length);
+
         const classes = {
             'c-radioGroup': true,
             'c-radioGroup--inline': isInline,
+            'c-radioGroup--hasAssistiveText': hasAssistiveText,
         };
 
         return html`
@@ -149,10 +182,19 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem
                 name=${ifDefined(name)}
                 ?disabled=${disabled}
                 data-test-id="pie-radio-group"
+                aria-describedby=${hasAssistiveText ? assistiveTextId : nothing}
                 class="${classMap(classes)}">
                     ${this._renderWrappedLabel()}
                 <slot></slot>
             </fieldset>
+            ${hasAssistiveText ? html`
+                <pie-assistive-text
+                    id=${assistiveTextId}
+                    variant=${status}
+                    data-test-id="pie-radio-group-assistive-text">
+                        ${assistiveText}
+                    </pie-assistive-text>`
+            : nothing}
         `;
     }
 

package/src/radio-group.scss

@@ -16,4 +16,8 @@
         flex-flow: row wrap;
         gap: var(--radio-group-gap--inline);
     }
+
+    &.c-radioGroup--hasAssistiveText {
+        margin-block-end: var(--dt-spacing-a);
+    }
 }