@justeattakeaway/pie-list 0.6.1 → 0.7.0

package/README.md

@@ -36,6 +36,10 @@
   - [Link items](#link-items)
     - [Indicating the current page](#indicating-the-current-page)
   - [Button items](#button-items)
+  - [Disabled states](#disabled-states)
+    - [Disabling an individual row](#disabling-an-individual-row)
+    - [Disabling via a container group](#disabling-via-a-container-group)
+    - [SSR and group-disabled](#ssr-and-group-disabled)
   - [Framework variants](#framework-variants)
 - [Usage Notes and Rules](#usage-notes-and-rules)
 - [Questions and Support](#questions-and-support)
@@ -85,13 +89,13 @@ Slots are provided by `pie-list-item`.
 | `trailing` | Content displayed at the end of the item, after the text. Intended for a small icon, a `pie-tag`, etc. Not rendered when `metaText` is set. |
 | `link` | Only rendered when `interactionType="link"`. Slot a single **empty** anchor (`<a slot="link" href="...">`) here. It is stretched over the whole row so the entire item becomes the navigation target. The item supplies the anchor's accessible name and description from its text, so the anchor must contain no text of its own; apply any native anchor attributes you need (`href`, `target`, `rel`, and so on). See [Link items](#link-items). |
 
-The permitted slotted elements are: a PIE WEBC icon, `pie-tag`, `pie-thumbnail`, `pie-avatar`*, `pie-switch`, and native HTML radio/checkbox inputs.
+The permitted slotted elements are: a PIE WEBC icon, `pie-tag`, `pie-thumbnail`, `pie-avatar`*, `pie-switch`, `pie-radio` and `pie-checkbox`.
 Some slotted content is designed with specific properties being used. So please read the entire readme to understand correct slot usage.
 
 > [!NOTE]
 > `pie-list` is a **static** container: it has no selection state or keyboard behaviour. For a **selectable** list, do not slot the controls into `pie-list`. Place `pie-list-item`s inside a [`pie-radio-group`](https://webc.pie.design/?path=/docs/components-radio-group--overview) (single-select) or a [`pie-checkbox-group`](https://webc.pie.design/?path=/docs/components-checkbox-group--overview) (multi-select) instead. See [Selectable lists](#selectable-lists) below.
 
-> Slotted PIE icons are always sized by `pie-list-item` (24px). Consumers cannot override this size.
+> Slotted PIE icons are always sized by `pie-list-item`. Consumers cannot override this size.
 
 > \* `pie-avatar` is a permitted slot element but is not covered by usage examples here yet, as it is not ready for use in lists.
 
@@ -241,7 +245,7 @@ Renders as trailing text; do not combine with the `trailing` slot:
 
 ### Compact list
 
-Reduced height, see [rules](#usage-notes-and-rules):
+Reduced height, see [rules](#usage-notes-and-rules). Leading, trailing and meta content is aligned with the first line of the primary text, so it stays level with that line if the text wraps. If `metaText` is the content that wraps, the row grows and the primary text sits level with the meta text's first line:
 
 ```html
 <pie-list>
@@ -516,6 +520,66 @@ import { PieListItem } from '@justeattakeaway/pie-webc/react/list-item.js';
 <PieListItem interactionType="button" primaryText="Edit profile" secondaryText="Update your name and photo" onClick={openProfileEditor} />
 ```
 
+### Disabled states
+
+Only interactive rows (`interactionType` of `radio`, `checkbox`, `switch`, or `button`) can be disabled. `link` rows do not support `disabled`. Disabled links are generally a UX and accessibility problem, and we recommend reaching for a different pattern. Setting `disabled` on a non-interactive (`interactionType="none"`) item has no visible or functional effect.
+
+#### Disabling an individual row
+
+Set `disabled` on the `pie-list-item` and also on the slotted control. The item and the control are independent, so each must be disabled explicitly (exactly as you would disable a standalone `pie-checkbox`):
+
+```html
+<!-- Radio -->
+<pie-list-item interactionType="radio" disabled>
+  <pie-radio slot="leading" value="collection" disabled></pie-radio>
+</pie-list-item>
+
+<!-- Checkbox -->
+<pie-list-item interactionType="checkbox" disabled>
+  <pie-checkbox slot="leading" name="mushrooms" disabled></pie-checkbox>
+</pie-list-item>
+
+<!-- Switch -->
+<pie-list-item interactionType="switch" disabled>
+  <pie-switch slot="trailing" disabled></pie-switch>
+</pie-list-item>
+
+<!-- Button (no slotted control; the item renders its own button) -->
+<pie-list-item interactionType="button" primaryText="Sign out" disabled></pie-list-item>
+```
+
+Any component slotted into the row owns its own disabled styling too, so set that explicitly in the same way: `isDimmed` on a `pie-tag`, `disabled` on a `pie-thumbnail`, and so on. This applies to every individually disabled row, including switch rows, which have no container group to propagate from:
+
+```html
+<pie-list-item interactionType="button" disabled primaryText="Mushrooms" secondaryText="Out of season" hasMedia>
+  <pie-thumbnail slot="leading" size="40" disabled></pie-thumbnail>
+  <pie-tag slot="trailing" isDimmed>Out of stock</pie-tag>
+</pie-list-item>
+```
+
+#### Disabling via a container group
+
+Setting `disabled` on a `pie-radio-group` or `pie-checkbox-group` propagates the disabled state automatically to every `pie-list-item`, its slotted control, and any slotted `pie-tag` or `pie-thumbnail` inside the group. You do not need to set `disabled` on each row, or `isDimmed` on each tag, individually:
+
+```html
+<pie-radio-group name="delivery" disabled>
+  <pie-list-item interactionType="radio" primaryText="Standard delivery" secondaryText="3 to 5 working days">
+    <pie-radio slot="leading" value="standard"></pie-radio>
+    <pie-tag slot="trailing">Free</pie-tag>
+  </pie-list-item>
+  <pie-list-item interactionType="radio" primaryText="Express delivery" secondaryText="Next working day">
+    <pie-radio slot="leading" value="express"></pie-radio>
+    <pie-tag slot="trailing">£4.99</pie-tag>
+  </pie-list-item>
+</pie-radio-group>
+```
+
+Switches have no group, so each switch row must be disabled individually (see above).
+
+#### SSR and group-disabled
+
+Group-disabled propagation occurs at runtime via Lit context. If you need disabled styles on page load in an SSR environment, set `disabled` directly on each `pie-list-item`, its slotted control and any `pie-thumbnail`, and set `isDimmed` on any `pie-tag`, rather than relying on the group container.
+
 ### Framework variants
 
 **For Native JS Applications, Vue, Angular, Svelte etc.:**
@@ -554,7 +618,8 @@ To keep lists consistent and correct, follow these rules:
 - **`metaText` and the `trailing` slot are mutually exclusive.** If `metaText` is set, any `trailing` slot content is ignored. Choose one.
 - **Slotted `pie-thumbnail` must use `size="40"`.** This is the only size that fits the list-item layout correctly.
 - **Always set `hasMedia` when slotting media** (`pie-thumbnail`, and `pie-avatar` in future), whether or not the item has `secondaryText`. This guarantees the item has the correct block padding.
-- **Do not combine `isCompact` with `secondaryText` or with slotted media.** Compact items are single-line and too short for these.
+- **Do not combine `isCompact` with `secondaryText` or with slotted media.** Compact items are too short for these.
+- **Keep leading and trailing content in a compact item within one line of primary text.** Taller content cannot be aligned with the first line of the primary text. Icons, `pie-radio`, `pie-checkbox`, `pie-switch` and a large `pie-tag` all fit.
 - **Only use `center` for `--list-item-alignment`.** Other values are not supported.
 - **`pie-avatar` is not yet ready** for use in lists. Prefer `pie-thumbnail` for media for now.
 

package/dist/{PieElement-DgjFUjAZ.js → PieElement-BpBRe9xZ.js}

@@ -4,7 +4,7 @@ const t = class t extends i {
     this.getAttribute("v") || this.setAttribute("v", t.v);
   }
 };
-t.v = "0.6.1";
+t.v = "0.7.0";
 let s = t;
 export {
   s as P

package/dist/{index-K8-W-Okw.js → index-DnYcx1qJ.js}

@@ -1,15 +1,15 @@
-import { unsafeCSS as x, isServer as y, html as h, nothing as p } from "lit";
+import { unsafeCSS as y, isServer as x, 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-DgjFUjAZ.js";
+import { P as A } from "./PieElement-BpBRe9xZ.js";
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-let f = class extends Event {
+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;
   }
@@ -19,13 +19,13 @@ let f = class extends Event {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-let g = class {
+let f = 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;
+    if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (a, n) => {
+      this.unsubscribe && (this.unsubscribe !== n && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = a, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(a, 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;
+      const a = e;
+      this.context = a.context, this.callback = a.callback, this.subscribe = a.subscribe ?? !1;
     } else this.context = e, this.callback = o, this.subscribe = s ?? !1;
     this.host.addController(this);
   }
@@ -36,7 +36,7 @@ let g = class {
     this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
   }
   dispatchRequest() {
-    this.host.dispatchEvent(new f(this.context, this.host, this.t, this.subscribe));
+    this.host.dispatchEvent(new g(this.context, this.host, this.t, this.subscribe));
   }
 };
 /**
@@ -84,7 +84,7 @@ class L extends Event {
 }
 class D extends R {
   constructor(t, e, o) {
-    var s, r;
+    var s, a;
     super(e.context !== void 0 ? e.initialValue : o), this.onContextRequest = (n) => {
       if (n.context !== this.context) return;
       const b = n.contextTarget ?? n.composedPath()[0];
@@ -92,9 +92,9 @@ class D extends R {
     }, 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)));
+      for (const [u, { consumerHost: v }] of this.subscriptions) b.has(u) || (b.add(u), v.dispatchEvent(new g(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);
+    }, this.host = t, e.context !== void 0 ? this.context = e.context : this.context = e, this.attachListeners(), (a = (s = this.host).addController) == null || a.call(s, this);
   }
   attachListeners() {
     this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
@@ -111,12 +111,12 @@ class D extends R {
 function B({ context: i, subscribe: t }) {
   return (e, o) => {
     typeof o == "object" ? o.addInitializer((function() {
-      new g(this, { context: i, callback: (s) => {
+      new f(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;
+      new f(s, { context: i, callback: (a) => {
+        s[o] = a;
       }, subscribe: t });
     }));
   };
@@ -128,16 +128,16 @@ const P = ["none", "radio", "checkbox", "switch", "link", "button"], d = {
   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)}";
+}, 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-first-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--list-item-block-padding: var(--dt-spacing-c);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;color:var(--dt-color-content-subdued)}.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,.c-listItem-container.is-selectable.is-disabled .c-listItem-primaryText,.c-listItem-container.is-selectable.is-disabled .c-listItem-secondaryText,.c-listItem-container.is-selectable.is-disabled .c-listItem-metaText{color:var(--dt-color-content-disabled)}.c-listItem-container.is-button.is-disabled ::slotted(.c-pieIcon),.c-listItem-container.is-selectable.is-disabled ::slotted(.c-pieIcon){opacity:.5}.c-listItem-primaryText{font-family:var(--dt-font-body-l-family),var(--dt-font-family-secondary),sans-serif;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),var(--dt-font-family-secondary),sans-serif;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),var(--dt-font-family-secondary),sans-serif;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)}.c-listItem-container.is-compact .c-listItem-metaText{display:flex;align-items:center;min-height:var(--list-item-first-line-height)}";
 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);
+  for (var s = o > 1 ? void 0 : o ? q(t, e) : t, a = i.length - 1, n; a >= 0; a--)
+    (n = i[a]) && (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 {
+let r = 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) => {
+    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 = x ? 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());
@@ -298,47 +298,47 @@ let a = class extends A {
         </div>`;
   }
 };
-a.styles = x(S);
+r.styles = y(S);
 l([
   c({ type: String })
-], a.prototype, "primaryText", 2);
+], r.prototype, "primaryText", 2);
 l([
   c({ type: String })
-], a.prototype, "secondaryText", 2);
+], r.prototype, "secondaryText", 2);
 l([
   c({ type: String })
-], a.prototype, "metaText", 2);
+], r.prototype, "metaText", 2);
 l([
   c({ type: Boolean })
-], a.prototype, "isCompact", 2);
+], r.prototype, "isCompact", 2);
 l([
   c({ type: Boolean })
-], a.prototype, "isBold", 2);
+], r.prototype, "isBold", 2);
 l([
   c({ type: Boolean })
-], a.prototype, "hasMedia", 2);
+], r.prototype, "hasMedia", 2);
 l([
   c({ type: String }),
   I(z, P, d.interactionType)
-], a.prototype, "interactionType", 2);
+], r.prototype, "interactionType", 2);
 l([
   c({ type: Boolean })
-], a.prototype, "disabled", 2);
+], r.prototype, "disabled", 2);
 l([
   c({ type: Boolean })
-], a.prototype, "hasDivider", 2);
+], r.prototype, "hasDivider", 2);
 l([
   c({ type: Object })
-], a.prototype, "aria", 2);
+], r.prototype, "aria", 2);
 l([
   B({ context: C, subscribe: !0 }),
   k()
-], a.prototype, "_parentDisabled", 2);
-a = l([
+], r.prototype, "_parentDisabled", 2);
+r = l([
   T("pie-list-item")
-], a);
+], r);
 export {
-  a as P,
+  r as P,
   d,
   P as i
 };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { html as a, unsafeCSS as c } from "lit";
-import { P as f } from "./PieElement-DgjFUjAZ.js";
+import { P as f } from "./PieElement-BpBRe9xZ.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) => {

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

@@ -22,7 +22,13 @@ export interface ListItemProps {
     /**
      * The height of the component is decreased to reduce the vertical space, and used when space needs to be saved.
      *
+     * Leading, trailing and meta content is aligned with the first line of the primary text, so when the
+     * text wraps onto more than one line that content stays level with the first line. If `metaText` is
+     * the content that wraps, it is the taller of the two, so the row grows and the primary text sits
+     * level with the meta text's first line rather than centred against it.
+     *
      * **Note**: Do not use if you require secondary text, or if you want to slot a pie-avatar, pie-thumbnail or Icon with Background component into the list item.
+     * Slotted content should be no taller than a single line of primary text (24px), otherwise it cannot be aligned with the first line.
      */
     isCompact?: boolean;
     /**
@@ -75,7 +81,7 @@ export interface ListItemProps {
      */
     aria?: AriaProps;
 }
-export type DefaultProps = ComponentDefaultProps<ListItemProps, keyof Omit<ListItemProps, 'primaryText' | 'secondaryText' | 'metaText'>>;
+export type DefaultProps = ComponentDefaultProps<ListItemProps, keyof Omit<ListItemProps, 'primaryText' | 'secondaryText' | 'metaText' | 'aria'>>;
 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;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"}
+{"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;;;;;;;;;;OAUG;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,GAAG,MAAM,CAAC,CAAC,CAAC;AAElJ,eAAO,MAAM,YAAY,EAAE,YAO1B,CAAC"}

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

@@ -2,9 +2,9 @@ import "lit";
 import "lit/decorators.js";
 import "lit/directives/class-map.js";
 import "lit/directives/if-defined.js";
-import { P } from "../index-K8-W-Okw.js";
+import { P } from "../index-DnYcx1qJ.js";
 import "@justeattakeaway/pie-webc-core";
-import "../PieElement-DgjFUjAZ.js";
+import "../PieElement-BpBRe9xZ.js";
 export {
   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-K8-W-Okw.js";
-import { d as n, i as c } from "../index-K8-W-Okw.js";
+import { P as i } from "../index-DnYcx1qJ.js";
+import { d as n, i as c } from "../index-DnYcx1qJ.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.6.1",
+  "version": "0.7.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.4.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.8"
+    "@justeattakeaway/pie-css": "1.5.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.9"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "17.0.0",
+    "@justeattakeaway/pie-webc-core": "18.0.0",
     "@lit/context": "1.1.6"
   },
   "customElements": "custom-elements.json",

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

@@ -27,7 +27,13 @@ export interface ListItemProps {
     /**
      * The height of the component is decreased to reduce the vertical space, and used when space needs to be saved.
      *
+     * Leading, trailing and meta content is aligned with the first line of the primary text, so when the
+     * text wraps onto more than one line that content stays level with the first line. If `metaText` is
+     * the content that wraps, it is the taller of the two, so the row grows and the primary text sits
+     * level with the meta text's first line rather than centred against it.
+     *
      * **Note**: Do not use if you require secondary text, or if you want to slot a pie-avatar, pie-thumbnail or Icon with Background component into the list item.
+     * Slotted content should be no taller than a single line of primary text (24px), otherwise it cannot be aligned with the first line.
      */
     isCompact?: boolean
 
@@ -87,7 +93,7 @@ export interface ListItemProps {
     aria?: AriaProps
 }
 
-export type DefaultProps = ComponentDefaultProps<ListItemProps, keyof Omit<ListItemProps, 'primaryText' | 'secondaryText' | 'metaText'>>;
+export type DefaultProps = ComponentDefaultProps<ListItemProps, keyof Omit<ListItemProps, 'primaryText' | 'secondaryText' | 'metaText' | 'aria'>>;
 
 export const defaultProps: DefaultProps = {
     isCompact: false,

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

@@ -42,12 +42,13 @@
     min-height: 76px;
 }
 
+// Compact items keep their leading, trailing and meta content aligned with the first line of the
+// primary text rather than centred across all of its lines.
 .c-listItem-container.is-compact {
+    // The height of a single line of primary text, used to align content with the first line.
+    --list-item-first-line-height: #{p.line-height(--dt-font-body-l-line-height)};
     --list-item-block-padding: var(--dt-spacing-c);
 
-    // Compact items are centre-aligned.
-    --list-item-alignment: center;
-    align-items: var(--list-item-alignment);
     min-height: 48px;
 }
 
@@ -183,12 +184,13 @@ slot[name="trailing"]::slotted(*),
 }
 
 ::slotted(.c-pieIcon) {
-    --icon-size-override: 24px
+    --icon-size-override: 24px;
+
+    color: var(--dt-color-content-subdued);
 }
 
-// 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-container.is-button.is-disabled,
+.c-listItem-container.is-selectable.is-disabled {
     .c-listItem-primaryText,
     .c-listItem-secondaryText,
     .c-listItem-metaText {
@@ -196,8 +198,9 @@ slot[name="trailing"]::slotted(*),
     }
 }
 
-.c-listItem-container.is-button.is-disabled ::slotted(.c-pieIcon) {
-    color: var(--dt-color-disabled-01);
+.c-listItem-container.is-button.is-disabled ::slotted(.c-pieIcon),
+.c-listItem-container.is-selectable.is-disabled ::slotted(.c-pieIcon) {
+    opacity: 0.5;
 }
 
 // typography
@@ -220,3 +223,12 @@ slot[name="trailing"]::slotted(*),
     @include p.font-theme('font-body-s');
     color: var(--dt-color-content-subdued);
 }
+
+// `metaText` uses `font-body-s`, so its line box is 20px rather than the primary text's 24px. In a
+// compact row, a one-line-tall centring box sits it on the centre of the first line of primary text
+// instead of 2px above it.
+.c-listItem-container.is-compact .c-listItem-metaText {
+    display: flex;
+    align-items: center;
+    min-height: var(--list-item-first-line-height);
+}