@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-custom/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-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds-custom--layout--size-xs{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xs,1.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-sm,2rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-md,2.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-lg,3rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xl,4rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-2xl,5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-normal,1rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-normal,1rem)}:root{--cds-custom-layout-size-height-xs:1.5rem;--cds-custom-layout-size-height-sm:2rem;--cds-custom-layout-size-height-md:2.5rem;--cds-custom-layout-size-height-lg:3rem;--cds-custom-layout-size-height-xl:4rem;--cds-custom-layout-size-height-2xl:5rem;--cds-custom-layout-size-height-min:0px;--cds-custom-layout-size-height-max:999999999px;--cds-custom-layout-density-padding-inline-condensed:0.5rem;--cds-custom-layout-density-padding-inline-normal:1rem;--cds-custom-layout-density-padding-inline-min:0px;--cds-custom-layout-density-padding-inline-max:999999999px}.cds-custom--assistive-text,.cds-custom--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted){animation:c4p--tearsheet__next--presence-tearsheet__enter .24s cubic-bezier(0,0,.3,1);opacity:1}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__enter .24s cubic-bezier(0,0,.3,1);transform:translateZ(0)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next--stacked.is-visible .c4p--tearsheet__next__container{transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting]{animation:c4p--tearsheet__next--presence-tearsheet__exit .24s cubic-bezier(.4,.14,1,1) forwards}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__exit .24s cubic-bezier(0,0,.3,1) forwards}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next--keep-mounted:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}@keyframes c4p--tearsheet__next--presence-tearsheet__enter{0%{opacity:0;transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet__exit{to{opacity:0}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__enter{0%{transform:translate3d(0,min(95vh,500px),0);transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__exit{to{transform:translate3d(0,min(95vh,500px),0)}}.c4p--tearsheet__next .c4p--tearsheet__next__container{align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 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-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__main-content{background:linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1));position:relative}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header>*{flex-basis:100%}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.c4p--tearsheet__next__close-button){margin-block-end:1.5rem}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header{padding-inline:1rem}}.c4p--tearsheet__next .cds-custom--modal-container--sm .cds-custom--modal-header{padding-inline-end:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:grid;flex-basis:unset;gap:1rem;grid-template-columns:minmax(auto,40rem) minmax(var(--tearsheet-header-title-grid-width,0),1fr);inline-size:calc(100% - var(--tearsheet-header-action-offset))}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}}@media (min-width:42rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-actions{order:2}.c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content{order:1}}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse){max-block-size:50vh;opacity:1;overflow:hidden;transition:max-block-size .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1),margin .24s cubic-bezier(0,0,.3,1),padding .24s cubic-bezier(0,0,.3,1)}.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-custom--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-custom--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse) *{margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1);visibility:hidden}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{align-items:center;font-size:var(--cds-custom-label-02-font-size,.875rem);font-weight:var(--cds-custom-label-02-font-weight,400);gap:.5rem;letter-spacing:var(--cds-custom-label-02-letter-spacing,.16px);line-height:var(--cds-custom-label-02-line-height,1.28572);margin-block-start:.25rem;transition:all .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title>span{align-items:center;block-size:1.5rem;display:flex}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end svg,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-start svg{inline-size:1rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content{align-self:center;margin-block-end:0}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .cds-custom--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-custom-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:calc(100% + 5rem);inset-block-start:0;inset-inline-start:-2rem;pointer-events:none;position:absolute;z-index:1}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible{--overlay-color:var(--cds-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5;background-color:initial;z-index:calc(9000 - var(--stack-depth, 0))}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);position:absolute;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1)}@media (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{transition:none}}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible.is-visible .c4p--tearsheet__next__container{max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem + .125rem)) + var(--block-size-change));transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next__header-label{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);margin-block-end:.25rem}.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}@media (max-width:41.98rem){.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}}.c4p--tearsheet__next__header-title{align-items:flex-start;display:flex;gap:1rem;margin-block-end:.5rem}.c4p--tearsheet__next__header-title svg{flex-shrink:0}.c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end{margin-inline-start:1rem}.c4p--tearsheet__next__header-description{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--tearsheet__next__header--no-close-icon{display:none}.c4p--tearsheet__next__decorator{inset-block-start:.625rem;inset-inline-end:3rem;position:absolute}.c4p--tearsheet__next__navigation-bar{align-items:center;display:flex;gap:.125rem;justify-content:space-between;max-inline-size:calc(100% - .75rem);min-block-size:2.5rem;position:relative}.c4p--tearsheet__next__navigation-bar .cds-custom--tabs{margin-inline-start:-1rem}.c4p--tearsheet__next__scroller-container{inset-block-end:0;inset-inline-end:-2.5rem;position:absolute}@media (max-width:41.98rem){.c4p--tearsheet__next__scroller-container{inset-inline-end:-1.5rem}}.c4p--tearsheet__next__scroller-container .c4p--tearsheet__next__scroller-button-icon-collapsed{transform:rotate(-180deg)}.c4p--tearsheet__next__header-actions{display:flex;justify-content:flex-end}.c4p--tearsheet__next__content__header-actions{align-items:center;block-size:2rem;display:flex;flex:0 0 auto;inline-size:100%;justify-content:flex-end;margin-block-start:-14px;overflow:hidden}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]){margin-inline-end:.5rem}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]):nth-last-child(2){margin-inline-end:0}.c4p--tearsheet__next__content__header-actions>*{flex-shrink:0}@media (max-width:41.98rem){.c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}}.c4p--tearsheet__next__header-actions,.c4p--tearsheet__next__header-content{margin-block-end:1.5rem}@media (min-width:42rem){.c4p--tearsheet__next--wide .c4p--tearsheet__next__container{inline-size:calc(100% - 8rem)}}.c4p--tearsheet__next__body-layout{display:grid;grid-template-areas:\"influencer body\" \"influencer footer\";grid-template-columns:var(--tearsheet-influencer-width,16rem) 1fr;grid-template-rows:1fr auto;padding-block:0;padding-inline-end:0}.c4p--tearsheet__next__body-layout:not(.c4p--tearsheet__next__body-layout--has-influencer){grid-template-areas:\"body\" \"footer\";grid-template-columns:1fr}.c4p--tearsheet__next__influencer,:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){border-inline-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);grid-area:influencer}.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){display:grid;grid-area:body;grid-template-columns:1fr var(--tearsheet-summary-content-width,16rem);overflow:hidden;position:relative}@media (max-width:41.98rem){.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}}.c4p--tearsheet__next__body>:only-child,:host(c4p-preview-tearsheet) ::slotted([slot=body])>:only-child{grid-column:1/-1}.c4p--tearsheet__next__body .cds-custom--tab-content,:host(c4p-preview-tearsheet) ::slotted([slot=body]) .cds-custom--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-custom-border-subtle-01,#c6c6c6);grid-area:footer;overflow:hidden}@media (max-width:41.98rem){.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:4rem}}@media (max-width:19.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}@media (max-width:41.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}.c4p--tearsheet__next__influencer,.c4p--tearsheet__next__main-content,.c4p--tearsheet__next__summary-content,:host ::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){overflow:auto}.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:2rem}@media (max-width:41.98rem){.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}}.c4p--tearsheet__next__influencer:focus,.c4p--tearsheet__next__main-content:focus,.c4p--tearsheet__next__summary-content:focus,:host :focus::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :focus::slotted([slot=influencer]){outline:2px solid var(--cds-custom-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.c4p--tearsheet__next__influencer:focus,.c4p--tearsheet__next__main-content:focus,.c4p--tearsheet__next__summary-content:focus,:host :focus::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :focus::slotted([slot=influencer]){outline-style:dotted}}.c4p--tearsheet__next__side-panel,:host c4p-side-panel::part(dialog){block-size:100%;inline-size:100%!important;inset-block-start:0;max-inline-size:none;position:absolute;z-index:9999}.c4p--tearsheet__next__side-panel .c4p--side-panel__header,:host c4p-side-panel::part(dialog) .c4p--side-panel__header{min-block-size:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__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-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=body]){grid-template-columns:1fr 0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=footer]){block-size:4rem}.c4p--tearsheet__next--has-ai-label::part(dialog){background:linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent!important;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next__main-content{position:relative}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__flush{padding-inline:0}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--no-summary{grid-column:1/-1}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--has-ai-label{background:linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1))}:host ::slotted([slot=summary-content]:focus){outline:2px solid var(--cds-custom-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host ::slotted([slot=summary-content]:focus){outline-style:dotted}}:host ::slotted([slot=summary-content][is-flush]){padding-inline:0}@media screen and (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet) ::part(dialog){align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 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-custom-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-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible):before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);pointer-events:none;position:fixed;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1);z-index:calc(9000 - var(--stack-depth, 0))}@media (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible):before{transition:none}}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible) cds-custom-modal{background-color:transparent}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible) ::part(dialog){max-block-size:calc(100% - var(--tearsheet-vertical-gap, 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-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet[variant=narrow]):host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0!important}@media (max-width:41.98rem){:host(c4p-preview-tearsheet) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet) ::slotted([slot=summary-content]){padding:0!important}}:host-context(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0}:host ::slotted([slot=footer]){padding-block:0}"]);
10
+ var tearsheet_default = css(["@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds-custom--layout--size-xs{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xs,1.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-sm,2rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-md,2.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-lg,3rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xl,4rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-2xl,5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-normal,1rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-normal,1rem)}:root{--cds-custom-layout-size-height-xs:1.5rem;--cds-custom-layout-size-height-sm:2rem;--cds-custom-layout-size-height-md:2.5rem;--cds-custom-layout-size-height-lg:3rem;--cds-custom-layout-size-height-xl:4rem;--cds-custom-layout-size-height-2xl:5rem;--cds-custom-layout-size-height-min:0px;--cds-custom-layout-size-height-max:999999999px;--cds-custom-layout-density-padding-inline-condensed:0.5rem;--cds-custom-layout-density-padding-inline-normal:1rem;--cds-custom-layout-density-padding-inline-min:0px;--cds-custom-layout-density-padding-inline-max:999999999px}.cds-custom--assistive-text,.cds-custom--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted){animation:c4p--tearsheet__next--presence-tearsheet__enter .24s cubic-bezier(0,0,.3,1);opacity:1}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__enter .24s cubic-bezier(0,0,.3,1);transform:translateZ(0)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted).c4p--tearsheet__next--stacked.is-visible .c4p--tearsheet__next__container{transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting]{animation:c4p--tearsheet__next--presence-tearsheet__exit .24s cubic-bezier(.4,.14,1,1) forwards}.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:c4p--tearsheet__next--presence-tearsheet--container__exit .24s cubic-bezier(0,0,.3,1) forwards}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next:not(.c4p--tearsheet__next--keep-mounted)[data-tearsheet-exiting].c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{animation:none}}.c4p--tearsheet__next.c4p--tearsheet__next--keep-mounted:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transform:translate3d(0,min(95vh,500px),0)}@keyframes c4p--tearsheet__next--presence-tearsheet__enter{0%{opacity:0;transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet__exit{to{opacity:0}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__enter{0%{transform:translate3d(0,min(95vh,500px),0);transition:none}}@keyframes c4p--tearsheet__next--presence-tearsheet--container__exit{to{transform:translate3d(0,min(95vh,500px),0)}}.c4p--tearsheet__next .c4p--tearsheet__next__container{align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 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-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__main-content{background:linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1));position:relative}.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:transform .24s cubic-bezier(0,0,.3,1),max-block-size .24s cubic-bezier(0,0,.3,1)}@media screen and (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container{transition:none}}.c4p--tearsheet__next .c4p--tearsheet__next__header{align-content:space-between;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;flex-wrap:wrap;margin-block:0;max-block-size:50vh;padding-block-end:0;padding-block-start:1.5rem;padding-inline:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header>*{flex-basis:100%}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.c4p--tearsheet__next__close-button){margin-block-end:1.5rem}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header{padding-inline:1rem}}.c4p--tearsheet__next .cds-custom--modal-container--sm .cds-custom--modal-header{padding-inline-end:2rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:grid;flex-basis:unset;gap:1rem;grid-template-columns:minmax(auto,40rem) minmax(var(--tearsheet-header-title-grid-width,0),1fr);inline-size:calc(100% - var(--tearsheet-header-action-offset))}@media (max-width:41.98rem){.c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper{display:flex;flex-direction:column}}@media (min-width:42rem){.c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-actions{order:2}.c4p--tearsheet__next:not(.c4p--tearsheet__next--narrow) .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content{order:1}}.c4p--tearsheet__next .c4p--tearsheet__next__header>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse){max-block-size:50vh;opacity:1;overflow:hidden;transition:max-block-size .24s cubic-bezier(0,0,.3,1),opacity .24s cubic-bezier(0,0,.3,1),margin .24s cubic-bezier(0,0,.3,1),padding .24s cubic-bezier(0,0,.3,1)}.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-custom--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-custom--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse),.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed>:not(.c4p--tearsheet__next__navigation-bar,.c4p--tearsheet__next__header-content-wrapper,.cds-custom--modal-close-button,.c4p--tearsheet__next__close-button,.c4p--tearsheet__next__decorator,.excludeFromCollapse) *{margin:0;max-block-size:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;transition:all .24s cubic-bezier(0,0,.3,1);visibility:hidden}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title{align-items:center;font-size:var(--cds-custom-label-02-font-size,.875rem);font-weight:var(--cds-custom-label-02-font-weight,400);gap:.5rem;letter-spacing:var(--cds-custom-label-02-letter-spacing,.16px);line-height:var(--cds-custom-label-02-line-height,1.28572);margin-block-start:.25rem;transition:all .24s cubic-bezier(0,0,.3,1)}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title>span{align-items:center;block-size:1.5rem;display:flex}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end svg,.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-start svg{inline-size:1rem}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content{align-self:center;margin-block-end:0}.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .cds-custom--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-custom-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:calc(100% + 5rem);inset-block-start:0;inset-inline-start:-2rem;pointer-events:none;position:absolute;z-index:1}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible{--overlay-color:var(--cds-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5;background-color:initial;z-index:calc(9000 - var(--stack-depth, 0))}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);position:absolute;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1)}@media (prefers-reduced-motion:reduce){.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible:before{transition:none}}.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible.is-visible .c4p--tearsheet__next__container{max-block-size:calc(100% - var(--tearsheet-vertical-gap, calc(5rem + .5rem + .125rem)) + var(--block-size-change));transform:scaleX(var(--scale-factor))}.c4p--tearsheet__next__header-label{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);margin-block-end:.25rem}.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}@media (max-width:41.98rem){.c4p--tearsheet__next__header-title{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}}.c4p--tearsheet__next__header-title{align-items:flex-start;display:flex;gap:1rem;margin-block-end:.5rem}.c4p--tearsheet__next__header-title svg{flex-shrink:0}.c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end{margin-inline-start:1rem}.c4p--tearsheet__next__header-description{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--tearsheet__next__header--no-close-icon{display:none}.c4p--tearsheet__next__decorator{inset-block-start:.625rem;inset-inline-end:3rem;position:absolute}.c4p--tearsheet__next__navigation-bar{align-items:center;display:flex;gap:.125rem;justify-content:space-between;max-inline-size:calc(100% - .75rem);min-block-size:2.5rem;position:relative}.c4p--tearsheet__next__navigation-bar .cds-custom--tabs{margin-inline-start:-1rem}.c4p--tearsheet__next__scroller-container{inset-block-end:0;inset-inline-end:-2.5rem;position:absolute}@media (max-width:41.98rem){.c4p--tearsheet__next__scroller-container{inset-inline-end:-1.5rem}}.c4p--tearsheet__next__scroller-container .c4p--tearsheet__next__scroller-button-icon-collapsed{transform:rotate(-180deg)}.c4p--tearsheet__next__header-actions{display:flex;justify-content:flex-end}.c4p--tearsheet__next__content__header-actions{align-items:center;block-size:2rem;display:flex;flex:0 0 auto;inline-size:100%;justify-content:flex-end;margin-block-start:-14px;overflow:hidden}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]){margin-inline-end:.5rem}.c4p--tearsheet__next__content__header-actions>.c4p--tearsheet__next__header-action-item:not([data-hidden=true]):nth-last-child(2){margin-inline-end:0}.c4p--tearsheet__next__content__header-actions>*{flex-shrink:0}@media (max-width:41.98rem){.c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}}.c4p--tearsheet__next__header-actions,.c4p--tearsheet__next__header-content{margin-block-end:1.5rem}@media (min-width:42rem){.c4p--tearsheet__next--wide .c4p--tearsheet__next__container{inline-size:calc(100% - 8rem)}}.c4p--tearsheet__next__body-layout{display:grid;grid-template-areas:\"influencer body\" \"influencer footer\";grid-template-columns:var(--tearsheet-influencer-width,16rem) 1fr;grid-template-rows:1fr auto;padding-block:0;padding-inline-end:0}.c4p--tearsheet__next__body-layout:not(.c4p--tearsheet__next__body-layout--has-influencer){grid-template-areas:\"body\" \"footer\";grid-template-columns:1fr}.c4p--tearsheet__next__influencer,:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){border-inline-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);grid-area:influencer}.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){display:grid;grid-area:body;grid-template-columns:1fr var(--tearsheet-summary-content-width,16rem);overflow:hidden;position:relative}@media (max-width:41.98rem){.c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}}.c4p--tearsheet__next__body>:only-child,:host(c4p-preview-tearsheet) ::slotted([slot=body])>:only-child{grid-column:1/-1}.c4p--tearsheet__next__body .cds-custom--tab-content,:host(c4p-preview-tearsheet) ::slotted([slot=body]) .cds-custom--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-custom-border-subtle-01,#c6c6c6);grid-area:footer;overflow:hidden}@media (max-width:41.98rem){.c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) ::slotted([slot=footer]){block-size:4rem}}@media (max-width:19.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--three-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--three-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}@media (max-width:41.98rem){.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]){overflow-x:auto;overflow-y:hidden}.c4p--tearsheet__next__footer.c4p--tearsheet__next__footer--many-actions .c4p--action-set,:host(c4p-preview-tearsheet) .c4p--tearsheet__next__footer--many-actions::slotted([slot=footer]) .c4p--action-set{display:inline-flex;flex-shrink:0;min-inline-size:-moz-max-content;min-inline-size:max-content}}.c4p--tearsheet__next__influencer,.c4p--tearsheet__next__main-content,.c4p--tearsheet__next__summary-content,:host ::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) ::slotted([slot=influencer]){overflow:auto}.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:2rem}@media (max-width:41.98rem){.c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}}.c4p--tearsheet__next__influencer:focus,.c4p--tearsheet__next__main-content:focus,.c4p--tearsheet__next__summary-content:focus,:host :focus::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :focus::slotted([slot=influencer]){outline:2px solid var(--cds-custom-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.c4p--tearsheet__next__influencer:focus,.c4p--tearsheet__next__main-content:focus,.c4p--tearsheet__next__summary-content:focus,:host :focus::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) :focus::slotted([slot=influencer]){outline-style:dotted}}.c4p--tearsheet__next__side-panel,:host c4p-side-panel::part(dialog){block-size:100%;inline-size:100%!important;inset-block-start:0;max-inline-size:none;position:absolute;z-index:9999}.c4p--tearsheet__next__side-panel .c4p--side-panel__header,:host c4p-side-panel::part(dialog) .c4p--side-panel__header{min-block-size:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__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-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=body]){grid-template-columns:1fr 0}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),.c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush),:host .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=summary-content]),:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow :not(.c4p--tearsheet__next__flush)::slotted([slot=influencer]){padding-inline:1rem}.c4p--tearsheet__next--narrow .c4p--tearsheet__next__footer,:host(c4p-preview-tearsheet) .c4p--tearsheet__next--narrow ::slotted([slot=footer]){block-size:4rem}.c4p--tearsheet__next--has-ai-label::part(dialog){background:linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,#78a9ff),var(--cds-custom-ai-border-end,#d0e2ff)) border-box,linear-gradient(to top,var(--cds-custom-layer),var(--cds-custom-layer)) border-box;border:1px solid transparent!important;border-block-end:0;box-shadow:0 4px 10px 2px var(--cds-custom-ai-drop-shadow,rgba(15,98,254,.1))}.c4p--tearsheet__next__main-content{position:relative}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__flush{padding-inline:0}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--no-summary{grid-column:1/-1}.c4p--tearsheet__next__main-content.c4p--tearsheet__next__main-content--has-ai-label{background:linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)) 0,var(--cds-custom-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-custom-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-custom-ai-border-start,rgba(166,200,255,.64)),var(--cds-custom-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff)),var(--cds-custom-background,var(--cds-custom-ai-popover-background,#fff))) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-custom-ai-inner-shadow,rgba(69,137,255,.1))}:host ::slotted([slot=summary-content]:focus){outline:2px solid var(--cds-custom-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host ::slotted([slot=summary-content]:focus){outline-style:dotted}}:host ::slotted([slot=summary-content][is-flush]){padding-inline:0}@media screen and (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet) ::part(dialog){align-self:flex-end;block-size:100%;border:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:auto;max-block-size:calc(100% - var(--tearsheet-vertical-gap, 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-custom-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-custom-overlay,rgba(0,0,0,.6));--overlay-alpha:0.5}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible):before{background:var(--overlay-color);content:\"\";display:block;inset:0;opacity:calc(var(--overlay-alpha) - var(--stack-depth)*.1);pointer-events:none;position:fixed;transition:background-color .24s cubic-bezier(.4,.14,1,1),opacity .24s cubic-bezier(.4,.14,1,1);z-index:calc(9000 - var(--stack-depth, 0))}@media (prefers-reduced-motion:reduce){:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible):before{transition:none}}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible) cds-custom-modal{background-color:transparent}:host(c4p-preview-tearsheet.c4p--tearsheet__next--stack-activated.is-visible) ::part(dialog){max-block-size:calc(100% - var(--tearsheet-vertical-gap, 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-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__content__header-actions{justify-content:flex-start;margin-inline-end:0}:host(c4p-preview-tearsheet[variant=narrow]) .c4p--tearsheet__next__body,:host(c4p-preview-tearsheet[variant=narrow]):host(c4p-preview-tearsheet) ::slotted([slot=body]){grid-template-columns:1fr 0}:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0!important}@media (max-width:41.98rem){:host(c4p-preview-tearsheet) ::slotted([slot=influencer]),:host(c4p-preview-tearsheet) ::slotted([slot=summary-content]){padding:0!important}}:host-context(c4p-preview-tearsheet[variant=narrow]) ::slotted([slot=summary-content]){padding:0}:host ::slotted([slot=footer]){padding-block:0}"]);
11
11
  //#endregion
