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

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

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

package/es/components/tearsheet-preview/tearsheet-signal.d.ts

@@ -11,6 +11,12 @@ interface TearsheetSignalType {
     open: boolean;
     hasAILabel: boolean;
     uniqueId: string;
+    /** Tooltip/aria label for the close button */
+    closeIconDescription: string;
+    /** Whether the close button should be hidden */
+    hideCloseButton: boolean;
+    /** Callback to close the tearsheet */
+    onClose: (() => void) | null;
 }
 export declare const defaultTearsheetSignal: TearsheetSignalType;
 export declare const tearsheetSignal: import("signal-polyfill").Signal.State<TearsheetSignalType>;

package/es/components/tearsheet-preview/tearsheet-signal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tearsheet-signal.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-signal.ts"],"names":[],"mappings":"AAWA;;GAEG;AACH,eAAO,MAAM,UAAU,yBAA+B,CAAC;AAEvD,UAAU,mBAAmB;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,sBAAsB,EAAE,mBASpC,CAAC;AACF,eAAO,MAAM,eAAe,6DAE3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,SAAS,OAAO,CAAC,mBAAmB,CAAC,SAMtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,YAEhC,CAAC"}
+{"version":3,"file":"tearsheet-signal.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-signal.ts"],"names":[],"mappings":"AAWA;;GAEG;AACH,eAAO,MAAM,UAAU,yBAA+B,CAAC;AAEvD,UAAU,mBAAmB;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,gDAAgD;IAChD,eAAe,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;CAC9B;AACD,eAAO,MAAM,sBAAsB,EAAE,mBAYpC,CAAC;AACF,eAAO,MAAM,eAAe,6DAE3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,SAAS,OAAO,CAAC,mBAAmB,CAAC,SAMtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,YAEhC,CAAC"}

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

@@ -28,7 +28,10 @@ const defaultTearsheetSignal = {
 	isSm: false,
 	open: false,
 	hasAILabel: false,
-	uniqueId: ""
+	uniqueId: "",
+	closeIconDescription: "Close",
+	hideCloseButton: false,
+	onClose: null
 };
 const tearsheetSignal = signal(defaultTearsheetSignal);
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"tearsheet-signal.js","names":[],"sources":["../../../src/components/tearsheet-preview/tearsheet-signal.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 */\nimport { signal } from '@lit-labs/signals';\nimport { prefix } from '../../globals/settings';\n\n/**\n * Block class for tearsheet component\n */\nexport const blockClass = `${prefix}--tearsheet__next`;\n\ninterface TearsheetSignalType {\n  hasCloseIcon: boolean;\n  fullyCollapsed: boolean;\n  disableHeaderCollapse: boolean;\n  variant: 'wide' | 'narrow';\n  isSm: boolean;\n  open: boolean;\n  hasAILabel: boolean;\n  uniqueId: string;\n}\nexport const defaultTearsheetSignal: TearsheetSignalType = {\n  hasCloseIcon: true,\n  fullyCollapsed: false,\n  disableHeaderCollapse: false,\n  variant: 'wide',\n  isSm: false,\n  open: false,\n  hasAILabel: false,\n  uniqueId: '',\n};\nexport const tearsheetSignal = signal<TearsheetSignalType>(\n  defaultTearsheetSignal\n);\n\n/**\n * Update one or more properties in the tearsheet signal\n */\nexport const updateTearsheetSignals = (\n  updates: Partial<TearsheetSignalType>\n) => {\n  tearsheetSignal.set({\n    ...tearsheetSignal.get(),\n    ...updates,\n  });\n};\n\n/**\n * Reset tearsheet signal to default values\n */\nexport const resetTearsheetSignal = () => {\n  tearsheetSignal.set(defaultTearsheetSignal);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcA,MAAa,aAAa;AAY1B,MAAa,yBAA8C;CACzD,cAAc;CACd,gBAAgB;CAChB,uBAAuB;CACvB,SAAS;CACT,MAAM;CACN,MAAM;CACN,YAAY;CACZ,UAAU;CACX;AACD,MAAa,kBAAkB,OAC7B,uBACD;;;;AAKD,MAAa,0BACX,YACG;AACH,iBAAgB,IAAI;EAClB,GAAG,gBAAgB,KAAK;EACxB,GAAG;EACJ,CAAC;;;;;AAMJ,MAAa,6BAA6B;AACxC,iBAAgB,IAAI,uBAAuB"}
+{"version":3,"file":"tearsheet-signal.js","names":[],"sources":["../../../src/components/tearsheet-preview/tearsheet-signal.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 */\nimport { signal } from '@lit-labs/signals';\nimport { prefix } from '../../globals/settings';\n\n/**\n * Block class for tearsheet component\n */\nexport const blockClass = `${prefix}--tearsheet__next`;\n\ninterface TearsheetSignalType {\n  hasCloseIcon: boolean;\n  fullyCollapsed: boolean;\n  disableHeaderCollapse: boolean;\n  variant: 'wide' | 'narrow';\n  isSm: boolean;\n  open: boolean;\n  hasAILabel: boolean;\n  uniqueId: string;\n  /** Tooltip/aria label for the close button */\n  closeIconDescription: string;\n  /** Whether the close button should be hidden */\n  hideCloseButton: boolean;\n  /** Callback to close the tearsheet */\n  onClose: (() => void) | null;\n}\nexport const defaultTearsheetSignal: TearsheetSignalType = {\n  hasCloseIcon: true,\n  fullyCollapsed: false,\n  disableHeaderCollapse: false,\n  variant: 'wide',\n  isSm: false,\n  open: false,\n  hasAILabel: false,\n  uniqueId: '',\n  closeIconDescription: 'Close',\n  hideCloseButton: false,\n  onClose: null,\n};\nexport const tearsheetSignal = signal<TearsheetSignalType>(\n  defaultTearsheetSignal\n);\n\n/**\n * Update one or more properties in the tearsheet signal\n */\nexport const updateTearsheetSignals = (\n  updates: Partial<TearsheetSignalType>\n) => {\n  tearsheetSignal.set({\n    ...tearsheetSignal.get(),\n    ...updates,\n  });\n};\n\n/**\n * Reset tearsheet signal to default values\n */\nexport const resetTearsheetSignal = () => {\n  tearsheetSignal.set(defaultTearsheetSignal);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcA,MAAa,aAAa;AAkB1B,MAAa,yBAA8C;CACzD,cAAc;CACd,gBAAgB;CAChB,uBAAuB;CACvB,SAAS;CACT,MAAM;CACN,MAAM;CACN,YAAY;CACZ,UAAU;CACV,sBAAsB;CACtB,iBAAiB;CACjB,SAAS;CACV;AACD,MAAa,kBAAkB,OAC7B,uBACD;;;;AAKD,MAAa,0BACX,YACG;AACH,iBAAgB,IAAI;EAClB,GAAG,gBAAgB,KAAK;EACxB,GAAG;EACJ,CAAC;;;;;AAMJ,MAAa,6BAA6B;AACxC,iBAAgB,IAAI,uBAAuB"}

package/es/components/tearsheet-preview/tearsheet-summary-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tearsheet-summary-content.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-summary-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,wBAAwB,CAAC;;;;;;;;;;uBAIJ,CAAC;;;;;AAK7B;;;;;;;GAOG;AACH,cACM,0BAA2B,SAAQ,+BAExC;IAEC,IAAI,SAAqB;IAGzB,OAAO,EAAE,OAAO,CAAS;IAEzB;;;OAGG;IAEH,gBAAgB,EAAE,OAAO,CAAS;IAElC;;OAEG;IAEH,qBAAqB,EAAE,MAAM,CAAmB;IAEhD;;OAEG;IACH,OAAO,CAAC,WAAW,CAQjB;IAEF,YAAY;IAIZ,MAAM;IAwBN,MAAM,CAAC,MAAM,MAAU;CACxB;AACD,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"tearsheet-summary-content.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-summary-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,wBAAwB,CAAC;;;;;;;;;;uBAIJ,CAAC;;;;;AAK7B;;;;;;;GAOG;AACH,cACM,0BAA2B,SAAQ,+BAExC;IAEC,IAAI,SAAqB;IAGzB,OAAO,EAAE,OAAO,CAAS;IAEzB;;;OAGG;IAEH,gBAAgB,EAAE,OAAO,CAAS;IAElC;;OAEG;IAEH,qBAAqB,EAAE,MAAM,CAAmB;IAEhD;;OAEG;IACH,OAAO,CAAC,WAAW,CAQjB;IAEF,YAAY;IAIZ,MAAM;IA2BN,MAAM,CAAC,MAAM,MAAU;CACxB;AACD,eAAe,0BAA0B,CAAC"}

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

