@carbon/ibm-products-web-components 0.48.0 → 0.49.0

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

@@ -13,7 +13,7 @@ import "../page-header-title-breadcrumb.js";
 import page_header_breadcrumbs_set_default$1 from "./page-header-breadcrumbs-set.scss.js";
 import { classMap } from "lit/directives/class-map.js";
 import { LitElement, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
 import '@carbon/web-components/es-custom/components/breadcrumb/index.js';
@@ -33,12 +33,19 @@ const blockClass = `c4p--page-header-breadcrumbs-set`;
 let CDSPageHeaderBreadcrumbsSet = class CDSPageHeaderBreadcrumbsSet extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.hiddenItems = [];
+		this._hiddenItems = [];
 		this.breadcrumbsData = [];
 		this.title = "";
+		this._hasBreadcrumbContent = false;
 		this.breadcrumbAriaLabel = "breadcrumbs";
 		this.overflowAriaLabel = "More breadcrumbs";
 	}
+	/**
+	* Handles slotchange for the breadcrumb-content slot.
+	*/
+	_handleBreadcrumbContentSlotChange({ target }) {
+		this._hasBreadcrumbContent = target.assignedNodes({ flatten: true }).length > 0;
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.style.visibility = "hidden";
@@ -61,9 +68,12 @@ let CDSPageHeaderBreadcrumbsSet = class CDSPageHeaderBreadcrumbsSet extends LitE
 				this.overflowHandler = createOverflowHandler({
 					offsetValue: 14,
 					container: this.container,
-					onChange: (visibleItems, _) => {
-						const hiddenCount = (this.breadcrumbsData?.length ?? 1) - 1 - visibleItems.length;
-						this.hiddenItems = this.breadcrumbsData?.slice(0, hiddenCount) ?? [];
+					onChange: (_visibleItems, hiddenItems) => {
+						const navigableItems = Array.from(this.container.children).filter((el) => !el.hasAttribute("data-fixed") && !el.hasAttribute("data-offset"));
+						this._hiddenItems = hiddenItems.map((el) => {
+							const idx = navigableItems.indexOf(el);
+							return idx !== -1 ? this.breadcrumbsData?.[idx] : void 0;
+						}).filter((item) => item !== void 0);
 					}
 				});
 			});
@@ -81,11 +91,19 @@ let CDSPageHeaderBreadcrumbsSet = class CDSPageHeaderBreadcrumbsSet extends LitE
       <cds-custom-breadcrumb
         aria-label="${this.breadcrumbAriaLabel}"
         class=${classMap({ [`${blockClass}`]: true })}
+        ?no-trailing-slash="${!this.title}"
       >
+        ${repeat(this.breadcrumbsData ?? [], (item) => item.href ?? item.text, (item) => html`
+            <cds-custom-breadcrumb-item>
+              <cds-custom-breadcrumb-link href="${item.href}">
+                ${item.text}
+              </cds-custom-breadcrumb-link>
+            </cds-custom-breadcrumb-item>
+          `)}
         <cds-custom-breadcrumb-item
           data-fixed
           data-offset
-          style="display: ${this.hiddenItems?.length >= 1 ? "flex" : "none"}"
+          style="display: ${this._hiddenItems?.length >= 1 ? "flex" : "none"}"
         >
           <cds-custom-overflow-menu
             breadcrumb=""
@@ -93,9 +111,9 @@ let CDSPageHeaderBreadcrumbsSet = class CDSPageHeaderBreadcrumbsSet extends LitE
             aria-label="${this.overflowAriaLabel}"
           >
             ${iconLoader(OverflowMenuHorizontal16, { slot: "icon" })}
-            <span slot="tooltip-content"> Breadcrumbs </span>
+            <span slot="tooltip-content">${this.overflowAriaLabel}</span>
             <cds-custom-overflow-menu-body size="sm">
-              ${repeat(this.hiddenItems ?? [], (item) => item.href ?? item.text, (item) => html`
+              ${repeat(this._hiddenItems ?? [], (item) => item.href ?? item.text, (item) => html`
                   <cds-custom-overflow-menu-item href=${item.href}>
                     ${item.text}
                   </cds-custom-overflow-menu-item>
@@ -103,20 +121,17 @@ let CDSPageHeaderBreadcrumbsSet = class CDSPageHeaderBreadcrumbsSet extends LitE
             </cds-custom-overflow-menu-body>
           </cds-custom-overflow-menu>
         </cds-custom-breadcrumb-item>
-        ${repeat(this.breadcrumbsData?.slice(this.hiddenItems?.length ?? 0, -1) ?? [], (item) => item.href ?? item.text, (item) => html`
-            <cds-custom-breadcrumb-item>
-              <cds-custom-breadcrumb-link href="${item.href}">
-                ${item.text}
-              </cds-custom-breadcrumb-link>
-            </cds-custom-breadcrumb-item>
-          `)}
         <c4p-page-header-title-breadcrumb data-fixed>
           <cds-custom-breadcrumb-link is-currentpage="">
-            <c4p-truncated-text
-              value="${this.title}"
-              lines="1"
-              autoalign
-            ></c4p-truncated-text>
+            <slot
+              name="breadcrumb-content"
+              @slotchange=${this._handleBreadcrumbContentSlotChange}
+            ></slot>
+            ${!this._hasBreadcrumbContent ? html`<c4p-truncated-text
+                  value="${this.title}"
+                  lines="1"
+                  autoalign
+                ></c4p-truncated-text>` : null}
           </cds-custom-breadcrumb-link>
         </c4p-page-header-title-breadcrumb>
       </cds-custom-breadcrumb>
@@ -126,13 +141,14 @@ let CDSPageHeaderBreadcrumbsSet = class CDSPageHeaderBreadcrumbsSet extends LitE
 		this.styles = page_header_breadcrumbs_set_default$1;
 	}
 };
-__decorate([property({ type: Array })], CDSPageHeaderBreadcrumbsSet.prototype, "hiddenItems", void 0);
+__decorate([state()], CDSPageHeaderBreadcrumbsSet.prototype, "_hiddenItems", void 0);
 __decorate([property({
 	type: Array,
 	attribute: "breadcrumbs-data",
 	reflect: true
 })], CDSPageHeaderBreadcrumbsSet.prototype, "breadcrumbsData", void 0);
 __decorate([property({ type: String })], CDSPageHeaderBreadcrumbsSet.prototype, "title", void 0);
