@carbon/ibm-products-web-components 0.42.0 → 0.43.0

package/es/components/page-header/page-header-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-breadcrumb.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-breadcrumb.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix, carbonPrefix } from '../../globals/settings';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './page-header.scss?lit';\nimport { consume } from '@lit/context';\nimport { pageHeaderContext } from './context';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\n/**\n * Page header Breadcrumb Bar.\n * @element c4p-page-header-breadcrumb\n */\n@customElement(`${prefix}-page-header-breadcrumb`)\nclass CDSPageHeaderBreadcrumb extends LitElement {\n  /**\n   * Specify if breadcrumb bar has bottom border.\n   */\n  @property({ reflect: true, type: Boolean })\n  border = true;\n\n  /**\n   * Set to `true` if the breadcrumb bar is sitting within a grid\n   * (ie. when used in tandem with page-header-hero-image)\n   */\n  @property({ attribute: 'within-grid', type: Boolean })\n  withinGrid = false;\n\n  /**\n   * Set to `true` if page actions should be flush (no padding)\n   */\n  @property({ attribute: 'page-actions-flush', type: Boolean })\n  pageActionsFlush = false;\n\n  /**\n   * Set to `true` if content actions should be flush (no padding)\n   */\n  @property({ attribute: 'content-actions-flush', type: Boolean })\n  contentActionsFlush = false;\n\n  @consume({ context: pageHeaderContext, subscribe: true })\n  @state()\n  context;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Apply class on initial connection\n    this.updateFixedClass();\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('context')) {\n      this.updateFixedClass();\n    }\n  }\n\n  private updateFixedClass() {\n    if (this.context?.disableStickyTabBar) {\n      this.classList.add(`${prefix}--page-header-breadcrumb--fixed`);\n    } else {\n      this.classList.remove(`${prefix}--page-header-breadcrumb--fixed`);\n    }\n  }\n\n  render() {\n    const { withinGrid, context } = this;\n    const { contentActionsClipped } = context ?? {};\n    const gridClasses = classMap({\n      [`${carbonPrefix}--css-grid`]: !withinGrid,\n      [`${carbonPrefix}--subgrid ${carbonPrefix}--subgrid--wide`]: withinGrid,\n    });\n\n    const contentActionClasses = classMap({\n      [`${prefix}--page-header__breadcrumb__content-actions-with-global-actions`]:\n        true,\n      [`${prefix}--page-header__breadcrumb__content-actions-with-global-actions--show`]:\n        contentActionsClipped,\n    });\n\n    return html`\n      <div class=\"${gridClasses}\">\n        <div\n          class=\"${carbonPrefix}--sm:col-span-4 ${carbonPrefix}--md:col-span-8 ${carbonPrefix}--lg:col-span-16 ${carbonPrefix}--css-grid-column\"\n        >\n          <div class=\"${prefix}--page-header__breadcrumb-container\">\n            <div class=\"${prefix}--page-header__breadcrumb-wrapper\">\n              <slot name=\"icon\"></slot>\n              <slot></slot>\n            </div>\n            <div class=\"${prefix}--page-header__breadcrumb__actions\">\n              <div class=\"${contentActionClasses}\">\n                <slot name=\"content-actions\"></slot>\n              </div>\n              <slot name=\"page-actions\"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,0BAAA,MACM,gCAAgC,WAAW;;;gBAKtC;oBAOI;0BAMM;6BAMG;;CAMtB,oBAAoB;AAClB,QAAM,mBAAmB;AAEzB,OAAK,kBAAkB;;CAGzB,QAAQ,mBAAqC;AAC3C,QAAM,QAAQ,kBAAkB;AAChC,MAAI,kBAAkB,IAAI,UAAU,CAClC,MAAK,kBAAkB;;CAI3B,mBAA2B;AACzB,MAAI,KAAK,SAAS,oBAChB,MAAK,UAAU,IAAI,qCAA2C;MAE9D,MAAK,UAAU,OAAO,qCAA2C;;CAIrE,SAAS;EACP,MAAM,EAAE,YAAY,YAAY;EAChC,MAAM,EAAE,0BAA0B,WAAW,EAAE;AAa/C,SAAO,IAAI;oBAZS,SAAS;IAC1B,kBAA8B,CAAC;IAC/B,oCAA4D;GAC9D,CAU0B,CAAC;;yBAEA,kBAAA,MAA+B,kBAAA,MAA+B,mBAAA,MAAgC;;8BAE/F;gCACE;;;;gCAIA;4BAjBA,SAAS;IACnC,sEACC;IACD,4EACC;GACH,CAa2C,CAAC;;;;;;;;;;;gBAW/BA;;;YApFf,SAAS;CAAE,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,UAAA,KAAA,EAAA;YAO1C,SAAS;CAAE,WAAW;CAAe,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,cAAA,KAAA,EAAA;YAMrD,SAAS;CAAE,WAAW;CAAsB,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,oBAAA,KAAA,EAAA;YAM5D,SAAS;CAAE,WAAW;CAAyB,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,uBAAA,KAAA,EAAA;YAG/D,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,EACxD,OAAO,CAAA,EAAA,wBAAA,WAAA,WAAA,KAAA,EAAA;sCA5BTC,cAAc,6BAAmC,CAAA,EAAA,wBAAA;AA4FlD,IAAA,iCAAe"}
+{"version":3,"file":"page-header-breadcrumb.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-breadcrumb.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix, carbonPrefix } from '../../globals/settings';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './page-header.scss?lit';\nimport { consume } from '@lit/context';\nimport { pageHeaderContext } from './context';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\n/**\n * Page header Breadcrumb Bar.\n * @element c4p-page-header-breadcrumb\n */\n@customElement(`${prefix}-page-header-breadcrumb`)\nclass CDSPageHeaderBreadcrumb extends LitElement {\n  /**\n   * Specify if breadcrumb bar has bottom border.\n   */\n  @property({ reflect: true, type: Boolean })\n  border = true;\n\n  /**\n   * Set to `true` if the breadcrumb bar is sitting within a grid\n   * (ie. when used in tandem with page-header-hero-image)\n   */\n  @property({ attribute: 'within-grid', type: Boolean })\n  withinGrid = false;\n\n  /**\n   * Set to `true` if page actions should be flush (no padding)\n   */\n  @property({ attribute: 'page-actions-flush', type: Boolean })\n  pageActionsFlush = false;\n\n  /**\n   * Set to `true` if content actions should be flush (no padding)\n   */\n  @property({ attribute: 'content-actions-flush', type: Boolean })\n  contentActionsFlush = false;\n\n  /**\n   * Aria label for the page header actions navigation.\n   */\n  @property({ type: String, attribute: 'actions-aria-label', reflect: true })\n  actionsAriaLabel = 'Page header actions';\n\n  @consume({ context: pageHeaderContext, subscribe: true })\n  @state()\n  context;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Apply class on initial connection\n    this.updateFixedClass();\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('context')) {\n      this.updateFixedClass();\n    }\n  }\n\n  private updateFixedClass() {\n    if (this.context?.disableStickyTabBar) {\n      this.classList.add(`${prefix}--page-header-breadcrumb--fixed`);\n    } else {\n      this.classList.remove(`${prefix}--page-header-breadcrumb--fixed`);\n    }\n  }\n\n  render() {\n    const { withinGrid, context } = this;\n    const { contentActionsClipped } = context ?? {};\n    const gridClasses = classMap({\n      [`${carbonPrefix}--css-grid`]: !withinGrid,\n      [`${carbonPrefix}--subgrid ${carbonPrefix}--subgrid--wide`]: withinGrid,\n    });\n\n    const contentActionClasses = classMap({\n      [`${prefix}--page-header__breadcrumb__content-actions-with-global-actions`]:\n        true,\n      [`${prefix}--page-header__breadcrumb__content-actions-with-global-actions--show`]:\n        contentActionsClipped,\n    });\n\n    return html`\n      <div class=\"${gridClasses}\">\n        <div\n          class=\"${carbonPrefix}--sm:col-span-4 ${carbonPrefix}--md:col-span-8 ${carbonPrefix}--lg:col-span-16 ${carbonPrefix}--css-grid-column\"\n        >\n          <div class=\"${prefix}--page-header__breadcrumb-container\">\n            <div class=\"${prefix}--page-header__breadcrumb-wrapper\">\n              <slot name=\"icon\"></slot>\n              <slot></slot>\n            </div>\n            <div\n              class=\"${prefix}--page-header__breadcrumb__actions\"\n              role=\"navigation\"\n              aria-label=\"${this.actionsAriaLabel}\"\n            >\n              <div class=\"${contentActionClasses}\">\n                <slot name=\"content-actions\"></slot>\n              </div>\n              <slot name=\"page-actions\"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,0BAAA,MACM,gCAAgC,WAAW;;;gBAKtC;oBAOI;0BAMM;6BAMG;0BAMH;;CAMnB,oBAAoB;AAClB,QAAM,mBAAmB;AAEzB,OAAK,kBAAkB;;CAGzB,QAAQ,mBAAqC;AAC3C,QAAM,QAAQ,kBAAkB;AAChC,MAAI,kBAAkB,IAAI,UAAU,CAClC,MAAK,kBAAkB;;CAI3B,mBAA2B;AACzB,MAAI,KAAK,SAAS,oBAChB,MAAK,UAAU,IAAI,qCAA2C;MAE9D,MAAK,UAAU,OAAO,qCAA2C;;CAIrE,SAAS;EACP,MAAM,EAAE,YAAY,YAAY;EAChC,MAAM,EAAE,0BAA0B,WAAW,EAAE;EAC/C,MAAM,cAAc,SAAS;IAC1B,kBAA8B,CAAC;IAC/B,oCAA4D;GAC9D,CAAC;EAEF,MAAM,uBAAuB,SAAS;IACnC,sEACC;IACD,4EACC;GACH,CAAC;AAEF,SAAO,IAAI;oBACK,YAAY;;yBAEA,kBAAA,MAA+B,kBAAA,MAA+B,mBAAA,MAAgC;;8BAE/F;gCACE;;;;;6BAKH;;4BAEF,KAAK,iBAAiB;;4BAEtB,qBAAqB;;;;;;;;;;;gBAW/BA;;;YA9Ff,SAAS;CAAE,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,UAAA,KAAA,EAAA;YAO1C,SAAS;CAAE,WAAW;CAAe,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,cAAA,KAAA,EAAA;YAMrD,SAAS;CAAE,WAAW;CAAsB,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,oBAAA,KAAA,EAAA;YAM5D,SAAS;CAAE,WAAW;CAAyB,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,uBAAA,KAAA,EAAA;YAM/D,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAsB,SAAS;CAAM,CAAC,CAAA,EAAA,wBAAA,WAAA,oBAAA,KAAA,EAAA;YAG1E,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,EACxD,OAAO,CAAA,EAAA,wBAAA,WAAA,WAAA,KAAA,EAAA;sCAlCTC,cAAc,6BAAmC,CAAA,EAAA,wBAAA;AAsGlD,IAAA,iCAAe"}

