@govtechsg/sgds-web-component 3.12.0-rc.0 → 3.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Masthead/index.js +1 -1
- package/base/card.js +1 -1
- package/base/dropdown-list-element.d.ts +5 -1
- package/base/dropdown-list-element.js +2 -2
- package/base/dropdown-list-element.js.map +1 -1
- package/components/Breadcrumb/index.umd.min.js +20 -20
- package/components/Breadcrumb/index.umd.min.js.map +1 -1
- package/components/Card/index.umd.min.js +1 -1
- package/components/Card/index.umd.min.js.map +1 -1
- package/components/Checkbox/index.umd.min.js +6 -6
- package/components/Checkbox/index.umd.min.js.map +1 -1
- package/components/Checkbox/sgds-checkbox.d.ts +3 -0
- package/components/Checkbox/sgds-checkbox.js +17 -0
- package/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/components/ComboBox/index.umd.min.js +2 -2
- package/components/ComboBox/index.umd.min.js.map +1 -1
- package/components/Dropdown/dropdown-item.js +1 -1
- package/components/Dropdown/index.umd.min.js +2 -2
- package/components/Dropdown/index.umd.min.js.map +1 -1
- package/components/Dropdown/sgds-dropdown-item.js +0 -3
- package/components/Dropdown/sgds-dropdown-item.js.map +1 -1
- package/components/IconCard/icon-card.js +1 -1
- package/components/IconCard/index.umd.min.js +1 -1
- package/components/IconCard/index.umd.min.js.map +1 -1
- package/components/ImageCard/image-card.js +1 -1
- package/components/ImageCard/index.umd.min.js +1 -1
- package/components/ImageCard/index.umd.min.js.map +1 -1
- package/components/Mainnav/index.umd.min.js +2 -2
- package/components/Mainnav/index.umd.min.js.map +1 -1
- package/components/Masthead/index.umd.min.js +1 -1
- package/components/Masthead/index.umd.min.js.map +1 -1
- package/components/Masthead/masthead.js +1 -1
- package/components/OverflowMenu/index.umd.min.js +2 -2
- package/components/OverflowMenu/index.umd.min.js.map +1 -1
- package/components/Select/index.umd.min.js +1 -1
- package/components/Select/index.umd.min.js.map +1 -1
- package/components/SystemBanner/index.umd.min.js +10 -9
- package/components/SystemBanner/index.umd.min.js.map +1 -1
- package/components/SystemBanner/sgds-system-banner-item.d.ts +2 -1
- package/components/SystemBanner/sgds-system-banner-item.js +7 -2
- package/components/SystemBanner/sgds-system-banner-item.js.map +1 -1
- package/components/SystemBanner/system-banner-item.js +1 -1
- package/components/SystemBanner/system-banner.js +1 -1
- package/components/ThumbnailCard/index.umd.min.js +1 -1
- package/components/ThumbnailCard/index.umd.min.js.map +1 -1
- package/components/ThumbnailCard/thumbnail-card.js +1 -1
- package/components/index.umd.min.js +9 -9
- package/components/index.umd.min.js.map +1 -1
- package/css/utility.css +23 -3
- package/index.umd.min.js +11 -10
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/base/card.cjs.js +1 -1
- package/react/base/card.js +1 -1
- package/react/base/dropdown-list-element.cjs.js +2 -2
- package/react/base/dropdown-list-element.cjs.js.map +1 -1
- package/react/base/dropdown-list-element.js +2 -2
- package/react/base/dropdown-list-element.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox.cjs.js +17 -0
- package/react/components/Checkbox/sgds-checkbox.cjs.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox.js +17 -0
- package/react/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/react/components/Dropdown/dropdown-item.cjs.js +1 -1
- package/react/components/Dropdown/dropdown-item.js +1 -1
- package/react/components/Dropdown/sgds-dropdown-item.cjs.js +0 -3
- package/react/components/Dropdown/sgds-dropdown-item.cjs.js.map +1 -1
- package/react/components/Dropdown/sgds-dropdown-item.js +0 -3
- package/react/components/Dropdown/sgds-dropdown-item.js.map +1 -1
- package/react/components/IconCard/icon-card.cjs.js +1 -1
- package/react/components/IconCard/icon-card.js +1 -1
- package/react/components/ImageCard/image-card.cjs.js +1 -1
- package/react/components/ImageCard/image-card.js +1 -1
- package/react/components/Masthead/masthead.cjs.js +1 -1
- package/react/components/Masthead/masthead.js +1 -1
- package/react/components/SystemBanner/sgds-system-banner-item.cjs.js +7 -2
- package/react/components/SystemBanner/sgds-system-banner-item.cjs.js.map +1 -1
- package/react/components/SystemBanner/sgds-system-banner-item.js +7 -2
- package/react/components/SystemBanner/sgds-system-banner-item.js.map +1 -1
- package/react/components/SystemBanner/system-banner-item.cjs.js +1 -1
- package/react/components/SystemBanner/system-banner-item.js +1 -1
- package/react/components/SystemBanner/system-banner.cjs.js +1 -1
- package/react/components/SystemBanner/system-banner.js +1 -1
- package/react/components/ThumbnailCard/thumbnail-card.cjs.js +1 -1
- package/react/components/ThumbnailCard/thumbnail-card.js +1 -1
- package/themes/day.css +1 -3
- package/themes/night.css +2 -2
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
|
|
6
6
|
var lit = require('lit');
|
|
7
7
|
|
|
8
|
-
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(#
|
|
8
|
+
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}}`;
|
|
9
9
|
|
|
10
10
|
exports["default"] = css_248z;
|
|
11
11
|
//# sourceMappingURL=masthead.cjs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
|
-
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(#
|
|
4
|
+
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}}`;
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
7
7
|
//# sourceMappingURL=masthead.js.map
|
|
@@ -14,9 +14,10 @@ var systemBannerContext = require('./system-banner-context.cjs.js');
|
|
|
14
14
|
var context = require('@lit/context');
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
|
-
* @slot icon - The slot to pass in an icon element.
|
|
17
|
+
* @slot icon - The slot to pass in an icon element. Either use a badge or a icon, but not both, to avoid layout issues.
|
|
18
18
|
* @slot action - The slot to pass in an action element such as a button or link
|
|
19
19
|
* @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
|
|
20
|
+
* @slot badge - The slot to pass in a badge element. Either use a badge or a icon, but not both, to avoid layout issues.
|
|
20
21
|
*
|
|
21
22
|
* @event sgds-show-more - The event emitted when user clicks on "show more" in the banner text message
|
|
22
23
|
*/
|
|
@@ -29,7 +30,7 @@ class SgdsSystemBannerItem extends sgdsElement["default"] {
|
|
|
29
30
|
this.noClampAction = false;
|
|
30
31
|
this.clamped = false;
|
|
31
32
|
this.siblingsCount = 0;
|
|
32
|
-
this.hasSlotController = new slot.HasSlotController(this, "action");
|
|
33
|
+
this.hasSlotController = new slot.HasSlotController(this, "action", "icon", "badge");
|
|
33
34
|
}
|
|
34
35
|
async firstUpdated(_changedProperties) {
|
|
35
36
|
super.firstUpdated(_changedProperties);
|
|
@@ -47,6 +48,9 @@ class SgdsSystemBannerItem extends sgdsElement["default"] {
|
|
|
47
48
|
updated() {
|
|
48
49
|
if (!this.hasActionSlot)
|
|
49
50
|
this.hasActionSlot = this.hasSlotController.test("action");
|
|
51
|
+
if (this.hasSlotController.test("icon") && this.hasSlotController.test("badge")) {
|
|
52
|
+
console.error("Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.");
|
|
53
|
+
}
|
|
50
54
|
}
|
|
51
55
|
_clampCheck() {
|
|
52
56
|
const textEl = this.shadowRoot.querySelector(".message");
|
|
@@ -62,6 +66,7 @@ class SgdsSystemBannerItem extends sgdsElement["default"] {
|
|
|
62
66
|
<div class="banner-item">
|
|
63
67
|
<slot name="icon"></slot>
|
|
64
68
|
<div class="banner-item__message_and__action">
|
|
69
|
+
<slot name="badge"></slot>
|
|
65
70
|
<div class="clamped-container">
|
|
66
71
|
<div class=${classMap_js.classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>
|
|
67
72
|
<slot></slot>
|
|
@@ -1 +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":";;;;;;;;;;;;;;;AASA
|
|
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. 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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"}
|
|
@@ -10,9 +10,10 @@ import { NoClampActionContext, SystemBannerChildCountContext } from './system-ba
|
|
|
10
10
|
import { consume } from '@lit/context';
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
|
-
* @slot icon - The slot to pass in an icon element.
|
|
13
|
+
* @slot icon - The slot to pass in an icon element. Either use a badge or a icon, but not both, to avoid layout issues.
|
|
14
14
|
* @slot action - The slot to pass in an action element such as a button or link
|
|
15
15
|
* @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
|
|
16
|
+
* @slot badge - The slot to pass in a badge element. Either use a badge or a icon, but not both, to avoid layout issues.
|
|
16
17
|
*
|
|
17
18
|
* @event sgds-show-more - The event emitted when user clicks on "show more" in the banner text message
|
|
18
19
|
*/
|
|
@@ -25,7 +26,7 @@ class SgdsSystemBannerItem extends SgdsElement {
|
|
|
25
26
|
this.noClampAction = false;
|
|
26
27
|
this.clamped = false;
|
|
27
28
|
this.siblingsCount = 0;
|
|
28
|
-
this.hasSlotController = new HasSlotController(this, "action");
|
|
29
|
+
this.hasSlotController = new HasSlotController(this, "action", "icon", "badge");
|
|
29
30
|
}
|
|
30
31
|
async firstUpdated(_changedProperties) {
|
|
31
32
|
super.firstUpdated(_changedProperties);
|
|
@@ -43,6 +44,9 @@ class SgdsSystemBannerItem extends SgdsElement {
|
|
|
43
44
|
updated() {
|
|
44
45
|
if (!this.hasActionSlot)
|
|
45
46
|
this.hasActionSlot = this.hasSlotController.test("action");
|
|
47
|
+
if (this.hasSlotController.test("icon") && this.hasSlotController.test("badge")) {
|
|
48
|
+
console.error("Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.");
|
|
49
|
+
}
|
|
46
50
|
}
|
|
47
51
|
_clampCheck() {
|
|
48
52
|
const textEl = this.shadowRoot.querySelector(".message");
|
|
@@ -58,6 +62,7 @@ class SgdsSystemBannerItem extends SgdsElement {
|
|
|
58
62
|
<div class="banner-item">
|
|
59
63
|
<slot name="icon"></slot>
|
|
60
64
|
<div class="banner-item__message_and__action">
|
|
65
|
+
<slot name="badge"></slot>
|
|
61
66
|
<div class="clamped-container">
|
|
62
67
|
<div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>
|
|
63
68
|
<slot></slot>
|
|
@@ -1 +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":";;;;;;;;;;;AASA
|
|
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. 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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"}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
|
|
6
6
|
var lit = require('lit');
|
|
7
7
|
|
|
8
|
-
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:
|
|
8
|
+
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)}}`;
|
|
9
9
|
|
|
10
10
|
exports["default"] = css_248z;
|
|
11
11
|
//# sourceMappingURL=system-banner-item.cjs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
|
-
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:
|
|
4
|
+
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)}}`;
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
7
7
|
//# sourceMappingURL=system-banner-item.js.map
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
|
|
6
6
|
var lit = require('lit');
|
|
7
7
|
|
|
8
|
-
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)
|
|
8
|
+
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}}`;
|
|
9
9
|
|
|
10
10
|
exports["default"] = css_248z;
|
|
11
11
|
//# sourceMappingURL=system-banner.cjs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
|
-
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)
|
|
4
|
+
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}}`;
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
7
7
|
//# sourceMappingURL=system-banner.js.map
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
|
|
6
6
|
var lit = require('lit');
|
|
7
7
|
|
|
8
|
-
var css_248z = lit.css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(
|
|
8
|
+
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%}`;
|
|
9
9
|
|
|
10
10
|
exports["default"] = css_248z;
|
|
11
11
|
//# sourceMappingURL=thumbnail-card.cjs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
|
-
var css_248z = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(
|
|
4
|
+
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%}`;
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
7
7
|
//# sourceMappingURL=thumbnail-card.js.map
|
package/themes/day.css
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/* Semantic - Default Colors */
|
|
6
6
|
--sgds-bg-default: var(--sgds-gray-000);
|
|
7
|
-
--sgds-bg-alternate: var(--sgds-gray-
|
|
7
|
+
--sgds-bg-alternate: var(--sgds-gray-50);
|
|
8
8
|
--sgds-bg-fixed-light: var(--sgds-gray-000);
|
|
9
9
|
--sgds-bg-fixed-dark: var(--sgds-gray-1100);
|
|
10
10
|
--sgds-bg-overlay: oklch(from var(--sgds-gray-1100) l c h / 0.5);
|
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
--sgds-surface-inverse: var(--sgds-gray-900);
|
|
20
20
|
--sgds-surface-fixed-light: var(--sgds-gray-000);
|
|
21
21
|
--sgds-surface-fixed-dark: var(--sgds-gray-900);
|
|
22
|
-
|
|
23
22
|
--sgds-color-default: var(--sgds-gray-1000);
|
|
24
23
|
--sgds-color-subtle: var(--sgds-gray-700);
|
|
25
24
|
--sgds-color-muted: var(--sgds-gray-300);
|
|
@@ -27,7 +26,6 @@
|
|
|
27
26
|
--sgds-color-fixed-light: var(--sgds-gray-100);
|
|
28
27
|
--sgds-color-fixed-dark: var(--sgds-gray-1000);
|
|
29
28
|
--sgds-color-transparent: transparent;
|
|
30
|
-
|
|
31
29
|
--sgds-border-color-default: var(--sgds-gray-500);
|
|
32
30
|
--sgds-border-color-emphasis: var(--sgds-gray-800);
|
|
33
31
|
--sgds-border-color-muted: var(--sgds-gray-200);
|
package/themes/night.css
CHANGED
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
--sgds-danger-color-fixed-dark: var(--sgds-red-600);
|
|
92
92
|
--sgds-danger-border-color-default: var(--sgds-red-400);
|
|
93
93
|
--sgds-danger-border-color-emphasis: var(--sgds-red-200);
|
|
94
|
-
--sgds-danger-border-color-
|
|
94
|
+
--sgds-danger-border-color-muted: var(--sgds-red-700);
|
|
95
95
|
|
|
96
96
|
/* Semantic - Warning Colors */
|
|
97
97
|
--sgds-warning-bg-default: var(--sgds-yellow-300);
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
--sgds-warning-color-fixed-dark: var(--sgds-yellow-600);
|
|
106
106
|
--sgds-warning-border-color-default: var(--sgds-yellow-400);
|
|
107
107
|
--sgds-warning-border-color-emphasis: var(--sgds-yellow-200);
|
|
108
|
-
--sgds-warning-border-color-
|
|
108
|
+
--sgds-warning-border-color-muted: var(--sgds-yellow-700);
|
|
109
109
|
|
|
110
110
|
/* Semantic - Purple Colors */
|
|
111
111
|
--sgds-purple-bg-default: var(--sgds-purple-600);
|