@govtechsg/sgds-web-component 2.0.0 → 2.1.0

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

@@ -1,3 +1,4 @@
+'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { queryAsync, property } from 'lit/decorators.js';

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-dropdown.js","sources":["../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAsync } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content. `togglerText` property takes precedence over this slot when both are defined.\n */\nexport class SgdsMainnavDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, mainnavDropdownStyle];\n\n  /**@internal */\n  @queryAsync(\"a\")\n  private dropdownRef: Promise<HTMLAnchorElement>;\n\n  /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  private togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** Sets the text content of Dropdown button */\n  @property({ type: String })\n  togglerText = \"\";\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean })\n  active = false;\n\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.menuIsOpen) {\n      await this.dropdownRef;\n      this.showMenu();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"sgds nav-item dropdown\">\n        <a\n          class=\"${classMap({\n            \"dropdown-toggle\": true,\n            \"nav-link\": true,\n            active: this.active,\n            disabled: this.disabled\n          })}\"\n          ?disabled=${this.disabled}\n          aria-expanded=\"${this.menuIsOpen}\"\n          ${ref(this.myDropdown)}\n          @click=${() => this.toggleMenu()}\n          id=${this.togglerId}\n          tabindex=${this.disabled ? \"-1\" : \"0\"}\n          role=\"button\"\n        >\n          ${this.togglerText ? this.togglerText : html`<slot name=\"toggler\"></slot>`}\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </a>\n        <div class=\"dropdown-menu\" role=\"menu\" part=\"menu\">\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsMainnavDropdown;\n"],"names":["dropdownStyle","mainnavDropdownStyle"],"mappings":";;;;;;;;;;AAQA;;;AAGG;AACG,MAAO,mBAAoB,SAAQ,mBAAmB,CAAA;AAA5D,IAAA,WAAA,GAAA;;;AAQU,QAAA,IAAA,CAAA,SAAS,GAAW,KAAK,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;;QAIxD,IAAW,CAAA,WAAA,GAAG,EAAE,CAAC;;QAIjB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAiDhB;AA/CC,IAAA,MAAM,YAAY,GAAA;QAChB,KAAK,CAAC,YAAY,EAAE,CAAC;AACrB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,IAAI,CAAC,WAAW,CAAC;YACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGI,iBAAA,EAAA,QAAQ,CAAC;AAChB,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;AACU,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACR,yBAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AAC9B,UAAA,EAAA,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;AACb,iBAAA,EAAA,MAAM,IAAI,CAAC,UAAU,EAAE,CAAA;AAC3B,aAAA,EAAA,IAAI,CAAC,SAAS,CAAA;qBACR,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;;AAGnC,UAAA,EAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA,CAA8B,4BAAA,CAAA,CAAA;;;;;;;;;;;;;;;;AAgB9C,oCAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;;;KAGtD,CAAC;KACH;;AA/DM,mBAAA,CAAA,MAAM,GAAG,CAAC,GAAG,mBAAmB,CAAC,MAAM,EAAEA,QAAa,EAAEC,UAAoB,CAAtE,CAAwE;AAI7E,UAAA,CAAA;IADP,UAAU,CAAC,GAAG,CAAC;AACgC,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOhD,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACV,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-mainnav-dropdown.js","sources":["../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAsync } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content. `togglerText` property takes precedence over this slot when both are defined.\n */\nexport class SgdsMainnavDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, mainnavDropdownStyle];\n\n  /**@internal */\n  @queryAsync(\"a\")\n  private dropdownRef: Promise<HTMLAnchorElement>;\n\n  /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  private togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** Sets the text content of Dropdown button */\n  @property({ type: String })\n  togglerText = \"\";\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean })\n  active = false;\n\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.menuIsOpen) {\n      await this.dropdownRef;\n      this.showMenu();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"sgds nav-item dropdown\">\n        <a\n          class=\"${classMap({\n            \"dropdown-toggle\": true,\n            \"nav-link\": true,\n            active: this.active,\n            disabled: this.disabled\n          })}\"\n          ?disabled=${this.disabled}\n          aria-expanded=\"${this.menuIsOpen}\"\n          ${ref(this.myDropdown)}\n          @click=${() => this.toggleMenu()}\n          id=${this.togglerId}\n          tabindex=${this.disabled ? \"-1\" : \"0\"}\n          role=\"button\"\n        >\n          ${this.togglerText ? this.togglerText : html`<slot name=\"toggler\"></slot>`}\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </a>\n        <div class=\"dropdown-menu\" role=\"menu\" part=\"menu\">\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsMainnavDropdown;\n"],"names":["dropdownStyle","mainnavDropdownStyle"],"mappings":";;;;;;;;;;;AAQA;;;AAGG;AACG,MAAO,mBAAoB,SAAQ,mBAAmB,CAAA;AAA5D,IAAA,WAAA,GAAA;;;AAQU,QAAA,IAAA,CAAA,SAAS,GAAW,KAAK,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;;QAIxD,IAAW,CAAA,WAAA,GAAG,EAAE,CAAC;;QAIjB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAiDhB;AA/CC,IAAA,MAAM,YAAY,GAAA;QAChB,KAAK,CAAC,YAAY,EAAE,CAAC;AACrB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,IAAI,CAAC,WAAW,CAAC;YACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGI,iBAAA,EAAA,QAAQ,CAAC;AAChB,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;AACU,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACR,yBAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AAC9B,UAAA,EAAA,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;AACb,iBAAA,EAAA,MAAM,IAAI,CAAC,UAAU,EAAE,CAAA;AAC3B,aAAA,EAAA,IAAI,CAAC,SAAS,CAAA;qBACR,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;;AAGnC,UAAA,EAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA,CAA8B,4BAAA,CAAA,CAAA;;;;;;;;;;;;;;;;AAgB9C,oCAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;;;KAGtD,CAAC;KACH;;AA/DM,mBAAA,CAAA,MAAM,GAAG,CAAC,GAAG,mBAAmB,CAAC,MAAM,EAAEA,QAAa,EAAEC,UAAoB,CAAtE,CAAwE;AAI7E,UAAA,CAAA;IADP,UAAU,CAAC,GAAG,CAAC;AACgC,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOhD,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACV,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Mainnav/sgds-mainnav-item.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-item.cjs.js","sources":["../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import LinkElement from \"../../base/link-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends LinkElement {\n  static styles = [...LinkElement.styles, mainnavItemStyle];\n}\n\nexport default SgdsMainnavItem;\n"],"names":["LinkElement","mainnavItemStyle"],"mappings":";;;;;;;AAGA;;;AAGM;AACA,MAAO,eAAgB,SAAQA,sBAAW,CAAA;;AACvC,eAAM,CAAA,MAAA,GAAG,CAAC,GAAGA,sBAAW,CAAC,MAAM,EAAEC,sBAAgB,CAAC;;;;;"}
+{"version":3,"file":"sgds-mainnav-item.cjs.js","sources":["../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import LinkElement from \"../../base/link-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends LinkElement {\n  static styles = [...LinkElement.styles, mainnavItemStyle];\n}\n\nexport default SgdsMainnavItem;\n"],"names":["LinkElement","mainnavItemStyle"],"mappings":";;;;;;;;AAGA;;;AAGM;AACA,MAAO,eAAgB,SAAQA,sBAAW,CAAA;;AACvC,eAAM,CAAA,MAAA,GAAG,CAAC,GAAGA,sBAAW,CAAC,MAAM,EAAEC,sBAAgB,CAAC;;;;;"}

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

