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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/custom-elements.json +67 -11
  2. package/es/components/about-modal/about-modal.scss.js +1 -1
  3. package/es/components/tearsheet-preview/tearsheet-header-content.d.ts +27 -1
  4. package/es/components/tearsheet-preview/tearsheet-header-content.d.ts.map +1 -1
  5. package/es/components/tearsheet-preview/tearsheet-header-content.js +137 -4
  6. package/es/components/tearsheet-preview/tearsheet-header-content.js.map +1 -1
  7. package/es/components/tearsheet-preview/tearsheet-header-content.scss.js +1 -1
  8. package/es/components/tearsheet-preview/tearsheet-header-content.scss.js.map +1 -1
  9. package/es/components/tearsheet-preview/tearsheet-header.d.ts +12 -16
  10. package/es/components/tearsheet-preview/tearsheet-header.d.ts.map +1 -1
  11. package/es/components/tearsheet-preview/tearsheet-header.js +29 -70
  12. package/es/components/tearsheet-preview/tearsheet-header.js.map +1 -1
  13. package/es/components/tearsheet-preview/tearsheet-header.scss.js +1 -1
  14. package/es/components/tearsheet-preview/tearsheet-header.scss.js.map +1 -1
  15. package/es/components/tearsheet-preview/tearsheet-influencer.js +1 -1
  16. package/es/components/tearsheet-preview/tearsheet-influencer.js.map +1 -1
  17. package/es/components/tearsheet-preview/tearsheet-navigation-bar.scss.js +1 -1
  18. package/es/components/tearsheet-preview/tearsheet-signal.d.ts +6 -0
  19. package/es/components/tearsheet-preview/tearsheet-signal.d.ts.map +1 -1
  20. package/es/components/tearsheet-preview/tearsheet-signal.js +4 -1
  21. package/es/components/tearsheet-preview/tearsheet-signal.js.map +1 -1
  22. package/es/components/tearsheet-preview/tearsheet-summary-content.d.ts.map +1 -1
  23. package/es/components/tearsheet-preview/tearsheet-summary-content.js +4 -1
  24. package/es/components/tearsheet-preview/tearsheet-summary-content.js.map +1 -1
  25. package/es/components/tearsheet-preview/tearsheet.d.ts +19 -0
  26. package/es/components/tearsheet-preview/tearsheet.d.ts.map +1 -1
  27. package/es/components/tearsheet-preview/tearsheet.js +38 -3
  28. package/es/components/tearsheet-preview/tearsheet.js.map +1 -1
  29. package/es/components/tearsheet-preview/tearsheet.scss.js +1 -1
  30. package/es/components/tearsheet-preview/tearsheet.scss.js.map +1 -1
  31. package/es/ibm-products-web-components/package.js +1 -1
  32. package/es/utilities/manageFocusTrap/manageFocusTrap.d.ts +12 -5
  33. package/es/utilities/manageFocusTrap/manageFocusTrap.d.ts.map +1 -1
  34. package/es/utilities/manageFocusTrap/manageFocusTrap.js +23 -10
  35. package/es/utilities/manageFocusTrap/manageFocusTrap.js.map +1 -1
  36. package/es-custom/components/about-modal/about-modal.scss.js +1 -1
  37. package/es-custom/components/tearsheet-preview/tearsheet-header-content.js +137 -4
  38. package/es-custom/components/tearsheet-preview/tearsheet-header-content.js.map +1 -1
  39. package/es-custom/components/tearsheet-preview/tearsheet-header-content.scss.js +1 -1
  40. package/es-custom/components/tearsheet-preview/tearsheet-header-content.scss.js.map +1 -1
  41. package/es-custom/components/tearsheet-preview/tearsheet-header.js +29 -70
  42. package/es-custom/components/tearsheet-preview/tearsheet-header.js.map +1 -1
  43. package/es-custom/components/tearsheet-preview/tearsheet-header.scss.js +1 -1
  44. package/es-custom/components/tearsheet-preview/tearsheet-header.scss.js.map +1 -1
  45. package/es-custom/components/tearsheet-preview/tearsheet-influencer.js +1 -1
  46. package/es-custom/components/tearsheet-preview/tearsheet-influencer.js.map +1 -1
  47. package/es-custom/components/tearsheet-preview/tearsheet-navigation-bar.scss.js +1 -1
  48. package/es-custom/components/tearsheet-preview/tearsheet-signal.js +4 -1
  49. package/es-custom/components/tearsheet-preview/tearsheet-signal.js.map +1 -1
  50. package/es-custom/components/tearsheet-preview/tearsheet-summary-content.js +4 -1
  51. package/es-custom/components/tearsheet-preview/tearsheet-summary-content.js.map +1 -1
  52. package/es-custom/components/tearsheet-preview/tearsheet.js +38 -3
  53. package/es-custom/components/tearsheet-preview/tearsheet.js.map +1 -1
  54. package/es-custom/components/tearsheet-preview/tearsheet.scss.js +1 -1
  55. package/es-custom/components/tearsheet-preview/tearsheet.scss.js.map +1 -1
  56. package/es-custom/ibm-products-web-components/package.js +1 -1
  57. package/es-custom/utilities/manageFocusTrap/manageFocusTrap.js +23 -10
  58. package/es-custom/utilities/manageFocusTrap/manageFocusTrap.js.map +1 -1
  59. package/lib/components/tearsheet-preview/tearsheet-header-content.d.ts +27 -1
  60. package/lib/components/tearsheet-preview/tearsheet-header-content.d.ts.map +1 -1
  61. package/lib/components/tearsheet-preview/tearsheet-header.d.ts +12 -16
  62. package/lib/components/tearsheet-preview/tearsheet-header.d.ts.map +1 -1
  63. package/lib/components/tearsheet-preview/tearsheet-signal.d.ts +6 -0
  64. package/lib/components/tearsheet-preview/tearsheet-signal.d.ts.map +1 -1
  65. package/lib/components/tearsheet-preview/tearsheet-summary-content.d.ts.map +1 -1
  66. package/lib/components/tearsheet-preview/tearsheet.d.ts +19 -0
  67. package/lib/components/tearsheet-preview/tearsheet.d.ts.map +1 -1
  68. package/lib/utilities/manageFocusTrap/manageFocusTrap.d.ts +12 -5
  69. package/lib/utilities/manageFocusTrap/manageFocusTrap.d.ts.map +1 -1
  70. package/package.json +4 -4
  71. package/scss/components/tearsheet-preview/tearsheet-header-content.scss +57 -11
  72. package/scss/components/tearsheet-preview/tearsheet-header.scss +4 -3
  73. package/scss/components/tearsheet-preview/tearsheet.scss +16 -0
  74. package/telemetry.yml +2 -1
package/es/components/tearsheet-preview/tearsheet.scss.js CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  import { css } from "lit";
9
9
  //#region src/components/tearsheet-preview/tearsheet.scss?lit
