@carbon/ibm-products-web-components 0.41.1 → 0.42.0

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

@@ -11,6 +11,7 @@ import tearsheet_default$1 from "./tearsheet.scss.js";
 import { MatchMediaController } from "../../globals/js/utils/match-media-controller.js";
 import { blockClass, updateTearsheetSignals } from "./tearsheet-signal.js";
 import { stackManager } from "./stack-signal.js";
+import { clearFocusableContainers, trapFocus } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
 import { LitElement, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
@@ -54,6 +55,8 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
 		this.uniqueId = `tearsheet-${Math.random().toString(36).substr(2, 9)}`;
 		this._stackingEnabled = false;
 		this.isSm = false;
+		this._trapFocusAPI = null;
+		this._wasOpen = false;
 		this.smMediaQuery = `(max-width: ${breakpoints.md.width})`;
 		this.isSmallDevice = new MatchMediaController(this, this.smMediaQuery, false);
 		this.handleStackConnected = (event) => {
@@ -111,7 +114,8 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
 			variant: this.variant,
 			isSm: this.isSm,
 			open: this.open,
-			hasAILabel: this.hasAILabel
+			hasAILabel: this.hasAILabel,
+			uniqueId: this.uniqueId
 		});
 	}
 	updated(_changedProperties) {
@@ -129,10 +133,29 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
 	}
 	handleOpenPropertyChange(_changedProperties) {
 		if (!_changedProperties.has("open")) return;
+		const wasOpen = this._wasOpen;
+		const isOpen = this.open;
 		updateTearsheetSignals({ open: this.open });
 		if (this._stackingEnabled && this.modalBodyElement) stackManager.notifyStack(this.uniqueId, this.open, this.modalBodyElement);
 		this.classList.toggle("is-visible", this.open);
 		if (this._stackingEnabled) this.updateStackProperties();
+		if (!wasOpen && isOpen) {
+			updateTearsheetSignals({ uniqueId: this.uniqueId });
+			requestAnimationFrame(() => {
+				this._trapFocusAPI = trapFocus(this, this.uniqueId);
+			});
+		}
+		this._wasOpen = isOpen;
+		if (!this.open && this.launcherButtonRef) setTimeout(() => {
+			if (this.launcherButtonRef instanceof HTMLElement) {
+				const headerActionItem = this.launcherButtonRef.closest(`.${blockClass}__header-action-item`);
+				if (headerActionItem) {
+					const menuButton = headerActionItem.closest(`.${blockClass}__content__header-actions`)?.querySelector(`.${blockClass}__header-actions-menuButton:not(.${blockClass}__header-actions-menuButton--hidden) button`);
+					if (menuButton instanceof HTMLElement) menuButton.focus();
+					else this.launcherButtonRef.focus();
+				} else this.launcherButtonRef.focus();
+			}
+		}, 100);
 	}
 	updateCSSPropertiesIfNeeded(_changedProperties) {
 		if (_changedProperties.has("influencerWidth") || _changedProperties.has("summaryContentWidth") || _changedProperties.has("verticalGap")) this.updateCSSCustomProperties();
@@ -159,6 +182,8 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this._trapFocusAPI?.cleanup();
+		clearFocusableContainers();
 		this.removeEventListener(`c4p-tearsheet-header-close-button-clicked`, this.handleHeaderCloseButtonClick);
 		this.removeEventListener(`c4p-tearsheet-stack-connected`, this.handleStackConnected);
 		this.removeEventListener(`c4p-tearsheet-stack-step-size-changed`, this.handleStackStepSizeChanged);
@@ -250,6 +275,7 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
 			[`${blockClass}--has-decorator`]: this.hasDecorator && !this.hasAILabel
 		});
 		const containerClasses = `${blockClass}__container ${this.containerClassName}`;