@@ -1,3 +1,4 @@
+'use client';
 import LinkElement from '../../base/link-element.js';
 import css_248z from './mainnav-item.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-item.js","sources":["../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import LinkElement from \"../../base/link-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends LinkElement {\n  static styles = [...LinkElement.styles, mainnavItemStyle];\n}\n\nexport default SgdsMainnavItem;\n"],"names":["mainnavItemStyle"],"mappings":";;;AAGA;;;AAGM;AACA,MAAO,eAAgB,SAAQ,WAAW,CAAA;;AACvC,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAgB,CAAC;;;;"}
+{"version":3,"file":"sgds-mainnav-item.js","sources":["../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import LinkElement from \"../../base/link-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends LinkElement {\n  static styles = [...LinkElement.styles, mainnavItemStyle];\n}\n\nexport default SgdsMainnavItem;\n"],"names":["mainnavItemStyle"],"mappings":";;;;AAGA;;;AAGM;AACA,MAAO,eAAgB,SAAQ,WAAW,CAAA;;AACvC,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAgB,CAAC;;;;"}

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.cjs.js","sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, 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 mainnavStyle from \"./mainnav.css\";\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 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 * @cssproperty --mainnav-bg - Navbar's background color.\n * @cssproperty --mainnav-padding-x - left and right padding for browser width > 768px\n * @cssproperty --mainnav-padding-y - top and bottom padding for browser width > 768px\n * @cssproperty --mainnav-mobile-padding-x - left and right padding for browser width < 768px\n * @cssproperty --mainnav-mobile-padding-y - top and bottom padding for browser width < 768px\n * @cssproperty --mainnav-border-bottom-width - bottom border width\n * @cssproperty --mainnav-border-bottom-color - border-bottom width color\n * @cssproperty --mainnav-theme-color - The theme color of mainnav affecting the hover and active states of items in the mainnav\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\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  }\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  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n    }\n  }\n  private handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\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    this.expanded = false;\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    const collapseClass = \"navbar-body navbar-collapse order-2\";\n    return html`\n      <nav\n        class=\"sgds navbar navbar-light\n        ${this._expandClass()}\"\n      >\n        <a class=\"navbar-brand  order-first\" href=${this.brandHref} aria-label=\"brand-link\">\n          <slot name=\"brand\"></slot>\n        </a>\n        <slot name=\"non-collapsible\" class=\"${this.breakpointReached ? \"order-1\" : \"order-last\"}\"></slot>\n        <button\n          class=\"navbar-toggler order-1 \"\n          type=\"button\"\n          @click=${this.handleSummaryClick}\n          aria-controls=\"${this.collapseId}\"\n          aria-expanded=\"${this.expanded}\"\n          aria-label=\"Toggle navigation\"\n        >\n          <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=${collapseClass} 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      </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":["SM_BREAKPOINT","MD_BREAKPOINT","LG_BREAKPOINT","XL_BREAKPOINT","XXL_BREAKPOINT","SgdsElement","genId","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","classMap","mainnavStyle","__decorate","query","property","state","watch","setDefaultAnimation"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav.cjs.js","sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, 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 mainnavStyle from \"./mainnav.css\";\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 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 * @cssproperty --mainnav-bg - Navbar's background color.\n * @cssproperty --mainnav-padding-x - left and right padding for browser width > 768px\n * @cssproperty --mainnav-padding-y - top and bottom padding for browser width > 768px\n * @cssproperty --mainnav-mobile-padding-x - left and right padding for browser width < 768px\n * @cssproperty --mainnav-mobile-padding-y - top and bottom padding for browser width < 768px\n * @cssproperty --mainnav-border-bottom-width - bottom border width\n * @cssproperty --mainnav-border-bottom-color - border-bottom width color\n * @cssproperty --mainnav-theme-color - The theme color of mainnav affecting the hover and active states of items in the mainnav\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\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  }\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  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n    }\n  }\n  private handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\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    this.expanded = false;\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    const collapseClass = \"navbar-body navbar-collapse order-2\";\n    return html`\n      <nav\n        class=\"sgds navbar navbar-light\n        ${this._expandClass()}\"\n      >\n        <a class=\"navbar-brand  order-first\" href=${this.brandHref} aria-label=\"brand-link\">\n          <slot name=\"brand\"></slot>\n        </a>\n        <slot name=\"non-collapsible\" class=\"${this.breakpointReached ? \"order-1\" : \"order-last\"}\"></slot>\n        <button\n          class=\"navbar-toggler order-1 \"\n          type=\"button\"\n          @click=${this.handleSummaryClick}\n          aria-controls=\"${this.collapseId}\"\n          aria-expanded=\"${this.expanded}\"\n          aria-label=\"Toggle navigation\"\n        >\n          <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=${collapseClass} 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      </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":["SM_BREAKPOINT","MD_BREAKPOINT","LG_BREAKPOINT","XL_BREAKPOINT","XXL_BREAKPOINT","SgdsElement","genId","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","classMap","mainnavStyle","__decorate","query","property","state","watch","setDefaultAnimation"],"mappings":"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"}

