@justeattakeaway/pie-breadcrumb 0.3.0 → 0.4.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/pie-breadcrumb-item/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

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

@@ -0,0 +1,34 @@
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { type BreadcrumbItemProps } from './defs';
+declare const componentSelector = "pie-breadcrumb-item";
+export * from './defs';
+declare const PieBreadcrumbItem_base: import("@justeattakeaway/pie-webc-core").GenericConstructor<import("@justeattakeaway/pie-webc-core").RTLInterface> & typeof PieElement;
+/**
+ * @tagname pie-breadcrumb-item
+ */
+export declare class PieBreadcrumbItem extends PieBreadcrumbItem_base implements BreadcrumbItemProps {
+    href: string;
+    /**
+     * 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.
+     *
+     * @private
+     */
+    private renderNavigationLink;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieBreadcrumbItem;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pie-breadcrumb-item/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAGrF,OAAO,2BAA2B,CAAC;AACnC,OAAO,0DAA0D,CAAC;AAClE,OAAO,yDAAyD,CAAC;AAGjE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAElD,QAAA,MAAM,iBAAiB,wBAAwB,CAAC;AAGhD,cAAc,QAAQ,CAAC;;AAEvB;;GAEG;AACH,qBACa,iBAAkB,SAAQ,sBAAqB,YAAW,mBAAmB;IAE/E,IAAI,SAAM;IAEjB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IAYvB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAQ5B,MAAM;IAUN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;KAC1C;CACJ"}

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

@@ -0,0 +1,66 @@
+import { html as r, unsafeCSS as m } from "lit";
+import { property as c } from "lit/decorators.js";
+import { P as d, s as u } from "../breadcrumb-B5ACdbGG.js";
+import { RtlMixin as f, safeCustomElement as h } from "@justeattakeaway/pie-webc-core";
+import "@justeattakeaway/pie-link";
+import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
+import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
+var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (p, t, n, i) => {
+  for (var e = i > 1 ? void 0 : i ? v(t, n) : t, a = p.length - 1, o; a >= 0; a--)
+    (o = p[a]) && (e = (i ? o(t, n, e) : o(e)) || e);
+  return i && e && b(t, n, e), e;
+};
+let s = class extends f(d) {
+  constructor() {
+    super(...arguments), this.href = "";
+  }
+  /**
+   * 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() {
+    return r`
+                <span
+                    class="c-breadcrumb-separator"
+                    role="presentation"
+                    aria-hidden="true"
+                    data-test-id="pie-breadcrumb-separator">
+                        ${this.isRTL ? r`<icon-chevron-left></icon-chevron-left>` : r`<icon-chevron-right></icon-chevron-right>`}
+                </span>
+            `;
+  }
+  /**
+   * Renders a navigation link for a breadcrumb item.
+   *
+   * @private
+   */
+  renderNavigationLink() {
+    return r`
+            <pie-link isStandalone underline="reversed" href="${this.href}">
+                <span><slot></slot></span>
+            </pie-link>
+        `;
+  }
+  render() {
+    return r`
+            <li role="listitem" data-test-id="pie-breadcrumb-item" class="c-breadcrumb-item">
+                ${this.renderNavigationLink()}
+                ${this.renderSeparator()}
+            </li>
+        `;
+  }
+};
+s.styles = m(u);
+l([
+  c({ type: String, reflect: !0 })
+], s.prototype, "href", 2);
+s = l([
+  h("pie-breadcrumb-item")
+], s);
+export {
+  s as PieBreadcrumbItem
+};

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PieBreadcrumbItem as PieBreadcrumbItemLit } from './index';
+import { type BreadcrumbItemProps } from './defs';
+export * from './defs';
+type ReactBaseType = React.HTMLAttributes<HTMLLIElement>;
+export declare const PieBreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<PieBreadcrumbItemLit> & ReactBaseType>;
+//# sourceMappingURL=react.d.ts.map

package/dist/pie-breadcrumb-item/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/pie-breadcrumb-item/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,iBAAiB,IAAI,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAElD,cAAc,QAAQ,CAAC;AAUvB,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAA;AAExD,eAAO,MAAM,iBAAiB,kHACkC,CAAC"}

package/dist/pie-breadcrumb-item/react.js

@@ -0,0 +1,13 @@
+import * as e from "react";
+import { createComponent as m } from "@lit/react";
+import { PieBreadcrumbItem as r } from "./index.js";
+const t = m({
+  displayName: "PieBreadcrumbItem",
+  elementClass: r,
+  react: e,
+  tagName: "pie-breadcrumb-item",
+  events: {}
+}), i = t;
+export {
+  i as PieBreadcrumbItem
+};

package/dist/react.d.ts

