@carbon/ibm-products-web-components 0.20.1 → 0.21.0-rc.0

package/es-custom/components/notification-panel/notification-panel.scss.js

@@ -7,7 +7,7 @@
 
 import { css } from 'lit';
 
-var styles = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-feature-settings:\"liga\" 1;font-size:100%;margin:0;padding:0;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-custom-background,#fff);color:var(--cds-custom-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-custom-heading-06-font-size,2.625rem);font-weight:var(--cds-custom-heading-06-font-weight,300);letter-spacing:var(--cds-custom-heading-06-letter-spacing,0);line-height:var(--cds-custom-heading-06-line-height,1.199)}h2{font-size:var(--cds-custom-heading-05-font-size,2rem);font-weight:var(--cds-custom-heading-05-font-weight,400);letter-spacing:var(--cds-custom-heading-05-letter-spacing,0);line-height:var(--cds-custom-heading-05-line-height,1.25)}h3{font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}h4{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}h5{font-size:var(--cds-custom-heading-02-font-size,1rem);font-weight:var(--cds-custom-heading-02-font-weight,600);letter-spacing:var(--cds-custom-heading-02-letter-spacing,0);line-height:var(--cds-custom-heading-02-line-height,1.5)}h6{font-size:var(--cds-custom-heading-01-font-size,.875rem);font-weight:var(--cds-custom-heading-01-font-weight,600);letter-spacing:var(--cds-custom-heading-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-01-line-height,1.42857)}p{font-size:var(--cds-custom-body-02-font-size,1rem);font-weight:var(--cds-custom-body-02-font-weight,400);letter-spacing:var(--cds-custom-body-02-letter-spacing,0);line-height:var(--cds-custom-body-02-line-height,1.5)}a{color:var(--cds-custom-link-primary,#0062fe)}em{font-style:italic}@keyframes c4p--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes c4p--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes c4p--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}}.c4p--layout--size-xs{--c4p-layout-size-height-context:var(--c4p-layout-size-height-xs,1.5rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-xs{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-xs,1.5rem))}.c4p--layout-constraint--size__min-xs{--c4p-layout-size-height-min:var(--c4p-layout-size-height-xs,1.5rem)}.c4p--layout-constraint--size__max-xs{--c4p-layout-size-height-max:var(--c4p-layout-size-height-xs,1.5rem)}.c4p--layout--size-sm{--c4p-layout-size-height-context:var(--c4p-layout-size-height-sm,2rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-sm{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-sm,2rem))}.c4p--layout-constraint--size__min-sm{--c4p-layout-size-height-min:var(--c4p-layout-size-height-sm,2rem)}.c4p--layout-constraint--size__max-sm{--c4p-layout-size-height-max:var(--c4p-layout-size-height-sm,2rem)}.c4p--layout--size-md{--c4p-layout-size-height-context:var(--c4p-layout-size-height-md,2.5rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-md{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-md,2.5rem))}.c4p--layout-constraint--size__min-md{--c4p-layout-size-height-min:var(--c4p-layout-size-height-md,2.5rem)}.c4p--layout-constraint--size__max-md{--c4p-layout-size-height-max:var(--c4p-layout-size-height-md,2.5rem)}.c4p--layout--size-lg{--c4p-layout-size-height-context:var(--c4p-layout-size-height-lg,3rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-lg{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-lg,3rem))}.c4p--layout-constraint--size__min-lg{--c4p-layout-size-height-min:var(--c4p-layout-size-height-lg,3rem)}.c4p--layout-constraint--size__max-lg{--c4p-layout-size-height-max:var(--c4p-layout-size-height-lg,3rem)}.c4p--layout--size-xl{--c4p-layout-size-height-context:var(--c4p-layout-size-height-xl,4rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-xl{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-xl,4rem))}.c4p--layout-constraint--size__min-xl{--c4p-layout-size-height-min:var(--c4p-layout-size-height-xl,4rem)}.c4p--layout-constraint--size__max-xl{--c4p-layout-size-height-max:var(--c4p-layout-size-height-xl,4rem)}.c4p--layout--size-2xl{--c4p-layout-size-height-context:var(--c4p-layout-size-height-2xl,5rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-2xl{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-2xl,5rem))}.c4p--layout-constraint--size__min-2xl{--c4p-layout-size-height-min:var(--c4p-layout-size-height-2xl,5rem)}.c4p--layout-constraint--size__max-2xl{--c4p-layout-size-height-max:var(--c4p-layout-size-height-2xl,5rem)}.c4p--layout--density-condensed{--c4p-layout-density-padding-inline-context:var(--c4p-layout-density-padding-inline-condensed,0.5rem);--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context)}.c4p--layout-constraint--density__default-condensed{--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context,var(--c4p-layout-density-padding-inline-condensed,0.5rem))}.c4p--layout-constraint--density__min-condensed{--c4p-layout-density-padding-inline-min:var(--c4p-layout-density-padding-inline-condensed,0.5rem)}.c4p--layout-constraint--density__max-condensed{--c4p-layout-density-padding-inline-max:var(--c4p-layout-density-padding-inline-condensed,0.5rem)}.c4p--layout--density-normal{--c4p-layout-density-padding-inline-context:var(--c4p-layout-density-padding-inline-normal,1rem);--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context)}.c4p--layout-constraint--density__default-normal{--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context,var(--c4p-layout-density-padding-inline-normal,1rem))}.c4p--layout-constraint--density__min-normal{--c4p-layout-density-padding-inline-min:var(--c4p-layout-density-padding-inline-normal,1rem)}.c4p--layout-constraint--density__max-normal{--c4p-layout-density-padding-inline-max:var(--c4p-layout-density-padding-inline-normal,1rem)}:root{--c4p-layout-size-height-xs:1.5rem;--c4p-layout-size-height-sm:2rem;--c4p-layout-size-height-md:2.5rem;--c4p-layout-size-height-lg:3rem;--c4p-layout-size-height-xl:4rem;--c4p-layout-size-height-2xl:5rem;--c4p-layout-size-height-min:0px;--c4p-layout-size-height-max:999999999px;--c4p-layout-density-padding-inline-condensed:0.5rem;--c4p-layout-density-padding-inline-normal:1rem;--c4p-layout-density-padding-inline-min:0px;--c4p-layout-density-padding-inline-max:999999999px}.c4p--assistive-text,.c4p--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--empty-state{color:var(--cds-custom-text-primary,#161616);display:flex}.c4p--empty-state .c4p--empty-state__header{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4);margin:0;padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-body-01-line-height,1.42857);padding-block-end:1rem}.c4p--empty-state .c4p--empty-state__header--small{font-size:var(--cds-custom-body-compact-02-font-size,1rem);font-weight:var(--cds-custom-body-compact-02-font-weight,400);letter-spacing:var(--cds-custom-body-compact-02-letter-spacing,0);line-height:var(--cds-custom-body-compact-02-line-height,1.375);padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle--small{font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--empty-state__illustration{block-size:auto;margin-block-end:1rem}.c4p--empty-state__illustration.c4p--empty-state__illustration--lg{max-inline-size:5rem;min-inline-size:5rem}.c4p--empty-state__illustration.c4p--empty-state__illustration--sm{max-inline-size:4rem;min-inline-size:4rem}.c4p--empty-state-position--top{flex-direction:column}.c4p--empty-state-position--right{flex-direction:row-reverse}.c4p--empty-state-position--bottom{flex-direction:column-reverse}.c4p--empty-state-position--left{flex-direction:row}.c4p--empty-state .c4p--empty-state__action-button{display:block;margin-block-end:1rem}.c4p--empty-state .c4p--empty-state__link{display:inline-block}@keyframes notifications-panel-fade-in{0%{opacity:0;transform:translateY(-38.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes notifications-panel-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-38.5rem)}}@keyframes notifications-panel-entrance-reduced{0%{opacity:0}to{opacity:1}}@keyframes notifications-panel-exit-reduced{0%{opacity:1}to{opacity:0}}.c4p--notifications-panel__entrance{animation:notifications-panel-fade-in .24s cubic-bezier(.2,0,.38,.9)}.c4p--notifications-panel__exit{animation:notifications-panel-fade-out .24s cubic-bezier(.2,0,.38,.9) forwards}@media (prefers-reduced-motion){.c4p--notifications-panel__entrance{animation:notifications-panel-entrance-reduced .15s cubic-bezier(.2,0,1,.9) forwards}.c4p--notifications-panel__exit{animation:notifications-panel-exit-reduced .15s cubic-bezier(.2,0,1,.9) forwards}}.c4p--notifications-panel__container{background-color:var(--cds-custom-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-custom-border-subtle-02,#e0e0e0);border-inline-start:1px solid var(--cds-custom-border-subtle-02,#e0e0e0);box-shadow:0 .125rem .25rem var(--cds-custom-overlay,hsla(0,0%,9%,.5));color:var(--cds-custom-text-primary,#161616);inset-block-start:3rem;inset-inline-end:0;max-block-size:38.5rem;max-inline-size:22.75rem;min-block-size:38.5rem;min-inline-size:20rem;overflow:auto;position:fixed;transition:transform .11s cubic-bezier(.2,0,.38,.9);z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__header-container{background-color:var(--cds-custom-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:0;padding:.5rem 1rem;position:sticky;z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header-flex{align-items:center;display:flex;justify-content:space-between}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle{padding-block-end:.5rem}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle .cds-custom--toggle__label-text{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--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__dismiss-button{color:var(--cds-custom-text-primary,#161616)}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header{font-size:var(--cds-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572);margin:0}.c4p--notifications-panel__container .c4p--notifications-panel__time-section-label{background-color:var(--cds-custom-layer-01,#f4f4f4);color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);font-weight:600;inset-block-start:3.0625rem;letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);padding:.5rem 1rem;position:sticky;z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__notification:focus,.c4p--notifications-panel__container .c4p--notifications-panel__notification:hover{background-color:var(--cds-custom-layer-accent-01,#e0e0e0)}.c4p--notifications-panel__container .c4p--notifications-panel__notification:focus .c4p--notifications-panel__dismiss-single-button,.c4p--notifications-panel__container .c4p--notifications-panel__notification:hover .c4p--notifications-panel__dismiss-single-button{opacity:1}.c4p--notifications-panel__container .c4p--notifications-panel__notification:focus{border-color:var(--cds-custom-focus,#0f62fe);box-shadow:inset 0 0 0 2px var(--cds-custom-focus,#0f62fe),inset 0 0 0 2px var(--cds-custom-background,#fff);outline:0}.c4p--notifications-panel__container .c4p--notifications-panel__notification{align-items:flex-start;background-color:var(--cds-custom-layer-01,#f4f4f4);border:0;cursor:pointer;display:flex;inline-size:100%;min-block-size:6.25rem;padding:1rem;position:relative;text-align:start;transition:background-color .24s cubic-bezier(.2,0,.38,.9)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-heading-01-font-size,.875rem);font-weight:var(--cds-custom-heading-01-font-weight,600);font-weight:400;letter-spacing:var(--cds-custom-heading-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-01-line-height,1.42857);margin-block-end:.25rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title.c4p--notifications-panel__notification-title-unread{color:var(--cds-custom-text-secondary,#525252);font-weight:600;margin-block-end:.25rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notifications-link{font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon{margin-inline-end:.5rem;min-inline-size:1rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-error{fill:var(--cds-custom-support-error,#da1e28)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success{fill:var(--cds-custom-support-success,#24a148)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning{fill:var(--cds-custom-support-warning,#f1c21b)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-informational{fill:var(--cds-custom-support-info,#0043ce)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label{margin-block-end:.5rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-short-description{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-long-description{display:block;overflow:initial;-webkit-line-clamp:initial;line-clamp:none}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button{align-items:center;display:flex;font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);min-inline-size:5.5rem;padding:0}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transition:transform .24s ease}@media (prefers-reduced-motion:reduce){.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transition:none}}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transform:rotate(0deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon{transform:rotate(180deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .cds-custom--popover-container{position:static}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button{align-items:center;color:var(--cds-custom-text-primary,#161616);display:flex;inset-block-start:0;inset-inline-end:0;justify-content:center;min-inline-size:2rem;opacity:0;padding:0;position:absolute}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:focus,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:hover{opacity:1}.c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-today:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before{background-color:var(--cds-custom-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:calc(100% - 2rem);inset-block-start:0;margin:0 auto;position:absolute;transition:background-color .24s cubic-bezier(.2,0,.38,.9)}.c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:hover+.c4p--notifications-panel__notification-previous:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover+.c4p--notifications-panel__notification-today:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover+.c4p--notifications-panel__notification-yesterday:not(:first-of-type):before{background-color:transparent}.c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section{align-items:center;block-size:100%;display:flex;justify-content:center;margin-block-start:10rem;min-block-size:0}.c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section .c4p-subtext{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--notifications-panel__container .c4p--notifications-panel__main-section{min-block-size:498px}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions{align-items:center;background-color:var(--cds-custom-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;inset-block-end:0;min-block-size:2.5rem;position:sticky;z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__view-all-button{align-items:center;block-size:2.5rem;border-inline-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);color:var(--cds-custom-text-primary,#161616);display:flex;inline-size:100%;max-inline-size:calc(100% - 2.5rem);min-block-size:2.5rem}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button{align-items:center;block-size:2.5rem;color:var(--cds-custom-text-primary,#161616);display:flex;justify-content:center;min-block-size:2.5rem;min-inline-size:2.5rem;padding:0}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button .cds-custom--btn__icon{margin:0}.c4p--notifications-panel__header-container:has(.c4p--notifications-panel__do-not-disturb-toggle)+.c4p--notifications-panel__main-section .c4p--notifications-panel__time-section-label{inset-block-start:4.8125rem}:host(c4p-notification-panel) .c4p--notifications-panel__do-not-disturb-toggle{display:block;margin-block-start:-1rem}:host(c4p-notification-panel) ::slotted(.c4p--notifications-panel__bottom-actions){align-items:center;display:flex}.c4p--notifications-panel__header-container{--cds-custom-heading-06-font-size:--cds-custom-heading-compact-01-font-size;--cds-custom-heading-06-font-weight:--cds-custom-heading-compact-01-font-weight;--cds-custom-heading-06-line-height:--cds-custom-heading-compact-01-line-height;--cds-custom-heading-06-letter-spacing:--cds-custom-heading-compact-01-letter-spacing}.c4p--notifications-panel__dismiss-button{--cds-custom-link-primary:--cds-custom-text-primary;--cds-custom-link-primary-hover:--cds-custom-text-primary}.c4p--notifications-panel__bottom-actions-container{background-color:var(--cds-custom-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-end:0;min-block-size:2.5rem;position:sticky;z-index:2}"]);
+var styles = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-feature-settings:\"liga\" 1;font-size:100%;margin:0;padding:0;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-custom-background,#fff);color:var(--cds-custom-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-custom-heading-06-font-size,2.625rem);font-weight:var(--cds-custom-heading-06-font-weight,300);letter-spacing:var(--cds-custom-heading-06-letter-spacing,0);line-height:var(--cds-custom-heading-06-line-height,1.199)}h2{font-size:var(--cds-custom-heading-05-font-size,2rem);font-weight:var(--cds-custom-heading-05-font-weight,400);letter-spacing:var(--cds-custom-heading-05-letter-spacing,0);line-height:var(--cds-custom-heading-05-line-height,1.25)}h3{font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}h4{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}h5{font-size:var(--cds-custom-heading-02-font-size,1rem);font-weight:var(--cds-custom-heading-02-font-weight,600);letter-spacing:var(--cds-custom-heading-02-letter-spacing,0);line-height:var(--cds-custom-heading-02-line-height,1.5)}h6{font-size:var(--cds-custom-heading-01-font-size,.875rem);font-weight:var(--cds-custom-heading-01-font-weight,600);letter-spacing:var(--cds-custom-heading-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-01-line-height,1.42857)}p{font-size:var(--cds-custom-body-02-font-size,1rem);font-weight:var(--cds-custom-body-02-font-weight,400);letter-spacing:var(--cds-custom-body-02-letter-spacing,0);line-height:var(--cds-custom-body-02-line-height,1.5)}a{color:var(--cds-custom-link-primary,#0062fe)}em{font-style:italic}@keyframes c4p--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes c4p--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes c4p--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}}.c4p--layout--size-xs{--c4p-layout-size-height-context:var(--c4p-layout-size-height-xs,1.5rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-xs{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-xs,1.5rem))}.c4p--layout-constraint--size__min-xs{--c4p-layout-size-height-min:var(--c4p-layout-size-height-xs,1.5rem)}.c4p--layout-constraint--size__max-xs{--c4p-layout-size-height-max:var(--c4p-layout-size-height-xs,1.5rem)}.c4p--layout--size-sm{--c4p-layout-size-height-context:var(--c4p-layout-size-height-sm,2rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-sm{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-sm,2rem))}.c4p--layout-constraint--size__min-sm{--c4p-layout-size-height-min:var(--c4p-layout-size-height-sm,2rem)}.c4p--layout-constraint--size__max-sm{--c4p-layout-size-height-max:var(--c4p-layout-size-height-sm,2rem)}.c4p--layout--size-md{--c4p-layout-size-height-context:var(--c4p-layout-size-height-md,2.5rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-md{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-md,2.5rem))}.c4p--layout-constraint--size__min-md{--c4p-layout-size-height-min:var(--c4p-layout-size-height-md,2.5rem)}.c4p--layout-constraint--size__max-md{--c4p-layout-size-height-max:var(--c4p-layout-size-height-md,2.5rem)}.c4p--layout--size-lg{--c4p-layout-size-height-context:var(--c4p-layout-size-height-lg,3rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-lg{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-lg,3rem))}.c4p--layout-constraint--size__min-lg{--c4p-layout-size-height-min:var(--c4p-layout-size-height-lg,3rem)}.c4p--layout-constraint--size__max-lg{--c4p-layout-size-height-max:var(--c4p-layout-size-height-lg,3rem)}.c4p--layout--size-xl{--c4p-layout-size-height-context:var(--c4p-layout-size-height-xl,4rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-xl{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-xl,4rem))}.c4p--layout-constraint--size__min-xl{--c4p-layout-size-height-min:var(--c4p-layout-size-height-xl,4rem)}.c4p--layout-constraint--size__max-xl{--c4p-layout-size-height-max:var(--c4p-layout-size-height-xl,4rem)}.c4p--layout--size-2xl{--c4p-layout-size-height-context:var(--c4p-layout-size-height-2xl,5rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-2xl{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-2xl,5rem))}.c4p--layout-constraint--size__min-2xl{--c4p-layout-size-height-min:var(--c4p-layout-size-height-2xl,5rem)}.c4p--layout-constraint--size__max-2xl{--c4p-layout-size-height-max:var(--c4p-layout-size-height-2xl,5rem)}.c4p--layout--density-condensed{--c4p-layout-density-padding-inline-context:var(--c4p-layout-density-padding-inline-condensed,0.5rem);--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context)}.c4p--layout-constraint--density__default-condensed{--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context,var(--c4p-layout-density-padding-inline-condensed,0.5rem))}.c4p--layout-constraint--density__min-condensed{--c4p-layout-density-padding-inline-min:var(--c4p-layout-density-padding-inline-condensed,0.5rem)}.c4p--layout-constraint--density__max-condensed{--c4p-layout-density-padding-inline-max:var(--c4p-layout-density-padding-inline-condensed,0.5rem)}.c4p--layout--density-normal{--c4p-layout-density-padding-inline-context:var(--c4p-layout-density-padding-inline-normal,1rem);--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context)}.c4p--layout-constraint--density__default-normal{--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context,var(--c4p-layout-density-padding-inline-normal,1rem))}.c4p--layout-constraint--density__min-normal{--c4p-layout-density-padding-inline-min:var(--c4p-layout-density-padding-inline-normal,1rem)}.c4p--layout-constraint--density__max-normal{--c4p-layout-density-padding-inline-max:var(--c4p-layout-density-padding-inline-normal,1rem)}:root{--c4p-layout-size-height-xs:1.5rem;--c4p-layout-size-height-sm:2rem;--c4p-layout-size-height-md:2.5rem;--c4p-layout-size-height-lg:3rem;--c4p-layout-size-height-xl:4rem;--c4p-layout-size-height-2xl:5rem;--c4p-layout-size-height-min:0px;--c4p-layout-size-height-max:999999999px;--c4p-layout-density-padding-inline-condensed:0.5rem;--c4p-layout-density-padding-inline-normal:1rem;--c4p-layout-density-padding-inline-min:0px;--c4p-layout-density-padding-inline-max:999999999px}.c4p--assistive-text,.c4p--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--empty-state{color:var(--cds-custom-text-primary,#161616);display:flex}.c4p--empty-state .c4p--empty-state__header{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4);margin:0;padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-body-01-line-height,1.42857);padding-block-end:1rem}.c4p--empty-state .c4p--empty-state__header--small{font-size:var(--cds-custom-body-compact-02-font-size,1rem);font-weight:var(--cds-custom-body-compact-02-font-weight,400);letter-spacing:var(--cds-custom-body-compact-02-letter-spacing,0);line-height:var(--cds-custom-body-compact-02-line-height,1.375);padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle--small{font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--empty-state__illustration{block-size:auto;margin-block-end:1rem}.c4p--empty-state__illustration.c4p--empty-state__illustration--lg{max-inline-size:5rem;min-inline-size:5rem}.c4p--empty-state__illustration.c4p--empty-state__illustration--sm{max-inline-size:4rem;min-inline-size:4rem}.c4p--empty-state-position--top{flex-direction:column}.c4p--empty-state-position--right{flex-direction:row-reverse}.c4p--empty-state-position--bottom{flex-direction:column-reverse}.c4p--empty-state-position--left{flex-direction:row}.c4p--empty-state .c4p--empty-state__action-button{display:block;margin-block-end:1rem}.c4p--empty-state .c4p--empty-state__link{display:inline-block}@keyframes notifications-panel-fade-in{0%{opacity:0;transform:translateY(-38.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes notifications-panel-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-38.5rem)}}@keyframes notifications-panel-entrance-reduced{0%{opacity:0}to{opacity:1}}@keyframes notifications-panel-exit-reduced{0%{opacity:1}to{opacity:0}}.c4p--notifications-panel__entrance{animation:notifications-panel-fade-in .24s cubic-bezier(.2,0,.38,.9)}.c4p--notifications-panel__exit{animation:notifications-panel-fade-out .24s cubic-bezier(.2,0,.38,.9) forwards}@media (prefers-reduced-motion){.c4p--notifications-panel__entrance{animation:notifications-panel-entrance-reduced .15s cubic-bezier(.2,0,1,.9) forwards}.c4p--notifications-panel__exit{animation:notifications-panel-exit-reduced .15s cubic-bezier(.2,0,1,.9) forwards}}.c4p--notifications-panel__container{background-color:var(--cds-custom-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-custom-border-subtle-02,#e0e0e0);border-inline-start:1px solid var(--cds-custom-border-subtle-02,#e0e0e0);box-shadow:0 .125rem .25rem var(--cds-custom-overlay,hsla(0,0%,9%,.5));color:var(--cds-custom-text-primary,#161616);inset-block-start:3rem;inset-inline-end:0;max-block-size:38.5rem;max-inline-size:22.75rem;min-block-size:38.5rem;min-inline-size:20rem;overflow:auto;position:fixed;transition:transform .11s cubic-bezier(.2,0,.38,.9);z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__header-container{background-color:var(--cds-custom-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:0;padding:.5rem 1rem;position:sticky;z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header-flex{align-items:center;display:flex;justify-content:space-between}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle{padding-block-end:.5rem}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle .cds-custom--toggle__label-text{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--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__dismiss-button{color:var(--cds-custom-text-primary,#161616)}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header{font-size:var(--cds-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572);margin:0}.c4p--notifications-panel__container .c4p--notifications-panel__time-section-label{background-color:var(--cds-custom-layer-01,#f4f4f4);color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);font-weight:600;inset-block-start:3.0625rem;letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);padding:.5rem 1rem;position:sticky;z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__notification:focus,.c4p--notifications-panel__container .c4p--notifications-panel__notification:hover{background-color:var(--cds-custom-layer-accent-01,#e0e0e0)}.c4p--notifications-panel__container .c4p--notifications-panel__notification:focus .c4p--notifications-panel__dismiss-single-button,.c4p--notifications-panel__container .c4p--notifications-panel__notification:hover .c4p--notifications-panel__dismiss-single-button{opacity:1}.c4p--notifications-panel__container .c4p--notifications-panel__notification:focus{border-color:var(--cds-custom-focus,#0f62fe);box-shadow:inset 0 0 0 2px var(--cds-custom-focus,#0f62fe),inset 0 0 0 2px var(--cds-custom-background,#fff);outline:0}.c4p--notifications-panel__container .c4p--notifications-panel__notification{align-items:flex-start;background-color:var(--cds-custom-layer-01,#f4f4f4);border:0;cursor:pointer;display:flex;inline-size:100%;min-block-size:6.25rem;padding:1rem;position:relative;text-align:start;transition:background-color .24s cubic-bezier(.2,0,.38,.9)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-heading-01-font-size,.875rem);font-weight:var(--cds-custom-heading-01-font-weight,600);font-weight:400;letter-spacing:var(--cds-custom-heading-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-01-line-height,1.42857);margin-block-end:.25rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title.c4p--notifications-panel__notification-title-unread{color:var(--cds-custom-text-secondary,#525252);font-weight:600;margin-block-end:.25rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notifications-link{font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon{margin-inline-end:.5rem;min-inline-size:1rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-error{fill:var(--cds-custom-support-error,#da1e28)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success{fill:var(--cds-custom-support-success,#24a148)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning{fill:var(--cds-custom-support-warning,#f1c21b)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-informational{fill:var(--cds-custom-support-info,#0043ce)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label{margin-block-end:.5rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-short-description{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-long-description{display:block;overflow:initial;-webkit-line-clamp:initial;line-clamp:none}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button{align-items:center;display:flex;font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);min-inline-size:5.5rem;padding:0}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transition:transform .24s ease}@media (prefers-reduced-motion:reduce){.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transition:none}}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transform:rotate(0deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon{transform:rotate(180deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .cds-custom--popover-container{position:static}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button{align-items:center;color:var(--cds-custom-text-primary,#161616);display:flex;inset-block-start:0;inset-inline-end:0;justify-content:center;min-inline-size:2rem;opacity:0;padding:0;position:absolute}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:focus,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:hover{opacity:1}.c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-today:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before{background-color:var(--cds-custom-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:calc(100% - 2rem);inset-block-start:0;margin:0 auto;position:absolute;transition:background-color .24s cubic-bezier(.2,0,.38,.9)}.c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:hover+.c4p--notifications-panel__notification-previous:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover+.c4p--notifications-panel__notification-today:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover+.c4p--notifications-panel__notification-yesterday:not(:first-of-type):before{background-color:transparent}.c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section{align-items:center;block-size:100%;display:flex;justify-content:center;margin-block-start:10rem;min-block-size:0}.c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section .c4p-subtext{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--notifications-panel__container .c4p--notifications-panel__main-section{min-block-size:498px}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions{align-items:center;background-color:var(--cds-custom-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;inset-block-end:0;min-block-size:2.5rem;position:sticky;z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__view-all-button{align-items:center;block-size:2.5rem;border-inline-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);color:var(--cds-custom-text-primary,#161616);display:flex;inline-size:100%;max-inline-size:calc(100% - 2.5rem);min-block-size:2.5rem}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button{align-items:center;block-size:2.5rem;color:var(--cds-custom-text-primary,#161616);display:flex;justify-content:center;min-block-size:2.5rem;min-inline-size:2.5rem;padding:0}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button .cds-custom--btn__icon{margin:0}.c4p--notifications-panel__header-container:has(.c4p--notifications-panel__do-not-disturb-toggle)+.c4p--notifications-panel__main-section .c4p--notifications-panel__time-section-label{inset-block-start:4.8125rem}:host(c4p-notification-panel) .c4p--notifications-panel__do-not-disturb-toggle{display:block}:host(c4p-notification-panel) ::slotted(.c4p--notifications-panel__bottom-actions){align-items:center;display:flex}.c4p--notifications-panel__header-container{--cds-custom-heading-06-font-size:--cds-custom-heading-compact-01-font-size;--cds-custom-heading-06-font-weight:--cds-custom-heading-compact-01-font-weight;--cds-custom-heading-06-line-height:--cds-custom-heading-compact-01-line-height;--cds-custom-heading-06-letter-spacing:--cds-custom-heading-compact-01-letter-spacing}.c4p--notifications-panel__dismiss-button{--cds-custom-link-primary:--cds-custom-text-primary;--cds-custom-link-primary-hover:--cds-custom-text-primary}.c4p--notifications-panel__bottom-actions-container{background-color:var(--cds-custom-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-end:0;min-block-size:2.5rem;position:sticky;z-index:2}"]);
 
 export { styles as default };
 //# sourceMappingURL=notification-panel.scss.js.map

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