package/es/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.d.ts

@@ -28,6 +28,14 @@ export default class CDSPageHeaderBreadcrumbsSet extends LitElement {
      * The page title to display in the title breadcrumb.
      */
     title: string;
+    /**
+     * Aria label for the breadcrumb navigation.
+     */
+    breadcrumbAriaLabel: string;
+    /**
+     * Aria label for the breadcrumb overflow menu button.
+     */
+    overflowAriaLabel: string;
     /**
      * Container holding all breadcrumbs and the overflow menu.
      */

package/es/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-breadcrumbs-set.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,0DAA0D,CAAC;AAClE,OAAO,6DAA6D,CAAC;AAIrE,OAAO,sBAAsB,CAAC;AAE9B,OAAO,iCAAiC,CAAC;AAKzC,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,MAAM,CAAC,OAAO,OAAO,2BAA4B,SAAQ,UAAU;IACjE;;OAEG;IAEH,WAAW,EAAE,UAAU,EAAE,CAAM;IAE/B;;OAEG;IAEH,eAAe,EAAE,UAAU,EAAE,CAAM;IAEnC;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC,OAAO,CAAC,eAAe,CAAyC;IAEhE,iBAAiB,IAAI,IAAI;IAKzB,YAAY;IA6CZ,oBAAoB;IAOpB,MAAM;IAsDN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,2BAA2B,CAAC;KAChE;CACF"}
+{"version":3,"file":"page-header-breadcrumbs-set.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,0DAA0D,CAAC;AAClE,OAAO,6DAA6D,CAAC;AAIrE,OAAO,sBAAsB,CAAC;AAE9B,OAAO,iCAAiC,CAAC;AAKzC,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,MAAM,CAAC,OAAO,OAAO,2BAA4B,SAAQ,UAAU;IACjE;;OAEG;IAEH,WAAW,EAAE,UAAU,EAAE,CAAM;IAE/B;;OAEG;IAEH,eAAe,EAAE,UAAU,EAAE,CAAM;IAEnC;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,mBAAmB,SAAiB;IAEpC;;OAEG;IAEH,iBAAiB,SAAsB;IAEvC;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC,OAAO,CAAC,eAAe,CAAyC;IAEhE,iBAAiB,IAAI,IAAI;IAKzB,YAAY;IA6CZ,oBAAoB;IAOpB,MAAM;IA0DN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,2BAA2B,CAAC;KAChE;CACF"}

package/es/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.js

@@ -36,6 +36,8 @@ let CDSPageHeaderBreadcrumbsSet = class CDSPageHeaderBreadcrumbsSet extends LitE
 		this.hiddenItems = [];
 		this.breadcrumbsData = [];
 		this.title = "";
+		this.breadcrumbAriaLabel = "breadcrumbs";
+		this.overflowAriaLabel = "More breadcrumbs";
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -77,7 +79,7 @@ let CDSPageHeaderBreadcrumbsSet = class CDSPageHeaderBreadcrumbsSet extends LitE
 	render() {
 		return html`
       <cds-breadcrumb
-        aria-label="breadcrumbs"
+        aria-label="${this.breadcrumbAriaLabel}"
         class=${classMap({ [`${blockClass}`]: true })}
       >
         <cds-breadcrumb-item
@@ -85,7 +87,11 @@ let CDSPageHeaderBreadcrumbsSet = class CDSPageHeaderBreadcrumbsSet extends LitE
           data-offset
           style="display: ${this.hiddenItems?.length >= 1 ? "flex" : "none"}"
         >
-          <cds-overflow-menu breadcrumb="" align="bottom">
+          <cds-overflow-menu
+            breadcrumb=""
+            align="bottom"
+            aria-label="${this.overflowAriaLabel}"
+          >
             ${iconLoader(OverflowMenuHorizontal16, { slot: "icon" })}
             <span slot="tooltip-content"> Breadcrumbs </span>
             <cds-overflow-menu-body size="sm">
@@ -127,6 +133,16 @@ __decorate([property({
 	reflect: true
 })], CDSPageHeaderBreadcrumbsSet.prototype, "breadcrumbsData", void 0);
 __decorate([property({ type: String })], CDSPageHeaderBreadcrumbsSet.prototype, "title", void 0);
+__decorate([property({
+	type: String,
+	attribute: "breadcrumb-aria-label",
+	reflect: true
+})], CDSPageHeaderBreadcrumbsSet.prototype, "breadcrumbAriaLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "overflow-aria-label",
+	reflect: true
+})], CDSPageHeaderBreadcrumbsSet.prototype, "overflowAriaLabel", void 0);
 __decorate([query(`.${blockClass}`)], CDSPageHeaderBreadcrumbsSet.prototype, "container", void 0);
 CDSPageHeaderBreadcrumbsSet = __decorate([carbonElement(`c4p-page-header-breadcrumbs-set`)], CDSPageHeaderBreadcrumbsSet);
 var page_header_breadcrumbs_set_default = CDSPageHeaderBreadcrumbsSet;

package/es/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-breadcrumbs-set.js","names":["styles","customElement"],"sources":["../../../../src/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.ts"],"sourcesContent":["// cspell:words currentpage\n/**\n * @license\n *\n * Copyright IBM Corp. 2025, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es/components/breadcrumb/index.js';\nimport '@carbon/web-components/es/components/overflow-menu/index.js';\nimport { createOverflowHandler } from '../utils';\nimport OverflowMenuHorizontal16 from '@carbon/icons/es/overflow-menu--horizontal/16.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport '../../truncated-text';\nimport styles from './page-header-breadcrumbs-set.scss?lit';\nimport '../page-header-title-breadcrumb';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-breadcrumbs-set`;\n\ninterface Breadcrumb {\n  text: string;\n  href: string;\n}\n\n@customElement(`${prefix}-page-header-breadcrumbs-set`)\nexport default class CDSPageHeaderBreadcrumbsSet extends LitElement {\n  /**\n   * Hidden items that will be rendered in the overflow menu.\n   */\n  @property({ type: Array })\n  hiddenItems: Breadcrumb[] = [];\n\n  /**\n   * The list of breadcrumbs.\n   */\n  @property({ type: Array, attribute: 'breadcrumbs-data', reflect: true })\n  breadcrumbsData: Breadcrumb[] = [];\n\n  /**\n   * The page title to display in the title breadcrumb.\n   */\n  @property({ type: String })\n  title = '';\n\n  /**\n   * Container holding all breadcrumbs and the overflow menu.\n   */\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  private overflowHandler: { disconnect: () => void } | undefined;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    if (!this.container) {\n      return;\n    }\n    const sr = this.shadowRoot;\n    const breadcrumb = sr?.querySelector(\n      'cds-breadcrumb'\n    ) as HTMLElement | null;\n\n    if (breadcrumb) {\n      breadcrumb.style.display = 'block';\n\n      requestAnimationFrame(() => {\n        const ol = breadcrumb.shadowRoot?.querySelector(\n          'ol'\n        ) as HTMLElement | null;\n        if (ol) {\n          ol.style.display = 'flex';\n          ol.style.flexWrap = 'unset';\n        }\n      });\n    }\n\n    this.updateComplete.then(() => {\n      requestAnimationFrame(() => {\n        this.overflowHandler = createOverflowHandler({\n          offsetValue: 14,\n          container: this.container,\n          onChange: (visibleItems: HTMLElement[], _) => {\n            const totalItems = (this.breadcrumbsData?.length ?? 1) - 1; // Exclude last item\n            const hiddenCount = totalItems - visibleItems.length;\n            this.hiddenItems =\n              this.breadcrumbsData?.slice(0, hiddenCount) ?? [];\n          },\n        });\n      });\n    });\n    // On first render, all elements are initially visible. so hiding `this` visibility in connectedCallback\n    // The handler runs on the second render to hide specific elements as needed.\n    // The following line restores visibility after layout settles, allowing for smoother transitions.\n    setTimeout(() => {\n      this.style.visibility = 'visible';\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.overflowHandler) {\n      this.overflowHandler.disconnect();\n    }\n  }\n\n  render() {\n    return html`\n      <cds-breadcrumb\n        aria-label=\"breadcrumbs\"\n        class=${classMap({\n          [`${blockClass}`]: true,\n        })}\n      >\n        <cds-breadcrumb-item\n          data-fixed\n          data-offset\n          style=\"display: ${this.hiddenItems?.length >= 1 ? 'flex' : 'none'}\"\n        >\n          <cds-overflow-menu breadcrumb=\"\" align=\"bottom\">\n            ${iconLoader(OverflowMenuHorizontal16, {\n              slot: 'icon',\n            })}\n            <span slot=\"tooltip-content\"> Breadcrumbs </span>\n            <cds-overflow-menu-body size=\"sm\">\n              ${repeat(\n                this.hiddenItems ?? [],\n                (item) => item.href ?? item.text,\n                (item) => html`\n                  <cds-overflow-menu-item href=${item.href}>\n                    ${item.text}\n                  </cds-overflow-menu-item>\n                `\n              )}\n            </cds-overflow-menu-body>\n          </cds-overflow-menu>\n        </cds-breadcrumb-item>\n        ${repeat(\n          this.breadcrumbsData?.slice(this.hiddenItems?.length ?? 0, -1) ?? [],\n          (item) => item.href ?? item.text,\n          (item) => html`\n            <cds-breadcrumb-item>\n              <cds-breadcrumb-link href=\"${item.href}\">\n                ${item.text}\n              </cds-breadcrumb-link>\n            </cds-breadcrumb-item>\n          `\n        )}\n        <c4p-page-header-title-breadcrumb data-fixed>\n          <cds-breadcrumb-link is-currentpage=\"\">\n            <c4p-truncated-text\n              value=\"${this.title}\"\n              lines=\"1\"\n              autoalign\n            ></c4p-truncated-text>\n          </cds-breadcrumb-link>\n        </c4p-page-header-title-breadcrumb>\n      </cds-breadcrumb>\n    `;\n  }\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-breadcrumbs-set': CDSPageHeaderBreadcrumbsSet;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,aAAa;AAQJ,IAAA,8BAAA,MAAM,oCAAoC,WAAW;;;qBAKtC,EAAE;yBAME,EAAE;eAM1B;;CAUR,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,MAAM,aAAa;;CAG1B,eAAe;AACb,MAAI,CAAC,KAAK,UACR;EAGF,MAAM,aADK,KAAK,YACO,cACrB,iBACD;AAED,MAAI,YAAY;AACd,cAAW,MAAM,UAAU;AAE3B,+BAA4B;IAC1B,MAAM,KAAK,WAAW,YAAY,cAChC,KACD;AACD,QAAI,IAAI;AACN,QAAG,MAAM,UAAU;AACnB,QAAG,MAAM,WAAW;;KAEtB;;AAGJ,OAAK,eAAe,WAAW;AAC7B,+BAA4B;AAC1B,SAAK,kBAAkB,sBAAsB;KAC3C,aAAa;KACb,WAAW,KAAK;KAChB,WAAW,cAA6B,MAAM;MAE5C,MAAM,eADc,KAAK,iBAAiB,UAAU,KAAK,IACxB,aAAa;AAC9C,WAAK,cACH,KAAK,iBAAiB,MAAM,GAAG,YAAY,IAAI,EAAE;;KAEtD,CAAC;KACF;IACF;AAIF,mBAAiB;AACf,QAAK,MAAM,aAAa;IACxB;;CAGJ,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,MAAI,KAAK,gBACP,MAAK,gBAAgB,YAAY;;CAIrC,SAAS;AACP,SAAO,IAAI;;;gBAGC,SAAS,GACd,GAAG,eAAe,MACpB,CAAC,CAAC;;;;;4BAKiB,KAAK,aAAa,UAAU,IAAI,SAAS,OAAO;;;cAG9D,WAAW,0BAA0B,EACrC,MAAM,QACP,CAAC,CAAC;;;gBAGC,OACA,KAAK,eAAe,EAAE,GACrB,SAAS,KAAK,QAAQ,KAAK,OAC3B,SAAS,IAAI;iDACmB,KAAK,KAAK;sBACrC,KAAK,KAAK;;kBAGjB,CAAC;;;;UAIN,OACA,KAAK,iBAAiB,MAAM,KAAK,aAAa,UAAU,GAAG,GAAG,IAAI,EAAE,GACnE,SAAS,KAAK,QAAQ,KAAK,OAC3B,SAAS,IAAI;;2CAEmB,KAAK,KAAK;kBACnC,KAAK,KAAK;;;YAInB,CAAC;;;;uBAIa,KAAK,MAAM;;;;;;;;;;gBAShBA;;;YAtIf,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,EAAA,4BAAA,WAAA,eAAA,KAAA,EAAA;YAMzB,SAAS;CAAE,MAAM;CAAO,WAAW;CAAoB,SAAS;CAAM,CAAC,CAAA,EAAA,4BAAA,WAAA,mBAAA,KAAA,EAAA;YAMvE,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,4BAAA,WAAA,SAAA,KAAA,EAAA;YAM1B,MAAM,IAAI,aAAa,CAAA,EAAA,4BAAA,WAAA,aAAA,KAAA,EAAA;0CAvBzBC,cAAc,kCAAwC,CAAA,EAAA,4BAAA"}
+{"version":3,"file":"page-header-breadcrumbs-set.js","names":["styles","customElement"],"sources":["../../../../src/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.ts"],"sourcesContent":["// cspell:words currentpage\n/**\n * @license\n *\n * Copyright IBM Corp. 2025, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es/components/breadcrumb/index.js';\nimport '@carbon/web-components/es/components/overflow-menu/index.js';\nimport { createOverflowHandler } from '../utils';\nimport OverflowMenuHorizontal16 from '@carbon/icons/es/overflow-menu--horizontal/16.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport '../../truncated-text';\nimport styles from './page-header-breadcrumbs-set.scss?lit';\nimport '../page-header-title-breadcrumb';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-breadcrumbs-set`;\n\ninterface Breadcrumb {\n  text: string;\n  href: string;\n}\n\n@customElement(`${prefix}-page-header-breadcrumbs-set`)\nexport default class CDSPageHeaderBreadcrumbsSet extends LitElement {\n  /**\n   * Hidden items that will be rendered in the overflow menu.\n   */\n  @property({ type: Array })\n  hiddenItems: Breadcrumb[] = [];\n\n  /**\n   * The list of breadcrumbs.\n   */\n  @property({ type: Array, attribute: 'breadcrumbs-data', reflect: true })\n  breadcrumbsData: Breadcrumb[] = [];\n\n  /**\n   * The page title to display in the title breadcrumb.\n   */\n  @property({ type: String })\n  title = '';\n\n  /**\n   * Aria label for the breadcrumb navigation.\n   */\n  @property({ type: String, attribute: 'breadcrumb-aria-label', reflect: true })\n  breadcrumbAriaLabel = 'breadcrumbs';\n\n  /**\n   * Aria label for the breadcrumb overflow menu button.\n   */\n  @property({ type: String, attribute: 'overflow-aria-label', reflect: true })\n  overflowAriaLabel = 'More breadcrumbs';\n\n  /**\n   * Container holding all breadcrumbs and the overflow menu.\n   */\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  private overflowHandler: { disconnect: () => void } | undefined;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    if (!this.container) {\n      return;\n    }\n    const sr = this.shadowRoot;\n    const breadcrumb = sr?.querySelector(\n      'cds-breadcrumb'\n    ) as HTMLElement | null;\n\n    if (breadcrumb) {\n      breadcrumb.style.display = 'block';\n\n      requestAnimationFrame(() => {\n        const ol = breadcrumb.shadowRoot?.querySelector(\n          'ol'\n        ) as HTMLElement | null;\n        if (ol) {\n          ol.style.display = 'flex';\n          ol.style.flexWrap = 'unset';\n        }\n      });\n    }\n\n    this.updateComplete.then(() => {\n      requestAnimationFrame(() => {\n        this.overflowHandler = createOverflowHandler({\n          offsetValue: 14,\n          container: this.container,\n          onChange: (visibleItems: HTMLElement[], _) => {\n            const totalItems = (this.breadcrumbsData?.length ?? 1) - 1; // Exclude last item\n            const hiddenCount = totalItems - visibleItems.length;\n            this.hiddenItems =\n              this.breadcrumbsData?.slice(0, hiddenCount) ?? [];\n          },\n        });\n      });\n    });\n    // On first render, all elements are initially visible. so hiding `this` visibility in connectedCallback\n    // The handler runs on the second render to hide specific elements as needed.\n    // The following line restores visibility after layout settles, allowing for smoother transitions.\n    setTimeout(() => {\n      this.style.visibility = 'visible';\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.overflowHandler) {\n      this.overflowHandler.disconnect();\n    }\n  }\n\n  render() {\n    return html`\n      <cds-breadcrumb\n        aria-label=\"${this.breadcrumbAriaLabel}\"\n        class=${classMap({\n          [`${blockClass}`]: true,\n        })}\n      >\n        <cds-breadcrumb-item\n          data-fixed\n          data-offset\n          style=\"display: ${this.hiddenItems?.length >= 1 ? 'flex' : 'none'}\"\n        >\n          <cds-overflow-menu\n            breadcrumb=\"\"\n            align=\"bottom\"\n            aria-label=\"${this.overflowAriaLabel}\"\n          >\n            ${iconLoader(OverflowMenuHorizontal16, {\n              slot: 'icon',\n            })}\n            <span slot=\"tooltip-content\"> Breadcrumbs </span>\n            <cds-overflow-menu-body size=\"sm\">\n              ${repeat(\n                this.hiddenItems ?? [],\n                (item) => item.href ?? item.text,\n                (item) => html`\n                  <cds-overflow-menu-item href=${item.href}>\n                    ${item.text}\n                  </cds-overflow-menu-item>\n                `\n              )}\n            </cds-overflow-menu-body>\n          </cds-overflow-menu>\n        </cds-breadcrumb-item>\n        ${repeat(\n          this.breadcrumbsData?.slice(this.hiddenItems?.length ?? 0, -1) ?? [],\n          (item) => item.href ?? item.text,\n          (item) => html`\n            <cds-breadcrumb-item>\n              <cds-breadcrumb-link href=\"${item.href}\">\n                ${item.text}\n              </cds-breadcrumb-link>\n            </cds-breadcrumb-item>\n          `\n        )}\n        <c4p-page-header-title-breadcrumb data-fixed>\n          <cds-breadcrumb-link is-currentpage=\"\">\n            <c4p-truncated-text\n              value=\"${this.title}\"\n              lines=\"1\"\n              autoalign\n            ></c4p-truncated-text>\n          </cds-breadcrumb-link>\n        </c4p-page-header-title-breadcrumb>\n      </cds-breadcrumb>\n    `;\n  }\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-breadcrumbs-set': CDSPageHeaderBreadcrumbsSet;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,aAAa;AAQJ,IAAA,8BAAA,MAAM,oCAAoC,WAAW;;;qBAKtC,EAAE;yBAME,EAAE;eAM1B;6BAMc;2BAMF;;CAUpB,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,MAAM,aAAa;;CAG1B,eAAe;AACb,MAAI,CAAC,KAAK,UACR;EAGF,MAAM,aADK,KAAK,YACO,cACrB,iBACD;AAED,MAAI,YAAY;AACd,cAAW,MAAM,UAAU;AAE3B,+BAA4B;IAC1B,MAAM,KAAK,WAAW,YAAY,cAChC,KACD;AACD,QAAI,IAAI;AACN,QAAG,MAAM,UAAU;AACnB,QAAG,MAAM,WAAW;;KAEtB;;AAGJ,OAAK,eAAe,WAAW;AAC7B,+BAA4B;AAC1B,SAAK,kBAAkB,sBAAsB;KAC3C,aAAa;KACb,WAAW,KAAK;KAChB,WAAW,cAA6B,MAAM;MAE5C,MAAM,eADc,KAAK,iBAAiB,UAAU,KAAK,IACxB,aAAa;AAC9C,WAAK,cACH,KAAK,iBAAiB,MAAM,GAAG,YAAY,IAAI,EAAE;;KAEtD,CAAC;KACF;IACF;AAIF,mBAAiB;AACf,QAAK,MAAM,aAAa;IACxB;;CAGJ,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,MAAI,KAAK,gBACP,MAAK,gBAAgB,YAAY;;CAIrC,SAAS;AACP,SAAO,IAAI;;sBAEO,KAAK,oBAAoB;gBAC/B,SAAS,GACd,GAAG,eAAe,MACpB,CAAC,CAAC;;;;;4BAKiB,KAAK,aAAa,UAAU,IAAI,SAAS,OAAO;;;;;0BAKlD,KAAK,kBAAkB;;cAEnC,WAAW,0BAA0B,EACrC,MAAM,QACP,CAAC,CAAC;;;gBAGC,OACA,KAAK,eAAe,EAAE,GACrB,SAAS,KAAK,QAAQ,KAAK,OAC3B,SAAS,IAAI;iDACmB,KAAK,KAAK;sBACrC,KAAK,KAAK;;kBAGjB,CAAC;;;;UAIN,OACA,KAAK,iBAAiB,MAAM,KAAK,aAAa,UAAU,GAAG,GAAG,IAAI,EAAE,GACnE,SAAS,KAAK,QAAQ,KAAK,OAC3B,SAAS,IAAI;;2CAEmB,KAAK,KAAK;kBACnC,KAAK,KAAK;;;YAInB,CAAC;;;;uBAIa,KAAK,MAAM;;;;;;;;;;gBAShBA;;;YAtJf,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,EAAA,4BAAA,WAAA,eAAA,KAAA,EAAA;YAMzB,SAAS;CAAE,MAAM;CAAO,WAAW;CAAoB,SAAS;CAAM,CAAC,CAAA,EAAA,4BAAA,WAAA,mBAAA,KAAA,EAAA;YAMvE,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,4BAAA,WAAA,SAAA,KAAA,EAAA;YAM1B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAyB,SAAS;CAAM,CAAC,CAAA,EAAA,4BAAA,WAAA,uBAAA,KAAA,EAAA;YAM7E,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAuB,SAAS;CAAM,CAAC,CAAA,EAAA,4BAAA,WAAA,qBAAA,KAAA,EAAA;YAM3E,MAAM,IAAI,aAAa,CAAA,EAAA,4BAAA,WAAA,aAAA,KAAA,EAAA;0CAnCzBC,cAAc,kCAAwC,CAAA,EAAA,4BAAA"}