@carbon/ibm-products-web-components 0.18.0-rc.0 → 0.19.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-custom-background,#fff);color:var(--cds-custom-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-custom-heading-06-font-size,2.625rem);font-weight:var(--cds-custom-heading-06-font-weight,300);letter-spacing:var(--cds-custom-heading-06-letter-spacing,0);line-height:var(--cds-custom-heading-06-line-height,1.199)}h2{font-size:var(--cds-custom-heading-05-font-size,2rem);font-weight:var(--cds-custom-heading-05-font-weight,400);letter-spacing:var(--cds-custom-heading-05-letter-spacing,0);line-height:var(--cds-custom-heading-05-line-height,1.25)}h3{font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}h4{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}h5{font-size:var(--cds-custom-heading-02-font-size,1rem);font-weight:var(--cds-custom-heading-02-font-weight,600);letter-spacing:var(--cds-custom-heading-02-letter-spacing,0);line-height:var(--cds-custom-heading-02-line-height,1.5)}h6{font-size:var(--cds-custom-heading-01-font-size,.875rem);font-weight:var(--cds-custom-heading-01-font-weight,600);letter-spacing:var(--cds-custom-heading-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-01-line-height,1.42857)}p{font-size:var(--cds-custom-body-02-font-size,1rem);font-weight:var(--cds-custom-body-02-font-weight,400);letter-spacing:var(--cds-custom-body-02-letter-spacing,0);line-height:var(--cds-custom-body-02-line-height,1.5)}a{color:var(--cds-custom-link-primary,#0062fe)}em{font-style:italic}@keyframes c4p--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes c4p--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes c4p--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.c4p--layout--size-xs{--c4p-layout-size-height-context:var(--c4p-layout-size-height-xs,1.5rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-xs{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-xs,1.5rem))}.c4p--layout-constraint--size__min-xs{--c4p-layout-size-height-min:var(--c4p-layout-size-height-xs,1.5rem)}.c4p--layout-constraint--size__max-xs{--c4p-layout-size-height-max:var(--c4p-layout-size-height-xs,1.5rem)}.c4p--layout--size-sm{--c4p-layout-size-height-context:var(--c4p-layout-size-height-sm,2rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-sm{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-sm,2rem))}.c4p--layout-constraint--size__min-sm{--c4p-layout-size-height-min:var(--c4p-layout-size-height-sm,2rem)}.c4p--layout-constraint--size__max-sm{--c4p-layout-size-height-max:var(--c4p-layout-size-height-sm,2rem)}.c4p--layout--size-md{--c4p-layout-size-height-context:var(--c4p-layout-size-height-md,2.5rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-md{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-md,2.5rem))}.c4p--layout-constraint--size__min-md{--c4p-layout-size-height-min:var(--c4p-layout-size-height-md,2.5rem)}.c4p--layout-constraint--size__max-md{--c4p-layout-size-height-max:var(--c4p-layout-size-height-md,2.5rem)}.c4p--layout--size-lg{--c4p-layout-size-height-context:var(--c4p-layout-size-height-lg,3rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-lg{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-lg,3rem))}.c4p--layout-constraint--size__min-lg{--c4p-layout-size-height-min:var(--c4p-layout-size-height-lg,3rem)}.c4p--layout-constraint--size__max-lg{--c4p-layout-size-height-max:var(--c4p-layout-size-height-lg,3rem)}.c4p--layout--size-xl{--c4p-layout-size-height-context:var(--c4p-layout-size-height-xl,4rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-xl{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-xl,4rem))}.c4p--layout-constraint--size__min-xl{--c4p-layout-size-height-min:var(--c4p-layout-size-height-xl,4rem)}.c4p--layout-constraint--size__max-xl{--c4p-layout-size-height-max:var(--c4p-layout-size-height-xl,4rem)}.c4p--layout--size-2xl{--c4p-layout-size-height-context:var(--c4p-layout-size-height-2xl,5rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-2xl{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-2xl,5rem))}.c4p--layout-constraint--size__min-2xl{--c4p-layout-size-height-min:var(--c4p-layout-size-height-2xl,5rem)}.c4p--layout-constraint--size__max-2xl{--c4p-layout-size-height-max:var(--c4p-layout-size-height-2xl,5rem)}.c4p--layout--density-condensed{--c4p-layout-density-padding-inline-context:var(--c4p-layout-density-padding-inline-condensed,0.5rem);--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context)}.c4p--layout-constraint--density__default-condensed{--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context,var(--c4p-layout-density-padding-inline-condensed,0.5rem))}.c4p--layout-constraint--density__min-condensed{--c4p-layout-density-padding-inline-min:var(--c4p-layout-density-padding-inline-condensed,0.5rem)}.c4p--layout-constraint--density__max-condensed{--c4p-layout-density-padding-inline-max:var(--c4p-layout-density-padding-inline-condensed,0.5rem)}.c4p--layout--density-normal{--c4p-layout-density-padding-inline-context:var(--c4p-layout-density-padding-inline-normal,1rem);--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context)}.c4p--layout-constraint--density__default-normal{--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context,var(--c4p-layout-density-padding-inline-normal,1rem))}.c4p--layout-constraint--density__min-normal{--c4p-layout-density-padding-inline-min:var(--c4p-layout-density-padding-inline-normal,1rem)}.c4p--layout-constraint--density__max-normal{--c4p-layout-density-padding-inline-max:var(--c4p-layout-density-padding-inline-normal,1rem)}:root{--c4p-layout-size-height-xs:1.5rem;--c4p-layout-size-height-sm:2rem;--c4p-layout-size-height-md:2.5rem;--c4p-layout-size-height-lg:3rem;--c4p-layout-size-height-xl:4rem;--c4p-layout-size-height-2xl:5rem;--c4p-layout-size-height-min:0px;--c4p-layout-size-height-max:999999999px;--c4p-layout-density-padding-inline-condensed:0.5rem;--c4p-layout-density-padding-inline-normal:1rem;--c4p-layout-density-padding-inline-min:0px;--c4p-layout-density-padding-inline-max:999999999px}.c4p--assistive-text,.c4p--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--empty-state{color:var(--cds-custom-text-primary,#161616);display:flex}.c4p--empty-state .c4p--empty-state__header{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4);margin:0;padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-body-01-line-height,1.42857);padding-block-end:1rem}.c4p--empty-state .c4p--empty-state__header--small{font-size:var(--cds-custom-body-compact-02-font-size,1rem);font-weight:var(--cds-custom-body-compact-02-font-weight,400);letter-spacing:var(--cds-custom-body-compact-02-letter-spacing,0);line-height:var(--cds-custom-body-compact-02-line-height,1.375);padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle--small{font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--empty-state__illustration{block-size:auto;margin-block-end:1rem}.c4p--empty-state__illustration.c4p--empty-state__illustration--lg{max-inline-size:5rem;min-inline-size:5rem}.c4p--empty-state__illustration.c4p--empty-state__illustration--sm{max-inline-size:4rem;min-inline-size:4rem}.c4p--empty-state-position--top{flex-direction:column}.c4p--empty-state-position--right{flex-direction:row-reverse}.c4p--empty-state-position--bottom{flex-direction:column-reverse}.c4p--empty-state-position--left{flex-direction:row}.c4p--empty-state .c4p--empty-state__action-button{display:block;margin-block-end:1rem}.c4p--empty-state .c4p--empty-state__link{display:inline-block}@keyframes notifications-panel-fade-in{0%{opacity:0;transform:translateY(-38.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes notifications-panel-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-38.5rem)}}@keyframes notifications-panel-entrance-reduced{0%{opacity:0}to{opacity:1}}@keyframes notifications-panel-exit-reduced{0%{opacity:1}to{opacity:0}}.c4p--notifications-panel__entrance{animation:notifications-panel-fade-in .24s cubic-bezier(.2,0,.38,.9)}.c4p--notifications-panel__exit{animation:notifications-panel-fade-out .24s cubic-bezier(.2,0,.38,.9) forwards}@media (prefers-reduced-motion){.c4p--notifications-panel__entrance{animation:notifications-panel-entrance-reduced .15s cubic-bezier(.2,0,1,.9) forwards}.c4p--notifications-panel__exit{animation:notifications-panel-exit-reduced .15s cubic-bezier(.2,0,1,.9) forwards}}.c4p--notifications-panel__container{background-color:var(--cds-custom-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-custom-border-subtle-02,#e0e0e0);border-inline-start:1px solid var(--cds-custom-border-subtle-02,#e0e0e0);box-shadow:0 .125rem .25rem var(--cds-custom-overlay,hsla(0,0%,9%,.5));color:var(--cds-custom-text-primary,#161616);inset-block-start:3rem;inset-inline-end:0;max-block-size:38.5rem;max-inline-size:22.75rem;min-block-size:38.5rem;min-inline-size:20rem;overflow:auto;position:fixed;transition:transform .11s cubic-bezier(.2,0,.38,.9);z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__header-container{background-color:var(--cds-custom-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:0;padding:.5rem 1rem;position:sticky;z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header-flex{align-items:center;display:flex;justify-content:space-between}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle{padding-block-end:.5rem}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle .cds-custom--toggle__label-text{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__dismiss-button{color:var(--cds-custom-text-primary,#161616)}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header{font-size:var(--cds-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572);margin:0}.c4p--notifications-panel__container .c4p--notifications-panel__time-section-label{background-color:var(--cds-custom-layer-01,#f4f4f4);color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);font-weight:600;inset-block-start:3.0625rem;letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);padding:.5rem 1rem;position:sticky;z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__notification:focus,.c4p--notifications-panel__container .c4p--notifications-panel__notification:hover{background-color:var(--cds-custom-layer-accent-01,#e0e0e0)}.c4p--notifications-panel__container .c4p--notifications-panel__notification:focus .c4p--notifications-panel__dismiss-single-button,.c4p--notifications-panel__container .c4p--notifications-panel__notification:hover .c4p--notifications-panel__dismiss-single-button{opacity:1}.c4p--notifications-panel__container .c4p--notifications-panel__notification:focus{border-color:var(--cds-custom-focus,#0f62fe);box-shadow:inset 0 0 0 2px var(--cds-custom-focus,#0f62fe),inset 0 0 0 2px var(--cds-custom-background,#fff);outline:0}.c4p--notifications-panel__container .c4p--notifications-panel__notification{align-items:flex-start;background-color:var(--cds-custom-layer-01,#f4f4f4);border:0;cursor:pointer;display:flex;inline-size:100%;min-block-size:6.25rem;padding:1rem;position:relative;text-align:start;transition:background-color .24s cubic-bezier(.2,0,.38,.9)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-heading-01-font-size,.875rem);font-weight:var(--cds-custom-heading-01-font-weight,600);font-weight:400;letter-spacing:var(--cds-custom-heading-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-01-line-height,1.42857);margin-block-end:.25rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title.c4p--notifications-panel__notification-title-unread{color:var(--cds-custom-text-secondary,#525252);font-weight:600;margin-block-end:.25rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notifications-link{font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon{margin-inline-end:.5rem;min-inline-size:1rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-error{fill:var(--cds-custom-support-error,#da1e28)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success{fill:var(--cds-custom-support-success,#24a148)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning{fill:var(--cds-custom-support-warning,#f1c21b)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-informational{fill:var(--cds-custom-support-info,#0043ce)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label{margin-block-end:.5rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-short-description{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-long-description{display:block;overflow:initial;-webkit-line-clamp:initial;line-clamp:none}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button{align-items:center;display:flex;font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);min-inline-size:5.5rem;padding:0}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transition:transform .24s ease}@media (prefers-reduced-motion:reduce){.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transition:none}}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transform:rotate(0deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon{transform:rotate(180deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .cds-custom--popover-container{position:static}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button{align-items:center;color:var(--cds-custom-text-primary,#161616);display:flex;inset-block-start:0;inset-inline-end:0;justify-content:center;min-inline-size:2rem;opacity:0;padding:0;position:absolute}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:focus,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:hover{opacity:1}.c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-today:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before{background-color:var(--cds-custom-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:calc(100% - 2rem);inset-block-start:0;margin:0 auto;position:absolute;transition:background-color .24s cubic-bezier(.2,0,.38,.9)}.c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:hover+.c4p--notifications-panel__notification-previous:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover+.c4p--notifications-panel__notification-today:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover+.c4p--notifications-panel__notification-yesterday:not(:first-of-type):before{background-color:transparent}.c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section{align-items:center;block-size:100%;display:flex;justify-content:center;margin-block-start:10rem;min-block-size:0}.c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section .c4p-subtext{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--notifications-panel__container .c4p--notifications-panel__main-section{min-block-size:498px}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions{align-items:center;background-color:var(--cds-custom-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;inset-block-end:0;min-block-size:2.5rem;position:sticky;z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__view-all-button{align-items:center;block-size:2.5rem;border-inline-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);color:var(--cds-custom-text-primary,#161616);display:flex;inline-size:100%;max-inline-size:calc(100% - 2.5rem);min-block-size:2.5rem}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button{align-items:center;block-size:2.5rem;color:var(--cds-custom-text-primary,#161616);display:flex;justify-content:center;min-block-size:2.5rem;min-inline-size:2.5rem;padding:0}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button .cds-custom--btn__icon{margin:0}.c4p--notifications-panel__header-container:has(.c4p--notifications-panel__do-not-disturb-toggle)+.c4p--notifications-panel__main-section .c4p--notifications-panel__time-section-label{inset-block-start:4.8125rem}:host(c4p-notification){align-items:flex-start;background-color:var(--cds-custom-layer-01,#f4f4f4);border:0;cursor:pointer;display:flex;inline-size:100%;min-block-size:6.25rem;padding:1rem;position:relative;text-align:start;transition:background-color .24s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){:host(c4p-notification):before{background-color:var(--cds-custom-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:calc(100% - 2rem);inset-block-start:0;margin:0 auto;position:absolute;transition:none}}:host(c4p-notification):before{background-color:var(--cds-custom-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:calc(100% - 2rem);inset-block-start:0;margin:0 auto;position:absolute;transition:background-color .24s cubic-bezier(.2,0,.38,.9)}: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-custom-support-error,#da1e28)}:host(c4p-notification) .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success{fill:var(--cds-custom-support-success,#24a148)}:host(c4p-notification) .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning{fill:var(--cds-custom-support-warning,#f1c21b)}:host(c4p-notification) .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-informational{fill:var(--cds-custom-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-custom-text-primary,#161616);display:flex;inset-block-start:0;inset-inline-end:0;justify-content:center;min-inline-size:2rem;opacity:0;padding:0;position:absolute;--cds-custom-link-primary:--cds-custom-text-primary;--cds-custom-link-primary-hover:--cds-custom-text-primary}: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-description,:host(c4p-notification) .c4p--notifications-panel__notification-time-label{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}:host(c4p-notification) .c4p--notifications-panel__notification-description{display:block}::slotted(.c4p--notifications-panel__notification-title){color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-heading-01-font-size,.875rem);font-weight:var(--cds-custom-heading-01-font-weight,600);font-weight:400;letter-spacing:var(--cds-custom-heading-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-01-line-height,1.42857);margin-block-end:.25rem}::slotted(.c4p--notifications-panel__notification-title-unread){color:var(--cds-custom-text-secondary,#525252);font-weight:600;margin-block-end:.25rem}:host(.first-notification):before{content:none}:host(:focus),:host(:hover){background-color:var(--cds-custom-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/page-header/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './page-header';
+import './page-header-breadcrumb';
+import './page-header-content';
+import './page-header-content-text';
+import './page-header-hero-image';
+import './page-header-tabs';

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

