@justeattakeaway/pie-list 0.2.0 → 0.4.0

package/dist/index-BMp2PPeH.js

@@ -0,0 +1,307 @@
+import { unsafeCSS as f, isServer as x, html as p, nothing as b } 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 I, ariaContext as T, parentDisabledContext as C } from "@justeattakeaway/pie-webc-core";
+import { P as w } from "./PieElement-CGtUo9tK.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 = (n, r) => {
+      this.unsubscribe && (this.unsubscribe !== r && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = n, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(n, r)), this.unsubscribe = r;
+    }, this.host = t, e.context !== void 0) {
+      const n = e;
+      this.context = n.context, this.callback = n.callback, this.subscribe = n.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 A {
+  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 A {
+  constructor(t, e, o) {
+    var s, n;
+    super(e.context !== void 0 ? e.initialValue : o), this.onContextRequest = (r) => {
+      if (r.context !== this.context) return;
+      const h = r.contextTarget ?? r.composedPath()[0];
+      h !== this.host && (r.stopPropagation(), this.addCallback(r.callback, h, r.subscribe));
+    }, this.onProviderRequest = (r) => {
+      if (r.context !== this.context || (r.contextTarget ?? r.composedPath()[0]) === this.host) return;
+      const h = /* @__PURE__ */ new Set();
+      for (const [u, { consumerHost: m }] of this.subscriptions) h.has(u) || (h.add(u), m.dispatchEvent(new g(this.context, m, u, !0)));
+      r.stopPropagation();
+    }, this.host = t, e.context !== void 0 ? this.context = e.context : this.context = e, this.attachListeners(), (n = (s = this.host).addController) == null || n.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 R({ 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: (n) => {
+        s[o] = n;
+      }, subscribe: t });
+    }));
+  };
+}
+const S = ["none", "radio", "checkbox", "switch", "link"], d = {
+  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{position:relative}.c-listItem-container.is-selectable:not(.is-disabled),.c-listItem-container.is-link{--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{--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{cursor:pointer}.c-listItem-container.is-selectable:not(.is-disabled):hover,.c-listItem-container.is-link: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{background-color:var(--list-item-active-bg);--interactive-container-tint: var(--list-item-active-bg)}slot[name=link]::slotted(a){position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit}slot[name=link]::slotted(a: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-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, z = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
+  for (var s = o > 1 ? void 0 : o ? z(t, e) : t, n = i.length - 1, r; n >= 0; n--)
+    (r = i[n]) && (s = (o ? r(t, e, s) : r(s)) || s);
+  return o && s && q(t, e, s), s;
+};
+const B = "pie-list-item";
+let a = class extends w {
+  constructor() {
+    super(...arguments), this.isCompact = d.isCompact, this.isBold = d.isBold, this.hasMedia = d.hasMedia, this.interactionType = d.interactionType, this.disabled = d.disabled, this._parentDisabled = !1, this._ariaProvider = x ? void 0 : new P(this, { context: T }), 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` is interactive too, but it is a navigation target rather than a
+  // selection control, so it is deliberately excluded here.
+  get _isSelectable() {
+    return this.interactionType === "radio" || this.interactionType === "checkbox" || this.interactionType === "switch";
+  }
+  get _isLinkRow() {
+    return this.interactionType === "link";
+  }
+  // True when the item lends its text to a slotted control as that control's accessible
+  // name/description: selectable rows (radio/checkbox/switch) and link rows (the slotted anchor).
+  get _providesAria() {
+    return this._isSelectable || this._isLinkRow;
+  }
+  // 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 and links). 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 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._providesAria) return;
+    const i = [this.secondaryText, this.metaText].filter(Boolean).join(". ");
+    return { label: this.primaryText, description: i || void 0 };
+  }
+  /**
+   * When the item is a link, 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 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 ? p`<span class="c-listItem-secondaryText">${i}</span>` : b;
+  }
+  // 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._providesAria ? "true" : b}>${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-link": this._isLinkRow,
+      "is-disabled": this._isDisabled
+    };
+    return p`
+        <div class=${k(t)}>
+            ${this._isLinkRow ? p`<slot name="link"></slot>` : b}
+            <div class="c-listItem-leading">
+                <slot name="leading"></slot>
+            </div>
+
+            <div class="c-listItem-text" aria-hidden=${this._providesAria ? "true" : b}>
+                <span class="c-listItem-primaryText">${i}</span>
+                ${this._renderSecondaryText()}
+            </div>
+
+            ${this._renderTrailingContent()}
+        </div>`;
+  }
+};
+a.styles = f(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 }),
+  _(B, S, d.interactionType)
+], a.prototype, "interactionType", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "disabled", 2);
+l([
+  R({ context: C, subscribe: !0 }),
+  y()
+], a.prototype, "_parentDisabled", 2);
+a = l([
+  I("pie-list-item")
+], a);
+export {
+  a as P,
+  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-B3g_8vKy.js";
+import { P as f } from "./PieElement-CGtUo9tK.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,6 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
-export declare const selectionTypes: readonly ["none", "radio", "checkbox", "switch"];
-export type SelectionType = typeof selectionTypes[number];
+export declare const interactionTypes: readonly ["none", "radio", "checkbox", "switch", "link"];
+export type InteractionType = typeof interactionTypes[number];
 export interface ListItemProps {
     /**
      * **Required:** Provides an overview of the content.
@@ -31,20 +31,23 @@ 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.
      *
-     * 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

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;AAG5E,eAAO,MAAM,gBAAgB,0DAA2D,CAAC;AAEzF,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;;;;;;;;;;;;;;;;OAgBG;IACH,eAAe,CAAC,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAEjD;;;;;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

@@ -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,18 @@ export declare class PieListItem extends PieElement implements ListItemProps {
     isCompact: boolean;
     isBold: boolean;
     hasMedia: boolean;
-    selectionType: "checkbox" | "none" | "radio" | "switch";
+    interactionType: "checkbox" | "link" | "none" | "radio" | "switch";
     disabled: boolean;
     private _parentDisabled;
     private _ariaProvider;
     private _abortController;
-    private _hasExplicitRole;
+    private _managedRole;
+    private _linkAriaCaptured;
+    private _consumerNamedLink;
+    private _consumerDescribedLink;
     private get _isSelectable();
+    private get _isLinkRow();
+    private get _providesAria();
     private get _ownedByGroup();
     private get _isDisabled();
     private get _control();
@@ -28,9 +34,10 @@ 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 and links). A role
+     * set explicitly by the consumer is left untouched, even if it is added or removed dynamically
+     * after the element connects.
      */
     private _applyRole;
     /**
@@ -47,6 +54,18 @@ export declare class PieListItem extends PieElement implements ListItemProps {
      * target. Skips clicks that already landed on the control, to avoid a double toggle.
      */
     private _handleHostClick;
+    /**
+     * When the item is a link, 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 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>;
     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,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;AAWb,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,oDAAgC;IAG/C,QAAQ,UAAyB;IAMrC,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;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;;;;;;;OAOG;IACH,OAAO,KAAK,aAAa,GAMxB;IAED;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAQtB;IAEF;;;;;;;;;;OAUG;IACH,OAAO,CAAC,cAAc;IA8CtB,oBAAoB;IAUpB,sBAAsB;IAStB,MAAM;IA8BN,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 "lit/directives/class-map.js";
-import { P as s } from "../index-KnN5fPmj.js";
+import { P as s } from "../index-BMp2PPeH.js";
 import "@justeattakeaway/pie-webc-core";
-import "../PieElement-B3g_8vKy.js";
+import "../PieElement-CGtUo9tK.js";
 export {
   s 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-KnN5fPmj.js";
-import { d as c, s as n } from "../index-KnN5fPmj.js";
-const i = t({
+import { P as i } from "../index-BMp2PPeH.js";
+import { d as n, i as c } from "../index-BMp2PPeH.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.2.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -38,8 +38,8 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.3.1",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.7"
+    "@justeattakeaway/pie-css": "1.3.2",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.8"
   },
   "dependencies": {
     "@justeattakeaway/pie-webc-core": "16.1.0",

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

@@ -1,8 +1,9 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
-export const selectionTypes = ['none', 'radio', 'checkbox', 'switch'] as const;
+// `button` is reserved for future work and is intentionally not yet an accepted value.
+export const interactionTypes = ['none', 'radio', 'checkbox', 'switch', 'link'] as const;
 
-export type SelectionType = typeof selectionTypes[number];
+export type InteractionType = typeof interactionTypes[number];
 
 export interface ListItemProps {
     /**
@@ -38,20 +39,23 @@ 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.
      *
-     * 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
@@ -68,6 +72,6 @@ export const defaultProps: DefaultProps = {
     isCompact: false,
     isBold: false,
     hasMedia: false,
-    selectionType: 'none',
+    interactionType: 'none',
     disabled: false,
 };