@govtechsg/sgds-web-component 3.3.3-rc.2 → 3.4.0-rc.0

package/components/Drawer/sgds-drawer.d.ts

@@ -6,6 +6,7 @@ import SgdsCloseButton from "../../internals/CloseButton/sgds-close-button";
  * @slot default - The drawer's main content
  * @slot title - The title of the drawer
  * @slot description - The description of the drawer
+ * @slot footer - The footer of the drawer
  *
  * @event sgds-show - Emitted when the drawer opens.
  * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.
@@ -38,6 +39,13 @@ export declare class SgdsDrawer extends SgdsElement {
      * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
      */
     open: boolean;
+    /**
+     * Defines the size of the drawer panel.
+     * For drawers placed on the left or right (`start`/`end`), this controls the drawer's width.
+     * For drawers placed on the top or bottom, this controls the drawer's height.
+     * Accepts `small`, `medium`, or `large`. Defaults to `small`.
+     */
+    size: "sm" | "md" | "lg";
     /** The direction from which the drawer will open. */
     placement: "top" | "end" | "bottom" | "start";
     /**
@@ -45,8 +53,11 @@ export declare class SgdsDrawer extends SgdsElement {
      * its parent element, set this attribute and add `position: relative` to the parent.
      */
     contained: boolean;
+    private drawerPlacement;
     firstUpdated(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
+    private _handleResize;
     private uppercaseFirstLetter;
     private requestClose;
     private addOpenListeners;

package/components/Drawer/sgds-drawer.js

@@ -1,12 +1,13 @@
 import { __decorate } from 'tslib';
 import { html } from 'lit';
-import { query, property } from 'lit/decorators.js';
+import { query, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { animateTo, stopAnimations } from '../../utils/animate.js';
 import { setDefaultAnimation, getAnimation } from '../../utils/animation-registry.js';
 import { waitForEvent } from '../../utils/event.js';
 import { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll.js';
+import { SM_BREAKPOINT } from '../../utils/breakpoints.js';
 import { watch } from '../../utils/watch.js';
 import css_248z from './drawer.js';
 import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.js';
@@ -17,6 +18,7 @@ import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.j
  * @slot default - The drawer's main content
  * @slot title - The title of the drawer
  * @slot description - The description of the drawer
+ * @slot footer - The footer of the drawer
  *
  * @event sgds-show - Emitted when the drawer opens.
  * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.
@@ -38,6 +40,13 @@ class SgdsDrawer extends SgdsElement {
          * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
          */
         this.open = false;
+        /**
+         * Defines the size of the drawer panel.
+         * For drawers placed on the left or right (`start`/`end`), this controls the drawer's width.
+         * For drawers placed on the top or bottom, this controls the drawer's height.
+         * Accepts `small`, `medium`, or `large`. Defaults to `small`.
+         */
+        this.size = "sm";
         /** The direction from which the drawer will open. */
         this.placement = "end";
         /**
@@ -45,6 +54,10 @@ class SgdsDrawer extends SgdsElement {
          * its parent element, set this attribute and add `position: relative` to the parent.
          */
         this.contained = false;
+        this._handleResize = async () => {
+            const replacePlacement = this.drawerPlacement === "top" ? "top" : "bottom";
+            this.placement = window.innerWidth < SM_BREAKPOINT ? replacePlacement : this.drawerPlacement;
+        };
         this.handleDocumentKeyDown = (event) => {
             if (this.open && !this.contained && event.key === "Escape") {
                 event.stopPropagation();
@@ -60,10 +73,17 @@ class SgdsDrawer extends SgdsElement {
                 lockBodyScrolling(this);
             }
         }
+        this._handleResize();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.drawerPlacement = this.placement;
+        window.addEventListener("resize", this._handleResize);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         unlockBodyScrolling(this);
+        window.removeEventListener("resize", this._handleResize);
     }
     uppercaseFirstLetter(string) {
         return string.charAt(0).toUpperCase() + string.slice(1);
@@ -223,6 +243,7 @@ class SgdsDrawer extends SgdsElement {
             ></sgds-close-button>
           </header>
           <slot class="drawer-body"></slot>
+          <slot name="footer"></slot>
         </div>
       </div>
     `;
@@ -245,12 +266,18 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsDrawer.prototype, "open", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsDrawer.prototype, "size", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsDrawer.prototype, "placement", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsDrawer.prototype, "contained", void 0);
+__decorate([
+    state()
+], SgdsDrawer.prototype, "drawerPlacement", void 0);
 __decorate([
     watch("open", { waitUntilFirstUpdate: true })
 ], SgdsDrawer.prototype, "handleOpenChange", null);

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-drawer.js","sources":["../../../src/components/Drawer/sgds-drawer.ts"],"sourcesContent":["import { html } 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 \"../../internals/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 *\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  /** 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() {\n    this.drawer.hidden = !this.open;\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    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    return html`\n      <div\n        class=${classMap({\n          drawer: true,\n          \"drawer-open\": this.open,\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      >\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        </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 } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, 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 { SM_BREAKPOINT } from \"../../utils/breakpoints\";\nimport { watch } from \"../../utils/watch.js\";\nimport drawerStyles from \"./drawer.css\";\nimport SgdsCloseButton from \"../../internals/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  @state() private drawerPlacement: \"top\" | \"end\" | \"bottom\" | \"start\";\n\n  firstUpdated() {\n    this.drawer.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n    }\n\n    this._handleResize();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.drawerPlacement = this.placement;\n    window.addEventListener(\"resize\", this._handleResize);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    unlockBodyScrolling(this);\n    window.removeEventListener(\"resize\", this._handleResize);\n  }\n\n  private _handleResize = async () => {\n    const replacePlacement = this.drawerPlacement === \"top\" ? \"top\" : \"bottom\";\n    this.placement = window.innerWidth < SM_BREAKPOINT ? replacePlacement : this.drawerPlacement;\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    return html`\n      <div\n        class=${classMap({\n          drawer: true,\n          \"drawer-open\": this.open,\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      >\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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"}

package/components/IconCard/index.umd.js

@@ -4625,7 +4625,7 @@
       property({ type: String, reflect: true })
   ], SgdsLink.prototype, "variant", void 0);
 
-  var css_248z$6 = css`:host([disabled]){cursor:not-allowed}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-thumbnail{align-items:center;border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-full);display:flex;height:var(--sgds-dimension-80);justify-content:center;width:var(--sgds-dimension-80)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-default);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
+  var css_248z$6 = css`:host([disabled]){cursor:not-allowed}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
 
   var css_248z$5 = css`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;
 

package/components/ImageCard/index.umd.js

@@ -4625,7 +4625,7 @@
       property({ type: String, reflect: true })
   ], SgdsLink.prototype, "variant", void 0);
 
-  var css_248z$6 = css`:host([disabled]){cursor:not-allowed}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-thumbnail{align-items:center;border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-full);display:flex;height:var(--sgds-dimension-80);justify-content:center;width:var(--sgds-dimension-80)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-default);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
+  var css_248z$6 = css`:host([disabled]){cursor:not-allowed}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
 
   var css_248z$5 = css`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;
 

package/components/Mainnav/index.umd.js

@@ -7907,20 +7907,10 @@
       connectedCallback() {
           super.connectedCallback();
           this.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
-          this.addEventListener("sgds-mainnav-close", () => {
-              if (this.breakpointReached) {
-                  this.hide();
-              }
-          });
       }
       disconnectedCallback() {
           super.disconnectedCallback();
           this.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
-          this.removeEventListener("sgds-mainnav-close", () => {
-              if (this.breakpointReached) {
-                  this.hide();
-              }
-          });
       }
       firstUpdated() {
           if (this.breakpointReached && this.body) {
@@ -7947,7 +7937,6 @@
               document.querySelector("body").style.overflow = "hidden";
               this.show();
           }
-          this.header.focus();
       }
       async _handleMobileNav() {
           if (!this.nav)
@@ -7996,6 +7985,7 @@
               this._animateToShow();
           }
           else {
+              this.header.focus();
               // Hide
               this._animateToHide();
           }
@@ -8015,9 +8005,6 @@
           }
           this.expanded = false;
           document.querySelector("body").style.removeProperty("overflow");
-          setTimeout(() => {
-              this.emit("close-dropdown-menu");
-          }, 200);
           return waitForEvent(this, "sgds-after-hide");
       }
       // assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
@@ -12239,15 +12226,19 @@
       }
       connectedCallback() {
           super.connectedCallback();
-          document.addEventListener("close-dropdown-menu", () => {
-              this._resetDropdownMenu();
-              this._hideDropdownMenuItems();
+          document.addEventListener("sgds-after-hide", (e) => {
+              const target = e.target;
+              const mainnav = target.closest("sgds-mainnav");
+              if (mainnav) {
+                  this._resetDropdownMenu();
+                  this._hideDropdownMenuItems();
+              }
           });
       }
       disconnectedCallback() {
           super.disconnectedCallback();
           // Clean up the event listener when the element is removed from the DOM
-          document.removeEventListener("close-dropdown-menu", () => {
+          document.removeEventListener("sgds-after-hide", () => {
               this._resetDropdownMenu();
               this._hideDropdownMenuItems();
           });
@@ -12282,8 +12273,10 @@
                   link.setAttribute("tabindex", "-1");
               }
               else {
-                  link.addEventListener("click", () => {
-                      this.emit("sgds-mainnav-close");
+                  link.addEventListener("click", (e) => {
+                      const target = e.target;
+                      const mainnav = target.closest("sgds-mainnav");
+                      mainnav.hide();
                   });
               }
           });
@@ -12546,8 +12539,10 @@
                   anchor.setAttribute("tabindex", "-1");
                   return;
               }
-              anchor.addEventListener("click", () => {
-                  this.emit("sgds-mainnav-close");
+              anchor.addEventListener("click", (e) => {
+                  const target = e.target;
+                  const mainnav = target.closest("sgds-mainnav");
+                  mainnav.hide();
               });
           }
       }