@carbon/ibm-products-web-components 0.30.0-rc.0 → 0.31.0-rc.0

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

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+var styles = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-feature-settings:\"liga\" 1;font-size:100%;margin:0;padding:0;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-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));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 .cds-custom--toggle__label-text{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__dismiss-button{color:var(--cds-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 .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transition:transform .24s ease}@media (prefers-reduced-motion:reduce){.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transition:none}}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transform:rotate(0deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon{transform:rotate(180deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .cds-custom--popover-container{position:static}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button{align-items:center;color:var(--cds-text-primary,#161616);display:flex;inset-block-start:0;inset-inline-end:0;justify-content:center;min-inline-size:2rem;opacity:0;padding:0;position:absolute}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:focus,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:hover{opacity:1}.c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-today:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before{background-color:var(--cds-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 .cds-custom--btn__icon{margin:0}.c4p--notifications-panel__header-container:has(.c4p--notifications-panel__do-not-disturb-toggle)+.c4p--notifications-panel__main-section .c4p--notifications-panel__time-section-label{inset-block-start:4.8125rem}:host(c4p-notification){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)}@media screen and (prefers-reduced-motion:reduce){:host(c4p-notification):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:none}}:host(c4p-notification):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)}:host(c4p-notification):hover:before{background-color:transparent}:host(c4p-notification) .c4p--notifications-panel__notification-status-icon{margin-inline-end:.5rem;min-inline-size:1rem}:host(c4p-notification) .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-error{fill:var(--cds-support-error,#da1e28)}:host(c4p-notification) .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success{fill:var(--cds-support-success,#24a148)}:host(c4p-notification) .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning{fill:var(--cds-support-warning,#f1c21b)}:host(c4p-notification) .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-informational{fill:var(--cds-support-info,#0043ce)}:host(c4p-notification) .c4p--notifications-panel__notification-time-label{margin-block-end:.5rem}:host(c4p-notification) .c4p--notifications-panel__notification__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}:host(c4p-notification) .c4p--notifications-panel__notification__dismiss-single-button:focus,:host(c4p-notification) .c4p--notifications-panel__notification__dismiss-single-button:hover{opacity:1}:host(c4p-notification) .c4p--notifications-panel__notification__dismiss-single-button{--cds-link-primary:--cds-text-primary;--cds-link-primary-hover:--cds-text-primary}:host(c4p-notification) .c4p--notifications-panel__notification-description,:host(c4p-notification) .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)}:host(c4p-notification) .c4p--notifications-panel__notification-description{display:block}::slotted(.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}::slotted(.c4p--notifications-panel__notification-title-unread){color:var(--cds-text-secondary,#525252);font-weight:600;margin-block-end:.25rem}:host(.first-notification):before{content:none}:host(:focus),:host(:hover){background-color:var(--cds-layer-accent-01,#e0e0e0)}:host(:focus) .c4p--notifications-panel__notification__dismiss-single-button,:host(:hover) .c4p--notifications-panel__notification__dismiss-single-button{opacity:1}:host(:focus):before,:host(:hover):before{background-color:transparent}:host(.c4p--notifications-panel__notification--next):before{background-color:transparent}"]);
+
+export { styles as default };
+//# sourceMappingURL=notification.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/es-custom/components/notification-panel/notification.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './index';

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

