@justeattakeaway/pie-radio-group 1.1.4 → 1.2.0

package/README.md

@@ -34,7 +34,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | Prop           | Options                                      | Description                                                                                                              | Default     |
 |----------------|----------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|-------------|
 | `name`         | —                                            | The name associated with the group.                                                                                      | `undefined` |
-| `value`        | —                                            | The value of the radio group (used as a key/value pair in HTML forms with `name`).                                       | `""`        |
+| `value`        | —                                            | Selects the radio whose `value` matches (unselecting the others), and is the group's form value alongside `name`. Set this to pre-select an option. | `""`        |
 | `isInline`     | `true`, `false`                              | Inline (horizontal) positioning of radio items.                                                                          | `false`     |
 | `disabled`     | `true`, `false`                              | Indicates whether or not the radio group is disabled.                                                                    | `false`     |
 | `assistiveText`| —                                            | An optional assistive text to display below the checkbox group.                                                          | `undefined` |
@@ -43,8 +43,8 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 ### Slots
 | Slot      | Description                                                                                      |
 |-----------|--------------------------------------------------------------------------------------------------|
-| `default` | This should be [`pie-radio-button`](/components/radio) components without any other HTML.        |
-| `label`   | To provide a custom label for the radio group. Please use [`pie-form-label`](/components/form-label). |
+| `default` | Either [`pie-radio`](https://webc.pie.design/?path=/docs/components-radio--overview) components, or [`pie-list-item`](https://webc.pie.design/?path=/docs/components-list--overview) components that each slot a `pie-radio` for a list-style layout (see [List items in a radio group](#list-items-in-a-radio-group)). Do not add other HTML. |
+| `label`   | To provide a custom label for the radio group. Please use [`pie-form-label`](https://webc.pie.design/?path=/docs/components-form-label--overview). |
 
 ### CSS Variables
 This component does not expose any CSS variables for style overrides.
@@ -116,6 +116,44 @@ import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
 </PieRadioGroup>
 ```
 
+### List items in a radio group
+
+For a list-style layout (each option on its own row with primary and secondary text, and dividers between rows), wrap each `pie-radio` in a [`pie-list-item`](https://webc.pie.design/?path=/docs/components-list--overview) with `selection-type="radio"`. The radio goes in the item's `leading` (or `trailing`) slot, and you provide the label through the item's `primaryText` rather than as the radio's content. The group lays the rows out as a divided list automatically when its children are `pie-list-item`s.
+
+`selection-type="radio"` on each **item** makes that row a selectable target:
+
+- the item takes a `presentation` role, so the group still owns its `radio` children directly;
+- the item's `primaryText` becomes the radio's accessible name (`aria-label`), and its `secondaryText` and `metaText` its `aria-description`, so you do not pass label text to the radio itself;
+- the visible item text is hidden from assistive technology so it is not announced twice;
+- clicking anywhere on a row selects that row's radio.
+
+Keyboard navigation, focus management and selection are identical to a standard radio group.
+
+```js
+import '@justeattakeaway/pie-webc/components/radio-group.js';
+import '@justeattakeaway/pie-webc/components/radio.js';
+import '@justeattakeaway/pie-webc/components/form-label.js';
+import '@justeattakeaway/pie-webc/components/list-item.js';
+```
+
+```html
+<pie-radio-group name="delivery">
+  <pie-form-label slot="label">Delivery method</pie-form-label>
+  <pie-list-item selection-type="radio" primaryText="Standard delivery" secondaryText="3 to 5 working days" metaText="Free">
+    <pie-radio slot="leading" value="standard"></pie-radio>
+  </pie-list-item>
+  <pie-list-item selection-type="radio" primaryText="Express delivery" secondaryText="Next working day" metaText="£4.99">
+    <pie-radio slot="leading" value="express"></pie-radio>
+  </pie-list-item>
+  <pie-list-item selection-type="radio" disabled primaryText="Collection" secondaryText="Collect from a nearby store">
+    <pie-radio slot="leading" value="collection" disabled></pie-radio>
+  </pie-list-item>
+  <pie-list-item selection-type="radio" primaryText="Locker" secondaryText="Pick up from a parcel locker" metaText="£1.99">
+    <pie-radio slot="leading" value="locker"></pie-radio>
+  </pie-list-item>
+</pie-radio-group>
+```
+
 ## Questions and Support
 
 If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).

package/custom-elements.json

@@ -140,6 +140,11 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_disabledProvider",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "assistiveText",
@@ -157,19 +162,30 @@
             },
             {
               "kind": "field",
-              "name": "_slottedChildren",
+              "name": "_abortController",
               "type": {
-                "text": "Array<HTMLInputElement>"
-              }
+                "text": "AbortController"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_abortController",
+              "name": "_mutationObserver",
               "type": {
-                "text": "AbortController"
+                "text": "MutationObserver"
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_slottedChildren",
+              "type": {
+                "text": "HTMLInputElement[]"
+              },
+              "privacy": "private",
+              "description": "The radios in the group. This uses a subtree query rather than immediate slotted\nchildren so radios wrapped in `pie-list-item`s (at any depth) are discovered. It is\na superset of the previous immediate-child query, so radios passed as direct children\nkeep working unchanged.",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "_handleDisabled",

package/dist/index.d.ts

@@ -32,10 +32,18 @@ export declare class PieRadioGroup extends PieRadioGroup_base implements RadioGr
     value: string;
     isInline: boolean;
     disabled: boolean;
+    private _disabledProvider;
     assistiveText?: RadioGroupProps['assistiveText'];
     status: "default" | "success" | "error";
-    _slottedChildren: Array<HTMLInputElement>;
     private _abortController;
+    private _mutationObserver;
+    /**
+     * The radios in the group. This uses a subtree query rather than immediate slotted
+     * children so radios wrapped in `pie-list-item`s (at any depth) are discovered. It is
+     * a superset of the previous immediate-child query, so radios passed as direct children
+     * keep working unchanged.
+     */
+    private get _slottedChildren();
     /**
      * Dispatches a custom event to notify each slotted child radio element
      * when the radio group is disabled.

package/dist/index.js

@@ -1,31 +1,114 @@
-import { LitElement as v, html as u, nothing as g, unsafeCSS as C } from "lit";
-import { state as b, property as h, queryAssignedElements as y } from "lit/decorators.js";
-import { FormControlMixin as x, RtlMixin as w, wrapNativeEvent as T, validPropertyValues as I, safeCustomElement as S } from "@justeattakeaway/pie-webc-core";
-import { ifDefined as R } from "lit/directives/if-defined.js";
-import { classMap as E } from "lit/directives/class-map.js";
+import { LitElement as x, isServer as C, html as p, nothing as m, unsafeCSS as y } from "lit";
+import { state as _, property as u } from "lit/decorators.js";
+import { FormControlMixin as w, RtlMixin as T, parentDisabledContext as R, wrapNativeEvent as S, validPropertyValues as E, safeCustomElement as I } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as L } from "lit/directives/if-defined.js";
+import { classMap as O } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-assistive-text";
-const p = class p extends v {
+const b = class b extends x {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", p.v);
+    this.getAttribute("v") || this.setAttribute("v", b.v);
   }
 };
-p.v = "1.1.4";
-let _ = p;
-const A = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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>legend{margin-block-end:var(--dt-spacing-b)}.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)}", L = ["default", "success", "error"], N = "pie-radio-group-disabled", c = {
+b.v = "1.2.0";
+let f = b;
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let A = class extends Event {
+  constructor(e, s, i, o) {
+    super("context-request", { bubbles: !0, composed: !0 }), this.context = e, this.contextTarget = s, this.callback = i, this.subscribe = o ?? !1;
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class D {
+  get value() {
+    return this.o;
+  }
+  set value(e) {
+    this.setValue(e);
+  }
+  setValue(e, s = !1) {
+    const i = s || !Object.is(e, this.o);
+    this.o = e, i && this.updateObservers();
+  }
+  constructor(e) {
+    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
+      for (const [s, { disposer: i }] of this.subscriptions) s(this.o, i);
+    }, e !== void 0 && (this.value = e);
+  }
+  addCallback(e, s, i) {
+    if (!i) return void e(this.value);
+    this.subscriptions.has(e) || this.subscriptions.set(e, { disposer: () => {
+      this.subscriptions.delete(e);
+    }, consumerHost: s });
+    const { disposer: o } = this.subscriptions.get(e);
+    e(this.value, o);
+  }
+  clearCallbacks() {
+    this.subscriptions.clear();
+  }
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class N extends Event {
+  constructor(e, s) {
+    super("context-provider", { bubbles: !0, composed: !0 }), this.context = e, this.contextTarget = s;
+  }
+}
+class F extends D {
+  constructor(e, s, i) {
+    var o, r;
+    super(s.context !== void 0 ? s.initialValue : i), this.onContextRequest = (a) => {
+      if (a.context !== this.context) return;
+      const n = a.contextTarget ?? a.composedPath()[0];
+      n !== this.host && (a.stopPropagation(), this.addCallback(a.callback, n, a.subscribe));
+    }, this.onProviderRequest = (a) => {
+      if (a.context !== this.context || (a.contextTarget ?? a.composedPath()[0]) === this.host) return;
+      const n = /* @__PURE__ */ new Set();
+      for (const [h, { consumerHost: v }] of this.subscriptions) n.has(h) || (n.add(h), v.dispatchEvent(new A(this.context, v, h, !0)));
+      a.stopPropagation();
+    }, this.host = e, s.context !== void 0 ? this.context = s.context : this.context = s, this.attachListeners(), (r = (o = this.host).addController) == null || r.call(o, this);
+  }
+  attachListeners() {
+    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+  }
+  hostConnected() {
+    this.host.dispatchEvent(new N(this.context, this.host));
+  }
+}
+const P = "*,*:after,*:before{box-sizing:inherit}:host{display:block}:host ::slotted(pie-list-item:not(:last-of-type)){--list-item-size-modifier: 1px;--list-item-border: var(--list-item-size-modifier) solid var(--dt-color-divider-default)}.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}.c-radioGroup>legend{margin-block-end:var(--dt-spacing-b)}.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)}:host(:not([isinline])) ::slotted(pie-radio:not(:first-of-type)){margin-block-start:var(--radio-group-gap)}", G = ["default", "success", "error"], $ = "pie-radio-group-disabled", c = {
   status: "default",
   disabled: !1,
   isInline: !1,
   value: ""
 };
-var D = Object.defineProperty, O = Object.getOwnPropertyDescriptor, r = (e, t, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? O(t, i) : t, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (o = (s ? n(t, i, o) : n(o)) || o);
-  return s && o && D(t, i, o), o;
+var k = Object.defineProperty, B = Object.getOwnPropertyDescriptor, d = (t, e, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? B(e, s) : e, r = t.length - 1, a; r >= 0; r--)
+    (a = t[r]) && (o = (i ? a(e, s, o) : a(o)) || o);
+  return i && o && k(e, s, o), o;
 };
-const F = "pie-radio-group", m = "assistive-text";
-let a = class extends x(w(_)) {
+const q = "pie-radio-group", g = "assistive-text";
+let l = class extends w(T(f)) {
   constructor() {
-    super(...arguments), this._hasLabel = !1, this._fieldSetTabIndex = 0, this._allRadiosDisabled = !1, this.value = c.value, this.isInline = c.isInline, this.disabled = c.disabled, this.status = c.status;
+    super(...arguments), this._hasLabel = !1, this._fieldSetTabIndex = 0, this._allRadiosDisabled = !1, this.value = c.value, this.isInline = c.isInline, this.disabled = c.disabled, this._disabledProvider = C ? void 0 : new F(this, { context: R, initialValue: c.disabled }), this.status = c.status;
+  }
+  /**
+   * The radios in the group. This uses a subtree query rather than immediate slotted
+   * children so radios wrapped in `pie-list-item`s (at any depth) are discovered. It is
+   * a superset of the previous immediate-child query, so radios passed as direct children
+   * keep working unchanged.
+   */
+  get _slottedChildren() {
+    return Array.from(this.querySelectorAll("pie-radio"));
   }
   /**
    * Dispatches a custom event to notify each slotted child radio element
@@ -33,11 +116,11 @@ let a = class extends x(w(_)) {
    * @private
    */
   _handleDisabled() {
-    this._slottedChildren.forEach((e) => e.dispatchEvent(new CustomEvent(N, {
+    this._slottedChildren.forEach((t) => t.dispatchEvent(new CustomEvent($, {
       bubbles: !1,
       composed: !1,
       detail: { disabled: this.disabled }
-    }))), this._allRadiosDisabled = this._slottedChildren.every((e) => e.disabled);
+    }))), this._allRadiosDisabled = this._slottedChildren.every((t) => t.disabled);
   }
   /**
    * Updates the `status` attribute of all slotted children.
@@ -45,16 +128,16 @@ let a = class extends x(w(_)) {
    * @returns {void}
    */
   _handleStatus() {
-    this._slottedChildren.forEach((e) => e.setAttribute("status", this.status === "error" ? "error" : "default"));
+    this._slottedChildren.forEach((t) => t.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.
    * @private
    */
-  _handleRadioSelection(e) {
-    this.value = e, this._slottedChildren.forEach((t) => {
-      t.checked = t.value === this.value;
+  _handleRadioSelection(t) {
+    this.value = t, this._slottedChildren.forEach((e) => {
+      e.checked = e.value === this.value;
     });
   }
   /**
@@ -62,21 +145,21 @@ let a = class extends x(w(_)) {
    * @param {Event} event - The change event from a radio element.
    * @private
    */
-  _handleRadioChange(e) {
-    e.stopPropagation();
-    const t = e.target;
-    this._handleRadioSelection(t.value), this._resetButtonsTabIndex();
-    const i = T(e);
-    this.dispatchEvent(i);
+  _handleRadioChange(t) {
+    t.stopPropagation();
+    const e = t.target;
+    this._handleRadioSelection(e.value), this._resetButtonsTabIndex();
+    const s = S(t);
+    this.dispatchEvent(s);
   }
   /**
    * Updates the `_hasLabel` state when content is added to the label slot.
    * @param {Event} e - The slotchange event.
    * @private
    */
-  _handleLabelSlotChange(e) {
-    const t = e.target.assignedNodes({ flatten: !0 });
-    this._hasLabel = t.length > 0;
+  _handleLabelSlotChange(t) {
+    const e = t.target.assignedNodes({ flatten: !0 });
+    this._hasLabel = e.length > 0;
   }
   /**
    * Ensures all newly added radio buttons are tabbable and inherit the name property
@@ -88,8 +171,8 @@ let a = class extends x(w(_)) {
    * Prevent radio buttons from receiving focus
    */
   _resetButtonsTabIndex() {
-    this._slottedChildren.forEach((e) => {
-      e.tabIndex = -1;
+    this._slottedChildren.forEach((t) => {
+      t.tabIndex = -1;
     });
   }
   /**
@@ -98,42 +181,43 @@ let a = class extends x(w(_)) {
    * @private
    */
   _renderWrappedLabel() {
-    return this._hasLabel ? u`<legend><slot name='label' @slotchange=${this._handleLabelSlotChange}></slot></legend>` : u`<slot name='label' @slotchange=${this._handleLabelSlotChange}></slot>`;
+    return this._hasLabel ? p`<legend><slot name='label' @slotchange=${this._handleLabelSlotChange}></slot></legend>` : p`<slot name='label' @slotchange=${this._handleLabelSlotChange}></slot>`;
   }
   _applyNameToChildren() {
-    this._slottedChildren.forEach((e) => {
-      this.name && e.setAttribute("name", this.name);
+    this._slottedChildren.forEach((t) => {
+      this.name && t.setAttribute("name", this.name);
     });
   }
-  updated(e) {
-    e.has("disabled") && this._handleDisabled(), e.has("value") && this._handleRadioSelection(this.value), e.has("status") && this._handleStatus(), e.has("name") && this._applyNameToChildren();
+  updated(t) {
+    var e;
+    t.has("disabled") && ((e = this._disabledProvider) == null || e.setValue(this.disabled), this._handleDisabled()), t.has("value") && this._handleRadioSelection(this.value), t.has("status") && this._handleStatus(), t.has("name") && this._applyNameToChildren();
   }
   connectedCallback() {
-    var t;
+    var e;
     super.connectedCallback(), this._abortController = new AbortController();
-    const { signal: e } = this._abortController;
-    this.addEventListener("focus", this._handleFocus, { signal: e }), this.addEventListener("focusout", this._handleFocusOut, { signal: e }), (t = this.shadowRoot) == null || t.addEventListener("change", this._handleRadioChange.bind(this), { signal: e }), this.addEventListener("keydown", this._handleKeyDown, { signal: e }), this._applyNameToChildren();
+    const { signal: t } = this._abortController;
+    this.addEventListener("focus", this._handleFocus, { signal: t }), this.addEventListener("focusout", this._handleFocusOut, { signal: t }), (e = this.shadowRoot) == null || e.addEventListener("change", this._handleRadioChange.bind(this), { signal: t }), this.addEventListener("keydown", this._handleKeyDown, { signal: t }), this._applyNameToChildren(), this._mutationObserver = new MutationObserver(() => this._handleRadioSlotChange()), this._mutationObserver.observe(this, { childList: !0, subtree: !0 });
   }
   /**
    * This method determines the appropriate element to focus when the radio group
    * gains focus. It considers where the focus is coming from, and focuses the
    * the first or the last option as needed.
    */
-  _focusNearestAvailableRadio(e, t) {
-    const i = t.relatedTarget || this.parentNode, l = this.compareDocumentPosition(i) & Node.DOCUMENT_POSITION_PRECEDING ? e.shift() : e.pop();
-    l && (l.tabIndex = 0, l.focus()), e.forEach((n) => {
-      n.tabIndex = -1;
+  _focusNearestAvailableRadio(t, e) {
+    const s = e.relatedTarget || this.parentNode, r = this.compareDocumentPosition(s) & Node.DOCUMENT_POSITION_PRECEDING ? t.shift() : t.pop();
+    r && (r.tabIndex = 0, r.focus()), t.forEach((a) => {
+      a.tabIndex = -1;
     });
   }
   /**
    * Handles the `focus` event to manage focus within the radio group.
    *
    */
-  _handleFocus(e) {
-    const t = this._slottedChildren.filter((s) => !s.disabled);
-    if (!t || t.length === 0) return;
-    this.value === "" || this.value === void 0 ? this._focusNearestAvailableRadio(t, e) : this._slottedChildren.forEach((s) => {
-      s.value === this.value ? s.disabled ? this._focusNearestAvailableRadio(t, e) : (s.tabIndex = 0, s.focus()) : s.tabIndex = -1;
+  _handleFocus(t) {
+    const e = this._slottedChildren.filter((i) => !i.disabled);
+    if (!e || e.length === 0) return;
+    this.value === "" || this.value === void 0 ? this._focusNearestAvailableRadio(e, t) : this._slottedChildren.forEach((i) => {
+      i.value === this.value ? i.disabled ? this._focusNearestAvailableRadio(e, t) : (i.tabIndex = 0, i.focus()) : i.tabIndex = -1;
     });
   }
   /**
@@ -148,24 +232,24 @@ let a = class extends x(w(_)) {
    * to the correspondent radio, so ir can be re-focused when tabbing back into
    * the group.
    */
-  _handleFocusOut(e) {
-    const t = e.relatedTarget;
-    if (!t) {
+  _handleFocusOut(t) {
+    const e = t.relatedTarget;
+    if (!e) {
       this._resetButtonsTabIndex(), this._fieldSetTabIndex = 0;
       return;
     }
-    (t.compareDocumentPosition(this) & Node.DOCUMENT_POSITION_CONTAINS) === 0 ? (this._resetButtonsTabIndex(), this._fieldSetTabIndex = 0) : this._fieldSetTabIndex = -1;
+    (e.compareDocumentPosition(this) & Node.DOCUMENT_POSITION_CONTAINS) === 0 ? (this._resetButtonsTabIndex(), this._fieldSetTabIndex = 0) : this._fieldSetTabIndex = -1;
   }
-  _moveFocus(e, t) {
-    var n, d;
-    if (!this._slottedChildren.filter((f) => !f.disabled)) return;
-    const s = (e + t + this._slottedChildren.length) % this._slottedChildren.length, o = this._slottedChildren[s];
+  _moveFocus(t, e) {
+    var a, n;
+    if (!this._slottedChildren.filter((h) => !h.disabled)) return;
+    const i = (t + e + this._slottedChildren.length) % this._slottedChildren.length, o = this._slottedChildren[i];
     if (o.disabled) {
-      t === 0 ? this._moveFocus(s, 1) : this._moveFocus(s, t);
+      e === 0 ? this._moveFocus(i, 1) : this._moveFocus(i, e);
       return;
     }
-    const l = o;
-    l.focus(), (d = (n = l.shadowRoot) == null ? void 0 : n.querySelector("input")) == null || d.click();
+    const r = o;
+    r.focus(), (n = (a = r.shadowRoot) == null ? void 0 : a.querySelector("input")) == null || n.click();
   }
   /**
    * Determines if a key press indicates forward navigation within the radio group.
@@ -179,8 +263,8 @@ let a = class extends x(w(_)) {
    * - For RTL (Right-to-Left) layouts:
    *   - `ArrowLeft` and `ArrowDown` indicate forward navigation.
    */
-  _isForwardKey(e) {
-    return e.code === "ArrowRight" && !this.isRTL || e.code === "ArrowLeft" && this.isRTL || e.code === "ArrowDown";
+  _isForwardKey(t) {
+    return t.code === "ArrowRight" && !this.isRTL || t.code === "ArrowLeft" && this.isRTL || t.code === "ArrowDown";
   }
   /**
    * Determines if a key press indicates backward navigation within the radio group.
@@ -194,8 +278,8 @@ let a = class extends x(w(_)) {
    * - For RTL (Right-to-Left) layouts:
    *   - `ArrowRight` and `ArrowUp` indicate backward navigation.
    */
-  _isBackwardKey(e) {
-    return e.code === "ArrowLeft" && !this.isRTL || e.code === "ArrowRight" && this.isRTL || e.code === "ArrowUp";
+  _isBackwardKey(t) {
+    return t.code === "ArrowLeft" && !this.isRTL || t.code === "ArrowRight" && this.isRTL || t.code === "ArrowUp";
   }
   /**
    * Handles keyboard navigation within the radio group using arrow keys.
@@ -204,90 +288,88 @@ let a = class extends x(w(_)) {
    * action (forward or backward) based on the pressed key and the current focus. It prevents
    * the default browser behaviour (e.g., scrolling) when arrow keys are used for navigation.
    */
-  _handleKeyDown(e) {
-    const t = this._slottedChildren.find((s) => s === document.activeElement);
-    if (!t)
+  _handleKeyDown(t) {
+    const e = this._slottedChildren.find((i) => i === document.activeElement);
+    if (!e)
       return;
-    const i = this._slottedChildren.indexOf(t);
-    i !== -1 && (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(e.code) && e.preventDefault(), this._isForwardKey(e) ? this._moveFocus(i, 1) : this._isBackwardKey(e) ? this._moveFocus(i, -1) : e.code === "Space" && this._moveFocus(i, 0));
+    const s = this._slottedChildren.indexOf(e);
+    s !== -1 && (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(t.code) && t.preventDefault(), this._isForwardKey(t) ? this._moveFocus(s, 1) : this._isBackwardKey(t) ? this._moveFocus(s, -1) : t.code === "Space" && this._moveFocus(s, 0));
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._abortController.abort();
+    var t;
+    super.disconnectedCallback(), this._abortController.abort(), (t = this._mutationObserver) == null || t.disconnect();
   }
   render() {
     const {
-      name: e,
-      isInline: t,
-      disabled: i,
-      status: s,
+      name: t,
+      isInline: e,
+      disabled: s,
+      status: i,
       assistiveText: o,
-      _fieldSetTabIndex: l,
-      _allRadiosDisabled: n
-    } = this, d = !!(o != null && o.length), f = {
+      _fieldSetTabIndex: r,
+      _allRadiosDisabled: a
+    } = this, n = !!(o != null && o.length), h = {
       "c-radioGroup": !0,
-      "c-radioGroup--inline": t,
-      "c-radioGroup--hasAssistiveText": d
+      "c-radioGroup--inline": e,
+      "c-radioGroup--hasAssistiveText": n
     };
-    return u`
+    return p`
             <fieldset
-                tabindex=${n ? -1 : l}
+                tabindex=${a ? -1 : r}
                 role="radiogroup"
-                name=${R(e)}
-                ?disabled=${i}
+                name=${L(t)}
+                ?disabled=${s}
                 data-test-id="pie-radio-group-fieldset"
-                aria-describedby=${d ? m : g}
-                class="${E(f)}">
+                aria-describedby=${n ? g : m}
+                class="${O(h)}">
                     ${this._renderWrappedLabel()}
                 <slot @slotchange=${this._handleRadioSlotChange}></slot>
             </fieldset>
-            ${d ? u`
+            ${n ? p`
                 <pie-assistive-text
-                    id=${m}
-                    variant=${s}
+                    id=${g}
+                    variant=${i}
                     message=${o}
                     data-test-id="pie-radio-group-assistive-text">
-                    </pie-assistive-text>` : g}
+                    </pie-assistive-text>` : m}
         `;
   }
 };
