@justeattakeaway/pie-list 0.4.0 → 0.6.0

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,12 @@ export class PieListItem extends PieElement implements ListItemProps {
     @property({ type: Boolean })
         disabled = defaultProps.disabled;
 
+    @property({ type: Boolean })
+        hasDivider = defaultProps.hasDivider;
+
+    @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 +90,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 +102,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 +159,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 +174,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 +202,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 +277,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;
 
@@ -269,14 +305,17 @@ export class PieListItem extends PieElement implements ListItemProps {
             '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 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

@@ -6,7 +6,6 @@
     // host declaration wins over a value inherited from an ancestor.
     --list-item-inline-padding: var(--dt-spacing-d);
     --list-item-alignment: flex-start;
-    --list-item-border: none;
 
     // Using contents to remove the host from the box model so that the internal container element fully acts as the component shell
     display: block;
@@ -16,21 +15,24 @@
 .c-listItem-container {
     --list-item-block-padding: var(--dt-spacing-d);
 
-    // The list component will add a border to each list-item that follows another. This ensures the height accounts for the added border.
-    --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));
+    padding-block-end: var(--list-item-block-padding);
 
     // Layout
     display: flex;
     align-items: var(--list-item-alignment);
     gap: var(--dt-spacing-c);
     min-height: 56px;
-    border-bottom: var(--list-item-border);
+}
+
+// When hasDivider is true, show a bottom border and subtract 1px from padding-block-end so the
+// total item height is unchanged whether the divider is present or not.
+.c-listItem-container.has-divider {
+    padding-block-end: calc(var(--list-item-block-padding) - 1px);
+    border-bottom: 1px solid var(--dt-color-divider-default);
 }
 
 // Two lines of text (primary + secondary) need top-alignment so leading/trailing
@@ -49,9 +51,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 +65,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 +88,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 +98,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 +186,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 {

package/dist/index-BMp2PPeH.js

@@ -1,307 +0,0 @@
-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
-};