@govtechsg/sgds-web-component 3.12.0-rc.1 → 3.12.0

package/react/components/Masthead/masthead.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:var(--sgds-icon-size-sm)!important;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;width:var(--sgds-icon-size-sm)!important}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:.25rem var(--sgds-mainnav-padding-x,2rem);width:100%}:host([fluid]) .container{max-width:none}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{outline:4px solid #60aaf4}@media screen and (max-width:767px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
+var css_248z = lit.css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:var(--sgds-icon-size-sm)!important;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;width:var(--sgds-icon-size-sm)!important}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f7f7f7,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:.25rem var(--sgds-mainnav-padding-x,2rem);width:100%}:host([fluid]) .container{max-width:none}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(#f7f7f7,#1a1a1a)}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{outline:4px solid #60aaf4}@media screen and (max-width:767px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=masthead.cjs.js.map

package/react/components/Masthead/masthead.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:var(--sgds-icon-size-sm)!important;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;width:var(--sgds-icon-size-sm)!important}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:.25rem var(--sgds-mainnav-padding-x,2rem);width:100%}:host([fluid]) .container{max-width:none}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{outline:4px solid #60aaf4}@media screen and (max-width:767px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
+var css_248z = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:var(--sgds-icon-size-sm)!important;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;width:var(--sgds-icon-size-sm)!important}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f7f7f7,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:.25rem var(--sgds-mainnav-padding-x,2rem);width:100%}:host([fluid]) .container{max-width:none}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(#f7f7f7,#1a1a1a)}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{outline:4px solid #60aaf4}@media screen and (max-width:767px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=masthead.js.map

package/react/components/SystemBanner/sgds-system-banner-item.cjs.js

@@ -14,9 +14,10 @@ var systemBannerContext = require('./system-banner-context.cjs.js');
 var context = require('@lit/context');
 
 /**
- * @slot icon - The slot to pass in an icon element.
+ * @slot icon - The slot to pass in an icon element. Either use a badge or a icon, but not both, to avoid layout issues.
  * @slot action - The slot to pass in an action element such as a button or link
  * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view
+ * @slot badge - The slot to pass in a badge element. Either use a badge or a icon, but not both, to avoid layout issues.
  *
  * @event sgds-show-more - The event emitted when user clicks on "show more" in the banner text message
  */
@@ -29,7 +30,7 @@ class SgdsSystemBannerItem extends sgdsElement["default"] {
         this.noClampAction = false;
         this.clamped = false;
         this.siblingsCount = 0;
-        this.hasSlotController = new slot.HasSlotController(this, "action");
+        this.hasSlotController = new slot.HasSlotController(this, "action", "icon", "badge");
     }
     async firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
@@ -47,6 +48,9 @@ class SgdsSystemBannerItem extends sgdsElement["default"] {
     updated() {
         if (!this.hasActionSlot)
             this.hasActionSlot = this.hasSlotController.test("action");
+        if (this.hasSlotController.test("icon") && this.hasSlotController.test("badge")) {
+            console.error("Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.");
+        }
     }
     _clampCheck() {
         const textEl = this.shadowRoot.querySelector(".message");
@@ -62,6 +66,7 @@ class SgdsSystemBannerItem extends sgdsElement["default"] {
       <div class="banner-item">
         <slot name="icon"></slot>
         <div class="banner-item__message_and__action">
+          <slot name="badge"></slot>
           <div class="clamped-container">
             <div class=${classMap_js.classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>
               <slot></slot>

package/react/components/SystemBanner/sgds-system-banner-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-system-banner-item.cjs.js","sources":["../../../../src/components/SystemBanner/sgds-system-banner-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertBannerItemStyles from \"./system-banner-item.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { consume } from \"@lit/context\";\n\n/**\n * @slot icon - The slot to pass in an icon element.\n * @slot action - The slot to pass in an action element such as a button or link\n * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view\n *\n * @event sgds-show-more - The event emitted when user clicks on \"show more\" in the banner text message\n */\nexport class SgdsSystemBannerItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerItemStyles];\n  /** Used only for SSR to indicate the presence of the `action` slot. */\n  @property({ type: Boolean }) hasActionSlot = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @consume({ context: NoClampActionContext, subscribe: true })\n\n  /** When true, message text will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  @state() private clamped = false;\n\n  @consume({ context: SystemBannerChildCountContext, subscribe: true })\n  @state()\n  private siblingsCount = 0;\n\n  private readonly hasSlotController = new HasSlotController(this, \"action\");\n\n  private _resizeObserver: ResizeObserver;\n  async firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    await this.updateComplete;\n    this._clampCheck();\n\n    // Watch resizing for dynamic layout changes\n    this._resizeObserver = new ResizeObserver(() => this._clampCheck());\n    this._resizeObserver.observe(this.shadowRoot.querySelector(\".message\"));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._resizeObserver) this._resizeObserver.disconnect();\n  }\n  updated() {\n    if (!this.hasActionSlot) this.hasActionSlot = this.hasSlotController.test(\"action\");\n  }\n  private _clampCheck() {\n    const textEl = this.shadowRoot.querySelector(\".message\");\n    requestAnimationFrame(() => {\n      this.clamped = textEl.scrollHeight > textEl.clientHeight;\n    });\n  }\n\n  private _handleShowMoreClick() {\n    this.emit(\"sgds-show-more\");\n  }\n  render() {\n    return html`\n      <div class=\"banner-item\">\n        <slot name=\"icon\"></slot>\n        <div class=\"banner-item__message_and__action\">\n          <div class=\"clamped-container\">\n            <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>\n              <slot></slot>\n            </div>\n            ${this.clamped && !this.noClampAction\n              ? html`<span class=\"show-more\"\n                  >...<a class=\"show-more__link\" @click=\"${this._handleShowMoreClick}\">show more</a></span\n                >`\n              : nothing}\n          </div>\n          ${this.hasActionSlot || this.siblingsCount > 1\n            ? html`\n                <div class=\"action\">\n                  <slot name=\"action\"></slot>\n                </div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\nexport default SgdsSystemBannerItem;\n"],"names":["SgdsElement","HasSlotController","html","classMap","nothing","alertBannerItemStyles","__decorate","property","consume","NoClampActionContext","state","SystemBannerChildCountContext"],"mappings":"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"}
+{"version":3,"file":"sgds-system-banner-item.cjs.js","sources":["../../../../src/components/SystemBanner/sgds-system-banner-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertBannerItemStyles from \"./system-banner-item.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { consume } from \"@lit/context\";\n\n/**\n * @slot icon - The slot to pass in an icon element. Either use a badge or a icon, but not both, to avoid layout issues.\n * @slot action - The slot to pass in an action element such as a button or link\n * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view\n * @slot badge - The slot to pass in a badge element. Either use a badge or a icon, but not both, to avoid layout issues.\n *\n * @event sgds-show-more - The event emitted when user clicks on \"show more\" in the banner text message\n */\nexport class SgdsSystemBannerItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerItemStyles];\n  /** Used only for SSR to indicate the presence of the `action` slot. */\n  @property({ type: Boolean }) hasActionSlot = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @consume({ context: NoClampActionContext, subscribe: true })\n\n  /** When true, message text will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  @state() private clamped = false;\n\n  @consume({ context: SystemBannerChildCountContext, subscribe: true })\n  @state()\n  private siblingsCount = 0;\n\n  private readonly hasSlotController = new HasSlotController(this, \"action\", \"icon\", \"badge\");\n\n  private _resizeObserver: ResizeObserver;\n  async firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    await this.updateComplete;\n    this._clampCheck();\n\n    // Watch resizing for dynamic layout changes\n    this._resizeObserver = new ResizeObserver(() => this._clampCheck());\n    this._resizeObserver.observe(this.shadowRoot.querySelector(\".message\"));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._resizeObserver) this._resizeObserver.disconnect();\n  }\n  updated() {\n    if (!this.hasActionSlot) this.hasActionSlot = this.hasSlotController.test(\"action\");\n    if (this.hasSlotController.test(\"icon\") && this.hasSlotController.test(\"badge\")) {\n      console.error(\n        \"Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.\"\n      );\n    }\n  }\n  private _clampCheck() {\n    const textEl = this.shadowRoot.querySelector(\".message\");\n    requestAnimationFrame(() => {\n      this.clamped = textEl.scrollHeight > textEl.clientHeight;\n    });\n  }\n\n  private _handleShowMoreClick() {\n    this.emit(\"sgds-show-more\");\n  }\n  render() {\n    return html`\n      <div class=\"banner-item\">\n        <slot name=\"icon\"></slot>\n        <div class=\"banner-item__message_and__action\">\n          <slot name=\"badge\"></slot>\n          <div class=\"clamped-container\">\n            <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>\n              <slot></slot>\n            </div>\n            ${this.clamped && !this.noClampAction\n              ? html`<span class=\"show-more\"\n                  >...<a class=\"show-more__link\" @click=\"${this._handleShowMoreClick}\">show more</a></span\n                >`\n              : nothing}\n          </div>\n          ${this.hasActionSlot || this.siblingsCount > 1\n            ? html`\n                <div class=\"action\">\n                  <slot name=\"action\"></slot>\n                </div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\nexport default SgdsSystemBannerItem;\n"],"names":["SgdsElement","HasSlotController","html","classMap","nothing","alertBannerItemStyles","__decorate","property","consume","NoClampActionContext","state","SystemBannerChildCountContext"],"mappings":"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"}

package/react/components/SystemBanner/sgds-system-banner-item.js

@@ -10,9 +10,10 @@ import { NoClampActionContext, SystemBannerChildCountContext } from './system-ba
 import { consume } from '@lit/context';
 
 /**
- * @slot icon - The slot to pass in an icon element.
+ * @slot icon - The slot to pass in an icon element. Either use a badge or a icon, but not both, to avoid layout issues.
  * @slot action - The slot to pass in an action element such as a button or link
  * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view
+ * @slot badge - The slot to pass in a badge element. Either use a badge or a icon, but not both, to avoid layout issues.
  *
  * @event sgds-show-more - The event emitted when user clicks on "show more" in the banner text message
  */
@@ -25,7 +26,7 @@ class SgdsSystemBannerItem extends SgdsElement {
         this.noClampAction = false;
         this.clamped = false;
         this.siblingsCount = 0;
-        this.hasSlotController = new HasSlotController(this, "action");
+        this.hasSlotController = new HasSlotController(this, "action", "icon", "badge");
     }
     async firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
@@ -43,6 +44,9 @@ class SgdsSystemBannerItem extends SgdsElement {
     updated() {
         if (!this.hasActionSlot)
             this.hasActionSlot = this.hasSlotController.test("action");
+        if (this.hasSlotController.test("icon") && this.hasSlotController.test("badge")) {
+            console.error("Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.");
+        }
     }
     _clampCheck() {
         const textEl = this.shadowRoot.querySelector(".message");
@@ -58,6 +62,7 @@ class SgdsSystemBannerItem extends SgdsElement {
       <div class="banner-item">
         <slot name="icon"></slot>
         <div class="banner-item__message_and__action">
+          <slot name="badge"></slot>
           <div class="clamped-container">
             <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>
               <slot></slot>

package/react/components/SystemBanner/sgds-system-banner-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-system-banner-item.js","sources":["../../../../src/components/SystemBanner/sgds-system-banner-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertBannerItemStyles from \"./system-banner-item.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { consume } from \"@lit/context\";\n\n/**\n * @slot icon - The slot to pass in an icon element.\n * @slot action - The slot to pass in an action element such as a button or link\n * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view\n *\n * @event sgds-show-more - The event emitted when user clicks on \"show more\" in the banner text message\n */\nexport class SgdsSystemBannerItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerItemStyles];\n  /** Used only for SSR to indicate the presence of the `action` slot. */\n  @property({ type: Boolean }) hasActionSlot = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @consume({ context: NoClampActionContext, subscribe: true })\n\n  /** When true, message text will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  @state() private clamped = false;\n\n  @consume({ context: SystemBannerChildCountContext, subscribe: true })\n  @state()\n  private siblingsCount = 0;\n\n  private readonly hasSlotController = new HasSlotController(this, \"action\");\n\n  private _resizeObserver: ResizeObserver;\n  async firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    await this.updateComplete;\n    this._clampCheck();\n\n    // Watch resizing for dynamic layout changes\n    this._resizeObserver = new ResizeObserver(() => this._clampCheck());\n    this._resizeObserver.observe(this.shadowRoot.querySelector(\".message\"));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._resizeObserver) this._resizeObserver.disconnect();\n  }\n  updated() {\n    if (!this.hasActionSlot) this.hasActionSlot = this.hasSlotController.test(\"action\");\n  }\n  private _clampCheck() {\n    const textEl = this.shadowRoot.querySelector(\".message\");\n    requestAnimationFrame(() => {\n      this.clamped = textEl.scrollHeight > textEl.clientHeight;\n    });\n  }\n\n  private _handleShowMoreClick() {\n    this.emit(\"sgds-show-more\");\n  }\n  render() {\n    return html`\n      <div class=\"banner-item\">\n        <slot name=\"icon\"></slot>\n        <div class=\"banner-item__message_and__action\">\n          <div class=\"clamped-container\">\n            <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>\n              <slot></slot>\n            </div>\n            ${this.clamped && !this.noClampAction\n              ? html`<span class=\"show-more\"\n                  >...<a class=\"show-more__link\" @click=\"${this._handleShowMoreClick}\">show more</a></span\n                >`\n              : nothing}\n          </div>\n          ${this.hasActionSlot || this.siblingsCount > 1\n            ? html`\n                <div class=\"action\">\n                  <slot name=\"action\"></slot>\n                </div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\nexport default SgdsSystemBannerItem;\n"],"names":["alertBannerItemStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-system-banner-item.js","sources":["../../../../src/components/SystemBanner/sgds-system-banner-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertBannerItemStyles from \"./system-banner-item.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { consume } from \"@lit/context\";\n\n/**\n * @slot icon - The slot to pass in an icon element. Either use a badge or a icon, but not both, to avoid layout issues.\n * @slot action - The slot to pass in an action element such as a button or link\n * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view\n * @slot badge - The slot to pass in a badge element. Either use a badge or a icon, but not both, to avoid layout issues.\n *\n * @event sgds-show-more - The event emitted when user clicks on \"show more\" in the banner text message\n */\nexport class SgdsSystemBannerItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerItemStyles];\n  /** Used only for SSR to indicate the presence of the `action` slot. */\n  @property({ type: Boolean }) hasActionSlot = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @consume({ context: NoClampActionContext, subscribe: true })\n\n  /** When true, message text will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  @state() private clamped = false;\n\n  @consume({ context: SystemBannerChildCountContext, subscribe: true })\n  @state()\n  private siblingsCount = 0;\n\n  private readonly hasSlotController = new HasSlotController(this, \"action\", \"icon\", \"badge\");\n\n  private _resizeObserver: ResizeObserver;\n  async firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    await this.updateComplete;\n    this._clampCheck();\n\n    // Watch resizing for dynamic layout changes\n    this._resizeObserver = new ResizeObserver(() => this._clampCheck());\n    this._resizeObserver.observe(this.shadowRoot.querySelector(\".message\"));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._resizeObserver) this._resizeObserver.disconnect();\n  }\n  updated() {\n    if (!this.hasActionSlot) this.hasActionSlot = this.hasSlotController.test(\"action\");\n    if (this.hasSlotController.test(\"icon\") && this.hasSlotController.test(\"badge\")) {\n      console.error(\n        \"Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.\"\n      );\n    }\n  }\n  private _clampCheck() {\n    const textEl = this.shadowRoot.querySelector(\".message\");\n    requestAnimationFrame(() => {\n      this.clamped = textEl.scrollHeight > textEl.clientHeight;\n    });\n  }\n\n  private _handleShowMoreClick() {\n    this.emit(\"sgds-show-more\");\n  }\n  render() {\n    return html`\n      <div class=\"banner-item\">\n        <slot name=\"icon\"></slot>\n        <div class=\"banner-item__message_and__action\">\n          <slot name=\"badge\"></slot>\n          <div class=\"clamped-container\">\n            <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>\n              <slot></slot>\n            </div>\n            ${this.clamped && !this.noClampAction\n              ? html`<span class=\"show-more\"\n                  >...<a class=\"show-more__link\" @click=\"${this._handleShowMoreClick}\">show more</a></span\n                >`\n              : nothing}\n          </div>\n          ${this.hasActionSlot || this.siblingsCount > 1\n            ? html`\n                <div class=\"action\">\n                  <slot name=\"action\"></slot>\n                </div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\nexport default SgdsSystemBannerItem;\n"],"names":["alertBannerItemStyles"],"mappings":"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"}

package/react/components/SystemBanner/system-banner-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:512px){.banner-item__message_and__action{flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;
+var css_248z = lit.css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:1024px){.banner-item__message_and__action{align-items:center;flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=system-banner-item.cjs.js.map

package/react/components/SystemBanner/system-banner-item.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:512px){.banner-item__message_and__action{flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;
+var css_248z = css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:1024px){.banner-item__message_and__action{align-items:center;flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=system-banner-item.js.map

package/react/components/SystemBanner/system-banner.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.banner-wrapper{display:block;width:100%}.banner,.banner-wrapper{background-color:var(--sgds-surface-fixed-dark)}.banner{align-items:center;color:var(--sgds-color-fixed-light);display:flex;flex-direction:row;gap:var(--sgds-gap-xl);min-height:var(--sgds-dimension-64);padding:var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-mainnav-mobile-padding-x));position:relative}.content{flex:1;overflow:hidden;width:100%}::slotted(sgds-system-banner-item){display:none;flex:0 0 100%;opacity:0}::slotted(sgds-system-banner-item[active]){display:block;opacity:1}.pagination{align-items:center;bottom:12px;display:flex;font-size:var(--sgds-font-size-12);font-weight:var(--sgds-font-weight-regular,400);gap:var(--sgds-gap-2-xs);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-16,16px);position:absolute;right:20px}.d-none{display:none}sgds-close-button{position:absolute;right:20px;top:10px}@media (min-width:512px){.pagination,sgds-close-button{position:static}.banner{padding-left:var(--sgds-mainnav-mobile-padding-x);padding-right:var(--sgds-mainnav-mobile-padding-x)}}@media (min-width:1440px){.banner{margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding-left:var(--sgds-mainnav-padding-x);padding-right:var(--sgds-mainnav-padding-x)}}:host([fluid]) .banner{max-width:none}`;
+var css_248z = lit.css`.banner-wrapper{display:block;width:100%}.banner,.banner-wrapper{background-color:var(--sgds-surface-fixed-dark)}.banner{align-items:center;color:var(--sgds-color-fixed-light);display:flex;flex-direction:row;gap:var(--sgds-gap-xl);min-height:var(--sgds-dimension-64);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);position:relative}.content{flex:1;overflow:hidden;width:100%}::slotted(sgds-system-banner-item){display:none;flex:0 0 100%;opacity:0}::slotted(sgds-system-banner-item[active]){display:block;opacity:1}.pagination{align-items:center;bottom:12px;display:flex;font-size:var(--sgds-font-size-12);font-weight:var(--sgds-font-weight-regular,400);gap:var(--sgds-gap-2-xs);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-16,16px);position:absolute;right:20px}.d-none{display:none}sgds-close-button{position:absolute;right:20px;top:10px}@media (min-width:1024px){.pagination,sgds-close-button{position:static}.banner{margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding-left:var(--sgds-mainnav-padding-x);padding-right:var(--sgds-mainnav-padding-x)}:host([fluid]) .banner{max-width:none}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=system-banner.cjs.js.map

package/react/components/SystemBanner/system-banner.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.banner-wrapper{display:block;width:100%}.banner,.banner-wrapper{background-color:var(--sgds-surface-fixed-dark)}.banner{align-items:center;color:var(--sgds-color-fixed-light);display:flex;flex-direction:row;gap:var(--sgds-gap-xl);min-height:var(--sgds-dimension-64);padding:var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-mainnav-mobile-padding-x));position:relative}.content{flex:1;overflow:hidden;width:100%}::slotted(sgds-system-banner-item){display:none;flex:0 0 100%;opacity:0}::slotted(sgds-system-banner-item[active]){display:block;opacity:1}.pagination{align-items:center;bottom:12px;display:flex;font-size:var(--sgds-font-size-12);font-weight:var(--sgds-font-weight-regular,400);gap:var(--sgds-gap-2-xs);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-16,16px);position:absolute;right:20px}.d-none{display:none}sgds-close-button{position:absolute;right:20px;top:10px}@media (min-width:512px){.pagination,sgds-close-button{position:static}.banner{padding-left:var(--sgds-mainnav-mobile-padding-x);padding-right:var(--sgds-mainnav-mobile-padding-x)}}@media (min-width:1440px){.banner{margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding-left:var(--sgds-mainnav-padding-x);padding-right:var(--sgds-mainnav-padding-x)}}:host([fluid]) .banner{max-width:none}`;
+var css_248z = css`.banner-wrapper{display:block;width:100%}.banner,.banner-wrapper{background-color:var(--sgds-surface-fixed-dark)}.banner{align-items:center;color:var(--sgds-color-fixed-light);display:flex;flex-direction:row;gap:var(--sgds-gap-xl);min-height:var(--sgds-dimension-64);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);position:relative}.content{flex:1;overflow:hidden;width:100%}::slotted(sgds-system-banner-item){display:none;flex:0 0 100%;opacity:0}::slotted(sgds-system-banner-item[active]){display:block;opacity:1}.pagination{align-items:center;bottom:12px;display:flex;font-size:var(--sgds-font-size-12);font-weight:var(--sgds-font-weight-regular,400);gap:var(--sgds-gap-2-xs);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-16,16px);position:absolute;right:20px}.d-none{display:none}sgds-close-button{position:absolute;right:20px;top:10px}@media (min-width:1024px){.pagination,sgds-close-button{position:static}.banner{margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding-left:var(--sgds-mainnav-padding-x);padding-right:var(--sgds-mainnav-padding-x)}:host([fluid]) .banner{max-width:none}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=system-banner.js.map

package/react/components/ThumbnailCard/thumbnail-card.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:var(--sgds-dimension-64)!important;max-width:var(--sgds-dimension-128)!important;min-width:var(--sgds-dimension-64)!important;object-fit:contain;object-position:left;width:100%}`;
+var css_248z = lit.css`:host([noPadding]) .card{background-color:inherit;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:var(--sgds-dimension-64)!important;max-width:var(--sgds-dimension-128)!important;min-width:var(--sgds-dimension-64)!important;object-fit:contain;object-position:left;width:100%}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=thumbnail-card.cjs.js.map