-a.styles = C(A);
-r([
-  b()
-], a.prototype, "_hasLabel", 2);
-r([
-  b()
-], a.prototype, "_fieldSetTabIndex", 2);
-r([
-  b()
-], a.prototype, "_allRadiosDisabled", 2);
-r([
-  h({ type: String, reflect: !0 })
-], a.prototype, "name", 2);
-r([
-  h({ type: String })
-], a.prototype, "value", 2);
-r([
-  h({ type: Boolean })
-], a.prototype, "isInline", 2);
-r([
-  h({ type: Boolean, reflect: !0 })
-], a.prototype, "disabled", 2);
-r([
-  h({ type: String })
-], a.prototype, "assistiveText", 2);
-r([
-  h({ type: String }),
-  I(F, L, c.status)
-], a.prototype, "status", 2);
-r([
-  y({ selector: "pie-radio" })
-], a.prototype, "_slottedChildren", 2);
-a = r([
-  S("pie-radio-group")
-], a);
+l.styles = y(P);
+d([
+  _()
+], l.prototype, "_hasLabel", 2);
+d([
+  _()
+], l.prototype, "_fieldSetTabIndex", 2);
+d([
+  _()
+], l.prototype, "_allRadiosDisabled", 2);
+d([
+  u({ type: String, reflect: !0 })
+], l.prototype, "name", 2);
+d([
+  u({ type: String })
+], l.prototype, "value", 2);
+d([
+  u({ type: Boolean })
+], l.prototype, "isInline", 2);
+d([
+  u({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+d([
+  u({ type: String })
+], l.prototype, "assistiveText", 2);
+d([
+  u({ type: String }),
+  E(q, G, c.status)
+], l.prototype, "status", 2);
+l = d([
+  I("pie-radio-group")
+], l);
 export {
-  N as ON_RADIO_GROUP_DISABLED,
-  a as PieRadioGroup,
+  $ as ON_RADIO_GROUP_DISABLED,
+  l as PieRadioGroup,
   c as defaultProps,
-  L as statusTypes
+  G as statusTypes
 };

package/dist/react.d.ts

@@ -35,10 +35,18 @@ declare class PieRadioGroup_2 extends PieRadioGroup_base implements RadioGroupPr
     value: string;
     isInline: boolean;
     disabled: boolean;
+    private _disabledProvider;
     assistiveText?: RadioGroupProps['assistiveText'];
     status: "default" | "success" | "error";
-    _slottedChildren: Array<HTMLInputElement>;
     private _abortController;
+    private _mutationObserver;
+    /**
+     * The radios in the group. This uses a subtree query rather than immediate slotted
+     * children so radios wrapped in `pie-list-item`s (at any depth) are discovered. It is
+     * a superset of the previous immediate-child query, so radios passed as direct children
+     * keep working unchanged.
+     */
+    private get _slottedChildren();
     /**
      * Dispatches a custom event to notify each slotted child radio element
      * when the radio group is disabled.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-radio-group",
   "description": "PIE Design System Radio Group built using Web Components",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -44,13 +44,14 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.3.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.6",
-    "@justeattakeaway/pie-radio": "1.1.18"
+    "@justeattakeaway/pie-css": "1.3.1",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.7",
+    "@justeattakeaway/pie-radio": "1.2.0"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "1.0.4",
-    "@justeattakeaway/pie-webc-core": "16.0.0"
+    "@justeattakeaway/pie-assistive-text": "1.0.6",
+    "@justeattakeaway/pie-webc-core": "16.1.0",
+    "@lit/context": "1.1.6"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [

package/src/index.ts

@@ -1,5 +1,6 @@
 import {
     html,
+    isServer,
     unsafeCSS,
     nothing,
     type PropertyValues,
@@ -7,14 +8,16 @@ import {
 } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import {
-    property, queryAssignedElements, state,
+    property, state,
 } from 'lit/decorators.js';
+import { ContextProvider } from '@lit/context';
 import {
     RtlMixin,
     FormControlMixin,
     wrapNativeEvent,
     validPropertyValues,
     safeCustomElement,
+    parentDisabledContext,
 } from '@justeattakeaway/pie-webc-core';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -62,6 +65,19 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(PieElement)) implem
     @property({ type: Boolean, reflect: true })
     public disabled = defaultProps.disabled;
 
+    // Provided to descendant `pie-list-item`s so a fully-disabled group also disables the list rows
+    // (suppressing their hover/active states), and kept in sync in `updated()`.
+    //
+    // Created manually (rather than via the `@provide` decorator) so it can be guarded with
+    // `isServer`: `@lit/context`'s ContextProvider attaches `context-request` listeners to the host
+    // in its constructor (via `host.addEventListener`). During SSR/prerender the element is
+    // constructed without a DOM host, so that call throws and breaks the build. The provider is
+    // client-only anyway (context is delivered after `connectedCallback`, which SSR never runs), so
+    // it is safe to skip on the server.
+    private _disabledProvider = isServer
+        ? undefined
+        : new ContextProvider(this, { context: parentDisabledContext, initialValue: defaultProps.disabled });
+
     @property({ type: String })
     public assistiveText?: RadioGroupProps['assistiveText'];
 
@@ -69,11 +85,20 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(PieElement)) implem
     @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
     public status = defaultProps.status;
 
-    @queryAssignedElements({ selector: 'pie-radio' })
-        _slottedChildren!: Array<HTMLInputElement>;
-
     private _abortController!: AbortController;
 
+    private _mutationObserver!: MutationObserver;
+
+    /**
+     * The radios in the group. This uses a subtree query rather than immediate slotted
+     * children so radios wrapped in `pie-list-item`s (at any depth) are discovered. It is
+     * a superset of the previous immediate-child query, so radios passed as direct children
+     * keep working unchanged.
+     */
+    private get _slottedChildren (): HTMLInputElement[] {
+        return Array.from(this.querySelectorAll<HTMLInputElement>('pie-radio'));
+    }
+
     /**
      * Dispatches a custom event to notify each slotted child radio element
      * when the radio group is disabled.
@@ -171,6 +196,7 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(PieElement)) implem
 
     protected updated (_changedProperties: PropertyValues<this>): void {
         if (_changedProperties.has('disabled')) {
+            this._disabledProvider?.setValue(this.disabled);
             this._handleDisabled();
         }
 
@@ -200,6 +226,12 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(PieElement)) implem
         this.addEventListener('keydown', this._handleKeyDown, { signal });
 
         this._applyNameToChildren();
+
+        // The default slot's `slotchange` fires when list items are added or removed, but not
+        // when a radio is added deep inside an existing list item. Observe the light-DOM
+        // subtree so those radios still pick up the correct tabindex and name.
+        this._mutationObserver = new MutationObserver(() => this._handleRadioSlotChange());
+        this._mutationObserver.observe(this, { childList: true, subtree: true });
     }
 
     /**
@@ -383,7 +415,7 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(PieElement)) implem
             return;
         }
 
-        // Prevent default scrolling behavior when using Arrow keys for Radio Group navigation
+        // Prevent default scrolling behaviour when using Arrow keys for Radio Group navigation
         if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(event.code)) {
             event.preventDefault();
         }
@@ -400,6 +432,7 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(PieElement)) implem
     disconnectedCallback (): void {
         super.disconnectedCallback();
         this._abortController.abort();
+        this._mutationObserver?.disconnect();
     }
 
     render () {

package/src/radio-group.scss

@@ -2,6 +2,10 @@
 
 :host {
     display: block;
+
+    // Applies the divider between adjacent `pie-list-item`s when radios are wrapped in them.
+    // Direct-child radios are unaffected (the selector only matches `pie-list-item`).
+    @include p.list-item-divider;
 }
 
 .c-radioGroup {
@@ -14,7 +18,6 @@
     min-width: 0;
     display: flex;
     flex-flow: column wrap;
-    gap: var(--radio-group-gap);
 
     > legend {
         margin-block-end: var(--dt-spacing-b);
@@ -22,6 +25,8 @@
 
     &.c-radioGroup--inline {
         flex-flow: row wrap;
+
+        // inline only supported for pie-radio in slots (rather than list-item) so gap can be used here
         gap: var(--radio-group-gap--inline);
     }
 
@@ -29,3 +34,10 @@
         margin-block-end: var(--dt-spacing-a);
     }
 }
+
+:host(:not([isinline])) {
+    // used instead of gap because list-item slotted children do not need the gap. Only pie-radio slotted children do.
+    ::slotted(pie-radio:not(:first-of-type)) {
+        margin-block-start: var(--radio-group-gap);
+    }
+}