+		const computedAriaLabelledby = !this.ariaLabel && this.headerContentElement?.titleId ? this.headerContentElement.titleId : void 0;
 		return html`<cds-modal
       class=${classes}
       size=${this.variant === "narrow" ? "sm" : "lg"}
@@ -257,6 +283,7 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
       container-class="${containerClasses}"
       ?prevent-close-on-click-outside="${this.preventCloseOnClickOutside}"
       aria-label="${ifDefined(this.ariaLabel || void 0)}"
+      aria-labelledby="${ifDefined(computedAriaLabelledby)}"
       selector-primary-focus="${ifDefined(this.selectorPrimaryFocus || void 0)}"
       selectors-floating-menus="${this.getFloatingMenuSelectors()}"
       @cds-modal-beingclosed="${this.handleClose}"
@@ -295,8 +322,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: "prevent-close-on-click-outside"
 })], CDSTearsheet.prototype, "preventCloseOnClickOutside", void 0);
+__decorate([property({ attribute: false })], CDSTearsheet.prototype, "launcherButtonRef", void 0);
 __decorate([state()], CDSTearsheet.prototype, "isSm", void 0);
 __decorate([query("cds-modal-body")], CDSTearsheet.prototype, "modalBodyElement", void 0);
+__decorate([query(`c4p-tearsheet-header-content`)], CDSTearsheet.prototype, "headerContentElement", void 0);
 CDSTearsheet = __decorate([carbonElement(`c4p-preview-tearsheet`)], CDSTearsheet);
 var tearsheet_default = CDSTearsheet;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"tearsheet.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet.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 { LitElement, PropertyValues, html } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './tearsheet.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { MatchMediaController } from '../../globals/js/utils/match-media-controller';\nimport { breakpoints } from '@carbon/layout';\nimport { blockClass, updateTearsheetSignals } from './tearsheet-signal';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { stackManager } from './stack-signal';\n\n/**\n * Tearsheet component - A slide-out panel for displaying detailed content.\n *\n * @element c4p-preview-tearsheet\n * @slot header - The header content of the tearsheet\n * @slot influencer - Optional left sidebar content (wide variant only)\n * @slot body - Main body content\n * @slot footer - Footer content with actions\n * @fires c4p-preview-tearsheet-beingclosed - Fired when the tearsheet is about to close\n * @fires c4p-preview-tearsheet-closed - Fired after the tearsheet has closed\n */\n@customElement(`${prefix}-preview-tearsheet`)\nclass CDSTearsheet extends SignalWatcher(HostListenerMixin(LitElement)) {\n  /**\n   * Specifies whether the tearsheet is currently open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  /**\n   * User can pass any class names that will be added to the modal container\n   */\n  @property({ attribute: 'container-class-name' })\n  containerClassName: string = '';\n\n  /**\n   * Default influencer takes 256px, this allows override eg: 300px, 20rem\n   */\n  @property({ attribute: 'influencer-width' })\n  influencerWidth: string = '';\n\n  /**\n   * Default summary content takes 256px, this allows override eg: 300px, 20rem\n   */\n  @property({ attribute: 'summary-content-width' })\n  summaryContentWidth: string = '';\n\n  /**\n   * Defines the gap from top of the viewport. Defaulted to 3rem\n   */\n  @property({ attribute: 'vertical-gap' })\n  verticalGap: string = '';\n\n  /**\n   * Default to wide variant. Pass in narrow for narrow tearsheet\n   */\n  @property({ reflect: true })\n  variant: 'wide' | 'narrow' = 'wide';\n\n  /**\n   * Specify the CSS selectors that match the floating menus (comma-separated)\n   */\n  @property({ attribute: 'selectors-floating-menus' })\n  selectorsFloatingMenus: string = '';\n\n  /**\n   * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens\n   */\n  @property({ attribute: 'selector-primary-focus' })\n  selectorPrimaryFocus: string = '';\n\n  /**\n   * Prevents the modal from closing when clicking outside\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside: boolean = false;\n\n  /**\n   * Unique ID for this tearsheet instance\n   */\n  private uniqueId: string = `tearsheet-${Math.random().toString(36).substr(2, 9)}`;\n\n  /**\n   * Internal flag to track if stacking is enabled (via wrapper)\n   */\n  private _stackingEnabled: boolean = false;\n\n  /**\n   * Internal state for tracking if the tearsheet is in small screen mode\n   */\n  @state()\n  private isSm: boolean = false;\n\n  /**\n   * Query the modal body element\n   */\n  @query('cds-modal-body')\n  private modalBodyElement?: HTMLElement;\n\n  private smMediaQuery = `(max-width: ${breakpoints.md.width})`;\n  private isSmallDevice = new MatchMediaController(\n    this,\n    this.smMediaQuery,\n    false\n  );\n  /**\n   * Checks if the tearsheet has a decorator (AI label or other)\n   */\n  private get hasDecorator(): boolean {\n    const headerElement = this.querySelector(`${prefix}-tearsheet-header`);\n    if (!headerElement) {\n      return false;\n    }\n    const decorator = headerElement.querySelector('[slot=\"decorator\"]');\n    return !!decorator;\n  }\n\n  /**\n   * Checks if the tearsheet has an AI label decorator\n   */\n  private get hasAILabel(): boolean {\n    const headerElement = this.querySelector(`${prefix}-tearsheet-header`);\n    if (!headerElement) {\n      return false;\n    }\n    const decorator = headerElement.querySelector('[slot=\"decorator\"]');\n    if (!decorator) {\n      return false;\n    }\n    const tagName = decorator.tagName.toLowerCase();\n    return tagName === 'cds-ai-label' || tagName === `${prefix}-ai-label`;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    // Listen for stack wrapper events first\n    this.addEventListener(\n      `${prefix}-tearsheet-stack-connected`,\n      this.handleStackConnected as EventListener\n    );\n    this.addEventListener(\n      `${prefix}-tearsheet-stack-step-size-changed`,\n      this.handleStackStepSizeChanged as EventListener\n    );\n\n    // Check if this tearsheet is wrapped in a stack provider\n    // This handles the case where the stack wrapper connected before this tearsheet\n    this._checkForStackWrapper();\n\n    // Set visibility class\n    if (this.open) {\n      this.classList.add('is-visible');\n    } else {\n      this.classList.remove('is-visible');\n    }\n\n    // Listen for close button click from header\n    this.addEventListener(\n      `${prefix}-tearsheet-header-close-button-clicked`,\n      this.handleHeaderCloseButtonClick as EventListener\n    );\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    this.updateCSSCustomProperties();\n    this.isSm = this.isSmallDevice?.matches || this.variant === 'narrow';\n    // Initialize all signals on first update\n    updateTearsheetSignals({\n      variant: this.variant,\n      isSm: this.isSm,\n      open: this.open,\n      hasAILabel: this.hasAILabel,\n    });\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    this.updateIsSmState(_changedProperties);\n    this.handleOpenPropertyChange(_changedProperties);\n    this.updateCSSPropertiesIfNeeded(_changedProperties);\n\n    if (_changedProperties.has('variant')) {\n      updateTearsheetSignals({ variant: this.variant });\n    }\n\n    if (_changedProperties.has('isSm')) {\n      this.updateInfluencerVisibility();\n    }\n\n    this.updateStackPropertiesIfNeeded();\n  }\n\n  private updateIsSmState(_changedProperties: PropertyValues): void {\n    const previousIsSm = this.isSm;\n    this.isSm = this.isSmallDevice?.matches || this.variant === 'narrow';\n\n    if (this.isSm !== previousIsSm) {\n      updateTearsheetSignals({ isSm: this.isSm });\n    }\n  }\n\n  private handleOpenPropertyChange(_changedProperties: PropertyValues): void {\n    if (!_changedProperties.has('open')) {\n      return;\n    }\n\n    updateTearsheetSignals({ open: this.open });\n\n    // Only register with stack manager if stacking is enabled\n    if (this._stackingEnabled && this.modalBodyElement) {\n      stackManager.notifyStack(this.uniqueId, this.open, this.modalBodyElement);\n    }\n\n    this.classList.toggle('is-visible', this.open);\n\n    // Only update stack properties if stacking is enabled\n    if (this._stackingEnabled) {\n      this.updateStackProperties();\n    }\n  }\n\n  private updateCSSPropertiesIfNeeded(\n    _changedProperties: PropertyValues\n  ): void {\n    const hasRelevantChanges =\n      _changedProperties.has('influencerWidth') ||\n      _changedProperties.has('summaryContentWidth') ||\n      _changedProperties.has('verticalGap');\n\n    if (hasRelevantChanges) {\n      this.updateCSSCustomProperties();\n    }\n  }\n\n  private updateStackPropertiesIfNeeded(): void {\n    // Only update if stacking is enabled\n    if (!this._stackingEnabled) {\n      return;\n    }\n\n    const stackState = stackManager.state;\n    if (stackState.stack.length > 0) {\n      this.updateStackProperties();\n    }\n  }\n\n  /**\n   * Update CSS custom properties for stacking\n   */\n  private updateStackProperties(): void {\n    const stackState = stackManager.state;\n    const depth = stackManager.getDepth(this.uniqueId);\n    const scaleFactor = stackManager.getScaleFactor(this.uniqueId);\n    const blockSizeChange = stackManager.getBlockSizeChange(this.uniqueId);\n\n    // Manage --stack-activated class on host element\n    if (stackState.stack.length > 1) {\n      this.classList.add(`${blockClass}--stack-activated`);\n    } else {\n      this.classList.remove(`${blockClass}--stack-activated`);\n    }\n\n    if (depth !== -1) {\n      this.style.setProperty('--stack-depth', depth.toString());\n      this.style.setProperty('--scale-factor', scaleFactor.toString());\n      this.style.setProperty('--block-size-change', blockSizeChange);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // Remove event listeners\n    this.removeEventListener(\n      `${prefix}-tearsheet-header-close-button-clicked`,\n      this.handleHeaderCloseButtonClick as EventListener\n    );\n    this.removeEventListener(\n      `${prefix}-tearsheet-stack-connected`,\n      this.handleStackConnected as EventListener\n    );\n    this.removeEventListener(\n      `${prefix}-tearsheet-stack-step-size-changed`,\n      this.handleStackStepSizeChanged as EventListener\n    );\n\n    // Notify stack manager that this tearsheet is closing (only if stacking was enabled)\n    if (this._stackingEnabled) {\n      stackManager.notifyStack(this.uniqueId, false, null);\n    }\n\n    // Clean up CSS custom properties\n    if (this.influencerWidth) {\n      document.documentElement.style.removeProperty(\n        '--tearsheet-influencer-width'\n      );\n    }\n    if (this.summaryContentWidth) {\n      document.documentElement.style.removeProperty(\n        '--tearsheet-summary-content-width'\n      );\n    }\n    if (this.verticalGap) {\n      document.documentElement.style.removeProperty('--tearsheet-vertical-gap');\n    }\n  }\n\n  /**\n   * Update CSS custom properties for dynamic styling\n   */\n  private updateCSSCustomProperties(): void {\n    if (this.influencerWidth) {\n      document.documentElement.style.setProperty(\n        '--tearsheet-influencer-width',\n        this.influencerWidth\n      );\n    }\n    if (this.summaryContentWidth) {\n      document.documentElement.style.setProperty(\n        '--tearsheet-summary-content-width',\n        this.summaryContentWidth\n      );\n    }\n    if (this.verticalGap) {\n      document.documentElement.style.setProperty(\n        '--tearsheet-vertical-gap',\n        this.verticalGap\n      );\n    }\n  }\n\n  /**\n   * Update influencer visibility based on slot content and screen size\n   * Handles both slot changes and screen size changes\n   */\n  private updateInfluencerVisibility(slot?: HTMLSlotElement): void {\n    const influencerSlot =\n      slot ||\n      (this.shadowRoot?.querySelector(\n        'slot[name=\"influencer\"]'\n      ) as HTMLSlotElement);\n\n    if (!influencerSlot) {\n      return;\n    }\n\n    const hasContent =\n      influencerSlot.assignedNodes({ flatten: true }).length > 0;\n    const shouldShow = hasContent && !this.isSm;\n\n    // Update CSS class on modal body\n    if (this.modalBodyElement) {\n      if (shouldShow) {\n        this.modalBodyElement.classList.add(\n          `${blockClass}__body-layout--has-influencer`\n        );\n      } else {\n        this.modalBodyElement.classList.remove(\n          `${blockClass}__body-layout--has-influencer`\n        );\n      }\n    }\n  }\n\n  /**\n   * Check if this tearsheet is wrapped in a stack provider\n   */\n  private _checkForStackWrapper(): void {\n    // Check if there's a c4p-tearsheet-stack ancestor\n    let parent = this.parentElement;\n    while (parent) {\n      if (parent.tagName.toLowerCase() === `${prefix}-tearsheet-stack`) {\n        this._stackingEnabled = true;\n        return;\n      }\n      parent = parent.parentElement;\n    }\n    this._stackingEnabled = false;\n  }\n\n  /**\n   * Handle stack wrapper connected event\n   */\n  private handleStackConnected = (event: Event) => {\n    event.stopPropagation();\n    this._stackingEnabled = true;\n  };\n\n  /**\n   * Handle stack step size changed event\n   */\n  private handleStackStepSizeChanged = (event: Event) => {\n    event.stopPropagation();\n    // Stack manager is already updated by the wrapper\n    // Just trigger a re-render of stack properties if needed\n    if (this._stackingEnabled && this.open) {\n      this.updateStackProperties();\n    }\n  };\n\n  /**\n   * Handle influencer slot change\n   */\n  private handleInfluencerSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    this.updateInfluencerVisibility(slot);\n  };\n\n  /**\n   * Common method to handle tearsheet close with proper event dispatching\n   * @param originalEvent - The original event that triggered the close (optional)\n   * @param useAsync - Whether to dispatch closed event asynchronously\n   */\n  private closeTearsheet(originalEvent?: Event, useAsync: boolean = false) {\n    // Dispatch the beingclosed event (cancelable)\n    const beforeCloseEvent = new CustomEvent(\n      `${prefix}-preview-tearsheet-beingclosed`,\n      {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {},\n      }\n    );\n\n    if (!this.dispatchEvent(beforeCloseEvent)) {\n      // If event was cancelled, prevent closing\n      if (originalEvent) {\n        originalEvent.preventDefault();\n      }\n      return;\n    }\n\n    // Close the tearsheet\n    this.open = false;\n\n    // Dispatch closed event\n    const dispatchClosedEvent = () => {\n      this.dispatchEvent(\n        new CustomEvent(`${prefix}-preview-tearsheet-closed`, {\n          bubbles: true,\n          composed: true,\n          detail: {},\n        })\n      );\n    };\n\n    if (useAsync) {\n      // Use microtask for async scenarios (e.g., click outside)\n      Promise.resolve().then(dispatchClosedEvent);\n    } else {\n      dispatchClosedEvent();\n    }\n  }\n\n  /**\n   * Handle close button click from the header\n   * This is an internal event that triggers the tearsheet to close\n   */\n  private handleHeaderCloseButtonClick = (event: Event) => {\n    // Stop the internal event from propagating\n    event.stopPropagation();\n    this.closeTearsheet();\n  };\n\n  /**\n   * Handle close event from the modal (ESC key, click outside, etc.)\n   */\n  private handleClose = (event: Event) => {\n    this.closeTearsheet(event, true);\n  };\n\n  /**\n   * Parse floating menu selectors from comma-separated string\n   */\n  private getFloatingMenuSelectors(): string {\n    const defaultSelectors = [\n      `.${prefix}--overflow-menu-options`,\n      `.${prefix}--tooltip`,\n      '.flatpickr-calendar',\n      `.${blockClass}__container`,\n      `.${prefix}--menu`,\n    ];\n\n    const customSelectors = this.selectorsFloatingMenus\n      ? this.selectorsFloatingMenus.split(',').map((s) => s.trim())\n      : [];\n\n    return [...defaultSelectors, ...customSelectors].join(',');\n  }\n\n  render() {\n    const classes = classMap({\n      [blockClass]: true,\n      [`${blockClass}--wide`]: this.variant === 'wide',\n      [`${blockClass}--narrow`]: this.variant === 'narrow',\n      [`${blockClass}--has-ai-label`]: this.hasAILabel,\n      [`${blockClass}--has-decorator`]: this.hasDecorator && !this.hasAILabel,\n    });\n\n    const containerClasses = `${blockClass}__container ${this.containerClassName}`;\n\n    return html`<cds-modal\n      class=${classes}\n      size=${this.variant === 'narrow' ? 'sm' : 'lg'}\n      ?open=\"${this.open}\"\n      container-class=\"${containerClasses}\"\n      ?prevent-close-on-click-outside=\"${this.preventCloseOnClickOutside}\"\n      aria-label=\"${ifDefined(this.ariaLabel || undefined)}\"\n      selector-primary-focus=\"${ifDefined(\n        this.selectorPrimaryFocus || undefined\n      )}\"\n      selectors-floating-menus=\"${this.getFloatingMenuSelectors()}\"\n      @cds-modal-beingclosed=\"${this.handleClose}\"\n      @cds-modal-closed=\"${this.handleClose}\"\n      ?full-width=\"${true}\"\n      ai-label=\"${ifDefined(this.hasAILabel || undefined)}\"\n    >\n      <slot name=\"decorator\"></slot>\n      <slot name=\"header\"></slot>\n      <cds-modal-body class=\"${blockClass}__body-layout\">\n        <slot\n          name=\"influencer\"\n          @slotchange=${this.handleInfluencerSlotChange}\n        ></slot>\n        <slot name=\"body\"></slot>\n        <slot name=\"footer\"></slot>\n      </cds-modal-body>\n    </cds-modal>`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTearsheet;\n"],"mappings":"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"}
