@carbon/ibm-products-web-components 0.22.0 → 0.23.0-rc.0

package/es-custom/components/user-avatar/user-avatar.scss.js

@@ -7,7 +7,7 @@
 
 import { css } from 'lit';
 
-var styles = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-feature-settings:\"liga\" 1;font-size:100%;margin:0;padding:0;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-custom-background,#fff);color:var(--cds-custom-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-custom-heading-06-font-size,2.625rem);font-weight:var(--cds-custom-heading-06-font-weight,300);letter-spacing:var(--cds-custom-heading-06-letter-spacing,0);line-height:var(--cds-custom-heading-06-line-height,1.199)}h2{font-size:var(--cds-custom-heading-05-font-size,2rem);font-weight:var(--cds-custom-heading-05-font-weight,400);letter-spacing:var(--cds-custom-heading-05-letter-spacing,0);line-height:var(--cds-custom-heading-05-line-height,1.25)}h3{font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}h4{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}h5{font-size:var(--cds-custom-heading-02-font-size,1rem);font-weight:var(--cds-custom-heading-02-font-weight,600);letter-spacing:var(--cds-custom-heading-02-letter-spacing,0);line-height:var(--cds-custom-heading-02-line-height,1.5)}h6{font-size:var(--cds-custom-heading-01-font-size,.875rem);font-weight:var(--cds-custom-heading-01-font-weight,600);letter-spacing:var(--cds-custom-heading-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-01-line-height,1.42857)}p{font-size:var(--cds-custom-body-02-font-size,1rem);font-weight:var(--cds-custom-body-02-font-weight,400);letter-spacing:var(--cds-custom-body-02-letter-spacing,0);line-height:var(--cds-custom-body-02-line-height,1.5)}a{color:var(--cds-custom-link-primary,#0062fe)}em{font-style:italic}.cds-custom--layout--size-xs{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xs,1.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-sm,2rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-md,2.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-lg,3rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xl,4rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-2xl,5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-normal,1rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-normal,1rem)}:root{--cds-custom-layout-size-height-xs:1.5rem;--cds-custom-layout-size-height-sm:2rem;--cds-custom-layout-size-height-md:2.5rem;--cds-custom-layout-size-height-lg:3rem;--cds-custom-layout-size-height-xl:4rem;--cds-custom-layout-size-height-2xl:5rem;--cds-custom-layout-size-height-min:0px;--cds-custom-layout-size-height-max:999999999px;--cds-custom-layout-density-padding-inline-condensed:0.5rem;--cds-custom-layout-density-padding-inline-normal:1rem;--cds-custom-layout-density-padding-inline-min:0px;--cds-custom-layout-density-padding-inline-max:999999999px}@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds-custom--assistive-text,.cds-custom--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--user-avatar{align-items:center;block-size:4rem;border:.5px solid transparent;border-radius:100%;color:var(--cds-custom-text-inverse,#fff);display:flex;inline-size:4rem;justify-content:center;outline:none;outline-offset:3px;position:relative}.c4p--user-avatar svg{color:var(--cds-custom-icon-inverse,#fff)}.c4p--user-avatar__tooltip:focus-within .c4p--user-avatar{outline:2px solid var(--cds-custom-focus,#0f62fe);outline-offset:1px}.cds-custom--g10 .c4p--user-avatar--order-1-cyan,.cds-custom--white .c4p--user-avatar--order-1-cyan,:root .c4p--user-avatar--order-1-cyan{background-color:#0072c3}.cds-custom--g10 .c4p--user-avatar--order-2-gray,.cds-custom--white .c4p--user-avatar--order-2-gray,:root .c4p--user-avatar--order-2-gray{background-color:#6f6f6f}.cds-custom--g10 .c4p--user-avatar--order-3-green,.cds-custom--white .c4p--user-avatar--order-3-green,:root .c4p--user-avatar--order-3-green{background-color:#198038}.cds-custom--g10 .c4p--user-avatar--order-4-magenta,.cds-custom--white .c4p--user-avatar--order-4-magenta,:root .c4p--user-avatar--order-4-magenta{background-color:#d02670}.cds-custom--g10 .c4p--user-avatar--order-5-purple,.cds-custom--white .c4p--user-avatar--order-5-purple,:root .c4p--user-avatar--order-5-purple{background-color:#8a3ffc}.cds-custom--g10 .c4p--user-avatar--order-6-teal,.cds-custom--white .c4p--user-avatar--order-6-teal,:root .c4p--user-avatar--order-6-teal{background-color:#007d79}.cds-custom--g10 .c4p--user-avatar--order-7-cyan,.cds-custom--white .c4p--user-avatar--order-7-cyan,:root .c4p--user-avatar--order-7-cyan{background-color:#003a6d}.cds-custom--g10 .c4p--user-avatar--order-8-gray,.cds-custom--white .c4p--user-avatar--order-8-gray,:root .c4p--user-avatar--order-8-gray{background-color:#393939}.cds-custom--g10 .c4p--user-avatar--order-9-green,.cds-custom--white .c4p--user-avatar--order-9-green,:root .c4p--user-avatar--order-9-green{background-color:#044317}.cds-custom--g10 .c4p--user-avatar--order-10-magenta,.cds-custom--white .c4p--user-avatar--order-10-magenta,:root .c4p--user-avatar--order-10-magenta{background-color:#740937}.cds-custom--g10 .c4p--user-avatar--order-11-purple,.cds-custom--white .c4p--user-avatar--order-11-purple,:root .c4p--user-avatar--order-11-purple{background-color:#491d8b}.cds-custom--g10 .c4p--user-avatar--order-12-teal,.cds-custom--white .c4p--user-avatar--order-12-teal,:root .c4p--user-avatar--order-12-teal{background-color:#004144}.cds-custom--g100 .c4p--user-avatar--order-1-cyan,.cds-custom--g90 .c4p--user-avatar--order-1-cyan{background-color:#1192e8}.cds-custom--g100 .c4p--user-avatar--order-2-gray,.cds-custom--g90 .c4p--user-avatar--order-2-gray{background-color:#8d8d8d}.cds-custom--g100 .c4p--user-avatar--order-3-green,.cds-custom--g90 .c4p--user-avatar--order-3-green{background-color:#24a148}.cds-custom--g100 .c4p--user-avatar--order-4-magenta,.cds-custom--g90 .c4p--user-avatar--order-4-magenta{background-color:#ee5396}.cds-custom--g100 .c4p--user-avatar--order-5-purple,.cds-custom--g90 .c4p--user-avatar--order-5-purple{background-color:#a56eff}.cds-custom--g100 .c4p--user-avatar--order-6-teal,.cds-custom--g90 .c4p--user-avatar--order-6-teal{background-color:#009d9a}.cds-custom--g100 .c4p--user-avatar--order-7-cyan,.cds-custom--g90 .c4p--user-avatar--order-7-cyan{background-color:#82cfff}.cds-custom--g100 .c4p--user-avatar--order-8-gray,.cds-custom--g90 .c4p--user-avatar--order-8-gray{background-color:#c6c6c6}.cds-custom--g100 .c4p--user-avatar--order-9-green,.cds-custom--g90 .c4p--user-avatar--order-9-green{background-color:#6fdc8c}.cds-custom--g100 .c4p--user-avatar--order-10-magenta,.cds-custom--g90 .c4p--user-avatar--order-10-magenta{background-color:#ffafd2}.cds-custom--g100 .c4p--user-avatar--order-11-purple,.cds-custom--g90 .c4p--user-avatar--order-11-purple{background-color:#d4bbff}.cds-custom--g100 .c4p--user-avatar--order-12-teal,.cds-custom--g90 .c4p--user-avatar--order-12-teal{background-color:#3ddbd9}.c4p--user-avatar--xl{block-size:4rem;font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);inline-size:4rem;letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}.c4p--user-avatar--lg{block-size:3rem;font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);inline-size:3rem;letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}.c4p--user-avatar--md{block-size:2rem;font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);inline-size:2rem;letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--user-avatar--sm{block-size:1.5rem;font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);inline-size:1.5rem;letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--user-avatar__photo{border-radius:100%;-o-object-fit:contain;object-fit:contain}.c4p--user-avatar__photo--xl{block-size:4rem;border-radius:100%;inline-size:4rem;-o-object-fit:fill;object-fit:fill}.c4p--user-avatar__photo--lg{block-size:3rem;border-radius:100%;inline-size:3rem;-o-object-fit:fill;object-fit:fill}.c4p--user-avatar__photo--md{block-size:2rem;border-radius:100%;inline-size:2rem;-o-object-fit:fill;object-fit:fill}.c4p--user-avatar__photo--sm{block-size:1.5rem;border-radius:100%;inline-size:1.5rem;-o-object-fit:fill;object-fit:fill}:host(c4p-user-avatar){display:inline-block}:host(c4p-user-avatar) .c4p--user-avatar{box-sizing:border-box}:host(c4p-user-avatar) .c4p--user-avatar--xl ::slotted([slot=rendericon]){block-size:2rem;inline-size:2rem}:host(c4p-user-avatar) .c4p--user-avatar--lg ::slotted([slot=rendericon]){block-size:1.5rem;inline-size:1.5rem}:host(c4p-user-avatar) .c4p--user-avatar--md ::slotted([slot=rendericon]){block-size:1.25rem;inline-size:1.25rem}:host(c4p-user-avatar) .c4p--user-avatar--sm ::slotted([slot=rendericon]){block-size:1rem;inline-size:1rem}:host(c4p-user-avatar) .c4p--user-avatar__tooltip-trigger{background:none;border:0;outline:none;padding:0}:host(c4p-user-avatar) .c4p--user-avatar__tooltip-content{--cds-custom-tooltip-padding-block:0.125rem}:host(c4p-user-avatar) .c4p--user-avatar__tooltip-content:focus-within{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:1px}:host(c4p-user-avatar) .c4p--user-avatar--order-1-cyan,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-1-cyan{background-color:#0072c3}:host(c4p-user-avatar) .c4p--user-avatar--order-2-gray,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-2-gray{background-color:#6f6f6f}:host(c4p-user-avatar) .c4p--user-avatar--order-3-green,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-3-green{background-color:#198038}:host(c4p-user-avatar) .c4p--user-avatar--order-4-magenta,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-4-magenta{background-color:#d02670}:host(c4p-user-avatar) .c4p--user-avatar--order-5-purple,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-5-purple{background-color:#8a3ffc}:host(c4p-user-avatar) .c4p--user-avatar--order-6-teal,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-6-teal{background-color:#007d79}:host(c4p-user-avatar) .c4p--user-avatar--order-7-cyan,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-7-cyan{background-color:#003a6d}:host(c4p-user-avatar) .c4p--user-avatar--order-8-gray,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-8-gray{background-color:#393939}:host(c4p-user-avatar) .c4p--user-avatar--order-9-green,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-9-green{background-color:#044317}:host(c4p-user-avatar) .c4p--user-avatar--order-10-magenta,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-10-magenta{background-color:#740937}:host(c4p-user-avatar) .c4p--user-avatar--order-11-purple,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-11-purple{background-color:#491d8b}:host(c4p-user-avatar) .c4p--user-avatar--order-12-teal,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-12-teal{background-color:#004144}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-1-cyan{background-color:#1192e8}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-2-gray{background-color:#8d8d8d}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-3-green{background-color:#24a148}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-4-magenta{background-color:#ee5396}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-5-purple{background-color:#a56eff}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-6-teal{background-color:#009d9a}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-7-cyan{background-color:#82cfff}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-8-gray{background-color:#c6c6c6}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-9-green{background-color:#6fdc8c}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-10-magenta{background-color:#ffafd2}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-11-purple{background-color:#d4bbff}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-12-teal{background-color:#3ddbd9}"]);
+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}.cds-custom--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds-custom--assistive-text,.cds-custom--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--user-avatar{align-items:center;block-size:4rem;border:.5px solid transparent;border-radius:100%;color:var(--cds-text-inverse,#fff);display:flex;inline-size:4rem;justify-content:center;outline:none;outline-offset:3px;position:relative}.c4p--user-avatar svg{color:var(--cds-icon-inverse,#fff)}.c4p--user-avatar__tooltip:focus-within .c4p--user-avatar{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds-custom--g10 .c4p--user-avatar--order-1-cyan,.cds-custom--white .c4p--user-avatar--order-1-cyan,:root .c4p--user-avatar--order-1-cyan{background-color:#0072c3}.cds-custom--g10 .c4p--user-avatar--order-2-gray,.cds-custom--white .c4p--user-avatar--order-2-gray,:root .c4p--user-avatar--order-2-gray{background-color:#6f6f6f}.cds-custom--g10 .c4p--user-avatar--order-3-green,.cds-custom--white .c4p--user-avatar--order-3-green,:root .c4p--user-avatar--order-3-green{background-color:#198038}.cds-custom--g10 .c4p--user-avatar--order-4-magenta,.cds-custom--white .c4p--user-avatar--order-4-magenta,:root .c4p--user-avatar--order-4-magenta{background-color:#d02670}.cds-custom--g10 .c4p--user-avatar--order-5-purple,.cds-custom--white .c4p--user-avatar--order-5-purple,:root .c4p--user-avatar--order-5-purple{background-color:#8a3ffc}.cds-custom--g10 .c4p--user-avatar--order-6-teal,.cds-custom--white .c4p--user-avatar--order-6-teal,:root .c4p--user-avatar--order-6-teal{background-color:#007d79}.cds-custom--g10 .c4p--user-avatar--order-7-cyan,.cds-custom--white .c4p--user-avatar--order-7-cyan,:root .c4p--user-avatar--order-7-cyan{background-color:#003a6d}.cds-custom--g10 .c4p--user-avatar--order-8-gray,.cds-custom--white .c4p--user-avatar--order-8-gray,:root .c4p--user-avatar--order-8-gray{background-color:#393939}.cds-custom--g10 .c4p--user-avatar--order-9-green,.cds-custom--white .c4p--user-avatar--order-9-green,:root .c4p--user-avatar--order-9-green{background-color:#044317}.cds-custom--g10 .c4p--user-avatar--order-10-magenta,.cds-custom--white .c4p--user-avatar--order-10-magenta,:root .c4p--user-avatar--order-10-magenta{background-color:#740937}.cds-custom--g10 .c4p--user-avatar--order-11-purple,.cds-custom--white .c4p--user-avatar--order-11-purple,:root .c4p--user-avatar--order-11-purple{background-color:#491d8b}.cds-custom--g10 .c4p--user-avatar--order-12-teal,.cds-custom--white .c4p--user-avatar--order-12-teal,:root .c4p--user-avatar--order-12-teal{background-color:#004144}.cds-custom--g100 .c4p--user-avatar--order-1-cyan,.cds-custom--g90 .c4p--user-avatar--order-1-cyan{background-color:#1192e8}.cds-custom--g100 .c4p--user-avatar--order-2-gray,.cds-custom--g90 .c4p--user-avatar--order-2-gray{background-color:#8d8d8d}.cds-custom--g100 .c4p--user-avatar--order-3-green,.cds-custom--g90 .c4p--user-avatar--order-3-green{background-color:#24a148}.cds-custom--g100 .c4p--user-avatar--order-4-magenta,.cds-custom--g90 .c4p--user-avatar--order-4-magenta{background-color:#ee5396}.cds-custom--g100 .c4p--user-avatar--order-5-purple,.cds-custom--g90 .c4p--user-avatar--order-5-purple{background-color:#a56eff}.cds-custom--g100 .c4p--user-avatar--order-6-teal,.cds-custom--g90 .c4p--user-avatar--order-6-teal{background-color:#009d9a}.cds-custom--g100 .c4p--user-avatar--order-7-cyan,.cds-custom--g90 .c4p--user-avatar--order-7-cyan{background-color:#82cfff}.cds-custom--g100 .c4p--user-avatar--order-8-gray,.cds-custom--g90 .c4p--user-avatar--order-8-gray{background-color:#c6c6c6}.cds-custom--g100 .c4p--user-avatar--order-9-green,.cds-custom--g90 .c4p--user-avatar--order-9-green{background-color:#6fdc8c}.cds-custom--g100 .c4p--user-avatar--order-10-magenta,.cds-custom--g90 .c4p--user-avatar--order-10-magenta{background-color:#ffafd2}.cds-custom--g100 .c4p--user-avatar--order-11-purple,.cds-custom--g90 .c4p--user-avatar--order-11-purple{background-color:#d4bbff}.cds-custom--g100 .c4p--user-avatar--order-12-teal,.cds-custom--g90 .c4p--user-avatar--order-12-teal{background-color:#3ddbd9}.c4p--user-avatar--xl{block-size:4rem;font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);inline-size:4rem;letter-spacing:var(--cds-heading-04-letter-spacing,0);line-height:var(--cds-heading-04-line-height,1.28572)}.c4p--user-avatar--lg{block-size:3rem;font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);inline-size:3rem;letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}.c4p--user-avatar--md{block-size:2rem;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);inline-size:2rem;letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--user-avatar--sm{block-size:1.5rem;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);inline-size:1.5rem;letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333)}.c4p--user-avatar__photo{border-radius:100%;-o-object-fit:contain;object-fit:contain}.c4p--user-avatar__photo--xl{block-size:4rem;border-radius:100%;inline-size:4rem;-o-object-fit:fill;object-fit:fill}.c4p--user-avatar__photo--lg{block-size:3rem;border-radius:100%;inline-size:3rem;-o-object-fit:fill;object-fit:fill}.c4p--user-avatar__photo--md{block-size:2rem;border-radius:100%;inline-size:2rem;-o-object-fit:fill;object-fit:fill}.c4p--user-avatar__photo--sm{block-size:1.5rem;border-radius:100%;inline-size:1.5rem;-o-object-fit:fill;object-fit:fill}:host(c4p-user-avatar){display:inline-block}:host(c4p-user-avatar) .c4p--user-avatar{box-sizing:border-box}:host(c4p-user-avatar) .c4p--user-avatar--xl ::slotted([slot=rendericon]){block-size:2rem;inline-size:2rem}:host(c4p-user-avatar) .c4p--user-avatar--lg ::slotted([slot=rendericon]){block-size:1.5rem;inline-size:1.5rem}:host(c4p-user-avatar) .c4p--user-avatar--md ::slotted([slot=rendericon]){block-size:1.25rem;inline-size:1.25rem}:host(c4p-user-avatar) .c4p--user-avatar--sm ::slotted([slot=rendericon]){block-size:1rem;inline-size:1rem}:host(c4p-user-avatar) .c4p--user-avatar__tooltip-trigger{background:none;border:0;outline:none;padding:0}:host(c4p-user-avatar) .c4p--user-avatar__tooltip-content{--cds-tooltip-padding-block:0.125rem}:host(c4p-user-avatar) .c4p--user-avatar__tooltip-content:focus-within{outline:.125rem solid var(--cds-focus,#0f62fe);outline-offset:1px}:host(c4p-user-avatar) .c4p--user-avatar--order-1-cyan,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-1-cyan{background-color:#0072c3}:host(c4p-user-avatar) .c4p--user-avatar--order-2-gray,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-2-gray{background-color:#6f6f6f}:host(c4p-user-avatar) .c4p--user-avatar--order-3-green,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-3-green{background-color:#198038}:host(c4p-user-avatar) .c4p--user-avatar--order-4-magenta,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-4-magenta{background-color:#d02670}:host(c4p-user-avatar) .c4p--user-avatar--order-5-purple,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-5-purple{background-color:#8a3ffc}:host(c4p-user-avatar) .c4p--user-avatar--order-6-teal,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-6-teal{background-color:#007d79}:host(c4p-user-avatar) .c4p--user-avatar--order-7-cyan,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-7-cyan{background-color:#003a6d}:host(c4p-user-avatar) .c4p--user-avatar--order-8-gray,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-8-gray{background-color:#393939}:host(c4p-user-avatar) .c4p--user-avatar--order-9-green,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-9-green{background-color:#044317}:host(c4p-user-avatar) .c4p--user-avatar--order-10-magenta,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-10-magenta{background-color:#740937}:host(c4p-user-avatar) .c4p--user-avatar--order-11-purple,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-11-purple{background-color:#491d8b}:host(c4p-user-avatar) .c4p--user-avatar--order-12-teal,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-12-teal{background-color:#004144}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-1-cyan{background-color:#1192e8}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-2-gray{background-color:#8d8d8d}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-3-green{background-color:#24a148}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-4-magenta{background-color:#ee5396}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-5-purple{background-color:#a56eff}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-6-teal{background-color:#009d9a}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-7-cyan{background-color:#82cfff}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-8-gray{background-color:#c6c6c6}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-9-green{background-color:#6fdc8c}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-10-magenta{background-color:#ffafd2}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-11-purple{background-color:#d4bbff}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-12-teal{background-color:#3ddbd9}"]);
 
 export { styles as default };
 //# sourceMappingURL=user-avatar.scss.js.map

package/es-custom/packages/ibm-products-web-components/package.json.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var version = "0.22.0-rc.0";
+var version = "0.22.0";
 var packageJson = {
 	version: version};
 

package/es-custom/utilities/manageFocusTrap/manageFocusTrap.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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.
+ */
+export declare const registerFocusableContainers: (container: any) => void;
+export declare const clearFocusableContainers: () => void;
+export declare const trapFocus: (containers?: HTMLElement[]) => {
+    cleanup: () => void;
+};

package/es-custom/utilities/manageFocusTrap/manageFocusTrap.js

@@ -0,0 +1,138 @@
+/**
+ * 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 { selectorTabbable, prefix } from '@carbon/web-components/es/globals/settings';
+
+/**
+ * @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.
+ */
+/**
+ * Traps focus within a set of containers, ensuring it stays within focusable elements.
+ * @param {NodeListOf<Element>} containers - The containers to trap focus within.
+ * @returns {object} An object with a `cleanup` method to remove event listeners.
+ */
+let _containers = [];
+const registerFocusableContainers = (container) => {
+    if (container) {
+        _containers.push(container);
+    }
+};
+const clearFocusableContainers = () => {
+    _containers.length = 0;
+};
+const trapFocus = (containers) => {
+    const selectorTabbable$1 = selectorTabbable.replace(`${prefix}-button`, `${prefix}-button:not([disabled]), ${prefix}-selectable-tag`);
+    if (containers && containers.length > 0) {
+        _containers = containers;
+    }
+    if (!_containers.length) {
+        return { cleanup: () => { } };
+    }
+    /**
+     * Given a container element, return the best candidate to focus.
+     * - If element itself is tabbable, return it.
+     * - Otherwise, find the first tabbable descendant.
+     */
+    const getFocusTarget = (el) => {
+        if (!el) {
+            return null;
+        }
+        if (el.tagName === 'BUTTON' || el.tabIndex >= 0) {
+            return el;
+        }
+        const inner = el.querySelector('button, [tabindex]:not([tabindex="-1"])');
+        return inner || el;
+    };
+    /**
+  
+   * Returns the "real" active element in the document, resolving through
+   * Shadow DOM and slot boundaries when necessary.
+   *
+   * In some cases `document.activeElement` may not reflect the actual
+   * tabbable node that has focus:
+   *   - If focus is inside a shadow root, `document.activeElement` is the host,
+   *     not the element inside. This utility dives into the shadowRoot to find
+   *     the inner active element.
+   *   - If focus is on a `<slot>` element, this function resolves to the first
+   *     tabbable assigned element within the slot.
+     */
+    const getRealActiveElement = () => {
+        var _a;
+        let activeElement = document.activeElement;
+        // If inside shadow DOM
+        if (activeElement &&
+            selectorTabbable$1.indexOf(activeElement.tagName.toLocaleLowerCase()) ==
+                -1 &&
+            ((_a = activeElement === null || activeElement === void 0 ? void 0 : activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)) {
+            activeElement = activeElement.shadowRoot.activeElement;
+        }
+        // If active element is a slot
+        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) === 'SLOT') {
+            let assigned;
+            if (activeElement instanceof HTMLSlotElement) {
+                assigned = activeElement.assignedElements({ flatten: true });
+            }
+            const candidate = assigned === null || assigned === void 0 ? void 0 : assigned.find((node) => node.matches('button, [tabindex]:not([tabindex="-1"])'));
+            if (candidate) {
+                activeElement = candidate;
+            }
+        }
+        return activeElement;
+    };
+    //Optionally focus first element immediately
+    requestAnimationFrame(() => {
+        var _a;
+        const elements = getAllFocusableElements(_containers);
+        (_a = getFocusTarget(elements[0])) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+    });
+    function onKeyDown(e) {
+        var _a, _b;
+        if (e.key !== 'Tab') {
+            return;
+        }
+        // Flatten all focusable elements from all containers
+        const elements = getAllFocusableElements(_containers);
+        const first = elements[0];
+        const last = elements[elements.length - 1];
+        const active = getRealActiveElement();
+        if (e.shiftKey) {
+            // Shift+Tab wrap
+            if (active === first || first.contains(active)) {
+                e.preventDefault();
+                (_a = getFocusTarget(last)) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+        else {
+            // Tab wrap
+            if (active === last || last.contains(active)) {
+                e.preventDefault();
+                (_b = getFocusTarget(first)) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+    }
+    /**
+     * Retrieves all focusable elements within the provided containers.
+     **/
+    const getAllFocusableElements = (containers) => containers
+        .flatMap((container) => [...container.querySelectorAll(selectorTabbable$1)])
+        .filter(Boolean);
+    document.addEventListener('keydown', onKeyDown, true);
+    return {
+        cleanup: () => {
+            document.removeEventListener('keydown', onKeyDown, true);
+            _containers.length = 0;
+        },
+    };
+};
+
+export { clearFocusableContainers, registerFocusableContainers, trapFocus };
+//# sourceMappingURL=manageFocusTrap.js.map

package/es-custom/utilities/manageFocusTrap/manageFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"manageFocusTrap.js","sources":["../../../src/utilities/manageFocusTrap/manageFocusTrap.ts"],"sourcesContent":[null],"names":["selectorTabbable","selectorTabbableCarbon","carbonPrefix"],"mappings":"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"}

package/lib/components/interstitial-screen/interstitial-screen-footer.d.ts

@@ -394,6 +394,7 @@ declare class CDSInterstitialScreenFooter extends CDSInterstitialScreenFooter_ba
      */
     asyncAction: any;
     loadingAction: any;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected updated(_changedProperties: PropertyValues): void;
     private _handleUserInitiatedClose;
     private handleSkip;

package/lib/components/interstitial-screen/interstitial-screen-header.d.ts

@@ -6,7 +6,7 @@
  * 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 { LitElement, PropertyValues } from 'lit';
 import '@carbon/web-components/es/components/progress-indicator/index.js';
 declare const CDSInterstitialScreenHeader_base: {
     new (...args: any[]): {
@@ -378,6 +378,7 @@ declare class CDSInterstitialScreenHeader extends CDSInterstitialScreenHeader_ba
      * Optional parameter to hide the progress indicator when multiple steps are used.
      */
     hideProgressIndicator: boolean;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     private getStepState;
     /**
      * Handles user-initiated close request of this tearsheet.

package/lib/components/interstitial-screen/interstitial-screen.d.ts

@@ -392,6 +392,7 @@ declare class CDSInterstitialScreen extends CDSInterstitialScreen_base {
      */
     modalBody: HTMLElement;
     private _wasOpen;
+    private _trapFocusAPI;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;

package/lib/components/notification-panel/notification.d.ts

@@ -41,13 +41,7 @@ declare const CDSNotification_base: {
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options
-        /**
-         * Sets the type of notification to display: 'error', 'warning', 'success', or 'informational'
-         */
-        ? /**
-         * Sets the type of notification to display: 'error', 'warning', 'success', or 'informational'
-         */: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;

package/lib/components/side-panel/_story-assets/index.d.ts

@@ -1,5 +1,8 @@
+import '@carbon/web-components/es/components/breadcrumb/index.js';
+import '@carbon/web-components/es/components/notification/index.js';
 export declare const getContent: (index: any) => import("lit-html").TemplateResult<1> | null;
 export declare const getSubTitle: (index: any) => import("lit-html").TemplateResult<1> | null;
 export declare const getActionToolbarItems: (index: any) => import("lit-html").TemplateResult<1> | null;
 export declare const getActionItems: (index: any) => import("lit-html").TemplateResult<1> | null;
 export declare const getSlug: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getCustomHeaderComponents: (index: any) => import("lit-html").TemplateResult<1> | null;

package/lib/components/side-panel/side-panel.d.ts

@@ -399,6 +399,7 @@ declare class CDSSidePanel extends CDSSidePanel_base {
     _hasActionToolbar: boolean;
     _actionsCount: number;
     _slugCloseSize: string;
+    _customHeaderElements: Element[];
     /**
      * Get focusable elements.
      *
@@ -440,6 +441,7 @@ declare class CDSSidePanel extends CDSSidePanel_base {
     private _checkUpdateIconButtonSizes;
     private _handleSlugChange;
     private _handleSubtitleChange;
+    private _handleCustomHeaderSlotChange;
     private _handleActionToolbarChange;
     private _checkUpdateActionSizes;
     private _maxActions;

package/lib/components/user-avatar/user-avatar.d.ts

@@ -41,11 +41,7 @@ declare const CDSUseravatar_base: {
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options
-        /**
-         * Set theme in which the component will be rendered.
-         */
-        ?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;

package/lib/utilities/manageFocusTrap/manageFocusTrap.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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.
+ */
+export declare const registerFocusableContainers: (container: any) => void;
+export declare const clearFocusableContainers: () => void;
+export declare const trapFocus: (containers?: HTMLElement[]) => {
+    cleanup: () => void;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.22.0",
+  "version": "0.23.0-rc.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -51,14 +51,15 @@
     "storybook": "storybook dev -p 3000",
     "test": "vitest run",
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "telemetry-config": "ibmtelemetry-config generate --wc --id 8a79d901-a9c0-4672-94a4-fa8eea139832 --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components"
   },
   "dependencies": {
-    "@carbon-labs/wc-empty-state": "^0.4.0",
-    "@carbon/ibm-products-styles": "^2.69.0",
+    "@carbon-labs/wc-empty-state": "^0.5.0",
+    "@carbon/ibm-products-styles": "^2.70.0-rc.0",
     "@carbon/styles": "1.85.0",
-    "@carbon/web-components": "2.33.0",
-    "@ibm/telemetry-js": "^1.9.1",
+    "@carbon/web-components": "2.37.0",
+    "@ibm/telemetry-js": "^1.10.1",
     "@lit-labs/signals": "^0.1.2",
     "@lit/context": "^1.1.5",
     "lit": "^3.1.0"
@@ -68,6 +69,7 @@
     "@carbon/icon-helpers": "^10.61.0",
     "@carbon/icons": "^11.62.0",
     "@carbon/motion": "^11.30.0",
+    "@ibm/telemetry-js-config-generator": "^2.1.0",
     "@mordech/vite-lit-loader": "^0.37.0",
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-alias": "^5.1.1",
@@ -103,5 +105,5 @@
     "vitest": "^3.2.0",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "d11657732618b5ad89db5b9350997837a7bcb996"
+  "gitHead": "c25fcbe02058e6ad4d9e701466eb540f5ee24833"
 }

package/scss/components/side-panel/side-panel.scss

@@ -134,6 +134,11 @@ $block-class-action-set: #{$prefix}--action-set;
     }
   }
 
+  // Slide-in panels should use border not shadows since they don’t layer
+  .#{$block-class}[slide-in]:not(.#{$block-class}__overlay) {
+    box-shadow: none;
+  }
+
   .#{$block-class}__header {
     &::before {
       z-index: 99; /* must be higher than action toolbar */

package/telemetry.yml

@@ -1,8 +1,171 @@
 # yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json
+
 version: 1
 projectId: 8a79d901-a9c0-4672-94a4-fa8eea139832
-endpoint: 'https://www-api.ibm.com/ibm-telemetry/v1/metrics'
+endpoint: https://www-api.ibm.com/ibm-telemetry/v1/metrics
 collect:
+  wc:
+    elements:
+      allowedAttributeNames:
+        # General
+        - align
+        - autoalign
+        - close-icon-description
+        - closeIconDescription
+        - collapse-label
+        - defaultOpen
+        - description
+        - expand-label
+        - id
+        - kind
+        - label
+        - lines
+        - open
+        - prevent-close-on-click-outside
+        - selector-initial-focus
+        - size
+        - slot
+        - title
+        - type
+        - value
+        - within-grid
+        # c4p-about-modal
+        - additionalInfo
+        - content
+        - copyrightText
+        - links
+        - logo
+        - onc4p-about-modal-beingclosed
+        - onc4p-about-modal-closed
+        - version
+        # c4p-interstitial-screen
+        - fullscreen
+        - onc4p-interstitial-beingclosed
+        - onc4p-interstitial-closed
+        - onc4p-interstitial-opened
+        # c4p-interstitial-screen-body
+        - onc4p-on-after-step-change
+        - onc4p-on-before-step-change
+        # c4p-interstitial-screen-body-item
+        - stepTitle
+        # c4p-interstitial-screen-footer
+        - async-action
+        - nextButtonLabel
+        - onc4p-on-action
+        - previousButtonLabel
+        - skipButtonLabel
+        - startButtonLabel
+        # c4p-interstitial-screen-header
+        - header-subtitle
+        - header-title
+        - hideProgressIndicator
+        # c4p-notification
+        - onc4p-notification-dismiss
+        - timestamp
+        # c4p-notification-footer
+        - onc4p-notification-settings
+        - onc4p-notification-view-all
+        - view-all-label
+        # c4p-notification-panel
+        - date-time-locale
+        - dismiss-all-label
+        - donot-disturb-label
+        - empty-state-label
+        - onc4p-notification-click-outside
+        - onc4p-notification-dismiss-all
+        - onc4p-notification-donot-disturb-change
+        - onc4p-notification-panel-beingclosed
+        - previous-text
+        - title-text
+        - today-text
+        - triggerButtonRef
+        # c4p-options-tile
+        - onc4p-options-tile-close
+        - onc4p-options-tile-open
+        - titleId
+        - titleText
+        # c4p-page-header-breadcrumb
+        - border
+        - content-actions-flush
+        - page-actions-flush
+        # c4p-page-header-content-text
+        - subtitle
+        # c4p-page-header-scroller
+        - close-on-activation
+        - collapseText
+        - enter-delay-ms
+        - expandText
+        - leave-delay-ms
+        # c4p-side-panel
+        - animate-title
+        - close-icon-tooltip-alignment
+        - condensed-actions
+        - current-step
+        - hide-close-button
+        - include-overlay
+        - label-text
+        - navigation-back-icon-description
+        - onc4p-side-panel-beingclosed
+        - onc4p-side-panel-closed
+        - onc4p-side-panel-navigate-back
+        - placement
+        - selector-page-content
+        - slide-in
+        # c4p-tearsheet
+        - aria-label
+        - has-close-icon
+        - influencer-placement
+        - influencer-width
+        - onc4p-tearsheet-beingclosed
+        - onc4p-tearsheet-closed
+        - width
+        # c4p-user-avatar
+        - background-color
+        - image
+        - image-description
+        - name
+        - theme
+        - tooltip-alignment
+        - tooltip-text
+        # set-of-breadcrumbs
+        - breadcrumbs-data
+        - hiddenItems
+        # set-of-tags
+        - tags-data
+      allowedAttributeStringValues:
+        # General - boolean attributes
+        - 'true'
+        - 'false'
+        # General - kind
+        - '403'
+        - '404'
+        - custom
+        # General - size
+        - 2xl
+        - lg
+        - md
+        - sm
+        - xl
+        - xs
+        # General - type
+        - error
+        - expand
+        - informational
+        - success
+        - tooltip
+        - warning
+        # c4p-side-panel - placement
+        - left
+        - right
+        # c4p-tearsheet - influencer-placement
+        - left
+        - right
+        # c4p-tearsheet - influencer-width
+        - narrow
+        - wide
+        # c4p-tearsheet - width
+        - narrow
+        - wide
   npm:
     dependencies: null
   js:

package/scss/components/about-modal/story-styles.scss

@@ -1,34 +0,0 @@
-/*
-* 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.
-*/
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/config' as *;
-
-$story-prefix: 'about-modal-stories__';
-
-.#{$story-prefix}body-content {
-  display: flex;
-  flex-direction: column;
-  padding: $spacing-05;
-  gap: $spacing-05;
-}
-
-.#{$story-prefix}story-container {
-  position: fixed;
-  display: grid;
-  block-size: 100vh;
-  grid-template-rows: 3rem 1fr;
-  inline-size: 100vw;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-}
-
-.#{$story-prefix}story-content {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

package/scss/components/api-key-modal/story-styles.scss

@@ -1,10 +0,0 @@
-/*
-* 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.
-*/
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-
-$story-prefix: 'import-modal-stories__';