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

package/custom-elements.json

@@ -3317,7 +3317,22 @@
       "name": "c4p-page-header-tabs",
       "path": "./src/components/page-header/page-header-tabs.ts",
       "description": "Page header Tabs Bar.",
+      "attributes": [
+        {
+          "name": "disable-sticky-tab-bar",
+          "description": "Disable sticky positioning for the tab bar",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
       "properties": [
+        {
+          "name": "disableStickyTabBar",
+          "attribute": "disable-sticky-tab-bar",
+          "description": "Disable sticky positioning for the tab bar",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "styles",
           "default": "\"styles\""
@@ -3471,6 +3486,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "resizable",
+          "description": "Determines if the side panel is resizable",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "title",
           "description": "Sets the title text"
@@ -3582,6 +3603,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "resizable",
+          "attribute": "resizable",
+          "description": "Determines if the side panel is resizable",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "title",
           "attribute": "title",
@@ -3970,6 +3998,11 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "titleId",
+          "description": "Public getter for the title ID (used by parent tearsheet for aria-labelledby)",
+          "type": "string"
+        },
         {
           "name": "styles",
           "default": "\"styles\""
@@ -4169,6 +4202,12 @@
           "description": "In mobile screens left side influencer section won't be visible by default.\nThis prop can be toggled to open/close left panel in this case.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "influencer-panel-aria-label",
+          "description": "Optional aria-label for the influencer panel. Defaults to \"Influencer panel\".",
+          "type": "string",
+          "default": "\"Influencer panel\""
         }
       ],
       "properties": [
@@ -4191,6 +4230,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "influencerPanelAriaLabel",
+          "attribute": "influencer-panel-aria-label",
+          "description": "Optional aria-label for the influencer panel. Defaults to \"Influencer panel\".",
+          "type": "string",
+          "default": "\"Influencer panel\""
+        },
         {
           "name": "enabledWarnings",
           "description": "Read or set all the enabled warning categories for this class.\n\nThis property is only used in development builds.",
@@ -4541,6 +4587,12 @@
           "description": "In mobile screens right side summary-content section won't be visible by default.\nThis prop can be toggled to open/close right panel in this case.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "summary-panel-aria-label",
+          "description": "Optional aria-label for the summary panel. Defaults to \"Summary panel\".",
+          "type": "string",
+          "default": "\"Summary panel\""
         }
       ],
       "properties": [
@@ -4563,6 +4615,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "summaryPanelAriaLabel",
+          "attribute": "summary-panel-aria-label",
+          "description": "Optional aria-label for the summary panel. Defaults to \"Summary panel\".",
+          "type": "string",
+          "default": "\"Summary panel\""
+        },
         {
           "name": "enabledWarnings",
           "description": "Read or set all the enabled warning categories for this class.\n\nThis property is only used in development builds.",
@@ -4765,6 +4824,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "launcherButtonRef",
+          "description": "Optional ref to the trigger button that opened the tearsheet. Focus will return here when tearsheet closes.",
+          "type": "HTMLElement | undefined"
+        },
         {
           "name": "enabledWarnings",
           "description": "Read or set all the enabled warning categories for this class.\n\nThis property is only used in development builds.",

package/es/components/coachmark/coachmark-body.d.ts

@@ -20,7 +20,7 @@ declare const CDSCoachmarkBody_base: {
             };
         };
     };