package/components/Mainnav/sgds-mainnav.js

@@ -1,3 +1,4 @@
+'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { query, property, state } from 'lit/decorators.js';

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.js","sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, 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 mainnavStyle from \"./mainnav.css\";\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 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 * @cssproperty --mainnav-bg - Navbar's background color.\n * @cssproperty --mainnav-padding-x - left and right padding for browser width > 768px\n * @cssproperty --mainnav-padding-y - top and bottom padding for browser width > 768px\n * @cssproperty --mainnav-mobile-padding-x - left and right padding for browser width < 768px\n * @cssproperty --mainnav-mobile-padding-y - top and bottom padding for browser width < 768px\n * @cssproperty --mainnav-border-bottom-width - bottom border width\n * @cssproperty --mainnav-border-bottom-color - border-bottom width color\n * @cssproperty --mainnav-theme-color - The theme color of mainnav affecting the hover and active states of items in the mainnav\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\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  }\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  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n    }\n  }\n  private handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\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    this.expanded = false;\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    const collapseClass = \"navbar-body navbar-collapse order-2\";\n    return html`\n      <nav\n        class=\"sgds navbar navbar-light\n        ${this._expandClass()}\"\n      >\n        <a class=\"navbar-brand  order-first\" href=${this.brandHref} aria-label=\"brand-link\">\n          <slot name=\"brand\"></slot>\n        </a>\n        <slot name=\"non-collapsible\" class=\"${this.breakpointReached ? \"order-1\" : \"order-last\"}\"></slot>\n        <button\n          class=\"navbar-toggler order-1 \"\n          type=\"button\"\n          @click=${this.handleSummaryClick}\n          aria-controls=\"${this.collapseId}\"\n          aria-expanded=\"${this.expanded}\"\n          aria-label=\"Toggle navigation\"\n        >\n          <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=${collapseClass} 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      </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 { html } from \"lit\";\nimport { property, query, 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 mainnavStyle from \"./mainnav.css\";\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 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 * @cssproperty --mainnav-bg - Navbar's background color.\n * @cssproperty --mainnav-padding-x - left and right padding for browser width > 768px\n * @cssproperty --mainnav-padding-y - top and bottom padding for browser width > 768px\n * @cssproperty --mainnav-mobile-padding-x - left and right padding for browser width < 768px\n * @cssproperty --mainnav-mobile-padding-y - top and bottom padding for browser width < 768px\n * @cssproperty --mainnav-border-bottom-width - bottom border width\n * @cssproperty --mainnav-border-bottom-color - border-bottom width color\n * @cssproperty --mainnav-theme-color - The theme color of mainnav affecting the hover and active states of items in the mainnav\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\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  }\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  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n    }\n  }\n  private handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\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    this.expanded = false;\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    const collapseClass = \"navbar-body navbar-collapse order-2\";\n    return html`\n      <nav\n        class=\"sgds navbar navbar-light\n        ${this._expandClass()}\"\n      >\n        <a class=\"navbar-brand  order-first\" href=${this.brandHref} aria-label=\"brand-link\">\n          <slot name=\"brand\"></slot>\n        </a>\n        <slot name=\"non-collapsible\" class=\"${this.breakpointReached ? \"order-1\" : \"order-last\"}\"></slot>\n        <button\n          class=\"navbar-toggler order-1 \"\n          type=\"button\"\n          @click=${this.handleSummaryClick}\n          aria-controls=\"${this.collapseId}\"\n          aria-expanded=\"${this.expanded}\"\n          aria-label=\"Toggle navigation\"\n        >\n          <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=${collapseClass} 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      </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

