@justeattakeaway/pie-list 0.1.1 → 0.2.0

package/README.md

@@ -55,6 +55,8 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | `isCompact` | `true`, `false` | Decreases the item height to save vertical space. See the [rules](#usage-notes-and-rules) below. | `false` |
 | `isBold` | `true`, `false` | Sets the primary text to a bold font-weight. | `false` |
 | `hasMedia` | `true`, `false` | **Required whenever you slot a media element (e.g. `pie-thumbnail`) into the item.** Reduces the block padding so single-line media sits correctly (this padding adjustment has no effect when `secondaryText` is set, but you should still set `hasMedia`). | `false` |
+| `selectionType` | `"none"`, `"radio"`, `"checkbox"`, `"switch"` | Declares that the item hosts an interactive control in its `leading`/`trailing` slot, making the **whole row** a selectable target. Set it on each selectable row. Inside a `pie-radio-group`, the group lays the rows out as a divided list automatically. See [Selectable lists](#selectable-lists). | `"none"` |
+| `disabled` | `true`, `false` | Marks the row as disabled: it takes the disabled styling and stops forwarding row clicks to its control. Set it alongside the slotted control's own `disabled` (the control still governs its own interactivity). No visible effect on a non-selectable (static) item. | `false` |
 
 ### Slots
 
@@ -68,6 +70,9 @@ Slots are provided by `pie-list-item`.
 The permitted slotted elements are: a PIE WEBC icon, `pie-tag`, `pie-thumbnail`, `pie-avatar`*, `pie-switch`, and native HTML radio/checkbox inputs.
 Some slotted content is designed with specific properties being used. So please read the entire readme to understand correct slot usage.
 
+> [!NOTE]
+> `pie-list` is a **static** container: it has no selection state or keyboard behaviour. For a **selectable** list, do not slot the controls into `pie-list`. Place `pie-list-item`s inside a [`pie-radio-group`](https://webc.pie.design/?path=/docs/components-radio-group--overview) (single-select) or a [`pie-checkbox-group`](https://webc.pie.design/?path=/docs/components-checkbox-group--overview) (multi-select) instead. See [Selectable lists](#selectable-lists) below.
+
 > Slotted PIE icons are always sized by `pie-list-item` (24px). Consumers cannot override this size.
 
 > \* `pie-avatar` is a permitted slot element but is not covered by usage examples here yet, as it is not ready for use in lists.
@@ -241,6 +246,40 @@ import '@justeattakeaway/pie-webc/components/thumbnail.js';
 </pie-list>
 ```
 
+### Selectable lists
+
+`pie-list` itself is a static container with no selection or keyboard behaviour. To build a **selectable** list, do **not** put the controls in `pie-list`. Instead, place `pie-list-item`s inside a [`pie-radio-group`](https://webc.pie.design/?path=/docs/components-radio-group--overview) (single-select) with `selection-type="radio"`, and slot the control into each item's `leading` (or `trailing`) slot. The group lays the rows out as a divided list automatically.
+
+`selection-type` on each **item** makes that row selectable:
+
+- takes the correct **role** — `presentation` for `radio`/`checkbox` (so the group owns the controls directly), `listitem` for `switch` and `none`;
+- provides its `primaryText`, `secondaryText` and `metaText` as the slotted control's **accessible name and description** (and `aria-hidden`s the now-duplicated visible text);
+- **forwards a click** anywhere on the row to the control, so the whole row is a hit target;
+- shows **hover and active** states on the row (suppressed when the item's `disabled` is set, or the group is disabled).
+
+Provide the label through the item's `primaryText` — not as the control's own content. The group still owns the group-level semantics (its own role, shared `name`, selection coordination and group-disable).
+
+Single-select (radios):
+
+```js
+import '@justeattakeaway/pie-webc/components/radio-group.js';
+import '@justeattakeaway/pie-webc/components/radio.js';
+import '@justeattakeaway/pie-webc/components/list-item.js';
+```
+
+```html
+<!-- `selection-type="radio"` makes each row selectable and the group lays them out as a divided
+     list. `value` on the group selects the matching radio (here, Express). -->
+<pie-radio-group name="delivery" value="express">
+  <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-radio-group>
+```
+
 **For Native JS Applications, Vue, Angular, Svelte etc.:**
 
 ```js
@@ -272,6 +311,7 @@ To keep lists consistent and correct, follow these rules:
 
 - **Always give `pie-list` an accessible name** with `aria-label` or `aria-labelledby` (use `aria-labelledby` when a visible heading exists). This is required for screen reader users to understand the list. See [Accessibility](#accessibility).
 - **Provide `primaryText`** on every `pie-list-item`; it is the item's main line of content.
+- **For selectable lists, use `pie-list-item` inside `pie-radio-group` or `pie-checkbox-group`, not `pie-list`.** `pie-list` is a static container with no selection or keyboard behaviour. See [Selectable lists](#selectable-lists).
 - **`metaText` and the `trailing` slot are mutually exclusive.** If `metaText` is set, any `trailing` slot content is ignored. Choose one.
 - **Slotted `pie-thumbnail` must use `size="40"`.** This is the only size that fits the list-item layout correctly.
 - **Always set `hasMedia` when slotting media** (`pie-thumbnail`, and `pie-avatar` in future), whether or not the item has `secondaryText`. This guarantees the item has the correct block padding.

package/custom-elements.json

@@ -66,16 +66,32 @@
       "kind": "javascript-module",
       "path": "src/pie-list-item/defs.js",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "selectionTypes",
+          "type": {
+            "text": "['none', 'radio', 'checkbox', 'switch']"
+          },
+          "default": "['none', 'radio', 'checkbox', 'switch']"
+        },
         {
           "kind": "variable",
           "name": "defaultProps",
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{ isCompact: false, isBold: false, hasMedia: false, }"
+          "default": "{ isCompact: false, isBold: false, hasMedia: false, selectionType: 'none', disabled: false, }"
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "selectionTypes",
+          "declaration": {
+            "name": "selectionTypes",
+            "module": "src/pie-list-item/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "defaultProps",
@@ -94,6 +110,16 @@
           "kind": "class",
           "description": "",
           "name": "PieListItem",
+          "slots": [
+            {
+              "description": "Content shown at the start of the item (for example an icon, avatar, or a slotted radio/checkbox).",
+              "name": "leading"
+            },
+            {
+              "description": "Content shown at the end of the item. Mutually exclusive with `metaText`.",
+              "name": "trailing"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -134,6 +160,110 @@
               "name": "hasMedia",
               "attribute": "hasMedia"
             },
+            {
+              "kind": "field",
+              "name": "selectionType",
+              "attribute": "selection-type"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "_parentDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_ariaProvider",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_abortController",
+              "type": {
+                "text": "AbortController"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_hasExplicitRole",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_isSelectable",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_ownedByGroup",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_control",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_applyRole",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Sets the item's role from `selectionType`: `presentation` for radio/checkbox (so the group\nowns those controls directly), otherwise `listitem` (static items and switches). A role set\nexplicitly by the consumer is left untouched."
+            },
+            {
+              "kind": "field",
+              "name": "_providedAria",
+              "type": {
+                "text": "ContextualAria | undefined"
+              },
+              "privacy": "private",
+              "description": "The accessible name and description this item provides to its slotted control, stitched from\nits text. Only provided in a selectable list. Each control consumes this via `ariaContext`\nand decides how to apply it: `pie-radio` names its host (which carries `role=\"radio\"`),\nwhile `pie-checkbox` / `pie-switch` name their internal input (their host is role-less, so\n`aria-label` there would be invalid). Context reaches across the shadow boundary that\n`aria-labelledby` cannot.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_handleHostClick",
+              "privacy": "private",
+              "description": "Forwards a click anywhere on the row to the slotted control, so the whole item is a hit\ntarget. Skips clicks that already landed on the control, to avoid a double toggle."
+            },
             {
               "kind": "method",
               "name": "_renderSecondaryText"
@@ -176,6 +306,14 @@
             {
               "name": "hasMedia",
               "fieldName": "hasMedia"
+            },
+            {
+              "name": "selection-type",
+              "fieldName": "selectionType"
+            },
+            {
+              "name": "disabled",
+              "fieldName": "disabled"
             }
           ],
           "superclass": {

package/dist/{PieElement-Y2VnHR4y.js → PieElement-B3g_8vKy.js}

@@ -4,7 +4,7 @@ const t = class t extends i {
     this.getAttribute("v") || this.setAttribute("v", t.v);
   }
 };
-t.v = "0.1.1";
+t.v = "0.2.0";
 let s = t;
 export {
   s as P

package/dist/index-KnN5fPmj.js

@@ -0,0 +1,265 @@
+import { unsafeCSS as x, isServer as f, html as p, nothing as m } from "lit";
+import { property as c, state as y } from "lit/decorators.js";
+import { classMap as k } from "lit/directives/class-map.js";
+import { validPropertyValues as _, safeCustomElement as T, ariaContext as I, parentDisabledContext as C } from "@justeattakeaway/pie-webc-core";
+import { P as w } from "./PieElement-B3g_8vKy.js";
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let g = class extends Event {
+  constructor(t, e, o, s) {
+    super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e, this.callback = o, this.subscribe = s ?? !1;
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let v = class {
+  constructor(t, e, o, s) {
+    if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (r, a) => {
+      this.unsubscribe && (this.unsubscribe !== a && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = r, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(r, a)), this.unsubscribe = a;
+    }, this.host = t, e.context !== void 0) {
+      const r = e;
+      this.context = r.context, this.callback = r.callback, this.subscribe = r.subscribe ?? !1;
+    } else this.context = e, this.callback = o, this.subscribe = s ?? !1;
+    this.host.addController(this);
+  }
+  hostConnected() {
+    this.dispatchRequest();
+  }
+  hostDisconnected() {
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
+  }
+  dispatchRequest() {
+    this.host.dispatchEvent(new g(this.context, this.host, this.t, this.subscribe));
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class P {
+  get value() {
+    return this.o;
+  }
+  set value(t) {
+    this.setValue(t);
+  }
+  setValue(t, e = !1) {
+    const o = e || !Object.is(t, this.o);
+    this.o = t, o && this.updateObservers();
+  }
+  constructor(t) {
+    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
+      for (const [e, { disposer: o }] of this.subscriptions) e(this.o, o);
+    }, t !== void 0 && (this.value = t);
+  }
+  addCallback(t, e, o) {
+    if (!o) return void t(this.value);
+    this.subscriptions.has(t) || this.subscriptions.set(t, { disposer: () => {
+      this.subscriptions.delete(t);
+    }, consumerHost: e });
+    const { disposer: s } = this.subscriptions.get(t);
+    t(this.value, s);
+  }
+  clearCallbacks() {
+    this.subscriptions.clear();
+  }
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class S extends Event {
+  constructor(t, e) {
+    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e;
+  }
+}
+class E extends P {
+  constructor(t, e, o) {
+    var s, r;
+    super(e.context !== void 0 ? e.initialValue : o), this.onContextRequest = (a) => {
+      if (a.context !== this.context) return;
+      const h = a.contextTarget ?? a.composedPath()[0];
+      h !== this.host && (a.stopPropagation(), this.addCallback(a.callback, h, a.subscribe));
+    }, this.onProviderRequest = (a) => {
+      if (a.context !== this.context || (a.contextTarget ?? a.composedPath()[0]) === this.host) return;
+      const h = /* @__PURE__ */ new Set();
+      for (const [b, { consumerHost: u }] of this.subscriptions) h.has(b) || (h.add(b), u.dispatchEvent(new g(this.context, u, b, !0)));
+      a.stopPropagation();
+    }, this.host = t, e.context !== void 0 ? this.context = e.context : this.context = e, this.attachListeners(), (r = (s = this.host).addController) == null || r.call(s, this);
+  }
+  attachListeners() {
+    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+  }
+  hostConnected() {
+    this.host.dispatchEvent(new S(this.context, this.host));
+  }
+}
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function B({ context: i, subscribe: t }) {
+  return (e, o) => {
+    typeof o == "object" ? o.addInitializer((function() {
+      new v(this, { context: i, callback: (s) => {
+        e.set.call(this, s);
+      }, subscribe: t });
+    })) : e.constructor.addInitializer(((s) => {
+      new v(s, { context: i, callback: (r) => {
+        s[o] = r;
+      }, subscribe: t });
+    }));
+  };
+}
+const z = ["none", "radio", "checkbox", "switch"], d = {
+  isCompact: !1,
+  isBold: !1,
+  hasMedia: !1,
+  selectionType: "none",
+  disabled: !1
+}, R = "*,*:after,*:before{box-sizing:inherit}:host{--list-item-inline-padding: var(--dt-spacing-d);--list-item-alignment: flex-start;--list-item-border: none;display:block}.c-listItem-container{--list-item-block-padding: var(--dt-spacing-d);--list-item-block-end-padding: calc(var(--list-item-block-padding) - var(--list-item-size-modifier));padding-inline-start:var(--list-item-inline-padding);padding-inline-end:var(--list-item-inline-padding);padding-block-start:var(--list-item-block-padding);padding-block-end:var(--list-item-block-end-padding, var(--list-item-block-padding));display:flex;align-items:var(--list-item-alignment);gap:var(--dt-spacing-c);min-height:56px;border-bottom:var(--list-item-border)}.c-listItem-container:has(.c-listItem-secondaryText){align-items:var(--list-item-alignment);min-height:76px}.c-listItem-container.is-compact{--list-item-block-padding: var(--dt-spacing-c);--list-item-alignment: center;align-items:var(--list-item-alignment);min-height:48px}.c-listItem-container.is-selectable:not(.is-disabled){--list-item-hover-bg: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01));--list-item-active-bg: 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-listItem-container.is-selectable:not(.is-disabled){--list-item-hover-bg: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent);--list-item-active-bg: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-listItem-container.is-selectable:not(.is-disabled){cursor:pointer}.c-listItem-container.is-selectable:not(.is-disabled):hover{background-color:var(--list-item-hover-bg)}.c-listItem-container.is-selectable:not(.is-disabled):active{background-color:var(--list-item-active-bg)}.c-listItem-container.has-media:has(.c-listItem-primaryText:only-child){--list-item-block-padding: var(--dt-spacing-b)}.c-listItem-text{flex:1}slot[name=trailing]::slotted(*),.c-listItem-metaText{padding-inline-start:var(--dt-spacing-a)}.c-listItem-leading,slot[name=leading],.c-listItem-trailing,slot[name=trailing]{display:contents}.c-listItem-text>*{display:block}.c-listItem-trailing{margin-inline-start:auto}.c-listItem-metaText{display:block;max-width:33.3333333333%}::slotted(.c-pieIcon){--icon-size-override: 24px }.c-listItem-primaryText{font-family:var(--dt-font-body-l-family);font-weight:var(--dt-font-body-l-weight);font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:calc(var(--dt-font-body-l-line-height) * 1px);color:var(--dt-color-content-default)}.c-listItem-container.is-bold .c-listItem-primaryText{font-family:var(--dt-font-body-strong-l-family);font-weight:var(--dt-font-body-strong-l-weight);font-size:calc(var(--dt-font-body-strong-l-size) * 1px);line-height:calc(var(--dt-font-body-strong-l-line-height) * 1px)}.c-listItem-secondaryText,.c-listItem-metaText{font-family:var(--dt-font-body-s-family);font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);color:var(--dt-color-content-subdued)}";
+var q = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
+  for (var s = o > 1 ? void 0 : o ? D(t, e) : t, r = i.length - 1, a; r >= 0; r--)
+    (a = i[r]) && (s = (o ? a(t, e, s) : a(s)) || s);
+  return o && s && q(t, e, s), s;
+};
+const $ = "pie-list-item";
+let n = class extends w {
+  constructor() {
+    super(...arguments), this.isCompact = d.isCompact, this.isBold = d.isBold, this.hasMedia = d.hasMedia, this.selectionType = d.selectionType, this.disabled = d.disabled, this._parentDisabled = !1, this._ariaProvider = f ? void 0 : new E(this, { context: I }), this._hasExplicitRole = !1, this._handleHostClick = (i) => {
+      if (!this._isSelectable || this._isDisabled) return;
+      const t = this._control;
+      !t || i.composedPath().includes(t) || (t.click(), t.focus());
+    };
+  }
+  get _isSelectable() {
+    return this.selectionType !== "none";
+  }
+  // radio/checkbox are owned by a selection group, which is why the item becomes `presentation`
+  // (so the group owns the controls directly) and the radio is named on its host. A switch has
+  // no group, so the item stays a `listitem`.
+  get _ownedByGroup() {
+    return this.selectionType === "radio" || this.selectionType === "checkbox";
+  }
+  // True when the row should be treated as disabled: either its own `disabled` prop is set, or the
+  // containing group is disabled (provided via context). Declarative and reactive, so the styling
+  // and row-click guard react without observing the slotted control.
+  get _isDisabled() {
+    return this.disabled || this._parentDisabled;
+  }
+  // The interactive control (radio/checkbox/switch) slotted into this item, if any. Used only by
+  // the client-side row-click handler.
+  get _control() {
+    return this.querySelector("pie-radio, pie-checkbox, pie-switch");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._hasExplicitRole = this.hasAttribute("role"), this._abortController = new AbortController(), this.addEventListener("click", this._handleHostClick, { signal: this._abortController.signal });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._abortController.abort();
+  }
+  updated() {
+    var i;
+    this._applyRole(), (i = this._ariaProvider) == null || i.setValue(this._providedAria);
+  }
+  /**
+   * Sets the item's role from `selectionType`: `presentation` for radio/checkbox (so the group
+   * owns those controls directly), otherwise `listitem` (static items and switches). A role set
+   * explicitly by the consumer is left untouched.
+   */
+  _applyRole() {
+    this._hasExplicitRole || this.setAttribute("role", this._ownedByGroup ? "presentation" : "listitem");
+  }
+  /**
+   * The accessible name and description this item provides to its slotted control, stitched from
+   * its text. Only provided in a selectable list. Each control consumes this via `ariaContext`
+   * and decides how to apply it: `pie-radio` names its host (which carries `role="radio"`),
+   * while `pie-checkbox` / `pie-switch` name their internal input (their host is role-less, so
+   * `aria-label` there would be invalid). Context reaches across the shadow boundary that
+   * `aria-labelledby` cannot.
+   */
+  get _providedAria() {
+    if (!this._isSelectable) return;
+    const i = [this.secondaryText, this.metaText].filter(Boolean).join(". ");
+    return { label: this.primaryText, description: i || void 0 };
+  }
+  _renderSecondaryText() {
+    const { secondaryText: i } = this;
+    return i ? p`<span class="c-listItem-secondaryText">${i}</span>` : m;
+  }
+  // metaText is another form of trailing content. The component can only ever display either slotted trailing content or the metaText string
+  _renderTrailingContent() {
+    const { metaText: i } = this;
+    return i ? p`<span class="c-listItem-metaText c-listItem-trailing" aria-hidden=${this._isSelectable ? "true" : m}>${i}</span>` : p`<div class="c-listItem-trailing"><slot name="trailing"></slot></div>`;
+  }
+  render() {
+    const { primaryText: i } = this, t = {
+      "c-listItem-container": !0,
+      "is-compact": this.isCompact,
+      "is-bold": this.isBold,
+      "has-media": this.hasMedia,
+      "is-selectable": this._isSelectable,
+      "is-disabled": this._isDisabled
+    };
+    return p`
+        <div class=${k(t)}>
+            <div class="c-listItem-leading">
+                <slot name="leading"></slot>
+            </div>
+
+            <div class="c-listItem-text" aria-hidden=${this._isSelectable ? "true" : m}>
+                <span class="c-listItem-primaryText">${i}</span>
+                ${this._renderSecondaryText()}
+            </div>
+
+            ${this._renderTrailingContent()}
+        </div>`;
+  }
+};
+n.styles = x(R);
+l([
+  c({ type: String })
+], n.prototype, "primaryText", 2);
+l([
+  c({ type: String })
+], n.prototype, "secondaryText", 2);
+l([
+  c({ type: String })
+], n.prototype, "metaText", 2);
+l([
+  c({ type: Boolean })
+], n.prototype, "isCompact", 2);
+l([
+  c({ type: Boolean })
+], n.prototype, "isBold", 2);
+l([
+  c({ type: Boolean })
+], n.prototype, "hasMedia", 2);
+l([
+  c({ type: String, attribute: "selection-type" }),
+  _($, z, d.selectionType)
+], n.prototype, "selectionType", 2);
+l([
+  c({ type: Boolean })
+], n.prototype, "disabled", 2);
+l([
+  B({ context: C, subscribe: !0 }),
+  y()
+], n.prototype, "_parentDisabled", 2);
+n = l([
+  T("pie-list-item")
+], n);
+export {
+  n as P,
+  d,
+  z as s
+};

package/dist/index.js

@@ -1,23 +1,23 @@
-import { html as a, unsafeCSS as d } from "lit";
-import { P as m } from "./PieElement-Y2VnHR4y.js";
-import { RtlMixin as c, safeCustomElement as f } from "@justeattakeaway/pie-webc-core";
-const p = "*,*:after,*:before{box-sizing:inherit}:host{display:block}:host ::slotted(*:nth-last-child(n+2)){--list-item-size-modifier: 1px;--list-item-border-override: var(--list-item-size-modifier) solid var(--dt-color-divider-default)}";
-var h = Object.getOwnPropertyDescriptor, b = (r, s, n, l) => {
-  for (var e = l > 1 ? void 0 : l ? h(s, n) : s, t = r.length - 1, o; t >= 0; t--)
-    (o = r[t]) && (e = o(e) || e);
-  return e;
+import { html as n, unsafeCSS as m } from "lit";
+import { P as f } from "./PieElement-B3g_8vKy.js";
+import { RtlMixin as d, safeCustomElement as p } from "@justeattakeaway/pie-webc-core";
+const c = "*,*: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)}";
+var b = Object.getOwnPropertyDescriptor, u = (s, r, a, l) => {
+  for (var t = l > 1 ? void 0 : l ? b(r, a) : r, e = s.length - 1, o; e >= 0; e--)
+    (o = s[e]) && (t = o(t) || t);
+  return t;
 };
-let i = class extends c(m) {
+let i = class extends d(f) {
   connectedCallback() {
     super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "list");
   }
   render() {
-    return a`<slot></slot>`;
+    return n`<slot></slot>`;
   }
 };
-i.styles = d(p);
-i = b([
-  f("pie-list")
+i.styles = m(c);
+i = u([
+  p("pie-list")
 ], i);
 export {
   i as PieList

package/dist/pie-list-item/defs.d.ts

@@ -1,4 +1,6 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+export declare const selectionTypes: readonly ["none", "radio", "checkbox", "switch"];
+export type SelectionType = typeof selectionTypes[number];
 export interface ListItemProps {
     /**
      * **Required:** Provides an overview of the content.
@@ -28,6 +30,28 @@ export interface ListItemProps {
      * **Note**: This has no effect when `secondaryText` is set, and should not be combined with `isCompact`.
      */
     hasMedia?: boolean;
+    /**
+     * The kind of interactive control this item hosts in its `leading` or `trailing` slot. This
+     * makes the whole row a selectable target: the item takes the appropriate role, provides its
+     * text as the control's accessible name/description, hides the duplicated visible text, and
+     * forwards row clicks to the control.
+     *
+     * - `none` (default) - a static, non-selectable list item (`role="listitem"`).
+     * - `radio` - hosts a `pie-radio` (used inside a `pie-radio-group`); the item is `presentation`.
+     * - `checkbox` - hosts a `pie-checkbox` (used inside a `pie-checkbox-group`); the item is `presentation`.
+     * - `switch` - hosts a `pie-switch`; there is no group, so the item stays `role="listitem"`.
+     *
+     * Set this on each selectable row. When the rows sit inside a `pie-radio-group`, the group lays
+     * them out as a divided list automatically; this prop governs the row's role and behaviour.
+     */
+    selectionType?: typeof selectionTypes[number];
+    /**
+     * Marks the row as disabled: it takes on the disabled styling and stops forwarding row clicks to
+     * its control. Set it alongside the slotted control's own `disabled` (the control still governs
+     * its own interactivity and keyboard behaviour). Has no visible effect on a non-selectable
+     * (static) item.
+     */
+    disabled?: boolean;
 }
 export type DefaultProps = ComponentDefaultProps<ListItemProps, keyof Omit<ListItemProps, 'primaryText' | 'secondaryText' | 'metaText'>>;
 export declare const defaultProps: DefaultProps;

package/dist/pie-list-item/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/pie-list-item/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,MAAM,WAAW,aAAa;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC;AAEzI,eAAO,MAAM,YAAY,EAAE,YAI1B,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/pie-list-item/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,eAAO,MAAM,cAAc,kDAAmD,CAAC;AAE/E,MAAM,MAAM,aAAa,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;AAE1D,MAAM,WAAW,aAAa;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;;;;;;;;;;OAaG;IACH,aAAa,CAAC,EAAE,OAAO,cAAc,CAAC,MAAM,CAAC,CAAA;IAE7C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC;AAEzI,eAAO,MAAM,YAAY,EAAE,YAM1B,CAAC"}

package/dist/pie-list-item/index.d.ts

@@ -4,6 +4,8 @@ import { ListItemProps } from './defs';
 declare const componentSelector = "pie-list-item";
 /**
  * @tagname pie-list-item
+ * @slot leading - Content shown at the start of the item (for example an icon, avatar, or a slotted radio/checkbox).
+ * @slot trailing - Content shown at the end of the item. Mutually exclusive with `metaText`.
  */
 export declare class PieListItem extends PieElement implements ListItemProps {
     primaryText: ListItemProps['primaryText'];
@@ -12,7 +14,39 @@ export declare class PieListItem extends PieElement implements ListItemProps {
     isCompact: boolean;
     isBold: boolean;
     hasMedia: boolean;
+    selectionType: "checkbox" | "none" | "radio" | "switch";
+    disabled: boolean;
+    private _parentDisabled;
+    private _ariaProvider;
+    private _abortController;
+    private _hasExplicitRole;
+    private get _isSelectable();
+    private get _ownedByGroup();
+    private get _isDisabled();
+    private get _control();
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /**
+     * Sets the item's role from `selectionType`: `presentation` for radio/checkbox (so the group
+     * owns those controls directly), otherwise `listitem` (static items and switches). A role set
+     * explicitly by the consumer is left untouched.
+     */
+    private _applyRole;
+    /**
+     * The accessible name and description this item provides to its slotted control, stitched from
+     * its text. Only provided in a selectable list. Each control consumes this via `ariaContext`
+     * and decides how to apply it: `pie-radio` names its host (which carries `role="radio"`),
+     * while `pie-checkbox` / `pie-switch` name their internal input (their host is role-less, so
+     * `aria-label` there would be invalid). Context reaches across the shadow boundary that
+     * `aria-labelledby` cannot.
+     */
+    private get _providedAria();
+    /**
+     * Forwards a click anywhere on the row to the slotted control, so the whole item is a hit
+     * target. Skips clicks that already landed on the control, to avoid a double toggle.
+     */
+    private _handleHostClick;
     _renderSecondaryText(): import('lit-html').TemplateResult<1> | typeof nothing;
     _renderTrailingContent(): import('lit-html').TemplateResult<1>;
     render(): import('lit-html').TemplateResult<1>;

package/dist/pie-list-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-list-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAa,MAAM,KAAK,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAErF,OAAO,EAAE,KAAK,aAAa,EAAgB,MAAM,QAAQ,CAAC;AAG1D,QAAA,MAAM,iBAAiB,kBAAkB,CAAC;AAE1C;;GAEG;AACH,qBACa,WAAY,SAAQ,UAAW,YAAW,aAAa;IAE5D,WAAW,EAAG,aAAa,CAAC,aAAa,CAAC,CAAC;IAG3C,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAG9C,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAGpC,SAAS,UAA0B;IAGnC,MAAM,UAAuB;IAG7B,QAAQ,UAAyB;IAErC,iBAAiB;IAQjB,oBAAoB;IAUpB,sBAAsB;IAStB,MAAM;IA0BN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;KACpC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-list-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACa,OAAO,EAC1B,MAAM,KAAK,CAAC;AAWb,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AACrF,OAAO,EAAE,KAAK,aAAa,EAAgC,MAAM,QAAQ,CAAC;AAG1E,QAAA,MAAM,iBAAiB,kBAAkB,CAAC;AAE1C;;;;GAIG;AACH,qBACa,WAAY,SAAQ,UAAW,YAAW,aAAa;IAE5D,WAAW,EAAG,aAAa,CAAC,aAAa,CAAC,CAAC;IAG3C,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAG9C,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAGpC,SAAS,UAA0B;IAGnC,MAAM,UAAuB;IAG7B,QAAQ,UAAyB;IAIjC,aAAa,2CAA8B;IAG3C,QAAQ,UAAyB;IAMrC,OAAO,CAAC,eAAe,CAAS;IAYhC,OAAO,CAAC,aAAa,CAA8E;IAEnG,OAAO,CAAC,gBAAgB,CAAmB;IAE3C,OAAO,CAAC,gBAAgB,CAAS;IAEjC,OAAO,KAAK,aAAa,GAExB;IAKD,OAAO,KAAK,aAAa,GAExB;IAKD,OAAO,KAAK,WAAW,GAEtB;IAID,OAAO,KAAK,QAAQ,GAEnB;IAED,iBAAiB;IAUjB,oBAAoB;IAKpB,SAAS,CAAC,OAAO;IAKjB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAKlB;;;;;;;OAOG;IACH,OAAO,KAAK,aAAa,GAMxB;IAED;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAQtB;IAEF,oBAAoB;IAUpB,sBAAsB;IAStB,MAAM;IA4BN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;KACpC;CACJ"}

package/dist/pie-list-item/index.js

@@ -1,9 +1,9 @@
 import "lit";
 import "lit/decorators.js";
-import "@justeattakeaway/pie-webc-core";
-import "../PieElement-Y2VnHR4y.js";
 import "lit/directives/class-map.js";
-import { P as s } from "../index-D4OaeeiJ.js";
+import { P as s } from "../index-KnN5fPmj.js";
+import "@justeattakeaway/pie-webc-core";
+import "../PieElement-B3g_8vKy.js";
 export {
   s as PieListItem
 };

package/dist/pie-list-item/react.js

@@ -1,15 +1,16 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
-import { P as m } from "../index-D4OaeeiJ.js";
-import { d as c } from "../index-D4OaeeiJ.js";
+import { P as s } from "../index-KnN5fPmj.js";
+import { d as c, s as n } from "../index-KnN5fPmj.js";
 const i = t({
   displayName: "PieListItem",
-  elementClass: m,
+  elementClass: s,
   react: e,
   tagName: "pie-list-item",
   events: {}
 }), a = i;
 export {
   a as PieListItem,
-  c as defaultProps
+  c as defaultProps,
+  n as selectionTypes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-list",
   "description": "PIE Design System List built using Web Components",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -38,11 +38,12 @@
   "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-css": "1.3.1",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.7"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "16.0.0"
+    "@justeattakeaway/pie-webc-core": "16.1.0",
+    "@lit/context": "1.1.6"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [

package/src/list.scss

@@ -3,9 +3,5 @@
 :host {
     display: block;
 
-    ::slotted(*:nth-last-child(n+2)) {
-        // This allows list-items following other list-items to have 1px stripped off of their padding to account for the added border.
-        --list-item-size-modifier: 1px;
-        --list-item-border-override: var(--list-item-size-modifier) solid var(--dt-color-divider-default);
-    }
+    @include p.list-item-divider;
 }

package/src/pie-list-item/defs.ts

@@ -1,5 +1,9 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
+export const selectionTypes = ['none', 'radio', 'checkbox', 'switch'] as const;
+
+export type SelectionType = typeof selectionTypes[number];
+
 export interface ListItemProps {
     /**
      * **Required:** Provides an overview of the content.
@@ -32,6 +36,30 @@ export interface ListItemProps {
      * **Note**: This has no effect when `secondaryText` is set, and should not be combined with `isCompact`.
      */
     hasMedia?: boolean
+
+    /**
+     * The kind of interactive control this item hosts in its `leading` or `trailing` slot. This
+     * makes the whole row a selectable target: the item takes the appropriate role, provides its
+     * text as the control's accessible name/description, hides the duplicated visible text, and
+     * forwards row clicks to the control.
+     *
+     * - `none` (default) - a static, non-selectable list item (`role="listitem"`).
+     * - `radio` - hosts a `pie-radio` (used inside a `pie-radio-group`); the item is `presentation`.
+     * - `checkbox` - hosts a `pie-checkbox` (used inside a `pie-checkbox-group`); the item is `presentation`.
+     * - `switch` - hosts a `pie-switch`; there is no group, so the item stays `role="listitem"`.
+     *
+     * Set this on each selectable row. When the rows sit inside a `pie-radio-group`, the group lays
+     * them out as a divided list automatically; this prop governs the row's role and behaviour.
+     */
+    selectionType?: typeof selectionTypes[number]
+
+    /**
+     * Marks the row as disabled: it takes on the disabled styling and stops forwarding row clicks to
+     * its control. Set it alongside the slotted control's own `disabled` (the control still governs
+     * its own interactivity and keyboard behaviour). Has no visible effect on a non-selectable
+     * (static) item.
+     */
+    disabled?: boolean
 }
 
 export type DefaultProps = ComponentDefaultProps<ListItemProps, keyof Omit<ListItemProps, 'primaryText' | 'secondaryText' | 'metaText'>>;
@@ -40,4 +68,6 @@ export const defaultProps: DefaultProps = {
     isCompact: false,
     isBold: false,
     hasMedia: false,
+    selectionType: 'none',
+    disabled: false,
 };

package/src/pie-list-item/index.ts

@@ -1,15 +1,26 @@
-import { html, nothing, unsafeCSS } from 'lit';
-import { property } from 'lit/decorators.js';
-import { safeCustomElement } from '@justeattakeaway/pie-webc-core';
-import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import {
+    html, isServer, nothing, unsafeCSS,
+} from 'lit';
+import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { type ListItemProps, defaultProps } from './defs';
+import { consume, ContextProvider } from '@lit/context';
+import {
+    safeCustomElement,
+    validPropertyValues,
+    parentDisabledContext,
+    ariaContext,
+    type ContextualAria,
+} from '@justeattakeaway/pie-webc-core';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { type ListItemProps, defaultProps, selectionTypes } from './defs';
 import styles from './list-item.scss?inline';
 
 const componentSelector = 'pie-list-item';
 
 /**
  * @tagname pie-list-item
+ * @slot leading - Content shown at the start of the item (for example an icon, avatar, or a slotted radio/checkbox).
+ * @slot trailing - Content shown at the end of the item. Mutually exclusive with `metaText`.
  */
 @safeCustomElement('pie-list-item')
 export class PieListItem extends PieElement implements ListItemProps {
@@ -31,14 +42,119 @@ export class PieListItem extends PieElement implements ListItemProps {
     @property({ type: Boolean })
         hasMedia = defaultProps.hasMedia;
 
+    @property({ type: String, attribute: 'selection-type' })
+    @validPropertyValues(componentSelector, selectionTypes, defaultProps.selectionType)
+        selectionType = defaultProps.selectionType;
+
+    @property({ type: Boolean })
+        disabled = defaultProps.disabled;
+
+    // Whether a disabling ancestor (e.g. `pie-radio-group`) has provided its disabled state.
+    // Defaults to false when there is no provider (a standalone item or a static list).
+    @consume({ context: parentDisabledContext, subscribe: true })
+    @state()
+    private _parentDisabled = false;
+
+    // Provides this item's accessible name/description down to its slotted control via the shared
+    // aria context, which the control consumes and applies to the element carrying its semantics
+    // (the internal input for pie-checkbox / pie-switch). See `ariaContext` in pie-webc-core.
+    //
+    // 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
+    // ("host.addEventListener is not a function") 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 _ariaProvider = isServer ? undefined : new ContextProvider(this, { context: ariaContext });
+
+    private _abortController!: AbortController;
+
+    private _hasExplicitRole = false;
+
+    private get _isSelectable (): boolean {
+        return this.selectionType !== 'none';
+    }
+
+    // radio/checkbox are owned by a selection group, which is why the item becomes `presentation`
+    // (so the group owns the controls directly) and the radio is named on its host. A switch has
+    // no group, so the item stays a `listitem`.
+    private get _ownedByGroup (): boolean {
+        return this.selectionType === 'radio' || this.selectionType === 'checkbox';
+    }
+
+    // True when the row should be treated as disabled: either its own `disabled` prop is set, or the
+    // containing group is disabled (provided via context). Declarative and reactive, so the styling
+    // and row-click guard react without observing the slotted control.
+    private get _isDisabled (): boolean {
+        return this.disabled || this._parentDisabled;
+    }
+
+    // The interactive control (radio/checkbox/switch) slotted into this item, if any. Used only by
+    // the client-side row-click handler.
+    private get _control (): HTMLElement | null {
+        return this.querySelector('pie-radio, pie-checkbox, pie-switch');
+    }
+
     connectedCallback () {
         super.connectedCallback();
 
-        if (!this.hasAttribute('role')) {
-            this.setAttribute('role', 'listitem');
-        }
+        // Respect a role the consumer set explicitly; otherwise we manage it from `selectionType`.
+        this._hasExplicitRole = this.hasAttribute('role');
+
+        this._abortController = new AbortController();
+        this.addEventListener('click', this._handleHostClick, { signal: this._abortController.signal });
     }
 
+    disconnectedCallback () {
+        super.disconnectedCallback();
+        this._abortController.abort();
+    }
+
+    protected updated () {
+        this._applyRole();
+        this._ariaProvider?.setValue(this._providedAria);
+    }
+
+    /**
+     * Sets the item's role from `selectionType`: `presentation` for radio/checkbox (so the group
+     * owns those controls directly), otherwise `listitem` (static items and switches). A role set
+     * explicitly by the consumer is left untouched.
+     */
+    private _applyRole (): void {
+        if (this._hasExplicitRole) return;
+        this.setAttribute('role', this._ownedByGroup ? 'presentation' : 'listitem');
+    }
+
+    /**
+     * The accessible name and description this item provides to its slotted control, stitched from
+     * its text. Only provided in a selectable list. Each control consumes this via `ariaContext`
+     * and decides how to apply it: `pie-radio` names its host (which carries `role="radio"`),
+     * while `pie-checkbox` / `pie-switch` name their internal input (their host is role-less, so
+     * `aria-label` there would be invalid). Context reaches across the shadow boundary that
+     * `aria-labelledby` cannot.
+     */
+    private get _providedAria (): ContextualAria | undefined {
+        if (!this._isSelectable) return undefined;
+
+        const description = [this.secondaryText, this.metaText].filter(Boolean).join('. ');
+
+        return { label: this.primaryText, description: description || undefined };
+    }
+
+    /**
+     * Forwards a click anywhere on the row to the slotted control, so the whole item is a hit
+     * target. Skips clicks that already landed on the control, to avoid a double toggle.
+     */
+    private _handleHostClick = (event: MouseEvent): void => {
+        if (!this._isSelectable || this._isDisabled) return;
+
+        const control = this._control;
+        if (!control || event.composedPath().includes(control)) return;
+
+        control.click();
+        control.focus();
+    };
+
     _renderSecondaryText () {
         const { secondaryText } = this;
         if (secondaryText) {
@@ -52,7 +168,7 @@ export class PieListItem extends PieElement implements ListItemProps {
     _renderTrailingContent () {
         const { metaText } = this;
         if (metaText) {
-            return html`<span class="c-listItem-metaText c-listItem-trailing">${metaText}</span>`;
+            return html`<span class="c-listItem-metaText c-listItem-trailing" aria-hidden=${this._isSelectable ? 'true' : nothing}>${metaText}</span>`;
         }
 
         return html`<div class="c-listItem-trailing"><slot name="trailing"></slot></div>`;
@@ -66,6 +182,8 @@ export class PieListItem extends PieElement implements ListItemProps {
             'is-compact': this.isCompact,
             'is-bold': this.isBold,
             'has-media': this.hasMedia,
+            'is-selectable': this._isSelectable,
+            'is-disabled': this._isDisabled,
         };
 
         return html`
@@ -74,7 +192,7 @@ export class PieListItem extends PieElement implements ListItemProps {
                 <slot name="leading"></slot>
             </div>
 
-            <div class="c-listItem-text">
+            <div class="c-listItem-text" aria-hidden=${this._isSelectable ? 'true' : nothing}>
                 <span class="c-listItem-primaryText">${primaryText}</span>
                 ${this._renderSecondaryText()}
             </div>

package/src/pie-list-item/list-item.scss

@@ -6,6 +6,7 @@
     // host declaration wins over a value inherited from an ancestor.
     --list-item-inline-padding: var(--dt-spacing-d);
     --list-item-alignment: flex-start;
+    --list-item-border: none;
 
     // Using contents to remove the host from the box model so that the internal container element fully acts as the component shell
     display: block;
@@ -29,7 +30,7 @@
     align-items: var(--list-item-alignment);
     gap: var(--dt-spacing-c);
     min-height: 56px;
-    border-bottom: var(--list-item-border-override, none);
+    border-bottom: var(--list-item-border);
 }
 
 // Two lines of text (primary + secondary) need top-alignment so leading/trailing
@@ -48,6 +49,32 @@
     min-height: 48px;
 }
 
+// Interactive row states. When the item is inside a radio/checkbox group the whole row
+// is a click target (it forwards the click to the slotted control), so it shows hover and
+// active surface tints, matching the control's own interactive states. These are suppressed
+// when the slotted control is disabled (the item reflects this as `is-disabled`). The
+// defaults use the standard PIE interactive overlay tokens; override `--list-item-hover-bg` /
+// `--list-item-active-bg` if design specifies dedicated list tokens.
+.c-listItem-container.is-selectable:not(.is-disabled) {
+    --list-item-hover-bg: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01));
+    --list-item-active-bg: 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)) {
+        --list-item-hover-bg: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent);
+        --list-item-active-bg: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent);
+    }
+
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--list-item-hover-bg);
+    }
+
+    &:active {
+        background-color: var(--list-item-active-bg);
+    }
+}
+
 // Larger slotted media (e.g. pie-thumbnail) reduces the block padding, but only
 // when the primary text stands alone (`:only-child` == no secondary text). With
 // secondary text the default padding is kept so two lines of text sit correctly.

package/dist/index-D4OaeeiJ.js

@@ -1,79 +0,0 @@
-import { unsafeCSS as p, html as o, nothing as g } from "lit";
-import { property as n } from "lit/decorators.js";
-import { safeCustomElement as h } from "@justeattakeaway/pie-webc-core";
-import { P as f } from "./PieElement-Y2VnHR4y.js";
-import { classMap as y } from "lit/directives/class-map.js";
-const m = {
-  isCompact: !1,
-  isBold: !1,
-  hasMedia: !1
-}, v = "*,*:after,*:before{box-sizing:inherit}:host{--list-item-inline-padding: var(--dt-spacing-d);--list-item-alignment: flex-start;display:block}.c-listItem-container{--list-item-block-padding: var(--dt-spacing-d);--list-item-block-end-padding: calc(var(--list-item-block-padding) - var(--list-item-size-modifier));padding-inline-start:var(--list-item-inline-padding);padding-inline-end:var(--list-item-inline-padding);padding-block-start:var(--list-item-block-padding);padding-block-end:var(--list-item-block-end-padding, var(--list-item-block-padding));display:flex;align-items:var(--list-item-alignment);gap:var(--dt-spacing-c);min-height:56px;border-bottom:var(--list-item-border-override, none)}.c-listItem-container:has(.c-listItem-secondaryText){align-items:var(--list-item-alignment);min-height:76px}.c-listItem-container.is-compact{--list-item-block-padding: var(--dt-spacing-c);--list-item-alignment: center;align-items:var(--list-item-alignment);min-height:48px}.c-listItem-container.has-media:has(.c-listItem-primaryText:only-child){--list-item-block-padding: var(--dt-spacing-b)}.c-listItem-text{flex:1}slot[name=trailing]::slotted(*),.c-listItem-metaText{padding-inline-start:var(--dt-spacing-a)}.c-listItem-leading,slot[name=leading],.c-listItem-trailing,slot[name=trailing]{display:contents}.c-listItem-text>*{display:block}.c-listItem-trailing{margin-inline-start:auto}.c-listItem-metaText{display:block;max-width:33.3333333333%}::slotted(.c-pieIcon){--icon-size-override: 24px }.c-listItem-primaryText{font-family:var(--dt-font-body-l-family);font-weight:var(--dt-font-body-l-weight);font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:calc(var(--dt-font-body-l-line-height) * 1px);color:var(--dt-color-content-default)}.c-listItem-container.is-bold .c-listItem-primaryText{font-family:var(--dt-font-body-strong-l-family);font-weight:var(--dt-font-body-strong-l-weight);font-size:calc(var(--dt-font-body-strong-l-size) * 1px);line-height:calc(var(--dt-font-body-strong-l-line-height) * 1px)}.c-listItem-secondaryText,.c-listItem-metaText{font-family:var(--dt-font-body-s-family);font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);color:var(--dt-color-content-subdued)}";
-var b = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (t, s, r, l) => {
-  for (var e = l > 1 ? void 0 : l ? x(s, r) : s, d = t.length - 1, c; d >= 0; d--)
-    (c = t[d]) && (e = (l ? c(s, r, e) : c(e)) || e);
-  return l && e && b(s, r, e), e;
-};
-let i = class extends f {
-  constructor() {
-    super(...arguments), this.isCompact = m.isCompact, this.isBold = m.isBold, this.hasMedia = m.hasMedia;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem");
-  }
-  _renderSecondaryText() {
-    const { secondaryText: t } = this;
-    return t ? o`<span class="c-listItem-secondaryText">${t}</span>` : g;
-  }
-  // metaText is another form of trailing content. The component can only ever display either slotted trailing content or the metaText string
-  _renderTrailingContent() {
-    const { metaText: t } = this;
-    return t ? o`<span class="c-listItem-metaText c-listItem-trailing">${t}</span>` : o`<div class="c-listItem-trailing"><slot name="trailing"></slot></div>`;
-  }
-  render() {
-    const { primaryText: t } = this, s = {
-      "c-listItem-container": !0,
-      "is-compact": this.isCompact,
-      "is-bold": this.isBold,
-      "has-media": this.hasMedia
-    };
-    return o`
-        <div class=${y(s)}>
-            <div class="c-listItem-leading">
-                <slot name="leading"></slot>
-            </div>
-
-            <div class="c-listItem-text">
-                <span class="c-listItem-primaryText">${t}</span>
-                ${this._renderSecondaryText()}
-            </div>
-
-            ${this._renderTrailingContent()}
-        </div>`;
-  }
-};
-i.styles = p(v);
-a([
-  n({ type: String })
-], i.prototype, "primaryText", 2);
-a([
-  n({ type: String })
-], i.prototype, "secondaryText", 2);
-a([
-  n({ type: String })
-], i.prototype, "metaText", 2);
-a([
-  n({ type: Boolean })
-], i.prototype, "isCompact", 2);
-a([
-  n({ type: Boolean })
-], i.prototype, "isBold", 2);
-a([
-  n({ type: Boolean })
-], i.prototype, "hasMedia", 2);
-i = a([
-  h("pie-list-item")
-], i);
-export {
-  i as P,
-  m as d
-};