@@ -0,0 +1,14 @@
+/**
+ * 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 './page-header.js';
+import './page-header-breadcrumb.js';
+import './page-header-content.js';
+import './page-header-content-text.js';
+import './page-header-hero-image.js';
+import './page-header-tabs.js';
+//# sourceMappingURL=index.js.map

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

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

package/es-custom/components/page-header/page-header-breadcrumb.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+/**
+ * Page header Breadcrumb Bar.
+ * @element c4p-page-header-breadcrumb
+ */
+declare class CDSPageHeaderBreadcrumb extends LitElement {
+    /**
+     * Specify if breadcrumb bar has bottom border.
+     */
+    border: boolean;
+    /**
+     * Set to `true` if the breadcrumb bar is sitting within a grid
+     * (ie. when used in tandem with page-header-hero-image)
+     */
+    withinGrid: boolean;
+    /**
+     * Set to `true` if page actions should be flush (no padding)
+     */
+    pageActionsFlush: boolean;
+    /**
+     * Set to `true` if content actions should be flush (no padding)
+     */
+    contentActionsFlush: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSPageHeaderBreadcrumb;

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

@@ -0,0 +1,94 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { prefix, carbonPrefix } from '../../globals/settings.js';
+import { property } from 'lit/decorators.js';
+import styles from './page-header.scss.js';
+import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Page header Breadcrumb Bar.
+ * @element c4p-page-header-breadcrumb
+ */
+let CDSPageHeaderBreadcrumb = class CDSPageHeaderBreadcrumb extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specify if breadcrumb bar has bottom border.
+         */
+        this.border = true;
+        /**
+         * Set to `true` if the breadcrumb bar is sitting within a grid
+         * (ie. when used in tandem with page-header-hero-image)
+         */
+        this.withinGrid = false;
+        /**
+         * Set to `true` if page actions should be flush (no padding)
+         */
+        this.pageActionsFlush = false;
+        /**
+         * Set to `true` if content actions should be flush (no padding)
+         */
+        this.contentActionsFlush = false;
+    }
+    render() {
+        const { withinGrid } = this;
+        const gridClasses = classMap({
+            [`${carbonPrefix}--css-grid`]: !withinGrid,
+            [`${carbonPrefix}--subgrid ${carbonPrefix}--subgrid--wide`]: withinGrid,
+        });
+        return html `
+      <div class="${gridClasses}">
+        <div
+          class="${carbonPrefix}--sm:col-span-4 ${carbonPrefix}--md:col-span-8 ${carbonPrefix}--lg:col-span-16 ${carbonPrefix}--css-grid-column"
+        >
+          <div class="${prefix}--page-header__breadcrumb-container">
+            <div class="${prefix}--page-header__breadcrumb-wrapper">
+              <slot name="icon"></slot>
+              <slot></slot>
+            </div>
+            <div class="${prefix}--page-header__breadcrumb__actions">
+              <slot name="content-actions"></slot>
+              <slot name="page-actions"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+CDSPageHeaderBreadcrumb.styles = styles;
+__decorate([
+    property({ reflect: true })
+], CDSPageHeaderBreadcrumb.prototype, "border", void 0);
+__decorate([
+    property({ attribute: 'within-grid', type: Boolean })
+], CDSPageHeaderBreadcrumb.prototype, "withinGrid", void 0);
+__decorate([
+    property({ attribute: 'page-actions-flush', type: Boolean })
+], CDSPageHeaderBreadcrumb.prototype, "pageActionsFlush", void 0);
+__decorate([
+    property({ attribute: 'content-actions-flush', type: Boolean })
+], CDSPageHeaderBreadcrumb.prototype, "contentActionsFlush", void 0);
+CDSPageHeaderBreadcrumb = __decorate([
+    carbonElement(`${prefix}-page-header-breadcrumb`)
+], CDSPageHeaderBreadcrumb);
+var CDSPageHeaderBreadcrumb$1 = CDSPageHeaderBreadcrumb;
+
+export { CDSPageHeaderBreadcrumb$1 as default };
+//# sourceMappingURL=page-header-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-breadcrumb.js","sources":["../../../src/components/page-header/page-header-breadcrumb.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AASH;;;AAGG;AAEH,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU,CAAA;AAAhD,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAM,CAAA,MAAA,GAAG,IAAI;AAEb;;;AAGG;QAEH,IAAU,CAAA,UAAA,GAAG,KAAK;AAElB;;AAEG;QAEH,IAAgB,CAAA,gBAAA,GAAG,KAAK;AAExB;;AAEG;QAEH,IAAmB,CAAA,mBAAA,GAAG,KAAK;;IAE3B,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI;QAC3B,MAAM,WAAW,GAAG,QAAQ,CAAC;AAC3B,YAAA,CAAC,GAAG,YAAY,CAAA,UAAA,CAAY,GAAG,CAAC,UAAU;AAC1C,YAAA,CAAC,GAAG,YAAY,CAAA,UAAA,EAAa,YAAY,CAAiB,eAAA,CAAA,GAAG,UAAU;AACxE,SAAA,CAAC;AAEF,QAAA,OAAO,IAAI,CAAA;oBACK,WAAW,CAAA;;AAEZ,iBAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,oBAAoB,YAAY,CAAA;;wBAErG,MAAM,CAAA;0BACJ,MAAM,CAAA;;;;0BAIN,MAAM,CAAA;;;;;;;KAO3B;;;AAGI,uBAAM,CAAA,MAAA,GAAG,MAAH;AAhDb,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACb,CAAA,EAAA,uBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAOd,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE;AAClC,CAAA,EAAA,uBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAMnB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,OAAO,EAAE;AACnC,CAAA,EAAA,uBAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,MAAA,CAAA;AAMzB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,IAAI,EAAE,OAAO,EAAE;AACnC,CAAA,EAAA,uBAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,MAAA,CAAA;AAxBxB,uBAAuB,GAAA,UAAA,CAAA;AAD5B,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,uBAAA,CAAyB;AAC3C,CAAA,EAAA,uBAAuB,CAsD5B;AAED,gCAAe,uBAAuB;;;;"}

package/es-custom/components/page-header/page-header-content-text.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+/**
+ * Page header Content Text.
+ * @element c4p-page-header-content-text
+ */
+declare class CDSPageHeaderContentText extends LitElement {
+    /**
+     * Subtitle text of the page-header-content
+     */
+    subtitle: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSPageHeaderContentText;

package/es-custom/components/page-header/page-header-content-text.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings.js';
+import styles from './page-header.scss.js';
+import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Page header Content Text.
+ * @element c4p-page-header-content-text
+ */
+let CDSPageHeaderContentText = class CDSPageHeaderContentText extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Subtitle text of the page-header-content
+         */
+        this.subtitle = '';
+    }
+    render() {
+        const { subtitle } = this;
+        return html `
+      ${subtitle &&
+            html `<h3 class="${prefix}--page-header__content__subtitle">
+        ${subtitle}
+      </h3>`}
+      <slot></slot>
+    `;
+    }
+};
+CDSPageHeaderContentText.styles = styles;
+__decorate([
+    property()
+], CDSPageHeaderContentText.prototype, "subtitle", void 0);
+CDSPageHeaderContentText = __decorate([
+    carbonElement(`${prefix}-page-header-content-text`)
+], CDSPageHeaderContentText);
+var CDSPageHeaderContentText$1 = CDSPageHeaderContentText;
+
+export { CDSPageHeaderContentText$1 as default };
+//# sourceMappingURL=page-header-content-text.js.map

package/es-custom/components/page-header/page-header-content-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-content-text.js","sources":["../../../src/components/page-header/page-header-content-text.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAQH;;;AAGG;AAEH,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU,CAAA;AAAjD,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAQ,CAAA,QAAA,GAAG,EAAE;;IAEb,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI;AAEzB,QAAA,OAAO,IAAI,CAAA;QACP,QAAQ;YACV,IAAI,CAAA,cAAc,MAAM,CAAA;UACpB,QAAQ;AACN,WAAA,CAAA;;KAEP;;;AAGI,wBAAM,CAAA,MAAA,GAAG,MAAH;AAdb,UAAA,CAAA;AADC,IAAA,QAAQ;AACK,CAAA,EAAA,wBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AALV,wBAAwB,GAAA,UAAA,CAAA;AAD7B,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,yBAAA,CAA2B;AAC7C,CAAA,EAAA,wBAAwB,CAoB7B;AAED,iCAAe,wBAAwB;;;;"}

package/es-custom/components/page-header/page-header-content.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+import '@carbon/web-components/es-custom/components/tooltip/index.js';
+/**
+ * Page header content.
+ * @element c4p-page-header-content
+ */
+declare class CDSPageHeaderContent extends LitElement {
+    /**
+     * Set to `true` if there are contextual actions
+     */
+    private _hasContextualActions;
+    /**
+     * Handles `slotchange` event.
+     */
+    protected _handleSlotChange({ target }: Event): void;
+    /**
+     * Title text of the page-header-content
+     */
+    title: string;
+    /**
+     * Set to `true` if the tag text has ellipsis applied
+     */
+    _hasEllipsisApplied: boolean;
+    /**
+     * Set to `true` if the breadcrumb bar is sitting within a grid
+     * (ie. when used in tandem with page-header-hero-image)
+     */
+    withinGrid: boolean;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSPageHeaderContent;

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

@@ -0,0 +1,131 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property, state } from 'lit/decorators.js';
+import { prefix, carbonPrefix } from '../../globals/settings.js';
+import '@carbon/web-components/es-custom/components/tooltip/index.js';
+import styles from './page-header.scss.js';
+import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Page header content.
+ * @element c4p-page-header-content
+ */
+let CDSPageHeaderContent = class CDSPageHeaderContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Set to `true` if there are contextual actions
+         */
+        this._hasContextualActions = false;
+        /**
+         * Title text of the page-header-content
+         */
+        this.title = '';
+        /**
+         * Set to `true` if the tag text has ellipsis applied
+         */
+        this._hasEllipsisApplied = false;
+        /**
+         * Set to `true` if the breadcrumb bar is sitting within a grid
+         * (ie. when used in tandem with page-header-hero-image)
+         */
+        this.withinGrid = false;
+    }
+    /**
+     * Handles `slotchange` event.
+     */
+    _handleSlotChange({ target }) {
+        this._hasContextualActions = Boolean(target.assignedNodes());
+        if (this._hasContextualActions) {
+            this.setAttribute('contextual-actions', 'true');
+        }
+        else {
+            this.removeAttribute('contextual-actions');
+        }
+        this.requestUpdate();
+    }
+    updated() {
+        var _a;
+        const textContainer = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${prefix}--page-header__content__title`);
+        if (!textContainer || this._hasEllipsisApplied === true) {
+            return;
+        }
+        this._hasEllipsisApplied =
+            textContainer.scrollHeight > textContainer.clientHeight;
+    }
+    render() {
+        const { title, withinGrid, _hasEllipsisApplied: hasEllipsisApplied, _handleSlotChange: handleSlotChange, } = this;
+        const gridClasses = classMap({
+            [`${carbonPrefix}--css-grid`]: !withinGrid,
+            [`${carbonPrefix}--subgrid ${carbonPrefix}--subgrid--wide`]: withinGrid,
+        });
+        return html ` <div class="${gridClasses}">
+      <div
+        class="${carbonPrefix}--sm:col-span-4 ${carbonPrefix}--md:col-span-8 ${carbonPrefix}--lg:col-span-16 ${carbonPrefix}--css-grid-column"
+      >
+        <div class="${prefix}--page-header__content__title-wrapper">
+          <div class="${prefix}--page-header__content__start">
+            <div class="${prefix}--page-header__content__title-container">
+              <slot name="icon"></slot>
+              ${hasEllipsisApplied
+            ? html `
+                    <cds-custom-definition-tooltip>
+                      <span slot="definition">${title}</span>
+                      <h4 class="${prefix}--page-header__content__title">
+                        ${title}
+                      </h4>
+                    </cds-custom-definition-tooltip>
+                  `
+            : html `
+                    <h4 class="${prefix}--page-header__content__title">
+                      ${title}
+                    </h4>
+                  `}
+            </div>
+            <slot
+              name="contextual-actions"
+              @slotchange=${handleSlotChange}
+            ></slot>
+          </div>
+          <div class="${prefix}--page-header__content__page-actions">
+            <slot name="page-actions"></slot>
+          </div>
+        </div>
+        <slot></slot>
+      </div>
+    </div>`;
+    }
+};
+CDSPageHeaderContent.styles = styles;
+__decorate([
+    property()
+], CDSPageHeaderContent.prototype, "title", void 0);
+__decorate([
+    state()
+], CDSPageHeaderContent.prototype, "_hasEllipsisApplied", void 0);
+__decorate([
+    property({ attribute: 'within-grid', type: Boolean })
+], CDSPageHeaderContent.prototype, "withinGrid", void 0);
+CDSPageHeaderContent = __decorate([
+    carbonElement(`${prefix}-page-header-content`)
+], CDSPageHeaderContent);
+var CDSPageHeaderContent$1 = CDSPageHeaderContent;
+
+export { CDSPageHeaderContent$1 as default };
+//# sourceMappingURL=page-header-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-content.js","sources":["../../../src/components/page-header/page-header-content.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAUH;;;AAGG;AAEH,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU,CAAA;AAA7C,IAAA,WAAA,GAAA;;AACE;;AAEG;QACK,IAAqB,CAAA,qBAAA,GAAG,KAAK;AAiBrC;;AAEG;QAEH,IAAK,CAAA,KAAA,GAAG,EAAE;AAEV;;AAEG;QAEH,IAAmB,CAAA,mBAAA,GAAG,KAAK;AAE3B;;;AAGG;QAEH,IAAU,CAAA,UAAA,GAAG,KAAK;;AAhClB;;AAEG;IACO,iBAAiB,CAAC,EAAE,MAAM,EAAS,EAAA;QAC3C,IAAI,CAAC,qBAAqB,GAAG,OAAO,CACjC,MAA0B,CAAC,aAAa,EAAE,CAC5C;AACD,QAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE;AAC9B,YAAA,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC;;aAC1C;AACL,YAAA,IAAI,CAAC,eAAe,CAAC,oBAAoB,CAAC;;QAE5C,IAAI,CAAC,aAAa,EAAE;;IAsBtB,OAAO,GAAA;;AACL,QAAA,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAClD,CAAA,CAAA,EAAI,MAAM,CAAA,6BAAA,CAA+B,CAC1C;QAED,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,mBAAmB,KAAK,IAAI,EAAE;YACvD;;AAGF,QAAA,IAAI,CAAC,mBAAmB;AACtB,YAAA,aAAa,CAAC,YAAY,GAAG,aAAa,CAAC,YAAY;;IAG3D,MAAM,GAAA;AACJ,QAAA,MAAM,EACJ,KAAK,EACL,UAAU,EACV,mBAAmB,EAAE,kBAAkB,EACvC,iBAAiB,EAAE,gBAAgB,GACpC,GAAG,IAAI;QAER,MAAM,WAAW,GAAG,QAAQ,CAAC;AAC3B,YAAA,CAAC,GAAG,YAAY,CAAA,UAAA,CAAY,GAAG,CAAC,UAAU;AAC1C,YAAA,CAAC,GAAG,YAAY,CAAA,UAAA,EAAa,YAAY,CAAiB,eAAA,CAAA,GAAG,UAAU;AACxE,SAAA,CAAC;QAEF,OAAO,IAAI,CAAA,CAAA,aAAA,EAAgB,WAAW,CAAA;;AAEzB,eAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,oBAAoB,YAAY,CAAA;;sBAErG,MAAM,CAAA;wBACJ,MAAM,CAAA;0BACJ,MAAM,CAAA;;gBAEhB;cACE,IAAI,CAAA;;gDAE0B,KAAK,CAAA;mCAClB,MAAM,CAAA;0BACf,KAAK;;;AAGZ,kBAAA;cACD,IAAI,CAAA;iCACW,MAAM,CAAA;wBACf,KAAK;;AAEV,kBAAA,CAAA;;;;4BAIS,gBAAgB;;;wBAGpB,MAAM,CAAA;;;;;;WAMnB;;;AAGF,oBAAM,CAAA,MAAA,GAAG,MAAH;AA9Eb,UAAA,CAAA;AADC,IAAA,QAAQ;AACE,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMX,UAAA,CAAA;AADC,IAAA,KAAK;AACsB,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,MAAA,CAAA;AAO5B,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE;AAClC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAtCf,oBAAoB,GAAA,UAAA,CAAA;AADzB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,oBAAA,CAAsB;AACxC,CAAA,EAAA,oBAAoB,CAwGzB;AAED,6BAAe,oBAAoB;;;;"}