12
12
  export { tearsheet_default as default };
13
13
 
package/es-custom/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-custom';\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-custom-layer), var(--cds-custom-layer)) padding-box,\n linear-gradient(\n to bottom,\n var(--cds-custom-ai-border-start, #78a9ff),\n var(--cds-custom-ai-border-end, #d0e2ff)\n )\n border-box,\n linear-gradient(to top, var(--cds-custom-layer), var(--cds-custom-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-custom';\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-custom-layer), var(--cds-custom-layer)) padding-box,\n linear-gradient(\n to bottom,\n var(--cds-custom-ai-border-start, #78a9ff),\n var(--cds-custom-ai-border-end, #d0e2ff)\n )\n border-box,\n linear-gradient(to top, var(--cds-custom-layer), var(--cds-custom-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-custom/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-custom/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-custom/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-custom-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-custom-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-custom-ai-label, cds-custom-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-custom-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-custom-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"}
package/lib/components/tearsheet-preview/tearsheet-header-content.d.ts CHANGED
@@ -8,6 +8,7 @@
8
8
  */
9
9
  import { LitElement, PropertyValues } from 'lit';
10
10
  import '@carbon/web-components/es/components/modal/index.js';
11
+ import '@carbon/web-components/es/components/icon-button/index.js';
11
12
  import '../truncated-text';
12
13
  declare const CDSTearsheetHeaderContent_base: {
13
14
  new (...args: any[]): {
@@ -22,7 +23,7 @@ declare const CDSTearsheetHeaderContent_base: {
22
23
  };
23
24
  };
24
25
  };
25
- } & typeof LitElement;
26
+ } & typeof LitElement & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
26
27
  /**
27
28
  * Tearsheet Header Content component - Contains the title, description, and decorative elements.
28
29
  *
@@ -49,16 +50,41 @@ declare class CDSTearsheetHeaderContent extends CDSTearsheetHeaderContent_base {
49
50
  get titleId(): string;
50
51
  private _titleStartSlot?;
51
52
  private _titleEndSlot?;
53
+ private _decoratorSlot?;
52
54
  private _hasTitleStart;
53
55
  private _hasTitleEnd;
56
+ private _hasDecorator;
57
+ private _hasAILabel;
54
58
  private _isMobileOrNarrow;
55
59
  private mdMediaQuery;
56
60
  private isMobileDevice;
57
61
  private get isNarrowVariant();
62
+ /**
63
+ * Returns the first focusable element in the header for the focus trap.
64
+
65
+ * Priority by screen size:
66
+ * Large (desktop): header-actions button → close button → AI label
67
+ * Small (mobile): AI label → close button → header-actions button
68
+ */
69
+ getFirstFocusable(): HTMLElement | null;
58
70
  protected firstUpdated(_changedProperties: PropertyValues): void;
