@justeattakeaway/pie-list 0.3.0 → 0.5.0

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-ab_PEQpW.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) => {

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

@@ -1,6 +1,11 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
-export declare const selectionTypes: readonly ["none", "radio", "checkbox", "switch"];
-export type SelectionType = typeof selectionTypes[number];
+type AriaProps = {
+    button?: {
+        haspopup?: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true';
+    };
+};
+export declare const interactionTypes: readonly ["none", "radio", "checkbox", "switch", "link", "button"];
+export type InteractionType = typeof interactionTypes[number];
 export interface ListItemProps {
     /**
      * **Required:** Provides an overview of the content.
@@ -31,20 +36,27 @@ export interface ListItemProps {
      */
     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.
+     * How the whole row behaves. A single prop drives the row's role, its accessible naming, whether
+     * it forwards clicks, and its interactive (hover/active) states. The item always generates the
+     * accessible name and description of whatever it hosts from its own text (`primaryText`,
+     * `secondaryText`, `metaText`), so you never set ARIA on the item or its slotted content yourself.
      *
      * - `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"`.
+     * - `link` - the whole row is a single navigation link. Slot an empty `<a slot="link" href="...">`;
+     *   it is stretched over the entire row as the clickable target and named from the item's text.
+     * - `button` - the whole row is a single button (for an in-page action rather than navigation).
+     *   The item renders the button for you (no slotting); it is stretched invisibly over the entire
+     *   row, named from the item's text, and dispatches a native `click` (pointer and keyboard).
+     *   Listen for `click` on the `pie-list-item`. It is not a form control.
      *
-     * 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.
+     * Set this on each interactive row. When radio/checkbox rows sit inside a `pie-radio-group` /
+     * `pie-checkbox-group`, the group lays them out as a divided list automatically; this prop
+     * governs the row's own role and behaviour.
      */
-    selectionType?: typeof selectionTypes[number];
+    interactionType?: typeof interactionTypes[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
@@ -52,7 +64,14 @@ export interface ListItemProps {
      * (static) item.
      */
     disabled?: boolean;
+    /**
+     * Additional ARIA properties that the item cannot derive from its text props. `button.haspopup`
+     * applies when `interactionType="button"`: its value is forwarded to the internal `<button>`.
+     * Set it when the button row triggers a popup such as a dialog or menu.
+     */
+    aria?: AriaProps;
 }
 export type DefaultProps = ComponentDefaultProps<ListItemProps, keyof Omit<ListItemProps, 'primaryText' | 'secondaryText' | 'metaText'>>;
 export declare const defaultProps: DefaultProps;
+export {};
 //# sourceMappingURL=defs.d.ts.map

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,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"}
+{"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,KAAK,SAAS,GAAG;IACb,MAAM,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;KACvE,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAAqE,CAAC;AAEnG,MAAM,MAAM,eAAe,GAAG,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;AAE9D,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;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAEjD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;CACnB;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

@@ -6,6 +6,7 @@ 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`.
+ * @slot link - Rendered only when `interactionType="link"`. Slot one empty anchor (e.g. `<a slot="link" href="/x">`) stretched over the whole row as the link target. Must contain no text.
  */
 export declare class PieListItem extends PieElement implements ListItemProps {
     primaryText: ListItemProps['primaryText'];
@@ -14,13 +15,21 @@ export declare class PieListItem extends PieElement implements ListItemProps {
     isCompact: boolean;
     isBold: boolean;
     hasMedia: boolean;
-    selectionType: "checkbox" | "none" | "radio" | "switch";
+    interactionType: "button" | "checkbox" | "link" | "none" | "radio" | "switch";
     disabled: boolean;
+    aria: ListItemProps['aria'];
     private _parentDisabled;
     private _ariaProvider;
     private _abortController;
-    private _hasExplicitRole;
+    private _managedRole;
+    private _linkAriaCaptured;
+    private _consumerNamedLink;
+    private _consumerDescribedLink;
     private get _isSelectable();
+    private get _isLinkRow();
+    private get _isButtonRow();
+    private get _isOverlayRow();
+    private get _providesAria();
     private get _ownedByGroup();
     private get _isDisabled();
     private get _control();
@@ -28,18 +37,17 @@ export declare class PieListItem extends PieElement implements ListItemProps {
     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.
+     * 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.
      */
     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.
+     * 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`.
      */
     private get _providedAria();
     /**
@@ -47,8 +55,29 @@ export declare class PieListItem extends PieElement implements ListItemProps {
      * target. Skips clicks that already landed on the control, to avoid a double toggle.
      */
     private _handleHostClick;
+    /**
+     * 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.
+     */
+    private _applyLinkAria;
     _renderSecondaryText(): import('lit-html').TemplateResult<1> | typeof nothing;
     _renderTrailingContent(): import('lit-html').TemplateResult<1>;
+    /**
+     * 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(): import('lit-html').TemplateResult<1>;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-list-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACa,OAAO,EAC1B,MAAM,KAAK,CAAC;AAYb,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AACrF,OAAO,EAAE,KAAK,aAAa,EAAkC,MAAM,QAAQ,CAAC;AAG5E,QAAA,MAAM,iBAAiB,kBAAkB,CAAC;AAE1C;;;;;GAKG;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,eAAe,+DAAgC;IAG/C,QAAQ,UAAyB;IAGjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAMhC,OAAO,CAAC,eAAe,CAAS;IAYhC,OAAO,CAAC,aAAa,CAA8E;IAEnG,OAAO,CAAC,gBAAgB,CAAmB;IAI3C,OAAO,CAAC,YAAY,CAAuB;IAI3C,OAAO,CAAC,iBAAiB,CAAS;IAElC,OAAO,CAAC,kBAAkB,CAAS;IAEnC,OAAO,CAAC,sBAAsB,CAAS;IAKvC,OAAO,KAAK,aAAa,GAIxB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,YAAY,GAEvB;IAKD,OAAO,KAAK,aAAa,GAExB;IAID,OAAO,KAAK,aAAa,GAExB;IAKD,OAAO,KAAK,aAAa,GAExB;IAKD,OAAO,KAAK,WAAW,GAEtB;IAID,OAAO,KAAK,QAAQ,GAEnB;IAED,iBAAiB;IAOjB,oBAAoB;IAKpB,SAAS,CAAC,OAAO;IAMjB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAUlB;;;;;OAKG;IACH,OAAO,KAAK,aAAa,GAMxB;IAED;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAQtB;IAEF;;;;;;;;;;OAUG;IACH,OAAO,CAAC,cAAc;IA8CtB,oBAAoB;IAUpB,sBAAsB;IAStB;;;;;;;OAOG;IACH,mBAAmB;IAYnB,MAAM;IAgCN,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,10 @@
 import "lit";
 import "lit/decorators.js";
 import "lit/directives/class-map.js";
-import { P as s } from "../index-mqipXuiX.js";
+import "lit/directives/if-defined.js";
+import { P } from "../index-BH08tWcm.js";
 import "@justeattakeaway/pie-webc-core";
-import "../PieElement-ab_PEQpW.js";
+import "../PieElement-DQQMEr70.js";
 export {
-  s as PieListItem
+  P as PieListItem
 };

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-list",
   "description": "PIE Design System List built using Web Components",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -38,11 +38,11 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.3.1",
+    "@justeattakeaway/pie-css": "1.3.2",
     "@justeattakeaway/pie-monorepo-utils": "0.9.8"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "16.1.0",
+    "@justeattakeaway/pie-webc-core": "16.1.1",
     "@lit/context": "1.1.6"
   },
   "customElements": "custom-elements.json",