@govtechsg/sgds-web-component 3.1.1 → 3.1.2

package/react/components/Modal/sgds-modal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-modal.cjs.js","sources":["../../../../src/components/Modal/sgds-modal.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 { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n *\n * @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n *\n * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n *\n */\nexport class SgdsModal extends SgdsElement {\n  static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n  /**@internal */\n  @query(\".modal\") dialog: HTMLElement;\n  /**@internal */\n  @query(\".modal-panel\") panel: HTMLElement;\n  /**@internal */\n  @query(\".modal-overlay\") overlay: HTMLElement;\n  /**@internal */\n  @query(\".modal-title\") heading: HTMLElement;\n  /**@internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /**@internal */\n  private modal: Modal;\n  /**@internal */\n  private originalTrigger: HTMLElement | null;\n  private _resizeHandler: () => void;\n\n  /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */\n  @property({ reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"fullscreen\" = \"md\";\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n    this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n  }\n\n  firstUpdated() {\n    this._onWindowResize();\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeResizeListener();\n    unlockBodyScrolling(this);\n  }\n\n  private _debounce(func: (...args: any[]) => void, wait: number) {\n    let timeout: number;\n    return (...args: any[]) => {\n      clearTimeout(timeout);\n      timeout = window.setTimeout(() => func(...args), wait);\n    };\n  }\n\n  /** Handle the window resize event. */\n  private _onWindowResize() {\n    const panel = this.panel.getBoundingClientRect();\n    const panelWidth = panel.width;\n    const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n    if (!this.panel) return;\n\n    if (buttonElements.length <= 1) return;\n\n    if (panelWidth <= 360) {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = true;\n      });\n    } else {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = false;\n      });\n    }\n  }\n\n  /**  Add the resize event listener. */\n  private _addResizeListener() {\n    window.addEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Remove the resize event listener. */\n  private _removeResizeListener() {\n    window.removeEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Shows the dialog. */\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 dialog */\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  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const sgdsRequestClose = this.emit(\"sgds-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (sgdsRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"modal.denyClose\");\n      animateTo(this.panel, animation.keyframes);\n      return;\n    }\n\n    this.hide();\n  }\n\n  addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  }\n\n  private _overlayClickHandler() {\n    if (this.size === \"fullscreen\") {\n      return;\n    }\n\n    this.requestClose(\"overlay\");\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      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      const panelAnimation = getAnimation(this, \"modal.show\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n      !this.noAnimation &&\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\n      // Add focus on modal heading after opening it\n      this.heading.focus();\n\n      // Add resize listener only when the modal is shown\n      this._addResizeListener();\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, \"modal.hide\");\n      const overlayAnimation = getAnimation(this, \"modal.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      !this.noAnimation &&\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.dialog.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      unlockBodyScrolling(this);\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      // Remove resize listener when the modal is hidden\n      this._removeResizeListener();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          modal: true,\n          show: this.open,\n          \"has-footer\": this.hasSlotController.test(\"footer\")\n        })}\n      >\n        <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n        <div\n          class=\"modal-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-labelledby=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"modal-header\">\n            <div class=\"modal-header__title-description\">\n              <slot class=\"modal-title\" id=\"title\" name=\"title\"></slot>\n              <slot name=\"description\"></slot>\n            </div>\n            <sgds-close-button\n              class=\"modal-header__close\"\n              @click=\"${() => this.requestClose(\"close-button\")}\"\n              ariaLabel=\"close modal\"\n            ></sgds-close-button>\n          </div>\n          <div class=\"modal-body\">\n            <slot></slot>\n          </div>\n          <div class=\"modal-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n  keyframes: [\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n    { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n  keyframes: [\n    { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n  keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"names":["SgdsElement","HasSlotController","Modal","lockBodyScrolling","unlockBodyScrolling","waitForEvent","getAnimation","animateTo","stopAnimations","html","classMap","headerStyles","svgStyles","modalStyle","SgdsCloseButton","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}
+{"version":3,"file":"sgds-modal.cjs.js","sources":["../../../../src/components/Modal/sgds-modal.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 { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\n/**\n * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n *\n * @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n *\n * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n *\n */\nexport class SgdsModal extends SgdsElement {\n  static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n  /**@internal */\n  @query(\".modal\") dialog: HTMLElement;\n  /**@internal */\n  @query(\".modal-panel\") panel: HTMLElement;\n  /**@internal */\n  @query(\".modal-overlay\") overlay: HTMLElement;\n  /**@internal */\n  @query(\".modal-title\") heading: HTMLElement;\n  /**@internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /**@internal */\n  private modal: Modal;\n  /**@internal */\n  private originalTrigger: HTMLElement | null;\n  private _resizeHandler: () => void;\n\n  /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */\n  @property({ reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"fullscreen\" = \"md\";\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n    this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n  }\n\n  firstUpdated() {\n    this._onWindowResize();\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeResizeListener();\n    unlockBodyScrolling(this);\n  }\n\n  private _debounce(func: (...args: any[]) => void, wait: number) {\n    let timeout: number;\n    return (...args: any[]) => {\n      clearTimeout(timeout);\n      timeout = window.setTimeout(() => func(...args), wait);\n    };\n  }\n\n  /** Handle the window resize event. */\n  private _onWindowResize() {\n    const panel = this.panel.getBoundingClientRect();\n    const panelWidth = panel.width;\n    const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n    if (!this.panel) return;\n\n    if (buttonElements.length <= 1) return;\n\n    if (panelWidth < SM_BREAKPOINT || (this.size === \"fullscreen\" && panelWidth < MD_BREAKPOINT)) {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = true;\n      });\n    } else {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = false;\n      });\n    }\n  }\n\n  /**  Add the resize event listener. */\n  private _addResizeListener() {\n    window.addEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Remove the resize event listener. */\n  private _removeResizeListener() {\n    window.removeEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Shows the dialog. */\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 dialog */\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  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const sgdsRequestClose = this.emit(\"sgds-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (sgdsRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"modal.denyClose\");\n      animateTo(this.panel, animation.keyframes);\n      return;\n    }\n\n    this.hide();\n  }\n\n  addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  }\n\n  private _overlayClickHandler() {\n    if (this.size === \"fullscreen\") {\n      return;\n    }\n\n    this.requestClose(\"overlay\");\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      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      const panelAnimation = getAnimation(this, \"modal.show\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n      !this.noAnimation &&\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\n      // Add focus on modal heading after opening it\n      this.heading.focus();\n\n      // Add resize listener only when the modal is shown\n      this._addResizeListener();\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, \"modal.hide\");\n      const overlayAnimation = getAnimation(this, \"modal.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      !this.noAnimation &&\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.dialog.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      unlockBodyScrolling(this);\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      // Remove resize listener when the modal is hidden\n      this._removeResizeListener();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          modal: true,\n          show: this.open,\n          \"has-footer\": this.hasSlotController.test(\"footer\")\n        })}\n      >\n        <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n        <div\n          class=\"modal-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-labelledby=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"modal-content\">\n            <div class=\"modal-header\">\n              <div class=\"modal-header__title-description\">\n                <slot class=\"modal-title\" id=\"title\" name=\"title\"></slot>\n                <slot name=\"description\"></slot>\n              </div>\n              <sgds-close-button\n                class=\"modal-header__close\"\n                @click=\"${() => this.requestClose(\"close-button\")}\"\n                ariaLabel=\"close modal\"\n              ></sgds-close-button>\n            </div>\n            <div class=\"modal-body\">\n              <slot></slot>\n            </div>\n          </div class=\"modal-content\">\n          <div class=\"modal-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n  keyframes: [\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n    { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n  keyframes: [\n    { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n  keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"names":["SgdsElement","HasSlotController","Modal","lockBodyScrolling","unlockBodyScrolling","SM_BREAKPOINT","MD_BREAKPOINT","waitForEvent","getAnimation","animateTo","stopAnimations","html","classMap","headerStyles","svgStyles","modalStyle","SgdsCloseButton","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}

package/react/components/Modal/sgds-modal.js

@@ -15,6 +15,7 @@ import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.j
 import css_248z$2 from './modal.js';
 import css_248z from '../../styles/header-class.js';
 import css_248z$1 from '../../styles/svg.js';
+import { SM_BREAKPOINT, MD_BREAKPOINT } from '../../utils/breakpoints.js';
 
 /**
  * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.
@@ -79,7 +80,7 @@ class SgdsModal extends SgdsElement {
             return;
         if (buttonElements.length <= 1)
             return;
-        if (panelWidth <= 360) {
+        if (panelWidth < SM_BREAKPOINT || (this.size === "fullscreen" && panelWidth < MD_BREAKPOINT)) {
             buttonElements.forEach(buttonElement => {
                 const button = buttonElement;
                 button.fullWidth = true;
@@ -223,20 +224,22 @@ class SgdsModal extends SgdsElement {
           aria-labelledby="title"
           tabindex="-1"
         >
-          <div class="modal-header">
-            <div class="modal-header__title-description">
-              <slot class="modal-title" id="title" name="title"></slot>
-              <slot name="description"></slot>
+          <div class="modal-content">
+            <div class="modal-header">
+              <div class="modal-header__title-description">
+                <slot class="modal-title" id="title" name="title"></slot>
+                <slot name="description"></slot>
+              </div>
+              <sgds-close-button
+                class="modal-header__close"
+                @click="${() => this.requestClose("close-button")}"
+                ariaLabel="close modal"
+              ></sgds-close-button>
             </div>
-            <sgds-close-button
-              class="modal-header__close"
-              @click="${() => this.requestClose("close-button")}"
-              ariaLabel="close modal"
-            ></sgds-close-button>
-          </div>
-          <div class="modal-body">
-            <slot></slot>
-          </div>
+            <div class="modal-body">
+              <slot></slot>
+            </div>
+          </div class="modal-content">
           <div class="modal-footer">
             <slot name="footer"></slot>
           </div>

package/react/components/Modal/sgds-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-modal.js","sources":["../../../../src/components/Modal/sgds-modal.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 { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n *\n * @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n *\n * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n *\n */\nexport class SgdsModal extends SgdsElement {\n  static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n  /**@internal */\n  @query(\".modal\") dialog: HTMLElement;\n  /**@internal */\n  @query(\".modal-panel\") panel: HTMLElement;\n  /**@internal */\n  @query(\".modal-overlay\") overlay: HTMLElement;\n  /**@internal */\n  @query(\".modal-title\") heading: HTMLElement;\n  /**@internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /**@internal */\n  private modal: Modal;\n  /**@internal */\n  private originalTrigger: HTMLElement | null;\n  private _resizeHandler: () => void;\n\n  /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */\n  @property({ reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"fullscreen\" = \"md\";\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n    this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n  }\n\n  firstUpdated() {\n    this._onWindowResize();\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeResizeListener();\n    unlockBodyScrolling(this);\n  }\n\n  private _debounce(func: (...args: any[]) => void, wait: number) {\n    let timeout: number;\n    return (...args: any[]) => {\n      clearTimeout(timeout);\n      timeout = window.setTimeout(() => func(...args), wait);\n    };\n  }\n\n  /** Handle the window resize event. */\n  private _onWindowResize() {\n    const panel = this.panel.getBoundingClientRect();\n    const panelWidth = panel.width;\n    const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n    if (!this.panel) return;\n\n    if (buttonElements.length <= 1) return;\n\n    if (panelWidth <= 360) {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = true;\n      });\n    } else {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = false;\n      });\n    }\n  }\n\n  /**  Add the resize event listener. */\n  private _addResizeListener() {\n    window.addEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Remove the resize event listener. */\n  private _removeResizeListener() {\n    window.removeEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Shows the dialog. */\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 dialog */\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  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const sgdsRequestClose = this.emit(\"sgds-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (sgdsRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"modal.denyClose\");\n      animateTo(this.panel, animation.keyframes);\n      return;\n    }\n\n    this.hide();\n  }\n\n  addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  }\n\n  private _overlayClickHandler() {\n    if (this.size === \"fullscreen\") {\n      return;\n    }\n\n    this.requestClose(\"overlay\");\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      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      const panelAnimation = getAnimation(this, \"modal.show\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n      !this.noAnimation &&\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\n      // Add focus on modal heading after opening it\n      this.heading.focus();\n\n      // Add resize listener only when the modal is shown\n      this._addResizeListener();\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, \"modal.hide\");\n      const overlayAnimation = getAnimation(this, \"modal.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      !this.noAnimation &&\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.dialog.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      unlockBodyScrolling(this);\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      // Remove resize listener when the modal is hidden\n      this._removeResizeListener();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          modal: true,\n          show: this.open,\n          \"has-footer\": this.hasSlotController.test(\"footer\")\n        })}\n      >\n        <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n        <div\n          class=\"modal-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-labelledby=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"modal-header\">\n            <div class=\"modal-header__title-description\">\n              <slot class=\"modal-title\" id=\"title\" name=\"title\"></slot>\n              <slot name=\"description\"></slot>\n            </div>\n            <sgds-close-button\n              class=\"modal-header__close\"\n              @click=\"${() => this.requestClose(\"close-button\")}\"\n              ariaLabel=\"close modal\"\n            ></sgds-close-button>\n          </div>\n          <div class=\"modal-body\">\n            <slot></slot>\n          </div>\n          <div class=\"modal-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n  keyframes: [\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n    { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n  keyframes: [\n    { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n  keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"names":["headerStyles","svgStyles","modalStyle"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;AAcG;AACG,MAAO,SAAU,SAAQ,WAAW,CAAA;AAA1C,IAAA,WAAA,GAAA;;;QAemB,IAAiB,CAAA,iBAAA,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;;QAQ/B,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAEb,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAEnC,IAAI,CAAA,IAAA,GAAsC,IAAI,CAAC;KA8O7E;IA5OC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnE,IAAI,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC;AAC7B,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;KAC5E;IAED,YAAY,GAAA;QACV,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;AAEhC,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;AACxB,YAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACtB,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;KACF;IAED,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,mBAAmB,CAAC,IAAI,CAAC,CAAC;KAC3B;IAEO,SAAS,CAAC,IAA8B,EAAE,IAAY,EAAA;AAC5D,QAAA,IAAI,OAAe,CAAC;AACpB,QAAA,OAAO,CAAC,GAAG,IAAW,KAAI;YACxB,YAAY,CAAC,OAAO,CAAC,CAAC;AACtB,YAAA,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;AACzD,SAAC,CAAC;KACH;;IAGO,eAAe,GAAA;QACrB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC;AACjD,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;QAC/B,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC;QAE3E,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;AAExB,QAAA,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC;YAAE,OAAO;AAEvC,QAAA,IAAI,UAAU,IAAI,GAAG,EAAE;AACrB,YAAA,cAAc,CAAC,OAAO,CAAC,aAAa,IAAG;gBACrC,MAAM,MAAM,GAAG,aAA2B,CAAC;AAC3C,gBAAA,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC;AAC1B,aAAC,CAAC,CAAC;SACJ;aAAM;AACL,YAAA,cAAc,CAAC,OAAO,CAAC,aAAa,IAAG;gBACrC,MAAM,MAAM,GAAG,aAA2B,CAAC;AAC3C,gBAAA,MAAM,CAAC,SAAS,GAAG,KAAK,CAAC;AAC3B,aAAC,CAAC,CAAC;SACJ;KACF;;IAGO,kBAAkB,GAAA;QACxB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KACxD;;IAGO,qBAAqB,GAAA;QAC3B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3D;;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,OAAO,YAAY,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,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;AAEO,IAAA,YAAY,CAAC,MAA+C,EAAA;AAClE,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AAC/C,YAAA,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,EAAE,MAAM,EAAE;AACnB,SAAA,CAAC,CAAC;AAEH,QAAA,IAAI,gBAAgB,CAAC,gBAAgB,EAAE;YACrC,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;YACxD,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YAC3C,OAAO;SACR;QAED,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,gBAAgB,GAAA;QACd,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KAClE;IAED,mBAAmB,GAAA;QACjB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KACrE;AAED,IAAA,qBAAqB,CAAC,KAAoB,EAAA;QACxC,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YACvC,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;SAC/B;KACF;IAEO,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE;YAC9B,OAAO;SACR;AAED,QAAA,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;KAC9B;IAGK,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;AAC7D,YAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YAEtB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAExB,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAC/E,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;YAE3B,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;YACxD,MAAM,gBAAgB,GAAG,YAAY,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC;YAClE,CAAC,IAAI,CAAC,WAAW;AACf,iBAAC,MAAM,OAAO,CAAC,GAAG,CAAC;AACjB,oBAAA,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC;AACvE,oBAAA,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC;AAC9E,iBAAA,CAAC,CAAC,CAAC;AAEN,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;;AAG7B,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;;YAGrB,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;aAAM;;AAEL,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACvB,IAAI,CAAC,mBAAmB,EAAE,CAAC;AAC3B,YAAA,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YAExB,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YAC/E,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;YACxD,MAAM,gBAAgB,GAAG,YAAY,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC;;;;YAKlE,CAAC,IAAI,CAAC,WAAW;AACf,iBAAC,MAAM,OAAO,CAAC,GAAG,CAAC;AACjB,oBAAA,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAK;AACtF,wBAAA,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;AAC7B,qBAAC,CAAC;AACF,oBAAA,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAK;AAChF,wBAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;AAC3B,qBAAC,CAAC;AACH,iBAAA,CAAC,CAAC,CAAC;AAEN,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;YAE1B,mBAAmB,CAAC,IAAI,CAAC,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;;YAG7B,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAC9B;KACF;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;SACpD,CAAC,CAAA;;AAEkC,0CAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;;;;;wBAM7C,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;;;;;;;;;;AAW5B,sBAAA,EAAA,MAAM,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;;;;;;;;;;;;KAY1D,CAAC;KACH;;AAvQM,SAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAY,EAAEC,UAAS,EAAEC,UAAU,CAAC,CAAC;AAC7E;AACO,SAAA,CAAA,YAAY,GAAG;AACpB,IAAA,mBAAmB,EAAE,eAAe;AACrC,CAFkB,CAEjB;AAEe,UAAA,CAAA;IAAhB,KAAK,CAAC,QAAQ,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEd,UAAA,CAAA;IAAtB,KAAK,CAAC,cAAc,CAAC;AAAoB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEjB,UAAA,CAAA;IAAxB,KAAK,CAAC,gBAAgB,CAAC;AAAsB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEvB,UAAA,CAAA;IAAtB,KAAK,CAAC,cAAc,CAAC;AAAsB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAUA,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEb,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEnC,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA8HtE,UAAA,CAAA;IADL,KAAK,CAAC,MAAM,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAuE7C,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AA4CH,mBAAmB,CAAC,YAAY,EAAE;AAChC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,8BAA8B,EAAE;AACzD,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE;AACvD,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,EAAE;AAChC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE;AACrD,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,8BAA8B,EAAE;AAC1D,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,iBAAiB,EAAE;AACrC,IAAA,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;AAC/F,IAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC3B,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,oBAAoB,EAAE;AACxC,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;AAEH,mBAAmB,CAAC,oBAAoB,EAAE;AACxC,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-modal.js","sources":["../../../../src/components/Modal/sgds-modal.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 { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\n/**\n * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n *\n * @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n *\n * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n *\n */\nexport class SgdsModal extends SgdsElement {\n  static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n  /**@internal */\n  @query(\".modal\") dialog: HTMLElement;\n  /**@internal */\n  @query(\".modal-panel\") panel: HTMLElement;\n  /**@internal */\n  @query(\".modal-overlay\") overlay: HTMLElement;\n  /**@internal */\n  @query(\".modal-title\") heading: HTMLElement;\n  /**@internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /**@internal */\n  private modal: Modal;\n  /**@internal */\n  private originalTrigger: HTMLElement | null;\n  private _resizeHandler: () => void;\n\n  /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */\n  @property({ reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"fullscreen\" = \"md\";\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n    this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n  }\n\n  firstUpdated() {\n    this._onWindowResize();\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeResizeListener();\n    unlockBodyScrolling(this);\n  }\n\n  private _debounce(func: (...args: any[]) => void, wait: number) {\n    let timeout: number;\n    return (...args: any[]) => {\n      clearTimeout(timeout);\n      timeout = window.setTimeout(() => func(...args), wait);\n    };\n  }\n\n  /** Handle the window resize event. */\n  private _onWindowResize() {\n    const panel = this.panel.getBoundingClientRect();\n    const panelWidth = panel.width;\n    const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n    if (!this.panel) return;\n\n    if (buttonElements.length <= 1) return;\n\n    if (panelWidth < SM_BREAKPOINT || (this.size === \"fullscreen\" && panelWidth < MD_BREAKPOINT)) {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = true;\n      });\n    } else {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = false;\n      });\n    }\n  }\n\n  /**  Add the resize event listener. */\n  private _addResizeListener() {\n    window.addEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Remove the resize event listener. */\n  private _removeResizeListener() {\n    window.removeEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Shows the dialog. */\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 dialog */\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  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const sgdsRequestClose = this.emit(\"sgds-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (sgdsRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"modal.denyClose\");\n      animateTo(this.panel, animation.keyframes);\n      return;\n    }\n\n    this.hide();\n  }\n\n  addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  }\n\n  private _overlayClickHandler() {\n    if (this.size === \"fullscreen\") {\n      return;\n    }\n\n    this.requestClose(\"overlay\");\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      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      const panelAnimation = getAnimation(this, \"modal.show\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n      !this.noAnimation &&\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\n      // Add focus on modal heading after opening it\n      this.heading.focus();\n\n      // Add resize listener only when the modal is shown\n      this._addResizeListener();\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, \"modal.hide\");\n      const overlayAnimation = getAnimation(this, \"modal.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      !this.noAnimation &&\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.dialog.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      unlockBodyScrolling(this);\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      // Remove resize listener when the modal is hidden\n      this._removeResizeListener();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          modal: true,\n          show: this.open,\n          \"has-footer\": this.hasSlotController.test(\"footer\")\n        })}\n      >\n        <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n        <div\n          class=\"modal-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-labelledby=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"modal-content\">\n            <div class=\"modal-header\">\n              <div class=\"modal-header__title-description\">\n                <slot class=\"modal-title\" id=\"title\" name=\"title\"></slot>\n                <slot name=\"description\"></slot>\n              </div>\n              <sgds-close-button\n                class=\"modal-header__close\"\n                @click=\"${() => this.requestClose(\"close-button\")}\"\n                ariaLabel=\"close modal\"\n              ></sgds-close-button>\n            </div>\n            <div class=\"modal-body\">\n              <slot></slot>\n            </div>\n          </div class=\"modal-content\">\n          <div class=\"modal-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n  keyframes: [\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n    { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n  keyframes: [\n    { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n  keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"names":["headerStyles","svgStyles","modalStyle"],"mappings":"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"}

package/react/utils/breakpoints.cjs.js

@@ -3,9 +3,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const LG_BREAKPOINT = 1024;
-const MD_BREAKPOINT = 768;
 const SM_BREAKPOINT = 512;
+const MD_BREAKPOINT = 768;
+const LG_BREAKPOINT = 1024;
 const XL_BREAKPOINT = 1280;
 const XXL_BREAKPOINT = 1440;
 

package/react/utils/breakpoints.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.cjs.js","sources":["../../../src/utils/breakpoints.ts"],"sourcesContent":["export const LG_BREAKPOINT = 1024;\nexport const MD_BREAKPOINT = 768;\nexport const SM_BREAKPOINT = 512;\nexport const XL_BREAKPOINT = 1280;\nexport const XXL_BREAKPOINT = 1440;\n"],"names":[],"mappings":";;;;;AAAO,MAAM,aAAa,GAAG,KAAK;AAC3B,MAAM,aAAa,GAAG,IAAI;AAC1B,MAAM,aAAa,GAAG,IAAI;AAC1B,MAAM,aAAa,GAAG,KAAK;AAC3B,MAAM,cAAc,GAAG;;;;;;;;"}
+{"version":3,"file":"breakpoints.cjs.js","sources":["../../../src/utils/breakpoints.ts"],"sourcesContent":["export const XS_BREAKPOINT = 320;\nexport const SM_BREAKPOINT = 512;\nexport const MD_BREAKPOINT = 768;\nexport const LG_BREAKPOINT = 1024;\nexport const XL_BREAKPOINT = 1280;\nexport const XXL_BREAKPOINT = 1440;\n"],"names":[],"mappings":";;;;;AACO,MAAM,aAAa,GAAG,IAAI;AAC1B,MAAM,aAAa,GAAG,IAAI;AAC1B,MAAM,aAAa,GAAG,KAAK;AAC3B,MAAM,aAAa,GAAG,KAAK;AAC3B,MAAM,cAAc,GAAG;;;;;;;;"}

package/react/utils/breakpoints.js

@@ -1,7 +1,7 @@
 'use client';
-const LG_BREAKPOINT = 1024;
-const MD_BREAKPOINT = 768;
 const SM_BREAKPOINT = 512;
+const MD_BREAKPOINT = 768;
+const LG_BREAKPOINT = 1024;
 const XL_BREAKPOINT = 1280;
 const XXL_BREAKPOINT = 1440;
 

package/react/utils/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.js","sources":["../../../src/utils/breakpoints.ts"],"sourcesContent":["export const LG_BREAKPOINT = 1024;\nexport const MD_BREAKPOINT = 768;\nexport const SM_BREAKPOINT = 512;\nexport const XL_BREAKPOINT = 1280;\nexport const XXL_BREAKPOINT = 1440;\n"],"names":[],"mappings":";AAAO,MAAM,aAAa,GAAG,KAAK;AAC3B,MAAM,aAAa,GAAG,IAAI;AAC1B,MAAM,aAAa,GAAG,IAAI;AAC1B,MAAM,aAAa,GAAG,KAAK;AAC3B,MAAM,cAAc,GAAG;;;;"}
+{"version":3,"file":"breakpoints.js","sources":["../../../src/utils/breakpoints.ts"],"sourcesContent":["export const XS_BREAKPOINT = 320;\nexport const SM_BREAKPOINT = 512;\nexport const MD_BREAKPOINT = 768;\nexport const LG_BREAKPOINT = 1024;\nexport const XL_BREAKPOINT = 1280;\nexport const XXL_BREAKPOINT = 1440;\n"],"names":[],"mappings":";AACO,MAAM,aAAa,GAAG,IAAI;AAC1B,MAAM,aAAa,GAAG,IAAI;AAC1B,MAAM,aAAa,GAAG,KAAK;AAC3B,MAAM,aAAa,GAAG,KAAK;AAC3B,MAAM,cAAc,GAAG;;;;"}

package/react/utils/scroll.cjs.js

@@ -10,7 +10,7 @@ const locks = new Set();
  */
 function lockBodyScrolling(lockingEl) {
     locks.add(lockingEl);
-    document.body.classList.add("sl-scroll-lock");
+    document.body.style.overflow = "hidden";
 }
 /**
  * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
@@ -18,7 +18,7 @@ function lockBodyScrolling(lockingEl) {
 function unlockBodyScrolling(lockingEl) {
     locks.delete(lockingEl);
     if (locks.size === 0) {
-        document.body.classList.remove("sl-scroll-lock");
+        document.body.style.overflow = "";
     }
 }
 

package/react/utils/scroll.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll.cjs.js","sources":["../../../src/utils/scroll.ts"],"sourcesContent":["import { getOffset } from \"./offset\";\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add(\"sl-scroll-lock\");\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: \"horizontal\" | \"vertical\" | \"both\" = \"vertical\",\n  behavior: \"smooth\" | \"auto\" = \"smooth\"\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === \"horizontal\" || direction === \"both\") {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === \"vertical\" || direction === \"both\") {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove(\"sl-scroll-lock\");\n  }\n}\n"],"names":[],"mappings":";;;;;AAEA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB;;;AAGG;AACG,SAAU,iBAAiB,CAAC,SAAsB,EAAA;AACtD,IAAA,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAChD,CAAC;AAoCD;;AAEG;AACG,SAAU,mBAAmB,CAAC,SAAsB,EAAA;AACxD,IAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AAExB,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;KAClD;AACH;;;;;"}
+{"version":3,"file":"scroll.cjs.js","sources":["../../../src/utils/scroll.ts"],"sourcesContent":["import { getOffset } from \"./offset\";\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.style.overflow = \"hidden\";\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: \"horizontal\" | \"vertical\" | \"both\" = \"vertical\",\n  behavior: \"smooth\" | \"auto\" = \"smooth\"\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === \"horizontal\" || direction === \"both\") {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === \"vertical\" || direction === \"both\") {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.style.overflow = \"\";\n  }\n}\n"],"names":[],"mappings":";;;;;AAEA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB;;;AAGG;AACG,SAAU,iBAAiB,CAAC,SAAsB,EAAA;AACtD,IAAA,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAC1C,CAAC;AAoCD;;AAEG;AACG,SAAU,mBAAmB,CAAC,SAAsB,EAAA;AACxD,IAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AAExB,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;KACnC;AACH;;;;;"}

package/react/utils/scroll.js

@@ -6,7 +6,7 @@ const locks = new Set();
  */
 function lockBodyScrolling(lockingEl) {
     locks.add(lockingEl);
-    document.body.classList.add("sl-scroll-lock");
+    document.body.style.overflow = "hidden";
 }
 /**
  * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
@@ -14,7 +14,7 @@ function lockBodyScrolling(lockingEl) {
 function unlockBodyScrolling(lockingEl) {
     locks.delete(lockingEl);
     if (locks.size === 0) {
-        document.body.classList.remove("sl-scroll-lock");
+        document.body.style.overflow = "";
     }
 }
 

package/react/utils/scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll.js","sources":["../../../src/utils/scroll.ts"],"sourcesContent":["import { getOffset } from \"./offset\";\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add(\"sl-scroll-lock\");\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: \"horizontal\" | \"vertical\" | \"both\" = \"vertical\",\n  behavior: \"smooth\" | \"auto\" = \"smooth\"\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === \"horizontal\" || direction === \"both\") {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === \"vertical\" || direction === \"both\") {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove(\"sl-scroll-lock\");\n  }\n}\n"],"names":[],"mappings":";AAEA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB;;;AAGG;AACG,SAAU,iBAAiB,CAAC,SAAsB,EAAA;AACtD,IAAA,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAChD,CAAC;AAoCD;;AAEG;AACG,SAAU,mBAAmB,CAAC,SAAsB,EAAA;AACxD,IAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AAExB,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;KAClD;AACH;;;;"}
+{"version":3,"file":"scroll.js","sources":["../../../src/utils/scroll.ts"],"sourcesContent":["import { getOffset } from \"./offset\";\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.style.overflow = \"hidden\";\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: \"horizontal\" | \"vertical\" | \"both\" = \"vertical\",\n  behavior: \"smooth\" | \"auto\" = \"smooth\"\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === \"horizontal\" || direction === \"both\") {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === \"vertical\" || direction === \"both\") {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.style.overflow = \"\";\n  }\n}\n"],"names":[],"mappings":";AAEA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB;;;AAGG;AACG,SAAU,iBAAiB,CAAC,SAAsB,EAAA;AACtD,IAAA,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAC1C,CAAC;AAoCD;;AAEG;AACG,SAAU,mBAAmB,CAAC,SAAsB,EAAA;AACxD,IAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AAExB,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;KACnC;AACH;;;;"}

package/themes/root.css

@@ -238,10 +238,16 @@
   --sgds-dimension-384: 384px;
   --sgds-dimension-480: 480px;
   --sgds-dimension-512: 512px;
+  --sgds-dimension-640: 640px;
   --sgds-dimension-688: 688px;
   --sgds-dimension-768: 768px;
+  --sgds-dimension-800: 800px;
+  --sgds-dimension-872: 872px;
+  --sgds-dimension-896: 896px;
   --sgds-dimension-1024: 1024px;
+  --sgds-dimension-1176: 1176px;
   --sgds-dimension-1280: 1280px;
+  --sgds-dimension-1320: 1320px;
   --sgds-dimension-1440: 1440px;
 
   /* Semantic - Padding */

package/utils/breakpoints.d.ts

@@ -1,5 +1,6 @@
-export declare const LG_BREAKPOINT = 1024;
-export declare const MD_BREAKPOINT = 768;
+export declare const XS_BREAKPOINT = 320;
 export declare const SM_BREAKPOINT = 512;
+export declare const MD_BREAKPOINT = 768;
+export declare const LG_BREAKPOINT = 1024;
 export declare const XL_BREAKPOINT = 1280;
 export declare const XXL_BREAKPOINT = 1440;

package/utils/breakpoints.js

@@ -1,6 +1,6 @@
-const LG_BREAKPOINT = 1024;
-const MD_BREAKPOINT = 768;
 const SM_BREAKPOINT = 512;
+const MD_BREAKPOINT = 768;
+const LG_BREAKPOINT = 1024;
 const XL_BREAKPOINT = 1280;
 const XXL_BREAKPOINT = 1440;
 

package/utils/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.js","sources":["../../src/utils/breakpoints.ts"],"sourcesContent":["export const LG_BREAKPOINT = 1024;\nexport const MD_BREAKPOINT = 768;\nexport const SM_BREAKPOINT = 512;\nexport const XL_BREAKPOINT = 1280;\nexport const XXL_BREAKPOINT = 1440;\n"],"names":[],"mappings":"AAAO,MAAM,aAAa,GAAG,KAAK;AAC3B,MAAM,aAAa,GAAG,IAAI;AAC1B,MAAM,aAAa,GAAG,IAAI;AAC1B,MAAM,aAAa,GAAG,KAAK;AAC3B,MAAM,cAAc,GAAG;;;;"}
+{"version":3,"file":"breakpoints.js","sources":["../../src/utils/breakpoints.ts"],"sourcesContent":["export const XS_BREAKPOINT = 320;\nexport const SM_BREAKPOINT = 512;\nexport const MD_BREAKPOINT = 768;\nexport const LG_BREAKPOINT = 1024;\nexport const XL_BREAKPOINT = 1280;\nexport const XXL_BREAKPOINT = 1440;\n"],"names":[],"mappings":"AACO,MAAM,aAAa,GAAG,IAAI;AAC1B,MAAM,aAAa,GAAG,IAAI;AAC1B,MAAM,aAAa,GAAG,KAAK;AAC3B,MAAM,aAAa,GAAG,KAAK;AAC3B,MAAM,cAAc,GAAG;;;;"}

package/utils/scroll.js

@@ -5,7 +5,7 @@ const locks = new Set();
  */
 function lockBodyScrolling(lockingEl) {
     locks.add(lockingEl);
-    document.body.classList.add("sl-scroll-lock");
+    document.body.style.overflow = "hidden";
 }
 /**
  * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
@@ -13,7 +13,7 @@ function lockBodyScrolling(lockingEl) {
 function unlockBodyScrolling(lockingEl) {
     locks.delete(lockingEl);
     if (locks.size === 0) {
-        document.body.classList.remove("sl-scroll-lock");
+        document.body.style.overflow = "";
     }
 }
 

package/utils/scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll.js","sources":["../../src/utils/scroll.ts"],"sourcesContent":["import { getOffset } from \"./offset\";\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add(\"sl-scroll-lock\");\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: \"horizontal\" | \"vertical\" | \"both\" = \"vertical\",\n  behavior: \"smooth\" | \"auto\" = \"smooth\"\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === \"horizontal\" || direction === \"both\") {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === \"vertical\" || direction === \"both\") {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove(\"sl-scroll-lock\");\n  }\n}\n"],"names":[],"mappings":"AAEA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB;;;AAGG;AACG,SAAU,iBAAiB,CAAC,SAAsB,EAAA;AACtD,IAAA,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAChD,CAAC;AAoCD;;AAEG;AACG,SAAU,mBAAmB,CAAC,SAAsB,EAAA;AACxD,IAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AAExB,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;KAClD;AACH;;;;"}
+{"version":3,"file":"scroll.js","sources":["../../src/utils/scroll.ts"],"sourcesContent":["import { getOffset } from \"./offset\";\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.style.overflow = \"hidden\";\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: \"horizontal\" | \"vertical\" | \"both\" = \"vertical\",\n  behavior: \"smooth\" | \"auto\" = \"smooth\"\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === \"horizontal\" || direction === \"both\") {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === \"vertical\" || direction === \"both\") {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.style.overflow = \"\";\n  }\n}\n"],"names":[],"mappings":"AAEA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB;;;AAGG;AACG,SAAU,iBAAiB,CAAC,SAAsB,EAAA;AACtD,IAAA,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAC1C,CAAC;AAoCD;;AAEG;AACG,SAAU,mBAAmB,CAAC,SAAsB,EAAA;AACxD,IAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AAExB,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;KACnC;AACH;;;;"}