59
71
  protected updated(_changedProperties: PropertyValues): void;
72
+ /**
73
+ * Applies `inert` to collapsed header regions so they are removed from
74
+ * the tab order and AT tree. CSS alone (opacity:0 / max-block-size:0)
75
+ * does not prevent keyboard focus on hidden elements.
76
+ *
77
+ * Collapsed regions:
78
+ * - Everything in header-content except the title wrapper
79
+ * (description, label, extra slot content, "Read more" button)
80
+ * - Header-actions on small/narrow screens
81
+ */
82
+ private _updateInertState;
60
83
  private _checkSlots;
61
84
  private _handleSlotChange;
85
+ private _handleDecoratorChange;
86
+ private _updateDecoratorSize;
87
+ private _updateHeaderOffset;
62
88
  render(): import("lit-html").TemplateResult<1>;
63
89
  static styles: any;
64
90
  }
package/lib/components/tearsheet-preview/tearsheet-header-content.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tearsheet-header-content.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-header-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,qDAAqD,CAAC;AAE7D,OAAO,mBAAmB,CAAC;;;;;;;;;;uBACkB,CAAC;;;;;AAQ9C;;;;;;;;;GASG;AACH,cACM,yBAA0B,SAAQ,8BAA6B;IAEnE,IAAI,SAAoB;IAExB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAM;IAEnB;;OAEG;IACH,OAAO,CAAC,QAAQ,CAA6E;IAE7F;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IAGD,OAAO,CAAC,eAAe,CAAC,CAAkB;IAG1C,OAAO,CAAC,aAAa,CAAC,CAAkB;IAGxC,OAAO,CAAC,cAAc,CAAS;IAG/B,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,iBAAiB,CAAS;IAElC,OAAO,CAAC,YAAY,CAA0C;IAC9D,OAAO,CAAC,cAAc,CAIpB;IAEF,OAAO,KAAK,eAAe,GAG1B;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAYhE,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAU3D,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,iBAAiB;IAIzB,MAAM;IA0EN,MAAM,CAAC,MAAM,MAAU;CACxB;AACD,eAAe,yBAAyB,CAAC"}
1
+ {"version":3,"file":"tearsheet-header-content.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-header-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,qDAAqD,CAAC;AAC7D,OAAO,2DAA2D,CAAC;AAEnE,OAAO,mBAAmB,CAAC;;;;;;;;;;uBAAtB,CAAC;;;;;AAaN;;;;;;;;;GASG;AACH,cACM,yBAA0B,SAAQ,8BAEvC;IAEC,IAAI,SAAoB;IAExB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAM;IAEnB;;OAEG;IACH,OAAO,CAAC,QAAQ,CAA6E;IAE7F;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IAGD,OAAO,CAAC,eAAe,CAAC,CAAkB;IAG1C,OAAO,CAAC,aAAa,CAAC,CAAkB;IAGxC,OAAO,CAAC,cAAc,CAAC,CAAkB;IAGzC,OAAO,CAAC,cAAc,CAAS;IAG/B,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,aAAa,CAAS;IAG9B,OAAO,CAAC,WAAW,CAAS;IAG5B,OAAO,CAAC,iBAAiB,CAAS;IAElC,OAAO,CAAC,YAAY,CAA0C;IAC9D,OAAO,CAAC,cAAc,CAIpB;IAEF,OAAO,KAAK,eAAe,GAG1B;IAED;;;;;;OAMG;IACH,iBAAiB,IAAI,WAAW,GAAG,IAAI;IAqCvC,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAehE,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAc3D;;;;;;;;;OASG;IACH,OAAO,CAAC,iBAAiB;IA2BzB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,sBAAsB;IAoC9B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,mBAAmB;IAiB3B,MAAM;IAoIN,MAAM,CAAC,MAAM,MAAU;CACxB;AACD,eAAe,yBAAyB,CAAC"}
package/lib/components/tearsheet-preview/tearsheet-header.d.ts CHANGED
@@ -24,13 +24,15 @@ declare const CDSTearsheetHeader_base: {
24
24
  } & typeof LitElement & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