@@ -55,7 +55,10 @@ let CDSTearsheetSummaryContent = class CDSTearsheetSummaryContent extends Signal
 	render() {
 		const { isSm } = tearsheetSignal.get();
 		const classes = classMap({ [`${blockClass}__flush`]: this.isFlush });
-		return !isSm ? html` <aside class="${classes}">
+		return !isSm ? html` <aside
+          class="${classes}"
+          aria-label="${this.summaryPanelAriaLabel}"
+        >
           <slot></slot>
         </aside>` : html` <c4p-side-panel
           size="sm"

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

@@ -1 +1 @@
-{"version":3,"file":"tearsheet-summary-content.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet-summary-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 } 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 '../side-panel/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.scss?lit';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport { tearsheetSignal } from './tearsheet-signal';\n\nconst blockClass = `${prefix}--tearsheet__next`;\n\n/**\n * Tearsheet Summary Content component - Right-side panel for summary details.\n * Automatically converts to a slide-in panel on small screens.\n *\n * @element c4p-tearsheet-summary-content\n * @slot - Content for the summary panel\n * @fires cds-tearsheet-summary-closed - Fired when the summary panel is closed (mobile only)\n */\n@customElement(`${prefix}-tearsheet-summary-content`)\nclass CDSTearsheetSummaryContent extends SignalWatcher(\n  HostListenerMixin(LitElement)\n) {\n  @property({ reflect: true })\n  slot = 'summary-content';\n\n  @property({ type: Boolean, reflect: true, attribute: 'is-flush' })\n  isFlush: boolean = false;\n\n  /**\n   * In mobile screens right side summary-content section won't be visible by default.\n   * This prop can be toggled to open/close right panel in this case.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'summary-panel-open' })\n  summaryPanelOpen: boolean = false;\n\n  /**\n   * Optional aria-label for the summary panel. Defaults to \"Summary panel\".\n   */\n  @property({ attribute: 'summary-panel-aria-label' })\n  summaryPanelAriaLabel: string = 'Summary panel';\n\n  /**\n   * Handler for closing the summary panel\n   */\n  private handleClose = () => {\n    this.summaryPanelOpen = false;\n    this.dispatchEvent(\n      new CustomEvent('cds-tearsheet-summary-closed', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  firstUpdated() {\n    this.classList.add(`${blockClass}__summary-content`);\n  }\n\n  render() {\n    const { isSm } = tearsheetSignal.get();\n\n    const classes = classMap({\n      [`${blockClass}__flush`]: this.isFlush,\n    });\n\n    return !isSm\n      ? html` <aside class=\"${classes}\">\n          <slot></slot>\n        </aside>`\n      : html` <c4p-side-panel\n          size=\"sm\"\n          ?slide-in=${true}\n          ?open=\"${this.summaryPanelOpen}\"\n          placement=\"right\"\n          aria-label=\"${this.summaryPanelAriaLabel}\"\n          aria-modal=\"true\"\n          @c4p-side-panel-closed=\"${this.handleClose}\"\n        >\n          <slot></slot>\n        </c4p-side-panel>`;\n  }\n\n  static styles = styles;\n}\nexport default CDSTearsheetSummaryContent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,aAAa;;;;;;;;;AAUnB,IAAA,6BAAA,MACM,mCAAmC,cACvC,kBAAkB,WAAW,CAC9B,CAAC;;;cAEO;iBAGY;0BAOS;+BAMI;2BAKJ;AAC1B,QAAK,mBAAmB;AACxB,QAAK,cACH,IAAI,YAAY,gCAAgC;IAC9C,SAAS;IACT,UAAU;IACX,CAAC,CACH;;;CAGH,eAAe;AACb,OAAK,UAAU,IAAI,GAAG,WAAW,mBAAmB;;CAGtD,SAAS;EACP,MAAM,EAAE,SAAS,gBAAgB,KAAK;EAEtC,MAAM,UAAU,SAAS,GACtB,GAAG,WAAW,WAAW,KAAK,SAChC,CAAC;AAEF,SAAO,CAAC,OACJ,IAAI,kBAAkB,QAAQ;;oBAG9B,IAAI;;sBAEU,KAAK;mBACR,KAAK,iBAAiB;;wBAEjB,KAAK,sBAAsB;;oCAEf,KAAK,YAAY;;;;;;gBAMnCA;;;YA5Df,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,2BAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAY,CAAC,CAAA,EAAA,2BAAA,WAAA,WAAA,KAAA,EAAA;YAOjE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAsB,CAAC,CAAA,EAAA,2BAAA,WAAA,oBAAA,KAAA,EAAA;YAM3E,SAAS,EAAE,WAAW,4BAA4B,CAAC,CAAA,EAAA,2BAAA,WAAA,yBAAA,KAAA,EAAA;yCApBrDC,cAAc,gCAAsC,CAAA,EAAA,2BAAA;AAkErD,IAAA,oCAAe"}
+{"version":3,"file":"tearsheet-summary-content.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet-summary-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 } 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 '../side-panel/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.scss?lit';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport { tearsheetSignal } from './tearsheet-signal';\n\nconst blockClass = `${prefix}--tearsheet__next`;\n\n/**\n * Tearsheet Summary Content component - Right-side panel for summary details.\n * Automatically converts to a slide-in panel on small screens.\n *\n * @element c4p-tearsheet-summary-content\n * @slot - Content for the summary panel\n * @fires cds-tearsheet-summary-closed - Fired when the summary panel is closed (mobile only)\n */\n@customElement(`${prefix}-tearsheet-summary-content`)\nclass CDSTearsheetSummaryContent extends SignalWatcher(\n  HostListenerMixin(LitElement)\n) {\n  @property({ reflect: true })\n  slot = 'summary-content';\n\n  @property({ type: Boolean, reflect: true, attribute: 'is-flush' })\n  isFlush: boolean = false;\n\n  /**\n   * In mobile screens right side summary-content section won't be visible by default.\n   * This prop can be toggled to open/close right panel in this case.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'summary-panel-open' })\n  summaryPanelOpen: boolean = false;\n\n  /**\n   * Optional aria-label for the summary panel. Defaults to \"Summary panel\".\n   */\n  @property({ attribute: 'summary-panel-aria-label' })\n  summaryPanelAriaLabel: string = 'Summary panel';\n\n  /**\n   * Handler for closing the summary panel\n   */\n  private handleClose = () => {\n    this.summaryPanelOpen = false;\n    this.dispatchEvent(\n      new CustomEvent('cds-tearsheet-summary-closed', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  firstUpdated() {\n    this.classList.add(`${blockClass}__summary-content`);\n  }\n\n  render() {\n    const { isSm } = tearsheetSignal.get();\n\n    const classes = classMap({\n      [`${blockClass}__flush`]: this.isFlush,\n    });\n\n    return !isSm\n      ? html` <aside\n          class=\"${classes}\"\n          aria-label=\"${this.summaryPanelAriaLabel}\"\n        >\n          <slot></slot>\n        </aside>`\n      : html` <c4p-side-panel\n          size=\"sm\"\n          ?slide-in=${true}\n          ?open=\"${this.summaryPanelOpen}\"\n          placement=\"right\"\n          aria-label=\"${this.summaryPanelAriaLabel}\"\n          aria-modal=\"true\"\n          @c4p-side-panel-closed=\"${this.handleClose}\"\n        >\n          <slot></slot>\n        </c4p-side-panel>`;\n  }\n\n  static styles = styles;\n}\nexport default CDSTearsheetSummaryContent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,aAAa;;;;;;;;;AAUnB,IAAA,6BAAA,MACM,mCAAmC,cACvC,kBAAkB,WAAW,CAC9B,CAAC;;;cAEO;iBAGY;0BAOS;+BAMI;2BAKJ;AAC1B,QAAK,mBAAmB;AACxB,QAAK,cACH,IAAI,YAAY,gCAAgC;IAC9C,SAAS;IACT,UAAU;IACX,CAAC,CACH;;;CAGH,eAAe;AACb,OAAK,UAAU,IAAI,GAAG,WAAW,mBAAmB;;CAGtD,SAAS;EACP,MAAM,EAAE,SAAS,gBAAgB,KAAK;EAEtC,MAAM,UAAU,SAAS,GACtB,GAAG,WAAW,WAAW,KAAK,SAChC,CAAC;AAEF,SAAO,CAAC,OACJ,IAAI;mBACO,QAAQ;wBACH,KAAK,sBAAsB;;;oBAI3C,IAAI;;sBAEU,KAAK;mBACR,KAAK,iBAAiB;;wBAEjB,KAAK,sBAAsB;;oCAEf,KAAK,YAAY;;;;;;gBAMnCA;;;YA/Df,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,2BAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAY,CAAC,CAAA,EAAA,2BAAA,WAAA,WAAA,KAAA,EAAA;YAOjE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAsB,CAAC,CAAA,EAAA,2BAAA,WAAA,oBAAA,KAAA,EAAA;YAM3E,SAAS,EAAE,WAAW,4BAA4B,CAAC,CAAA,EAAA,2BAAA,WAAA,yBAAA,KAAA,EAAA;yCApBrDC,cAAc,gCAAsC,CAAA,EAAA,2BAAA;AAqErD,IAAA,oCAAe"}

package/es/components/tearsheet-preview/tearsheet.d.ts

@@ -31,6 +31,8 @@ declare const CDSTearsheet_base: {
  * @slot footer - Footer content with actions
  * @fires c4p-preview-tearsheet-beingclosed - Fired when the tearsheet is about to close
  * @fires c4p-preview-tearsheet-closed - Fired after the tearsheet has closed
+ * @fires c4p-preview-tearsheet-collapse-change - Fired when the header collapse state changes.
+ *   `event.detail.collapsed` is `true` when collapsing, `false` when expanding.
  */
 declare class CDSTearsheet extends CDSTearsheet_base {
     /**
@@ -107,6 +109,8 @@ declare class CDSTearsheet extends CDSTearsheet_base {
     private get hasAILabel();
     connectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
+    /** Read close-button props from the slotted c4p-tearsheet-header element */
+    private _readHeaderProps;
     protected updated(_changedProperties: PropertyValues): void;
     private updateIsSmState;
     private handleOpenPropertyChange;
@@ -116,6 +120,11 @@ declare class CDSTearsheet extends CDSTearsheet_base {
      * Update CSS custom properties for stacking
      */
     private updateStackProperties;
+    /**
+     * Delegates to `c4p-tearsheet-header-content.getFirstFocusable()`.
+     * All priority logic lives in the component that owns the relevant DOM.
+     */
+    private _getFirstFocusable;
     disconnectedCallback(): void;
     /**
      * Update CSS custom properties for dynamic styling
@@ -153,6 +162,11 @@ declare class CDSTearsheet extends CDSTearsheet_base {
      * This is an internal event that triggers the tearsheet to close
      */
     private handleHeaderCloseButtonClick;
+    /**
+     * Intercepts the internal collapse-change event from the header and
+     * re-dispatches it as the public `c4p-preview-tearsheet-collapse-change` event.
+     */
+    private handleHeaderCollapseChange;
     /**
      * Handle close event from the modal (ESC key, click outside, etc.)
      */
@@ -163,6 +177,11 @@ declare class CDSTearsheet extends CDSTearsheet_base {
     private getFloatingMenuSelectors;
     render(): import("lit-html").TemplateResult<1>;
     static styles: any;
+    /**
+     * Public event fired when the header collapse state changes.
+     * `event.detail.collapsed` is `true` when collapsing, `false` when expanding.
+     */
+    static get eventCollapseChange(): string;
 }
 export default CDSTearsheet;
 //# sourceMappingURL=tearsheet.d.ts.map

package/es/components/tearsheet-preview/tearsheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tearsheet.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;uBAOnB,CAAC;;;;;AAWrC;;;;;;;;;;GAUG;AACH,cACM,YAAa,SAAQ,iBAA4C;IACrE;;OAEG;IAEH,IAAI,EAAE,OAAO,CAAS;IAEtB;;OAEG;IAEH,kBAAkB,EAAE,MAAM,CAAM;IAEhC;;OAEG;IAEH,eAAe,EAAE,MAAM,CAAM;IAE7B;;OAEG;IAEH,mBAAmB,EAAE,MAAM,CAAM;IAEjC;;OAEG;IAEH,WAAW,EAAE,MAAM,CAAM;IAEzB;;OAEG;IAEH,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAU;IAEpC;;OAEG;IAEH,sBAAsB,EAAE,MAAM,CAAM;IAEpC;;OAEG;IAEH,oBAAoB,EAAE,MAAM,CAAM;IAElC;;OAEG;IAEH,0BAA0B,EAAE,OAAO,CAAS;IAE5C;;OAEG;IAEH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAkE;IAElF;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAAkB;IAE1C;;OAEG;IAEH,OAAO,CAAC,IAAI,CAAkB;IAE9B;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAC,CAAc;IAEvC,OAAO,CAAC,aAAa,CAAwC;IAC7D,OAAO,CAAC,QAAQ,CAAS;IACzB;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAC,CAAM;IAEnC,OAAO,CAAC,YAAY,CAA0C;IAC9D,OAAO,CAAC,aAAa,CAInB;IACF;;OAEG;IACH,OAAO,KAAK,YAAY,GAOvB;IAED;;OAEG;IACH,OAAO,KAAK,UAAU,GAWrB;IAED,iBAAiB,IAAI,IAAI;IA+BzB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAahE,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAgB3D,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,wBAAwB;IA0EhC,OAAO,CAAC,2BAA2B;IAanC,OAAO,CAAC,6BAA6B;IAYrC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAoB7B,oBAAoB;IA2CpB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAqBjC;;;OAGG;IACH,OAAO,CAAC,0BAA0B;IA6BlC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAa7B;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAG1B;IAEF;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAOhC;IAEF;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAGhC;IAEF;;;;OAIG;IACH,OAAO,CAAC,cAAc;IA0CtB;;;OAGG;IACH,OAAO,CAAC,4BAA4B,CAIlC;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAEjB;IAEF;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAgBhC,MAAM;IA8CN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"tearsheet.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;uBAOnB,CAAC;;;;;AAWrC;;;;;;;;;;;;GAYG;AACH,cACM,YAAa,SAAQ,iBAA4C;IACrE;;OAEG;IAEH,IAAI,EAAE,OAAO,CAAS;IAEtB;;OAEG;IAEH,kBAAkB,EAAE,MAAM,CAAM;IAEhC;;OAEG;IAEH,eAAe,EAAE,MAAM,CAAM;IAE7B;;OAEG;IAEH,mBAAmB,EAAE,MAAM,CAAM;IAEjC;;OAEG;IAEH,WAAW,EAAE,MAAM,CAAM;IAEzB;;OAEG;IAEH,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAU;IAEpC;;OAEG;IAEH,sBAAsB,EAAE,MAAM,CAAM;IAEpC;;OAEG;IAEH,oBAAoB,EAAE,MAAM,CAAM;IAElC;;OAEG;IAEH,0BAA0B,EAAE,OAAO,CAAS;IAE5C;;OAEG;IAEH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAkE;IAElF;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAAkB;IAE1C;;OAEG;IAEH,OAAO,CAAC,IAAI,CAAkB;IAE9B;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAC,CAAc;IAEvC,OAAO,CAAC,aAAa,CAAwC;IAC7D,OAAO,CAAC,QAAQ,CAAS;IACzB;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAC,CAAM;IAEnC,OAAO,CAAC,YAAY,CAA0C;IAC9D,OAAO,CAAC,aAAa,CAInB;IACF;;OAEG;IACH,OAAO,KAAK,YAAY,GAOvB;IAED;;OAEG;IACH,OAAO,KAAK,UAAU,GAWrB;IAED,iBAAiB,IAAI,IAAI;IAqCzB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAehE,4EAA4E;IAC5E,OAAO,CAAC,gBAAgB;IAiBxB,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAgB3D,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,wBAAwB;IA4EhC,OAAO,CAAC,2BAA2B;IAanC,OAAO,CAAC,6BAA6B;IAYrC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAoB7B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAQ1B,oBAAoB;IA2CpB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAqBjC;;;OAGG;IACH,OAAO,CAAC,0BAA0B;IA6BlC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAa7B;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAG1B;IAEF;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAOhC;IAEF;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAGhC;IAEF;;;;OAIG;IACH,OAAO,CAAC,cAAc;IA0CtB;;;OAGG;IACH,OAAO,CAAC,4BAA4B,CAIlC;IAEF;;;OAGG;IACH,OAAO,CAAC,0BAA0B,CAahC;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAEjB;IAEF;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAgBhC,MAAM;IA6CN,MAAM,CAAC,MAAM,MAAU;IAEvB;;;OAGG;IACH,MAAM,KAAK,mBAAmB,WAE7B;CACF;AAED,eAAe,YAAY,CAAC"}

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

@@ -39,6 +39,8 @@ import { ifDefined } from "lit/directives/if-defined.js";
 * @slot footer - Footer content with actions
 * @fires c4p-preview-tearsheet-beingclosed - Fired when the tearsheet is about to close
 * @fires c4p-preview-tearsheet-closed - Fired after the tearsheet has closed
+* @fires c4p-preview-tearsheet-collapse-change - Fired when the header collapse state changes.
+*   `event.detail.collapsed` is `true` when collapsing, `false` when expanding.
 */
 let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(LitElement)) {
 	constructor(..._args) {
@@ -75,6 +77,15 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
 			event.stopPropagation();
 			this.closeTearsheet();
 		};
+		this.handleHeaderCollapseChange = (event) => {
+			event.stopPropagation();
+			const { collapsed } = event.detail;
+			this.dispatchEvent(new CustomEvent(this.constructor.eventCollapseChange, {
+				bubbles: true,
+				composed: true,
+				detail: { collapsed }
+			}));
+		};
 		this.handleClose = (event) => {
 			this.closeTearsheet(event, true);
 		};
@@ -106,6 +117,7 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
 		if (this.open) this.classList.add("is-visible");
 		else this.classList.remove("is-visible");
 		this.addEventListener(`c4p-tearsheet-header-close-button-clicked`, this.handleHeaderCloseButtonClick);
+		this.addEventListener(`c4p-tearsheet-header-collapse-change`, this.handleHeaderCollapseChange);
 	}
 	firstUpdated(_changedProperties) {
 		this.updateCSSCustomProperties();
@@ -115,9 +127,19 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
 			isSm: this.isSm,
 			open: this.open,
 			hasAILabel: this.hasAILabel,
-			uniqueId: this.uniqueId
+			uniqueId: this.uniqueId,
+			...this._readHeaderProps(),
+			onClose: () => this.closeTearsheet()
 		});
 	}
