@carbon/ibm-products-web-components 0.41.1 → 0.42.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +64 -0
- package/es/components/coachmark/coachmark-body.d.ts +1 -1
- package/es/components/coachmark/coachmark-header.d.ts +1 -1
- package/es/components/coachmark/coachmark.d.ts +1 -1
- package/es/components/interstitial-screen/interstitial-screen-body-item.js +1 -1
- package/es/components/interstitial-screen/interstitial-screen-body.d.ts +1 -1
- package/es/components/interstitial-screen/interstitial-screen-footer.d.ts +1 -1
- package/es/components/interstitial-screen/interstitial-screen-footer.js +1 -1
- package/es/components/interstitial-screen/interstitial-screen-header.d.ts +1 -1
- package/es/components/interstitial-screen/interstitial-screen-header.js +1 -1
- package/es/components/interstitial-screen/interstitial-screen.d.ts +1 -1
- package/es/components/interstitial-screen/interstitial-screen.d.ts.map +1 -1
- package/es/components/interstitial-screen/interstitial-screen.js +2 -1
- package/es/components/interstitial-screen/interstitial-screen.js.map +1 -1
- package/es/components/page-header/context.d.ts +1 -0
- package/es/components/page-header/context.d.ts.map +1 -1
- package/es/components/page-header/context.js +2 -1
- package/es/components/page-header/context.js.map +1 -1
- package/es/components/page-header/page-header-breadcrumb.d.ts +3 -0
- package/es/components/page-header/page-header-breadcrumb.d.ts.map +1 -1
- package/es/components/page-header/page-header-breadcrumb.js +18 -3
- package/es/components/page-header/page-header-breadcrumb.js.map +1 -1
- package/es/components/page-header/page-header-tabs.d.ts +7 -0
- package/es/components/page-header/page-header-tabs.d.ts.map +1 -1
- package/es/components/page-header/page-header-tabs.js +27 -0
- package/es/components/page-header/page-header-tabs.js.map +1 -1
- package/es/components/page-header/page-header.d.ts +2 -0
- package/es/components/page-header/page-header.d.ts.map +1 -1
- package/es/components/page-header/page-header.js +5 -0
- package/es/components/page-header/page-header.js.map +1 -1
- package/es/components/page-header/page-header.scss.js +1 -1
- package/es/components/page-header/page-header.scss.js.map +1 -1
- package/es/components/side-panel/side-panel.d.ts +31 -0
- package/es/components/side-panel/side-panel.d.ts.map +1 -1
- package/es/components/side-panel/side-panel.js +89 -0
- package/es/components/side-panel/side-panel.js.map +1 -1
- package/es/components/side-panel/side-panel.scss.js +1 -1
- package/es/components/side-panel/side-panel.scss.js.map +1 -1
- package/es/components/tearsheet/tearsheet.scss.js +1 -1
- package/es/components/tearsheet-preview/tearsheet-body.d.ts +1 -1
- package/es/components/tearsheet-preview/tearsheet-footer.d.ts +6 -2
- package/es/components/tearsheet-preview/tearsheet-footer.d.ts.map +1 -1
- package/es/components/tearsheet-preview/tearsheet-footer.js +15 -1
- package/es/components/tearsheet-preview/tearsheet-footer.js.map +1 -1
- package/es/components/tearsheet-preview/tearsheet-header-content.d.ts +8 -0
- package/es/components/tearsheet-preview/tearsheet-header-content.d.ts.map +1 -1
- package/es/components/tearsheet-preview/tearsheet-header-content.js +12 -1
- package/es/components/tearsheet-preview/tearsheet-header-content.js.map +1 -1
- package/es/components/tearsheet-preview/tearsheet-header-content.scss.js +1 -1
- package/es/components/tearsheet-preview/tearsheet-header.d.ts +1 -1
- package/es/components/tearsheet-preview/tearsheet-header.d.ts.map +1 -1
- package/es/components/tearsheet-preview/tearsheet-header.js +12 -4
- package/es/components/tearsheet-preview/tearsheet-header.js.map +1 -1
- package/es/components/tearsheet-preview/tearsheet-header.scss.js +1 -1
- package/es/components/tearsheet-preview/tearsheet-influencer.d.ts +5 -1
- package/es/components/tearsheet-preview/tearsheet-influencer.d.ts.map +1 -1
- package/es/components/tearsheet-preview/tearsheet-influencer.js +4 -0
- package/es/components/tearsheet-preview/tearsheet-influencer.js.map +1 -1
- package/es/components/tearsheet-preview/tearsheet-navigation-bar.scss.js +1 -1
- package/es/components/tearsheet-preview/tearsheet-signal.d.ts +1 -0
- package/es/components/tearsheet-preview/tearsheet-signal.d.ts.map +1 -1
- package/es/components/tearsheet-preview/tearsheet-signal.js +2 -1
- package/es/components/tearsheet-preview/tearsheet-signal.js.map +1 -1
- package/es/components/tearsheet-preview/tearsheet-summary-content.d.ts +5 -1
- package/es/components/tearsheet-preview/tearsheet-summary-content.d.ts.map +1 -1
- package/es/components/tearsheet-preview/tearsheet-summary-content.js +4 -0
- package/es/components/tearsheet-preview/tearsheet-summary-content.js.map +1 -1
- package/es/components/tearsheet-preview/tearsheet.d.ts +11 -1
- package/es/components/tearsheet-preview/tearsheet.d.ts.map +1 -1
- package/es/components/tearsheet-preview/tearsheet.js +30 -1
- package/es/components/tearsheet-preview/tearsheet.js.map +1 -1
- package/es/components/tearsheet-preview/tearsheet.scss.js +1 -1
- package/es/components/tearsheet-preview/tearsheet.scss.js.map +1 -1
- package/es/ibm-products-web-components/package.js +1 -1
- package/es/utilities/manageFocusTrap/manageFocusTrap.d.ts +121 -3
- package/es/utilities/manageFocusTrap/manageFocusTrap.d.ts.map +1 -1
- package/es/utilities/manageFocusTrap/manageFocusTrap.js +188 -33
- package/es/utilities/manageFocusTrap/manageFocusTrap.js.map +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen-body-item.js +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen-footer.js +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen-header.js +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen.js +2 -1
- package/es-custom/components/interstitial-screen/interstitial-screen.js.map +1 -1
- package/es-custom/components/page-header/context.js +2 -1
- package/es-custom/components/page-header/context.js.map +1 -1
- package/es-custom/components/page-header/page-header-breadcrumb.js +18 -3
- package/es-custom/components/page-header/page-header-breadcrumb.js.map +1 -1
- package/es-custom/components/page-header/page-header-tabs.js +27 -0
- package/es-custom/components/page-header/page-header-tabs.js.map +1 -1
- package/es-custom/components/page-header/page-header.js +5 -0
- package/es-custom/components/page-header/page-header.js.map +1 -1
- package/es-custom/components/page-header/page-header.scss.js +1 -1
- package/es-custom/components/page-header/page-header.scss.js.map +1 -1
- package/es-custom/components/side-panel/side-panel.js +89 -0
- package/es-custom/components/side-panel/side-panel.js.map +1 -1
- package/es-custom/components/side-panel/side-panel.scss.js +1 -1
- package/es-custom/components/side-panel/side-panel.scss.js.map +1 -1
- package/es-custom/components/tearsheet/tearsheet.scss.js +1 -1
- package/es-custom/components/tearsheet-preview/tearsheet-footer.js +15 -1
- package/es-custom/components/tearsheet-preview/tearsheet-footer.js.map +1 -1
- package/es-custom/components/tearsheet-preview/tearsheet-header-content.js +12 -1
- package/es-custom/components/tearsheet-preview/tearsheet-header-content.js.map +1 -1
- package/es-custom/components/tearsheet-preview/tearsheet-header-content.scss.js +1 -1
- package/es-custom/components/tearsheet-preview/tearsheet-header.js +12 -4
- package/es-custom/components/tearsheet-preview/tearsheet-header.js.map +1 -1
- package/es-custom/components/tearsheet-preview/tearsheet-header.scss.js +1 -1
- package/es-custom/components/tearsheet-preview/tearsheet-influencer.js +4 -0
- package/es-custom/components/tearsheet-preview/tearsheet-influencer.js.map +1 -1
- package/es-custom/components/tearsheet-preview/tearsheet-navigation-bar.scss.js +1 -1
- package/es-custom/components/tearsheet-preview/tearsheet-signal.js +2 -1
- package/es-custom/components/tearsheet-preview/tearsheet-signal.js.map +1 -1
- package/es-custom/components/tearsheet-preview/tearsheet-summary-content.js +4 -0
- package/es-custom/components/tearsheet-preview/tearsheet-summary-content.js.map +1 -1
- package/es-custom/components/tearsheet-preview/tearsheet.js +30 -1
- package/es-custom/components/tearsheet-preview/tearsheet.js.map +1 -1
- package/es-custom/components/tearsheet-preview/tearsheet.scss.js +1 -1
- package/es-custom/components/tearsheet-preview/tearsheet.scss.js.map +1 -1
- package/es-custom/ibm-products-web-components/package.js +1 -1
- package/es-custom/utilities/manageFocusTrap/manageFocusTrap.js +188 -33
- package/es-custom/utilities/manageFocusTrap/manageFocusTrap.js.map +1 -1
- package/lib/components/coachmark/coachmark-body.d.ts +1 -1
- package/lib/components/coachmark/coachmark-header.d.ts +1 -1
- package/lib/components/coachmark/coachmark.d.ts +1 -1
- package/lib/components/interstitial-screen/interstitial-screen-body.d.ts +1 -1
- package/lib/components/interstitial-screen/interstitial-screen-footer.d.ts +1 -1
- package/lib/components/interstitial-screen/interstitial-screen-header.d.ts +1 -1
- package/lib/components/interstitial-screen/interstitial-screen.d.ts +1 -1
- package/lib/components/interstitial-screen/interstitial-screen.d.ts.map +1 -1
- package/lib/components/page-header/context.d.ts +1 -0
- package/lib/components/page-header/context.d.ts.map +1 -1
- package/lib/components/page-header/page-header-breadcrumb.d.ts +3 -0
- package/lib/components/page-header/page-header-breadcrumb.d.ts.map +1 -1
- package/lib/components/page-header/page-header-tabs.d.ts +7 -0
- package/lib/components/page-header/page-header-tabs.d.ts.map +1 -1
- package/lib/components/page-header/page-header.d.ts +2 -0
- package/lib/components/page-header/page-header.d.ts.map +1 -1
- package/lib/components/side-panel/side-panel.d.ts +31 -0
- package/lib/components/side-panel/side-panel.d.ts.map +1 -1
- package/lib/components/tearsheet-preview/tearsheet-body.d.ts +1 -1
- package/lib/components/tearsheet-preview/tearsheet-footer.d.ts +6 -2
- package/lib/components/tearsheet-preview/tearsheet-footer.d.ts.map +1 -1
- package/lib/components/tearsheet-preview/tearsheet-header-content.d.ts +8 -0
- package/lib/components/tearsheet-preview/tearsheet-header-content.d.ts.map +1 -1
- package/lib/components/tearsheet-preview/tearsheet-header.d.ts +1 -1
- package/lib/components/tearsheet-preview/tearsheet-header.d.ts.map +1 -1
- package/lib/components/tearsheet-preview/tearsheet-influencer.d.ts +5 -1
- package/lib/components/tearsheet-preview/tearsheet-influencer.d.ts.map +1 -1
- package/lib/components/tearsheet-preview/tearsheet-signal.d.ts +1 -0
- package/lib/components/tearsheet-preview/tearsheet-signal.d.ts.map +1 -1
- package/lib/components/tearsheet-preview/tearsheet-summary-content.d.ts +5 -1
- package/lib/components/tearsheet-preview/tearsheet-summary-content.d.ts.map +1 -1
- package/lib/components/tearsheet-preview/tearsheet.d.ts +11 -1
- package/lib/components/tearsheet-preview/tearsheet.d.ts.map +1 -1
- package/lib/utilities/manageFocusTrap/manageFocusTrap.d.ts +121 -3
- package/lib/utilities/manageFocusTrap/manageFocusTrap.d.ts.map +1 -1
- package/package.json +7 -6
- package/scss/components/page-header/page-header.scss +49 -10
- package/scss/components/side-panel/side-panel.scss +19 -0
- package/scss/components/tearsheet-preview/tearsheet.scss +5 -0
- package/telemetry.yml +5 -0
|
@@ -10,8 +10,9 @@ import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers
|
|
|
10
10
|
import "../action-set/index.js";
|
|
11
11
|
import tearsheet_default from "./tearsheet.scss.js";
|
|
12
12
|
import { tearsheetSignal } from "./tearsheet-signal.js";
|
|
13
|
+
import { registerFocusableContainers } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
|
|
13
14
|
import { LitElement, html } from "lit";
|
|
14
|
-
import { property } from "lit/decorators.js";
|
|
15
|
+
import { property, query } from "lit/decorators.js";
|
|
15
16
|
import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-listener.js";
|
|
16
17
|
import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
|
|
17
18
|
import { classMap } from "lit-html/directives/class-map.js";
|
|
@@ -37,6 +38,18 @@ let CDSTearsheetFooter = class CDSTearsheetFooter extends SignalWatcher(HostList
|
|
|
37
38
|
super(..._args);
|
|
38
39
|
this.slot = "footer";
|
|
39
40
|
this.actions = [];
|
|
41
|
+
this._actionSetRegistered = false;
|
|
42
|
+
}
|
|
43
|
+
firstUpdated(_changedProperties) {
|
|
44
|
+
const uniqueId = tearsheetSignal.get().uniqueId;
|
|
45
|
+
if (uniqueId) registerFocusableContainers(this, uniqueId);
|
|
46
|
+
}
|
|
47
|
+
updated(_changedProperties) {
|
|
48
|
+
const uniqueId = tearsheetSignal.get().uniqueId;
|
|
49
|
+
if (this.actionSetElement?.shadowRoot && uniqueId && !this._actionSetRegistered) {
|
|
50
|
+
registerFocusableContainers(this.actionSetElement.shadowRoot, uniqueId);
|
|
51
|
+
this._actionSetRegistered = true;
|
|
52
|
+
}
|
|
40
53
|
}
|
|
41
54
|
/**
|
|
42
55
|
* Renders the action-set component with actions
|
|
@@ -72,6 +85,7 @@ let CDSTearsheetFooter = class CDSTearsheetFooter extends SignalWatcher(HostList
|
|
|
72
85
|
__decorate([property({ reflect: true })], CDSTearsheetFooter.prototype, "slot", void 0);
|
|
73
86
|
__decorate([property({ type: Array })], CDSTearsheetFooter.prototype, "actions", void 0);
|
|
74
87
|
__decorate([property({ attribute: "button-size" })], CDSTearsheetFooter.prototype, "buttonSize", void 0);
|
|
88
|
+
__decorate([query("c4p-action-set")], CDSTearsheetFooter.prototype, "actionSetElement", void 0);
|
|
75
89
|
CDSTearsheetFooter = __decorate([carbonElement(`c4p-tearsheet-footer`)], CDSTearsheetFooter);
|
|
76
90
|
var tearsheet_footer_default = CDSTearsheetFooter;
|
|
77
91
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tearsheet-footer.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet-footer.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport styles from './tearsheet.scss?lit';\nimport type { ActionButton, ButtonSize } from '../action-set/index.js';\nimport { tearsheetSignal } from './tearsheet-signal';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport '../action-set/index.js';\n\nconst blockClass = `${prefix}--tearsheet__next`;\n\n/**\n * Tearsheet Footer component - Contains action buttons at the bottom of the tearsheet.\n *\n * @element c4p-tearsheet-footer\n * @slot - Default slot for custom footer content (rendered before actions)\n */\n@customElement(`${prefix}-tearsheet-footer`)\nclass CDSTearsheetFooter extends SignalWatcher(HostListenerMixin(LitElement)) {\n @property({ reflect: true })\n slot = 'footer';\n\n /**\n * Array of action button configurations. Each action is an object with properties\n * like 'kind', 'label', 'disabled', 'onClick', etc.\n * These are passed directly to the action-set component which handles rendering.\n */\n @property({ type: Array })\n actions: ActionButton[] = [];\n\n /**\n * Optional button size override. If not provided, defaults based on tearsheet variant.\n */\n @property({ attribute: 'button-size' })\n buttonSize?: ButtonSize;\n\n /**\n * Renders the action-set component with actions\n */\n private _renderActions() {\n if (!this.actions || this.actions.length === 0) {\n return null;\n }\n\n const variant = tearsheetSignal.get().variant;\n const actionSetSize = variant === 'wide' ? '2xl' : 'lg';\n const buttonSize = this.buttonSize || (variant === 'wide' ? '2xl' : 'xl');\n\n return html`\n <c4p-action-set\n size=\"${actionSetSize}\"\n button-size=\"${buttonSize}\"\n .actions=\"${this.actions}\"\n ?disable-stacking=\"${true}\"\n >\n </c4p-action-set>\n `;\n }\n\n render() {\n const actionCount = this.actions?.length || 0;\n const classes = classMap({\n [`${blockClass}__footer`]: true,\n [`${blockClass}__footer--three-actions`]: actionCount === 3,\n [`${blockClass}__footer--many-actions`]: actionCount > 3,\n });\n\n return html`<footer class=\"${classes}\">\n <slot></slot>\n ${this._renderActions()}\n </footer>`;\n }\n\n static styles = styles;\n}\n\nexport default CDSTearsheetFooter;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"tearsheet-footer.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet-footer.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport styles from './tearsheet.scss?lit';\nimport type { ActionButton, ButtonSize } from '../action-set/index.js';\nimport { tearsheetSignal } from './tearsheet-signal';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport '../action-set/index.js';\nimport { registerFocusableContainers } from '../../utilities/manageFocusTrap/manageFocusTrap';\n\nconst blockClass = `${prefix}--tearsheet__next`;\n\n/**\n * Tearsheet Footer component - Contains action buttons at the bottom of the tearsheet.\n *\n * @element c4p-tearsheet-footer\n * @slot - Default slot for custom footer content (rendered before actions)\n */\n@customElement(`${prefix}-tearsheet-footer`)\nclass CDSTearsheetFooter extends SignalWatcher(HostListenerMixin(LitElement)) {\n @property({ reflect: true })\n slot = 'footer';\n\n /**\n * Array of action button configurations. Each action is an object with properties\n * like 'kind', 'label', 'disabled', 'onClick', etc.\n * These are passed directly to the action-set component which handles rendering.\n */\n @property({ type: Array })\n actions: ActionButton[] = [];\n\n /**\n * Optional button size override. If not provided, defaults based on tearsheet variant.\n */\n @property({ attribute: 'button-size' })\n buttonSize?: ButtonSize;\n\n @query('c4p-action-set')\n private actionSetElement?: HTMLElement;\n\n private _actionSetRegistered = false;\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n // Register with the current tearsheet's uniqueId\n const uniqueId = tearsheetSignal.get().uniqueId;\n if (uniqueId) {\n registerFocusableContainers(this, uniqueId);\n }\n }\n\n protected updated(_changedProperties: PropertyValues): void {\n // Register action-set shadow root after it's rendered (only once)\n const uniqueId = tearsheetSignal.get().uniqueId;\n if (\n this.actionSetElement?.shadowRoot &&\n uniqueId &&\n !this._actionSetRegistered\n ) {\n registerFocusableContainers(this.actionSetElement.shadowRoot, uniqueId);\n this._actionSetRegistered = true;\n }\n }\n\n /**\n * Renders the action-set component with actions\n */\n private _renderActions() {\n if (!this.actions || this.actions.length === 0) {\n return null;\n }\n\n const variant = tearsheetSignal.get().variant;\n const actionSetSize = variant === 'wide' ? '2xl' : 'lg';\n const buttonSize = this.buttonSize || (variant === 'wide' ? '2xl' : 'xl');\n\n return html`\n <c4p-action-set\n size=\"${actionSetSize}\"\n button-size=\"${buttonSize}\"\n .actions=\"${this.actions}\"\n ?disable-stacking=\"${true}\"\n >\n </c4p-action-set>\n `;\n }\n\n render() {\n const actionCount = this.actions?.length || 0;\n const classes = classMap({\n [`${blockClass}__footer`]: true,\n [`${blockClass}__footer--three-actions`]: actionCount === 3,\n [`${blockClass}__footer--many-actions`]: actionCount > 3,\n });\n\n return html`<footer class=\"${classes}\">\n <slot></slot>\n ${this._renderActions()}\n </footer>`;\n }\n\n static styles = styles;\n}\n\nexport default CDSTearsheetFooter;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,aAAa;;;;;;;AAQnB,IAAA,qBAAA,MACM,2BAA2B,cAAc,kBAAkB,WAAW,CAAC,CAAC;;;cAErE;iBAQmB,EAAE;8BAWG;;CAE/B,aAAuB,oBAA0C;EAE/D,MAAM,WAAW,gBAAgB,KAAK,CAAC;AACvC,MAAI,SACF,6BAA4B,MAAM,SAAS;;CAI/C,QAAkB,oBAA0C;EAE1D,MAAM,WAAW,gBAAgB,KAAK,CAAC;AACvC,MACE,KAAK,kBAAkB,cACvB,YACA,CAAC,KAAK,sBACN;AACA,+BAA4B,KAAK,iBAAiB,YAAY,SAAS;AACvE,QAAK,uBAAuB;;;;;;CAOhC,iBAAyB;AACvB,MAAI,CAAC,KAAK,WAAW,KAAK,QAAQ,WAAW,EAC3C,QAAO;EAGT,MAAM,UAAU,gBAAgB,KAAK,CAAC;AAItC,SAAO,IAAI;;gBAHW,YAAY,SAAS,QAAQ,KAKzB;uBAJP,KAAK,eAAe,YAAY,SAAS,QAAQ,MAKtC;oBACd,KAAK,QAAQ;6BACJ,KAAK;;;;;CAMhC,SAAS;EACP,MAAM,cAAc,KAAK,SAAS,UAAU;AAO5C,SAAO,IAAI,kBANK,SAAS;IACtB,GAAG,WAAW,YAAY;IAC1B,GAAG,WAAW,2BAA2B,gBAAgB;IACzD,GAAG,WAAW,0BAA0B,cAAc;GACxD,CAEmC,CAAC;;QAEjC,KAAK,gBAAgB,CAAC;;;;gBAIZA;;;YAhFf,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,QAAA,KAAA,EAAA;YAQ3B,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,EAAA,mBAAA,WAAA,WAAA,KAAA,EAAA;YAMzB,SAAS,EAAE,WAAW,eAAe,CAAC,CAAA,EAAA,mBAAA,WAAA,cAAA,KAAA,EAAA;YAGtC,MAAM,iBAAiB,CAAA,EAAA,mBAAA,WAAA,oBAAA,KAAA,EAAA;iCAnBzBC,cAAc,uBAA6B,CAAA,EAAA,mBAAA;AAqF5C,IAAA,2BAAe"}
|
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
import "../../globals/settings.js";
|
|
9
9
|
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
|
|
10
10
|
import { MatchMediaController } from "../../globals/js/utils/match-media-controller.js";
|
|
11
|
+
import { tearsheetSignal } from "./tearsheet-signal.js";
|
|
12
|
+
import { registerFocusableContainers } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
|
|
11
13
|
import "../truncated-text/index.js";
|
|
12
14
|
import tearsheet_header_content_default$1 from "./tearsheet-header-content.scss.js";
|
|
13
15
|
import { LitElement, html } from "lit";
|
|
@@ -41,18 +43,27 @@ let CDSTearsheetHeaderContent = class CDSTearsheetHeaderContent extends HostList
|
|
|
41
43
|
super(..._args);
|
|
42
44
|
this.slot = "header-content";
|
|
43
45
|
this.title = "";
|
|
46
|
+
this._titleId = `${blockClass}__title-${Math.random().toString(36).substr(2, 9)}`;
|
|
44
47
|
this._hasTitleStart = false;
|
|
45
48
|
this._hasTitleEnd = false;
|
|
46
49
|
this._isMobileOrNarrow = false;
|
|
47
50
|
this.mdMediaQuery = `(max-width: ${breakpoints.md.width})`;
|
|
48
51
|
this.isMobileDevice = new MatchMediaController(this, this.mdMediaQuery, false);
|
|
49
52
|
}
|
|
53
|
+
/**
|
|
54
|
+
* Public getter for the title ID (used by parent tearsheet for aria-labelledby)
|
|
55
|
+
*/
|
|
56
|
+
get titleId() {
|
|
57
|
+
return this._titleId;
|
|
58
|
+
}
|
|
50
59
|
get isNarrowVariant() {
|
|
51
60
|
return this.closest(`c4p-preview-tearsheet`)?.getAttribute("variant") === "narrow";
|
|
52
61
|
}
|
|
53
62
|
firstUpdated(_changedProperties) {
|
|
54
63
|
this._checkSlots();
|
|
55
64
|
this._isMobileOrNarrow = this.isMobileDevice?.matches || this.isNarrowVariant;
|
|
65
|
+
const uniqueId = tearsheetSignal.get().uniqueId;
|
|
66
|
+
if (uniqueId) registerFocusableContainers(this.shadowRoot, uniqueId);
|
|
56
67
|
}
|
|
57
68
|
updated(_changedProperties) {
|
|
58
69
|
const previousIsMobileOrNarrow = this._isMobileOrNarrow;
|
|
@@ -86,7 +97,7 @@ let CDSTearsheetHeaderContent = class CDSTearsheetHeaderContent extends HostList
|
|
|
86
97
|
</div>
|
|
87
98
|
|
|
88
99
|
<div class="${blockClass}__content__title-wrapper">
|
|
89
|
-
<h2 class="${blockClass}__header-title">
|
|
100
|
+
<h2 class="${blockClass}__header-title" id="${this._titleId}">
|
|
90
101
|
<!-- Title Start -->
|
|
91
102
|
${this._hasTitleStart ? html`
|
|
92
103
|
<span class="${blockClass}__title-start">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tearsheet-header-content.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet-header-content.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport '@carbon/web-components/es-custom/components/modal/index.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '../truncated-text';\nimport styles from './tearsheet-header-content.scss?lit';\nimport { MatchMediaController } from '../../globals/js/utils/match-media-controller';\nimport { breakpoints } from '@carbon/layout';\n\nconst blockClass = `${prefix}--tearsheet__next`;\n\n/**\n * Tearsheet Header Content component - Contains the title, description, and decorative elements.\n *\n * @element c4p-tearsheet-header-content\n * @slot label - Optional label text above the title\n * @slot title-start - Content before the title (e.g., icons)\n * @slot title-end - Content after the title (e.g., badges, tags)\n * @slot description - Custom description content below the title\n * @slot decorator - AI label or other decorative elements\n */\n@customElement(`${prefix}-tearsheet-header-content`)\nclass CDSTearsheetHeaderContent extends HostListenerMixin(LitElement) {\n @property({ reflect: true })\n slot = 'header-content';\n\n /**\n * The main title of the tearsheet.\n */\n @property({ reflect: true })\n title: string = '';\n\n @query('slot[name=\"title-start\"]')\n private _titleStartSlot?: HTMLSlotElement;\n\n @query('slot[name=\"title-end\"]')\n private _titleEndSlot?: HTMLSlotElement;\n\n @state()\n private _hasTitleStart = false;\n\n @state()\n private _hasTitleEnd = false;\n\n @state()\n private _isMobileOrNarrow = false;\n\n private mdMediaQuery = `(max-width: ${breakpoints.md.width})`;\n private isMobileDevice = new MatchMediaController(\n this,\n this.mdMediaQuery,\n false\n );\n\n private get isNarrowVariant(): boolean {\n const tearsheet = this.closest(`${prefix}-preview-tearsheet`);\n return tearsheet?.getAttribute('variant') === 'narrow';\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n this._checkSlots();\n this._isMobileOrNarrow =\n this.isMobileDevice?.matches || this.isNarrowVariant;\n }\n\n protected updated(_changedProperties: PropertyValues): void {\n const previousIsMobileOrNarrow = this._isMobileOrNarrow;\n this._isMobileOrNarrow =\n this.isMobileDevice?.matches || this.isNarrowVariant;\n\n if (this._isMobileOrNarrow !== previousIsMobileOrNarrow) {\n this.requestUpdate();\n }\n }\n\n private _checkSlots() {\n if (this._titleStartSlot) {\n const assignedNodes = this._titleStartSlot.assignedElements();\n this._hasTitleStart = assignedNodes.length > 0;\n }\n if (this._titleEndSlot) {\n const assignedNodes = this._titleEndSlot.assignedElements();\n this._hasTitleEnd = assignedNodes.length > 0;\n }\n }\n\n private _handleSlotChange() {\n this._checkSlots();\n }\n\n render() {\n const headerActionsTemplate = html`\n <div class=\"${blockClass}__header-actions\">\n <slot name=\"header-actions\"></slot>\n </div>\n `;\n\n const headerContentTemplate = html`\n <div class=\"${blockClass}__header-content\">\n <!-- Label -->\n <div class=\"${blockClass}__header-label\">\n <slot name=\"label\"></slot>\n </div>\n\n <div class=\"${blockClass}__content__title-wrapper\">\n <h2 class=\"${blockClass}__header-title\">\n <!-- Title Start -->\n ${this._hasTitleStart\n ? html`\n <span class=\"${blockClass}__title-start\">\n <slot\n name=\"title-start\"\n @slotchange=\"${this._handleSlotChange}\"\n ></slot>\n </span>\n `\n : html`<slot\n name=\"title-start\"\n @slotchange=\"${this._handleSlotChange}\"\n ></slot>`}\n\n <!-- Title (main text) -->\n <c4p-truncated-text\n class=\"${blockClass}__content__title\"\n id=\"${blockClass}__header-title__truncatedText\"\n value=\"${this.title}\"\n ></c4p-truncated-text>\n\n <!-- Title End -->\n ${this._hasTitleEnd\n ? html`\n <span class=\"${blockClass}__title-end\">\n <slot\n name=\"title-end\"\n @slotchange=\"${this._handleSlotChange}\"\n ></slot>\n </span>\n `\n : html`<slot\n name=\"title-end\"\n @slotchange=\"${this._handleSlotChange}\"\n ></slot>`}\n </h2>\n </div>\n\n <!-- Description -->\n <div class=\"${blockClass}__header-description\">\n <slot name=\"description\"></slot>\n </div>\n\n <!-- Extra children -->\n <div class=\"${blockClass}__header-content--extra\">\n <slot></slot>\n </div>\n </div>\n `;\n\n // Desktop/Wide: header-actions first (for accessibility), CSS order handles visual layout\n // Mobile/Narrow: header-content first (natural DOM order)\n return this._isMobileOrNarrow\n ? html`${headerContentTemplate} ${headerActionsTemplate}`\n : html`${headerActionsTemplate} ${headerContentTemplate}`;\n }\n\n static styles = styles;\n}\nexport default CDSTearsheetHeaderContent;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"tearsheet-header-content.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet-header-content.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport '@carbon/web-components/es-custom/components/modal/index.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '../truncated-text';\nimport styles from './tearsheet-header-content.scss?lit';\nimport { MatchMediaController } from '../../globals/js/utils/match-media-controller';\nimport { breakpoints } from '@carbon/layout';\nimport { registerFocusableContainers } from '../../utilities/manageFocusTrap/manageFocusTrap';\nimport { tearsheetSignal } from './tearsheet-signal';\n\nconst blockClass = `${prefix}--tearsheet__next`;\n\n/**\n * Tearsheet Header Content component - Contains the title, description, and decorative elements.\n *\n * @element c4p-tearsheet-header-content\n * @slot label - Optional label text above the title\n * @slot title-start - Content before the title (e.g., icons)\n * @slot title-end - Content after the title (e.g., badges, tags)\n * @slot description - Custom description content below the title\n * @slot decorator - AI label or other decorative elements\n */\n@customElement(`${prefix}-tearsheet-header-content`)\nclass CDSTearsheetHeaderContent extends HostListenerMixin(LitElement) {\n @property({ reflect: true })\n slot = 'header-content';\n\n /**\n * The main title of the tearsheet.\n */\n @property({ reflect: true })\n title: string = '';\n\n /**\n * Internal ID for the title element (auto-generated, used for aria-labelledby on the modal)\n */\n private _titleId: string = `${blockClass}__title-${Math.random().toString(36).substr(2, 9)}`;\n\n /**\n * Public getter for the title ID (used by parent tearsheet for aria-labelledby)\n */\n get titleId(): string {\n return this._titleId;\n }\n\n @query('slot[name=\"title-start\"]')\n private _titleStartSlot?: HTMLSlotElement;\n\n @query('slot[name=\"title-end\"]')\n private _titleEndSlot?: HTMLSlotElement;\n\n @state()\n private _hasTitleStart = false;\n\n @state()\n private _hasTitleEnd = false;\n\n @state()\n private _isMobileOrNarrow = false;\n\n private mdMediaQuery = `(max-width: ${breakpoints.md.width})`;\n private isMobileDevice = new MatchMediaController(\n this,\n this.mdMediaQuery,\n false\n );\n\n private get isNarrowVariant(): boolean {\n const tearsheet = this.closest(`${prefix}-preview-tearsheet`);\n return tearsheet?.getAttribute('variant') === 'narrow';\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n this._checkSlots();\n this._isMobileOrNarrow =\n this.isMobileDevice?.matches || this.isNarrowVariant;\n\n // Register with the current tearsheet's uniqueId\n const uniqueId = tearsheetSignal.get().uniqueId;\n if (uniqueId) {\n registerFocusableContainers(this.shadowRoot, uniqueId);\n }\n }\n\n protected updated(_changedProperties: PropertyValues): void {\n const previousIsMobileOrNarrow = this._isMobileOrNarrow;\n this._isMobileOrNarrow =\n this.isMobileDevice?.matches || this.isNarrowVariant;\n\n if (this._isMobileOrNarrow !== previousIsMobileOrNarrow) {\n this.requestUpdate();\n }\n }\n\n private _checkSlots() {\n if (this._titleStartSlot) {\n const assignedNodes = this._titleStartSlot.assignedElements();\n this._hasTitleStart = assignedNodes.length > 0;\n }\n if (this._titleEndSlot) {\n const assignedNodes = this._titleEndSlot.assignedElements();\n this._hasTitleEnd = assignedNodes.length > 0;\n }\n }\n\n private _handleSlotChange() {\n this._checkSlots();\n }\n\n render() {\n const headerActionsTemplate = html`\n <div class=\"${blockClass}__header-actions\">\n <slot name=\"header-actions\"></slot>\n </div>\n `;\n\n const headerContentTemplate = html`\n <div class=\"${blockClass}__header-content\">\n <!-- Label -->\n <div class=\"${blockClass}__header-label\">\n <slot name=\"label\"></slot>\n </div>\n\n <div class=\"${blockClass}__content__title-wrapper\">\n <h2 class=\"${blockClass}__header-title\" id=\"${this._titleId}\">\n <!-- Title Start -->\n ${this._hasTitleStart\n ? html`\n <span class=\"${blockClass}__title-start\">\n <slot\n name=\"title-start\"\n @slotchange=\"${this._handleSlotChange}\"\n ></slot>\n </span>\n `\n : html`<slot\n name=\"title-start\"\n @slotchange=\"${this._handleSlotChange}\"\n ></slot>`}\n\n <!-- Title (main text) -->\n <c4p-truncated-text\n class=\"${blockClass}__content__title\"\n id=\"${blockClass}__header-title__truncatedText\"\n value=\"${this.title}\"\n ></c4p-truncated-text>\n\n <!-- Title End -->\n ${this._hasTitleEnd\n ? html`\n <span class=\"${blockClass}__title-end\">\n <slot\n name=\"title-end\"\n @slotchange=\"${this._handleSlotChange}\"\n ></slot>\n </span>\n `\n : html`<slot\n name=\"title-end\"\n @slotchange=\"${this._handleSlotChange}\"\n ></slot>`}\n </h2>\n </div>\n\n <!-- Description -->\n <div class=\"${blockClass}__header-description\">\n <slot name=\"description\"></slot>\n </div>\n\n <!-- Extra children -->\n <div class=\"${blockClass}__header-content--extra\">\n <slot></slot>\n </div>\n </div>\n `;\n\n // Desktop/Wide: header-actions first (for accessibility), CSS order handles visual layout\n // Mobile/Narrow: header-content first (natural DOM order)\n return this._isMobileOrNarrow\n ? html`${headerContentTemplate} ${headerActionsTemplate}`\n : html`${headerActionsTemplate} ${headerContentTemplate}`;\n }\n\n static styles = styles;\n}\nexport default CDSTearsheetHeaderContent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,aAAa;;;;;;;;;;;AAYnB,IAAA,4BAAA,MACM,kCAAkC,kBAAkB,WAAW,CAAC;;;cAE7D;eAMS;kBAKW,GAAG,WAAW,UAAU,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,OAAO,GAAG,EAAE;wBAgBjE;sBAGF;2BAGK;sBAEL,eAAe,YAAY,GAAG,MAAM;wBAClC,IAAI,qBAC3B,MACA,KAAK,cACL,MACD;;;;;CAxBD,IAAI,UAAkB;AACpB,SAAO,KAAK;;CAyBd,IAAY,kBAA2B;AAErC,SADkB,KAAK,QAAQ,wBACf,EAAE,aAAa,UAAU,KAAK;;CAGhD,aAAuB,oBAA0C;AAC/D,OAAK,aAAa;AAClB,OAAK,oBACH,KAAK,gBAAgB,WAAW,KAAK;EAGvC,MAAM,WAAW,gBAAgB,KAAK,CAAC;AACvC,MAAI,SACF,6BAA4B,KAAK,YAAY,SAAS;;CAI1D,QAAkB,oBAA0C;EAC1D,MAAM,2BAA2B,KAAK;AACtC,OAAK,oBACH,KAAK,gBAAgB,WAAW,KAAK;AAEvC,MAAI,KAAK,sBAAsB,yBAC7B,MAAK,eAAe;;CAIxB,cAAsB;AACpB,MAAI,KAAK,iBAAiB;GACxB,MAAM,gBAAgB,KAAK,gBAAgB,kBAAkB;AAC7D,QAAK,iBAAiB,cAAc,SAAS;;AAE/C,MAAI,KAAK,eAAe;GACtB,MAAM,gBAAgB,KAAK,cAAc,kBAAkB;AAC3D,QAAK,eAAe,cAAc,SAAS;;;CAI/C,oBAA4B;AAC1B,OAAK,aAAa;;CAGpB,SAAS;EACP,MAAM,wBAAwB,IAAI;oBAClB,WAAW;;;;EAK3B,MAAM,wBAAwB,IAAI;oBAClB,WAAW;;sBAET,WAAW;;;;sBAIX,WAAW;uBACV,WAAW,sBAAsB,KAAK,SAAS;;cAExD,KAAK,iBACH,IAAI;iCACa,WAAW;;;qCAGP,KAAK,kBAAkB;;;oBAI5C,IAAI;;iCAEa,KAAK,kBAAkB;0BAC9B;;;;uBAIH,WAAW;oBACd,WAAW;uBACR,KAAK,MAAM;;;;cAIpB,KAAK,eACH,IAAI;iCACa,WAAW;;;qCAGP,KAAK,kBAAkB;;;oBAI5C,IAAI;;iCAEa,KAAK,kBAAkB;0BAC9B;;;;;sBAKJ,WAAW;;;;;sBAKX,WAAW;;;;;AAQ7B,SAAO,KAAK,oBACR,IAAI,GAAG,sBAAsB,GAAG,0BAChC,IAAI,GAAG,sBAAsB,GAAG;;;gBAGtBA;;;YA/Jf,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,0BAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,0BAAA,WAAA,SAAA,KAAA,EAAA;YAe3B,MAAM,6BAA2B,CAAA,EAAA,0BAAA,WAAA,mBAAA,KAAA,EAAA;YAGjC,MAAM,2BAAyB,CAAA,EAAA,0BAAA,WAAA,iBAAA,KAAA,EAAA;YAG/B,OAAO,CAAA,EAAA,0BAAA,WAAA,kBAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,0BAAA,WAAA,gBAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,0BAAA,WAAA,qBAAA,KAAA,EAAA;wCAnCTC,cAAc,+BAAqC,CAAA,EAAA,0BAAA;AAmKpD,IAAA,mCAAe"}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { css } from "lit";
|
|
9
9
|
//#region src/components/tearsheet-preview/tearsheet-header-content.scss?lit
|
|
10
|
-
var tearsheet_header_content_default = css(["@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds-custom--layout--size-xs{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xs,1.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-sm,2rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-md,2.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-lg,3rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xl,4rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-2xl,5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-normal,1rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-normal,1rem)}:root{--cds-custom-layout-size-height-xs:1.5rem;--cds-custom-layout-size-height-sm:2rem;--cds-custom-layout-size-height-md:2.5rem;--cds-custom-layout-size-height-lg:3rem;--cds-custom-layout-size-height-xl:4rem;--cds-custom-layout-size-height-2xl:5rem;--cds-custom-layout-size-height-min:0px;--cds-custom-layout-size-height-max:999999999px;--cds-custom-layout-density-padding-inline-condensed:0.5rem;--cds-custom-layout-density-padding-inline-normal:1rem;--cds-custom-layout-density-padding-inline-min:0px;--cds-custom-layout-density-padding-inline-max:999999999px}.cds-custom--assistive-text,.cds-custom--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted){animation:c4p--tearsheet__next--presence-tearsheet__enter .24s cubic-bezier(0,0,.3,1);opacity:1}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__enter .24s cubic-bezier(0,0,.3,1);transform:translateZ(0)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next--stacked.is-visible .c4p--tearsheet__next__container{transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting]{animation:c4p--tearsheet__next--presence-tearsheet__exit .24s cubic-bezier(.4,.14,1,1) forwards}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__exit .24s cubic-bezier(0,0,.3,1) forwards}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next--keep-mounted:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}@keyframes c4p--tearsheet__next--presence-tearsheet__enter{0%{opacity:0;transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet__exit{to{opacity:0}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__enter{0%{transform:translate3d(0,min(95vh,500px),0);transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__exit{to{transform:translate3d(0,min(95vh,500px),0)}}.c4p--tearsheet__next .c4p--tearsheet__next__container{align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));max-inline-size:var(--tearsheet-max-inline-size,1312px)}@media (max-width:41.98rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--stack-activated.is-visible) .c4p--tearsheet__next__container{max-block-size:none}}.c4p--tearsheet__next:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__container{background:linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__main-content{background:linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1));position:relative}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header>*{flex-basis:100%}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.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-custom--modal-container--sm .cds-custom--modal-header{padding-inline-end:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:grid;flex-basis:unset;gap:1rem;grid-template-columns:minmax(auto,40rem) minmax(var(--tearsheet-header-title-grid-width,0),1fr);inline-size:calc(100% - var(--tearsheet-header-action-offset))}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}}@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-custom--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-custom--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-custom--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-custom-label-02-font-size,.875rem);font-weight:var(--cds-custom-label-02-font-weight,400);letter-spacing:var(--cds-custom-label-02-letter-spacing,.16px);line-height:var(--cds-custom-label-02-line-height,1.28572);margin-block-start:.25rem;transition:all .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title>span{align-items:center;block-size:1.5rem;display:flex}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end svg,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-start svg{inline-size:1rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content{align-self:center;margin-block-end:0}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__header-actions{margin-block-start:-.125rem}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__title-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{margin-block:0;transition:margin-block .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper{min-block-size:2.5rem;padding-block-end:.75rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__navigation-bar:before{background:var(--cds-custom-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-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5;background-color:initial;z-index:calc(9000 - var(--stack-depth, 0))}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);position:absolute;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1)}@media (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{transition:none}}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible.is-visible .c4p--tearsheet__next__container{max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem) + var(--block-size-change));transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next__header-label{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);margin-block-end:.25rem}.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}@media (max-width:41.98rem){.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}}.c4p--tearsheet__next__header-title{align-items:flex-start;display:flex;gap:1rem;margin-block-end:.5rem}.c4p--tearsheet__next__header-title svg{flex-shrink:0}.c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end{margin-inline-start:1rem}.c4p--tearsheet__next__header-description{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--tearsheet__next__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-custom--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__content__header-actions{align-items:center;block-size:2rem;display:flex;flex:0 0 auto;inline-size:100%;justify-content:flex-end;margin-block-start:-14px;overflow:hidden}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]){margin-inline-end:.5rem}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]):nth-last-child(2){margin-inline-end:0}.c4p--tearsheet__next__content__header-actions>*{flex-shrink:0}@media (max-width:41.98rem){.c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}}.c4p--tearsheet__next__header-actions,.c4p--tearsheet__next__header-content{margin-block-end:1.5rem}@media (min-width:42rem){.c4p--tearsheet__next--wide .c4p--tearsheet__next__container{inline-size:calc(100% - 8rem)}}.c4p--tearsheet__next__body-layout{display:grid;grid-template-areas:\"influencer body\" \"influencer footer\";grid-template-columns:var(--tearsheet-influencer-width,16rem) 1fr;grid-template-rows:1fr auto;padding-block:0;padding-inline-end:0}.c4p--tearsheet__next__body-layout:not(.c4p--tearsheet__next__body-layout--has-influencer){grid-template-areas:\"body\" \"footer\";grid-template-columns:1fr}.c4p--tearsheet__next__influencer,:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){border-inline-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);grid-area:influencer}.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){display:grid;grid-area:body;grid-template-columns:1fr var(--tearsheet-summary-content-width,16rem);overflow:hidden;position:relative}@media (max-width:41.98rem){.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}}.c4p--tearsheet__next__body>:only-child,:host(c4p-preview-tearsheet) ::slotted([slot=body])>:only-child{grid-column:1/-1}.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:5rem;border-block-start:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);grid-area:footer;overflow:hidden}@media (max-width:41.98rem){.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:4rem}}@media (max-width:19.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}@media (max-width:41.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}.c4p--tearsheet__next__influencer,.c4p--tearsheet__next__main-content,.c4p--tearsheet__next__summary-content,:host ::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){overflow:auto}.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:2rem}@media (max-width:41.98rem){.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}}.c4p--tearsheet__next__side-panel,:host c4p-side-panel::part(dialog){block-size:100%;inline-size:100%!important;inset-block-start:0;max-inline-size:none;position:absolute;z-index:9999}.c4p--tearsheet__next__side-panel .c4p--side-panel__header,:host c4p-side-panel::part(dialog) .c4p--side-panel__header{min-block-size:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header{padding-inline:1rem}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header.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-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=body]){grid-template-columns:1fr 0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=footer]){block-size:4rem}.c4p--tearsheet__next--has-ai-label::part(dialog){background:linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent!important;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next__main-content{position:relative}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__flush{padding-inline:0}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--no-summary{grid-column:1/-1}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--has-ai-label{background:linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1))}:host ::slotted([slot=summary-content][is-flush]){padding-inline:0}@media screen and (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet) ::part(dialog){align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));transform:translate3d(0,min(95vh,500px),0);transition:none}}:host(c4p-preview-tearsheet) ::part(dialog){align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));transform:translate3d(0,min(95vh,500px),0);transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}:host(c4p-preview-tearsheet) ::slotted([slot=influencer][is-flush]){padding-inline:0}:host(c4p-preview-tearsheet[open]) ::part(dialog){transform:translateZ(0);transition:transform .24s cubic-bezier(0,0,.3,1)}@media (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet[open]) ::part(dialog){transition:none}}@media (max-width:41.98rem){:host(:not(.c4p--tearsheet__next--stack-activated.is-visible)) ::part(dialog){max-block-size:none}}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible){--overlay-color:var(--cds-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5}: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-custom-modal{background-color:transparent}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible) ::part(dialog){max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem) + var(--block-size-change));transform:scaleX(var(--scale-factor))}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header{padding-inline:1rem}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet[variant=narrow]):host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0!important}@media (max-width:41.98rem){:host(c4p-preview-tearsheet) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet) ::slotted([slot=summary-content]){padding:0!important}}:host-context(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0}:host ::slotted([slot=footer]){padding-block:0}:host-context(c4p-preview-tearsheet[variant=narrow]){display:flex;flex-direction:column}:host-context(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}:host-context(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-actions{justify-content:flex-start;margin-inline-end:0}:host-context(c4p-preview-tearsheet[variant=narrow]):host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-actions{display:none}:host-context(c4p-preview-tearsheet[variant=narrow]):host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-content{align-self:flex-start}:host-context(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__title-start{align-items:center}:host-context(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__title-start ::slotted(*){block-size:1.5rem;inline-size:1.5rem}:host{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){:host{display:flex;flex-direction:column}:host .c4p--tearsheet__next__header-actions{justify-content:flex-start;margin-inline-end:0}}.c4p--tearsheet__next__header-actions{display:flex;justify-content:flex-end;margin-block-start:-14px;order:2}@media (max-width:41.98rem){.c4p--tearsheet__next__header-actions{order:0}}.c4p--tearsheet__next__header-content{order:1}@media (max-width:41.98rem){.c4p--tearsheet__next__header-content{order:0}}:host .c4p--tearsheet__next__header-actions,:host .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)}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-actions>:not(.c4p--tearsheet__next__content__header-actions){margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1)}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-content>:not(.c4p--tearsheet__next__content__title-wrapper){margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1)}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-content>:not(.c4p--tearsheet__next__content__title-wrapper) *{margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1)}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-title{align-items:center;font-size:var(--cds-custom-label-02-font-size,.875rem);font-weight:var(--cds-custom-label-02-font-weight,400);letter-spacing:var(--cds-custom-label-02-letter-spacing,.16px);line-height:var(--cds-custom-label-02-line-height,1.28572);margin-block-start:.25rem;transition:all .24s cubic-bezier(0,0,.3,1)}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-title>span{align-items:center;block-size:1.5rem;display:flex}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-content{align-self:center;margin-block-end:0}@media (max-width:41.98rem){:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-actions{display:none}}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__content__title-wrapper,:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-actions,:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-content,:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-title{margin-block:0;transition:margin-block .24s ease}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-actions{margin-block-start:-.125rem}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__title-start{align-items:center;display:inline-flex}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__title-start ::slotted(*){block-size:1rem;inline-size:1rem}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next__title-start ::slotted(*){transition:none}}.c4p--tearsheet__next__title-start ::slotted(*){transition:all .24s cubic-bezier(0,0,.3,1)}:host-context(c4p-preview-tearsheet:not([open])) .c4p--tearsheet__next__header-actions,:host-context(c4p-preview-tearsheet:not([open])) .c4p--tearsheet__next__header-content,:host-context(c4p-preview-tearsheet:not([open])) .c4p--tearsheet__next__header-content *{opacity:0;transition:opacity .1s ease-out}"]);
|
|
10
|
+
var tearsheet_header_content_default = css(["@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds-custom--layout--size-xs{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xs,1.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-sm,2rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-md,2.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-lg,3rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xl,4rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-2xl,5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-normal,1rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-normal,1rem)}:root{--cds-custom-layout-size-height-xs:1.5rem;--cds-custom-layout-size-height-sm:2rem;--cds-custom-layout-size-height-md:2.5rem;--cds-custom-layout-size-height-lg:3rem;--cds-custom-layout-size-height-xl:4rem;--cds-custom-layout-size-height-2xl:5rem;--cds-custom-layout-size-height-min:0px;--cds-custom-layout-size-height-max:999999999px;--cds-custom-layout-density-padding-inline-condensed:0.5rem;--cds-custom-layout-density-padding-inline-normal:1rem;--cds-custom-layout-density-padding-inline-min:0px;--cds-custom-layout-density-padding-inline-max:999999999px}.cds-custom--assistive-text,.cds-custom--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted){animation:c4p--tearsheet__next--presence-tearsheet__enter .24s cubic-bezier(0,0,.3,1);opacity:1}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__enter .24s cubic-bezier(0,0,.3,1);transform:translateZ(0)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next--stacked.is-visible .c4p--tearsheet__next__container{transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting]{animation:c4p--tearsheet__next--presence-tearsheet__exit .24s cubic-bezier(.4,.14,1,1) forwards}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__exit .24s cubic-bezier(0,0,.3,1) forwards}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next--keep-mounted:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}@keyframes c4p--tearsheet__next--presence-tearsheet__enter{0%{opacity:0;transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet__exit{to{opacity:0}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__enter{0%{transform:translate3d(0,min(95vh,500px),0);transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__exit{to{transform:translate3d(0,min(95vh,500px),0)}}.c4p--tearsheet__next .c4p--tearsheet__next__container{align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));max-inline-size:var(--tearsheet-max-inline-size,1312px)}@media (max-width:41.98rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--stack-activated.is-visible) .c4p--tearsheet__next__container{max-block-size:none}}.c4p--tearsheet__next:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__container{background:linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__main-content{background:linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1));position:relative}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header>*{flex-basis:100%}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.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-custom--modal-container--sm .cds-custom--modal-header{padding-inline-end:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:grid;flex-basis:unset;gap:1rem;grid-template-columns:minmax(auto,40rem) minmax(var(--tearsheet-header-title-grid-width,0),1fr);inline-size:calc(100% - var(--tearsheet-header-action-offset))}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}}@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-custom--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-custom--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-custom--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-custom-label-02-font-size,.875rem);font-weight:var(--cds-custom-label-02-font-weight,400);letter-spacing:var(--cds-custom-label-02-letter-spacing,.16px);line-height:var(--cds-custom-label-02-line-height,1.28572);margin-block-start:.25rem;transition:all .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title>span{align-items:center;block-size:1.5rem;display:flex}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end svg,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-start svg{inline-size:1rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content{align-self:center;margin-block-end:0}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__header-actions{margin-block-start:-.125rem}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__title-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{margin-block:0;transition:margin-block .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper{min-block-size:2.5rem;padding-block-end:.75rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__navigation-bar:before{background:var(--cds-custom-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-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5;background-color:initial;z-index:calc(9000 - var(--stack-depth, 0))}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);position:absolute;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1)}@media (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{transition:none}}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible.is-visible .c4p--tearsheet__next__container{max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem) + var(--block-size-change));transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next__header-label{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);margin-block-end:.25rem}.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}@media (max-width:41.98rem){.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}}.c4p--tearsheet__next__header-title{align-items:flex-start;display:flex;gap:1rem;margin-block-end:.5rem}.c4p--tearsheet__next__header-title svg{flex-shrink:0}.c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end{margin-inline-start:1rem}.c4p--tearsheet__next__header-description{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--tearsheet__next__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-custom--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__content__header-actions{align-items:center;block-size:2rem;display:flex;flex:0 0 auto;inline-size:100%;justify-content:flex-end;margin-block-start:-14px;overflow:hidden}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]){margin-inline-end:.5rem}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]):nth-last-child(2){margin-inline-end:0}.c4p--tearsheet__next__content__header-actions>*{flex-shrink:0}@media (max-width:41.98rem){.c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}}.c4p--tearsheet__next__header-actions,.c4p--tearsheet__next__header-content{margin-block-end:1.5rem}@media (min-width:42rem){.c4p--tearsheet__next--wide .c4p--tearsheet__next__container{inline-size:calc(100% - 8rem)}}.c4p--tearsheet__next__body-layout{display:grid;grid-template-areas:\"influencer body\" \"influencer footer\";grid-template-columns:var(--tearsheet-influencer-width,16rem) 1fr;grid-template-rows:1fr auto;padding-block:0;padding-inline-end:0}.c4p--tearsheet__next__body-layout:not(.c4p--tearsheet__next__body-layout--has-influencer){grid-template-areas:\"body\" \"footer\";grid-template-columns:1fr}.c4p--tearsheet__next__influencer,:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){border-inline-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);grid-area:influencer}.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){display:grid;grid-area:body;grid-template-columns:1fr var(--tearsheet-summary-content-width,16rem);overflow:hidden;position:relative}@media (max-width:41.98rem){.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}}.c4p--tearsheet__next__body>:only-child,:host(c4p-preview-tearsheet) ::slotted([slot=body])>:only-child{grid-column:1/-1}.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:5rem;border-block-start:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);grid-area:footer;overflow:hidden}@media (max-width:41.98rem){.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:4rem}}@media (max-width:19.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}@media (max-width:41.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}.c4p--tearsheet__next__influencer,.c4p--tearsheet__next__main-content,.c4p--tearsheet__next__summary-content,:host ::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){overflow:auto}.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:2rem}@media (max-width:41.98rem){.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}}.c4p--tearsheet__next__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-custom-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-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=body]){grid-template-columns:1fr 0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=footer]){block-size:4rem}.c4p--tearsheet__next--has-ai-label::part(dialog){background:linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent!important;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next__main-content{position:relative}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__flush{padding-inline:0}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--no-summary{grid-column:1/-1}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--has-ai-label{background:linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1))}:host ::slotted([slot=summary-content]:focus){outline:2px solid var(--cds-custom-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-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));transform:translate3d(0,min(95vh,500px),0);transition:none}}:host(c4p-preview-tearsheet) ::part(dialog){align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));transform:translate3d(0,min(95vh,500px),0);transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}:host(c4p-preview-tearsheet) ::slotted([slot=influencer][is-flush]){padding-inline:0}:host(c4p-preview-tearsheet[open]) ::part(dialog){transform:translateZ(0);transition:transform .24s cubic-bezier(0,0,.3,1)}@media (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet[open]) ::part(dialog){transition:none}}@media (max-width:41.98rem){:host(:not(.c4p--tearsheet__next--stack-activated.is-visible)) ::part(dialog){max-block-size:none}}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible){--overlay-color:var(--cds-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5}: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-custom-modal{background-color:transparent}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible) ::part(dialog){max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem) + var(--block-size-change));transform:scaleX(var(--scale-factor))}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header{padding-inline:1rem}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet[variant=narrow]):host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0!important}@media (max-width:41.98rem){:host(c4p-preview-tearsheet) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet) ::slotted([slot=summary-content]){padding:0!important}}:host-context(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0}:host ::slotted([slot=footer]){padding-block:0}:host-context(c4p-preview-tearsheet[variant=narrow]){display:flex;flex-direction:column}:host-context(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}:host-context(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-actions{justify-content:flex-start;margin-inline-end:0}:host-context(c4p-preview-tearsheet[variant=narrow]):host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-actions{display:none}:host-context(c4p-preview-tearsheet[variant=narrow]):host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-content{align-self:flex-start}:host-context(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__title-start{align-items:center}:host-context(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__title-start ::slotted(*){block-size:1.5rem;inline-size:1.5rem}:host{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){:host{display:flex;flex-direction:column}:host .c4p--tearsheet__next__header-actions{justify-content:flex-start;margin-inline-end:0}}.c4p--tearsheet__next__header-actions{display:flex;justify-content:flex-end;margin-block-start:-14px;order:2}@media (max-width:41.98rem){.c4p--tearsheet__next__header-actions{order:0}}.c4p--tearsheet__next__header-content{order:1}@media (max-width:41.98rem){.c4p--tearsheet__next__header-content{order:0}}:host .c4p--tearsheet__next__header-actions,:host .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)}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-actions>:not(.c4p--tearsheet__next__content__header-actions){margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1)}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-content>:not(.c4p--tearsheet__next__content__title-wrapper){margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1)}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-content>:not(.c4p--tearsheet__next__content__title-wrapper) *{margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1)}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-title{align-items:center;font-size:var(--cds-custom-label-02-font-size,.875rem);font-weight:var(--cds-custom-label-02-font-weight,400);letter-spacing:var(--cds-custom-label-02-letter-spacing,.16px);line-height:var(--cds-custom-label-02-line-height,1.28572);margin-block-start:.25rem;transition:all .24s cubic-bezier(0,0,.3,1)}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-title>span{align-items:center;block-size:1.5rem;display:flex}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-content{align-self:center;margin-block-end:0}@media (max-width:41.98rem){:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-actions{display:none}}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__content__title-wrapper,:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-actions,:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-content,:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-title{margin-block:0;transition:margin-block .24s ease}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__header-actions{margin-block-start:-.125rem}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__title-start{align-items:center;display:inline-flex}:host-context(c4p-tearsheet-header[collapsed]) .c4p--tearsheet__next__title-start ::slotted(*){block-size:1rem;inline-size:1rem}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next__title-start ::slotted(*){transition:none}}.c4p--tearsheet__next__title-start ::slotted(*){transition:all .24s cubic-bezier(0,0,.3,1)}:host-context(c4p-preview-tearsheet:not([open])) .c4p--tearsheet__next__header-actions,:host-context(c4p-preview-tearsheet:not([open])) .c4p--tearsheet__next__header-content,:host-context(c4p-preview-tearsheet:not([open])) .c4p--tearsheet__next__header-content *{opacity:0;transition:opacity .1s ease-out}"]);
|
|
11
11
|
//#endregion
|
|
12
12
|
export { tearsheet_header_content_default as default };
|
|
13
13
|
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
import "../../globals/settings.js";
|
|
9
9
|
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
|
|
10
10
|
import { tearsheetSignal, updateTearsheetSignals } from "./tearsheet-signal.js";
|
|
11
|
+
import { registerFocusableContainers } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
|
|
11
12
|
import tearsheet_header_default$1 from "./tearsheet-header.scss.js";
|
|
12
13
|
import { LitElement, html } from "lit";
|
|
13
14
|
import { property, query, state } from "lit/decorators.js";
|
|
@@ -66,6 +67,8 @@ let CDSTearsheetHeader = class CDSTearsheetHeader extends SignalWatcher(HostList
|
|
|
66
67
|
}
|
|
67
68
|
firstUpdated() {
|
|
68
69
|
this.updateHeaderOffset();
|
|
70
|
+
const uniqueId = tearsheetSignal.get().uniqueId;
|
|
71
|
+
if (uniqueId) registerFocusableContainers(this.shadowRoot, uniqueId);
|
|
69
72
|
}
|
|
70
73
|
updated(_changedProperties) {
|
|
71
74
|
if (_changedProperties.has("disableHeaderCollapse")) updateTearsheetSignals({ disableHeaderCollapse: this.disableHeaderCollapse });
|
|
@@ -112,11 +115,16 @@ let CDSTearsheetHeader = class CDSTearsheetHeader extends SignalWatcher(HostList
|
|
|
112
115
|
[`${blockClass}__header--with-close-icon`]: !!this.hideCloseButton,
|
|
113
116
|
[`${blockClass}__header-collapsed`]: !!fullyCollapsed
|
|
114
117
|
})}">
|
|
115
|
-
<
|
|
116
|
-
name="decorator"
|
|
118
|
+
<div
|
|
117
119
|
slot="ai-label"
|
|
118
|
-
|
|
119
|
-
|
|
120
|
+
role="${this._hasDecorator ? "complementary" : void 0}"
|
|
121
|
+
aria-label="${this._hasDecorator ? "Decorator" : void 0}"
|
|
122
|
+
>
|
|
123
|
+
<slot
|
|
124
|
+
name="decorator"
|
|
125
|
+
@slotchange=${this._handleDecoratorChange}
|
|
126
|
+
></slot>
|
|
127
|
+
</div>
|
|
120
128
|
<cds-custom-modal-close-button
|
|
121
129
|
close-button-label=${this.closeIconDescription}
|
|
122
130
|
@click="${this._handleUserInitiatedClose}"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tearsheet-header.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet-header.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport '@carbon/web-components/es-custom/components/modal/index.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport styles from './tearsheet-header.scss?lit';\nimport { tearsheetSignal, updateTearsheetSignals } from './tearsheet-signal';\nimport { SignalWatcher } from '@lit-labs/signals';\n\nconst blockClass = `${prefix}--tearsheet__next`;\n\n/**\n * Tearsheet Header component - Contains the header section with title, description, and actions.\n *\n * @element c4p-tearsheet-header\n * @slot header-content - The main header content area (use c4p-tearsheet-header-content)\n * @slot header-navigation - Navigation tabs or breadcrumbs below the header\n * @slot header-actions - Action buttons in the header (e.g., settings, delete)\n * @slot decorator - AI label or other decorative elements\n * @fires c4p-tearsheet-header-close-button-clicked - Internal event to notify parent tearsheet\n */\n@customElement(`${prefix}-tearsheet-header`)\nclass CDSTearsheetHeader extends SignalWatcher(HostListenerMixin(LitElement)) {\n @property({ reflect: true })\n slot = 'header';\n\n /**\n * Tooltip text and aria label for the Close button icon.\n */\n @property({ reflect: true, attribute: 'close-icon-description' })\n closeIconDescription: string = 'Close';\n\n /**\n * Optional parameter to hide the progress indicator when multiple steps are used.\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n hideCloseButton: boolean = false;\n\n /**\n * Default header collapse/expand while scrolling the main content can be disabled by setting this\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'disable-header-collapse',\n })\n disableHeaderCollapse: boolean = false;\n\n @state()\n _hasDecorator = false;\n\n @state()\n _hasAILabel = false;\n\n @query('slot[name=\"decorator\"]')\n private decoratorSlot!: HTMLSlotElement;\n\n /**\n * Handles user-initiated close request of this tearsheet.\n * Dispatches an internal event to notify the parent tearsheet to close.\n *\n * @param triggeredBy The element that triggered this close request.\n */\n private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n const init = {\n bubbles: true,\n composed: true,\n detail: {\n triggeredBy,\n },\n };\n\n // Dispatch internal event to notify parent tearsheet\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTearsheetHeader).eventCloseButtonClicked,\n init\n )\n );\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Initialize signal with the initial prop value before any child components connect\n updateTearsheetSignals({\n disableHeaderCollapse: this.disableHeaderCollapse,\n });\n }\n\n protected firstUpdated() {\n this.updateHeaderOffset();\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (_changedProperties.has('disableHeaderCollapse')) {\n updateTearsheetSignals({\n disableHeaderCollapse: this.disableHeaderCollapse,\n });\n }\n this.updateHeaderOffset();\n this.updateCollapsedAttribute();\n }\n\n private updateCollapsedAttribute() {\n const { fullyCollapsed, open } = tearsheetSignal.get();\n\n if (open) {\n if (fullyCollapsed) {\n this.setAttribute('collapsed', '');\n } else {\n this.removeAttribute('collapsed');\n }\n } else {\n this.removeAttribute('collapsed');\n }\n }\n\n private updateHeaderOffset() {\n const { open, isSm } = tearsheetSignal.get();\n if (open) {\n const assigned = this.decoratorSlot.assignedElements({ flatten: true });\n\n const decoratorWidth = assigned?.[0]?.getBoundingClientRect().width ?? 0;\n const closeButtonWidth = !this.hideCloseButton ? 24 : 0;\n const offset = decoratorWidth + closeButtonWidth + (isSm ? 8 : 0);\n\n document.documentElement.style.setProperty(\n '--tearsheet-header-action-offset',\n `${offset}px`\n );\n }\n }\n\n private _handleDecoratorChange(e: Event) {\n this._hasAILabel = false;\n const childItems = (e.target as HTMLSlotElement).assignedElements();\n this._hasDecorator = childItems.length > 0;\n if (this._hasDecorator) {\n for (const item of childItems) {\n if (item.tagName.toLowerCase() === 'cds-custom-ai-label') {\n this._hasAILabel = true;\n break;\n }\n }\n }\n if (this._hasAILabel || this._hasDecorator) {\n childItems[0].setAttribute('size', 'sm');\n this.setAttribute(this._hasAILabel ? 'ai-label' : 'decorator', '');\n this.removeAttribute(this._hasAILabel ? 'decorator' : 'ai-label');\n } else {\n this.removeAttribute('decorator');\n this.removeAttribute('ai-label');\n }\n\n this.updateHeaderOffset();\n }\n render() {\n const { fullyCollapsed } = tearsheetSignal.get();\n const classes = classMap({\n [`${blockClass}__header`]: true,\n [`${blockClass}__header--with-close-icon`]: !!this.hideCloseButton,\n [`${blockClass}__header-collapsed`]: !!fullyCollapsed,\n });\n return html`<cds-custom-modal-header class=\"${classes}\">\n <
|
|
1
|
+
{"version":3,"file":"tearsheet-header.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet-header.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport '@carbon/web-components/es-custom/components/modal/index.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport styles from './tearsheet-header.scss?lit';\nimport { tearsheetSignal, updateTearsheetSignals } from './tearsheet-signal';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport { registerFocusableContainers } from '../../utilities/manageFocusTrap/manageFocusTrap';\n\nconst blockClass = `${prefix}--tearsheet__next`;\n\n/**\n * Tearsheet Header component - Contains the header section with title, description, and actions.\n *\n * @element c4p-tearsheet-header\n * @slot header-content - The main header content area (use c4p-tearsheet-header-content)\n * @slot header-navigation - Navigation tabs or breadcrumbs below the header\n * @slot header-actions - Action buttons in the header (e.g., settings, delete)\n * @slot decorator - AI label or other decorative elements\n * @fires c4p-tearsheet-header-close-button-clicked - Internal event to notify parent tearsheet\n */\n@customElement(`${prefix}-tearsheet-header`)\nclass CDSTearsheetHeader extends SignalWatcher(HostListenerMixin(LitElement)) {\n @property({ reflect: true })\n slot = 'header';\n\n /**\n * Tooltip text and aria label for the Close button icon.\n */\n @property({ reflect: true, attribute: 'close-icon-description' })\n closeIconDescription: string = 'Close';\n\n /**\n * Optional parameter to hide the progress indicator when multiple steps are used.\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n hideCloseButton: boolean = false;\n\n /**\n * Default header collapse/expand while scrolling the main content can be disabled by setting this\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'disable-header-collapse',\n })\n disableHeaderCollapse: boolean = false;\n\n @state()\n _hasDecorator = false;\n\n @state()\n _hasAILabel = false;\n\n @query('slot[name=\"decorator\"]')\n private decoratorSlot!: HTMLSlotElement;\n\n /**\n * Handles user-initiated close request of this tearsheet.\n * Dispatches an internal event to notify the parent tearsheet to close.\n *\n * @param triggeredBy The element that triggered this close request.\n */\n private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n const init = {\n bubbles: true,\n composed: true,\n detail: {\n triggeredBy,\n },\n };\n\n // Dispatch internal event to notify parent tearsheet\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTearsheetHeader).eventCloseButtonClicked,\n init\n )\n );\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Initialize signal with the initial prop value before any child components connect\n updateTearsheetSignals({\n disableHeaderCollapse: this.disableHeaderCollapse,\n });\n }\n\n protected firstUpdated() {\n this.updateHeaderOffset();\n // Register with the current tearsheet's uniqueId\n const uniqueId = tearsheetSignal.get().uniqueId;\n if (uniqueId) {\n registerFocusableContainers(this.shadowRoot, uniqueId);\n }\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (_changedProperties.has('disableHeaderCollapse')) {\n updateTearsheetSignals({\n disableHeaderCollapse: this.disableHeaderCollapse,\n });\n }\n this.updateHeaderOffset();\n this.updateCollapsedAttribute();\n }\n\n private updateCollapsedAttribute() {\n const { fullyCollapsed, open } = tearsheetSignal.get();\n\n if (open) {\n if (fullyCollapsed) {\n this.setAttribute('collapsed', '');\n } else {\n this.removeAttribute('collapsed');\n }\n } else {\n this.removeAttribute('collapsed');\n }\n }\n\n private updateHeaderOffset() {\n const { open, isSm } = tearsheetSignal.get();\n if (open) {\n const assigned = this.decoratorSlot.assignedElements({ flatten: true });\n\n const decoratorWidth = assigned?.[0]?.getBoundingClientRect().width ?? 0;\n const closeButtonWidth = !this.hideCloseButton ? 24 : 0;\n const offset = decoratorWidth + closeButtonWidth + (isSm ? 8 : 0);\n\n document.documentElement.style.setProperty(\n '--tearsheet-header-action-offset',\n `${offset}px`\n );\n }\n }\n\n private _handleDecoratorChange(e: Event) {\n this._hasAILabel = false;\n const childItems = (e.target as HTMLSlotElement).assignedElements();\n this._hasDecorator = childItems.length > 0;\n if (this._hasDecorator) {\n for (const item of childItems) {\n if (item.tagName.toLowerCase() === 'cds-custom-ai-label') {\n this._hasAILabel = true;\n break;\n }\n }\n }\n if (this._hasAILabel || this._hasDecorator) {\n childItems[0].setAttribute('size', 'sm');\n this.setAttribute(this._hasAILabel ? 'ai-label' : 'decorator', '');\n this.removeAttribute(this._hasAILabel ? 'decorator' : 'ai-label');\n } else {\n this.removeAttribute('decorator');\n this.removeAttribute('ai-label');\n }\n\n this.updateHeaderOffset();\n }\n render() {\n const { fullyCollapsed } = tearsheetSignal.get();\n const classes = classMap({\n [`${blockClass}__header`]: true,\n [`${blockClass}__header--with-close-icon`]: !!this.hideCloseButton,\n [`${blockClass}__header-collapsed`]: !!fullyCollapsed,\n });\n return html`<cds-custom-modal-header class=\"${classes}\">\n <div\n slot=\"ai-label\"\n role=\"${this._hasDecorator ? 'complementary' : undefined}\"\n aria-label=\"${this._hasDecorator ? 'Decorator' : undefined}\"\n >\n <slot\n name=\"decorator\"\n @slotchange=${this._handleDecoratorChange}\n ></slot>\n </div>\n <cds-custom-modal-close-button\n close-button-label=${this.closeIconDescription}\n @click=\"${this._handleUserInitiatedClose}\"\n class=\"${this.hideCloseButton\n ? `${blockClass}__header--no-close-icon`\n : ''}\"\n ></cds-custom-modal-close-button>\n\n <slot name=\"header-content\"></slot>\n <slot></slot>\n <slot name=\"navigation-bar\"></slot>\n </cds-custom-modal-header>`;\n }\n\n static styles = styles;\n\n static get eventCloseButtonClicked() {\n return `${prefix}-tearsheet-header-close-button-clicked`;\n }\n}\nexport default CDSTearsheetHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,aAAa;;;;;;;;;;;AAYnB,IAAA,qBAAA,MACM,2BAA2B,cAAc,kBAAkB,WAAW,CAAC,CAAC;;;cAErE;8BAMwB;yBAMJ;+BAUM;uBAGjB;qBAGF;;;;;;;;CAWd,0BAAkC,aAAiC;EACjE,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,QAAQ,EACN,aACD;GACF;AAGD,OAAK,cACH,IAAI,YACD,KAAK,YAA0C,yBAChD,KACD,CACF;;CAGH,oBAAoB;AAClB,QAAM,mBAAmB;AAEzB,yBAAuB,EACrB,uBAAuB,KAAK,uBAC7B,CAAC;;CAGJ,eAAyB;AACvB,OAAK,oBAAoB;EAEzB,MAAM,WAAW,gBAAgB,KAAK,CAAC;AACvC,MAAI,SACF,6BAA4B,KAAK,YAAY,SAAS;;CAI1D,QAAkB,oBAAoC;AACpD,MAAI,mBAAmB,IAAI,wBAAwB,CACjD,wBAAuB,EACrB,uBAAuB,KAAK,uBAC7B,CAAC;AAEJ,OAAK,oBAAoB;AACzB,OAAK,0BAA0B;;CAGjC,2BAAmC;EACjC,MAAM,EAAE,gBAAgB,SAAS,gBAAgB,KAAK;AAEtD,MAAI,KACF,KAAI,eACF,MAAK,aAAa,aAAa,GAAG;MAElC,MAAK,gBAAgB,YAAY;MAGnC,MAAK,gBAAgB,YAAY;;CAIrC,qBAA6B;EAC3B,MAAM,EAAE,MAAM,SAAS,gBAAgB,KAAK;AAC5C,MAAI,MAAM;GAKR,MAAM,UAJW,KAAK,cAAc,iBAAiB,EAAE,SAAS,MAAM,CAEvC,GAAG,IAAI,uBAAuB,CAAC,SAAS,MAC9C,CAAC,KAAK,kBAAkB,KAAK,MACF,OAAO,IAAI;AAE/D,YAAS,gBAAgB,MAAM,YAC7B,oCACA,GAAG,OAAO,IACX;;;CAIL,uBAA+B,GAAU;AACvC,OAAK,cAAc;EACnB,MAAM,aAAc,EAAE,OAA2B,kBAAkB;AACnE,OAAK,gBAAgB,WAAW,SAAS;AACzC,MAAI,KAAK;QACF,MAAM,QAAQ,WACjB,KAAI,KAAK,QAAQ,aAAa,KAAK,gBAAgB;AACjD,SAAK,cAAc;AACnB;;;AAIN,MAAI,KAAK,eAAe,KAAK,eAAe;AAC1C,cAAW,GAAG,aAAa,QAAQ,KAAK;AACxC,QAAK,aAAa,KAAK,cAAc,aAAa,aAAa,GAAG;AAClE,QAAK,gBAAgB,KAAK,cAAc,cAAc,WAAW;SAC5D;AACL,QAAK,gBAAgB,YAAY;AACjC,QAAK,gBAAgB,WAAW;;AAGlC,OAAK,oBAAoB;;CAE3B,SAAS;EACP,MAAM,EAAE,mBAAmB,gBAAgB,KAAK;AAMhD,SAAO,IAAI,4BALK,SAAS;IACtB,GAAG,WAAW,YAAY;IAC1B,GAAG,WAAW,6BAA6B,CAAC,CAAC,KAAK;IAClD,GAAG,WAAW,sBAAsB,CAAC,CAAC;GACxC,CAC6C,CAAC;;;gBAGnC,KAAK,gBAAgB,kBAAkB,KAAA,EAAU;sBAC3C,KAAK,gBAAgB,cAAc,KAAA,EAAU;;;;wBAI3C,KAAK,uBAAuB;;;;6BAIvB,KAAK,qBAAqB;kBACrC,KAAK,0BAA0B;iBAChC,KAAK,kBACV,GAAG,WAAW,2BACd,GAAG;;;;;;;;;gBASGA;;CAEhB,WAAW,0BAA0B;AACnC,SAAO;;;YA7KR,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS;CAAE,SAAS;CAAM,WAAW;CAA0B,CAAC,CAAA,EAAA,mBAAA,WAAA,wBAAA,KAAA,EAAA;YAMhE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAqB,CAAC,CAAA,EAAA,mBAAA,WAAA,mBAAA,KAAA,EAAA;YAM1E,SAAS;CACR,MAAM;CACN,SAAS;CACT,WAAW;CACZ,CAAC,CAAA,EAAA,mBAAA,WAAA,yBAAA,KAAA,EAAA;YAGD,OAAO,CAAA,EAAA,mBAAA,WAAA,iBAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,mBAAA,WAAA,eAAA,KAAA,EAAA;YAGP,MAAM,2BAAyB,CAAA,EAAA,mBAAA,WAAA,iBAAA,KAAA,EAAA;iCAjCjCC,cAAc,uBAA6B,CAAA,EAAA,mBAAA;AAkL5C,IAAA,2BAAe"}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { css } from "lit";
|
|
9
9
|
//#region src/components/tearsheet-preview/tearsheet-header.scss?lit
|
|
10
|
-
var tearsheet_header_default = css(["@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds-custom--layout--size-xs{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xs,1.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-sm,2rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-md,2.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-lg,3rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xl,4rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-2xl,5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-normal,1rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-normal,1rem)}:root{--cds-custom-layout-size-height-xs:1.5rem;--cds-custom-layout-size-height-sm:2rem;--cds-custom-layout-size-height-md:2.5rem;--cds-custom-layout-size-height-lg:3rem;--cds-custom-layout-size-height-xl:4rem;--cds-custom-layout-size-height-2xl:5rem;--cds-custom-layout-size-height-min:0px;--cds-custom-layout-size-height-max:999999999px;--cds-custom-layout-density-padding-inline-condensed:0.5rem;--cds-custom-layout-density-padding-inline-normal:1rem;--cds-custom-layout-density-padding-inline-min:0px;--cds-custom-layout-density-padding-inline-max:999999999px}.cds-custom--assistive-text,.cds-custom--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted){animation:c4p--tearsheet__next--presence-tearsheet__enter .24s cubic-bezier(0,0,.3,1);opacity:1}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__enter .24s cubic-bezier(0,0,.3,1);transform:translateZ(0)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next--stacked.is-visible .c4p--tearsheet__next__container{transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting]{animation:c4p--tearsheet__next--presence-tearsheet__exit .24s cubic-bezier(.4,.14,1,1) forwards}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__exit .24s cubic-bezier(0,0,.3,1) forwards}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next--keep-mounted:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}@keyframes c4p--tearsheet__next--presence-tearsheet__enter{0%{opacity:0;transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet__exit{to{opacity:0}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__enter{0%{transform:translate3d(0,min(95vh,500px),0);transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__exit{to{transform:translate3d(0,min(95vh,500px),0)}}.c4p--tearsheet__next .c4p--tearsheet__next__container{align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));max-inline-size:var(--tearsheet-max-inline-size,1312px)}@media (max-width:41.98rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--stack-activated.is-visible) .c4p--tearsheet__next__container{max-block-size:none}}.c4p--tearsheet__next:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__container{background:linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__main-content{background:linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1));position:relative}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header>*{flex-basis:100%}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.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-custom--modal-container--sm .cds-custom--modal-header{padding-inline-end:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:grid;flex-basis:unset;gap:1rem;grid-template-columns:minmax(auto,40rem) minmax(var(--tearsheet-header-title-grid-width,0),1fr);inline-size:calc(100% - var(--tearsheet-header-action-offset))}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}}@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-custom--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-custom--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-custom--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-custom-label-02-font-size,.875rem);font-weight:var(--cds-custom-label-02-font-weight,400);letter-spacing:var(--cds-custom-label-02-letter-spacing,.16px);line-height:var(--cds-custom-label-02-line-height,1.28572);margin-block-start:.25rem;transition:all .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title>span{align-items:center;block-size:1.5rem;display:flex}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end svg,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-start svg{inline-size:1rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content{align-self:center;margin-block-end:0}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__header-actions{margin-block-start:-.125rem}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__title-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{margin-block:0;transition:margin-block .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper{min-block-size:2.5rem;padding-block-end:.75rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__navigation-bar:before{background:var(--cds-custom-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-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5;background-color:initial;z-index:calc(9000 - var(--stack-depth, 0))}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);position:absolute;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1)}@media (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{transition:none}}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible.is-visible .c4p--tearsheet__next__container{max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem) + var(--block-size-change));transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next__header-label{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);margin-block-end:.25rem}.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}@media (max-width:41.98rem){.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}}.c4p--tearsheet__next__header-title{align-items:flex-start;display:flex;gap:1rem;margin-block-end:.5rem}.c4p--tearsheet__next__header-title svg{flex-shrink:0}.c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end{margin-inline-start:1rem}.c4p--tearsheet__next__header-description{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--tearsheet__next__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-custom--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-custom-border-subtle-01,#c6c6c6);grid-area:influencer}.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){display:grid;grid-area:body;grid-template-columns:1fr var(--tearsheet-summary-content-width,16rem);overflow:hidden;position:relative}@media (max-width:41.98rem){.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}}.c4p--tearsheet__next__body>:only-child,:host(c4p-preview-tearsheet) ::slotted([slot=body])>:only-child{grid-column:1/-1}.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:5rem;border-block-start:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);grid-area:footer;overflow:hidden}@media (max-width:41.98rem){.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:4rem}}@media (max-width:19.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}@media (max-width:41.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}.c4p--tearsheet__next__influencer,.c4p--tearsheet__next__main-content,.c4p--tearsheet__next__summary-content,:host ::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){overflow:auto}.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:2rem}@media (max-width:41.98rem){.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}}.c4p--tearsheet__next__side-panel,:host c4p-side-panel::part(dialog){block-size:100%;inline-size:100%!important;inset-block-start:0;max-inline-size:none;position:absolute;z-index:9999}.c4p--tearsheet__next__side-panel .c4p--side-panel__header,:host c4p-side-panel::part(dialog) .c4p--side-panel__header{min-block-size:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header{padding-inline:1rem}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header.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-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=body]){grid-template-columns:1fr 0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=footer]){block-size:4rem}.c4p--tearsheet__next--has-ai-label::part(dialog){background:linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent!important;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next__main-content{position:relative}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__flush{padding-inline:0}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--no-summary{grid-column:1/-1}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--has-ai-label{background:linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1))}:host ::slotted([slot=summary-content][is-flush]){padding-inline:0}@media screen and (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet) ::part(dialog){align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));transform:translate3d(0,min(95vh,500px),0);transition:none}}:host(c4p-preview-tearsheet) ::part(dialog){align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));transform:translate3d(0,min(95vh,500px),0);transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}:host(c4p-preview-tearsheet) ::slotted([slot=influencer][is-flush]){padding-inline:0}:host(c4p-preview-tearsheet[open]) ::part(dialog){transform:translateZ(0);transition:transform .24s cubic-bezier(0,0,.3,1)}@media (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet[open]) ::part(dialog){transition:none}}@media (max-width:41.98rem){:host(:not(.c4p--tearsheet__next--stack-activated.is-visible)) ::part(dialog){max-block-size:none}}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible){--overlay-color:var(--cds-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5}: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-custom-modal{background-color:transparent}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible) ::part(dialog){max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem) + var(--block-size-change));transform:scaleX(var(--scale-factor))}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header{padding-inline:1rem}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet[variant=narrow]):host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0!important}@media (max-width:41.98rem){:host(c4p-preview-tearsheet) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet) ::slotted([slot=summary-content]){padding:0!important}}:host-context(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0}:host ::slotted([slot=footer]){padding-block:0}:host-context(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header{padding-inline:1rem}:host-context(c4p-preview-tearsheet[variant=narrow][collapsed]) .c4p--tearsheet__next__header-actions{display:none}:host{position:relative}:host .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}@media (max-width:41.98rem){:host .c4p--tearsheet__next__header{padding-inline:1rem}}:host ::slotted(:not([slot=header-content])){flex-basis:100%;margin-block-end:1.5rem}:host ::slotted([slot=header-content]){inline-size:calc(100% - var(--tearsheet-header-action-offset))}:host ::slotted([slot=header-content]),:host ::slotted([slot=navigation-bar]){margin-block-end:0}.c4p--tearsheet__next__header--no-close-icon{display:none}@media screen and (prefers-reduced-motion:reduce){:host ::slotted(*){max-block-size:50vh;opacity:1;overflow:hidden;transition:none}}:host ::slotted(*){max-block-size:50vh;opacity:1;overflow:hidden;transition:max-block-size .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1),margin .24s cubic-bezier(0,0,.3,1),padding .24s cubic-bezier(0,0,.3,1)}:host ::slotted(.excludeFromCollapse),:host ::slotted([slot=header-content]),:host ::slotted([slot=navigation-bar]){max-block-size:none;opacity:1;overflow:visible;transition:none}@media screen and (prefers-reduced-motion:reduce){:host-context(c4p-preview-tearsheet:not([open])) ::slotted(*){opacity:0;transition:none}}:host-context(c4p-preview-tearsheet:not([open])) ::slotted(*){opacity:0;transition:opacity .1s ease-out}:host([collapsed]) .c4p--tearsheet__next__header{padding-block-start:.75rem;transition:padding .24s cubic-bezier(0,0,.3,1)}:host([collapsed]) ::slotted(:not([slot=navigation-bar],[slot=header-content],.excludeFromCollapse,[slot=decorator])){display:none;margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1)}:host([collapsed]) ::slotted([slot=header-content]){min-block-size:2.5rem;padding-block-end:.75rem}:host([collapsed]) ::slotted([slot=navigation-bar]):before{background:rgba(0,0,0,.12);block-size:1px;content:\"\";inline-size:100vw;inset-block-start:-.25rem;inset-inline-start:50%;pointer-events:none;position:absolute;transform:translateX(-50%);z-index:1}"]);
|
|
10
|
+
var tearsheet_header_default = css(["@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds-custom--layout--size-xs{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xs,1.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-sm,2rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-md,2.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-lg,3rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xl,4rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-2xl,5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-normal,1rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-normal,1rem)}:root{--cds-custom-layout-size-height-xs:1.5rem;--cds-custom-layout-size-height-sm:2rem;--cds-custom-layout-size-height-md:2.5rem;--cds-custom-layout-size-height-lg:3rem;--cds-custom-layout-size-height-xl:4rem;--cds-custom-layout-size-height-2xl:5rem;--cds-custom-layout-size-height-min:0px;--cds-custom-layout-size-height-max:999999999px;--cds-custom-layout-density-padding-inline-condensed:0.5rem;--cds-custom-layout-density-padding-inline-normal:1rem;--cds-custom-layout-density-padding-inline-min:0px;--cds-custom-layout-density-padding-inline-max:999999999px}.cds-custom--assistive-text,.cds-custom--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted){animation:c4p--tearsheet__next--presence-tearsheet__enter .24s cubic-bezier(0,0,.3,1);opacity:1}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__enter .24s cubic-bezier(0,0,.3,1);transform:translateZ(0)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next--stacked.is-visible .c4p--tearsheet__next__container{transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting]{animation:c4p--tearsheet__next--presence-tearsheet__exit .24s cubic-bezier(.4,.14,1,1) forwards}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__exit .24s cubic-bezier(0,0,.3,1) forwards}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next--keep-mounted:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}@keyframes c4p--tearsheet__next--presence-tearsheet__enter{0%{opacity:0;transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet__exit{to{opacity:0}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__enter{0%{transform:translate3d(0,min(95vh,500px),0);transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__exit{to{transform:translate3d(0,min(95vh,500px),0)}}.c4p--tearsheet__next .c4p--tearsheet__next__container{align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));max-inline-size:var(--tearsheet-max-inline-size,1312px)}@media (max-width:41.98rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--stack-activated.is-visible) .c4p--tearsheet__next__container{max-block-size:none}}.c4p--tearsheet__next:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__container{background:linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__main-content{background:linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1));position:relative}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header>*{flex-basis:100%}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.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-custom--modal-container--sm .cds-custom--modal-header{padding-inline-end:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:grid;flex-basis:unset;gap:1rem;grid-template-columns:minmax(auto,40rem) minmax(var(--tearsheet-header-title-grid-width,0),1fr);inline-size:calc(100% - var(--tearsheet-header-action-offset))}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}}@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-custom--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-custom--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-custom--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-custom-label-02-font-size,.875rem);font-weight:var(--cds-custom-label-02-font-weight,400);letter-spacing:var(--cds-custom-label-02-letter-spacing,.16px);line-height:var(--cds-custom-label-02-line-height,1.28572);margin-block-start:.25rem;transition:all .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title>span{align-items:center;block-size:1.5rem;display:flex}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end svg,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-start svg{inline-size:1rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content{align-self:center;margin-block-end:0}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__header-actions{margin-block-start:-.125rem}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__title-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{margin-block:0;transition:margin-block .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper{min-block-size:2.5rem;padding-block-end:.75rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__navigation-bar:before{background:var(--cds-custom-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-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5;background-color:initial;z-index:calc(9000 - var(--stack-depth, 0))}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);position:absolute;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1)}@media (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{transition:none}}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible.is-visible .c4p--tearsheet__next__container{max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem) + var(--block-size-change));transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next__header-label{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);margin-block-end:.25rem}.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}@media (max-width:41.98rem){.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}}.c4p--tearsheet__next__header-title{align-items:flex-start;display:flex;gap:1rem;margin-block-end:.5rem}.c4p--tearsheet__next__header-title svg{flex-shrink:0}.c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end{margin-inline-start:1rem}.c4p--tearsheet__next__header-description{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--tearsheet__next__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-custom--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-custom-border-subtle-01,#c6c6c6);grid-area:influencer}.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){display:grid;grid-area:body;grid-template-columns:1fr var(--tearsheet-summary-content-width,16rem);overflow:hidden;position:relative}@media (max-width:41.98rem){.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}}.c4p--tearsheet__next__body>:only-child,:host(c4p-preview-tearsheet) ::slotted([slot=body])>:only-child{grid-column:1/-1}.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:5rem;border-block-start:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);grid-area:footer;overflow:hidden}@media (max-width:41.98rem){.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:4rem}}@media (max-width:19.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}@media (max-width:41.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}.c4p--tearsheet__next__influencer,.c4p--tearsheet__next__main-content,.c4p--tearsheet__next__summary-content,:host ::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){overflow:auto}.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:2rem}@media (max-width:41.98rem){.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}}.c4p--tearsheet__next__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-custom-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-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=body]){grid-template-columns:1fr 0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=footer]){block-size:4rem}.c4p--tearsheet__next--has-ai-label::part(dialog){background:linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent!important;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next__main-content{position:relative}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__flush{padding-inline:0}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--no-summary{grid-column:1/-1}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--has-ai-label{background:linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1))}:host ::slotted([slot=summary-content]:focus){outline:2px solid var(--cds-custom-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-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));transform:translate3d(0,min(95vh,500px),0);transition:none}}:host(c4p-preview-tearsheet) ::part(dialog){align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem));transform:translate3d(0,min(95vh,500px),0);transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}:host(c4p-preview-tearsheet) ::slotted([slot=influencer][is-flush]){padding-inline:0}:host(c4p-preview-tearsheet[open]) ::part(dialog){transform:translateZ(0);transition:transform .24s cubic-bezier(0,0,.3,1)}@media (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet[open]) ::part(dialog){transition:none}}@media (max-width:41.98rem){:host(:not(.c4p--tearsheet__next--stack-activated.is-visible)) ::part(dialog){max-block-size:none}}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible){--overlay-color:var(--cds-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5}: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-custom-modal{background-color:transparent}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible) ::part(dialog){max-block-size:calc(100% - var(--tearsheet-vertical-gap, 3rem) + var(--block-size-change));transform:scaleX(var(--scale-factor))}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header{padding-inline:1rem}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet[variant=narrow]):host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0!important}@media (max-width:41.98rem){:host(c4p-preview-tearsheet) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet) ::slotted([slot=summary-content]){padding:0!important}}:host-context(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0}:host ::slotted([slot=footer]){padding-block:0}:host-context(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__header{padding-inline:1rem}:host-context(c4p-preview-tearsheet[variant=narrow][collapsed]) .c4p--tearsheet__next__header-actions{display:none}:host{position:relative}:host .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}@media (max-width:41.98rem){:host .c4p--tearsheet__next__header{padding-inline:1rem}}:host ::slotted(:not([slot=header-content])){flex-basis:100%;margin-block-end:1.5rem}:host ::slotted([slot=header-content]){inline-size:calc(100% - var(--tearsheet-header-action-offset))}:host ::slotted([slot=header-content]),:host ::slotted([slot=navigation-bar]){margin-block-end:0}.c4p--tearsheet__next__header--no-close-icon{display:none}@media screen and (prefers-reduced-motion:reduce){:host ::slotted(*){max-block-size:50vh;opacity:1;overflow:hidden;transition:none}}:host ::slotted(*){max-block-size:50vh;opacity:1;overflow:hidden;transition:max-block-size .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1),margin .24s cubic-bezier(0,0,.3,1),padding .24s cubic-bezier(0,0,.3,1)}:host ::slotted(.excludeFromCollapse),:host ::slotted([slot=header-content]),:host ::slotted([slot=navigation-bar]){max-block-size:none;opacity:1;overflow:visible;transition:none}@media screen and (prefers-reduced-motion:reduce){:host-context(c4p-preview-tearsheet:not([open])) ::slotted(*){opacity:0;transition:none}}:host-context(c4p-preview-tearsheet:not([open])) ::slotted(*){opacity:0;transition:opacity .1s ease-out}:host([collapsed]) .c4p--tearsheet__next__header{padding-block-start:.75rem;transition:padding .24s cubic-bezier(0,0,.3,1)}:host([collapsed]) ::slotted(:not([slot=navigation-bar],[slot=header-content],.excludeFromCollapse,[slot=decorator])){display:none;margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1)}:host([collapsed]) ::slotted([slot=header-content]){min-block-size:2.5rem;padding-block-end:.75rem}:host([collapsed]) ::slotted([slot=navigation-bar]):before{background:rgba(0,0,0,.12);block-size:1px;content:\"\";inline-size:100vw;inset-block-start:-.25rem;inset-inline-start:50%;pointer-events:none;position:absolute;transform:translateX(-50%);z-index:1}"]);
|
|
11
11
|
//#endregion
|
|
12
12
|
export { tearsheet_header_default as default };
|
|
13
13
|
|