@carbon/ibm-products-web-components 0.20.1 → 0.21.0

package/es/components/page-header/_story-assets/set-of-breadcrumbs.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-of-breadcrumbs.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const pageHeaderContext: import("@lit/context").Context<{
+    headerOffset: number;
+    breadcrumbOffset: number;
+    fullyCollapsed: boolean;
+    root: null;
+}, unknown>;

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

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { createContext } from '@lit/context';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const pageHeaderContext = createContext({
+    headerOffset: 0,
+    breadcrumbOffset: 0,
+    fullyCollapsed: false,
+    root: null,
+});
+
+export { pageHeaderContext };
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/components/page-header/context.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAAA;;;;;;;AAOG;AAII,MAAM,iBAAiB,GAAG,aAAa,CAAC;AAC7C,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,gBAAgB,EAAE,CAAC;AACnB,IAAA,cAAc,EAAE,KAAK;AACrB,IAAA,IAAI,EAAE,IAAI;AACX,CAAA;;;;"}

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

@@ -12,3 +12,5 @@ import './page-header-content';
 import './page-header-content-text';
 import './page-header-hero-image';
 import './page-header-tabs';
+import './page-header-title-breadcrumb';
+import './page-header-scroller';

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

@@ -11,4 +11,6 @@ import './page-header-content.js';
 import './page-header-content-text.js';
 import './page-header-hero-image.js';
 import './page-header-tabs.js';
+import './page-header-title-breadcrumb.js';
+import './page-header-scroller.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

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

