@carbon/ibm-products-web-components 0.35.0 → 0.36.0

package/es-custom/components/tearsheet-preview/tearsheet-header.js

@@ -1,152 +1,118 @@
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2020, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { __decorate } from 'tslib';
-import { LitElement, html } from 'lit';
-import { property, state, query } from 'lit/decorators.js';
-import { prefix } from '../../globals/settings.js';
-import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
+import { prefix } from "../../globals/settings.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { tearsheetSignal, updateTearsheetSignals } from "./tearsheet-signal.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 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-custom/components/modal/index.js';
-import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
-import { classMap } from 'lit-html/directives/class-map.js';
-import styles from './tearsheet-header.scss.js';
-import { updateTearsheetSignals, tearsheetSignal } from './tearsheet-signal.js';
-import { SignalWatcher } from '@lit-labs/signals';
+import { classMap } from "lit-html/directives/class-map.js";
+import { SignalWatcher } from "@lit-labs/signals";
 
+//#region src/components/tearsheet-preview/tearsheet-header.ts
 /**
- * @license
- *
- * Copyright IBM Corp. 2026
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
+* @license
+*
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 const blockClass = `${prefix}--tearsheet__next`;
 /**
- * Tearsheet Header component - Contains the header section with title, description, and actions.
- *
- * @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
- */
+* Tearsheet Header component - Contains the header section with title, description, and actions.
+*
+* @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
+*/
 let CDSTearsheetHeader = class CDSTearsheetHeader extends SignalWatcher(HostListenerMixin(LitElement)) {
-    constructor() {
-        super(...arguments);
-        this.slot = 'header';
-        /**
-         * Tooltip text and aria label for the Close button icon.
-         */
-        this.closeIconDescription = 'Close';
-        /**
-         * Optional parameter to hide the progress indicator when multiple steps are used.
-         */
-        this.hideCloseButton = false;
-        /**
-         * Default header collapse/expand while scrolling the main content can be disabled  by setting this
-         */
-        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,
-            },
-        };
-        // Dispatch internal event to notify parent tearsheet
-        this.dispatchEvent(new CustomEvent(this.constructor.eventCloseButtonClicked, init));
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Initialize signal with the initial prop value before any child components connect
-        updateTearsheetSignals({
-            disableHeaderCollapse: this.disableHeaderCollapse,
-        });
-    }
-    firstUpdated() {
-        this.updateHeaderOffset();
-    }
-    updated(_changedProperties) {
-        if (_changedProperties.has('disableHeaderCollapse')) {
-            updateTearsheetSignals({
-                disableHeaderCollapse: this.disableHeaderCollapse,
-            });
-        }
-        this.updateHeaderOffset();
-        this.updateCollapsedAttribute();
-    }
-    updateCollapsedAttribute() {
-        const { fullyCollapsed, open } = tearsheetSignal.get();
-        if (open) {
-            if (fullyCollapsed) {
-                this.setAttribute('collapsed', '');
-            }
-            else {
-                this.removeAttribute('collapsed');
-            }
-        }
-        else {
-            this.removeAttribute('collapsed');
-        }
-    }
-    updateHeaderOffset() {
-        var _a, _b;
-        const { open, isSm } = tearsheetSignal.get();
-        if (open) {
-            const assigned = this.decoratorSlot.assignedElements({ flatten: true });
-            const decoratorWidth = (_b = (_a = assigned === null || assigned === void 0 ? void 0 : assigned[0]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
-            const closeButtonWidth = !this.hideCloseButton ? 24 : 0;
-            const offset = decoratorWidth + closeButtonWidth + (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-custom-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();
-    }
-    render() {
-        const { fullyCollapsed } = tearsheetSignal.get();
-        const classes = classMap({
-            [`${blockClass}__header`]: true,
-            [`${blockClass}__header--with-close-icon`]: !!this.hideCloseButton,
-            [`${blockClass}__header-collapsed`]: !!fullyCollapsed,
-        });
-        return html `<cds-custom-modal-header class="${classes}">
+	constructor(..._args) {
+		super(..._args);
+		this.slot = "header";
+		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 });
+	}
+	firstUpdated() {
+		this.updateHeaderOffset();
+	}
+	updated(_changedProperties) {
+		if (_changedProperties.has("disableHeaderCollapse")) updateTearsheetSignals({ disableHeaderCollapse: this.disableHeaderCollapse });
+		this.updateHeaderOffset();
+		this.updateCollapsedAttribute();
+	}
+	updateCollapsedAttribute() {
+		const { fullyCollapsed, open } = tearsheetSignal.get();
+		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-custom-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();
+	}
+	render() {
+		const { fullyCollapsed } = tearsheetSignal.get();
+		return html`<cds-custom-modal-header class="${classMap({
+			[`${blockClass}__header`]: true,
+			[`${blockClass}__header--with-close-icon`]: !!this.hideCloseButton,
+			[`${blockClass}__header-collapsed`]: !!fullyCollapsed
+		})}">
       <slot
         name="decorator"
         slot="ai-label"
@@ -155,50 +121,42 @@ let CDSTearsheetHeader = class CDSTearsheetHeader extends SignalWatcher(HostList
       <cds-custom-modal-close-button
         close-button-label=${this.closeIconDescription}
         @click="${this._handleUserInitiatedClose}"
-        class="${this.hideCloseButton
-            ? `${blockClass}__header--no-close-icon`
-            : ''}"
+        class="${this.hideCloseButton ? `${blockClass}__header--no-close-icon` : ""}"
       ></cds-custom-modal-close-button>
 
       <slot name="header-content"></slot>
       <slot></slot>
       <slot name="navigation-bar"></slot>
     </cds-custom-modal-header>`;
-    }
-    static get eventCloseButtonClicked() {
-        return `${prefix}-tearsheet-header-close-button-clicked`;
-    }
+	}
+	static {
+		this.styles = tearsheet_header_default$1;
+	}
+	static get eventCloseButtonClicked() {
+		return `${prefix}-tearsheet-header-close-button-clicked`;
+	}
 };
-CDSTearsheetHeader.styles = styles;
-__decorate([
-    property({ reflect: true })
-], CDSTearsheetHeader.prototype, "slot", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'close-icon-description' })
-], CDSTearsheetHeader.prototype, "closeIconDescription", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })
-], CDSTearsheetHeader.prototype, "hideCloseButton", void 0);
-__decorate([
-    property({
-        type: Boolean,
-        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(`${prefix}-tearsheet-header`)
-], CDSTearsheetHeader);
-var CDSTearsheetHeader_default = CDSTearsheetHeader;
+__decorate([property({ reflect: true })], CDSTearsheetHeader.prototype, "slot", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "close-icon-description"
+})], CDSTearsheetHeader.prototype, "closeIconDescription", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "hide-close-button"
+})], CDSTearsheetHeader.prototype, "hideCloseButton", void 0);
+__decorate([property({
+	type: Boolean,
+	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(`${prefix}-tearsheet-header`)], CDSTearsheetHeader);
+var tearsheet_header_default = CDSTearsheetHeader;
 
-export { CDSTearsheetHeader_default as default };
-//# sourceMappingURL=tearsheet-header.js.map
+//#endregion
+export { tearsheet_header_default as default };
+//# sourceMappingURL=tearsheet-header.js.map

package/es-custom/components/tearsheet-preview/tearsheet-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"tearsheet-header.js","sources":["../../../src/components/tearsheet-preview/tearsheet-header.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}
+{"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-custom/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';\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  }\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-custom-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-custom-modal-header class=\"${classes}\">\n      <slot\n        name=\"decorator\"\n        slot=\"ai-label\"\n        @slotchange=${this._handleDecoratorChange}\n      ></slot>\n      <cds-custom-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-custom-modal-close-button>\n\n      <slot name=\"header-content\"></slot>\n      <slot></slot>\n      <slot name=\"navigation-bar\"></slot>\n    </cds-custom-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,aAAa,GAAG,OAAO;;;;;;;;;;;AAY7B,+BACM,2BAA2B,cAAc,kBAAkB,WAAW,CAAC,CAAC;;;cAErE;8BAMwB;yBAMJ;+BAUM;uBAGjB;qBAGF;;;;;;;;CAWd,AAAQ,0BAA0B,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,AAAU,eAAe;AACvB,OAAK,oBAAoB;;CAG3B,AAAU,QAAQ,oBAAoC;AACpD,MAAI,mBAAmB,IAAI,wBAAwB,CACjD,wBAAuB,EACrB,uBAAuB,KAAK,uBAC7B,CAAC;AAEJ,OAAK,oBAAoB;AACzB,OAAK,0BAA0B;;CAGjC,AAAQ,2BAA2B;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,AAAQ,qBAAqB;EAC3B,MAAM,EAAE,MAAM,SAAS,gBAAgB,KAAK;AAC5C,MAAI,MAAM;GAKR,MAAM,UAJW,KAAK,cAAc,iBAAiB,EAAE,SAAS,MAAM,CAAC,GAErC,IAAI,uBAAuB,CAAC,SAAS,MAC9C,CAAC,KAAK,kBAAkB,KAAK,MACF,OAAO,IAAI;AAE/D,YAAS,gBAAgB,MAAM,YAC7B,oCACA,GAAG,OAAO,IACX;;;CAIL,AAAQ,uBAAuB,GAAU;AACvC,OAAK,cAAc;EACnB,MAAM,aAAc,EAAE,OAA2B,kBAAkB;AACnE,OAAK,gBAAgB,WAAW,SAAS;AACzC,MAAI,KAAK,eACP;QAAK,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,CAAC,CAC6C;;;;sBAI7B,KAAK,uBAAuB;;;6BAGrB,KAAK,qBAAqB;kBACrC,KAAK,0BAA0B;iBAChC,KAAK,kBACV,GAAG,WAAW,2BACd,GAAG;;;;;;;;;gBASGA;;CAEhB,WAAW,0BAA0B;AACnC,SAAO,GAAG,OAAO;;;YAnKlB,SAAS,EAAE,SAAS,MAAM,CAAC;YAM3B,SAAS;CAAE,SAAS;CAAM,WAAW;CAA0B,CAAC;YAMhE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAqB,CAAC;YAM1E,SAAS;CACR,MAAM;CACN,SAAS;CACT,WAAW;CACZ,CAAC;YAGD,OAAO;YAGP,OAAO;YAGP,MAAM,2BAAyB;iCAjCjCC,cAAc,GAAG,OAAO,mBAAmB;AAwK5C,+BAAe"}

package/es-custom/components/tearsheet-preview/tearsheet-header.scss.js

@@ -1,13 +1,15 @@
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2020, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit';
+import { css } from "lit";
 
-var styles = css(["@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--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-custom--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-custom--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--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-custom--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds-custom--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-custom--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--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-custom--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds-custom--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-custom--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds-custom--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-custom--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--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-custom--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-custom--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--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-custom--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-custom--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds-custom--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-custom--assistive-text,.cds-custom--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, 3rem));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-custom--modal-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-custom--modal-container--sm .cds-custom--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}}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.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 .c4p--tearsheet__next__header-collapsed{padding-block-start:.75rem;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-custom--modal-close-button,.excludeFromCollapse),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.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)}.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);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 .c4p--tearsheet__next__content__header-actions{margin-block-start:-.125rem}@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;padding-block-end:.75rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__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}.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, 3rem) + 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__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-custom--tabs{margin-inline-start:-1rem}.c4p--tearsheet__next__scroller-container{inset-block-end:.125rem;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__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__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__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-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][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, 3rem));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, 3rem));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;z-index:calc(9000 - var(--stack-depth, 0))}: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:-1}@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-custom-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, 3rem) + 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}: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}"]);
+//#region src/components/tearsheet-preview/tearsheet-header.scss?lit
+var tearsheet_header_default = css(["@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--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-custom--layout--size-xs{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xs,1.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-sm,2rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-md,2.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-lg,3rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xl,4rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-2xl,5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-normal,1rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-normal,1rem)}:root{--cds-custom-layout-size-height-xs:1.5rem;--cds-custom-layout-size-height-sm:2rem;--cds-custom-layout-size-height-md:2.5rem;--cds-custom-layout-size-height-lg:3rem;--cds-custom-layout-size-height-xl:4rem;--cds-custom-layout-size-height-2xl:5rem;--cds-custom-layout-size-height-min:0px;--cds-custom-layout-size-height-max:999999999px;--cds-custom-layout-density-padding-inline-condensed:0.5rem;--cds-custom-layout-density-padding-inline-normal:1rem;--cds-custom-layout-density-padding-inline-min:0px;--cds-custom-layout-density-padding-inline-max:999999999px}.cds-custom--assistive-text,.cds-custom--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-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));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-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-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-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-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-custom-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-custom--modal-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-custom--modal-container--sm .cds-custom--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}}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.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 .c4p--tearsheet__next__header-collapsed{padding-block-start:.75rem;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-custom--modal-close-button,.excludeFromCollapse),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.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)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{align-items:center;font-size:var(--cds-custom-label-02-font-size,.875rem);font-weight:var(--cds-custom-label-02-font-weight,400);letter-spacing:var(--cds-custom-label-02-letter-spacing,.16px);line-height:var(--cds-custom-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 .c4p--tearsheet__next__content__header-actions{margin-block-start:-.125rem}@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;padding-block-end:.75rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__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}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible{--overlay-color:var(--cds-custom-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, 3rem) + var(--block-size-change));transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next__header-label{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);margin-block-end:.25rem}.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}@media (max-width:41.98rem){.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-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-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.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-custom--tabs{margin-inline-start:-1rem}.c4p--tearsheet__next__scroller-container{inset-block-end:.125rem;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-custom-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__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:5rem;border-block-start:1px solid var(--cds-custom-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__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__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-content-wrapper{display:flex;flex-direction:column}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-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-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent!important;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-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-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1))}: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-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));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-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));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-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5;z-index:calc(9000 - var(--stack-depth, 0))}: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:-1}@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-custom-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, 3rem) + 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-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-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-custom-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}: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}"]);
 
-export { styles as default };
-//# sourceMappingURL=tearsheet-header.scss.js.map
+//#endregion
+export { tearsheet_header_default as default };
+//# sourceMappingURL=tearsheet-header.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tearsheet-header.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"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// ──────────────────────────────────────────────────────────────\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":""}