10
- var tearsheet_default = css(["@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--assistive-text,.cds--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted){animation:c4p--tearsheet__next--presence-tearsheet__enter .24s cubic-bezier(0,0,.3,1);opacity:1}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__enter .24s cubic-bezier(0,0,.3,1);transform:translateZ(0)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next--stacked.is-visible .c4p--tearsheet__next__container{transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting]{animation:c4p--tearsheet__next--presence-tearsheet__exit .24s cubic-bezier(.4,.14,1,1) forwards}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__exit .24s cubic-bezier(0,0,.3,1) forwards}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next--keep-mounted:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}@keyframes c4p--tearsheet__next--presence-tearsheet__enter{0%{opacity:0;transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet__exit{to{opacity:0}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__enter{0%{transform:translate3d(0,min(95vh,500px),0);transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__exit{to{transform:translate3d(0,min(95vh,500px),0)}}.c4p--tearsheet__next .c4p--tearsheet__next__container{align-self:flex-end;block-size:100%;border:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem)));max-inline-size:var(--tearsheet-max-inline-size,1312px)}@media (max-width:41.98rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--stack-activated.is-visible) .c4p--tearsheet__next__container{max-block-size:none}}.c4p--tearsheet__next:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__container{background:linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,#78a9ff),var(--cds-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;border:1px solid transparent;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__main-content{background:linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)),var(--cds-background,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)),var(--cds-background,var(--cds-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1));position:relative}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header>*{flex-basis:100%}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button){margin-block-end:1.5rem}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header{padding-inline:1rem}}.c4p--tearsheet__next .cds--modal-container--sm .cds--modal-header{padding-inline-end:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:grid;flex-basis:unset;gap:1rem;grid-template-columns:minmax(auto,40rem) minmax(var(--tearsheet-header-title-grid-width,0),1fr);inline-size:calc(100% - var(--tearsheet-header-action-offset))}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}}@media (min-width:42rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-actions{order:2}.c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content{order:1}}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse){max-block-size:50vh;opacity:1;overflow:hidden;transition:max-block-size .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1),margin .24s cubic-bezier(0,0,.3,1),padding .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-actions,.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content :not(.c4p--tearsheet__next__content__title-wrapper,.c4p--tearsheet__next__header-label){opacity:1;transition:all .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .cds--modal-close{transition:all .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed{padding-block-start:0;transition:padding .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions>:not(.c4p--tearsheet__next__content__header-actions),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content>:not(.c4p--tearsheet__next__content__title-wrapper) *,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content>:not(.c4p--tearsheet__next__content__title-wrapper),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse) *{margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1);visibility:hidden}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{align-items:center;font-size:var(--cds-label-02-font-size,.875rem);font-weight:var(--cds-label-02-font-weight,400);gap:.5rem;letter-spacing:var(--cds-label-02-letter-spacing,.16px);line-height:var(--cds-label-02-line-height,1.28572);margin-block-start:.25rem;transition:all .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title>span{align-items:center;block-size:1.5rem;display:flex}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end svg,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-start svg{inline-size:1rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content{align-self:center;margin-block-end:0}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .cds--modal-close{block-size:2.5rem;inline-size:2.5rem;transition:all .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__decorator{inset-block-start:.5rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{block-size:2.5rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__header-actions{block-size:1.5rem;margin-block-start:.5rem;transition:all .24s ease}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__title-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{margin-block:0;transition:margin-block .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper{min-block-size:2.5rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__navigation-bar:before{background:var(--cds-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:calc(100% + 5rem);inset-block-start:0;inset-inline-start:-2rem;pointer-events:none;position:absolute;z-index:1}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible{--overlay-color:var(--cds-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5;background-color:initial;z-index:calc(9000 - var(--stack-depth, 0))}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);position:absolute;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1)}@media (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{transition:none}}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible.is-visible .c4p--tearsheet__next__container{max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem + .125rem)) + var(--block-size-change));transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next__header-label{color:var(--cds-text-secondary,#525252);font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333);margin-block-end:.25rem}.c4p--tearsheet__next__header-title{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);letter-spacing:var(--cds-heading-04-letter-spacing,0);line-height:var(--cds-heading-04-line-height,1.28572)}@media (max-width:41.98rem){.c4p--tearsheet__next__header-title{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}}.c4p--tearsheet__next__header-title{align-items:flex-start;display:flex;gap:1rem;margin-block-end:.5rem}.c4p--tearsheet__next__header-title svg{flex-shrink:0}.c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end{margin-inline-start:1rem}.c4p--tearsheet__next__header-description{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--tearsheet__next__header--no-close-icon{display:none}.c4p--tearsheet__next__decorator{inset-block-start:.625rem;inset-inline-end:3rem;position:absolute}.c4p--tearsheet__next__navigation-bar{align-items:center;display:flex;gap:.125rem;justify-content:space-between;max-inline-size:calc(100% - .75rem);min-block-size:2.5rem;position:relative}.c4p--tearsheet__next__navigation-bar .cds--tabs{margin-inline-start:-1rem}.c4p--tearsheet__next__scroller-container{inset-block-end:0;inset-inline-end:-2.5rem;position:absolute}@media (max-width:41.98rem){.c4p--tearsheet__next__scroller-container{inset-inline-end:-1.5rem}}.c4p--tearsheet__next__scroller-container .c4p--tearsheet__next__scroller-button-icon-collapsed{transform:rotate(-180deg)}.c4p--tearsheet__next__header-actions{display:flex;justify-content:flex-end}.c4p--tearsheet__next__content__header-actions{align-items:center;block-size:2rem;display:flex;flex:0 0 auto;inline-size:100%;justify-content:flex-end;margin-block-start:-14px;overflow:hidden}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]){margin-inline-end:.5rem}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]):nth-last-child(2){margin-inline-end:0}.c4p--tearsheet__next__content__header-actions>*{flex-shrink:0}@media (max-width:41.98rem){.c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}}.c4p--tearsheet__next__header-actions,.c4p--tearsheet__next__header-content{margin-block-end:1.5rem}@media (min-width:42rem){.c4p--tearsheet__next--wide .c4p--tearsheet__next__container{inline-size:calc(100% - 8rem)}}.c4p--tearsheet__next__body-layout{display:grid;grid-template-areas:\"influencer body\" \"influencer footer\";grid-template-columns:var(--tearsheet-influencer-width,16rem) 1fr;grid-template-rows:1fr auto;padding-block:0;padding-inline-end:0}.c4p--tearsheet__next__body-layout:not(.c4p--tearsheet__next__body-layout--has-influencer){grid-template-areas:\"body\" \"footer\";grid-template-columns:1fr}.c4p--tearsheet__next__influencer,:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){border-inline-end:1px solid var(--cds-border-subtle-01,#c6c6c6);grid-area:influencer}.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){display:grid;grid-area:body;grid-template-columns:1fr var(--tearsheet-summary-content-width,16rem);overflow:hidden;position:relative}@media (max-width:41.98rem){.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}}.c4p--tearsheet__next__body>:only-child,:host(c4p-preview-tearsheet) ::slotted([slot=body])>:only-child{grid-column:1/-1}.c4p--tearsheet__next__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}"]);
10
+ var tearsheet_default = css(["@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--assistive-text,.cds--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted){animation:c4p--tearsheet__next--presence-tearsheet__enter .24s cubic-bezier(0,0,.3,1);opacity:1}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__enter .24s cubic-bezier(0,0,.3,1);transform:translateZ(0)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next--stacked.is-visible .c4p--tearsheet__next__container{transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting]{animation:c4p--tearsheet__next--presence-tearsheet__exit .24s cubic-bezier(.4,.14,1,1) forwards}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__exit .24s cubic-bezier(0,0,.3,1) forwards}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next--keep-mounted:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}@keyframes c4p--tearsheet__next--presence-tearsheet__enter{0%{opacity:0;transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet__exit{to{opacity:0}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__enter{0%{transform:translate3d(0,min(95vh,500px),0);transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__exit{to{transform:translate3d(0,min(95vh,500px),0)}}.c4p--tearsheet__next .c4p--tearsheet__next__container{align-self:flex-end;block-size:100%;border:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem)));max-inline-size:var(--tearsheet-max-inline-size,1312px)}@media (max-width:41.98rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--stack-activated.is-visible) .c4p--tearsheet__next__container{max-block-size:none}}.c4p--tearsheet__next:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__container{background:linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,#78a9ff),var(--cds-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;border:1px solid transparent;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__main-content{background:linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)),var(--cds-background,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-background,var(--cds-ai-popover-background,#fff)),var(--cds-background,var(--cds-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1));position:relative}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header>*{flex-basis:100%}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button){margin-block-end:1.5rem}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header{padding-inline:1rem}}.c4p--tearsheet__next .cds--modal-container--sm .cds--modal-header{padding-inline-end:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:grid;flex-basis:unset;gap:1rem;grid-template-columns:minmax(auto,40rem) minmax(var(--tearsheet-header-title-grid-width,0),1fr);inline-size:calc(100% - var(--tearsheet-header-action-offset))}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}}@media (min-width:42rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-actions{order:2}.c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content{order:1}}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse){max-block-size:50vh;opacity:1;overflow:hidden;transition:max-block-size .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1),margin .24s cubic-bezier(0,0,.3,1),padding .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-actions,.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content :not(.c4p--tearsheet__next__content__title-wrapper,.c4p--tearsheet__next__header-label){opacity:1;transition:all .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .cds--modal-close{transition:all .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed{padding-block-start:0;transition:padding .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions>:not(.c4p--tearsheet__next__content__header-actions),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content>:not(.c4p--tearsheet__next__content__title-wrapper) *,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content>:not(.c4p--tearsheet__next__content__title-wrapper),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse) *{margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1);visibility:hidden}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{align-items:center;font-size:var(--cds-label-02-font-size,.875rem);font-weight:var(--cds-label-02-font-weight,400);gap:.5rem;letter-spacing:var(--cds-label-02-letter-spacing,.16px);line-height:var(--cds-label-02-line-height,1.28572);margin-block-start:.25rem;transition:all .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title>span{align-items:center;block-size:1.5rem;display:flex}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end svg,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-start svg{inline-size:1rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content{align-self:center;margin-block-end:0}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .cds--modal-close{block-size:2.5rem;inline-size:2.5rem;transition:all .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__decorator{inset-block-start:.5rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{block-size:2.5rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__header-actions{block-size:1.5rem;margin-block-start:.5rem;transition:all .24s ease}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions{display:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__title-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{margin-block:0;transition:margin-block .24s ease}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper{min-block-size:2.5rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__navigation-bar:before{background:var(--cds-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:calc(100% + 5rem);inset-block-start:0;inset-inline-start:-2rem;pointer-events:none;position:absolute;z-index:1}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible{--overlay-color:var(--cds-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5;background-color:initial;z-index:calc(9000 - var(--stack-depth, 0))}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);position:absolute;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1)}@media (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{transition:none}}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible.is-visible .c4p--tearsheet__next__container{max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem + .125rem)) + var(--block-size-change));transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next__header-label{color:var(--cds-text-secondary,#525252);font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333);margin-block-end:.25rem}.c4p--tearsheet__next__header-title{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);letter-spacing:var(--cds-heading-04-letter-spacing,0);line-height:var(--cds-heading-04-line-height,1.28572)}@media (max-width:41.98rem){.c4p--tearsheet__next__header-title{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}}.c4p--tearsheet__next__header-title{align-items:flex-start;display:flex;gap:1rem;margin-block-end:.5rem}.c4p--tearsheet__next__header-title svg{flex-shrink:0}.c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end{margin-inline-start:1rem}.c4p--tearsheet__next__header-description{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--tearsheet__next__header--no-close-icon{display:none}.c4p--tearsheet__next__decorator{inset-block-start:.625rem;inset-inline-end:3rem;position:absolute}.c4p--tearsheet__next__navigation-bar{align-items:center;display:flex;gap:.125rem;justify-content:space-between;max-inline-size:calc(100% - .75rem);min-block-size:2.5rem;position:relative}.c4p--tearsheet__next__navigation-bar .cds--tabs{margin-inline-start:-1rem}.c4p--tearsheet__next__scroller-container{inset-block-end:0;inset-inline-end:-2.5rem;position:absolute}@media (max-width:41.98rem){.c4p--tearsheet__next__scroller-container{inset-inline-end:-1.5rem}}.c4p--tearsheet__next__scroller-container .c4p--tearsheet__next__scroller-button-icon-collapsed{transform:rotate(-180deg)}.c4p--tearsheet__next__header-actions{display:flex;justify-content:flex-end}.c4p--tearsheet__next__content__header-actions{align-items:center;block-size:2rem;display:flex;flex:0 0 auto;inline-size:100%;justify-content:flex-end;margin-block-start:-14px;overflow:hidden}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]){margin-inline-end:.5rem}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]):nth-last-child(2){margin-inline-end:0}.c4p--tearsheet__next__content__header-actions>*{flex-shrink:0}@media (max-width:41.98rem){.c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}}.c4p--tearsheet__next__header-actions,.c4p--tearsheet__next__header-content{margin-block-end:1.5rem}@media (min-width:42rem){.c4p--tearsheet__next--wide .c4p--tearsheet__next__container{inline-size:calc(100% - 8rem)}}.c4p--tearsheet__next__body-layout{display:grid;grid-template-areas:\"influencer body\" \"influencer footer\";grid-template-columns:var(--tearsheet-influencer-width,16rem) 1fr;grid-template-rows:1fr auto;padding-block:0;padding-inline-end:0}.c4p--tearsheet__next__body-layout:not(.c4p--tearsheet__next__body-layout--has-influencer){grid-template-areas:\"body\" \"footer\";grid-template-columns:1fr}.c4p--tearsheet__next__influencer,:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){border-inline-end:1px solid var(--cds-border-subtle-01,#c6c6c6);grid-area:influencer}.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){display:grid;grid-area:body;grid-template-columns:1fr var(--tearsheet-summary-content-width,16rem);overflow:hidden;position:relative}@media (max-width:41.98rem){.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}}.c4p--tearsheet__next__body>:only-child,:host(c4p-preview-tearsheet) ::slotted([slot=body])>:only-child{grid-column:1/-1}.c4p--tearsheet__next__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}"]);
11
11
  //#endregion
