@justeattakeaway/pie-breadcrumb 0.3.0 → 0.4.0

package/custom-elements.json

@@ -24,9 +24,9 @@
           "kind": "variable",
           "name": "defaultProps",
           "type": {
-            "text": "Pick<BreadcrumbProps, 'variant' | 'isCompact'>"
+            "text": "DefaultProps"
           },
-          "default": "{\n    variant: 'default',\n    isCompact: false,\n}"
+          "default": "{\r\n    variant: 'default',\r\n    isCompact: false,\r\n}"
         }
       ],
       "exports": [
@@ -59,31 +59,92 @@
           "members": [
             {
               "kind": "field",
-              "name": "items",
-              "type": {
-                "text": "BreadcrumbProps['items']"
-              },
+              "name": "variant",
               "privacy": "public",
-              "default": "[]",
-              "attribute": "items"
+              "attribute": "variant"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "isCompact",
               "privacy": "public",
-              "attribute": "variant"
+              "attribute": "isCompact",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "fieldName": "variant"
             },
             {
-              "kind": "field",
               "name": "isCompact",
+              "fieldName": "isCompact"
+            }
+          ],
+          "superclass": {
+            "name": "PieElement",
+            "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
+          },
+          "tagName": "pie-breadcrumb",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./defs"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PieBreadcrumb",
+          "declaration": {
+            "name": "PieBreadcrumb",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/pie-breadcrumb-item/defs-react.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/pie-breadcrumb-item/defs.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/pie-breadcrumb-item/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PieBreadcrumbItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
               "privacy": "public",
-              "attribute": "isCompact"
+              "default": "''",
+              "attribute": "href",
+              "reflects": true
             },
             {
               "kind": "method",
               "name": "renderSeparator",
               "privacy": "private",
-              "description": "Renders a separator icon between breadcrumb items.\nThe icon direction depends on the RTL (Right-to-Left) setting.",
+              "description": "Renders a separator icon between breadcrumb items.\r\nThe icon direction depends on the RTL (Right-to-Left) setting.",
               "return": {
                 "type": {
                   "text": "TemplateResult"
@@ -94,130 +155,17 @@
               "kind": "method",
               "name": "renderNavigationLink",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "item",
-                  "type": {
-                    "text": "BreadcrumbItem"
-                  },
-                  "description": "The breadcrumb item containing label and URL."
-                }
-              ],
               "description": "Renders a navigation link for a breadcrumb item."
-            },
-            {
-              "kind": "method",
-              "name": "renderLastItem",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "item",
-                  "type": {
-                    "text": "BreadcrumbItem"
-                  },
-                  "description": "The breadcrumb item containing label and URL."
-                }
-              ],
-              "description": "Renders the last breadcrumb item.\nIt has 250px of max-width. If the label reaches this width the text truncates."
-            },
-            {
-              "kind": "method",
-              "name": "renderItem",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "item",
-                  "type": {
-                    "text": "BreadcrumbItem"
-                  },
-                  "description": "The breadcrumb item to render."
-                },
-                {
-                  "name": "isLastItem",
-                  "default": "false",
-                  "description": "Indicates if the item is the last in the breadcrumb trail.",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ],
-              "description": "Renders an individual breadcrumb item.\n\nConditionally renders either a clickable link or plain text for the last item."
-            },
-            {
-              "kind": "method",
-              "name": "renderDefaultBreadcrumb",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "items",
-                  "type": {
-                    "text": "BreadcrumbProps['items']"
-                  },
-                  "description": "Breadcrumb items to render."
-                }
-              ],
-              "description": "Renders breadcrumb items using the default variant style."
-            },
-            {
-              "kind": "method",
-              "name": "renderCompactBreadcrumbSeparator",
-              "privacy": "private",
-              "description": "Renders a separator icon specifically for the back variant.\nThe icon direction depends on the RTL (Right-to-Left) setting."
-            },
-            {
-              "kind": "method",
-              "name": "renderCompactBreadcrumb",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "items",
-                  "type": {
-                    "text": "BreadcrumbProps['items']"
-                  },
-                  "description": "Breadcrumb items to render."
-                }
-              ],
-              "description": "Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator."
-            },
-            {
-              "kind": "method",
-              "name": "renderBreadcrumbItems",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "items",
-                  "type": {
-                    "text": "BreadcrumbProps['items']"
-                  },
-                  "description": "Array of breadcrumb items to render."
-                },
-                {
-                  "name": "isCompact",
-                  "type": {
-                    "text": "BreadcrumbProps['isCompact']"
-                  }
-                }
-              ],
-              "description": "Renders a complete breadcrumb list.\nIterates over breadcrumb items to generate the breadcrumb trail."
             }
           ],
           "attributes": [
             {
-              "name": "items",
+              "name": "href",
               "type": {
-                "text": "BreadcrumbProps['items']"
+                "text": "string"
               },
-              "default": "[]",
-              "fieldName": "items"
-            },
-            {
-              "name": "variant",
-              "fieldName": "variant"
-            },
-            {
-              "name": "isCompact",
-              "fieldName": "isCompact"
+              "default": "''",
+              "fieldName": "href"
             }
           ],
           "mixins": [
@@ -230,7 +178,7 @@
             "name": "PieElement",
             "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
           },