@@ -0,0 +1,56 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import '@carbon/web-components/es/components/button/index.js';
+import CDSButton from '@carbon/web-components/es/components/button/button';
+/**
+ * Page header Scroller button
+ * @element c4p-page-header-scroller
+ */
+export declare class PageHeaderScroller extends CDSButton {
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    align: string;
+    /**
+     * Specify whether a auto align functionality should be applied
+     */
+    autoalign: boolean;
+    /**
+     * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
+     */
+    closeOnActivation: boolean;
+    /**
+     * Specify the collapse text for the scroller button
+     */
+    collapseText: string;
+    /**
+     * Specify whether the tooltip should be open when it first renders
+     */
+    defaultOpen: boolean;
+    /**
+     * Specify the duration in milliseconds to delay before displaying the tooltip
+     */
+    enterDelayMs: number;
+    /**
+     * Specify the expand text for the scroller button
+     */
+    expandText: string;
+    /**
+     * Specify the duration in milliseconds to delay before hiding the tooltip
+     */
+    leaveDelayMs: number;
+    /**
+     * Specify the size of the Button. Defaults to `md`.
+     */
+    size: string;
+    context: any;
+    protected _renderTooltipContent(): import("lit-html").TemplateResult<1>;
+    private _handleScroller;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,165 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import Chevron20 from '@carbon/web-components/es/icons/chevron--up/20';
+import ChevronDown20 from '@carbon/web-components/es/icons/chevron--down/20';
+import '@carbon/web-components/es/components/button/index.js';
+import { pageHeaderContext } from './context.js';
+import { consume } from '@lit/context';
+import CDSButton from '@carbon/web-components/es/components/button/button';
+import { prefix } from '../../globals/settings.js';
+import { scrollableAncestorInner } from './utils.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Page header Scroller button
+ * @element c4p-page-header-scroller
+ */
+let PageHeaderScroller = class PageHeaderScroller extends CDSButton {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specify how the trigger should align with the tooltip
+         */
+        this.align = 'top';
+        /**
+         * Specify whether a auto align functionality should be applied
+         */
+        this.autoalign = true;
+        /**
+         * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
+         */
+        this.closeOnActivation = true;
+        /**
+         * Specify the collapse text for the scroller button
+         */
+        this.collapseText = 'Collapse';
+        /**
+         * Specify whether the tooltip should be open when it first renders
+         */
+        this.defaultOpen = false;
+        /**
+         * Specify the duration in milliseconds to delay before displaying the tooltip
+         */
+        this.enterDelayMs = 100;
+        /**
+         * Specify the expand text for the scroller button
+         */
+        this.expandText = 'Expand';
+        /**
+         * Specify the duration in milliseconds to delay before hiding the tooltip
+         */
+        this.leaveDelayMs = 300;
+        /**
+         * Specify the size of the Button. Defaults to `md`.
+         */
+        this.size = 'md';
+        this._handleScroller = () => {
+            const { root, fullyCollapsed } = this.context;
+            const contentElement = root.querySelector(`${prefix}-page-header-content`);
+            if (!contentElement) {
+                return;
+            }
+            const scrollableTarget = scrollableAncestorInner(contentElement);
+            // Page header content is not fully collapsed
+            if (!fullyCollapsed) {
+                const pageHeaderContentHeight = contentElement.offsetHeight;
+                scrollableTarget === null || scrollableTarget === void 0 ? void 0 : scrollableTarget.scrollTo({
+                    top: pageHeaderContentHeight, // headerTopValue, check if breadcrumb bar is included
+                    behavior: 'smooth',
+                });
+            }
+            else {
+                // Page header content is fully collapsed
+                scrollableTarget === null || scrollableTarget === void 0 ? void 0 : scrollableTarget.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+        };
+    }
+    _renderTooltipContent() {
+        return html `
+      <cds-tooltip-content>
+        <slot name="tooltip-content"></slot>
+      </cds-tooltip-content>
+    `;
+    }
+    render() {
+        const { align, closeOnActivation, defaultOpen, enterDelayMs, leaveDelayMs, disabled, isSelected, size, context, autoalign, } = this;
+        const iconClasses = classMap({
+            [`${prefix}--page-header-scroller-collapsed`]: !!(context === null || context === void 0 ? void 0 : context.fullyCollapsed),
+            [`${prefix}--page-header-scroller-icon`]: true,
+        });
+        return html `<cds-icon-button
+      align=${align}
+      ?close-on-activation=${closeOnActivation}
+      ?defaultOpen=${defaultOpen}
+      ?disabled=${disabled}
+      enter-delay-ms=${enterDelayMs}
+      ?isSelected=${isSelected}
+      kind="ghost"
+      leave-delay-ms=${leaveDelayMs}
+      size=${size}
+      ?autoalign=${autoalign}
+      class=${iconClasses}
+      @click=${this._handleScroller}
+    >
+      ${(context === null || context === void 0 ? void 0 : context.fullyCollapsed)
+            ? html `${ChevronDown20({ slot: 'icon' })}`
+            : html `${Chevron20({ slot: 'icon' })}`}
+      <span slot="tooltip-content">
+        ${(context === null || context === void 0 ? void 0 : context.fullyCollapsed) ? this.expandText : this.collapseText}
+      </span>
+    </cds-icon-button>`;
+    }
+};
+__decorate([
+    property({ reflect: true, type: String })
+], PageHeaderScroller.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PageHeaderScroller.prototype, "autoalign", void 0);
+__decorate([
+    property({ attribute: 'close-on-activation', reflect: true, type: Boolean })
+], PageHeaderScroller.prototype, "closeOnActivation", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], PageHeaderScroller.prototype, "collapseText", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PageHeaderScroller.prototype, "defaultOpen", void 0);
+__decorate([
+    property({ attribute: 'enter-delay-ms', type: Number })
+], PageHeaderScroller.prototype, "enterDelayMs", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], PageHeaderScroller.prototype, "expandText", void 0);
+__decorate([
+    property({ attribute: 'leave-delay-ms', type: Number })
+], PageHeaderScroller.prototype, "leaveDelayMs", void 0);
+__decorate([
+    property({ reflect: true })
+], PageHeaderScroller.prototype, "size", void 0);
+__decorate([
+    consume({ context: pageHeaderContext, subscribe: true })
+], PageHeaderScroller.prototype, "context", void 0);
+PageHeaderScroller = __decorate([
+    carbonElement(`${prefix}-page-header-scroller`)
+], PageHeaderScroller);
+
+export { PageHeaderScroller };
+//# sourceMappingURL=page-header-scroller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-scroller.js","sources":["../../../src/components/page-header/page-header-scroller.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}

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

