npm - @carbon/ibm-products-web-components - Versions diffs - 0.44.0 → 0.45.0 - Mend

@carbon/ibm-products-web-components 0.44.0 → 0.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/es/components/tearsheet-preview/tearsheet-header.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tearsheet-header.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-header.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,qDAAqD,CAAC;;;;;;;;;;~~uBAGjD~~,CAAC;;;;;~~AAOb;;;;;;;;;GASG~~;AACH,cACM,kBAAmB,SAAQ,uBAA4C;IAE3E,IAAI,SAAY;IAEhB;;OAEG;IAEH,oBAAoB,EAAE,MAAM,CAAW;IAEvC;;OAEG;IAEH,eAAe,EAAE,OAAO,CAAS;IAEjC;;OAEG;IAMH,qBAAqB,EAAE,OAAO,CAAS;~~IAGvC~~,~~aAAa,UAAS;IAGtB,WAAW,UAAS;IAGpB,OAAO,CAAC,aAAa,CAAmB;IAExC;;;;;OAKG;IACH,OAAO,CAAC,yBAAyB;IAkBjC,~~iBAAiB;~~IAQjB~~,SAAS,CAAC,YAAY;~~IAStB~~,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc;~~IAUpD~~,OAAO,CAAC,wBAAwB;~~IAchC~~,~~OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,sBAAsB;IAuB9B,~~MAAM;~~IAgCN~~,MAAM,CAAC,MAAM,MAAU;IAEvB,MAAM,KAAK,uBAAuB,WAEjC;CACF;AACD,eAAe,kBAAkB,CAAC"}
1	+ {"version":3,"file":"tearsheet-header.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-header.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,qDAAqD,CAAC;;;;;;;;;;uBAGnC,CAAC;;;;;AAO3B;;;;;;;;;;;GAWG;AACH,cACM,kBAAmB,SAAQ,uBAA4C;IAE3E,IAAI,SAAY;IAEhB;;OAEG;IAEH,oBAAoB,EAAE,MAAM,CAAW;IAEvC;;OAEG;IAEH,eAAe,EAAE,OAAO,CAAS;IAEjC;;OAEG;IAMH,qBAAqB,EAAE,OAAO,CAAS;IAEvC,iBAAiB;IAUjB,SAAS,CAAC,YAAY;IAQtB,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc;IAiBpD,OAAO,CAAC,wBAAwB;IA8BhC,MAAM;IAcN,MAAM,CAAC,MAAM,MAAU;IAEvB,MAAM,KAAK,uBAAuB,WAEjC;IAED;;;;OAIG;IACH,MAAM,KAAK,mBAAmB,WAE7B;CACF;AACD,eAAe,kBAAkB,CAAC"}

package/es/components/tearsheet-preview/tearsheet-header.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { tearsheetSignal, updateTearsheetSignals } from "./tearsheet-signal.js";
 import { registerFocusableContainers } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
 import tearsheet_header_default$1 from "./tearsheet-header.scss.js";
 import { LitElement, html } from "lit";
-import { property, query, state } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-listener.js";
 import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import "@carbon/web-components/es/components/modal/index.js";