+	/** Read close-button props from the slotted c4p-tearsheet-header element */
+	_readHeaderProps() {
+		const header = this.querySelector(`c4p-tearsheet-header`);
+		return {
+			closeIconDescription: header?.closeIconDescription ?? header?.getAttribute("close-icon-description") ?? "Close",
+			hideCloseButton: header?.hideCloseButton ?? header?.hasAttribute("hide-close-button") ?? false
+		};
+	}
 	updated(_changedProperties) {
 		this.updateIsSmState(_changedProperties);
 		this.handleOpenPropertyChange(_changedProperties);
@@ -142,7 +164,7 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
 		if (!wasOpen && isOpen) {
 			updateTearsheetSignals({ uniqueId: this.uniqueId });
 			requestAnimationFrame(() => {
-				this._trapFocusAPI = trapFocus(this, this.uniqueId);
+				this._trapFocusAPI = trapFocus(this, this.uniqueId, () => this._getFirstFocusable());
 			});
 		}
 		this._wasOpen = isOpen;
@@ -180,6 +202,13 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
 			this.style.setProperty("--block-size-change", blockSizeChange);
 		}
 	}
+	/**
+	* Delegates to `c4p-tearsheet-header-content.getFirstFocusable()`.
+	* All priority logic lives in the component that owns the relevant DOM.
+	*/
+	_getFirstFocusable() {
+		return this.querySelector(`c4p-tearsheet-header-content`)?.getFirstFocusable() ?? null;
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this._trapFocusAPI?.cleanup();
@@ -291,7 +320,6 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
       ?full-width="${true}"
       ai-label="${ifDefined(this.hasAILabel || void 0)}"
     >
-      <slot name="decorator"></slot>
       <slot name="header"></slot>
       <cds-modal-body class="${blockClass}__body-layout">
         <slot
@@ -306,6 +334,13 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
 	static {
 		this.styles = tearsheet_default$1;
 	}
+	/**
+	* Public event fired when the header collapse state changes.
+	* `event.detail.collapsed` is `true` when collapsing, `false` when expanding.
+	*/
+	static get eventCollapseChange() {
+		return `c4p-preview-tearsheet-collapse-change`;
+	}
 };
 __decorate([property({
 	type: Boolean,

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

@@ -1 +1 @@
-{"version":3,"file":"tearsheet.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, PropertyValues, html } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './tearsheet.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { MatchMediaController } from '../../globals/js/utils/match-media-controller';\nimport { breakpoints } from '@carbon/layout';\nimport { blockClass, updateTearsheetSignals } from './tearsheet-signal';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { stackManager } from './stack-signal';\nimport {\n  trapFocus,\n  clearFocusableContainers,\n} from '../../utilities/manageFocusTrap/manageFocusTrap';\n\n/**\n * Tearsheet component - A slide-out panel for displaying detailed content.\n *\n * @element c4p-preview-tearsheet\n * @slot header - The header content of the tearsheet\n * @slot influencer - Optional left sidebar content (wide variant only)\n * @slot body - Main body content\n * @slot footer - Footer content with actions\n * @fires c4p-preview-tearsheet-beingclosed - Fired when the tearsheet is about to close\n * @fires c4p-preview-tearsheet-closed - Fired after the tearsheet has closed\n */\n@customElement(`${prefix}-preview-tearsheet`)\nclass CDSTearsheet extends SignalWatcher(HostListenerMixin(LitElement)) {\n  /**\n   * Specifies whether the tearsheet is currently open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  /**\n   * User can pass any class names that will be added to the modal container\n   */\n  @property({ attribute: 'container-class-name' })\n  containerClassName: string = '';\n\n  /**\n   * Default influencer takes 256px, this allows override eg: 300px, 20rem\n   */\n  @property({ attribute: 'influencer-width' })\n  influencerWidth: string = '';\n\n  /**\n   * Default summary content takes 256px, this allows override eg: 300px, 20rem\n   */\n  @property({ attribute: 'summary-content-width' })\n  summaryContentWidth: string = '';\n\n  /**\n   * Defines the gap from top of the viewport. Defaulted to 3rem\n   */\n  @property({ attribute: 'vertical-gap' })\n  verticalGap: string = '';\n\n  /**\n   * Default to wide variant. Pass in narrow for narrow tearsheet\n   */\n  @property({ reflect: true })\n  variant: 'wide' | 'narrow' = 'wide';\n\n  /**\n   * Specify the CSS selectors that match the floating menus (comma-separated)\n   */\n  @property({ attribute: 'selectors-floating-menus' })\n  selectorsFloatingMenus: string = '';\n\n  /**\n   * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens\n   */\n  @property({ attribute: 'selector-primary-focus' })\n  selectorPrimaryFocus: string = '';\n\n  /**\n   * Prevents the modal from closing when clicking outside\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside: boolean = false;\n\n  /**\n   * Optional ref to the trigger button that opened the tearsheet. Focus will return here when tearsheet closes.\n   */\n  @property({ attribute: false })\n  launcherButtonRef?: HTMLElement;\n\n  /**\n   * Unique ID for this tearsheet instance\n   */\n  private uniqueId: string = `tearsheet-${Math.random().toString(36).substr(2, 9)}`;\n\n  /**\n   * Internal flag to track if stacking is enabled (via wrapper)\n   */\n  private _stackingEnabled: boolean = false;\n\n  /**\n   * Internal state for tracking if the tearsheet is in small screen mode\n   */\n  @state()\n  private isSm: boolean = false;\n\n  /**\n   * Query the modal body element\n   */\n  @query('cds-modal-body')\n  private modalBodyElement?: HTMLElement;\n\n  private _trapFocusAPI: { cleanup: () => void } | null = null;\n  private _wasOpen = false;\n  /**\n   * Query the header content element to get its titleId\n   */\n  @query(`${prefix}-tearsheet-header-content`)\n  private headerContentElement?: any;\n\n  private smMediaQuery = `(max-width: ${breakpoints.md.width})`;\n  private isSmallDevice = new MatchMediaController(\n    this,\n    this.smMediaQuery,\n    false\n  );\n  /**\n   * Checks if the tearsheet has a decorator (AI label or other)\n   */\n  private get hasDecorator(): boolean {\n    const headerElement = this.querySelector(`${prefix}-tearsheet-header`);\n    if (!headerElement) {\n      return false;\n    }\n    const decorator = headerElement.querySelector('[slot=\"decorator\"]');\n    return !!decorator;\n  }\n\n  /**\n   * Checks if the tearsheet has an AI label decorator\n   */\n  private get hasAILabel(): boolean {\n    const headerElement = this.querySelector(`${prefix}-tearsheet-header`);\n    if (!headerElement) {\n      return false;\n    }\n    const decorator = headerElement.querySelector('[slot=\"decorator\"]');\n    if (!decorator) {\n      return false;\n    }\n    const tagName = decorator.tagName.toLowerCase();\n    return tagName === 'cds-ai-label' || tagName === `${prefix}-ai-label`;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    // Listen for stack wrapper events first\n    this.addEventListener(\n      `${prefix}-tearsheet-stack-connected`,\n      this.handleStackConnected as EventListener\n    );\n    this.addEventListener(\n      `${prefix}-tearsheet-stack-step-size-changed`,\n      this.handleStackStepSizeChanged as EventListener\n    );\n\n    // Check if this tearsheet is wrapped in a stack provider\n    // This handles the case where the stack wrapper connected before this tearsheet\n    this._checkForStackWrapper();\n\n    // Set visibility class\n    if (this.open) {\n      this.classList.add('is-visible');\n    } else {\n      this.classList.remove('is-visible');\n    }\n\n    // Listen for close button click from header\n    this.addEventListener(\n      `${prefix}-tearsheet-header-close-button-clicked`,\n      this.handleHeaderCloseButtonClick as EventListener\n    );\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    this.updateCSSCustomProperties();\n    this.isSm = this.isSmallDevice?.matches || this.variant === 'narrow';\n    // Initialize all signals on first update, including uniqueId so children can register\n    updateTearsheetSignals({\n      variant: this.variant,\n      isSm: this.isSm,\n      open: this.open,\n      hasAILabel: this.hasAILabel,\n      uniqueId: this.uniqueId,\n    });\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    this.updateIsSmState(_changedProperties);\n    this.handleOpenPropertyChange(_changedProperties);\n    this.updateCSSPropertiesIfNeeded(_changedProperties);\n\n    if (_changedProperties.has('variant')) {\n      updateTearsheetSignals({ variant: this.variant });\n    }\n\n    if (_changedProperties.has('isSm')) {\n      this.updateInfluencerVisibility();\n    }\n\n    this.updateStackPropertiesIfNeeded();\n  }\n\n  private updateIsSmState(_changedProperties: PropertyValues): void {\n    const previousIsSm = this.isSm;\n    this.isSm = this.isSmallDevice?.matches || this.variant === 'narrow';\n\n    if (this.isSm !== previousIsSm) {\n      updateTearsheetSignals({ isSm: this.isSm });\n    }\n  }\n\n  private handleOpenPropertyChange(_changedProperties: PropertyValues): void {\n    if (!_changedProperties.has('open')) {\n      return;\n    }\n    const wasOpen = this._wasOpen;\n    const isOpen = this.open;\n\n    updateTearsheetSignals({ open: this.open });\n\n    // Only register with stack manager if stacking is enabled\n    if (this._stackingEnabled && this.modalBodyElement) {\n      stackManager.notifyStack(this.uniqueId, this.open, this.modalBodyElement);\n    }\n\n    this.classList.toggle('is-visible', this.open);\n\n    // Only update stack properties if stacking is enabled\n    if (this._stackingEnabled) {\n      this.updateStackProperties();\n    }\n\n    // Initialize focus trap when tearsheet opens\n    if (!wasOpen && isOpen) {\n      // `focusableContainers` holds the containers where we can query DOM elements.\n      // Our strategy here is to let child/slotted components register their containers,\n      // which are then passed to `trapFocus`. This allows the utility to query elements\n      // directly without being blocked by shadow DOM boundaries.\n\n      // Update signal with current uniqueId FIRST so children can register\n      updateTearsheetSignals({ uniqueId: this.uniqueId });\n\n      // Use requestAnimationFrame to ensure child components have registered their containers\n      requestAnimationFrame(() => {\n        this._trapFocusAPI = trapFocus(this as HTMLElement, this.uniqueId);\n      });\n    }\n\n    this._wasOpen = isOpen;\n    //  Return focus to launcher button when tearsheet closes\n    if (!this.open && this.launcherButtonRef) {\n      // Use a small delay to ensure the tearsheet has fully closed\n      setTimeout(() => {\n        if (this.launcherButtonRef instanceof HTMLElement) {\n          // Check if the button is inside a TearsheetHeaderActions component\n          const headerActionItem = this.launcherButtonRef.closest(\n            `.${blockClass}__header-action-item`\n          );\n\n          if (headerActionItem) {\n            // This is a button inside TearsheetHeaderActions\n            // Check if it's currently visible or if items are collapsed to menu\n            const headerActionsContainer = headerActionItem.closest(\n              `.${blockClass}__content__header-actions`\n            );\n            const menuButton = headerActionsContainer?.querySelector(\n              `.${blockClass}__header-actions-menuButton:not(.${blockClass}__header-actions-menuButton--hidden) button`\n            );\n\n            if (menuButton instanceof HTMLElement) {\n              // On small screens, action buttons collapse to menu - focus the menu button\n              menuButton.focus();\n            } else {\n              // On large screens, focus the action button directly\n              this.launcherButtonRef.focus();\n            }\n          } else {\n            // Regular button ref (not inside TearsheetHeaderActions): focus directly\n            this.launcherButtonRef.focus();\n          }\n        }\n      }, 100);\n    }\n  }\n\n  private updateCSSPropertiesIfNeeded(\n    _changedProperties: PropertyValues\n  ): void {\n    const hasRelevantChanges =\n      _changedProperties.has('influencerWidth') ||\n      _changedProperties.has('summaryContentWidth') ||\n      _changedProperties.has('verticalGap');\n\n    if (hasRelevantChanges) {\n      this.updateCSSCustomProperties();\n    }\n  }\n\n  private updateStackPropertiesIfNeeded(): void {\n    // Only update if stacking is enabled\n    if (!this._stackingEnabled) {\n      return;\n    }\n\n    const stackState = stackManager.state;\n    if (stackState.stack.length > 0) {\n      this.updateStackProperties();\n    }\n  }\n\n  /**\n   * Update CSS custom properties for stacking\n   */\n  private updateStackProperties(): void {\n    const stackState = stackManager.state;\n    const depth = stackManager.getDepth(this.uniqueId);\n    const scaleFactor = stackManager.getScaleFactor(this.uniqueId);\n    const blockSizeChange = stackManager.getBlockSizeChange(this.uniqueId);\n\n    // Manage --stack-activated class on host element\n    if (stackState.stack.length > 1) {\n      this.classList.add(`${blockClass}--stack-activated`);\n    } else {\n      this.classList.remove(`${blockClass}--stack-activated`);\n    }\n\n    if (depth !== -1) {\n      this.style.setProperty('--stack-depth', depth.toString());\n      this.style.setProperty('--scale-factor', scaleFactor.toString());\n      this.style.setProperty('--block-size-change', blockSizeChange);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // Cleanup focus trap and clear all registered containers\n    this._trapFocusAPI?.cleanup();\n\n    clearFocusableContainers();\n\n    // Remove event listeners\n    this.removeEventListener(\n      `${prefix}-tearsheet-header-close-button-clicked`,\n      this.handleHeaderCloseButtonClick as EventListener\n    );\n    this.removeEventListener(\n      `${prefix}-tearsheet-stack-connected`,\n      this.handleStackConnected as EventListener\n    );\n    this.removeEventListener(\n      `${prefix}-tearsheet-stack-step-size-changed`,\n      this.handleStackStepSizeChanged as EventListener\n    );\n\n    // Notify stack manager that this tearsheet is closing (only if stacking was enabled)\n    if (this._stackingEnabled) {\n      stackManager.notifyStack(this.uniqueId, false, null);\n    }\n\n    // Clean up CSS custom properties\n    if (this.influencerWidth) {\n      document.documentElement.style.removeProperty(\n        '--tearsheet-influencer-width'\n      );\n    }\n    if (this.summaryContentWidth) {\n      document.documentElement.style.removeProperty(\n        '--tearsheet-summary-content-width'\n      );\n    }\n    if (this.verticalGap) {\n      document.documentElement.style.removeProperty('--tearsheet-vertical-gap');\n    }\n  }\n\n  /**\n   * Update CSS custom properties for dynamic styling\n   */\n  private updateCSSCustomProperties(): void {\n    if (this.influencerWidth) {\n      document.documentElement.style.setProperty(\n        '--tearsheet-influencer-width',\n        this.influencerWidth\n      );\n    }\n    if (this.summaryContentWidth) {\n      document.documentElement.style.setProperty(\n        '--tearsheet-summary-content-width',\n        this.summaryContentWidth\n      );\n    }\n    if (this.verticalGap) {\n      document.documentElement.style.setProperty(\n        '--tearsheet-vertical-gap',\n        this.verticalGap\n      );\n    }\n  }\n\n  /**\n   * Update influencer visibility based on slot content and screen size\n   * Handles both slot changes and screen size changes\n   */\n  private updateInfluencerVisibility(slot?: HTMLSlotElement): void {\n    const influencerSlot =\n      slot ||\n      (this.shadowRoot?.querySelector(\n        'slot[name=\"influencer\"]'\n      ) as HTMLSlotElement);\n\n    if (!influencerSlot) {\n      return;\n    }\n\n    const hasContent =\n      influencerSlot.assignedNodes({ flatten: true }).length > 0;\n    const shouldShow = hasContent && !this.isSm;\n\n    // Update CSS class on modal body\n    if (this.modalBodyElement) {\n      if (shouldShow) {\n        this.modalBodyElement.classList.add(\n          `${blockClass}__body-layout--has-influencer`\n        );\n      } else {\n        this.modalBodyElement.classList.remove(\n          `${blockClass}__body-layout--has-influencer`\n        );\n      }\n    }\n  }\n\n  /**\n   * Check if this tearsheet is wrapped in a stack provider\n   */\n  private _checkForStackWrapper(): void {\n    // Check if there's a c4p-tearsheet-stack ancestor\n    let parent = this.parentElement;\n    while (parent) {\n      if (parent.tagName.toLowerCase() === `${prefix}-tearsheet-stack`) {\n        this._stackingEnabled = true;\n        return;\n      }\n      parent = parent.parentElement;\n    }\n    this._stackingEnabled = false;\n  }\n\n  /**\n   * Handle stack wrapper connected event\n   */\n  private handleStackConnected = (event: Event) => {\n    event.stopPropagation();\n    this._stackingEnabled = true;\n  };\n\n  /**\n   * Handle stack step size changed event\n   */\n  private handleStackStepSizeChanged = (event: Event) => {\n    event.stopPropagation();\n    // Stack manager is already updated by the wrapper\n    // Just trigger a re-render of stack properties if needed\n    if (this._stackingEnabled && this.open) {\n      this.updateStackProperties();\n    }\n  };\n\n  /**\n   * Handle influencer slot change\n   */\n  private handleInfluencerSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    this.updateInfluencerVisibility(slot);\n  };\n\n  /**\n   * Common method to handle tearsheet close with proper event dispatching\n   * @param originalEvent - The original event that triggered the close (optional)\n   * @param useAsync - Whether to dispatch closed event asynchronously\n   */\n  private closeTearsheet(originalEvent?: Event, useAsync: boolean = false) {\n    // Dispatch the beingclosed event (cancelable)\n    const beforeCloseEvent = new CustomEvent(\n      `${prefix}-preview-tearsheet-beingclosed`,\n      {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {},\n      }\n    );\n\n    if (!this.dispatchEvent(beforeCloseEvent)) {\n      // If event was cancelled, prevent closing\n      if (originalEvent) {\n        originalEvent.preventDefault();\n      }\n      return;\n    }\n\n    // Close the tearsheet\n    this.open = false;\n\n    // Dispatch closed event\n    const dispatchClosedEvent = () => {\n      this.dispatchEvent(\n        new CustomEvent(`${prefix}-preview-tearsheet-closed`, {\n          bubbles: true,\n          composed: true,\n          detail: {},\n        })\n      );\n    };\n\n    if (useAsync) {\n      // Use microtask for async scenarios (e.g., click outside)\n      Promise.resolve().then(dispatchClosedEvent);\n    } else {\n      dispatchClosedEvent();\n    }\n  }\n\n  /**\n   * Handle close button click from the header\n   * This is an internal event that triggers the tearsheet to close\n   */\n  private handleHeaderCloseButtonClick = (event: Event) => {\n    // Stop the internal event from propagating\n    event.stopPropagation();\n    this.closeTearsheet();\n  };\n\n  /**\n   * Handle close event from the modal (ESC key, click outside, etc.)\n   */\n  private handleClose = (event: Event) => {\n    this.closeTearsheet(event, true);\n  };\n\n  /**\n   * Parse floating menu selectors from comma-separated string\n   */\n  private getFloatingMenuSelectors(): string {\n    const defaultSelectors = [\n      `.${prefix}--overflow-menu-options`,\n      `.${prefix}--tooltip`,\n      '.flatpickr-calendar',\n      `.${blockClass}__container`,\n      `.${prefix}--menu`,\n    ];\n\n    const customSelectors = this.selectorsFloatingMenus\n      ? this.selectorsFloatingMenus.split(',').map((s) => s.trim())\n      : [];\n\n    return [...defaultSelectors, ...customSelectors].join(',');\n  }\n\n  render() {\n    const classes = classMap({\n      [blockClass]: true,\n      [`${blockClass}--wide`]: this.variant === 'wide',\n      [`${blockClass}--narrow`]: this.variant === 'narrow',\n      [`${blockClass}--has-ai-label`]: this.hasAILabel,\n      [`${blockClass}--has-decorator`]: this.hasDecorator && !this.hasAILabel,\n    });\n\n    const containerClasses = `${blockClass}__container ${this.containerClassName}`;\n\n    const computedAriaLabelledby =\n      !this.ariaLabel && this.headerContentElement?.titleId\n        ? this.headerContentElement.titleId\n        : undefined;\n\n    return html`<cds-modal\n      class=${classes}\n      size=${this.variant === 'narrow' ? 'sm' : 'lg'}\n      ?open=\"${this.open}\"\n      container-class=\"${containerClasses}\"\n      ?prevent-close-on-click-outside=\"${this.preventCloseOnClickOutside}\"\n      aria-label=\"${ifDefined(this.ariaLabel || undefined)}\"\n      aria-labelledby=\"${ifDefined(computedAriaLabelledby)}\"\n      selector-primary-focus=\"${ifDefined(\n        this.selectorPrimaryFocus || undefined\n      )}\"\n      selectors-floating-menus=\"${this.getFloatingMenuSelectors()}\"\n      @cds-modal-beingclosed=\"${this.handleClose}\"\n      @cds-modal-closed=\"${this.handleClose}\"\n      ?full-width=\"${true}\"\n      ai-label=\"${ifDefined(this.hasAILabel || undefined)}\"\n    >\n      <slot name=\"decorator\"></slot>\n      <slot name=\"header\"></slot>\n      <cds-modal-body class=\"${blockClass}__body-layout\">\n        <slot\n          name=\"influencer\"\n          @slotchange=${this.handleInfluencerSlotChange}\n        ></slot>\n        <slot name=\"body\"></slot>\n        <slot name=\"footer\"></slot>\n      </cds-modal-body>\n    </cds-modal>`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTearsheet;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,IAAA,eAAA,MACM,qBAAqB,cAAc,kBAAkB,WAAW,CAAC,CAAC;;;cAKtD;4BAMa;yBAMH;6BAMI;qBAMR;iBAMO;gCAMI;8BAMF;oCAMO;kBAWX,aAAa,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,OAAO,GAAG,EAAE;0BAK3C;cAMZ;uBAQgC;kBACrC;sBAOI,eAAe,YAAY,GAAG,MAAM;uBACnC,IAAI,qBAC1B,MACA,KAAK,cACL,MACD;+BAmV+B,UAAiB;AAC/C,SAAM,iBAAiB;AACvB,QAAK,mBAAmB;;qCAMY,UAAiB;AACrD,SAAM,iBAAiB;AAGvB,OAAI,KAAK,oBAAoB,KAAK,KAChC,MAAK,uBAAuB;;qCAOM,MAAa;GACjD,MAAM,OAAO,EAAE;AACf,QAAK,2BAA2B,KAAK;;uCAsDC,UAAiB;AAEvD,SAAM,iBAAiB;AACvB,QAAK,gBAAgB;;sBAMA,UAAiB;AACtC,QAAK,eAAe,OAAO,KAAK;;;;;;CAralC,IAAY,eAAwB;EAClC,MAAM,gBAAgB,KAAK,cAAc,uBAA6B;AACtE,MAAI,CAAC,cACH,QAAO;AAGT,SAAO,CAAC,CADU,cAAc,cAAc,uBAC5B;;;;;CAMpB,IAAY,aAAsB;EAChC,MAAM,gBAAgB,KAAK,cAAc,uBAA6B;AACtE,MAAI,CAAC,cACH,QAAO;EAET,MAAM,YAAY,cAAc,cAAc,uBAAqB;AACnE,MAAI,CAAC,UACH,QAAO;EAET,MAAM,UAAU,UAAU,QAAQ,aAAa;AAC/C,SAAO,YAAY,kBAAkB,YAAY;;CAGnD,oBAA0B;AACxB,QAAM,mBAAmB;AAGzB,OAAK,iBACH,iCACA,KAAK,qBACN;AACD,OAAK,iBACH,yCACA,KAAK,2BACN;AAID,OAAK,uBAAuB;AAG5B,MAAI,KAAK,KACP,MAAK,UAAU,IAAI,aAAa;MAEhC,MAAK,UAAU,OAAO,aAAa;AAIrC,OAAK,iBACH,6CACA,KAAK,6BACN;;CAGH,aAAuB,oBAA0C;AAC/D,OAAK,2BAA2B;AAChC,OAAK,OAAO,KAAK,eAAe,WAAW,KAAK,YAAY;AAE5D,yBAAuB;GACrB,SAAS,KAAK;GACd,MAAM,KAAK;GACX,MAAM,KAAK;GACX,YAAY,KAAK;GACjB,UAAU,KAAK;GAChB,CAAC;;CAGJ,QAAkB,oBAA0C;AAC1D,OAAK,gBAAgB,mBAAmB;AACxC,OAAK,yBAAyB,mBAAmB;AACjD,OAAK,4BAA4B,mBAAmB;AAEpD,MAAI,mBAAmB,IAAI,UAAU,CACnC,wBAAuB,EAAE,SAAS,KAAK,SAAS,CAAC;AAGnD,MAAI,mBAAmB,IAAI,OAAO,CAChC,MAAK,4BAA4B;AAGnC,OAAK,+BAA+B;;CAGtC,gBAAwB,oBAA0C;EAChE,MAAM,eAAe,KAAK;AAC1B,OAAK,OAAO,KAAK,eAAe,WAAW,KAAK,YAAY;AAE5D,MAAI,KAAK,SAAS,aAChB,wBAAuB,EAAE,MAAM,KAAK,MAAM,CAAC;;CAI/C,yBAAiC,oBAA0C;AACzE,MAAI,CAAC,mBAAmB,IAAI,OAAO,CACjC;EAEF,MAAM,UAAU,KAAK;EACrB,MAAM,SAAS,KAAK;AAEpB,yBAAuB,EAAE,MAAM,KAAK,MAAM,CAAC;AAG3C,MAAI,KAAK,oBAAoB,KAAK,iBAChC,cAAa,YAAY,KAAK,UAAU,KAAK,MAAM,KAAK,iBAAiB;AAG3E,OAAK,UAAU,OAAO,cAAc,KAAK,KAAK;AAG9C,MAAI,KAAK,iBACP,MAAK,uBAAuB;AAI9B,MAAI,CAAC,WAAW,QAAQ;AAOtB,0BAAuB,EAAE,UAAU,KAAK,UAAU,CAAC;AAGnD,+BAA4B;AAC1B,SAAK,gBAAgB,UAAU,MAAqB,KAAK,SAAS;KAClE;;AAGJ,OAAK,WAAW;AAEhB,MAAI,CAAC,KAAK,QAAQ,KAAK,kBAErB,kBAAiB;AACf,OAAI,KAAK,6BAA6B,aAAa;IAEjD,MAAM,mBAAmB,KAAK,kBAAkB,QAC9C,IAAI,WAAW,sBAChB;AAED,QAAI,kBAAkB;KAMpB,MAAM,aAHyB,iBAAiB,QAC9C,IAAI,WAAW,2BAEwB,EAAE,cACzC,IAAI,WAAW,mCAAmC,WAAW,6CAC9D;AAED,SAAI,sBAAsB,YAExB,YAAW,OAAO;SAGlB,MAAK,kBAAkB,OAAO;UAIhC,MAAK,kBAAkB,OAAO;;KAGjC,IAAI;;CAIX,4BACE,oBACM;AAMN,MAJE,mBAAmB,IAAI,kBAAkB,IACzC,mBAAmB,IAAI,sBAAsB,IAC7C,mBAAmB,IAAI,cAAc,CAGrC,MAAK,2BAA2B;;CAIpC,gCAA8C;AAE5C,MAAI,CAAC,KAAK,iBACR;AAIF,MADmB,aAAa,MACjB,MAAM,SAAS,EAC5B,MAAK,uBAAuB;;;;;CAOhC,wBAAsC;EACpC,MAAM,aAAa,aAAa;EAChC,MAAM,QAAQ,aAAa,SAAS,KAAK,SAAS;EAClD,MAAM,cAAc,aAAa,eAAe,KAAK,SAAS;EAC9D,MAAM,kBAAkB,aAAa,mBAAmB,KAAK,SAAS;AAGtE,MAAI,WAAW,MAAM,SAAS,EAC5B,MAAK,UAAU,IAAI,GAAG,WAAW,mBAAmB;MAEpD,MAAK,UAAU,OAAO,GAAG,WAAW,mBAAmB;AAGzD,MAAI,UAAU,IAAI;AAChB,QAAK,MAAM,YAAY,iBAAiB,MAAM,UAAU,CAAC;AACzD,QAAK,MAAM,YAAY,kBAAkB,YAAY,UAAU,CAAC;AAChE,QAAK,MAAM,YAAY,uBAAuB,gBAAgB;;;CAIlE,uBAAuB;AACrB,QAAM,sBAAsB;AAG5B,OAAK,eAAe,SAAS;AAE7B,4BAA0B;AAG1B,OAAK,oBACH,6CACA,KAAK,6BACN;AACD,OAAK,oBACH,iCACA,KAAK,qBACN;AACD,OAAK,oBACH,yCACA,KAAK,2BACN;AAGD,MAAI,KAAK,iBACP,cAAa,YAAY,KAAK,UAAU,OAAO,KAAK;AAItD,MAAI,KAAK,gBACP,UAAS,gBAAgB,MAAM,eAC7B,+BACD;AAEH,MAAI,KAAK,oBACP,UAAS,gBAAgB,MAAM,eAC7B,oCACD;AAEH,MAAI,KAAK,YACP,UAAS,gBAAgB,MAAM,eAAe,2BAA2B;;;;;CAO7E,4BAA0C;AACxC,MAAI,KAAK,gBACP,UAAS,gBAAgB,MAAM,YAC7B,gCACA,KAAK,gBACN;AAEH,MAAI,KAAK,oBACP,UAAS,gBAAgB,MAAM,YAC7B,qCACA,KAAK,oBACN;AAEH,MAAI,KAAK,YACP,UAAS,gBAAgB,MAAM,YAC7B,4BACA,KAAK,YACN;;;;;;CAQL,2BAAmC,MAA8B;EAC/D,MAAM,iBACJ,QACC,KAAK,YAAY,cAChB,4BACD;AAEH,MAAI,CAAC,eACH;EAKF,MAAM,aADJ,eAAe,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC,SAAS,KAC1B,CAAC,KAAK;AAGvC,MAAI,KAAK,iBACP,KAAI,WACF,MAAK,iBAAiB,UAAU,IAC9B,GAAG,WAAW,+BACf;MAED,MAAK,iBAAiB,UAAU,OAC9B,GAAG,WAAW,+BACf;;;;;CAQP,wBAAsC;EAEpC,IAAI,SAAS,KAAK;AAClB,SAAO,QAAQ;AACb,OAAI,OAAO,QAAQ,aAAa,KAAK,uBAA6B;AAChE,SAAK,mBAAmB;AACxB;;AAEF,YAAS,OAAO;;AAElB,OAAK,mBAAmB;;;;;;;CAoC1B,eAAuB,eAAuB,WAAoB,OAAO;EAEvE,MAAM,mBAAmB,IAAI,YAC3B,qCACA;GACE,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ,EAAE;GACX,CACF;AAED,MAAI,CAAC,KAAK,cAAc,iBAAiB,EAAE;AAEzC,OAAI,cACF,eAAc,gBAAgB;AAEhC;;AAIF,OAAK,OAAO;EAGZ,MAAM,4BAA4B;AAChC,QAAK,cACH,IAAI,YAAY,gCAAsC;IACpD,SAAS;IACT,UAAU;IACV,QAAQ,EAAE;IACX,CAAC,CACH;;AAGH,MAAI,SAEF,SAAQ,SAAS,CAAC,KAAK,oBAAoB;MAE3C,sBAAqB;;;;;CAwBzB,2BAA2C;EACzC,MAAM,mBAAmB;GACvB;GACA;GACA;GACA,IAAI,WAAW;GACf;GACD;EAED,MAAM,kBAAkB,KAAK,yBACzB,KAAK,uBAAuB,MAAM,IAAI,CAAC,KAAK,MAAM,EAAE,MAAM,CAAC,GAC3D,EAAE;AAEN,SAAO,CAAC,GAAG,kBAAkB,GAAG,gBAAgB,CAAC,KAAK,IAAI;;CAG5D,SAAS;EACP,MAAM,UAAU,SAAS;IACtB,aAAa;IACb,GAAG,WAAW,UAAU,KAAK,YAAY;IACzC,GAAG,WAAW,YAAY,KAAK,YAAY;IAC3C,GAAG,WAAW,kBAAkB,KAAK;IACrC,GAAG,WAAW,mBAAmB,KAAK,gBAAgB,CAAC,KAAK;GAC9D,CAAC;EAEF,MAAM,mBAAmB,GAAG,WAAW,cAAc,KAAK;EAE1D,MAAM,yBACJ,CAAC,KAAK,aAAa,KAAK,sBAAsB,UAC1C,KAAK,qBAAqB,UAC1B,KAAA;AAEN,SAAO,IAAI;cACD,QAAQ;aACT,KAAK,YAAY,WAAW,OAAO,KAAK;eACtC,KAAK,KAAK;yBACA,iBAAiB;yCACD,KAAK,2BAA2B;oBACrD,UAAU,KAAK,aAAa,KAAA,EAAU,CAAC;yBAClC,UAAU,uBAAuB,CAAC;gCAC3B,UACxB,KAAK,wBAAwB,KAAA,EAC9B,CAAC;kCAC0B,KAAK,0BAA0B,CAAC;gCAClC,KAAK,YAAY;2BACtB,KAAK,YAAY;qBACvB,KAAK;kBACR,UAAU,KAAK,cAAc,KAAA,EAAU,CAAC;;;;+BAI3B,WAAW;;;wBAGlB,KAAK,2BAA2B;;;;;;;;gBAQtCA;;;YAzkBf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,aAAA,WAAA,QAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,WAAW,wBAAwB,CAAC,CAAA,EAAA,aAAA,WAAA,sBAAA,KAAA,EAAA;YAM/C,SAAS,EAAE,WAAW,oBAAoB,CAAC,CAAA,EAAA,aAAA,WAAA,mBAAA,KAAA,EAAA;YAM3C,SAAS,EAAE,WAAW,yBAAyB,CAAC,CAAA,EAAA,aAAA,WAAA,uBAAA,KAAA,EAAA;YAMhD,SAAS,EAAE,WAAW,gBAAgB,CAAC,CAAA,EAAA,aAAA,WAAA,eAAA,KAAA,EAAA;YAMvC,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,aAAA,WAAA,WAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,WAAW,4BAA4B,CAAC,CAAA,EAAA,aAAA,WAAA,0BAAA,KAAA,EAAA;YAMnD,SAAS,EAAE,WAAW,0BAA0B,CAAC,CAAA,EAAA,aAAA,WAAA,wBAAA,KAAA,EAAA;YAMjD,SAAS;CAAE,MAAM;CAAS,WAAW;CAAkC,CAAC,CAAA,EAAA,aAAA,WAAA,8BAAA,KAAA,EAAA;YAMxE,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,aAAA,WAAA,qBAAA,KAAA,EAAA;YAgB9B,OAAO,CAAA,EAAA,aAAA,WAAA,QAAA,KAAA,EAAA;YAMP,MAAM,iBAAiB,CAAA,EAAA,aAAA,WAAA,oBAAA,KAAA,EAAA;YAQvB,MAAM,+BAAqC,CAAA,EAAA,aAAA,WAAA,wBAAA,KAAA,EAAA;2BAzF7CC,cAAc,wBAA8B,CAAA,EAAA,aAAA;AAilB7C,IAAA,oBAAe"}
+{"version":3,"file":"tearsheet.js","names":["styles","customElement"],"sources":["../../../src/components/tearsheet-preview/tearsheet.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, PropertyValues, html } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './tearsheet.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { MatchMediaController } from '../../globals/js/utils/match-media-controller';\nimport { breakpoints } from '@carbon/layout';\nimport { blockClass, updateTearsheetSignals } from './tearsheet-signal';\nimport { SignalWatcher } from '@lit-labs/signals';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { stackManager } from './stack-signal';\nimport {\n  trapFocus,\n  clearFocusableContainers,\n} from '../../utilities/manageFocusTrap/manageFocusTrap';\n\n/**\n * Tearsheet component - A slide-out panel for displaying detailed content.\n *\n * @element c4p-preview-tearsheet\n * @slot header - The header content of the tearsheet\n * @slot influencer - Optional left sidebar content (wide variant only)\n * @slot body - Main body content\n * @slot footer - Footer content with actions\n * @fires c4p-preview-tearsheet-beingclosed - Fired when the tearsheet is about to close\n * @fires c4p-preview-tearsheet-closed - Fired after the tearsheet has closed\n * @fires c4p-preview-tearsheet-collapse-change - Fired when the header collapse state changes.\n *   `event.detail.collapsed` is `true` when collapsing, `false` when expanding.\n */\n@customElement(`${prefix}-preview-tearsheet`)\nclass CDSTearsheet extends SignalWatcher(HostListenerMixin(LitElement)) {\n  /**\n   * Specifies whether the tearsheet is currently open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  /**\n   * User can pass any class names that will be added to the modal container\n   */\n  @property({ attribute: 'container-class-name' })\n  containerClassName: string = '';\n\n  /**\n   * Default influencer takes 256px, this allows override eg: 300px, 20rem\n   */\n  @property({ attribute: 'influencer-width' })\n  influencerWidth: string = '';\n\n  /**\n   * Default summary content takes 256px, this allows override eg: 300px, 20rem\n   */\n  @property({ attribute: 'summary-content-width' })\n  summaryContentWidth: string = '';\n\n  /**\n   * Defines the gap from top of the viewport. Defaulted to 3rem\n   */\n  @property({ attribute: 'vertical-gap' })\n  verticalGap: string = '';\n\n  /**\n   * Default to wide variant. Pass in narrow for narrow tearsheet\n   */\n  @property({ reflect: true })\n  variant: 'wide' | 'narrow' = 'wide';\n\n  /**\n   * Specify the CSS selectors that match the floating menus (comma-separated)\n   */\n  @property({ attribute: 'selectors-floating-menus' })\n  selectorsFloatingMenus: string = '';\n\n  /**\n   * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens\n   */\n  @property({ attribute: 'selector-primary-focus' })\n  selectorPrimaryFocus: string = '';\n\n  /**\n   * Prevents the modal from closing when clicking outside\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside: boolean = false;\n\n  /**\n   * Optional ref to the trigger button that opened the tearsheet. Focus will return here when tearsheet closes.\n   */\n  @property({ attribute: false })\n  launcherButtonRef?: HTMLElement;\n\n  /**\n   * Unique ID for this tearsheet instance\n   */\n  private uniqueId: string = `tearsheet-${Math.random().toString(36).substr(2, 9)}`;\n\n  /**\n   * Internal flag to track if stacking is enabled (via wrapper)\n   */\n  private _stackingEnabled: boolean = false;\n\n  /**\n   * Internal state for tracking if the tearsheet is in small screen mode\n   */\n  @state()\n  private isSm: boolean = false;\n\n  /**\n   * Query the modal body element\n   */\n  @query('cds-modal-body')\n  private modalBodyElement?: HTMLElement;\n\n  private _trapFocusAPI: { cleanup: () => void } | null = null;\n  private _wasOpen = false;\n  /**\n   * Query the header content element to get its titleId\n   */\n  @query(`${prefix}-tearsheet-header-content`)\n  private headerContentElement?: any;\n\n  private smMediaQuery = `(max-width: ${breakpoints.md.width})`;\n  private isSmallDevice = new MatchMediaController(\n    this,\n    this.smMediaQuery,\n    false\n  );\n  /**\n   * Checks if the tearsheet has a decorator (AI label or other)\n   */\n  private get hasDecorator(): boolean {\n    const headerElement = this.querySelector(`${prefix}-tearsheet-header`);\n    if (!headerElement) {\n      return false;\n    }\n    const decorator = headerElement.querySelector('[slot=\"decorator\"]');\n    return !!decorator;\n  }\n\n  /**\n   * Checks if the tearsheet has an AI label decorator\n   */\n  private get hasAILabel(): boolean {\n    const headerElement = this.querySelector(`${prefix}-tearsheet-header`);\n    if (!headerElement) {\n      return false;\n    }\n    const decorator = headerElement.querySelector('[slot=\"decorator\"]');\n    if (!decorator) {\n      return false;\n    }\n    const tagName = decorator.tagName.toLowerCase();\n    return tagName === 'cds-ai-label' || tagName === `${prefix}-ai-label`;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    // Listen for stack wrapper events first\n    this.addEventListener(\n      `${prefix}-tearsheet-stack-connected`,\n      this.handleStackConnected as EventListener\n    );\n    this.addEventListener(\n      `${prefix}-tearsheet-stack-step-size-changed`,\n      this.handleStackStepSizeChanged as EventListener\n    );\n\n    // Check if this tearsheet is wrapped in a stack provider\n    // This handles the case where the stack wrapper connected before this tearsheet\n    this._checkForStackWrapper();\n\n    // Set visibility class\n    if (this.open) {\n      this.classList.add('is-visible');\n    } else {\n      this.classList.remove('is-visible');\n    }\n\n    // Listen for close button click from header\n    this.addEventListener(\n      `${prefix}-tearsheet-header-close-button-clicked`,\n      this.handleHeaderCloseButtonClick as EventListener\n    );\n\n    // Listen for internal collapse-change from header; re-dispatch as public event\n    this.addEventListener(\n      `${prefix}-tearsheet-header-collapse-change`,\n      this.handleHeaderCollapseChange as EventListener\n    );\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    this.updateCSSCustomProperties();\n    this.isSm = this.isSmallDevice?.matches || this.variant === 'narrow';\n    // Initialize all signals on first update, including uniqueId so children can register\n    updateTearsheetSignals({\n      variant: this.variant,\n      isSm: this.isSm,\n      open: this.open,\n      hasAILabel: this.hasAILabel,\n      uniqueId: this.uniqueId,\n      ...this._readHeaderProps(),\n      onClose: () => this.closeTearsheet(),\n    });\n  }\n\n  /** Read close-button props from the slotted c4p-tearsheet-header element */\n  private _readHeaderProps(): {\n    closeIconDescription: string;\n    hideCloseButton: boolean;\n  } {\n    const header = this.querySelector(`${prefix}-tearsheet-header`) as any;\n    return {\n      closeIconDescription:\n        header?.closeIconDescription ??\n        header?.getAttribute('close-icon-description') ??\n        'Close',\n      hideCloseButton:\n        header?.hideCloseButton ??\n        header?.hasAttribute('hide-close-button') ??\n        false,\n    };\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    this.updateIsSmState(_changedProperties);\n    this.handleOpenPropertyChange(_changedProperties);\n    this.updateCSSPropertiesIfNeeded(_changedProperties);\n\n    if (_changedProperties.has('variant')) {\n      updateTearsheetSignals({ variant: this.variant });\n    }\n\n    if (_changedProperties.has('isSm')) {\n      this.updateInfluencerVisibility();\n    }\n\n    this.updateStackPropertiesIfNeeded();\n  }\n\n  private updateIsSmState(_changedProperties: PropertyValues): void {\n    const previousIsSm = this.isSm;\n    this.isSm = this.isSmallDevice?.matches || this.variant === 'narrow';\n\n    if (this.isSm !== previousIsSm) {\n      updateTearsheetSignals({ isSm: this.isSm });\n    }\n  }\n\n  private handleOpenPropertyChange(_changedProperties: PropertyValues): void {\n    if (!_changedProperties.has('open')) {\n      return;\n    }\n    const wasOpen = this._wasOpen;\n    const isOpen = this.open;\n\n    updateTearsheetSignals({ open: this.open });\n\n    // Only register with stack manager if stacking is enabled\n    if (this._stackingEnabled && this.modalBodyElement) {\n      stackManager.notifyStack(this.uniqueId, this.open, this.modalBodyElement);\n    }\n\n    this.classList.toggle('is-visible', this.open);\n\n    // Only update stack properties if stacking is enabled\n    if (this._stackingEnabled) {\n      this.updateStackProperties();\n    }\n\n    // Initialize focus trap when tearsheet opens\n    if (!wasOpen && isOpen) {\n      // `focusableContainers` holds the containers where we can query DOM elements.\n      // Our strategy here is to let child/slotted components register their containers,\n      // which are then passed to `trapFocus`. This allows the utility to query elements\n      // directly without being blocked by shadow DOM boundaries.\n\n      // Update signal with current uniqueId FIRST so children can register\n      updateTearsheetSignals({ uniqueId: this.uniqueId });\n\n      // Use requestAnimationFrame to ensure child components have registered their containers\n      requestAnimationFrame(() => {\n        this._trapFocusAPI = trapFocus(this as HTMLElement, this.uniqueId, () =>\n          this._getFirstFocusable()\n        );\n      });\n    }\n\n    this._wasOpen = isOpen;\n    //  Return focus to launcher button when tearsheet closes\n    if (!this.open && this.launcherButtonRef) {\n      // Use a small delay to ensure the tearsheet has fully closed\n      setTimeout(() => {\n        if (this.launcherButtonRef instanceof HTMLElement) {\n          // Check if the button is inside a TearsheetHeaderActions component\n          const headerActionItem = this.launcherButtonRef.closest(\n            `.${blockClass}__header-action-item`\n          );\n\n          if (headerActionItem) {\n            // This is a button inside TearsheetHeaderActions\n            // Check if it's currently visible or if items are collapsed to menu\n            const headerActionsContainer = headerActionItem.closest(\n              `.${blockClass}__content__header-actions`\n            );\n            const menuButton = headerActionsContainer?.querySelector(\n              `.${blockClass}__header-actions-menuButton:not(.${blockClass}__header-actions-menuButton--hidden) button`\n            );\n\n            if (menuButton instanceof HTMLElement) {\n              // On small screens, action buttons collapse to menu - focus the menu button\n              menuButton.focus();\n            } else {\n              // On large screens, focus the action button directly\n              this.launcherButtonRef.focus();\n            }\n          } else {\n            // Regular button ref (not inside TearsheetHeaderActions): focus directly\n            this.launcherButtonRef.focus();\n          }\n        }\n      }, 100);\n    }\n  }\n\n  private updateCSSPropertiesIfNeeded(\n    _changedProperties: PropertyValues\n  ): void {\n    const hasRelevantChanges =\n      _changedProperties.has('influencerWidth') ||\n      _changedProperties.has('summaryContentWidth') ||\n      _changedProperties.has('verticalGap');\n\n    if (hasRelevantChanges) {\n      this.updateCSSCustomProperties();\n    }\n  }\n\n  private updateStackPropertiesIfNeeded(): void {\n    // Only update if stacking is enabled\n    if (!this._stackingEnabled) {\n      return;\n    }\n\n    const stackState = stackManager.state;\n    if (stackState.stack.length > 0) {\n      this.updateStackProperties();\n    }\n  }\n\n  /**\n   * Update CSS custom properties for stacking\n   */\n  private updateStackProperties(): void {\n    const stackState = stackManager.state;\n    const depth = stackManager.getDepth(this.uniqueId);\n    const scaleFactor = stackManager.getScaleFactor(this.uniqueId);\n    const blockSizeChange = stackManager.getBlockSizeChange(this.uniqueId);\n\n    // Manage --stack-activated class on host element\n    if (stackState.stack.length > 1) {\n      this.classList.add(`${blockClass}--stack-activated`);\n    } else {\n      this.classList.remove(`${blockClass}--stack-activated`);\n    }\n\n    if (depth !== -1) {\n      this.style.setProperty('--stack-depth', depth.toString());\n      this.style.setProperty('--scale-factor', scaleFactor.toString());\n      this.style.setProperty('--block-size-change', blockSizeChange);\n    }\n  }\n\n  /**\n   * Delegates to `c4p-tearsheet-header-content.getFirstFocusable()`.\n   * All priority logic lives in the component that owns the relevant DOM.\n   */\n  private _getFirstFocusable(): HTMLElement | null {\n    const headerContentEl = this.querySelector(\n      `${prefix}-tearsheet-header-content`\n    ) as (HTMLElement & { getFirstFocusable(): HTMLElement | null }) | null;\n\n    return headerContentEl?.getFirstFocusable() ?? null;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // Cleanup focus trap and clear all registered containers\n    this._trapFocusAPI?.cleanup();\n\n    clearFocusableContainers();\n\n    // Remove event listeners\n    this.removeEventListener(\n      `${prefix}-tearsheet-header-close-button-clicked`,\n      this.handleHeaderCloseButtonClick as EventListener\n    );\n    this.removeEventListener(\n      `${prefix}-tearsheet-stack-connected`,\n      this.handleStackConnected as EventListener\n    );\n    this.removeEventListener(\n      `${prefix}-tearsheet-stack-step-size-changed`,\n      this.handleStackStepSizeChanged as EventListener\n    );\n\n    // Notify stack manager that this tearsheet is closing (only if stacking was enabled)\n    if (this._stackingEnabled) {\n      stackManager.notifyStack(this.uniqueId, false, null);\n    }\n\n    // Clean up CSS custom properties\n    if (this.influencerWidth) {\n      document.documentElement.style.removeProperty(\n        '--tearsheet-influencer-width'\n      );\n    }\n    if (this.summaryContentWidth) {\n      document.documentElement.style.removeProperty(\n        '--tearsheet-summary-content-width'\n      );\n    }\n    if (this.verticalGap) {\n      document.documentElement.style.removeProperty('--tearsheet-vertical-gap');\n    }\n  }\n\n  /**\n   * Update CSS custom properties for dynamic styling\n   */\n  private updateCSSCustomProperties(): void {\n    if (this.influencerWidth) {\n      document.documentElement.style.setProperty(\n        '--tearsheet-influencer-width',\n        this.influencerWidth\n      );\n    }\n    if (this.summaryContentWidth) {\n      document.documentElement.style.setProperty(\n        '--tearsheet-summary-content-width',\n        this.summaryContentWidth\n      );\n    }\n    if (this.verticalGap) {\n      document.documentElement.style.setProperty(\n        '--tearsheet-vertical-gap',\n        this.verticalGap\n      );\n    }\n  }\n\n  /**\n   * Update influencer visibility based on slot content and screen size\n   * Handles both slot changes and screen size changes\n   */\n  private updateInfluencerVisibility(slot?: HTMLSlotElement): void {\n    const influencerSlot =\n      slot ||\n      (this.shadowRoot?.querySelector(\n        'slot[name=\"influencer\"]'\n      ) as HTMLSlotElement);\n\n    if (!influencerSlot) {\n      return;\n    }\n\n    const hasContent =\n      influencerSlot.assignedNodes({ flatten: true }).length > 0;\n    const shouldShow = hasContent && !this.isSm;\n\n    // Update CSS class on modal body\n    if (this.modalBodyElement) {\n      if (shouldShow) {\n        this.modalBodyElement.classList.add(\n          `${blockClass}__body-layout--has-influencer`\n        );\n      } else {\n        this.modalBodyElement.classList.remove(\n          `${blockClass}__body-layout--has-influencer`\n        );\n      }\n    }\n  }\n\n  /**\n   * Check if this tearsheet is wrapped in a stack provider\n   */\n  private _checkForStackWrapper(): void {\n    // Check if there's a c4p-tearsheet-stack ancestor\n    let parent = this.parentElement;\n    while (parent) {\n      if (parent.tagName.toLowerCase() === `${prefix}-tearsheet-stack`) {\n        this._stackingEnabled = true;\n        return;\n      }\n      parent = parent.parentElement;\n    }\n    this._stackingEnabled = false;\n  }\n\n  /**\n   * Handle stack wrapper connected event\n   */\n  private handleStackConnected = (event: Event) => {\n    event.stopPropagation();\n    this._stackingEnabled = true;\n  };\n\n  /**\n   * Handle stack step size changed event\n   */\n  private handleStackStepSizeChanged = (event: Event) => {\n    event.stopPropagation();\n    // Stack manager is already updated by the wrapper\n    // Just trigger a re-render of stack properties if needed\n    if (this._stackingEnabled && this.open) {\n      this.updateStackProperties();\n    }\n  };\n\n  /**\n   * Handle influencer slot change\n   */\n  private handleInfluencerSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    this.updateInfluencerVisibility(slot);\n  };\n\n  /**\n   * Common method to handle tearsheet close with proper event dispatching\n   * @param originalEvent - The original event that triggered the close (optional)\n   * @param useAsync - Whether to dispatch closed event asynchronously\n   */\n  private closeTearsheet(originalEvent?: Event, useAsync: boolean = false) {\n    // Dispatch the beingclosed event (cancelable)\n    const beforeCloseEvent = new CustomEvent(\n      `${prefix}-preview-tearsheet-beingclosed`,\n      {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {},\n      }\n    );\n\n    if (!this.dispatchEvent(beforeCloseEvent)) {\n      // If event was cancelled, prevent closing\n      if (originalEvent) {\n        originalEvent.preventDefault();\n      }\n      return;\n    }\n\n    // Close the tearsheet\n    this.open = false;\n\n    // Dispatch closed event\n    const dispatchClosedEvent = () => {\n      this.dispatchEvent(\n        new CustomEvent(`${prefix}-preview-tearsheet-closed`, {\n          bubbles: true,\n          composed: true,\n          detail: {},\n        })\n      );\n    };\n\n    if (useAsync) {\n      // Use microtask for async scenarios (e.g., click outside)\n      Promise.resolve().then(dispatchClosedEvent);\n    } else {\n      dispatchClosedEvent();\n    }\n  }\n\n  /**\n   * Handle close button click from the header\n   * This is an internal event that triggers the tearsheet to close\n   */\n  private handleHeaderCloseButtonClick = (event: Event) => {\n    // Stop the internal event from propagating\n    event.stopPropagation();\n    this.closeTearsheet();\n  };\n\n  /**\n   * Intercepts the internal collapse-change event from the header and\n   * re-dispatches it as the public `c4p-preview-tearsheet-collapse-change` event.\n   */\n  private handleHeaderCollapseChange = (event: Event) => {\n    event.stopPropagation();\n    const { collapsed } = (event as CustomEvent).detail;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSTearsheet).eventCollapseChange,\n        {\n          bubbles: true,\n          composed: true,\n          detail: { collapsed },\n        }\n      )\n    );\n  };\n\n  /**\n   * Handle close event from the modal (ESC key, click outside, etc.)\n   */\n  private handleClose = (event: Event) => {\n    this.closeTearsheet(event, true);\n  };\n\n  /**\n   * Parse floating menu selectors from comma-separated string\n   */\n  private getFloatingMenuSelectors(): string {\n    const defaultSelectors = [\n      `.${prefix}--overflow-menu-options`,\n      `.${prefix}--tooltip`,\n      '.flatpickr-calendar',\n      `.${blockClass}__container`,\n      `.${prefix}--menu`,\n    ];\n\n    const customSelectors = this.selectorsFloatingMenus\n      ? this.selectorsFloatingMenus.split(',').map((s) => s.trim())\n      : [];\n\n    return [...defaultSelectors, ...customSelectors].join(',');\n  }\n\n  render() {\n    const classes = classMap({\n      [blockClass]: true,\n      [`${blockClass}--wide`]: this.variant === 'wide',\n      [`${blockClass}--narrow`]: this.variant === 'narrow',\n      [`${blockClass}--has-ai-label`]: this.hasAILabel,\n      [`${blockClass}--has-decorator`]: this.hasDecorator && !this.hasAILabel,\n    });\n\n    const containerClasses = `${blockClass}__container ${this.containerClassName}`;\n\n    const computedAriaLabelledby =\n      !this.ariaLabel && this.headerContentElement?.titleId\n        ? this.headerContentElement.titleId\n        : undefined;\n\n    return html`<cds-modal\n      class=${classes}\n      size=${this.variant === 'narrow' ? 'sm' : 'lg'}\n      ?open=\"${this.open}\"\n      container-class=\"${containerClasses}\"\n      ?prevent-close-on-click-outside=\"${this.preventCloseOnClickOutside}\"\n      aria-label=\"${ifDefined(this.ariaLabel || undefined)}\"\n      aria-labelledby=\"${ifDefined(computedAriaLabelledby)}\"\n      selector-primary-focus=\"${ifDefined(\n        this.selectorPrimaryFocus || undefined\n      )}\"\n      selectors-floating-menus=\"${this.getFloatingMenuSelectors()}\"\n      @cds-modal-beingclosed=\"${this.handleClose}\"\n      @cds-modal-closed=\"${this.handleClose}\"\n      ?full-width=\"${true}\"\n      ai-label=\"${ifDefined(this.hasAILabel || undefined)}\"\n    >\n      <slot name=\"header\"></slot>\n      <cds-modal-body class=\"${blockClass}__body-layout\">\n        <slot\n          name=\"influencer\"\n          @slotchange=${this.handleInfluencerSlotChange}\n        ></slot>\n        <slot name=\"body\"></slot>\n        <slot name=\"footer\"></slot>\n      </cds-modal-body>\n    </cds-modal>`;\n  }\n\n  static styles = styles;\n\n  /**\n   * Public event fired when the header collapse state changes.\n   * `event.detail.collapsed` is `true` when collapsing, `false` when expanding.\n   */\n  static get eventCollapseChange() {\n    return `${prefix}-preview-tearsheet-collapse-change`;\n  }\n}\n\nexport default CDSTearsheet;\n"],"mappings":"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"}