-          "tagName": "pie-breadcrumb",
+          "tagName": "pie-breadcrumb-item",
           "customElement": true
         }
       ],
@@ -245,10 +193,10 @@
         },
         {
           "kind": "js",
-          "name": "PieBreadcrumb",
+          "name": "PieBreadcrumbItem",
           "declaration": {
-            "name": "PieBreadcrumb",
-            "module": "src/index.js"
+            "name": "PieBreadcrumbItem",
+            "module": "src/pie-breadcrumb-item/index.js"
           }
         }
       ]

package/dist/breadcrumb-B5ACdbGG.js

@@ -0,0 +1,13 @@
+import { LitElement as e } from "lit";
+const r = class r extends e {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", r.v);
+  }
+};
+r.v = "0.4.0";
+let t = r;
+const o = "*,*:after,*:before{box-sizing:inherit}.c-breadcrumb{--breadcrumb-background-color: var(--dt-color-transparent);--breadcrumb-item-flex-direction: row;--breadcrumb-item-color: var(--dt-color-content-link);--breadcrumb-separator-color: var(--dt-color-content-subdued);--breadcrumb-separator-transform: none;background-color:var(--breadcrumb-background-color);padding:var(--dt-spacing-a) var(--dt-spacing-d)}.c-breadcrumb--scrim{--breadcrumb-background-color: var(--dt-color-overlay);--breadcrumb-item-color: var(--dt-color-content-link-light);--breadcrumb-separator-color: var(--dt-color-content-light);border-radius:var(--dt-radius-rounded-e)}.c-breadcrumb-list{margin:0;padding:0;display:flex;flex-flow:row;gap:var(--dt-spacing-a)}.c-breadcrumb-item{display:flex;flex-direction:var(--breadcrumb-item-flex-direction);align-items:center;white-space:nowrap;gap:var(--dt-spacing-a)}.c-breadcrumb-item pie-link{--link-text-color: var(--breadcrumb-item-color);--link-font-weight: var(--dt-font-weight-bold)}.c-breadcrumb-separator{display:inline-flex;color:var(--breadcrumb-separator-color);transform:var(--breadcrumb-separator-transform)}:host([isCompact]) .c-breadcrumb{--breadcrumb-item-flex-direction: row-reverse;--breadcrumb-separator-transform: rotate(180deg)}:host([isCompact]) ::slotted(pie-breadcrumb-item:not(:nth-last-of-type(2))){display:none}:host(:last-of-type) pie-link{--link-font-weight: var(--dt-font-weight-regular)}:host(:last-of-type) pie-link span{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(:last-of-type) .c-breadcrumb-separator{display:none}:host ::slotted(pie-breadcrumb-item:only-child){display:none}";
+export {
+  t as P,
+  o as s
+};

package/dist/defs.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+export declare const variants: readonly ["default", "scrim"];
+export interface BreadcrumbProps {
+    /**
+     * Optional variant for styling the breadcrumb component.
+     */
+    variant?: typeof variants[number];
+    /**
+     * Optional property for rendering a compact variation of the breadcrumb.
+     */
+    isCompact?: boolean;
+}
+export type DefaultProps = ComponentDefaultProps<BreadcrumbProps>;
+export declare const defaultProps: DefaultProps;
+//# sourceMappingURL=defs.d.ts.map

package/dist/defs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,eAAO,MAAM,QAAQ,+BAAgC,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;IAElC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;AAElE,eAAO,MAAM,YAAY,EAAC,YAGzB,CAAC"}