@@ -0,0 +1,98 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Calculates the size (width or height) of a given HTML element.
+ *
+ * This function performs an expensive calculation by temporarily changing the
+ * display style of the element if it is not currently visible. It then uses
+ * `getBoundingClientRect` to retrieve the size of the element.
+ *
+ * @param el - The HTML element whose size is to be calculated.
+ * @param dimension - The dimension to measure ('width' or 'height').
+ * @returns The size of the element in pixels. Returns 0 if the element is not provided.
+ */
+export declare function getSize(el: HTMLElement, dimension: 'width' | 'height'): number;
+/**
+ * Options for updating the overflow handler.
+ * Determines which items should be visible and which should be hidden
+ * based on the container size, item sizes, and other constraints.
+ */
+export interface UpdateOverflowHandlerOptions {
+    /** The container element that holds the items. */
+    container: HTMLElement;
+    /** An array of item elements to be managed for overflow. */
+    items: HTMLElement[];
+    /** An element that represents the offset, which can be shown or hidden based on overflow. Identified by `data-offset` attribute. */
+    offset: HTMLElement;
+    /** An array of sizes corresponding to each item in the `items` array. */
+    sizes: number[];
+    /** An array of sizes corresponding to each item in the fixed items array. */
+    fixedSizes: number[];
+    /** The size of the offset element. */
+    offsetSize: number;
+    /** The maximum number of items that can be visible at once. If undefined, all items can be visible. */
+    maxVisibleItems?: number;
+    /** The dimension to consider for overflow, either 'width' or 'height'. */
+    dimension: 'width' | 'height';
+    /** A callback function that is called when the visible or hidden items change. */
+    onChange: (visibleItems: HTMLElement[], hiddenItems: HTMLElement[]) => void;
+    /** An array of previously hidden items to compare against the new hidden items. */
+    previousHiddenItems?: HTMLElement[];
+    offsetValue?: number;
+}
+/**
+ * Updates the overflow handler by determining which items should be visible and which should be hidden.
+ *
+ * @param options - Configuration options for updating the overflow handler.
+ * @param options.container - Container for overflowing
+ * @param options.items - Child elements within container
+ * @param options.offset - Children with data-offset attribute
+ * @param options.sizes - Sizes of child elements
+ * @param options.fixedSizes - Fixed sizes of child elements with data-fixed attribute
+ * @param options.offsetSize - Total offset size
+ * @param options.offsetValue - Additional offset
+ * @param options.maxVisibleItems - Max visible items
+ * @param options.dimension - width | height used to measure overflow
+ * @param options.onChange - onChange callback
+ * @param options.previousHiddenItems - Array of previously hidden items
+ * @returns An array of hidden items after the update.
+ */
+export declare function updateOverflowHandler({ container, items, offset, sizes, fixedSizes, offsetSize, maxVisibleItems, dimension, onChange, previousHiddenItems, offsetValue, }: UpdateOverflowHandlerOptions): HTMLElement[];
+/**
+ * Options for initializing an overflow handler.
+ */
+export interface OverflowHandlerOptions {
+    /**
+     * The container element that holds the items. along with offset item
+     */
+    container: HTMLElement;
+    /**
+     * Maximum number of visible items. If provided, only this number of items will be shown.
+     */
+    maxVisibleItems?: number;
+    /**
+     * Callback function invoked when the visible and hidden items change.
+     * @param visibleItems - The array of items that are currently visible.
+     * @param hiddenItems - The array of items that are currently hidden.
+     */
+    onChange: (visibleItems: HTMLElement[], hiddenItems: HTMLElement[]) => void;
+    /**
+     * The dimension to consider for overflow calculations. Defaults to 'width'.
+     */
+    dimension?: 'width' | 'height';
+    offsetValue?: number;
+}
+/**
+ * Represents an instance of an overflow handler.
+ */
+export interface OverflowHandler {
+    /**
+     * Disconnects the overflow handler, cleaning up any event listeners or resources.
+     */
+    disconnect: () => void;
+}
+export declare function createOverflowHandler({ container, maxVisibleItems, onChange, dimension, offsetValue, }: OverflowHandlerOptions): OverflowHandler;

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