@@ -34,6 +34,7 @@ let CDSPageHeaderTabs = class CDSPageHeaderTabs extends LitElement {
           <slot name="tags"></slot>
         </div>
       </div>
+      <slot name="scroller"></slot>
     </div>`;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"page-header-tabs.js","sources":["../../../src/components/page-header/page-header-tabs.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAOH;;;AAGG;AAEH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU,CAAA;IACxC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,aAAA,EAAgB,YAAY,CAAA;;AAE1B,eAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,oBAAoB,YAAY,CAAA;;sBAErG,MAAM,CAAA;;;;;WAKjB;;;AAGF,iBAAM,CAAA,MAAA,GAAG,MAAH;AAdT,iBAAiB,GAAA,UAAA,CAAA;AADtB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,iBAAA,CAAmB;AACrC,CAAA,EAAA,iBAAiB,CAetB;AAED,0BAAe,iBAAiB;;;;"}
+{"version":3,"file":"page-header-tabs.js","sources":["../../../src/components/page-header/page-header-tabs.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAOH;;;AAGG;AAEH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU,CAAA;IACxC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,aAAA,EAAgB,YAAY,CAAA;;AAE1B,eAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,oBAAoB,YAAY,CAAA;;sBAErG,MAAM,CAAA;;;;;;WAMjB;;;AAGF,iBAAM,CAAA,MAAA,GAAG,MAAH;AAfT,iBAAiB,GAAA,UAAA,CAAA;AADtB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,iBAAA,CAAmB;AACrC,CAAA,EAAA,iBAAiB,CAgBtB;AAED,0BAAe,iBAAiB;;;;"}

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CDSBreadcrumbItem } from '@carbon/web-components/es/index';
+/**
+ * Page header Title Breadcrumb
+ * @element c4p-page-header-title-breadcrumb
+ */
+declare class CDSPageHeaderTitleBreadcrumb extends CDSBreadcrumbItem {
+    context: any;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSPageHeaderTitleBreadcrumb;

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

@@ -0,0 +1,65 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { consume, ContextConsumer } from '@lit/context';
+import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import { CDSBreadcrumbItem } from '@carbon/web-components/es/index';
+import { prefix } from '../../globals/settings.js';
+import styles from './page-header.scss.js';
+import { pageHeaderContext } from './context.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Page header Title Breadcrumb
+ * @element c4p-page-header-title-breadcrumb
+ */
+let CDSPageHeaderTitleBreadcrumb = class CDSPageHeaderTitleBreadcrumb extends CDSBreadcrumbItem {
+    constructor() {
+        super();
+        new ContextConsumer(this, {
+            context: pageHeaderContext,
+            subscribe: true,
+            callback: (state) => {
+                if (state.withContent) {
+                    this.classList.add(`${prefix}--page-header-title-breadcrumb-show__with-content`);
+                    this.classList.remove(`${prefix}--page-header-title-breadcrumb-show__by-default`);
+                }
+                else {
+                    this.classList.remove(`${prefix}--page-header-title-breadcrumb-show__with-content`);
+                    this.classList.add(`${prefix}--page-header-title-breadcrumb-show__by-default`);
+                }
+            },
+        });
+    }
+    render() {
+        return html `
+      <cds-breadcrumb-item class="${prefix}--page-header-title-breadcrumb">
+        <slot></slot>
+      </cds-breadcrumb-item>
+    `;
+    }
+};
+CDSPageHeaderTitleBreadcrumb.styles = styles;
+__decorate([
+    consume({ context: pageHeaderContext, subscribe: true })
+], CDSPageHeaderTitleBreadcrumb.prototype, "context", void 0);
+CDSPageHeaderTitleBreadcrumb = __decorate([
+    carbonElement(`${prefix}-page-header-title-breadcrumb`)
+], CDSPageHeaderTitleBreadcrumb);
+var CDSPageHeaderTitleBreadcrumb$1 = CDSPageHeaderTitleBreadcrumb;
+
+export { CDSPageHeaderTitleBreadcrumb$1 as default };
+//# sourceMappingURL=page-header-title-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-title-breadcrumb.js","sources":["../../../src/components/page-header/page-header-title-breadcrumb.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAWH;;;AAGG;AAEH,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,iBAAiB,CAAA;AAI1D,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QACP,IAAI,eAAe,CAAC,IAAI,EAAE;AACxB,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,QAAQ,EAAE,CAAC,KAAK,KAAI;AAClB,gBAAA,IAAK,KAA+B,CAAC,WAAW,EAAE;oBAChD,IAAI,CAAC,SAAS,CAAC,GAAG,CAChB,CAAG,EAAA,MAAM,CAAmD,iDAAA,CAAA,CAC7D;oBACD,IAAI,CAAC,SAAS,CAAC,MAAM,CACnB,CAAG,EAAA,MAAM,CAAiD,+CAAA,CAAA,CAC3D;;qBACI;oBACL,IAAI,CAAC,SAAS,CAAC,MAAM,CACnB,CAAG,EAAA,MAAM,CAAmD,iDAAA,CAAA,CAC7D;oBACD,IAAI,CAAC,SAAS,CAAC,GAAG,CAChB,CAAG,EAAA,MAAM,CAAiD,+CAAA,CAAA,CAC3D;;aAEJ;AACF,SAAA,CAAC;;IAEJ,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA;oCACqB,MAAM,CAAA;;;KAGrC;;;AAGI,4BAAM,CAAA,MAAA,GAAG,MAAH;AAlCb,UAAA,CAAA;IADC,OAAO,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,EAAE;AAChD,CAAA,EAAA,4BAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAFJ,4BAA4B,GAAA,UAAA,CAAA;AADjC,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,6BAAA,CAA+B;AACjD,CAAA,EAAA,4BAA4B,CAqCjC;AAED,qCAAe,4BAA4B;;;;"}

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

@@ -7,12 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
+export interface pageHeaderContextType {
+    breadcrumbOffset?: number;
+    headerOffset?: number;
+    fullyCollapsed?: boolean;
+    root?: CDSPageHeader | null;
+    withContent?: boolean;
+}
 /**
  * Page header.
  * @element c4p-page-header
  */
 declare class CDSPageHeader extends LitElement {
-    updated(): void;
+    context: pageHeaderContextType;
+    private resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: any;
 }

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

@@ -7,9 +7,14 @@
 
 import { __decorate } from 'tslib';
 import { LitElement, html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { provide } from '@lit/context';
 import { prefix } from '../../globals/settings.js';
 import styles from './page-header.scss.js';
 import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import { pageHeaderContext } from './context.js';
+import { getHeaderOffset } from './utils.js';
+import CDSPageHeaderContent from './page-header-content.js';
 
 /**
  * @license
@@ -19,91 +24,69 @@ import { carbonElement } from '@carbon/web-components/es/globals/decorators/carb
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/**
- * ----------
- * Utilities
- * ----------
- */
-const getHeaderOffset = (el) => {
-    const scrollableContainer = scrollableAncestor(el);
-    const scrollableContainerTop = scrollableContainer
-        ? scrollableContainer.getBoundingClientRect().top
-        : 0;
-    const offsetMeasuringTop = el ? el.getBoundingClientRect().top : 0;
-    const totalHeaderOffset = offsetMeasuringTop !== 0 ? offsetMeasuringTop - scrollableContainerTop : 0;
-    return totalHeaderOffset;
-};
-const windowExists = typeof window !== `undefined`;
-/**
- * Determines if the given target is scrollable
- *
- * @param {HTMLElement} target
- * @returns {boolean}
- */
-const scrollable = (target) => {
-    const style = window.getComputedStyle(target);
-    return /(auto|scroll|hidden)/.test(style.overflow);
-};
-/**
- * Recursively looks for the scrollable ancestor
- */
-const scrollableAncestorInner = (target) => {
-    if (target.parentNode && target.parentNode !== document) {
-        if (scrollable(target.parentNode)) {
-            return target.parentNode;
-        }
-        else {
-            return scrollableAncestorInner(target.parentNode);
-        }
-    }
-    else {
-        return document.scrollingElement;
-    }
-};
-/**
- * Walks up the parent nodes to identify the first scrollable ancestor
- *
- * @param {HTMLElement} target
- * @returns {HTMLElement}
- */
-const scrollableAncestor = (target) => {
-    if (!windowExists || !target) {
-        return null;
-    }
-    // based on https://stackoverflow.com/questions/35939886/find-first-scrollable-parent
-    const style = window.getComputedStyle(target);
-    if (!target || !style || style.position === 'fixed') {
-        return document.scrollingElement;
-    }
-    return scrollableAncestorInner(target);
-};
 /**
  * Page header.
  * @element c4p-page-header
  */
 let CDSPageHeader = class CDSPageHeader extends LitElement {
-    updated() {
+    constructor() {
+        super(...arguments);
+        this.context = {};
+    }
+    connectedCallback() {
+        super.connectedCallback();
         const contentElement = this.querySelector(`${prefix}-page-header-content`);
-        if (contentElement) {
-            const resizeObserver = new ResizeObserver((entries) => {
-                var _a, _b;
-                const contentElEntry = entries[0];
-                const contentHeight = contentElEntry.contentRect.height;
-                const padding = parseFloat((_a = getComputedStyle(contentElement)) === null || _a === void 0 ? void 0 : _a.paddingBlockStart) +
-                    parseFloat((_b = getComputedStyle(contentElement)) === null || _b === void 0 ? void 0 : _b.paddingBlockEnd);
-                const totalContentHeight = contentHeight + padding;
-                const headerOffset = getHeaderOffset(this);
-                this.style.setProperty(`--${prefix}-page-header-header-top`, `${(Math.round(totalContentHeight) - headerOffset) * -1}px`);
-                this.style.setProperty(`--${prefix}-page-header-breadcrumb-top`, `${headerOffset}px`);
+        this.resizeObserver = new ResizeObserver((entries) => {
+            var _a, _b;
+            const pageHeaderElement = entries[0];
+            const contentEl = pageHeaderElement.target.querySelector(`${prefix}-page-header-content`);
+            const contentHeight = contentEl instanceof CDSPageHeaderContent ? contentEl.scrollHeight : 0;
+            const padding = contentEl instanceof CDSPageHeaderContent
+                ? parseFloat((_a = getComputedStyle(contentEl)) === null || _a === void 0 ? void 0 : _a.paddingBlockStart) +
+                    parseFloat((_b = getComputedStyle(contentEl)) === null || _b === void 0 ? void 0 : _b.paddingBlockEnd)
+                : 0;
+            const totalContentHeight = contentHeight + padding;
+            const headerOffset = getHeaderOffset(this);
+            const contentPadding = contentEl instanceof CDSPageHeaderContent ? 48 : 0;
+            this.style.setProperty(`--${prefix}-page-header-header-top`, `${(Math.round(totalContentHeight - contentPadding) - headerOffset) * -1}px`);
+            this.style.setProperty(`--${prefix}-page-header-breadcrumb-top`, `${headerOffset}px`);
+            this.context = Object.assign(Object.assign({}, this.context), { breadcrumbOffset: headerOffset, headerOffset: (Math.round(totalContentHeight) - headerOffset) * -1, root: this, withContent: !!contentEl });
+        });
+        this.resizeObserver.observe(this);
+        const predefinedContentPadding = 24;
+        const totalHeaderOffset = getHeaderOffset(this);
+        const contentObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (!entry.isIntersecting) {
+                    this.context = Object.assign(Object.assign({}, this.context), { fullyCollapsed: true });
+                }
+                else {
+                    this.context = Object.assign(Object.assign({}, this.context), { fullyCollapsed: false });
+                }
             });
-            resizeObserver.observe(contentElement);
+        }, {
+            root: null,
+            rootMargin: `${(predefinedContentPadding + totalHeaderOffset + 40) * -1}px 0px 0px 0px`,
+            threshold: 0.1,
+        });
+        if (contentElement) {
+            contentObserver.observe(contentElement);
         }
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect(); // Clean up
+        super.disconnectedCallback();
+    }
     render() {
         return html ` <slot></slot>`;
     }
 };
 CDSPageHeader.styles = styles;
+__decorate([
+    state(),
+    provide({ context: pageHeaderContext })
+], CDSPageHeader.prototype, "context", void 0);
 CDSPageHeader = __decorate([
     carbonElement(`${prefix}-page-header`)
 ], CDSPageHeader);

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

@@ -1 +1 @@
-{"version":3,"file":"page-header.js","sources":["../../../src/components/page-header/page-header.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}
+{"version":3,"file":"page-header.js","sources":["../../../src/components/page-header/page-header.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}