@justeattakeaway/pie-list 0.2.0 → 0.4.0

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

@@ -12,7 +12,7 @@ import {
     type ContextualAria,
 } from '@justeattakeaway/pie-webc-core';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import { type ListItemProps, defaultProps, selectionTypes } from './defs';
+import { type ListItemProps, defaultProps, interactionTypes } from './defs';
 import styles from './list-item.scss?inline';
 
 const componentSelector = 'pie-list-item';
@@ -21,6 +21,7 @@ const componentSelector = 'pie-list-item';
  * @tagname pie-list-item
  * @slot leading - Content shown at the start of the item (for example an icon, avatar, or a slotted radio/checkbox).
  * @slot trailing - Content shown at the end of the item. Mutually exclusive with `metaText`.
+ * @slot link - Rendered only when `interactionType="link"`. Slot one empty anchor (e.g. `<a slot="link" href="/x">`) stretched over the whole row as the link target. Must contain no text.
  */
 @safeCustomElement('pie-list-item')
 export class PieListItem extends PieElement implements ListItemProps {
@@ -42,9 +43,9 @@ export class PieListItem extends PieElement implements ListItemProps {
     @property({ type: Boolean })
         hasMedia = defaultProps.hasMedia;
 
-    @property({ type: String, attribute: 'selection-type' })
-    @validPropertyValues(componentSelector, selectionTypes, defaultProps.selectionType)
-        selectionType = defaultProps.selectionType;
+    @property({ type: String })
+    @validPropertyValues(componentSelector, interactionTypes, defaultProps.interactionType)
+        interactionType = defaultProps.interactionType;
 
     @property({ type: Boolean })
         disabled = defaultProps.disabled;
@@ -69,17 +70,42 @@ export class PieListItem extends PieElement implements ListItemProps {
 
     private _abortController!: AbortController;
 
-    private _hasExplicitRole = false;
+    // The last role value we wrote ourselves, so `_applyRole` can tell apart our own managed role
+    // from one the consumer set (and therefore should not overwrite).
+    private _managedRole: string | null = null;
+
+    // Captured once (in `_applyLinkAria`): whether the consumer already named/described the slotted
+    // link anchor themselves. If so, their value always wins and we never touch it.
+    private _linkAriaCaptured = false;
+
+    private _consumerNamedLink = false;
 
+    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.
     private get _isSelectable (): boolean {
-        return this.selectionType !== 'none';
+        return this.interactionType === 'radio' ||
+            this.interactionType === 'checkbox' ||
+            this.interactionType === 'switch';
+    }
+
+    private get _isLinkRow (): boolean {
+        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 _providesAria (): boolean {
+        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`.
     private get _ownedByGroup (): boolean {
-        return this.selectionType === 'radio' || this.selectionType === 'checkbox';
+        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
@@ -98,9 +124,6 @@ export class PieListItem extends PieElement implements ListItemProps {
     connectedCallback () {
         super.connectedCallback();
 
-        // Respect a role the consumer set explicitly; otherwise we manage it from `selectionType`.
-        this._hasExplicitRole = this.hasAttribute('role');
-
         this._abortController = new AbortController();
         this.addEventListener('click', this._handleHostClick, { signal: this._abortController.signal });
     }
@@ -113,16 +136,23 @@ export class PieListItem extends PieElement implements ListItemProps {
     protected updated () {
         this._applyRole();
         this._ariaProvider?.setValue(this._providedAria);
+        this._applyLinkAria();
     }
 
     /**
-     * Sets the item's role from `selectionType`: `presentation` for radio/checkbox (so the group
-     * owns those controls directly), otherwise `listitem` (static items and switches). A role set
-     * explicitly by the consumer is left untouched.
+     * Sets the item's role from `interactionType`: `presentation` for radio/checkbox (so the group
+     * owns those controls directly), otherwise `listitem` (static items, switches and links). A role
+     * set explicitly by the consumer is left untouched, even if it is added or removed dynamically
+     * after the element connects.
      */
     private _applyRole (): void {
-        if (this._hasExplicitRole) return;
-        this.setAttribute('role', this._ownedByGroup ? 'presentation' : 'listitem');
+        const currentRole = this.getAttribute('role');
+        // Only manage the role if it is absent or was last set by us — not a consumer-supplied value.
+        if (currentRole !== null && currentRole !== this._managedRole) return;
+
+        const nextRole = this._ownedByGroup ? 'presentation' : 'listitem';
+        this._managedRole = nextRole;
+        this.setAttribute('role', nextRole);
     }
 
     /**
@@ -134,7 +164,7 @@ export class PieListItem extends PieElement implements ListItemProps {
      * `aria-labelledby` cannot.
      */
     private get _providedAria (): ContextualAria | undefined {
-        if (!this._isSelectable) return undefined;
+        if (!this._providesAria) return undefined;
 
         const description = [this.secondaryText, this.metaText].filter(Boolean).join('. ');
 
@@ -155,6 +185,63 @@ export class PieListItem extends PieElement implements ListItemProps {
         control.focus();
     };
 
+    /**
+     * When the item is a link, names the slotted (empty) anchor from the item's own text: the parent
+     * owns the child's aria. The anchor is plain light-DOM, so it cannot reference the shadow-DOM text
+     * via `aria-labelledby`; and it is not a PIE control that consumes `ariaContext`, so we set the
+     * attributes imperatively. The visible text is `aria-hidden` in the template, so nothing is
+     * announced twice.
+     *
+     * A consumer-provided name/description always wins: we capture (once) whether the anchor already
+     * carries `aria-label`/`aria-labelledby` or `aria-description`/`aria-describedby` and, if so,
+     * leave that attribute untouched. Otherwise we keep our generated value in sync with the text.
+     */
+    private _applyLinkAria (): void {
+        if (!this._isLinkRow) {
+            // When transitioning away from `link`, remove any attributes we previously set so they
+            // are not left orphaned on the anchor. Reset capture state so a future transition back
+            // to `link` re-reads the consumer's attrs from the (possibly different) anchor.
+            if (this._linkAriaCaptured) {
+                const anchor = this.querySelector('a[slot="link"]');
+                if (anchor) {
+                    if (!this._consumerNamedLink) anchor.removeAttribute('aria-label');
+                    if (!this._consumerDescribedLink) anchor.removeAttribute('aria-description');
+                }
+                this._linkAriaCaptured = false;
+                this._consumerNamedLink = false;
+                this._consumerDescribedLink = false;
+            }
+            return;
+        }
+
+        const anchor = this.querySelector('a[slot="link"]');
+        if (!anchor) return;
+
+        if (!this._linkAriaCaptured) {
+            this._consumerNamedLink = anchor.hasAttribute('aria-label') || anchor.hasAttribute('aria-labelledby');
+            this._consumerDescribedLink = anchor.hasAttribute('aria-description') || anchor.hasAttribute('aria-describedby');
+            this._linkAriaCaptured = true;
+        }
+
+        const aria = this._providedAria;
+
+        if (!this._consumerNamedLink) {
+            if (aria?.label) {
+                anchor.setAttribute('aria-label', aria.label);
+            } else {
+                anchor.removeAttribute('aria-label');
+            }
+        }
+
+        if (!this._consumerDescribedLink) {
+            if (aria?.description) {
+                anchor.setAttribute('aria-description', aria.description);
+            } else {
+                anchor.removeAttribute('aria-description');
+            }
+        }
+    }
+
     _renderSecondaryText () {
         const { secondaryText } = this;
         if (secondaryText) {
@@ -168,7 +255,7 @@ export class PieListItem extends PieElement implements ListItemProps {
     _renderTrailingContent () {
         const { metaText } = this;
         if (metaText) {
-            return html`<span class="c-listItem-metaText c-listItem-trailing" aria-hidden=${this._isSelectable ? 'true' : nothing}>${metaText}</span>`;
+            return html`<span class="c-listItem-metaText c-listItem-trailing" aria-hidden=${this._providesAria ? 'true' : nothing}>${metaText}</span>`;
         }
 
         return html`<div class="c-listItem-trailing"><slot name="trailing"></slot></div>`;
@@ -183,16 +270,18 @@ export class PieListItem extends PieElement implements ListItemProps {
             'is-bold': this.isBold,
             'has-media': this.hasMedia,
             'is-selectable': this._isSelectable,
+            'is-link': this._isLinkRow,
             'is-disabled': this._isDisabled,
         };
 
         return html`
         <div class=${classMap(containerClasses)}>
+            ${this._isLinkRow ? html`<slot name="link"></slot>` : nothing}
             <div class="c-listItem-leading">
                 <slot name="leading"></slot>
             </div>
 
-            <div class="c-listItem-text" aria-hidden=${this._isSelectable ? 'true' : nothing}>
+            <div class="c-listItem-text" aria-hidden=${this._providesAria ? 'true' : nothing}>
                 <span class="c-listItem-primaryText">${primaryText}</span>
                 ${this._renderSecondaryText()}
             </div>

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

@@ -49,13 +49,20 @@
     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 {
+    position: relative;
+}
+
 // Interactive row states. When the item is inside a radio/checkbox group the whole row
 // is a click target (it forwards the click to the slotted control), so it shows hover and
 // active surface tints, matching the control's own interactive states. These are suppressed
 // when the slotted control is disabled (the item reflects this as `is-disabled`). The
 // 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-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));
 
@@ -66,15 +73,38 @@
 
     cursor: pointer;
 
+    // Expose the current interaction tint to slotted controls via an inherited custom property (it
+    // flows through the `<slot>` into slotted content). This is a generic contract for any control
+    // inside an interactive container: a slotted `pie-switch` layers it over its track so the track
+    // co-tints with the container; radio/checkbox instead let it show through their transparent
+    // fills. Unset when not interacting, so a control outside such a container sees nothing.
     &:hover {
         background-color: var(--list-item-hover-bg);
+
+        --interactive-container-tint: var(--list-item-hover-bg);
     }
 
     &:active {
         background-color: var(--list-item-active-bg);
+
+        --interactive-container-tint: var(--list-item-active-bg);
     }
 }
 
+// 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) {
+    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) {
+    @include p.focus;
+}
+
 // Larger slotted media (e.g. pie-thumbnail) reduces the block padding, but only
 // when the primary text stands alone (`:only-child` == no secondary text). With
 // secondary text the default padding is kept so two lines of text sit correctly.

package/dist/index-KnN5fPmj.js

@@ -1,265 +0,0 @@
-import { unsafeCSS as x, isServer as f, html as p, nothing as m } 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 T, ariaContext as I, parentDisabledContext as C } from "@justeattakeaway/pie-webc-core";
-import { P as w } from "./PieElement-B3g_8vKy.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 = (r, a) => {
-      this.unsubscribe && (this.unsubscribe !== a && (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, a)), this.unsubscribe = a;
-    }, 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 g(this.context, this.host, this.t, this.subscribe));
-  }
-};
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-class P {
-  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 S extends Event {
-  constructor(t, e) {
-    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e;
-  }
-}
-class E extends P {
-  constructor(t, e, o) {
-    var s, r;
-    super(e.context !== void 0 ? e.initialValue : o), this.onContextRequest = (a) => {
-      if (a.context !== this.context) return;
-      const h = a.contextTarget ?? a.composedPath()[0];
-      h !== this.host && (a.stopPropagation(), this.addCallback(a.callback, h, a.subscribe));
-    }, this.onProviderRequest = (a) => {
-      if (a.context !== this.context || (a.contextTarget ?? a.composedPath()[0]) === this.host) return;
-      const h = /* @__PURE__ */ new Set();
-      for (const [b, { consumerHost: u }] of this.subscriptions) h.has(b) || (h.add(b), u.dispatchEvent(new g(this.context, u, b, !0)));
-      a.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 S(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 v(this, { context: i, callback: (s) => {
-        e.set.call(this, s);
-      }, subscribe: t });
-    })) : e.constructor.addInitializer(((s) => {
-      new v(s, { context: i, callback: (r) => {
-        s[o] = r;
-      }, subscribe: t });
-    }));
-  };
-}
-const z = ["none", "radio", "checkbox", "switch"], d = {
-  isCompact: !1,
-  isBold: !1,
-  hasMedia: !1,
-  selectionType: "none",
-  disabled: !1
-}, R = "*,*: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-selectable: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){--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){cursor:pointer}.c-listItem-container.is-selectable:not(.is-disabled):hover{background-color:var(--list-item-hover-bg)}.c-listItem-container.is-selectable:not(.is-disabled):active{background-color:var(--list-item-active-bg)}.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, D = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
-  for (var s = o > 1 ? void 0 : o ? D(t, e) : t, r = i.length - 1, a; r >= 0; r--)
-    (a = i[r]) && (s = (o ? a(t, e, s) : a(s)) || s);
-  return o && s && q(t, e, s), s;
-};
-const $ = "pie-list-item";
-let n = class extends w {
-  constructor() {
-    super(...arguments), this.isCompact = d.isCompact, this.isBold = d.isBold, this.hasMedia = d.hasMedia, this.selectionType = d.selectionType, this.disabled = d.disabled, this._parentDisabled = !1, this._ariaProvider = f ? void 0 : new E(this, { context: I }), this._hasExplicitRole = !1, this._handleHostClick = (i) => {
-      if (!this._isSelectable || this._isDisabled) return;
-      const t = this._control;
-      !t || i.composedPath().includes(t) || (t.click(), t.focus());
-    };
-  }
-  get _isSelectable() {
-    return this.selectionType !== "none";
-  }
-  // 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.selectionType === "radio" || this.selectionType === "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._hasExplicitRole = this.hasAttribute("role"), 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);
-  }
-  /**
-   * Sets the item's role from `selectionType`: `presentation` for radio/checkbox (so the group
-   * owns those controls directly), otherwise `listitem` (static items and switches). A role set
-   * explicitly by the consumer is left untouched.
-   */
-  _applyRole() {
-    this._hasExplicitRole || this.setAttribute("role", this._ownedByGroup ? "presentation" : "listitem");
-  }
-  /**
-   * 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._isSelectable) return;
-    const i = [this.secondaryText, this.metaText].filter(Boolean).join(". ");
-    return { label: this.primaryText, description: i || void 0 };
-  }
-  _renderSecondaryText() {
-    const { secondaryText: i } = this;
-    return i ? p`<span class="c-listItem-secondaryText">${i}</span>` : m;
-  }
-  // 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._isSelectable ? "true" : m}>${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-disabled": this._isDisabled
-    };
-    return p`
-        <div class=${k(t)}>
-            <div class="c-listItem-leading">
-                <slot name="leading"></slot>
-            </div>
-
-            <div class="c-listItem-text" aria-hidden=${this._isSelectable ? "true" : m}>
-                <span class="c-listItem-primaryText">${i}</span>
-                ${this._renderSecondaryText()}
-            </div>
-
-            ${this._renderTrailingContent()}
-        </div>`;
-  }
-};
-n.styles = x(R);
-l([
-  c({ type: String })
-], n.prototype, "primaryText", 2);
-l([
-  c({ type: String })
-], n.prototype, "secondaryText", 2);
-l([
-  c({ type: String })
-], n.prototype, "metaText", 2);
-l([
-  c({ type: Boolean })
-], n.prototype, "isCompact", 2);
-l([
-  c({ type: Boolean })
-], n.prototype, "isBold", 2);
-l([
-  c({ type: Boolean })
-], n.prototype, "hasMedia", 2);
-l([
-  c({ type: String, attribute: "selection-type" }),
-  _($, z, d.selectionType)
-], n.prototype, "selectionType", 2);
-l([
-  c({ type: Boolean })
-], n.prototype, "disabled", 2);
-l([
-  B({ context: C, subscribe: !0 }),
-  y()
-], n.prototype, "_parentDisabled", 2);
-n = l([
-  T("pie-list-item")
-], n);
-export {
-  n as P,
-  d,
-  z as s
-};