25
25
  /**
26
26
  * Tearsheet Header component - Contains the header section with title, description, and actions.
27
+ * The decorator (AI label) and close button are now rendered inside c4p-tearsheet-header-content
28
+ * to achieve the correct DOM tab order: header-actions → decorator → close → header-content.
27
29
  *
28
30
  * @element c4p-tearsheet-header
29
31
  * @slot header-content - The main header content area (use c4p-tearsheet-header-content)
30
- * @slot header-navigation - Navigation tabs or breadcrumbs below the header
31
- * @slot header-actions - Action buttons in the header (e.g., settings, delete)
32
- * @slot decorator - AI label or other decorative elements
33
- * @fires c4p-tearsheet-header-close-button-clicked - Internal event to notify parent tearsheet
32
+ * @slot - Default slot for other content
33
+ * @slot navigation-bar - Navigation tabs or breadcrumbs below the header
34
+ * @fires c4p-tearsheet-header-collapse-change - Internal event; parent tearsheet re-dispatches
35
+ * this as the public `c4p-preview-tearsheet-collapse-change` event.
34
36
  */
35
37
  declare class CDSTearsheetHeader extends CDSTearsheetHeader_base {
36
38
  slot: string;
@@ -46,25 +48,19 @@ declare class CDSTearsheetHeader extends CDSTearsheetHeader_base {
46
48
  * Default header collapse/expand while scrolling the main content can be disabled by setting this
47
49
  */
48
50
  disableHeaderCollapse: boolean;
49
- _hasDecorator: boolean;
50
- _hasAILabel: boolean;
51
- private decoratorSlot;
52
- /**
53
- * Handles user-initiated close request of this tearsheet.
54
- * Dispatches an internal event to notify the parent tearsheet to close.
55
- *
56
- * @param triggeredBy The element that triggered this close request.
57
- */
58
- private _handleUserInitiatedClose;
59
51
  connectedCallback(): void;
60
52
  protected firstUpdated(): void;
61
53
  protected updated(_changedProperties: PropertyValues): void;
62
54
  private updateCollapsedAttribute;
63
- private updateHeaderOffset;
64
- private _handleDecoratorChange;
65
55
  render(): import("lit-html").TemplateResult<1>;
66
56
  static styles: any;
67
57
  static get eventCloseButtonClicked(): string;
58
+ /**
59
+ * Internal event fired when the collapse state changes.
60
+ * The parent `c4p-preview-tearsheet` intercepts this and re-dispatches it as
61
+ * the public `c4p-preview-tearsheet-collapse-change` event.
62
+ */
63
+ static get eventCollapseChange(): string;
68
64
  }
69
65
  export default CDSTearsheetHeader;
70
66
  //# sourceMappingURL=tearsheet-header.d.ts.map
package/lib/components/tearsheet-preview/tearsheet-header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tearsheet-header.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-header.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,qDAAqD,CAAC;;;;;;;;;;uBAGjD,CAAC;;;;;AAOb;;;;;;;;;GASG;AACH,cACM,kBAAmB,SAAQ,uBAA4C;IAE3E,IAAI,SAAY;IAEhB;;OAEG;IAEH,oBAAoB,EAAE,MAAM,CAAW;IAEvC;;OAEG;IAEH,eAAe,EAAE,OAAO,CAAS;IAEjC;;OAEG;IAMH,qBAAqB,EAAE,OAAO,CAAS;IAGvC,aAAa,UAAS;IAGtB,WAAW,UAAS;IAGpB,OAAO,CAAC,aAAa,CAAmB;IAExC;;;;;OAKG;IACH,OAAO,CAAC,yBAAyB;IAkBjC,iBAAiB;IAQjB,SAAS,CAAC,YAAY;IAStB,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc;IAUpD,OAAO,CAAC,wBAAwB;IAchC,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,sBAAsB;IAuB9B,MAAM;IAgCN,MAAM,CAAC,MAAM,MAAU;IAEvB,MAAM,KAAK,uBAAuB,WAEjC;CACF;AACD,eAAe,kBAAkB,CAAC"}
1
+ {"version":3,"file":"tearsheet-header.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-header.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,qDAAqD,CAAC;;;;;;;;;;uBAGnC,CAAC;;;;;AAO3B;;;;;;;;;;;GAWG;AACH,cACM,kBAAmB,SAAQ,uBAA4C;IAE3E,IAAI,SAAY;IAEhB;;OAEG;IAEH,oBAAoB,EAAE,MAAM,CAAW;IAEvC;;OAEG;IAEH,eAAe,EAAE,OAAO,CAAS;IAEjC;;OAEG;IAMH,qBAAqB,EAAE,OAAO,CAAS;IAEvC,iBAAiB;IAUjB,SAAS,CAAC,YAAY;IAQtB,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc;IAiBpD,OAAO,CAAC,wBAAwB;IA8BhC,MAAM;IAcN,MAAM,CAAC,MAAM,MAAU;IAEvB,MAAM,KAAK,uBAAuB,WAEjC;IAED;;;;OAIG;IACH,MAAM,KAAK,mBAAmB,WAE7B;CACF;AACD,eAAe,kBAAkB,CAAC"}
package/lib/components/tearsheet-preview/tearsheet-signal.d.ts CHANGED
@@ -11,6 +11,12 @@ interface TearsheetSignalType {
11
11
  open: boolean;
12
12
  hasAILabel: boolean;
13
13
  uniqueId: string;
14
+ /** Tooltip/aria label for the close button */
15
+ closeIconDescription: string;
16
+ /** Whether the close button should be hidden */
17
+ hideCloseButton: boolean;
18
+ /** Callback to close the tearsheet */
19
+ onClose: (() => void) | null;
14
20
  }
15
21
  export declare const defaultTearsheetSignal: TearsheetSignalType;
16
22
  export declare const tearsheetSignal: import("signal-polyfill").Signal.State<TearsheetSignalType>;
package/lib/components/tearsheet-preview/tearsheet-signal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tearsheet-signal.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-signal.ts"],"names":[],"mappings":"AAWA;;GAEG;AACH,eAAO,MAAM,UAAU,yBAA+B,CAAC;AAEvD,UAAU,mBAAmB;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,sBAAsB,EAAE,mBASpC,CAAC;AACF,eAAO,MAAM,eAAe,6DAE3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,SAAS,OAAO,CAAC,mBAAmB,CAAC,SAMtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,YAEhC,CAAC"}
1
+ {"version":3,"file":"tearsheet-signal.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-signal.ts"],"names":[],"mappings":"AAWA;;GAEG;AACH,eAAO,MAAM,UAAU,yBAA+B,CAAC;AAEvD,UAAU,mBAAmB;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,gDAAgD;IAChD,eAAe,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;CAC9B;AACD,eAAO,MAAM,sBAAsB,EAAE,mBAYpC,CAAC;AACF,eAAO,MAAM,eAAe,6DAE3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,SAAS,OAAO,CAAC,mBAAmB,CAAC,SAMtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,YAEhC,CAAC"}
package/lib/components/tearsheet-preview/tearsheet-summary-content.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tearsheet-summary-content.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-summary-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,wBAAwB,CAAC;;;;;;;;;;uBAIJ,CAAC;;;;;AAK7B;;;;;;;GAOG;AACH,cACM,0BAA2B,SAAQ,+BAExC;IAEC,IAAI,SAAqB;IAGzB,OAAO,EAAE,OAAO,CAAS;IAEzB;;;OAGG;IAEH,gBAAgB,EAAE,OAAO,CAAS;IAElC;;OAEG;IAEH,qBAAqB,EAAE,MAAM,CAAmB;IAEhD;;OAEG;IACH,OAAO,CAAC,WAAW,CAQjB;IAEF,YAAY;IAIZ,MAAM;IAwBN,MAAM,CAAC,MAAM,MAAU;CACxB;AACD,eAAe,0BAA0B,CAAC"}
1
+ {"version":3,"file":"tearsheet-summary-content.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet-summary-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,wBAAwB,CAAC;;;;;;;;;;uBAIJ,CAAC;;;;;AAK7B;;;;;;;GAOG;AACH,cACM,0BAA2B,SAAQ,+BAExC;IAEC,IAAI,SAAqB;IAGzB,OAAO,EAAE,OAAO,CAAS;IAEzB;;;OAGG;IAEH,gBAAgB,EAAE,OAAO,CAAS;IAElC;;OAEG;IAEH,qBAAqB,EAAE,MAAM,CAAmB;IAEhD;;OAEG;IACH,OAAO,CAAC,WAAW,CAQjB;IAEF,YAAY;IAIZ,MAAM;IA2BN,MAAM,CAAC,MAAM,MAAU;CACxB;AACD,eAAe,0BAA0B,CAAC"}
package/lib/components/tearsheet-preview/tearsheet.d.ts CHANGED
@@ -31,6 +31,8 @@ declare const CDSTearsheet_base: {
31
31
  * @slot footer - Footer content with actions
32
32
  * @fires c4p-preview-tearsheet-beingclosed - Fired when the tearsheet is about to close
33
33
  * @fires c4p-preview-tearsheet-closed - Fired after the tearsheet has closed
34
+ * @fires c4p-preview-tearsheet-collapse-change - Fired when the header collapse state changes.
35
+ * `event.detail.collapsed` is `true` when collapsing, `false` when expanding.
34
36
  */
35
37
  declare class CDSTearsheet extends CDSTearsheet_base {
36
38
  /**
@@ -107,6 +109,8 @@ declare class CDSTearsheet extends CDSTearsheet_base {
107
109
  private get hasAILabel();
108
110
  connectedCallback(): void;
109
111
  protected firstUpdated(_changedProperties: PropertyValues): void;
112
+ /** Read close-button props from the slotted c4p-tearsheet-header element */
113
+ private _readHeaderProps;
110
114
  protected updated(_changedProperties: PropertyValues): void;
111
115
  private updateIsSmState;
112
116
  private handleOpenPropertyChange;
@@ -116,6 +120,11 @@ declare class CDSTearsheet extends CDSTearsheet_base {
116
120
  * Update CSS custom properties for stacking
117
121
  */
118
122
  private updateStackProperties;
123
+ /**
124
+ * Delegates to `c4p-tearsheet-header-content.getFirstFocusable()`.
125
+ * All priority logic lives in the component that owns the relevant DOM.
126
+ */
127
+ private _getFirstFocusable;
119
128
  disconnectedCallback(): void;
120
129
  /**
121
130
  * Update CSS custom properties for dynamic styling
@@ -153,6 +162,11 @@ declare class CDSTearsheet extends CDSTearsheet_base {
153
162
  * This is an internal event that triggers the tearsheet to close
154
163
  */
155
164
  private handleHeaderCloseButtonClick;
165
+ /**
166
+ * Intercepts the internal collapse-change event from the header and
167
+ * re-dispatches it as the public `c4p-preview-tearsheet-collapse-change` event.
168
+ */
169
+ private handleHeaderCollapseChange;
156
170
  /**
157
171
  * Handle close event from the modal (ESC key, click outside, etc.)
158
172
  */
@@ -163,6 +177,11 @@ declare class CDSTearsheet extends CDSTearsheet_base {
163
177
  private getFloatingMenuSelectors;
164
178
  render(): import("lit-html").TemplateResult<1>;
165
179
  static styles: any;
180
+ /**
181
+ * Public event fired when the header collapse state changes.
182
+ * `event.detail.collapsed` is `true` when collapsing, `false` when expanding.
183
+ */
184
+ static get eventCollapseChange(): string;
166
185
  }
167
186
  export default CDSTearsheet;
168
187
  //# sourceMappingURL=tearsheet.d.ts.map
package/lib/components/tearsheet-preview/tearsheet.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tearsheet.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;uBAOnB,CAAC;;;;;AAWrC;;;;;;;;;;GAUG;AACH,cACM,YAAa,SAAQ,iBAA4C;IACrE;;OAEG;IAEH,IAAI,EAAE,OAAO,CAAS;IAEtB;;OAEG;IAEH,kBAAkB,EAAE,MAAM,CAAM;IAEhC;;OAEG;IAEH,eAAe,EAAE,MAAM,CAAM;IAE7B;;OAEG;IAEH,mBAAmB,EAAE,MAAM,CAAM;IAEjC;;OAEG;IAEH,WAAW,EAAE,MAAM,CAAM;IAEzB;;OAEG;IAEH,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAU;IAEpC;;OAEG;IAEH,sBAAsB,EAAE,MAAM,CAAM;IAEpC;;OAEG;IAEH,oBAAoB,EAAE,MAAM,CAAM;IAElC;;OAEG;IAEH,0BAA0B,EAAE,OAAO,CAAS;IAE5C;;OAEG;IAEH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAkE;IAElF;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAAkB;IAE1C;;OAEG;IAEH,OAAO,CAAC,IAAI,CAAkB;IAE9B;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAC,CAAc;IAEvC,OAAO,CAAC,aAAa,CAAwC;IAC7D,OAAO,CAAC,QAAQ,CAAS;IACzB;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAC,CAAM;IAEnC,OAAO,CAAC,YAAY,CAA0C;IAC9D,OAAO,CAAC,aAAa,CAInB;IACF;;OAEG;IACH,OAAO,KAAK,YAAY,GAOvB;IAED;;OAEG;IACH,OAAO,KAAK,UAAU,GAWrB;IAED,iBAAiB,IAAI,IAAI;IA+BzB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAahE,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAgB3D,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,wBAAwB;IA0EhC,OAAO,CAAC,2BAA2B;IAanC,OAAO,CAAC,6BAA6B;IAYrC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAoB7B,oBAAoB;IA2CpB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAqBjC;;;OAGG;IACH,OAAO,CAAC,0BAA0B;IA6BlC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAa7B;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAG1B;IAEF;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAOhC;IAEF;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAGhC;IAEF;;;;OAIG;IACH,OAAO,CAAC,cAAc;IA0CtB;;;OAGG;IACH,OAAO,CAAC,4BAA4B,CAIlC;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAEjB;IAEF;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAgBhC,MAAM;IA8CN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"tearsheet.d.ts","sourceRoot":"","sources":["../../../src/components/tearsheet-preview/tearsheet.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;uBAOnB,CAAC;;;;;AAWrC;;;;;;;;;;;;GAYG;AACH,cACM,YAAa,SAAQ,iBAA4C;IACrE;;OAEG;IAEH,IAAI,EAAE,OAAO,CAAS;IAEtB;;OAEG;IAEH,kBAAkB,EAAE,MAAM,CAAM;IAEhC;;OAEG;IAEH,eAAe,EAAE,MAAM,CAAM;IAE7B;;OAEG;IAEH,mBAAmB,EAAE,MAAM,CAAM;IAEjC;;OAEG;IAEH,WAAW,EAAE,MAAM,CAAM;IAEzB;;OAEG;IAEH,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAU;IAEpC;;OAEG;IAEH,sBAAsB,EAAE,MAAM,CAAM;IAEpC;;OAEG;IAEH,oBAAoB,EAAE,MAAM,CAAM;IAElC;;OAEG;IAEH,0BAA0B,EAAE,OAAO,CAAS;IAE5C;;OAEG;IAEH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAkE;IAElF;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAAkB;IAE1C;;OAEG;IAEH,OAAO,CAAC,IAAI,CAAkB;IAE9B;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAC,CAAc;IAEvC,OAAO,CAAC,aAAa,CAAwC;IAC7D,OAAO,CAAC,QAAQ,CAAS;IACzB;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAC,CAAM;IAEnC,OAAO,CAAC,YAAY,CAA0C;IAC9D,OAAO,CAAC,aAAa,CAInB;IACF;;OAEG;IACH,OAAO,KAAK,YAAY,GAOvB;IAED;;OAEG;IACH,OAAO,KAAK,UAAU,GAWrB;IAED,iBAAiB,IAAI,IAAI;IAqCzB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAehE,4EAA4E;IAC5E,OAAO,CAAC,gBAAgB;IAiBxB,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAgB3D,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,wBAAwB;IA4EhC,OAAO,CAAC,2BAA2B;IAanC,OAAO,CAAC,6BAA6B;IAYrC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAoB7B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAQ1B,oBAAoB;IA2CpB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAqBjC;;;OAGG;IACH,OAAO,CAAC,0BAA0B;IA6BlC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAa7B;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAG1B;IAEF;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAOhC;IAEF;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAGhC;IAEF;;;;OAIG;IACH,OAAO,CAAC,cAAc;IA0CtB;;;OAGG;IACH,OAAO,CAAC,4BAA4B,CAIlC;IAEF;;;OAGG;IACH,OAAO,CAAC,0BAA0B,CAahC;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAEjB;IAEF;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAgBhC,MAAM;IA6CN,MAAM,CAAC,MAAM,MAAU;IAEvB;;;OAGG;IACH,MAAM,KAAK,mBAAmB,WAE7B;CACF;AAED,eAAe,YAAY,CAAC"}