@govtechsg/sgds-web-component 3.3.2 → 3.3.3-rc.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 +2 -2
- package/base/card.js +1 -1
- package/base/sgds-element2.js +1 -1
- package/components/Accordion/index.umd.js +1 -1
- package/components/Alert/index.umd.js +2 -2
- package/components/Badge/index.umd.js +1 -1
- package/components/Breadcrumb/index.umd.js +36 -11
- package/components/Breadcrumb/index.umd.js.map +1 -1
- package/components/Button/button.js +1 -1
- package/components/Button/index.umd.js +61 -54
- package/components/Button/index.umd.js.map +1 -1
- package/components/Button/sgds-button.d.ts +1 -6
- package/components/Button/sgds-button.js +11 -27
- package/components/Button/sgds-button.js.map +1 -1
- package/components/Card/index.umd.js +3330 -3251
- package/components/Card/index.umd.js.map +1 -1
- package/components/Card/sgds-card.d.ts +1 -0
- package/components/Card/sgds-card.js +9 -3
- package/components/Card/sgds-card.js.map +1 -1
- package/components/Checkbox/index.umd.js +1 -1
- package/components/ComboBox/index.umd.js +2 -2
- package/components/Datepicker/index.umd.js +62 -29
- package/components/Datepicker/index.umd.js.map +1 -1
- package/components/DescriptionList/index.umd.js +1 -1
- package/components/Divider/index.umd.js +1 -1
- package/components/Drawer/index.umd.js +1 -1
- package/components/Dropdown/index.umd.js +2 -2
- package/components/FileUpload/index.umd.js +62 -29
- package/components/FileUpload/index.umd.js.map +1 -1
- package/components/Footer/footer-item.js +1 -1
- package/components/Footer/index.umd.js +89 -45
- package/components/Footer/index.umd.js.map +1 -1
- package/components/Footer/sgds-footer.d.ts +1 -1
- package/components/Footer/sgds-footer.js +39 -44
- package/components/Footer/sgds-footer.js.map +1 -1
- package/components/Icon/icon.js +1 -1
- package/components/Icon/index.umd.js +2 -2
- package/components/IconButton/index.umd.js +2 -2
- package/components/IconCard/index.umd.js +93 -14
- package/components/IconCard/index.umd.js.map +1 -1
- package/components/IconCard/sgds-icon-card.d.ts +1 -0
- package/components/IconCard/sgds-icon-card.js +8 -3
- package/components/IconCard/sgds-icon-card.js.map +1 -1
- package/components/IconList/index.umd.js +1 -1
- package/components/ImageCard/index.umd.js +93 -14
- package/components/ImageCard/index.umd.js.map +1 -1
- package/components/ImageCard/sgds-image-card.d.ts +1 -0
- package/components/ImageCard/sgds-image-card.js +8 -3
- package/components/ImageCard/sgds-image-card.js.map +1 -1
- package/components/Input/index.umd.js +2 -2
- package/components/Link/index.umd.js +35 -10
- package/components/Link/index.umd.js.map +1 -1
- package/components/Link/link.js +1 -1
- package/components/Link/sgds-link.d.ts +3 -0
- package/components/Link/sgds-link.js +33 -8
- package/components/Link/sgds-link.js.map +1 -1
- package/components/Mainnav/index.umd.js +2 -2
- package/components/Masthead/index.umd.js +2 -2
- package/components/Masthead/masthead.js +1 -1
- package/components/Modal/index.umd.js +1 -1
- package/components/OverflowMenu/index.umd.js +2 -2
- package/components/Pagination/index.umd.js +62 -29
- package/components/Pagination/index.umd.js.map +1 -1
- package/components/ProgressBar/index.umd.js +1 -1
- package/components/QuantityToggle/index.umd.js +2 -2
- package/components/Radio/index.umd.js +1 -1
- package/components/Select/index.umd.js +2 -2
- package/components/Sidenav/index.umd.js +2 -2
- package/components/Skeleton/index.umd.js +1 -1
- package/components/Spinner/index.umd.js +1 -1
- package/components/Stepper/index.umd.js +2 -2
- package/components/Subnav/index.umd.js +3 -3
- package/components/Subnav/subnav-item.js +1 -1
- package/components/Switch/index.umd.js +1 -1
- package/components/Tab/index.umd.js +1 -1
- package/components/Table/index.umd.js +1 -1
- package/components/TableOfContents/index.umd.js +1 -1
- package/components/Textarea/index.umd.js +1 -1
- package/components/ThumbnailCard/index.umd.js +93 -14
- package/components/ThumbnailCard/index.umd.js.map +1 -1
- package/components/ThumbnailCard/sgds-thumbnail-card.d.ts +1 -0
- package/components/ThumbnailCard/sgds-thumbnail-card.js +8 -3
- package/components/ThumbnailCard/sgds-thumbnail-card.js.map +1 -1
- package/components/Toast/index.umd.js +1 -1
- package/components/Tooltip/index.umd.js +1 -1
- package/components/index.umd.js +113 -95
- package/components/index.umd.js.map +1 -1
- package/index.umd.js +115 -97
- package/index.umd.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/sgds-element.cjs2.js +1 -1
- package/react/base/sgds-element2.js +1 -1
- package/react/components/Button/button.cjs.js +1 -1
- package/react/components/Button/button.js +1 -1
- package/react/components/Button/sgds-button.cjs.js +10 -26
- package/react/components/Button/sgds-button.cjs.js.map +1 -1
- package/react/components/Button/sgds-button.js +11 -27
- package/react/components/Button/sgds-button.js.map +1 -1
- package/react/components/Card/sgds-card.cjs.js +9 -3
- package/react/components/Card/sgds-card.cjs.js.map +1 -1
- package/react/components/Card/sgds-card.js +9 -3
- package/react/components/Card/sgds-card.js.map +1 -1
- package/react/components/Footer/footer-item.cjs.js +1 -1
- package/react/components/Footer/footer-item.js +1 -1
- package/react/components/Footer/sgds-footer.cjs.js +38 -43
- package/react/components/Footer/sgds-footer.cjs.js.map +1 -1
- package/react/components/Footer/sgds-footer.js +39 -44
- package/react/components/Footer/sgds-footer.js.map +1 -1
- package/react/components/Icon/icon.cjs.js +1 -1
- package/react/components/Icon/icon.js +1 -1
- package/react/components/IconCard/sgds-icon-card.cjs.js +8 -3
- package/react/components/IconCard/sgds-icon-card.cjs.js.map +1 -1
- package/react/components/IconCard/sgds-icon-card.js +8 -3
- package/react/components/IconCard/sgds-icon-card.js.map +1 -1
- package/react/components/ImageCard/sgds-image-card.cjs.js +8 -3
- package/react/components/ImageCard/sgds-image-card.cjs.js.map +1 -1
- package/react/components/ImageCard/sgds-image-card.js +8 -3
- package/react/components/ImageCard/sgds-image-card.js.map +1 -1
- package/react/components/Link/link.cjs.js +1 -1
- package/react/components/Link/link.js +1 -1
- package/react/components/Link/sgds-link.cjs.js +33 -8
- package/react/components/Link/sgds-link.cjs.js.map +1 -1
- package/react/components/Link/sgds-link.js +33 -8
- package/react/components/Link/sgds-link.js.map +1 -1
- package/react/components/Masthead/masthead.cjs.js +1 -1
- package/react/components/Masthead/masthead.js +1 -1
- package/react/components/Subnav/subnav-item.cjs.js +1 -1
- package/react/components/Subnav/subnav-item.js +1 -1
- package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js +8 -3
- package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js.map +1 -1
- package/react/components/ThumbnailCard/sgds-thumbnail-card.js +8 -3
- package/react/components/ThumbnailCard/sgds-thumbnail-card.js.map +1 -1
package/components/Link/link.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
var css_248z = css
|
|
3
|
+
var css_248z = css`:host{display:inline-flex}.nav-link::slotted(a){color:var(--sgds-link-color-default);cursor:pointer;line-height:var(--sgds-line-height-body);text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){outline:0}.nav-link::slotted(a:focus-visible:not([disabled])){box-shadow:var(--sgds-box-shadow-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;line-height:var(--sgds-line-height-min)}:host([size=xs]) .nav-link::slotted(a){font-size:var(--sgds-font-size-0)!important;line-height:var(--sgds-line-height-16)}`;
|
|
4
4
|
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
//# sourceMappingURL=link.js.map
|
|
@@ -10,7 +10,10 @@ export declare class SgdsLink extends SgdsElement {
|
|
|
10
10
|
size: "xs" | "sm" | "md" | "lg";
|
|
11
11
|
/** when true, sets the active stylings of the link */
|
|
12
12
|
variant: "primary" | "danger" | "neutral" | "light" | "dark";
|
|
13
|
+
private _processAnchor;
|
|
14
|
+
private _processIcon;
|
|
13
15
|
private _handleSlotChange;
|
|
16
|
+
firstUpdated(): void;
|
|
14
17
|
render(): import("lit-html").TemplateResult<1>;
|
|
15
18
|
}
|
|
16
19
|
export default SgdsLink;
|
|
@@ -17,16 +17,41 @@ class SgdsLink extends SgdsElement {
|
|
|
17
17
|
/** when true, sets the active stylings of the link */
|
|
18
18
|
this.variant = "primary";
|
|
19
19
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
_processAnchor(anchor) {
|
|
21
|
+
if (anchor.hasAttribute("disabled")) {
|
|
22
|
+
anchor.setAttribute("href", "javascript:void(0)");
|
|
23
|
+
anchor.setAttribute("tabindex", "-1");
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
anchor.setAttribute("tabindex", "0");
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
_processIcon(anchor) {
|
|
30
|
+
const icons = anchor.querySelectorAll("sgds-icon");
|
|
31
|
+
icons.forEach(icon => {
|
|
32
|
+
icon.classList.remove("icon-left", "icon-right");
|
|
33
|
+
if (!icon.previousElementSibling && !icon.previousSibling) {
|
|
34
|
+
icon.classList.add("icon-left");
|
|
26
35
|
}
|
|
27
|
-
|
|
28
|
-
|
|
36
|
+
if (!icon.nextElementSibling && !icon.nextSibling) {
|
|
37
|
+
icon.classList.add("icon-right");
|
|
29
38
|
}
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
_handleSlotChange(e) {
|
|
42
|
+
const anchor = e.target
|
|
43
|
+
.assignedElements()
|
|
44
|
+
.find(el => el.tagName.toLowerCase() === "a");
|
|
45
|
+
if (anchor) {
|
|
46
|
+
this._processAnchor(anchor);
|
|
47
|
+
this._processIcon(anchor);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
firstUpdated() {
|
|
51
|
+
const anchor = this.querySelector("a");
|
|
52
|
+
if (anchor) {
|
|
53
|
+
this._processAnchor(anchor);
|
|
54
|
+
this._processIcon(anchor);
|
|
30
55
|
}
|
|
31
56
|
}
|
|
32
57
|
render() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-link.js","sources":["../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n static styles = [...SgdsElement.styles, linkStyles];\n /** Determines the size of the link */\n @property({ type: String, reflect: true })\n size: \"xs\" | \"sm\" | \"md\" | \"lg\" = \"md\";\n /** when true, sets the active stylings of the link */\n @property({ type: String, reflect: true })\n variant: \"primary\" | \"danger\" | \"neutral\" | \"light\" | \"dark\" = \"primary\";\n\n private
|
|
1
|
+
{"version":3,"file":"sgds-link.js","sources":["../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n static styles = [...SgdsElement.styles, linkStyles];\n /** Determines the size of the link */\n @property({ type: String, reflect: true })\n size: \"xs\" | \"sm\" | \"md\" | \"lg\" = \"md\";\n /** when true, sets the active stylings of the link */\n @property({ type: String, reflect: true })\n variant: \"primary\" | \"danger\" | \"neutral\" | \"light\" | \"dark\" = \"primary\";\n\n private _processAnchor(anchor: HTMLAnchorElement) {\n if (anchor.hasAttribute(\"disabled\")) {\n anchor.setAttribute(\"href\", \"javascript:void(0)\");\n anchor.setAttribute(\"tabindex\", \"-1\");\n } else {\n anchor.setAttribute(\"tabindex\", \"0\");\n }\n }\n\n private _processIcon(anchor: HTMLAnchorElement) {\n const icons = anchor.querySelectorAll(\"sgds-icon\");\n\n icons.forEach(icon => {\n icon.classList.remove(\"icon-left\", \"icon-right\");\n\n if (!icon.previousElementSibling && !icon.previousSibling) {\n icon.classList.add(\"icon-left\");\n }\n\n if (!icon.nextElementSibling && !icon.nextSibling) {\n icon.classList.add(\"icon-right\");\n }\n });\n }\n\n private _handleSlotChange(e: Event) {\n const anchor = (e.target as HTMLSlotElement)\n .assignedElements()\n .find(el => el.tagName.toLowerCase() === \"a\") as HTMLAnchorElement;\n\n if (anchor) {\n this._processAnchor(anchor);\n this._processIcon(anchor);\n }\n }\n\n firstUpdated() {\n const anchor = this.querySelector(\"a\");\n if (anchor) {\n this._processAnchor(anchor);\n this._processIcon(anchor);\n }\n }\n\n render() {\n /** When removing href, link is no longer focusable */\n return html`<slot class=\"nav-link\" @slotchange=${this._handleSlotChange}></slot>`;\n }\n}\n\nexport default SgdsLink;\n"],"names":["linkStyles"],"mappings":";;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAA8B,IAAI,CAAC;;QAGvC,IAAO,CAAA,OAAA,GAAwD,SAAS,CAAC;KAkD1E;AAhDS,IAAA,cAAc,CAAC,MAAyB,EAAA;AAC9C,QAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,YAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACvC;aAAM;AACL,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACtC;KACF;AAEO,IAAA,YAAY,CAAC,MAAyB,EAAA;QAC5C,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAEnD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;YACnB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;YAEjD,IAAI,CAAC,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACzD,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;aACjC;YAED,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;aAClC;AACH,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,iBAAiB,CAAC,CAAQ,EAAA;AAChC,QAAA,MAAM,MAAM,GAAI,CAAC,CAAC,MAA0B;AACzC,aAAA,gBAAgB,EAAE;AAClB,aAAA,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,CAAsB,CAAC;QAErE,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;IAED,YAAY,GAAA;QACV,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAO,IAAI,CAAA,CAAA,mCAAA,EAAsC,IAAI,CAAC,iBAAiB,UAAU,CAAC;KACnF;;AAvDM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAGpD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACH,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvC,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC+B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
|
|
@@ -4899,7 +4899,7 @@
|
|
|
4899
4899
|
*/
|
|
4900
4900
|
const classMap = directive(ClassMapDirective);
|
|
4901
4901
|
|
|
4902
|
-
var css_248z$9 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}
|
|
4902
|
+
var css_248z$9 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;
|
|
4903
4903
|
|
|
4904
4904
|
/**
|
|
4905
4905
|
* @cssprop --sgds-{stateColor} - State colors in hexadecimal value
|
|
@@ -7745,7 +7745,7 @@
|
|
|
7745
7745
|
"zoom-out": ZoomOut
|
|
7746
7746
|
};
|
|
7747
7747
|
|
|
7748
|
-
var css_248z$7 = css`:host{color:inherit;display:inline-flex}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
|
|
7748
|
+
var css_248z$7 = css`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
|
|
7749
7749
|
|
|
7750
7750
|
/**
|
|
7751
7751
|
* @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons from `SgdsIcon` library set
|
|
@@ -4101,7 +4101,7 @@
|
|
|
4101
4101
|
(globalThis.litIssuedWarnings ??= new Set());
|
|
4102
4102
|
}
|
|
4103
4103
|
|
|
4104
|
-
var css_248z$3 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}
|
|
4104
|
+
var css_248z$3 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;
|
|
4105
4105
|
|
|
4106
4106
|
/**
|
|
4107
4107
|
* @cssprop --sgds-{stateColor} - State colors in hexadecimal value
|
|
@@ -4162,7 +4162,7 @@
|
|
|
4162
4162
|
/** @internal */
|
|
4163
4163
|
SgdsElement.dependencies = {};
|
|
4164
4164
|
|
|
4165
|
-
var css_248z$2 = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:
|
|
4165
|
+
var css_248z$2 = 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:.75rem;line-height:1rem}.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%}.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 .25rem}.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:16px;width:16px}.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,.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus,a.trusted-websites-link:focus-visible{outline:0}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{box-shadow:0 0 0 4px #60aaf4;outline:0}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
|
|
4166
4166
|
|
|
4167
4167
|
var css_248z$1 = css`svg{vertical-align:middle}`;
|
|
4168
4168
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
var css_248z = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:
|
|
3
|
+
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:.75rem;line-height:1rem}.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%}.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 .25rem}.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:16px;width:16px}.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,.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus,a.trusted-websites-link:focus-visible{outline:0}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{box-shadow:0 0 0 4px #60aaf4;outline:0}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
|
|
4
4
|
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
//# sourceMappingURL=masthead.js.map
|
|
@@ -4340,7 +4340,7 @@
|
|
|
4340
4340
|
*/
|
|
4341
4341
|
const classMap = directive(ClassMapDirective);
|
|
4342
4342
|
|
|
4343
|
-
var css_248z$4 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}
|
|
4343
|
+
var css_248z$4 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;
|
|
4344
4344
|
|
|
4345
4345
|
/**
|
|
4346
4346
|
* @cssprop --sgds-{stateColor} - State colors in hexadecimal value
|
|
@@ -3934,7 +3934,7 @@
|
|
|
3934
3934
|
`is not recommended.`);
|
|
3935
3935
|
}
|
|
3936
3936
|
|
|
3937
|
-
var css_248z$5 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}
|
|
3937
|
+
var css_248z$5 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;
|
|
3938
3938
|
|
|
3939
3939
|
/**
|
|
3940
3940
|
* @cssprop --sgds-{stateColor} - State colors in hexadecimal value
|
|
@@ -10993,7 +10993,7 @@
|
|
|
10993
10993
|
"zoom-out": ZoomOut
|
|
10994
10994
|
};
|
|
10995
10995
|
|
|
10996
|
-
var css_248z$1 = css`:host{color:inherit;display:inline-flex}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
|
|
10996
|
+
var css_248z$1 = css`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
|
|
10997
10997
|
|
|
10998
10998
|
/**
|
|
10999
10999
|
* @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons from `SgdsIcon` library set
|
|
@@ -4234,7 +4234,7 @@
|
|
|
4234
4234
|
});
|
|
4235
4235
|
}
|
|
4236
4236
|
|
|
4237
|
-
var css_248z$6 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}
|
|
4237
|
+
var css_248z$6 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;
|
|
4238
4238
|
|
|
4239
4239
|
/**
|
|
4240
4240
|
* @cssprop --sgds-{stateColor} - State colors in hexadecimal value
|
|
@@ -4664,6 +4664,56 @@
|
|
|
4664
4664
|
|
|
4665
4665
|
var css_248z$4 = css`::slotted(a[target=_blank]:after),a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}`;
|
|
4666
4666
|
|
|
4667
|
+
class HasSlotController {
|
|
4668
|
+
constructor(host, ...slotNames) {
|
|
4669
|
+
this.slotNames = [];
|
|
4670
|
+
(this.host = host).addController(this);
|
|
4671
|
+
this.slotNames = slotNames;
|
|
4672
|
+
this.handleSlotChange = this.handleSlotChange.bind(this);
|
|
4673
|
+
}
|
|
4674
|
+
hasDefaultSlot() {
|
|
4675
|
+
return [...this.host.childNodes].some(node => {
|
|
4676
|
+
var _a;
|
|
4677
|
+
if (node.nodeType === node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== "") {
|
|
4678
|
+
return true;
|
|
4679
|
+
}
|
|
4680
|
+
if (node.nodeType === node.ELEMENT_NODE) {
|
|
4681
|
+
const el = node;
|
|
4682
|
+
const tagName = el.tagName.toLowerCase();
|
|
4683
|
+
// Ignore visually hidden elements since they aren't rendered
|
|
4684
|
+
if (tagName === "sl-visually-hidden") {
|
|
4685
|
+
return false;
|
|
4686
|
+
}
|
|
4687
|
+
// If it doesn't have a slot attribute, it's part of the default slot
|
|
4688
|
+
if (!el.hasAttribute("slot")) {
|
|
4689
|
+
return true;
|
|
4690
|
+
}
|
|
4691
|
+
}
|
|
4692
|
+
return false;
|
|
4693
|
+
});
|
|
4694
|
+
}
|
|
4695
|
+
hasNamedSlot(name) {
|
|
4696
|
+
return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
|
|
4697
|
+
}
|
|
4698
|
+
test(slotName) {
|
|
4699
|
+
return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
|
|
4700
|
+
}
|
|
4701
|
+
hostConnected() {
|
|
4702
|
+
var _a;
|
|
4703
|
+
(_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener("slotchange", this.handleSlotChange);
|
|
4704
|
+
}
|
|
4705
|
+
hostDisconnected() {
|
|
4706
|
+
var _a;
|
|
4707
|
+
(_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener("slotchange", this.handleSlotChange);
|
|
4708
|
+
}
|
|
4709
|
+
handleSlotChange(event) {
|
|
4710
|
+
const slot = event.target;
|
|
4711
|
+
if ((this.slotNames.includes("[default]") && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
|
|
4712
|
+
this.host.requestUpdate();
|
|
4713
|
+
}
|
|
4714
|
+
}
|
|
4715
|
+
}
|
|
4716
|
+
|
|
4667
4717
|
/**
|
|
4668
4718
|
* A controller to help with form submission
|
|
4669
4719
|
*/
|
|
@@ -4721,7 +4771,7 @@
|
|
|
4721
4771
|
}
|
|
4722
4772
|
}
|
|
4723
4773
|
|
|
4724
|
-
var css_248z$3 = css`:host{display:inline-block}:host([fullWidth]),:host([fullWidth]) .btn{width:100%}:host([fullWidth]) .btn.has-left-icon{justify-content:flex-start}:host([fullWidth]) .btn.has-right-icon{justify-content:space-between}:host([fullWidth]) .btn.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}`;
|
|
4774
|
+
var css_248z$3 = css`:host{display:inline-block}:host([fullWidth]),:host([fullWidth]) .btn{width:100%}:host([fullWidth]) .btn.has-left-icon{justify-content:flex-start}:host([fullWidth]) .btn.has-right-icon{justify-content:space-between}:host([fullWidth]) .btn.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}.btn.no-icon{gap:var(--sgds-gap-none)}`;
|
|
4725
4775
|
|
|
4726
4776
|
/**
|
|
4727
4777
|
* @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
|
|
@@ -4739,10 +4789,6 @@
|
|
|
4739
4789
|
constructor() {
|
|
4740
4790
|
super(...arguments);
|
|
4741
4791
|
/** @internal */
|
|
4742
|
-
this._hasLeftIcon = false;
|
|
4743
|
-
/** @internal */
|
|
4744
|
-
this._hasRightIcon = false;
|
|
4745
|
-
/** @internal */
|
|
4746
4792
|
this.formSubmitController = new FormSubmitController(this, {
|
|
4747
4793
|
form: (input) => {
|
|
4748
4794
|
// Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query
|
|
@@ -4760,6 +4806,7 @@
|
|
|
4760
4806
|
this.type = "button";
|
|
4761
4807
|
/** When set, the button will be in full width. */
|
|
4762
4808
|
this.fullWidth = false;
|
|
4809
|
+
this.hasSlotController = new HasSlotController(this, "leftIcon", "rightIcon");
|
|
4763
4810
|
this._clickHandler = () => {
|
|
4764
4811
|
if (this.type === "submit") {
|
|
4765
4812
|
this.formSubmitController.submit(this);
|
|
@@ -4778,28 +4825,20 @@
|
|
|
4778
4825
|
this.removeEventListener("click", this._clickHandler);
|
|
4779
4826
|
this.addEventListener("click", this._clickHandler);
|
|
4780
4827
|
}
|
|
4781
|
-
_handleLeftIconSlotchange(e) {
|
|
4782
|
-
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
4783
|
-
if (childNodes.length > 0) {
|
|
4784
|
-
return (this._hasLeftIcon = true);
|
|
4785
|
-
}
|
|
4786
|
-
}
|
|
4787
|
-
_handleRightIconSlotchange(e) {
|
|
4788
|
-
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
4789
|
-
if (childNodes.length > 0) {
|
|
4790
|
-
return (this._hasRightIcon = true);
|
|
4791
|
-
}
|
|
4792
|
-
}
|
|
4793
4828
|
render() {
|
|
4794
4829
|
const isLink = this.href;
|
|
4795
4830
|
const tag = isLink ? literal `a` : literal `button`;
|
|
4831
|
+
const hasLeftIconSlot = this.hasSlotController.test("leftIcon");
|
|
4832
|
+
const hasRightIconSlot = this.hasSlotController.test("rightIcon");
|
|
4833
|
+
const noIconSlot = !hasLeftIconSlot && !hasRightIconSlot;
|
|
4796
4834
|
return html `
|
|
4797
4835
|
<${tag}
|
|
4798
4836
|
class="btn ${classMap({
|
|
4799
4837
|
disabled: this.disabled,
|
|
4800
4838
|
active: this.active,
|
|
4801
|
-
"has-left-icon":
|
|
4802
|
-
"has-right-icon":
|
|
4839
|
+
"has-left-icon": hasLeftIconSlot,
|
|
4840
|
+
"has-right-icon": hasRightIconSlot,
|
|
4841
|
+
"no-icon": noIconSlot
|
|
4803
4842
|
})}"
|
|
4804
4843
|
?disabled=${ifDefined(isLink ? undefined : this.disabled)}
|
|
4805
4844
|
type=${ifDefined(isLink ? undefined : this.type)}
|
|
@@ -4815,20 +4854,14 @@
|
|
|
4815
4854
|
@blur=${this._handleBlur}
|
|
4816
4855
|
aria-label=${ifDefined(this.ariaLabel)}
|
|
4817
4856
|
>
|
|
4818
|
-
<slot name="leftIcon"
|
|
4857
|
+
<slot name="leftIcon"></slot>
|
|
4819
4858
|
<span><slot></slot></span>
|
|
4820
|
-
<slot name="rightIcon"
|
|
4859
|
+
<slot name="rightIcon"></slot>
|
|
4821
4860
|
</${tag}>
|
|
4822
4861
|
`;
|
|
4823
4862
|
}
|
|
4824
4863
|
}
|
|
4825
4864
|
SgdsButton.styles = [...ButtonElement.styles, css_248z$4, css_248z$3];
|
|
4826
|
-
__decorate([
|
|
4827
|
-
state()
|
|
4828
|
-
], SgdsButton.prototype, "_hasLeftIcon", void 0);
|
|
4829
|
-
__decorate([
|
|
4830
|
-
state()
|
|
4831
|
-
], SgdsButton.prototype, "_hasRightIcon", void 0);
|
|
4832
4865
|
__decorate([
|
|
4833
4866
|
property({ type: String, reflect: true })
|
|
4834
4867
|
], SgdsButton.prototype, "type", void 0);
|
|
@@ -7299,7 +7332,7 @@
|
|
|
7299
7332
|
"zoom-out": ZoomOut
|
|
7300
7333
|
};
|
|
7301
7334
|
|
|
7302
|
-
var css_248z$2 = css`:host{color:inherit;display:inline-flex}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
|
|
7335
|
+
var css_248z$2 = css`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
|
|
7303
7336
|
|
|
7304
7337
|
/**
|
|
7305
7338
|
* @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons from `SgdsIcon` library set
|