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

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

@@ -7,7 +7,7 @@
 
 import { css } from "lit";
 //#region src/components/notification-panel/notification-footer.scss?lit
-var notification_footer_default = 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}:root{color-scheme:var(--cds-color-scheme,light)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-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-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);letter-spacing:var(--cds-heading-06-letter-spacing,0);line-height:var(--cds-heading-06-line-height,1.199)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);letter-spacing:var(--cds-heading-05-letter-spacing,0);line-height:var(--cds-heading-05-line-height,1.25)}h3{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)}h4{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)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);letter-spacing:var(--cds-heading-02-letter-spacing,0);line-height:var(--cds-heading-02-line-height,1.5)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-heading-01-line-height,1.42857)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);letter-spacing:var(--cds-body-02-letter-spacing,0);line-height:var(--cds-body-02-line-height,1.5)}a{color:var(--cds-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-text-primary,#161616);display:flex}.c4p--empty-state .c4p--empty-state__header{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);margin:0;padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle{color:var(--cds-text-secondary,#525252);font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);padding-block-end:1rem}.c4p--empty-state .c4p--empty-state__header--small{font-size:var(--cds-body-compact-02-font-size,1rem);font-weight:var(--cds-body-compact-02-font-weight,400);letter-spacing:var(--cds-body-compact-02-letter-spacing,0);line-height:var(--cds-body-compact-02-line-height,1.375);padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle--small{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)}.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-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-border-subtle-02,#e0e0e0);border-inline-start:1px solid var(--cds-border-subtle-02,#e0e0e0);box-shadow:0 .125rem .25rem var(--cds-overlay,rgba(0,0,0,.6));clip-path:inset(0 calc(var(--cds-spacing-01)*-1) calc(var(--cds-spacing-02)*-1) calc(var(--cds-spacing-01)*-1));color:var(--cds-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-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-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 .c4p--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-text-primary,#161616)}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header{font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-heading-compact-01-line-height,1.28572);margin:0}.c4p--notifications-panel__container .c4p--notifications-panel__time-section-label{background-color:var(--cds-layer-01,#f4f4f4);color:var(--cds-text-secondary,#525252);font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);font-weight:600;inset-block-start:3.0625rem;letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-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-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-focus,#0f62fe);box-shadow:inset 0 0 0 2px var(--cds-focus,#0f62fe),inset 0 0 0 2px var(--cds-background,#fff);outline:0}.c4p--notifications-panel__container .c4p--notifications-panel__notification{align-items:flex-start;background-color:var(--cds-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-text-secondary,#525252);font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);font-weight:400;letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-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-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-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)}.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-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-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-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-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-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)}.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-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);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 .c4p--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .c4p--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 .c4p--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .c4p--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 .c4p--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 .c4p--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 .c4p--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 .c4p--btn__icon{transform:rotate(180deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--popover-container{position:static}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button{align-items:center;color:var(--cds-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:focus:before{display:none}.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-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-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--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-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-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-border-subtle-01,#c6c6c6);color:var(--cds-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-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 .c4p--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-footer){display:flex}.c4p--notifications-panel__view-all-button{border-inline-end:1px solid var(--cds-border-subtle-01,#c6c6c6);color:var(--cds-text-primary,#161616);inline-size:100%;max-inline-size:calc(100% - 2.5rem);min-block-size:2.5rem}.c4p--notifications-panel__settings-button,.c4p--notifications-panel__view-all-button{align-items:center;display:flex;--cds-link-primary:$text-primary;--cds-link-primary-hover:$text-primary;--cds-layout-size-height-min:2.5rem;--cds-layout-size-height-sm:2.5rem;--cds-layout-size-height:2.5rem;--cds-layout-size-height-lg:2.5rem;--cds-layout-size-height-max:2.5rem;--cds-layout-size-height-2xl:2.5rem}.c4p--notifications-panel__settings-button{justify-content:center;padding:0}.c4p--notifications-panel__settings-button .cds--btn__icon{margin:0}"]);
+var notification_footer_default = 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}:root{color-scheme:var(--cds-color-scheme,light)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-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-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);letter-spacing:var(--cds-heading-06-letter-spacing,0);line-height:var(--cds-heading-06-line-height,1.199)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);letter-spacing:var(--cds-heading-05-letter-spacing,0);line-height:var(--cds-heading-05-line-height,1.25)}h3{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)}h4{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)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);letter-spacing:var(--cds-heading-02-letter-spacing,0);line-height:var(--cds-heading-02-line-height,1.5)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-heading-01-line-height,1.42857)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);letter-spacing:var(--cds-body-02-letter-spacing,0);line-height:var(--cds-body-02-line-height,1.5)}a{color:var(--cds-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--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-text-primary,#161616);display:flex}.c4p--empty-state .c4p--empty-state__header{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);margin:0;padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle{color:var(--cds-text-secondary,#525252);font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);padding-block-end:1rem}.c4p--empty-state .c4p--empty-state__header--small{font-size:var(--cds-body-compact-02-font-size,1rem);font-weight:var(--cds-body-compact-02-font-weight,400);letter-spacing:var(--cds-body-compact-02-letter-spacing,0);line-height:var(--cds-body-compact-02-line-height,1.375);padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle--small{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)}.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-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-border-subtle-02,#e0e0e0);border-inline-start:1px solid var(--cds-border-subtle-02,#e0e0e0);box-shadow:0 .125rem .25rem var(--cds-overlay,rgba(0,0,0,.6));clip-path:inset(0 calc(var(--cds-spacing-01)*-1) calc(var(--cds-spacing-02)*-1) calc(var(--cds-spacing-01)*-1));color:var(--cds-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-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-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 .c4p--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-text-primary,#161616)}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header{font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-heading-compact-01-line-height,1.28572);margin:0}.c4p--notifications-panel__container .c4p--notifications-panel__time-section-label{background-color:var(--cds-layer-01,#f4f4f4);color:var(--cds-text-secondary,#525252);font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);font-weight:600;inset-block-start:3.0625rem;letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-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-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-focus,#0f62fe);box-shadow:inset 0 0 0 2px var(--cds-focus,#0f62fe),inset 0 0 0 2px var(--cds-background,#fff);outline:0}.c4p--notifications-panel__container .c4p--notifications-panel__notification{align-items:flex-start;background-color:var(--cds-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-text-secondary,#525252);font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);font-weight:400;letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-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-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-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)}.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-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-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-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-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-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)}.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-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);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 .c4p--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .c4p--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 .c4p--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .c4p--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 .c4p--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 .c4p--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 .c4p--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 .c4p--btn__icon{transform:rotate(180deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--popover-container{position:static}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button{align-items:center;color:var(--cds-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:focus:before{display:none}.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-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-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--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-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-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-border-subtle-01,#c6c6c6);color:var(--cds-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-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 .c4p--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-footer){display:flex}.c4p--notifications-panel__view-all-button{border-inline-end:1px solid var(--cds-border-subtle-01,#c6c6c6);color:var(--cds-text-primary,#161616);inline-size:100%;max-inline-size:calc(100% - 2.5rem);min-block-size:2.5rem}.c4p--notifications-panel__settings-button,.c4p--notifications-panel__view-all-button{align-items:center;display:flex;--cds-link-primary:$text-primary;--cds-link-primary-hover:$text-primary;--cds-layout-size-height-min:2.5rem;--cds-layout-size-height-sm:2.5rem;--cds-layout-size-height:2.5rem;--cds-layout-size-height-lg:2.5rem;--cds-layout-size-height-max:2.5rem;--cds-layout-size-height-2xl:2.5rem}.c4p--notifications-panel__settings-button{justify-content:center;padding:0}.c4p--notifications-panel__settings-button .cds--btn__icon{margin:0}"]);
 //#endregion
 export { notification_footer_default as default };
 

package/es/components/notification-panel/notification-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-panel.d.ts","sourceRoot":"","sources":["../../../src/components/notification-panel/notification-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAgBvC,OAAO,sDAAsD,CAAC;AAC9D,OAAO,sDAAsD,CAAC;AAC9D,OAAO,2DAA2D,CAAC;AACnE,OAAO,yCAAyC,CAAC;;;;;;;;;;uBAPL,CAAC;;;;;AAU7C;;;;;;;;;;;;GAYG;AACH,cACM,oBAAqB,SAAQ,yBAA6B;IAC9D;;OAEG;IAEH,SAAS,MAAC;IACV;;OAEG;IAEH,SAAS,MAAC;IACV;;OAEG;IAEH,YAAY,MAAC;IACb;;OAEG;IAEH,IAAI,UAAS;IACb;;OAEG;IAEH,eAAe,MAAC;IAChB;;OAEG;IAEH,eAAe,MAAC;IAChB;;OAEG;IAEH,iBAAiB,MAAC;IAClB;;OAEG;IAEH,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAE/B;;;OAGG;IAEH,cAAc,CAAC,EAAE,MAAM,CAAC;IAIxB,OAAO,CAAC,eAAe,CAAqB;IAE5C,OAAO,CAAC,SAAS,CAAmB;IAEpC,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,gBAAgB,CAAS;IAGjC,OAAO,CAAC,mBAAmB,CAAS;IAGpC,cAAc,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAGpC,iBAAiB,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IACvC,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAE7C,UAAU,CAAC,iBAAiB,EAAE,GAAG;IAajC,YAAY;IAkCZ,OAAO;IAOP,MAAM;IAyFN,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,sBAAsB;IAM9B,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,sBAAsB;IAwB9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAmBlC,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,cAAc,CAoBpB;IAIF,OAAO,CAAC,YAAY,CAgGlB;IAEF;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,eAAe,WAEzB;IAED;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IACD,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"notification-panel.d.ts","sourceRoot":"","sources":["../../../src/components/notification-panel/notification-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAgBvC,OAAO,sDAAsD,CAAC;AAC9D,OAAO,sDAAsD,CAAC;AAC9D,OAAO,2DAA2D,CAAC;AACnE,OAAO,yCAAyC,CAAC;;;;;;;;;;uBAPL,CAAC;;;;;AAU7C;;;;;;;;;;;;GAYG;AACH,cACM,oBAAqB,SAAQ,yBAA6B;IAC9D;;OAEG;IAEH,SAAS,MAAC;IACV;;OAEG;IAEH,SAAS,MAAC;IACV;;OAEG;IAEH,YAAY,MAAC;IACb;;OAEG;IAEH,IAAI,UAAS;IACb;;OAEG;IAEH,eAAe,MAAC;IAChB;;OAEG;IAEH,eAAe,MAAC;IAChB;;OAEG;IAEH,iBAAiB,MAAC;IAClB;;OAEG;IAEH,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAE/B;;;OAGG;IAEH,cAAc,CAAC,EAAE,MAAM,CAAC;IAIxB,OAAO,CAAC,eAAe,CAAqB;IAE5C,OAAO,CAAC,SAAS,CAAmB;IAEpC,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,gBAAgB,CAAS;IAGjC,OAAO,CAAC,mBAAmB,CAAS;IAGpC,cAAc,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAGpC,iBAAiB,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IACvC,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAE7C,UAAU,CAAC,iBAAiB,EAAE,GAAG;IAajC,YAAY;IAkCZ,OAAO;IAOP,MAAM;IAgGN,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,sBAAsB;IAM9B,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,sBAAsB;IAwB9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAmBlC,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,cAAc,CAwBpB;IAIF,OAAO,CAAC,YAAY,CAgGlB;IAEF;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,eAAe,WAEzB;IAED;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IACD,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,oBAAoB,CAAC"}

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

@@ -50,8 +50,10 @@ let CDSNotificationPanel = class CDSNotificationPanel extends HostListenerMixin(
 		this.open = false;
 		this._hasTodayContent = false;
 		this._hasPreviousContent = false;
-		this._handleKeydown = ({ key, target }) => {
+		this._handleKeydown = (event) => {
+			const { key, target } = event;
 			if (key === "Escape") {
+				if (event.defaultPrevented) return;
 				this.open = false;
 				const init = {
 					bubbles: true,
@@ -74,7 +76,7 @@ let CDSNotificationPanel = class CDSNotificationPanel extends HostListenerMixin(
 				"textarea",
 				"[role=\"button\"]",
 				"[role=\"link\"]",
-				"[tabindex]:not([tabindex=\"-1\"]",
+				"[tabindex]:not([tabindex=\"-1\"])",
 				"cds-button",
 				"cds-link",
 				"cds-accordion-item",
@@ -168,14 +170,21 @@ let CDSNotificationPanel = class CDSNotificationPanel extends HostListenerMixin(
 	render() {
 		const { titleText, todayText, previousText, dismissAllLabel, emptyStateLabel, doNotDisturbLabel, open, _hasTodayContent, _hasPreviousContent, _onDismissAllNotifications: onDismissAllNotifications, _handleToggle: handleToggle } = this;
 		return html`
-      <div role="dialog" tabindex="0" class=${classMap({
+      <div
+        role="dialog"
+        tabindex="0"
+        class=${classMap({
 			[`${blockClass}__container`]: true,
 			[`${blockClass}__entrance`]: open,
 			[`${blockClass}__exit`]: !open
-		})}>
+		})}
+        aria-labelledby="notifications-panel-title"
+      >
         <div class="${blockClass}__header-container">
           <div class="${blockClass}__header-flex">
-            <h2 class="${blockClass}__header">${titleText}</h2>
+            <h2 id="notifications-panel-title" class="${blockClass}__header">
+              ${titleText}
+            </h2>
             <cds-button
               size="sm"
               kind="ghost"

package/es/components/notification-panel/notification-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-panel.js","names":["styles","customElement"],"sources":["../../../src/components/notification-panel/notification-panel.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023, 2024\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 {\n  state,\n  property,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { provide } from '@lit/context';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport styles from './notification-panel.scss?lit';\nimport { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { dateTimeLocaleContext } from './date-time-context';\nimport '@carbon/web-components/es/components/button/index.js';\nimport '@carbon/web-components/es/components/toggle/index.js';\nimport '@carbon/web-components/es/components/icon-button/index.js';\nimport '@carbon-labs/wc-empty-state/es/index.js';\n\nconst blockClass = `${prefix}--notifications-panel`;\n/**\n * NotificationPanel.\n *\n * @element c4p-notification-panel\n * @csspart dialog The dialog.\n * @slot today - Today Section.\n * @slot previous - Previous Section.\n * @slot footer - Footer for the Panel.\n * @fires c4p-notification-panel-beingclosed - The custom event before notification-panel is closed.\n * @fires c4p-notification-dismiss-all - The custom event fired after notification-panel is closed upon a user gesture.\n * @fires c4p-notification-donot-disturb-change - The custom event fired after notification-panel is closed upon a user gesture.\n * @fires c4p-notification-click-outside - The custom event fired after user clicks outside the panel or Esc key is pressed.\n */\n@customElement(`${prefix}-notification-panel`)\nclass CDSNotificationPanel extends HostListenerMixin(LitElement) {\n  /**\n   * Sets the Title for the Notification panel\n   */\n  @property({ type: String, attribute: 'title-text' })\n  titleText;\n  /**\n   * Sets the Today text for the Notification panel\n   */\n  @property({ type: String, attribute: 'today-text' })\n  todayText;\n  /**\n   * Sets the Previous section title for the Notification panel\n   */\n  @property({ type: String, attribute: 'previous-text' })\n  previousText;\n  /**\n   * Determines whether the notifications panel should render or not\n   */\n  @property({ reflect: true, type: Boolean })\n  open = false;\n  /**\n   * Sets the label text for the \"Dismiss all\" button in the Notification panel\n   */\n  @property({ type: String, attribute: 'dismiss-all-label' })\n  dismissAllLabel;\n  /**\n   * Sets the empty state label text when there are no notifications\n   */\n  @property({ type: String, attribute: 'empty-state-label' })\n  emptyStateLabel;\n  /**\n   * Sets the label text for the \"Do Not Disturb\" toggle in the Notification panel\n   */\n  @property({ type: String, attribute: 'donot-disturb-label' })\n  doNotDisturbLabel;\n  /**\n   * Reference to the trigger button\n   */\n  @property({ type: Object })\n  triggerButtonRef?: HTMLElement;\n\n  /**\n   * The language for each notification's time stamp.\n   * Used with `dateTimeStyle`.\n   */\n  @property({ type: String, attribute: 'date-time-locale' })\n  dateTimeLocale?: string;\n\n  @provide({ context: dateTimeLocaleContext })\n  // @ts-ignore\n  private _providedLocale: string | undefined;\n  @query('slot[name=\"today\"]')\n  private todaySlot!: HTMLSlotElement;\n  @query('slot[name=\"previous\"]')\n  private previousSlot!: HTMLSlotElement;\n  @state() // Use @state decorator\n  private _hasTodayContent = false;\n\n  @state() // Use @state decorator\n  private _hasPreviousContent = false;\n\n  @queryAssignedElements({ slot: 'today', flatten: true })\n  _todayElements!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'previous', flatten: true })\n  _previousElements!: Array<HTMLElement>;\n  private _mutationObserver?: MutationObserver;\n\n  willUpdate(changedProperties: any) {\n    if (changedProperties.has('dateTimeLocale')) {\n      this._providedLocale = this.dateTimeLocale;\n    }\n    if (\n      changedProperties.has('_todayElements') ||\n      changedProperties.has('_previousElements')\n    ) {\n      this._hasTodayContent = this._todayElements.length > 0;\n      this._hasPreviousContent = this._previousElements.length > 0;\n    }\n  }\n\n  firstUpdated() {\n    this.todaySlot?.addEventListener('slotchange', () =>\n      this._handleSlotChange('today')\n    );\n    this.previousSlot?.addEventListener('slotchange', () =>\n      this._handleSlotChange('previous')\n    );\n    this._markFirstNotification();\n\n    const addNotificationListeners = (slotName: string) => {\n      const slot = this.shadowRoot?.querySelector(\n        `slot[name=\"${slotName}\"]`\n      ) as HTMLSlotElement | null;\n      const slottedElements = slot?.assignedElements({ flatten: true }) || [];\n      for (const el of slottedElements) {\n        el.addEventListener('mouseenter', () => {\n          this._handleMouseEnter(el);\n        });\n        el.addEventListener('mouseleave', () => {\n          this._handleMouseLeave(el);\n        });\n        el.addEventListener('focusin', () => {\n          this._handleFocusIn(el);\n        });\n        el.addEventListener('focusout', () => {\n          this._handleFocusOut(el);\n        });\n      }\n    };\n\n    addNotificationListeners('today');\n    addNotificationListeners('previous');\n  }\n\n  updated() {\n    this._markFirstNotification();\n    if (this.open) {\n      requestAnimationFrame(() => this._tryFocusDismissButton());\n    }\n  }\n\n  render() {\n    const {\n      titleText,\n      todayText,\n      previousText,\n      dismissAllLabel,\n      emptyStateLabel,\n      doNotDisturbLabel,\n      open,\n      _hasTodayContent,\n      _hasPreviousContent,\n      _onDismissAllNotifications: onDismissAllNotifications,\n      _handleToggle: handleToggle,\n    } = this;\n    const classes = classMap({\n      [`${blockClass}__container`]: true,\n      [`${blockClass}__entrance`]: open,\n      [`${blockClass}__exit`]: !open,\n    });\n\n    const mainSectionClasses = classMap({\n      [`${blockClass}__main-section`]: true,\n      [`${blockClass}__main-section-empty`]:\n        !_hasTodayContent && !_hasPreviousContent,\n    });\n\n    return html`\n      <div role=\"dialog\" tabindex=\"0\" class=${classes}>\n        <div class=\"${blockClass}__header-container\">\n          <div class=\"${blockClass}__header-flex\">\n            <h2 class=\"${blockClass}__header\">${titleText}</h2>\n            <cds-button\n              size=\"sm\"\n              kind=\"ghost\"\n              class=\"${blockClass}__dismiss-button\"\n              @click=${onDismissAllNotifications}\n            >\n              ${dismissAllLabel}\n            </cds-button>\n          </div>\n          <cds-toggle\n            size=\"sm\"\n            class=\"${blockClass}__do-not-disturb-toggle\"\n            id=\"${blockClass}__do-not-disturb-toggle-component\"\n            label-a=${doNotDisturbLabel}\n            label-b=${doNotDisturbLabel}\n            aria-label=${doNotDisturbLabel}\n            @cds-toggle-changed=${handleToggle}\n          ></cds-toggle>\n        </div>\n        <div class=${mainSectionClasses}>\n          ${_hasTodayContent\n            ? html`\n                <h3\n                  class=\"${blockClass}__time-section-label ${blockClass}__time-section-label--today\"\n                >\n                  ${todayText}\n                </h3>\n              `\n            : ''}\n          <slot name=\"today\"></slot>\n          ${_hasPreviousContent\n            ? html`\n                <h3\n                  class=\"${blockClass}__time-section-label ${blockClass}__time-section-label--previous\"\n                >\n                  ${previousText}\n                </h3>\n              `\n            : ''}\n          <slot name=\"previous\"></slot>\n          ${!_hasTodayContent && !_hasPreviousContent\n            ? html` <slot name=\"empty-state\">\n                <clabs-empty-state\n                  subtitle=\"${emptyStateLabel}\"\n                  kind=\"notifications\"\n                >\n                </clabs-empty-state>\n              </slot>`\n            : ''}\n        </div>\n        ${_hasTodayContent || _hasPreviousContent\n          ? html`<div class=\"${blockClass}__bottom-actions-container\">\n              <slot name=\"footer\"></slot>\n            </div>`\n          : ''}\n      </div>\n    `;\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._mutationObserver?.disconnect();\n  }\n\n  private _handleMouseEnter(el: Element) {\n    const next = el.nextElementSibling;\n    if (next?.tagName.toLowerCase() === `${prefix}-notification`) {\n      next.classList.add(`${blockClass}__notification--next`);\n    }\n  }\n  private _handleMouseLeave(el: Element) {\n    const next = el.nextElementSibling;\n    if (next?.tagName.toLowerCase() === `${prefix}-notification`) {\n      next.classList.remove(`${blockClass}__notification--next`);\n    }\n  }\n  private _handleFocusIn(el: Element) {\n    const next = el.nextElementSibling;\n    if (next?.tagName.toLowerCase() === `${prefix}-notification`) {\n      next.classList.add(`${blockClass}__notification--next`);\n    }\n  }\n  private _handleFocusOut(el: Element) {\n    const next = el.nextElementSibling;\n    if (next?.tagName.toLowerCase() === `${prefix}-notification`) {\n      next.classList.remove(`${blockClass}__notification--next`);\n    }\n  }\n  private _markFirstNotification() {\n    const notifications = this.querySelectorAll(`${prefix}-notification`);\n    notifications.forEach((el, i) => {\n      el.classList.toggle('first-notification', i === 0);\n    });\n  }\n  private _handleSlotChange(slotName: 'today' | 'previous') {\n    slotName === 'today'\n      ? (this._hasTodayContent = this._todayElements.length > 0)\n      : (this._hasPreviousContent = this._previousElements.length > 0);\n  }\n  private _tryFocusDismissButton() {\n    const button = this.renderRoot.querySelector<HTMLButtonElement>(\n      `.${blockClass}__dismiss-button`\n    );\n    if (button) {\n      button.focus();\n    } else {\n      this._mutationObserver?.disconnect();\n      this._mutationObserver = new MutationObserver(() => {\n        const btn = this.renderRoot.querySelector<HTMLButtonElement>(\n          `.${blockClass}__dismiss-button`\n        );\n        if (btn) {\n          btn.focus();\n          this._mutationObserver?.disconnect();\n        }\n      });\n\n      this._mutationObserver.observe(this.renderRoot, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n  /**\n   * Handles user-initiated dismiss of all notifications.\n   *\n   * @param event The event that triggered the click.\n   */\n  private _onDismissAllNotifications(event: Event) {\n    const triggeredBy = event.target;\n    event.stopPropagation();\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        triggeredBy,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSNotificationPanel).eventDismissAll,\n        init\n      )\n    );\n  }\n\n  private _handleToggle(event: Event) {\n    const triggeredBy = event.target;\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        triggeredBy,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (\n          this.constructor as typeof CDSNotificationPanel\n        ).eventDonotDisturbChange,\n        init\n      )\n    );\n  }\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if (key === 'Escape') {\n      this.open = false;\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy: target,\n        },\n      };\n\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSNotificationPanel).eventClickOutside,\n          init\n        )\n      );\n      this.triggerButtonRef?.focus();\n    }\n  };\n  // Use @HostListener for global document click events\n  @HostListener('document:click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    const target = event.target as Node;\n\n    if (!this.open || this.contains(target)) {\n      return;\n    }\n    // Check if the target is an actionable element\n    const actionableSelectors = [\n      'a',\n      'button',\n      'input',\n      'select',\n      'textarea',\n      '[role=\"button\"]',\n      '[role=\"link\"]',\n      '[tabindex]:not([tabindex=\"-1\"]',\n      'cds-button',\n      'cds-link',\n      'cds-accordion-item',\n      'cds-breadcrumb-item',\n      'cds-icon-button',\n      'cds-checkbox',\n      'cds-dropdown',\n      'cds-dropdown-item',\n      'cds-file-uploader',\n      'cds-file-uploader-button',\n      'cds-menu-button',\n      'cds-menu',\n      'cds-menu-item',\n      'cds-multi-select',\n      'cds-multi-select-item',\n      'cds-number-input',\n      'cds-overflow-menu',\n      'cds-overflow-menu-body',\n      'cds-overflow-menu-item',\n      'cds-pagination',\n      'cds-select-item',\n      'cds-radio-button',\n      'cds-search',\n      'cds-select',\n      'cds-slider',\n      'cds-slider-input',\n      'cds-tabs',\n      'cds-tab',\n      'cds-textarea',\n      'cds-text-input',\n      'cds-time-picker',\n      'cds-time-picker-select',\n      'cds-select-item',\n      'cds-toggle',\n      'cds-toggletip',\n    ];\n    const isActionable = actionableSelectors.some((selector) => {\n      if (!(target instanceof Element)) {\n        return false;\n      }\n      if (target.closest(selector)) {\n        return true;\n      }\n      const root = target.getRootNode();\n      return (\n        root instanceof ShadowRoot &&\n        root.host instanceof Element &&\n        root.host.matches(selector)\n      );\n    });\n    if (this.open && this.triggerButtonRef?.contains(target)) {\n      return;\n    }\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        triggeredBy: target,\n      },\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSNotificationPanel).eventBeforeClose,\n          init\n        )\n      )\n    ) {\n      this.open = false;\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSNotificationPanel).eventClickOutside,\n          init\n        )\n      );\n      if (!isActionable) {\n        this.triggerButtonRef?.focus();\n      }\n    }\n  };\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * The name of the custom event fired before this notification-panel is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this notification-panel.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-notification-panel-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this notification-panel is closed upon a user gesture.\n   */\n  static get eventClickOutside() {\n    return `${prefix}-notification-click-outside`;\n  }\n\n  /**\n   * The name of the custom event fired after dismiss all button click\n   */\n  static get eventDismissAll() {\n    return `${prefix}-notification-dismiss-all`;\n  }\n\n  /**\n   * The name of the custom event fired after this do not disturb button toggled.\n   */\n  static get eventDonotDisturbChange() {\n    return `${prefix}-notification-donot-disturb-change`;\n  }\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSNotificationPanel;\n"],"mappings":"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"}
+{"version":3,"file":"notification-panel.js","names":["styles","customElement"],"sources":["../../../src/components/notification-panel/notification-panel.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023, 2024\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 {\n  state,\n  property,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { provide } from '@lit/context';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport styles from './notification-panel.scss?lit';\nimport { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { dateTimeLocaleContext } from './date-time-context';\nimport '@carbon/web-components/es/components/button/index.js';\nimport '@carbon/web-components/es/components/toggle/index.js';\nimport '@carbon/web-components/es/components/icon-button/index.js';\nimport '@carbon-labs/wc-empty-state/es/index.js';\n\nconst blockClass = `${prefix}--notifications-panel`;\n/**\n * NotificationPanel.\n *\n * @element c4p-notification-panel\n * @csspart dialog The dialog.\n * @slot today - Today Section.\n * @slot previous - Previous Section.\n * @slot footer - Footer for the Panel.\n * @fires c4p-notification-panel-beingclosed - The custom event before notification-panel is closed.\n * @fires c4p-notification-dismiss-all - The custom event fired after notification-panel is closed upon a user gesture.\n * @fires c4p-notification-donot-disturb-change - The custom event fired after notification-panel is closed upon a user gesture.\n * @fires c4p-notification-click-outside - The custom event fired after user clicks outside the panel or Esc key is pressed.\n */\n@customElement(`${prefix}-notification-panel`)\nclass CDSNotificationPanel extends HostListenerMixin(LitElement) {\n  /**\n   * Sets the Title for the Notification panel\n   */\n  @property({ type: String, attribute: 'title-text' })\n  titleText;\n  /**\n   * Sets the Today text for the Notification panel\n   */\n  @property({ type: String, attribute: 'today-text' })\n  todayText;\n  /**\n   * Sets the Previous section title for the Notification panel\n   */\n  @property({ type: String, attribute: 'previous-text' })\n  previousText;\n  /**\n   * Determines whether the notifications panel should render or not\n   */\n  @property({ reflect: true, type: Boolean })\n  open = false;\n  /**\n   * Sets the label text for the \"Dismiss all\" button in the Notification panel\n   */\n  @property({ type: String, attribute: 'dismiss-all-label' })\n  dismissAllLabel;\n  /**\n   * Sets the empty state label text when there are no notifications\n   */\n  @property({ type: String, attribute: 'empty-state-label' })\n  emptyStateLabel;\n  /**\n   * Sets the label text for the \"Do Not Disturb\" toggle in the Notification panel\n   */\n  @property({ type: String, attribute: 'donot-disturb-label' })\n  doNotDisturbLabel;\n  /**\n   * Reference to the trigger button\n   */\n  @property({ type: Object })\n  triggerButtonRef?: HTMLElement;\n\n  /**\n   * The language for each notification's time stamp.\n   * Used with `dateTimeStyle`.\n   */\n  @property({ type: String, attribute: 'date-time-locale' })\n  dateTimeLocale?: string;\n\n  @provide({ context: dateTimeLocaleContext })\n  // @ts-ignore\n  private _providedLocale: string | undefined;\n  @query('slot[name=\"today\"]')\n  private todaySlot!: HTMLSlotElement;\n  @query('slot[name=\"previous\"]')\n  private previousSlot!: HTMLSlotElement;\n  @state() // Use @state decorator\n  private _hasTodayContent = false;\n\n  @state() // Use @state decorator\n  private _hasPreviousContent = false;\n\n  @queryAssignedElements({ slot: 'today', flatten: true })\n  _todayElements!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'previous', flatten: true })\n  _previousElements!: Array<HTMLElement>;\n  private _mutationObserver?: MutationObserver;\n\n  willUpdate(changedProperties: any) {\n    if (changedProperties.has('dateTimeLocale')) {\n      this._providedLocale = this.dateTimeLocale;\n    }\n    if (\n      changedProperties.has('_todayElements') ||\n      changedProperties.has('_previousElements')\n    ) {\n      this._hasTodayContent = this._todayElements.length > 0;\n      this._hasPreviousContent = this._previousElements.length > 0;\n    }\n  }\n\n  firstUpdated() {\n    this.todaySlot?.addEventListener('slotchange', () =>\n      this._handleSlotChange('today')\n    );\n    this.previousSlot?.addEventListener('slotchange', () =>\n      this._handleSlotChange('previous')\n    );\n    this._markFirstNotification();\n\n    const addNotificationListeners = (slotName: string) => {\n      const slot = this.shadowRoot?.querySelector(\n        `slot[name=\"${slotName}\"]`\n      ) as HTMLSlotElement | null;\n      const slottedElements = slot?.assignedElements({ flatten: true }) || [];\n      for (const el of slottedElements) {\n        el.addEventListener('mouseenter', () => {\n          this._handleMouseEnter(el);\n        });\n        el.addEventListener('mouseleave', () => {\n          this._handleMouseLeave(el);\n        });\n        el.addEventListener('focusin', () => {\n          this._handleFocusIn(el);\n        });\n        el.addEventListener('focusout', () => {\n          this._handleFocusOut(el);\n        });\n      }\n    };\n\n    addNotificationListeners('today');\n    addNotificationListeners('previous');\n  }\n\n  updated() {\n    this._markFirstNotification();\n    if (this.open) {\n      requestAnimationFrame(() => this._tryFocusDismissButton());\n    }\n  }\n\n  render() {\n    const {\n      titleText,\n      todayText,\n      previousText,\n      dismissAllLabel,\n      emptyStateLabel,\n      doNotDisturbLabel,\n      open,\n      _hasTodayContent,\n      _hasPreviousContent,\n      _onDismissAllNotifications: onDismissAllNotifications,\n      _handleToggle: handleToggle,\n    } = this;\n    const classes = classMap({\n      [`${blockClass}__container`]: true,\n      [`${blockClass}__entrance`]: open,\n      [`${blockClass}__exit`]: !open,\n    });\n\n    const mainSectionClasses = classMap({\n      [`${blockClass}__main-section`]: true,\n      [`${blockClass}__main-section-empty`]:\n        !_hasTodayContent && !_hasPreviousContent,\n    });\n\n    return html`\n      <div\n        role=\"dialog\"\n        tabindex=\"0\"\n        class=${classes}\n        aria-labelledby=\"notifications-panel-title\"\n      >\n        <div class=\"${blockClass}__header-container\">\n          <div class=\"${blockClass}__header-flex\">\n            <h2 id=\"notifications-panel-title\" class=\"${blockClass}__header\">\n              ${titleText}\n            </h2>\n            <cds-button\n              size=\"sm\"\n              kind=\"ghost\"\n              class=\"${blockClass}__dismiss-button\"\n              @click=${onDismissAllNotifications}\n            >\n              ${dismissAllLabel}\n            </cds-button>\n          </div>\n          <cds-toggle\n            size=\"sm\"\n            class=\"${blockClass}__do-not-disturb-toggle\"\n            id=\"${blockClass}__do-not-disturb-toggle-component\"\n            label-a=${doNotDisturbLabel}\n            label-b=${doNotDisturbLabel}\n            aria-label=${doNotDisturbLabel}\n            @cds-toggle-changed=${handleToggle}\n          ></cds-toggle>\n        </div>\n        <div class=${mainSectionClasses}>\n          ${_hasTodayContent\n            ? html`\n                <h3\n                  class=\"${blockClass}__time-section-label ${blockClass}__time-section-label--today\"\n                >\n                  ${todayText}\n                </h3>\n              `\n            : ''}\n          <slot name=\"today\"></slot>\n          ${_hasPreviousContent\n            ? html`\n                <h3\n                  class=\"${blockClass}__time-section-label ${blockClass}__time-section-label--previous\"\n                >\n                  ${previousText}\n                </h3>\n              `\n            : ''}\n          <slot name=\"previous\"></slot>\n          ${!_hasTodayContent && !_hasPreviousContent\n            ? html` <slot name=\"empty-state\">\n                <clabs-empty-state\n                  subtitle=\"${emptyStateLabel}\"\n                  kind=\"notifications\"\n                >\n                </clabs-empty-state>\n              </slot>`\n            : ''}\n        </div>\n        ${_hasTodayContent || _hasPreviousContent\n          ? html`<div class=\"${blockClass}__bottom-actions-container\">\n              <slot name=\"footer\"></slot>\n            </div>`\n          : ''}\n      </div>\n    `;\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._mutationObserver?.disconnect();\n  }\n\n  private _handleMouseEnter(el: Element) {\n    const next = el.nextElementSibling;\n    if (next?.tagName.toLowerCase() === `${prefix}-notification`) {\n      next.classList.add(`${blockClass}__notification--next`);\n    }\n  }\n  private _handleMouseLeave(el: Element) {\n    const next = el.nextElementSibling;\n    if (next?.tagName.toLowerCase() === `${prefix}-notification`) {\n      next.classList.remove(`${blockClass}__notification--next`);\n    }\n  }\n  private _handleFocusIn(el: Element) {\n    const next = el.nextElementSibling;\n    if (next?.tagName.toLowerCase() === `${prefix}-notification`) {\n      next.classList.add(`${blockClass}__notification--next`);\n    }\n  }\n  private _handleFocusOut(el: Element) {\n    const next = el.nextElementSibling;\n    if (next?.tagName.toLowerCase() === `${prefix}-notification`) {\n      next.classList.remove(`${blockClass}__notification--next`);\n    }\n  }\n  private _markFirstNotification() {\n    const notifications = this.querySelectorAll(`${prefix}-notification`);\n    notifications.forEach((el, i) => {\n      el.classList.toggle('first-notification', i === 0);\n    });\n  }\n  private _handleSlotChange(slotName: 'today' | 'previous') {\n    slotName === 'today'\n      ? (this._hasTodayContent = this._todayElements.length > 0)\n      : (this._hasPreviousContent = this._previousElements.length > 0);\n  }\n  private _tryFocusDismissButton() {\n    const button = this.renderRoot.querySelector<HTMLButtonElement>(\n      `.${blockClass}__dismiss-button`\n    );\n    if (button) {\n      button.focus();\n    } else {\n      this._mutationObserver?.disconnect();\n      this._mutationObserver = new MutationObserver(() => {\n        const btn = this.renderRoot.querySelector<HTMLButtonElement>(\n          `.${blockClass}__dismiss-button`\n        );\n        if (btn) {\n          btn.focus();\n          this._mutationObserver?.disconnect();\n        }\n      });\n\n      this._mutationObserver.observe(this.renderRoot, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n  /**\n   * Handles user-initiated dismiss of all notifications.\n   *\n   * @param event The event that triggered the click.\n   */\n  private _onDismissAllNotifications(event: Event) {\n    const triggeredBy = event.target;\n    event.stopPropagation();\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        triggeredBy,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSNotificationPanel).eventDismissAll,\n        init\n      )\n    );\n  }\n\n  private _handleToggle(event: Event) {\n    const triggeredBy = event.target;\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        triggeredBy,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (\n          this.constructor as typeof CDSNotificationPanel\n        ).eventDonotDisturbChange,\n        init\n      )\n    );\n  }\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = (event: KeyboardEvent) => {\n    const { key, target } = event;\n    if (key === 'Escape') {\n      if (event.defaultPrevented) {\n        return;\n      }\n      this.open = false;\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy: target,\n        },\n      };\n\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSNotificationPanel).eventClickOutside,\n          init\n        )\n      );\n      this.triggerButtonRef?.focus();\n    }\n  };\n  // Use @HostListener for global document click events\n  @HostListener('document:click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    const target = event.target as Node;\n\n    if (!this.open || this.contains(target)) {\n      return;\n    }\n    // Check if the target is an actionable element\n    const actionableSelectors = [\n      'a',\n      'button',\n      'input',\n      'select',\n      'textarea',\n      '[role=\"button\"]',\n      '[role=\"link\"]',\n      '[tabindex]:not([tabindex=\"-1\"])',\n      'cds-button',\n      'cds-link',\n      'cds-accordion-item',\n      'cds-breadcrumb-item',\n      'cds-icon-button',\n      'cds-checkbox',\n      'cds-dropdown',\n      'cds-dropdown-item',\n      'cds-file-uploader',\n      'cds-file-uploader-button',\n      'cds-menu-button',\n      'cds-menu',\n      'cds-menu-item',\n      'cds-multi-select',\n      'cds-multi-select-item',\n      'cds-number-input',\n      'cds-overflow-menu',\n      'cds-overflow-menu-body',\n      'cds-overflow-menu-item',\n      'cds-pagination',\n      'cds-select-item',\n      'cds-radio-button',\n      'cds-search',\n      'cds-select',\n      'cds-slider',\n      'cds-slider-input',\n      'cds-tabs',\n      'cds-tab',\n      'cds-textarea',\n      'cds-text-input',\n      'cds-time-picker',\n      'cds-time-picker-select',\n      'cds-select-item',\n      'cds-toggle',\n      'cds-toggletip',\n    ];\n    const isActionable = actionableSelectors.some((selector) => {\n      if (!(target instanceof Element)) {\n        return false;\n      }\n      if (target.closest(selector)) {\n        return true;\n      }\n      const root = target.getRootNode();\n      return (\n        root instanceof ShadowRoot &&\n        root.host instanceof Element &&\n        root.host.matches(selector)\n      );\n    });\n    if (this.open && this.triggerButtonRef?.contains(target)) {\n      return;\n    }\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        triggeredBy: target,\n      },\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSNotificationPanel).eventBeforeClose,\n          init\n        )\n      )\n    ) {\n      this.open = false;\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSNotificationPanel).eventClickOutside,\n          init\n        )\n      );\n      if (!isActionable) {\n        this.triggerButtonRef?.focus();\n      }\n    }\n  };\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * The name of the custom event fired before this notification-panel is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this notification-panel.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-notification-panel-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this notification-panel is closed upon a user gesture.\n   */\n  static get eventClickOutside() {\n    return `${prefix}-notification-click-outside`;\n  }\n\n  /**\n   * The name of the custom event fired after dismiss all button click\n   */\n  static get eventDismissAll() {\n    return `${prefix}-notification-dismiss-all`;\n  }\n\n  /**\n   * The name of the custom event fired after this do not disturb button toggled.\n   */\n  static get eventDonotDisturbChange() {\n    return `${prefix}-notification-donot-disturb-change`;\n  }\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSNotificationPanel;\n"],"mappings":"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"}

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

@@ -7,7 +7,7 @@
 
 import { css } from "lit";
 //#region src/components/notification-panel/notification-panel.scss?lit
-var notification_panel_default = 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}:root{color-scheme:var(--cds-color-scheme,light)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-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-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);letter-spacing:var(--cds-heading-06-letter-spacing,0);line-height:var(--cds-heading-06-line-height,1.199)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);letter-spacing:var(--cds-heading-05-letter-spacing,0);line-height:var(--cds-heading-05-line-height,1.25)}h3{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)}h4{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)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);letter-spacing:var(--cds-heading-02-letter-spacing,0);line-height:var(--cds-heading-02-line-height,1.5)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-heading-01-line-height,1.42857)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);letter-spacing:var(--cds-body-02-letter-spacing,0);line-height:var(--cds-body-02-line-height,1.5)}a{color:var(--cds-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-text-primary,#161616);display:flex}.c4p--empty-state .c4p--empty-state__header{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);margin:0;padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle{color:var(--cds-text-secondary,#525252);font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);padding-block-end:1rem}.c4p--empty-state .c4p--empty-state__header--small{font-size:var(--cds-body-compact-02-font-size,1rem);font-weight:var(--cds-body-compact-02-font-weight,400);letter-spacing:var(--cds-body-compact-02-letter-spacing,0);line-height:var(--cds-body-compact-02-line-height,1.375);padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle--small{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)}.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-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-border-subtle-02,#e0e0e0);border-inline-start:1px solid var(--cds-border-subtle-02,#e0e0e0);box-shadow:0 .125rem .25rem var(--cds-overlay,rgba(0,0,0,.6));clip-path:inset(0 calc(var(--cds-spacing-01)*-1) calc(var(--cds-spacing-02)*-1) calc(var(--cds-spacing-01)*-1));color:var(--cds-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-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-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 .c4p--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-text-primary,#161616)}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header{font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-heading-compact-01-line-height,1.28572);margin:0}.c4p--notifications-panel__container .c4p--notifications-panel__time-section-label{background-color:var(--cds-layer-01,#f4f4f4);color:var(--cds-text-secondary,#525252);font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);font-weight:600;inset-block-start:3.0625rem;letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-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-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-focus,#0f62fe);box-shadow:inset 0 0 0 2px var(--cds-focus,#0f62fe),inset 0 0 0 2px var(--cds-background,#fff);outline:0}.c4p--notifications-panel__container .c4p--notifications-panel__notification{align-items:flex-start;background-color:var(--cds-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-text-secondary,#525252);font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);font-weight:400;letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-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-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-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)}.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-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-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-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-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-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)}.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-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);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 .c4p--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .c4p--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 .c4p--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .c4p--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 .c4p--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 .c4p--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 .c4p--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 .c4p--btn__icon{transform:rotate(180deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--popover-container{position:static}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button{align-items:center;color:var(--cds-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:focus:before{display:none}.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-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-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--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-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-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-border-subtle-01,#c6c6c6);color:var(--cds-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-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 .c4p--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-heading-06-font-size:--cds-heading-compact-01-font-size;--cds-heading-06-font-weight:--cds-heading-compact-01-font-weight;--cds-heading-06-line-height:--cds-heading-compact-01-line-height;--cds-heading-06-letter-spacing:--cds-heading-compact-01-letter-spacing}.c4p--notifications-panel__dismiss-button{--cds-link-primary:--cds-text-primary;--cds-link-primary-hover:--cds-text-primary}.c4p--notifications-panel__bottom-actions-container{background-color:var(--cds-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-block-end:0;min-block-size:2.5rem;position:sticky;z-index:2}"]);
+var notification_panel_default = 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}:root{color-scheme:var(--cds-color-scheme,light)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-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-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);letter-spacing:var(--cds-heading-06-letter-spacing,0);line-height:var(--cds-heading-06-line-height,1.199)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);letter-spacing:var(--cds-heading-05-letter-spacing,0);line-height:var(--cds-heading-05-line-height,1.25)}h3{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)}h4{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)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);letter-spacing:var(--cds-heading-02-letter-spacing,0);line-height:var(--cds-heading-02-line-height,1.5)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-heading-01-line-height,1.42857)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);letter-spacing:var(--cds-body-02-letter-spacing,0);line-height:var(--cds-body-02-line-height,1.5)}a{color:var(--cds-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--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-text-primary,#161616);display:flex}.c4p--empty-state .c4p--empty-state__header{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);margin:0;padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle{color:var(--cds-text-secondary,#525252);font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);padding-block-end:1rem}.c4p--empty-state .c4p--empty-state__header--small{font-size:var(--cds-body-compact-02-font-size,1rem);font-weight:var(--cds-body-compact-02-font-weight,400);letter-spacing:var(--cds-body-compact-02-letter-spacing,0);line-height:var(--cds-body-compact-02-line-height,1.375);padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle--small{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)}.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-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-border-subtle-02,#e0e0e0);border-inline-start:1px solid var(--cds-border-subtle-02,#e0e0e0);box-shadow:0 .125rem .25rem var(--cds-overlay,rgba(0,0,0,.6));clip-path:inset(0 calc(var(--cds-spacing-01)*-1) calc(var(--cds-spacing-02)*-1) calc(var(--cds-spacing-01)*-1));color:var(--cds-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-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-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 .c4p--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-text-primary,#161616)}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header{font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-heading-compact-01-line-height,1.28572);margin:0}.c4p--notifications-panel__container .c4p--notifications-panel__time-section-label{background-color:var(--cds-layer-01,#f4f4f4);color:var(--cds-text-secondary,#525252);font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);font-weight:600;inset-block-start:3.0625rem;letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-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-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-focus,#0f62fe);box-shadow:inset 0 0 0 2px var(--cds-focus,#0f62fe),inset 0 0 0 2px var(--cds-background,#fff);outline:0}.c4p--notifications-panel__container .c4p--notifications-panel__notification{align-items:flex-start;background-color:var(--cds-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-text-secondary,#525252);font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);font-weight:400;letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-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-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-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)}.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-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-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-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-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-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)}.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-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);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 .c4p--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .c4p--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 .c4p--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .c4p--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 .c4p--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 .c4p--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 .c4p--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 .c4p--btn__icon{transform:rotate(180deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--popover-container{position:static}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button{align-items:center;color:var(--cds-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:focus:before{display:none}.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-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-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--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-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-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-border-subtle-01,#c6c6c6);color:var(--cds-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-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 .c4p--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-heading-06-font-size:var(\n    --cds-heading-compact-01-font-size\n  );--cds-heading-06-font-weight:var(\n    --cds-heading-compact-01-font-weight\n  );--cds-heading-06-line-height:var(\n    --cds-heading-compact-01-line-height\n  );--cds-heading-06-letter-spacing:var(\n    --cds-heading-compact-01-letter-spacing\n  )}.c4p--notifications-panel__dismiss-button{--cds-link-primary:var(--cds-text-primary);--cds-link-primary-hover:var(--cds-text-primary)}.c4p--notifications-panel__bottom-actions-container{background-color:var(--cds-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-border-subtle-01,#c6c6c6);inset-block-end:0;min-block-size:2.5rem;position:sticky;z-index:2}"]);
 //#endregion
 export { notification_panel_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"notification-panel.scss.js","names":[],"sources":["../../../src/components/notification-panel/notification-panel.scss?lit"],"sourcesContent":["/*\n* Copyright IBM Corp. 2023, 2024\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$css--plex: true !default;\n@use 'sass:map';\n\n/* Other Carbon settings. */\n@use '@carbon/styles/scss/reset';\n@use '@carbon/styles/scss/config' 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/type/scss/font-family' as *;\n@use '@carbon/styles/scss/utilities/ai-gradient' as *;\n@use '@carbon/styles/scss/utilities/convert' as *;\n\n$prefix: 'c4p';\n$carbon-prefix: 'cds';\n@use '@carbon/ibm-products-styles/scss/components/NotificationsPanel/index' as *;\n\n$block-class: #{$prefix}--notifications-panel;\n$block-class-action-set: #{$prefix}--action-set;\n\n:host(#{$prefix}-notification-panel) {\n  .c4p--notifications-panel__do-not-disturb-toggle {\n    display: block;\n  }\n}\n:host(#{$prefix}-notification-panel)\n  ::slotted(.c4p--notifications-panel__bottom-actions) {\n  display: flex;\n  align-items: center;\n}\n\n.#{$block-class}__header-container {\n  --#{$carbon-prefix}-heading-06-font-size: --#{$carbon-prefix}-heading-compact-01-font-size;\n  --#{$carbon-prefix}-heading-06-font-weight: --#{$carbon-prefix}-heading-compact-01-font-weight;\n  --#{$carbon-prefix}-heading-06-line-height: --#{$carbon-prefix}-heading-compact-01-line-height;\n  --#{$carbon-prefix}-heading-06-letter-spacing: --#{$carbon-prefix}-heading-compact-01-letter-spacing;\n}\n.#{$block-class}__dismiss-button {\n  --#{$carbon-prefix}-link-primary: --#{$carbon-prefix}-text-primary;\n  --#{$carbon-prefix}-link-primary-hover: --#{$carbon-prefix}-text-primary;\n}\n.#{$block-class}__bottom-actions-container {\n  position: sticky;\n  z-index: 2;\n  background-color: $layer-01;\n  block-size: $spacing-08;\n  border-block-start: 1px solid $border-subtle-01;\n  inset-block-end: 0;\n  min-block-size: $spacing-08;\n}\n"],"mappings":""}
+{"version":3,"file":"notification-panel.scss.js","names":[],"sources":["../../../src/components/notification-panel/notification-panel.scss?lit"],"sourcesContent":["/*\n* Copyright IBM Corp. 2023, 2024\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$css--plex: true !default;\n@use 'sass:map';\n\n/* Other Carbon settings. */\n@use '@carbon/styles/scss/reset';\n@use '@carbon/styles/scss/config' 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/type/scss/font-family' as *;\n@use '@carbon/styles/scss/utilities/ai-gradient' as *;\n@use '@carbon/styles/scss/utilities/convert' as *;\n\n$prefix: 'c4p';\n$carbon-prefix: 'cds';\n@use '@carbon/ibm-products-styles/scss/components/NotificationsPanel/index' as *;\n\n$block-class: #{$prefix}--notifications-panel;\n$block-class-action-set: #{$prefix}--action-set;\n\n:host(#{$prefix}-notification-panel) {\n  .c4p--notifications-panel__do-not-disturb-toggle {\n    display: block;\n  }\n}\n:host(#{$prefix}-notification-panel)\n  ::slotted(.c4p--notifications-panel__bottom-actions) {\n  display: flex;\n  align-items: center;\n}\n\n.#{$block-class}__header-container {\n  --#{$carbon-prefix}-heading-06-font-size: var(\n    --#{$carbon-prefix}-heading-compact-01-font-size\n  );\n  --#{$carbon-prefix}-heading-06-font-weight: var(\n    --#{$carbon-prefix}-heading-compact-01-font-weight\n  );\n  --#{$carbon-prefix}-heading-06-line-height: var(\n    --#{$carbon-prefix}-heading-compact-01-line-height\n  );\n  --#{$carbon-prefix}-heading-06-letter-spacing: var(\n    --#{$carbon-prefix}-heading-compact-01-letter-spacing\n  );\n}\n.#{$block-class}__dismiss-button {\n  --#{$carbon-prefix}-link-primary: var(--#{$carbon-prefix}-text-primary);\n  --#{$carbon-prefix}-link-primary-hover: var(--#{$carbon-prefix}-text-primary);\n}\n.#{$block-class}__bottom-actions-container {\n  position: sticky;\n  z-index: 2;\n  background-color: $layer-01;\n  block-size: $spacing-08;\n  border-block-start: 1px solid $border-subtle-01;\n  inset-block-end: 0;\n  min-block-size: $spacing-08;\n}\n"],"mappings":""}

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

@@ -77,7 +77,7 @@ let CDSNotification = class CDSNotification extends HostListenerMixin(LitElement
         </div>
       </div>
       <cds-button
-        tooltip-text=""
+        tooltip-text="Dismiss notification"
         align="left"
         kind="ghost"
         size="sm"

package/es/components/notification-panel/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","names":["styles","customElement"],"sources":["../../../src/components/notification-panel/notification.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023, 2024\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 } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';\nimport { dateTimeFormat } from '@carbon/utilities';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { consume } from '@lit/context';\nimport { dateTimeLocaleContext } from './date-time-context';\nimport styles from './notification.scss?lit';\nimport '@carbon/web-components/es/components/button/index.js';\nimport Close16 from '@carbon/icons/es/close/16';\nimport ErrorFilled16 from '@carbon/icons/es/error--filled/16';\nimport CheckmarkFilled16 from '@carbon/icons/es/checkmark--filled/16';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16';\nimport InformationSquareFilled16 from '@carbon/icons/es/information--square--filled/16';\nimport { getSupportedLocale } from '../../globals/js/utils/getSupportedLocale';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\n\nconst blockClass = `${prefix}--notifications-panel__notification`;\nconst DefaultLocale = 'en-US';\ntype DateTimeStyles = 'long' | 'short' | 'narrow';\nconst dateTimeStyle = 'long' as DateTimeStyles;\n/**\n * Notification.\n * @element c4p-notification\n * @slot title - The Title for the notification.\n * @slot description - The description for the notification.\n * @csspart dialog The dialog.\n *   The custom event is fired when a notification is clicked or when the Enter key is pressed on it.\n * @fires c4p-notification-dismiss - The custom event is fired when the notification is closed by a user gesture.\n */\n@customElement(`${prefix}-notification`)\nclass CDSNotification extends HostListenerMixin(LitElement) {\n  /**\n   * Sets the type of notification to display: 'error', 'warning', 'success', or 'informational'\n   */\n  @property({ reflect: true })\n  type?: 'error' | 'warning' | 'success' | 'informational';\n  /**\n   * Sets the timestamp for the notification, typically used to indicate when it was received\n   */\n  @property()\n  timestamp?: Date;\n\n  @consume({ context: dateTimeLocaleContext, subscribe: true })\n  dateTimeLocale: string | undefined = undefined;\n\n  private _handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      this.click();\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button');\n    }\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', '0');\n    }\n    this.addEventListener('keydown', this._handleKeyDown);\n  }\n  render() {\n    const {\n      type,\n      timestamp,\n      dateTimeLocale,\n      _dismissSingleNotification: dismissSingleNotification,\n      _fetchIcon: fetchIcon,\n    } = this;\n    const supportedLocale = getSupportedLocale(dateTimeLocale, DefaultLocale);\n    const icon = fetchIcon(type);\n    return html`\n      ${icon}\n      <div class=\"${blockClass}-content\">\n        <p class=\"${blockClass}-time-label\">\n          ${dateTimeFormat.relative.format(timestamp as Date, {\n            locale: supportedLocale as string,\n            style: dateTimeStyle,\n          })}\n        </p>\n        <slot name=\"title\"></slot>\n        <div class=\"${blockClass}-description\">\n          <slot name=\"description\"></slot>\n        </div>\n      </div>\n      <cds-button\n        tooltip-text=\"\"\n        align=\"left\"\n        kind=\"ghost\"\n        size=\"sm\"\n        class=\"${blockClass}__dismiss-single-button\"\n        @click=${dismissSingleNotification}\n      >\n        ${iconLoader(Close16, { slot: 'icon' })}\n      </cds-button>\n    `;\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeyDown);\n  }\n  /**\n   * Handles user-initiated dismiss request of the Notification.\n   *\n   * @param event The event that triggered the click.\n   */\n  private _dismissSingleNotification(event: Event) {\n    const triggeredBy = event.target;\n    event.preventDefault();\n    event.stopPropagation();\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        triggeredBy,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSNotification).notificationDismiss,\n        init\n      )\n    );\n  }\n\n  private _fetchIcon(type) {\n    let icon;\n    switch (type) {\n      case 'error':\n        icon = iconLoader(ErrorFilled16, {\n          class: `${blockClass}-status-icon ${blockClass}-status-icon-error`,\n        });\n        break;\n      case 'success':\n        icon = iconLoader(CheckmarkFilled16, {\n          class: `${blockClass}-status-icon ${blockClass}-status-icon-success`,\n        });\n        break;\n      case 'warning':\n        icon = iconLoader(WarningAltFilled16, {\n          class: `${blockClass}-status-icon ${blockClass}-status-icon-warning`,\n        });\n        break;\n      case 'informational':\n        icon = iconLoader(InformationSquareFilled16, {\n          class: `${blockClass}-status-icon ${blockClass}-status-icon-informational`,\n        });\n        break;\n      default:\n        icon = null;\n    }\n    return icon;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * The custom event is fired when the notification is closed by a user gesture.\n   */\n  static get notificationDismiss() {\n    return `${prefix}-notification-dismiss`;\n  }\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSNotification;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,aAAa;AACnB,MAAM,gBAAgB;AAEtB,MAAM,gBAAgB;;;;;;;;;;AAUtB,IAAA,kBAAA,MACM,wBAAwB,kBAAkB,WAAW,CAAC;;;wBAarB,KAAA;yBAEX,MAAqB;AAC7C,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjC,MAAK,OAAO;;;CAIhB,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,SAAS;AAErC,MAAI,CAAC,KAAK,aAAa,WAAW,CAChC,MAAK,aAAa,YAAY,IAAI;AAEpC,OAAK,iBAAiB,WAAW,KAAK,eAAe;;CAEvD,SAAS;EACP,MAAM,EACJ,MACA,WACA,gBACA,4BAA4B,2BAC5B,YAAY,cACV;EACJ,MAAM,kBAAkB,mBAAmB,gBAAgB,cAAc;AAEzE,SAAO,IAAI;QADE,UAAU,KAEf,CAAC;oBACO,WAAW;oBACX,WAAW;YACnB,eAAe,SAAS,OAAO,WAAmB;GAClD,QAAQ;GACR,OAAO;GACR,CAAC,CAAC;;;sBAGS,WAAW;;;;;;;;;iBAShB,WAAW;iBACX,0BAA0B;;UAEjC,WAAW,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAC;;;;CAI9C,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,OAAK,oBAAoB,WAAW,KAAK,eAAe;;;;;;;CAO1D,2BAAmC,OAAc;EAC/C,MAAM,cAAc,MAAM;AAC1B,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;EACvB,MAAM,OAAO;GACX,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ,EACN,aACD;GACF;AACD,OAAK,cACH,IAAI,YACD,KAAK,YAAuC,qBAC7C,KACD,CACF;;CAGH,WAAmB,MAAM;EACvB,IAAI;AACJ,UAAQ,MAAR;GACE,KAAK;AACH,WAAO,WAAW,eAAe,EAC/B,OAAO,GAAG,WAAW,eAAe,WAAW,qBAChD,CAAC;AACF;GACF,KAAK;AACH,WAAO,WAAW,mBAAmB,EACnC,OAAO,GAAG,WAAW,eAAe,WAAW,uBAChD,CAAC;AACF;GACF,KAAK;AACH,WAAO,WAAW,oBAAoB,EACpC,OAAO,GAAG,WAAW,eAAe,WAAW,uBAChD,CAAC;AACF;GACF,KAAK;AACH,WAAO,WAAW,2BAA2B,EAC3C,OAAO,GAAG,WAAW,eAAe,WAAW,6BAChD,CAAC;AACF;GACF,QACE,QAAO;;AAEX,SAAO;;;;;CAMT,WAAW,mBAAmB;AAC5B,SAAO;;;;;CAMT,WAAW,sBAAsB;AAC/B,SAAO;;;gBAEOA;;;YAtIf,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,gBAAA,WAAA,QAAA,KAAA,EAAA;YAK3B,UAAU,CAAA,EAAA,gBAAA,WAAA,aAAA,KAAA,EAAA;YAGV,QAAQ;CAAE,SAAS;CAAuB,WAAW;CAAM,CAAC,CAAA,EAAA,gBAAA,WAAA,kBAAA,KAAA,EAAA;8BAb9DC,cAAc,mBAAyB,CAAA,EAAA,gBAAA;AA8IxC,IAAA,uBAAe"}
+{"version":3,"file":"notification.js","names":["styles","customElement"],"sources":["../../../src/components/notification-panel/notification.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023, 2024\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 } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';\nimport { dateTimeFormat } from '@carbon/utilities';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { consume } from '@lit/context';\nimport { dateTimeLocaleContext } from './date-time-context';\nimport styles from './notification.scss?lit';\nimport '@carbon/web-components/es/components/button/index.js';\nimport Close16 from '@carbon/icons/es/close/16';\nimport ErrorFilled16 from '@carbon/icons/es/error--filled/16';\nimport CheckmarkFilled16 from '@carbon/icons/es/checkmark--filled/16';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16';\nimport InformationSquareFilled16 from '@carbon/icons/es/information--square--filled/16';\nimport { getSupportedLocale } from '../../globals/js/utils/getSupportedLocale';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\n\nconst blockClass = `${prefix}--notifications-panel__notification`;\nconst DefaultLocale = 'en-US';\ntype DateTimeStyles = 'long' | 'short' | 'narrow';\nconst dateTimeStyle = 'long' as DateTimeStyles;\n/**\n * Notification.\n * @element c4p-notification\n * @slot title - The Title for the notification.\n * @slot description - The description for the notification.\n * @csspart dialog The dialog.\n *   The custom event is fired when a notification is clicked or when the Enter key is pressed on it.\n * @fires c4p-notification-dismiss - The custom event is fired when the notification is closed by a user gesture.\n */\n@customElement(`${prefix}-notification`)\nclass CDSNotification extends HostListenerMixin(LitElement) {\n  /**\n   * Sets the type of notification to display: 'error', 'warning', 'success', or 'informational'\n   */\n  @property({ reflect: true })\n  type?: 'error' | 'warning' | 'success' | 'informational';\n  /**\n   * Sets the timestamp for the notification, typically used to indicate when it was received\n   */\n  @property()\n  timestamp?: Date;\n\n  @consume({ context: dateTimeLocaleContext, subscribe: true })\n  dateTimeLocale: string | undefined = undefined;\n\n  private _handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      this.click();\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button');\n    }\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', '0');\n    }\n    this.addEventListener('keydown', this._handleKeyDown);\n  }\n  render() {\n    const {\n      type,\n      timestamp,\n      dateTimeLocale,\n      _dismissSingleNotification: dismissSingleNotification,\n      _fetchIcon: fetchIcon,\n    } = this;\n    const supportedLocale = getSupportedLocale(dateTimeLocale, DefaultLocale);\n    const icon = fetchIcon(type);\n    return html`\n      ${icon}\n      <div class=\"${blockClass}-content\">\n        <p class=\"${blockClass}-time-label\">\n          ${dateTimeFormat.relative.format(timestamp as Date, {\n            locale: supportedLocale as string,\n            style: dateTimeStyle,\n          })}\n        </p>\n        <slot name=\"title\"></slot>\n        <div class=\"${blockClass}-description\">\n          <slot name=\"description\"></slot>\n        </div>\n      </div>\n      <cds-button\n        tooltip-text=\"Dismiss notification\"\n        align=\"left\"\n        kind=\"ghost\"\n        size=\"sm\"\n        class=\"${blockClass}__dismiss-single-button\"\n        @click=${dismissSingleNotification}\n      >\n        ${iconLoader(Close16, { slot: 'icon' })}\n      </cds-button>\n    `;\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeyDown);\n  }\n  /**\n   * Handles user-initiated dismiss request of the Notification.\n   *\n   * @param event The event that triggered the click.\n   */\n  private _dismissSingleNotification(event: Event) {\n    const triggeredBy = event.target;\n    event.preventDefault();\n    event.stopPropagation();\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        triggeredBy,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSNotification).notificationDismiss,\n        init\n      )\n    );\n  }\n\n  private _fetchIcon(type) {\n    let icon;\n    switch (type) {\n      case 'error':\n        icon = iconLoader(ErrorFilled16, {\n          class: `${blockClass}-status-icon ${blockClass}-status-icon-error`,\n        });\n        break;\n      case 'success':\n        icon = iconLoader(CheckmarkFilled16, {\n          class: `${blockClass}-status-icon ${blockClass}-status-icon-success`,\n        });\n        break;\n      case 'warning':\n        icon = iconLoader(WarningAltFilled16, {\n          class: `${blockClass}-status-icon ${blockClass}-status-icon-warning`,\n        });\n        break;\n      case 'informational':\n        icon = iconLoader(InformationSquareFilled16, {\n          class: `${blockClass}-status-icon ${blockClass}-status-icon-informational`,\n        });\n        break;\n      default:\n        icon = null;\n    }\n    return icon;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * The custom event is fired when the notification is closed by a user gesture.\n   */\n  static get notificationDismiss() {\n    return `${prefix}-notification-dismiss`;\n  }\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSNotification;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,aAAa;AACnB,MAAM,gBAAgB;AAEtB,MAAM,gBAAgB;;;;;;;;;;AAUtB,IAAA,kBAAA,MACM,wBAAwB,kBAAkB,WAAW,CAAC;;;wBAarB,KAAA;yBAEX,MAAqB;AAC7C,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjC,MAAK,OAAO;;;CAIhB,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,SAAS;AAErC,MAAI,CAAC,KAAK,aAAa,WAAW,CAChC,MAAK,aAAa,YAAY,IAAI;AAEpC,OAAK,iBAAiB,WAAW,KAAK,eAAe;;CAEvD,SAAS;EACP,MAAM,EACJ,MACA,WACA,gBACA,4BAA4B,2BAC5B,YAAY,cACV;EACJ,MAAM,kBAAkB,mBAAmB,gBAAgB,cAAc;AAEzE,SAAO,IAAI;QADE,UAAU,KAEf,CAAC;oBACO,WAAW;oBACX,WAAW;YACnB,eAAe,SAAS,OAAO,WAAmB;GAClD,QAAQ;GACR,OAAO;GACR,CAAC,CAAC;;;sBAGS,WAAW;;;;;;;;;iBAShB,WAAW;iBACX,0BAA0B;;UAEjC,WAAW,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAC;;;;CAI9C,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,OAAK,oBAAoB,WAAW,KAAK,eAAe;;;;;;;CAO1D,2BAAmC,OAAc;EAC/C,MAAM,cAAc,MAAM;AAC1B,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;EACvB,MAAM,OAAO;GACX,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ,EACN,aACD;GACF;AACD,OAAK,cACH,IAAI,YACD,KAAK,YAAuC,qBAC7C,KACD,CACF;;CAGH,WAAmB,MAAM;EACvB,IAAI;AACJ,UAAQ,MAAR;GACE,KAAK;AACH,WAAO,WAAW,eAAe,EAC/B,OAAO,GAAG,WAAW,eAAe,WAAW,qBAChD,CAAC;AACF;GACF,KAAK;AACH,WAAO,WAAW,mBAAmB,EACnC,OAAO,GAAG,WAAW,eAAe,WAAW,uBAChD,CAAC;AACF;GACF,KAAK;AACH,WAAO,WAAW,oBAAoB,EACpC,OAAO,GAAG,WAAW,eAAe,WAAW,uBAChD,CAAC;AACF;GACF,KAAK;AACH,WAAO,WAAW,2BAA2B,EAC3C,OAAO,GAAG,WAAW,eAAe,WAAW,6BAChD,CAAC;AACF;GACF,QACE,QAAO;;AAEX,SAAO;;;;;CAMT,WAAW,mBAAmB;AAC5B,SAAO;;;;;CAMT,WAAW,sBAAsB;AAC/B,SAAO;;;gBAEOA;;;YAtIf,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,gBAAA,WAAA,QAAA,KAAA,EAAA;YAK3B,UAAU,CAAA,EAAA,gBAAA,WAAA,aAAA,KAAA,EAAA;YAGV,QAAQ;CAAE,SAAS;CAAuB,WAAW;CAAM,CAAC,CAAA,EAAA,gBAAA,WAAA,kBAAA,KAAA,EAAA;8BAb9DC,cAAc,mBAAyB,CAAA,EAAA,gBAAA;AA8IxC,IAAA,uBAAe"}