@justeattakeaway/pie-breadcrumb 0.7.29 → 0.8.0

package/README.md

@@ -39,6 +39,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | `variant` | `"default"`, `"scrim"` | Sets the variant of the breadcrumb. | `"default"` |
 | `isCompact` | `true`, `false` | If true, renders a compact variation of the breadcrumb. | `false` |
 | `hideCurrentPage` | `true`, `false` | If true, hides the current page of the breadcrumb (last item). | `false` |
+| `aria.label` | `string` | Provides a custom accessible label for the breadcrumb element. | `"Breadcrumb"` |
 
 #### `pie-breadcrumb-item` Properties
 
@@ -46,6 +47,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 |------|---------|-------------|--------|
 | `href` | `string` | The URL that the breadcrumb item links to. | `undefined` |
 | `target` | `string` | Where to display the linked URL such as `"_self"`, `"_blank"`, `"_parent"`, or `"_top"`. | `undefined` |
+| `aria.label` | `string` | Provides a custom accessible label for the breadcrumb item | `undefined` |
 
 ### Slots
 

package/custom-elements.json

@@ -72,6 +72,14 @@
               "name": "hideCurrentPage",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "aria",
+              "type": {
+                "text": "BreadcrumbProps['aria']"
+              },
+              "privacy": "public"
+            },
             {
               "kind": "method",
               "name": "updateAriaCurrentItem",
@@ -148,6 +156,14 @@
               },
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "aria",
+              "type": {
+                "text": "BreadcrumbItemProps['aria']"
+              },
+              "privacy": "public"
+            },
             {
               "kind": "method",
               "name": "renderSeparator",

package/dist/{breadcrumb-CpBYQXwO.js → breadcrumb-Cl-EBr33.js}

@@ -4,7 +4,7 @@ const r = class r extends e {
     this.getAttribute("v") || this.setAttribute("v", r.v);
   }
 };