@@ -29,13 +29,15 @@ import { SignalWatcher } from "@lit-labs/signals";
 const blockClass = `c4p--tearsheet__next`;
 /**
 * Tearsheet Header component - Contains the header section with title, description, and actions.
+* The decorator (AI label) and close button are now rendered inside c4p-tearsheet-header-content
+* to achieve the correct DOM tab order: header-actions → decorator → close → header-content.
 *
 * @element c4p-tearsheet-header
 * @slot header-content - The main header content area (use c4p-tearsheet-header-content)
-* @slot header-navigation - Navigation tabs or breadcrumbs below the header
-* @slot header-actions - Action buttons in the header (e.g., settings, delete)
-* @slot decorator - AI label or other decorative elements
-* @fires c4p-tearsheet-header-close-button-clicked - Internal event to notify parent tearsheet
+* @slot - Default slot for other content
+* @slot navigation-bar - Navigation tabs or breadcrumbs below the header
+* @fires c4p-tearsheet-header-collapse-change - Internal event; parent tearsheet re-dispatches
+*   this as the public `c4p-preview-tearsheet-collapse-change` event.
 */
 let CDSTearsheetHeader = class CDSTearsheetHeader extends SignalWatcher(HostListenerMixin(LitElement)) {
 	constructor(..._args) {
@@ -44,69 +46,37 @@ let CDSTearsheetHeader = class CDSTearsheetHeader extends SignalWatcher(HostList
 		this.closeIconDescription = "Close";
 		this.hideCloseButton = false;
 		this.disableHeaderCollapse = false;
-		this._hasDecorator = false;
-		this._hasAILabel = false;
-	}
-	/**
-	* Handles user-initiated close request of this tearsheet.
-	* Dispatches an internal event to notify the parent tearsheet to close.
-	*
-	* @param triggeredBy The element that triggered this close request.
-	*/
-	_handleUserInitiatedClose(triggeredBy) {
-		const init = {
-			bubbles: true,
-			composed: true,
-			detail: { triggeredBy }
-		};
-		this.dispatchEvent(new CustomEvent(this.constructor.eventCloseButtonClicked, init));
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		updateTearsheetSignals({ disableHeaderCollapse: this.disableHeaderCollapse });
+		updateTearsheetSignals({
+			disableHeaderCollapse: this.disableHeaderCollapse,
+			closeIconDescription: this.closeIconDescription,
+			hideCloseButton: this.hideCloseButton
+		});
 	}
 	firstUpdated() {
-		this.updateHeaderOffset();
 		const uniqueId = tearsheetSignal.get().uniqueId;
 		if (uniqueId) registerFocusableContainers(this.shadowRoot, uniqueId);
 	}
 	updated(_changedProperties) {
 		if (_changedProperties.has("disableHeaderCollapse")) updateTearsheetSignals({ disableHeaderCollapse: this.disableHeaderCollapse });
-		this.updateHeaderOffset();
+		if (_changedProperties.has("closeIconDescription")) updateTearsheetSignals({ closeIconDescription: this.closeIconDescription });
+		if (_changedProperties.has("hideCloseButton")) updateTearsheetSignals({ hideCloseButton: this.hideCloseButton });
 		this.updateCollapsedAttribute();
 	}
 	updateCollapsedAttribute() {
 		const { fullyCollapsed, open } = tearsheetSignal.get();
+		const wasCollapsed = this.hasAttribute("collapsed");
 		if (open) if (fullyCollapsed) this.setAttribute("collapsed", "");
 		else this.removeAttribute("collapsed");
 		else this.removeAttribute("collapsed");
-	}
-	updateHeaderOffset() {
-		const { open, isSm } = tearsheetSignal.get();
-		if (open) {
-			const offset = (this.decoratorSlot.assignedElements({ flatten: true })?.[0]?.getBoundingClientRect().width ?? 0) + (!this.hideCloseButton ? 24 : 0) + (isSm ? 8 : 0);
-			document.documentElement.style.setProperty("--tearsheet-header-action-offset", `${offset}px`);
-		}
-	}
-	_handleDecoratorChange(e) {
-		this._hasAILabel = false;
-		const childItems = e.target.assignedElements();
-		this._hasDecorator = childItems.length > 0;
-		if (this._hasDecorator) {
-			for (const item of childItems) if (item.tagName.toLowerCase() === "cds-ai-label") {
-				this._hasAILabel = true;
-				break;
-			}
-		}
-		if (this._hasAILabel || this._hasDecorator) {
-			childItems[0].setAttribute("size", "sm");
-			this.setAttribute(this._hasAILabel ? "ai-label" : "decorator", "");
-			this.removeAttribute(this._hasAILabel ? "decorator" : "ai-label");
-		} else {
-			this.removeAttribute("decorator");
-			this.removeAttribute("ai-label");
-		}
-		this.updateHeaderOffset();
+		const isNowCollapsed = this.hasAttribute("collapsed");
+		if (isNowCollapsed !== wasCollapsed) this.dispatchEvent(new CustomEvent(this.constructor.eventCollapseChange, {
+			bubbles: true,
+			composed: true,
+			detail: { collapsed: isNowCollapsed }
+		}));
 	}
 	render() {
 		const { fullyCollapsed } = tearsheetSignal.get();
@@ -115,22 +85,6 @@ let CDSTearsheetHeader = class CDSTearsheetHeader extends SignalWatcher(HostList
 			[`${blockClass}__header--with-close-icon`]: !!this.hideCloseButton,
 			[`${blockClass}__header-collapsed`]: !!fullyCollapsed
 		})}">
-      <div
-        slot="ai-label"
-        role="${this._hasDecorator ? "complementary" : void 0}"
-        aria-label="${this._hasDecorator ? "Decorator" : void 0}"
-      >
-        <slot
-          name="decorator"
-          @slotchange=${this._handleDecoratorChange}
-        ></slot>
-      </div>
-      <cds-modal-close-button
-        close-button-label=${this.closeIconDescription}
-        @click="${this._handleUserInitiatedClose}"
-        class="${this.hideCloseButton ? `${blockClass}__header--no-close-icon` : ""}"
-      ></cds-modal-close-button>
       <slot name="header-content"></slot>
       <slot></slot>
       <slot name="navigation-bar"></slot>
@@ -142,6 +96,14 @@ let CDSTearsheetHeader = class CDSTearsheetHeader extends SignalWatcher(HostList
 	static get eventCloseButtonClicked() {
 		return `c4p-tearsheet-header-close-button-clicked`;
 	}
+	/**
+	* Internal event fired when the collapse state changes.
+	* The parent `c4p-preview-tearsheet` intercepts this and re-dispatches it as
+	* the public `c4p-preview-tearsheet-collapse-change` event.
+	*/
+	static get eventCollapseChange() {
+		return `c4p-tearsheet-header-collapse-change`;
+	}
 };
 __decorate([property({ reflect: true })], CDSTearsheetHeader.prototype, "slot", void 0);
 __decorate([property({
@@ -158,9 +120,6 @@ __decorate([property({
 	reflect: true,
 	attribute: "disable-header-collapse"
 })], CDSTearsheetHeader.prototype, "disableHeaderCollapse", void 0);
-__decorate([state()], CDSTearsheetHeader.prototype, "_hasDecorator", void 0);
-__decorate([state()], CDSTearsheetHeader.prototype, "_hasAILabel", void 0);
-__decorate([query("slot[name=\"decorator\"]")], CDSTearsheetHeader.prototype, "decoratorSlot", void 0);
 CDSTearsheetHeader = __decorate([carbonElement(`c4p-tearsheet-header`)], CDSTearsheetHeader);
 var tearsheet_header_default = CDSTearsheetHeader;
 //#endregion

package/es/components/tearsheet-preview/tearsheet-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tearsheet-header.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet-header.ts"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2026\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, LitElement, PropertyValues } from 'lit';\nimport { property, ~~query, state~~ } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport '@carbon/web-components/es/components/modal/index.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport styles from './tearsheet-header.scss?lit';\nimport { tearsheetSignal, updateTearsheetSignals } from './tearsheet-signal';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport { registerFocusableContainers } from '../../utilities/manageFocusTrap/manageFocusTrap';\n\nconst blockClass = `${prefix}--tearsheet__next`;\n\n/\n Tearsheet Header component - Contains the header section with title, description, and actions.\n \n ~~@element~~ c4p-tearsheet-header\n * ~~@slot~~ header-~~content~~ - ~~The~~ ~~main~~ header content ~~area~~ ~~(use~~ c4p-tearsheet-header~~-content)~~\n * @slot header-~~navigation~~ - ~~Navigation~~ ~~tabs~~ or ~~breadcrumbs~~ ~~below~~ ~~the~~ header\n * @slot ~~header~~-~~actions~~ - ~~Action~~ ~~buttons~~ in ~~the header (e.g., settings, delete)~~\n * @slot ~~decorator~~ - AI ~~label~~ or ~~other~~ ~~decorative~~ ~~elements~~\n * @fires c4p-tearsheet-header-~~close~~-~~button-clicked~~ - Internal event ~~to notify~~ parent tearsheet\n /\n@customElement(`${prefix}-tearsheet-header`)\nclass CDSTearsheetHeader extends SignalWatcher(HostListenerMixin(LitElement)) {\n @property({ reflect: true })\n slot = 'header';\n\n /\n Tooltip text and aria label for the Close button icon.\n /\n @property({ reflect: true, attribute: 'close-icon-description' })\n closeIconDescription: string = 'Close';\n\n /\n Optional parameter to hide the progress indicator when multiple steps are used.\n /\n @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n hideCloseButton: boolean = false;\n\n /\n Default header collapse/expand while scrolling the main content can be disabled by setting this\n /\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'disable-header-collapse',\n })\n disableHeaderCollapse: boolean = false;\n\n @state()\n _hasDecorator = false;\n\n @state()\n _hasAILabel = false;\n\n @query('slot[name=\"decorator\"]')\n private decoratorSlot!: HTMLSlotElement;\n\n /\n Handles user-initiated close request of this tearsheet.\n * Dispatches an internal event to notify the parent tearsheet to close.\n \n @param triggeredBy The element that triggered this close request.\n */\n private _handleUserInitiatedClose(triggeredBy: EventTarget \| null) {\n const init = {\n bubbles: true,\n composed: true,\n detail: {\n triggeredBy,\n },\n };\n\n // Dispatch internal event to notify parent tearsheet\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTearsheetHeader).eventCloseButtonClicked,\n init\n )\n );\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Initialize signal with the initial prop ~~value~~ before any child components connect\n updateTearsheetSignals({\n disableHeaderCollapse: this.disableHeaderCollapse,\n });\n }\n\n protected firstUpdated() {\n ~~this.updateHeaderOffset();\n~~ // Register with the current tearsheet's uniqueId\n const uniqueId = tearsheetSignal.get().uniqueId;\n if (uniqueId) {\n registerFocusableContainers(this.shadowRoot, uniqueId);\n }\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (_changedProperties.has('disableHeaderCollapse')) {\n updateTearsheetSignals({\n disableHeaderCollapse: this.disableHeaderCollapse,\n });\n }\n this.~~updateHeaderOffset~~();\n this.updateCollapsedAttribute();\n }\n\n private updateCollapsedAttribute() {\n const { fullyCollapsed, open } = tearsheetSignal.get();\n\n if (open) {\n if (fullyCollapsed) {\n this.setAttribute('collapsed', '');\n } else {\n this.removeAttribute('collapsed');\n }\n } else {\n this.removeAttribute('collapsed');\n }\n }\n~~\n private updateHeaderOffset() {\n~~ ~~const~~ { ~~open,~~ ~~isSm~~ } = ~~tearsheetSignal.get();\n if~~ ~~(open)~~ ~~{\n const~~ ~~assigned~~ = ~~this.decoratorSlot.assignedElements({ flatten: true });\n~~\n const ~~decoratorWidth~~ = ~~assigned?.[0]?.getBoundingClientRect().width ?? 0;\n const closeButtonWidth = !~~this.~~hideCloseButton ? 24 : 0;\n const offset = decoratorWidth + closeButtonWidth +~~ (~~isSm ? 8 : 0);\n\n document.documentElement.style.setProperty(\n~~ '~~--tearsheet-header-action-offset~~'~~,\n `${offset}px`\n~~ );\n ~~}\n }\n\n private~~ ~~_handleDecoratorChange~~(e: ~~Event~~) {\n this.~~_hasAILabel = false;\n const childItems =~~ (~~e.target as HTMLSlotElement).assignedElements();\n this._hasDecorator = childItems.length > 0;\n if (this._hasDecorator) {~~\n ~~for~~ (~~const item of childItems) {~~\n if (~~item~~.~~tagName.toLowerCase()~~ ~~===~~ ~~'cds-ai-label'~~) ~~{\n this~~.~~_hasAILabel = true;\~~n ~~break;\n }\n }\n }\n if (this._hasAILabel \|\| this._hasDecorator)~~ {\n ~~childItems[0].setAttribute('size',~~ ~~'sm');\~~n ~~this.setAttribute(this._hasAILabel ? 'ai-label'~~ : ~~'decorator', '');\~~n ~~this.removeAttribute(this._hasAILabel~~ ? ~~'decorator'~~ : ~~'ai-label');\~~n } ~~else {~~\n ~~this.removeAttribute('decorator'~~);\n ~~this.removeAttribute('ai-label'~~);\n }\n~~\n this.updateHeaderOffset();\n~~ }\n render() {\n const { fullyCollapsed } = tearsheetSignal.get();\n const classes = classMap({\n [`${blockClass}__header`]: true,\n [`${blockClass}__header--with-close-icon`]: !!this.hideCloseButton,\n [`${blockClass}__header-collapsed`]: !!fullyCollapsed,\n });\n return html`<cds-modal-header class=\"${classes}\">\n <~~div\n~~ slot~~=\"ai-label\"\n role=\"${this._hasDecorator~~ ~~? 'complementary' : undefined}\"\n aria-label=\"${this._hasDecorator ? 'Decorator' : undefined}\"\n >\n <slot\n~~ name=\"decorator\"\n @slotchange=${this._handleDecoratorChange}\n ></slot>\n </div>\n <cds-modal-close-button\n close-button-label=${this.closeIconDescription}\n @click=\"${this._handleUserInitiatedClose}\"\n class=\"${this.hideCloseButton\n ? `${blockClass}__header--no-close-icon`\n : ''}\"\n ></cds-modal-close-button>\n\n <slot name=\"header-content\"></slot>\n <slot></slot>\n <slot name=\"navigation-bar\"></slot>\n </cds-modal-header>`;\n }\n\n static styles = styles;\n\n static get eventCloseButtonClicked() {\n return `${prefix}-tearsheet-header-close-button-clicked`;\n }\n}\nexport default CDSTearsheetHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,aAAa~~;;;;;;;;;;;AAYnB~~,IAAA,qBAAA,MACM,2BAA2B,cAAc,kBAAkB,WAAW,CAAC,CAAC;;;cAErE;8BAMwB;yBAMJ;+BAUM~~;uBAGjB;qBAGF;;;;;;;;CAWd,0BAAkC,aAAiC;EACjE,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,QAAQ,EACN,aACD;GACF;AAGD,OAAK,cACH,IAAI,YACD,KAAK,YAA0C,yBAChD,KACD,CACF~~;;~~CAGH~~,oBAAoB;AAClB,QAAM,mBAAmB;AAEzB,yBAAuB,~~EACrB,~~uBAAuB,KAAK,~~uBAC7B~~,CAAC;;CAGJ,eAAyB;~~AACvB~~,~~OAAK,oBAAoB;EAEzB,~~MAAM,WAAW,gBAAgB,KAAK,CAAC;AACvC,MAAI,SACF,6BAA4B,KAAK,YAAY,SAAS;;CAI1D,QAAkB,oBAAoC;AACpD,MAAI,mBAAmB,IAAI,wBAAwB,CACjD,wBAAuB,EACrB,uBAAuB,KAAK,uBAC7B,CAAC;AAEJ,~~OAAK~~,~~oBAAoB;AACzB~~,~~OAAK~~,~~0BAA0B;;CAGjC~~,~~2BAAmC;EACjC~~,~~MAAM~~,~~EAAE~~,~~gBAAgB~~,~~SAAS~~,~~gBAAgB~~,~~KAAK~~;~~AAEtD~~,MAAI,~~KACF~~,~~KAAI~~,~~eACF~~,~~MAAK~~,~~aAAa~~,~~aAAa~~,~~GAAG;MAElC~~,~~MAAK~~,~~gBAAgB~~,~~YAAY~~;~~MAGnC~~,~~MAAK~~,~~gBAAgB,YAAY~~;;~~CAIrC~~,~~qBAA6B~~;~~EAC3B~~,MAAM,EAAE,~~MAAM~~,SAAS,gBAAgB,KAAK;~~AAC5C~~,~~MAAI,~~MAAM~~;GAKR~~,~~MAAM~~,~~UAJW,~~KAAK,~~cAAc~~,~~iBAAiB~~,~~EAAE~~,~~SAAS~~,~~MAAM~~,~~CAEvC~~,~~GAAG~~,~~IAAI~~,~~uBAAuB~~,~~CAAC,SAAS,MAC9C,CAAC,KAAK,kBAAkB,KAAK,MACF,OAAO,IAAI~~;~~AAE/D~~,~~YAAS~~,gBAAgB,~~MAAM,YAC7B,oCACA,GAAG,OAAO,IACX;;;CAIL,uBAA+B,GAAU~~;~~AACvC~~,~~OAAK~~,~~cAAc;EACnB,MAAM,aAAc,EAAE,OAA2B,kBAAkB;AACnE,OAAK,~~gBAAgB,~~WAAW,SAAS~~;~~AACzC~~,~~MAAI,KAAK;QACF,~~MAAM,~~QAAQ~~,~~WACjB,KAAI,~~KAAK,~~QAAQ,~~aAAa,~~KAAK,gBAAgB~~;~~AACjD~~,~~SAAK,cAAc;AACnB;;;AAIN,~~MAAI,~~KAAK~~,~~eAAe~~,~~KAAK~~,~~eAAe;AAC1C~~,~~cAAW~~,~~GAAG~~,~~aAAa~~,~~QAAQ~~,~~KAAK~~;~~AACxC~~,~~QAAK~~,~~aAAa,KAAK,cAAc,aAAa,aAAa,GAAG~~;~~AAClE~~,~~QAAK~~,~~gBAAgB~~,~~KAAK,cAAc,cAAc,~~WAAW~~;SAC5D;AACL~~,~~QAAK,~~gBAAgB~~,YAAY~~;~~AACjC~~,~~QAAK~~,~~gBAAgB,WAAW~~;;~~AAGlC~~,~~OAAK,oBAAoB;;CAE3B,~~SAAS;EACP,MAAM,EAAE,mBAAmB,gBAAgB,KAAK;AAMhD,SAAO,IAAI,4BALK,SAAS;IACtB,GAAG,WAAW,YAAY;IAC1B,GAAG,WAAW,6BAA6B,CAAC,CAAC,KAAK;IAClD,GAAG,WAAW,sBAAsB,CAAC,CAAC;GACxC,CAC6C,CAAC~~;;;gBAGnC~~,~~KAAK~~,~~gBAAgB,kBAAkB,KAAA,EAAU;sBAC3C,KAAK,gBAAgB,cAAc,KAAA,EAAU;;;;wBAI3C,KAAK,uBAAuB;;;;6BAIvB,KAAK,qBAAqB;kBACrC,KAAK,~~0BAA0B;~~iBAChC~~,~~KAAK~~,~~kBACV,GAAG,~~WAAW,~~2BACd,GAAG;;;;;;;;;gBASGA;;CAEhB,WAAW,0BAA0B~~;~~AACnC~~,SAAO;;;~~YA7KR~~,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS;CAAE,SAAS;CAAM,WAAW;CAA0B,CAAC,CAAA,EAAA,mBAAA,WAAA,wBAAA,KAAA,EAAA;YAMhE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAqB,CAAC,CAAA,EAAA,mBAAA,WAAA,mBAAA,KAAA,EAAA;YAM1E,SAAS;CACR,MAAM;CACN,SAAS;CACT,WAAW;CACZ,CAAC,CAAA,EAAA,mBAAA,WAAA,yBAAA,KAAA,EAAA;~~YAGD~~,~~OAAO,CAAA,EAAA,mBAAA,WAAA,iBAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,mBAAA,WAAA,eAAA,KAAA,EAAA;YAGP,MAAM,2BAAyB,CAAA,EAAA,mBAAA,WAAA,iBAAA,KAAA,EAAA;iCAjCjCC,~~cAAc,uBAA6B,CAAA,EAAA,mBAAA;~~AAkL5C~~,IAAA,2BAAe"}
1	+ {"version":3,"file":"tearsheet-header.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet-header.ts"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2026\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, LitElement, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport '@carbon/web-components/es/components/modal/index.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport styles from './tearsheet-header.scss?lit';\nimport { tearsheetSignal, updateTearsheetSignals } from './tearsheet-signal';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport { registerFocusableContainers } from '../../utilities/manageFocusTrap/manageFocusTrap';\n\nconst blockClass = `${prefix}--tearsheet__next`;\n\n/\n Tearsheet Header component - Contains the header section with title, description, and actions.\n * The decorator (AI label) and close button are now rendered inside c4p-tearsheet-header-content\n * to achieve the correct DOM tab order: header-actions → decorator → close → header-content.\n \n @element c4p-tearsheet-header\n * @slot header-content - The main header content area (use c4p-tearsheet-header-content)\n * @slot - Default slot for other content\n * @slot navigation-bar - Navigation tabs or breadcrumbs below the header\n * @fires c4p-tearsheet-header-collapse-change - Internal event; parent tearsheet re-dispatches\n * this as the public `c4p-preview-tearsheet-collapse-change` event.\n /\n@customElement(`${prefix}-tearsheet-header`)\nclass CDSTearsheetHeader extends SignalWatcher(HostListenerMixin(LitElement)) {\n @property({ reflect: true })\n slot = 'header';\n\n /\n Tooltip text and aria label for the Close button icon.\n /\n @property({ reflect: true, attribute: 'close-icon-description' })\n closeIconDescription: string = 'Close';\n\n /\n Optional parameter to hide the progress indicator when multiple steps are used.\n /\n @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n hideCloseButton: boolean = false;\n\n /\n Default header collapse/expand while scrolling the main content can be disabled by setting this\n /\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'disable-header-collapse',\n })\n disableHeaderCollapse: boolean = false;\n\n connectedCallback() {\n super.connectedCallback();\n // Initialize signal with the initial prop values before any child components connect\n updateTearsheetSignals({\n disableHeaderCollapse: this.disableHeaderCollapse,\n closeIconDescription: this.closeIconDescription,\n hideCloseButton: this.hideCloseButton,\n });\n }\n\n protected firstUpdated() {\n // Register with the current tearsheet's uniqueId\n const uniqueId = tearsheetSignal.get().uniqueId;\n if (uniqueId) {\n registerFocusableContainers(this.shadowRoot, uniqueId);\n }\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (_changedProperties.has('disableHeaderCollapse')) {\n updateTearsheetSignals({\n disableHeaderCollapse: this.disableHeaderCollapse,\n });\n }\n if (_changedProperties.has('closeIconDescription')) {\n updateTearsheetSignals({\n closeIconDescription: this.closeIconDescription,\n });\n }\n if (_changedProperties.has('hideCloseButton')) {\n updateTearsheetSignals({ hideCloseButton: this.hideCloseButton });\n }\n this.updateCollapsedAttribute();\n }\n\n private updateCollapsedAttribute() {\n const { fullyCollapsed, open } = tearsheetSignal.get();\n const wasCollapsed = this.hasAttribute('collapsed');\n\n if (open) {\n if (fullyCollapsed) {\n this.setAttribute('collapsed', '');\n } else {\n this.removeAttribute('collapsed');\n }\n } else {\n this.removeAttribute('collapsed');\n }\n\n // Dispatch a single unified event only when the state actually changes\n const isNowCollapsed = this.hasAttribute('collapsed');\n if (isNowCollapsed !== wasCollapsed) {\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTearsheetHeader).eventCollapseChange,\n {\n bubbles: true,\n composed: true,\n detail: { collapsed: isNowCollapsed },\n }\n )\n );\n }\n }\n\n render() {\n const { fullyCollapsed } = tearsheetSignal.get();\n const classes = classMap({\n [`${blockClass}__header`]: true,\n [`${blockClass}__header--with-close-icon`]: !!this.hideCloseButton,\n [`${blockClass}__header-collapsed`]: !!fullyCollapsed,\n });\n return html`<cds-modal-header class=\"${classes}\">\n <slot name=\"header-content\"></slot>\n <slot></slot>\n <slot name=\"navigation-bar\"></slot>\n </cds-modal-header>`;\n }\n\n static styles = styles;\n\n static get eventCloseButtonClicked() {\n return `${prefix}-tearsheet-header-close-button-clicked`;\n }\n\n /\n Internal event fired when the collapse state changes.\n * The parent `c4p-preview-tearsheet` intercepts this and re-dispatches it as\n * the public `c4p-preview-tearsheet-collapse-change` event.\n */\n static get eventCollapseChange() {\n return `${prefix}-tearsheet-header-collapse-change`;\n }\n}\nexport default CDSTearsheetHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,aAAa;;;;;;;;;;;;;AAcnB,IAAA,qBAAA,MACM,2BAA2B,cAAc,kBAAkB,WAAW,CAAC,CAAC;;;cAErE;8BAMwB;yBAMJ;+BAUM;;CAEjC,oBAAoB;AAClB,QAAM,mBAAmB;AAEzB,yBAAuB;GACrB,uBAAuB,KAAK;GAC5B,sBAAsB,KAAK;GAC3B,iBAAiB,KAAK;GACvB,CAAC;;CAGJ,eAAyB;EAEvB,MAAM,WAAW,gBAAgB,KAAK,CAAC;AACvC,MAAI,SACF,6BAA4B,KAAK,YAAY,SAAS;;CAI1D,QAAkB,oBAAoC;AACpD,MAAI,mBAAmB,IAAI,wBAAwB,CACjD,wBAAuB,EACrB,uBAAuB,KAAK,uBAC7B,CAAC;AAEJ,MAAI,mBAAmB,IAAI,uBAAuB,CAChD,wBAAuB,EACrB,sBAAsB,KAAK,sBAC5B,CAAC;AAEJ,MAAI,mBAAmB,IAAI,kBAAkB,CAC3C,wBAAuB,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;AAEnE,OAAK,0BAA0B;;CAGjC,2BAAmC;EACjC,MAAM,EAAE,gBAAgB,SAAS,gBAAgB,KAAK;EACtD,MAAM,eAAe,KAAK,aAAa,YAAY;AAEnD,MAAI,KACF,KAAI,eACF,MAAK,aAAa,aAAa,GAAG;MAElC,MAAK,gBAAgB,YAAY;MAGnC,MAAK,gBAAgB,YAAY;EAInC,MAAM,iBAAiB,KAAK,aAAa,YAAY;AACrD,MAAI,mBAAmB,aACrB,MAAK,cACH,IAAI,YACD,KAAK,YAA0C,qBAChD;GACE,SAAS;GACT,UAAU;GACV,QAAQ,EAAE,WAAW,gBAAgB;GACtC,CACF,CACF;;CAIL,SAAS;EACP,MAAM,EAAE,mBAAmB,gBAAgB,KAAK;AAMhD,SAAO,IAAI,4BALK,SAAS;IACtB,GAAG,WAAW,YAAY;IAC1B,GAAG,WAAW,6BAA6B,CAAC,CAAC,KAAK;IAClD,GAAG,WAAW,sBAAsB,CAAC,CAAC;GACxC,CAC6C,CAAC;;;;;;;gBAOjCA;;CAEhB,WAAW,0BAA0B;AACnC,SAAO;;;;;;;CAQT,WAAW,sBAAsB;AAC/B,SAAO;;;YApHR,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS;CAAE,SAAS;CAAM,WAAW;CAA0B,CAAC,CAAA,EAAA,mBAAA,WAAA,wBAAA,KAAA,EAAA;YAMhE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAqB,CAAC,CAAA,EAAA,mBAAA,WAAA,mBAAA,KAAA,EAAA;YAM1E,SAAS;CACR,MAAM;CACN,SAAS;CACT,WAAW;CACZ,CAAC,CAAA,EAAA,mBAAA,WAAA,yBAAA,KAAA,EAAA;iCAxBHC,cAAc,uBAA6B,CAAA,EAAA,mBAAA;AAyH5C,IAAA,2BAAe"}

package/es/components/tearsheet-preview/tearsheet-header.scss.js CHANGED Viewed

@@ -7,7 +7,7 @@
 import { css } from "lit";
 //#region src/components/tearsheet-preview/tearsheet-header.scss?lit
-var tearsheet_header_default = css(["@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--assistive-text,.cds--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted){animation:c4p--tearsheet__next--presence-tearsheet__enter .24s cubic-bezier(0,0,.3,1);opacity:1}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__enter .24s cubic-bezier(0,0,.3,1);transform:translateZ(0)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next--stacked.is-visible .c4p--tearsheet__next__container{transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting]{animation:c4p--tearsheet__next--presence-tearsheet__exit .24s cubic-bezier(.4,.14,1,1) forwards}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__exit .24s cubic-bezier(0,0,.3,1) forwards}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next--keep-mounted:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}@keyframes c4p--tearsheet__next--presence-tearsheet__enter{0%{opacity:0;transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet__exit{to{opacity:0}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__enter{0%{transform:translate3d(0,min(95vh,500px),0);transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__exit{to{transform:translate3d(0,min(95vh,500px),0)}}.c4p--tearsheet__next .c4p--tearsheet__next__container{align-self:flex-end;block-size:100%;border:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem)));max-inline-size:var(--tearsheet-max-inline-size,1312px)}@media (max-width:41.98rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--stack-activated.is-visible) .c4p--tearsheet__next__container{max-block-size:none}}.c4p--tearsheet__next:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__container{background:linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,#78a9ff),var(--cds-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;border:1px solid transparent;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__main-content{background:linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)),var(--cds-background,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)),var(--cds-background,var(--cds-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1));position:relative}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header>*{flex-basis:100%}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button){margin-block-end:1.5rem}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header{padding-inline:1rem}}.c4p--tearsheet__next .cds--modal-container--sm .cds--modal-header{padding-inline-end:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:grid;flex-basis:unset;gap:1rem;grid-template-columns:minmax(auto,40rem) minmax(var(--tearsheet-header-title-grid-width,0),1fr);inline-size:calc(100% - var(--tearsheet-header-action-offset))}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}}@media (min-width:42rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-actions{order:2}.c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content{order:1}}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse){max-block-size:50vh;opacity:1;overflow:hidden;transition:max-block-size .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1),margin .24s cubic-bezier(0,0,.3,1),padding .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-actions,.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content :not(.c4p--tearsheet__next__content__title-wrapper,.c4p--tearsheet__next__header-label){opacity:1;transition:all .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .cds--modal-close{transition:all .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed{padding-block-start:0;transition:padding .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions>:not(.c4p--tearsheet__next__content__header-actions),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content>:not(.c4p--tearsheet__next__content__title-wrapper) *,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content>:not(.c4p--tearsheet__next__content__title-wrapper),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse) *{margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1);visibility:hidden}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{align-items:center;font-size:var(--cds-label-02-font-size,.875rem);font-weight:var(--cds-label-02-font-weight,400);gap:.5rem;letter-spacing:var(--cds-label-02-letter-spacing,.16px);line-height:var(--cds-label-02-line-height,1.28572);margin-block-start:.25rem;transition:all .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title>span{align-items:center;block-size:1.5rem;display:flex}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end svg,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-start svg{inline-size:1rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content{align-self:center;margin-block-end:0}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .cds--modal-close{block-size:2.5rem;inline-size:2.5rem;transition:all .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__decorator{inset-block-start:.5rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{block-size:2.5rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__header-actions{block-size:1.5rem;margin-block-start:.5rem;transition:all .24s ease}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__title-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{margin-block:0;transition:margin-block .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper{min-block-size:2.5rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__navigation-bar:before{background:var(--cds-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:calc(100% + 5rem);inset-block-start:0;inset-inline-start:-2rem;pointer-events:none;position:absolute;z-index:1}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible{--overlay-color:var(--cds-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5;background-color:initial;z-index:calc(9000 - var(--stack-depth, 0))}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);position:absolute;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1)}@media (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{transition:none}}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible.is-visible .c4p--tearsheet__next__container{max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem + .125rem)) + var(--block-size-change));transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next__header-label{color:var(--cds-text-secondary,#525252);font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333);margin-block-end:.25rem}.c4p--tearsheet__next__header-title{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);letter-spacing:var(--cds-heading-04-letter-spacing,0);line-height:var(--cds-heading-04-line-height,1.28572)}@media (max-width:41.98rem){.c4p--tearsheet__next__header-title{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}}.c4p--tearsheet__next__header-title{align-items:flex-start;display:flex;gap:1rem;margin-block-end:.5rem}.c4p--tearsheet__next__header-title svg{flex-shrink:0}.c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end{margin-inline-start:1rem}.c4p--tearsheet__next__header-description{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--tearsheet__next__decorator{inset-block-start:.625rem;inset-inline-end:3rem;position:absolute}.c4p--tearsheet__next__navigation-bar{align-items:center;display:flex;gap:.125rem;justify-content:space-between;max-inline-size:calc(100% - .75rem);min-block-size:2.5rem;position:relative}.c4p--tearsheet__next__navigation-bar .cds--tabs{margin-inline-start:-1rem}.c4p--tearsheet__next__scroller-container{inset-block-end:0;inset-inline-end:-2.5rem;position:absolute}@media (max-width:41.98rem){.c4p--tearsheet__next__scroller-container{inset-inline-end:-1.5rem}}.c4p--tearsheet__next__scroller-container .c4p--tearsheet__next__scroller-button-icon-collapsed{transform:rotate(-180deg)}.c4p--tearsheet__next__header-actions{display:flex;justify-content:flex-end}.c4p--tearsheet__next__content__header-actions{align-items:center;block-size:2rem;display:flex;flex:0 0 auto;inline-size:100%;justify-content:flex-end;margin-block-start:-14px;overflow:hidden}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]){margin-inline-end:.5rem}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]):nth-last-child(2){margin-inline-end:0}.c4p--tearsheet__next__content__header-actions>*{flex-shrink:0}@media (max-width:41.98rem){.c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}}.c4p--tearsheet__next__header-actions,.c4p--tearsheet__next__header-content{margin-block-end:1.5rem}@media (min-width:42rem){.c4p--tearsheet__next--wide .c4p--tearsheet__next__container{inline-size:calc(100% - 8rem)}}.c4p--tearsheet__next__body-layout{display:grid;grid-template-areas:\"influencer body\" \"influencer footer\";grid-template-columns:var(--tearsheet-influencer-width,16rem) 1fr;grid-template-rows:1fr auto;padding-block:0;padding-inline-end:0}.c4p--tearsheet__next__body-layout:not(.c4p--tearsheet__next__body-layout--has-influencer){grid-template-areas:\"body\" \"footer\";grid-template-columns:1fr}.c4p--tearsheet__next__influencer,:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){border-inline-end:1px solid var(--cds-border-subtle-01,#c6c6c6);grid-area:influencer}.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){display:grid;grid-area:body;grid-template-columns:1fr var(--tearsheet-summary-content-width,16rem);overflow:hidden;position:relative}@media (max-width:41.98rem){.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}}.c4p--tearsheet__next__body>:only-child,:host(c4p-preview-tearsheet) ::slotted([slot=body])>:only-child{grid-column:1/-1}.c4p--tearsheet__next__body .cds--tab-content,:host(c4p-preview-tearsheet) ::slotted([slot=body]) .cds--tab-content{padding:0}.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:5rem;border-block-start:1px solid var(--cds-border-subtle-01,#c6c6c6);grid-area:footer;overflow:hidden}@media (max-width:41.98rem){.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:4rem}}@media (max-width:19.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}@media (max-width:41.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}.c4p--tearsheet__next__influencer,.c4p--tearsheet__next__main-content,.c4p--tearsheet__next__summary-content,:host ::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){overflow:auto}.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:2rem}@media (max-width:41.98rem){.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}}.c4p--tearsheet__next__influencer:focus,.c4p--tearsheet__next__main-content:focus,.c4p--tearsheet__next__summary-content:focus,:host :focus::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :focus::slotted([slot=influencer]){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.c4p--tearsheet__next__influencer:focus,.c4p--tearsheet__next__main-content:focus,.c4p--tearsheet__next__summary-content:focus,:host :focus::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :focus::slotted([slot=influencer]){outline-style:dotted}}.c4p--tearsheet__next__side-panel,:host c4p-side-panel::part(dialog){block-size:100%;inline-size:100%!important;inset-block-start:0;max-inline-size:none;position:absolute;z-index:9999}.c4p--tearsheet__next__side-panel .c4p--side-panel__header,:host c4p-side-panel::part(dialog) .c4p--side-panel__header{min-block-size:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__container{inline-size:480px;max-inline-size:480px}@media (width <= 480px){.c4p--tearsheet__next--narrow .c4p--tearsheet__next__container{inline-size:100%;max-inline-size:100%}}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header{padding-inline:1rem}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content{align-self:flex-start}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-title{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=body]){grid-template-columns:1fr 0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=footer]){block-size:4rem}.c4p--tearsheet__next--has-ai-label::part(dialog){background:linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,#78a9ff),var(--cds-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;border:1px solid transparent!important;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next__main-content{position:relative}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__flush{padding-inline:0}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--no-summary{grid-column:1/-1}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--has-ai-label{background:linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)),var(--cds-background,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)),var(--cds-background,var(--cds-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1))}:host ::slotted([slot=summary-content]:focus){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host ::slotted([slot=summary-content]:focus){outline-style:dotted}}:host ::slotted([slot=summary-content][is-flush]){padding-inline:0}@media screen and (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet) ::part(dialog){align-self:flex-end;block-size:100%;border:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem + .125rem)));transform:translate3d(0,min(95vh,500px),0);transition:none}}:host(c4p-preview-tearsheet) ::part(dialog){align-self:flex-end;block-size:100%;border:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem + .125rem)));transform:translate3d(0,min(95vh,500px),0);transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}:host(c4p-preview-tearsheet) ::slotted([slot=influencer][is-flush]){padding-inline:0}:host(c4p-preview-tearsheet[open]) ::part(dialog){transform:translateZ(0);transition:transform .24s cubic-bezier(0,0,.3,1)}@media (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet[open]) ::part(dialog){transition:none}}@media (max-width:41.98rem){:host(:not(.c4p--tearsheet__next--stack-activated.is-visible)) ::part(dialog){max-block-size:none}}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible){--overlay-color:var(--cds-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible):before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);pointer-events:none;position:fixed;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1);z-index:calc(9000 - var(--stack-depth, 0))}@media (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible):before{transition:none}}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible) cds-modal{background-color:transparent}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible) ::part(dialog){max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem + .125rem)) + var(--block-size-change));transform:scaleX(var(--scale-factor))}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header{padding-inline:1rem}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-title{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet[variant=narrow]):host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0!important}@media (max-width:41.98rem){:host(c4p-preview-tearsheet) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet) ::slotted([slot=summary-content]){padding:0!important}}:host-context(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0}:host ::slotted([slot=footer]){padding-block:0}:host-context(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header{padding-inline:1rem}:host-context(c4p-preview-tearsheet[variant=narrow][collapsed]) .c4p--tearsheet__next__header-actions{display:none}:host{position:relative}:host .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}@media (max-width:41.98rem){:host .c4p--tearsheet__next__header{padding-inline:1rem}}:host ::slotted(:not([slot=header-content])){flex-basis:100%;margin-block-end:1.5rem}:host ::slotted([slot=header-content]){inline-size:calc(100% - var(--tearsheet-header-action-offset))}:host ::slotted([slot=header-content]),:host ::slotted([slot=navigation-bar]){margin-block-end:0}.c4p--tearsheet__next__header--no-close-icon{display:none}@media screen and (prefers-reduced-motion:reduce){:host ::slotted(*){max-block-size:50vh;opacity:1;overflow:hidden;transition:none}}:host ::slotted(*){max-block-size:50vh;opacity:1;overflow:hidden;transition:max-block-size .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1),margin .24s cubic-bezier(0,0,.3,1),padding .24s cubic-bezier(0,0,.3,1)}:host ::slotted(.excludeFromCollapse),:host ::slotted([slot=header-content]),:host ::slotted([slot=navigation-bar]){max-block-size:none;opacity:1;overflow:visible;transition:none}@media screen and (prefers-reduced-motion:reduce){:host-context(c4p-preview-tearsheet:not([open])) ::slotted(*){opacity:0;transition:none}}:host-context(c4p-preview-tearsheet:not([open])) ::slotted(*){opacity:0;transition:opacity .1s ease-out}:host([collapsed]) .c4p--tearsheet__next__header{padding-block-start:.75rem;transition:padding .24s cubic-bezier(0,0,.3,1)}:host([collapsed]) ::slotted(:not([slot=navigation-bar],[slot=header-content],.excludeFromCollapse,[slot=decorator])){display:none;margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1)}:host([collapsed]) ::slotted([slot=header-content]){min-block-size:2.5rem;padding-block-end:.75rem}:host([collapsed]) ::slotted([slot=navigation-bar]):before{background:rgba(0,0,0,.12);block-size:1px;content:\"\";inline-size:100vw;inset-block-start:-.25rem;inset-inline-start:50%;pointer-events:none;position:absolute;transform:translateX(-50%);z-index:1}"]);
+var tearsheet_header_default = css(["@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--assistive-text,.cds--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted){animation:c4p--tearsheet__next--presence-tearsheet__enter .24s cubic-bezier(0,0,.3,1);opacity:1}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__enter .24s cubic-bezier(0,0,.3,1);transform:translateZ(0)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next--stacked.is-visible .c4p--tearsheet__next__container{transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting]{animation:c4p--tearsheet__next--presence-tearsheet__exit .24s cubic-bezier(.4,.14,1,1) forwards}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__exit .24s cubic-bezier(0,0,.3,1) forwards}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next--keep-mounted:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}@keyframes c4p--tearsheet__next--presence-tearsheet__enter{0%{opacity:0;transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet__exit{to{opacity:0}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__enter{0%{transform:translate3d(0,min(95vh,500px),0);transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__exit{to{transform:translate3d(0,min(95vh,500px),0)}}.c4p--tearsheet__next .c4p--tearsheet__next__container{align-self:flex-end;block-size:100%;border:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem)));max-inline-size:var(--tearsheet-max-inline-size,1312px)}@media (max-width:41.98rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--stack-activated.is-visible) .c4p--tearsheet__next__container{max-block-size:none}}.c4p--tearsheet__next:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__container{background:linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,#78a9ff),var(--cds-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;border:1px solid transparent;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__main-content{background:linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)),var(--cds-background,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)),var(--cds-background,var(--cds-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1));position:relative}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header>*{flex-basis:100%}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button){margin-block-end:1.5rem}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header{padding-inline:1rem}}.c4p--tearsheet__next .cds--modal-container--sm .cds--modal-header{padding-inline-end:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:grid;flex-basis:unset;gap:1rem;grid-template-columns:minmax(auto,40rem) minmax(var(--tearsheet-header-title-grid-width,0),1fr);inline-size:calc(100% - var(--tearsheet-header-action-offset))}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}}@media (min-width:42rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-actions{order:2}.c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content{order:1}}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse){max-block-size:50vh;opacity:1;overflow:hidden;transition:max-block-size .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1),margin .24s cubic-bezier(0,0,.3,1),padding .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-actions,.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content :not(.c4p--tearsheet__next__content__title-wrapper,.c4p--tearsheet__next__header-label){opacity:1;transition:all .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .cds--modal-close{transition:all .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed{padding-block-start:0;transition:padding .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions>:not(.c4p--tearsheet__next__content__header-actions),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content>:not(.c4p--tearsheet__next__content__title-wrapper) *,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content>:not(.c4p--tearsheet__next__content__title-wrapper),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse) *{margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1);visibility:hidden}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{align-items:center;font-size:var(--cds-label-02-font-size,.875rem);font-weight:var(--cds-label-02-font-weight,400);gap:.5rem;letter-spacing:var(--cds-label-02-letter-spacing,.16px);line-height:var(--cds-label-02-line-height,1.28572);margin-block-start:.25rem;transition:all .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title>span{align-items:center;block-size:1.5rem;display:flex}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end svg,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-start svg{inline-size:1rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content{align-self:center;margin-block-end:0}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .cds--modal-close{block-size:2.5rem;inline-size:2.5rem;transition:all .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__decorator{inset-block-start:.5rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{block-size:2.5rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__header-actions{block-size:1.5rem;margin-block-start:.5rem;transition:all .24s ease}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__title-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{margin-block:0;transition:margin-block .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper{min-block-size:2.5rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__navigation-bar:before{background:var(--cds-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:calc(100% + 5rem);inset-block-start:0;inset-inline-start:-2rem;pointer-events:none;position:absolute;z-index:1}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible{--overlay-color:var(--cds-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5;background-color:initial;z-index:calc(9000 - var(--stack-depth, 0))}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);position:absolute;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1)}@media (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{transition:none}}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible.is-visible .c4p--tearsheet__next__container{max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem + .125rem)) + var(--block-size-change));transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next__header-label{color:var(--cds-text-secondary,#525252);font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333);margin-block-end:.25rem}.c4p--tearsheet__next__header-title{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);letter-spacing:var(--cds-heading-04-letter-spacing,0);line-height:var(--cds-heading-04-line-height,1.28572)}@media (max-width:41.98rem){.c4p--tearsheet__next__header-title{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}}.c4p--tearsheet__next__header-title{align-items:flex-start;display:flex;gap:1rem;margin-block-end:.5rem}.c4p--tearsheet__next__header-title svg{flex-shrink:0}.c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end{margin-inline-start:1rem}.c4p--tearsheet__next__header-description{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--tearsheet__next__decorator{inset-block-start:.625rem;inset-inline-end:3rem;position:absolute}.c4p--tearsheet__next__navigation-bar{align-items:center;display:flex;gap:.125rem;justify-content:space-between;max-inline-size:calc(100% - .75rem);min-block-size:2.5rem;position:relative}.c4p--tearsheet__next__navigation-bar .cds--tabs{margin-inline-start:-1rem}.c4p--tearsheet__next__scroller-container{inset-block-end:0;inset-inline-end:-2.5rem;position:absolute}@media (max-width:41.98rem){.c4p--tearsheet__next__scroller-container{inset-inline-end:-1.5rem}}.c4p--tearsheet__next__scroller-container .c4p--tearsheet__next__scroller-button-icon-collapsed{transform:rotate(-180deg)}.c4p--tearsheet__next__header-actions{display:flex;justify-content:flex-end}.c4p--tearsheet__next__content__header-actions{align-items:center;block-size:2rem;display:flex;flex:0 0 auto;inline-size:100%;justify-content:flex-end;margin-block-start:-14px;overflow:hidden}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]){margin-inline-end:.5rem}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]):nth-last-child(2){margin-inline-end:0}.c4p--tearsheet__next__content__header-actions>*{flex-shrink:0}@media (max-width:41.98rem){.c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}}.c4p--tearsheet__next__header-actions,.c4p--tearsheet__next__header-content{margin-block-end:1.5rem}@media (min-width:42rem){.c4p--tearsheet__next--wide .c4p--tearsheet__next__container{inline-size:calc(100% - 8rem)}}.c4p--tearsheet__next__body-layout{display:grid;grid-template-areas:\"influencer body\" \"influencer footer\";grid-template-columns:var(--tearsheet-influencer-width,16rem) 1fr;grid-template-rows:1fr auto;padding-block:0;padding-inline-end:0}.c4p--tearsheet__next__body-layout:not(.c4p--tearsheet__next__body-layout--has-influencer){grid-template-areas:\"body\" \"footer\";grid-template-columns:1fr}.c4p--tearsheet__next__influencer,:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){border-inline-end:1px solid var(--cds-border-subtle-01,#c6c6c6);grid-area:influencer}.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){display:grid;grid-area:body;grid-template-columns:1fr var(--tearsheet-summary-content-width,16rem);overflow:hidden;position:relative}@media (max-width:41.98rem){.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}}.c4p--tearsheet__next__body>:only-child,:host(c4p-preview-tearsheet) ::slotted([slot=body])>:only-child{grid-column:1/-1}.c4p--tearsheet__next__body .cds--tab-content,:host(c4p-preview-tearsheet) ::slotted([slot=body]) .cds--tab-content{padding:0}.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:5rem;border-block-start:1px solid var(--cds-border-subtle-01,#c6c6c6);grid-area:footer;overflow:hidden}@media (max-width:41.98rem){.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:4rem}}@media (max-width:19.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}@media (max-width:41.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}.c4p--tearsheet__next__influencer,.c4p--tearsheet__next__main-content,.c4p--tearsheet__next__summary-content,:host ::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){overflow:auto}.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:2rem}@media (max-width:41.98rem){.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}}.c4p--tearsheet__next__influencer:focus,.c4p--tearsheet__next__main-content:focus,.c4p--tearsheet__next__summary-content:focus,:host :focus::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :focus::slotted([slot=influencer]){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.c4p--tearsheet__next__influencer:focus,.c4p--tearsheet__next__main-content:focus,.c4p--tearsheet__next__summary-content:focus,:host :focus::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :focus::slotted([slot=influencer]){outline-style:dotted}}.c4p--tearsheet__next__side-panel,:host c4p-side-panel::part(dialog){block-size:100%;inline-size:100%!important;inset-block-start:0;max-inline-size:none;position:absolute;z-index:9999}.c4p--tearsheet__next__side-panel .c4p--side-panel__header,:host c4p-side-panel::part(dialog) .c4p--side-panel__header{min-block-size:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__container{inline-size:480px;max-inline-size:480px}@media (width <= 480px){.c4p--tearsheet__next--narrow .c4p--tearsheet__next__container{inline-size:100%;max-inline-size:100%}}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header{padding-inline:1rem}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content{align-self:flex-start}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-title{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=body]){grid-template-columns:1fr 0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=footer]){block-size:4rem}.c4p--tearsheet__next--has-ai-label::part(dialog){background:linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,#78a9ff),var(--cds-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;border:1px solid transparent!important;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next__main-content{position:relative}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__flush{padding-inline:0}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--no-summary{grid-column:1/-1}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--has-ai-label{background:linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)),var(--cds-background,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)),var(--cds-background,var(--cds-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1))}:host ::slotted([slot=summary-content]:focus){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host ::slotted([slot=summary-content]:focus){outline-style:dotted}}:host ::slotted([slot=summary-content][is-flush]){padding-inline:0}@media screen and (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet) ::part(dialog){align-self:flex-end;block-size:100%;border:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem + .125rem)));transform:translate3d(0,min(95vh,500px),0);transition:none}}:host(c4p-preview-tearsheet) ::part(dialog){align-self:flex-end;block-size:100%;border:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem + .125rem)));transform:translate3d(0,min(95vh,500px),0);transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}:host(c4p-preview-tearsheet) ::slotted([slot=influencer][is-flush]){padding-inline:0}:host(c4p-preview-tearsheet[open]) ::part(dialog){transform:translateZ(0);transition:transform .24s cubic-bezier(0,0,.3,1)}@media (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet[open]) ::part(dialog){transition:none}}@media (max-width:41.98rem){:host(:not(.c4p--tearsheet__next--stack-activated.is-visible)) ::part(dialog){max-block-size:none}}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible){--overlay-color:var(--cds-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible):before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);pointer-events:none;position:fixed;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1);z-index:calc(9000 - var(--stack-depth, 0))}@media (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible):before{transition:none}}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible) cds-modal{background-color:transparent}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible) ::part(dialog){max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem + .125rem)) + var(--block-size-change));transform:scaleX(var(--scale-factor))}:host(c4p-preview-tearsheet[variant=narrow]) ::part(dialog){inline-size:480px;max-inline-size:480px}@media (width <= 480px){:host(c4p-preview-tearsheet[variant=narrow]) ::part(dialog){inline-size:100%;max-inline-size:100%}}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header{padding-inline:1rem}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-title{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet[variant=narrow]):host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0!important}@media (max-width:41.98rem){:host(c4p-preview-tearsheet) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet) ::slotted([slot=summary-content]){padding:0!important}}:host-context(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0}:host ::slotted([slot=footer]){padding-block:0}:host-context(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header{padding-inline:1rem}:host-context(c4p-preview-tearsheet[variant=narrow][collapsed]) .c4p--tearsheet__next__header-actions{display:none}:host{position:relative}:host .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}@media (max-width:41.98rem){:host .c4p--tearsheet__next__header{padding-inline:1rem}}:host ::slotted(:not([slot=header-content])){flex-basis:100%;margin-block-end:1.5rem}:host ::slotted([slot=header-content]){inline-size:calc(100% - var(--tearsheet-header-action-offset))}:host ::slotted([slot=header-content]),:host ::slotted([slot=navigation-bar]){margin-block-end:0}.c4p--tearsheet__next__header--no-close-icon{display:none}@media screen and (prefers-reduced-motion:reduce){:host ::slotted(*){max-block-size:50vh;opacity:1;overflow:hidden;transition:none}}:host ::slotted(*){max-block-size:50vh;opacity:1;overflow:hidden;transition:max-block-size .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1),margin .24s cubic-bezier(0,0,.3,1),padding .24s cubic-bezier(0,0,.3,1)}:host ::slotted(.excludeFromCollapse),:host ::slotted([slot=header-content]),:host ::slotted([slot=navigation-bar]){max-block-size:none;opacity:1;overflow:visible;transition:none}@media screen and (prefers-reduced-motion:reduce){:host-context(c4p-preview-tearsheet:not([open])) ::slotted(*){opacity:0;transition:none}}:host-context(c4p-preview-tearsheet:not([open])) ::slotted(*){opacity:0;transition:opacity .1s ease-out}:host([collapsed]) .c4p--tearsheet__next__header{padding-block-start:0;transition:padding .24s cubic-bezier(0,0,.3,1)}:host([collapsed]) ::slotted(:not([slot=navigation-bar],[slot=header-content],.excludeFromCollapse,[slot=decorator])){display:none;margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1)}:host([collapsed]) ::slotted([slot=header-content]){min-block-size:2.5rem}:host([collapsed]) ::slotted([slot=navigation-bar]):before{background:rgba(0,0,0,.12);block-size:1px;content:\"\";inline-size:100vw;inset-block-start:0;inset-inline-start:50%;pointer-events:none;position:absolute;transform:translateX(-50%);z-index:1}"]);
 //#endregion
 export { tearsheet_header_default as default };

package/es/components/tearsheet-preview/tearsheet-header.scss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tearsheet-header.scss.js","names":[],"sources":["../../../src/components/tearsheet-preview/tearsheet-header.scss?lit"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 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@use '@carbon/styles/scss/breakpoint' as ;\n@use '@carbon/ibm-products-styles/scss/config';\n@use '@carbon/styles/scss/motion' as ;\n@use '@carbon/styles/scss/spacing' as ;\n@use '@carbon/styles/scss/theme' as ;\n@use './tearsheet.scss' as ;\n\n$prefix: config.$pkg-prefix;\n$carbon-prefix: config.$carbon-prefix;\n$block-class__next: #{$prefix}--tearsheet__next;\n$motion-duration: $duration-moderate-02;\n// Narrow variant styles\n:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n .#{$block-class__next}__header {\n padding-inline: $spacing-05;\n }\n}\n\n:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow'][collapsed]) {\n .#{$block-class__next}__header-actions {\n display: none;\n }\n}\n\n:host {\n position: relative;\n .#{$block-class__next}__header {\n display: flex;\n flex-wrap: wrap;\n align-content: space-between;\n border-block-end: 1px solid $border-subtle-01;\n margin-block: 0;\n max-block-size: 50vh;\n padding-block-end: 0;\n padding-block-start: $spacing-06;\n padding-inline: $spacing-07;\n @include breakpoint-down(md) {\n padding-inline: $spacing-05;\n }\n }\n\n ::slotted(:not([slot='header-content'])) {\n flex-basis: 100%;\n margin-block-end: $spacing-06;\n }\n\n ::slotted([slot='header-content']) {\n inline-size: calc(100% - var(--tearsheet-header-action-offset));\n }\n}\n\n:host ::slotted([slot='header-content']),\n:host ::slotted([slot='navigation-bar']) {\n margin-block-end: 0;\n}\n\n.#{$block-class__next}__header--no-close-icon {\n display: none;\n}\n\n// ──────────────────────────────────────────────────────────────\n// Header (default vs collapsed)\n// ──────────────────────────────────────────────────────────────\n:host {\n / Animate all slotted children by default /\n @media screen and (prefers-reduced-motion: reduce) {\n ::slotted() {\n overflow: hidden;\n max-block-size: 50vh;\n opacity: 1;\n transition: none;\n }\n }\n\n ::slotted() {\n overflow: hidden;\n max-block-size: 50vh;\n opacity: 1;\n transition:\n max-block-size $motion-duration motion(entrance, expressive),\n opacity $motion-duration motion(entrance, expressive),\n margin $motion-duration motion(entrance, expressive),\n padding $motion-duration motion(entrance, expressive);\n }\n\n / Exclusions /\n ::slotted([slot='navigation-bar']),\n ::slotted([slot='header-content']),\n ::slotted(.excludeFromCollapse) {\n overflow: visible;\n max-block-size: none;\n opacity: 1;\n transition: none;\n }\n}\n\n// Hide header elements immediately when tearsheet is closing\n:host-context(#{$c4p-prefix}-preview-tearsheet:not([open])) {\n @media screen and (prefers-reduced-motion: reduce) {\n ::slotted() {\n opacity: 0;\n transition: none;\n }\n }\n\n ::slotted() {\n opacity: 0;\n transition: opacity 0.1s ease-out;\n }\n}\n\n// ──────────────────────────────────────────────────────────────\n// Collapsed Header State\n// ──────────────────────────────────────────────────────────────\n:host([collapsed]) {\n .#{$block-class__next}__header {\n padding-block-start: ~~$spacing-04~~;\n transition: padding $motion-duration motion(entrance, expressive);\n }\n\n // Collapse everything except core elements (navigation-bar, header-content, excludeFromCollapse)\n ::slotted(\n :not(\n [slot='navigation-bar'],\n [slot='header-content'],\n .excludeFromCollapse,\n [slot='decorator']\n )\n ) {\n @include collapsed-element;\n\n display: none;\n }\n\n ::slotted([slot='header-content']) {\n ~~min-block-size:~~ $spacing-~~08;\~~n ~~padding~~-block-~~end~~: $spacing-04;\n }\n\n // Divider line above navigation bar when collapsed\n ::slotted([slot='navigation-bar'])::before {\n position: absolute;\n z-index: 1;\n background: rgba(0, 0, 0, 0.12);\n block-size: 1px;\n content: '';\n inline-size: 100vw;\n inset-block-start: ~~-$spacing-02~~;\n inset-inline-start: 50%;\n pointer-events: none;\n transform: translateX(-50%);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"tearsheet-header.scss.js","names":[],"sources":["../../../src/components/tearsheet-preview/tearsheet-header.scss?lit"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 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@use '@carbon/styles/scss/breakpoint' as ;\n@use '@carbon/ibm-products-styles/scss/config';\n@use '@carbon/styles/scss/motion' as ;\n@use '@carbon/styles/scss/spacing' as ;\n@use '@carbon/styles/scss/theme' as ;\n@use './tearsheet.scss' as ;\n\n$prefix: config.$pkg-prefix;\n$carbon-prefix: config.$carbon-prefix;\n$block-class__next: #{$prefix}--tearsheet__next;\n$motion-duration: $duration-moderate-02;\n// Narrow variant styles\n:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n .#{$block-class__next}__header {\n padding-inline: $spacing-05;\n }\n}\n\n:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow'][collapsed]) {\n .#{$block-class__next}__header-actions {\n display: none;\n }\n}\n\n:host {\n position: relative;\n .#{$block-class__next}__header {\n display: flex;\n flex-wrap: wrap;\n align-content: space-between;\n border-block-end: 1px solid $border-subtle-01;\n margin-block: 0;\n max-block-size: 50vh;\n padding-block-end: 0;\n padding-block-start: $spacing-06;\n padding-inline: $spacing-07;\n @include breakpoint-down(md) {\n padding-inline: $spacing-05;\n }\n }\n\n ::slotted(:not([slot='header-content'])) {\n flex-basis: 100%;\n margin-block-end: $spacing-06;\n }\n\n ::slotted([slot='header-content']) {\n inline-size: calc(100% - var(--tearsheet-header-action-offset));\n }\n}\n\n:host ::slotted([slot='header-content']),\n:host ::slotted([slot='navigation-bar']) {\n margin-block-end: 0;\n}\n\n.#{$block-class__next}__header--no-close-icon {\n display: none;\n}\n\n// ──────────────────────────────────────────────────────────────\n// Header (default vs collapsed)\n// ──────────────────────────────────────────────────────────────\n:host {\n / Animate all slotted children by default /\n @media screen and (prefers-reduced-motion: reduce) {\n ::slotted() {\n overflow: hidden;\n max-block-size: 50vh;\n opacity: 1;\n transition: none;\n }\n }\n\n ::slotted() {\n overflow: hidden;\n max-block-size: 50vh;\n opacity: 1;\n transition:\n max-block-size $motion-duration motion(entrance, expressive),\n opacity $motion-duration motion(entrance, expressive),\n margin $motion-duration motion(entrance, expressive),\n padding $motion-duration motion(entrance, expressive);\n }\n\n / Exclusions /\n ::slotted([slot='navigation-bar']),\n ::slotted([slot='header-content']),\n ::slotted(.excludeFromCollapse) {\n overflow: visible;\n max-block-size: none;\n opacity: 1;\n transition: none;\n }\n}\n\n// Hide header elements immediately when tearsheet is closing\n:host-context(#{$c4p-prefix}-preview-tearsheet:not([open])) {\n @media screen and (prefers-reduced-motion: reduce) {\n ::slotted() {\n opacity: 0;\n transition: none;\n }\n }\n\n ::slotted() {\n opacity: 0;\n transition: opacity 0.1s ease-out;\n }\n}\n\n// ──────────────────────────────────────────────────────────────\n// Collapsed Header State\n// ──────────────────────────────────────────────────────────────\n:host([collapsed]) {\n .#{$block-class__next}__header {\n // Collapsed: remove top padding (was $spacing-04)\n padding-block-start: 0;\n transition: padding $motion-duration motion(entrance, expressive);\n }\n\n // Collapse everything except core elements (navigation-bar, header-content, excludeFromCollapse)\n ::slotted(\n :not(\n [slot='navigation-bar'],\n [slot='header-content'],\n .excludeFromCollapse,\n [slot='decorator']\n )\n ) {\n @include collapsed-element;\n\n display: none;\n }\n\n ::slotted([slot='header-content']) {\n // Remove bottom padding when collapsed (was $spacing-04)\n min-block-size: $spacing-08;\n }\n\n // Divider line above navigation bar when collapsed\n ::slotted([slot='navigation-bar'])::before {\n position: absolute;\n z-index: 1;\n background: rgba(0, 0, 0, 0.12);\n block-size: 1px;\n content: '';\n inline-size: 100vw;\n inset-block-start: 0;\n inset-inline-start: 50%;\n pointer-events: none;\n transform: translateX(-50%);\n }\n}\n"],"mappings":""}

package/es/components/tearsheet-preview/tearsheet-influencer.js CHANGED Viewed

@@ -49,7 +49,7 @@ let CDSTearsheetInfluencer = class CDSTearsheetInfluencer extends SignalWatcher(
 	}
 	render() {
 		const { isSm } = tearsheetSignal.get();
-		return !isSm ? html` <aside>
+		return !isSm ? html` <aside aria-label="${this.influencerPanelAriaLabel}">
           <slot></slot>
         </aside>` : html` <c4p-side-panel
           size="sm"

package/es/components/tearsheet-preview/tearsheet-influencer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tearsheet-influencer.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet-influencer.ts"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2026\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport '../side-panel/index.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nimport styles from './tearsheet.scss?lit';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport { tearsheetSignal } from './tearsheet-signal.js';\nimport { prefix } from '../../globals/settings.js';\n\n/\n Tearsheet Influencer component - Left-side panel for contextual information.\n * Automatically converts to a slide-in panel on small screens.\n \n @element c4p-tearsheet-influencer\n * @slot - Content for the influencer panel\n * @fires cds-tearsheet-influencer-closed - Fired when the influencer panel is closed (mobile only)\n /\n@customElement(`${prefix}-tearsheet-influencer`)\nclass CDSTearsheetInfluencer extends SignalWatcher(\n HostListenerMixin(LitElement)\n) {\n @property({ reflect: true })\n slot = 'influencer';\n\n @property({ type: Boolean, reflect: true, attribute: 'is-flush' })\n isFlush: boolean = false;\n\n /\n In mobile screens left side influencer section won't be visible by default.\n * This prop can be toggled to open/close left panel in this case.\n /\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'influencer-panel-open',\n })\n influencerPanelOpen: boolean = false;\n\n /\n Optional aria-label for the influencer panel. Defaults to \"Influencer panel\".\n /\n @property({ attribute: 'influencer-panel-aria-label' })\n influencerPanelAriaLabel: string = 'Influencer panel';\n\n /\n Handler for closing the influencer panel\n */\n private handleClose = () => {\n this.influencerPanelOpen = false;\n this.dispatchEvent(\n new CustomEvent('cds-tearsheet-influencer-closed', {\n bubbles: true,\n composed: true,\n })\n );\n };\n\n render() {\n const { isSm } = tearsheetSignal.get();\n\n return !isSm\n ? html` <aside>\n <slot></slot>\n </aside>`\n : html` <c4p-side-panel\n size=\"sm\"\n ?open=\"${this.influencerPanelOpen}\"\n placement=\"left\"\n aria-label=\"${this.influencerPanelAriaLabel}\"\n aria-modal=\"true\"\n @c4p-side-panel-closed=\"${this.handleClose}\"\n >\n <slot></slot>\n </c4p-side-panel>`;\n }\n\n static styles = styles;\n}\nexport default CDSTearsheetInfluencer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAA,yBAAA,MACM,+BAA+B,cACnC,kBAAkB,WAAW,CAC9B,CAAC;;;cAEO;iBAGY;6BAWY;kCAMI;2BAKP;AAC1B,QAAK,sBAAsB;AAC3B,QAAK,cACH,IAAI,YAAY,mCAAmC;IACjD,SAAS;IACT,UAAU;IACX,CAAC,CACH;;;CAGH,SAAS;EACP,MAAM,EAAE,SAAS,gBAAgB,KAAK;AAEtC,SAAO,CAAC,OACJ,IAAI;;~~oBAGJ~~,IAAI;;mBAEO,KAAK,oBAAoB;;wBAEpB,KAAK,yBAAyB;;oCAElB,KAAK,YAAY;;;;;;gBAMnCA;;;YAvDf,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,uBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAY,CAAC,CAAA,EAAA,uBAAA,WAAA,WAAA,KAAA,EAAA;YAOjE,SAAS;CACR,MAAM;CACN,SAAS;CACT,WAAW;CACZ,CAAC,CAAA,EAAA,uBAAA,WAAA,uBAAA,KAAA,EAAA;YAMD,SAAS,EAAE,WAAW,+BAA+B,CAAC,CAAA,EAAA,uBAAA,WAAA,4BAAA,KAAA,EAAA;qCAxBxDC,cAAc,2BAAiC,CAAA,EAAA,uBAAA;AA6DhD,IAAA,+BAAe"}
1	+ {"version":3,"file":"tearsheet-influencer.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet-influencer.ts"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2026\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport '../side-panel/index.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nimport styles from './tearsheet.scss?lit';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport { tearsheetSignal } from './tearsheet-signal.js';\nimport { prefix } from '../../globals/settings.js';\n\n/\n Tearsheet Influencer component - Left-side panel for contextual information.\n * Automatically converts to a slide-in panel on small screens.\n \n @element c4p-tearsheet-influencer\n * @slot - Content for the influencer panel\n * @fires cds-tearsheet-influencer-closed - Fired when the influencer panel is closed (mobile only)\n /\n@customElement(`${prefix}-tearsheet-influencer`)\nclass CDSTearsheetInfluencer extends SignalWatcher(\n HostListenerMixin(LitElement)\n) {\n @property({ reflect: true })\n slot = 'influencer';\n\n @property({ type: Boolean, reflect: true, attribute: 'is-flush' })\n isFlush: boolean = false;\n\n /\n In mobile screens left side influencer section won't be visible by default.\n * This prop can be toggled to open/close left panel in this case.\n /\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'influencer-panel-open',\n })\n influencerPanelOpen: boolean = false;\n\n /\n Optional aria-label for the influencer panel. Defaults to \"Influencer panel\".\n /\n @property({ attribute: 'influencer-panel-aria-label' })\n influencerPanelAriaLabel: string = 'Influencer panel';\n\n /\n Handler for closing the influencer panel\n */\n private handleClose = () => {\n this.influencerPanelOpen = false;\n this.dispatchEvent(\n new CustomEvent('cds-tearsheet-influencer-closed', {\n bubbles: true,\n composed: true,\n })\n );\n };\n\n render() {\n const { isSm } = tearsheetSignal.get();\n\n return !isSm\n ? html` <aside aria-label=\"${this.influencerPanelAriaLabel}\">\n <slot></slot>\n </aside>`\n : html` <c4p-side-panel\n size=\"sm\"\n ?open=\"${this.influencerPanelOpen}\"\n placement=\"left\"\n aria-label=\"${this.influencerPanelAriaLabel}\"\n aria-modal=\"true\"\n @c4p-side-panel-closed=\"${this.handleClose}\"\n >\n <slot></slot>\n </c4p-side-panel>`;\n }\n\n static styles = styles;\n}\nexport default CDSTearsheetInfluencer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAA,yBAAA,MACM,+BAA+B,cACnC,kBAAkB,WAAW,CAC9B,CAAC;;;cAEO;iBAGY;6BAWY;kCAMI;2BAKP;AAC1B,QAAK,sBAAsB;AAC3B,QAAK,cACH,IAAI,YAAY,mCAAmC;IACjD,SAAS;IACT,UAAU;IACX,CAAC,CACH;;;CAGH,SAAS;EACP,MAAM,EAAE,SAAS,gBAAgB,KAAK;AAEtC,SAAO,CAAC,OACJ,IAAI,uBAAuB,KAAK,yBAAyB;;oBAGzD,IAAI;;mBAEO,KAAK,oBAAoB;;wBAEpB,KAAK,yBAAyB;;oCAElB,KAAK,YAAY;;;;;;gBAMnCA;;;YAvDf,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,uBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAY,CAAC,CAAA,EAAA,uBAAA,WAAA,WAAA,KAAA,EAAA;YAOjE,SAAS;CACR,MAAM;CACN,SAAS;CACT,WAAW;CACZ,CAAC,CAAA,EAAA,uBAAA,WAAA,uBAAA,KAAA,EAAA;YAMD,SAAS,EAAE,WAAW,+BAA+B,CAAC,CAAA,EAAA,uBAAA,WAAA,4BAAA,KAAA,EAAA;qCAxBxDC,cAAc,2BAAiC,CAAA,EAAA,uBAAA;AA6DhD,IAAA,+BAAe"}