@carbon/ibm-products-web-components 0.30.0-rc.0 → 0.30.0

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

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

package/es-custom/components/page-header/_story-assets/set-of-tags/utils.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @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 { TAG_TYPE, TAG_SIZE } from '@carbon/web-components/es/components/tag/defs';
+export interface TagType {
+    type: TAG_TYPE;
+    text: string;
+    size: TAG_SIZE;
+    onClose?: () => void;
+}
+interface GenerateTagsOptions {
+    count: number;
+    size?: TAG_SIZE;
+    dismissible?: boolean;
+}
+export declare function generateTags({ count, size, dismissible, }: GenerateTagsOptions): TagType[];
+export declare const tagsData: TagType[];
+export {};

package/es-custom/components/page-header/_story-assets/set-of-tags/utils.js

@@ -0,0 +1,44 @@
+/**
+ * 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 { TAG_TYPE, TAG_SIZE } from '@carbon/web-components/es/components/tag/defs';
+
+/**
+ * @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 tagTypes = Object.values(TAG_TYPE);
+const randomWords = 'Interface Components Architecture Microservices Tokens Authentication Authorization Encryption Dashboard Metrics Logging Tracing Scalability Latency Containers Virtualization Deployment Infrastructure Cloud Cluster Replica Storage Bandwidth Throughput Streaming Sockets Requests Responses Payload Endpoint GraphQL REST Webhooks JSON Serialization Deserialization Algorithms Inference Model Training Embeddings Prompts Outputs Transformer Neural Optimization Gradient Epoch Dataset Labels Prediction Pipeline Automation Hooks State Context Reducer Props Render Refactor Commit Branch Merge Versioning Build Compile Transpile Minify Bundle Dependency Modules Imports Exports Testing Coverage Snapshot Regression Lint Formatter Error Exception Debug Logs Watcher Server Client Browser Viewport Media Query Responsive Breakpoints Grid CSS Tailwind JavaScript TypeScript Framework Library Routing Navigation SPA SSR Hydration DOM Event Handler Listener Throttle Debounce Asynchronous Callback Promise Await Fetch Resource CORS Header Cookie Session Cache Index Query Database Schema Migration ORM Relation Join Table Record Document NoSQL SQL Function Parameter Return Expression Condition Loop Iteration Variable Constant Scope Closure Arrow Object Array Boolean String Integer Float Null Undefined NaN Prototype Instance Class Constructor Inheritance Encapsulation Abstraction Polymorphism Tokenization CI CD Monitoring Alert Incident SLA SLO Uptime Availability Redundancy Failover Load Balancer Firewall Gateway Certificate TLS HTTPS Domain DNS Proxy Timeout Queue Service Registry Discovery Containerization Kubernetes Docker';
+const words = randomWords.split(/\s+/);
+function generateTags({ count, size = TAG_SIZE.MEDIUM, dismissible = false, }) {
+    return Array.from({ length: count }, (_, index) => {
+        const type = tagTypes[index % tagTypes.length];
+        const text = words[index % words.length];
+        const tag = {
+            type,
+            text,
+            size,
+        };
+        if (dismissible) {
+            tag.onClose = () => console.log(`Closed tag: ${text}`);
+        }
+        return tag;
+    });
+}
+// Example usage:
+const tagsData = generateTags({
+    count: 100,
+    size: TAG_SIZE.SMALL,
+    dismissible: true,
+});
+
+export { generateTags, tagsData };
+//# sourceMappingURL=utils.js.map

package/es-custom/components/page-header/_story-assets/set-of-tags/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/page-header/_story-assets/set-of-tags/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAAA;;;;;;;AAOG;AAcH,MAAM,QAAQ,GAAe,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;AAEpD,MAAM,WAAW,GACf,2lDAA2lD;AAE7lD,MAAM,KAAK,GAAa,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC;AAQhC,SAAA,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,GAAG,QAAQ,CAAC,MAAM,EACtB,WAAW,GAAG,KAAK,GACC,EAAA;AACpB,IAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;QAChD,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC9C,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;AAExC,QAAA,MAAM,GAAG,GAAY;YACnB,IAAI;YACJ,IAAI;YACJ,IAAI;SACL;QAED,IAAI,WAAW,EAAE;AACf,YAAA,GAAG,CAAC,OAAO,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAA,YAAA,EAAe,IAAI,CAAA,CAAE,CAAC;;AAGxD,QAAA,OAAO,GAAG;AACZ,KAAC,CAAC;AACJ;AAEA;AACO,MAAM,QAAQ,GAAG,YAAY,CAAC;AACnC,IAAA,KAAK,EAAE,GAAG;IACV,IAAI,EAAE,QAAQ,CAAC,KAAK;AACpB,IAAA,WAAW,EAAE,IAAI;AAClB,CAAA;;;;"}

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

@@ -0,0 +1,15 @@
+/**
+ * @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;
+    titleClipped: boolean;
+}, unknown>;

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

@@ -0,0 +1,27 @@
+/**
+ * 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,
+    titleClipped: false,
+});
+
+export { pageHeaderContext };
+//# sourceMappingURL=context.js.map

package/es-custom/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;AACV,IAAA,YAAY,EAAE,KAAK;AACpB,CAAA;;;;"}

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

@@ -0,0 +1,16 @@
+/**
+ * @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 './page-header';
+import './page-header-breadcrumb';
+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-custom/components/page-header/index.js

@@ -0,0 +1,16 @@
+/**
+ * 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 './page-header.js';
+import './page-header-breadcrumb.js';
+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-custom/components/page-header/index.js.map

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

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

@@ -0,0 +1,36 @@
+/**
+ * @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 { LitElement } from 'lit';
+/**
+ * Page header Breadcrumb Bar.
+ * @element c4p-page-header-breadcrumb
+ */
+declare class CDSPageHeaderBreadcrumb extends LitElement {
+    /**
+     * Specify if breadcrumb bar has bottom border.
+     */
+    border: boolean;
+    /**
+     * Set to `true` if the breadcrumb bar is sitting within a grid
+     * (ie. when used in tandem with page-header-hero-image)
+     */
+    withinGrid: boolean;
+    /**
+     * Set to `true` if page actions should be flush (no padding)
+     */
+    pageActionsFlush: boolean;
+    /**
+     * Set to `true` if content actions should be flush (no padding)
+     */
+    contentActionsFlush: boolean;
+    context: any;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSPageHeaderBreadcrumb;

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

@@ -0,0 +1,106 @@
+/**
+ * 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 { LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { prefix, carbonPrefix } from '../../globals/settings.js';
+import { property } from 'lit/decorators.js';
+import styles from './page-header.scss.js';
+import { consume } from '@lit/context';
+import { pageHeaderContext } from './context.js';
+import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.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 Breadcrumb Bar.
+ * @element c4p-page-header-breadcrumb
+ */
+let CDSPageHeaderBreadcrumb = class CDSPageHeaderBreadcrumb extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specify if breadcrumb bar has bottom border.
+         */
+        this.border = true;
+        /**
+         * Set to `true` if the breadcrumb bar is sitting within a grid
+         * (ie. when used in tandem with page-header-hero-image)
+         */
+        this.withinGrid = false;
+        /**
+         * Set to `true` if page actions should be flush (no padding)
+         */
+        this.pageActionsFlush = false;
+        /**
+         * Set to `true` if content actions should be flush (no padding)
+         */
+        this.contentActionsFlush = false;
+    }
+    render() {
+        const { withinGrid, context } = this;
+        const { contentActionsClipped } = context !== null && context !== void 0 ? context : {};
+        const gridClasses = classMap({
+            [`${carbonPrefix}--css-grid`]: !withinGrid,
+            [`${carbonPrefix}--subgrid ${carbonPrefix}--subgrid--wide`]: withinGrid,
+        });
+        const contentActionClasses = classMap({
+            [`${prefix}--page-header__breadcrumb__content-actions-with-global-actions`]: true,
+            [`${prefix}--page-header__breadcrumb__content-actions-with-global-actions--show`]: contentActionsClipped,
+        });
+        return html `
+      <div class="${gridClasses}">
+        <div
+          class="${carbonPrefix}--sm:col-span-4 ${carbonPrefix}--md:col-span-8 ${carbonPrefix}--lg:col-span-16 ${carbonPrefix}--css-grid-column"
+        >
+          <div class="${prefix}--page-header__breadcrumb-container">
+            <div class="${prefix}--page-header__breadcrumb-wrapper">
+              <slot name="icon"></slot>
+              <slot></slot>
+            </div>
+            <div class="${prefix}--page-header__breadcrumb__actions">
+              <div class="${contentActionClasses}">
+                <slot name="content-actions"></slot>
+              </div>
+              <slot name="page-actions"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+CDSPageHeaderBreadcrumb.styles = styles;
+__decorate([
+    property({ reflect: true })
+], CDSPageHeaderBreadcrumb.prototype, "border", void 0);
+__decorate([
+    property({ attribute: 'within-grid', type: Boolean })
+], CDSPageHeaderBreadcrumb.prototype, "withinGrid", void 0);
+__decorate([
+    property({ attribute: 'page-actions-flush', type: Boolean })
+], CDSPageHeaderBreadcrumb.prototype, "pageActionsFlush", void 0);
+__decorate([
+    property({ attribute: 'content-actions-flush', type: Boolean })
+], CDSPageHeaderBreadcrumb.prototype, "contentActionsFlush", void 0);
+__decorate([
+    consume({ context: pageHeaderContext, subscribe: true })
+], CDSPageHeaderBreadcrumb.prototype, "context", void 0);
+CDSPageHeaderBreadcrumb = __decorate([
+    carbonElement(`${prefix}-page-header-breadcrumb`)
+], CDSPageHeaderBreadcrumb);
+var CDSPageHeaderBreadcrumb$1 = CDSPageHeaderBreadcrumb;
+
+export { CDSPageHeaderBreadcrumb$1 as default };
+//# sourceMappingURL=page-header-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-breadcrumb.js","sources":["../../../src/components/page-header/page-header-breadcrumb.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAWH;;;AAGG;AAEH,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU,CAAA;AAAhD,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAM,CAAA,MAAA,GAAG,IAAI;AAEb;;;AAGG;QAEH,IAAU,CAAA,UAAA,GAAG,KAAK;AAElB;;AAEG;QAEH,IAAgB,CAAA,gBAAA,GAAG,KAAK;AAExB;;AAEG;QAEH,IAAmB,CAAA,mBAAA,GAAG,KAAK;;IAK3B,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,IAAI;QACpC,MAAM,EAAE,qBAAqB,EAAE,GAAG,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,MAAA,GAAA,OAAO,GAAI,EAAE;QAC/C,MAAM,WAAW,GAAG,QAAQ,CAAC;AAC3B,YAAA,CAAC,GAAG,YAAY,CAAA,UAAA,CAAY,GAAG,CAAC,UAAU;AAC1C,YAAA,CAAC,GAAG,YAAY,CAAA,UAAA,EAAa,YAAY,CAAiB,eAAA,CAAA,GAAG,UAAU;AACxE,SAAA,CAAC;QAEF,MAAM,oBAAoB,GAAG,QAAQ,CAAC;AACpC,YAAA,CAAC,CAAG,EAAA,MAAM,CAAgE,8DAAA,CAAA,GACxE,IAAI;AACN,YAAA,CAAC,CAAG,EAAA,MAAM,CAAsE,oEAAA,CAAA,GAC9E,qBAAqB;AACxB,SAAA,CAAC;AAEF,QAAA,OAAO,IAAI,CAAA;oBACK,WAAW,CAAA;;AAEZ,iBAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,oBAAoB,YAAY,CAAA;;wBAErG,MAAM,CAAA;0BACJ,MAAM,CAAA;;;;0BAIN,MAAM,CAAA;4BACJ,oBAAoB,CAAA;;;;;;;;KAQ3C;;;AAGI,uBAAM,CAAA,MAAA,GAAG,MAAH;AA7Db,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACb,CAAA,EAAA,uBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAOd,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE;AAClC,CAAA,EAAA,uBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAMnB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,OAAO,EAAE;AACnC,CAAA,EAAA,uBAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,MAAA,CAAA;AAMzB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,IAAI,EAAE,OAAO,EAAE;AACnC,CAAA,EAAA,uBAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,MAAA,CAAA;AAG5B,UAAA,CAAA;IADC,OAAO,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,EAAE;AAChD,CAAA,EAAA,uBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AA3BJ,uBAAuB,GAAA,UAAA,CAAA;AAD5B,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,uBAAA,CAAyB;AAC3C,CAAA,EAAA,uBAAuB,CAmE5B;AAED,gCAAe,uBAAuB;;;;"}

package/es-custom/components/page-header/page-header-content-text.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @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 { LitElement } from 'lit';
+/**
+ * Page header Content Text.
+ * @element c4p-page-header-content-text
+ */
+declare class CDSPageHeaderContentText extends LitElement {
+    /**
+     * Subtitle text of the page-header-content
+     */
+    subtitle: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSPageHeaderContentText;

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

@@ -0,0 +1,56 @@
+/**
+ * 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 { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+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';
+
+/**
+ * @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 Content Text.
+ * @element c4p-page-header-content-text
+ */
+let CDSPageHeaderContentText = class CDSPageHeaderContentText extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Subtitle text of the page-header-content
+         */
+        this.subtitle = '';
+    }
+    render() {
+        const { subtitle } = this;
+        return html `
+      ${subtitle &&
+            html `<h3 class="${prefix}--page-header__content__subtitle">
+        ${subtitle}
+      </h3>`}
+      <slot></slot>
+    `;
+    }
+};
+CDSPageHeaderContentText.styles = styles;
+__decorate([
+    property()
+], CDSPageHeaderContentText.prototype, "subtitle", void 0);
+CDSPageHeaderContentText = __decorate([
+    carbonElement(`${prefix}-page-header-content-text`)
+], CDSPageHeaderContentText);
+var CDSPageHeaderContentText$1 = CDSPageHeaderContentText;
+
+export { CDSPageHeaderContentText$1 as default };
+//# sourceMappingURL=page-header-content-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-content-text.js","sources":["../../../src/components/page-header/page-header-content-text.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAQH;;;AAGG;AAEH,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU,CAAA;AAAjD,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAQ,CAAA,QAAA,GAAG,EAAE;;IAEb,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI;AAEzB,QAAA,OAAO,IAAI,CAAA;QACP,QAAQ;YACV,IAAI,CAAA,cAAc,MAAM,CAAA;UACpB,QAAQ;AACN,WAAA,CAAA;;KAEP;;;AAGI,wBAAM,CAAA,MAAA,GAAG,MAAH;AAdb,UAAA,CAAA;AADC,IAAA,QAAQ;AACK,CAAA,EAAA,wBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AALV,wBAAwB,GAAA,UAAA,CAAA;AAD7B,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,yBAAA,CAA2B;AAC7C,CAAA,EAAA,wBAAwB,CAoB7B;AAED,iCAAe,wBAAwB;;;;"}

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

@@ -0,0 +1,42 @@
+/**
+ * @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 { LitElement } from 'lit';
+import '@carbon/web-components/es-custom/components/tooltip/index.js';
+/**
+ * Page header content.
+ * @element c4p-page-header-content
+ */
+declare class CDSPageHeaderContent extends LitElement {
+    /**
+     * Set to `true` if there are contextual actions
+     */
+    private _hasContextualActions;
+    /**
+     * Handles `slotchange` event.
+     */
+    protected _handleSlotChange({ target }: Event): void;
+    /**
+     * Title text of the page-header-content
+     */
+    title: string;
+    /**
+     * Set to `true` if the tag text has ellipsis applied
+     */
+    _hasEllipsisApplied: boolean;
+    /**
+     * Set to `true` if the breadcrumb bar is sitting within a grid
+     * (ie. when used in tandem with page-header-hero-image)
+     */
+    withinGrid: boolean;
+    context: any;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSPageHeaderContent;

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

@@ -0,0 +1,141 @@
+/**
+ * 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 { LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property, state } from 'lit/decorators.js';
+import { consume } from '@lit/context';
+import { prefix, carbonPrefix } from '../../globals/settings.js';
+import '@carbon/web-components/es-custom/components/tooltip/index.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';
+
+/**
+ * @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 content.
+ * @element c4p-page-header-content
+ */
+let CDSPageHeaderContent = class CDSPageHeaderContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Set to `true` if there are contextual actions
+         */
+        this._hasContextualActions = false;
+        /**
+         * Title text of the page-header-content
+         */
+        this.title = '';
+        /**
+         * Set to `true` if the tag text has ellipsis applied
+         */
+        this._hasEllipsisApplied = false;
+        /**
+         * Set to `true` if the breadcrumb bar is sitting within a grid
+         * (ie. when used in tandem with page-header-hero-image)
+         */
+        this.withinGrid = false;
+    }
+    /**
+     * Handles `slotchange` event.
+     */
+    _handleSlotChange({ target }) {
+        this._hasContextualActions = Boolean(target.assignedNodes());
+        if (this._hasContextualActions) {
+            this.setAttribute('contextual-actions', 'true');
+        }
+        else {
+            this.removeAttribute('contextual-actions');
+        }
+        this.requestUpdate();
+    }
+    updated() {
+        var _a;
+        const textContainer = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${prefix}--page-header__content__title`);
+        if (!textContainer || this._hasEllipsisApplied === true) {
+            return;
+        }
+        this._hasEllipsisApplied =
+            textContainer.scrollHeight > textContainer.clientHeight;
+    }
+    render() {
+        const { title, withinGrid, _hasEllipsisApplied: hasEllipsisApplied, _handleSlotChange: handleSlotChange, context, } = this;
+        const { contentActionsClipped } = context !== null && context !== void 0 ? context : {};
+        const gridClasses = classMap({
+            [`${carbonPrefix}--css-grid`]: !withinGrid,
+            [`${carbonPrefix}--subgrid ${carbonPrefix}--subgrid--wide`]: withinGrid,
+        });
+        const contentActionClasses = classMap({
+            [`${prefix}--page-header__content__page-actions`]: true,
+            [`${prefix}--page-header__content__page-actions--clipped`]: contentActionsClipped,
+        });
+        return html ` <div class="${gridClasses}">
+      <div
+        class="${carbonPrefix}--sm:col-span-4 ${carbonPrefix}--md:col-span-8 ${carbonPrefix}--lg:col-span-16 ${carbonPrefix}--css-grid-column"
+      >
+        <div class="${prefix}--page-header__content__title-wrapper">
+          <div class="${prefix}--page-header__content__start">
+            <div class="${prefix}--page-header__content__title-container">
+              <slot name="icon"></slot>
+              ${hasEllipsisApplied
+            ? html `
+                    <cds-custom-definition-tooltip>
+                      <span slot="definition">${title}</span>
+                      <h4 class="${prefix}--page-header__content__title">
+                        ${title}
+                      </h4>
+                    </cds-custom-definition-tooltip>
+                  `
+            : html `
+                    <h4 class="${prefix}--page-header__content__title">
+                      ${title}
+                    </h4>
+                  `}
+            </div>
+            <slot
+              name="contextual-actions"
+              @slotchange=${handleSlotChange}
+            ></slot>
+          </div>
+          <div class="${contentActionClasses}">
+            <slot name="page-actions"></slot>
+          </div>
+        </div>
+        <slot></slot>
+      </div>
+    </div>`;
+    }
+};
+CDSPageHeaderContent.styles = styles;
+__decorate([
+    property()
+], CDSPageHeaderContent.prototype, "title", void 0);
+__decorate([
+    state()
+], CDSPageHeaderContent.prototype, "_hasEllipsisApplied", void 0);
+__decorate([
+    property({ attribute: 'within-grid', type: Boolean })
+], CDSPageHeaderContent.prototype, "withinGrid", void 0);
+__decorate([
+    consume({ context: pageHeaderContext, subscribe: true })
+], CDSPageHeaderContent.prototype, "context", void 0);
+CDSPageHeaderContent = __decorate([
+    carbonElement(`${prefix}-page-header-content`)
+], CDSPageHeaderContent);
+var CDSPageHeaderContent$1 = CDSPageHeaderContent;
+
+export { CDSPageHeaderContent$1 as default };
+//# sourceMappingURL=page-header-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-content.js","sources":["../../../src/components/page-header/page-header-content.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAYH;;;AAGG;AAEH,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU,CAAA;AAA7C,IAAA,WAAA,GAAA;;AACE;;AAEG;QACK,IAAqB,CAAA,qBAAA,GAAG,KAAK;AAiBrC;;AAEG;QAEH,IAAK,CAAA,KAAA,GAAG,EAAE;AAEV;;AAEG;QAEH,IAAmB,CAAA,mBAAA,GAAG,KAAK;AAE3B;;;AAGG;QAEH,IAAU,CAAA,UAAA,GAAG,KAAK;;AAhClB;;AAEG;IACO,iBAAiB,CAAC,EAAE,MAAM,EAAS,EAAA;QAC3C,IAAI,CAAC,qBAAqB,GAAG,OAAO,CACjC,MAA0B,CAAC,aAAa,EAAE,CAC5C;AACD,QAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE;AAC9B,YAAA,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC;;aAC1C;AACL,YAAA,IAAI,CAAC,eAAe,CAAC,oBAAoB,CAAC;;QAE5C,IAAI,CAAC,aAAa,EAAE;;IAyBtB,OAAO,GAAA;;AACL,QAAA,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAClD,CAAA,CAAA,EAAI,MAAM,CAAA,6BAAA,CAA+B,CAC1C;QAED,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,mBAAmB,KAAK,IAAI,EAAE;YACvD;;AAGF,QAAA,IAAI,CAAC,mBAAmB;AACtB,YAAA,aAAa,CAAC,YAAY,GAAG,aAAa,CAAC,YAAY;;IAG3D,MAAM,GAAA;AACJ,QAAA,MAAM,EACJ,KAAK,EACL,UAAU,EACV,mBAAmB,EAAE,kBAAkB,EACvC,iBAAiB,EAAE,gBAAgB,EACnC,OAAO,GACR,GAAG,IAAI;QAER,MAAM,EAAE,qBAAqB,EAAE,GAAG,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,MAAA,GAAA,OAAO,GAAI,EAAE;QAE/C,MAAM,WAAW,GAAG,QAAQ,CAAC;AAC3B,YAAA,CAAC,GAAG,YAAY,CAAA,UAAA,CAAY,GAAG,CAAC,UAAU;AAC1C,YAAA,CAAC,GAAG,YAAY,CAAA,UAAA,EAAa,YAAY,CAAiB,eAAA,CAAA,GAAG,UAAU;AACxE,SAAA,CAAC;QAEF,MAAM,oBAAoB,GAAG,QAAQ,CAAC;AACpC,YAAA,CAAC,CAAG,EAAA,MAAM,CAAsC,oCAAA,CAAA,GAAG,IAAI;AACvD,YAAA,CAAC,CAAG,EAAA,MAAM,CAA+C,6CAAA,CAAA,GACvD,qBAAqB;AACxB,SAAA,CAAC;QAEF,OAAO,IAAI,CAAA,CAAA,aAAA,EAAgB,WAAW,CAAA;;AAEzB,eAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,oBAAoB,YAAY,CAAA;;sBAErG,MAAM,CAAA;wBACJ,MAAM,CAAA;0BACJ,MAAM,CAAA;;gBAEhB;cACE,IAAI,CAAA;;gDAE0B,KAAK,CAAA;mCAClB,MAAM,CAAA;0BACf,KAAK;;;AAGZ,kBAAA;cACD,IAAI,CAAA;iCACW,MAAM,CAAA;wBACf,KAAK;;AAEV,kBAAA,CAAA;;;;4BAIS,gBAAgB;;;wBAGpB,oBAAoB,CAAA;;;;;;WAMjC;;;AAGF,oBAAM,CAAA,MAAA,GAAG,MAAH;AA1Fb,UAAA,CAAA;AADC,IAAA,QAAQ;AACE,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMX,UAAA,CAAA;AADC,IAAA,KAAK;AACsB,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,MAAA,CAAA;AAO5B,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE;AAClC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAGnB,UAAA,CAAA;IADC,OAAO,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,EAAE;AAChD,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAzCJ,oBAAoB,GAAA,UAAA,CAAA;AADzB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,oBAAA,CAAsB;AACxC,CAAA,EAAA,oBAAoB,CAoHzB;AAED,6BAAe,oBAAoB;;;;"}

