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

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

@@ -1 +1 @@
-{"version":3,"file":"page-header-tags-set.scss.js","names":[],"sources":["../../../../src/components/page-header/page-header-tags-set/page-header-tags-set.scss?lit"],"sourcesContent":["/*\n* Copyright IBM Corp. 2025, 2026\n*\n* This source code is licensed under the Apache-2.0 license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\n/* stylelint-disable  */\n\n$css--plex: true !default;\n\n/* Other Carbon settings. */\n@use 'sass:map';\n@use '@carbon/styles';\n@use '@carbon/styles/scss/themes';\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/spacing' as *;\n\n$prefix: 'c4p';\n$carbon-prefix: 'cds-custom';\n\n$block-class: #{$prefix}--page-header-tags-set;\n\n:host {\n  inline-size: 100%;\n  .#{$block-class} {\n    display: flex;\n    // Spacing between tags.\n    gap: $spacing-03;\n    box-sizing: border-box;\n    justify-content: flex-end;\n    inline-size: 100%;\n    white-space: nowrap;\n\n    &__popover-container {\n      padding: $spacing-05;\n\n      .#{$block-class}__popover-tag {\n        @include type.type-style('label-02');\n\n        margin: 0;\n      }\n\n      cds-custom-dismissible-tag {\n        margin: $spacing-01 0;\n      }\n    }\n\n    &__view-all {\n      --#{$carbon-prefix}-link-text-color: var(\n        --#{$carbon-prefix}-link-inverse\n      );\n      --#{$carbon-prefix}-link-hover-text-color: var(\n        --#{$carbon-prefix}-link-inverse-hover\n      );\n      --#{$carbon-prefix}-link-visited-text-color: var(\n        --#{$carbon-prefix}-link-inverse-visited\n      );\n      --#{$carbon-prefix}-link-focus-text-color: var(\n        --#{$carbon-prefix}-focus-inverse\n      );\n      margin-top: $spacing-03;\n      display: block;\n    }\n\n    &__modal-tags-search {\n      margin-block-start: $spacing-05;\n    }\n\n    &__modal-tags-container {\n      cds-custom-dismissible-tag {\n        margin: $spacing-02 $spacing-03 $spacing-02 0;\n      }\n    }\n  }\n\n  // Suppress custom elements until styles are loaded\n  #{$carbon-prefix}-tag:not(:defined),\n  #{$carbon-prefix}-dismissible-tag:not(:defined),\n  #{$carbon-prefix}-operational-tag:not(:defined) {\n    display: none;\n  }\n\n  cds-custom-modal-header {\n    padding-inline: $spacing-05;\n  }\n\n  cds-custom-modal-body {\n    @extend .#{$carbon-prefix}--modal-scroll-content;\n\n    cds-custom-tag {\n      margin-inline-start: 0;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"page-header-tags-set.scss.js","names":[],"sources":["../../../../src/components/page-header/page-header-tags-set/page-header-tags-set.scss?lit"],"sourcesContent":["/*\n* Copyright IBM Corp. 2025, 2026\n*\n* This source code is licensed under the Apache-2.0 license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\n/* stylelint-disable  */\n\n$css--plex: true !default;\n\n/* Other Carbon settings. */\n@use 'sass:map';\n@use '@carbon/styles';\n@use '@carbon/styles/scss/themes';\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/spacing' as *;\n\n$prefix: 'c4p';\n$carbon-prefix: 'cds-custom';\n\n$block-class: #{$prefix}--page-header-tags-set;\n\n:host {\n  inline-size: 100%;\n\n  // Visually-hidden live region for announcing overflow count changes to\n  // assistive technology — must remain in the accessibility tree.\n  .#{$block-class}__hidden-count-announcement {\n    position: absolute;\n    overflow: hidden;\n    inline-size: 1px;\n    block-size: 1px;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  .#{$block-class} {\n    display: flex;\n    // Spacing between tags.\n    gap: $spacing-03;\n    box-sizing: border-box;\n    justify-content: flex-end;\n    inline-size: 100%;\n    white-space: nowrap;\n\n    &__popover-container {\n      display: flex;\n      flex-direction: column;\n      gap: $spacing-02;\n      padding: $spacing-05;\n\n      .#{$block-class}__popover-tag {\n        @include type.type-style('label-02');\n\n        margin: 0;\n      }\n    }\n\n    &__view-all {\n      --#{$carbon-prefix}-link-text-color: var(\n        --#{$carbon-prefix}-link-inverse\n      );\n      --#{$carbon-prefix}-link-hover-text-color: var(\n        --#{$carbon-prefix}-link-inverse-hover\n      );\n      --#{$carbon-prefix}-link-visited-text-color: var(\n        --#{$carbon-prefix}-link-inverse-visited\n      );\n      --#{$carbon-prefix}-link-focus-text-color: var(\n        --#{$carbon-prefix}-focus-inverse\n      );\n      margin-top: $spacing-03;\n      display: block;\n    }\n\n    &__modal-tags-search {\n      margin-block-start: $spacing-05;\n    }\n\n    &__modal-tags-container {\n      cds-custom-dismissible-tag {\n        margin: $spacing-02 $spacing-03 $spacing-02 0;\n      }\n    }\n  }\n\n  // Suppress custom elements until styles are loaded\n  #{$carbon-prefix}-tag:not(:defined),\n  #{$carbon-prefix}-dismissible-tag:not(:defined),\n  #{$carbon-prefix}-operational-tag:not(:defined) {\n    display: none;\n  }\n\n  cds-custom-modal-header {\n    padding-inline: $spacing-05;\n  }\n\n  cds-custom-modal-body {\n    @extend .#{$carbon-prefix}--modal-scroll-content;\n\n    cds-custom-tag {\n      margin-inline-start: 0;\n    }\n  }\n}\n"],"mappings":""}

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

@@ -5,37 +5,3 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { TAG_SIZE, TAG_TYPE } from "@carbon/web-components/es/components/tag/defs";
-//#region src/components/page-header/page-header-tags-set/utils.ts
-/**
-* @license
-*
-* Copyright IBM Corp. 2025, 2026
-*
-* 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 words = "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".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;
-	});
-}
-const tagsData = generateTags({
-	count: 100,
-	size: TAG_SIZE.SMALL,
-	dismissible: true
-});
-//#endregion
-export { generateTags, tagsData };
-
-//# sourceMappingURL=utils.js.map

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

@@ -29,17 +29,17 @@ import CDSBreadcrumbItem from "@carbon/web-components/es/components/breadcrumb/b
 let CDSPageHeaderTitleBreadcrumb = class CDSPageHeaderTitleBreadcrumb extends CDSBreadcrumbItem {
 	constructor() {
 		super();
-		this.setAttribute("aria-hidden", "true");
+		this.setAttribute("inert", "");
 		new ContextConsumer(this, {
 			context: pageHeaderContext,
 			subscribe: true,
 			callback: (state) => {
 				if (state.titleClipped) {
 					this.classList.add(`c4p--page-header-title-breadcrumb-show__fallback`);
-					this.setAttribute("aria-hidden", "false");
+					this.removeAttribute("inert");
 				} else {
 					this.classList.remove(`c4p--page-header-title-breadcrumb-show__fallback`);
-					this.setAttribute("aria-hidden", "true");
+					this.setAttribute("inert", "");
 				}
 				if (state.withContent) {
 					this.classList.add(`c4p--page-header-title-breadcrumb-show__with-content`);
@@ -47,14 +47,17 @@ let CDSPageHeaderTitleBreadcrumb = class CDSPageHeaderTitleBreadcrumb extends CD
 				} else {
 					this.classList.remove(`c4p--page-header-title-breadcrumb-show__with-content`);
 					this.classList.add(`c4p--page-header-title-breadcrumb-show__by-default`);
-					this.setAttribute("aria-hidden", "false");
+					this.removeAttribute("inert");
 				}
 			}
 		});
 	}
 	render() {
 		return html`
-      <cds-custom-breadcrumb-item class="${"c4p"}--page-header-title-breadcrumb">
+      <cds-custom-breadcrumb-item
+        class="${"c4p"}--page-header-title-breadcrumb"
+        role="presentation"
+      >
         <slot></slot>
       </cds-custom-breadcrumb-item>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"page-header-title-breadcrumb.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-title-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 { html } from 'lit';\nimport { consume, ContextConsumer } from '@lit/context';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport CDSBreadcrumbItem from '@carbon/web-components/es/components/breadcrumb/breadcrumb-item';\nimport { prefix } from '../../globals/settings';\nimport styles from './page-header.scss?lit';\nimport { pageHeaderContext } from './context';\nimport { pageHeaderContextType } from './page-header';\n\n/**\n * Page header Title Breadcrumb\n * @element c4p-page-header-title-breadcrumb\n */\n@customElement(`${prefix}-page-header-title-breadcrumb`)\nclass CDSPageHeaderTitleBreadcrumb extends CDSBreadcrumbItem {\n  @consume({ context: pageHeaderContext, subscribe: true })\n  context;\n\n  constructor() {\n    super();\n    // Set initial aria-hidden since the element starts with opacity: 0\n    this.setAttribute('aria-hidden', 'true');\n    new ContextConsumer(this, {\n      context: pageHeaderContext,\n      subscribe: true,\n      callback: (state) => {\n        const isVisible = (state as pageHeaderContextType).titleClipped;\n\n        if (isVisible) {\n          this.classList.add(\n            `${prefix}--page-header-title-breadcrumb-show__fallback`\n          );\n          this.setAttribute('aria-hidden', 'false');\n        } else {\n          this.classList.remove(\n            `${prefix}--page-header-title-breadcrumb-show__fallback`\n          );\n          this.setAttribute('aria-hidden', 'true');\n        }\n        if ((state as pageHeaderContextType).withContent) {\n          this.classList.add(\n            `${prefix}--page-header-title-breadcrumb-show__with-content`\n          );\n          this.classList.remove(\n            `${prefix}--page-header-title-breadcrumb-show__by-default`\n          );\n        } else {\n          this.classList.remove(\n            `${prefix}--page-header-title-breadcrumb-show__with-content`\n          );\n          this.classList.add(\n            `${prefix}--page-header-title-breadcrumb-show__by-default`\n          );\n          // When showing by default, it should be visible to screen readers\n          this.setAttribute('aria-hidden', 'false');\n        }\n      },\n    });\n  }\n  render() {\n    return html`\n      <cds-custom-breadcrumb-item class=\"${prefix}--page-header-title-breadcrumb\">\n        <slot></slot>\n      </cds-custom-breadcrumb-item>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderTitleBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,+BAAA,MACM,qCAAqC,kBAAkB;CAI3D,cAAc;AACZ,SAAO;AAEP,OAAK,aAAa,eAAe,OAAO;AACxC,MAAI,gBAAgB,MAAM;GACxB,SAAS;GACT,WAAW;GACX,WAAW,UAAU;AAGnB,QAFmB,MAAgC,cAEpC;AACb,UAAK,UAAU,IACb,mDACD;AACD,UAAK,aAAa,eAAe,QAAQ;WACpC;AACL,UAAK,UAAU,OACb,mDACD;AACD,UAAK,aAAa,eAAe,OAAO;;AAE1C,QAAK,MAAgC,aAAa;AAChD,UAAK,UAAU,IACb,uDACD;AACD,UAAK,UAAU,OACb,qDACD;WACI;AACL,UAAK,UAAU,OACb,uDACD;AACD,UAAK,UAAU,IACb,qDACD;AAED,UAAK,aAAa,eAAe,QAAQ;;;GAG9C,CAAC;;CAEJ,SAAS;AACP,SAAO,IAAI;0CAC4B;;;;;;gBAMzBA;;;YApDf,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,CAAA,EAAA,6BAAA,WAAA,WAAA,KAAA,EAAA;2CAF1DC,cAAc,mCAAyC,CAAA,EAAA,6BAAA;AAyDxD,IAAA,uCAAe"}
+{"version":3,"file":"page-header-title-breadcrumb.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-title-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 { html } from 'lit';\nimport { consume, ContextConsumer } from '@lit/context';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport CDSBreadcrumbItem from '@carbon/web-components/es/components/breadcrumb/breadcrumb-item';\nimport { prefix } from '../../globals/settings';\nimport styles from './page-header.scss?lit';\nimport { pageHeaderContext } from './context';\nimport { pageHeaderContextType } from './page-header';\n\n/**\n * Page header Title Breadcrumb\n * @element c4p-page-header-title-breadcrumb\n */\n@customElement(`${prefix}-page-header-title-breadcrumb`)\nclass CDSPageHeaderTitleBreadcrumb extends CDSBreadcrumbItem {\n  @consume({ context: pageHeaderContext, subscribe: true })\n  context;\n\n  constructor() {\n    super();\n    // Use inert (not aria-hidden) to hide the element from both focus and\n    // the accessibility tree when it is visually hidden (opacity: 0).\n    // aria-hidden was removed: it causes a violation when focusable\n    // descendants exist inside shadow DOM (inert alone is sufficient).\n    this.setAttribute('inert', '');\n    new ContextConsumer(this, {\n      context: pageHeaderContext,\n      subscribe: true,\n      callback: (state) => {\n        const isVisible = (state as pageHeaderContextType).titleClipped;\n\n        if (isVisible) {\n          this.classList.add(\n            `${prefix}--page-header-title-breadcrumb-show__fallback`\n          );\n          this.removeAttribute('inert');\n        } else {\n          this.classList.remove(\n            `${prefix}--page-header-title-breadcrumb-show__fallback`\n          );\n          this.setAttribute('inert', '');\n        }\n        if ((state as pageHeaderContextType).withContent) {\n          this.classList.add(\n            `${prefix}--page-header-title-breadcrumb-show__with-content`\n          );\n          this.classList.remove(\n            `${prefix}--page-header-title-breadcrumb-show__by-default`\n          );\n        } else {\n          this.classList.remove(\n            `${prefix}--page-header-title-breadcrumb-show__with-content`\n          );\n          this.classList.add(\n            `${prefix}--page-header-title-breadcrumb-show__by-default`\n          );\n          // When showing by default it is always visible — remove inert\n          this.removeAttribute('inert');\n        }\n      },\n    });\n  }\n  render() {\n    return html`\n      <cds-custom-breadcrumb-item\n        class=\"${prefix}--page-header-title-breadcrumb\"\n        role=\"presentation\"\n      >\n        <slot></slot>\n      </cds-custom-breadcrumb-item>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderTitleBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,+BAAA,MACM,qCAAqC,kBAAkB;CAI3D,cAAc;AACZ,SAAO;AAKP,OAAK,aAAa,SAAS,GAAG;AAC9B,MAAI,gBAAgB,MAAM;GACxB,SAAS;GACT,WAAW;GACX,WAAW,UAAU;AAGnB,QAFmB,MAAgC,cAEpC;AACb,UAAK,UAAU,IACb,mDACD;AACD,UAAK,gBAAgB,QAAQ;WACxB;AACL,UAAK,UAAU,OACb,mDACD;AACD,UAAK,aAAa,SAAS,GAAG;;AAEhC,QAAK,MAAgC,aAAa;AAChD,UAAK,UAAU,IACb,uDACD;AACD,UAAK,UAAU,OACb,qDACD;WACI;AACL,UAAK,UAAU,OACb,uDACD;AACD,UAAK,UAAU,IACb,qDACD;AAED,UAAK,gBAAgB,QAAQ;;;GAGlC,CAAC;;CAEJ,SAAS;AACP,SAAO,IAAI;;uBAES;;;;;;;;gBAQNA;;;YA1Df,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,CAAA,EAAA,6BAAA,WAAA,WAAA,KAAA,EAAA;2CAF1DC,cAAc,mCAAyC,CAAA,EAAA,6BAAA;AA+DxD,IAAA,uCAAe"}

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

@@ -12,7 +12,7 @@ import { pageHeaderContext } from "./context.js";
 import { getHeaderOffset } from "./utils.js";
 import page_header_content_default from "./page-header-content.js";
 import { LitElement, html } from "lit";
-import { state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import { provide } from "@lit/context";
 //#region src/components/page-header/page-header.ts
@@ -31,15 +31,32 @@ import { provide } from "@lit/context";
 let CDSPageHeader = class CDSPageHeader extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.context = {};
+		this.fullWidthGrid = false;
+		this.narrowGrid = false;
+		this.context = {
+			fullWidthGrid: this.fullWidthGrid,
+			narrowGrid: this.narrowGrid
+		};
 	}
 	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`);
+		if (changedProperties.has("fullWidthGrid") || changedProperties.has("narrowGrid")) this.context = {
+			...this.context,
+			fullWidthGrid: this.fullWidthGrid,
+			narrowGrid: this.narrowGrid
+		};
 	}
 	connectedCallback() {
 		super.connectedCallback();
+		this.addEventListener(`c4p-page-header-content-actions-registered`, (e) => {
+			const { actionsEl } = e.detail;
+			if (!actionsEl) return;
+			this.actionsObserver?.disconnect();
+			this.actionsObserver = this._createActionsObserver();
+			this.actionsObserver.observe(actionsEl);
+		});
 		const contentElement = this.querySelector(`c4p-page-header-content`);
 		this.resizeObserver = new ResizeObserver((entries) => {
 			const contentEl = entries[0].target.querySelector(`c4p-page-header-content`);
@@ -59,62 +76,81 @@ let CDSPageHeader = class CDSPageHeader extends LitElement {
 		this.resizeObserver.observe(this);
 		const predefinedContentPadding = 24;
 		const totalHeaderOffset = getHeaderOffset(this);
-		const contentObserver = new IntersectionObserver((entries) => {
+		this.contentObserver = new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
-				if (!entry.isIntersecting) this.context = {
-					...this.context,
-					fullyCollapsed: true
-				};
-				else this.context = {
-					...this.context,
-					fullyCollapsed: false
-				};
+				const fullyCollapsed = !entry.isIntersecting;
+				if (this.context.fullyCollapsed !== fullyCollapsed) {
+					this.context = {
+						...this.context,
+						fullyCollapsed
+					};
+					this.dispatchEvent(new CustomEvent(`c4p-page-header-fully-collapsed`, {
+						bubbles: true,
+						composed: true,
+						detail: { fullyCollapsed }
+					}));
+				}
 			});
 		}, {
 			root: null,
 			rootMargin: `${(predefinedContentPadding + totalHeaderOffset + 40) * -1}px 0px 0px 0px`,
 			threshold: .1
 		});
-		const titleObserver = new IntersectionObserver((entries) => {
+		this.titleObserver = new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
-				if (!entry.isIntersecting) this.context = {
-					...this.context,
-					titleClipped: true
-				};
-				else this.context = {
-					...this.context,
-					titleClipped: false
-				};
+				const titleClipped = !entry.isIntersecting;
+				if (this.context.titleClipped !== titleClipped) {
+					this.context = {
+						...this.context,
+						titleClipped
+					};
+					this.dispatchEvent(new CustomEvent(`c4p-page-header-title-clipped`, {
+						bubbles: true,
+						composed: true,
+						detail: { titleClipped }
+					}));
+				}
 			});
 		}, {
 			root: null,
 			rootMargin: `${(predefinedContentPadding + totalHeaderOffset + 40) * -1}px 0px 0px 0px`,
 			threshold: .95
 		});
-		const actionsObserver = new IntersectionObserver((entries) => {
+		this.actionsObserver = this._createActionsObserver();
+		if (contentElement) {
+			this.contentObserver.observe(contentElement);
+			this.titleObserver.observe(contentElement);
+			this.actionsObserver.observe(contentElement);
+		}
+	}
+	_createActionsObserver() {
+		const totalHeaderOffset = getHeaderOffset(this);
+		return new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
-				if (!entry.isIntersecting) this.context = {
-					...this.context,
-					contentActionsClipped: true
-				};
-				else this.context = {
-					...this.context,
-					contentActionsClipped: false
-				};
+				const contentActionsClipped = !entry.isIntersecting;
+				if (this.context.contentActionsClipped !== contentActionsClipped) {
+					this.context = {
+						...this.context,
+						contentActionsClipped
+					};
+					this.dispatchEvent(new CustomEvent(`c4p-page-header-content-actions-clipped`, {
+						bubbles: true,
+						composed: true,
+						detail: { contentActionsClipped }
+					}));
+				}
 			});
 		}, {
 			root: null,
 			rootMargin: `${(totalHeaderOffset + 48 + 18) * -1}px 0px 0px 0px`,
 			threshold: .95
 		});
-		if (contentElement) {
-			contentObserver.observe(contentElement);
-			titleObserver.observe(contentElement);
-			actionsObserver.observe(contentElement);
-		}
 	}
 	disconnectedCallback() {
 		this.resizeObserver?.disconnect();
+		this.contentObserver?.disconnect();
+		this.titleObserver?.disconnect();
+		this.actionsObserver?.disconnect();
 		super.disconnectedCallback();
 	}
 	render() {
@@ -124,6 +160,16 @@ let CDSPageHeader = class CDSPageHeader extends LitElement {
 		this.styles = page_header_default$1;
 	}
 };
+__decorate([property({
+	attribute: "full-width-grid",
+	type: Boolean,
+	reflect: true
+})], CDSPageHeader.prototype, "fullWidthGrid", void 0);
+__decorate([property({
+	attribute: "narrow-grid",
+	type: Boolean,
+	reflect: true
+})], CDSPageHeader.prototype, "narrowGrid", void 0);
 __decorate([state(), provide({ context: pageHeaderContext })], CDSPageHeader.prototype, "context", void 0);
 CDSPageHeader = __decorate([carbonElement(`c4p-page-header`)], CDSPageHeader);
 var page_header_default = CDSPageHeader;

package/es-custom/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  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"}
+{"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 { property, 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  fullWidthGrid?: boolean;\n  narrowGrid?: boolean;\n}\n\n/**\n * Page header.\n * @element c4p-page-header\n */\n@customElement(`${prefix}-page-header`)\nclass CDSPageHeader extends LitElement {\n  /**\n   * Set to `true` to use a full-width Carbon CSS grid (no max-width cap).\n   */\n  @property({ attribute: 'full-width-grid', type: Boolean, reflect: true })\n  fullWidthGrid = false;\n\n  /**\n   * Set to `true` to use the Carbon narrow grid mode (content aligns to\n   * the gutter edge).\n   */\n  @property({ attribute: 'narrow-grid', type: Boolean, reflect: true })\n  narrowGrid = false;\n\n  @state()\n  @provide({ context: pageHeaderContext })\n  context: pageHeaderContextType = {\n    fullWidthGrid: this.fullWidthGrid,\n    narrowGrid: this.narrowGrid,\n  };\n\n  private resizeObserver: ResizeObserver | undefined;\n  private contentObserver: IntersectionObserver | undefined;\n  private titleObserver: IntersectionObserver | undefined;\n  private actionsObserver: IntersectionObserver | 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    if (\n      changedProperties.has('fullWidthGrid') ||\n      changedProperties.has('narrowGrid')\n    ) {\n      this.context = {\n        ...this.context,\n        fullWidthGrid: this.fullWidthGrid,\n        narrowGrid: this.narrowGrid,\n      };\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    // Listen for the page-actions container registration from page-header-content\n    this.addEventListener(\n      `${prefix}-page-header-content-actions-registered`,\n      (e: Event) => {\n        const { actionsEl } = (e as CustomEvent).detail as {\n          actionsEl: HTMLElement;\n        };\n        if (!actionsEl) {\n          return;\n        }\n        // Re-wire the actionsObserver to the specific page-actions element\n        this.actionsObserver?.disconnect();\n        this.actionsObserver = this._createActionsObserver();\n        this.actionsObserver.observe(actionsEl);\n      }\n    );\n\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    this.contentObserver = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          const fullyCollapsed = !entry.isIntersecting;\n          if (this.context.fullyCollapsed !== fullyCollapsed) {\n            this.context = { ...this.context, fullyCollapsed };\n            this.dispatchEvent(\n              new CustomEvent(`${prefix}-page-header-fully-collapsed`, {\n                bubbles: true,\n                composed: true,\n                detail: { fullyCollapsed },\n              })\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    this.titleObserver = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          const titleClipped = !entry.isIntersecting;\n          if (this.context.titleClipped !== titleClipped) {\n            this.context = { ...this.context, titleClipped };\n            this.dispatchEvent(\n              new CustomEvent(`${prefix}-page-header-title-clipped`, {\n                bubbles: true,\n                composed: true,\n                detail: { titleClipped },\n              })\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    this.actionsObserver = this._createActionsObserver();\n    if (contentElement) {\n      this.contentObserver.observe(contentElement);\n      this.titleObserver.observe(contentElement);\n      // actionsObserver starts on contentElement; once page-header-content fires\n      // its registration event, it is rewired to the specific page-actions element.\n      this.actionsObserver.observe(contentElement);\n    }\n  }\n\n  private _createActionsObserver(): IntersectionObserver {\n    const totalHeaderOffset = getHeaderOffset(this);\n    return new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          const contentActionsClipped = !entry.isIntersecting;\n          if (this.context.contentActionsClipped !== contentActionsClipped) {\n            this.context = { ...this.context, contentActionsClipped };\n            this.dispatchEvent(\n              new CustomEvent(`${prefix}-page-header-content-actions-clipped`, {\n                bubbles: true,\n                composed: true,\n                detail: { contentActionsClipped },\n              })\n            );\n          }\n        });\n      },\n      {\n        root: null,\n        // 48 -> breadcrumb bar height\n        // 18 -> content padding\n        rootMargin: `${(totalHeaderOffset + 48 + 18) * -1}px 0px 0px 0px`,\n        threshold: 0.95,\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.contentObserver?.disconnect();\n    this.titleObserver?.disconnect();\n    this.actionsObserver?.disconnect();\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAA,gBAAA,MACM,sBAAsB,WAAW;;;uBAKrB;oBAOH;iBAIoB;GAC/B,eAAe,KAAK;GACpB,YAAY,KAAK;GAClB;;CAOD,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;AAG3E,MACE,kBAAkB,IAAI,gBAAgB,IACtC,kBAAkB,IAAI,aAAa,CAEnC,MAAK,UAAU;GACb,GAAG,KAAK;GACR,eAAe,KAAK;GACpB,YAAY,KAAK;GAClB;;CAIL,oBAA0B;AACxB,QAAM,mBAAmB;AAEzB,OAAK,iBACH,+CACC,MAAa;GACZ,MAAM,EAAE,cAAe,EAAkB;AAGzC,OAAI,CAAC,UACH;AAGF,QAAK,iBAAiB,YAAY;AAClC,QAAK,kBAAkB,KAAK,wBAAwB;AACpD,QAAK,gBAAgB,QAAQ,UAAU;IAE1C;EAED,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;AAC/C,OAAK,kBAAkB,IAAI,sBACxB,YAAY;AACX,WAAQ,SAAS,UAAU;IACzB,MAAM,iBAAiB,CAAC,MAAM;AAC9B,QAAI,KAAK,QAAQ,mBAAmB,gBAAgB;AAClD,UAAK,UAAU;MAAE,GAAG,KAAK;MAAS;MAAgB;AAClD,UAAK,cACH,IAAI,YAAY,mCAAyC;MACvD,SAAS;MACT,UAAU;MACV,QAAQ,EAAE,gBAAgB;MAC3B,CAAC,CACH;;KAEH;KAEJ;GACE,MAAM;GACN,YAAY,IAAI,2BAA2B,oBAAoB,MAAM,GAAG;GACxE,WAAW;GACZ,CACF;AAED,OAAK,gBAAgB,IAAI,sBACtB,YAAY;AACX,WAAQ,SAAS,UAAU;IACzB,MAAM,eAAe,CAAC,MAAM;AAC5B,QAAI,KAAK,QAAQ,iBAAiB,cAAc;AAC9C,UAAK,UAAU;MAAE,GAAG,KAAK;MAAS;MAAc;AAChD,UAAK,cACH,IAAI,YAAY,iCAAuC;MACrD,SAAS;MACT,UAAU;MACV,QAAQ,EAAE,cAAc;MACzB,CAAC,CACH;;KAEH;KAEJ;GACE,MAAM;GACN,YAAY,IAAI,2BAA2B,oBAAoB,MAAM,GAAG;GACxE,WAAW;GACZ,CACF;AAED,OAAK,kBAAkB,KAAK,wBAAwB;AACpD,MAAI,gBAAgB;AAClB,QAAK,gBAAgB,QAAQ,eAAe;AAC5C,QAAK,cAAc,QAAQ,eAAe;AAG1C,QAAK,gBAAgB,QAAQ,eAAe;;;CAIhD,yBAAuD;EACrD,MAAM,oBAAoB,gBAAgB,KAAK;AAC/C,SAAO,IAAI,sBACR,YAAY;AACX,WAAQ,SAAS,UAAU;IACzB,MAAM,wBAAwB,CAAC,MAAM;AACrC,QAAI,KAAK,QAAQ,0BAA0B,uBAAuB;AAChE,UAAK,UAAU;MAAE,GAAG,KAAK;MAAS;MAAuB;AACzD,UAAK,cACH,IAAI,YAAY,2CAAiD;MAC/D,SAAS;MACT,UAAU;MACV,QAAQ,EAAE,uBAAuB;MAClC,CAAC,CACH;;KAEH;KAEJ;GACE,MAAM;GAGN,YAAY,IAAI,oBAAoB,KAAK,MAAM,GAAG;GAClD,WAAW;GACZ,CACF;;CAGH,uBAAuB;AACrB,OAAK,gBAAgB,YAAY;AACjC,OAAK,iBAAiB,YAAY;AAClC,OAAK,eAAe,YAAY;AAChC,OAAK,iBAAiB,YAAY;AAClC,QAAM,sBAAsB;;CAG9B,SAAS;AACP,SAAO,IAAI;;;gBAGGC;;;YArMf,SAAS;CAAE,WAAW;CAAmB,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,iBAAA,KAAA,EAAA;YAOxE,SAAS;CAAE,WAAW;CAAe,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,cAAA,KAAA,EAAA;YAGpE,OAAO,EACP,QAAQ,EAAE,SAAS,mBAAmB,CAAC,CAAA,EAAA,cAAA,WAAA,WAAA,KAAA,EAAA;4BAhBzCC,cAAc,kBAAwB,CAAA,EAAA,cAAA;AA6MvC,IAAA,sBAAe"}