@@ -0,0 +1,156 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// TODO: delete this file after overflowHandler from carbon/utils gets updated
+/**
+ * Calculates the size (width or height) of a given HTML element.
+ *
+ * This function performs an expensive calculation by temporarily changing the
+ * display style of the element if it is not currently visible. It then uses
+ * `getBoundingClientRect` to retrieve the size of the element.
+ *
+ * @param el - The HTML element whose size is to be calculated.
+ * @param dimension - The dimension to measure ('width' or 'height').
+ * @returns The size of the element in pixels. Returns 0 if the element is not provided.
+ */
+function getSize(el, dimension) {
+    if (!el) {
+        return 0;
+    }
+    const originalDisplay = el.style.display;
+    if (!el.offsetParent && getComputedStyle(el).display === 'none') {
+        el.style.display = 'inline-block';
+    }
+    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);
+    return size;
+}
+/**
+ * Updates the overflow handler by determining which items should be visible and which should be hidden.
+ *
+ * @param options - Configuration options for updating the overflow handler.
+ * @param options.container - Container for overflowing
+ * @param options.items - Child elements within container
+ * @param options.offset - Children with data-offset attribute
+ * @param options.sizes - Sizes of child elements
+ * @param options.fixedSizes - Fixed sizes of child elements with data-fixed attribute
+ * @param options.offsetSize - Total offset size
+ * @param options.offsetValue - Additional offset
+ * @param options.maxVisibleItems - Max visible items
+ * @param options.dimension - width | height used to measure overflow
+ * @param options.onChange - onChange callback
+ * @param options.previousHiddenItems - Array of previously hidden items
+ * @returns An array of hidden items after the update.
+ */
+function updateOverflowHandler({ container, items, offset, sizes, fixedSizes, offsetSize, maxVisibleItems, dimension, onChange, previousHiddenItems = [], offsetValue = 0, }) {
+    const containerSize = dimension === 'width' ? container.clientWidth : container.clientHeight;
+    let visibleItems = [];
+    let hiddenItems = [];
+    const totalSize = sizes.reduce((sum, size) => sum + size, 0);
+    const totalFixedSize = fixedSizes.reduce((sum, size) => sum + size, 0);
+    if (totalSize + totalFixedSize <= containerSize) {
+        visibleItems = maxVisibleItems
+            ? items.slice(0, maxVisibleItems)
+            : [...items];
+        hiddenItems = maxVisibleItems ? items.slice(maxVisibleItems) : [];
+    }
+    else {
+        const available = containerSize - offsetSize - totalFixedSize - offsetValue;
+        let accumulated = 0;
+        let breakIndex = items.length;
+        for (let i = 0; i < items.length; i++) {
+            const size = sizes[i];
+            if (accumulated + size <= available &&
+                (!maxVisibleItems || visibleItems.length < maxVisibleItems)) {
+                visibleItems.push(items[i]);
+                accumulated += size;
+            }
+            else {
+                breakIndex = i;
+                break;
+            }
+        }
+        hiddenItems = items.slice(breakIndex);
+    }
+    if (previousHiddenItems.length === hiddenItems.length &&
+        previousHiddenItems.every((item, index) => item === hiddenItems[index])) {
+        return previousHiddenItems;
+    }
+    visibleItems.forEach((item) => item.removeAttribute('data-hidden'));
+    hiddenItems.forEach((item) => item.setAttribute('data-hidden', ''));
+    if (offset) {
+        offset.toggleAttribute('data-hidden', hiddenItems.length === 0);
+    }
+    onChange(visibleItems, hiddenItems);
+    return hiddenItems;
+}
+function createOverflowHandler({ container, maxVisibleItems, onChange, dimension = 'width', offsetValue = 0, }) {
+    // Error handling
+    if (!(container instanceof HTMLElement)) {
+        throw new Error('container must be an HTMLElement');
+    }
+    if (typeof onChange !== 'function') {
+        throw new Error('onChange must be a function');
+    }
+    if (maxVisibleItems !== undefined &&
+        (!Number.isInteger(maxVisibleItems) || maxVisibleItems <= 0)) {
+        throw new Error('maxVisibleItems must be a positive integer');
+    }
+    const children = Array.from(container.children);
+    const offset = children.find((item) => item.hasAttribute('data-offset'));
+    const fixedItems = children.filter((item) => item.hasAttribute('data-fixed'));
+    const items = children.filter((item) => item !== offset && !fixedItems.includes(item));
+    const fixedSizes = fixedItems.map((item) => getSize(item, dimension));
+    const sizes = items.map((item) => getSize(item, dimension));
+    const offsetSize = getSize(offset, dimension);
+    let previousHiddenItems = [];
+    function update() {
+        previousHiddenItems = updateOverflowHandler({
+            container,
+            items,
+            offset,
+            sizes,
+            fixedSizes,
+            offsetSize,
+            maxVisibleItems,
+            dimension,
+            onChange,
+            previousHiddenItems,
+            offsetValue,
+        });
+    }
+    const resizeObserver = new ResizeObserver(() => requestAnimationFrame(update));
+    resizeObserver.observe(container);
+    requestAnimationFrame(update); // Initial update
+    return {
+        disconnect() {
+            resizeObserver.disconnect();
+        },
+    };
+}
+
+export { createOverflowHandler, getSize, updateOverflowHandler };
+//# sourceMappingURL=overflowHandler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overflowHandler.js","sources":["../../../../src/components/page-header/_story-assets/overflowHandler.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/es-custom/components/page-header/_story-assets/set-of-breadcrumbs.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+import '@carbon/web-components/es-custom/components/breadcrumb/index.js';
+import '@carbon/web-components/es-custom/components/overflow-menu/index.js';
+import '../../truncated-text';
+import '../page-header-title-breadcrumb';
+interface Breadcrumb {
+    text: string;
+    href: string;
+}
+export default class SetOfBreadcrumbs extends LitElement {
+    /**
+     * Hidden items that will be rendered in the overflow menu.
+     */
+    hiddenItems: Breadcrumb[];
+    /**
+     * The list of breadcrumbs.
+     */
+    breadcrumbsData: Breadcrumb[];
+    /**
+     * Container holding all breadcrumbs and the overflow menu.
+     */
+    private container;
+    private overflowHandler;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'set-of-breadcrumbs': SetOfBreadcrumbs;
+    }
+}
+export {};