@@ -2936,7 +2936,7 @@
       (globalThis.litIssuedWarnings ??= new Set());
   }
 
-  var css_248z$3 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--sgds-body-bg);color:var(--sgds-body-color);font-family:var(--sgds-body-font-family);font-size:var(--sgds-body-font-size);font-weight:var(--sgds-body-font-weight);line-height:var(--sgds-body-line-height);margin:0;text-align:var(--sgds-body-text-align);*,: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{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-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}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$3 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--sgds-body-bg);color:var(--sgds-body-color);font-family:var(--sgds-body-font-family);font-size:var(--sgds-body-font-size);font-weight:var(--sgds-body-font-weight);line-height:var(--sgds-body-line-height);margin:0;text-align:var(--sgds-body-text-align)}:host *,:host :after,:host :before{box-sizing:border-box}:host :disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:host :root{scroll-behavior:smooth}}:host ::slotted(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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-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}:host ::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}:host ::slotted(a:hover){color:var(--sgds-link-hover-color)}:host ::slotted(svg){vertical-align:middle}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -2956,8 +2956,7 @@
   }
   SgdsElement.styles = [css_248z$3];
 
-  var css_248z$2 = css`:host{--masthead-mobile-font-size:0.6875rem;--masthead-mobile-padding-x:0.75rem;--masthead-fluid-padding-x:0.75rem}b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#2f5fd0;text-decoration:underline}.container,.container-fluid{margin-left:auto;margin-right:auto;padding-left:var(--sgds-gutter-x,.75rem);padding-right:var(--sgds-gutter-x,.75rem);width:100%}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}.row{--sgds-gutter-x:1.5rem;--sgds-gutter-y:0;display:flex;flex-wrap:wrap;margin-left:calc(var(--sgds-gutter-x)*-.5);margin-right:calc(var(--sgds-gutter-x)*-.5);margin-top:calc(var(--sgds-gutter-y)*-1)}.row>*{flex-shrink:0;margin-top:var(--sgds-gutter-y);max-width:100%;padding-left:calc(var(--sgds-gutter-x)*.5);padding-right:calc(var(--sgds-gutter-x)*.5);width:100%}.col{flex:1 0 0%}
-/*! CSS Used from: Embedded */.container{display:flex;flex-direction:column}.sgds-masthead{background-color:#f0f0f0;color:#252525;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Noto Sans,Liberation Sans,sans-serif;font-size:.875rem;@media screen and (max-width:1023px){font-size:var(--masthead-mobile-font-size);.col,.row{padding-left:0;padding-right:0}.row{margin-left:0;margin-right:0}}}.sg-crest{height:1.75rem;width:1.25rem;path{fill:#db0000}}.masthead-layout{align-items:center;display:flex;gap:.25rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:21px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:12px;&.show{transform:rotate(0deg)}}.sgds-masthead-button{align-items:center;color:#2f5fd0;cursor:pointer;display:flex}.sgds-masthead-button:hover{color:#4371d6}.sgds-masthead-button-text{text-decoration:underline}.sgds-masthead-content{display:none;padding-bottom:3rem;padding-top:2.5rem;@media screen and (max-width:1023px){padding-bottom:2rem;padding-top:1rem}.content-grid{display:grid;gap:10rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));@media screen and (max-width:1023px){gap:1.5rem;grid-template-columns:1fr;.banner-icon-inline{height:.6rem;margin-bottom:.1875rem;width:.6rem}}.icon{margin-top:-.1em}}.wrapper{display:flex;font-size:1rem;gap:1rem;@media screen and (max-width:1023px){font-size:var(--masthead-mobile-font-size);gap:.5rem}.content{.title{font-weight:600;margin-bottom:.5rem;@media screen and (max-width:1023px){margin-bottom:.25rem}}article{line-height:1.5rem;@media screen and (max-width:1023px){line-height:1.2rem}}}.banner-icon{width:1.125rem;path{fill:#252525}@media screen and (max-width:1023px){width:.75rem}svg{line-height:1.5rem;@media screen and (max-width:1023px){width:1.25rem}}}.banner-icon-inline{path{fill:#252525}@media screen and (max-width:1023px){height:.6rem;margin-bottom:.1875rem;width:.6rem}}}&.show{display:block}}a.trusted-websites-link{align-items:center;color:#2f5fd0;display:inline-flex;margin-left:.125rem}a.trusted-websites-link:hover{color:#4371d6}@media screen and (max-width:1023px){.trusted-websites-icon{width:.75rem}.sgds-masthead>.container{padding-left:var(--masthead-mobile-padding-x);padding-right:var(--masthead-mobile-padding-x)}}.sgds-masthead>.container-fluid{padding-left:var(--masthead-fluid-padding-x);padding-right:var(--masthead-fluid-padding-x)}@media screen and (max-width:1023px){.sgds-masthead>.container-fluid{padding-left:var(--masthead-mobile-padding-x);padding-right:var(--masthead-mobile-padding-x)}.sgds-masthead:not([fluid]) .container{margin:0}}`;
+  var css_248z$2 = css`:host{--masthead-mobile-font-size:0.6875rem;--masthead-mobile-padding-x:0.75rem;--masthead-fluid-padding-x:0.75rem}b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#2f5fd0;text-decoration:underline}.container,.container-fluid{margin-left:auto;margin-right:auto;padding-left:var(--sgds-gutter-x,.75rem);padding-right:var(--sgds-gutter-x,.75rem);width:100%}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}.row{--sgds-gutter-x:1.5rem;--sgds-gutter-y:0;display:flex;flex-wrap:wrap;margin-left:calc(var(--sgds-gutter-x)*-.5);margin-right:calc(var(--sgds-gutter-x)*-.5);margin-top:calc(var(--sgds-gutter-y)*-1)}.row>*{flex-shrink:0;margin-top:var(--sgds-gutter-y);max-width:100%;padding-left:calc(var(--sgds-gutter-x)*.5);padding-right:calc(var(--sgds-gutter-x)*.5);width:100%}.col{flex:1 0 0%}.container{display:flex;flex-direction:column}.sgds-masthead{background-color:#f0f0f0;color:#252525;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Noto Sans,Liberation Sans,sans-serif;font-size:.875rem}@media screen and (max-width:1023px){.sgds-masthead{font-size:var(--masthead-mobile-font-size)}.sgds-masthead .col,.sgds-masthead .row{padding-left:0;padding-right:0}.sgds-masthead .row{margin-left:0;margin-right:0}}.masthead-layout{align-items:center;display:flex;gap:.25rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:21px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:12px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:#2f5fd0;cursor:pointer;display:flex}.sgds-masthead-button:hover{color:#4371d6}.sgds-masthead-button-text{text-decoration:underline}.sgds-masthead-content{display:none;padding-bottom:3rem;padding-top:2.5rem}@media screen and (max-width:1023px){.sgds-masthead-content{padding-bottom:2rem;padding-top:1rem}}.sgds-masthead-content .content-grid{display:grid;gap:10rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}@media screen and (max-width:1023px){.sgds-masthead-content .content-grid{gap:1.5rem;grid-template-columns:1fr}.sgds-masthead-content .content-grid .banner-icon-inline{height:.6rem;margin-bottom:.1875rem;width:.6rem}}.sgds-masthead-content .content-grid .icon{margin-top:-.1em}.sgds-masthead-content .wrapper{display:flex;font-size:1rem;gap:1rem}@media screen and (max-width:1023px){.sgds-masthead-content .wrapper{font-size:var(--masthead-mobile-font-size);gap:.5rem}}.sgds-masthead-content .wrapper .content .title{font-weight:600;margin-bottom:.5rem}@media screen and (max-width:1023px){.sgds-masthead-content .wrapper .content .title{margin-bottom:.25rem}}.sgds-masthead-content .wrapper .content article{line-height:1.5rem}@media screen and (max-width:1023px){.sgds-masthead-content .wrapper .content article{line-height:1.2rem}}.sgds-masthead-content .wrapper .banner-icon{width:1.125rem}.sgds-masthead-content .wrapper .banner-icon path{fill:#252525}@media screen and (max-width:1023px){.sgds-masthead-content .wrapper .banner-icon{width:.75rem}}.sgds-masthead-content .wrapper .banner-icon svg{line-height:1.5rem}@media screen and (max-width:1023px){.sgds-masthead-content .wrapper .banner-icon svg{width:1.25rem}}.sgds-masthead-content .wrapper .banner-icon-inline path{fill:#252525}@media screen and (max-width:1023px){.sgds-masthead-content .wrapper .banner-icon-inline{height:.6rem;margin-bottom:.1875rem;width:.6rem}}.sgds-masthead-content.show{display:block}a.trusted-websites-link{align-items:center;color:#2f5fd0;display:inline-flex;margin-left:.125rem}a.trusted-websites-link:hover{color:#4371d6}@media screen and (max-width:1023px){.trusted-websites-icon{width:.75rem}.sgds-masthead>.container{padding-left:var(--masthead-mobile-padding-x);padding-right:var(--masthead-mobile-padding-x)}}.sgds-masthead>.container-fluid{padding-left:var(--masthead-fluid-padding-x);padding-right:var(--masthead-fluid-padding-x)}@media screen and (max-width:1023px){.sgds-masthead>.container-fluid{padding-left:var(--masthead-mobile-padding-x);padding-right:var(--masthead-mobile-padding-x)}.sgds-masthead:not([fluid]) .container{margin:0}}`;
 
   var css_248z$1 = css`svg{vertical-align:middle}`;
 