+{"version":3,"file":"tearsheet.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet.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 { LitElement, PropertyValues, html } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './tearsheet.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { MatchMediaController } from '../../globals/js/utils/match-media-controller';\nimport { breakpoints } from '@carbon/layout';\nimport { blockClass, updateTearsheetSignals } from './tearsheet-signal';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { stackManager } from './stack-signal';\nimport {\n  trapFocus,\n  clearFocusableContainers,\n} from '../../utilities/manageFocusTrap/manageFocusTrap';\n\n/**\n * Tearsheet component - A slide-out panel for displaying detailed content.\n *\n * @element c4p-preview-tearsheet\n * @slot header - The header content of the tearsheet\n * @slot influencer - Optional left sidebar content (wide variant only)\n * @slot body - Main body content\n * @slot footer - Footer content with actions\n * @fires c4p-preview-tearsheet-beingclosed - Fired when the tearsheet is about to close\n * @fires c4p-preview-tearsheet-closed - Fired after the tearsheet has closed\n */\n@customElement(`${prefix}-preview-tearsheet`)\nclass CDSTearsheet extends SignalWatcher(HostListenerMixin(LitElement)) {\n  /**\n   * Specifies whether the tearsheet is currently open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  /**\n   * User can pass any class names that will be added to the modal container\n   */\n  @property({ attribute: 'container-class-name' })\n  containerClassName: string = '';\n\n  /**\n   * Default influencer takes 256px, this allows override eg: 300px, 20rem\n   */\n  @property({ attribute: 'influencer-width' })\n  influencerWidth: string = '';\n\n  /**\n   * Default summary content takes 256px, this allows override eg: 300px, 20rem\n   */\n  @property({ attribute: 'summary-content-width' })\n  summaryContentWidth: string = '';\n\n  /**\n   * Defines the gap from top of the viewport. Defaulted to 3rem\n   */\n  @property({ attribute: 'vertical-gap' })\n  verticalGap: string = '';\n\n  /**\n   * Default to wide variant. Pass in narrow for narrow tearsheet\n   */\n  @property({ reflect: true })\n  variant: 'wide' | 'narrow' = 'wide';\n\n  /**\n   * Specify the CSS selectors that match the floating menus (comma-separated)\n   */\n  @property({ attribute: 'selectors-floating-menus' })\n  selectorsFloatingMenus: string = '';\n\n  /**\n   * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens\n   */\n  @property({ attribute: 'selector-primary-focus' })\n  selectorPrimaryFocus: string = '';\n\n  /**\n   * Prevents the modal from closing when clicking outside\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside: boolean = false;\n\n  /**\n   * Optional ref to the trigger button that opened the tearsheet. Focus will return here when tearsheet closes.\n   */\n  @property({ attribute: false })\n  launcherButtonRef?: HTMLElement;\n\n  /**\n   * Unique ID for this tearsheet instance\n   */\n  private uniqueId: string = `tearsheet-${Math.random().toString(36).substr(2, 9)}`;\n\n  /**\n   * Internal flag to track if stacking is enabled (via wrapper)\n   */\n  private _stackingEnabled: boolean = false;\n\n  /**\n   * Internal state for tracking if the tearsheet is in small screen mode\n   */\n  @state()\n  private isSm: boolean = false;\n\n  /**\n   * Query the modal body element\n   */\n  @query('cds-modal-body')\n  private modalBodyElement?: HTMLElement;\n\n  private _trapFocusAPI: { cleanup: () => void } | null = null;\n  private _wasOpen = false;\n  /**\n   * Query the header content element to get its titleId\n   */\n  @query(`${prefix}-tearsheet-header-content`)\n  private headerContentElement?: any;\n\n  private smMediaQuery = `(max-width: ${breakpoints.md.width})`;\n  private isSmallDevice = new MatchMediaController(\n    this,\n    this.smMediaQuery,\n    false\n  );\n  /**\n   * Checks if the tearsheet has a decorator (AI label or other)\n   */\n  private get hasDecorator(): boolean {\n    const headerElement = this.querySelector(`${prefix}-tearsheet-header`);\n    if (!headerElement) {\n      return false;\n    }\n    const decorator = headerElement.querySelector('[slot=\"decorator\"]');\n    return !!decorator;\n  }\n\n  /**\n   * Checks if the tearsheet has an AI label decorator\n   */\n  private get hasAILabel(): boolean {\n    const headerElement = this.querySelector(`${prefix}-tearsheet-header`);\n    if (!headerElement) {\n      return false;\n    }\n    const decorator = headerElement.querySelector('[slot=\"decorator\"]');\n    if (!decorator) {\n      return false;\n    }\n    const tagName = decorator.tagName.toLowerCase();\n    return tagName === 'cds-ai-label' || tagName === `${prefix}-ai-label`;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    // Listen for stack wrapper events first\n    this.addEventListener(\n      `${prefix}-tearsheet-stack-connected`,\n      this.handleStackConnected as EventListener\n    );\n    this.addEventListener(\n      `${prefix}-tearsheet-stack-step-size-changed`,\n      this.handleStackStepSizeChanged as EventListener\n    );\n\n    // Check if this tearsheet is wrapped in a stack provider\n    // This handles the case where the stack wrapper connected before this tearsheet\n    this._checkForStackWrapper();\n\n    // Set visibility class\n    if (this.open) {\n      this.classList.add('is-visible');\n    } else {\n      this.classList.remove('is-visible');\n    }\n\n    // Listen for close button click from header\n    this.addEventListener(\n      `${prefix}-tearsheet-header-close-button-clicked`,\n      this.handleHeaderCloseButtonClick as EventListener\n    );\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    this.updateCSSCustomProperties();\n    this.isSm = this.isSmallDevice?.matches || this.variant === 'narrow';\n    // Initialize all signals on first update, including uniqueId so children can register\n    updateTearsheetSignals({\n      variant: this.variant,\n      isSm: this.isSm,\n      open: this.open,\n      hasAILabel: this.hasAILabel,\n      uniqueId: this.uniqueId,\n    });\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    this.updateIsSmState(_changedProperties);\n    this.handleOpenPropertyChange(_changedProperties);\n    this.updateCSSPropertiesIfNeeded(_changedProperties);\n\n    if (_changedProperties.has('variant')) {\n      updateTearsheetSignals({ variant: this.variant });\n    }\n\n    if (_changedProperties.has('isSm')) {\n      this.updateInfluencerVisibility();\n    }\n\n    this.updateStackPropertiesIfNeeded();\n  }\n\n  private updateIsSmState(_changedProperties: PropertyValues): void {\n    const previousIsSm = this.isSm;\n    this.isSm = this.isSmallDevice?.matches || this.variant === 'narrow';\n\n    if (this.isSm !== previousIsSm) {\n      updateTearsheetSignals({ isSm: this.isSm });\n    }\n  }\n\n  private handleOpenPropertyChange(_changedProperties: PropertyValues): void {\n    if (!_changedProperties.has('open')) {\n      return;\n    }\n    const wasOpen = this._wasOpen;\n    const isOpen = this.open;\n\n    updateTearsheetSignals({ open: this.open });\n\n    // Only register with stack manager if stacking is enabled\n    if (this._stackingEnabled && this.modalBodyElement) {\n      stackManager.notifyStack(this.uniqueId, this.open, this.modalBodyElement);\n    }\n\n    this.classList.toggle('is-visible', this.open);\n\n    // Only update stack properties if stacking is enabled\n    if (this._stackingEnabled) {\n      this.updateStackProperties();\n    }\n\n    // Initialize focus trap when tearsheet opens\n    if (!wasOpen && isOpen) {\n      // `focusableContainers` holds the containers where we can query DOM elements.\n      // Our strategy here is to let child/slotted components register their containers,\n      // which are then passed to `trapFocus`. This allows the utility to query elements\n      // directly without being blocked by shadow DOM boundaries.\n\n      // Update signal with current uniqueId FIRST so children can register\n      updateTearsheetSignals({ uniqueId: this.uniqueId });\n\n      // Use requestAnimationFrame to ensure child components have registered their containers\n      requestAnimationFrame(() => {\n        this._trapFocusAPI = trapFocus(this as HTMLElement, this.uniqueId);\n      });\n    }\n\n    this._wasOpen = isOpen;\n    //  Return focus to launcher button when tearsheet closes\n    if (!this.open && this.launcherButtonRef) {\n      // Use a small delay to ensure the tearsheet has fully closed\n      setTimeout(() => {\n        if (this.launcherButtonRef instanceof HTMLElement) {\n          // Check if the button is inside a TearsheetHeaderActions component\n          const headerActionItem = this.launcherButtonRef.closest(\n            `.${blockClass}__header-action-item`\n          );\n\n          if (headerActionItem) {\n            // This is a button inside TearsheetHeaderActions\n            // Check if it's currently visible or if items are collapsed to menu\n            const headerActionsContainer = headerActionItem.closest(\n              `.${blockClass}__content__header-actions`\n            );\n            const menuButton = headerActionsContainer?.querySelector(\n              `.${blockClass}__header-actions-menuButton:not(.${blockClass}__header-actions-menuButton--hidden) button`\n            );\n\n            if (menuButton instanceof HTMLElement) {\n              // On small screens, action buttons collapse to menu - focus the menu button\n              menuButton.focus();\n            } else {\n              // On large screens, focus the action button directly\n              this.launcherButtonRef.focus();\n            }\n          } else {\n            // Regular button ref (not inside TearsheetHeaderActions): focus directly\n            this.launcherButtonRef.focus();\n          }\n        }\n      }, 100);\n    }\n  }\n\n  private updateCSSPropertiesIfNeeded(\n    _changedProperties: PropertyValues\n  ): void {\n    const hasRelevantChanges =\n      _changedProperties.has('influencerWidth') ||\n      _changedProperties.has('summaryContentWidth') ||\n      _changedProperties.has('verticalGap');\n\n    if (hasRelevantChanges) {\n      this.updateCSSCustomProperties();\n    }\n  }\n\n  private updateStackPropertiesIfNeeded(): void {\n    // Only update if stacking is enabled\n    if (!this._stackingEnabled) {\n      return;\n    }\n\n    const stackState = stackManager.state;\n    if (stackState.stack.length > 0) {\n      this.updateStackProperties();\n    }\n  }\n\n  /**\n   * Update CSS custom properties for stacking\n   */\n  private updateStackProperties(): void {\n    const stackState = stackManager.state;\n    const depth = stackManager.getDepth(this.uniqueId);\n    const scaleFactor = stackManager.getScaleFactor(this.uniqueId);\n    const blockSizeChange = stackManager.getBlockSizeChange(this.uniqueId);\n\n    // Manage --stack-activated class on host element\n    if (stackState.stack.length > 1) {\n      this.classList.add(`${blockClass}--stack-activated`);\n    } else {\n      this.classList.remove(`${blockClass}--stack-activated`);\n    }\n\n    if (depth !== -1) {\n      this.style.setProperty('--stack-depth', depth.toString());\n      this.style.setProperty('--scale-factor', scaleFactor.toString());\n      this.style.setProperty('--block-size-change', blockSizeChange);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // Cleanup focus trap and clear all registered containers\n    this._trapFocusAPI?.cleanup();\n\n    clearFocusableContainers();\n\n    // Remove event listeners\n    this.removeEventListener(\n      `${prefix}-tearsheet-header-close-button-clicked`,\n      this.handleHeaderCloseButtonClick as EventListener\n    );\n    this.removeEventListener(\n      `${prefix}-tearsheet-stack-connected`,\n      this.handleStackConnected as EventListener\n    );\n    this.removeEventListener(\n      `${prefix}-tearsheet-stack-step-size-changed`,\n      this.handleStackStepSizeChanged as EventListener\n    );\n\n    // Notify stack manager that this tearsheet is closing (only if stacking was enabled)\n    if (this._stackingEnabled) {\n      stackManager.notifyStack(this.uniqueId, false, null);\n    }\n\n    // Clean up CSS custom properties\n    if (this.influencerWidth) {\n      document.documentElement.style.removeProperty(\n        '--tearsheet-influencer-width'\n      );\n    }\n    if (this.summaryContentWidth) {\n      document.documentElement.style.removeProperty(\n        '--tearsheet-summary-content-width'\n      );\n    }\n    if (this.verticalGap) {\n      document.documentElement.style.removeProperty('--tearsheet-vertical-gap');\n    }\n  }\n\n  /**\n   * Update CSS custom properties for dynamic styling\n   */\n  private updateCSSCustomProperties(): void {\n    if (this.influencerWidth) {\n      document.documentElement.style.setProperty(\n        '--tearsheet-influencer-width',\n        this.influencerWidth\n      );\n    }\n    if (this.summaryContentWidth) {\n      document.documentElement.style.setProperty(\n        '--tearsheet-summary-content-width',\n        this.summaryContentWidth\n      );\n    }\n    if (this.verticalGap) {\n      document.documentElement.style.setProperty(\n        '--tearsheet-vertical-gap',\n        this.verticalGap\n      );\n    }\n  }\n\n  /**\n   * Update influencer visibility based on slot content and screen size\n   * Handles both slot changes and screen size changes\n   */\n  private updateInfluencerVisibility(slot?: HTMLSlotElement): void {\n    const influencerSlot =\n      slot ||\n      (this.shadowRoot?.querySelector(\n        'slot[name=\"influencer\"]'\n      ) as HTMLSlotElement);\n\n    if (!influencerSlot) {\n      return;\n    }\n\n    const hasContent =\n      influencerSlot.assignedNodes({ flatten: true }).length > 0;\n    const shouldShow = hasContent && !this.isSm;\n\n    // Update CSS class on modal body\n    if (this.modalBodyElement) {\n      if (shouldShow) {\n        this.modalBodyElement.classList.add(\n          `${blockClass}__body-layout--has-influencer`\n        );\n      } else {\n        this.modalBodyElement.classList.remove(\n          `${blockClass}__body-layout--has-influencer`\n        );\n      }\n    }\n  }\n\n  /**\n   * Check if this tearsheet is wrapped in a stack provider\n   */\n  private _checkForStackWrapper(): void {\n    // Check if there's a c4p-tearsheet-stack ancestor\n    let parent = this.parentElement;\n    while (parent) {\n      if (parent.tagName.toLowerCase() === `${prefix}-tearsheet-stack`) {\n        this._stackingEnabled = true;\n        return;\n      }\n      parent = parent.parentElement;\n    }\n    this._stackingEnabled = false;\n  }\n\n  /**\n   * Handle stack wrapper connected event\n   */\n  private handleStackConnected = (event: Event) => {\n    event.stopPropagation();\n    this._stackingEnabled = true;\n  };\n\n  /**\n   * Handle stack step size changed event\n   */\n  private handleStackStepSizeChanged = (event: Event) => {\n    event.stopPropagation();\n    // Stack manager is already updated by the wrapper\n    // Just trigger a re-render of stack properties if needed\n    if (this._stackingEnabled && this.open) {\n      this.updateStackProperties();\n    }\n  };\n\n  /**\n   * Handle influencer slot change\n   */\n  private handleInfluencerSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    this.updateInfluencerVisibility(slot);\n  };\n\n  /**\n   * Common method to handle tearsheet close with proper event dispatching\n   * @param originalEvent - The original event that triggered the close (optional)\n   * @param useAsync - Whether to dispatch closed event asynchronously\n   */\n  private closeTearsheet(originalEvent?: Event, useAsync: boolean = false) {\n    // Dispatch the beingclosed event (cancelable)\n    const beforeCloseEvent = new CustomEvent(\n      `${prefix}-preview-tearsheet-beingclosed`,\n      {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {},\n      }\n    );\n\n    if (!this.dispatchEvent(beforeCloseEvent)) {\n      // If event was cancelled, prevent closing\n      if (originalEvent) {\n        originalEvent.preventDefault();\n      }\n      return;\n    }\n\n    // Close the tearsheet\n    this.open = false;\n\n    // Dispatch closed event\n    const dispatchClosedEvent = () => {\n      this.dispatchEvent(\n        new CustomEvent(`${prefix}-preview-tearsheet-closed`, {\n          bubbles: true,\n          composed: true,\n          detail: {},\n        })\n      );\n    };\n\n    if (useAsync) {\n      // Use microtask for async scenarios (e.g., click outside)\n      Promise.resolve().then(dispatchClosedEvent);\n    } else {\n      dispatchClosedEvent();\n    }\n  }\n\n  /**\n   * Handle close button click from the header\n   * This is an internal event that triggers the tearsheet to close\n   */\n  private handleHeaderCloseButtonClick = (event: Event) => {\n    // Stop the internal event from propagating\n    event.stopPropagation();\n    this.closeTearsheet();\n  };\n\n  /**\n   * Handle close event from the modal (ESC key, click outside, etc.)\n   */\n  private handleClose = (event: Event) => {\n    this.closeTearsheet(event, true);\n  };\n\n  /**\n   * Parse floating menu selectors from comma-separated string\n   */\n  private getFloatingMenuSelectors(): string {\n    const defaultSelectors = [\n      `.${prefix}--overflow-menu-options`,\n      `.${prefix}--tooltip`,\n      '.flatpickr-calendar',\n      `.${blockClass}__container`,\n      `.${prefix}--menu`,\n    ];\n\n    const customSelectors = this.selectorsFloatingMenus\n      ? this.selectorsFloatingMenus.split(',').map((s) => s.trim())\n      : [];\n\n    return [...defaultSelectors, ...customSelectors].join(',');\n  }\n\n  render() {\n    const classes = classMap({\n      [blockClass]: true,\n      [`${blockClass}--wide`]: this.variant === 'wide',\n      [`${blockClass}--narrow`]: this.variant === 'narrow',\n      [`${blockClass}--has-ai-label`]: this.hasAILabel,\n      [`${blockClass}--has-decorator`]: this.hasDecorator && !this.hasAILabel,\n    });\n\n    const containerClasses = `${blockClass}__container ${this.containerClassName}`;\n\n    const computedAriaLabelledby =\n      !this.ariaLabel && this.headerContentElement?.titleId\n        ? this.headerContentElement.titleId\n        : undefined;\n\n    return html`<cds-modal\n      class=${classes}\n      size=${this.variant === 'narrow' ? 'sm' : 'lg'}\n      ?open=\"${this.open}\"\n      container-class=\"${containerClasses}\"\n      ?prevent-close-on-click-outside=\"${this.preventCloseOnClickOutside}\"\n      aria-label=\"${ifDefined(this.ariaLabel || undefined)}\"\n      aria-labelledby=\"${ifDefined(computedAriaLabelledby)}\"\n      selector-primary-focus=\"${ifDefined(\n        this.selectorPrimaryFocus || undefined\n      )}\"\n      selectors-floating-menus=\"${this.getFloatingMenuSelectors()}\"\n      @cds-modal-beingclosed=\"${this.handleClose}\"\n      @cds-modal-closed=\"${this.handleClose}\"\n      ?full-width=\"${true}\"\n      ai-label=\"${ifDefined(this.hasAILabel || undefined)}\"\n    >\n      <slot name=\"decorator\"></slot>\n      <slot name=\"header\"></slot>\n      <cds-modal-body class=\"${blockClass}__body-layout\">\n        <slot\n          name=\"influencer\"\n          @slotchange=${this.handleInfluencerSlotChange}\n        ></slot>\n        <slot name=\"body\"></slot>\n        <slot name=\"footer\"></slot>\n      </cds-modal-body>\n    </cds-modal>`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTearsheet;\n"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"tearsheet.scss.js","names":[],"sources":["../../../src/components/tearsheet-preview/tearsheet.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$css--plex: true !default;\n\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/utilities';\n@use '@carbon/styles/scss/utilities/ai-gradient' as *;\n\n@use '@carbon/ibm-products-styles/scss/components/Tearsheet/_tearsheet_next.scss'\n  as *;\n\n$c4p-prefix: 'c4p';\n$carbon-prefix: 'cds';\n\n$block-class__next: #{$c4p-prefix}--tearsheet__next;\n$motion-duration: $duration-moderate-02;\n\n@mixin collapsed-element {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  max-block-size: 0;\n  opacity: 0;\n  pointer-events: none;\n  transition: all $motion-duration motion(entrance, expressive);\n}\n.#{$block-class__next}--has-ai-label::part(dialog) {\n  border: 1px solid transparent !important; /* stylelint-disable-line declaration-no-important */\n\n  /* override carbon ai removing background gradient */\n  background:\n    linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,\n    linear-gradient(\n        to bottom,\n        var(--cds-ai-border-start, #78a9ff),\n        var(--cds-ai-border-end, #d0e2ff)\n      )\n      border-box,\n    linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;\n  border-block-end: 0;\n  box-shadow: 0 4px 10px 2px $ai-drop-shadow;\n}\n\n.#{$block-class__next}__main-content {\n  position: relative;\n\n  &.#{$block-class__next}__flush {\n    padding-inline: 0;\n  }\n\n  &.#{$block-class__next}__main-content--no-summary {\n    grid-column: 1 / -1;\n  }\n\n  &.#{$block-class__next}__main-content--has-ai-label {\n    @include ai-popover-gradient('default', 0, 'background');\n\n    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;\n  }\n}\n\n:host ::slotted([slot='summary-content']) {\n  @extend .#{$block-class__next}__summary-content;\n}\n\n:host ::slotted([slot='summary-content'][is-flush]) {\n  padding-inline: 0;\n}\n:host(#{$c4p-prefix}-preview-tearsheet) {\n  @media screen and (prefers-reduced-motion: reduce) {\n    ::part(dialog) {\n      align-self: flex-end;\n      border: 1px solid $border-subtle-01;\n      block-size: 100%;\n      inset-block-start: auto;\n      max-block-size: calc(\n        100% - var(--tearsheet-vertical-gap, #{$spacing-09})\n      );\n      transform: translate3d(0, min(95vh, 500px), 0);\n      transition: none;\n    }\n  }\n\n  ::part(dialog) {\n    align-self: flex-end;\n    border: 1px solid $border-subtle-01;\n    block-size: 100%;\n    inset-block-start: auto;\n    max-block-size: calc(100% - var(--tearsheet-vertical-gap, #{$spacing-09}));\n    transform: translate3d(0, min(95vh, 500px), 0);\n    transition:\n      transform $motion-duration motion(entrance, expressive),\n      max-block-size $motion-duration motion(entrance, expressive);\n  }\n\n  ::slotted([slot='influencer']) {\n    @extend .#{$block-class__next}__influencer;\n  }\n\n  ::slotted([slot='influencer'][is-flush]) {\n    padding-inline: 0;\n  }\n\n  ::slotted([slot='body']) {\n    @extend .#{$block-class__next}__body;\n  }\n\n  ::slotted([slot='footer']) {\n    @extend .#{$block-class__next}__footer;\n  }\n}\n:host(#{$c4p-prefix}-preview-tearsheet[open]) {\n  ::part(dialog) {\n    transform: translate3d(0, 0, 0);\n    transition: transform $duration-moderate-02 motion(entrance, expressive);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n}\n\n// This will set full screen height for tearsheets in mobile devices\n:host(:not(.#{$block-class__next}--stack-activated.is-visible)) {\n  ::part(dialog) {\n    @include breakpoint-down(md) {\n      max-block-size: none;\n    }\n  }\n}\n\n// Stacking styles\n:host(\n  #{$c4p-prefix}-preview-tearsheet.#{$block-class__next}--stack-activated.is-visible\n) {\n  --overlay-color: #{$overlay};\n  --overlay-alpha: 0.5;\n\n  &::before {\n    position: fixed;\n    z-index: calc(#{utilities.z('modal')} - var(--stack-depth, 0));\n    display: block;\n    background: var(--overlay-color);\n    content: '';\n    inset: 0;\n    opacity: calc(var(--overlay-alpha) - var(--stack-depth) * 0.1);\n    pointer-events: none;\n\n    transition:\n      background-color $motion-duration motion(exit, expressive),\n      opacity $motion-duration motion(exit, expressive);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  #{$carbon-prefix}-modal {\n    background-color: transparent;\n  }\n\n  ::part(dialog) {\n    max-block-size: calc(\n      100% - var(--tearsheet-vertical-gap, #{$spacing-09}) +\n        var(--block-size-change)\n    );\n    transform: scaleX(var(--scale-factor));\n  }\n}\n\n// Narrow variant styles\n:host(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n  .#{$block-class__next}__header {\n    padding-inline: $spacing-05;\n  }\n\n  .#{$block-class__next}__header.#{$block-class__next}__header-collapsed {\n    .#{$block-class__next}__header-actions {\n      display: none;\n    }\n  }\n\n  .#{$block-class__next}__header-content-wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .#{$block-class__next}__header-title {\n    @include type.type-style('heading-03');\n  }\n\n  .#{$block-class__next}__content__header-actions {\n    justify-content: flex-start;\n    margin-inline-end: 0;\n  }\n\n  .#{$block-class__next}__body {\n    grid-template-columns: 1fr 0;\n  }\n\n  ::slotted([slot='influencer']),\n  ::slotted([slot='summary-content']) {\n    padding: 0 !important; /* stylelint-disable-line declaration-no-important */\n  }\n}\n\n// Small screen styles\n@include breakpoint-down(md) {\n  :host(#{$c4p-prefix}-preview-tearsheet) {\n    ::slotted([slot='influencer']),\n    ::slotted([slot='summary-content']) {\n      padding: 0 !important; /* stylelint-disable-line declaration-no-important */\n    }\n  }\n}\n\n.#{$block-class__next}__header-label {\n  @extend .#{$block-class__next}__header-label;\n}\n.#{$block-class__next}__header-title {\n  @extend .#{$block-class__next}__header-title;\n}\n\n.#{$block-class__next}__header-description {\n  @extend .#{$block-class__next}__header-description;\n}\n\n:host {\n  #{$c4p-prefix}-side-panel::part(dialog) {\n    @extend .#{$block-class__next}__side-panel; // Extend the side panel styles}\n  }\n}\n\n:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n  ::slotted([slot='summary-content']) {\n    padding: 0;\n  }\n}\n\n:host ::slotted([slot='footer']) {\n  padding-block: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"tearsheet.scss.js","names":[],"sources":["../../../src/components/tearsheet-preview/tearsheet.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$css--plex: true !default;\n\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/utilities';\n@use '@carbon/styles/scss/utilities/ai-gradient' as *;\n@use '@carbon/styles/scss/utilities/focus-outline';\n\n@use '@carbon/ibm-products-styles/scss/components/Tearsheet/_tearsheet_next.scss'\n  as *;\n\n$c4p-prefix: 'c4p';\n$carbon-prefix: 'cds';\n\n$block-class__next: #{$c4p-prefix}--tearsheet__next;\n$motion-duration: $duration-moderate-02;\n\n@mixin collapsed-element {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  max-block-size: 0;\n  opacity: 0;\n  pointer-events: none;\n  transition: all $motion-duration motion(entrance, expressive);\n}\n.#{$block-class__next}--has-ai-label::part(dialog) {\n  border: 1px solid transparent !important; /* stylelint-disable-line declaration-no-important */\n\n  /* override carbon ai removing background gradient */\n  background:\n    linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,\n    linear-gradient(\n        to bottom,\n        var(--cds-ai-border-start, #78a9ff),\n        var(--cds-ai-border-end, #d0e2ff)\n      )\n      border-box,\n    linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;\n  border-block-end: 0;\n  box-shadow: 0 4px 10px 2px $ai-drop-shadow;\n}\n\n.#{$block-class__next}__main-content {\n  position: relative;\n\n  &.#{$block-class__next}__flush {\n    padding-inline: 0;\n  }\n\n  &.#{$block-class__next}__main-content--no-summary {\n    grid-column: 1 / -1;\n  }\n\n  &.#{$block-class__next}__main-content--has-ai-label {\n    @include ai-popover-gradient('default', 0, 'background');\n\n    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;\n  }\n}\n\n:host ::slotted([slot='summary-content']) {\n  @extend .#{$block-class__next}__summary-content;\n}\n\n:host ::slotted([slot='summary-content']:focus) {\n  @include focus-outline.focus-outline('outline');\n}\n\n:host ::slotted([slot='summary-content'][is-flush]) {\n  padding-inline: 0;\n}\n:host(#{$c4p-prefix}-preview-tearsheet) {\n  @media screen and (prefers-reduced-motion: reduce) {\n    ::part(dialog) {\n      align-self: flex-end;\n      border: 1px solid $border-subtle-01;\n      block-size: 100%;\n      inset-block-start: auto;\n      max-block-size: calc(\n        100% - var(--tearsheet-vertical-gap, #{$spacing-09})\n      );\n      transform: translate3d(0, min(95vh, 500px), 0);\n      transition: none;\n    }\n  }\n\n  ::part(dialog) {\n    align-self: flex-end;\n    border: 1px solid $border-subtle-01;\n    block-size: 100%;\n    inset-block-start: auto;\n    max-block-size: calc(100% - var(--tearsheet-vertical-gap, #{$spacing-09}));\n    transform: translate3d(0, min(95vh, 500px), 0);\n    transition:\n      transform $motion-duration motion(entrance, expressive),\n      max-block-size $motion-duration motion(entrance, expressive);\n  }\n\n  ::slotted([slot='influencer']) {\n    @extend .#{$block-class__next}__influencer;\n  }\n\n  ::slotted([slot='influencer'][is-flush]) {\n    padding-inline: 0;\n  }\n\n  ::slotted([slot='body']) {\n    @extend .#{$block-class__next}__body;\n  }\n\n  ::slotted([slot='footer']) {\n    @extend .#{$block-class__next}__footer;\n  }\n}\n:host(#{$c4p-prefix}-preview-tearsheet[open]) {\n  ::part(dialog) {\n    transform: translate3d(0, 0, 0);\n    transition: transform $duration-moderate-02 motion(entrance, expressive);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n}\n\n// This will set full screen height for tearsheets in mobile devices\n:host(:not(.#{$block-class__next}--stack-activated.is-visible)) {\n  ::part(dialog) {\n    @include breakpoint-down(md) {\n      max-block-size: none;\n    }\n  }\n}\n\n// Stacking styles\n:host(\n  #{$c4p-prefix}-preview-tearsheet.#{$block-class__next}--stack-activated.is-visible\n) {\n  --overlay-color: #{$overlay};\n  --overlay-alpha: 0.5;\n\n  &::before {\n    position: fixed;\n    z-index: calc(#{utilities.z('modal')} - var(--stack-depth, 0));\n    display: block;\n    background: var(--overlay-color);\n    content: '';\n    inset: 0;\n    opacity: calc(var(--overlay-alpha) - var(--stack-depth) * 0.1);\n    pointer-events: none;\n\n    transition:\n      background-color $motion-duration motion(exit, expressive),\n      opacity $motion-duration motion(exit, expressive);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  #{$carbon-prefix}-modal {\n    background-color: transparent;\n  }\n\n  ::part(dialog) {\n    max-block-size: calc(\n      100% - var(--tearsheet-vertical-gap, #{$spacing-09}) +\n        var(--block-size-change)\n    );\n    transform: scaleX(var(--scale-factor));\n  }\n}\n\n// Narrow variant styles\n:host(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n  .#{$block-class__next}__header {\n    padding-inline: $spacing-05;\n  }\n\n  .#{$block-class__next}__header.#{$block-class__next}__header-collapsed {\n    .#{$block-class__next}__header-actions {\n      display: none;\n    }\n  }\n\n  .#{$block-class__next}__header-content-wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .#{$block-class__next}__header-title {\n    @include type.type-style('heading-03');\n  }\n\n  .#{$block-class__next}__content__header-actions {\n    justify-content: flex-start;\n    margin-inline-end: 0;\n  }\n\n  .#{$block-class__next}__body {\n    grid-template-columns: 1fr 0;\n  }\n\n  ::slotted([slot='influencer']),\n  ::slotted([slot='summary-content']) {\n    padding: 0 !important; /* stylelint-disable-line declaration-no-important */\n  }\n}\n\n// Small screen styles\n@include breakpoint-down(md) {\n  :host(#{$c4p-prefix}-preview-tearsheet) {\n    ::slotted([slot='influencer']),\n    ::slotted([slot='summary-content']) {\n      padding: 0 !important; /* stylelint-disable-line declaration-no-important */\n    }\n  }\n}\n\n.#{$block-class__next}__header-label {\n  @extend .#{$block-class__next}__header-label;\n}\n.#{$block-class__next}__header-title {\n  @extend .#{$block-class__next}__header-title;\n}\n\n.#{$block-class__next}__header-description {\n  @extend .#{$block-class__next}__header-description;\n}\n\n:host {\n  #{$c4p-prefix}-side-panel::part(dialog) {\n    @extend .#{$block-class__next}__side-panel; // Extend the side panel styles}\n  }\n}\n\n:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n  ::slotted([slot='summary-content']) {\n    padding: 0;\n  }\n}\n\n:host ::slotted([slot='footer']) {\n  padding-block: 0;\n}\n"],"mappings":""}

package/es/ibm-products-web-components/package.js

@@ -6,7 +6,7 @@
  */
 
 //#region package.json
-var version = "0.41.1-rc.0";
+var version = "0.42.0-rc.0";
 //#endregion
 export { version };
 

package/es/utilities/manageFocusTrap/manageFocusTrap.d.ts

@@ -6,9 +6,127 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export declare const registerFocusableContainers: (container: any) => void;
-export declare const clearFocusableContainers: () => void;
-export declare const trapFocus: (containers?: HTMLElement[]) => {
+/**
+ * Registers a focusable container to be included in the focus trap.
+ *
+ * This function allows child components to register their shadow roots or DOM elements
+ * so that the focus trap utility can query focusable elements within them. This is necessary
+ * because shadow DOM boundaries prevent direct querying from parent components.
+ *
+ * @param container - The HTMLElement or ShadowRoot to register as a focusable container.
+ *                    If null, the function returns early without registering.
+ * @param uniqueId - Optional unique identifier to scope containers to a specific component instance.
+ *                   If not provided, uses a default key for backward compatibility.
+ *
+ * @example
+ * // In a child component's firstUpdated lifecycle
+ * protected firstUpdated() {
+ *   const uniqueId = tearsheetSignal.get().uniqueId;
+ *   registerFocusableContainers(this.shadowRoot, uniqueId);
+ * }
+ *
+ * @example
+ * // Without uniqueId (uses default key)
+ * registerFocusableContainers(this.shadowRoot);
+ */
+export declare const registerFocusableContainers: (container: HTMLElement | ShadowRoot | null, uniqueId?: string) => void;
+/**
+ * UnRegisters a previously registered focusable container.
+ *
+ * This function should be called in the component's disconnectedCallback lifecycle method
+ * to clean up and prevent memory leaks when the component is removed from the DOM.
+ *
+ * @param container - The HTMLElement or ShadowRoot to unregister.
+ *                    If null, the function returns early without doing anything.
+ * @param uniqueId - Optional unique identifier that was used when registering the container.
+ *                   If not provided, uses the default key.
+ *
+ * @example
+ * // In a child component's disconnectedCallback
+ * disconnectedCallback() {
+ *   super.disconnectedCallback();
+ *   const uniqueId = tearsheetSignal.get().uniqueId;
+ *   unregisterFocusableContainers(this.shadowRoot, uniqueId);
+ * }
+ *
+ * @example
+ * // Without uniqueId (uses default key)
+ * disconnectedCallback() {
+ *   super.disconnectedCallback();
+ *   unregisterFocusableContainers(this.shadowRoot);
+ * }
+ */
+export declare const unregisterFocusableContainers: (container: HTMLElement | ShadowRoot | null, uniqueId?: string) => void;
+/**
+ * Clears all registered focusable containers, either globally or for a specific uniqueId.
+ *
+ * This function is typically called when a parent component (like a tearsheet or modal) is closing
+ * or being removed from the DOM. It ensures all registered containers are cleaned up to prevent
+ * memory leaks.
+ *
+ * @param uniqueId - Optional unique identifier to clear containers for a specific component instance.
+ *                   If provided, only containers registered with this uniqueId are cleared.
+ *                   If not provided, ALL containers across all uniqueIds are cleared.
+ *
+ * @example
+ * // Clear containers for a specific tearsheet instance
+ * clearFocusableContainers(this.uniqueId);
+ *
+ * @example
+ * // Clear all containers (typically in disconnectedCallback)
+ * disconnectedCallback() {
+ *   super.disconnectedCallback();
+ *   this._trapFocusAPI?.cleanup();
+ *   clearFocusableContainers();
+ * }
+ */
+export declare const clearFocusableContainers: (uniqueId?: string) => void;
+/**
+ * Traps keyboard focus within registered focusable containers.
+ *
+ * This function creates a focus trap that prevents Tab/Shift+Tab navigation from leaving
+ * the registered containers. When the user reaches the last focusable element and presses Tab,
+ * focus wraps to the first element, and vice versa with Shift+Tab.
+ *
+ * The function works with Shadow DOM by querying focusable elements from all registered
+ * containers, which can include shadow roots from child components.
+ *
+ * @param wrapper - Optional wrapper element to attach the keydown listener to.
+ *                  If not provided, defaults to document for backward compatibility.
+ *                  Using a specific wrapper can improve performance and scope the listener.
+ * @param uniqueId - Optional unique identifier to scope the focus trap to specific containers.
+ *                   If provided, only containers registered with this uniqueId are included.
+ *                   If not provided, uses the default key for backward compatibility.
+ *
+ * @returns An object with a `cleanup` method that removes event listeners.
+ *          Call this method when the component is closing or unmounting.
+ *
+ * @example
+ * // In a parent component when opening
+ * protected updated(changedProps) {
+ *   if (changedProps.has('open') && this.open) {
+ *     // Update signal so children can register
+ *     updateTearsheetSignals({ uniqueId: this.uniqueId });
+ *
+ *     // Wait for children to register, then trap focus
+ *     requestAnimationFrame(() => {
+ *       this._trapFocusAPI = trapFocus(this as HTMLElement, this.uniqueId);
+ *     });
+ *   }
+ * }
+ *
+ * @example
+ * // Without uniqueId (uses default key)
+ * this._trapFocusAPI = trapFocus();
+ *
+ * @example
+ * // Cleanup when closing
+ * disconnectedCallback() {
+ *   this._trapFocusAPI?.cleanup();
+ *   clearFocusableContainers(this.uniqueId);
+ * }
+ */
+export declare const trapFocus: (wrapper?: HTMLElement, uniqueId?: string) => {
     cleanup: () => void;
 };
 //# sourceMappingURL=manageFocusTrap.d.ts.map

package/es/utilities/manageFocusTrap/manageFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"manageFocusTrap.d.ts","sourceRoot":"","sources":["../../../src/utilities/manageFocusTrap/manageFocusTrap.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAaH,eAAO,MAAM,2BAA2B,GAAI,cAAS,SAIpD,CAAC;AACF,eAAO,MAAM,wBAAwB,YAEpC,CAAC;AACF,eAAO,MAAM,SAAS,GAAI,aAAa,WAAW,EAAE;;CA0HnD,CAAC"}
+{"version":3,"file":"manageFocusTrap.d.ts","sourceRoot":"","sources":["../../../src/utilities/manageFocusTrap/manageFocusTrap.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAkBH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,2BAA2B,GACtC,WAAW,WAAW,GAAG,UAAU,GAAG,IAAI,EAC1C,WAAW,MAAM,SAiBlB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,6BAA6B,GACxC,WAAW,WAAW,GAAG,UAAU,GAAG,IAAI,EAC1C,WAAW,MAAM,SAalB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,wBAAwB,GAAI,WAAW,MAAM,SAMzD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,SAAS,GAAI,UAAU,WAAW,EAAE,WAAW,MAAM;;CA8JjE,CAAC"}