@justeattakeaway/pie-list 0.4.0 → 0.5.0

package/README.md

@@ -37,6 +37,8 @@
     - [Multi-select (checkboxes)](#multi-select-checkboxes)
     - [Independent toggles (switches)](#independent-toggles-switches)
   - [Link items](#link-items)
+    - [Indicating the current page](#indicating-the-current-page)
+  - [Button items](#button-items)
   - [Framework variants](#framework-variants)
 - [Usage Notes and Rules](#usage-notes-and-rules)
 - [Questions and Support](#questions-and-support)
@@ -71,8 +73,9 @@ 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` |
-| `interactionType` | `"none"`, `"radio"`, `"checkbox"`, `"switch"`, `"link"` | Declares how the **whole row** behaves, and drives its role, accessible naming, click forwarding and interactive states from this one prop. `"none"` is a static item; `"radio"`/`"checkbox"`/`"switch"` host the matching control in the `leading`/`trailing` slot; `"link"` turns the row into a single navigation link (slot an empty `<a slot="link" href="...">`). See [Selectable lists](#selectable-lists) and [Link items](#link-items). | `"none"` |
+| `interactionType` | `"none"`, `"radio"`, `"checkbox"`, `"switch"`, `"link"`, `"button"` | Declares how the **whole row** behaves, and drives its role, accessible naming, click forwarding and interactive states from this one prop. `"none"` is a static item; `"radio"`/`"checkbox"`/`"switch"` host the matching control in the `leading`/`trailing` slot; `"link"` turns the row into a single navigation link (slot an empty `<a slot="link" href="...">`); `"button"` turns the row into a single button for an in-page action (the item renders the button for you - listen for `click`). See [Selectable lists](#selectable-lists), [Link items](#link-items) and [Button items](#button-items). | `"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` |
+| `aria` | `{ button?: { haspopup?: "menu" \| "listbox" \| "tree" \| "grid" \| "dialog" \| "true" } }` | Additional ARIA properties that the item cannot derive from its text props. `button.haspopup` only applies when `interactionType="button"` and is forwarded to the internal `<button>` element. Set it when the button row triggers a popup such as a dialog or menu. | `undefined` |
 
 ### Slots
 
@@ -141,22 +144,22 @@ This component does not emit any custom events. To listen for interactions, trea
 Specifically, for **every** interaction type the item takes care of:
 
 - the **role** on the item itself (`listitem`, or `presentation` for radio/checkbox rows so the group owns the control directly) - you never write `role="..."`;
-- the **accessible name and description** of whatever it hosts - you never write `aria-label`, `aria-labelledby`, `aria-description` or `aria-describedby` on the control or anchor;
+- the **accessible name and description** of whatever it hosts - you never write `aria-label`, `aria-labelledby`, `aria-description` or `aria-describedby` on the control, anchor or button;
 - **hiding the duplicated visible text** from assistive technology (the item `aria-hidden`s its own text once the name/description have been mirrored onto the interactive element), so nothing is announced twice.
 
 The one accessibility attribute you **do** own is the accessible name of the `pie-list` container itself (`aria-label` / `aria-labelledby`), because only you know what the list represents. See the note above.
 
 ### How the naming is derived
 
-When a `pie-list-item` hosts an interactive element (a slotted control set via `interactionType="radio" | "checkbox" | "switch"`, or a slotted link anchor via `interactionType="link"`) it generates that element's accessibility naming from its own text:
+When a `pie-list-item` hosts an interactive element (a slotted control set via `interactionType="radio" | "checkbox" | "switch"`, a slotted link anchor via `interactionType="link"`, or the button it renders for `interactionType="button"`) it generates that element's accessibility naming from its own text:
 
-- `primaryText` becomes the control's **accessible name**;
+- `primaryText` becomes the element's **accessible name**;
 - `secondaryText` and `metaText` become its **accessible description** (combined with a full stop when both are present);
-- the visible text rendered inside the item is `aria-hidden`, so a screen reader announces the name and description once (via the control) rather than twice.
+- the visible text rendered inside the item is `aria-hidden`, so a screen reader announces the name and description once (via the interactive element) rather than twice.
 
-How the naming reaches the element differs by type, but this is entirely internal - you never do it yourself. Selection controls receive it through a shared context and each applies it to the element that carries its role: `pie-radio` names its host, while `pie-checkbox` and `pie-switch` name their internal `input` (their host is role-less). A link anchor is a plain light-DOM element (not a PIE control), so `pie-list-item` sets `aria-label` and `aria-description` on it directly.
+How the naming reaches the element differs by type, but this is entirely internal - you never do it yourself. Selection controls receive it through a shared context and each applies it to the element that carries its role: `pie-radio` names its host, while `pie-checkbox` and `pie-switch` name their internal `input` (their host is role-less). A link anchor is a plain light-DOM element you slot (not a PIE control), so `pie-list-item` sets `aria-label` and `aria-description` on it directly. A `button` row's button is one the item renders itself, so it is named the same way from within the item.
 
-**If you do set something yourself, it always wins.** If a slotted control already has its own name (its `label` or `aria` prop), or the slotted anchor already has an `aria-label`/`aria-labelledby` (or `aria-description`/`aria-describedby`), the item leaves it untouched and does not overwrite it. This is an escape hatch for the rare case that needs it, not something you normally reach for.
+**For slotted elements, anything you set yourself wins.** If a slotted control already has its own name (its `label` or `aria` prop), or the slotted link anchor already has an `aria-label`/`aria-labelledby` (or `aria-description`/`aria-describedby`), the item leaves it untouched and does not overwrite it. This is an escape hatch for the rare case that needs it, not something you normally reach for. (A `button` row's button is rendered and named by the item, so there is nothing for you to set.)
 
 ## Usage Examples
 
@@ -415,6 +418,104 @@ import { PieListItem } from '@justeattakeaway/pie-webc/react/list-item.js';
 </PieListItem>
 ```
 
+#### Indicating the current page
+
+To highlight the active link in a navigation list, combine `isBold` on the `pie-list-item` with `aria-current="page"` on the slotted anchor. `isBold` gives the active item a heavier weight visually; `aria-current="page"` communicates the current page to assistive technology. `pie-list-item` only manages the anchor's `aria-label` and `aria-description`, so `aria-current` does not conflict with the item's naming logic and is safe to set yourself.
+
+You can also slot a tick icon into the `trailing` slot of the active item as an additional visual indicator. PIE icons render with `role="presentation"` on their SVG, so they are already hidden from assistive technology and no extra `aria-hidden` is needed.
+
+```js
+import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
+```
+
+```html
+<pie-list aria-label="Account navigation">
+  <pie-list-item interactionType="link" primaryText="Overview">
+    <a slot="link" href="/account"></a>
+  </pie-list-item>
+  <pie-list-item interactionType="link" isBold primaryText="Orders">
+    <a slot="link" href="/account/orders" aria-current="page"></a>
+    <icon-check slot="trailing"></icon-check>
+  </pie-list-item>
+  <pie-list-item interactionType="link" primaryText="Payment methods">
+    <a slot="link" href="/account/payment"></a>
+  </pie-list-item>
+  <pie-list-item interactionType="link" primaryText="Addresses">
+    <a slot="link" href="/account/addresses"></a>
+  </pie-list-item>
+</pie-list>
+```
+
+In React, pass `isBold` as a prop and `aria-current="page"` directly to the `<Link>` component (or raw anchor):
+
+```jsx
+import { IconCheck } from '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
+
+<PieListItem interactionType="link" isBold primaryText="Orders">
+  <Link slot="link" href="/account/orders" aria-current="page" />
+  <IconCheck slot="trailing" />
+</PieListItem>
+```
+
+### Button items
+
+Set `interactionType="button"` to turn the whole row into one button. Use this for an **in-page action** (opening a dialog, running a command); use [`link`](#link-items) when the row navigates to another page. Unlike a link, **you do not slot anything** - the item renders the interactive element for you: an invisible, row-sized native `<button type="button">` stretched over the row. A click or tap anywhere on the row activates it, and keyboard focus lands on the row as a whole (the focus ring hugs the row). It is just an action trigger, **not a form control** - it is `type="button"`, so it never submits a form, and it carries no value.
+
+The item names the button from its own text: `primaryText` becomes the button's `aria-label` and `secondaryText`/`metaText` its `aria-description`, and the visible text is hidden from assistive technology so nothing is announced twice (see [You never set ARIA on a list item or its slotted content](#you-never-set-aria-on-a-list-item-or-its-slotted-content)).
+
+**Handle activation by listening for `click`** on the `pie-list-item` (or on the `pie-list`, since the event bubbles). Because it is a real `<button>`, activation is native: both pointer taps and keyboard (Enter, and Space) fire a `click`, so a single `click` listener covers every input. The row shows a pressed tint while it is pressed - by pointer, or while Space is held on the focused row - and the focus ring on keyboard focus. Give the `pie-list` its own accessible name (e.g. `aria-label`).
+
+**When the button opens a popup (dialog, menu, etc.)**, pass the `aria` prop with `button.haspopup` set to the popup type. This is forwarded to the internal `<button>` so assistive technology announces it correctly:
+
+```html
+<!-- A row that opens a dialog -->
+<pie-list-item
+  interactionType="button"
+  primaryText="Delete account"
+  secondaryText="Permanently remove your account"
+  .aria=${{ button: { haspopup: 'dialog' } }}>
+</pie-list-item>
+```
+
+In React:
+
+```jsx
+<PieListItem
+  interactionType="button"
+  primaryText="Delete account"
+  secondaryText="Permanently remove your account"
+  aria={{ button: { haspopup: 'dialog' } }}
+  onClick={openConfirmDialog}
+/>
+```
+
+```js
+import '@justeattakeaway/pie-webc/components/list.js';
+import '@justeattakeaway/pie-webc/components/list-item.js';
+```
+
+```html
+<pie-list aria-label="Account actions">
+  <pie-list-item interactionType="button" primaryText="Edit profile" secondaryText="Update your name and photo"></pie-list-item>
+  <pie-list-item interactionType="button" primaryText="Sign out" secondaryText="End your session on this device"></pie-list-item>
+</pie-list>
+
+<script type="module">
+  document.querySelector('pie-list').addEventListener('click', (event) => {
+    const item = event.target.closest('pie-list-item');
+    if (item) runActionFor(item.primaryText);
+  });
+</script>
+```
+
+In React, attach an `onClick` to the item:
+
+```jsx
+import { PieListItem } from '@justeattakeaway/pie-webc/react/list-item.js';
+
+<PieListItem interactionType="button" primaryText="Edit profile" secondaryText="Update your name and photo" onClick={openProfileEditor} />
+```
+
 ### Framework variants
 
 **For Native JS Applications, Vue, Angular, Svelte etc.:**

package/custom-elements.json

@@ -70,9 +70,9 @@
           "kind": "variable",
           "name": "interactionTypes",
           "type": {
-            "text": "['none', 'radio', 'checkbox', 'switch', 'link']"
+            "text": "['none', 'radio', 'checkbox', 'switch', 'link', 'button']"
           },
-          "default": "['none', 'radio', 'checkbox', 'switch', 'link']"
+          "default": "['none', 'radio', 'checkbox', 'switch', 'link', 'button']"
         },
         {
           "kind": "variable",
@@ -174,6 +174,14 @@
               "name": "disabled",
               "attribute": "disabled"
             },
+            {
+              "kind": "field",
+              "name": "aria",
+              "type": {
+                "text": "ListItemProps['aria']"
+              },
+              "attribute": "aria"
+            },
             {
               "kind": "field",
               "name": "_parentDisabled",
@@ -250,6 +258,24 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "_isButtonRow",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_isOverlayRow",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_providesAria",
@@ -295,7 +321,7 @@
                   "text": "void"
                 }
               },
-              "description": "Sets the item's role from `interactionType`: `presentation` for radio/checkbox (so the group\nowns those controls directly), otherwise `listitem` (static items, switches and links). A role\nset explicitly by the consumer is left untouched, even if it is added or removed dynamically\nafter the element connects."
+              "description": "Sets the item's role from `interactionType`: `presentation` for radio/checkbox (so the group\nowns those controls directly), otherwise `listitem` (static items, switches, links and\nbuttons). A role set explicitly by the consumer is left untouched, even if it is added or\nremoved dynamically after the element connects."
             },
             {
               "kind": "field",
@@ -304,7 +330,7 @@
                 "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.",
+              "description": "The accessible name and description this item provides to its interactive element, stitched\nfrom its text. Selection controls consume it via `ariaContext` (each applying it to the\nelement that carries its role); the action button of a `button` row takes it directly as\n`aria-label`/`aria-description` in the template; a link anchor takes it via `_applyLinkAria`.",
               "readonly": true
             },
             {
@@ -322,7 +348,7 @@
                   "text": "void"
                 }
               },
-              "description": "When the item is a link, names the slotted (empty) anchor from the item's own text: the parent\nowns the child's aria. The anchor is plain light-DOM, so it cannot reference the shadow-DOM text\nvia `aria-labelledby`; and it is not a PIE control that consumes `ariaContext`, so we set the\nattributes imperatively. The visible text is `aria-hidden` in the template, so nothing is\nannounced twice.\n\nA consumer-provided name/description always wins: we capture (once) whether the anchor already\ncarries `aria-label`/`aria-labelledby` or `aria-description`/`aria-describedby` and, if so,\nleave that attribute untouched. Otherwise we keep our generated value in sync with the text."
+              "description": "On a link row, names the slotted (empty) anchor from the item's own text: the parent owns the\nchild's aria. The anchor is plain light-DOM, so it cannot reference the shadow-DOM text via\n`aria-labelledby`; and it is not a PIE control that consumes `ariaContext`, so we set the\nattributes imperatively. The visible text is `aria-hidden` in the template, so nothing is\nannounced twice. (A `button` row names its own rendered element in the template instead.)\n\nA consumer-provided name/description always wins: we capture (once) whether the anchor already\ncarries `aria-label`/`aria-labelledby` or `aria-description`/`aria-describedby` and, if so,\nleave that attribute untouched. Otherwise we keep our generated value in sync with the text."
             },
             {
               "kind": "method",
@@ -331,6 +357,11 @@
             {
               "kind": "method",
               "name": "_renderTrailingContent"
+            },
+            {
+              "kind": "method",
+              "name": "_renderActionButton",
+              "description": "The interactive target for a `button` row: an empty, native `<button>` stretched invisibly\nover the whole row (see the SCSS). The item renders and owns it - rather than the consumer\nslotting one - so it can name it from its own text and keep its attributes private (it is just\nan action box, not a configurable control). Being a real button, activation is native: pointer\nclicks and keyboard (Enter/Space) both fire a `click` that bubbles out, so consumers listen for\n`click` on the `pie-list-item`. It is `type=\"button\"`, so it never submits a form."
             }
           ],
           "attributes": [
@@ -374,6 +405,13 @@
             {
               "name": "disabled",
               "fieldName": "disabled"
+            },
+            {
+              "name": "aria",
+              "type": {
+                "text": "ListItemProps['aria']"
+              },
+              "fieldName": "aria"
             }
           ],
           "superclass": {

package/dist/{PieElement-CGtUo9tK.js → PieElement-DQQMEr70.js}

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

package/dist/index-BH08tWcm.js

@@ -0,0 +1,339 @@
+import { unsafeCSS as x, isServer as y, html as d, nothing as p } from "lit";
+import { property as c, state as k } from "lit/decorators.js";
+import { classMap as _ } from "lit/directives/class-map.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { validPropertyValues as I, safeCustomElement as T, ariaContext as w, parentDisabledContext as C } from "@justeattakeaway/pie-webc-core";
+import { P as A } from "./PieElement-DQQMEr70.js";
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let f = 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 g = class {
+  constructor(t, e, o, s) {
+    if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (r, n) => {
+      this.unsubscribe && (this.unsubscribe !== n && (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, n)), this.unsubscribe = n;
+    }, 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 f(this.context, this.host, this.t, this.subscribe));
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class R {
+  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 L extends Event {
+  constructor(t, e) {
+    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e;
+  }
+}
+class P extends R {
+  constructor(t, e, o) {
+    var s, r;
+    super(e.context !== void 0 ? e.initialValue : o), this.onContextRequest = (n) => {
+      if (n.context !== this.context) return;
+      const b = n.contextTarget ?? n.composedPath()[0];
+      b !== this.host && (n.stopPropagation(), this.addCallback(n.callback, b, n.subscribe));
+    }, this.onProviderRequest = (n) => {
+      if (n.context !== this.context || (n.contextTarget ?? n.composedPath()[0]) === this.host) return;
+      const b = /* @__PURE__ */ new Set();
+      for (const [u, { consumerHost: v }] of this.subscriptions) b.has(u) || (b.add(u), v.dispatchEvent(new f(this.context, v, u, !0)));
+      n.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 L(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 g(this, { context: i, callback: (s) => {
+        e.set.call(this, s);
+      }, subscribe: t });
+    })) : e.constructor.addInitializer(((s) => {
+      new g(s, { context: i, callback: (r) => {
+        s[o] = r;
+      }, subscribe: t });
+    }));
+  };
+}
+const S = ["none", "radio", "checkbox", "switch", "link", "button"], h = {
+  isCompact: !1,
+  isBold: !1,
+  hasMedia: !1,
+  interactionType: "none",
+  disabled: !1
+}, D = "*,*: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-link,.c-listItem-container.is-button{position:relative}.c-listItem-container.is-selectable:not(.is-disabled),.c-listItem-container.is-link,.c-listItem-container.is-button: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),.c-listItem-container.is-link,.c-listItem-container.is-button: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),.c-listItem-container.is-link,.c-listItem-container.is-button:not(.is-disabled){cursor:pointer}.c-listItem-container.is-selectable:not(.is-disabled):hover,.c-listItem-container.is-link:hover,.c-listItem-container.is-button:not(.is-disabled):hover{background-color:var(--list-item-hover-bg);--interactive-container-tint: var(--list-item-hover-bg)}.c-listItem-container.is-selectable:not(.is-disabled):active,.c-listItem-container.is-link:active,.c-listItem-container.is-button:not(.is-disabled):active{background-color:var(--list-item-active-bg);--interactive-container-tint: var(--list-item-active-bg)}.c-listItem-container.is-button:has(.c-listItem-action:active){background-color:var(--list-item-active-bg);--interactive-container-tint: var(--list-item-active-bg)}slot[name=link]::slotted(a),.c-listItem-action{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit}.c-listItem-action{padding:0;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;cursor:pointer}.c-listItem-action:disabled{cursor:default}slot[name=link]::slotted(a:focus-visible),.c-listItem-action:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.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-container.is-button.is-disabled .c-listItem-primaryText,.c-listItem-container.is-button.is-disabled .c-listItem-secondaryText,.c-listItem-container.is-button.is-disabled .c-listItem-metaText{color:var(--dt-color-content-disabled)}.c-listItem-container.is-button.is-disabled ::slotted(.c-pieIcon){color:var(--dt-color-disabled-01)}.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 $ = Object.defineProperty, z = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
+  for (var s = o > 1 ? void 0 : o ? z(t, e) : t, r = i.length - 1, n; r >= 0; r--)
+    (n = i[r]) && (s = (o ? n(t, e, s) : n(s)) || s);
+  return o && s && $(t, e, s), s;
+};
+const q = "pie-list-item";
+let a = class extends A {
+  constructor() {
+    super(...arguments), this.isCompact = h.isCompact, this.isBold = h.isBold, this.hasMedia = h.hasMedia, this.interactionType = h.interactionType, this.disabled = h.disabled, this._parentDisabled = !1, this._ariaProvider = y ? void 0 : new P(this, { context: w }), this._managedRole = null, this._linkAriaCaptured = !1, this._consumerNamedLink = !1, this._consumerDescribedLink = !1, this._handleHostClick = (i) => {
+      if (!this._isSelectable || this._isDisabled) return;
+      const t = this._control;
+      !t || i.composedPath().includes(t) || (t.click(), t.focus());
+    };
+  }
+  // A selection row hosts a slotted control (radio/checkbox/switch) and makes the whole row a
+  // toggle target. `link`/`button` are interactive too, but they are single navigation/action
+  // targets rather than selection controls, so they are deliberately excluded here.
+  get _isSelectable() {
+    return this.interactionType === "radio" || this.interactionType === "checkbox" || this.interactionType === "switch";
+  }
+  get _isLinkRow() {
+    return this.interactionType === "link";
+  }
+  get _isButtonRow() {
+    return this.interactionType === "button";
+  }
+  // A link and a button row share the same visual mechanic: an empty element stretched over the
+  // whole row as the interactive target, named by the item from its own text. They differ in who
+  // owns that element - a link is a consumer-slotted anchor, a button is one the item renders.
+  get _isOverlayRow() {
+    return this._isLinkRow || this._isButtonRow;
+  }
+  // True when the item lends its text as an interactive element's accessible name/description:
+  // selectable rows (radio/checkbox/switch) and overlay rows (link anchor / action button).
+  get _providesAria() {
+    return this._isSelectable || this._isOverlayRow;
+  }
+  // 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.interactionType === "radio" || this.interactionType === "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._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), this._applyLinkAria();
+  }
+  /**
+   * Sets the item's role from `interactionType`: `presentation` for radio/checkbox (so the group
+   * owns those controls directly), otherwise `listitem` (static items, switches, links and
+   * buttons). A role set explicitly by the consumer is left untouched, even if it is added or
+   * removed dynamically after the element connects.
+   */
+  _applyRole() {
+    const i = this.getAttribute("role");
+    if (i !== null && i !== this._managedRole) return;
+    const t = this._ownedByGroup ? "presentation" : "listitem";
+    this._managedRole = t, this.setAttribute("role", t);
+  }
+  /**
+   * The accessible name and description this item provides to its interactive element, stitched
+   * from its text. Selection controls consume it via `ariaContext` (each applying it to the
+   * element that carries its role); the action button of a `button` row takes it directly as
+   * `aria-label`/`aria-description` in the template; a link anchor takes it via `_applyLinkAria`.
+   */
+  get _providedAria() {
+    if (!this._providesAria) return;
+    const i = [this.secondaryText, this.metaText].filter(Boolean).join(". ");
+    return { label: this.primaryText, description: i || void 0 };
+  }
+  /**
+   * On a link row, names the slotted (empty) anchor from the item's own text: the parent owns the
+   * child's aria. The anchor is plain light-DOM, so it cannot reference the shadow-DOM text via
+   * `aria-labelledby`; and it is not a PIE control that consumes `ariaContext`, so we set the
+   * attributes imperatively. The visible text is `aria-hidden` in the template, so nothing is
+   * announced twice. (A `button` row names its own rendered element in the template instead.)
+   *
+   * A consumer-provided name/description always wins: we capture (once) whether the anchor already
+   * carries `aria-label`/`aria-labelledby` or `aria-description`/`aria-describedby` and, if so,
+   * leave that attribute untouched. Otherwise we keep our generated value in sync with the text.
+   */
+  _applyLinkAria() {
+    if (!this._isLinkRow) {
+      if (this._linkAriaCaptured) {
+        const e = this.querySelector('a[slot="link"]');
+        e && (this._consumerNamedLink || e.removeAttribute("aria-label"), this._consumerDescribedLink || e.removeAttribute("aria-description")), this._linkAriaCaptured = !1, this._consumerNamedLink = !1, this._consumerDescribedLink = !1;
+      }
+      return;
+    }
+    const i = this.querySelector('a[slot="link"]');
+    if (!i) return;
+    this._linkAriaCaptured || (this._consumerNamedLink = i.hasAttribute("aria-label") || i.hasAttribute("aria-labelledby"), this._consumerDescribedLink = i.hasAttribute("aria-description") || i.hasAttribute("aria-describedby"), this._linkAriaCaptured = !0);
+    const t = this._providedAria;
+    this._consumerNamedLink || (t != null && t.label ? i.setAttribute("aria-label", t.label) : i.removeAttribute("aria-label")), this._consumerDescribedLink || (t != null && t.description ? i.setAttribute("aria-description", t.description) : i.removeAttribute("aria-description"));
+  }
+  _renderSecondaryText() {
+    const { secondaryText: i } = this;
+    return i ? d`<span class="c-listItem-secondaryText">${i}</span>` : p;
+  }
+  // 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 ? d`<span class="c-listItem-metaText c-listItem-trailing" aria-hidden=${this._providesAria ? "true" : p}>${i}</span>` : d`<div class="c-listItem-trailing"><slot name="trailing"></slot></div>`;
+  }
+  /**
+   * The interactive target for a `button` row: an empty, native `<button>` stretched invisibly
+   * over the whole row (see the SCSS). The item renders and owns it - rather than the consumer
+   * slotting one - so it can name it from its own text and keep its attributes private (it is just
+   * an action box, not a configurable control). Being a real button, activation is native: pointer
+   * clicks and keyboard (Enter/Space) both fire a `click` that bubbles out, so consumers listen for
+   * `click` on the `pie-list-item`. It is `type="button"`, so it never submits a form.
+   */
+  _renderActionButton() {
+    var t, e;
+    const i = this._providedAria;
+    return d`<button
+            class="c-listItem-action"
+            type="button"
+            ?disabled=${this._isDisabled}
+            aria-label=${m(i == null ? void 0 : i.label)}
+            aria-description=${m(i == null ? void 0 : i.description)}
+            aria-haspopup=${m((e = (t = this.aria) == null ? void 0 : t.button) == null ? void 0 : e.haspopup)}></button>`;
+  }
+  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-link": this._isLinkRow,
+      "is-button": this._isButtonRow,
+      "is-disabled": this._isDisabled
+    };
+    return d`
+        <div class=${_(t)}>
+            ${this._isLinkRow ? d`<slot name="link"></slot>` : p}
+            ${this._isButtonRow ? this._renderActionButton() : p}
+            <div class="c-listItem-leading">
+                <slot name="leading"></slot>
+            </div>
+
+            <div class="c-listItem-text" aria-hidden=${this._providesAria ? "true" : p}>
+                <span class="c-listItem-primaryText">${i}</span>
+                ${this._renderSecondaryText()}
+            </div>
+
+            ${this._renderTrailingContent()}
+        </div>`;
+  }
+};
+a.styles = x(D);
+l([
+  c({ type: String })
+], a.prototype, "primaryText", 2);
+l([
+  c({ type: String })
+], a.prototype, "secondaryText", 2);
+l([
+  c({ type: String })
+], a.prototype, "metaText", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "isCompact", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "isBold", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "hasMedia", 2);
+l([
+  c({ type: String }),
+  I(q, S, h.interactionType)
+], a.prototype, "interactionType", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "disabled", 2);
+l([
+  c({ type: Object })
+], a.prototype, "aria", 2);
+l([
+  B({ context: C, subscribe: !0 }),
+  k()
+], a.prototype, "_parentDisabled", 2);
+a = l([
+  T("pie-list-item")
+], a);
+export {
+  a as P,
+  h as d,
+  S as i
+};

package/dist/index.js

@@ -1,5 +1,5 @@
 import { html as n, unsafeCSS as m } from "lit";
-import { P as f } from "./PieElement-CGtUo9tK.js";
+import { P as f } from "./PieElement-DQQMEr70.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) => {