@@ -1,115 +1,7 @@
-import type { CSSResult } from 'lit';
-import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
-import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import * as React_2 from 'react';
-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'>;
-
-export declare const PieBreadcrumb: React_2.ForwardRefExoticComponent<BreadcrumbProps & React_2.RefAttributes<PieBreadcrumb_2> & ReactBaseType>;
-
-/**
- * @tagname pie-breadcrumb
- */
-declare class PieBreadcrumb_2 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;
-
-declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
-
-export declare const variants: readonly ["default", "scrim"];
-
-export { }
+import * as React from 'react';
+import { PieBreadcrumb as PieBreadcrumbLit } from './index';
+import { type BreadcrumbProps } from './defs';
+export * from './defs';
+type ReactBaseType = React.HTMLAttributes<HTMLElement>;
+export declare const PieBreadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<PieBreadcrumbLit> & ReactBaseType>;
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAE9C,cAAc,QAAQ,CAAC;AAUvB,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEtD,eAAO,MAAM,aAAa,0GACkC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-breadcrumb",
   "description": "PIE Design System Breadcrumb built using Web Components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -33,19 +33,20 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.20.0",
+    "@justeattakeaway/pie-components-config": "0.20.1",
     "@justeattakeaway/pie-css": "0.16.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.5.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.5.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.25.1"
+    "@justeattakeaway/pie-webc-core": "0.26.0"
   },
   "volta": {
     "extends": "../../../package.json"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [
-    "dist/*.js"
+    "dist/*.js",
+    "dist/**/*.js"
   ]
 }

package/src/breadcrumb.scss

@@ -2,8 +2,21 @@
 
 .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) var(--dt-spacing-a) var(--dt-spacing-d);
+  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 {
@@ -11,37 +24,58 @@
   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);
+  
+  pie-link {
+    --link-text-color: var(--breadcrumb-item-color);
+    --link-font-weight: var(--dt-font-weight-bold);
+  }
+}  
 
-  li {
-    list-style-type: none;
-    display: flex;
-    align-items: center;
-    white-space: nowrap; 
-  }  
+.c-breadcrumb-separator {
+  display: inline-flex;
+  color: var(--breadcrumb-separator-color);
+  transform: var(--breadcrumb-separator-transform);
 }
 