package/dist/index.d.ts

@@ -1,110 +1,19 @@
-import type { CSSResult } from 'lit';
-import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
-import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import type { TemplateResult } from 'lit-html';
-
-export declare type BreadcrumbItem = {
-    label: string;
-    href: string;
-};
-
-export declare interface BreadcrumbProps {
-    items: BreadcrumbItem[];
-    /**
-     * Optional variant for styling the breadcrumb component.
-     */
-    variant?: typeof variants[number];
-    /**
-     * Optional property for rendering a compact variation of the breadcrumb.
-     */
-    isCompact?: boolean;
-}
-
-export declare const defaultProps: Pick<BreadcrumbProps, 'variant' | 'isCompact'>;
-
-/**
- * @tagname pie-breadcrumb
- */
-export declare class PieBreadcrumb extends PieBreadcrumb_base implements BreadcrumbProps {
-    items: BreadcrumbProps['items'];
-    variant: "default" | "scrim" | undefined;
-    isCompact: boolean | undefined;
-    /**
-     * Renders a separator icon between breadcrumb items.
-     * The icon direction depends on the RTL (Right-to-Left) setting.
-     *
-     * @returns {TemplateResult} HTML template for the separator icon.
-     *
-     * @private
-     */
-    private renderSeparator;
-    /**
-     * Renders a navigation link for a breadcrumb item.
-     *
-     * @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
-     *
-     * @private
-     */
-    private renderNavigationLink;
-    /**
-     * Renders the last breadcrumb item.
-     * It has 250px of max-width. If the label reaches this width the text truncates.
-     *
-     * @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
-     *
-     * @private
-     */
-    private renderLastItem;
-    /**
-     * Renders an individual breadcrumb item.
-
-     * Conditionally renders either a clickable link or plain text for the last item.
-     *
-     * @param {BreadcrumbItem} item - The breadcrumb item to render.
-     * @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
-     *
-     * @private
-     */
-    private renderItem;
-    /**
-     * Renders breadcrumb items using the default variant style.
-     *
-     * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
-     *
-     * @private
-     */
-    private renderDefaultBreadcrumb;
-    /**
-     * Renders a separator icon specifically for the back variant.
-     * The icon direction depends on the RTL (Right-to-Left) setting.
-     *
-     * @private
-     */
-    private renderCompactBreadcrumbSeparator;
-    /**
-     * Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator.
-     *
-     * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
-     *
-     * @private
-     */
-    private renderCompactBreadcrumb;
-    /**
-     * Renders a complete breadcrumb list.
-     * Iterates over breadcrumb items to generate the breadcrumb trail.
-     *
-     * @param {BreadcrumbProps['items']} items - Array of breadcrumb items to render.
-     *
-     * @private
-     */
-    private renderBreadcrumbItems;
-    render(): TemplateResult<1>;
-    static styles: CSSResult;
-}
-
-declare const PieBreadcrumb_base: GenericConstructor<RTLInterface> & typeof PieElement;
-
-export declare const variants: readonly ["default", "scrim"];
-
-export { }
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { type BreadcrumbProps } from './defs';
+declare const componentSelector = "pie-breadcrumb";
+export * from './defs';
+/**
+ * @tagname pie-breadcrumb
+ */
+export declare class PieBreadcrumb extends PieElement implements BreadcrumbProps {
+    variant: "default" | "scrim";
+    isCompact: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieBreadcrumb;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAGrF,OAAO,EACH,KAAK,eAAe,EAGvB,MAAM,QAAQ,CAAC;AAEhB,QAAA,MAAM,iBAAiB,mBAAmB,CAAC;AAG3C,cAAc,QAAQ,CAAC;AAEvB;;GAEG;AACH,qBACa,aAAc,SAAQ,UAAW,YAAW,eAAe;IAG7D,OAAO,sBAAwB;IAG/B,SAAS,UAA0B;IAE1C,MAAM;IAqBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,aAAa,CAAC;KACtC;CACJ"}

package/dist/index.js

@@ -1,189 +1,52 @@
-import { LitElement as f, html as a, nothing as u, unsafeCSS as g } from "lit";
-import { property as d } from "lit/decorators.js";
-import { RtlMixin as $, validPropertyValues as y, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
-import { classMap as b } from "lit/directives/class-map.js";
-import "@justeattakeaway/pie-link";
-import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
-import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
-var k = Object.defineProperty, x = (s, r, e, o) => {
-  for (var t = void 0, i = s.length - 1, c; i >= 0; i--)
-    (c = s[i]) && (t = c(r, e, t) || t);
-  return t && k(r, e, t), t;
-};
-class v extends f {
-  constructor() {
-    super(...arguments), this.v = "0.3.0";
-  }
-}
-x([
-  d({ type: String, reflect: !0 })
-], v.prototype, "v");
-const S = "*,*:after,*:before{box-sizing:inherit}.c-breadcrumb{--breadcrumb-background-color: var(--dt-color-transparent);background-color:var(--breadcrumb-background-color);padding:var(--dt-spacing-a) var(--dt-spacing-d) var(--dt-spacing-a) var(--dt-spacing-d)}.c-breadcrumb-list{margin:0;padding:0;display:flex;flex-flow:row;gap:var(--dt-spacing-a)}.c-breadcrumb-list li{list-style-type:none;display:flex;align-items:center;white-space:nowrap}.c-breadcrumb--scrim{--breadcrumb-background-color: var(--dt-color-overlay);border-radius:var(--dt-radius-rounded-e)}.c-breadcrumb-list-last-item{overflow:hidden;text-overflow:ellipsis;max-width:250px;color:var(--dt-color-content-subdued)}.c-breadcrumb-list-last-item--scrim{color:var(--dt-color-content-link-light)}.c-breadcrumb-separator{color:var(--dt-color-content-subdued)}.c-breadcrumb-separator--scrim{color:var(--dt-color-content-link-light)}", w = ["default", "scrim"], l = {
+import { unsafeCSS as n, html as u } from "lit";
+import { property as l } from "lit/decorators.js";
+import { validPropertyValues as b, safeCustomElement as d } from "@justeattakeaway/pie-webc-core";
+import { classMap as f } from "lit/directives/class-map.js";
+import { s as v, P } from "./breadcrumb-B5ACdbGG.js";
+const y = ["default", "scrim"], p = {
   variant: "default",
   isCompact: !1
 };
-var B = Object.defineProperty, m = (s, r, e, o) => {
-  for (var t = void 0, i = s.length - 1, c; i >= 0; i--)
-    (c = s[i]) && (t = c(r, e, t) || t);
-  return t && B(r, e, t), t;
+var C = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, m = (s, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? _(t, e) : t, c = s.length - 1, i; c >= 0; c--)
+    (i = s[c]) && (r = (o ? i(t, e, r) : i(r)) || r);
+  return o && r && C(t, e, r), r;
 };
-const h = "pie-breadcrumb", p = class p extends $(v) {
+const h = "pie-breadcrumb";
+let a = class extends P {
   constructor() {
-    super(...arguments), this.items = [], this.variant = l.variant, this.isCompact = l.isCompact;
-  }
-  /**
-   * Renders a separator icon between breadcrumb items.
-   * The icon direction depends on the RTL (Right-to-Left) setting.
-   *
-   * @returns {TemplateResult} HTML template for the separator icon.
-   *
-   * @private
-   */
-  renderSeparator() {
-    const r = this.variant === "scrim" ? "c-breadcrumb-separator--scrim" : "c-breadcrumb-separator";
-    return a`
-            <li
-                role="presentation"
-                aria-hidden="true"
-                class="${r}"
-                data-test-id="pie-breadcrumb-separator">
-                    ${this.isRTL ? a`<icon-chevron-left></icon-chevron-left>` : a`<icon-chevron-right></icon-chevron-right>`}
-            </li>
-        `;
-  }
-  /**
-   * Renders a navigation link for a breadcrumb item.
-   *
-   * @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
-   *
-   * @private
-   */
-  renderNavigationLink(r) {
-    const e = this.variant === "scrim" ? "inverse" : "default";
-    return a`
-            <pie-link variant="${e}" isStandalone underline="reversed" isBold href="${r.href}">
-                ${r.label}
-            </pie-link>
-        `;
-  }
-  /**
-   * Renders the last breadcrumb item.
-   * It has 250px of max-width. If the label reaches this width the text truncates.
-   *
-   * @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
-   *
-   * @private
-   */
-  renderLastItem(r) {
-    const e = {
-      "c-breadcrumb-list-last-item": !0,
-      "c-breadcrumb-list-last-item--scrim": this.variant === "scrim"
-    };
-    return a`<span class="${b(e)}">${r.label}</span>`;
-  }
-  /**
-       * Renders an individual breadcrumb item.
-  
-       * Conditionally renders either a clickable link or plain text for the last item.
-       *
-       * @param {BreadcrumbItem} item - The breadcrumb item to render.
-       * @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
-       *
-       * @private
-       */
-  renderItem(r, e = !1) {
-    return a`
-            <li role="listitem" data-test-id="pie-breadcrumb-item">
-                ${e ? this.renderLastItem(r) : this.renderNavigationLink(r)}
-            </li>
-            ${e ? u : this.renderSeparator()}
-        `;
-  }
-  /**
-   * Renders breadcrumb items using the default variant style.
-   *
-   * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
-   *
-   * @private
-   */
-  renderDefaultBreadcrumb(r) {
-    const e = r.length - 1;
-    return a`${r.map((o, t) => this.renderItem(o, e <= t))}`;
-  }
-  /**
-   * Renders a separator icon specifically for the back variant.
-   * The icon direction depends on the RTL (Right-to-Left) setting.
-   *
-   * @private
-   */
-  renderCompactBreadcrumbSeparator() {
-    const r = this.variant === "scrim" ? "c-breadcrumb-separator--scrim" : "c-breadcrumb-separator";
-    return a`
-            <li role="presentation" aria-hidden="true" class="${r}" data-test-id="pie-breadcrumb-separator">
-                ${this.isRTL ? a`<icon-chevron-right></icon-chevron-right>` : a`<icon-chevron-left></icon-chevron-left>`}
-            </li>
-        `;
-  }
-  /**
-   * Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator.
-   *
-   * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
-   *
-   * @private
-   */
-  renderCompactBreadcrumb(r) {
-    const e = r[r.length - 1];
-    return a`
-            ${this.renderCompactBreadcrumbSeparator()}
-            <li role="listitem" data-test-id="pie-breadcrumb-item">
-                ${this.renderNavigationLink(e)}    
-            </li>
-        `;
-  }
-  /**
-   * Renders a complete breadcrumb list.
-   * Iterates over breadcrumb items to generate the breadcrumb trail.
-   *
-   * @param {BreadcrumbProps['items']} items - Array of breadcrumb items to render.
-   *
-   * @private
-   */
-  renderBreadcrumbItems(r, e) {
-    return a`
-            <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
-                ${e ? this.renderCompactBreadcrumb(r) : this.renderDefaultBreadcrumb(r)}
-            </ol>
-        `;
+    super(...arguments), this.variant = p.variant, this.isCompact = p.isCompact;
   }
   render() {
-    const { items: r, variant: e, isCompact: o } = this;
-    return a`
+    const { variant: s, isCompact: t } = this, e = {
+      "c-breadcrumb": !0,
+      [`c-breadcrumb--${s}`]: !0,
+      "c-breadcrumb--compact": t
+    };
+    return u`
             <nav
                 aria-label="breadcrumb"
                 data-test-id="pie-breadcrumb"
-                class="${b({
-      "c-breadcrumb": !0,
-      "c-breadcrumb--scrim": e === "scrim"
-    })}">
-                ${r ? this.renderBreadcrumbItems(r, o) : u}
+                class="${f(e)}">
+                    <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
+                        <slot></slot>
+                    </ol>
             </nav>`;
   }
 };
-p.styles = g(S);
-let n = p;
-m([
-  d({ type: Array })
-], n.prototype, "items");
+a.styles = n(v);
 m([
-  d({ type: String }),
-  y(h, w, l.variant)
-], n.prototype, "variant");
+  l({ type: String }),
+  b(h, y, p.variant)
+], a.prototype, "variant", 2);
 m([
-  d({ type: Boolean })
-], n.prototype, "isCompact");
-C(h, n);
+  l({ type: Boolean, reflect: !0 })
+], a.prototype, "isCompact", 2);
+a = m([
+  d("pie-breadcrumb")
+], a);
 export {
-  n as PieBreadcrumb,
-  l as defaultProps,
-  w as variants
+  a as PieBreadcrumb,
+  p as defaultProps,
+  y as variants
 };

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

@@ -0,0 +1,7 @@
+export interface BreadcrumbItemProps {
+    /**
+     * The URL that the breadcrumb item links to
+     */
+    href?: string;
+}
+//# sourceMappingURL=defs.d.ts.map