@carbon/ibm-products-web-components 0.48.0 → 0.49.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"tearsheet.scss.js","names":[],"sources":["../../../src/components/tearsheet-preview/tearsheet.scss?lit"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/utilities';\n@use '@carbon/styles/scss/utilities/ai-gradient' as *;\n@use '@carbon/styles/scss/utilities/focus-outline';\n\n@use '@carbon/ibm-products-styles/scss/components/Tearsheet/_tearsheet_next.scss'\n  as *;\n\n$c4p-prefix: 'c4p';\n$carbon-prefix: 'cds';\n\n$block-class__next: #{$c4p-prefix}--tearsheet__next;\n$motion-duration: $duration-moderate-02;\n\n@mixin collapsed-element {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  max-block-size: 0;\n  opacity: 0;\n  pointer-events: none;\n  transition: all $motion-duration motion(entrance, expressive);\n}\n.#{$block-class__next}--has-ai-label::part(dialog) {\n  border: 1px solid transparent !important; /* stylelint-disable-line declaration-no-important */\n\n  /* override carbon ai removing background gradient */\n  background:\n    linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,\n    linear-gradient(\n        to bottom,\n        var(--cds-ai-border-start, #78a9ff),\n        var(--cds-ai-border-end, #d0e2ff)\n      )\n      border-box,\n    linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;\n  border-block-end: 0;\n  box-shadow: 0 4px 10px 2px $ai-drop-shadow;\n}\n\n.#{$block-class__next}__main-content {\n  position: relative;\n\n  &.#{$block-class__next}__flush {\n    padding-inline: 0;\n  }\n\n  &.#{$block-class__next}__main-content--no-summary {\n    grid-column: 1 / -1;\n  }\n\n  &.#{$block-class__next}__main-content--has-ai-label {\n    @include ai-popover-gradient('default', 0, 'background');\n\n    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;\n  }\n}\n\n:host ::slotted([slot='summary-content']) {\n  @extend .#{$block-class__next}__summary-content;\n}\n\n:host ::slotted([slot='summary-content']:focus) {\n  @include focus-outline.focus-outline('outline');\n}\n\n:host ::slotted([slot='summary-content'][is-flush]) {\n  padding-inline: 0;\n}\n:host(#{$c4p-prefix}-preview-tearsheet) {\n  @media screen and (prefers-reduced-motion: reduce) {\n    ::part(dialog) {\n      align-self: flex-end;\n      border: 1px solid $border-subtle-01;\n      block-size: 100%;\n      inset-block-start: auto;\n      max-block-size: calc(\n        100% - var(\n            --tearsheet-vertical-gap,\n            calc(#{$spacing-11} + #{$spacing-03} + #{$spacing-01})\n          )\n      );\n      transform: translate3d(0, min(95vh, 500px), 0);\n      transition: none;\n    }\n  }\n\n  ::part(dialog) {\n    align-self: flex-end;\n    border: 1px solid $border-subtle-01;\n    block-size: 100%;\n    inset-block-start: auto;\n    max-block-size: calc(\n      100% - var(\n          --tearsheet-vertical-gap,\n          calc(#{$spacing-11} + #{$spacing-03} + #{$spacing-01})\n        )\n    );\n    transform: translate3d(0, min(95vh, 500px), 0);\n    transition:\n      transform $motion-duration motion(entrance, expressive),\n      max-block-size $motion-duration motion(entrance, expressive);\n  }\n\n  ::slotted([slot='influencer']) {\n    @extend .#{$block-class__next}__influencer;\n  }\n\n  ::slotted([slot='influencer'][is-flush]) {\n    padding-inline: 0;\n  }\n\n  ::slotted([slot='body']) {\n    @extend .#{$block-class__next}__body;\n  }\n\n  ::slotted([slot='footer']) {\n    @extend .#{$block-class__next}__footer;\n  }\n}\n:host(#{$c4p-prefix}-preview-tearsheet[open]) {\n  ::part(dialog) {\n    transform: translate3d(0, 0, 0);\n    transition: transform $duration-moderate-02 motion(entrance, expressive);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n}\n\n// This will set full screen height for tearsheets in mobile devices\n:host(:not(.#{$block-class__next}--stack-activated.is-visible)) {\n  ::part(dialog) {\n    @include breakpoint-down(md) {\n      max-block-size: none;\n    }\n  }\n}\n\n// Stacking styles\n:host(\n  #{$c4p-prefix}-preview-tearsheet.#{$block-class__next}--stack-activated.is-visible\n) {\n  --overlay-color: #{$overlay};\n  --overlay-alpha: 0.5;\n\n  &::before {\n    position: fixed;\n    z-index: calc(#{utilities.z('modal')} - var(--stack-depth, 0));\n    display: block;\n    background: var(--overlay-color);\n    content: '';\n    inset: 0;\n    opacity: calc(var(--overlay-alpha) - var(--stack-depth) * 0.1);\n    pointer-events: none;\n\n    transition:\n      background-color $motion-duration motion(exit, expressive),\n      opacity $motion-duration motion(exit, expressive);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  #{$carbon-prefix}-modal {\n    background-color: transparent;\n  }\n\n  ::part(dialog) {\n    max-block-size: calc(\n      100% - var(\n          --tearsheet-vertical-gap,\n          calc(#{$spacing-11} + #{$spacing-03} + #{$spacing-01})\n        ) +\n        var(--block-size-change)\n    );\n    transform: scaleX(var(--scale-factor));\n  }\n}\n\n// ──────────────────────────────────────────────────────────────\n// Narrow variant styles\n// ──────────────────────────────────────────────────────────────\n// ── Narrow container sizing ───────────────────────────────────\n// Carbon's dialog defaults to full-width on small screens and ~480 px on\n// larger ones, but its breakpoint (~672 px) is too wide for a narrow\n// tearsheet.  Pin it to exactly 480 px; below 480 px fill the viewport.\n:host(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n  ::part(dialog) {\n    inline-size: 480px;\n    max-inline-size: 480px;\n\n    @media (width <= 480px) {\n      inline-size: 100%;\n      max-inline-size: 100%;\n    }\n  }\n\n  .#{$block-class__next}__header {\n    padding-inline: $spacing-05;\n  }\n\n  .#{$block-class__next}__header.#{$block-class__next}__header-collapsed {\n    .#{$block-class__next}__header-actions {\n      display: none;\n    }\n  }\n\n  .#{$block-class__next}__header-content-wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .#{$block-class__next}__header-title {\n    @include type.type-style('heading-03');\n  }\n\n  .#{$block-class__next}__content__header-actions {\n    justify-content: flex-start;\n    margin-inline-end: 0;\n  }\n\n  .#{$block-class__next}__body {\n    grid-template-columns: 1fr 0;\n  }\n\n  ::slotted([slot='influencer']),\n  ::slotted([slot='summary-content']) {\n    padding: 0 !important; /* stylelint-disable-line declaration-no-important */\n  }\n}\n\n// Small screen styles\n@include breakpoint-down(md) {\n  :host(#{$c4p-prefix}-preview-tearsheet) {\n    ::slotted([slot='influencer']),\n    ::slotted([slot='summary-content']) {\n      padding: 0 !important; /* stylelint-disable-line declaration-no-important */\n    }\n  }\n}\n\n.#{$block-class__next}__header-label {\n  @extend .#{$block-class__next}__header-label;\n}\n.#{$block-class__next}__header-title {\n  @extend .#{$block-class__next}__header-title;\n}\n\n.#{$block-class__next}__header-description {\n  @extend .#{$block-class__next}__header-description;\n}\n\n:host {\n  #{$c4p-prefix}-side-panel::part(dialog) {\n    @extend .#{$block-class__next}__side-panel; // Extend the side panel styles}\n  }\n}\n\n:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n  ::slotted([slot='summary-content']) {\n    padding: 0;\n  }\n}\n\n:host ::slotted([slot='footer']) {\n  padding-block: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"tearsheet.scss.js","names":[],"sources":["../../../src/components/tearsheet-preview/tearsheet.scss?lit"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/utilities';\n@use '@carbon/styles/scss/utilities/ai-gradient' as *;\n@use '@carbon/styles/scss/utilities/focus-outline';\n\n@use '@carbon/ibm-products-styles/scss/components/Tearsheet/_tearsheet_next.scss'\n  as *;\n\n$c4p-prefix: 'c4p';\n$carbon-prefix: 'cds';\n\n$block-class__next: #{$c4p-prefix}--tearsheet__next;\n$motion-duration: $duration-moderate-02;\n\n@mixin collapsed-element {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  max-block-size: 0;\n  opacity: 0;\n  pointer-events: none;\n  transition:\n    opacity $motion-duration motion(entrance, expressive),\n    max-block-size $motion-duration motion(entrance, expressive),\n    padding $motion-duration motion(entrance, expressive),\n    margin $motion-duration motion(entrance, expressive);\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n}\n.#{$block-class__next}--has-ai-label::part(dialog) {\n  border: 1px solid transparent !important; /* stylelint-disable-line declaration-no-important */\n\n  /* override carbon ai removing background gradient */\n  background:\n    linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,\n    linear-gradient(\n        to bottom,\n        var(--cds-ai-border-start, #78a9ff),\n        var(--cds-ai-border-end, #d0e2ff)\n      )\n      border-box,\n    linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;\n  border-block-end: 0;\n  box-shadow: 0 4px 10px 2px $ai-drop-shadow;\n}\n\n.#{$block-class__next}__main-content {\n  position: relative;\n\n  &.#{$block-class__next}__flush {\n    padding-inline: 0;\n  }\n\n  &.#{$block-class__next}__main-content--no-summary {\n    grid-column: 1 / -1;\n  }\n\n  &.#{$block-class__next}__main-content--has-ai-label {\n    @include ai-popover-gradient('default', 0, 'background');\n\n    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;\n  }\n}\n\n:host ::slotted([slot='summary-content']) {\n  @extend .#{$block-class__next}__summary-content;\n}\n\n:host ::slotted([slot='summary-content']:focus) {\n  @include focus-outline.focus-outline('outline');\n}\n\n:host ::slotted([slot='summary-content'][is-flush]) {\n  padding-inline: 0;\n}\n:host(#{$c4p-prefix}-preview-tearsheet) {\n  @media screen and (prefers-reduced-motion: reduce) {\n    ::part(dialog) {\n      align-self: flex-end;\n      border: 1px solid $border-subtle-01;\n      block-size: 100%;\n      inset-block-start: auto;\n      max-block-size: calc(\n        100% - var(\n            --tearsheet-vertical-gap,\n            calc(#{$spacing-11} + #{$spacing-03} + #{$spacing-01})\n          )\n      );\n      transform: translate3d(0, min(95vh, 500px), 0);\n      transition: none;\n    }\n  }\n\n  ::part(dialog) {\n    align-self: flex-end;\n    border: 1px solid $border-subtle-01;\n    block-size: 100%;\n    inset-block-start: auto;\n    max-block-size: calc(\n      100% - var(\n          --tearsheet-vertical-gap,\n          calc(#{$spacing-11} + #{$spacing-03} + #{$spacing-01})\n        )\n    );\n    transform: translate3d(0, min(95vh, 500px), 0);\n    transition:\n      transform $motion-duration motion(entrance, expressive),\n      max-block-size $motion-duration motion(entrance, expressive);\n  }\n\n  ::slotted([slot='influencer']) {\n    @extend .#{$block-class__next}__influencer;\n  }\n\n  ::slotted([slot='influencer'][is-flush]) {\n    padding-inline: 0;\n  }\n\n  ::slotted([slot='body']) {\n    @extend .#{$block-class__next}__body;\n  }\n\n  ::slotted([slot='footer']) {\n    @extend .#{$block-class__next}__footer;\n  }\n}\n:host(#{$c4p-prefix}-preview-tearsheet[open]) {\n  ::part(dialog) {\n    transform: translate3d(0, 0, 0);\n    transition: transform $duration-moderate-02 motion(entrance, expressive);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n}\n\n// Carbon's cds-modal has its own opacity transition on exit (non-visible state)\n// that has no prefers-reduced-motion guard upstream. Override it here so the\n// tearsheet host-level opacity fade is also suppressed on exit.\n:host(#{$c4p-prefix}-preview-tearsheet:not([open])) {\n  @media screen and (prefers-reduced-motion: reduce) {\n    #{$carbon-prefix}-modal {\n      transition: none;\n    }\n  }\n}\n\n// This will set full screen height for tearsheets in mobile devices\n:host(:not(.#{$block-class__next}--stack-activated.is-visible)) {\n  ::part(dialog) {\n    @include breakpoint-down(md) {\n      max-block-size: none;\n    }\n  }\n}\n\n// Stacking styles\n:host(\n  #{$c4p-prefix}-preview-tearsheet.#{$block-class__next}--stack-activated.is-visible\n) {\n  --overlay-color: #{$overlay};\n  --overlay-alpha: 0.5;\n\n  &::before {\n    position: fixed;\n    z-index: calc(#{utilities.z('modal')} - var(--stack-depth, 0));\n    display: block;\n    background: var(--overlay-color);\n    content: '';\n    inset: 0;\n    opacity: calc(var(--overlay-alpha) - var(--stack-depth) * 0.1);\n    pointer-events: none;\n\n    transition:\n      background-color $motion-duration motion(exit, expressive),\n      opacity $motion-duration motion(exit, expressive);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  #{$carbon-prefix}-modal {\n    background-color: transparent;\n  }\n\n  ::part(dialog) {\n    max-block-size: calc(\n      100% - var(\n          --tearsheet-vertical-gap,\n          calc(#{$spacing-11} + #{$spacing-03} + #{$spacing-01})\n        ) +\n        var(--block-size-change)\n    );\n    transform: scaleX(var(--scale-factor));\n  }\n}\n\n// ──────────────────────────────────────────────────────────────\n// Narrow variant styles\n// ──────────────────────────────────────────────────────────────\n// ── Narrow container sizing ───────────────────────────────────\n// Carbon's dialog defaults to full-width on small screens and ~480 px on\n// larger ones, but its breakpoint (~672 px) is too wide for a narrow\n// tearsheet.  Pin it to exactly 480 px; below 480 px fill the viewport.\n:host(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n  ::part(dialog) {\n    inline-size: 480px;\n    max-inline-size: 480px;\n\n    @media (width <= 480px) {\n      inline-size: 100%;\n      max-inline-size: 100%;\n    }\n  }\n\n  .#{$block-class__next}__header {\n    padding-inline: $spacing-05;\n  }\n\n  .#{$block-class__next}__header.#{$block-class__next}__header-collapsed {\n    .#{$block-class__next}__header-actions {\n      display: none;\n    }\n  }\n\n  .#{$block-class__next}__header-content-wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .#{$block-class__next}__header-title {\n    @include type.type-style('heading-03');\n  }\n\n  .#{$block-class__next}__content__header-actions {\n    justify-content: flex-start;\n    margin-inline-end: 0;\n  }\n\n  .#{$block-class__next}__body {\n    grid-template-columns: 1fr 0;\n  }\n\n  ::slotted([slot='influencer']),\n  ::slotted([slot='summary-content']) {\n    padding: 0 !important; /* stylelint-disable-line declaration-no-important */\n  }\n}\n\n// Small screen styles\n@include breakpoint-down(md) {\n  :host(#{$c4p-prefix}-preview-tearsheet) {\n    ::slotted([slot='influencer']),\n    ::slotted([slot='summary-content']) {\n      padding: 0 !important; /* stylelint-disable-line declaration-no-important */\n    }\n  }\n}\n\n.#{$block-class__next}__header-label {\n  @extend .#{$block-class__next}__header-label;\n}\n.#{$block-class__next}__header-title {\n  @extend .#{$block-class__next}__header-title;\n}\n\n.#{$block-class__next}__header-description {\n  @extend .#{$block-class__next}__header-description;\n}\n\n:host {\n  #{$c4p-prefix}-side-panel::part(dialog) {\n    @extend .#{$block-class__next}__side-panel; // Extend the side panel styles}\n  }\n}\n\n:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {\n  ::slotted([slot='summary-content']) {\n    padding: 0;\n  }\n}\n\n:host ::slotted([slot='footer']) {\n  padding-block: 0;\n}\n"],"mappings":""}

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

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

package/es-custom/components/page-header/_story-assets/overflowHandler.js

@@ -30,7 +30,7 @@ function getSize(el, dimension) {
 	let size = el.getBoundingClientRect()[dimension];
 	el.style.display = originalDisplay;
 	const computedStyles = getComputedStyle(el);
-	size = dimension === "width" ? size + parseInt(computedStyles.paddingLeft) + parseInt(computedStyles.paddingRight) + parseInt(computedStyles.marginLeft) + parseInt(computedStyles.marginRight) : size + parseInt(computedStyles.paddingTop) + parseInt(computedStyles.paddingBottom) + parseInt(computedStyles.marginTop) + parseInt(computedStyles.marginBottom);
+	size = dimension === "width" ? size + parseInt(computedStyles.marginLeft) + parseInt(computedStyles.marginRight) : size + parseInt(computedStyles.marginTop) + parseInt(computedStyles.marginBottom);
 	return size;
 }
 /**

package/es-custom/components/page-header/_story-assets/overflowHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"overflowHandler.js","names":[],"sources":["../../../../src/components/page-header/_story-assets/overflowHandler.ts"],"sourcesContent":["/**\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\n// TODO: delete this file after overflowHandler from carbon/utils gets updated\n\n/**\n * Calculates the size (width or height) of a given HTML element.\n *\n * This function performs an expensive calculation by temporarily changing the\n * display style of the element if it is not currently visible. It then uses\n * `getBoundingClientRect` to retrieve the size of the element.\n *\n * @param el - The HTML element whose size is to be calculated.\n * @param dimension - The dimension to measure ('width' or 'height').\n * @returns The size of the element in pixels. Returns 0 if the element is not provided.\n */\nexport function getSize(\n  el: HTMLElement,\n  dimension: 'width' | 'height'\n): number {\n  if (!el) {\n    return 0;\n  }\n  const originalDisplay = el.style.display;\n  if (!el.offsetParent && getComputedStyle(el).display === 'none') {\n    el.style.display = 'inline-block';\n  }\n  let size = el.getBoundingClientRect()[dimension];\n  el.style.display = originalDisplay;\n  const computedStyles = getComputedStyle(el);\n  size =\n    dimension === 'width'\n      ? size +\n        parseInt(computedStyles.paddingLeft) +\n        parseInt(computedStyles.paddingRight) +\n        parseInt(computedStyles.marginLeft) +\n        parseInt(computedStyles.marginRight)\n      : size +\n        parseInt(computedStyles.paddingTop) +\n        parseInt(computedStyles.paddingBottom) +\n        parseInt(computedStyles.marginTop) +\n        parseInt(computedStyles.marginBottom);\n  return size;\n}\n\n/**\n * Options for updating the overflow handler.\n * Determines which items should be visible and which should be hidden\n * based on the container size, item sizes, and other constraints.\n */\nexport interface UpdateOverflowHandlerOptions {\n  /** The container element that holds the items. */\n  container: HTMLElement;\n  /** An array of item elements to be managed for overflow. */\n  items: HTMLElement[];\n  /** An element that represents the offset, which can be shown or hidden based on overflow. Identified by `data-offset` attribute. */\n  offset: HTMLElement;\n  /** An array of sizes corresponding to each item in the `items` array. */\n  sizes: number[];\n  /** An array of sizes corresponding to each item in the fixed items array. */\n  fixedSizes: number[];\n  /** The size of the offset element. */\n  offsetSize: number;\n  /** The maximum number of items that can be visible at once. If undefined, all items can be visible. */\n  maxVisibleItems?: number;\n  /** The dimension to consider for overflow, either 'width' or 'height'. */\n  dimension: 'width' | 'height';\n  /** A callback function that is called when the visible or hidden items change. */\n  onChange: (visibleItems: HTMLElement[], hiddenItems: HTMLElement[]) => void;\n  /** An array of previously hidden items to compare against the new hidden items. */\n  previousHiddenItems?: HTMLElement[];\n  offsetValue?: number;\n}\n\n/**\n * Updates the overflow handler by determining which items should be visible and which should be hidden.\n *\n * @param options - Configuration options for updating the overflow handler.\n * @param options.container - Container for overflowing\n * @param options.items - Child elements within container\n * @param options.offset - Children with data-offset attribute\n * @param options.sizes - Sizes of child elements\n * @param options.fixedSizes - Fixed sizes of child elements with data-fixed attribute\n * @param options.offsetSize - Total offset size\n * @param options.offsetValue - Additional offset\n * @param options.maxVisibleItems - Max visible items\n * @param options.dimension - width | height used to measure overflow\n * @param options.onChange - onChange callback\n * @param options.previousHiddenItems - Array of previously hidden items\n * @returns An array of hidden items after the update.\n */\nexport function updateOverflowHandler({\n  container,\n  items,\n  offset,\n  sizes,\n  fixedSizes,\n  offsetSize,\n  maxVisibleItems,\n  dimension,\n  onChange,\n  previousHiddenItems = [],\n  offsetValue = 0,\n}: UpdateOverflowHandlerOptions): HTMLElement[] {\n  const containerSize =\n    dimension === 'width' ? container.clientWidth : container.clientHeight;\n\n  let visibleItems: HTMLElement[] = [];\n  let hiddenItems: HTMLElement[] = [];\n\n  const totalSize = sizes.reduce((sum, size) => sum + size, 0);\n  const totalFixedSize = fixedSizes.reduce((sum, size) => sum + size, 0);\n\n  if (totalSize + totalFixedSize <= containerSize) {\n    visibleItems = maxVisibleItems\n      ? items.slice(0, maxVisibleItems)\n      : [...items];\n    hiddenItems = maxVisibleItems ? items.slice(maxVisibleItems) : [];\n  } else {\n    const available = containerSize - offsetSize - totalFixedSize - offsetValue;\n    let accumulated = 0;\n    let breakIndex = items.length;\n\n    for (let i = 0; i < items.length; i++) {\n      const size = sizes[i];\n      if (\n        accumulated + size <= available &&\n        (!maxVisibleItems || visibleItems.length < maxVisibleItems)\n      ) {\n        visibleItems.push(items[i]);\n        accumulated += size;\n      } else {\n        breakIndex = i;\n        break;\n      }\n    }\n    hiddenItems = items.slice(breakIndex);\n  }\n\n  if (\n    previousHiddenItems.length === hiddenItems.length &&\n    previousHiddenItems.every((item, index) => item === hiddenItems[index])\n  ) {\n    return previousHiddenItems;\n  }\n\n  visibleItems.forEach((item) => item.removeAttribute('data-hidden'));\n  hiddenItems.forEach((item) => item.setAttribute('data-hidden', ''));\n\n  if (offset) {\n    offset.toggleAttribute('data-hidden', hiddenItems.length === 0);\n  }\n  onChange(visibleItems, hiddenItems);\n  return hiddenItems;\n}\n\n/**\n * Options for initializing an overflow handler.\n */\nexport interface OverflowHandlerOptions {\n  /**\n   * The container element that holds the items. along with offset item\n   */\n  container: HTMLElement;\n  /**\n   * Maximum number of visible items. If provided, only this number of items will be shown.\n   */\n  maxVisibleItems?: number;\n  /**\n   * Callback function invoked when the visible and hidden items change.\n   * @param visibleItems - The array of items that are currently visible.\n   * @param hiddenItems - The array of items that are currently hidden.\n   */\n  onChange: (visibleItems: HTMLElement[], hiddenItems: HTMLElement[]) => void;\n  /**\n   * The dimension to consider for overflow calculations. Defaults to 'width'.\n   */\n  dimension?: 'width' | 'height';\n  offsetValue?: number;\n}\n\n/**\n * Represents an instance of an overflow handler.\n */\nexport interface OverflowHandler {\n  /**\n   * Disconnects the overflow handler, cleaning up any event listeners or resources.\n   */\n  disconnect: () => void;\n}\n\nexport function createOverflowHandler({\n  container,\n  maxVisibleItems,\n  onChange,\n  dimension = 'width',\n  offsetValue = 0,\n}: OverflowHandlerOptions): OverflowHandler {\n  // Error handling\n  if (!(container instanceof HTMLElement)) {\n    throw new Error('container must be an HTMLElement');\n  }\n  if (typeof onChange !== 'function') {\n    throw new Error('onChange must be a function');\n  }\n  if (\n    maxVisibleItems !== undefined &&\n    (!Number.isInteger(maxVisibleItems) || maxVisibleItems <= 0)\n  ) {\n    throw new Error('maxVisibleItems must be a positive integer');\n  }\n\n  const children = Array.from(container.children) as HTMLElement[];\n  const offset = children.find((item) =>\n    item.hasAttribute('data-offset')\n  ) as HTMLElement;\n  const fixedItems = children.filter((item) =>\n    item.hasAttribute('data-fixed')\n  ) as HTMLElement[];\n  const items = children.filter(\n    (item) => item !== offset && !fixedItems.includes(item)\n  );\n\n  const fixedSizes = fixedItems.map((item) => getSize(item, dimension));\n  const sizes = items.map((item) => getSize(item, dimension));\n  const offsetSize = getSize(offset, dimension);\n\n  let previousHiddenItems: HTMLElement[] = [];\n\n  function update() {\n    previousHiddenItems = updateOverflowHandler({\n      container,\n      items,\n      offset,\n      sizes,\n      fixedSizes,\n      offsetSize,\n      maxVisibleItems,\n      dimension,\n      onChange,\n      previousHiddenItems,\n      offsetValue,\n    });\n  }\n\n  const resizeObserver = new ResizeObserver(() =>\n    requestAnimationFrame(update)\n  );\n  resizeObserver.observe(container);\n\n  requestAnimationFrame(update); // Initial update\n\n  return {\n    disconnect() {\n      resizeObserver.disconnect();\n    },\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"overflowHandler.js","names":[],"sources":["../../../../src/components/page-header/_story-assets/overflowHandler.ts"],"sourcesContent":["/**\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\n// TODO: delete this file after overflowHandler from carbon/utils gets updated\n\n/**\n * Calculates the size (width or height) of a given HTML element.\n *\n * This function performs an expensive calculation by temporarily changing the\n * display style of the element if it is not currently visible. It then uses\n * `getBoundingClientRect` to retrieve the size of the element.\n *\n * @param el - The HTML element whose size is to be calculated.\n * @param dimension - The dimension to measure ('width' or 'height').\n * @returns The size of the element in pixels. Returns 0 if the element is not provided.\n */\nexport function getSize(\n  el: HTMLElement,\n  dimension: 'width' | 'height'\n): number {\n  if (!el) {\n    return 0;\n  }\n  const originalDisplay = el.style.display;\n  if (!el.offsetParent && getComputedStyle(el).display === 'none') {\n    el.style.display = 'inline-block';\n  }\n  let size = el.getBoundingClientRect()[dimension];\n  el.style.display = originalDisplay;\n  // getBoundingClientRect already includes padding, so only add margins\n  // (which are outside the bounding box). Adding padding here would double-count it.\n  const computedStyles = getComputedStyle(el);\n  size =\n    dimension === 'width'\n      ? size +\n        parseInt(computedStyles.marginLeft) +\n        parseInt(computedStyles.marginRight)\n      : size +\n        parseInt(computedStyles.marginTop) +\n        parseInt(computedStyles.marginBottom);\n  return size;\n}\n\n/**\n * Options for updating the overflow handler.\n * Determines which items should be visible and which should be hidden\n * based on the container size, item sizes, and other constraints.\n */\nexport interface UpdateOverflowHandlerOptions {\n  /** The container element that holds the items. */\n  container: HTMLElement;\n  /** An array of item elements to be managed for overflow. */\n  items: HTMLElement[];\n  /** An element that represents the offset, which can be shown or hidden based on overflow. Identified by `data-offset` attribute. */\n  offset: HTMLElement;\n  /** An array of sizes corresponding to each item in the `items` array. */\n  sizes: number[];\n  /** An array of sizes corresponding to each item in the fixed items array. */\n  fixedSizes: number[];\n  /** The size of the offset element. */\n  offsetSize: number;\n  /** The maximum number of items that can be visible at once. If undefined, all items can be visible. */\n  maxVisibleItems?: number;\n  /** The dimension to consider for overflow, either 'width' or 'height'. */\n  dimension: 'width' | 'height';\n  /** A callback function that is called when the visible or hidden items change. */\n  onChange: (visibleItems: HTMLElement[], hiddenItems: HTMLElement[]) => void;\n  /** An array of previously hidden items to compare against the new hidden items. */\n  previousHiddenItems?: HTMLElement[];\n  offsetValue?: number;\n}\n\n/**\n * Updates the overflow handler by determining which items should be visible and which should be hidden.\n *\n * @param options - Configuration options for updating the overflow handler.\n * @param options.container - Container for overflowing\n * @param options.items - Child elements within container\n * @param options.offset - Children with data-offset attribute\n * @param options.sizes - Sizes of child elements\n * @param options.fixedSizes - Fixed sizes of child elements with data-fixed attribute\n * @param options.offsetSize - Total offset size\n * @param options.offsetValue - Additional offset\n * @param options.maxVisibleItems - Max visible items\n * @param options.dimension - width | height used to measure overflow\n * @param options.onChange - onChange callback\n * @param options.previousHiddenItems - Array of previously hidden items\n * @returns An array of hidden items after the update.\n */\nexport function updateOverflowHandler({\n  container,\n  items,\n  offset,\n  sizes,\n  fixedSizes,\n  offsetSize,\n  maxVisibleItems,\n  dimension,\n  onChange,\n  previousHiddenItems = [],\n  offsetValue = 0,\n}: UpdateOverflowHandlerOptions): HTMLElement[] {\n  const containerSize =\n    dimension === 'width' ? container.clientWidth : container.clientHeight;\n\n  let visibleItems: HTMLElement[] = [];\n  let hiddenItems: HTMLElement[] = [];\n\n  const totalSize = sizes.reduce((sum, size) => sum + size, 0);\n  const totalFixedSize = fixedSizes.reduce((sum, size) => sum + size, 0);\n\n  if (totalSize + totalFixedSize <= containerSize) {\n    visibleItems = maxVisibleItems\n      ? items.slice(0, maxVisibleItems)\n      : [...items];\n    hiddenItems = maxVisibleItems ? items.slice(maxVisibleItems) : [];\n  } else {\n    const available = containerSize - offsetSize - totalFixedSize - offsetValue;\n    let accumulated = 0;\n    let breakIndex = items.length;\n\n    for (let i = 0; i < items.length; i++) {\n      const size = sizes[i];\n      if (\n        accumulated + size <= available &&\n        (!maxVisibleItems || visibleItems.length < maxVisibleItems)\n      ) {\n        visibleItems.push(items[i]);\n        accumulated += size;\n      } else {\n        breakIndex = i;\n        break;\n      }\n    }\n    hiddenItems = items.slice(breakIndex);\n  }\n\n  if (\n    previousHiddenItems.length === hiddenItems.length &&\n    previousHiddenItems.every((item, index) => item === hiddenItems[index])\n  ) {\n    return previousHiddenItems;\n  }\n\n  visibleItems.forEach((item) => item.removeAttribute('data-hidden'));\n  hiddenItems.forEach((item) => item.setAttribute('data-hidden', ''));\n\n  if (offset) {\n    offset.toggleAttribute('data-hidden', hiddenItems.length === 0);\n  }\n  onChange(visibleItems, hiddenItems);\n  return hiddenItems;\n}\n\n/**\n * Options for initializing an overflow handler.\n */\nexport interface OverflowHandlerOptions {\n  /**\n   * The container element that holds the items. along with offset item\n   */\n  container: HTMLElement;\n  /**\n   * Maximum number of visible items. If provided, only this number of items will be shown.\n   */\n  maxVisibleItems?: number;\n  /**\n   * Callback function invoked when the visible and hidden items change.\n   * @param visibleItems - The array of items that are currently visible.\n   * @param hiddenItems - The array of items that are currently hidden.\n   */\n  onChange: (visibleItems: HTMLElement[], hiddenItems: HTMLElement[]) => void;\n  /**\n   * The dimension to consider for overflow calculations. Defaults to 'width'.\n   */\n  dimension?: 'width' | 'height';\n  offsetValue?: number;\n}\n\n/**\n * Represents an instance of an overflow handler.\n */\nexport interface OverflowHandler {\n  /**\n   * Disconnects the overflow handler, cleaning up any event listeners or resources.\n   */\n  disconnect: () => void;\n}\n\nexport function createOverflowHandler({\n  container,\n  maxVisibleItems,\n  onChange,\n  dimension = 'width',\n  offsetValue = 0,\n}: OverflowHandlerOptions): OverflowHandler {\n  // Error handling\n  if (!(container instanceof HTMLElement)) {\n    throw new Error('container must be an HTMLElement');\n  }\n  if (typeof onChange !== 'function') {\n    throw new Error('onChange must be a function');\n  }\n  if (\n    maxVisibleItems !== undefined &&\n    (!Number.isInteger(maxVisibleItems) || maxVisibleItems <= 0)\n  ) {\n    throw new Error('maxVisibleItems must be a positive integer');\n  }\n\n  const children = Array.from(container.children) as HTMLElement[];\n  const offset = children.find((item) =>\n    item.hasAttribute('data-offset')\n  ) as HTMLElement;\n  const fixedItems = children.filter((item) =>\n    item.hasAttribute('data-fixed')\n  ) as HTMLElement[];\n  const items = children.filter(\n    (item) => item !== offset && !fixedItems.includes(item)\n  );\n\n  const fixedSizes = fixedItems.map((item) => getSize(item, dimension));\n  const sizes = items.map((item) => getSize(item, dimension));\n  const offsetSize = getSize(offset, dimension);\n\n  let previousHiddenItems: HTMLElement[] = [];\n\n  function update() {\n    previousHiddenItems = updateOverflowHandler({\n      container,\n      items,\n      offset,\n      sizes,\n      fixedSizes,\n      offsetSize,\n      maxVisibleItems,\n      dimension,\n      onChange,\n      previousHiddenItems,\n      offsetValue,\n    });\n  }\n\n  const resizeObserver = new ResizeObserver(() =>\n    requestAnimationFrame(update)\n  );\n  resizeObserver.observe(container);\n\n  requestAnimationFrame(update); // Initial update\n\n  return {\n    disconnect() {\n      resizeObserver.disconnect();\n    },\n  };\n}\n"],"mappings":"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"}

package/es-custom/components/page-header/context.js

@@ -21,7 +21,10 @@ const pageHeaderContext = createContext({
 	fullyCollapsed: false,
 	root: null,
 	titleClipped: false,
-	disableStickyTabBar: false
+	contentActionsClipped: false,
+	disableStickyTabBar: false,
+	fullWidthGrid: false,
+	narrowGrid: false
 });
 //#endregion
 export { pageHeaderContext };

package/es-custom/components/page-header/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/page-header/context.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 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 { createContext } from '@lit/context';\n\nexport const pageHeaderContext = createContext({\n  headerOffset: 0,\n  breadcrumbOffset: 0,\n  fullyCollapsed: false,\n  root: null,\n  titleClipped: false,\n  disableStickyTabBar: false,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAWA,MAAa,oBAAoB,cAAc;CAC7C,cAAc;CACd,kBAAkB;CAClB,gBAAgB;CAChB,MAAM;CACN,cAAc;CACd,qBAAqB;CACtB,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/page-header/context.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 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 { createContext } from '@lit/context';\n\nexport const pageHeaderContext = createContext({\n  headerOffset: 0,\n  breadcrumbOffset: 0,\n  fullyCollapsed: false,\n  root: null,\n  titleClipped: false,\n  contentActionsClipped: false,\n  disableStickyTabBar: false,\n  fullWidthGrid: false,\n  narrowGrid: false,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAWA,MAAa,oBAAoB,cAAc;CAC7C,cAAc;CACd,kBAAkB;CAClB,gBAAgB;CAChB,MAAM;CACN,cAAc;CACd,uBAAuB;CACvB,qBAAqB;CACrB,eAAe;CACf,YAAY;CACb,CAAC"}

package/es-custom/components/page-header/page-header-actions-set/page-header-actions-set.js

@@ -30,6 +30,7 @@ let CDSPageHeaderActionsSet = class CDSPageHeaderActionsSet extends LitElement {
 		super(..._args);
 		this.hiddenItems = [];
 		this.actionsData = [];
+		this.toolbarAriaLabel = "Page actions";
 		this.overflowAriaLabel = "More page actions";
 		this.isSetup = false;
 		this.lastContainerWidth = 0;
@@ -60,18 +61,17 @@ let CDSPageHeaderActionsSet = class CDSPageHeaderActionsSet extends LitElement {
 		const checkOverflow = () => {
 			const slottedElements = slot?.assignedElements();
 			if (!slottedElements || slottedElements.length === 0) return;
-			const containerWidth = this.offsetWidth || this.itemsContainer.clientWidth;
+			const containerWidth = this.offsetWidth;
 			const overflowMenuWidth = 48;
 			if (containerWidth === 0) return;
 			if (Math.abs(containerWidth - this.lastContainerWidth) < 5) return;
 			this.lastContainerWidth = containerWidth;
+			slottedElements.forEach((el) => el.removeAttribute("data-hidden"));
 			let totalWidth = 0;
 			for (let i = 0; i < slottedElements.length; i++) totalWidth += slottedElements[i].offsetWidth;
 			if (totalWidth <= containerWidth) {
-				slottedElements.forEach((el) => {
-					el.removeAttribute("data-hidden");
-				});
-				this.hiddenItems = [];
+				const newHiddenItems = [];
+				if (this.hiddenItems.length !== 0) this.hiddenItems = newHiddenItems;
 				return;
 			}
 			totalWidth = 0;
@@ -87,7 +87,8 @@ let CDSPageHeaderActionsSet = class CDSPageHeaderActionsSet extends LitElement {
 				if (index >= visibleCount) el.setAttribute("data-hidden", "");
 				else el.removeAttribute("data-hidden");
 			});
-			this.hiddenItems = this.actionsData?.slice(visibleCount) || [];
+			const newHiddenItems = this.actionsData?.slice(visibleCount) || [];
+			if (newHiddenItems.length !== this.hiddenItems.length || newHiddenItems.some((item, i) => item !== this.hiddenItems[i])) this.hiddenItems = newHiddenItems;
 		};
 		checkOverflow();
 		this.resizeObserver = new ResizeObserver(() => {
@@ -97,7 +98,6 @@ let CDSPageHeaderActionsSet = class CDSPageHeaderActionsSet extends LitElement {
 			}, 100);
 		});
 		this.resizeObserver.observe(this);
-		this.resizeObserver.observe(this.itemsContainer);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -110,12 +110,16 @@ let CDSPageHeaderActionsSet = class CDSPageHeaderActionsSet extends LitElement {
 	}
 	render() {
 		return html`
-      <ul class="${blockClass}">
-        <li class="${blockClass}__items">
+      <div
+        class="${blockClass}"
+        role="toolbar"
+        aria-label="${this.toolbarAriaLabel}"
+      >
+        <div class="${blockClass}__items">
           <slot></slot>
-        </li>
+        </div>
 
-        <li data-offset ?data-hidden=${this.hiddenItems.length === 0}>
+        <div data-offset ?data-hidden=${this.hiddenItems.length === 0}>
           <cds-custom-overflow-menu
             size="md"
             close-on-activation
@@ -140,8 +144,8 @@ let CDSPageHeaderActionsSet = class CDSPageHeaderActionsSet extends LitElement {
                 `)}
             </cds-custom-overflow-menu-body>
           </cds-custom-overflow-menu>
-        </li>
-      </ul>
+        </div>
+      </div>
     `;
 	}
 	static {
@@ -154,6 +158,11 @@ __decorate([property({
 	attribute: "actions-data",
 	reflect: true
 })], CDSPageHeaderActionsSet.prototype, "actionsData", void 0);
+__decorate([property({
+	type: String,
+	attribute: "toolbar-aria-label",
+	reflect: true
+})], CDSPageHeaderActionsSet.prototype, "toolbarAriaLabel", void 0);
 __decorate([property({
 	type: String,
 	attribute: "overflow-aria-label",

package/es-custom/components/page-header/page-header-actions-set/page-header-actions-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-actions-set.js","names":["styles","customElement"],"sources":["../../../../src/components/page-header/page-header-actions-set/page-header-actions-set.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@carbon/web-components/es-custom/components/overflow-menu/index.js';\nimport OverflowMenuVertical16 from '@carbon/icons/es/overflow-menu--vertical/16.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport styles from './page-header-actions-set.scss?lit';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-actions-set`;\n\ninterface PageAction {\n  label: string;\n}\n\n@customElement(`${prefix}-page-header-actions-set`)\nexport default class CDSPageHeaderActionsSet extends LitElement {\n  /**\n   * Hidden actions that will be rendered in the overflow menu.\n   */\n  @state()\n  hiddenItems: PageAction[] = [];\n\n  /**\n   * The list of page action labels for overflow menu.\n   */\n  @property({ type: Array, attribute: 'actions-data', reflect: true })\n  actionsData: PageAction[] = [];\n\n  /**\n   * Aria label for the overflow menu button.\n   */\n  @property({ type: String, attribute: 'overflow-aria-label', reflect: true })\n  overflowAriaLabel = 'More page actions';\n\n  /**\n   * Container holding all action buttons and the overflow menu.\n   */\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  /**\n   * Items wrapper containing the slotted elements.\n   */\n  @query(`.${blockClass}__items`)\n  private itemsContainer!: HTMLElement;\n\n  private resizeObserver: ResizeObserver | undefined;\n  private isSetup = false;\n  private resizeTimeout: number | undefined;\n  private lastContainerWidth = 0;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    if (!this.container) {\n      return;\n    }\n\n    this.updateComplete.then(() => {\n      requestAnimationFrame(() => {\n        this.setupOverflowDetection();\n        this.isSetup = true;\n        this.style.visibility = 'visible';\n      });\n    });\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    // Only re-setup if actionsData changed and we've already done initial setup\n    if (\n      this.isSetup &&\n      changedProperties.has('actionsData') &&\n      !changedProperties.has('hiddenItems')\n    ) {\n      this.updateComplete.then(() => {\n        requestAnimationFrame(() => this.setupOverflowDetection());\n      });\n    }\n  }\n\n  private setupOverflowDetection() {\n    if (!this.itemsContainer) {\n      return;\n    }\n\n    // Disconnect existing observer if any\n    this.resizeObserver?.disconnect();\n\n    // Get slotted elements\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;\n\n    const checkOverflow = () => {\n      const slottedElements = slot?.assignedElements() as HTMLElement[];\n\n      if (!slottedElements || slottedElements.length === 0) {\n        return;\n      }\n\n      // Use the host element's width as it reflects the actual available space\n      const containerWidth =\n        this.offsetWidth || this.itemsContainer.clientWidth;\n      const overflowMenuWidth = 48; // Approximate width of overflow menu button\n\n      // If container has no width yet, skip check\n      if (containerWidth === 0) {\n        return;\n      }\n\n      // Prevent resize loop - only recalculate if width changed significantly (>5px)\n      if (Math.abs(containerWidth - this.lastContainerWidth) < 5) {\n        return;\n      }\n      this.lastContainerWidth = containerWidth;\n\n      // First, check if all items fit without overflow menu\n      let totalWidth = 0;\n      for (let i = 0; i < slottedElements.length; i++) {\n        totalWidth += slottedElements[i].offsetWidth;\n      }\n\n      // If all items fit, show all and hide overflow menu\n      if (totalWidth <= containerWidth) {\n        slottedElements.forEach((el) => {\n          el.removeAttribute('data-hidden');\n        });\n        this.hiddenItems = [];\n        return;\n      }\n\n      // Items don't fit, calculate how many can fit with overflow menu\n      totalWidth = 0;\n      let visibleCount = 0;\n\n      for (let i = 0; i < slottedElements.length; i++) {\n        const itemWidth = slottedElements[i].offsetWidth;\n\n        // Check if this item plus overflow menu would fit\n        if (totalWidth + itemWidth + overflowMenuWidth <= containerWidth) {\n          totalWidth += itemWidth;\n          visibleCount = i + 1;\n        } else {\n          break;\n        }\n      }\n\n      // Update visibility\n      slottedElements.forEach((el, index) => {\n        if (index >= visibleCount) {\n          el.setAttribute('data-hidden', '');\n        } else {\n          el.removeAttribute('data-hidden');\n        }\n      });\n\n      // Update hidden items for overflow menu\n      this.hiddenItems = this.actionsData?.slice(visibleCount) || [];\n    };\n\n    // Initial check\n    checkOverflow();\n\n    // Observe both the host element and items container for size changes with debouncing\n    this.resizeObserver = new ResizeObserver(() => {\n      // Clear existing timeout\n      if (this.resizeTimeout) {\n        clearTimeout(this.resizeTimeout);\n      }\n\n      // Debounce the check to prevent rapid recalculations\n      this.resizeTimeout = window.setTimeout(() => {\n        checkOverflow();\n      }, 100);\n    });\n\n    this.resizeObserver.observe(this);\n    this.resizeObserver.observe(this.itemsContainer);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    if (this.resizeTimeout) {\n      clearTimeout(this.resizeTimeout);\n    }\n  }\n\n  private handleOverflowItemClick(index: number) {\n    // Get the slot and find the corresponding slotted element\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;\n    const slottedElements = slot?.assignedElements() as HTMLElement[];\n    const hiddenIndex =\n      this.actionsData.length - this.hiddenItems.length + index;\n    const button = slottedElements[hiddenIndex];\n    if (button) {\n      button.click();\n    }\n  }\n\n  render() {\n    return html`\n      <ul class=\"${blockClass}\">\n        <li class=\"${blockClass}__items\">\n          <slot></slot>\n        </li>\n\n        <li data-offset ?data-hidden=${this.hiddenItems.length === 0}>\n          <cds-custom-overflow-menu\n            size=\"md\"\n            close-on-activation\n            enter-delay-ms=\"0\"\n            leave-delay-ms=\"0\"\n            align=\"left\"\n            data-floating-menu-container\n            aria-label=\"${this.overflowAriaLabel}\"\n          >\n            ${iconLoader(OverflowMenuVertical16, {\n              class: `${blockClass}__overflow-svg`,\n              slot: 'icon',\n            })}\n            <span slot=\"tooltip-content\">More actions</span>\n            <cds-custom-overflow-menu-body flipped>\n              ${repeat(\n                this.hiddenItems ?? [],\n                (_item, index) => index,\n                (item, index) => html`\n                  <cds-custom-overflow-menu-item\n                    @click=\"${() => this.handleOverflowItemClick(index)}\"\n                  >\n                    ${item.label}\n                  </cds-custom-overflow-menu-item>\n                `\n              )}\n            </cds-custom-overflow-menu-body>\n          </cds-custom-overflow-menu>\n        </li>\n      </ul>\n    `;\n  }\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-actions-set': CDSPageHeaderActionsSet;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"page-header-actions-set.js","names":["styles","customElement"],"sources":["../../../../src/components/page-header/page-header-actions-set/page-header-actions-set.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@carbon/web-components/es-custom/components/overflow-menu/index.js';\nimport OverflowMenuVertical16 from '@carbon/icons/es/overflow-menu--vertical/16.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport styles from './page-header-actions-set.scss?lit';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-actions-set`;\n\ninterface PageAction {\n  label: string;\n}\n\n@customElement(`${prefix}-page-header-actions-set`)\nexport default class CDSPageHeaderActionsSet extends LitElement {\n  /**\n   * Hidden actions that will be rendered in the overflow menu.\n   */\n  @state()\n  hiddenItems: PageAction[] = [];\n\n  /**\n   * The list of page action labels for overflow menu.\n   */\n  @property({ type: Array, attribute: 'actions-data', reflect: true })\n  actionsData: PageAction[] = [];\n\n  /**\n   * Aria label for the toolbar container (`role=\"toolbar\"`).\n   */\n  @property({ type: String, attribute: 'toolbar-aria-label', reflect: true })\n  toolbarAriaLabel = 'Page actions';\n\n  /**\n   * Aria label for the overflow menu button.\n   */\n  @property({ type: String, attribute: 'overflow-aria-label', reflect: true })\n  overflowAriaLabel = 'More page actions';\n\n  /**\n   * Container holding all action buttons and the overflow menu.\n   */\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  /**\n   * Items wrapper containing the slotted elements.\n   */\n  @query(`.${blockClass}__items`)\n  private itemsContainer!: HTMLElement;\n\n  private resizeObserver: ResizeObserver | undefined;\n  private isSetup = false;\n  private resizeTimeout: number | undefined;\n  private lastContainerWidth = 0;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    if (!this.container) {\n      return;\n    }\n\n    this.updateComplete.then(() => {\n      requestAnimationFrame(() => {\n        this.setupOverflowDetection();\n        this.isSetup = true;\n        this.style.visibility = 'visible';\n      });\n    });\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    // Only re-setup if actionsData changed and we've already done initial setup\n    if (\n      this.isSetup &&\n      changedProperties.has('actionsData') &&\n      !changedProperties.has('hiddenItems')\n    ) {\n      this.updateComplete.then(() => {\n        requestAnimationFrame(() => this.setupOverflowDetection());\n      });\n    }\n  }\n\n  private setupOverflowDetection() {\n    if (!this.itemsContainer) {\n      return;\n    }\n\n    // Disconnect existing observer if any\n    this.resizeObserver?.disconnect();\n\n    // Get slotted elements\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;\n\n    const checkOverflow = () => {\n      const slottedElements = slot?.assignedElements() as HTMLElement[];\n\n      if (!slottedElements || slottedElements.length === 0) {\n        return;\n      }\n\n      // Use the host element's width as it reflects the actual available space\n      const containerWidth = this.offsetWidth;\n      const overflowMenuWidth = 48; // Approximate width of overflow menu button\n\n      // If container has no width yet, skip check\n      if (containerWidth === 0) {\n        return;\n      }\n\n      // Prevent resize loop - only recalculate if width changed significantly (>5px)\n      if (Math.abs(containerWidth - this.lastContainerWidth) < 5) {\n        return;\n      }\n      this.lastContainerWidth = containerWidth;\n\n      // First, make all items temporarily visible to measure their natural widths\n      slottedElements.forEach((el) => el.removeAttribute('data-hidden'));\n\n      // First, check if all items fit without overflow menu\n      let totalWidth = 0;\n      for (let i = 0; i < slottedElements.length; i++) {\n        totalWidth += slottedElements[i].offsetWidth;\n      }\n\n      // If all items fit, show all and hide overflow menu\n      if (totalWidth <= containerWidth) {\n        const newHiddenItems: PageAction[] = [];\n        if (this.hiddenItems.length !== 0) {\n          this.hiddenItems = newHiddenItems;\n        }\n        return;\n      }\n\n      // Items don't fit, calculate how many can fit with overflow menu\n      totalWidth = 0;\n      let visibleCount = 0;\n\n      for (let i = 0; i < slottedElements.length; i++) {\n        const itemWidth = slottedElements[i].offsetWidth;\n\n        // Check if this item plus overflow menu would fit\n        if (totalWidth + itemWidth + overflowMenuWidth <= containerWidth) {\n          totalWidth += itemWidth;\n          visibleCount = i + 1;\n        } else {\n          break;\n        }\n      }\n\n      // Update visibility\n      slottedElements.forEach((el, index) => {\n        if (index >= visibleCount) {\n          el.setAttribute('data-hidden', '');\n        } else {\n          el.removeAttribute('data-hidden');\n        }\n      });\n\n      // Update hidden items only if the set actually changed to avoid a\n      // state-change → re-render → ResizeObserver → loop cycle.\n      const newHiddenItems = this.actionsData?.slice(visibleCount) || [];\n      if (\n        newHiddenItems.length !== this.hiddenItems.length ||\n        newHiddenItems.some((item, i) => item !== this.hiddenItems[i])\n      ) {\n        this.hiddenItems = newHiddenItems;\n      }\n    };\n\n    // Initial check\n    checkOverflow();\n\n    // Observe only the host element for external size changes.\n    // Do NOT observe itemsContainer — its size changes are caused by our own\n    // state updates (overflow menu appearing/disappearing) which would create\n    // a ResizeObserver → setState → re-render → ResizeObserver loop.\n    this.resizeObserver = new ResizeObserver(() => {\n      // Clear existing timeout\n      if (this.resizeTimeout) {\n        clearTimeout(this.resizeTimeout);\n      }\n\n      // Debounce the check to prevent rapid recalculations\n      this.resizeTimeout = window.setTimeout(() => {\n        checkOverflow();\n      }, 100);\n    });\n\n    this.resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    if (this.resizeTimeout) {\n      clearTimeout(this.resizeTimeout);\n    }\n  }\n\n  private handleOverflowItemClick(index: number) {\n    // Get the slot and find the corresponding slotted element\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;\n    const slottedElements = slot?.assignedElements() as HTMLElement[];\n    const hiddenIndex =\n      this.actionsData.length - this.hiddenItems.length + index;\n    const button = slottedElements[hiddenIndex];\n    if (button) {\n      button.click();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"${blockClass}\"\n        role=\"toolbar\"\n        aria-label=\"${this.toolbarAriaLabel}\"\n      >\n        <div class=\"${blockClass}__items\">\n          <slot></slot>\n        </div>\n\n        <div data-offset ?data-hidden=${this.hiddenItems.length === 0}>\n          <cds-custom-overflow-menu\n            size=\"md\"\n            close-on-activation\n            enter-delay-ms=\"0\"\n            leave-delay-ms=\"0\"\n            align=\"left\"\n            data-floating-menu-container\n            aria-label=\"${this.overflowAriaLabel}\"\n          >\n            ${iconLoader(OverflowMenuVertical16, {\n              class: `${blockClass}__overflow-svg`,\n              slot: 'icon',\n            })}\n            <span slot=\"tooltip-content\">More actions</span>\n            <cds-custom-overflow-menu-body flipped>\n              ${repeat(\n                this.hiddenItems ?? [],\n                (_item, index) => index,\n                (item, index) => html`\n                  <cds-custom-overflow-menu-item\n                    @click=\"${() => this.handleOverflowItemClick(index)}\"\n                  >\n                    ${item.label}\n                  </cds-custom-overflow-menu-item>\n                `\n              )}\n            </cds-custom-overflow-menu-body>\n          </cds-custom-overflow-menu>\n        </div>\n      </div>\n    `;\n  }\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-actions-set': CDSPageHeaderActionsSet;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,aAAa;AAOJ,IAAA,0BAAA,MAAM,gCAAgC,WAAW;;;qBAKlC,EAAE;qBAMF,EAAE;0BAMX;2BAMC;iBAeF;4BAEW;;CAE7B,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,MAAM,aAAa;;CAG1B,eAAe;AACb,MAAI,CAAC,KAAK,UACR;AAGF,OAAK,eAAe,WAAW;AAC7B,+BAA4B;AAC1B,SAAK,wBAAwB;AAC7B,SAAK,UAAU;AACf,SAAK,MAAM,aAAa;KACxB;IACF;;CAGJ,QAAQ,mBAAyC;AAE/C,MACE,KAAK,WACL,kBAAkB,IAAI,cAAc,IACpC,CAAC,kBAAkB,IAAI,cAAc,CAErC,MAAK,eAAe,WAAW;AAC7B,+BAA4B,KAAK,wBAAwB,CAAC;IAC1D;;CAIN,yBAAiC;AAC/B,MAAI,CAAC,KAAK,eACR;AAIF,OAAK,gBAAgB,YAAY;EAGjC,MAAM,OAAO,KAAK,YAAY,cAAc,OAAO;EAEnD,MAAM,sBAAsB;GAC1B,MAAM,kBAAkB,MAAM,kBAAkB;AAEhD,OAAI,CAAC,mBAAmB,gBAAgB,WAAW,EACjD;GAIF,MAAM,iBAAiB,KAAK;GAC5B,MAAM,oBAAoB;AAG1B,OAAI,mBAAmB,EACrB;AAIF,OAAI,KAAK,IAAI,iBAAiB,KAAK,mBAAmB,GAAG,EACvD;AAEF,QAAK,qBAAqB;AAG1B,mBAAgB,SAAS,OAAO,GAAG,gBAAgB,cAAc,CAAC;GAGlE,IAAI,aAAa;AACjB,QAAK,IAAI,IAAI,GAAG,IAAI,gBAAgB,QAAQ,IAC1C,eAAc,gBAAgB,GAAG;AAInC,OAAI,cAAc,gBAAgB;IAChC,MAAM,iBAA+B,EAAE;AACvC,QAAI,KAAK,YAAY,WAAW,EAC9B,MAAK,cAAc;AAErB;;AAIF,gBAAa;GACb,IAAI,eAAe;AAEnB,QAAK,IAAI,IAAI,GAAG,IAAI,gBAAgB,QAAQ,KAAK;IAC/C,MAAM,YAAY,gBAAgB,GAAG;AAGrC,QAAI,aAAa,YAAY,qBAAqB,gBAAgB;AAChE,mBAAc;AACd,oBAAe,IAAI;UAEnB;;AAKJ,mBAAgB,SAAS,IAAI,UAAU;AACrC,QAAI,SAAS,aACX,IAAG,aAAa,eAAe,GAAG;QAElC,IAAG,gBAAgB,cAAc;KAEnC;GAIF,MAAM,iBAAiB,KAAK,aAAa,MAAM,aAAa,IAAI,EAAE;AAClE,OACE,eAAe,WAAW,KAAK,YAAY,UAC3C,eAAe,MAAM,MAAM,MAAM,SAAS,KAAK,YAAY,GAAG,CAE9D,MAAK,cAAc;;AAKvB,iBAAe;AAMf,OAAK,iBAAiB,IAAI,qBAAqB;AAE7C,OAAI,KAAK,cACP,cAAa,KAAK,cAAc;AAIlC,QAAK,gBAAgB,OAAO,iBAAiB;AAC3C,mBAAe;MACd,IAAI;IACP;AAEF,OAAK,eAAe,QAAQ,KAAK;;CAGnC,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,OAAK,gBAAgB,YAAY;AACjC,MAAI,KAAK,cACP,cAAa,KAAK,cAAc;;CAIpC,wBAAgC,OAAe;EAM7C,MAAM,WAJO,KAAK,YAAY,cAAc,OAAO,GACrB,kBAAkB,EAE9C,KAAK,YAAY,SAAS,KAAK,YAAY,SAAS;AAEtD,MAAI,OACF,QAAO,OAAO;;CAIlB,SAAS;AACP,SAAO,IAAI;;iBAEE,WAAW;;sBAEN,KAAK,iBAAiB;;sBAEtB,WAAW;;;;wCAIO,KAAK,YAAY,WAAW,EAAE;;;;;;;;0BAQ5C,KAAK,kBAAkB;;cAEnC,WAAW,wBAAwB;GACnC,OAAO,GAAG,WAAW;GACrB,MAAM;GACP,CAAC,CAAC;;;gBAGC,OACA,KAAK,eAAe,EAAE,GACrB,OAAO,UAAU,QACjB,MAAM,UAAU,IAAI;;oCAED,KAAK,wBAAwB,MAAM,CAAC;;sBAElD,KAAK,MAAM;;kBAGlB,CAAC;;;;;;;;gBAOEA;;;YAnPf,OAAO,CAAA,EAAA,wBAAA,WAAA,eAAA,KAAA,EAAA;YAMP,SAAS;CAAE,MAAM;CAAO,WAAW;CAAgB,SAAS;CAAM,CAAC,CAAA,EAAA,wBAAA,WAAA,eAAA,KAAA,EAAA;YAMnE,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAsB,SAAS;CAAM,CAAC,CAAA,EAAA,wBAAA,WAAA,oBAAA,KAAA,EAAA;YAM1E,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAuB,SAAS;CAAM,CAAC,CAAA,EAAA,wBAAA,WAAA,qBAAA,KAAA,EAAA;YAM3E,MAAM,IAAI,aAAa,CAAA,EAAA,wBAAA,WAAA,aAAA,KAAA,EAAA;YAMvB,MAAM,IAAI,WAAW,SAAS,CAAA,EAAA,wBAAA,WAAA,kBAAA,KAAA,EAAA;sCAnChCC,cAAc,8BAAoC,CAAA,EAAA,wBAAA"}

package/es-custom/components/page-header/page-header-breadcrumb.js

@@ -50,9 +50,11 @@ let CDSPageHeaderBreadcrumb = class CDSPageHeaderBreadcrumb extends LitElement {
 	}
 	render() {
 		const { withinGrid, context } = this;
-		const { contentActionsClipped } = context ?? {};
+		const { contentActionsClipped, fullWidthGrid, narrowGrid } = context ?? {};
 		const gridClasses = classMap({
 			[`cds-custom--css-grid`]: !withinGrid,
+			[`cds-custom--css-grid--full-width`]: !withinGrid && !!fullWidthGrid,
+			[`cds-custom--css-grid--narrow`]: !withinGrid && !!narrowGrid,
 			[`cds-custom--subgrid cds-custom--subgrid--wide`]: withinGrid
 		});
 		const contentActionClasses = classMap({
@@ -71,7 +73,7 @@ let CDSPageHeaderBreadcrumb = class CDSPageHeaderBreadcrumb extends LitElement {
             </div>
             <div
               class="${"c4p"}--page-header__breadcrumb__actions"
-              role="navigation"
+              role="toolbar"
               aria-label="${this.actionsAriaLabel}"
             >
               <div class="${contentActionClasses}">

package/es-custom/components/page-header/page-header-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-breadcrumb.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-breadcrumb.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 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 { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix, carbonPrefix } from '../../globals/settings';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './page-header.scss?lit';\nimport { consume } from '@lit/context';\nimport { pageHeaderContext } from './context';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\n/**\n * Page header Breadcrumb Bar.\n * @element c4p-page-header-breadcrumb\n */\n@customElement(`${prefix}-page-header-breadcrumb`)\nclass CDSPageHeaderBreadcrumb extends LitElement {\n  /**\n   * Specify if breadcrumb bar has bottom border.\n   */\n  @property({ reflect: true, type: Boolean })\n  border = true;\n\n  /**\n   * Set to `true` if the breadcrumb bar is sitting within a grid\n   * (ie. when used in tandem with page-header-hero-image)\n   */\n  @property({ attribute: 'within-grid', type: Boolean })\n  withinGrid = false;\n\n  /**\n   * Set to `true` if page actions should be flush (no padding)\n   */\n  @property({ attribute: 'page-actions-flush', type: Boolean })\n  pageActionsFlush = false;\n\n  /**\n   * Set to `true` if content actions should be flush (no padding)\n   */\n  @property({ attribute: 'content-actions-flush', type: Boolean })\n  contentActionsFlush = false;\n\n  /**\n   * Aria label for the page header actions navigation.\n   */\n  @property({ type: String, attribute: 'actions-aria-label', reflect: true })\n  actionsAriaLabel = 'Page header actions';\n\n  @consume({ context: pageHeaderContext, subscribe: true })\n  @state()\n  context;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Apply class on initial connection\n    this.updateFixedClass();\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('context')) {\n      this.updateFixedClass();\n    }\n  }\n\n  private updateFixedClass() {\n    if (this.context?.disableStickyTabBar) {\n      this.classList.add(`${prefix}--page-header-breadcrumb--fixed`);\n    } else {\n      this.classList.remove(`${prefix}--page-header-breadcrumb--fixed`);\n    }\n  }\n\n  render() {\n    const { withinGrid, context } = this;\n    const { contentActionsClipped } = context ?? {};\n    const gridClasses = classMap({\n      [`${carbonPrefix}--css-grid`]: !withinGrid,\n      [`${carbonPrefix}--subgrid ${carbonPrefix}--subgrid--wide`]: withinGrid,\n    });\n\n    const contentActionClasses = classMap({\n      [`${prefix}--page-header__breadcrumb__content-actions-with-global-actions`]:\n        true,\n      [`${prefix}--page-header__breadcrumb__content-actions-with-global-actions--show`]:\n        contentActionsClipped,\n    });\n\n    return html`\n      <div class=\"${gridClasses}\">\n        <div\n          class=\"${carbonPrefix}--sm:col-span-4 ${carbonPrefix}--md:col-span-8 ${carbonPrefix}--lg:col-span-16 ${carbonPrefix}--css-grid-column\"\n        >\n          <div class=\"${prefix}--page-header__breadcrumb-container\">\n            <div class=\"${prefix}--page-header__breadcrumb-wrapper\">\n              <slot name=\"icon\"></slot>\n              <slot></slot>\n            </div>\n            <div\n              class=\"${prefix}--page-header__breadcrumb__actions\"\n              role=\"navigation\"\n              aria-label=\"${this.actionsAriaLabel}\"\n            >\n              <div class=\"${contentActionClasses}\">\n                <slot name=\"content-actions\"></slot>\n              </div>\n              <slot name=\"page-actions\"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,0BAAA,MACM,gCAAgC,WAAW;;;gBAKtC;oBAOI;0BAMM;6BAMG;0BAMH;;CAMnB,oBAAoB;AAClB,QAAM,mBAAmB;AAEzB,OAAK,kBAAkB;;CAGzB,QAAQ,mBAAqC;AAC3C,QAAM,QAAQ,kBAAkB;AAChC,MAAI,kBAAkB,IAAI,UAAU,CAClC,MAAK,kBAAkB;;CAI3B,mBAA2B;AACzB,MAAI,KAAK,SAAS,oBAChB,MAAK,UAAU,IAAI,qCAA2C;MAE9D,MAAK,UAAU,OAAO,qCAA2C;;CAIrE,SAAS;EACP,MAAM,EAAE,YAAY,YAAY;EAChC,MAAM,EAAE,0BAA0B,WAAW,EAAE;EAC/C,MAAM,cAAc,SAAS;IAC1B,kBAA8B,CAAC;IAC/B,oCAA4D;GAC9D,CAAC;EAEF,MAAM,uBAAuB,SAAS;IACnC,sEACC;IACD,4EACC;GACH,CAAC;AAEF,SAAO,IAAI;oBACK,YAAY;;yBAEA,kBAAA,MAA+B,kBAAA,MAA+B,mBAAA,MAAgC;;8BAE/F;gCACE;;;;;6BAKH;;4BAEF,KAAK,iBAAiB;;4BAEtB,qBAAqB;;;;;;;;;;;gBAW/BA;;;YA9Ff,SAAS;CAAE,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,UAAA,KAAA,EAAA;YAO1C,SAAS;CAAE,WAAW;CAAe,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,cAAA,KAAA,EAAA;YAMrD,SAAS;CAAE,WAAW;CAAsB,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,oBAAA,KAAA,EAAA;YAM5D,SAAS;CAAE,WAAW;CAAyB,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,uBAAA,KAAA,EAAA;YAM/D,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAsB,SAAS;CAAM,CAAC,CAAA,EAAA,wBAAA,WAAA,oBAAA,KAAA,EAAA;YAG1E,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,EACxD,OAAO,CAAA,EAAA,wBAAA,WAAA,WAAA,KAAA,EAAA;sCAlCTC,cAAc,6BAAmC,CAAA,EAAA,wBAAA;AAsGlD,IAAA,iCAAe"}
+{"version":3,"file":"page-header-breadcrumb.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-breadcrumb.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 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 { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix, carbonPrefix } from '../../globals/settings';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './page-header.scss?lit';\nimport { consume } from '@lit/context';\nimport { pageHeaderContext } from './context';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\n/**\n * Page header Breadcrumb Bar.\n * @element c4p-page-header-breadcrumb\n */\n@customElement(`${prefix}-page-header-breadcrumb`)\nclass CDSPageHeaderBreadcrumb extends LitElement {\n  /**\n   * Specify if breadcrumb bar has bottom border.\n   */\n  @property({ reflect: true, type: Boolean })\n  border = true;\n\n  /**\n   * Set to `true` if the breadcrumb bar is sitting within a grid\n   * (ie. when used in tandem with page-header-hero-image)\n   */\n  @property({ attribute: 'within-grid', type: Boolean })\n  withinGrid = false;\n\n  /**\n   * Set to `true` if page actions should be flush (no padding)\n   */\n  @property({ attribute: 'page-actions-flush', type: Boolean })\n  pageActionsFlush = false;\n\n  /**\n   * Set to `true` if content actions should be flush (no padding)\n   */\n  @property({ attribute: 'content-actions-flush', type: Boolean })\n  contentActionsFlush = false;\n\n  /**\n   * Aria label for the page header actions toolbar.\n   */\n  @property({ type: String, attribute: 'actions-aria-label', reflect: true })\n  actionsAriaLabel = 'Page header actions';\n\n  @consume({ context: pageHeaderContext, subscribe: true })\n  @state()\n  context;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Apply class on initial connection\n    this.updateFixedClass();\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('context')) {\n      this.updateFixedClass();\n    }\n  }\n\n  private updateFixedClass() {\n    if (this.context?.disableStickyTabBar) {\n      this.classList.add(`${prefix}--page-header-breadcrumb--fixed`);\n    } else {\n      this.classList.remove(`${prefix}--page-header-breadcrumb--fixed`);\n    }\n  }\n\n  render() {\n    const { withinGrid, context } = this;\n    const { contentActionsClipped, fullWidthGrid, narrowGrid } = context ?? {};\n    const gridClasses = classMap({\n      [`${carbonPrefix}--css-grid`]: !withinGrid,\n      [`${carbonPrefix}--css-grid--full-width`]: !withinGrid && !!fullWidthGrid,\n      [`${carbonPrefix}--css-grid--narrow`]: !withinGrid && !!narrowGrid,\n      [`${carbonPrefix}--subgrid ${carbonPrefix}--subgrid--wide`]: withinGrid,\n    });\n\n    const contentActionClasses = classMap({\n      [`${prefix}--page-header__breadcrumb__content-actions-with-global-actions`]:\n        true,\n      [`${prefix}--page-header__breadcrumb__content-actions-with-global-actions--show`]:\n        contentActionsClipped,\n    });\n\n    return html`\n      <div class=\"${gridClasses}\">\n        <div\n          class=\"${carbonPrefix}--sm:col-span-4 ${carbonPrefix}--md:col-span-8 ${carbonPrefix}--lg:col-span-16 ${carbonPrefix}--css-grid-column\"\n        >\n          <div class=\"${prefix}--page-header__breadcrumb-container\">\n            <div class=\"${prefix}--page-header__breadcrumb-wrapper\">\n              <slot name=\"icon\"></slot>\n              <slot></slot>\n            </div>\n            <div\n              class=\"${prefix}--page-header__breadcrumb__actions\"\n              role=\"toolbar\"\n              aria-label=\"${this.actionsAriaLabel}\"\n            >\n              <div class=\"${contentActionClasses}\">\n                <slot name=\"content-actions\"></slot>\n              </div>\n              <slot name=\"page-actions\"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPageHeaderBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,0BAAA,MACM,gCAAgC,WAAW;;;gBAKtC;oBAOI;0BAMM;6BAMG;0BAMH;;CAMnB,oBAAoB;AAClB,QAAM,mBAAmB;AAEzB,OAAK,kBAAkB;;CAGzB,QAAQ,mBAAqC;AAC3C,QAAM,QAAQ,kBAAkB;AAChC,MAAI,kBAAkB,IAAI,UAAU,CAClC,MAAK,kBAAkB;;CAI3B,mBAA2B;AACzB,MAAI,KAAK,SAAS,oBAChB,MAAK,UAAU,IAAI,qCAA2C;MAE9D,MAAK,UAAU,OAAO,qCAA2C;;CAIrE,SAAS;EACP,MAAM,EAAE,YAAY,YAAY;EAChC,MAAM,EAAE,uBAAuB,eAAe,eAAe,WAAW,EAAE;EAC1E,MAAM,cAAc,SAAS;IAC1B,kBAA8B,CAAC;IAC/B,8BAA0C,CAAC,cAAc,CAAC,CAAC;IAC3D,0BAAsC,CAAC,cAAc,CAAC,CAAC;IACvD,oCAA4D;GAC9D,CAAC;EAEF,MAAM,uBAAuB,SAAS;IACnC,sEACC;IACD,4EACC;GACH,CAAC;AAEF,SAAO,IAAI;oBACK,YAAY;;yBAEA,kBAAA,MAA+B,kBAAA,MAA+B,mBAAA,MAAgC;;8BAE/F;gCACE;;;;;6BAKH;;4BAEF,KAAK,iBAAiB;;4BAEtB,qBAAqB;;;;;;;;;;;gBAW/BA;;;YAhGf,SAAS;CAAE,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,UAAA,KAAA,EAAA;YAO1C,SAAS;CAAE,WAAW;CAAe,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,cAAA,KAAA,EAAA;YAMrD,SAAS;CAAE,WAAW;CAAsB,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,oBAAA,KAAA,EAAA;YAM5D,SAAS;CAAE,WAAW;CAAyB,MAAM;CAAS,CAAC,CAAA,EAAA,wBAAA,WAAA,uBAAA,KAAA,EAAA;YAM/D,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAsB,SAAS;CAAM,CAAC,CAAA,EAAA,wBAAA,WAAA,oBAAA,KAAA,EAAA;YAG1E,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,EACxD,OAAO,CAAA,EAAA,wBAAA,WAAA,WAAA,KAAA,EAAA;sCAlCTC,cAAc,6BAAmC,CAAA,EAAA,wBAAA;AAwGlD,IAAA,iCAAe"}