@justeattakeaway/pie-list 0.5.0 → 0.6.1

package/README.md

@@ -9,9 +9,6 @@
 
 `@justeattakeaway/pie-list` is a Web Component built using the Lit library. It provides a simple, accessible list built from two elements: a `pie-list` container and one or more `pie-list-item` children.
 
-> [!NOTE]
-> This component is still growing. More properties, slots and sub-components will be added over time. This documentation covers what is currently supported.
-
 ## Table of Contents
 
 - [Installation](#installation)
@@ -52,7 +49,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 
 ## Documentation
 
-`pie-list` is a compound component. The `pie-list` element is the container (it applies the `list` role and renders the dividers between items), and each row is a `pie-list-item` (which applies the `listitem` role).
+`pie-list` is a compound component. The `pie-list` element is the container (it applies the `list` role), and each row is a `pie-list-item` (which applies the `listitem` role). Set `hasDivider` on each item that needs a divider except for the last one.
 
 > [!IMPORTANT]
 > Because `pie-list` uses the `list` role, you **must always give it an accessible name** using either `aria-label` or `aria-labelledby`. Without one, screen reader users get no context for what the list contains. See [Accessibility](#accessibility).
@@ -75,6 +72,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | `hasMedia` | `true`, `false` | **Required whenever you slot a media element (e.g. `pie-thumbnail`) into the item.** Reduces the block padding so single-line media sits correctly (this padding adjustment has no effect when `secondaryText` is set, but you should still set `hasMedia`). | `false` |
 | `interactionType` | `"none"`, `"radio"`, `"checkbox"`, `"switch"`, `"link"`, `"button"` | Declares how the **whole row** behaves, and drives its role, accessible naming, click forwarding and interactive states from this one prop. `"none"` is a static item; `"radio"`/`"checkbox"`/`"switch"` host the matching control in the `leading`/`trailing` slot; `"link"` turns the row into a single navigation link (slot an empty `<a slot="link" href="...">`); `"button"` turns the row into a single button for an in-page action (the item renders the button for you - listen for `click`). See [Selectable lists](#selectable-lists), [Link items](#link-items) and [Button items](#button-items). | `"none"` |
 | `disabled` | `true`, `false` | Marks the row as disabled: it takes the disabled styling and stops forwarding row clicks to its control. Set it alongside the slotted control's own `disabled` (the control still governs its own interactivity). No visible effect on a non-selectable (static) item. | `false` |
+| `hasDivider` | `true`, `false` | Renders a bottom divider line on the item. Do not set this to `true` on the last item in a list. | `false` |
 | `aria` | `{ button?: { haspopup?: "menu" \| "listbox" \| "tree" \| "grid" \| "dialog" \| "true" } }` | Additional ARIA properties that the item cannot derive from its text props. `button.haspopup` only applies when `interactionType="button"` and is forwarded to the internal `<button>` element. Set it when the button row triggers a popup such as a dialog or menu. | `undefined` |
 
 ### Slots
@@ -121,7 +119,7 @@ This component does not emit any custom events. To listen for interactions, trea
 
   ```html
   <pie-list aria-label="Payment methods">
-    <pie-list-item primaryText="Credit card"></pie-list-item>
+    <pie-list-item hasDivider primaryText="Credit card"></pie-list-item>
     <pie-list-item primaryText="PayPal"></pie-list-item>
   </pie-list>
   ```
@@ -131,7 +129,7 @@ This component does not emit any custom events. To listen for interactions, trea
   ```html
   <h2 id="payment-methods-heading">Payment methods</h2>
   <pie-list aria-labelledby="payment-methods-heading">
-    <pie-list-item primaryText="Credit card"></pie-list-item>
+    <pie-list-item hasDivider primaryText="Credit card"></pie-list-item>
     <pie-list-item primaryText="PayPal"></pie-list-item>
   </pie-list>
   ```
@@ -178,10 +176,12 @@ A basic list with primary, secondary and meta text (note the required `aria-labe
 ```html
 <pie-list aria-label="Recent orders">
   <pie-list-item
+    hasDivider
     primaryText="Primary text"
     secondaryText="Secondary text"
     metaText="Meta text"></pie-list-item>
   <pie-list-item
+    hasDivider
     primaryText="Primary text"
     secondaryText="Secondary text"></pie-list-item>
   <pie-list-item primaryText="Primary text"></pie-list-item>
@@ -245,7 +245,7 @@ Reduced height, see [rules](#usage-notes-and-rules):
 
 ```html
 <pie-list>
-  <pie-list-item isCompact primaryText="Primary text">
+  <pie-list-item hasDivider isCompact primaryText="Primary text">
     <icon-chevron-right slot="trailing"></icon-chevron-right>
   </pie-list-item>
   <pie-list-item isCompact primaryText="Primary text">
@@ -327,10 +327,10 @@ import '@justeattakeaway/pie-webc/components/list-item.js';
 ```
 
 ```html
-<!-- `interactionType="radio"` makes each row selectable and the group lays them out as a divided
-     list. `value` on the group selects the matching radio (here, Express). -->
+<!-- `interactionType="radio"` makes each row selectable. `value` on the group selects
+     the matching radio (here, Express). -->
 <pie-radio-group name="delivery" value="express">
-  <pie-list-item interactionType="radio" primaryText="Standard delivery" secondaryText="3 to 5 working days" metaText="Free">
+  <pie-list-item hasDivider interactionType="radio" primaryText="Standard delivery" secondaryText="3 to 5 working days" metaText="Free">
     <pie-radio slot="leading" value="standard"></pie-radio>
   </pie-list-item>
   <pie-list-item interactionType="radio" primaryText="Express delivery" secondaryText="Next working day" metaText="£4.99">
@@ -349,7 +349,7 @@ import '@justeattakeaway/pie-webc/components/list-item.js';
 
 ```html
 <pie-checkbox-group>
-  <pie-list-item interactionType="checkbox" primaryText="Cheese" secondaryText="Extra mature" metaText="Free">
+  <pie-list-item hasDivider interactionType="checkbox" primaryText="Cheese" secondaryText="Extra mature" metaText="Free">
     <pie-checkbox slot="leading" name="cheese"></pie-checkbox>
   </pie-list-item>
   <pie-list-item interactionType="checkbox" primaryText="Pepperoni" secondaryText="Spicy">
@@ -370,10 +370,10 @@ import '@justeattakeaway/pie-webc/components/switch.js';
 
 ```html
 <pie-list aria-label="Notification settings">
-  <pie-list-item interactionType="switch" primaryText="Email" secondaryText="Order updates and receipts">
+  <pie-list-item hasDivider interactionType="switch" primaryText="Email" secondaryText="Order updates and receipts">
     <pie-switch slot="trailing"></pie-switch>
   </pie-list-item>
-  <pie-list-item interactionType="switch" primaryText="Push notifications">
+  <pie-list-item hasDivider interactionType="switch" primaryText="Push notifications">
     <pie-switch slot="trailing"></pie-switch>
   </pie-list-item>
   <pie-list-item interactionType="switch" primaryText="SMS" disabled>
@@ -397,7 +397,7 @@ import '@justeattakeaway/pie-webc/components/list-item.js';
 
 ```html
 <pie-list aria-label="Manage your restaurant">
-  <pie-list-item interactionType="link" primaryText="Orders" secondaryText="View and manage live orders" metaText="12 active">
+  <pie-list-item hasDivider interactionType="link" primaryText="Orders" secondaryText="View and manage live orders" metaText="12 active">
     <a slot="link" href="/orders"></a>
   </pie-list-item>
   <pie-list-item interactionType="link" primaryText="Menu" secondaryText="Edit items, prices and photos">
@@ -430,14 +430,14 @@ import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
 
 ```html
 <pie-list aria-label="Account navigation">
-  <pie-list-item interactionType="link" primaryText="Overview">
+  <pie-list-item hasDivider interactionType="link" primaryText="Overview">
     <a slot="link" href="/account"></a>
   </pie-list-item>
-  <pie-list-item interactionType="link" isBold primaryText="Orders">
+  <pie-list-item hasDivider interactionType="link" isBold primaryText="Orders">
     <a slot="link" href="/account/orders" aria-current="page"></a>
     <icon-check slot="trailing"></icon-check>
   </pie-list-item>
-  <pie-list-item interactionType="link" primaryText="Payment methods">
+  <pie-list-item hasDivider interactionType="link" primaryText="Payment methods">
     <a slot="link" href="/account/payment"></a>
   </pie-list-item>
   <pie-list-item interactionType="link" primaryText="Addresses">
@@ -496,7 +496,7 @@ import '@justeattakeaway/pie-webc/components/list-item.js';
 
 ```html
 <pie-list aria-label="Account actions">
-  <pie-list-item interactionType="button" primaryText="Edit profile" secondaryText="Update your name and photo"></pie-list-item>
+  <pie-list-item hasDivider interactionType="button" primaryText="Edit profile" secondaryText="Update your name and photo"></pie-list-item>
   <pie-list-item interactionType="button" primaryText="Sign out" secondaryText="End your session on this device"></pie-list-item>
 </pie-list>
 
@@ -549,6 +549,7 @@ To keep lists consistent and correct, follow these rules:
 
 - **Always give `pie-list` an accessible name** with `aria-label` or `aria-labelledby` (use `aria-labelledby` when a visible heading exists). This is required for screen reader users to understand the list. See [Accessibility](#accessibility).
 - **Provide `primaryText`** on every `pie-list-item`; it is the item's main line of content.
+- **Do not set `hasDivider` to `true` on the last item in a list.** Setting it on the last item adds a bottom border beneath the list, which breaks the design. Set `hasDivider` on every item except the last.
 - **For selectable lists, use `pie-list-item` inside `pie-radio-group` or `pie-checkbox-group`, not `pie-list`.** `pie-list` is a static container with no selection or keyboard behaviour. See [Selectable lists](#selectable-lists).
 - **`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.

package/custom-elements.json

@@ -80,7 +80,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{ isCompact: false, isBold: false, hasMedia: false, interactionType: 'none', disabled: false, }"
+          "default": "{ isCompact: false, isBold: false, hasMedia: false, interactionType: 'none', disabled: false, hasDivider: false, }"
         }
       ],
       "exports": [
@@ -174,6 +174,11 @@
               "name": "disabled",
               "attribute": "disabled"
             },
+            {
+              "kind": "field",
+              "name": "hasDivider",
+              "attribute": "hasDivider"
+            },
             {
               "kind": "field",
               "name": "aria",
@@ -406,6 +411,10 @@
               "name": "disabled",
               "fieldName": "disabled"
             },
+            {
+              "name": "hasDivider",
+              "fieldName": "hasDivider"
+            },
             {
               "name": "aria",
               "type": {

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

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

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

@@ -1,9 +1,9 @@
-import { unsafeCSS as x, isServer as y, html as d, nothing as p } from "lit";
+import { unsafeCSS as x, isServer as y, html as h, nothing as p } from "lit";
 import { property as c, state as k } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
 import { validPropertyValues as I, safeCustomElement as T, ariaContext as w, parentDisabledContext as C } from "@justeattakeaway/pie-webc-core";
-import { P as A } from "./PieElement-DQQMEr70.js";
+import { P as A } from "./PieElement-DgjFUjAZ.js";
 /**
  * @license
  * Copyright 2021 Google LLC
@@ -82,7 +82,7 @@ class L extends Event {
     super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e;
   }
 }
-class P extends R {
+class D extends R {
   constructor(t, e, o) {
     var s, r;
     super(e.context !== void 0 ? e.initialValue : o), this.onContextRequest = (n) => {
@@ -121,22 +121,23 @@ function B({ context: i, subscribe: t }) {
     }));
   };
 }
-const S = ["none", "radio", "checkbox", "switch", "link", "button"], h = {
+const P = ["none", "radio", "checkbox", "switch", "link", "button"], 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,.c-listItem-container.is-button{position:relative}.c-listItem-container.is-selectable:not(.is-disabled),.c-listItem-container.is-link,.c-listItem-container.is-button:not(.is-disabled){--list-item-hover-bg: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01));--list-item-active-bg: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-listItem-container.is-selectable:not(.is-disabled),.c-listItem-container.is-link,.c-listItem-container.is-button:not(.is-disabled){--list-item-hover-bg: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent);--list-item-active-bg: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-listItem-container.is-selectable:not(.is-disabled),.c-listItem-container.is-link,.c-listItem-container.is-button:not(.is-disabled){cursor:pointer}.c-listItem-container.is-selectable:not(.is-disabled):hover,.c-listItem-container.is-link:hover,.c-listItem-container.is-button:not(.is-disabled):hover{background-color:var(--list-item-hover-bg);--interactive-container-tint: var(--list-item-hover-bg)}.c-listItem-container.is-selectable:not(.is-disabled):active,.c-listItem-container.is-link:active,.c-listItem-container.is-button:not(.is-disabled):active{background-color:var(--list-item-active-bg);--interactive-container-tint: var(--list-item-active-bg)}.c-listItem-container.is-button:has(.c-listItem-action:active){background-color:var(--list-item-active-bg);--interactive-container-tint: var(--list-item-active-bg)}slot[name=link]::slotted(a),.c-listItem-action{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit}.c-listItem-action{padding:0;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;cursor:pointer}.c-listItem-action:disabled{cursor:default}slot[name=link]::slotted(a:focus-visible),.c-listItem-action:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-listItem-container.has-media:has(.c-listItem-primaryText:only-child){--list-item-block-padding: var(--dt-spacing-b)}.c-listItem-text{flex:1}slot[name=trailing]::slotted(*),.c-listItem-metaText{padding-inline-start:var(--dt-spacing-a)}.c-listItem-leading,slot[name=leading],.c-listItem-trailing,slot[name=trailing]{display:contents}.c-listItem-text>*{display:block}.c-listItem-trailing{margin-inline-start:auto}.c-listItem-metaText{display:block;max-width:33.3333333333%}::slotted(.c-pieIcon){--icon-size-override: 24px }.c-listItem-container.is-button.is-disabled .c-listItem-primaryText,.c-listItem-container.is-button.is-disabled .c-listItem-secondaryText,.c-listItem-container.is-button.is-disabled .c-listItem-metaText{color:var(--dt-color-content-disabled)}.c-listItem-container.is-button.is-disabled ::slotted(.c-pieIcon){color:var(--dt-color-disabled-01)}.c-listItem-primaryText{font-family:var(--dt-font-body-l-family);font-weight:var(--dt-font-body-l-weight);font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:calc(var(--dt-font-body-l-line-height) * 1px);color:var(--dt-color-content-default)}.c-listItem-container.is-bold .c-listItem-primaryText{font-family:var(--dt-font-body-strong-l-family);font-weight:var(--dt-font-body-strong-l-weight);font-size:calc(var(--dt-font-body-strong-l-size) * 1px);line-height:calc(var(--dt-font-body-strong-l-line-height) * 1px)}.c-listItem-secondaryText,.c-listItem-metaText{font-family:var(--dt-font-body-s-family);font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);color:var(--dt-color-content-subdued)}";
-var $ = Object.defineProperty, z = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
-  for (var s = o > 1 ? void 0 : o ? z(t, e) : t, r = i.length - 1, n; r >= 0; r--)
+  disabled: !1,
+  hasDivider: !1
+}, S = "*,*:after,*:before{box-sizing:inherit}:host{--list-item-inline-padding: var(--dt-spacing-d);--list-item-alignment: flex-start;display:block}.c-listItem-container{--list-item-block-padding: var(--dt-spacing-d);padding-inline-start:var(--list-item-inline-padding);padding-inline-end:var(--list-item-inline-padding);padding-block-start:var(--list-item-block-padding);padding-block-end:var(--list-item-block-padding);display:flex;align-items:var(--list-item-alignment);gap:var(--dt-spacing-c);min-height:56px}.c-listItem-container.has-divider{padding-block-end:calc(var(--list-item-block-padding) - 1px);border-bottom:1px solid var(--dt-color-divider-default)}.c-listItem-container:has(.c-listItem-secondaryText){align-items:var(--list-item-alignment);min-height:76px}.c-listItem-container.is-compact{--list-item-block-padding: var(--dt-spacing-c);--list-item-alignment: center;align-items:var(--list-item-alignment);min-height:48px}.c-listItem-container.is-link,.c-listItem-container.is-button{position:relative}.c-listItem-container.is-selectable:not(.is-disabled),.c-listItem-container.is-link,.c-listItem-container.is-button:not(.is-disabled){--list-item-hover-bg: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01));--list-item-active-bg: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-listItem-container.is-selectable:not(.is-disabled),.c-listItem-container.is-link,.c-listItem-container.is-button:not(.is-disabled){--list-item-hover-bg: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent);--list-item-active-bg: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-listItem-container.is-selectable:not(.is-disabled),.c-listItem-container.is-link,.c-listItem-container.is-button:not(.is-disabled){cursor:pointer}.c-listItem-container.is-selectable:not(.is-disabled):hover,.c-listItem-container.is-link:hover,.c-listItem-container.is-button:not(.is-disabled):hover{background-color:var(--list-item-hover-bg);--interactive-container-tint: var(--list-item-hover-bg)}.c-listItem-container.is-selectable:not(.is-disabled):active,.c-listItem-container.is-link:active,.c-listItem-container.is-button:not(.is-disabled):active{background-color:var(--list-item-active-bg);--interactive-container-tint: var(--list-item-active-bg)}.c-listItem-container.is-button:has(.c-listItem-action:active){background-color:var(--list-item-active-bg);--interactive-container-tint: var(--list-item-active-bg)}slot[name=link]::slotted(a),.c-listItem-action{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit}.c-listItem-action{padding:0;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;cursor:pointer}.c-listItem-action:disabled{cursor:default}slot[name=link]::slotted(a:focus-visible),.c-listItem-action:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-listItem-container.has-media:has(.c-listItem-primaryText:only-child){--list-item-block-padding: var(--dt-spacing-b)}.c-listItem-text{flex:1}slot[name=trailing]::slotted(*),.c-listItem-metaText{padding-inline-start:var(--dt-spacing-a)}.c-listItem-leading,slot[name=leading],.c-listItem-trailing,slot[name=trailing]{display:contents}.c-listItem-text>*{display:block}.c-listItem-trailing{margin-inline-start:auto}.c-listItem-metaText{display:block;max-width:33.3333333333%}::slotted(.c-pieIcon){--icon-size-override: 24px }.c-listItem-container.is-button.is-disabled .c-listItem-primaryText,.c-listItem-container.is-button.is-disabled .c-listItem-secondaryText,.c-listItem-container.is-button.is-disabled .c-listItem-metaText{color:var(--dt-color-content-disabled)}.c-listItem-container.is-button.is-disabled ::slotted(.c-pieIcon){color:var(--dt-color-disabled-01)}.c-listItem-primaryText{font-family:var(--dt-font-body-l-family);font-weight:var(--dt-font-body-l-weight);font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:calc(var(--dt-font-body-l-line-height) * 1px);color:var(--dt-color-content-default)}.c-listItem-container.is-bold .c-listItem-primaryText{font-family:var(--dt-font-body-strong-l-family);font-weight:var(--dt-font-body-strong-l-weight);font-size:calc(var(--dt-font-body-strong-l-size) * 1px);line-height:calc(var(--dt-font-body-strong-l-line-height) * 1px)}.c-listItem-secondaryText,.c-listItem-metaText{font-family:var(--dt-font-body-s-family);font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);color:var(--dt-color-content-subdued)}";
+var $ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
+  for (var s = o > 1 ? void 0 : o ? q(t, e) : t, r = i.length - 1, n; r >= 0; r--)
     (n = i[r]) && (s = (o ? n(t, e, s) : n(s)) || s);
   return o && s && $(t, e, s), s;
 };
-const q = "pie-list-item";
+const z = "pie-list-item";
 let a = class extends A {
   constructor() {
-    super(...arguments), this.isCompact = h.isCompact, this.isBold = h.isBold, this.hasMedia = h.hasMedia, this.interactionType = h.interactionType, this.disabled = h.disabled, this._parentDisabled = !1, this._ariaProvider = y ? void 0 : new P(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 = y ? void 0 : new D(this, { context: w }), this._managedRole = null, this._linkAriaCaptured = !1, this._consumerNamedLink = !1, this._consumerDescribedLink = !1, this._handleHostClick = (i) => {
       if (!this._isSelectable || this._isDisabled) return;
       const t = this._control;
       !t || i.composedPath().includes(t) || (t.click(), t.focus());
@@ -242,12 +243,12 @@ let a = class extends A {
   }
   _renderSecondaryText() {
     const { secondaryText: i } = this;
-    return i ? d`<span class="c-listItem-secondaryText">${i}</span>` : p;
+    return i ? h`<span class="c-listItem-secondaryText">${i}</span>` : p;
   }
   // metaText is another form of trailing content. The component can only ever display either slotted trailing content or the metaText string
   _renderTrailingContent() {
     const { metaText: i } = this;
-    return i ? d`<span class="c-listItem-metaText c-listItem-trailing" aria-hidden=${this._providesAria ? "true" : p}>${i}</span>` : d`<div class="c-listItem-trailing"><slot name="trailing"></slot></div>`;
+    return i ? h`<span class="c-listItem-metaText c-listItem-trailing" aria-hidden=${this._providesAria ? "true" : p}>${i}</span>` : h`<div class="c-listItem-trailing"><slot name="trailing"></slot></div>`;
   }
   /**
    * The interactive target for a `button` row: an empty, native `<button>` stretched invisibly
@@ -260,7 +261,7 @@ let a = class extends A {
   _renderActionButton() {
     var t, e;
     const i = this._providedAria;
-    return d`<button
+    return h`<button
             class="c-listItem-action"
             type="button"
             ?disabled=${this._isDisabled}
@@ -274,14 +275,15 @@ let a = class extends A {
       "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 d`
+    return h`
         <div class=${_(t)}>
-            ${this._isLinkRow ? d`<slot name="link"></slot>` : p}
+            ${this._isLinkRow ? h`<slot name="link"></slot>` : p}
             ${this._isButtonRow ? this._renderActionButton() : p}
             <div class="c-listItem-leading">
                 <slot name="leading"></slot>
@@ -296,7 +298,7 @@ let a = class extends A {
         </div>`;
   }
 };
-a.styles = x(D);
+a.styles = x(S);
 l([
   c({ type: String })
 ], a.prototype, "primaryText", 2);
@@ -317,11 +319,14 @@ l([
 ], a.prototype, "hasMedia", 2);
 l([
   c({ type: String }),
-  I(q, S, h.interactionType)
+  I(z, P, d.interactionType)
 ], a.prototype, "interactionType", 2);
 l([
   c({ type: Boolean })
 ], a.prototype, "disabled", 2);
+l([
+  c({ type: Boolean })
+], a.prototype, "hasDivider", 2);
 l([
   c({ type: Object })
 ], a.prototype, "aria", 2);
@@ -334,6 +339,6 @@ a = l([
 ], a);
 export {
   a as P,
-  h as d,
-  S as i
+  d,
+  P as i
 };

package/dist/index.js

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

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

@@ -64,6 +64,10 @@ export interface ListItemProps {
      * (static) item.
      */
     disabled?: boolean;
+    /**
+     * When `true`, renders a bottom divider line on the item. Do not set this to true for the last item in a list.
+     */
+    hasDivider?: boolean;
     /**
      * Additional ARIA properties that the item cannot derive from its text props. `button.haspopup`
      * applies when `interactionType="button"`: its value is forwarded to the internal `<button>`.

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;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;CACnB;AAED,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC;AAEzI,eAAO,MAAM,YAAY,EAAE,YAM1B,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/pie-list-item/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,KAAK,SAAS,GAAG;IACb,MAAM,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;KACvE,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAAqE,CAAC;AAEnG,MAAM,MAAM,eAAe,GAAG,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;AAE9D,MAAM,WAAW,aAAa;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAEjD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;CACnB;AAED,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC;AAEzI,eAAO,MAAM,YAAY,EAAE,YAO1B,CAAC"}

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

@@ -17,6 +17,7 @@ export declare class PieListItem extends PieElement implements ListItemProps {
     hasMedia: boolean;
     interactionType: "button" | "checkbox" | "link" | "none" | "radio" | "switch";
     disabled: boolean;
+    hasDivider: boolean;
     aria: ListItemProps['aria'];
     private _parentDisabled;
     private _ariaProvider;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-list-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACa,OAAO,EAC1B,MAAM,KAAK,CAAC;AAYb,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AACrF,OAAO,EAAE,KAAK,aAAa,EAAkC,MAAM,QAAQ,CAAC;AAG5E,QAAA,MAAM,iBAAiB,kBAAkB,CAAC;AAE1C;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAW,YAAW,aAAa;IAE5D,WAAW,EAAG,aAAa,CAAC,aAAa,CAAC,CAAC;IAG3C,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAG9C,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAGpC,SAAS,UAA0B;IAGnC,MAAM,UAAuB;IAG7B,QAAQ,UAAyB;IAIjC,eAAe,+DAAgC;IAG/C,QAAQ,UAAyB;IAGjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAMhC,OAAO,CAAC,eAAe,CAAS;IAYhC,OAAO,CAAC,aAAa,CAA8E;IAEnG,OAAO,CAAC,gBAAgB,CAAmB;IAI3C,OAAO,CAAC,YAAY,CAAuB;IAI3C,OAAO,CAAC,iBAAiB,CAAS;IAElC,OAAO,CAAC,kBAAkB,CAAS;IAEnC,OAAO,CAAC,sBAAsB,CAAS;IAKvC,OAAO,KAAK,aAAa,GAIxB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,YAAY,GAEvB;IAKD,OAAO,KAAK,aAAa,GAExB;IAID,OAAO,KAAK,aAAa,GAExB;IAKD,OAAO,KAAK,aAAa,GAExB;IAKD,OAAO,KAAK,WAAW,GAEtB;IAID,OAAO,KAAK,QAAQ,GAEnB;IAED,iBAAiB;IAOjB,oBAAoB;IAKpB,SAAS,CAAC,OAAO;IAMjB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAUlB;;;;;OAKG;IACH,OAAO,KAAK,aAAa,GAMxB;IAED;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAQtB;IAEF;;;;;;;;;;OAUG;IACH,OAAO,CAAC,cAAc;IA8CtB,oBAAoB;IAUpB,sBAAsB;IAStB;;;;;;;OAOG;IACH,mBAAmB;IAYnB,MAAM;IAgCN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;KACpC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-list-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACa,OAAO,EAC1B,MAAM,KAAK,CAAC;AAYb,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AACrF,OAAO,EAAE,KAAK,aAAa,EAAkC,MAAM,QAAQ,CAAC;AAG5E,QAAA,MAAM,iBAAiB,kBAAkB,CAAC;AAE1C;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAW,YAAW,aAAa;IAE5D,WAAW,EAAG,aAAa,CAAC,aAAa,CAAC,CAAC;IAG3C,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAG9C,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAGpC,SAAS,UAA0B;IAGnC,MAAM,UAAuB;IAG7B,QAAQ,UAAyB;IAIjC,eAAe,+DAAgC;IAG/C,QAAQ,UAAyB;IAGjC,UAAU,UAA2B;IAGrC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAMhC,OAAO,CAAC,eAAe,CAAS;IAYhC,OAAO,CAAC,aAAa,CAA8E;IAEnG,OAAO,CAAC,gBAAgB,CAAmB;IAI3C,OAAO,CAAC,YAAY,CAAuB;IAI3C,OAAO,CAAC,iBAAiB,CAAS;IAElC,OAAO,CAAC,kBAAkB,CAAS;IAEnC,OAAO,CAAC,sBAAsB,CAAS;IAKvC,OAAO,KAAK,aAAa,GAIxB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,YAAY,GAEvB;IAKD,OAAO,KAAK,aAAa,GAExB;IAID,OAAO,KAAK,aAAa,GAExB;IAKD,OAAO,KAAK,aAAa,GAExB;IAKD,OAAO,KAAK,WAAW,GAEtB;IAID,OAAO,KAAK,QAAQ,GAEnB;IAED,iBAAiB;IAOjB,oBAAoB;IAKpB,SAAS,CAAC,OAAO;IAMjB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAUlB;;;;;OAKG;IACH,OAAO,KAAK,aAAa,GAMxB;IAED;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAQtB;IAEF;;;;;;;;;;OAUG;IACH,OAAO,CAAC,cAAc;IA8CtB,oBAAoB;IAUpB,sBAAsB;IAStB;;;;;;;OAOG;IACH,mBAAmB;IAYnB,MAAM;IAiCN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;KACpC;CACJ"}

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

@@ -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-BH08tWcm.js";
+import { P } from "../index-K8-W-Okw.js";
 import "@justeattakeaway/pie-webc-core";
-import "../PieElement-DQQMEr70.js";
+import "../PieElement-DgjFUjAZ.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-BH08tWcm.js";
-import { d as n, i as c } from "../index-BH08tWcm.js";
+import { P as i } from "../index-K8-W-Okw.js";
+import { d as n, i as c } from "../index-K8-W-Okw.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.5.0",
+  "version": "0.6.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -38,11 +38,11 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.3.2",
+    "@justeattakeaway/pie-css": "1.4.0",
     "@justeattakeaway/pie-monorepo-utils": "0.9.8"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "16.1.1",
+    "@justeattakeaway/pie-webc-core": "17.0.0",
     "@lit/context": "1.1.6"
   },
   "customElements": "custom-elements.json",

package/src/list.scss

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

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

@@ -74,6 +74,11 @@ export interface ListItemProps {
      */
     disabled?: boolean
 
+    /**
+     * When `true`, renders a bottom divider line on the item. Do not set this to true for the last item in a list.
+     */
+    hasDivider?: boolean
+
     /**
      * Additional ARIA properties that the item cannot derive from its text props. `button.haspopup`
      * applies when `interactionType="button"`: its value is forwarded to the internal `<button>`.
@@ -90,4 +95,5 @@ export const defaultProps: DefaultProps = {
     hasMedia: false,
     interactionType: 'none',
     disabled: false,
+    hasDivider: false,
 };

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

@@ -51,6 +51,9 @@ 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'];
 
@@ -302,6 +305,7 @@ 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,

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