@justeattakeaway/pie-breadcrumb 0.4.0 → 0.5.0

package/custom-elements.json

@@ -26,7 +26,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\r\n    variant: 'default',\r\n    isCompact: false,\r\n}"
+          "default": "{\r\n    variant: 'default',\r\n    isCompact: false,\r\n    hideCurrentPage: false,\r\n}"
         }
       ],
       "exports": [
@@ -69,6 +69,24 @@
               "privacy": "public",
               "attribute": "isCompact",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hideCurrentPage",
+              "privacy": "public",
+              "attribute": "hideCurrentPage",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "updateAriaCurrentItem",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleSlotChange",
+              "privacy": "private",
+              "description": "Handles the slot change event."
             }
           ],
           "attributes": [
@@ -79,6 +97,10 @@
             {
               "name": "isCompact",
               "fieldName": "isCompact"
+            },
+            {
+              "name": "hideCurrentPage",
+              "fieldName": "hideCurrentPage"
             }
           ],
           "superclass": {
@@ -133,12 +155,19 @@
               "kind": "field",
               "name": "href",
               "type": {
-                "text": "string"
+                "text": "BreadcrumbItemProps['href']"
               },
               "privacy": "public",
-              "default": "''",
-              "attribute": "href",
-              "reflects": true
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "BreadcrumbItemProps['target']"
+              },
+              "privacy": "public",
+              "attribute": "target"
             },
             {
               "kind": "method",
@@ -162,10 +191,16 @@
             {
               "name": "href",
               "type": {
-                "text": "string"
+                "text": "BreadcrumbItemProps['href']"
               },
-              "default": "''",
               "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "BreadcrumbItemProps['target']"
+              },
+              "fieldName": "target"
             }
           ],
           "mixins": [

package/dist/{breadcrumb-B5ACdbGG.js → breadcrumb-bP8yihR9.js}

@@ -1,13 +1,13 @@
-import { LitElement as e } from "lit";
-const r = class r extends e {
+import { LitElement as t } from "lit";
+const r = class r extends t {
   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}";
+r.v = "0.5.0";
+let e = 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([hideCurrentPage]) ::slotted(pie-breadcrumb-item:last-of-type){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,
+  e as P,
   o as s
 };

package/dist/defs.d.ts

@@ -9,6 +9,10 @@ export interface BreadcrumbProps {
      * Optional property for rendering a compact variation of the breadcrumb.
      */
     isCompact?: boolean;
+    /**
+     * Optional property to hide the current page of the breadcrumb (last item).
+     */
+    hideCurrentPage?: boolean;
 }
 export type DefaultProps = ComponentDefaultProps<BreadcrumbProps>;
 export declare const defaultProps: DefaultProps;

package/dist/defs.d.ts.map

@@ -1 +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"}
+{"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;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;AAElE,eAAO,MAAM,YAAY,EAAC,YAIzB,CAAC"}

package/dist/index.d.ts

@@ -8,6 +8,15 @@ export * from './defs';
 export declare class PieBreadcrumb extends PieElement implements BreadcrumbProps {
     variant: "default" | "scrim";
     isCompact: boolean;
+    hideCurrentPage: boolean;
+    private updateAriaCurrentItem;
+    /**
+     * Handles the slot change event.
+     *
+     * @private
+     */
+    private _handleSlotChange;
+    protected firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }

package/dist/index.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAIrF,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;IAGnC,eAAe,UAAgC;IAEtD,OAAO,CAAC,qBAAqB;IAQ7B;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAIzB,SAAS,CAAC,YAAY,IAAK,IAAI;IAI/B,MAAM;IAoBN,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,52 +1,73 @@
-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 { unsafeCSS as u, html as m } from "lit";
+import { property as p } from "lit/decorators.js";
+import { validPropertyValues as d, safeCustomElement as b } 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 = {
+import { s as h, P as C } from "./breadcrumb-bP8yihR9.js";
+const v = ["default", "scrim"], i = {
   variant: "default",
-  isCompact: !1
+  isCompact: !1,
+  hideCurrentPage: !1
 };
-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;
+var P = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (t, e, o, a) => {
+  for (var r = a > 1 ? void 0 : a ? g(e, o) : e, l = t.length - 1, c; l >= 0; l--)
+    (c = t[l]) && (r = (a ? c(e, o, r) : c(r)) || r);
+  return a && r && P(e, o, r), r;
 };
-const h = "pie-breadcrumb";
-let a = class extends P {
+const y = "pie-breadcrumb";
+let s = class extends C {
   constructor() {
-    super(...arguments), this.variant = p.variant, this.isCompact = p.isCompact;
+    super(...arguments), this.variant = i.variant, this.isCompact = i.isCompact, this.hideCurrentPage = i.hideCurrentPage;
+  }
+  updateAriaCurrentItem() {
+    const t = [...this.querySelectorAll("pie-breadcrumb-item")];
+    t.forEach((e, o) => {
+      const a = o === t.length - 1;
+      e.ariaCurrent = a ? "page" : null;
+    });
+  }
+  /**
+   * Handles the slot change event.
+   *
+   * @private
+   */
+  _handleSlotChange() {
+    this.updateAriaCurrentItem();
+  }
+  firstUpdated() {
+    this.updateAriaCurrentItem();
   }
   render() {
-    const { variant: s, isCompact: t } = this, e = {
+    const { variant: t } = this, e = {
       "c-breadcrumb": !0,
-      [`c-breadcrumb--${s}`]: !0,
-      "c-breadcrumb--compact": t
+      [`c-breadcrumb--${t}`]: !0
     };
-    return u`
+    return m`
             <nav
                 aria-label="breadcrumb"
                 data-test-id="pie-breadcrumb"
                 class="${f(e)}">
                     <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
-                        <slot></slot>
+                        <slot @slotchange=${this._handleSlotChange}></slot>
                     </ol>
             </nav>`;
   }
 };
-a.styles = n(v);
-m([
-  l({ type: String }),
-  b(h, y, p.variant)
-], a.prototype, "variant", 2);
-m([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "isCompact", 2);
-a = m([
-  d("pie-breadcrumb")
-], a);
+s.styles = u(h);
+n([
+  p({ type: String }),
+  d(y, v, i.variant)
+], s.prototype, "variant", 2);
+n([
+  p({ type: Boolean, reflect: !0 })
+], s.prototype, "isCompact", 2);
+n([
+  p({ type: Boolean, reflect: !0 })
+], s.prototype, "hideCurrentPage", 2);
+s = n([
+  b("pie-breadcrumb")
+], s);
 export {
-  a as PieBreadcrumb,
-  p as defaultProps,
-  y as variants
+  s as PieBreadcrumb,
+  i as defaultProps,
+  v as variants
 };

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

@@ -1,7 +1,11 @@
 export interface BreadcrumbItemProps {
     /**
-     * The URL that the breadcrumb item links to
-     */
+    * The URL that the breadcrumb item links to
+    */
     href?: string;
+    /**
+    * Where to display the linked URL such as _self, _blank, _parent or _top
+    */
+    target?: string;
 }
 //# sourceMappingURL=defs.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/pie-breadcrumb-item/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAChC;;MAEE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;MAEE;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}

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

@@ -7,7 +7,8 @@ declare const PieBreadcrumbItem_base: import("@justeattakeaway/pie-webc-core").G
  * @tagname pie-breadcrumb-item
  */
 export declare class PieBreadcrumbItem extends PieBreadcrumbItem_base implements BreadcrumbItemProps {
-    href: string;
+    href: BreadcrumbItemProps['href'];
+    target: BreadcrumbItemProps['target'];
     /**
      * Renders a separator icon between breadcrumb items.
      * The icon direction depends on the RTL (Right-to-Left) setting.

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pie-breadcrumb-item/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAIrF,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,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAGlC,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IAYvB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAY5B,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

@@ -1,19 +1,17 @@
-import { html as r, unsafeCSS as m } from "lit";
+import { html as r, unsafeCSS as d } 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 { P as f, s as h } from "../breadcrumb-bP8yihR9.js";
+import { RtlMixin as u, safeCustomElement as b } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as l } from "lit/directives/if-defined.js";
 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;
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, p = (m, i, a, n) => {
+  for (var e = n > 1 ? void 0 : n ? g(i, a) : i, o = m.length - 1, s; o >= 0; o--)
+    (s = m[o]) && (e = (n ? s(i, a, e) : s(e)) || e);
+  return n && e && v(i, a, e), e;
 };
-let s = class extends f(d) {
-  constructor() {
-    super(...arguments), this.href = "";
-  }
+let t = class extends u(f) {
   /**
    * Renders a separator icon between breadcrumb items.
    * The icon direction depends on the RTL (Right-to-Left) setting.
@@ -40,8 +38,12 @@ let s = class extends f(d) {
    */
   renderNavigationLink() {
     return r`
-            <pie-link isStandalone underline="reversed" href="${this.href}">
-                <span><slot></slot></span>
+            <pie-link 
+                isStandalone 
+                underline="reversed"
+                href="${l(this.href)}"
+                target="${l(this.target)}">
+                    <span><slot></slot></span>
             </pie-link>
         `;
   }
@@ -54,13 +56,16 @@ let s = class extends f(d) {
         `;
   }
 };
-s.styles = m(u);
-l([
-  c({ type: String, reflect: !0 })
-], s.prototype, "href", 2);
-s = l([
-  h("pie-breadcrumb-item")
-], s);
+t.styles = d(h);
+p([
+  c({ type: String })
+], t.prototype, "href", 2);
+p([
+  c({ type: String })
+], t.prototype, "target", 2);
+t = p([
+  b("pie-breadcrumb-item")
+], t);
 export {
-  s as PieBreadcrumbItem
+  t as PieBreadcrumbItem
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-breadcrumb",
   "description": "PIE Design System Breadcrumb built using Web Components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,7 +39,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.26.0"
+    "@justeattakeaway/pie-webc-core": "1.0.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/breadcrumb.scss

@@ -57,6 +57,12 @@
   }
 }
 
+:host([hideCurrentPage]) {
+  ::slotted(pie-breadcrumb-item:last-of-type) {
+    display: none;
+  }
+}
+
 :host(:last-of-type) {
   pie-link {
     --link-font-weight: var(--dt-font-weight-regular);

package/src/defs.ts

@@ -12,6 +12,11 @@ export interface BreadcrumbProps {
    * Optional property for rendering a compact variation of the breadcrumb.
    */
   isCompact?: boolean;
+
+  /**
+   * Optional property to hide the current page of the breadcrumb (last item).
+   */
+  hideCurrentPage?: boolean;
 }
 
 export type DefaultProps = ComponentDefaultProps<BreadcrumbProps>;
@@ -19,5 +24,5 @@ export type DefaultProps = ComponentDefaultProps<BreadcrumbProps>;
 export const defaultProps:DefaultProps = {
     variant: 'default',
     isCompact: false,
+    hideCurrentPage: false,
 };
-

package/src/index.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 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 { type PieBreadcrumbItem } from './pie-breadcrumb-item';
 
 import styles from './breadcrumb.scss?inline';
 import {
@@ -28,13 +29,36 @@ export class PieBreadcrumb extends PieElement implements BreadcrumbProps {
     @property({ type: Boolean, reflect: true })
     public isCompact = defaultProps.isCompact;
 
+    @property({ type: Boolean, reflect: true })
+    public hideCurrentPage = defaultProps.hideCurrentPage;
+
+    private updateAriaCurrentItem () {
+        const items = [...this.querySelectorAll('pie-breadcrumb-item')] as PieBreadcrumbItem[];
+        items.forEach((item, i) => {
+            const isLast = i === items.length - 1;
+            item.ariaCurrent = isLast ? 'page' : null;
+        });
+    }
+
+    /**
+     * Handles the slot change event.
+     *
+     * @private
+     */
+    private _handleSlotChange () {
+        this.updateAriaCurrentItem();
+    }
+
+    protected firstUpdated (): void {
+        this.updateAriaCurrentItem();
+    }
+
     render () {
-        const { variant, isCompact } = this;
+        const { variant } = this;
 
         const classes = {
             'c-breadcrumb': true,
             [`c-breadcrumb--${variant}`]: true,
-            'c-breadcrumb--compact': isCompact,
         };
 
         return html`
@@ -43,7 +67,7 @@ export class PieBreadcrumb extends PieElement implements BreadcrumbProps {
                 data-test-id="pie-breadcrumb"
                 class="${classMap(classes)}">
                     <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
-                        <slot></slot>
+                        <slot @slotchange=${this._handleSlotChange}></slot>
                     </ol>
             </nav>`;
     }

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

@@ -1,6 +1,10 @@
 export interface BreadcrumbItemProps {
-  /**
-   * The URL that the breadcrumb item links to
-   */
-  href?: string;
+    /**
+    * The URL that the breadcrumb item links to
+    */
+    href?: string;
+    /**
+    * Where to display the linked URL such as _self, _blank, _parent or _top
+    */
+    target?: string;
 }

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

@@ -2,6 +2,7 @@ import { html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { RtlMixin, safeCustomElement } from '@justeattakeaway/pie-webc-core';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import '@justeattakeaway/pie-link';
 import '@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js';
@@ -20,8 +21,11 @@ export * from './defs';
  */
 @safeCustomElement('pie-breadcrumb-item')
 export class PieBreadcrumbItem extends RtlMixin(PieElement) implements BreadcrumbItemProps {
-    @property({ type: String, reflect: true })
-    public href = '';
+    @property({ type: String })
+    public href: BreadcrumbItemProps['href'];
+
+    @property({ type: String })
+    public target: BreadcrumbItemProps['target'];
 
     /**
      * Renders a separator icon between breadcrumb items.
@@ -50,8 +54,12 @@ export class PieBreadcrumbItem extends RtlMixin(PieElement) implements Breadcrum
      */
     private renderNavigationLink () {
         return html`
-            <pie-link isStandalone underline="reversed" href="${this.href}">
-                <span><slot></slot></span>
+            <pie-link 
+                isStandalone 
+                underline="reversed"
+                href="${ifDefined(this.href)}"
+                target="${ifDefined(this.target)}">
+                    <span><slot></slot></span>
             </pie-link>
         `;
     }