package/es-custom/components/page-header/_story-assets/set-of-breadcrumbs.js

@@ -0,0 +1,153 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { LitElement, html } from 'lit';
+import { property, query, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
+import '@carbon/web-components/es-custom/components/breadcrumb/index.js';
+import '@carbon/web-components/es-custom/components/overflow-menu/index.js';
+import { createOverflowHandler } from './overflowHandler.js';
+import OverflowMenuHorizontal16 from '@carbon/web-components/es/icons/overflow-menu--horizontal/16.js';
+import '../../truncated-text/truncated-text.js';
+import styles from './set-of-breadcrumbs.scss.js';
+import '../page-header-title-breadcrumb.js';
+
+// cspell:words currentpage
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const blockClass = `c4p--set-of-breadcrumbs`;
+let SetOfBreadcrumbs = class SetOfBreadcrumbs extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Hidden items that will be rendered in the overflow menu.
+         */
+        this.hiddenItems = [];
+        /**
+         * The list of breadcrumbs.
+         */
+        this.breadcrumbsData = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.style.visibility = 'hidden';
+    }
+    firstUpdated() {
+        if (!this.container) {
+            return;
+        }
+        const sr = this.shadowRoot;
+        const breadcrumb = sr === null || sr === void 0 ? void 0 : sr.querySelector('cds-custom-breadcrumb');
+        if (breadcrumb) {
+            breadcrumb.style.display = 'block';
+            requestAnimationFrame(() => {
+                var _a;
+                const ol = (_a = breadcrumb.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ol');
+                if (ol) {
+                    ol.style.display = 'flex';
+                    ol.style.flexWrap = 'unset';
+                }
+            });
+        }
+        this.updateComplete.then(() => {
+            requestAnimationFrame(() => {
+                this.overflowHandler = createOverflowHandler({
+                    offsetValue: 14,
+                    container: this.container,
+                    onChange: (visibleItems, _) => {
+                        var _a;
+                        this.hiddenItems = (_a = this.breadcrumbsData) === null || _a === void 0 ? void 0 : _a.slice(visibleItems.length);
+                    },
+                });
+            });
+        });
+        // On first render, all elements are initially visible. so hiding `this` visibility in connectedCallback
+        // The handler runs on the second render to hide specific elements as needed.
+        // The following line restores visibility after layout settles, allowing for smoother transitions.
+        setTimeout(() => {
+            this.style.visibility = 'visible';
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.overflowHandler) {
+            this.overflowHandler.disconnect();
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        return html `
+      <cds-custom-breadcrumb
+        aria-label="breadcrumbs"
+        class=${classMap({
+            [`${blockClass}`]: true,
+        })}
+      >
+        ${repeat((_b = (_a = this.breadcrumbsData) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) !== null && _b !== void 0 ? _b : [], (item) => { var _a; return (_a = item.href) !== null && _a !== void 0 ? _a : item.text; }, (item) => html `
+            <cds-custom-breadcrumb-item>
+              <cds-custom-breadcrumb-link href="${item.href}">
+                ${item.text}
+              </cds-custom-breadcrumb-link>
+            </cds-custom-breadcrumb-item>
+          `)}
+
+        <cds-custom-breadcrumb-item
+          data-fixed
+          style="display: ${((_c = this.hiddenItems) === null || _c === void 0 ? void 0 : _c.length) >= 2 ? 'flex' : 'none'}"
+        >
+          <cds-custom-overflow-menu breadcrumb="" align="bottom">
+            ${OverflowMenuHorizontal16({
+            slot: 'icon',
+        })}
+            <span slot="tooltip-content"> Breadcrumbs </span>
+            <cds-custom-overflow-menu-body size="sm">
+              ${repeat((_e = (_d = this.hiddenItems) === null || _d === void 0 ? void 0 : _d.slice(0, -1)) !== null && _e !== void 0 ? _e : [], (item) => { var _a; return (_a = item.href) !== null && _a !== void 0 ? _a : item.text; }, (item) => html `
+                  <cds-custom-overflow-menu-item href=${item.href}>
+                    ${item.text}
+                  </cds-custom-overflow-menu-item>
+                `)}
+            </cds-custom-overflow-menu-body>
+          </cds-custom-overflow-menu>
+        </cds-custom-breadcrumb-item>
+        <c4p-page-header-title-breadcrumb data-fixed>
+          <cds-custom-breadcrumb-link is-currentpage="">
+            <c4p-truncated-text
+              value="${this.breadcrumbsData.at(-1).text}"
+              lines="1"
+              autoalign
+            ></c4p-truncated-text>
+          </cds-custom-breadcrumb-link>
+        </c4p-page-header-title-breadcrumb>
+      </cds-custom-breadcrumb>
+    `;
+    }
+};
+SetOfBreadcrumbs.styles = styles;
+__decorate([
+    property({ type: Array })
+], SetOfBreadcrumbs.prototype, "hiddenItems", void 0);
+__decorate([
+    property({ type: Array, attribute: 'breadcrumbs-data', reflect: true })
+], SetOfBreadcrumbs.prototype, "breadcrumbsData", void 0);
+__decorate([
+    query(`.${blockClass}`)
+], SetOfBreadcrumbs.prototype, "container", void 0);
+SetOfBreadcrumbs = __decorate([
+    customElement('set-of-breadcrumbs')
+], SetOfBreadcrumbs);
+var SetOfBreadcrumbs$1 = SetOfBreadcrumbs;
+
+export { SetOfBreadcrumbs$1 as default };
+//# sourceMappingURL=set-of-breadcrumbs.js.map

package/es-custom/components/page-header/_story-assets/set-of-breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-of-breadcrumbs.js","sources":["../../../../src/components/page-header/_story-assets/set-of-breadcrumbs.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}