@govtechsg/sgds-web-component 3.12.0 → 3.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/components/Drawer/drawer.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{display:contents}:host([size=md]) .drawer-end .drawer-panel,:host([size=md]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-768)}:host([size=md]) .drawer-bottom .drawer-panel,:host([size=md]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-768)}:host([size=lg]) .drawer-end .drawer-panel,:host([size=lg]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-1024)}:host([size=lg]) .drawer-bottom .drawer-panel,:host([size=lg]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-1024)}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);overflow:auto;padding:var(--sgds-padding-lg);pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-bottom .drawer-panel{bottom:0;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}slot[name=title]::slotted(*){color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-24)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}slot[name=footer]::slotted(*){box-shadow:0 -2px 2px 0 hsla(0,0%,5%,.08);margin:var(--sgds-margin-none) calc(var(--sgds-margin-xs)*-1);padding:var(--sgds-padding-lg) var(--sgds-padding-lg) var(--sgds-padding-none)}sgds-close-button{position:absolute;right:8px;top:8px}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:auto}.drawer-overlay{background-color:var(--sgds-bg-overlay);bottom:0;display:block;left:0;pointer-events:all;position:fixed;right:0;top:0}.drawer-contained .drawer-overlay{display:none}.drawer-contained{height:unset;width:unset}@media screen and (min-width:512px){.drawer-panel{padding:var(--sgds-padding-2-xl)}slot[name=footer]::slotted(*){margin:var(--sgds-margin-none) calc(var(--sgds-margin-md)*-1);padding:var(--sgds-padding-2-xl) var(--sgds-padding-2-xl) var(--sgds-padding-none)}}`;
+var css_248z = lit.css`:host{display:contents}:host([size=md]) .drawer-end .drawer-panel,:host([size=md]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-768)}:host([size=md]) .drawer-bottom .drawer-panel,:host([size=md]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-768)}:host([size=lg]) .drawer-end .drawer-panel,:host([size=lg]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-1024)}:host([size=lg]) .drawer-bottom .drawer-panel,:host([size=lg]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-1024)}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;overflow:auto;pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-bottom .drawer-panel{bottom:0;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-close-wrapper{position:sticky;top:0}sgds-close-button.drawer-close{inset-inline-end:8px;position:absolute;top:8px}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-lg) var(--sgds-padding-lg) var(--sgds-padding-none)}slot[name=title]::slotted(*){color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-24)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}slot[name=footer]::slotted(*){background-color:var(--sgds-surface-default);bottom:0;padding:var(--sgds-padding-lg);position:sticky}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:hidden;padding:var(--sgds-padding-lg)}.drawer-overlay{background-color:var(--sgds-bg-overlay);display:block;inset:0;pointer-events:all;position:fixed}.drawer-contained .drawer-overlay{display:none}.drawer-contained{height:unset;width:unset}@media screen and (min-width:512px){.drawer-body{padding:var(--sgds-padding-2-xl)}.drawer-header{padding:var(--sgds-padding-2-xl) var(--sgds-padding-2-xl) var(--sgds-padding-none)}slot[name=footer]::slotted(*){padding:var(--sgds-padding-2-xl)}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=drawer.cjs.js.map

package/react/components/Drawer/drawer.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{display:contents}:host([size=md]) .drawer-end .drawer-panel,:host([size=md]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-768)}:host([size=md]) .drawer-bottom .drawer-panel,:host([size=md]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-768)}:host([size=lg]) .drawer-end .drawer-panel,:host([size=lg]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-1024)}:host([size=lg]) .drawer-bottom .drawer-panel,:host([size=lg]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-1024)}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);overflow:auto;padding:var(--sgds-padding-lg);pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-bottom .drawer-panel{bottom:0;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}slot[name=title]::slotted(*){color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-24)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}slot[name=footer]::slotted(*){box-shadow:0 -2px 2px 0 hsla(0,0%,5%,.08);margin:var(--sgds-margin-none) calc(var(--sgds-margin-xs)*-1);padding:var(--sgds-padding-lg) var(--sgds-padding-lg) var(--sgds-padding-none)}sgds-close-button{position:absolute;right:8px;top:8px}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:auto}.drawer-overlay{background-color:var(--sgds-bg-overlay);bottom:0;display:block;left:0;pointer-events:all;position:fixed;right:0;top:0}.drawer-contained .drawer-overlay{display:none}.drawer-contained{height:unset;width:unset}@media screen and (min-width:512px){.drawer-panel{padding:var(--sgds-padding-2-xl)}slot[name=footer]::slotted(*){margin:var(--sgds-margin-none) calc(var(--sgds-margin-md)*-1);padding:var(--sgds-padding-2-xl) var(--sgds-padding-2-xl) var(--sgds-padding-none)}}`;
+var css_248z = css`:host{display:contents}:host([size=md]) .drawer-end .drawer-panel,:host([size=md]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-768)}:host([size=md]) .drawer-bottom .drawer-panel,:host([size=md]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-768)}:host([size=lg]) .drawer-end .drawer-panel,:host([size=lg]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-1024)}:host([size=lg]) .drawer-bottom .drawer-panel,:host([size=lg]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-1024)}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;overflow:auto;pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-bottom .drawer-panel{bottom:0;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-close-wrapper{position:sticky;top:0}sgds-close-button.drawer-close{inset-inline-end:8px;position:absolute;top:8px}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-lg) var(--sgds-padding-lg) var(--sgds-padding-none)}slot[name=title]::slotted(*){color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-24)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}slot[name=footer]::slotted(*){background-color:var(--sgds-surface-default);bottom:0;padding:var(--sgds-padding-lg);position:sticky}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:hidden;padding:var(--sgds-padding-lg)}.drawer-overlay{background-color:var(--sgds-bg-overlay);display:block;inset:0;pointer-events:all;position:fixed}.drawer-contained .drawer-overlay{display:none}.drawer-contained{height:unset;width:unset}@media screen and (min-width:512px){.drawer-body{padding:var(--sgds-padding-2-xl)}.drawer-header{padding:var(--sgds-padding-2-xl) var(--sgds-padding-2-xl) var(--sgds-padding-none)}slot[name=footer]::slotted(*){padding:var(--sgds-padding-2-xl)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=drawer.js.map

package/react/components/Drawer/sgds-drawer.cjs.js

@@ -228,17 +228,23 @@ class SgdsDrawer extends sgdsElement["default"] {
           aria-hidden=${this.open ? "false" : "true"}
           tabindex="0"
         >
-          <header class="drawer-header">
-            <slot name="title"></slot>
-            <slot name="description"></slot>
+          <div class="drawer-close-wrapper">
             <sgds-close-button
               class="drawer-close"
               aria-label="close drawer"
               @click="${() => this.requestClose("close-button")}"
             ></sgds-close-button>
-          </header>
-          <slot class="drawer-body"></slot>
-          <slot name="footer"></slot>
+          </div>
+          <div class="drawer-header_and_body">
+            <div class="drawer-header">
+              <slot name="title"></slot>
+              <slot name="description"></slot>
+            </div>
+          </div>
+          <div>
+            <slot class="drawer-body"></slot>
+            <slot name="footer"></slot>
+          </div>
         </div>
       </div>
     `;

package/react/components/Drawer/sgds-drawer.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-drawer.cjs.js","sources":["../../../../src/components/Drawer/sgds-drawer.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, stopAnimations } from \"../../utils/animate.js\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry.js\";\nimport { waitForEvent } from \"../../utils/event.js\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll.js\";\nimport { watch } from \"../../utils/watch.js\";\nimport drawerStyles from \"./drawer.css\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n *\n * @slot default - The drawer's main content\n * @slot title - The title of the drawer\n * @slot description - The description of the drawer\n * @slot footer - The footer of the drawer\n *\n * @event sgds-show - Emitted when the drawer opens.\n * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sgds-hide - Emitted when the drawer closes.\n * @event sgds-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sgds-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sgds-request-close - Emitted when the user attempts to\n *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n *   destructive behavior such as data loss.\n *\n */\nexport class SgdsDrawer extends SgdsElement {\n  static styles = [...SgdsElement.styles, drawerStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n\n  /** @internal */\n  private originalTrigger: HTMLElement | null;\n  /** @internal */\n  @query(\".drawer\") drawer: HTMLElement;\n  /** @internal */\n  @query(\".drawer-panel\") panel: HTMLElement;\n  /** @internal */\n  @query(\".drawer-overlay\") overlay: HTMLElement;\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Defines the size of the drawer panel.\n   * For drawers placed on the left or right (`start`/`end`), this controls the drawer's width.\n   * For drawers placed on the top or bottom, this controls the drawer's height.\n   * Accepts `small`, `medium`, or `large`. Defaults to `small`.\n   */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n\n  /** The direction from which the drawer will open. */\n  @property({ type: String, reflect: true }) placement: \"top\" | \"end\" | \"bottom\" | \"start\" = \"end\";\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @property({ type: Boolean, reflect: true }) contained = false;\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    unlockBodyScrolling(this);\n  }\n\n  private uppercaseFirstLetter(string: string) {\n    return string.charAt(0).toUpperCase() + string.slice(1);\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const slRequestClose = this.emit(\"sgds-request-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (slRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"drawer.denyClose\");\n      animateTo(this.panel, animation.keyframes, animation.options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  private addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (this.open && !this.contained && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  };\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit(\"sgds-show\");\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      //\n      // Related: https://github.com/shoelace-style/shoelace/issues/693\n      //\n      const autoFocusTarget = this.querySelector(\"[autofocus]\");\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute(\"autofocus\");\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const slInitialFocus = this.emit(\"sgds-initial-focus\", { cancelable: true });\n\n        if (!slInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute(\"autofocus\", \"\");\n        }\n      });\n\n      const panelAnimation = getAnimation(this, `drawer.show${this.uppercaseFirstLetter(this.placement)}`);\n      const overlayAnimation = getAnimation(this, \"drawer.overlay.show\");\n      await Promise.all([\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n      ]);\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n\n      if (!this.contained) {\n        unlockBodyScrolling(this);\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, `drawer.hide${this.uppercaseFirstLetter(this.placement)}`);\n      const overlayAnimation = getAnimation(this, \"drawer.overlay.hide\");\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      await Promise.all([\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n          this.overlay.hidden = true;\n        }),\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n          this.panel.hidden = true;\n        })\n      ]);\n\n      this.drawer.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === \"function\") {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  @watch(\"contained\", { waitUntilFirstUpdate: true })\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      lockBodyScrolling(this);\n    }\n\n    if (this.open && this.contained) {\n      unlockBodyScrolling(this);\n    }\n  }\n\n  /** Shows the drawer. */\n  public async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hides the drawer */\n  public async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  render() {\n    const isHydrated = this.hasUpdated;\n    const shouldHide = !this.open && !isHydrated;\n\n    return html`\n      <div\n        class=${classMap({\n          drawer: true,\n          \"drawer-top\": this.placement === \"top\",\n          \"drawer-end\": this.placement === \"end\",\n          \"drawer-bottom\": this.placement === \"bottom\",\n          \"drawer-start\": this.placement === \"start\",\n          \"drawer-contained\": this.contained,\n          \"drawer-fixed\": !this.contained\n        })}\n        ?hidden=${shouldHide}\n      >\n        <div class=\"drawer-overlay\" @click=${() => this.requestClose(\"overlay\")} tabindex=\"-1\"></div>\n\n        <div\n          class=\"drawer-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          tabindex=\"0\"\n        >\n          <header class=\"drawer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n            <sgds-close-button\n              class=\"drawer-close\"\n              aria-label=\"close drawer\"\n              @click=\"${() => this.requestClose(\"close-button\")}\"\n            ></sgds-close-button>\n          </header>\n          <slot class=\"drawer-body\"></slot>\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\n// Top\nsetDefaultAnimation(\"drawer.showTop\", {\n  keyframes: [\n    { opacity: 0, translate: \"0 -100%\" },\n    { opacity: 1, translate: \"0 0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideTop\", {\n  keyframes: [\n    { opacity: 1, translate: \"0 0\" },\n    { opacity: 0, translate: \"0 -100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// End\nsetDefaultAnimation(\"drawer.showEnd\", {\n  keyframes: [\n    { opacity: 0, translate: \"100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: \"-100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideEnd\", {\n  keyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"100%\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"-100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Bottom\nsetDefaultAnimation(\"drawer.showBottom\", {\n  keyframes: [\n    { opacity: 0, translate: \"0 100%\" },\n    { opacity: 1, translate: \"0 0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideBottom\", {\n  keyframes: [\n    { opacity: 1, translate: \"0 0\" },\n    { opacity: 0, translate: \"0 100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Start\nsetDefaultAnimation(\"drawer.showStart\", {\n  keyframes: [\n    { opacity: 0, translate: \"-100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: \"100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideStart\", {\n  keyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"-100%\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Deny close\nsetDefaultAnimation(\"drawer.denyClose\", {\n  keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n  options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation(\"drawer.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation(\"drawer.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 }\n});\n\nexport default SgdsDrawer;\n"],"names":["SgdsElement","lockBodyScrolling","unlockBodyScrolling","getAnimation","animateTo","stopAnimations","waitForEvent","html","classMap","drawerStyles","SgdsCloseButton","__decorate","query","property","watch","setDefaultAnimation"],"mappings":";;;;;;;;;;;;;;;;;;AAYA;;;;;;;;;;;;;;;;;;;AAmBG;AACG,MAAO,UAAW,SAAQA,sBAAW,CAAA;AAA3C,IAAA,WAAA,GAAA;;AAgBE;;;AAGG;QACyC,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;AAEzD;;;;;AAKG;QACwC,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;;QAGhC,IAAS,CAAA,SAAA,GAAuC,KAAK,CAAC;AAEjG;;;AAGG;QACyC,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AA+CtD,QAAA,IAAA,CAAA,qBAAqB,GAAG,CAAC,KAAoB,KAAI;AACvD,YAAA,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,gBAAA,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;aAC/B;AACH,SAAC,CAAC;KAyKH;AA3NC,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AAEtC,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;AAExB,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnBC,wBAAiB,CAAC,IAAI,CAAC,CAAC;aACzB;SACF;KACF;IAED,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7BC,0BAAmB,CAAC,IAAI,CAAC,CAAC;KAC3B;AAEO,IAAA,oBAAoB,CAAC,MAAc,EAAA;AACzC,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KACzD;AAEO,IAAA,YAAY,CAAC,MAA+C,EAAA;AAClE,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AACrD,YAAA,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,EAAE,MAAM,EAAE;AACnB,SAAA,CAAC,CAAC;AAEH,QAAA,IAAI,cAAc,CAAC,gBAAgB,EAAE;YACnC,MAAM,SAAS,GAAGC,8BAAY,CAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC;AACzD,YAAAC,iBAAS,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;YAC9D,OAAO;SACR;QAED,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAEO,gBAAgB,GAAA;QACtB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KAClE;IAEO,mBAAmB,GAAA;QACzB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KACrE;IAUK,MAAA,gBAAgB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;;AAEb,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;AACxB,YAAA,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,aAA4B,CAAC;;AAG7D,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnBH,wBAAiB,CAAC,IAAI,CAAC,CAAC;aACzB;;;;;;;YAQD,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;YAC1D,IAAI,eAAe,EAAE;AACnB,gBAAA,eAAe,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;aAC9C;YAED,MAAM,OAAO,CAAC,GAAG,CAAC,CAACI,sBAAc,CAAC,IAAI,CAAC,MAAM,CAAC,EAAEA,sBAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAC/E,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;;YAG3B,qBAAqB,CAAC,MAAK;AACzB,gBAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAE7E,gBAAA,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE;;oBAEpC,IAAI,eAAe,EAAE;wBAClB,eAAoC,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;qBACtE;yBAAM;wBACL,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;qBAC3C;iBACF;;gBAGD,IAAI,eAAe,EAAE;AACnB,oBAAA,eAAe,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;iBAC/C;AACH,aAAC,CAAC,CAAC;AAEH,YAAA,MAAM,cAAc,GAAGF,8BAAY,CAAC,IAAI,EAAE,CAAc,WAAA,EAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA,CAAE,CAAC,CAAC;YACrG,MAAM,gBAAgB,GAAGA,8BAAY,CAAC,IAAI,EAAE,qBAAqB,CAAC,CAAC;YACnE,MAAM,OAAO,CAAC,GAAG,CAAC;AAChB,gBAAAC,iBAAS,CAAC,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC;AACvE,gBAAAA,iBAAS,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC;AAC9E,aAAA,CAAC,CAAC;AAEH,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;aAAM;;AAEL,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACvB,IAAI,CAAC,mBAAmB,EAAE,CAAC;AAE3B,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnBF,0BAAmB,CAAC,IAAI,CAAC,CAAC;aAC3B;YAED,MAAM,OAAO,CAAC,GAAG,CAAC,CAACG,sBAAc,CAAC,IAAI,CAAC,MAAM,CAAC,EAAEA,sBAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAC/E,YAAA,MAAM,cAAc,GAAGF,8BAAY,CAAC,IAAI,EAAE,CAAc,WAAA,EAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA,CAAE,CAAC,CAAC;YACrG,MAAM,gBAAgB,GAAGA,8BAAY,CAAC,IAAI,EAAE,qBAAqB,CAAC,CAAC;;;;YAKnE,MAAM,OAAO,CAAC,GAAG,CAAC;AAChB,gBAAAC,iBAAS,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAK;AACtF,oBAAA,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;AAC7B,iBAAC,CAAC;AACF,gBAAAA,iBAAS,CAAC,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAK;AAChF,oBAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;AAC3B,iBAAC,CAAC;AACH,aAAA,CAAC,CAAC;AAEH,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;;AAG1B,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;AAC5B,YAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;;AAG1B,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;AACrC,YAAA,IAAI,QAAO,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAP,OAAO,CAAE,KAAK,CAAA,KAAK,UAAU,EAAE;gBACxC,UAAU,CAAC,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;aACnC;AAED,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;KACF;IAGD,mBAAmB,GAAA;QACjB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YAChCH,wBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YAC/BC,0BAAmB,CAAC,IAAI,CAAC,CAAC;SAC3B;KACF;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,OAAO,SAAS,CAAC;SAClB;AAED,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AACjB,QAAA,OAAOI,kBAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,YAAA,OAAO,SAAS,CAAC;SAClB;AAED,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;AAClB,QAAA,OAAOA,kBAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QACnC,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC;AAE7C,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,KAAK;AACtC,YAAA,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,KAAK;AACtC,YAAA,eAAe,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;AAC5C,YAAA,cAAc,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;YAC1C,kBAAkB,EAAE,IAAI,CAAC,SAAS;AAClC,YAAA,cAAc,EAAE,CAAC,IAAI,CAAC,SAAS;SAChC,CAAC,CAAA;kBACQ,UAAU,CAAA;;AAEiB,2CAAA,EAAA,MAAM,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;;;;;;wBAMvD,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;;;;;;;;AAS5B,sBAAA,EAAA,MAAM,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;;;;;;;KAO1D,CAAC;KACH;;AAhQM,UAAM,CAAA,MAAA,GAAG,CAAC,GAAGR,sBAAW,CAAC,MAAM,EAAES,iBAAY,CAAvC,CAAyC;AACtD;AACO,UAAA,CAAA,YAAY,GAAG;AACpB,IAAA,mBAAmB,EAAEC,+BAAe;AACrC,CAFkB,CAEjB;AAKgBC,gBAAA,CAAA;IAAjBC,mBAAK,CAAC,SAAS,CAAC;AAAqB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEdD,gBAAA,CAAA;IAAvBC,mBAAK,CAAC,eAAe,CAAC;AAAoB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEjBD,gBAAA,CAAA;IAAzBC,mBAAK,CAAC,iBAAiB,CAAC;AAAsB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMHD,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQdF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiC,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhCF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuD,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMrDF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuDxDF,gBAAA,CAAA;IADLG,WAAK,CAAC,MAAM,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AA6F7C,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AAGDH,gBAAA,CAAA;IADCG,WAAK,CAAC,WAAW,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AASlD,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA,CAAA;AAiEH;AACAC,qCAAmB,CAAC,gBAAgB,EAAE;AACpC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE;AACpC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AACjC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEHA,qCAAmB,CAAC,gBAAgB,EAAE;AACpC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AAChC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE;AACrC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH;AACAA,qCAAmB,CAAC,gBAAgB,EAAE;AACpC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AACjC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC/B,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE;AAClC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC/B,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEHA,qCAAmB,CAAC,gBAAgB,EAAE;AACpC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC9B,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AAClC,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC9B,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE;AACnC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH;AACAA,qCAAmB,CAAC,mBAAmB,EAAE;AACvC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE;AACnC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AACjC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEHA,qCAAmB,CAAC,mBAAmB,EAAE;AACvC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AAChC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE;AACpC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH;AACAA,qCAAmB,CAAC,kBAAkB,EAAE;AACtC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE;AAClC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC/B,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AACjC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC/B,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEHA,qCAAmB,CAAC,kBAAkB,EAAE;AACtC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC9B,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE;AACnC,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC9B,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AAClC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH;AACAA,qCAAmB,CAAC,kBAAkB,EAAE;AACtC,IAAA,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;AACxD,IAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC3B,CAAA,CAAC,CAAC;AAEH;AACAA,qCAAmB,CAAC,qBAAqB,EAAE;AACzC,IAAA,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AAC3C,IAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC3B,CAAA,CAAC,CAAC;AAEHA,qCAAmB,CAAC,qBAAqB,EAAE;AACzC,IAAA,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AAC3C,IAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC3B,CAAA,CAAC;;;;;"}
+{"version":3,"file":"sgds-drawer.cjs.js","sources":["../../../../src/components/Drawer/sgds-drawer.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, stopAnimations } from \"../../utils/animate.js\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry.js\";\nimport { waitForEvent } from \"../../utils/event.js\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll.js\";\nimport { watch } from \"../../utils/watch.js\";\nimport drawerStyles from \"./drawer.css\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n *\n * @slot default - The drawer's main content\n * @slot title - The title of the drawer\n * @slot description - The description of the drawer\n * @slot footer - The footer of the drawer\n *\n * @event sgds-show - Emitted when the drawer opens.\n * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sgds-hide - Emitted when the drawer closes.\n * @event sgds-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sgds-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sgds-request-close - Emitted when the user attempts to\n *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n *   destructive behavior such as data loss.\n *\n */\nexport class SgdsDrawer extends SgdsElement {\n  static styles = [...SgdsElement.styles, drawerStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n\n  /** @internal */\n  private originalTrigger: HTMLElement | null;\n  /** @internal */\n  @query(\".drawer\") drawer: HTMLElement;\n  /** @internal */\n  @query(\".drawer-panel\") panel: HTMLElement;\n  /** @internal */\n  @query(\".drawer-overlay\") overlay: HTMLElement;\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Defines the size of the drawer panel.\n   * For drawers placed on the left or right (`start`/`end`), this controls the drawer's width.\n   * For drawers placed on the top or bottom, this controls the drawer's height.\n   * Accepts `small`, `medium`, or `large`. Defaults to `small`.\n   */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n\n  /** The direction from which the drawer will open. */\n  @property({ type: String, reflect: true }) placement: \"top\" | \"end\" | \"bottom\" | \"start\" = \"end\";\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @property({ type: Boolean, reflect: true }) contained = false;\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    unlockBodyScrolling(this);\n  }\n\n  private uppercaseFirstLetter(string: string) {\n    return string.charAt(0).toUpperCase() + string.slice(1);\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const slRequestClose = this.emit(\"sgds-request-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (slRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"drawer.denyClose\");\n      animateTo(this.panel, animation.keyframes, animation.options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  private addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (this.open && !this.contained && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  };\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit(\"sgds-show\");\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      //\n      // Related: https://github.com/shoelace-style/shoelace/issues/693\n      //\n      const autoFocusTarget = this.querySelector(\"[autofocus]\");\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute(\"autofocus\");\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const slInitialFocus = this.emit(\"sgds-initial-focus\", { cancelable: true });\n\n        if (!slInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute(\"autofocus\", \"\");\n        }\n      });\n\n      const panelAnimation = getAnimation(this, `drawer.show${this.uppercaseFirstLetter(this.placement)}`);\n      const overlayAnimation = getAnimation(this, \"drawer.overlay.show\");\n      await Promise.all([\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n      ]);\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n\n      if (!this.contained) {\n        unlockBodyScrolling(this);\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, `drawer.hide${this.uppercaseFirstLetter(this.placement)}`);\n      const overlayAnimation = getAnimation(this, \"drawer.overlay.hide\");\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      await Promise.all([\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n          this.overlay.hidden = true;\n        }),\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n          this.panel.hidden = true;\n        })\n      ]);\n\n      this.drawer.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === \"function\") {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  @watch(\"contained\", { waitUntilFirstUpdate: true })\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      lockBodyScrolling(this);\n    }\n\n    if (this.open && this.contained) {\n      unlockBodyScrolling(this);\n    }\n  }\n\n  /** Shows the drawer. */\n  public async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hides the drawer */\n  public async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  render() {\n    const isHydrated = this.hasUpdated;\n    const shouldHide = !this.open && !isHydrated;\n\n    return html`\n      <div\n        class=${classMap({\n          drawer: true,\n          \"drawer-top\": this.placement === \"top\",\n          \"drawer-end\": this.placement === \"end\",\n          \"drawer-bottom\": this.placement === \"bottom\",\n          \"drawer-start\": this.placement === \"start\",\n          \"drawer-contained\": this.contained,\n          \"drawer-fixed\": !this.contained\n        })}\n        ?hidden=${shouldHide}\n      >\n        <div class=\"drawer-overlay\" @click=${() => this.requestClose(\"overlay\")} tabindex=\"-1\"></div>\n\n        <div\n          class=\"drawer-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          tabindex=\"0\"\n        >\n          <div class=\"drawer-close-wrapper\">\n            <sgds-close-button\n              class=\"drawer-close\"\n              aria-label=\"close drawer\"\n              @click=\"${() => this.requestClose(\"close-button\")}\"\n            ></sgds-close-button>\n          </div>\n          <div class=\"drawer-header_and_body\">\n            <div class=\"drawer-header\">\n              <slot name=\"title\"></slot>\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div>\n            <slot class=\"drawer-body\"></slot>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\n// Top\nsetDefaultAnimation(\"drawer.showTop\", {\n  keyframes: [\n    { opacity: 0, translate: \"0 -100%\" },\n    { opacity: 1, translate: \"0 0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideTop\", {\n  keyframes: [\n    { opacity: 1, translate: \"0 0\" },\n    { opacity: 0, translate: \"0 -100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// End\nsetDefaultAnimation(\"drawer.showEnd\", {\n  keyframes: [\n    { opacity: 0, translate: \"100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: \"-100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideEnd\", {\n  keyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"100%\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"-100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Bottom\nsetDefaultAnimation(\"drawer.showBottom\", {\n  keyframes: [\n    { opacity: 0, translate: \"0 100%\" },\n    { opacity: 1, translate: \"0 0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideBottom\", {\n  keyframes: [\n    { opacity: 1, translate: \"0 0\" },\n    { opacity: 0, translate: \"0 100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Start\nsetDefaultAnimation(\"drawer.showStart\", {\n  keyframes: [\n    { opacity: 0, translate: \"-100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: \"100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideStart\", {\n  keyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"-100%\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Deny close\nsetDefaultAnimation(\"drawer.denyClose\", {\n  keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n  options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation(\"drawer.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation(\"drawer.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 }\n});\n\nexport default SgdsDrawer;\n"],"names":["SgdsElement","lockBodyScrolling","unlockBodyScrolling","getAnimation","animateTo","stopAnimations","waitForEvent","html","classMap","drawerStyles","SgdsCloseButton","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}

package/react/components/Drawer/sgds-drawer.js

@@ -224,17 +224,23 @@ class SgdsDrawer extends SgdsElement {
           aria-hidden=${this.open ? "false" : "true"}
           tabindex="0"
         >
-          <header class="drawer-header">
-            <slot name="title"></slot>
-            <slot name="description"></slot>
+          <div class="drawer-close-wrapper">
             <sgds-close-button
               class="drawer-close"
               aria-label="close drawer"
               @click="${() => this.requestClose("close-button")}"
             ></sgds-close-button>
-          </header>
-          <slot class="drawer-body"></slot>
-          <slot name="footer"></slot>
+          </div>
+          <div class="drawer-header_and_body">
+            <div class="drawer-header">
+              <slot name="title"></slot>
+              <slot name="description"></slot>
+            </div>
+          </div>
+          <div>
+            <slot class="drawer-body"></slot>
+            <slot name="footer"></slot>
+          </div>
         </div>
       </div>
     `;

package/react/components/Drawer/sgds-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-drawer.js","sources":["../../../../src/components/Drawer/sgds-drawer.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, stopAnimations } from \"../../utils/animate.js\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry.js\";\nimport { waitForEvent } from \"../../utils/event.js\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll.js\";\nimport { watch } from \"../../utils/watch.js\";\nimport drawerStyles from \"./drawer.css\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n *\n * @slot default - The drawer's main content\n * @slot title - The title of the drawer\n * @slot description - The description of the drawer\n * @slot footer - The footer of the drawer\n *\n * @event sgds-show - Emitted when the drawer opens.\n * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sgds-hide - Emitted when the drawer closes.\n * @event sgds-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sgds-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sgds-request-close - Emitted when the user attempts to\n *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n *   destructive behavior such as data loss.\n *\n */\nexport class SgdsDrawer extends SgdsElement {\n  static styles = [...SgdsElement.styles, drawerStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n\n  /** @internal */\n  private originalTrigger: HTMLElement | null;\n  /** @internal */\n  @query(\".drawer\") drawer: HTMLElement;\n  /** @internal */\n  @query(\".drawer-panel\") panel: HTMLElement;\n  /** @internal */\n  @query(\".drawer-overlay\") overlay: HTMLElement;\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Defines the size of the drawer panel.\n   * For drawers placed on the left or right (`start`/`end`), this controls the drawer's width.\n   * For drawers placed on the top or bottom, this controls the drawer's height.\n   * Accepts `small`, `medium`, or `large`. Defaults to `small`.\n   */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n\n  /** The direction from which the drawer will open. */\n  @property({ type: String, reflect: true }) placement: \"top\" | \"end\" | \"bottom\" | \"start\" = \"end\";\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @property({ type: Boolean, reflect: true }) contained = false;\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    unlockBodyScrolling(this);\n  }\n\n  private uppercaseFirstLetter(string: string) {\n    return string.charAt(0).toUpperCase() + string.slice(1);\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const slRequestClose = this.emit(\"sgds-request-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (slRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"drawer.denyClose\");\n      animateTo(this.panel, animation.keyframes, animation.options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  private addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (this.open && !this.contained && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  };\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit(\"sgds-show\");\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      //\n      // Related: https://github.com/shoelace-style/shoelace/issues/693\n      //\n      const autoFocusTarget = this.querySelector(\"[autofocus]\");\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute(\"autofocus\");\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const slInitialFocus = this.emit(\"sgds-initial-focus\", { cancelable: true });\n\n        if (!slInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute(\"autofocus\", \"\");\n        }\n      });\n\n      const panelAnimation = getAnimation(this, `drawer.show${this.uppercaseFirstLetter(this.placement)}`);\n      const overlayAnimation = getAnimation(this, \"drawer.overlay.show\");\n      await Promise.all([\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n      ]);\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n\n      if (!this.contained) {\n        unlockBodyScrolling(this);\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, `drawer.hide${this.uppercaseFirstLetter(this.placement)}`);\n      const overlayAnimation = getAnimation(this, \"drawer.overlay.hide\");\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      await Promise.all([\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n          this.overlay.hidden = true;\n        }),\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n          this.panel.hidden = true;\n        })\n      ]);\n\n      this.drawer.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === \"function\") {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  @watch(\"contained\", { waitUntilFirstUpdate: true })\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      lockBodyScrolling(this);\n    }\n\n    if (this.open && this.contained) {\n      unlockBodyScrolling(this);\n    }\n  }\n\n  /** Shows the drawer. */\n  public async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hides the drawer */\n  public async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  render() {\n    const isHydrated = this.hasUpdated;\n    const shouldHide = !this.open && !isHydrated;\n\n    return html`\n      <div\n        class=${classMap({\n          drawer: true,\n          \"drawer-top\": this.placement === \"top\",\n          \"drawer-end\": this.placement === \"end\",\n          \"drawer-bottom\": this.placement === \"bottom\",\n          \"drawer-start\": this.placement === \"start\",\n          \"drawer-contained\": this.contained,\n          \"drawer-fixed\": !this.contained\n        })}\n        ?hidden=${shouldHide}\n      >\n        <div class=\"drawer-overlay\" @click=${() => this.requestClose(\"overlay\")} tabindex=\"-1\"></div>\n\n        <div\n          class=\"drawer-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          tabindex=\"0\"\n        >\n          <header class=\"drawer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n            <sgds-close-button\n              class=\"drawer-close\"\n              aria-label=\"close drawer\"\n              @click=\"${() => this.requestClose(\"close-button\")}\"\n            ></sgds-close-button>\n          </header>\n          <slot class=\"drawer-body\"></slot>\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\n// Top\nsetDefaultAnimation(\"drawer.showTop\", {\n  keyframes: [\n    { opacity: 0, translate: \"0 -100%\" },\n    { opacity: 1, translate: \"0 0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideTop\", {\n  keyframes: [\n    { opacity: 1, translate: \"0 0\" },\n    { opacity: 0, translate: \"0 -100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// End\nsetDefaultAnimation(\"drawer.showEnd\", {\n  keyframes: [\n    { opacity: 0, translate: \"100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: \"-100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideEnd\", {\n  keyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"100%\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"-100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Bottom\nsetDefaultAnimation(\"drawer.showBottom\", {\n  keyframes: [\n    { opacity: 0, translate: \"0 100%\" },\n    { opacity: 1, translate: \"0 0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideBottom\", {\n  keyframes: [\n    { opacity: 1, translate: \"0 0\" },\n    { opacity: 0, translate: \"0 100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Start\nsetDefaultAnimation(\"drawer.showStart\", {\n  keyframes: [\n    { opacity: 0, translate: \"-100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: \"100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideStart\", {\n  keyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"-100%\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Deny close\nsetDefaultAnimation(\"drawer.denyClose\", {\n  keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n  options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation(\"drawer.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation(\"drawer.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 }\n});\n\nexport default SgdsDrawer;\n"],"names":["drawerStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-drawer.js","sources":["../../../../src/components/Drawer/sgds-drawer.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, stopAnimations } from \"../../utils/animate.js\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry.js\";\nimport { waitForEvent } from \"../../utils/event.js\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll.js\";\nimport { watch } from \"../../utils/watch.js\";\nimport drawerStyles from \"./drawer.css\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n *\n * @slot default - The drawer's main content\n * @slot title - The title of the drawer\n * @slot description - The description of the drawer\n * @slot footer - The footer of the drawer\n *\n * @event sgds-show - Emitted when the drawer opens.\n * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sgds-hide - Emitted when the drawer closes.\n * @event sgds-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sgds-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sgds-request-close - Emitted when the user attempts to\n *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n *   destructive behavior such as data loss.\n *\n */\nexport class SgdsDrawer extends SgdsElement {\n  static styles = [...SgdsElement.styles, drawerStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n\n  /** @internal */\n  private originalTrigger: HTMLElement | null;\n  /** @internal */\n  @query(\".drawer\") drawer: HTMLElement;\n  /** @internal */\n  @query(\".drawer-panel\") panel: HTMLElement;\n  /** @internal */\n  @query(\".drawer-overlay\") overlay: HTMLElement;\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Defines the size of the drawer panel.\n   * For drawers placed on the left or right (`start`/`end`), this controls the drawer's width.\n   * For drawers placed on the top or bottom, this controls the drawer's height.\n   * Accepts `small`, `medium`, or `large`. Defaults to `small`.\n   */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n\n  /** The direction from which the drawer will open. */\n  @property({ type: String, reflect: true }) placement: \"top\" | \"end\" | \"bottom\" | \"start\" = \"end\";\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @property({ type: Boolean, reflect: true }) contained = false;\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    unlockBodyScrolling(this);\n  }\n\n  private uppercaseFirstLetter(string: string) {\n    return string.charAt(0).toUpperCase() + string.slice(1);\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const slRequestClose = this.emit(\"sgds-request-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (slRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"drawer.denyClose\");\n      animateTo(this.panel, animation.keyframes, animation.options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  private addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (this.open && !this.contained && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  };\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit(\"sgds-show\");\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      //\n      // Related: https://github.com/shoelace-style/shoelace/issues/693\n      //\n      const autoFocusTarget = this.querySelector(\"[autofocus]\");\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute(\"autofocus\");\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const slInitialFocus = this.emit(\"sgds-initial-focus\", { cancelable: true });\n\n        if (!slInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute(\"autofocus\", \"\");\n        }\n      });\n\n      const panelAnimation = getAnimation(this, `drawer.show${this.uppercaseFirstLetter(this.placement)}`);\n      const overlayAnimation = getAnimation(this, \"drawer.overlay.show\");\n      await Promise.all([\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n      ]);\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n\n      if (!this.contained) {\n        unlockBodyScrolling(this);\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, `drawer.hide${this.uppercaseFirstLetter(this.placement)}`);\n      const overlayAnimation = getAnimation(this, \"drawer.overlay.hide\");\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      await Promise.all([\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n          this.overlay.hidden = true;\n        }),\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n          this.panel.hidden = true;\n        })\n      ]);\n\n      this.drawer.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === \"function\") {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  @watch(\"contained\", { waitUntilFirstUpdate: true })\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      lockBodyScrolling(this);\n    }\n\n    if (this.open && this.contained) {\n      unlockBodyScrolling(this);\n    }\n  }\n\n  /** Shows the drawer. */\n  public async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hides the drawer */\n  public async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  render() {\n    const isHydrated = this.hasUpdated;\n    const shouldHide = !this.open && !isHydrated;\n\n    return html`\n      <div\n        class=${classMap({\n          drawer: true,\n          \"drawer-top\": this.placement === \"top\",\n          \"drawer-end\": this.placement === \"end\",\n          \"drawer-bottom\": this.placement === \"bottom\",\n          \"drawer-start\": this.placement === \"start\",\n          \"drawer-contained\": this.contained,\n          \"drawer-fixed\": !this.contained\n        })}\n        ?hidden=${shouldHide}\n      >\n        <div class=\"drawer-overlay\" @click=${() => this.requestClose(\"overlay\")} tabindex=\"-1\"></div>\n\n        <div\n          class=\"drawer-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          tabindex=\"0\"\n        >\n          <div class=\"drawer-close-wrapper\">\n            <sgds-close-button\n              class=\"drawer-close\"\n              aria-label=\"close drawer\"\n              @click=\"${() => this.requestClose(\"close-button\")}\"\n            ></sgds-close-button>\n          </div>\n          <div class=\"drawer-header_and_body\">\n            <div class=\"drawer-header\">\n              <slot name=\"title\"></slot>\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div>\n            <slot class=\"drawer-body\"></slot>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\n// Top\nsetDefaultAnimation(\"drawer.showTop\", {\n  keyframes: [\n    { opacity: 0, translate: \"0 -100%\" },\n    { opacity: 1, translate: \"0 0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideTop\", {\n  keyframes: [\n    { opacity: 1, translate: \"0 0\" },\n    { opacity: 0, translate: \"0 -100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// End\nsetDefaultAnimation(\"drawer.showEnd\", {\n  keyframes: [\n    { opacity: 0, translate: \"100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: \"-100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideEnd\", {\n  keyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"100%\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"-100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Bottom\nsetDefaultAnimation(\"drawer.showBottom\", {\n  keyframes: [\n    { opacity: 0, translate: \"0 100%\" },\n    { opacity: 1, translate: \"0 0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideBottom\", {\n  keyframes: [\n    { opacity: 1, translate: \"0 0\" },\n    { opacity: 0, translate: \"0 100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Start\nsetDefaultAnimation(\"drawer.showStart\", {\n  keyframes: [\n    { opacity: 0, translate: \"-100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: \"100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideStart\", {\n  keyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"-100%\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Deny close\nsetDefaultAnimation(\"drawer.denyClose\", {\n  keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n  options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation(\"drawer.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation(\"drawer.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 }\n});\n\nexport default SgdsDrawer;\n"],"names":["drawerStyles"],"mappings":"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"}

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

@@ -35,7 +35,7 @@ class SgdsMasthead extends sgdsElement["default"] {
     }
     render() {
         return lit.html `
-      <div id="sgds-masthead" class="sgds-masthead" aria-label="A Singapore Government Agency Website" role="banner">
+      <div id="sgds-masthead" class="sgds-masthead">
         <div class="banner">
           <div class="container">
             <div class="masthead-layout">

package/react/components/Masthead/sgds-masthead.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-masthead.cjs.js","sources":["../../../../src/components/Masthead/sgds-masthead.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mastheadStyle from \"./masthead.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport anchorStyles from \"../../styles/anchor.css\";\n\n/**\n * @summary All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.\n */\nexport class SgdsMasthead extends SgdsElement {\n  static styles = [...SgdsElement.styles, svgStyles, anchorStyles, mastheadStyle];\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  /** @internal */\n  @state()\n  toggleVisibility = false;\n\n  /** @internal */\n  private _handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      this._toggleVisibility();\n    }\n  }\n\n  /** @internal */\n  private _toggleVisibility() {\n    this.toggleVisibility = !this.toggleVisibility;\n  }\n\n  render() {\n    return html`\n      <div id=\"sgds-masthead\" class=\"sgds-masthead\" aria-label=\"A Singapore Government Agency Website\" role=\"banner\">\n        <div class=\"banner\">\n          <div class=\"container\">\n            <div class=\"masthead-layout\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"20\"\n                height=\"20\"\n                class=\"sg-crest\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n              >\n                <path\n                  d=\"M4.31179 7.0109C4.31179 7.0109 3.78527 7.78129 4.4749 8.77746C4.4749 8.77746 4.58365 8.27018 5.67275 8.27018H6.97989C8.21435 8.27018 9.13979 7.04881 8.55889 5.78895C8.55889 5.78895 9.42995 5.88317 9.72123 5.31901C10.0114 4.75544 9.70292 4.52966 9.26739 4.52966H7.07088C7.07088 4.9341 6.32687 4.9904 6.32687 4.52966H5.09241C5.09241 4.52966 4.16643 4.52966 4.14867 5.33797C4.14867 5.33797 4.35784 5.20641 4.56589 5.18803V5.40346C4.56589 5.40346 4.31179 5.45057 4.19361 5.51664C4.07599 5.58213 3.90344 5.7608 4.06711 6.22154C4.23023 6.68171 4.29403 6.84142 4.29403 6.84142C4.29403 6.84142 4.55757 6.60588 4.98422 6.60588H5.48356C6.37237 6.60588 6.20925 7.49864 5.31989 7.49864C4.43052 7.49864 4.3129 7.01032 4.3129 7.01032L4.31179 7.0109Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M8.94948 6.0808C8.94948 6.0808 9.24908 6.09976 9.46657 5.90271C9.46657 5.90271 11.4362 7.49118 8.51395 10.6859C5.59118 13.8813 7.85094 15.9494 7.85094 15.9494C7.85094 15.9494 7.32498 16.4751 7.62402 17.5C7.62402 17.5 6.40843 16.7894 5.47856 15.5823C4.13479 13.8382 3.31367 11.1697 7.00374 9.04116C7.00374 9.04116 9.43938 7.77268 8.94948 6.0808Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M5.93914 4.22922C5.93914 4.22922 6.33251 3.50249 7.24573 3.50249C7.96588 3.50249 8.13011 3.11988 8.13011 3.11988C8.13011 3.11988 8.44413 2.5 10.0298 2.5C11.4829 2.5 12.4621 3.00153 13.2544 3.67139C13.2544 3.67139 11.1183 2.2995 9.01282 4.22922H5.93914Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M14.8217 8.828C14.7612 6.5599 13.0668 4.12922 9.42448 4.2671C12.9825 1.14703 19.1543 8.11333 14.0711 11.7734C14.0711 11.7734 14.9216 10.517 14.8217 8.828Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M9.96927 4.51761C14.4106 4.37973 15.9962 9.89315 13.1278 12.3744L10.2478 13.8158C10.2478 13.8158 9.87273 12.5628 11.2648 11.0961C12.6568 9.6306 13.9994 6.88625 10.1518 5.08177C10.1518 5.08177 10.2245 4.70605 9.97038 4.51819L9.96927 4.51761Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M9.73904 5.75795C9.73904 5.75795 9.95708 5.54481 10.0298 5.36959C13.3331 6.79778 12.8133 9.21697 10.8403 11.2467C9.63029 12.537 10.0053 13.9284 10.0053 13.9284C10.0053 13.9284 8.52954 14.8803 8.02078 15.7076C8.02078 15.7076 5.88363 13.8233 8.84357 10.6957C11.748 7.62563 9.73904 5.75795 9.73904 5.75795Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              <div class=\"masthead-text-layout\">\n                <span>A Singapore Government Agency Website</span>\n                <div\n                  class=\"sgds-masthead-button\"\n                  id=\"sgds-masthead-identify\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-expanded=\"${this.toggleVisibility}\"\n                  aria-controls=\"sgds-masthead-content\"\n                  @keydown=${this._handleKeydown}\n                  @click=${this._toggleVisibility}\n                >\n                  <span>How to identify</span>\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M9.64645 7.14645C9.84171 6.95118 10.1583 6.95118 10.3536 7.14645L15.3536 12.1464C15.5488 12.3417 15.5488 12.6583 15.3536 12.8536C15.1583 13.0488 14.8417 13.0488 14.6464 12.8536L10 8.20711L5.35355 12.8536C5.15829 13.0488 4.84171 13.0488 4.64645 12.8536C4.45118 12.6583 4.45118 12.3417 4.64645 12.1464L9.64645 7.14645Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"panel\">\n          <div\n            id=\"sgds-masthead-content\"\n            class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n          >\n            <div class=\"content-grid\">\n              <div class=\"wrapper\">\n                <div class=\"icon\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    class=\"banner-icon\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n                <div class=\"content\">\n                  <div class=\"title\">Official website links end with .gov.sg</div>\n                  <article>Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).</article>\n                  <a\n                    href=\"https://www.gov.sg/trusted-sites#govsites\"\n                    class=\"trusted-websites-link\"\n                    rel=\"noreferrer\"\n                    target=\"_blank\"\n                    >Trusted websites</a\n                  >\n                </div>\n              </div>\n              <div class=\"wrapper\">\n                <div class=\"icon\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    class=\"banner-icon\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n                <div class=\"content\">\n                  <div class=\"title\">Secure websites use HTTPS</div>\n                  <article>\n                    Look for a lock (<svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"20\"\n                      height=\"20\"\n                      viewBox=\"0 0 20 20\"\n                      fill=\"none\"\n                      class=\"banner-icon-inline\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        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\"\n                        fill=\"currentColor\"\n                      /></svg\n                    >) or https:// as an added precaution. Share sensitive information only on official, secure\n                    websites.\n                  </article>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsMasthead;\n"],"names":["SgdsElement","html","svgStyles","anchorStyles","mastheadStyle","__decorate","property","state"],"mappings":";;;;;;;;;;;;;AAOA;;AAEG;AACG,MAAO,YAAa,SAAQA,sBAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QAKE,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;;QAId,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;KA0K1B;;AAvKS,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;;IAGO,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CoB,iCAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;;AAE3B,2BAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AACrB,yBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;;;yDASQ,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,GAAG,MAAM,CAAA;;;;;;;;;;;;;;;;;;qDAkB1C,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6ErF,CAAC;KACH;;AAjLM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,cAAS,EAAEC,iBAAY,EAAEC,mBAAa,CAAC,CAAC;AAIhFC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC7B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIdD,gBAAA,CAAA;AADC,IAAAE,mBAAK,EAAE;AACiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-masthead.cjs.js","sources":["../../../../src/components/Masthead/sgds-masthead.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mastheadStyle from \"./masthead.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport anchorStyles from \"../../styles/anchor.css\";\n\n/**\n * @summary All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.\n */\nexport class SgdsMasthead extends SgdsElement {\n  static styles = [...SgdsElement.styles, svgStyles, anchorStyles, mastheadStyle];\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  /** @internal */\n  @state()\n  toggleVisibility = false;\n\n  /** @internal */\n  private _handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      this._toggleVisibility();\n    }\n  }\n\n  /** @internal */\n  private _toggleVisibility() {\n    this.toggleVisibility = !this.toggleVisibility;\n  }\n\n  render() {\n    return html`\n      <div id=\"sgds-masthead\" class=\"sgds-masthead\">\n        <div class=\"banner\">\n          <div class=\"container\">\n            <div class=\"masthead-layout\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"20\"\n                height=\"20\"\n                class=\"sg-crest\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n              >\n                <path\n                  d=\"M4.31179 7.0109C4.31179 7.0109 3.78527 7.78129 4.4749 8.77746C4.4749 8.77746 4.58365 8.27018 5.67275 8.27018H6.97989C8.21435 8.27018 9.13979 7.04881 8.55889 5.78895C8.55889 5.78895 9.42995 5.88317 9.72123 5.31901C10.0114 4.75544 9.70292 4.52966 9.26739 4.52966H7.07088C7.07088 4.9341 6.32687 4.9904 6.32687 4.52966H5.09241C5.09241 4.52966 4.16643 4.52966 4.14867 5.33797C4.14867 5.33797 4.35784 5.20641 4.56589 5.18803V5.40346C4.56589 5.40346 4.31179 5.45057 4.19361 5.51664C4.07599 5.58213 3.90344 5.7608 4.06711 6.22154C4.23023 6.68171 4.29403 6.84142 4.29403 6.84142C4.29403 6.84142 4.55757 6.60588 4.98422 6.60588H5.48356C6.37237 6.60588 6.20925 7.49864 5.31989 7.49864C4.43052 7.49864 4.3129 7.01032 4.3129 7.01032L4.31179 7.0109Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M8.94948 6.0808C8.94948 6.0808 9.24908 6.09976 9.46657 5.90271C9.46657 5.90271 11.4362 7.49118 8.51395 10.6859C5.59118 13.8813 7.85094 15.9494 7.85094 15.9494C7.85094 15.9494 7.32498 16.4751 7.62402 17.5C7.62402 17.5 6.40843 16.7894 5.47856 15.5823C4.13479 13.8382 3.31367 11.1697 7.00374 9.04116C7.00374 9.04116 9.43938 7.77268 8.94948 6.0808Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M5.93914 4.22922C5.93914 4.22922 6.33251 3.50249 7.24573 3.50249C7.96588 3.50249 8.13011 3.11988 8.13011 3.11988C8.13011 3.11988 8.44413 2.5 10.0298 2.5C11.4829 2.5 12.4621 3.00153 13.2544 3.67139C13.2544 3.67139 11.1183 2.2995 9.01282 4.22922H5.93914Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M14.8217 8.828C14.7612 6.5599 13.0668 4.12922 9.42448 4.2671C12.9825 1.14703 19.1543 8.11333 14.0711 11.7734C14.0711 11.7734 14.9216 10.517 14.8217 8.828Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M9.96927 4.51761C14.4106 4.37973 15.9962 9.89315 13.1278 12.3744L10.2478 13.8158C10.2478 13.8158 9.87273 12.5628 11.2648 11.0961C12.6568 9.6306 13.9994 6.88625 10.1518 5.08177C10.1518 5.08177 10.2245 4.70605 9.97038 4.51819L9.96927 4.51761Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M9.73904 5.75795C9.73904 5.75795 9.95708 5.54481 10.0298 5.36959C13.3331 6.79778 12.8133 9.21697 10.8403 11.2467C9.63029 12.537 10.0053 13.9284 10.0053 13.9284C10.0053 13.9284 8.52954 14.8803 8.02078 15.7076C8.02078 15.7076 5.88363 13.8233 8.84357 10.6957C11.748 7.62563 9.73904 5.75795 9.73904 5.75795Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              <div class=\"masthead-text-layout\">\n                <span>A Singapore Government Agency Website</span>\n                <div\n                  class=\"sgds-masthead-button\"\n                  id=\"sgds-masthead-identify\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-expanded=\"${this.toggleVisibility}\"\n                  aria-controls=\"sgds-masthead-content\"\n                  @keydown=${this._handleKeydown}\n                  @click=${this._toggleVisibility}\n                >\n                  <span>How to identify</span>\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M9.64645 7.14645C9.84171 6.95118 10.1583 6.95118 10.3536 7.14645L15.3536 12.1464C15.5488 12.3417 15.5488 12.6583 15.3536 12.8536C15.1583 13.0488 14.8417 13.0488 14.6464 12.8536L10 8.20711L5.35355 12.8536C5.15829 13.0488 4.84171 13.0488 4.64645 12.8536C4.45118 12.6583 4.45118 12.3417 4.64645 12.1464L9.64645 7.14645Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"panel\">\n          <div\n            id=\"sgds-masthead-content\"\n            class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n          >\n            <div class=\"content-grid\">\n              <div class=\"wrapper\">\n                <div class=\"icon\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    class=\"banner-icon\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n                <div class=\"content\">\n                  <div class=\"title\">Official website links end with .gov.sg</div>\n                  <article>Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).</article>\n                  <a\n                    href=\"https://www.gov.sg/trusted-sites#govsites\"\n                    class=\"trusted-websites-link\"\n                    rel=\"noreferrer\"\n                    target=\"_blank\"\n                    >Trusted websites</a\n                  >\n                </div>\n              </div>\n              <div class=\"wrapper\">\n                <div class=\"icon\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    class=\"banner-icon\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n                <div class=\"content\">\n                  <div class=\"title\">Secure websites use HTTPS</div>\n                  <article>\n                    Look for a lock (<svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"20\"\n                      height=\"20\"\n                      viewBox=\"0 0 20 20\"\n                      fill=\"none\"\n                      class=\"banner-icon-inline\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        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\"\n                        fill=\"currentColor\"\n                      /></svg\n                    >) or https:// as an added precaution. Share sensitive information only on official, secure\n                    websites.\n                  </article>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsMasthead;\n"],"names":["SgdsElement","html","svgStyles","anchorStyles","mastheadStyle","__decorate","property","state"],"mappings":";;;;;;;;;;;;;AAOA;;AAEG;AACG,MAAO,YAAa,SAAQA,sBAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QAKE,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;;QAId,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;KA0K1B;;AAvKS,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;;IAGO,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CoB,iCAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;;AAE3B,2BAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AACrB,yBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;;;yDASQ,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,GAAG,MAAM,CAAA;;;;;;;;;;;;;;;;;;qDAkB1C,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6ErF,CAAC;KACH;;AAjLM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,cAAS,EAAEC,iBAAY,EAAEC,mBAAa,CAAC,CAAC;AAIhFC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC7B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIdD,gBAAA,CAAA;AADC,IAAAE,mBAAK,EAAE;AACiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Masthead/sgds-masthead.js

@@ -31,7 +31,7 @@ class SgdsMasthead extends SgdsElement {
     }
     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">
         <div class="banner">
           <div class="container">
             <div class="masthead-layout">

package/react/components/Masthead/sgds-masthead.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-masthead.js","sources":["../../../../src/components/Masthead/sgds-masthead.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mastheadStyle from \"./masthead.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport anchorStyles from \"../../styles/anchor.css\";\n\n/**\n * @summary All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.\n */\nexport class SgdsMasthead extends SgdsElement {\n  static styles = [...SgdsElement.styles, svgStyles, anchorStyles, mastheadStyle];\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  /** @internal */\n  @state()\n  toggleVisibility = false;\n\n  /** @internal */\n  private _handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      this._toggleVisibility();\n    }\n  }\n\n  /** @internal */\n  private _toggleVisibility() {\n    this.toggleVisibility = !this.toggleVisibility;\n  }\n\n  render() {\n    return html`\n      <div id=\"sgds-masthead\" class=\"sgds-masthead\" aria-label=\"A Singapore Government Agency Website\" role=\"banner\">\n        <div class=\"banner\">\n          <div class=\"container\">\n            <div class=\"masthead-layout\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"20\"\n                height=\"20\"\n                class=\"sg-crest\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n              >\n                <path\n                  d=\"M4.31179 7.0109C4.31179 7.0109 3.78527 7.78129 4.4749 8.77746C4.4749 8.77746 4.58365 8.27018 5.67275 8.27018H6.97989C8.21435 8.27018 9.13979 7.04881 8.55889 5.78895C8.55889 5.78895 9.42995 5.88317 9.72123 5.31901C10.0114 4.75544 9.70292 4.52966 9.26739 4.52966H7.07088C7.07088 4.9341 6.32687 4.9904 6.32687 4.52966H5.09241C5.09241 4.52966 4.16643 4.52966 4.14867 5.33797C4.14867 5.33797 4.35784 5.20641 4.56589 5.18803V5.40346C4.56589 5.40346 4.31179 5.45057 4.19361 5.51664C4.07599 5.58213 3.90344 5.7608 4.06711 6.22154C4.23023 6.68171 4.29403 6.84142 4.29403 6.84142C4.29403 6.84142 4.55757 6.60588 4.98422 6.60588H5.48356C6.37237 6.60588 6.20925 7.49864 5.31989 7.49864C4.43052 7.49864 4.3129 7.01032 4.3129 7.01032L4.31179 7.0109Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M8.94948 6.0808C8.94948 6.0808 9.24908 6.09976 9.46657 5.90271C9.46657 5.90271 11.4362 7.49118 8.51395 10.6859C5.59118 13.8813 7.85094 15.9494 7.85094 15.9494C7.85094 15.9494 7.32498 16.4751 7.62402 17.5C7.62402 17.5 6.40843 16.7894 5.47856 15.5823C4.13479 13.8382 3.31367 11.1697 7.00374 9.04116C7.00374 9.04116 9.43938 7.77268 8.94948 6.0808Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M5.93914 4.22922C5.93914 4.22922 6.33251 3.50249 7.24573 3.50249C7.96588 3.50249 8.13011 3.11988 8.13011 3.11988C8.13011 3.11988 8.44413 2.5 10.0298 2.5C11.4829 2.5 12.4621 3.00153 13.2544 3.67139C13.2544 3.67139 11.1183 2.2995 9.01282 4.22922H5.93914Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M14.8217 8.828C14.7612 6.5599 13.0668 4.12922 9.42448 4.2671C12.9825 1.14703 19.1543 8.11333 14.0711 11.7734C14.0711 11.7734 14.9216 10.517 14.8217 8.828Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M9.96927 4.51761C14.4106 4.37973 15.9962 9.89315 13.1278 12.3744L10.2478 13.8158C10.2478 13.8158 9.87273 12.5628 11.2648 11.0961C12.6568 9.6306 13.9994 6.88625 10.1518 5.08177C10.1518 5.08177 10.2245 4.70605 9.97038 4.51819L9.96927 4.51761Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M9.73904 5.75795C9.73904 5.75795 9.95708 5.54481 10.0298 5.36959C13.3331 6.79778 12.8133 9.21697 10.8403 11.2467C9.63029 12.537 10.0053 13.9284 10.0053 13.9284C10.0053 13.9284 8.52954 14.8803 8.02078 15.7076C8.02078 15.7076 5.88363 13.8233 8.84357 10.6957C11.748 7.62563 9.73904 5.75795 9.73904 5.75795Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              <div class=\"masthead-text-layout\">\n                <span>A Singapore Government Agency Website</span>\n                <div\n                  class=\"sgds-masthead-button\"\n                  id=\"sgds-masthead-identify\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-expanded=\"${this.toggleVisibility}\"\n                  aria-controls=\"sgds-masthead-content\"\n                  @keydown=${this._handleKeydown}\n                  @click=${this._toggleVisibility}\n                >\n                  <span>How to identify</span>\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M9.64645 7.14645C9.84171 6.95118 10.1583 6.95118 10.3536 7.14645L15.3536 12.1464C15.5488 12.3417 15.5488 12.6583 15.3536 12.8536C15.1583 13.0488 14.8417 13.0488 14.6464 12.8536L10 8.20711L5.35355 12.8536C5.15829 13.0488 4.84171 13.0488 4.64645 12.8536C4.45118 12.6583 4.45118 12.3417 4.64645 12.1464L9.64645 7.14645Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"panel\">\n          <div\n            id=\"sgds-masthead-content\"\n            class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n          >\n            <div class=\"content-grid\">\n              <div class=\"wrapper\">\n                <div class=\"icon\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    class=\"banner-icon\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n                <div class=\"content\">\n                  <div class=\"title\">Official website links end with .gov.sg</div>\n                  <article>Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).</article>\n                  <a\n                    href=\"https://www.gov.sg/trusted-sites#govsites\"\n                    class=\"trusted-websites-link\"\n                    rel=\"noreferrer\"\n                    target=\"_blank\"\n                    >Trusted websites</a\n                  >\n                </div>\n              </div>\n              <div class=\"wrapper\">\n                <div class=\"icon\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    class=\"banner-icon\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n                <div class=\"content\">\n                  <div class=\"title\">Secure websites use HTTPS</div>\n                  <article>\n                    Look for a lock (<svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"20\"\n                      height=\"20\"\n                      viewBox=\"0 0 20 20\"\n                      fill=\"none\"\n                      class=\"banner-icon-inline\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        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\"\n                        fill=\"currentColor\"\n                      /></svg\n                    >) or https:// as an added precaution. Share sensitive information only on official, secure\n                    websites.\n                  </article>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsMasthead;\n"],"names":["svgStyles","anchorStyles","mastheadStyle"],"mappings":";;;;;;;;;AAOA;;AAEG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QAKE,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;;QAId,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;KA0K1B;;AAvKS,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;;IAGO,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CoB,iCAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;;AAE3B,2BAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AACrB,yBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;;;yDASQ,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,GAAG,MAAM,CAAA;;;;;;;;;;;;;;;;;;qDAkB1C,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6ErF,CAAC;KACH;;AAjLM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,EAAEC,UAAY,EAAEC,UAAa,CAAC,CAAC;AAIhF,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC7B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAId,UAAA,CAAA;AADC,IAAA,KAAK,EAAE;AACiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-masthead.js","sources":["../../../../src/components/Masthead/sgds-masthead.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mastheadStyle from \"./masthead.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport anchorStyles from \"../../styles/anchor.css\";\n\n/**\n * @summary All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.\n */\nexport class SgdsMasthead extends SgdsElement {\n  static styles = [...SgdsElement.styles, svgStyles, anchorStyles, mastheadStyle];\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  /** @internal */\n  @state()\n  toggleVisibility = false;\n\n  /** @internal */\n  private _handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      this._toggleVisibility();\n    }\n  }\n\n  /** @internal */\n  private _toggleVisibility() {\n    this.toggleVisibility = !this.toggleVisibility;\n  }\n\n  render() {\n    return html`\n      <div id=\"sgds-masthead\" class=\"sgds-masthead\">\n        <div class=\"banner\">\n          <div class=\"container\">\n            <div class=\"masthead-layout\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"20\"\n                height=\"20\"\n                class=\"sg-crest\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n              >\n                <path\n                  d=\"M4.31179 7.0109C4.31179 7.0109 3.78527 7.78129 4.4749 8.77746C4.4749 8.77746 4.58365 8.27018 5.67275 8.27018H6.97989C8.21435 8.27018 9.13979 7.04881 8.55889 5.78895C8.55889 5.78895 9.42995 5.88317 9.72123 5.31901C10.0114 4.75544 9.70292 4.52966 9.26739 4.52966H7.07088C7.07088 4.9341 6.32687 4.9904 6.32687 4.52966H5.09241C5.09241 4.52966 4.16643 4.52966 4.14867 5.33797C4.14867 5.33797 4.35784 5.20641 4.56589 5.18803V5.40346C4.56589 5.40346 4.31179 5.45057 4.19361 5.51664C4.07599 5.58213 3.90344 5.7608 4.06711 6.22154C4.23023 6.68171 4.29403 6.84142 4.29403 6.84142C4.29403 6.84142 4.55757 6.60588 4.98422 6.60588H5.48356C6.37237 6.60588 6.20925 7.49864 5.31989 7.49864C4.43052 7.49864 4.3129 7.01032 4.3129 7.01032L4.31179 7.0109Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M8.94948 6.0808C8.94948 6.0808 9.24908 6.09976 9.46657 5.90271C9.46657 5.90271 11.4362 7.49118 8.51395 10.6859C5.59118 13.8813 7.85094 15.9494 7.85094 15.9494C7.85094 15.9494 7.32498 16.4751 7.62402 17.5C7.62402 17.5 6.40843 16.7894 5.47856 15.5823C4.13479 13.8382 3.31367 11.1697 7.00374 9.04116C7.00374 9.04116 9.43938 7.77268 8.94948 6.0808Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M5.93914 4.22922C5.93914 4.22922 6.33251 3.50249 7.24573 3.50249C7.96588 3.50249 8.13011 3.11988 8.13011 3.11988C8.13011 3.11988 8.44413 2.5 10.0298 2.5C11.4829 2.5 12.4621 3.00153 13.2544 3.67139C13.2544 3.67139 11.1183 2.2995 9.01282 4.22922H5.93914Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M14.8217 8.828C14.7612 6.5599 13.0668 4.12922 9.42448 4.2671C12.9825 1.14703 19.1543 8.11333 14.0711 11.7734C14.0711 11.7734 14.9216 10.517 14.8217 8.828Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M9.96927 4.51761C14.4106 4.37973 15.9962 9.89315 13.1278 12.3744L10.2478 13.8158C10.2478 13.8158 9.87273 12.5628 11.2648 11.0961C12.6568 9.6306 13.9994 6.88625 10.1518 5.08177C10.1518 5.08177 10.2245 4.70605 9.97038 4.51819L9.96927 4.51761Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M9.73904 5.75795C9.73904 5.75795 9.95708 5.54481 10.0298 5.36959C13.3331 6.79778 12.8133 9.21697 10.8403 11.2467C9.63029 12.537 10.0053 13.9284 10.0053 13.9284C10.0053 13.9284 8.52954 14.8803 8.02078 15.7076C8.02078 15.7076 5.88363 13.8233 8.84357 10.6957C11.748 7.62563 9.73904 5.75795 9.73904 5.75795Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              <div class=\"masthead-text-layout\">\n                <span>A Singapore Government Agency Website</span>\n                <div\n                  class=\"sgds-masthead-button\"\n                  id=\"sgds-masthead-identify\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-expanded=\"${this.toggleVisibility}\"\n                  aria-controls=\"sgds-masthead-content\"\n                  @keydown=${this._handleKeydown}\n                  @click=${this._toggleVisibility}\n                >\n                  <span>How to identify</span>\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M9.64645 7.14645C9.84171 6.95118 10.1583 6.95118 10.3536 7.14645L15.3536 12.1464C15.5488 12.3417 15.5488 12.6583 15.3536 12.8536C15.1583 13.0488 14.8417 13.0488 14.6464 12.8536L10 8.20711L5.35355 12.8536C5.15829 13.0488 4.84171 13.0488 4.64645 12.8536C4.45118 12.6583 4.45118 12.3417 4.64645 12.1464L9.64645 7.14645Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"panel\">\n          <div\n            id=\"sgds-masthead-content\"\n            class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n          >\n            <div class=\"content-grid\">\n              <div class=\"wrapper\">\n                <div class=\"icon\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    class=\"banner-icon\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n                <div class=\"content\">\n                  <div class=\"title\">Official website links end with .gov.sg</div>\n                  <article>Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).</article>\n                  <a\n                    href=\"https://www.gov.sg/trusted-sites#govsites\"\n                    class=\"trusted-websites-link\"\n                    rel=\"noreferrer\"\n                    target=\"_blank\"\n                    >Trusted websites</a\n                  >\n                </div>\n              </div>\n              <div class=\"wrapper\">\n                <div class=\"icon\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    class=\"banner-icon\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n                <div class=\"content\">\n                  <div class=\"title\">Secure websites use HTTPS</div>\n                  <article>\n                    Look for a lock (<svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"20\"\n                      height=\"20\"\n                      viewBox=\"0 0 20 20\"\n                      fill=\"none\"\n                      class=\"banner-icon-inline\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        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\"\n                        fill=\"currentColor\"\n                      /></svg\n                    >) or https:// as an added precaution. Share sensitive information only on official, secure\n                    websites.\n                  </article>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsMasthead;\n"],"names":["svgStyles","anchorStyles","mastheadStyle"],"mappings":";;;;;;;;;AAOA;;AAEG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QAKE,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;;QAId,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;KA0K1B;;AAvKS,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;;IAGO,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CoB,iCAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;;AAE3B,2BAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AACrB,yBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;;;yDASQ,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,GAAG,MAAM,CAAA;;;;;;;;;;;;;;;;;;qDAkB1C,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6ErF,CAAC;KACH;;AAjLM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,EAAEC,UAAY,EAAEC,UAAa,CAAC,CAAC;AAIhF,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC7B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAId,UAAA,CAAA;AADC,IAAA,KAAK,EAAE;AACiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/index.cjs.js

@@ -10,8 +10,8 @@ var index$3 = require('./alert/index.cjs.js');
 var index$4 = require('./badge/index.cjs.js');
 var index$5 = require('./breadcrumb-item/index.cjs.js');
 var index$6 = require('./breadcrumb/index.cjs.js');
-var index$7 = require('./button/index.cjs.js');
-var index$8 = require('./card/index.cjs.js');
+var index$7 = require('./card/index.cjs.js');
+var index$8 = require('./button/index.cjs.js');
 var index$9 = require('./checkbox-group/index.cjs.js');
 var index$a = require('./checkbox/index.cjs.js');
 var index$b = require('./close-button/index.cjs.js');
@@ -81,8 +81,8 @@ exports.SgdsAlert = index$3["default"];
 exports.SgdsBadge = index$4["default"];
 exports.SgdsBreadcrumbItem = index$5["default"];
 exports.SgdsBreadcrumb = index$6["default"];
-exports.SgdsButton = index$7["default"];
-exports.SgdsCard = index$8["default"];
+exports.SgdsCard = index$7["default"];
+exports.SgdsButton = index$8["default"];
 exports.SgdsCheckboxGroup = index$9["default"];
 exports.SgdsCheckbox = index$a["default"];
 exports.SgdsCloseButton = index$b["default"];

package/react/index.d.ts

@@ -5,8 +5,8 @@ export { default as SgdsAlert } from './alert';
 export { default as SgdsBadge } from './badge';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item';
 export { default as SgdsBreadcrumb } from './breadcrumb';
-export { default as SgdsButton } from './button';
 export { default as SgdsCard } from './card';
+export { default as SgdsButton } from './button';
 export { default as SgdsCheckboxGroup } from './checkbox-group';
 export { default as SgdsCheckbox } from './checkbox';
 export { default as SgdsCloseButton } from './close-button';

package/react/index.js

@@ -6,8 +6,8 @@ export { default as SgdsAlert } from './alert/index.js';
 export { default as SgdsBadge } from './badge/index.js';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
 export { default as SgdsBreadcrumb } from './breadcrumb/index.js';
-export { default as SgdsButton } from './button/index.js';
 export { default as SgdsCard } from './card/index.js';
+export { default as SgdsButton } from './button/index.js';
 export { default as SgdsCheckboxGroup } from './checkbox-group/index.js';
 export { default as SgdsCheckbox } from './checkbox/index.js';
 export { default as SgdsCloseButton } from './close-button/index.js';