@govtechsg/sgds-web-component 3.2.0 → 3.3.0

package/components/Mainnav/mainnav-item.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=sm]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=md]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=lg]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=xl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=xxl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (max-width:767px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
+var css_248z = css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=sm]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=md]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=lg]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=xl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=xxl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;min-height:100%;padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (max-width:767px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav-item.js.map

package/components/Mainnav/mainnav.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{z-index:1200}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width);min-height:80px;padding:0 var(--sgds-mainnav-padding-x);position:relative;width:100%}@media screen and (max-width:768px){.navbar{padding:0 var(--sgds-mainnav-mobile-padding-x)}}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);bottom:0;box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:2000}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}@media screen and (max-width:768px){nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
+var css_248z = css`:host{position:relative;z-index:1200}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width);min-height:80px;padding:0 var(--sgds-mainnav-padding-x);position:relative;width:100%}@media screen and (max-width:768px){.navbar{padding:0 var(--sgds-mainnav-mobile-padding-x)}}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);bottom:0;box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:2000}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}@media screen and (max-width:768px){nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav.js.map

package/components/Mainnav/sgds-mainnav.js

@@ -19,7 +19,7 @@ const SIZES = {
     md: MD_BREAKPOINT,
     lg: LG_BREAKPOINT,
     xl: XL_BREAKPOINT,
-    XXL: XXL_BREAKPOINT,
+    xxl: XXL_BREAKPOINT,
     never: Infinity,
     always: -1
 };

package/components/Mainnav/sgds-mainnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.js","sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from \"../../utils/breakpoints\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { MainnavContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\nconst SIZES = {\n  sm: SM_BREAKPOINT,\n  md: MD_BREAKPOINT,\n  lg: LG_BREAKPOINT,\n  xl: XL_BREAKPOINT,\n  XXL: XXL_BREAKPOINT,\n  never: Infinity,\n  always: -1\n};\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n\n  @provide({ context: MainnavContext })\n  @state()\n  private _breakpointReached = false;\n\n  /** @internal */\n  @query(\"nav\") nav: HTMLElement;\n  /** @internal */\n  @query(\".navbar\") navbar: HTMLElement;\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".navbar-nav-scroll\") navScroll: HTMLElement;\n  /** @internal */\n  @query(\"slot[name='non-collapsible']\") nonCollapsibleSlot: HTMLSlotElement;\n\n  constructor() {\n    super();\n    window.addEventListener(\"resize\", () => {\n      const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];\n      if (newBreakpointReachedValue !== this.breakpointReached) {\n        this.requestUpdate();\n      } else {\n        this.body ? (this.body.hidden = true) : null;\n        this.expanded = false;\n      }\n\n      if (newBreakpointReachedValue) {\n        this._handleMobileNav();\n\n        if (!this._breakpointReached) {\n          this._breakpointReached = true;\n        }\n      } else {\n        this._handleDesktopNav();\n        this._breakpointReached = false;\n      }\n    });\n  }\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  private collapseId = genId(\"mainnav\", \"collapse\");\n\n  /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */\n  @property({ type: String })\n  expand: MainnavExpandSize = \"lg\";\n\n  /** @internal */\n  @state()\n  breakpointReached = false;\n\n  /** @internal */\n  @state()\n  expanded = false;\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._breakpointReached = true;\n    }\n\n    const items = [...this.defaultSlotItems, ...this.endSlotItems] as SgdsMainnavItem[] | SgdsMainnavDropdown[];\n    items.forEach((item: SgdsMainnavItem | SgdsMainnavDropdown) => {\n      item.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {\n      this.hide();\n    }\n  }\n\n  private _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private async _handleMobileNav() {\n    if (!this.nav) return;\n\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n    const offsetTop = this.nav.offsetTop;\n    const navHeight = this.nav.clientHeight;\n    const mainNavPosition = offsetTop + navHeight;\n    this.body.style.top = `${mainNavPosition}px`;\n    this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavPosition}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.nonCollapsibleSlot);\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanded = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.show\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.style.height = \"auto\";\n\n    this.emit(\"sgds-after-show\");\n  }\n\n  private async _animateToHide() {\n    const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (slHide.defaultPrevented) {\n      this.expanded = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.hide\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = \"auto\";\n\n    this.emit(\"sgds-after-hide\");\n  }\n\n  @watch(\"expanded\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanded) {\n      // Show\n      this._animateToShow();\n    } else {\n      // Hide\n      this._animateToHide();\n    }\n  }\n  /** Shows the menu. For when mainnav is in the collapsed form */\n  public async show() {\n    if (this.expanded) {\n      return;\n    }\n\n    this.expanded = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when mainnav is in the collapsed form */\n  public async hide() {\n    if (!this.expanded) {\n      return;\n    }\n\n    this.expanded = false;\n    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n    this.emit(\"close-dropdown-menu\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  // assigning name attribute to elements added in slot=\"end\", to use wildcard css selector to assign styles only to *-mainnav-item\n  _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n    });\n  }\n\n  render() {\n    this.breakpointReached = window.innerWidth < SIZES[this.expand];\n\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${this.brandHref} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <slot name=\"non-collapsible\"></slot>\n          <sgds-icon-button\n            name=${this.expanded ? \"cross\" : \"menu\"}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"navbar-toggler\"\n            @click=${this._handleSummaryClick}\n            aria-controls=\"${this.collapseId}\"\n            aria-expanded=\"${this.expanded}\"\n            aria-label=\"Toggle navigation\"\n          ></sgds-icon-button>\n        </div>\n      </nav>\n    `;\n  }\n  _expandClass() {\n    switch (this.expand) {\n      case \"always\":\n        return \"navbar-expand\";\n      case \"never\":\n        break;\n      default:\n        return `navbar-expand-${this.expand}`;\n    }\n  }\n}\nsetDefaultAnimation(\"mainnav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"mainnav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsMainnav;\n"],"names":["mainnavStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav.js","sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from \"../../utils/breakpoints\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { MainnavContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\nconst SIZES = {\n  sm: SM_BREAKPOINT,\n  md: MD_BREAKPOINT,\n  lg: LG_BREAKPOINT,\n  xl: XL_BREAKPOINT,\n  xxl: XXL_BREAKPOINT,\n  never: Infinity,\n  always: -1\n};\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n\n  @provide({ context: MainnavContext })\n  @state()\n  private _breakpointReached = false;\n\n  /** @internal */\n  @query(\"nav\") nav: HTMLElement;\n  /** @internal */\n  @query(\".navbar\") navbar: HTMLElement;\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".navbar-nav-scroll\") navScroll: HTMLElement;\n  /** @internal */\n  @query(\"slot[name='non-collapsible']\") nonCollapsibleSlot: HTMLSlotElement;\n\n  constructor() {\n    super();\n    window.addEventListener(\"resize\", () => {\n      const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];\n      if (newBreakpointReachedValue !== this.breakpointReached) {\n        this.requestUpdate();\n      } else {\n        this.body ? (this.body.hidden = true) : null;\n        this.expanded = false;\n      }\n\n      if (newBreakpointReachedValue) {\n        this._handleMobileNav();\n\n        if (!this._breakpointReached) {\n          this._breakpointReached = true;\n        }\n      } else {\n        this._handleDesktopNav();\n        this._breakpointReached = false;\n      }\n    });\n  }\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  private collapseId = genId(\"mainnav\", \"collapse\");\n\n  /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */\n  @property({ type: String })\n  expand: MainnavExpandSize = \"lg\";\n\n  /** @internal */\n  @state()\n  breakpointReached = false;\n\n  /** @internal */\n  @state()\n  expanded = false;\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._breakpointReached = true;\n    }\n\n    const items = [...this.defaultSlotItems, ...this.endSlotItems] as SgdsMainnavItem[] | SgdsMainnavDropdown[];\n    items.forEach((item: SgdsMainnavItem | SgdsMainnavDropdown) => {\n      item.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {\n      this.hide();\n    }\n  }\n\n  private _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private async _handleMobileNav() {\n    if (!this.nav) return;\n\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n    const offsetTop = this.nav.offsetTop;\n    const navHeight = this.nav.clientHeight;\n    const mainNavPosition = offsetTop + navHeight;\n    this.body.style.top = `${mainNavPosition}px`;\n    this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavPosition}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.nonCollapsibleSlot);\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanded = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.show\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.style.height = \"auto\";\n\n    this.emit(\"sgds-after-show\");\n  }\n\n  private async _animateToHide() {\n    const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (slHide.defaultPrevented) {\n      this.expanded = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.hide\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = \"auto\";\n\n    this.emit(\"sgds-after-hide\");\n  }\n\n  @watch(\"expanded\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanded) {\n      // Show\n      this._animateToShow();\n    } else {\n      // Hide\n      this._animateToHide();\n    }\n  }\n  /** Shows the menu. For when mainnav is in the collapsed form */\n  public async show() {\n    if (this.expanded) {\n      return;\n    }\n\n    this.expanded = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when mainnav is in the collapsed form */\n  public async hide() {\n    if (!this.expanded) {\n      return;\n    }\n\n    this.expanded = false;\n    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n    this.emit(\"close-dropdown-menu\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  // assigning name attribute to elements added in slot=\"end\", to use wildcard css selector to assign styles only to *-mainnav-item\n  _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n    });\n  }\n\n  render() {\n    this.breakpointReached = window.innerWidth < SIZES[this.expand];\n\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${this.brandHref} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <slot name=\"non-collapsible\"></slot>\n          <sgds-icon-button\n            name=${this.expanded ? \"cross\" : \"menu\"}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"navbar-toggler\"\n            @click=${this._handleSummaryClick}\n            aria-controls=\"${this.collapseId}\"\n            aria-expanded=\"${this.expanded}\"\n            aria-label=\"Toggle navigation\"\n          ></sgds-icon-button>\n        </div>\n      </nav>\n    `;\n  }\n  _expandClass() {\n    switch (this.expand) {\n      case \"always\":\n        return \"navbar-expand\";\n      case \"never\":\n        break;\n      default:\n        return `navbar-expand-${this.expand}`;\n    }\n  }\n}\nsetDefaultAnimation(\"mainnav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"mainnav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsMainnav;\n"],"names":["mainnavStyle"],"mappings":"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"}

package/components/Masthead/index.umd.js

@@ -4162,7 +4162,7 @@
   /** @internal */
   SgdsElement.dependencies = {};
 
-  var css_248z$2 = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width);padding:.25rem var(--sgds-mainnav-padding-x);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 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus,.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus,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)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
+  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:16px;-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;padding:0!important;width:16px}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);padding:.25rem var(--sgds-mainnav-padding-x);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{box-shadow:0 0 0 4px #60aaf4;outline:0}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
 
   var css_248z$1 = css`svg{vertical-align:middle}`;
 
@@ -4190,7 +4190,12 @@
       }
       render() {
           return html `
-      <div id="sgds-masthead" class="sgds-masthead" aria-label="A Singapore Government Agency Website" role="banner">
+      <div
+        id="sgds-masthead"
+        class="sgds-masthead"
+        aria-label="A Singapore Government Agency Website. Beware of government impersonation scams."
+        role="banner"
+      >
         <div class="banner">
           <div class="container">
             <div class="masthead-layout">
@@ -4228,7 +4233,7 @@
                 />
               </svg>
               <div class="masthead-text-layout">
-                <span>A Singapore Government Agency Website</span>
+                <span>A Singapore Government Agency Website. Beware of government impersonation scams.</span>
                 <div
                   class="sgds-masthead-button"
                   id="sgds-masthead-identify"
@@ -4271,16 +4276,16 @@
                 <div class="icon">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="20"
-                    height="20"
-                    viewBox="0 0 20 20"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
                     fill="none"
                     class="banner-icon"
                   >
                     <path
                       fill-rule="evenodd"
                       clip-rule="evenodd"
-                      d="M2.5 7.31409C2.5 7.01647 2.65873 6.74143 2.91644 6.59254L9.5831 2.74069C9.84105 2.59165 10.1589 2.59165 10.4169 2.74069L17.0836 6.59254C17.3413 6.74143 17.5 7.01647 17.5 7.31409V8.33314C17.5 8.79338 17.1269 9.16648 16.6667 9.16648H15.8333V14.9998H16.6667C17.1269 14.9998 17.5 15.3729 17.5 15.8331V16.6665C17.5 17.1267 17.1269 17.4998 16.6667 17.4998H3.33333C2.8731 17.4998 2.5 17.1267 2.5 16.6665V15.8331C2.5 15.3729 2.8731 14.9998 3.33333 14.9998H4.16667V9.16648H3.33333C2.8731 9.16648 2.5 8.79338 2.5 8.33314V7.31409ZM6.66667 9.16648V14.9998H8.75V9.16648H6.66667ZM11.25 9.16648V14.9998H13.3333V9.16648H11.25ZM11.25 6.24981C11.25 6.94017 10.6904 7.49981 10 7.49981C9.30964 7.49981 8.75 6.94017 8.75 6.24981C8.75 5.55945 9.30964 4.99981 10 4.99981C10.6904 4.99981 11.25 5.55945 11.25 6.24981Z"
+                      d="M2 5.85166C2 5.61356 2.12699 5.39354 2.33315 5.27442L7.66648 2.19294C7.87284 2.07371 8.12716 2.07371 8.33352 2.19294L13.6669 5.27442C13.873 5.39354 14 5.61356 14 5.85166V6.66691C14 7.0351 13.7015 7.33357 13.3333 7.33357H12.6667V12.0002H13.3333C13.7015 12.0002 14 12.2987 14 12.6669V13.3336C14 13.7018 13.7015 14.0002 13.3333 14.0002H2.66667C2.29848 14.0002 2 13.7018 2 13.3336V12.6669C2 12.2987 2.29848 12.0002 2.66667 12.0002H3.33333V7.33357H2.66667C2.29848 7.33357 2 7.0351 2 6.66691V5.85166ZM5.33333 7.33357V12.0002H7V7.33357H5.33333ZM9 7.33357V12.0002H10.6667V7.33357H9ZM9 5.00024C9 5.55252 8.55229 6.00024 8 6.00024C7.44772 6.00024 7 5.55252 7 5.00024C7 4.44795 7.44772 4.00024 8 4.00024C8.55229 4.00024 9 4.44795 9 5.00024Z"
                       fill="currentColor"
                     />
                   </svg>
@@ -4301,16 +4306,16 @@
                 <div class="icon">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="20"
-                    height="20"
-                    viewBox="0 0 20 20"
+                    width="17"
+                    height="16"
+                    viewBox="0 0 17 16"
                     fill="none"
                     class="banner-icon"
                   >
                     <path
                       fill-rule="evenodd"
                       clip-rule="evenodd"
-                      d="M5.83334 8.33317H5.41668C4.26608 8.33317 3.33334 9.26591 3.33334 10.4165V16.2498C3.33334 17.4004 4.26608 18.3332 5.41668 18.3332H14.5833C15.7339 18.3332 16.6667 17.4004 16.6667 16.2498V10.4165C16.6667 9.26591 15.7339 8.33317 14.5833 8.33317H14.1667V5.83317C14.1667 3.53198 12.3012 1.6665 10 1.6665C7.69882 1.6665 5.83334 3.53198 5.83334 5.83317V8.33317ZM7.50001 8.33317H12.5V5.83317C12.5 4.45246 11.3807 3.33317 10 3.33317C8.6193 3.33317 7.50001 4.45246 7.50001 5.83317V8.33317Z"
+                      d="M5.3335 6.66683H5.00016C4.07969 6.66683 3.3335 7.41302 3.3335 8.3335V13.0002C3.3335 13.9206 4.07969 14.6668 5.00016 14.6668H12.3335C13.254 14.6668 14.0002 13.9206 14.0002 13.0002V8.3335C14.0002 7.41302 13.254 6.66683 12.3335 6.66683H12.0002V4.66683C12.0002 2.82588 10.5078 1.3335 8.66683 1.3335C6.82588 1.3335 5.3335 2.82588 5.3335 4.66683V6.66683ZM6.66683 6.66683H10.6668V4.66683C10.6668 3.56226 9.7714 2.66683 8.66683 2.66683C7.56226 2.66683 6.66683 3.56226 6.66683 4.66683V6.66683Z"
                       fill="currentColor"
                     />
                   </svg>
@@ -4320,16 +4325,16 @@
                   <article>
                     Look for a lock (<svg
                       xmlns="http://www.w3.org/2000/svg"
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
                       fill="none"
                       class="banner-icon-inline"
                     >
                       <path
                         fill-rule="evenodd"
                         clip-rule="evenodd"
-                        d="M5.83331 8.33317H5.41665C4.26605 8.33317 3.33331 9.26591 3.33331 10.4165V16.2498C3.33331 17.4004 4.26605 18.3332 5.41665 18.3332H14.5833C15.7339 18.3332 16.6666 17.4004 16.6666 16.2498V10.4165C16.6666 9.26591 15.7339 8.33317 14.5833 8.33317H14.1666V5.83317C14.1666 3.53198 12.3012 1.6665 9.99998 1.6665C7.69879 1.6665 5.83331 3.53198 5.83331 5.83317V8.33317ZM7.49998 8.33317H12.5V5.83317C12.5 4.45246 11.3807 3.33317 9.99998 3.33317C8.61927 3.33317 7.49998 4.45246 7.49998 5.83317V8.33317Z"
+                        d="M4.66699 6.66683H4.33366C3.41318 6.66683 2.66699 7.41302 2.66699 8.3335V13.0002C2.66699 13.9206 3.41318 14.6668 4.33366 14.6668H11.667C12.5875 14.6668 13.3337 13.9206 13.3337 13.0002V8.3335C13.3337 7.41302 12.5875 6.66683 11.667 6.66683H11.3337V4.66683C11.3337 2.82588 9.84127 1.3335 8.00033 1.3335C6.15938 1.3335 4.66699 2.82588 4.66699 4.66683V6.66683ZM6.00033 6.66683H10.0003V4.66683C10.0003 3.56226 9.10489 2.66683 8.00033 2.66683C6.89576 2.66683 6.00033 3.56226 6.00033 4.66683V6.66683Z"
                         fill="currentColor"
                       /></svg
                     >) or https:// as an added precaution. Share sensitive information only on official, secure
@@ -4337,6 +4342,32 @@
                   </article>
                 </div>
               </div>
+              <div class="wrapper">
+                <div class="icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="17"
+                    height="16"
+                    viewBox="0 0 17 16"
+                    fill="none"
+                    class="banner-icon"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M8.33342 1.3335C12.0153 1.3335 15.0001 4.31826 15.0001 8.00016C15.0001 11.6821 12.0153 14.6668 8.33342 14.6668C4.65152 14.6668 1.66675 11.6821 1.66675 8.00016C1.66675 4.31826 4.65152 1.3335 8.33342 1.3335ZM8.33342 10.0002C7.96523 10.0002 7.66675 10.2986 7.66675 10.6668C7.66675 11.035 7.96523 11.3335 8.33342 11.3335C8.7016 11.3335 9.00008 11.035 9.00008 10.6668C9.00008 10.2986 8.7016 10.0002 8.33342 10.0002ZM8.33342 4.68311C8.01125 4.68311 7.75008 4.94492 7.75008 5.26709V8.66683C7.75026 8.98885 8.01136 9.25016 8.33342 9.25016C8.65547 9.25016 8.91657 8.98885 8.91675 8.66683V5.26709C8.91675 4.94492 8.65558 4.68311 8.33342 4.68311Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div class="content">
+                  <div class="title">Scam alert</div>
+                  <article>
+                    Government officers will never ask you to send money or share your details over the phone. When
+                    unsure, hang up and call Scamshield at 1799.
+                  </article>
+                </div>
+              </div>
             </div>
           </div>
         </div>