-.c-breadcrumb--scrim {
-  --breadcrumb-background-color: var(--dt-color-overlay);
-  border-radius: var(--dt-radius-rounded-e);
+:host([isCompact]) {
+  .c-breadcrumb {
+    --breadcrumb-item-flex-direction: row-reverse;
+    --breadcrumb-separator-transform: rotate(180deg);
+  }
+  
+  ::slotted(pie-breadcrumb-item:not(:nth-last-of-type(2))) {
+    display: none;
+  }
 }
 
-.c-breadcrumb-list-last-item {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 250px;
-  color: var(--dt-color-content-subdued);
-}
+:host(:last-of-type) {
+  pie-link {
+    --link-font-weight: var(--dt-font-weight-regular);
 
-.c-breadcrumb-list-last-item--scrim {
-  color: var(--dt-color-content-link-light);
-}
+    span {
+      max-width: 250px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 
-.c-breadcrumb-separator {
-  color: var(--dt-color-content-subdued);
+  .c-breadcrumb-separator {
+    display: none;
+  }
 }
 
-.c-breadcrumb-separator--scrim {
-  color: var(--dt-color-content-link-light);
-}
+:host {
+  ::slotted(pie-breadcrumb-item:only-child) {
+    display: none;
+  }
+}

package/src/defs-react.ts

@@ -1,8 +1,3 @@
 import type React from 'react';
-/**
- * TODO: Verify if ReactBaseType can be set as a more specific React interface
- * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
- * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
- * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
- */
+
 export type ReactBaseType = React.HTMLAttributes<HTMLElement>

package/src/defs.ts

@@ -1,13 +1,8 @@
-export const variants = ['default', 'scrim'] as const;
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
-export type BreadcrumbItem = {
-  label: string;
-  href: string;
-}
+export const variants = ['default', 'scrim'] as const;
 
 export interface BreadcrumbProps {
-  items: BreadcrumbItem[];
-
   /**
    * Optional variant for styling the breadcrumb component.
    */
@@ -19,7 +14,9 @@ export interface BreadcrumbProps {
   isCompact?: boolean;
 }
 
-export const defaultProps: Pick<BreadcrumbProps, 'variant' | 'isCompact'> = {
+export type DefaultProps = ComponentDefaultProps<BreadcrumbProps>;
+
+export const defaultProps:DefaultProps = {
     variant: 'default',
     isCompact: false,
 };

package/src/index.ts

@@ -1,18 +1,12 @@
-import { html, nothing, unsafeCSS } from 'lit';
+import { html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
-import { RtlMixin, defineCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
+import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
 import { classMap } from 'lit/directives/class-map.js';
-
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 
-import '@justeattakeaway/pie-link';
-import '@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js';
-import '@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js';
-
 import styles from './breadcrumb.scss?inline';
 import {
     type BreadcrumbProps,
-    type BreadcrumbItem,
     variants,
     defaultProps,
 } from './defs';
@@ -25,173 +19,32 @@ export * from './defs';
 /**
  * @tagname pie-breadcrumb
  */
-export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbProps {
-    @property({ type: Array })
-    public items: BreadcrumbProps['items'] = [];
-
+@safeCustomElement('pie-breadcrumb')
+export class PieBreadcrumb extends PieElement implements BreadcrumbProps {
     @property({ type: String })
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
     public variant = defaultProps.variant;
 
-    @property({ type: Boolean })
+    @property({ type: Boolean, reflect: true })
     public isCompact = defaultProps.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
-     */
-    private renderSeparator () {
-        const separatorVariant = this.variant === 'scrim' ? 'c-breadcrumb-separator--scrim' : 'c-breadcrumb-separator';
-
-        return html`
-            <li
-                role="presentation"
-                aria-hidden="true"
-                class="${separatorVariant}"
-                data-test-id="pie-breadcrumb-separator">
-                    ${this.isRTL ? html`<icon-chevron-left></icon-chevron-left>` : html`<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
-     */
-    private renderNavigationLink (item: BreadcrumbItem) {
-        const linkVariant = this.variant === 'scrim' ? 'inverse' : 'default';
-
-        return html`
-            <pie-link variant="${linkVariant}" isStandalone underline="reversed" isBold href="${item.href}">
-                ${item.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
-     */
-    private renderLastItem (item: BreadcrumbItem) {
-        const wrapperClasses = {
-            'c-breadcrumb-list-last-item': true,
-            'c-breadcrumb-list-last-item--scrim': this.variant === 'scrim',
-        };
-
-        return html`<span class="${classMap(wrapperClasses)}">${item.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
-     */
-    private renderItem (item: BreadcrumbItem, isLastItem = false) {
-        return html`
-            <li role="listitem" data-test-id="pie-breadcrumb-item">
-                ${
-                    isLastItem
-                        ? this.renderLastItem(item)
-                        : this.renderNavigationLink(item)
-                }
-            </li>
-            ${isLastItem ? nothing : this.renderSeparator()}
-        `;
-    }
-
-    /**
-     * Renders breadcrumb items using the default variant style.
-     *
-     * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
-     *
-     * @private
-     */
-    private renderDefaultBreadcrumb (items: BreadcrumbProps['items']) {
-        const numberOfSeparators = items.length - 1;
-
-        return html`${items.map((item, index) => this.renderItem(item, numberOfSeparators <= index))}`;
-    }
-
-    /**
-     * Renders a separator icon specifically for the back variant.
-     * The icon direction depends on the RTL (Right-to-Left) setting.
-     *
-     * @private
-     */
-    private renderCompactBreadcrumbSeparator () {
-        const separatorVariant = this.variant === 'scrim' ? 'c-breadcrumb-separator--scrim' : 'c-breadcrumb-separator';
-
-        return html`
-            <li role="presentation" aria-hidden="true" class="${separatorVariant}" data-test-id="pie-breadcrumb-separator">
-                ${this.isRTL ? html`<icon-chevron-right></icon-chevron-right>` : html`<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
-     */
-    private renderCompactBreadcrumb (items: BreadcrumbProps['items']) {
-        const lastItem = items[items.length - 1];
-
-        return html`
-            ${this.renderCompactBreadcrumbSeparator()}
-            <li role="listitem" data-test-id="pie-breadcrumb-item">
-                ${this.renderNavigationLink(lastItem)}    
-            </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
-     */
-    private renderBreadcrumbItems (items: BreadcrumbProps['items'], isCompact: BreadcrumbProps['isCompact']) {
-        return html`
-            <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
-                ${isCompact ? this.renderCompactBreadcrumb(items) : this.renderDefaultBreadcrumb(items)}
-            </ol>
-        `;
-    }
-
     render () {
-        const { items, variant, isCompact } = this;
+        const { variant, isCompact } = this;
 
-        const componentWrapperClasses = {
+        const classes = {
             'c-breadcrumb': true,
-            'c-breadcrumb--scrim': variant === 'scrim',
+            [`c-breadcrumb--${variant}`]: true,
+            'c-breadcrumb--compact': isCompact,
         };
 
         return html`
             <nav
                 aria-label="breadcrumb"
                 data-test-id="pie-breadcrumb"
-                class="${classMap(componentWrapperClasses)}">
-                ${items ? this.renderBreadcrumbItems(items, isCompact) : nothing}
+                class="${classMap(classes)}">
+                    <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
+                        <slot></slot>
+                    </ol>
             </nav>`;
     }
 
@@ -199,8 +52,6 @@ export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbPro
     static styles = unsafeCSS(styles);
 }
 
-defineCustomElement(componentSelector, PieBreadcrumb);
-
 declare global {
     interface HTMLElementTagNameMap {
         [componentSelector]: PieBreadcrumb;

package/src/pie-breadcrumb-item/defs-react.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+
+export type ReactBaseType = React.HTMLAttributes<HTMLLIElement>

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

@@ -0,0 +1,6 @@
+export interface BreadcrumbItemProps {
+  /**
+   * The URL that the breadcrumb item links to
+   */
+  href?: string;
+}