@@ -2991,32 +2990,31 @@
           <div class="row">
             <div class="col">
               <div class="masthead-layout">
-                <svg
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="32"
-                  height="32"
-                  viewBox="0 0 32 32"
-                  class="sg-crest"
-                >
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                   <path
-                    d="M5.896 11.185c0 0-0.949 1.341 0.294 3.075 0 0 0.196-0.883 2.159-0.883h2.356c2.225 0 3.893-2.126 2.846-4.319 0 0 1.57 0.164 2.095-0.818 0.523-0.981-0.033-1.374-0.818-1.374h-3.959c0 0.704-1.341 0.802-1.341 0h-2.225c0 0-1.669 0-1.701 1.407 0 0 0.377-0.229 0.752-0.261v0.375c0 0-0.458 0.082-0.671 0.197-0.212 0.114-0.523 0.425-0.228 1.227 0.294 0.801 0.409 1.079 0.409 1.079s0.475-0.41 1.244-0.41h0.9c1.602 0 1.308 1.554-0.295 1.554s-1.815-0.85-1.815-0.85z"
-                  ></path>
+                    d="M5.17419 8.41308C5.17419 8.41308 4.54237 9.33755 5.36993 10.533C5.36993 10.533 5.50042 9.92422 6.80735 9.92422H8.37592C9.85727 9.92422 10.9678 8.45858 10.2707 6.94674C10.2707 6.94674 11.316 7.0598 11.6655 6.38282C12.0137 5.70652 11.6436 5.43559 11.1209 5.43559H8.48511C8.48511 5.92092 7.5923 5.98848 7.5923 5.43559H6.11094C6.11094 5.43559 4.99976 5.43559 4.97845 6.40557C4.97845 6.40557 5.22945 6.2477 5.47912 6.22564V6.48416C5.47912 6.48416 5.17419 6.54069 5.03238 6.61997C4.89124 6.69856 4.68418 6.91296 4.88058 7.46585C5.07632 8.01805 5.15289 8.20971 5.15289 8.20971C5.15289 8.20971 5.46913 7.92705 5.98112 7.92705H6.58032C7.64689 7.92705 7.45115 8.99837 6.38391 8.99837C5.31667 8.99837 5.17552 8.41239 5.17552 8.41239L5.17419 8.41308Z"
+                    fill="#DB0000"
+                  />
                   <path