package/es-custom/components/page-header/page-header-hero-image.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+/**
+ * Page header Hero Image.
+ * @element c4p-page-header-hero-image
+ */
+declare class CDSPageHeaderHeroImage extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSPageHeaderHeroImage;

package/es-custom/components/page-header/page-header-hero-image.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings.js';
+import styles from './page-header.scss.js';
+import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Page header Hero Image.
+ * @element c4p-page-header-hero-image
+ */
+let CDSPageHeaderHeroImage = class CDSPageHeaderHeroImage extends LitElement {
+    render() {
+        return html `<slot></slot> `;
+    }
+};
+CDSPageHeaderHeroImage.styles = styles;
+CDSPageHeaderHeroImage = __decorate([
+    carbonElement(`${prefix}-page-header-hero-image`)
+], CDSPageHeaderHeroImage);
+var CDSPageHeaderHeroImage$1 = CDSPageHeaderHeroImage;
+
+export { CDSPageHeaderHeroImage$1 as default };
+//# sourceMappingURL=page-header-hero-image.js.map

package/es-custom/components/page-header/page-header-hero-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-hero-image.js","sources":["../../../src/components/page-header/page-header-hero-image.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAOH;;;AAGG;AAEH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU,CAAA;IAC7C,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,cAAA,CAAgB;;;AAGtB,sBAAM,CAAA,MAAA,GAAG,MAAH;AALT,sBAAsB,GAAA,UAAA,CAAA;AAD3B,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,uBAAA,CAAyB;AAC3C,CAAA,EAAA,sBAAsB,CAM3B;AAED,+BAAe,sBAAsB;;;;"}