@@ -0,0 +1,152 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { fixture, elementUpdated, oneEvent, html } from '@open-wc/testing';
+import './notification-panel.js';
+import './notification.js';
+import './notification-footer.js';
+import { dateTimeFormat as r } from '../../node_modules/@carbon/utilities/es/dateTimeFormat/index.js';
+import '../../node_modules/@carbon/utilities/es/documentLang/documentLang.js';
+
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const templateNotification = () => {
+    const timeStamp = new Date(new Date().getTime() - 30 * 1000);
+    return html `
+    <c4p-notification
+      slot="today"
+      @c4p-notification-dismiss=${() => {
+        console.log('dismiss notification');
+    }}
+      type="error"
+      ?unread="true"
+      .timestamp=${timeStamp}
+    >
+      <h4 class="c4p--notifications-panel__notification" slot="title">
+        LogDNA cannot be reached.
+      </h4>
+      <div slot="description">Unable to communicate with LogDNA.</div>
+    </c4p-notification>
+  `;
+};
+describe('c4p-notification', () => {
+    it('should render the notification', async () => {
+        const notification = (await fixture(templateNotification()));
+        expect(notification).toBeDefined();
+    });
+    it('should render appropriate icon based the "type" prop passed', async () => {
+        var _a, _b, _c, _d;
+        const notification = (await fixture(templateNotification()));
+        expect(notification.type).toBe('error');
+        let iconElement = (_a = notification.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.c4p--notifications-panel__notification-status-icon-error');
+        expect(iconElement).not.toBeNull();
+        notification.type = 'success';
+        await elementUpdated(notification);
+        iconElement = (_b = notification.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.c4p--notifications-panel__notification-status-icon-success');
+        expect(iconElement).not.toBeNull();
+        notification.type = 'warning';
+        await elementUpdated(notification);
+        iconElement = (_c = notification.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.c4p--notifications-panel__notification-status-icon-warning');
+        expect(iconElement).not.toBeNull();
+        notification.type = 'informational';
+        await elementUpdated(notification);
+        iconElement = (_d = notification.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.c4p--notifications-panel__notification-status-icon-informational');
+        expect(iconElement).not.toBeNull();
+    });
+    it('should render appropriate time label based the "timestamp" prop passed', async () => {
+        var _a, _b;
+        const notification = (await fixture(templateNotification()));
+        const dateTimeValue = r.relative.format(notification.timestamp, {
+            locale: 'en-US',
+            style: 'long',
+        });
+        // EXPECT THAT THE TIMESTAMP HAS A VALUE
+        expect(notification.timestamp).toBeDefined();
+        // CHECK IF THE NOTIFICATION TIMESTAMP IS A DATE
+        expect(notification.timestamp).toEqual(expect.any(Date));
+        // EXPECT THAT THE LABEL MATCHES THE DATETIME VALUE PASSED TO THE COMPONENT
+        const notificationTimeLabel = (_a = notification.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.c4p--notifications-panel__notification-time-label');
+        expect((_b = notificationTimeLabel === null || notificationTimeLabel === void 0 ? void 0 : notificationTimeLabel.textContent) === null || _b === void 0 ? void 0 : _b.trim()).toBe(dateTimeValue);
+    });
+    it('should render heading as "title" slot', async () => {
+        var _a, _b;
+        const notification = (await fixture(templateNotification()));
+        await elementUpdated(notification);
+        const titleSlot = (_a = notification.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="title"]');
+        expect(titleSlot).toBeDefined();
+        const assignedElements = titleSlot.assignedElements({
+            flatten: true,
+        });
+        const titleElement = assignedElements[0];
+        expect(titleElement.tagName).toBe('H4');
+        expect(titleElement.classList.contains('c4p--notifications-panel__notification')).toBe(true);
+        expect(titleElement.getAttribute('slot')).toBe('title');
+        expect((_b = titleElement.textContent) === null || _b === void 0 ? void 0 : _b.trim()).toBe('LogDNA cannot be reached.');
+    });
+    it('should render description as "description" slot', async () => {
+        var _a, _b;
+        const notification = (await fixture(templateNotification()));
+        await elementUpdated(notification);
+        const descriptionSlot = (_a = notification.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="description"]');
+        expect(descriptionSlot).toBeDefined();
+        const assignedElements = descriptionSlot.assignedElements({
+            flatten: true,
+        });
+        const descriptionElement = assignedElements[0];
+        expect(descriptionElement.tagName).toBe('DIV');
+        expect(descriptionElement.getAttribute('slot')).toBe('description');
+        expect((_b = descriptionElement.textContent) === null || _b === void 0 ? void 0 : _b.trim()).toBe('Unable to communicate with LogDNA.');
+    });
+    it('should emit "c4p-notification-dismiss" when clicked on single dismiss button', async () => {
+        var _a;
+        const notification = (await fixture(templateNotification()));
+        const eventPromise = oneEvent(notification, 'c4p-notification-dismiss');
+        const singleDismissButton = (_a = notification.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.c4p--notifications-panel__notification__dismiss-single-button');
+        singleDismissButton === null || singleDismissButton === void 0 ? void 0 : singleDismissButton.click();
+        const event = await eventPromise;
+        expect(event).toBeDefined();
+    });
+    it('triggers click() on Enter key', async () => {
+        let clickCalled = false;
+        const notification = (await fixture(templateNotification()));
+        notification.click = () => {
+            clickCalled = true;
+        }; // Mock click()
+        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+        //@ts-ignore
+        notification._handleKeyDown(enterEvent);
+        expect(clickCalled).to.be.true;
+    });
+    it('triggers click() on Space key', async () => {
+        let clickCalled = false;
+        const notification = (await fixture(templateNotification()));
+        notification.click = () => {
+            clickCalled = true;
+        }; // Mock click()
+        const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });
+        //@ts-ignore
+        notification._handleKeyDown(spaceEvent);
+        expect(clickCalled).to.be.true;
+    });
+    it('does nothing for other keys', async () => {
+        let clickCalled = false;
+        const notification = (await fixture(templateNotification()));
+        notification.click = () => {
+            clickCalled = true;
+        };
+        const otherKeyEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+        //@ts-ignore
+        notification._handleKeyDown(otherKeyEvent);
+        expect(clickCalled).to.be.false;
+    });
+});
+//# sourceMappingURL=notification.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification.test.js","sources":["../../../src/components/notification-panel/notification.test.ts"],"sourcesContent":[null],"names":["dateTimeFormat"],"mappings":"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"}

package/es-custom/components/options-tile/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './options-tile';

package/es-custom/components/options-tile/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './options-tile.js';
+//# sourceMappingURL=index.js.map

package/es-custom/components/options-tile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/es-custom/components/options-tile/options-file.figma.js

@@ -0,0 +1,96 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './options-tile.js';
+import figma, { html } from '@figma/code-connect/html';
+
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+figma.connect(
+  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=36228%3A14503',
+  {
+    props: {
+      title: figma.string('Heading text'),
+      open: figma.boolean('Expanded'),
+      size: figma.enum('Size', {
+        Large: 'lg',
+        'Extra large': 'xl',
+      }),
+      toggle: figma.boolean('Toggle', {
+        true: '<cds-custom-toggle id="my-toggle" size="sm" hideLabel></cds-custom-toggle>',
+        false: undefined,
+      }),
+      children: figma.enum('Type', {
+        Static: undefined,
+        Expandable: figma.instance('Swap slot'),
+      }),
+      summaryProps: figma.boolean('Summary + Validation', {
+        true: figma.nestedProps('Summary + Validation message', {
+          locked: figma.enum('Type', {
+            Summary: figma.boolean('Locked'),
+            Warning: false,
+            Error: false,
+          }),
+          summary: figma.enum('Type', {
+            Summary: figma.string('Summary text'),
+            Warning: undefined,
+            Error: undefined,
+          }),
+          invalid: figma.enum('Type', {
+            Summary: undefined,
+            Warning: undefined,
+            Error: true,
+          }),
+          invalidText: figma.enum('Type', {
+            Summary: undefined,
+            Warning: undefined,
+            Error: figma.string('Error text'),
+          }),
+          warn: figma.enum('Type', {
+            Summary: undefined,
+            Warning: true,
+            Error: undefined,
+          }),
+          warnText: figma.enum('Type', {
+            Summary: undefined,
+            Warning: figma.string('Warning text'),
+            Error: undefined,
+          }),
+        }),
+        false: {
+          locked: undefined,
+          summary: undefined,
+          invalid: undefined,
+          invalidText: undefined,
+          warn: undefined,
+          warnText: undefined,
+        },
+      }),
+    },
+    example: (props) => html`
+      <c4p-options-tile
+        ?defaultOpen="${props.open}"
+        size="${props.size}"
+        titleText="${props.title}"
+      >
+        <div slot="summary">${props.summaryProps.summary}</div>
+        <div slot="toggle">${props.toggle}</div>
+        <div slot="body">${props.children}</div>
+      </c4p-options-tile>
+    `,
+    imports: [
+      "import '@carbon/ibm-products-web-components/es/components/options-tile/index';",
+    ],
+  }
+);
+//# sourceMappingURL=options-file.figma.js.map

package/es-custom/components/options-tile/options-file.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-file.figma.js","sources":["../../../src/components/options-tile/options-file.figma.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport './options-tile';\nimport figma, { html } from '@figma/code-connect/html';\n\nfigma.connect(\n  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=36228%3A14503',\n  {\n    props: {\n      title: figma.string('Heading text'),\n      open: figma.boolean('Expanded'),\n      size: figma.enum('Size', {\n        Large: 'lg',\n        'Extra large': 'xl',\n      }),\n      toggle: figma.boolean('Toggle', {\n        true: '<cds-custom-toggle id=\"my-toggle\" size=\"sm\" hideLabel></cds-custom-toggle>',\n        false: undefined,\n      }),\n      children: figma.enum('Type', {\n        Static: undefined,\n        Expandable: figma.instance('Swap slot'),\n      }),\n      summaryProps: figma.boolean('Summary + Validation', {\n        true: figma.nestedProps('Summary + Validation message', {\n          locked: figma.enum('Type', {\n            Summary: figma.boolean('Locked'),\n            Warning: false,\n            Error: false,\n          }),\n          summary: figma.enum('Type', {\n            Summary: figma.string('Summary text'),\n            Warning: undefined,\n            Error: undefined,\n          }),\n          invalid: figma.enum('Type', {\n            Summary: undefined,\n            Warning: undefined,\n            Error: true,\n          }),\n          invalidText: figma.enum('Type', {\n            Summary: undefined,\n            Warning: undefined,\n            Error: figma.string('Error text'),\n          }),\n          warn: figma.enum('Type', {\n            Summary: undefined,\n            Warning: true,\n            Error: undefined,\n          }),\n          warnText: figma.enum('Type', {\n            Summary: undefined,\n            Warning: figma.string('Warning text'),\n            Error: undefined,\n          }),\n        }),\n        false: {\n          locked: undefined,\n          summary: undefined,\n          invalid: undefined,\n          invalidText: undefined,\n          warn: undefined,\n          warnText: undefined,\n        },\n      }),\n    },\n    example: (props) => html`\n      <c4p-options-tile\n        ?defaultOpen=\"${props.open}\"\n        size=\"${props.size}\"\n        titleText=\"${props.title}\"\n      >\n        <div slot=\"summary\">${props.summaryProps.summary}</div>\n        <div slot=\"toggle\">${props.toggle}</div>\n        <div slot=\"body\">${props.children}</div>\n      </c4p-options-tile>\n    `,\n    imports: [\n      \"import '@carbon/ibm-products-web-components/es/components/options-tile/index';\",\n    ],\n  }\n);\n"],"names":[],"mappings":"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"}