-r.v = "0.7.29";
+r.v = "0.8.0";
 let t = r;
 const o = "*,*:after,*:before{box-sizing:inherit}:host{display:block}:host ::slotted(pie-breadcrumb-item:only-child){display:none}.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-block-start:var(--dt-spacing-a);padding-block-end:var(--dt-spacing-a)}.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);padding-inline-start:var(--dt-spacing-d);padding-inline-end:var(--dt-spacing-d)}.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-body-strong-l-link-weight)}.c-breadcrumb-separator{display:inline-flex;color:var(--breadcrumb-separator-color);transform:var(--breadcrumb-separator-transform)}.c-breadcrumb-separator:dir(rtl){--breadcrumb-separator-transform: rotate(180deg)}: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-body-l-link-weight)}:host(:last-of-type) pie-link::part(base):hover,:host(:last-of-type) pie-link::part(base):active{--link-text-decoration: none}: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}";
 export {

package/dist/defs.d.ts

@@ -1,6 +1,13 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 export declare const variants: readonly ["default", "scrim"];
+type AriaProps = {
+    label?: string;
+};
 export interface BreadcrumbProps {
+    /**
+     * The ARIA labels used for various parts of the breadcrumb.
+     */
+    aria?: AriaProps;
     /**
      * Optional variant for styling the breadcrumb component.
      */
@@ -14,6 +21,7 @@ export interface BreadcrumbProps {
      */
     hideCurrentPage?: boolean;
 }
-export type DefaultProps = ComponentDefaultProps<BreadcrumbProps>;
+export type DefaultProps = ComponentDefaultProps<BreadcrumbProps, keyof Omit<BreadcrumbProps, 'aria'>>;
 export declare const defaultProps: DefaultProps;
+export {};
 //# sourceMappingURL=defs.d.ts.map

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;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"}
+{"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,KAAK,SAAS,GAAG;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;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,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAEvG,eAAO,MAAM,YAAY,EAAC,YAIzB,CAAC"}

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export declare class PieBreadcrumb extends PieElement implements BreadcrumbProps
     variant: "default" | "scrim";
     isCompact: boolean;
     hideCurrentPage: boolean;
+    aria: BreadcrumbProps['aria'];
     private updateAriaCurrentItem;
     /**
      * Handles the slot change event.

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;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"}
+{"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;IAG/C,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAErC,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,28 +1,28 @@
 import { unsafeCSS as u, html as m } from "lit";
-import { property as p } from "lit/decorators.js";
+import { property as n } 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 h, P as C } from "./breadcrumb-CpBYQXwO.js";
-const v = ["default", "scrim"], i = {
+import { classMap as h } from "lit/directives/class-map.js";
+import { s as f, P as C } from "./breadcrumb-Cl-EBr33.js";
+const v = ["default", "scrim"], l = {
   variant: "default",
   isCompact: !1,
   hideCurrentPage: !1
 };
-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;
+var y = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (r, e, t, i) => {
+  for (var a = i > 1 ? void 0 : i ? P(e, t) : e, p = r.length - 1, c; p >= 0; p--)
+    (c = r[p]) && (a = (i ? c(e, t, a) : c(a)) || a);
+  return i && a && y(e, t, a), a;
 };
-const y = "pie-breadcrumb";
+const g = "pie-breadcrumb";
 let s = class extends C {
   constructor() {
-    super(...arguments), this.variant = i.variant, this.isCompact = i.isCompact, this.hideCurrentPage = i.hideCurrentPage;
+    super(...arguments), this.variant = l.variant, this.isCompact = l.isCompact, this.hideCurrentPage = l.hideCurrentPage;
   }
   updateAriaCurrentItem() {
-    const t = [...this.querySelectorAll("pie-breadcrumb-item")];
-    t.forEach((e, o) => {
-      const a = o === t.length - 1;
-      e.ariaCurrent = a ? "page" : null;
+    const r = [...this.querySelectorAll("pie-breadcrumb-item")];
+    r.forEach((e, t) => {
+      const i = t === r.length - 1;
+      e.ariaCurrent = i ? "page" : null;
     });
   }
   /**
@@ -37,37 +37,41 @@ let s = class extends C {
     this.updateAriaCurrentItem();
   }
   render() {
-    const { variant: t } = this, e = {
+    var t;
+    const { variant: r } = this, e = {
       "c-breadcrumb": !0,
-      [`c-breadcrumb--${t}`]: !0
+      [`c-breadcrumb--${r}`]: !0
     };
     return m`
             <nav
-                aria-label="breadcrumb"
+                aria-label=${((t = this.aria) == null ? void 0 : t.label) ?? "Breadcrumb"}
                 data-test-id="pie-breadcrumb"
-                class="${f(e)}">
+                class="${h(e)}">
                     <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
                         <slot @slotchange=${this._handleSlotChange}></slot>
                     </ol>
             </nav>`;
   }
 };
-s.styles = u(h);
-n([
-  p({ type: String }),
-  d(y, v, i.variant)
+s.styles = u(f);
+o([
+  n({ type: String }),
+  d(g, v, l.variant)
 ], s.prototype, "variant", 2);
-n([
-  p({ type: Boolean, reflect: !0 })
+o([
+  n({ type: Boolean, reflect: !0 })
 ], s.prototype, "isCompact", 2);
-n([
-  p({ type: Boolean, reflect: !0 })
+o([
+  n({ type: Boolean, reflect: !0 })
 ], s.prototype, "hideCurrentPage", 2);
-s = n([
+o([
+  n({ type: Object })
+], s.prototype, "aria", 2);
+s = o([
   b("pie-breadcrumb")
 ], s);
 export {
   s as PieBreadcrumb,
-  i as defaultProps,
+  l as defaultProps,
   v as variants
 };

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

@@ -1,4 +1,11 @@
+type AriaProps = {
+    label?: string;
+};
 export interface BreadcrumbItemProps {
+    /**
+     * The ARIA labels used for various parts of the breadcrumb item.
+     */
+    aria?: AriaProps;
     /**
     * The URL that the breadcrumb item links to
     */
@@ -8,4 +15,5 @@ export interface BreadcrumbItemProps {
     */
     target?: string;
 }
+export {};
 //# 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;IAChC;;MAEE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;MAEE;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/pie-breadcrumb-item/defs.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;MAEE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;MAEE;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}

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

@@ -8,6 +8,7 @@ export * from './defs';
 export declare class PieBreadcrumbItem extends PieElement implements BreadcrumbItemProps {
     href: BreadcrumbItemProps['href'];
     target: BreadcrumbItemProps['target'];
+    aria: BreadcrumbItemProps['aria'];
     /**
      * Renders a separator icon between breadcrumb items.
      *

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;AAIrF,OAAO,2BAA2B,CAAC;AACnC,OAAO,0DAA0D,CAAC;AAGlE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAElD,QAAA,MAAM,iBAAiB,wBAAwB,CAAC;AAGhD,cAAc,QAAQ,CAAC;AAEvB;;GAEG;AACH,qBACa,iBAAkB,SAAQ,UAAW,YAAW,mBAAmB;IAErE,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAGlC,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAE7C;;;;;;OAMG;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"}
+{"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;AAGlE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAElD,QAAA,MAAM,iBAAiB,wBAAwB,CAAC;AAGhD,cAAc,QAAQ,CAAC;AAEvB;;GAEG;AACH,qBACa,iBAAkB,SAAQ,UAAW,YAAW,mBAAmB;IAErE,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAGlC,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAGtC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAEzC;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;IAYvB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAa5B,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,16 +1,16 @@
-import { unsafeCSS as c, html as o } from "lit";
-import { property as d } from "lit/decorators.js";
-import { s as f, P as u } from "../breadcrumb-CpBYQXwO.js";
+import { unsafeCSS as c, html as l } from "lit";
+import { property as m } from "lit/decorators.js";
+import { s as f, P as b } from "../breadcrumb-Cl-EBr33.js";
 import { safeCustomElement as h } from "@justeattakeaway/pie-webc-core";
-import { ifDefined as l } from "lit/directives/if-defined.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-link";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
-var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, p = (m, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? v(t, a) : t, s = m.length - 1, n; s >= 0; s--)
-    (n = m[s]) && (e = (i ? n(t, a, e) : n(e)) || e);
-  return i && e && b(t, a, e), e;
+var u = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, i, o, a) => {
+  for (var e = a > 1 ? void 0 : a ? v(i, o) : i, n = t.length - 1, p; n >= 0; n--)
+    (p = t[n]) && (e = (a ? p(i, o, e) : p(e)) || e);
+  return a && e && u(i, o, e), e;
 };
-let r = class extends u {
+let r = class extends b {
   /**
    * Renders a separator icon between breadcrumb items.
    *
@@ -19,7 +19,7 @@ let r = class extends u {
    * @private
    */
   renderSeparator() {
-    return o`
+    return l`
                 <span
                     class="c-breadcrumb-separator"
                     role="presentation"
@@ -35,18 +35,20 @@ let r = class extends u {
    * @private
    */
   renderNavigationLink() {
-    return o`
+    var t;
+    return l`
             <pie-link 
                 isStandalone 
                 underline="reversed"
-                href="${l(this.href)}"
-                target="${l(this.target)}">
+                href="${d(this.href)}"
+                target="${d(this.target)}"
+                .aria="${{ label: (t = this.aria) == null ? void 0 : t.label }}">
                     <span><slot></slot></span>
             </pie-link>
         `;
   }
   render() {
-    return o`
+    return l`
             <li role="listitem" data-test-id="pie-breadcrumb-item" class="c-breadcrumb-item">
                 ${this.renderNavigationLink()}
                 ${this.renderSeparator()}
@@ -55,13 +57,16 @@ let r = class extends u {
   }
 };
 r.styles = c(f);
-p([
-  d({ type: String })
+s([
+  m({ type: String })
 ], r.prototype, "href", 2);
-p([
-  d({ type: String })
+s([
+  m({ type: String })
 ], r.prototype, "target", 2);
-r = p([
+s([
+  m({ type: Object })
+], r.prototype, "aria", 2);
+r = s([
   h("pie-breadcrumb-item")
 ], r);
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-breadcrumb",
   "description": "PIE Design System Breadcrumb built using Web Components",
-  "version": "0.7.29",
+  "version": "0.8.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -46,13 +46,13 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "1.1.0",
+    "@justeattakeaway/pie-css": "1.1.1",
     "@justeattakeaway/pie-monorepo-utils": "0.9.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "1.21.5",
-    "@justeattakeaway/pie-link": "1.3.24",
+    "@justeattakeaway/pie-icons-webc": "1.22.0",
+    "@justeattakeaway/pie-link": "1.3.25",
     "@justeattakeaway/pie-webc-core": "14.0.1"
   },
   "volta": {

package/src/defs.ts

@@ -2,7 +2,16 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const variants = ['default', 'scrim'] as const;
 
+type AriaProps = {
+    label?: string;
+};
+
 export interface BreadcrumbProps {
+  /**
+   * The ARIA labels used for various parts of the breadcrumb.
+   */
+  aria?: AriaProps;
+
   /**
    * Optional variant for styling the breadcrumb component.
    */
@@ -19,7 +28,7 @@ export interface BreadcrumbProps {
   hideCurrentPage?: boolean;
 }
 
-export type DefaultProps = ComponentDefaultProps<BreadcrumbProps>;
+export type DefaultProps = ComponentDefaultProps<BreadcrumbProps, keyof Omit<BreadcrumbProps, 'aria'>>;
 
 export const defaultProps:DefaultProps = {
     variant: 'default',

package/src/index.ts

@@ -32,6 +32,9 @@ export class PieBreadcrumb extends PieElement implements BreadcrumbProps {
     @property({ type: Boolean, reflect: true })
     public hideCurrentPage = defaultProps.hideCurrentPage;
 
+    @property({ type: Object })
+    public aria: BreadcrumbProps['aria'];
+
     private updateAriaCurrentItem () {
         const items = [...this.querySelectorAll('pie-breadcrumb-item')] as PieBreadcrumbItem[];
         items.forEach((item, i) => {
@@ -63,7 +66,7 @@ export class PieBreadcrumb extends PieElement implements BreadcrumbProps {
 
         return html`
             <nav
-                aria-label="breadcrumb"
+                aria-label=${this.aria?.label ?? 'Breadcrumb'}
                 data-test-id="pie-breadcrumb"
                 class="${classMap(classes)}">
                     <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">

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

@@ -1,4 +1,13 @@
+type AriaProps = {
+    label?: string;
+};
+
 export interface BreadcrumbItemProps {
+    /**
+     * The ARIA labels used for various parts of the breadcrumb item.
+     */
+    aria?: AriaProps;
+
     /**
     * The URL that the breadcrumb item links to
     */

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

@@ -26,6 +26,9 @@ export class PieBreadcrumbItem extends PieElement implements BreadcrumbItemProps
     @property({ type: String })
     public target: BreadcrumbItemProps['target'];
 
+    @property({ type: Object })
+    public aria: BreadcrumbItemProps['aria'];
+
     /**
      * Renders a separator icon between breadcrumb items.
      *
@@ -56,7 +59,8 @@ export class PieBreadcrumbItem extends PieElement implements BreadcrumbItemProps
                 isStandalone 
                 underline="reversed"
                 href="${ifDefined(this.href)}"
-                target="${ifDefined(this.target)}">
+                target="${ifDefined(this.target)}"
+                .aria="${{ label: this.aria?.label }}">
                     <span><slot></slot></span>
             </pie-link>
         `;