-} & typeof LitElement;
+} & typeof LitElement & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
 /**
  * coachmark-body for content body
  * @element c4p-coachmark-body

package/es/components/coachmark/coachmark-header.d.ts

@@ -21,7 +21,7 @@ declare const CDSCoachmarkHeader_base: {
             };
         };
     };
-} & typeof LitElement;
+} & typeof LitElement & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
 /**
  * coachmark-header for content header section
  * @element c4p-coachmark-header

package/es/components/coachmark/coachmark.d.ts

@@ -22,7 +22,7 @@ declare const CDSCoachmark_base: {
             };
         };
     };
-} & typeof LitElement;
+} & typeof LitElement & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
 /**
  * coachmark main component
  * @element c4p-coachmark

package/es/components/interstitial-screen/interstitial-screen-body-item.js

@@ -7,8 +7,8 @@
 
 import "../../globals/settings.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
-import { interstitialDetailsSignal, updateInterstitialDetailsSignal } from "./interstitial-screen-context.js";
 import { registerFocusableContainers } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
+import { interstitialDetailsSignal, updateInterstitialDetailsSignal } from "./interstitial-screen-context.js";
 import interstitial_screen_body_item_default$1 from "./interstitial-screen-body-item.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";

package/es/components/interstitial-screen/interstitial-screen-body.d.ts

@@ -21,7 +21,7 @@ declare const CDSInterstitialScreenBody_base: {
             };
         };
     };
-} & typeof LitElement;
+} & typeof LitElement & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
 /**
  * interstitial-screen-body for body section
  * @element c4p-interstitial-screen-body

package/es/components/interstitial-screen/interstitial-screen-footer.d.ts

@@ -25,7 +25,7 @@ declare const CDSInterstitialScreenFooter_base: {
             };
         };
     };
-} & typeof CDSModalFooter;
+} & typeof CDSModalFooter & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
 /**
  * interstitial-screen-footer for footer section
  * @element c4p-interstitial-screen-footer

package/es/components/interstitial-screen/interstitial-screen-footer.js

@@ -8,8 +8,8 @@
 import "../../globals/settings.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
 import "../action-set/index.js";
-import { interstitialDetailsSignal } from "./interstitial-screen-context.js";
 import { registerFocusableContainers } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
+import { interstitialDetailsSignal } from "./interstitial-screen-context.js";
 import interstitial_screen_footer_default$1 from "./interstitial-screen-footer.scss.js";
 import { html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";

package/es/components/interstitial-screen/interstitial-screen-header.d.ts

@@ -21,7 +21,7 @@ declare const CDSInterstitialScreenHeader_base: {
             };
         };
     };
-} & typeof LitElement;
+} & typeof LitElement & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
 /**
  * interstitial-screen-header for header section
  * @element c4p-interstitial-screen-header

package/es/components/interstitial-screen/interstitial-screen-header.js

@@ -7,8 +7,8 @@
 
 import "../../globals/settings.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
-import { interstitialDetailsSignal } from "./interstitial-screen-context.js";
 import { registerFocusableContainers } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
+import { interstitialDetailsSignal } from "./interstitial-screen-context.js";
 import interstitial_screen_header_default$1 from "./interstitial-screen-header.scss.js";
 import { LitElement, html, nothing } from "lit";
 import { property } from "lit/decorators.js";

package/es/components/interstitial-screen/interstitial-screen.d.ts

@@ -28,7 +28,7 @@ declare const CDSInterstitialScreen_base: {
             };
         };
     };
-} & typeof LitElement;
+} & typeof LitElement & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
 /**
  * interstitial-screen main component
  * @element c4p-interstitial-screen

package/es/components/interstitial-screen/interstitial-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interstitial-screen.d.ts","sourceRoot":"","sources":["../../../src/components/interstitial-screen/interstitial-screen.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,qDAAqD,CAAC;AAc7D,eAAO,MAAM,UAAU,6BAAmC,CAAC;AAE3D,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;;;;;;;;;;uBAhBU,CAAC;;;;;AAiBb;;;;;;;;;GASG;AAEH,cACM,qBAAsB,SAAQ,0BAEnC;IACC;;;OAGG;IAGH,YAAY,EAAE,OAAO,CAAS;IAC9B;;OAEG;IAEH,IAAI,EAAE,OAAO,CAAS;IAGtB,WAAW,EAAE,KAAK,CAAC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAM;IAC9D;;OAEG;IACsB,SAAS,EAAG,WAAW,CAAC;IAEjD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAwC;IAE7D,iBAAiB;IAIjB,oBAAoB,IAAI,IAAI;IAK5B,YAAY;IAUZ,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAyB5D,OAAO,CAAC,uBAAuB,CA2B7B;IAEF;;;;OAIG;IAGH,OAAO,CAAC,mBAAmB,CASzB;IAEF,OAAO,CAAC,uBAAuB,CAE7B;IAEF,YAAY,CAAC,CAAC,KAAA;IA2Cd,gBAAgB;IAUhB,WAAW;IAkBX,MAAM;IAQN,MAAM,CAAC,MAAM,MAAU;IAEvB,MAAM,KAAK,yBAAyB,WAEnC;IACD;;;;OAIG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;CACF;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"interstitial-screen.d.ts","sourceRoot":"","sources":["../../../src/components/interstitial-screen/interstitial-screen.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,qDAAqD,CAAC;AAiB7D,eAAO,MAAM,UAAU,6BAAmC,CAAC;AAE3D,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;;;;;;;;;;uBAnBU,CAAC;;;;;AAoBb;;;;;;;;;GASG;AAEH,cACM,qBAAsB,SAAQ,0BAEnC;IACC;;;OAGG;IAGH,YAAY,EAAE,OAAO,CAAS;IAC9B;;OAEG;IAEH,IAAI,EAAE,OAAO,CAAS;IAGtB,WAAW,EAAE,KAAK,CAAC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAM;IAC9D;;OAEG;IACsB,SAAS,EAAG,WAAW,CAAC;IAEjD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAwC;IAE7D,iBAAiB;IAIjB,oBAAoB,IAAI,IAAI;IAM5B,YAAY;IAUZ,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAyB5D,OAAO,CAAC,uBAAuB,CA2B7B;IAEF;;;;OAIG;IAGH,OAAO,CAAC,mBAAmB,CASzB;IAEF,OAAO,CAAC,uBAAuB,CAE7B;IAEF,YAAY,CAAC,CAAC,KAAA;IA2Cd,gBAAgB;IAUhB,WAAW;IAkBX,MAAM;IAQN,MAAM,CAAC,MAAM,MAAU;IAEvB,MAAM,KAAK,yBAAyB,WAEnC;IACD;;;;OAIG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;CACF;AAED,eAAe,qBAAqB,CAAC"}

package/es/components/interstitial-screen/interstitial-screen.js

@@ -7,9 +7,9 @@
 
 import "../../globals/settings.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
+import { clearFocusableContainers, trapFocus } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
 import interstitial_screen_default$1 from "./interstitial-screen.scss.js";
 import { interstitialDetailsSignal, resetInterstitialDetailsSignal, updateInterstitialDetailsSignal } from "./interstitial-screen-context.js";
-import { trapFocus } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
 import { LitElement, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-listener.js";
@@ -84,6 +84,7 @@ let CDSInterstitialScreen = class CDSInterstitialScreen extends SignalWatcher(Ho
 		const { carouselAPI } = interstitialDetailsSignal.get();
 		carouselAPI?.destroyEvents?.();
 		this._trapFocusAPI?.cleanup();
+		clearFocusableContainers();
 	}
 	firstUpdated() {
 		this.requestUpdate();

package/es/components/interstitial-screen/interstitial-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"interstitial-screen.js","names":["styles","customElement"],"sources":["../../../src/components/interstitial-screen/interstitial-screen.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 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, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { carbonPrefix, prefix } from '../../globals/settings';\nimport '@carbon/web-components/es/components/modal/index.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nimport styles from './interstitial-screen.scss?lit';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport {\n  interstitialDetailsSignal,\n  resetInterstitialDetailsSignal,\n  updateInterstitialDetailsSignal,\n} from './interstitial-screen-context';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener';\nimport { trapFocus } from '../../utilities/manageFocusTrap/manageFocusTrap';\n\nexport const blockClass = `${prefix}--interstitial-screen`;\n\nexport type disableButtonConfigType = {\n  skip?: boolean;\n  back?: boolean;\n  next?: boolean;\n  start?: boolean;\n};\n/**\n * interstitial-screen main component\n * @element c4p-interstitial-screen\n * @fires c4p-interstitial-opened -  The custom event triggered after loading the component.\n * Its event.detail will provide you with carousal api methods for step navigation and method to disable any action button\n * * @fires c4p-interstitial-beingclosed - The name of the custom event fired before interstitial is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing the interstitial.\n * @fires c4p-interstitial-closed - The name of the custom event fired after this tearsheet is closed upon a user gesture.\n\n */\n\n@customElement(`${prefix}-interstitial-screen`)\nclass CDSInterstitialScreen extends SignalWatcher(\n  HostListenerMixin(LitElement)\n) {\n  /**\n   * Specifies whether the component is shown as a full-screen\n   * experience, else it is shown as a modal by default.\n   */\n\n  @property({ type: Boolean, reflect: true, attribute: 'fullscreen' })\n  isFullScreen: boolean = false;\n  /**\n   * Specifies whether the component is currently open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  @state()\n  stepDetails: Array<{ stepTitle: string; name?: string }> = [];\n  /**\n   * @ignore\n   */\n  @query('cds-modal-body') modalBody!: HTMLElement;\n\n  private _wasOpen = false;\n  private _trapFocusAPI: { cleanup: () => void } | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(`${prefix}-request-close`, this._handleClose);\n  }\n  disconnectedCallback(): void {\n    const { carouselAPI } = interstitialDetailsSignal.get();\n    carouselAPI?.destroyEvents?.();\n    this._trapFocusAPI?.cleanup();\n  }\n  firstUpdated() {\n    this.requestUpdate(); // Ensure re-render\n    resetInterstitialDetailsSignal();\n\n    updateInterstitialDetailsSignal({\n      name: 'isFullScreen',\n      detail: this.isFullScreen,\n    });\n  }\n\n  updated(changedProps: Map<string | number | symbol, unknown>) {\n    if (changedProps.has('open')) {\n      const wasOpen = this._wasOpen;\n      const isOpen = this.open;\n\n      // Update the signal with the open state\n      updateInterstitialDetailsSignal({\n        name: 'open',\n        detail: isOpen,\n      });\n\n      if (!wasOpen && isOpen) {\n        this.dispatchInItializeEvent();\n        // `focusableContainers` holds the containers where we can query DOM elements.\n        // Our strategy here is to let child/slotted components register their containers,\n        // which are then passed to `trapFocus`. This allows the utility to query elements\n        // directly without being blocked by shadow DOM boundaries.\n\n        this._trapFocusAPI = trapFocus();\n      }\n\n      this._wasOpen = isOpen;\n    }\n  }\n\n  private dispatchInItializeEvent = () => {\n    setTimeout(() => {\n      const { carouselAPI } = interstitialDetailsSignal.get();\n      this.dispatchEvent(\n        new CustomEvent(\n          (\n            this.constructor as typeof CDSInterstitialScreen\n          ).eventOnInterstitialOpened,\n          {\n            bubbles: true,\n            cancelable: true,\n            composed: true,\n            detail: {\n              carouselAPI: carouselAPI\n                ? {\n                    next: carouselAPI.next,\n                    prev: carouselAPI.prev,\n                    reset: carouselAPI.reset,\n                    gotToStep: carouselAPI.goToIndex,\n                  }\n                : undefined,\n              setDisableActionButtons: this.setDisableActionButtons,\n            },\n          }\n        )\n      );\n    });\n  };\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleOutsideClick = (event: MouseEvent) => {\n    const modal = this.shadowRoot?.querySelector(`${carbonPrefix}-modal`);\n    const modalContent = modal?.shadowRoot?.querySelector(\n      `.${carbonPrefix}--modal-container`\n    );\n    const path = event.composedPath();\n    if (modalContent && !path.includes(modalContent)) {\n      this._handleClose(event);\n    }\n  };\n\n  private setDisableActionButtons = (config: disableButtonConfigType) => {\n    updateInterstitialDetailsSignal({ name: 'disableActions', detail: config });\n  };\n\n  _handleClose(e) {\n    this.open = false;\n    e.stopPropagation();\n\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        triggeredBy: e.detail.triggeredBy,\n      },\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSInterstitialScreen).eventBeforeClose,\n          init\n        )\n      )\n    ) {\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSInterstitialScreen).eventClose,\n          init\n        )\n      );\n\n      // Reset carousel and step after close event is dispatched\n      const { carouselAPI } = interstitialDetailsSignal.get();\n      if (carouselAPI) {\n        carouselAPI.reset();\n      }\n\n      // Reset the current step to 0\n      updateInterstitialDetailsSignal({\n        name: 'currentStep',\n        detail: 0,\n      });\n    }\n  }\n\n  //template methods\n\n  renderFullScreen() {\n    return html`\n      <div class=\"${blockClass}--container\">\n        <slot name=\"header\"></slot>\n        <slot name=\"body\"></slot>\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n  renderModal() {\n    return html`<cds-modal\n      key=${this.open}\n      ?prevent-close-on-click-outside=\"true\"\n      class=${blockClass}\n      size=\"lg\"\n      ?open=\"${this.open}\"\n    >\n      <slot name=\"header\"></slot>\n      <cds-modal-body class=\"${blockClass}__body-container\">\n        <slot name=\"body\"></slot>\n      </cds-modal-body>\n      <cds-modal-footer>\n        <slot name=\"footer\"></slot>\n      </cds-modal-footer>\n    </cds-modal>`;\n  }\n\n  render() {\n    return this.open\n      ? this.isFullScreen\n        ? html`${this.renderFullScreen()}`\n        : html`${this.renderModal()}`\n      : nothing;\n  }\n\n  static styles = styles;\n\n  static get eventOnInterstitialOpened() {\n    return `${prefix}-interstitial-opened`;\n  }\n  /**\n   \n   * The name of the custom event fired before interstitial is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing the interstitial.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-interstitial-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this tearsheet is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-interstitial-closed`;\n  }\n}\n\nexport default CDSInterstitialScreen;\n"],"mappings":"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"}
+{"version":3,"file":"interstitial-screen.js","names":["styles","customElement"],"sources":["../../../src/components/interstitial-screen/interstitial-screen.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 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, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { carbonPrefix, prefix } from '../../globals/settings';\nimport '@carbon/web-components/es/components/modal/index.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nimport styles from './interstitial-screen.scss?lit';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport {\n  interstitialDetailsSignal,\n  resetInterstitialDetailsSignal,\n  updateInterstitialDetailsSignal,\n} from './interstitial-screen-context';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener';\nimport {\n  trapFocus,\n  clearFocusableContainers,\n} from '../../utilities/manageFocusTrap/manageFocusTrap';\n\nexport const blockClass = `${prefix}--interstitial-screen`;\n\nexport type disableButtonConfigType = {\n  skip?: boolean;\n  back?: boolean;\n  next?: boolean;\n  start?: boolean;\n};\n/**\n * interstitial-screen main component\n * @element c4p-interstitial-screen\n * @fires c4p-interstitial-opened -  The custom event triggered after loading the component.\n * Its event.detail will provide you with carousal api methods for step navigation and method to disable any action button\n * * @fires c4p-interstitial-beingclosed - The name of the custom event fired before interstitial is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing the interstitial.\n * @fires c4p-interstitial-closed - The name of the custom event fired after this tearsheet is closed upon a user gesture.\n\n */\n\n@customElement(`${prefix}-interstitial-screen`)\nclass CDSInterstitialScreen extends SignalWatcher(\n  HostListenerMixin(LitElement)\n) {\n  /**\n   * Specifies whether the component is shown as a full-screen\n   * experience, else it is shown as a modal by default.\n   */\n\n  @property({ type: Boolean, reflect: true, attribute: 'fullscreen' })\n  isFullScreen: boolean = false;\n  /**\n   * Specifies whether the component is currently open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  @state()\n  stepDetails: Array<{ stepTitle: string; name?: string }> = [];\n  /**\n   * @ignore\n   */\n  @query('cds-modal-body') modalBody!: HTMLElement;\n\n  private _wasOpen = false;\n  private _trapFocusAPI: { cleanup: () => void } | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(`${prefix}-request-close`, this._handleClose);\n  }\n  disconnectedCallback(): void {\n    const { carouselAPI } = interstitialDetailsSignal.get();\n    carouselAPI?.destroyEvents?.();\n    this._trapFocusAPI?.cleanup();\n    clearFocusableContainers();\n  }\n  firstUpdated() {\n    this.requestUpdate(); // Ensure re-render\n    resetInterstitialDetailsSignal();\n\n    updateInterstitialDetailsSignal({\n      name: 'isFullScreen',\n      detail: this.isFullScreen,\n    });\n  }\n\n  updated(changedProps: Map<string | number | symbol, unknown>) {\n    if (changedProps.has('open')) {\n      const wasOpen = this._wasOpen;\n      const isOpen = this.open;\n\n      // Update the signal with the open state\n      updateInterstitialDetailsSignal({\n        name: 'open',\n        detail: isOpen,\n      });\n\n      if (!wasOpen && isOpen) {\n        this.dispatchInItializeEvent();\n        // `focusableContainers` holds the containers where we can query DOM elements.\n        // Our strategy here is to let child/slotted components register their containers,\n        // which are then passed to `trapFocus`. This allows the utility to query elements\n        // directly without being blocked by shadow DOM boundaries.\n\n        this._trapFocusAPI = trapFocus();\n      }\n\n      this._wasOpen = isOpen;\n    }\n  }\n\n  private dispatchInItializeEvent = () => {\n    setTimeout(() => {\n      const { carouselAPI } = interstitialDetailsSignal.get();\n      this.dispatchEvent(\n        new CustomEvent(\n          (\n            this.constructor as typeof CDSInterstitialScreen\n          ).eventOnInterstitialOpened,\n          {\n            bubbles: true,\n            cancelable: true,\n            composed: true,\n            detail: {\n              carouselAPI: carouselAPI\n                ? {\n                    next: carouselAPI.next,\n                    prev: carouselAPI.prev,\n                    reset: carouselAPI.reset,\n                    gotToStep: carouselAPI.goToIndex,\n                  }\n                : undefined,\n              setDisableActionButtons: this.setDisableActionButtons,\n            },\n          }\n        )\n      );\n    });\n  };\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleOutsideClick = (event: MouseEvent) => {\n    const modal = this.shadowRoot?.querySelector(`${carbonPrefix}-modal`);\n    const modalContent = modal?.shadowRoot?.querySelector(\n      `.${carbonPrefix}--modal-container`\n    );\n    const path = event.composedPath();\n    if (modalContent && !path.includes(modalContent)) {\n      this._handleClose(event);\n    }\n  };\n\n  private setDisableActionButtons = (config: disableButtonConfigType) => {\n    updateInterstitialDetailsSignal({ name: 'disableActions', detail: config });\n  };\n\n  _handleClose(e) {\n    this.open = false;\n    e.stopPropagation();\n\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        triggeredBy: e.detail.triggeredBy,\n      },\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSInterstitialScreen).eventBeforeClose,\n          init\n        )\n      )\n    ) {\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSInterstitialScreen).eventClose,\n          init\n        )\n      );\n\n      // Reset carousel and step after close event is dispatched\n      const { carouselAPI } = interstitialDetailsSignal.get();\n      if (carouselAPI) {\n        carouselAPI.reset();\n      }\n\n      // Reset the current step to 0\n      updateInterstitialDetailsSignal({\n        name: 'currentStep',\n        detail: 0,\n      });\n    }\n  }\n\n  //template methods\n\n  renderFullScreen() {\n    return html`\n      <div class=\"${blockClass}--container\">\n        <slot name=\"header\"></slot>\n        <slot name=\"body\"></slot>\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n  renderModal() {\n    return html`<cds-modal\n      key=${this.open}\n      ?prevent-close-on-click-outside=\"true\"\n      class=${blockClass}\n      size=\"lg\"\n      ?open=\"${this.open}\"\n    >\n      <slot name=\"header\"></slot>\n      <cds-modal-body class=\"${blockClass}__body-container\">\n        <slot name=\"body\"></slot>\n      </cds-modal-body>\n      <cds-modal-footer>\n        <slot name=\"footer\"></slot>\n      </cds-modal-footer>\n    </cds-modal>`;\n  }\n\n  render() {\n    return this.open\n      ? this.isFullScreen\n        ? html`${this.renderFullScreen()}`\n        : html`${this.renderModal()}`\n      : nothing;\n  }\n\n  static styles = styles;\n\n  static get eventOnInterstitialOpened() {\n    return `${prefix}-interstitial-opened`;\n  }\n  /**\n   \n   * The name of the custom event fired before interstitial is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing the interstitial.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-interstitial-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this tearsheet is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-interstitial-closed`;\n  }\n}\n\nexport default CDSInterstitialScreen;\n"],"mappings":"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"}

package/es/components/page-header/context.d.ts

@@ -12,5 +12,6 @@ export declare const pageHeaderContext: import("@lit/context").Context<{
     fullyCollapsed: boolean;
     root: null;
     titleClipped: boolean;
+    disableStickyTabBar: boolean;
 }, unknown>;
 //# sourceMappingURL=context.d.ts.map

package/es/components/page-header/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/context.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,iBAAiB;;;;;;WAM5B,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/context.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,iBAAiB;;;;;;;WAO5B,CAAC"}

package/es/components/page-header/context.js

@@ -20,7 +20,8 @@ const pageHeaderContext = createContext({
 	breadcrumbOffset: 0,
 	fullyCollapsed: false,
 	root: null,
-	titleClipped: false
+	titleClipped: false,
+	disableStickyTabBar: false
 });
 //#endregion
 export { pageHeaderContext };

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/page-header/context.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 { createContext } from '@lit/context';\n\nexport const pageHeaderContext = createContext({\n  headerOffset: 0,\n  breadcrumbOffset: 0,\n  fullyCollapsed: false,\n  root: null,\n  titleClipped: false,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAWA,MAAa,oBAAoB,cAAc;CAC7C,cAAc;CACd,kBAAkB;CAClB,gBAAgB;CAChB,MAAM;CACN,cAAc;CACf,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/page-header/context.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 { createContext } from '@lit/context';\n\nexport const pageHeaderContext = createContext({\n  headerOffset: 0,\n  breadcrumbOffset: 0,\n  fullyCollapsed: false,\n  root: null,\n  titleClipped: false,\n  disableStickyTabBar: false,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAWA,MAAa,oBAAoB,cAAc;CAC7C,cAAc;CACd,kBAAkB;CAClB,gBAAgB;CAChB,MAAM;CACN,cAAc;CACd,qBAAqB;CACtB,CAAC"}

package/es/components/page-header/page-header-breadcrumb.d.ts

@@ -30,6 +30,9 @@ declare class CDSPageHeaderBreadcrumb extends LitElement {
      */
     contentActionsFlush: boolean;
     context: any;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    private updateFixedClass;
     render(): import("lit-html").TemplateResult<1>;
     static styles: any;
 }

package/es/components/page-header/page-header-breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/page-header-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC;;;GAGG;AACH,cACM,uBAAwB,SAAQ,UAAU;IAC9C;;OAEG;IAEH,MAAM,UAAQ;IAEd;;;OAGG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,mBAAmB,UAAS;IAG5B,OAAO,MAAC;IAER,MAAM;IAqCN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"page-header-breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/page-header-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC;;;GAGG;AACH,cACM,uBAAwB,SAAQ,UAAU;IAC9C;;OAEG;IAEH,MAAM,UAAQ;IAEd;;;OAGG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,mBAAmB,UAAS;IAI5B,OAAO,MAAC;IAER,iBAAiB;IAMjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAO3C,OAAO,CAAC,gBAAgB;IAQxB,MAAM;IAqCN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,uBAAuB,CAAC"}

package/es/components/page-header/page-header-breadcrumb.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 } 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-breadcrumb.ts
@@ -35,6 +35,18 @@ let CDSPageHeaderBreadcrumb = class CDSPageHeaderBreadcrumb extends LitElement {
 		this.pageActionsFlush = false;
 		this.contentActionsFlush = false;
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.updateFixedClass();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("context")) this.updateFixedClass();
+	}
+	updateFixedClass() {
+		if (this.context?.disableStickyTabBar) this.classList.add(`c4p--page-header-breadcrumb--fixed`);
+		else this.classList.remove(`c4p--page-header-breadcrumb--fixed`);
+	}
 	render() {
 		const { withinGrid, context } = this;
 		const { contentActionsClipped } = context ?? {};
@@ -69,7 +81,10 @@ let CDSPageHeaderBreadcrumb = class CDSPageHeaderBreadcrumb extends LitElement {
 		this.styles = page_header_default;
 	}
 };
-__decorate([property({ reflect: true })], CDSPageHeaderBreadcrumb.prototype, "border", void 0);
+__decorate([property({
+	reflect: true,
+	type: Boolean
+})], CDSPageHeaderBreadcrumb.prototype, "border", void 0);
 __decorate([property({
 	attribute: "within-grid",
 	type: Boolean
@@ -85,7 +100,7 @@ __decorate([property({
 __decorate([consume({
 	context: pageHeaderContext,
 	subscribe: true
-})], CDSPageHeaderBreadcrumb.prototype, "context", void 0);
+}), state()], CDSPageHeaderBreadcrumb.prototype, "context", void 0);
 CDSPageHeaderBreadcrumb = __decorate([carbonElement(`c4p-page-header-breadcrumb`)], CDSPageHeaderBreadcrumb);
 var page_header_breadcrumb_default = CDSPageHeaderBreadcrumb;
 //#endregion

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 } 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 })\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  context;\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;;CAKtB,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;;;YA9Df,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,wBAAA,WAAA,UAAA,KAAA,EAAA;YAO3B,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,CAAA,EAAA,wBAAA,WAAA,WAAA,KAAA,EAAA;sCA3B1DC,cAAc,6BAAmC,CAAA,EAAA,wBAAA;AAsElD,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  @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"}

package/es/components/page-header/page-header-tabs.d.ts

@@ -12,6 +12,13 @@ import { LitElement } from 'lit';
  * @element c4p-page-header-tabs
  */
 declare class CDSPageHeaderTabs extends LitElement {
+    /**
+     * Disable sticky positioning for the tab bar
+     */
+    disableStickyTabBar: boolean;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    private updateContext;
     render(): import("lit-html").TemplateResult<1>;
     static styles: any;
 }

package/es/components/page-header/page-header-tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-tabs.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/page-header-tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;GAGG;AACH,cACM,iBAAkB,SAAQ,UAAU;IACxC,MAAM;IAcN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"page-header-tabs.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/page-header-tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC;;;GAGG;AACH,cACM,iBAAkB,SAAQ,UAAU;IACxC;;OAEG;IAEH,mBAAmB,UAAS;IAE5B,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAO3C,OAAO,CAAC,aAAa;IAarB,MAAM;IAcN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC"}

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

@@ -9,6 +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 { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 //#region src/components/page-header/page-header-tabs.ts
 /**
@@ -24,6 +25,28 @@ import { carbonElement } from "@carbon/web-components/es/globals/decorators/carb
 * @element c4p-page-header-tabs
 */
 let CDSPageHeaderTabs = class CDSPageHeaderTabs extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disableStickyTabBar = false;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.updateContext();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("disableStickyTabBar")) this.updateContext();
+	}
+	updateContext() {
+		const pageHeader = this.closest(`c4p-page-header`);
+		if (pageHeader) {
+			pageHeader.context = {
+				...pageHeader.context,
+				disableStickyTabBar: this.disableStickyTabBar
+			};
+			pageHeader.requestUpdate("context");
+		}
+	}
 	render() {
 		return html` <div class="${"cds"}--css-grid" condensed="">
       <div
@@ -41,6 +64,10 @@ let CDSPageHeaderTabs = class CDSPageHeaderTabs extends LitElement {
 		this.styles = page_header_default;
 	}
 };
+__decorate([property({
+	type: Boolean,
+	attribute: "disable-sticky-tab-bar"
+})], CDSPageHeaderTabs.prototype, "disableStickyTabBar", void 0);
 CDSPageHeaderTabs = __decorate([carbonElement(`c4p-page-header-tabs`)], CDSPageHeaderTabs);
 var page_header_tabs_default = CDSPageHeaderTabs;
 //#endregion

package/es/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 { 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';\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  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":";;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,oBAAA,MACM,0BAA0B,WAAW;CACzC,SAAS;AACP,SAAO,IAAI,gBAAA,MAA6B;;uBAEd,kBAAA,MAA+B,kBAAA,MAA+B,mBAAA,MAAgC;;4BAE/F;;;;;;;;;gBASXA;;;gCAhBjBC,cAAc,uBAA6B,CAAA,EAAA,kBAAA;AAmB5C,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 { 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"}

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

@@ -15,6 +15,7 @@ export interface pageHeaderContextType {
     contentActionsClipped?: boolean;
     root?: CDSPageHeader | null;
     withContent?: boolean;
+    disableStickyTabBar?: boolean;
 }
 /**
  * Page header.
@@ -23,6 +24,7 @@ export interface pageHeaderContextType {
 declare class CDSPageHeader extends LitElement {
     context: pageHeaderContextType;
     private resizeObserver;
+    updated(changedProperties: Map<string, any>): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/page-header.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,cACM,aAAc,SAAQ,UAAU;IAGpC,OAAO,EAAE,qBAAqB,CAAM;IAEpC,OAAO,CAAC,cAAc,CAA6B;IAEnD,iBAAiB,IAAI,IAAI;IAqHzB,oBAAoB;IAKpB,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/page-header.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;GAGG;AACH,cACM,aAAc,SAAQ,UAAU;IAGpC,OAAO,EAAE,qBAAqB,CAAM;IAEpC,OAAO,CAAC,cAAc,CAA6B;IAEnD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAY3C,iBAAiB,IAAI,IAAI;IAqHzB,oBAAoB;IAKpB,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC"}

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

@@ -33,6 +33,11 @@ let CDSPageHeader = class CDSPageHeader extends LitElement {
 		super(..._args);
 		this.context = {};
 	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("context")) if (this.context.disableStickyTabBar) this.classList.add(`c4p--page-header--disable-sticky-tab-bar`);
+		else this.classList.remove(`c4p--page-header--disable-sticky-tab-bar`);
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		const contentElement = this.querySelector(`c4p-page-header-content`);

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

@@ -1 +1 @@
-{"version":3,"file":"page-header.js","names":["CDSPageHeaderContent","styles","customElement"],"sources":["../../../src/components/page-header/page-header.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 { state } from 'lit/decorators.js';\nimport { provide } from '@lit/context';\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';\nimport { pageHeaderContext } from './context';\nimport { getHeaderOffset } from './utils';\nimport CDSPageHeaderContent from './page-header-content';\n\nexport interface pageHeaderContextType {\n  breadcrumbOffset?: number;\n  headerOffset?: number;\n  fullyCollapsed?: boolean;\n  titleClipped?: boolean;\n  contentActionsClipped?: boolean;\n  root?: CDSPageHeader | null;\n  withContent?: boolean;\n}\n\n/**\n * Page header.\n * @element c4p-page-header\n */\n@customElement(`${prefix}-page-header`)\nclass CDSPageHeader extends LitElement {\n  @state()\n  @provide({ context: pageHeaderContext })\n  context: pageHeaderContextType = {};\n\n  private resizeObserver: ResizeObserver | undefined;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    const contentElement = this.querySelector(`${prefix}-page-header-content`);\n\n    this.resizeObserver = new ResizeObserver((entries) => {\n      const pageHeaderElement = entries[0];\n      const contentEl = pageHeaderElement.target.querySelector(\n        `${prefix}-page-header-content`\n      );\n      const contentHeight =\n        contentEl instanceof CDSPageHeaderContent ? contentEl.scrollHeight : 0;\n      const padding =\n        contentEl instanceof CDSPageHeaderContent\n          ? parseFloat(getComputedStyle(contentEl)?.paddingBlockStart) +\n            parseFloat(getComputedStyle(contentEl)?.paddingBlockEnd)\n          : 0;\n      const totalContentHeight = contentHeight + padding;\n      const headerOffset = getHeaderOffset(this);\n      const contentPadding = contentEl instanceof CDSPageHeaderContent ? 48 : 0;\n\n      this.style.setProperty(\n        `--${prefix}-page-header-header-top`,\n        `${(Math.round(totalContentHeight - contentPadding) - headerOffset) * -1}px`\n      );\n      this.style.setProperty(\n        `--${prefix}-page-header-breadcrumb-top`,\n        `${headerOffset}px`\n      );\n      this.context = {\n        ...this.context,\n        breadcrumbOffset: headerOffset,\n        headerOffset: (Math.round(totalContentHeight) - headerOffset) * -1,\n        root: this,\n        withContent: !!contentEl,\n      };\n    });\n    this.resizeObserver.observe(this);\n\n    const predefinedContentPadding = 24;\n    const totalHeaderOffset = getHeaderOffset(this);\n    const contentObserver = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (!entry.isIntersecting) {\n            this.context = {\n              ...this.context,\n              fullyCollapsed: true,\n            };\n          } else {\n            this.context = {\n              ...this.context,\n              fullyCollapsed: false,\n            };\n          }\n        });\n      },\n      {\n        root: null,\n        rootMargin: `${(predefinedContentPadding + totalHeaderOffset + 40) * -1}px 0px 0px 0px`,\n        threshold: 0.1,\n      }\n    );\n\n    const titleObserver = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (!entry.isIntersecting) {\n            this.context = {\n              ...this.context,\n              titleClipped: true,\n            };\n          } else {\n            this.context = {\n              ...this.context,\n              titleClipped: false,\n            };\n          }\n        });\n      },\n      {\n        root: null,\n        rootMargin: `${(predefinedContentPadding + totalHeaderOffset + 40) * -1}px 0px 0px 0px`,\n        threshold: 0.95,\n      }\n    );\n\n    const actionsObserver = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (!entry.isIntersecting) {\n            this.context = {\n              ...this.context,\n              contentActionsClipped: true,\n            };\n          } else {\n            this.context = {\n              ...this.context,\n              contentActionsClipped: false,\n            };\n          }\n        });\n      },\n      {\n        root: null,\n        // 48 -> breadcrumb bar\n        // 18 -> content padding\n        rootMargin: `${(totalHeaderOffset + 48 + 18) * -1}px 0px 0px 0px`,\n        threshold: 0.95,\n      }\n    );\n    if (contentElement) {\n      contentObserver.observe(contentElement);\n      titleObserver.observe(contentElement);\n      actionsObserver.observe(contentElement);\n    }\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect(); // Clean up\n    super.disconnectedCallback();\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAA,gBAAA,MACM,sBAAsB,WAAW;;;iBAGJ,EAAE;;CAInC,oBAA0B;AACxB,QAAM,mBAAmB;EACzB,MAAM,iBAAiB,KAAK,cAAc,0BAAgC;AAE1E,OAAK,iBAAiB,IAAI,gBAAgB,YAAY;GAEpD,MAAM,YADoB,QAAQ,GACE,OAAO,cACzC,0BACD;GAQD,MAAM,sBANJ,qBAAqBA,8BAAuB,UAAU,eAAe,MAErE,qBAAqBA,8BACjB,WAAW,iBAAiB,UAAU,EAAE,kBAAkB,GAC1D,WAAW,iBAAiB,UAAU,EAAE,gBAAgB,GACxD;GAEN,MAAM,eAAe,gBAAgB,KAAK;GAC1C,MAAM,iBAAiB,qBAAqBA,8BAAuB,KAAK;AAExE,QAAK,MAAM,YACT,gCACA,IAAI,KAAK,MAAM,qBAAqB,eAAe,GAAG,gBAAgB,GAAG,IAC1E;AACD,QAAK,MAAM,YACT,oCACA,GAAG,aAAa,IACjB;AACD,QAAK,UAAU;IACb,GAAG,KAAK;IACR,kBAAkB;IAClB,eAAe,KAAK,MAAM,mBAAmB,GAAG,gBAAgB;IAChE,MAAM;IACN,aAAa,CAAC,CAAC;IAChB;IACD;AACF,OAAK,eAAe,QAAQ,KAAK;EAEjC,MAAM,2BAA2B;EACjC,MAAM,oBAAoB,gBAAgB,KAAK;EAC/C,MAAM,kBAAkB,IAAI,sBACzB,YAAY;AACX,WAAQ,SAAS,UAAU;AACzB,QAAI,CAAC,MAAM,eACT,MAAK,UAAU;KACb,GAAG,KAAK;KACR,gBAAgB;KACjB;QAED,MAAK,UAAU;KACb,GAAG,KAAK;KACR,gBAAgB;KACjB;KAEH;KAEJ;GACE,MAAM;GACN,YAAY,IAAI,2BAA2B,oBAAoB,MAAM,GAAG;GACxE,WAAW;GACZ,CACF;EAED,MAAM,gBAAgB,IAAI,sBACvB,YAAY;AACX,WAAQ,SAAS,UAAU;AACzB,QAAI,CAAC,MAAM,eACT,MAAK,UAAU;KACb,GAAG,KAAK;KACR,cAAc;KACf;QAED,MAAK,UAAU;KACb,GAAG,KAAK;KACR,cAAc;KACf;KAEH;KAEJ;GACE,MAAM;GACN,YAAY,IAAI,2BAA2B,oBAAoB,MAAM,GAAG;GACxE,WAAW;GACZ,CACF;EAED,MAAM,kBAAkB,IAAI,sBACzB,YAAY;AACX,WAAQ,SAAS,UAAU;AACzB,QAAI,CAAC,MAAM,eACT,MAAK,UAAU;KACb,GAAG,KAAK;KACR,uBAAuB;KACxB;QAED,MAAK,UAAU;KACb,GAAG,KAAK;KACR,uBAAuB;KACxB;KAEH;KAEJ;GACE,MAAM;GAGN,YAAY,IAAI,oBAAoB,KAAK,MAAM,GAAG;GAClD,WAAW;GACZ,CACF;AACD,MAAI,gBAAgB;AAClB,mBAAgB,QAAQ,eAAe;AACvC,iBAAc,QAAQ,eAAe;AACrC,mBAAgB,QAAQ,eAAe;;;CAI3C,uBAAuB;AACrB,OAAK,gBAAgB,YAAY;AACjC,QAAM,sBAAsB;;CAG9B,SAAS;AACP,SAAO,IAAI;;;gBAGGC;;;YApIf,OAAO,EACP,QAAQ,EAAE,SAAS,mBAAmB,CAAC,CAAA,EAAA,cAAA,WAAA,WAAA,KAAA,EAAA;4BAHzCC,cAAc,kBAAwB,CAAA,EAAA,cAAA;AAyIvC,IAAA,sBAAe"}
+{"version":3,"file":"page-header.js","names":["CDSPageHeaderContent","styles","customElement"],"sources":["../../../src/components/page-header/page-header.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 { state } from 'lit/decorators.js';\nimport { provide } from '@lit/context';\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';\nimport { pageHeaderContext } from './context';\nimport { getHeaderOffset } from './utils';\nimport CDSPageHeaderContent from './page-header-content';\n\nexport interface pageHeaderContextType {\n  breadcrumbOffset?: number;\n  headerOffset?: number;\n  fullyCollapsed?: boolean;\n  titleClipped?: boolean;\n  contentActionsClipped?: boolean;\n  root?: CDSPageHeader | null;\n  withContent?: boolean;\n  disableStickyTabBar?: boolean;\n}\n\n/**\n * Page header.\n * @element c4p-page-header\n */\n@customElement(`${prefix}-page-header`)\nclass CDSPageHeader extends LitElement {\n  @state()\n  @provide({ context: pageHeaderContext })\n  context: pageHeaderContextType = {};\n\n  private resizeObserver: ResizeObserver | undefined;\n\n  updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('context')) {\n      // Update host class based on disableStickyTabBar\n      if (this.context.disableStickyTabBar) {\n        this.classList.add(`${prefix}--page-header--disable-sticky-tab-bar`);\n      } else {\n        this.classList.remove(`${prefix}--page-header--disable-sticky-tab-bar`);\n      }\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    const contentElement = this.querySelector(`${prefix}-page-header-content`);\n\n    this.resizeObserver = new ResizeObserver((entries) => {\n      const pageHeaderElement = entries[0];\n      const contentEl = pageHeaderElement.target.querySelector(\n        `${prefix}-page-header-content`\n      );\n      const contentHeight =\n        contentEl instanceof CDSPageHeaderContent ? contentEl.scrollHeight : 0;\n      const padding =\n        contentEl instanceof CDSPageHeaderContent\n          ? parseFloat(getComputedStyle(contentEl)?.paddingBlockStart) +\n            parseFloat(getComputedStyle(contentEl)?.paddingBlockEnd)\n          : 0;\n      const totalContentHeight = contentHeight + padding;\n      const headerOffset = getHeaderOffset(this);\n      const contentPadding = contentEl instanceof CDSPageHeaderContent ? 48 : 0;\n\n      this.style.setProperty(\n        `--${prefix}-page-header-header-top`,\n        `${(Math.round(totalContentHeight - contentPadding) - headerOffset) * -1}px`\n      );\n      this.style.setProperty(\n        `--${prefix}-page-header-breadcrumb-top`,\n        `${headerOffset}px`\n      );\n      this.context = {\n        ...this.context,\n        breadcrumbOffset: headerOffset,\n        headerOffset: (Math.round(totalContentHeight) - headerOffset) * -1,\n        root: this,\n        withContent: !!contentEl,\n      };\n    });\n    this.resizeObserver.observe(this);\n\n    const predefinedContentPadding = 24;\n    const totalHeaderOffset = getHeaderOffset(this);\n    const contentObserver = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (!entry.isIntersecting) {\n            this.context = {\n              ...this.context,\n              fullyCollapsed: true,\n            };\n          } else {\n            this.context = {\n              ...this.context,\n              fullyCollapsed: false,\n            };\n          }\n        });\n      },\n      {\n        root: null,\n        rootMargin: `${(predefinedContentPadding + totalHeaderOffset + 40) * -1}px 0px 0px 0px`,\n        threshold: 0.1,\n      }\n    );\n\n    const titleObserver = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (!entry.isIntersecting) {\n            this.context = {\n              ...this.context,\n              titleClipped: true,\n            };\n          } else {\n            this.context = {\n              ...this.context,\n              titleClipped: false,\n            };\n          }\n        });\n      },\n      {\n        root: null,\n        rootMargin: `${(predefinedContentPadding + totalHeaderOffset + 40) * -1}px 0px 0px 0px`,\n        threshold: 0.95,\n      }\n    );\n\n    const actionsObserver = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (!entry.isIntersecting) {\n            this.context = {\n              ...this.context,\n              contentActionsClipped: true,\n            };\n          } else {\n            this.context = {\n              ...this.context,\n              contentActionsClipped: false,\n            };\n          }\n        });\n      },\n      {\n        root: null,\n        // 48 -> breadcrumb bar\n        // 18 -> content padding\n        rootMargin: `${(totalHeaderOffset + 48 + 18) * -1}px 0px 0px 0px`,\n        threshold: 0.95,\n      }\n    );\n    if (contentElement) {\n      contentObserver.observe(contentElement);\n      titleObserver.observe(contentElement);\n      actionsObserver.observe(contentElement);\n    }\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect(); // Clean up\n    super.disconnectedCallback();\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAA,gBAAA,MACM,sBAAsB,WAAW;;;iBAGJ,EAAE;;CAInC,QAAQ,mBAAqC;AAC3C,QAAM,QAAQ,kBAAkB;AAChC,MAAI,kBAAkB,IAAI,UAAU,CAElC,KAAI,KAAK,QAAQ,oBACf,MAAK,UAAU,IAAI,2CAAiD;MAEpE,MAAK,UAAU,OAAO,2CAAiD;;CAK7E,oBAA0B;AACxB,QAAM,mBAAmB;EACzB,MAAM,iBAAiB,KAAK,cAAc,0BAAgC;AAE1E,OAAK,iBAAiB,IAAI,gBAAgB,YAAY;GAEpD,MAAM,YADoB,QAAQ,GACE,OAAO,cACzC,0BACD;GAQD,MAAM,sBANJ,qBAAqBA,8BAAuB,UAAU,eAAe,MAErE,qBAAqBA,8BACjB,WAAW,iBAAiB,UAAU,EAAE,kBAAkB,GAC1D,WAAW,iBAAiB,UAAU,EAAE,gBAAgB,GACxD;GAEN,MAAM,eAAe,gBAAgB,KAAK;GAC1C,MAAM,iBAAiB,qBAAqBA,8BAAuB,KAAK;AAExE,QAAK,MAAM,YACT,gCACA,IAAI,KAAK,MAAM,qBAAqB,eAAe,GAAG,gBAAgB,GAAG,IAC1E;AACD,QAAK,MAAM,YACT,oCACA,GAAG,aAAa,IACjB;AACD,QAAK,UAAU;IACb,GAAG,KAAK;IACR,kBAAkB;IAClB,eAAe,KAAK,MAAM,mBAAmB,GAAG,gBAAgB;IAChE,MAAM;IACN,aAAa,CAAC,CAAC;IAChB;IACD;AACF,OAAK,eAAe,QAAQ,KAAK;EAEjC,MAAM,2BAA2B;EACjC,MAAM,oBAAoB,gBAAgB,KAAK;EAC/C,MAAM,kBAAkB,IAAI,sBACzB,YAAY;AACX,WAAQ,SAAS,UAAU;AACzB,QAAI,CAAC,MAAM,eACT,MAAK,UAAU;KACb,GAAG,KAAK;KACR,gBAAgB;KACjB;QAED,MAAK,UAAU;KACb,GAAG,KAAK;KACR,gBAAgB;KACjB;KAEH;KAEJ;GACE,MAAM;GACN,YAAY,IAAI,2BAA2B,oBAAoB,MAAM,GAAG;GACxE,WAAW;GACZ,CACF;EAED,MAAM,gBAAgB,IAAI,sBACvB,YAAY;AACX,WAAQ,SAAS,UAAU;AACzB,QAAI,CAAC,MAAM,eACT,MAAK,UAAU;KACb,GAAG,KAAK;KACR,cAAc;KACf;QAED,MAAK,UAAU;KACb,GAAG,KAAK;KACR,cAAc;KACf;KAEH;KAEJ;GACE,MAAM;GACN,YAAY,IAAI,2BAA2B,oBAAoB,MAAM,GAAG;GACxE,WAAW;GACZ,CACF;EAED,MAAM,kBAAkB,IAAI,sBACzB,YAAY;AACX,WAAQ,SAAS,UAAU;AACzB,QAAI,CAAC,MAAM,eACT,MAAK,UAAU;KACb,GAAG,KAAK;KACR,uBAAuB;KACxB;QAED,MAAK,UAAU;KACb,GAAG,KAAK;KACR,uBAAuB;KACxB;KAEH;KAEJ;GACE,MAAM;GAGN,YAAY,IAAI,oBAAoB,KAAK,MAAM,GAAG;GAClD,WAAW;GACZ,CACF;AACD,MAAI,gBAAgB;AAClB,mBAAgB,QAAQ,eAAe;AACvC,iBAAc,QAAQ,eAAe;AACrC,mBAAgB,QAAQ,eAAe;;;CAI3C,uBAAuB;AACrB,OAAK,gBAAgB,YAAY;AACjC,QAAM,sBAAsB;;CAG9B,SAAS;AACP,SAAO,IAAI;;;gBAGGC;;;YAhJf,OAAO,EACP,QAAQ,EAAE,SAAS,mBAAmB,CAAC,CAAA,EAAA,cAAA,WAAA,WAAA,KAAA,EAAA;4BAHzCC,cAAc,kBAAwB,CAAA,EAAA,cAAA;AAqJvC,IAAA,sBAAe"}