-                    d="M14.255 9.566c0 0 0.54 0.033 0.932-0.31 0 0 3.55 2.765-1.717 8.326-5.268 5.562-1.195 9.162-1.195 9.162s-0.948 0.915-0.409 2.699c0 0-2.191-1.237-3.867-3.338-2.422-3.036-3.902-7.681 2.749-11.386 0 0 4.389-2.208 3.506-5.153z"
-                  ></path>
+                    d="M10.7394 7.29696C10.7394 7.29696 11.0989 7.31971 11.3599 7.08325C11.3599 7.08325 13.7234 8.98942 10.2168 12.8231C6.70947 16.6575 9.42118 19.1393 9.42118 19.1393C9.42118 19.1393 8.79002 19.7701 9.14888 21C9.14888 21 7.69016 20.1472 6.57432 18.6988C4.9618 16.6058 3.97645 13.4036 8.40454 10.8494C8.40454 10.8494 11.3273 9.32722 10.7394 7.29696Z"
+                    fill="#DB0000"
+                  />
                   <path
-                    d="M8.829 6.343c0 0 0.709-1.265 2.355-1.265 1.298 0 1.594-0.666 1.594-0.666s0.566-1.079 3.424-1.079c2.619 0 4.384 0.873 5.812 2.039 0 0-3.85-2.388-7.645 0.971h-5.54z"
-                  ></path>
+                    d="M7.12702 5.07507C7.12702 5.07507 7.59906 4.20299 8.69493 4.20299C9.55911 4.20299 9.75618 3.74385 9.75618 3.74385C9.75618 3.74385 10.133 3 12.0358 3C13.7795 3 14.9546 3.60184 15.9053 4.40567C15.9053 4.40567 13.3421 2.7594 10.8154 5.07507H7.12702Z"
+                    fill="#DB0000"
+                  />
                   <path