package/react/components/ThumbnailCard/thumbnail-card.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:var(--sgds-dimension-64)!important;max-width:var(--sgds-dimension-128)!important;min-width:var(--sgds-dimension-64)!important;object-fit:contain;object-position:left;width:100%}`;
+var css_248z = css`:host([noPadding]) .card{background-color:inherit;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:var(--sgds-dimension-64)!important;max-width:var(--sgds-dimension-128)!important;min-width:var(--sgds-dimension-64)!important;object-fit:contain;object-position:left;width:100%}`;
 
 export { css_248z as default };
 //# sourceMappingURL=thumbnail-card.js.map

package/react/index.cjs.js

@@ -47,34 +47,30 @@ var index$E = require('./radio-group/index.cjs.js');
 var index$F = require('./radio/index.cjs.js');
 var index$G = require('./select-option/index.cjs.js');
 var index$H = require('./select/index.cjs.js');
-var index$I = require('./sidebar-group/index.cjs.js');
-var index$J = require('./sidebar-item/index.cjs.js');
-var index$K = require('./sidebar-section/index.cjs.js');
-var index$L = require('./sidebar/index.cjs.js');
-var index$M = require('./sidenav-item/index.cjs.js');
-var index$N = require('./sidenav-link/index.cjs.js');
-var index$O = require('./sidenav/index.cjs.js');
-var index$P = require('./skeleton/index.cjs.js');
-var index$Q = require('./spinner/index.cjs.js');
-var index$R = require('./stepper/index.cjs.js');
-var index$S = require('./subnav-item/index.cjs.js');
-var index$T = require('./subnav/index.cjs.js');
-var index$U = require('./switch/index.cjs.js');
-var index$V = require('./system-banner-item/index.cjs.js');
-var index$W = require('./system-banner/index.cjs.js');
-var index$X = require('./tab-group/index.cjs.js');
-var index$Y = require('./tab-panel/index.cjs.js');
-var index$Z = require('./tab/index.cjs.js');
-var index$_ = require('./table-cell/index.cjs.js');
-var index$$ = require('./table-head/index.cjs.js');
-var index$10 = require('./table-row/index.cjs.js');
-var index$11 = require('./table/index.cjs.js');
-var index$12 = require('./table-of-contents/index.cjs.js');
-var index$13 = require('./textarea/index.cjs.js');
-var index$14 = require('./thumbnail-card/index.cjs.js');
-var index$15 = require('./toast-container/index.cjs.js');
-var index$16 = require('./toast/index.cjs.js');
-var index$17 = require('./tooltip/index.cjs.js');
+var index$I = require('./sidenav-item/index.cjs.js');
+var index$J = require('./sidenav-link/index.cjs.js');
+var index$K = require('./sidenav/index.cjs.js');
+var index$L = require('./skeleton/index.cjs.js');
+var index$M = require('./spinner/index.cjs.js');
+var index$N = require('./stepper/index.cjs.js');
+var index$O = require('./subnav-item/index.cjs.js');
+var index$P = require('./subnav/index.cjs.js');
+var index$Q = require('./switch/index.cjs.js');
+var index$R = require('./system-banner-item/index.cjs.js');
+var index$S = require('./system-banner/index.cjs.js');
+var index$T = require('./tab-group/index.cjs.js');
+var index$U = require('./tab-panel/index.cjs.js');
+var index$V = require('./tab/index.cjs.js');
+var index$W = require('./table-cell/index.cjs.js');
+var index$X = require('./table-head/index.cjs.js');
+var index$Y = require('./table-row/index.cjs.js');
+var index$Z = require('./table/index.cjs.js');
+var index$_ = require('./table-of-contents/index.cjs.js');
+var index$$ = require('./textarea/index.cjs.js');
+var index$10 = require('./thumbnail-card/index.cjs.js');
+var index$11 = require('./toast-container/index.cjs.js');
+var index$12 = require('./toast/index.cjs.js');
+var index$13 = require('./tooltip/index.cjs.js');
 
 
 
@@ -122,32 +118,28 @@ exports.SgdsRadioGroup = index$E["default"];
 exports.SgdsRadio = index$F["default"];
 exports.SgdsSelectOption = index$G["default"];
 exports.SgdsSelect = index$H["default"];
-exports.SgdsSidebarGroup = index$I["default"];
-exports.SgdsSidebarItem = index$J["default"];
-exports.SgdsSidebarSection = index$K["default"];
-exports.SgdsSidebar = index$L["default"];
-exports.SgdsSidenavItem = index$M["default"];
-exports.SgdsSidenavLink = index$N["default"];
-exports.SgdsSidenav = index$O["default"];
-exports.SgdsSkeleton = index$P["default"];
-exports.SgdsSpinner = index$Q["default"];
-exports.SgdsStepper = index$R["default"];
-exports.SgdsSubnavItem = index$S["default"];
-exports.SgdsSubnav = index$T["default"];
-exports.SgdsSwitch = index$U["default"];
-exports.SgdsSystemBannerItem = index$V["default"];
-exports.SgdsSystemBanner = index$W["default"];
-exports.SgdsTabGroup = index$X["default"];
-exports.SgdsTabPanel = index$Y["default"];
-exports.SgdsTab = index$Z["default"];
-exports.SgdsTableCell = index$_["default"];
-exports.SgdsTableHead = index$$["default"];
-exports.SgdsTableRow = index$10["default"];
-exports.SgdsTable = index$11["default"];
-exports.SgdsTableOfContents = index$12["default"];
-exports.SgdsTextarea = index$13["default"];
-exports.SgdsThumbnailCard = index$14["default"];
-exports.SgdsToastContainer = index$15["default"];
-exports.SgdsToast = index$16["default"];
-exports.SgdsTooltip = index$17["default"];
+exports.SgdsSidenavItem = index$I["default"];
+exports.SgdsSidenavLink = index$J["default"];
+exports.SgdsSidenav = index$K["default"];
+exports.SgdsSkeleton = index$L["default"];
+exports.SgdsSpinner = index$M["default"];
+exports.SgdsStepper = index$N["default"];
+exports.SgdsSubnavItem = index$O["default"];
+exports.SgdsSubnav = index$P["default"];
+exports.SgdsSwitch = index$Q["default"];
+exports.SgdsSystemBannerItem = index$R["default"];
+exports.SgdsSystemBanner = index$S["default"];
+exports.SgdsTabGroup = index$T["default"];
+exports.SgdsTabPanel = index$U["default"];
+exports.SgdsTab = index$V["default"];
+exports.SgdsTableCell = index$W["default"];
+exports.SgdsTableHead = index$X["default"];
+exports.SgdsTableRow = index$Y["default"];
+exports.SgdsTable = index$Z["default"];
+exports.SgdsTableOfContents = index$_["default"];
+exports.SgdsTextarea = index$$["default"];
+exports.SgdsThumbnailCard = index$10["default"];
+exports.SgdsToastContainer = index$11["default"];
+exports.SgdsToast = index$12["default"];
+exports.SgdsTooltip = index$13["default"];
 //# sourceMappingURL=index.cjs.js.map

package/react/index.cjs.js.map

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

package/react/index.d.ts

@@ -42,10 +42,6 @@ export { default as SgdsRadioGroup } from './radio-group';
 export { default as SgdsRadio } from './radio';
 export { default as SgdsSelectOption } from './select-option';
 export { default as SgdsSelect } from './select';
-export { default as SgdsSidebarGroup } from './sidebar-group';
-export { default as SgdsSidebarItem } from './sidebar-item';
-export { default as SgdsSidebarSection } from './sidebar-section';
-export { default as SgdsSidebar } from './sidebar';
 export { default as SgdsSidenavItem } from './sidenav-item';
 export { default as SgdsSidenavLink } from './sidenav-link';
 export { default as SgdsSidenav } from './sidenav';

package/react/index.js

@@ -43,10 +43,6 @@ export { default as SgdsRadioGroup } from './radio-group/index.js';
 export { default as SgdsRadio } from './radio/index.js';
 export { default as SgdsSelectOption } from './select-option/index.js';
 export { default as SgdsSelect } from './select/index.js';
-export { default as SgdsSidebarGroup } from './sidebar-group/index.js';
-export { default as SgdsSidebarItem } from './sidebar-item/index.js';
-export { default as SgdsSidebarSection } from './sidebar-section/index.js';
-export { default as SgdsSidebar } from './sidebar/index.js';
 export { default as SgdsSidenavItem } from './sidenav-item/index.js';
 export { default as SgdsSidenavLink } from './sidenav-link/index.js';
 export { default as SgdsSidenav } from './sidenav/index.js';

package/react/index.js.map

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

package/themes/day.css

@@ -4,7 +4,7 @@
 
   /* Semantic - Default Colors */
   --sgds-bg-default: var(--sgds-gray-000);
-  --sgds-bg-alternate: var(--sgds-gray-100);
+  --sgds-bg-alternate: var(--sgds-gray-50);
   --sgds-bg-fixed-light: var(--sgds-gray-000);
   --sgds-bg-fixed-dark: var(--sgds-gray-1100);
   --sgds-bg-overlay: oklch(from var(--sgds-gray-1100) l c h / 0.5);
@@ -19,7 +19,6 @@
   --sgds-surface-inverse: var(--sgds-gray-900);
   --sgds-surface-fixed-light: var(--sgds-gray-000);
   --sgds-surface-fixed-dark: var(--sgds-gray-900);
-
   --sgds-color-default: var(--sgds-gray-1000);
   --sgds-color-subtle: var(--sgds-gray-700);
   --sgds-color-muted: var(--sgds-gray-300);
@@ -27,7 +26,6 @@
   --sgds-color-fixed-light: var(--sgds-gray-100);
   --sgds-color-fixed-dark: var(--sgds-gray-1000);
   --sgds-color-transparent: transparent;
-  
   --sgds-border-color-default: var(--sgds-gray-500);
   --sgds-border-color-emphasis: var(--sgds-gray-800);
   --sgds-border-color-muted: var(--sgds-gray-200);

package/themes/night.css

@@ -91,7 +91,7 @@
   --sgds-danger-color-fixed-dark: var(--sgds-red-600);
   --sgds-danger-border-color-default: var(--sgds-red-400);
   --sgds-danger-border-color-emphasis: var(--sgds-red-200);
-  --sgds-danger-border-color-subtle: var(--sgds-red-700);
+  --sgds-danger-border-color-muted: var(--sgds-red-700);
 
   /* Semantic - Warning Colors */
   --sgds-warning-bg-default: var(--sgds-yellow-300);
@@ -105,7 +105,7 @@
   --sgds-warning-color-fixed-dark: var(--sgds-yellow-600);
   --sgds-warning-border-color-default: var(--sgds-yellow-400);
   --sgds-warning-border-color-emphasis: var(--sgds-yellow-200);
-  --sgds-warning-border-color-subtle: var(--sgds-yellow-700);
+  --sgds-warning-border-color-muted: var(--sgds-yellow-700);
   
   /* Semantic - Purple Colors */
   --sgds-purple-bg-default: var(--sgds-purple-600);

package/base/sidebar-element.d.ts

@@ -1,112 +0,0 @@
-import { PropertyValueMap } from "lit";
-import SgdsElement from "./sgds-element";
-/**
- * @summary Base class for sidebar navigation components.
- * Provides core functionality for sidebar items and groups including keyboard navigation,
- * selection state management, and nesting support. This class manages hierarchical navigation,
- * active state tracking, and drawer overlay coordination through context providers.
- *
- * Features:
- * - Multi-level keyboard navigation (Arrow keys, Enter)
- * - Active state management via Lit context subscription
- * - Support for nested hierarchies up to 3 levels deep
- * - Focus management and full ARIA attribute support
- * - Event emission for sidebar coordination (i-sgds-click)
- * - Automatic child element tracking and nesting level detection
- *
- * Keyboard Navigation:
- * - Arrow Up/Down: Navigate between siblings in the same level
- * - Arrow Left/Right: Navigate hierarchically (collapse/expand or move in drawer)
- * - Enter: Activate focused item or toggle group
- *
- * Context Management:
- * - Consumes: SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems
- * - Updates state based on context changes for responsive UI updates
- *
- * @internal
- */
-export declare class SidebarElement extends SgdsElement {
-    static styles: import("lit").CSSResult[];
-    /**
-     * The display title/label for the sidebar element.
-     * Shown in the UI and used for accessibility labels (aria-label).
-     * @attribute title
-     * @type {string}
-     * @default ""
-     */
-    title: string;
-    /**
-     * The unique name identifier for the sidebar element.
-     * Used to identify selections in sgds-select events and manage active states.
-     * Should be unique among siblings in the same navigation level.
-     * @attribute name
-     * @type {string}
-     * @default ""
-     */
-    name: string;
-    /** @internal */
-    _sidebarCollapsed: boolean;
-    /** @internal */
-    _sidebarActiveItem: SidebarElement | null;
-    /** @internal */
-    _sidebarActiveGroup: SidebarElement | null;
-    /** @internal */
-    _drawerItems: SidebarElement[] | null;
-    /** @internal Tracks whether a drawer overlay is currently open */
-    _showDrawer: boolean;
-    /** @internal */
-    _childLevel: number;
-    /**
-     * Indicates whether this element is currently selected/active.
-     * @internal
-     */
-    _selected: boolean;
-    /**
-     * Indicates whether this element should be hidden based on nesting context.
-     * @internal
-     */
-    _hidden: boolean;
-    /**
-     * List of child elements assigned to this component.
-     * @internal
-     */
-    _childElements: SidebarElement[];
-    /** @internal */
-    _childActive: boolean;
-    /** @internal */
-    private _defaultNodes;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    firstUpdated(changedProperties: PropertyValueMap<this>): void;
-    updated(): void;
-    /**
-     * Handles slot change events and updates child elements list.
-     * @internal
-     * @returns {void}
-     */
-    _handleSlotChange(): void;
-    /**
-     * Handles click/activation events on the sidebar element.
-     * Emits internal click event for parent sidebar to handle selection.
-     * @internal
-     * @param {SidebarElement} [element] - Optional element parameter (for keyboard compatibility)
-     * @returns {void}
-     */
-    _handleClick(): void;
-    /**
-     * Handles keyboard navigation events for sidebar elements.
-     * Supports Arrow Up/Down for navigation and Arrow Left/Right for drawer management.
-     * @internal
-     * @param {KeyboardEvent} event - The keyboard event object
-     * @returns {void}
-     */
-    private _handleKeyDown;
-    /**
-     * Calculates the nesting level by counting parent sgds-sidebar-group ancestors.
-     * Level 0 = top-level element, Level 1+ = nested within another group.
-     * Updates the _childLevel state property.
-     * @internal
-     * @returns {void}
-     */
-    private getChildLevel;
-}