package/es-custom/components/page-header/page-header-hero-image.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @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 { LitElement } from 'lit';
+/**
+ * Page header Hero Image.
+ * @element c4p-page-header-hero-image
+ */
+declare class CDSPageHeaderHeroImage extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSPageHeaderHeroImage;

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

@@ -0,0 +1,38 @@
+/**
+ * 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 { LitElement, html } from 'lit';
+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';
+
+/**
+ * @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 Hero Image.
+ * @element c4p-page-header-hero-image
+ */
+let CDSPageHeaderHeroImage = class CDSPageHeaderHeroImage extends LitElement {
+    render() {
+        return html `<slot></slot> `;
+    }
+};
+CDSPageHeaderHeroImage.styles = styles;
+CDSPageHeaderHeroImage = __decorate([
+    carbonElement(`${prefix}-page-header-hero-image`)
+], CDSPageHeaderHeroImage);
+var CDSPageHeaderHeroImage$1 = CDSPageHeaderHeroImage;
+
+export { CDSPageHeaderHeroImage$1 as default };
+//# sourceMappingURL=page-header-hero-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-hero-image.js","sources":["../../../src/components/page-header/page-header-hero-image.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAOH;;;AAGG;AAEH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU,CAAA;IAC7C,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,cAAA,CAAgB;;;AAGtB,sBAAM,CAAA,MAAA,GAAG,MAAH;AALT,sBAAsB,GAAA,UAAA,CAAA;AAD3B,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,uBAAA,CAAyB;AAC3C,CAAA,EAAA,sBAAsB,CAM3B;AAED,+BAAe,sBAAsB;;;;"}