-                    d="M24.839 14.348c-0.109-3.948-3.163-8.179-9.728-7.939 6.413-5.431 17.537 6.695 8.375 13.066 0 0 1.533-2.186 1.353-5.126z"
-                  ></path>
+                    d="M17.7861 10.5936C17.7135 7.87188 15.6803 4.95507 11.3094 5.12052C15.5791 1.37644 22.9852 9.736 16.8853 14.1281C16.8853 14.1281 17.906 12.6204 17.7861 10.5936Z"
+                    fill="#DB0000"
+                  />
                   <path
-                    d="M16.093 6.845c8.005-0.24 10.863 9.357 5.693 13.676l-5.191 2.509c0 0-0.676-2.181 1.833-4.734 2.509-2.551 4.929-7.328-2.006-10.469 0 0 0.131-0.654-0.327-0.981z"
-                  ></path>
+                    d="M11.9632 5.42114C17.2927 5.25568 19.1955 11.8718 15.7534 14.8493L12.2974 16.5789C12.2974 16.5789 11.8473 15.0754 13.5178 13.3154C15.1882 11.5567 16.7994 8.2635 12.1822 6.09812C12.1822 6.09812 12.2694 5.64726 11.9645 5.42182L11.9632 5.42114Z"
+                    fill="#DB0000"
+                  />
                   <path
-                    d="M15.678 9.004c0 0 0.393-0.371 0.524-0.676 5.954 2.486 5.017 6.697 1.461 10.23-2.181 2.246-1.505 4.668-1.505 4.668s-2.66 1.657-3.577 3.097c0 0-3.852-3.28 1.483-8.724 5.235-5.344 1.614-8.594 1.614-8.594z"
-                  ></path>
+                    d="M11.6869 6.90954C11.6869 6.90954 11.9485 6.65377 12.0358 6.44351C15.9998 8.15734 15.376 11.0604 13.0085 13.496C11.5564 15.0444 12.0065 16.7141 12.0065 16.7141C12.0065 16.7141 10.2355 17.8564 9.62498 18.8491C9.62498 18.8491 7.0604 16.5879 10.6123 12.8349C14.0977 9.15075 11.6869 6.90954 11.6869 6.90954Z"
+                    fill="#DB0000"
+                  />
                 </svg>
                 <span>A Singapore Government Agency Website</span>
                 <div