@justeattakeaway/pie-list 0.4.0 → 0.5.0

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,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;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;;;;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

@@ -15,8 +15,9 @@ 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;
+    aria: ListItemProps['aria'];
     private _parentDisabled;
     private _ariaProvider;
     private _abortController;
@@ -26,6 +27,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 +38,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 +56,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 +69,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,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-BMp2PPeH.js";
+import "lit/directives/if-defined.js";
+import { P } from "../index-BH08tWcm.js";
 import "@justeattakeaway/pie-webc-core";
-import "../PieElement-CGtUo9tK.js";
+import "../PieElement-DQQMEr70.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-BH08tWcm.js";
+import { d as n, i as c } from "../index-BH08tWcm.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.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -42,7 +42,7 @@
     "@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/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,13 @@ 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'>>;

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

@@ -3,6 +3,7 @@ import {
 } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { consume, ContextProvider } from '@lit/context';
 import {
     safeCustomElement,
@@ -50,6 +51,9 @@ export class PieListItem extends PieElement implements ListItemProps {
     @property({ type: Boolean })
         disabled = defaultProps.disabled;
 
+    @property({ type: Object })
+        aria: ListItemProps['aria'];
+
     // Whether a disabling ancestor (e.g. `pie-radio-group`) has provided its disabled state.
     // Defaults to false when there is no provider (a standalone item or a static list).
     @consume({ context: parentDisabledContext, subscribe: true })
@@ -83,8 +87,8 @@ export class PieListItem extends PieElement implements ListItemProps {
     private _consumerDescribedLink = false;
 
     // 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.
+    // toggle target. `link`/`button` are interactive too, but they are single navigation/action
+    // targets rather than selection controls, so they are deliberately excluded here.
     private get _isSelectable (): boolean {
         return this.interactionType === 'radio' ||
             this.interactionType === 'checkbox' ||
@@ -95,10 +99,21 @@ export class PieListItem extends PieElement implements ListItemProps {
         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).
+    private get _isButtonRow (): boolean {
+        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.
+    private get _isOverlayRow (): boolean {
+        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).
     private get _providesAria (): boolean {
-        return this._isSelectable || this._isLinkRow;
+        return this._isSelectable || this._isOverlayRow;
     }
 
     // radio/checkbox are owned by a selection group, which is why the item becomes `presentation`
@@ -141,9 +156,9 @@ export class PieListItem extends PieElement implements ListItemProps {
 
     /**
      * 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 (): void {
         const currentRole = this.getAttribute('role');
@@ -156,12 +171,10 @@ export class PieListItem extends PieElement implements ListItemProps {
     }
 
     /**
-     * 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 (): ContextualAria | undefined {
         if (!this._providesAria) return undefined;
@@ -186,11 +199,11 @@ export class PieListItem extends PieElement implements ListItemProps {
     };
 
     /**
-     * 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,
@@ -261,6 +274,26 @@ export class PieListItem extends PieElement implements ListItemProps {
         return html`<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 () {
+        const aria = this._providedAria;
+
+        return html`<button
+            class="c-listItem-action"
+            type="button"
+            ?disabled=${this._isDisabled}
+            aria-label=${ifDefined(aria?.label)}
+            aria-description=${ifDefined(aria?.description)}
+            aria-haspopup=${ifDefined(this.aria?.button?.haspopup)}></button>`;
+    }
+
     render () {
         const { primaryText } = this;
 
@@ -271,12 +304,14 @@ export class PieListItem extends PieElement implements ListItemProps {
             'has-media': this.hasMedia,
             'is-selectable': this._isSelectable,
             'is-link': this._isLinkRow,
+            'is-button': this._isButtonRow,
             'is-disabled': this._isDisabled,
         };
 
         return html`
         <div class=${classMap(containerClasses)}>
             ${this._isLinkRow ? html`<slot name="link"></slot>` : nothing}
+            ${this._isButtonRow ? this._renderActionButton() : nothing}
             <div class="c-listItem-leading">
                 <slot name="leading"></slot>
             </div>

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

@@ -49,9 +49,10 @@
     min-height: 48px;
 }
 
-// Link rows: the whole item is a single navigation target. The container is positioned so the
-// slotted anchor can stretch over it.
-.c-listItem-container.is-link {
+// Overlay rows (link/button): the whole item is a single interactive target. The container is
+// positioned so the slotted anchor/button can stretch over it.
+.c-listItem-container.is-link,
+.c-listItem-container.is-button {
     position: relative;
 }
 
@@ -62,7 +63,8 @@
 // defaults use the standard PIE interactive overlay tokens; override `--list-item-hover-bg` /
 // `--list-item-active-bg` if design specifies dedicated list tokens.
 .c-listItem-container.is-selectable:not(.is-disabled),
-.c-listItem-container.is-link {
+.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));
 
@@ -84,6 +86,9 @@
         --interactive-container-tint: var(--list-item-hover-bg);
     }
 
+    // The pressed tint for a pointer press: the container is an ancestor of the pressed element, so
+    // it matches `:active`. (A keyboard press is handled by the `:has()` rule below, because keyboard
+    // `:active` does not propagate up to the container.)
     &:active {
         background-color: var(--list-item-active-bg);
 
@@ -91,17 +96,49 @@
     }
 }
 
-// Stretch the empty slotted anchor over the entire row so the whole block is the link's
-// click/touch target. It anchors to the container (positioned above).
-slot[name="link"]::slotted(a) {
+// Pressed tint for a `button` row's keyboard press. A native `<button>` is `:active` while Space is
+// held, but that state does not propagate to the container, so `&:active` above misses it. The
+// action button is a real shadow-DOM descendant (not slotted), so `:has()` can react to its
+// `:active` directly - no JS needed. A pointer press satisfies both this and `&:active` with the
+// same value, so there is no double up.
+.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);
+}
+
+// Stretch the interactive target over the entire row so the whole block is the click/touch target.
+// For a link it is the consumer's slotted anchor; for a button it is the native <button> the item
+// renders. Both anchor to the container (positioned above).
+slot[name="link"]::slotted(a),
+.c-listItem-action {
     position: absolute;
     inset: 0;
     z-index: 1;
     border-radius: inherit; // so the focus ring follows any rounding applied to the row
 }
 
-// Standard PIE focus ring. The anchor is row-sized, so keyboard focus rings the whole item.
-slot[name="link"]::slotted(a:focus-visible) {
+// The action element of a `button` row is a native <button> the item renders. Strip its chrome so
+// it is invisible (the row provides the styling); it stays a real, focusable button with native
+// pointer/keyboard activation and screen-reader semantics.
+.c-listItem-action {
+    padding: 0;
+    border: none;
+    background: transparent;
+    appearance: none;
+    font: inherit;
+    cursor: pointer;
+}
+
+// A disabled action button shows the default cursor (it already ignores clicks and is unfocusable
+// natively via the `disabled` attribute).
+.c-listItem-action:disabled {
+    cursor: default;
+}
+
+// Standard PIE focus ring. The anchor/action is row-sized, so keyboard focus rings the whole item.
+slot[name="link"]::slotted(a:focus-visible),
+.c-listItem-action:focus-visible {
     @include p.focus;
 }
 
@@ -147,6 +184,20 @@ slot[name="trailing"]::slotted(*),
     --icon-size-override: 24px
 }
 
+// Disabled button row: mute text and icons. Icons use `fill: currentColor`, so setting `color`
+// on the host element cascades through the shadow boundary and changes their rendered fill.
+.c-listItem-container.is-button.is-disabled {
+    .c-listItem-primaryText,
+    .c-listItem-secondaryText,
+    .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);
+}
+
 // typography
 
 .c-listItem-primaryText {