+__decorate([state()], CDSPageHeaderBreadcrumbsSet.prototype, "_hasBreadcrumbContent", void 0);
 __decorate([property({
 	type: String,
 	attribute: "breadcrumb-aria-label",

package/es-custom/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-custom/components/breadcrumb/index.js';\nimport '@carbon/web-components/es-custom/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-custom-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-custom-breadcrumb\n        aria-label=\"${this.breadcrumbAriaLabel}\"\n        class=${classMap({\n          [`${blockClass}`]: true,\n        })}\n      >\n        <cds-custom-breadcrumb-item\n          data-fixed\n          data-offset\n          style=\"display: ${this.hiddenItems?.length >= 1 ? 'flex' : 'none'}\"\n        >\n          <cds-custom-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-custom-overflow-menu-body size=\"sm\">\n              ${repeat(\n                this.hiddenItems ?? [],\n                (item) => item.href ?? item.text,\n                (item) => html`\n                  <cds-custom-overflow-menu-item href=${item.href}>\n                    ${item.text}\n                  </cds-custom-overflow-menu-item>\n                `\n              )}\n            </cds-custom-overflow-menu-body>\n          </cds-custom-overflow-menu>\n        </cds-custom-breadcrumb-item>\n        ${repeat(\n          this.breadcrumbsData?.slice(this.hiddenItems?.length ?? 0, -1) ?? [],\n          (item) => item.href ?? item.text,\n          (item) => html`\n            <cds-custom-breadcrumb-item>\n              <cds-custom-breadcrumb-link href=\"${item.href}\">\n                ${item.text}\n              </cds-custom-breadcrumb-link>\n            </cds-custom-breadcrumb-item>\n          `\n        )}\n        <c4p-page-header-title-breadcrumb data-fixed>\n          <cds-custom-breadcrumb-link is-currentpage=\"\">\n            <c4p-truncated-text\n              value=\"${this.title}\"\n              lines=\"1\"\n              autoalign\n            ></c4p-truncated-text>\n          </cds-custom-breadcrumb-link>\n        </c4p-page-header-title-breadcrumb>\n      </cds-custom-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"}
+{"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, state } 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-custom/components/breadcrumb/index.js';\nimport '@carbon/web-components/es-custom/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   * Data items currently collapsed into the overflow menu.\n   * Derived from the DOM nodes the overflow handler marks as hidden.\n   */\n  @state()\n  private _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   * Whether custom breadcrumb-content slot content is present.\n   */\n  @state()\n  private _hasBreadcrumbContent = false;\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  /**\n   * Handles slotchange for the breadcrumb-content slot.\n   */\n  protected _handleBreadcrumbContentSlotChange({ target }: Event) {\n    this._hasBreadcrumbContent =\n      (target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  }\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-custom-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: (\n            _visibleItems: HTMLElement[],\n            hiddenItems: HTMLElement[]\n          ) => {\n            // All breadcrumb items stay in the DOM at all times — the overflow\n            // handler hides them via the data-hidden attribute (caught by CSS).\n            // Here we only need to know *which* data items are hidden so the\n            // overflow menu can list them. Map each hidden DOM node back to its\n            // breadcrumbsData entry by position among the non-fixed, non-offset\n            // children, matching the React approach where hidden DOM nodes are\n            // passed directly to the overflow menu render prop.\n            const navigableItems = Array.from(this.container.children).filter(\n              (el) =>\n                !el.hasAttribute('data-fixed') &&\n                !el.hasAttribute('data-offset')\n            ) as HTMLElement[];\n            this._hiddenItems = hiddenItems\n              .map((el) => {\n                const idx = navigableItems.indexOf(el);\n                return idx !== -1 ? this.breadcrumbsData?.[idx] : undefined;\n              })\n              .filter((item): item is Breadcrumb => item !== undefined);\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-custom-breadcrumb\n        aria-label=\"${this.breadcrumbAriaLabel}\"\n        class=${classMap({\n          [`${blockClass}`]: true,\n        })}\n        ?no-trailing-slash=\"${!this.title}\"\n      >\n        ${repeat(\n          this.breadcrumbsData ?? [],\n          (item) => item.href ?? item.text,\n          (item) => html`\n            <cds-custom-breadcrumb-item>\n              <cds-custom-breadcrumb-link href=\"${item.href}\">\n                ${item.text}\n              </cds-custom-breadcrumb-link>\n            </cds-custom-breadcrumb-item>\n          `\n        )}\n        <cds-custom-breadcrumb-item\n          data-fixed\n          data-offset\n          style=\"display: ${this._hiddenItems?.length >= 1 ? 'flex' : 'none'}\"\n        >\n          <cds-custom-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\">${this.overflowAriaLabel}</span>\n            <cds-custom-overflow-menu-body size=\"sm\">\n              ${repeat(\n                this._hiddenItems ?? [],\n                (item) => item.href ?? item.text,\n                (item) => html`\n                  <cds-custom-overflow-menu-item href=${item.href}>\n                    ${item.text}\n                  </cds-custom-overflow-menu-item>\n                `\n              )}\n            </cds-custom-overflow-menu-body>\n          </cds-custom-overflow-menu>\n        </cds-custom-breadcrumb-item>\n        <c4p-page-header-title-breadcrumb data-fixed>\n          <cds-custom-breadcrumb-link is-currentpage=\"\">\n            <slot\n              name=\"breadcrumb-content\"\n              @slotchange=${this._handleBreadcrumbContentSlotChange}\n            ></slot>\n            ${!this._hasBreadcrumbContent\n              ? html`<c4p-truncated-text\n                  value=\"${this.title}\"\n                  lines=\"1\"\n                  autoalign\n                ></c4p-truncated-text>`\n              : null}\n          </cds-custom-breadcrumb-link>\n        </c4p-page-header-title-breadcrumb>\n      </cds-custom-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;;;sBAM7B,EAAE;yBAMP,EAAE;eAM1B;+BAMwB;6BAMV;2BAMF;;;;;CAapB,mCAA6C,EAAE,UAAiB;AAC9D,OAAK,wBACF,OAA2B,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC,SAAS;;CAG1E,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,WACE,eACA,gBACG;MAQH,MAAM,iBAAiB,MAAM,KAAK,KAAK,UAAU,SAAS,CAAC,QACxD,OACC,CAAC,GAAG,aAAa,aAAa,IAC9B,CAAC,GAAG,aAAa,cAAc,CAClC;AACD,WAAK,eAAe,YACjB,KAAK,OAAO;OACX,MAAM,MAAM,eAAe,QAAQ,GAAG;AACtC,cAAO,QAAQ,KAAK,KAAK,kBAAkB,OAAO,KAAA;QAClD,CACD,QAAQ,SAA6B,SAAS,KAAA,EAAU;;KAE9D,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;8BACmB,CAAC,KAAK,MAAM;;UAEhC,OACA,KAAK,mBAAmB,EAAE,GACzB,SAAS,KAAK,QAAQ,KAAK,OAC3B,SAAS,IAAI;;2CAEmB,KAAK,KAAK;kBACnC,KAAK,KAAK;;;YAInB,CAAC;;;;4BAIkB,KAAK,cAAc,UAAU,IAAI,SAAS,OAAO;;;;;0BAKnD,KAAK,kBAAkB;;cAEnC,WAAW,0BAA0B,EACrC,MAAM,QACP,CAAC,CAAC;2CAC4B,KAAK,kBAAkB;;gBAElD,OACA,KAAK,gBAAgB,EAAE,GACtB,SAAS,KAAK,QAAQ,KAAK,OAC3B,SAAS,IAAI;iDACmB,KAAK,KAAK;sBACrC,KAAK,KAAK;;kBAGjB,CAAC;;;;;;;;4BAQY,KAAK,mCAAmC;;cAEtD,CAAC,KAAK,wBACJ,IAAI;2BACO,KAAK,MAAM;;;0CAItB,KAAK;;;;;;;gBAMHA;;;YA5Lf,OAAO,CAAA,EAAA,4BAAA,WAAA,gBAAA,KAAA,EAAA;YAMP,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,OAAO,CAAA,EAAA,4BAAA,WAAA,yBAAA,KAAA,EAAA;YAMP,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;0CA1CzBC,cAAc,kCAAwC,CAAA,EAAA,4BAAA"}

package/es-custom/components/page-header/page-header-content-text.js

@@ -9,7 +9,7 @@ import "../../globals/settings.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
 import page_header_default from "./page-header.scss.js";
 import { LitElement, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import { html as html$1, unsafeStatic } from "lit/static-html.js";
 //#region src/components/page-header/page-header-content-text.ts
@@ -30,14 +30,29 @@ let CDSPageHeaderContentText = class CDSPageHeaderContentText extends LitElement
 		super(..._args);
 		this.subtitle = "";
 		this.subtitleLevel = "h2";
+		this._hasSubtitleSlotContent = false;
+	}
+	/**
+	* Handles `slotchange` for the subtitle-content slot.
+	*/
+	_handleSubtitleSlotChange({ target }) {
+		this._hasSubtitleSlotContent = target.assignedNodes({ flatten: true }).length > 0;
 	}
 	render() {
-		const { subtitle, subtitleLevel } = this;
+		const { subtitle, subtitleLevel, _hasSubtitleSlotContent: hasSubtitleSlotContent } = this;
 		const subtitleTag = unsafeStatic(subtitleLevel);
 		return html`
-      ${subtitle && html$1`<${subtitleTag} class="${"c4p"}--page-header__content__subtitle">
-        ${subtitle}
-      </${subtitleTag}>`}
+      ${subtitle || hasSubtitleSlotContent ? html$1`<${subtitleTag} class="${"c4p"}--page-header__content__subtitle">
+            <slot
+              name="subtitle-content"
+              @slotchange=${this._handleSubtitleSlotChange}
+            ></slot>
+            ${!hasSubtitleSlotContent && subtitle ? subtitle : null}
+          </${subtitleTag}>` : html`<slot
+            name="subtitle-content"
+            @slotchange=${this._handleSubtitleSlotChange}
+            style="display:none"
+          ></slot>`}
       <slot></slot>
     `;
 	}
@@ -50,6 +65,7 @@ __decorate([property({
 	type: String,
 	attribute: "subtitle-level"
 })], CDSPageHeaderContentText.prototype, "subtitleLevel", void 0);
+__decorate([state()], CDSPageHeaderContentText.prototype, "_hasSubtitleSlotContent", void 0);
 CDSPageHeaderContentText = __decorate([carbonElement(`c4p-page-header-content-text`)], CDSPageHeaderContentText);
 var page_header_content_text_default = CDSPageHeaderContentText;
 //#endregion

package/es-custom/components/page-header/page-header-content-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-content-text.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-content-text.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 { property } from 'lit/decorators.js';\nimport { unsafeStatic, html as staticHtml } from 'lit/static-html.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './page-header.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\n/**\n * Page header Content Text.\n * @element c4p-page-header-content-text\n */\n@customElement(`${prefix}-page-header-content-text`)\nclass CDSPageHeaderContentText extends LitElement {\n  /**\n   * Subtitle text of the page-header-content\n   */\n  @property()\n  subtitle = '';\n\n  /**\n   * Heading level for the subtitle (h2-h6).\n   */\n  @property({ type: String, attribute: 'subtitle-level' })\n  subtitleLevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2';\n\n  render() {\n    const { subtitle, subtitleLevel } = this;\n    const subtitleTag = unsafeStatic(subtitleLevel);\n\n    return html`\n      ${subtitle &&\n      staticHtml`<${subtitleTag} class=\"${prefix}--page-header__content__subtitle\">\n        ${subtitle}\n      </${subtitleTag}>`}\n      <slot></slot>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderContentText;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAA,2BAAA,MACM,iCAAiC,WAAW;;;kBAKrC;uBAMuC;;CAElD,SAAS;EACP,MAAM,EAAE,UAAU,kBAAkB;EACpC,MAAM,cAAc,aAAa,cAAc;AAE/C,SAAO,IAAI;QACP,YACF,MAAU,IAAI,YAAY,UAAA,MAAiB;UACvC,SAAS;UACT,YAAY,GAAG;;;;;gBAKPA;;;YAtBf,UAAU,CAAA,EAAA,yBAAA,WAAA,YAAA,KAAA,EAAA;YAMV,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAkB,CAAC,CAAA,EAAA,yBAAA,WAAA,iBAAA,KAAA,EAAA;uCAXzDC,cAAc,+BAAqC,CAAA,EAAA,yBAAA;AA8BpD,IAAA,mCAAe"}
+{"version":3,"file":"page-header-content-text.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-content-text.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 { property, state } from 'lit/decorators.js';\nimport { unsafeStatic, html as staticHtml } from 'lit/static-html.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './page-header.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\n/**\n * Page header Content Text.\n * @element c4p-page-header-content-text\n */\n@customElement(`${prefix}-page-header-content-text`)\nclass CDSPageHeaderContentText extends LitElement {\n  /**\n   * Subtitle text of the page-header-content\n   */\n  @property()\n  subtitle = '';\n\n  /**\n   * Heading level for the subtitle (h2-h6).\n   */\n  @property({ type: String, attribute: 'subtitle-level' })\n  subtitleLevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2';\n\n  /**\n   * Whether the `subtitle-content` slot has content assigned to it.\n   */\n  @state()\n  private _hasSubtitleSlotContent = false;\n\n  /**\n   * Handles `slotchange` for the subtitle-content slot.\n   */\n  protected _handleSubtitleSlotChange({ target }: Event) {\n    this._hasSubtitleSlotContent =\n      (target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  }\n\n  render() {\n    const {\n      subtitle,\n      subtitleLevel,\n      _hasSubtitleSlotContent: hasSubtitleSlotContent,\n    } = this;\n    const subtitleTag = unsafeStatic(subtitleLevel);\n\n    const showSubtitle = subtitle || hasSubtitleSlotContent;\n\n    return html`\n      ${showSubtitle\n        ? staticHtml`<${subtitleTag} class=\"${prefix}--page-header__content__subtitle\">\n            <slot\n              name=\"subtitle-content\"\n              @slotchange=${this._handleSubtitleSlotChange}\n            ></slot>\n            ${!hasSubtitleSlotContent && subtitle ? subtitle : null}\n          </${subtitleTag}>`\n        : html`<slot\n            name=\"subtitle-content\"\n            @slotchange=${this._handleSubtitleSlotChange}\n            style=\"display:none\"\n          ></slot>`}\n      <slot></slot>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderContentText;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAA,2BAAA,MACM,iCAAiC,WAAW;;;kBAKrC;uBAMuC;iCAMhB;;;;;CAKlC,0BAAoC,EAAE,UAAiB;AACrD,OAAK,0BACF,OAA2B,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC,SAAS;;CAG1E,SAAS;EACP,MAAM,EACJ,UACA,eACA,yBAAyB,2BACvB;EACJ,MAAM,cAAc,aAAa,cAAc;AAI/C,SAAO,IAAI;QAFU,YAAY,yBAI3B,MAAU,IAAI,YAAY,UAAA,MAAiB;;;4BAGzB,KAAK,0BAA0B;;cAE7C,CAAC,0BAA0B,WAAW,WAAW,KAAK;cACtD,YAAY,KAChB,IAAI;;0BAEY,KAAK,0BAA0B;;oBAErC;;;;;gBAKFA;;;YAnDf,UAAU,CAAA,EAAA,yBAAA,WAAA,YAAA,KAAA,EAAA;YAMV,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAkB,CAAC,CAAA,EAAA,yBAAA,WAAA,iBAAA,KAAA,EAAA;YAMvD,OAAO,CAAA,EAAA,yBAAA,WAAA,2BAAA,KAAA,EAAA;uCAjBTC,cAAc,+BAAqC,CAAA,EAAA,yBAAA;AA2DpD,IAAA,mCAAe"}

package/es-custom/components/page-header/page-header-content.js

@@ -11,7 +11,7 @@ import page_header_default from "./page-header.scss.js";
 import { pageHeaderContext } from "./context.js";
 import { classMap } from "lit/directives/class-map.js";
 import { LitElement, html } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import '@carbon/web-components/es-custom/components/tooltip/index.js';
 import { consume } from "@lit/context";
@@ -33,6 +33,7 @@ let CDSPageHeaderContent = class CDSPageHeaderContent extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this._hasContextualActions = false;
+		this._hasTitleSlotContent = false;
 		this.title = "";
 		this.titleLevel = "h1";
 		this._hasEllipsisApplied = false;
@@ -42,11 +43,24 @@ let CDSPageHeaderContent = class CDSPageHeaderContent extends LitElement {
 	* Handles `slotchange` event.
 	*/
 	_handleSlotChange({ target }) {
-		this._hasContextualActions = Boolean(target.assignedNodes());
+		this._hasContextualActions = target.assignedNodes().length > 0;
 		if (this._hasContextualActions) this.setAttribute("contextual-actions", "true");
 		else this.removeAttribute("contextual-actions");
 		this.requestUpdate();
 	}
+	/**
+	* Handles `slotchange` for the title slot.
+	*/
+	_handleTitleSlotChange({ target }) {
+		this._hasTitleSlotContent = target.assignedNodes({ flatten: true }).length > 0;
+	}
+	firstUpdated() {
+		this.dispatchEvent(new CustomEvent(`c4p-page-header-content-actions-registered`, {
+			bubbles: true,
+			composed: true,
+			detail: { actionsEl: this._pageActionsEl }
+		}));
+	}
 	updated() {
 		const textContainer = this.shadowRoot?.querySelector(`.c4p--page-header__content__title`);
 		if (!textContainer || this._hasEllipsisApplied === true) return;
@@ -54,9 +68,11 @@ let CDSPageHeaderContent = class CDSPageHeaderContent extends LitElement {
 	}
 	render() {
 		const { title, withinGrid, _hasEllipsisApplied: hasEllipsisApplied, _handleSlotChange: handleSlotChange, context } = this;
-		const { contentActionsClipped } = context ?? {};
+		const { contentActionsClipped, fullWidthGrid, narrowGrid } = context ?? {};
 		const gridClasses = classMap({
 			[`cds-custom--css-grid`]: !withinGrid,
+			[`cds-custom--css-grid--full-width`]: !withinGrid && !!fullWidthGrid,
+			[`cds-custom--css-grid--narrow`]: !withinGrid && !!narrowGrid,
 			[`cds-custom--subgrid cds-custom--subgrid--wide`]: withinGrid
 		});
 		const contentActionClasses = classMap({
@@ -64,6 +80,7 @@ let CDSPageHeaderContent = class CDSPageHeaderContent extends LitElement {
 			[`c4p--page-header__content__page-actions--clipped`]: contentActionsClipped
 		});
 		const titleTag = unsafeStatic(this.titleLevel);
+		const { _hasTitleSlotContent: hasTitleSlotContent } = this;
 		return html` <div class="${gridClasses}">
       <div
         class="${"cds-custom"}--sm:col-span-4 ${"cds-custom"}--md:col-span-8 ${"cds-custom"}--lg:col-span-16 ${"cds-custom"}--css-grid-column"
@@ -72,18 +89,22 @@ let CDSPageHeaderContent = class CDSPageHeaderContent extends LitElement {
           <div class="${"c4p"}--page-header__content__start">
             <div class="${"c4p"}--page-header__content__title-container">
               <slot name="icon"></slot>
-              ${hasEllipsisApplied ? html`
-                    <cds-custom-definition-tooltip>
-                      <span slot="definition">${title}</span>
-                      ${html$1`<${titleTag} class="${"c4p"}--page-header__content__title">
+              <slot
+                name="title"
+                @slotchange=${this._handleTitleSlotChange}
+              ></slot>
+              ${!hasTitleSlotContent ? hasEllipsisApplied ? html`
+                      <cds-custom-definition-tooltip>
+                        <span slot="definition">${title}</span>
+                        ${html$1`<${titleTag} class="${"c4p"}--page-header__content__title">
+                              ${title}
+                            </${titleTag}>`}
+                      </cds-custom-definition-tooltip>
+                    ` : html$1`
+                      <${titleTag} class="${"c4p"}--page-header__content__title">
                         ${title}
-                      </${titleTag}>`}
-                    </cds-custom-definition-tooltip>
-                  ` : html$1`
-                    <${titleTag} class="${"c4p"}--page-header__content__title">
-                      ${title}
-                    </${titleTag}>
-                  `}
+                      </${titleTag}>
+                    ` : null}
             </div>
             <slot
               name="contextual-actions"
@@ -102,6 +123,7 @@ let CDSPageHeaderContent = class CDSPageHeaderContent extends LitElement {
 		this.styles = page_header_default;
 	}
 };
+__decorate([state()], CDSPageHeaderContent.prototype, "_hasTitleSlotContent", void 0);
 __decorate([property()], CDSPageHeaderContent.prototype, "title", void 0);
 __decorate([property({
 	type: String,
@@ -116,6 +138,7 @@ __decorate([consume({
 	context: pageHeaderContext,
 	subscribe: true
 })], CDSPageHeaderContent.prototype, "context", void 0);
+__decorate([query(`.c4p--page-header__content__page-actions`)], CDSPageHeaderContent.prototype, "_pageActionsEl", void 0);
 CDSPageHeaderContent = __decorate([carbonElement(`c4p-page-header-content`)], CDSPageHeaderContent);
 var page_header_content_default = CDSPageHeaderContent;
 //#endregion

package/es-custom/components/page-header/page-header-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-content.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-content.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 { property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { unsafeStatic, html as staticHtml } from 'lit/static-html.js';\nimport { prefix, carbonPrefix } from '../../globals/settings';\nimport '@carbon/web-components/es-custom/components/tooltip/index.js';\nimport styles from './page-header.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { pageHeaderContext } from './context';\n\n/**\n * Page header content.\n * @element c4p-page-header-content\n */\n@customElement(`${prefix}-page-header-content`)\nclass CDSPageHeaderContent extends LitElement {\n  /**\n   * Set to `true` if there are contextual actions\n   */\n  private _hasContextualActions = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    this._hasContextualActions = Boolean(\n      (target as HTMLSlotElement).assignedNodes()\n    );\n    if (this._hasContextualActions) {\n      this.setAttribute('contextual-actions', 'true');\n    } else {\n      this.removeAttribute('contextual-actions');\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Title text of the page-header-content\n   */\n  @property()\n  title = '';\n\n  /**\n   * Heading level for the title (h1-h6).\n   */\n  @property({ type: String, attribute: 'title-level' })\n  titleLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h1';\n\n  /**\n   * Set to `true` if the tag text has ellipsis applied\n   */\n  @state()\n  _hasEllipsisApplied = false;\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  @consume({ context: pageHeaderContext, subscribe: true })\n  context;\n\n  updated() {\n    const textContainer = this.shadowRoot?.querySelector(\n      `.${prefix}--page-header__content__title`\n    );\n\n    if (!textContainer || this._hasEllipsisApplied === true) {\n      return;\n    }\n\n    this._hasEllipsisApplied =\n      textContainer.scrollHeight > textContainer.clientHeight;\n  }\n\n  render() {\n    const {\n      title,\n      withinGrid,\n      _hasEllipsisApplied: hasEllipsisApplied,\n      _handleSlotChange: handleSlotChange,\n      context,\n    } = this;\n\n    const { contentActionsClipped } = context ?? {};\n\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__content__page-actions`]: true,\n      [`${prefix}--page-header__content__page-actions--clipped`]:\n        contentActionsClipped,\n    });\n\n    const titleTag = unsafeStatic(this.titleLevel);\n\n    return html` <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__content__title-wrapper\">\n          <div class=\"${prefix}--page-header__content__start\">\n            <div class=\"${prefix}--page-header__content__title-container\">\n              <slot name=\"icon\"></slot>\n              ${hasEllipsisApplied\n                ? html`\n                    <cds-custom-definition-tooltip>\n                      <span slot=\"definition\">${title}</span>\n                      ${staticHtml`<${titleTag} class=\"${prefix}--page-header__content__title\">\n                        ${title}\n                      </${titleTag}>`}\n                    </cds-custom-definition-tooltip>\n                  `\n                : staticHtml`\n                    <${titleTag} class=\"${prefix}--page-header__content__title\">\n                      ${title}\n                    </${titleTag}>\n                  `}\n            </div>\n            <slot\n              name=\"contextual-actions\"\n              @slotchange=${handleSlotChange}\n            ></slot>\n          </div>\n          <div class=\"${contentActionClasses}\">\n            <slot name=\"page-actions\"></slot>\n          </div>\n        </div>\n        <slot></slot>\n      </div>\n    </div>`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderContent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAA,uBAAA,MACM,6BAA6B,WAAW;;;+BAIZ;eAqBxB;oBAM8C;6BAMhC;oBAOT;;;;;CAnCb,kBAA4B,EAAE,UAAiB;AAC7C,OAAK,wBAAwB,QAC1B,OAA2B,eAAe,CAC5C;AACD,MAAI,KAAK,sBACP,MAAK,aAAa,sBAAsB,OAAO;MAE/C,MAAK,gBAAgB,qBAAqB;AAE5C,OAAK,eAAe;;CA+BtB,UAAU;EACR,MAAM,gBAAgB,KAAK,YAAY,cACrC,oCACD;AAED,MAAI,CAAC,iBAAiB,KAAK,wBAAwB,KACjD;AAGF,OAAK,sBACH,cAAc,eAAe,cAAc;;CAG/C,SAAS;EACP,MAAM,EACJ,OACA,YACA,qBAAqB,oBACrB,mBAAmB,kBACnB,YACE;EAEJ,MAAM,EAAE,0BAA0B,WAAW,EAAE;EAE/C,MAAM,cAAc,SAAS;IAC1B,kBAA8B,CAAC;IAC/B,oCAA4D;GAC9D,CAAC;EAEF,MAAM,uBAAuB,SAAS;IACnC,4CAAkD;IAClD,qDACC;GACH,CAAC;EAEF,MAAM,WAAW,aAAa,KAAK,WAAW;AAE9C,SAAO,IAAI,gBAAgB,YAAY;;uBAEb,kBAAA,MAA+B,kBAAA,MAA+B,mBAAA,MAAgC;;4BAE/F;8BACE;gCACE;;gBAEjB,qBACE,IAAI;;gDAE0B,MAAM;wBAC9B,MAAU,IAAI,SAAS,UAAA,MAAiB;0BACtC,MAAM;0BACN,SAAS,GAAG;;sBAGpB,MAAU;uBACL,SAAS,UAAA,MAAiB;wBACzB,MAAM;wBACN,SAAS;oBACb;;;;4BAIQ,iBAAiB;;;wBAGrB,qBAAqB;;;;;;;;;gBAS3BA;;;YAnGf,UAAU,CAAA,EAAA,qBAAA,WAAA,SAAA,KAAA,EAAA;YAMV,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC,CAAA,EAAA,qBAAA,WAAA,cAAA,KAAA,EAAA;YAMpD,OAAO,CAAA,EAAA,qBAAA,WAAA,uBAAA,KAAA,EAAA;YAOP,SAAS;CAAE,WAAW;CAAe,MAAM;CAAS,CAAC,CAAA,EAAA,qBAAA,WAAA,cAAA,KAAA,EAAA;YAGrD,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,WAAA,KAAA,EAAA;mCA/C1DC,cAAc,0BAAgC,CAAA,EAAA,qBAAA;AA+H/C,IAAA,8BAAe"}
+{"version":3,"file":"page-header-content.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-content.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 { property, query, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { unsafeStatic, html as staticHtml } from 'lit/static-html.js';\nimport { prefix, carbonPrefix } from '../../globals/settings';\nimport '@carbon/web-components/es-custom/components/tooltip/index.js';\nimport styles from './page-header.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { pageHeaderContext } from './context';\n\n/**\n * Page header content.\n * @element c4p-page-header-content\n */\n@customElement(`${prefix}-page-header-content`)\nclass CDSPageHeaderContent extends LitElement {\n  /**\n   * Set to `true` if there are contextual actions\n   */\n  private _hasContextualActions = false;\n\n  /**\n   * Set to `true` if there is custom title slot content\n   */\n  @state()\n  private _hasTitleSlotContent = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    this._hasContextualActions =\n      (target as HTMLSlotElement).assignedNodes().length > 0;\n    if (this._hasContextualActions) {\n      this.setAttribute('contextual-actions', 'true');\n    } else {\n      this.removeAttribute('contextual-actions');\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `slotchange` for the title slot.\n   */\n  protected _handleTitleSlotChange({ target }: Event) {\n    this._hasTitleSlotContent =\n      (target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /**\n   * Title text of the page-header-content\n   */\n  @property()\n  title = '';\n\n  /**\n   * Heading level for the title (h1-h6).\n   */\n  @property({ type: String, attribute: 'title-level' })\n  titleLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h1';\n\n  /**\n   * Set to `true` if the tag text has ellipsis applied\n   */\n  @state()\n  _hasEllipsisApplied = false;\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  @consume({ context: pageHeaderContext, subscribe: true })\n  context;\n\n  /**\n   * The page-actions wrapper element. Observed by the root for contentActionsClipped.\n   */\n  @query(`.${prefix}--page-header__content__page-actions`)\n  private _pageActionsEl!: HTMLElement;\n\n  firstUpdated() {\n    // Notify the root page-header of the page-actions container element so it\n    // can observe it with IntersectionObserver instead of the full content element.\n    this.dispatchEvent(\n      new CustomEvent(`${prefix}-page-header-content-actions-registered`, {\n        bubbles: true,\n        composed: true,\n        detail: { actionsEl: this._pageActionsEl },\n      })\n    );\n  }\n\n  updated() {\n    const textContainer = this.shadowRoot?.querySelector(\n      `.${prefix}--page-header__content__title`\n    );\n\n    if (!textContainer || this._hasEllipsisApplied === true) {\n      return;\n    }\n\n    this._hasEllipsisApplied =\n      textContainer.scrollHeight > textContainer.clientHeight;\n  }\n\n  render() {\n    const {\n      title,\n      withinGrid,\n      _hasEllipsisApplied: hasEllipsisApplied,\n      _handleSlotChange: handleSlotChange,\n      context,\n    } = this;\n\n    const { contentActionsClipped, fullWidthGrid, narrowGrid } = context ?? {};\n\n    const gridClasses = classMap({\n      [`${carbonPrefix}--css-grid`]: !withinGrid,\n      [`${carbonPrefix}--css-grid--full-width`]: !withinGrid && !!fullWidthGrid,\n      [`${carbonPrefix}--css-grid--narrow`]: !withinGrid && !!narrowGrid,\n      [`${carbonPrefix}--subgrid ${carbonPrefix}--subgrid--wide`]: withinGrid,\n    });\n\n    const contentActionClasses = classMap({\n      [`${prefix}--page-header__content__page-actions`]: true,\n      [`${prefix}--page-header__content__page-actions--clipped`]:\n        contentActionsClipped,\n    });\n\n    const titleTag = unsafeStatic(this.titleLevel);\n    const { _hasTitleSlotContent: hasTitleSlotContent } = this;\n\n    return html` <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__content__title-wrapper\">\n          <div class=\"${prefix}--page-header__content__start\">\n            <div class=\"${prefix}--page-header__content__title-container\">\n              <slot name=\"icon\"></slot>\n              <slot\n                name=\"title\"\n                @slotchange=${this._handleTitleSlotChange}\n              ></slot>\n              ${!hasTitleSlotContent\n                ? hasEllipsisApplied\n                  ? html`\n                      <cds-custom-definition-tooltip>\n                        <span slot=\"definition\">${title}</span>\n                        ${staticHtml`<${titleTag} class=\"${prefix}--page-header__content__title\">\n                              ${title}\n                            </${titleTag}>`}\n                      </cds-custom-definition-tooltip>\n                    `\n                  : staticHtml`\n                      <${titleTag} class=\"${prefix}--page-header__content__title\">\n                        ${title}\n                      </${titleTag}>\n                    `\n                : null}\n            </div>\n            <slot\n              name=\"contextual-actions\"\n              @slotchange=${handleSlotChange}\n            ></slot>\n          </div>\n          <div class=\"${contentActionClasses}\">\n            <slot name=\"page-actions\"></slot>\n          </div>\n        </div>\n        <slot></slot>\n      </div>\n    </div>`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderContent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAA,uBAAA,MACM,6BAA6B,WAAW;;;+BAIZ;8BAMD;eA4BvB;oBAM8C;6BAMhC;oBAOT;;;;;CA1Cb,kBAA4B,EAAE,UAAiB;AAC7C,OAAK,wBACF,OAA2B,eAAe,CAAC,SAAS;AACvD,MAAI,KAAK,sBACP,MAAK,aAAa,sBAAsB,OAAO;MAE/C,MAAK,gBAAgB,qBAAqB;AAE5C,OAAK,eAAe;;;;;CAMtB,uBAAiC,EAAE,UAAiB;AAClD,OAAK,uBACF,OAA2B,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC,SAAS;;CAqC1E,eAAe;AAGb,OAAK,cACH,IAAI,YAAY,8CAAoD;GAClE,SAAS;GACT,UAAU;GACV,QAAQ,EAAE,WAAW,KAAK,gBAAgB;GAC3C,CAAC,CACH;;CAGH,UAAU;EACR,MAAM,gBAAgB,KAAK,YAAY,cACrC,oCACD;AAED,MAAI,CAAC,iBAAiB,KAAK,wBAAwB,KACjD;AAGF,OAAK,sBACH,cAAc,eAAe,cAAc;;CAG/C,SAAS;EACP,MAAM,EACJ,OACA,YACA,qBAAqB,oBACrB,mBAAmB,kBACnB,YACE;EAEJ,MAAM,EAAE,uBAAuB,eAAe,eAAe,WAAW,EAAE;EAE1E,MAAM,cAAc,SAAS;IAC1B,kBAA8B,CAAC;IAC/B,8BAA0C,CAAC,cAAc,CAAC,CAAC;IAC3D,0BAAsC,CAAC,cAAc,CAAC,CAAC;IACvD,oCAA4D;GAC9D,CAAC;EAEF,MAAM,uBAAuB,SAAS;IACnC,4CAAkD;IAClD,qDACC;GACH,CAAC;EAEF,MAAM,WAAW,aAAa,KAAK,WAAW;EAC9C,MAAM,EAAE,sBAAsB,wBAAwB;AAEtD,SAAO,IAAI,gBAAgB,YAAY;;uBAEb,kBAAA,MAA+B,kBAAA,MAA+B,mBAAA,MAAgC;;4BAE/F;8BACE;gCACE;;;;8BAIH,KAAK,uBAAuB;;gBAE1C,CAAC,sBACC,qBACE,IAAI;;kDAE0B,MAAM;0BAC9B,MAAU,IAAI,SAAS,UAAA,MAAiB;gCAClC,MAAM;gCACN,SAAS,GAAG;;wBAGxB,MAAU;yBACL,SAAS,UAAA,MAAiB;0BACzB,MAAM;0BACN,SAAS;wBAEjB,KAAK;;;;4BAIK,iBAAiB;;;wBAGrB,qBAAqB;;;;;;;;;gBAS3BA;;;YA1Jf,OAAO,CAAA,EAAA,qBAAA,WAAA,wBAAA,KAAA,EAAA;YA4BP,UAAU,CAAA,EAAA,qBAAA,WAAA,SAAA,KAAA,EAAA;YAMV,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC,CAAA,EAAA,qBAAA,WAAA,cAAA,KAAA,EAAA;YAMpD,OAAO,CAAA,EAAA,qBAAA,WAAA,uBAAA,KAAA,EAAA;YAOP,SAAS;CAAE,WAAW;CAAe,MAAM;CAAS,CAAC,CAAA,EAAA,qBAAA,WAAA,cAAA,KAAA,EAAA;YAGrD,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,WAAA,KAAA,EAAA;YAMxD,MAAM,2CAAiD,CAAA,EAAA,qBAAA,WAAA,kBAAA,KAAA,EAAA;mCAlEzDC,cAAc,0BAAgC,CAAA,EAAA,qBAAA;AAuK/C,IAAA,8BAAe"}

package/es-custom/components/page-header/page-header-hero-image.js

@@ -23,6 +23,9 @@ import { carbonElement } from "@carbon/web-components/es/globals/decorators/carb
 /**
 * Page header Hero Image.
 * @element c4p-page-header-hero-image
+* @slot - Slotted content (typically an `<img>`). Slotted images must include
+*   a descriptive `alt` attribute for informative images, or `alt=""` for
+*   decorative images, to meet WCAG 2.2 SC 1.1.1 (Non-text Content).
 */
 let CDSPageHeaderHeroImage = class CDSPageHeaderHeroImage extends LitElement {
 	constructor(..._args) {

package/es-custom/components/page-header/page-header-hero-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-hero-image.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-hero-image.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 { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './page-header.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\n/**\n * Page header Hero Image.\n * @element c4p-page-header-hero-image\n */\n@customElement(`${prefix}-page-header-hero-image`)\nclass CDSPageHeaderHeroImage extends LitElement {\n  /**\n   * Specify how the image should fit within the container.\n   * - 'cover': Image fills container, may crop edges (default for hero images)\n   * - 'contain': Image fits within container, may show empty space\n   * - 'fill': Image stretches to fill container\n   * - 'none': Image uses its natural size\n   */\n  @property({ type: String, attribute: 'object-fit', reflect: true })\n  objectFit: 'cover' | 'contain' | 'fill' | 'none' = 'cover';\n\n  render() {\n    const blockClass = `${prefix}--page-header`;\n    const classes = `${blockClass}__hero-image ${blockClass}__hero-image--object-fit-${this.objectFit}`;\n\n    return html`\n      <div\n        class=\"${classes}\"\n        style=\"--object-fit: ${this.objectFit}; --object-position: center\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderHeroImage;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAA,yBAAA,MACM,+BAA+B,WAAW;;;mBASK;;CAEnD,SAAS;EACP,MAAM,aAAa;AAGnB,SAAO,IAAI;;iBAEE,GAJM,WAAW,eAAe,WAAW,2BAA2B,KAAK,YAInE;+BACM,KAAK,UAAU;;;;;;;gBAO5BA;;;YAjBf,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,SAAS;CAAM,CAAC,CAAA,EAAA,uBAAA,WAAA,aAAA,KAAA,EAAA;qCATpEC,cAAc,6BAAmC,CAAA,EAAA,uBAAA;AA6BlD,IAAA,iCAAe"}
+{"version":3,"file":"page-header-hero-image.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-hero-image.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 { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './page-header.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\n/**\n * Page header Hero Image.\n * @element c4p-page-header-hero-image\n * @slot - Slotted content (typically an `<img>`). Slotted images must include\n *   a descriptive `alt` attribute for informative images, or `alt=\"\"` for\n *   decorative images, to meet WCAG 2.2 SC 1.1.1 (Non-text Content).\n */\n@customElement(`${prefix}-page-header-hero-image`)\nclass CDSPageHeaderHeroImage extends LitElement {\n  /**\n   * Specify how the image should fit within the container.\n   * - 'cover': Image fills container, may crop edges (default for hero images)\n   * - 'contain': Image fits within container, may show empty space\n   * - 'fill': Image stretches to fill container\n   * - 'none': Image uses its natural size\n   */\n  @property({ type: String, attribute: 'object-fit', reflect: true })\n  objectFit: 'cover' | 'contain' | 'fill' | 'none' = 'cover';\n\n  render() {\n    const blockClass = `${prefix}--page-header`;\n    const classes = `${blockClass}__hero-image ${blockClass}__hero-image--object-fit-${this.objectFit}`;\n\n    return html`\n      <div\n        class=\"${classes}\"\n        style=\"--object-fit: ${this.objectFit}; --object-position: center\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderHeroImage;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,yBAAA,MACM,+BAA+B,WAAW;;;mBASK;;CAEnD,SAAS;EACP,MAAM,aAAa;AAGnB,SAAO,IAAI;;iBAEE,GAJM,WAAW,eAAe,WAAW,2BAA2B,KAAK,YAInE;+BACM,KAAK,UAAU;;;;;;;gBAO5BA;;;YAjBf,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,SAAS;CAAM,CAAC,CAAA,EAAA,uBAAA,WAAA,aAAA,KAAA,EAAA;qCATpEC,cAAc,6BAAmC,CAAA,EAAA,uBAAA;AA6BlD,IAAA,iCAAe"}

package/es-custom/components/page-header/page-header-scroller.js

@@ -7,11 +7,12 @@
 
 import "../../globals/settings.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
+import page_header_default from "./page-header.scss.js";
 import { pageHeaderContext } from "./context.js";
 import { scrollableAncestorInner } from "./utils.js";
 import { classMap } from "lit/directives/class-map.js";
 import { html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import '@carbon/web-components/es-custom/components/button/index.js';
 import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
@@ -81,7 +82,7 @@ let PageHeaderScroller = class PageHeaderScroller extends CDSButton {
 			[`c4p--page-header-scroller-collapsed`]: !!context?.fullyCollapsed,
 			[`c4p--page-header-scroller-icon`]: true
 		})}
-      aria-label=${context?.fullyCollapsed ? this.expandText : this.collapseText}
+      label=${context?.fullyCollapsed ? this.expandText : this.collapseText}
       @click=${this._handleScroller}
     >
       ${context?.fullyCollapsed ? html`${iconLoader(ChevronDown20, { slot: "icon" })}` : html`${iconLoader(Chevron20, { slot: "icon" })}`}
@@ -90,6 +91,9 @@ let PageHeaderScroller = class PageHeaderScroller extends CDSButton {
       </span>
     </cds-custom-icon-button>`;
 	}
+	static {
+		this.styles = page_header_default;
+	}
 };
 __decorate([property({
 	reflect: true,
@@ -128,7 +132,7 @@ __decorate([property({ reflect: true })], PageHeaderScroller.prototype, "size",
 __decorate([consume({
 	context: pageHeaderContext,
 	subscribe: true
-})], PageHeaderScroller.prototype, "context", void 0);
+}), state()], PageHeaderScroller.prototype, "context", void 0);
 PageHeaderScroller = __decorate([carbonElement(`c4p-page-header-scroller`)], PageHeaderScroller);
 //#endregion
 export { PageHeaderScroller };

package/es-custom/components/page-header/page-header-scroller.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-scroller.js","names":["customElement"],"sources":["../../../src/components/page-header/page-header-scroller.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 { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport Chevron20 from '@carbon/icons/es/chevron--up/20';\nimport ChevronDown20 from '@carbon/icons/es/chevron--down/20';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport '@carbon/web-components/es-custom/components/button/index.js';\nimport { pageHeaderContext } from './context';\nimport { consume } from '@lit/context';\nimport CDSButton from '@carbon/web-components/es/components/button/button';\nimport { prefix } from '../../globals/settings';\nimport { scrollableAncestorInner } from './utils';\n\n/**\n * Page header Scroller button\n * @element c4p-page-header-scroller\n */\n@customElement(`${prefix}-page-header-scroller`)\nexport class PageHeaderScroller extends CDSButton {\n  /**\n   * Specify how the trigger should align with the tooltip\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\n\n  /**\n   * Specify whether a auto align functionality should be applied\n   */\n  @property({ type: Boolean, reflect: true })\n  autoalign = true;\n\n  /**\n   * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)\n   */\n  @property({ attribute: 'close-on-activation', reflect: true, type: Boolean })\n  closeOnActivation = true;\n\n  /**\n   * Specify the collapse text for the scroller button\n   */\n  @property({ reflect: true, type: String })\n  collapseText = 'Collapse';\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, type: Boolean })\n  defaultOpen = false;\n\n  /**\n   * Specify the duration in milliseconds to delay before displaying the tooltip\n   */\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  /**\n   * Specify the expand text for the scroller button\n   */\n  @property({ reflect: true, type: String })\n  expandText = 'Expand';\n\n  /**\n   * Specify the duration in milliseconds to delay before hiding the tooltip\n   */\n  @property({ attribute: 'leave-delay-ms', type: Number })\n  leaveDelayMs = 300;\n\n  /**\n   * Specify the size of the Button. Defaults to `md`.\n   */\n  @property({ reflect: true })\n  size = 'md';\n\n  @consume({ context: pageHeaderContext, subscribe: true })\n  context;\n\n  protected _renderTooltipContent() {\n    return html`\n      <cds-custom-tooltip-content>\n        <slot name=\"tooltip-content\"></slot>\n      </cds-custom-tooltip-content>\n    `;\n  }\n\n  private _handleScroller = () => {\n    const { root, fullyCollapsed } = this.context;\n    const contentElement = root.querySelector(`${prefix}-page-header-content`);\n    if (!contentElement) {\n      return;\n    }\n    const scrollableTarget = scrollableAncestorInner(\n      contentElement\n    ) as HTMLElement;\n\n    // Page header content is not fully collapsed\n    if (!fullyCollapsed) {\n      const pageHeaderContentHeight = contentElement.offsetHeight;\n      scrollableTarget?.scrollTo({\n        top: pageHeaderContentHeight, // headerTopValue, check if breadcrumb bar is included\n        behavior: 'smooth',\n      });\n    } else {\n      // Page header content is fully collapsed\n      scrollableTarget?.scrollTo({ top: 0, behavior: 'smooth' });\n    }\n  };\n\n  render() {\n    const {\n      align,\n      closeOnActivation,\n      defaultOpen,\n      enterDelayMs,\n      leaveDelayMs,\n      disabled,\n      isSelected,\n      size,\n      context,\n      autoalign,\n    } = this;\n\n    const iconClasses = classMap({\n      [`${prefix}--page-header-scroller-collapsed`]: !!context?.fullyCollapsed,\n      [`${prefix}--page-header-scroller-icon`]: true,\n    });\n    return html`<cds-custom-icon-button\n      align=${align}\n      ?close-on-activation=${closeOnActivation}\n      ?defaultOpen=${defaultOpen}\n      ?disabled=${disabled}\n      enter-delay-ms=${enterDelayMs}\n      ?isSelected=${isSelected}\n      kind=\"ghost\"\n      leave-delay-ms=${leaveDelayMs}\n      size=${size}\n      ?autoalign=${autoalign}\n      class=${iconClasses}\n      aria-label=${context?.fullyCollapsed\n        ? this.expandText\n        : this.collapseText}\n      @click=${this._handleScroller}\n    >\n      ${context?.fullyCollapsed\n        ? html`${iconLoader(ChevronDown20, { slot: 'icon' })}`\n        : html`${iconLoader(Chevron20, { slot: 'icon' })}`}\n      <span slot=\"tooltip-content\">\n        ${context?.fullyCollapsed ? this.expandText : this.collapseText}\n      </span>\n    </cds-custom-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,IAAA,qBAAA,MAAM,2BAA2B,UAAU;;;eAKxC;mBAMI;2BAMQ;sBAML;qBAMD;sBAMC;oBAMF;sBAME;cAMR;+BAayB;GAC9B,MAAM,EAAE,MAAM,mBAAmB,KAAK;GACtC,MAAM,iBAAiB,KAAK,cAAc,0BAAgC;AAC1E,OAAI,CAAC,eACH;GAEF,MAAM,mBAAmB,wBACvB,eACD;AAGD,OAAI,CAAC,gBAAgB;IACnB,MAAM,0BAA0B,eAAe;AAC/C,sBAAkB,SAAS;KACzB,KAAK;KACL,UAAU;KACX,CAAC;SAGF,mBAAkB,SAAS;IAAE,KAAK;IAAG,UAAU;IAAU,CAAC;;;CA3B9D,wBAAkC;AAChC,SAAO,IAAI;;;;;;CA8Bb,SAAS;EACP,MAAM,EACJ,OACA,mBACA,aACA,cACA,cACA,UACA,YACA,MACA,SACA,cACE;AAMJ,SAAO,IAAI;cACD,MAAM;6BACS,kBAAkB;qBAC1B,YAAY;kBACf,SAAS;uBACJ,aAAa;oBAChB,WAAW;;uBAER,aAAa;aACvB,KAAK;mBACC,UAAU;cAdL,SAAS;IAC1B,wCAA8C,CAAC,CAAC,SAAS;IACzD,mCAAyC;GAC3C,CAYoB,CAAC;mBACP,SAAS,iBAClB,KAAK,aACL,KAAK,aAAa;eACb,KAAK,gBAAgB;;QAE5B,SAAS,iBACP,IAAI,GAAG,WAAW,eAAe,EAAE,MAAM,QAAQ,CAAC,KAClD,IAAI,GAAG,WAAW,WAAW,EAAE,MAAM,QAAQ,CAAC,GAAG;;UAEjD,SAAS,iBAAiB,KAAK,aAAa,KAAK,aAAa;;;;;YA5HrE,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,SAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,aAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,WAAW;CAAuB,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,mBAAA,WAAA,qBAAA,KAAA,EAAA;YAM5E,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,mBAAA,WAAA,eAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,WAAW;CAAkB,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;YAMvD,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,cAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,WAAW;CAAkB,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;YAMvD,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,WAAA,KAAA,EAAA;iCAxD1DA,cAAc,2BAAiC,CAAA,EAAA,mBAAA"}
+{"version":3,"file":"page-header-scroller.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-scroller.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 { html } from 'lit';\nimport styles from './page-header.scss?lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport Chevron20 from '@carbon/icons/es/chevron--up/20';\nimport ChevronDown20 from '@carbon/icons/es/chevron--down/20';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport '@carbon/web-components/es-custom/components/button/index.js';\nimport { pageHeaderContext } from './context';\nimport { consume } from '@lit/context';\nimport CDSButton from '@carbon/web-components/es/components/button/button';\nimport { prefix } from '../../globals/settings';\nimport { scrollableAncestorInner } from './utils';\n\n/**\n * Page header Scroller button\n * @element c4p-page-header-scroller\n */\n@customElement(`${prefix}-page-header-scroller`)\nexport class PageHeaderScroller extends CDSButton {\n  /**\n   * Specify how the trigger should align with the tooltip\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\n\n  /**\n   * Specify whether a auto align functionality should be applied\n   */\n  @property({ type: Boolean, reflect: true })\n  autoalign = true;\n\n  /**\n   * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)\n   */\n  @property({ attribute: 'close-on-activation', reflect: true, type: Boolean })\n  closeOnActivation = true;\n\n  /**\n   * Specify the collapse text for the scroller button\n   */\n  @property({ reflect: true, type: String })\n  collapseText = 'Collapse';\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, type: Boolean })\n  defaultOpen = false;\n\n  /**\n   * Specify the duration in milliseconds to delay before displaying the tooltip\n   */\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  /**\n   * Specify the expand text for the scroller button\n   */\n  @property({ reflect: true, type: String })\n  expandText = 'Expand';\n\n  /**\n   * Specify the duration in milliseconds to delay before hiding the tooltip\n   */\n  @property({ attribute: 'leave-delay-ms', type: Number })\n  leaveDelayMs = 300;\n\n  /**\n   * Specify the size of the Button. Defaults to `md`.\n   */\n  @property({ reflect: true })\n  size = 'md';\n\n  @consume({ context: pageHeaderContext, subscribe: true })\n  @state()\n  context;\n\n  protected _renderTooltipContent() {\n    return html`\n      <cds-custom-tooltip-content>\n        <slot name=\"tooltip-content\"></slot>\n      </cds-custom-tooltip-content>\n    `;\n  }\n\n  private _handleScroller = () => {\n    const { root, fullyCollapsed } = this.context;\n    const contentElement = root.querySelector(`${prefix}-page-header-content`);\n    if (!contentElement) {\n      return;\n    }\n    const scrollableTarget = scrollableAncestorInner(\n      contentElement\n    ) as HTMLElement;\n\n    // Page header content is not fully collapsed\n    if (!fullyCollapsed) {\n      const pageHeaderContentHeight = contentElement.offsetHeight;\n      scrollableTarget?.scrollTo({\n        top: pageHeaderContentHeight, // headerTopValue, check if breadcrumb bar is included\n        behavior: 'smooth',\n      });\n    } else {\n      // Page header content is fully collapsed\n      scrollableTarget?.scrollTo({ top: 0, behavior: 'smooth' });\n    }\n  };\n\n  render() {\n    const {\n      align,\n      closeOnActivation,\n      defaultOpen,\n      enterDelayMs,\n      leaveDelayMs,\n      disabled,\n      isSelected,\n      size,\n      context,\n      autoalign,\n    } = this;\n\n    const iconClasses = classMap({\n      [`${prefix}--page-header-scroller-collapsed`]: !!context?.fullyCollapsed,\n      [`${prefix}--page-header-scroller-icon`]: true,\n    });\n    return html`<cds-custom-icon-button\n      align=${align}\n      ?close-on-activation=${closeOnActivation}\n      ?defaultOpen=${defaultOpen}\n      ?disabled=${disabled}\n      enter-delay-ms=${enterDelayMs}\n      ?isSelected=${isSelected}\n      kind=\"ghost\"\n      leave-delay-ms=${leaveDelayMs}\n      size=${size}\n      ?autoalign=${autoalign}\n      class=${iconClasses}\n      label=${context?.fullyCollapsed ? this.expandText : this.collapseText}\n      @click=${this._handleScroller}\n    >\n      ${context?.fullyCollapsed\n        ? html`${iconLoader(ChevronDown20, { slot: 'icon' })}`\n        : html`${iconLoader(Chevron20, { slot: 'icon' })}`}\n      <span slot=\"tooltip-content\">\n        ${context?.fullyCollapsed ? this.expandText : this.collapseText}\n      </span>\n    </cds-custom-icon-button>`;\n  }\n  static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,IAAA,qBAAA,MAAM,2BAA2B,UAAU;;;eAKxC;mBAMI;2BAMQ;sBAML;qBAMD;sBAMC;oBAMF;sBAME;cAMR;+BAcyB;GAC9B,MAAM,EAAE,MAAM,mBAAmB,KAAK;GACtC,MAAM,iBAAiB,KAAK,cAAc,0BAAgC;AAC1E,OAAI,CAAC,eACH;GAEF,MAAM,mBAAmB,wBACvB,eACD;AAGD,OAAI,CAAC,gBAAgB;IACnB,MAAM,0BAA0B,eAAe;AAC/C,sBAAkB,SAAS;KACzB,KAAK;KACL,UAAU;KACX,CAAC;SAGF,mBAAkB,SAAS;IAAE,KAAK;IAAG,UAAU;IAAU,CAAC;;;CA3B9D,wBAAkC;AAChC,SAAO,IAAI;;;;;;CA8Bb,SAAS;EACP,MAAM,EACJ,OACA,mBACA,aACA,cACA,cACA,UACA,YACA,MACA,SACA,cACE;AAMJ,SAAO,IAAI;cACD,MAAM;6BACS,kBAAkB;qBAC1B,YAAY;kBACf,SAAS;uBACJ,aAAa;oBAChB,WAAW;;uBAER,aAAa;aACvB,KAAK;mBACC,UAAU;cAdL,SAAS;IAC1B,wCAA8C,CAAC,CAAC,SAAS;IACzD,mCAAyC;GAC3C,CAYoB,CAAC;cACZ,SAAS,iBAAiB,KAAK,aAAa,KAAK,aAAa;eAC7D,KAAK,gBAAgB;;QAE5B,SAAS,iBACP,IAAI,GAAG,WAAW,eAAe,EAAE,MAAM,QAAQ,CAAC,KAClD,IAAI,GAAG,WAAW,WAAW,EAAE,MAAM,QAAQ,CAAC,GAAG;;UAEjD,SAAS,iBAAiB,KAAK,aAAa,KAAK,aAAa;;;;;gBAItDA;;;YA/Hf,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,SAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,aAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,WAAW;CAAuB,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,mBAAA,WAAA,qBAAA,KAAA,EAAA;YAM5E,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,mBAAA,WAAA,eAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,WAAW;CAAkB,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;YAMvD,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,cAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,WAAW;CAAkB,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;YAMvD,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,EACxD,OAAO,CAAA,EAAA,mBAAA,WAAA,WAAA,KAAA,EAAA;iCAzDTC,cAAc,2BAAiC,CAAA,EAAA,mBAAA"}

package/es-custom/components/page-header/page-header-tabs.js

@@ -8,9 +8,12 @@
 import "../../globals/settings.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
 import page_header_default from "./page-header.scss.js";
+import { pageHeaderContext } from "./context.js";
+import { classMap } from "lit/directives/class-map.js";
 import { LitElement, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
+import { consume } from "@lit/context";
 //#region src/components/page-header/page-header-tabs.ts
 /**
 * @license
@@ -48,17 +51,24 @@ let CDSPageHeaderTabs = class CDSPageHeaderTabs extends LitElement {
 		}
 	}
 	render() {
-		return html` <div class="${"cds-custom"}--css-grid" condensed="">
-      <div
-        class="${"cds-custom"}--sm:col-span-4 ${"cds-custom"}--md:col-span-8 ${"cds-custom"}--lg:col-span-16 ${"cds-custom"}--css-grid-column"
-      >
-        <div class="${"c4p"}--page-header__tab-bar--tablist">
-          <slot></slot>
-          <slot name="tags"></slot>
+		const { fullWidthGrid, narrowGrid } = this.context ?? {};
+		return html`
+      <div class="${classMap({
+			[`cds-custom--css-grid`]: true,
+			[`cds-custom--css-grid--full-width`]: !!fullWidthGrid,
+			[`cds-custom--css-grid--narrow`]: !!narrowGrid
+		})}">
+        <div
+          class="${"cds-custom"}--sm:col-span-4 ${"cds-custom"}--md:col-span-8 ${"cds-custom"}--lg:col-span-16 ${"cds-custom"}--css-grid-column"
+        >
+          <div class="${"c4p"}--page-header__tab-bar--tablist">
+            <slot></slot>
+            <slot name="tags"></slot>
+          </div>
         </div>
+        <slot name="scroller"></slot>
       </div>
-      <slot name="scroller"></slot>
-    </div>`;
+    `;
 	}
 	static {
 		this.styles = page_header_default;
@@ -68,6 +78,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: "disable-sticky-tab-bar"
 })], CDSPageHeaderTabs.prototype, "disableStickyTabBar", void 0);
+__decorate([consume({
+	context: pageHeaderContext,
+	subscribe: true
+}), state()], CDSPageHeaderTabs.prototype, "context", void 0);
 CDSPageHeaderTabs = __decorate([carbonElement(`c4p-page-header-tabs`)], CDSPageHeaderTabs);
 var page_header_tabs_default = CDSPageHeaderTabs;
 //#endregion

package/es-custom/components/page-header/page-header-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-tabs.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-tabs.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 { property } from 'lit/decorators.js';\nimport { prefix, carbonPrefix } from '../../globals/settings';\nimport styles from './page-header.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport CDSPageHeader from './page-header';\n\n/**\n * Page header Tabs Bar.\n * @element c4p-page-header-tabs\n */\n@customElement(`${prefix}-page-header-tabs`)\nclass CDSPageHeaderTabs extends LitElement {\n  /**\n   * Disable sticky positioning for the tab bar\n   */\n  @property({ type: Boolean, attribute: 'disable-sticky-tab-bar' })\n  disableStickyTabBar = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateContext();\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('disableStickyTabBar')) {\n      this.updateContext();\n    }\n  }\n\n  private updateContext() {\n    const pageHeader = this.closest(`${prefix}-page-header`) as CDSPageHeader;\n    if (pageHeader) {\n      // Create a new object to trigger reactivity\n      pageHeader.context = {\n        ...pageHeader.context,\n        disableStickyTabBar: this.disableStickyTabBar,\n      };\n      // Force update\n      pageHeader.requestUpdate('context');\n    }\n  }\n\n  render() {\n    return html` <div class=\"${carbonPrefix}--css-grid\" condensed=\"\">\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__tab-bar--tablist\">\n          <slot></slot>\n          <slot name=\"tags\"></slot>\n        </div>\n      </div>\n      <slot name=\"scroller\"></slot>\n    </div>`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderTabs;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAA,oBAAA,MACM,0BAA0B,WAAW;;;6BAKnB;;CAEtB,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,OAAK,eAAe;;CAGtB,QAAQ,mBAAqC;AAC3C,QAAM,QAAQ,kBAAkB;AAChC,MAAI,kBAAkB,IAAI,sBAAsB,CAC9C,MAAK,eAAe;;CAIxB,gBAAwB;EACtB,MAAM,aAAa,KAAK,QAAQ,kBAAwB;AACxD,MAAI,YAAY;AAEd,cAAW,UAAU;IACnB,GAAG,WAAW;IACd,qBAAqB,KAAK;IAC3B;AAED,cAAW,cAAc,UAAU;;;CAIvC,SAAS;AACP,SAAO,IAAI,gBAAA,MAA6B;;uBAEd,kBAAA,MAA+B,kBAAA,MAA+B,mBAAA,MAAgC;;4BAE/F;;;;;;;;;gBASXA;;;YA1Cf,SAAS;CAAE,MAAM;CAAS,WAAW;CAA0B,CAAC,CAAA,EAAA,kBAAA,WAAA,uBAAA,KAAA,EAAA;gCALlEC,cAAc,uBAA6B,CAAA,EAAA,kBAAA;AAkD5C,IAAA,2BAAe"}
+{"version":3,"file":"page-header-tabs.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-tabs.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 { property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { prefix, carbonPrefix } from '../../globals/settings';\nimport styles from './page-header.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport CDSPageHeader from './page-header';\nimport { pageHeaderContext } from './context';\n\n/**\n * Page header Tabs Bar.\n * @element c4p-page-header-tabs\n */\n@customElement(`${prefix}-page-header-tabs`)\nclass CDSPageHeaderTabs extends LitElement {\n  /**\n   * Disable sticky positioning for the tab bar\n   */\n  @property({ type: Boolean, attribute: 'disable-sticky-tab-bar' })\n  disableStickyTabBar = false;\n\n  @consume({ context: pageHeaderContext, subscribe: true })\n  @state()\n  context;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateContext();\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('disableStickyTabBar')) {\n      this.updateContext();\n    }\n  }\n\n  private updateContext() {\n    const pageHeader = this.closest(`${prefix}-page-header`) as CDSPageHeader;\n    if (pageHeader) {\n      // Create a new object to trigger reactivity\n      pageHeader.context = {\n        ...pageHeader.context,\n        disableStickyTabBar: this.disableStickyTabBar,\n      };\n      // Force update\n      pageHeader.requestUpdate('context');\n    }\n  }\n\n  render() {\n    const { fullWidthGrid, narrowGrid } = this.context ?? {};\n    const gridClasses = classMap({\n      [`${carbonPrefix}--css-grid`]: true,\n      [`${carbonPrefix}--css-grid--full-width`]: !!fullWidthGrid,\n      [`${carbonPrefix}--css-grid--narrow`]: !!narrowGrid,\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__tab-bar--tablist\">\n            <slot></slot>\n            <slot name=\"tags\"></slot>\n          </div>\n        </div>\n        <slot name=\"scroller\"></slot>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderTabs;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAA,oBAAA,MACM,0BAA0B,WAAW;;;6BAKnB;;CAMtB,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,OAAK,eAAe;;CAGtB,QAAQ,mBAAqC;AAC3C,QAAM,QAAQ,kBAAkB;AAChC,MAAI,kBAAkB,IAAI,sBAAsB,CAC9C,MAAK,eAAe;;CAIxB,gBAAwB;EACtB,MAAM,aAAa,KAAK,QAAQ,kBAAwB;AACxD,MAAI,YAAY;AAEd,cAAW,UAAU;IACnB,GAAG,WAAW;IACd,qBAAqB,KAAK;IAC3B;AAED,cAAW,cAAc,UAAU;;;CAIvC,SAAS;EACP,MAAM,EAAE,eAAe,eAAe,KAAK,WAAW,EAAE;AAMxD,SAAO,IAAI;oBALS,SAAS;IAC1B,kBAA8B;IAC9B,8BAA0C,CAAC,CAAC;IAC5C,0BAAsC,CAAC,CAAC;GAC1C,CAE0B,CAAC;;yBAEA,kBAAA,MAA+B,kBAAA,MAA+B,mBAAA,MAAgC;;8BAE/F;;;;;;;;;;gBAUbA;;;YAtDf,SAAS;CAAE,MAAM;CAAS,WAAW;CAA0B,CAAC,CAAA,EAAA,kBAAA,WAAA,uBAAA,KAAA,EAAA;YAGhE,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,EACxD,OAAO,CAAA,EAAA,kBAAA,WAAA,WAAA,KAAA,EAAA;gCATTC,cAAc,uBAA6B,CAAA,EAAA,kBAAA;AA8D5C,IAAA,2BAAe"}