12
12
  export { tearsheet_default as default };
13
13
 
package/es/components/tearsheet-preview/tearsheet.scss.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tearsheet.scss.js","names":[],"sources":["../../../src/components/tearsheet-preview/tearsheet.scss?lit"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/utilities';\n@use '@carbon/styles/scss/utilities/ai-gradient' as *;\n@use '@carbon/styles/scss/utilities/focus-outline';\n\n@use '@carbon/ibm-products-styles/scss/components/Tearsheet/_tearsheet_next.scss'\n as *;\n\n$c4p-prefix: 'c4p';\n$carbon-prefix: 'cds';\n\n$block-class__next: #{$c4p-prefix}--tearsheet__next;\n$motion-duration: $duration-moderate-02;\n\n@mixin collapsed-element {\n overflow: hidden;\n padding: 0;\n margin: 0;\n max-block-size: 0;\n opacity: 0;\n pointer-events: none;\n transition: all $motion-duration motion(entrance, expressive);\n}\n.#{$block-class__next}--has-ai-label::part(dialog) {\n border: 1px solid transparent !important; /* stylelint-disable-line declaration-no-important */\n\n /* override carbon ai removing background gradient */\n background:\n linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,\n linear-gradient(\n to bottom,\n var(--cds-ai-border-start, #78a9ff),\n var(--cds-ai-border-end, #d0e2ff)\n )\n border-box,\n linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;\n border-block-end: 0;\n box-shadow: 0 4px 10px 2px $ai-drop-shadow;\n}\n\n.#{$block-class__next}__main-content {\n position: relative;\n\n &.#{$block-class__next}__flush {\n padding-inline: 0;\n }\n\n &.#{$block-class__next}__main-content--no-summary {\n grid-column: 1 / -1;\n }\n\n &.#{$block-class__next}__main-content--has-ai-label {\n @include ai-popover-gradient('default', 0, 'background');\n\n box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;\n }\n}\n\n:host ::slotted([slot='summary-content']) {\n @extend .#{$block-class__next}__summary-content;\n}\n\n:host ::slotted([slot='summary-content']:focus) {\n @include focus-outline.focus-outline('outline');\n}\n\n:host ::slotted([slot='summary-content'][is-flush]) {\n padding-inline: 0;\n}\n:host(#{$c4p-prefix}-preview-tearsheet) {\n @media screen and (prefers-reduced-motion: reduce) {\n ::part(dialog) {\n align-self: flex-end;\n border: 1px solid $border-subtle-01;\n block-size: 100%;\n inset-block-start: auto;\n max-block-size: calc(\n 100% - var(\n --tearsheet-vertical-gap,\n calc(#{$spacing-11} + #{$spacing-03} + #{$spacing-01})\n )\n );\n transform: translate3d(0, min(95vh, 500px), 0);\n transition: none;\n }\n }\n\n ::part(dialog) {\n align-self: flex-end;\n border: 1px solid $border-subtle-01;\n block-size: 100%;\n inset-block-start: auto;\n max-block-size: calc(\n 100% - var(\n --tearsheet-vertical-gap,\n calc(#{$spacing-11} + #{$spacing-03} + #{$spacing-01})\n )\n );\n transform: translate3d(0, min(95vh, 500px), 0);\n transition:\n transform $motion-duration motion(entrance, expressive),\n max-block-size $motion-duration motion(entrance, expressive);\n }\n\n ::slotted([slot='influencer']) {\n @extend .#{$block-class__next}__influencer;\n }\n\n ::slotted([slot='influencer'][is-flush]) {\n padding-inline: 0;\n }\n\n ::slotted([slot='body']) {\n @extend .#{$block-class__next}__body;\n }\n\n ::slotted([slot='footer']) {\n @extend .#{$block-class__next}__footer;\n }\n}\n:host(#{$c4p-prefix}-preview-tearsheet[open]) {\n ::part(dialog) {\n transform: translate3d(0, 0, 0);\n transition: transform $duration-moderate-02 motion(entrance, expressive);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n}\n\n// This will set full screen height for tearsheets in mobile devices\n:host(:not(.#{$block-class__next}--stack-activated.is-visible)) {\n ::part(dialog) {\n @include breakpoint-down(md) {\n max-block-size: none;\n }\n }\n}\n\n// Stacking styles\n:host(\n #{$c4p-prefix}-preview-tearsheet.#{$block-class__next}--stack-activated.is-visible\n) {\n --overlay-color: #{$overlay};\n --overlay-alpha: 0.5;\n\n &::before {\n position: fixed;\n z-index: calc(#{utilities.z('modal')} - var(--stack-depth, 0));\n display: block;\n background: var(--overlay-color);\n content: '';\n inset: 0;\n opacity: calc(var(--overlay-alpha) - var(--stack-depth) * 0.1);\n pointer-events: none;\n\n transition:\n background-color $motion-duration motion(exit, expressive),\n opacity $motion-duration motion(exit, expressive);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n #{$carbon-prefix}-modal {\n background-color: transparent;\n }\n\n ::part(dialog) {\n max-block-size: calc(\n 100% - var(\n --tearsheet-vertical-gap,\n calc(#{$spacing-11} + #{$spacing-03} + #{$spacing-01})\n ) +\n var(--block-size-change)\n );\n transform: scaleX(var(--scale-factor));\n }\n}\n\n// Narrow variant styles\n:host(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n .#{$block-class__next}__header {\n padding-inline: $spacing-05;\n }\n\n .#{$block-class__next}__header.#{$block-class__next}__header-collapsed {\n .#{$block-class__next}__header-actions {\n display: none;\n }\n }\n\n .#{$block-class__next}__header-content-wrapper {\n display: flex;\n flex-direction: column;\n }\n\n .#{$block-class__next}__header-title {\n @include type.type-style('heading-03');\n }\n\n .#{$block-class__next}__content__header-actions {\n justify-content: flex-start;\n margin-inline-end: 0;\n }\n\n .#{$block-class__next}__body {\n grid-template-columns: 1fr 0;\n }\n\n ::slotted([slot='influencer']),\n ::slotted([slot='summary-content']) {\n padding: 0 !important; /* stylelint-disable-line declaration-no-important */\n }\n}\n\n// Small screen styles\n@include breakpoint-down(md) {\n :host(#{$c4p-prefix}-preview-tearsheet) {\n ::slotted([slot='influencer']),\n ::slotted([slot='summary-content']) {\n padding: 0 !important; /* stylelint-disable-line declaration-no-important */\n }\n }\n}\n\n.#{$block-class__next}__header-label {\n @extend .#{$block-class__next}__header-label;\n}\n.#{$block-class__next}__header-title {\n @extend .#{$block-class__next}__header-title;\n}\n\n.#{$block-class__next}__header-description {\n @extend .#{$block-class__next}__header-description;\n}\n\n:host {\n #{$c4p-prefix}-side-panel::part(dialog) {\n @extend .#{$block-class__next}__side-panel; // Extend the side panel styles}\n }\n}\n\n:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n ::slotted([slot='summary-content']) {\n padding: 0;\n }\n}\n\n:host ::slotted([slot='footer']) {\n padding-block: 0;\n}\n"],"mappings":""}
1
+ {"version":3,"file":"tearsheet.scss.js","names":[],"sources":["../../../src/components/tearsheet-preview/tearsheet.scss?lit"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/utilities';\n@use '@carbon/styles/scss/utilities/ai-gradient' as *;\n@use '@carbon/styles/scss/utilities/focus-outline';\n\n@use '@carbon/ibm-products-styles/scss/components/Tearsheet/_tearsheet_next.scss'\n as *;\n\n$c4p-prefix: 'c4p';\n$carbon-prefix: 'cds';\n\n$block-class__next: #{$c4p-prefix}--tearsheet__next;\n$motion-duration: $duration-moderate-02;\n\n@mixin collapsed-element {\n overflow: hidden;\n padding: 0;\n margin: 0;\n max-block-size: 0;\n opacity: 0;\n pointer-events: none;\n transition: all $motion-duration motion(entrance, expressive);\n}\n.#{$block-class__next}--has-ai-label::part(dialog) {\n border: 1px solid transparent !important; /* stylelint-disable-line declaration-no-important */\n\n /* override carbon ai removing background gradient */\n background:\n linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,\n linear-gradient(\n to bottom,\n var(--cds-ai-border-start, #78a9ff),\n var(--cds-ai-border-end, #d0e2ff)\n )\n border-box,\n linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;\n border-block-end: 0;\n box-shadow: 0 4px 10px 2px $ai-drop-shadow;\n}\n\n.#{$block-class__next}__main-content {\n position: relative;\n\n &.#{$block-class__next}__flush {\n padding-inline: 0;\n }\n\n &.#{$block-class__next}__main-content--no-summary {\n grid-column: 1 / -1;\n }\n\n &.#{$block-class__next}__main-content--has-ai-label {\n @include ai-popover-gradient('default', 0, 'background');\n\n box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;\n }\n}\n\n:host ::slotted([slot='summary-content']) {\n @extend .#{$block-class__next}__summary-content;\n}\n\n:host ::slotted([slot='summary-content']:focus) {\n @include focus-outline.focus-outline('outline');\n}\n\n:host ::slotted([slot='summary-content'][is-flush]) {\n padding-inline: 0;\n}\n:host(#{$c4p-prefix}-preview-tearsheet) {\n @media screen and (prefers-reduced-motion: reduce) {\n ::part(dialog) {\n align-self: flex-end;\n border: 1px solid $border-subtle-01;\n block-size: 100%;\n inset-block-start: auto;\n max-block-size: calc(\n 100% - var(\n --tearsheet-vertical-gap,\n calc(#{$spacing-11} + #{$spacing-03} + #{$spacing-01})\n )\n );\n transform: translate3d(0, min(95vh, 500px), 0);\n transition: none;\n }\n }\n\n ::part(dialog) {\n align-self: flex-end;\n border: 1px solid $border-subtle-01;\n block-size: 100%;\n inset-block-start: auto;\n max-block-size: calc(\n 100% - var(\n --tearsheet-vertical-gap,\n calc(#{$spacing-11} + #{$spacing-03} + #{$spacing-01})\n )\n );\n transform: translate3d(0, min(95vh, 500px), 0);\n transition:\n transform $motion-duration motion(entrance, expressive),\n max-block-size $motion-duration motion(entrance, expressive);\n }\n\n ::slotted([slot='influencer']) {\n @extend .#{$block-class__next}__influencer;\n }\n\n ::slotted([slot='influencer'][is-flush]) {\n padding-inline: 0;\n }\n\n ::slotted([slot='body']) {\n @extend .#{$block-class__next}__body;\n }\n\n ::slotted([slot='footer']) {\n @extend .#{$block-class__next}__footer;\n }\n}\n:host(#{$c4p-prefix}-preview-tearsheet[open]) {\n ::part(dialog) {\n transform: translate3d(0, 0, 0);\n transition: transform $duration-moderate-02 motion(entrance, expressive);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n}\n\n// This will set full screen height for tearsheets in mobile devices\n:host(:not(.#{$block-class__next}--stack-activated.is-visible)) {\n ::part(dialog) {\n @include breakpoint-down(md) {\n max-block-size: none;\n }\n }\n}\n\n// Stacking styles\n:host(\n #{$c4p-prefix}-preview-tearsheet.#{$block-class__next}--stack-activated.is-visible\n) {\n --overlay-color: #{$overlay};\n --overlay-alpha: 0.5;\n\n &::before {\n position: fixed;\n z-index: calc(#{utilities.z('modal')} - var(--stack-depth, 0));\n display: block;\n background: var(--overlay-color);\n content: '';\n inset: 0;\n opacity: calc(var(--overlay-alpha) - var(--stack-depth) * 0.1);\n pointer-events: none;\n\n transition:\n background-color $motion-duration motion(exit, expressive),\n opacity $motion-duration motion(exit, expressive);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n #{$carbon-prefix}-modal {\n background-color: transparent;\n }\n\n ::part(dialog) {\n max-block-size: calc(\n 100% - var(\n --tearsheet-vertical-gap,\n calc(#{$spacing-11} + #{$spacing-03} + #{$spacing-01})\n ) +\n var(--block-size-change)\n );\n transform: scaleX(var(--scale-factor));\n }\n}\n\n// ──────────────────────────────────────────────────────────────\n// Narrow variant styles\n// ──────────────────────────────────────────────────────────────\n// ── Narrow container sizing ───────────────────────────────────\n// Carbon's dialog defaults to full-width on small screens and ~480 px on\n// larger ones, but its breakpoint (~672 px) is too wide for a narrow\n// tearsheet. Pin it to exactly 480 px; below 480 px fill the viewport.\n:host(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n ::part(dialog) {\n inline-size: 480px;\n max-inline-size: 480px;\n\n @media (width <= 480px) {\n inline-size: 100%;\n max-inline-size: 100%;\n }\n }\n\n .#{$block-class__next}__header {\n padding-inline: $spacing-05;\n }\n\n .#{$block-class__next}__header.#{$block-class__next}__header-collapsed {\n .#{$block-class__next}__header-actions {\n display: none;\n }\n }\n\n .#{$block-class__next}__header-content-wrapper {\n display: flex;\n flex-direction: column;\n }\n\n .#{$block-class__next}__header-title {\n @include type.type-style('heading-03');\n }\n\n .#{$block-class__next}__content__header-actions {\n justify-content: flex-start;\n margin-inline-end: 0;\n }\n\n .#{$block-class__next}__body {\n grid-template-columns: 1fr 0;\n }\n\n ::slotted([slot='influencer']),\n ::slotted([slot='summary-content']) {\n padding: 0 !important; /* stylelint-disable-line declaration-no-important */\n }\n}\n\n// Small screen styles\n@include breakpoint-down(md) {\n :host(#{$c4p-prefix}-preview-tearsheet) {\n ::slotted([slot='influencer']),\n ::slotted([slot='summary-content']) {\n padding: 0 !important; /* stylelint-disable-line declaration-no-important */\n }\n }\n}\n\n.#{$block-class__next}__header-label {\n @extend .#{$block-class__next}__header-label;\n}\n.#{$block-class__next}__header-title {\n @extend .#{$block-class__next}__header-title;\n}\n\n.#{$block-class__next}__header-description {\n @extend .#{$block-class__next}__header-description;\n}\n\n:host {\n #{$c4p-prefix}-side-panel::part(dialog) {\n @extend .#{$block-class__next}__side-panel; // Extend the side panel styles}\n }\n}\n\n:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n ::slotted([slot='summary-content']) {\n padding: 0;\n }\n}\n\n:host ::slotted([slot='footer']) {\n padding-block: 0;\n}\n"],"mappings":""}
package/es/ibm-products-web-components/package.js CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  //#region package.json
9
- var version = "0.44.0-rc.0";
9
+ var version = "0.45.0-rc.0";
10
10
  //#endregion
11
11
  export { version };
12
12
 
package/es/utilities/manageFocusTrap/manageFocusTrap.d.ts CHANGED
@@ -93,16 +93,18 @@ export declare const clearFocusableContainers: (uniqueId?: string) => void;
93
93
  *
94
94
  * @param wrapper - Optional wrapper element to attach the keydown listener to.
95
95
  * If not provided, defaults to document for backward compatibility.
96
- * Using a specific wrapper can improve performance and scope the listener.
97
96
  * @param uniqueId - Optional unique identifier to scope the focus trap to specific containers.
98
97
  * If provided, only containers registered with this uniqueId are included.
99
- * If not provided, uses the default key for backward compatibility.
98
+ * @param getFirstFocusable - Optional resolver called lazily on each keydown (and for initial
99
+ * focus) to determine the first element. Using a function rather than
100
+ * a value avoids a stale reference if header-action buttons are added
101
+ * or removed while the tearsheet is open.
102
+ * Falls back to the first element across registered containers.
100
103
  *
101
104
  * @returns An object with a `cleanup` method that removes event listeners.
102
- * Call this method when the component is closing or unmounting.
103
105
  *
104
106
  * @example
105
- * // In a parent component when opening
107
+ * * // In a parent component when opening
106
108
  * protected updated(changedProps) {
107
109
  * if (changedProps.has('open') && this.open) {
108
110
  * // Update signal so children can register
@@ -125,8 +127,13 @@ export declare const clearFocusableContainers: (uniqueId?: string) => void;
125
127
  * this._trapFocusAPI?.cleanup();
126
128
  * clearFocusableContainers(this.uniqueId);
127
129
  * }
130
+ * this._trapFocusAPI = trapFocus(
131
+ * this as HTMLElement,
132
+ * this.uniqueId,
133
+ * () => this._getFirstFocusable()
134
+ * );
128
135
  */
129
- export declare const trapFocus: (wrapper?: HTMLElement, uniqueId?: string) => {
136
+ export declare const trapFocus: (wrapper?: HTMLElement, uniqueId?: string, getFirstFocusable?: (() => HTMLElement | null) | null) => {
130
137
  cleanup: () => void;
131
138
  };
132
139
  //# sourceMappingURL=manageFocusTrap.d.ts.map
package/es/utilities/manageFocusTrap/manageFocusTrap.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"manageFocusTrap.d.ts","sourceRoot":"","sources":["../../../src/utilities/manageFocusTrap/manageFocusTrap.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAkBH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,2BAA2B,GACtC,WAAW,WAAW,GAAG,UAAU,GAAG,IAAI,EAC1C,WAAW,MAAM,SAiBlB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,6BAA6B,GACxC,WAAW,WAAW,GAAG,UAAU,GAAG,IAAI,EAC1C,WAAW,MAAM,SAalB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,wBAAwB,GAAI,WAAW,MAAM,SAMzD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,SAAS,GAAI,UAAU,WAAW,EAAE,WAAW,MAAM;;CA8JjE,CAAC"}
1
+ {"version":3,"file":"manageFocusTrap.d.ts","sourceRoot":"","sources":["../../../src/utilities/manageFocusTrap/manageFocusTrap.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAkBH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,2BAA2B,GACtC,WAAW,WAAW,GAAG,UAAU,GAAG,IAAI,EAC1C,WAAW,MAAM,SAiBlB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,6BAA6B,GACxC,WAAW,WAAW,GAAG,UAAU,GAAG,IAAI,EAC1C,WAAW,MAAM,SAalB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,wBAAwB,GAAI,WAAW,MAAM,SAMzD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,SAAS,GACpB,UAAU,WAAW,EACrB,WAAW,MAAM,EACjB,oBAAoB,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI;;CA4KtD,CAAC"}
package/es/utilities/manageFocusTrap/manageFocusTrap.js CHANGED
@@ -126,16 +126,18 @@ const clearFocusableContainers = (uniqueId) => {
126
126
  *
127
127
  * @param wrapper - Optional wrapper element to attach the keydown listener to.
128
128
  * If not provided, defaults to document for backward compatibility.
129
- * Using a specific wrapper can improve performance and scope the listener.
130
129
  * @param uniqueId - Optional unique identifier to scope the focus trap to specific containers.
131
130
  * If provided, only containers registered with this uniqueId are included.
132
- * If not provided, uses the default key for backward compatibility.
131
+ * @param getFirstFocusable - Optional resolver called lazily on each keydown (and for initial
132
+ * focus) to determine the first element. Using a function rather than
133
+ * a value avoids a stale reference if header-action buttons are added
134
+ * or removed while the tearsheet is open.
135
+ * Falls back to the first element across registered containers.
133
136
  *
134
137
  * @returns An object with a `cleanup` method that removes event listeners.
135
- * Call this method when the component is closing or unmounting.
136
138
  *
137
139
  * @example
138
- * // In a parent component when opening
140
+ * * // In a parent component when opening
139
141
  * protected updated(changedProps) {
140
142
  * if (changedProps.has('open') && this.open) {
141
143
  * // Update signal so children can register
@@ -158,8 +160,13 @@ const clearFocusableContainers = (uniqueId) => {
158
160
  * this._trapFocusAPI?.cleanup();
159
161
  * clearFocusableContainers(this.uniqueId);
160
162
  * }
163
+ * this._trapFocusAPI = trapFocus(
164
+ * this as HTMLElement,
165
+ * this.uniqueId,
166
+ * () => this._getFirstFocusable()
167
+ * );
161
168
  */
162
- const trapFocus = (wrapper, uniqueId) => {
169
+ const trapFocus = (wrapper, uniqueId, getFirstFocusable) => {
163
170
  const selectorTabbable$1 = selectorTabbable.replace(`${prefix}-button`, `${prefix}-button:not([disabled]), ${prefix}-selectable-tag`);
164
171
  const containerArray = containers[uniqueId || DEFAULT_KEY];
165
172
  if (!containerArray || containerArray.length === 0) return { cleanup: () => {} };
@@ -174,7 +181,13 @@ const trapFocus = (wrapper, uniqueId) => {
174
181
  */
175
182
  const getFocusTarget = (el) => {
176
183
  if (!el) return null;
177
- if (el.tagName === "BUTTON" || el.tabIndex >= 0) return el;
184
+ if (el.tagName === "BUTTON" || el.tabIndex >= 0) {
185
+ if (el.shadowRoot) {
186
+ const shadowBtn = el.shadowRoot.querySelector("button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])");
187
+ if (shadowBtn) return shadowBtn;
188
+ }
189
+ return el;
190
+ }
178
191
  return el.querySelector("button, [tabindex]:not([tabindex=\"-1\"])") || el;
179
192
  };
180
193
  /**
@@ -210,7 +223,7 @@ const trapFocus = (wrapper, uniqueId) => {
210
223
  return activeElement;
211
224
  };
212
225
  requestAnimationFrame(() => {
213
- getFocusTarget(getAllFocusableElements(containerArray)[0])?.focus({ preventScroll: true });
226
+ getFocusTarget(getFirstFocusable?.() ?? getAllFocusableElements(containerArray)[0])?.focus({ preventScroll: true });
214
227
  });
215
228
  /**
216
229
  * Handles Tab and Shift+Tab key presses to trap focus within containers.
@@ -222,15 +235,15 @@ const trapFocus = (wrapper, uniqueId) => {
222
235
  function onKeyDown(e) {
223
236
  if (e.key !== "Tab") return;
224
237
  const elements = getAllFocusableElements(containerArray);
225
- const first = elements[0];
238
+ const first = getFirstFocusable?.() ?? elements[0];
226
239
  const last = elements[elements.length - 1];
227
240
  const active = getRealActiveElement();
228
241
  if (e.shiftKey) {
229
- if (active === first || first.contains(active)) {
242
+ if (active === first || first?.contains(active)) {
230
243
  e.preventDefault();
231
244
  getFocusTarget(last)?.focus();
232
245
  }
233
- } else if (active === last || last.contains(active)) {
246
+ } else if (active === last || last?.contains(active)) {
234
247
  e.preventDefault();
235
248
  getFocusTarget(first)?.focus();
236
249
  }
package/es/utilities/manageFocusTrap/manageFocusTrap.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"manageFocusTrap.js","names":["selectorTabbable","selectorTabbableCarbon","carbonPrefix"],"sources":["../../../src/utilities/manageFocusTrap/manageFocusTrap.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025\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 {\n selectorTabbable as selectorTabbableCarbon,\n prefix as carbonPrefix,\n} from '@carbon/web-components/es/globals/settings';\n\n/**\n * Simple object to store containers by uniqueId\n * { id: [container1, container2, ...] }\n */\nconst containers: Record<string, Array<HTMLElement | ShadowRoot>> = {};\n\n/**\n * Default key for backward compatibility when no uniqueId is provided\n */\nconst DEFAULT_KEY = '__default__';\n\n/**\n * Registers a focusable container to be included in the focus trap.\n *\n * This function allows child components to register their shadow roots or DOM elements\n * so that the focus trap utility can query focusable elements within them. This is necessary\n * because shadow DOM boundaries prevent direct querying from parent components.\n *\n * @param container - The HTMLElement or ShadowRoot to register as a focusable container.\n * If null, the function returns early without registering.\n * @param uniqueId - Optional unique identifier to scope containers to a specific component instance.\n * If not provided, uses a default key for backward compatibility.\n *\n * @example\n * // In a child component's firstUpdated lifecycle\n * protected firstUpdated() {\n * const uniqueId = tearsheetSignal.get().uniqueId;\n * registerFocusableContainers(this.shadowRoot, uniqueId);\n * }\n *\n * @example\n * // Without uniqueId (uses default key)\n * registerFocusableContainers(this.shadowRoot);\n */\nexport const registerFocusableContainers = (\n container: HTMLElement | ShadowRoot | null,\n uniqueId?: string\n) => {\n if (!container) {\n return;\n }\n\n const id = uniqueId || DEFAULT_KEY;\n\n // Initialize array if it doesn't exist\n if (!containers[id]) {\n containers[id] = [];\n }\n\n // Add container if not already present\n if (!containers[id].includes(container)) {\n containers[id].push(container);\n }\n};\n\n/**\n * UnRegisters a previously registered focusable container.\n *\n * This function should be called in the component's disconnectedCallback lifecycle method\n * to clean up and prevent memory leaks when the component is removed from the DOM.\n *\n * @param container - The HTMLElement or ShadowRoot to unregister.\n * If null, the function returns early without doing anything.\n * @param uniqueId - Optional unique identifier that was used when registering the container.\n * If not provided, uses the default key.\n *\n * @example\n * // In a child component's disconnectedCallback\n * disconnectedCallback() {\n * super.disconnectedCallback();\n * const uniqueId = tearsheetSignal.get().uniqueId;\n * unregisterFocusableContainers(this.shadowRoot, uniqueId);\n * }\n *\n * @example\n * // Without uniqueId (uses default key)\n * disconnectedCallback() {\n * super.disconnectedCallback();\n * unregisterFocusableContainers(this.shadowRoot);\n * }\n */\nexport const unregisterFocusableContainers = (\n container: HTMLElement | ShadowRoot | null,\n uniqueId?: string\n) => {\n if (!container) {\n return;\n }\n\n const id = uniqueId || DEFAULT_KEY;\n if (containers[id]) {\n containers[id] = containers[id].filter((c) => c !== container);\n if (containers[id].length === 0) {\n delete containers[id];\n }\n }\n};\n\n/**\n * Clears all registered focusable containers, either globally or for a specific uniqueId.\n *\n * This function is typically called when a parent component (like a tearsheet or modal) is closing\n * or being removed from the DOM. It ensures all registered containers are cleaned up to prevent\n * memory leaks.\n *\n * @param uniqueId - Optional unique identifier to clear containers for a specific component instance.\n * If provided, only containers registered with this uniqueId are cleared.\n * If not provided, ALL containers across all uniqueIds are cleared.\n *\n * @example\n * // Clear containers for a specific tearsheet instance\n * clearFocusableContainers(this.uniqueId);\n *\n * @example\n * // Clear all containers (typically in disconnectedCallback)\n * disconnectedCallback() {\n * super.disconnectedCallback();\n * this._trapFocusAPI?.cleanup();\n * clearFocusableContainers();\n * }\n */\nexport const clearFocusableContainers = (uniqueId?: string) => {\n if (uniqueId) {\n delete containers[uniqueId];\n } else {\n Object.keys(containers).forEach((key) => delete containers[key]);\n }\n};\n\n/**\n * Traps keyboard focus within registered focusable containers.\n *\n * This function creates a focus trap that prevents Tab/Shift+Tab navigation from leaving\n * the registered containers. When the user reaches the last focusable element and presses Tab,\n * focus wraps to the first element, and vice versa with Shift+Tab.\n *\n * The function works with Shadow DOM by querying focusable elements from all registered\n * containers, which can include shadow roots from child components.\n *\n * @param wrapper - Optional wrapper element to attach the keydown listener to.\n * If not provided, defaults to document for backward compatibility.\n * Using a specific wrapper can improve performance and scope the listener.\n * @param uniqueId - Optional unique identifier to scope the focus trap to specific containers.\n * If provided, only containers registered with this uniqueId are included.\n * If not provided, uses the default key for backward compatibility.\n *\n * @returns An object with a `cleanup` method that removes event listeners.\n * Call this method when the component is closing or unmounting.\n *\n * @example\n * // In a parent component when opening\n * protected updated(changedProps) {\n * if (changedProps.has('open') && this.open) {\n * // Update signal so children can register\n * updateTearsheetSignals({ uniqueId: this.uniqueId });\n *\n * // Wait for children to register, then trap focus\n * requestAnimationFrame(() => {\n * this._trapFocusAPI = trapFocus(this as HTMLElement, this.uniqueId);\n * });\n * }\n * }\n *\n * @example\n * // Without uniqueId (uses default key)\n * this._trapFocusAPI = trapFocus();\n *\n * @example\n * // Cleanup when closing\n * disconnectedCallback() {\n * this._trapFocusAPI?.cleanup();\n * clearFocusableContainers(this.uniqueId);\n * }\n */\nexport const trapFocus = (wrapper?: HTMLElement, uniqueId?: string) => {\n const selectorTabbable = selectorTabbableCarbon.replace(\n `${carbonPrefix}-button`,\n `${carbonPrefix}-button:not([disabled]), ${carbonPrefix}-selectable-tag`\n );\n\n // Get containers for this uniqueId (or default key for backward compatibility)\n const id = uniqueId || DEFAULT_KEY;\n\n const containerArray = containers[id];\n\n if (!containerArray || containerArray.length === 0) {\n return { cleanup: () => {} };\n }\n\n // Use wrapper if provided, otherwise default to document for backward compatibility\n const eventTarget = wrapper || document;\n\n /**\n * Determines the best focusable element within a given container.\n *\n * @param el - The element to check for ability to focus\n * @returns The focusable element, or null if none found\n *\n * @internal\n */\n const getFocusTarget = (el) => {\n if (!el) {\n return null;\n }\n if (el.tagName === 'BUTTON' || el.tabIndex >= 0) {\n return el;\n }\n const inner = el.querySelector('button, [tabindex]:not([tabindex=\"-1\"])');\n return inner || el;\n };\n\n /**\n * Returns the actual focused element, resolving through Shadow DOM and slot boundaries.\n *\n * In standard DOM, `document.activeElement` returns the focused element. However, with\n * Shadow DOM and slots, this can be misleading:\n * - If focus is inside a shadow root, `document.activeElement` returns the host element,\n * not the actual focused element inside the shadow root.\n * - If focus is on a `<slot>` element, we need to resolve to the assigned element.\n *\n * This function traverses shadow roots to find the true focused element, stopping at\n * tabbable elements like buttons to avoid going too deep into component internals.\n *\n * @returns The actual focused element in the document\n *\n * @internal\n */\n const getRealActiveElement = () => {\n let activeElement = document.activeElement;\n\n // Traverse through nested shadow DOMs, but stop at tabbable elements\n // This ensures we stop at cds-button level, not go deeper into its shadow root\n while (\n activeElement &&\n activeElement.shadowRoot &&\n activeElement.shadowRoot.activeElement\n ) {\n const nextElement = activeElement.shadowRoot.activeElement;\n\n // Check if current element is a tabbable element (like cds-button)\n // If so, stop here instead of going deeper\n const tagName = activeElement.tagName.toLowerCase();\n if (\n selectorTabbable.indexOf(tagName) !== -1 ||\n tagName.includes('-button') ||\n activeElement.hasAttribute('tabindex')\n ) {\n break;\n }\n\n activeElement = nextElement;\n }\n\n // If active element is a slot, resolve to the assigned element\n if (activeElement?.tagName === 'SLOT') {\n let assigned: Element[] | undefined;\n\n if (activeElement instanceof HTMLSlotElement) {\n assigned = activeElement.assignedElements({ flatten: true });\n }\n const candidate = assigned?.find((node) =>\n node.matches('button, [tabindex]:not([tabindex=\"-1\"])')\n );\n if (candidate) {\n activeElement = candidate;\n }\n }\n\n return activeElement;\n };\n\n //Optionally focus first element immediately\n requestAnimationFrame(() => {\n const elements = getAllFocusableElements(containerArray);\n getFocusTarget(elements[0])?.focus({ preventScroll: true });\n });\n\n /**\n * Handles Tab and Shift+Tab key presses to trap focus within containers.\n *\n * @param e - The keyboard event\n *\n * @internal\n */\n function onKeyDown(e) {\n if (e.key !== 'Tab') {\n return;\n }\n\n // Flatten all focusable elements from all containers\n const elements = getAllFocusableElements(containerArray);\n\n const first = elements[0];\n const last = elements[elements.length - 1];\n const active = getRealActiveElement();\n\n if (e.shiftKey) {\n // Shift+Tab wrap\n if (active === first || first.contains(active)) {\n e.preventDefault();\n getFocusTarget(last)?.focus();\n }\n } else {\n // Tab wrap\n if (active === last || last.contains(active)) {\n e.preventDefault();\n getFocusTarget(first)?.focus();\n }\n }\n }\n\n /**\n * Retrieves all focusable elements from all registered containers.\n *\n * @param containers - Array of containers to query for focusable elements\n * @returns Array of all focusable elements found\n *\n * @internal\n */\n const getAllFocusableElements = (containers) =>\n containers\n .flatMap((container) => [...container.querySelectorAll(selectorTabbable)])\n .filter(Boolean);\n\n eventTarget.addEventListener('keydown', onKeyDown, true);\n\n return {\n cleanup: () => {\n eventTarget.removeEventListener('keydown', onKeyDown, true);\n // Don't clear containers here - let components unregister themselves\n },\n };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,aAA8D,EAAE;;;;AAKtE,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;AAyBpB,MAAa,+BACX,WACA,aACG;AACH,KAAI,CAAC,UACH;CAGF,MAAM,KAAK,YAAY;AAGvB,KAAI,CAAC,WAAW,IACd,YAAW,MAAM,EAAE;AAIrB,KAAI,CAAC,WAAW,IAAI,SAAS,UAAU,CACrC,YAAW,IAAI,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BlC,MAAa,iCACX,WACA,aACG;AACH,KAAI,CAAC,UACH;CAGF,MAAM,KAAK,YAAY;AACvB,KAAI,WAAW,KAAK;AAClB,aAAW,MAAM,WAAW,IAAI,QAAQ,MAAM,MAAM,UAAU;AAC9D,MAAI,WAAW,IAAI,WAAW,EAC5B,QAAO,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BxB,MAAa,4BAA4B,aAAsB;AAC7D,KAAI,SACF,QAAO,WAAW;KAElB,QAAO,KAAK,WAAW,CAAC,SAAS,QAAQ,OAAO,WAAW,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDpE,MAAa,aAAa,SAAuB,aAAsB;CACrE,MAAMA,qBAAmBC,iBAAuB,QAC9C,GAAGC,OAAa,UAChB,GAAGA,OAAa,2BAA2BA,OAAa,iBACzD;CAKD,MAAM,iBAAiB,WAFZ,YAAY;AAIvB,KAAI,CAAC,kBAAkB,eAAe,WAAW,EAC/C,QAAO,EAAE,eAAe,IAAI;CAI9B,MAAM,cAAc,WAAW;;;;;;;;;CAU/B,MAAM,kBAAkB,OAAO;AAC7B,MAAI,CAAC,GACH,QAAO;AAET,MAAI,GAAG,YAAY,YAAY,GAAG,YAAY,EAC5C,QAAO;AAGT,SADc,GAAG,cAAc,4CACnB,IAAI;;;;;;;;;;;;;;;;;;CAmBlB,MAAM,6BAA6B;EACjC,IAAI,gBAAgB,SAAS;AAI7B,SACE,iBACA,cAAc,cACd,cAAc,WAAW,eACzB;GACA,MAAM,cAAc,cAAc,WAAW;GAI7C,MAAM,UAAU,cAAc,QAAQ,aAAa;AACnD,OACEF,mBAAiB,QAAQ,QAAQ,KAAK,MACtC,QAAQ,SAAS,UAAU,IAC3B,cAAc,aAAa,WAAW,CAEtC;AAGF,mBAAgB;;AAIlB,MAAI,eAAe,YAAY,QAAQ;GACrC,IAAI;AAEJ,OAAI,yBAAyB,gBAC3B,YAAW,cAAc,iBAAiB,EAAE,SAAS,MAAM,CAAC;GAE9D,MAAM,YAAY,UAAU,MAAM,SAChC,KAAK,QAAQ,4CAA0C,CACxD;AACD,OAAI,UACF,iBAAgB;;AAIpB,SAAO;;AAIT,6BAA4B;AAE1B,iBADiB,wBAAwB,eAClB,CAAC,GAAG,EAAE,MAAM,EAAE,eAAe,MAAM,CAAC;GAC3D;;;;;;;;CASF,SAAS,UAAU,GAAG;AACpB,MAAI,EAAE,QAAQ,MACZ;EAIF,MAAM,WAAW,wBAAwB,eAAe;EAExD,MAAM,QAAQ,SAAS;EACvB,MAAM,OAAO,SAAS,SAAS,SAAS;EACxC,MAAM,SAAS,sBAAsB;AAErC,MAAI,EAAE;OAEA,WAAW,SAAS,MAAM,SAAS,OAAO,EAAE;AAC9C,MAAE,gBAAgB;AAClB,mBAAe,KAAK,EAAE,OAAO;;aAI3B,WAAW,QAAQ,KAAK,SAAS,OAAO,EAAE;AAC5C,KAAE,gBAAgB;AAClB,kBAAe,MAAM,EAAE,OAAO;;;;;;;;;;;CAapC,MAAM,2BAA2B,eAC/B,WACG,SAAS,cAAc,CAAC,GAAG,UAAU,iBAAiBA,mBAAiB,CAAC,CAAC,CACzE,OAAO,QAAQ;AAEpB,aAAY,iBAAiB,WAAW,WAAW,KAAK;AAExD,QAAO,EACL,eAAe;AACb,cAAY,oBAAoB,WAAW,WAAW,KAAK;IAG9D"}
1
+ {"version":3,"file":"manageFocusTrap.js","names":["selectorTabbable","selectorTabbableCarbon","carbonPrefix"],"sources":["../../../src/utilities/manageFocusTrap/manageFocusTrap.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025\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 {\n selectorTabbable as selectorTabbableCarbon,\n prefix as carbonPrefix,\n} from '@carbon/web-components/es/globals/settings';\n\n/**\n * Simple object to store containers by uniqueId\n * { id: [container1, container2, ...] }\n */\nconst containers: Record<string, Array<HTMLElement | ShadowRoot>> = {};\n\n/**\n * Default key for backward compatibility when no uniqueId is provided\n */\nconst DEFAULT_KEY = '__default__';\n\n/**\n * Registers a focusable container to be included in the focus trap.\n *\n * This function allows child components to register their shadow roots or DOM elements\n * so that the focus trap utility can query focusable elements within them. This is necessary\n * because shadow DOM boundaries prevent direct querying from parent components.\n *\n * @param container - The HTMLElement or ShadowRoot to register as a focusable container.\n * If null, the function returns early without registering.\n * @param uniqueId - Optional unique identifier to scope containers to a specific component instance.\n * If not provided, uses a default key for backward compatibility.\n *\n * @example\n * // In a child component's firstUpdated lifecycle\n * protected firstUpdated() {\n * const uniqueId = tearsheetSignal.get().uniqueId;\n * registerFocusableContainers(this.shadowRoot, uniqueId);\n * }\n *\n * @example\n * // Without uniqueId (uses default key)\n * registerFocusableContainers(this.shadowRoot);\n */\nexport const registerFocusableContainers = (\n container: HTMLElement | ShadowRoot | null,\n uniqueId?: string\n) => {\n if (!container) {\n return;\n }\n\n const id = uniqueId || DEFAULT_KEY;\n\n // Initialize array if it doesn't exist\n if (!containers[id]) {\n containers[id] = [];\n }\n\n // Add container if not already present\n if (!containers[id].includes(container)) {\n containers[id].push(container);\n }\n};\n\n/**\n * UnRegisters a previously registered focusable container.\n *\n * This function should be called in the component's disconnectedCallback lifecycle method\n * to clean up and prevent memory leaks when the component is removed from the DOM.\n *\n * @param container - The HTMLElement or ShadowRoot to unregister.\n * If null, the function returns early without doing anything.\n * @param uniqueId - Optional unique identifier that was used when registering the container.\n * If not provided, uses the default key.\n *\n * @example\n * // In a child component's disconnectedCallback\n * disconnectedCallback() {\n * super.disconnectedCallback();\n * const uniqueId = tearsheetSignal.get().uniqueId;\n * unregisterFocusableContainers(this.shadowRoot, uniqueId);\n * }\n *\n * @example\n * // Without uniqueId (uses default key)\n * disconnectedCallback() {\n * super.disconnectedCallback();\n * unregisterFocusableContainers(this.shadowRoot);\n * }\n */\nexport const unregisterFocusableContainers = (\n container: HTMLElement | ShadowRoot | null,\n uniqueId?: string\n) => {\n if (!container) {\n return;\n }\n\n const id = uniqueId || DEFAULT_KEY;\n if (containers[id]) {\n containers[id] = containers[id].filter((c) => c !== container);\n if (containers[id].length === 0) {\n delete containers[id];\n }\n }\n};\n\n/**\n * Clears all registered focusable containers, either globally or for a specific uniqueId.\n *\n * This function is typically called when a parent component (like a tearsheet or modal) is closing\n * or being removed from the DOM. It ensures all registered containers are cleaned up to prevent\n * memory leaks.\n *\n * @param uniqueId - Optional unique identifier to clear containers for a specific component instance.\n * If provided, only containers registered with this uniqueId are cleared.\n * If not provided, ALL containers across all uniqueIds are cleared.\n *\n * @example\n * // Clear containers for a specific tearsheet instance\n * clearFocusableContainers(this.uniqueId);\n *\n * @example\n * // Clear all containers (typically in disconnectedCallback)\n * disconnectedCallback() {\n * super.disconnectedCallback();\n * this._trapFocusAPI?.cleanup();\n * clearFocusableContainers();\n * }\n */\nexport const clearFocusableContainers = (uniqueId?: string) => {\n if (uniqueId) {\n delete containers[uniqueId];\n } else {\n Object.keys(containers).forEach((key) => delete containers[key]);\n }\n};\n\n/**\n * Traps keyboard focus within registered focusable containers.\n *\n * This function creates a focus trap that prevents Tab/Shift+Tab navigation from leaving\n * the registered containers. When the user reaches the last focusable element and presses Tab,\n * focus wraps to the first element, and vice versa with Shift+Tab.\n *\n * The function works with Shadow DOM by querying focusable elements from all registered\n * containers, which can include shadow roots from child components.\n *\n * @param wrapper - Optional wrapper element to attach the keydown listener to.\n * If not provided, defaults to document for backward compatibility.\n * @param uniqueId - Optional unique identifier to scope the focus trap to specific containers.\n * If provided, only containers registered with this uniqueId are included.\n * @param getFirstFocusable - Optional resolver called lazily on each keydown (and for initial\n * focus) to determine the first element. Using a function rather than\n * a value avoids a stale reference if header-action buttons are added\n * or removed while the tearsheet is open.\n * Falls back to the first element across registered containers.\n *\n * @returns An object with a `cleanup` method that removes event listeners.\n *\n * @example\n * * // In a parent component when opening\n * protected updated(changedProps) {\n * if (changedProps.has('open') && this.open) {\n * // Update signal so children can register\n * updateTearsheetSignals({ uniqueId: this.uniqueId });\n *\n * // Wait for children to register, then trap focus\n * requestAnimationFrame(() => {\n * this._trapFocusAPI = trapFocus(this as HTMLElement, this.uniqueId);\n * });\n * }\n * }\n *\n * @example\n * // Without uniqueId (uses default key)\n * this._trapFocusAPI = trapFocus();\n *\n * @example\n * // Cleanup when closing\n * disconnectedCallback() {\n * this._trapFocusAPI?.cleanup();\n * clearFocusableContainers(this.uniqueId);\n * }\n * this._trapFocusAPI = trapFocus(\n * this as HTMLElement,\n * this.uniqueId,\n * () => this._getFirstFocusable()\n * );\n */\nexport const trapFocus = (\n wrapper?: HTMLElement,\n uniqueId?: string,\n getFirstFocusable?: (() => HTMLElement | null) | null\n) => {\n const selectorTabbable = selectorTabbableCarbon.replace(\n `${carbonPrefix}-button`,\n `${carbonPrefix}-button:not([disabled]), ${carbonPrefix}-selectable-tag`\n );\n\n // Get containers for this uniqueId (or default key for backward compatibility)\n const id = uniqueId || DEFAULT_KEY;\n\n const containerArray = containers[id];\n\n if (!containerArray || containerArray.length === 0) {\n return { cleanup: () => {} };\n }\n\n // Use wrapper if provided, otherwise default to document for backward compatibility\n const eventTarget = wrapper || document;\n\n /**\n * Determines the best focusable element within a given container.\n *\n * @param el - The element to check for ability to focus\n * @returns The focusable element, or null if none found\n *\n * @internal\n */\n const getFocusTarget = (el) => {\n if (!el) {\n return null;\n }\n if (el.tagName === 'BUTTON' || el.tabIndex >= 0) {\n // Custom elements (e.g. cds-ai-label, cds-icon-button) are tabbable but their\n // actual focusable control is a <button> inside their shadow root. Without\n // `delegatesFocus` on the shadow root, calling .focus() on the host does nothing.\n // Drill into the shadow root to find the real focusable target.\n if (el.shadowRoot) {\n const shadowBtn = el.shadowRoot.querySelector(\n 'button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n ) as HTMLElement | null;\n if (shadowBtn) {\n return shadowBtn;\n }\n }\n return el;\n }\n const inner = el.querySelector('button, [tabindex]:not([tabindex=\"-1\"])');\n return inner || el;\n };\n\n /**\n * Returns the actual focused element, resolving through Shadow DOM and slot boundaries.\n *\n * In standard DOM, `document.activeElement` returns the focused element. However, with\n * Shadow DOM and slots, this can be misleading:\n * - If focus is inside a shadow root, `document.activeElement` returns the host element,\n * not the actual focused element inside the shadow root.\n * - If focus is on a `<slot>` element, we need to resolve to the assigned element.\n *\n * This function traverses shadow roots to find the true focused element, stopping at\n * tabbable elements like buttons to avoid going too deep into component internals.\n *\n * @returns The actual focused element in the document\n *\n * @internal\n */\n const getRealActiveElement = () => {\n let activeElement = document.activeElement;\n\n // Traverse through nested shadow DOMs, but stop at tabbable elements\n // This ensures we stop at cds-button level, not go deeper into its shadow root\n while (\n activeElement &&\n activeElement.shadowRoot &&\n activeElement.shadowRoot.activeElement\n ) {\n const nextElement = activeElement.shadowRoot.activeElement;\n\n // Check if current element is a tabbable element (like cds-button)\n // If so, stop here instead of going deeper\n const tagName = activeElement.tagName.toLowerCase();\n if (\n selectorTabbable.indexOf(tagName) !== -1 ||\n tagName.includes('-button') ||\n activeElement.hasAttribute('tabindex')\n ) {\n break;\n }\n\n activeElement = nextElement;\n }\n\n // If active element is a slot, resolve to the assigned element\n if (activeElement?.tagName === 'SLOT') {\n let assigned: Element[] | undefined;\n\n if (activeElement instanceof HTMLSlotElement) {\n assigned = activeElement.assignedElements({ flatten: true });\n }\n const candidate = assigned?.find((node) =>\n node.matches('button, [tabindex]:not([tabindex=\"-1\"])')\n );\n if (candidate) {\n activeElement = candidate;\n }\n }\n\n return activeElement;\n };\n\n // Resolve and focus the first element immediately on open.\n requestAnimationFrame(() => {\n const target =\n getFirstFocusable?.() ?? getAllFocusableElements(containerArray)[0];\n getFocusTarget(target)?.focus({ preventScroll: true });\n });\n\n /**\n * Handles Tab and Shift+Tab key presses to trap focus within containers.\n *\n * @param e - The keyboard event\n *\n * @internal\n */\n function onKeyDown(e) {\n if (e.key !== 'Tab') {\n return;\n }\n\n const elements = getAllFocusableElements(containerArray);\n // Resolve first lazily on every keydown — always reflects current DOM state,\n // no stale reference if header-actions content changes while tearsheet is open.\n const first = getFirstFocusable?.() ?? elements[0];\n const last = elements[elements.length - 1];\n const active = getRealActiveElement();\n\n if (e.shiftKey) {\n // Shift+Tab: wrap from first → last\n if (active === first || first?.contains(active)) {\n e.preventDefault();\n getFocusTarget(last)?.focus();\n }\n } else {\n // Tab: wrap from last → first\n if (active === last || last?.contains(active)) {\n e.preventDefault();\n getFocusTarget(first)?.focus();\n }\n }\n }\n\n /**\n * Retrieves all focusable elements from all registered containers.\n *\n * @param containers - Array of containers to query for focusable elements\n * @returns Array of all focusable elements found\n *\n * @internal\n */\n const getAllFocusableElements = (containers) =>\n containers\n .flatMap((container) => [...container.querySelectorAll(selectorTabbable)])\n .filter(Boolean);\n\n eventTarget.addEventListener('keydown', onKeyDown, true);\n\n return {\n cleanup: () => {\n eventTarget.removeEventListener('keydown', onKeyDown, true);\n // Don't clear containers here - let components unregister themselves\n },\n };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,aAA8D,EAAE;;;;AAKtE,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;AAyBpB,MAAa,+BACX,WACA,aACG;AACH,KAAI,CAAC,UACH;CAGF,MAAM,KAAK,YAAY;AAGvB,KAAI,CAAC,WAAW,IACd,YAAW,MAAM,EAAE;AAIrB,KAAI,CAAC,WAAW,IAAI,SAAS,UAAU,CACrC,YAAW,IAAI,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BlC,MAAa,iCACX,WACA,aACG;AACH,KAAI,CAAC,UACH;CAGF,MAAM,KAAK,YAAY;AACvB,KAAI,WAAW,KAAK;AAClB,aAAW,MAAM,WAAW,IAAI,QAAQ,MAAM,MAAM,UAAU;AAC9D,MAAI,WAAW,IAAI,WAAW,EAC5B,QAAO,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BxB,MAAa,4BAA4B,aAAsB;AAC7D,KAAI,SACF,QAAO,WAAW;KAElB,QAAO,KAAK,WAAW,CAAC,SAAS,QAAQ,OAAO,WAAW,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDpE,MAAa,aACX,SACA,UACA,sBACG;CACH,MAAMA,qBAAmBC,iBAAuB,QAC9C,GAAGC,OAAa,UAChB,GAAGA,OAAa,2BAA2BA,OAAa,iBACzD;CAKD,MAAM,iBAAiB,WAFZ,YAAY;AAIvB,KAAI,CAAC,kBAAkB,eAAe,WAAW,EAC/C,QAAO,EAAE,eAAe,IAAI;CAI9B,MAAM,cAAc,WAAW;;;;;;;;;CAU/B,MAAM,kBAAkB,OAAO;AAC7B,MAAI,CAAC,GACH,QAAO;AAET,MAAI,GAAG,YAAY,YAAY,GAAG,YAAY,GAAG;AAK/C,OAAI,GAAG,YAAY;IACjB,MAAM,YAAY,GAAG,WAAW,cAC9B,4DACD;AACD,QAAI,UACF,QAAO;;AAGX,UAAO;;AAGT,SADc,GAAG,cAAc,4CACnB,IAAI;;;;;;;;;;;;;;;;;;CAmBlB,MAAM,6BAA6B;EACjC,IAAI,gBAAgB,SAAS;AAI7B,SACE,iBACA,cAAc,cACd,cAAc,WAAW,eACzB;GACA,MAAM,cAAc,cAAc,WAAW;GAI7C,MAAM,UAAU,cAAc,QAAQ,aAAa;AACnD,OACEF,mBAAiB,QAAQ,QAAQ,KAAK,MACtC,QAAQ,SAAS,UAAU,IAC3B,cAAc,aAAa,WAAW,CAEtC;AAGF,mBAAgB;;AAIlB,MAAI,eAAe,YAAY,QAAQ;GACrC,IAAI;AAEJ,OAAI,yBAAyB,gBAC3B,YAAW,cAAc,iBAAiB,EAAE,SAAS,MAAM,CAAC;GAE9D,MAAM,YAAY,UAAU,MAAM,SAChC,KAAK,QAAQ,4CAA0C,CACxD;AACD,OAAI,UACF,iBAAgB;;AAIpB,SAAO;;AAIT,6BAA4B;AAG1B,iBADE,qBAAqB,IAAI,wBAAwB,eAAe,CAAC,GAC7C,EAAE,MAAM,EAAE,eAAe,MAAM,CAAC;GACtD;;;;;;;;CASF,SAAS,UAAU,GAAG;AACpB,MAAI,EAAE,QAAQ,MACZ;EAGF,MAAM,WAAW,wBAAwB,eAAe;EAGxD,MAAM,QAAQ,qBAAqB,IAAI,SAAS;EAChD,MAAM,OAAO,SAAS,SAAS,SAAS;EACxC,MAAM,SAAS,sBAAsB;AAErC,MAAI,EAAE;OAEA,WAAW,SAAS,OAAO,SAAS,OAAO,EAAE;AAC/C,MAAE,gBAAgB;AAClB,mBAAe,KAAK,EAAE,OAAO;;aAI3B,WAAW,QAAQ,MAAM,SAAS,OAAO,EAAE;AAC7C,KAAE,gBAAgB;AAClB,kBAAe,MAAM,EAAE,OAAO;;;;;;;;;;;CAapC,MAAM,2BAA2B,eAC/B,WACG,SAAS,cAAc,CAAC,GAAG,UAAU,iBAAiBA,mBAAiB,CAAC,CAAC,CACzE,OAAO,QAAQ;AAEpB,aAAY,iBAAiB,WAAW,WAAW,KAAK;AAExD,QAAO,EACL,eAAe;AACb,cAAY,oBAAoB,WAAW,WAAW,KAAK;IAG9D"}