package/es-custom/components/page-header/page-header-tabs.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+/**
+ * Page header Tabs Bar.
+ * @element c4p-page-header-tabs
+ */
+declare class CDSPageHeaderTabs extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSPageHeaderTabs;

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

@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { LitElement, html } from 'lit';
+import { prefix, carbonPrefix } from '../../globals/settings.js';
+import styles from './page-header.scss.js';
+import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Page header Tabs Bar.
+ * @element c4p-page-header-tabs
+ */
+let CDSPageHeaderTabs = class CDSPageHeaderTabs extends LitElement {
+    render() {
+        return html ` <div class="${carbonPrefix}--css-grid">
+      <div
+        class="${carbonPrefix}--sm:col-span-4 ${carbonPrefix}--md:col-span-8 ${carbonPrefix}--lg:col-span-16 ${carbonPrefix}--css-grid-column"
+      >
+        <div class="${prefix}--page-header__tab-bar--tablist">
+          <slot></slot>
+          <slot name="tags"></slot>
+        </div>
+      </div>
+    </div>`;
+    }
+};
+CDSPageHeaderTabs.styles = styles;
+CDSPageHeaderTabs = __decorate([
+    carbonElement(`${prefix}-page-header-tabs`)
+], CDSPageHeaderTabs);
+var CDSPageHeaderTabs$1 = CDSPageHeaderTabs;
+
+export { CDSPageHeaderTabs$1 as default };
+//# sourceMappingURL=page-header-tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-tabs.js","sources":["../../../src/components/page-header/page-header-tabs.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAOH;;;AAGG;AAEH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU,CAAA;IACxC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,aAAA,EAAgB,YAAY,CAAA;;AAE1B,eAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,CAAmB,gBAAA,EAAA,YAAY,oBAAoB,YAAY,CAAA;;sBAErG,MAAM,CAAA;;;;;WAKjB;;;AAGF,iBAAM,CAAA,MAAA,GAAG,MAAH;AAdT,iBAAiB,GAAA,UAAA,CAAA;AADtB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,iBAAA,CAAmB;AACrC,CAAA,EAAA,iBAAiB,CAetB;AAED,0BAAe,iBAAiB;;;;"}