@justeattakeaway/pie-list 0.4.0 → 0.6.0

package/dist/index-DpLh8onF.js

@@ -0,0 +1,344 @@
+import { unsafeCSS as x, isServer as y, html as h, 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-wRsAkkYC.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 D 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 P = ["none", "radio", "checkbox", "switch", "link", "button"], d = {
+  isCompact: !1,
+  isBold: !1,
+  hasMedia: !1,
+  interactionType: "none",
+  disabled: !1,
+  hasDivider: !1
+}, S = "*,*:after,*:before{box-sizing:inherit}:host{--list-item-inline-padding: var(--dt-spacing-d);--list-item-alignment: flex-start;display:block}.c-listItem-container{--list-item-block-padding: var(--dt-spacing-d);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-padding);display:flex;align-items:var(--list-item-alignment);gap:var(--dt-spacing-c);min-height:56px}.c-listItem-container.has-divider{padding-block-end:calc(var(--list-item-block-padding) - 1px);border-bottom:1px solid var(--dt-color-divider-default)}.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, q = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
+  for (var s = o > 1 ? void 0 : o ? q(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 z = "pie-list-item";
+let a = class extends A {
+  constructor() {
+    super(...arguments), this.isCompact = d.isCompact, this.isBold = d.isBold, this.hasMedia = d.hasMedia, this.interactionType = d.interactionType, this.disabled = d.disabled, this.hasDivider = d.hasDivider, this._parentDisabled = !1, this._ariaProvider = y ? void 0 : new D(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 ? h`<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 ? h`<span class="c-listItem-metaText c-listItem-trailing" aria-hidden=${this._providesAria ? "true" : p}>${i}</span>` : h`<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 h`<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,
+      "has-divider": this.hasDivider,
+      "is-selectable": this._isSelectable,
+      "is-link": this._isLinkRow,
+      "is-button": this._isButtonRow,
+      "is-disabled": this._isDisabled
+    };
+    return h`
+        <div class=${_(t)}>
+            ${this._isLinkRow ? h`<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(S);
+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(z, P, d.interactionType)
+], a.prototype, "interactionType", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "disabled", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "hasDivider", 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,
+  d,
+  P as i
+};

package/dist/index.js

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

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

@@ -1,5 +1,10 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
-export declare const interactionTypes: readonly ["none", "radio", "checkbox", "switch", "link"];
+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 {
     /**
@@ -42,6 +47,10 @@ export interface ListItemProps {
      * - `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 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
@@ -55,7 +64,18 @@ export interface ListItemProps {
      * (static) item.
      */
     disabled?: boolean;
+    /**
+     * When `true`, renders a bottom divider line on the item. Do not set this to true for the last item in a list.
+     */
+    hasDivider?: 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;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"}
+{"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;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;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,YAO1B,CAAC"}

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

@@ -15,8 +15,10 @@ export declare class PieListItem extends PieElement implements ListItemProps {
     isCompact: boolean;
     isBold: boolean;
     hasMedia: boolean;
-    interactionType: "checkbox" | "link" | "none" | "radio" | "switch";
+    interactionType: "button" | "checkbox" | "link" | "none" | "radio" | "switch";
     disabled: boolean;
+    hasDivider: boolean;
+    aria: ListItemProps['aria'];
     private _parentDisabled;
     private _ariaProvider;
     private _abortController;
@@ -26,6 +28,8 @@ export declare class PieListItem extends PieElement implements ListItemProps {
     private _consumerDescribedLink;
     private get _isSelectable();
     private get _isLinkRow();
+    private get _isButtonRow();
+    private get _isOverlayRow();
     private get _providesAria();
     private get _ownedByGroup();
     private get _isDisabled();
@@ -35,18 +39,16 @@ export declare class PieListItem extends PieElement implements ListItemProps {
     protected updated(): void;
     /**
      * 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.
+     * 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();
     /**
@@ -55,11 +57,11 @@ export declare class PieListItem extends PieElement implements ListItemProps {
      */
     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
+     * 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.
+     * 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,
@@ -68,6 +70,15 @@ export declare class PieListItem extends PieElement implements ListItemProps {
     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,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"}
+{"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,UAAU,UAA2B;IAGrC,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;IAiCN,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-BMp2PPeH.js";
+import "lit/directives/if-defined.js";
+import { P } from "../index-DpLh8onF.js";
 import "@justeattakeaway/pie-webc-core";
-import "../PieElement-CGtUo9tK.js";
+import "../PieElement-wRsAkkYC.js";
 export {
-  s as PieListItem
+  P as PieListItem
 };

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

@@ -1,7 +1,7 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
-import { P as i } from "../index-BMp2PPeH.js";
-import { d as n, i as c } from "../index-BMp2PPeH.js";
+import { P as i } from "../index-DpLh8onF.js";
+import { d as n, i as c } from "../index-DpLh8onF.js";
 const s = t({
   displayName: "PieListItem",
   elementClass: i,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-list",
   "description": "PIE Design System List built using Web Components",
-  "version": "0.4.0",
+  "version": "0.6.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.2",
+    "@justeattakeaway/pie-css": "1.3.3",
     "@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",

package/src/list.scss

@@ -2,6 +2,4 @@
 
 :host {
     display: block;
-
-    @include p.list-item-divider;
 }

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

@@ -1,7 +1,12 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
-// `button` is reserved for future work and is intentionally not yet an accepted value.
-export const interactionTypes = ['none', 'radio', 'checkbox', 'switch', 'link'] as const;
+type AriaProps = {
+    button?: {
+        haspopup?: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true';
+    };
+};
+
+export const interactionTypes = ['none', 'radio', 'checkbox', 'switch', 'link', 'button'] as const;
 
 export type InteractionType = typeof interactionTypes[number];
 
@@ -50,6 +55,10 @@ export interface ListItemProps {
      * - `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 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
@@ -64,6 +73,18 @@ export interface ListItemProps {
      * (static) item.
      */
     disabled?: boolean
+
+    /**
+     * When `true`, renders a bottom divider line on the item. Do not set this to true for the last item in a list.
+     */
+    hasDivider?: 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'>>;
@@ -74,4 +95,5 @@ export const defaultProps: DefaultProps = {
     hasMedia: false,
     interactionType: 'none',
     disabled: false,
+    hasDivider: false,
 };