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

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-modal.js","names":["headerStyles","svgStyles","modalStyle"],"sources":["../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { 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 { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../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. This event is cancelable; use `event.preventDefault()` to prevent the modal from closing. `event.detail.source` indicates the trigger source: 'close-button', 'overlay', or 'keyboard'.\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\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n\n  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */\n  @property({ reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\" = \"md\";\n\n  /** Used only for SSR to indicate the presence of the `footer` slot. */\n  @property({ type: Boolean }) hasFooterSlot = false;\n\n  /** Removes the close button in the modal header. */\n  @property({ type: Boolean, reflect: true }) noCloseButton = false;\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  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeResizeListener();\n    unlockBodyScrolling(this);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\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  updated() {\n    if (!this.hasFooterSlot) this.hasFooterSlot = this.hasSlotController.test(\"footer\");\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.hasFooterSlot\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              ${\n                !this.noCloseButton\n                  ? html`<sgds-close-button\n                      class=\"modal-header__close\"\n                      @click=\"${() => this.requestClose(\"close-button\")}\"\n                      aria-label=\"close modal\"\n                    ></sgds-close-button>`\n                  : nothing\n              }\n            <div class=\"modal-header\">\n              <div class=\"modal-header__title-description\">\n                <div id=\"title\"><slot class=\"modal-title\" name=\"title\"></slot></div>\n                <slot name=\"description\"></slot>\n              </div>\n            </div>\n            <div class=\"modal-body\" tabindex=\"0\">\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"],"mappings":"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"}
+{"version":3,"file":"sgds-modal.js","names":["headerStyles","svgStyles","modalStyle"],"sources":["../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { 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 { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../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. This event is cancelable; use `event.preventDefault()` to prevent the modal from closing. `event.detail.source` indicates the trigger source: 'close-button', 'overlay', or 'keyboard'.\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\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n\n  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */\n  @property({ reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\" = \"md\";\n\n  /** Used only for SSR to indicate the presence of the `footer` slot. */\n  @property({ type: Boolean }) hasFooterSlot = false;\n\n  /** Removes the close button in the modal header. */\n  @property({ type: Boolean, reflect: true }) noCloseButton = false;\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  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeResizeListener();\n    unlockBodyScrolling(this);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\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  updated() {\n    if (!this.hasFooterSlot) this.hasFooterSlot = this.hasSlotController.test(\"footer\");\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.hasFooterSlot\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              ${\n                !this.noCloseButton\n                  ? html`<sgds-close-button\n                      class=\"modal-header__close\"\n                      @click=\"${() => this.requestClose(\"close-button\")}\"\n                      aria-label=\"close modal\"\n                    ></sgds-close-button>`\n                  : nothing\n              }\n            <div class=\"modal-header\">\n              <div class=\"modal-header__title-description\">\n                <div id=\"title\"><slot class=\"modal-title\" name=\"title\"></slot></div>\n                <slot name=\"description\"></slot>\n              </div>\n            </div>\n            <section class=\"modal-body\" tabindex=\"0\" aria-label=\"Modal body content\">\n              <slot></slot>\n            </section>\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"],"mappings":"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"}

package/components/index.umd.min.js

@@ -2838,7 +2838,7 @@ let n=e._$AN;if(n===void 0)return!1;for(let e of n)e._$AO?.(t,!1),Fg(e,t);return
 let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i);return r},H_=ft(class extends pt{constructor(e){if(super(e),e.type!==dt.CHILD)throw Error(`repeat() can only be used in text expressions`)}dt(e,t,n){let r;n===void 0?n=t:t!==void 0&&(r=t);let i=[],a=[],o=0;for(let t of e)i[o]=r?r(t,o):o,a[o]=n(t,o),o++;return{values:a,keys:i}}render(e,t,n){return this.dt(e,t,n).values}update(e,[t,n,r]){let i=Ng(e),{values:a,keys:o}=this.dt(t,n,r);if(!Array.isArray(i))return this.ut=o,a;let s=this.ut??=[],c=[],l,u,d=0,f=i.length-1,p=0,m=a.length-1;for(;d<=f&&p<=m;)if(i[d]===null)d++;else if(i[f]===null)f--;else if(s[d]===o[p])c[p]=Ag(i[d],a[p]),d++,p++;else if(s[f]===o[m])c[m]=Ag(i[f],a[m]),f--,m--;else if(s[d]===o[m])c[m]=Ag(i[d],a[m]),kg(e,c[m+1],i[d]),d++,m--;else if(s[f]===o[p])c[p]=Ag(i[f],a[p]),kg(e,i[d],i[f]),f--,p++;else if(l===void 0&&(l=V_(o,p,m),u=V_(s,d,f)),l.has(s[d])){if(l.has(s[f])){let t=u.get(o[p]),n=t===void 0?null:i[t];if(n===null){let t=kg(e,i[d]);Ag(t,a[p]),c[p]=t}else c[p]=Ag(n,a[p]),kg(e,i[d],n),i[t]=null;p++}else Pg(i[f]),f--}else Pg(i[d]),d++;for(;p<=m;){let t=kg(e,c[m+1]);Ag(t,a[p]),c[p++]=t}for(;d<=f;){let e=i[d++];e!==null&&Pg(e)}return this.ut=o,Mg(e,c),Fe}});x();var G=class e extends W{constructor(...e){super(...e),this.multiSelect=!1,this.badgeFullWidth=!1,this.clearable=!1,this.noValidate=!1,this.async=!1,this.emptyMenuAsync=!1,this.creatable=!1,this.scrollBottomOffset=0,this.filterFunction=(e,t)=>t.label.toLowerCase().startsWith(e.toLowerCase()),this.optionList=[],this.emptyMenuAfterFiltering=!1,this.isFocused=!1,this.isScrollEnd=!1,this.suffixIconTemplate=y`<sgds-icon
     name=${this.menuIsOpen?`chevron-up`:`chevron-down`}
     size="md"
-  ></sgds-icon>`,this.prefixIconTemplate=y`${b}`,this._createOptionSlotContent=[],this._createOptionValue=``,this._showCreateOption=!1}static{this.styles=[...W.styles,F_,L_]}static{this.childName=`sgds-combo-box-option`}static{this.dependencies={[e.childName]:B_,"sgds-icon":L,"sgds-badge":r_,"sgds-spinner":_m}}connectedCallback(){super.connectedCallback(),this.addEventListener(`focus`,async()=>{this.isFocused=!0}),this.addEventListener(`blur`,async()=>{this.isFocused=!1}),this.addEventListener(`keydown`,e=>{e.key===`Enter`&&e.target.shadowRoot?.querySelector(`.form-clearable`)?.matches(`:focus`)&&this._handleClear()}),this.addEventListener(`sgds-hide`,async e=>{e.detail.isOutside||(await this._input).focus(),this.options.forEach(e=>{e.removeAttribute(`hidden`)}),this.emptyMenuAfterFiltering=!1})}async firstUpdated(e){super.firstUpdated(e),this.async&&(this.filterFunction=()=>!0),this.menuList.forEach(e=>{let t=document.createElement(`sgds-combo-box-option`);t.innerText=e.label,t.value=e.value,t.checkbox=this.multiSelect,t.active=this.value.includes(e.value),this.appendChild(t)}),this._setupValidation(this.menuList),this.menuIsOpen&&await this.updateFloatingPosition()}async _handleDefaultSlotChange(e){let t=e.target.assignedElements({flatten:!0});t.forEach(e=>{if(e.hasAttribute(`disabled`)||e.clickEventAdded)return!1;e.addEventListener(`click`,e=>{e.preventDefault();let t=e.target;return this.multiSelect&&t.active?this._handleItemUnselect(e):this._handleItemSelected(e),!1}),e.clickEventAdded=!0,e.addEventListener(`keydown`,e=>{e.key===`Enter`&&(this.close=`outside`,e.target.click())})}),await this.updateComplete;let n=t;this.optionList=await this._getMenuListFromOptions(n),this._setupValidation(this.optionList)}async _setupValidation(e){if(this.value&&e.length>0){let t=this.value.split(`;`),n=e.filter(({value:e})=>t.includes(e));this.selectedItems=[...n,...this.selectedItems],this.multiSelect||(this.displayValue=n[0]?.label)}this.input=this.multiSelect?await this._multiSelectInput:await this._input,this._mixinValidate(this.input)}async _handleValueChange(){this.options.forEach(e=>{e.removeAttribute(`hidden`)});let e=await this._input;this._mixinSetFormValue(),this.multiSelect?this._mixinValidate(this.input):this._mixinValidate(e),this.selectedItems.map(e=>e.value).join(`;`)!==this.value&&this._updateValueAndDisplayValue(this.optionList),(this._isTouched||this.value!==``)&&(this._mixinShouldSkipSgdsValidation()||(this.invalid=!this._mixinReportValidity()))}_emitChangeEvents(){this._mixinSetFormValue(),this.emit(`sgds-change`),this.value&&this.emit(`sgds-select`)}_handleOptionListChange(){this._updateValueAndDisplayValue(this.optionList)}_handleMenuListChange(){let e=this.menuList.map(e=>{let t=document.createElement(`sgds-combo-box-option`);return t.innerText=e.label,t.value=e.value,t.checkbox=this.multiSelect,t.active=this.value.includes(e.value),t});this.replaceChildren(...e)}_updateValueAndDisplayValue(e){let t=this.value.split(`;`),n=e.filter(({value:e})=>t.includes(e));this.selectedItems=[...n];let r=n.map(e=>e.value).join(`;`);r!==this.value&&(this.value=r),!this.multiSelect&&!this.async&&(this.displayValue=n[0]?.label||``),this.options.forEach(e=>e.active=t.includes(e.value))}async _handleInputChange(e){let t=e.target;this.displayValue=t.value,this.emit(`sgds-input`,{detail:{displayValue:this.displayValue}}),this.invalid=!1,this.showMenu(),this.displayValue===``&&!this.multiSelect&&(this.selectedItems=[],this.value=this.selectedItems.join(`;`),this.options.forEach(e=>e.active=!1),this._emitChangeEvents());let n=this.options.map(e=>({value:e.value,label:e.textContent.trim()}));this.filteredList=n.filter(e=>this.filterFunction(this.displayValue,e)),this.emptyMenuAfterFiltering=this.filteredList.length===0;let r=this.filteredList.map(e=>e.value);this.options.forEach(e=>{e.hidden=!r.includes(e.value)}),this._syncCreateOption()}async _handleItemSelected(e){let t=e.target;if(t.disabled)return;let n=t.textContent?.trim()??``,r=t.getAttribute(`value`)??n,i=this.filteredList.find(e=>e.value.toString()===r)||{label:n,value:r};this.multiSelect?(this.selectedItems.some(e=>e.value===i.value)||(this.selectedItems=[...this.selectedItems,i]),this.value=this.selectedItems.map(e=>e.value).join(`;`),t.active=!0,this.displayValue=``):(this.selectedItems.length===0||this.selectedItems[0].value!==i.value)&&(this.options.forEach(e=>e.active=!1),t.active=!0,this.selectedItems=[i],this.value=i.value.toString(),this.displayValue=i.label,this.hideMenu()),this._emitChangeEvents()}_handleItemUnselect(e){let t=e.target;if(t.disabled)return;t.removeAttribute(`active`);let n=t.textContent?.trim()??``,r=t.getAttribute(`value`)??n,i=this.filteredList.find(e=>e.value.toString()===r)||{label:n,value:r};this.selectedItems=this.selectedItems.filter(e=>e.value!==i.value),this.value=this.selectedItems.map(e=>e.value).join(`;`),this._emitChangeEvents()}async _handleBadgeDismissed(e,t){e.preventDefault();let n=t.value;this.options?.forEach(e=>e.value===n?e.active=!1:null),this.selectedItems=this.selectedItems.filter(e=>e.value!==t.value),this.value=this.selectedItems.map(e=>e.value).join(`;`),this._emitChangeEvents()}async _handleMultiSelectKeyDown(e){if(this.multiSelect&&e.key===`Backspace`&&this.multiSelect&&this.displayValue.trim()===``&&this.selectedItems.length>0){let e=this.selectedItems[this.selectedItems.length-1].value;this.options?.forEach(t=>t.value===e?t.active=!1:null),this.selectedItems=this.selectedItems.slice(0,-1),this.value=this.selectedItems.map(e=>e.value).join(`;`),this._emitChangeEvents()}}_handleFocus(){this.emit(`sgds-focus`)}async _handleInputBlur(e){e.preventDefault(),this.emit(`sgds-blur`);let t=e.relatedTarget;(this.creatable||this.multiSelect)&&t&&(this.contains(t)||this.shadowRoot?.contains(t))||(this.multiSelect?this.selectedItems.filter(({label:e})=>this.displayValue===e).length<=0&&(this.displayValue=``):this.displayValue=this.selectedItems.length>0?this.selectedItems[0].label:``)}async _handleClear(){this.value=this.displayValue=``,this.options?.forEach(e=>e.active=!1),this._emitChangeEvents(),(await this._input).focus(),this.showMenu()}async _mixinResetFormControl(){if(this.value=this.defaultValue,this.multiSelect){let e=this.value.split(`;`);this.options.forEach(t=>{t.active=e.includes(t.value)});let t=this.options.filter(t=>e.includes(t.value));this.selectedItems=t.map(e=>({value:e.value,label:e.textContent.trim()})),this._mixinResetValidity(await this._multiSelectInput)}else{this.options.forEach(e=>{e.active=e.value===this.value});let e=this.options.filter(e=>e.value===this.value);this.displayValue=e.length<=0?``:e[0].textContent.trim(),this._mixinResetValidity(await this._input)}}async _handleScroll(e){let t=e.target;if(t){let e=t.scrollHeight-t.clientHeight,n=Math.max(0,this.scrollBottomOffset);t.scrollTop>=e-n?(this.isScrollEnd||this.emit(`sgds-scroll-end`),this.isScrollEnd=!0):this.isScrollEnd=!1}}_renderInput(e){let t=this.hasFeedback,n=e;return y`
+  ></sgds-icon>`,this.prefixIconTemplate=y`${b}`,this._createOptionSlotContent=[],this._createOptionValue=``,this._showCreateOption=!1}static{this.styles=[...W.styles,F_,L_]}static{this.childName=`sgds-combo-box-option`}static{this.dependencies={[e.childName]:B_,"sgds-icon":L,"sgds-badge":r_,"sgds-spinner":_m}}connectedCallback(){super.connectedCallback(),this.addEventListener(`focus`,async()=>{this.isFocused=!0}),this.addEventListener(`blur`,async()=>{this.isFocused=!1}),this.addEventListener(`keydown`,e=>{e.key===`Enter`&&e.target.shadowRoot?.querySelector(`.form-clearable`)?.matches(`:focus`)&&this._handleClear()}),this.addEventListener(`sgds-hide`,async e=>{e.detail.isOutside||(await this._input).focus(),this.options.forEach(e=>{e.removeAttribute(`hidden`)}),this.emptyMenuAfterFiltering=!1})}async firstUpdated(e){super.firstUpdated(e),this.async&&(this.filterFunction=()=>!0),this.menuList.forEach(e=>{let t=document.createElement(`sgds-combo-box-option`);t.innerText=e.label,t.value=e.value,t.checkbox=this.multiSelect,t.active=this.value.includes(e.value),this.appendChild(t)}),this._setupValidation(this.menuList),this.menuIsOpen&&await this.updateFloatingPosition()}async _handleDefaultSlotChange(e){let t=e.target.assignedElements({flatten:!0});t.forEach(e=>{if(e.hasAttribute(`disabled`)||e.clickEventAdded)return!1;e.addEventListener(`click`,e=>{e.preventDefault();let t=e.target;return this.multiSelect&&t.active?this._handleItemUnselect(e):this._handleItemSelected(e),!1}),e.clickEventAdded=!0,e.addEventListener(`keydown`,e=>{e.key===`Enter`&&(this.close=`outside`,e.target.click())})}),await this.updateComplete;let n=t;this.optionList=await this._getMenuListFromOptions(n),this._setupValidation(this.optionList)}async _setupValidation(e){if(this.value&&e.length>0){let t=this.value.split(`;`),n=e.filter(({value:e})=>t.includes(e));this.selectedItems=[...n],this.multiSelect||(this.displayValue=n[0]?.label)}this.input=this.multiSelect?await this._multiSelectInput:await this._input,this._mixinValidate(this.input)}async _handleValueChange(){this.options.forEach(e=>{e.removeAttribute(`hidden`)});let e=await this._input;this._mixinSetFormValue(),this.multiSelect?this._mixinValidate(this.input):this._mixinValidate(e),this.selectedItems.map(e=>e.value).join(`;`)!==this.value&&this._updateValueAndDisplayValue(this.optionList),(this._isTouched||this.value!==``)&&(this._mixinShouldSkipSgdsValidation()||(this.invalid=!this._mixinReportValidity()))}_emitChangeEvents(){this._mixinSetFormValue(),this.emit(`sgds-change`),this.value&&this.emit(`sgds-select`)}_handleOptionListChange(){this._updateValueAndDisplayValue(this.optionList)}_handleMenuListChange(){let e=this.menuList.map(e=>{let t=document.createElement(`sgds-combo-box-option`);return t.innerText=e.label,t.value=e.value,t.checkbox=this.multiSelect,t.active=this.value.includes(e.value),t});this.replaceChildren(...e)}_updateValueAndDisplayValue(e){let t=this.value.split(`;`),n=e.filter(({value:e})=>t.includes(e));this.selectedItems=[...n];let r=n.map(e=>e.value).join(`;`);r!==this.value&&!this.creatable&&(this.value=r),!this.multiSelect&&!this.async&&(this.displayValue=n[0]?.label||``),this.options.forEach(e=>e.active=t.includes(e.value))}async _handleInputChange(e){let t=e.target;this.displayValue=t.value,this.emit(`sgds-input`,{detail:{displayValue:this.displayValue}}),this.invalid=!1,this.showMenu(),this.displayValue===``&&!this.multiSelect&&(this.selectedItems=[],this.value=this.selectedItems.join(`;`),this.options.forEach(e=>e.active=!1),this._emitChangeEvents());let n=this.options.map(e=>({value:e.value,label:e.textContent.trim()}));this.filteredList=n.filter(e=>this.filterFunction(this.displayValue,e)),this.emptyMenuAfterFiltering=this.filteredList.length===0;let r=this.filteredList.map(e=>e.value);this.options.forEach(e=>{e.hidden=!r.includes(e.value)}),this._syncCreateOption()}async _handleItemSelected(e){let t=e.target;if(t.disabled)return;let n=t.textContent?.trim()??``,r=t.getAttribute(`value`)??n,i=this.filteredList.find(e=>e.value.toString()===r)||{label:n,value:r};this.multiSelect?(this.selectedItems.some(e=>e.value===i.value)||(this.selectedItems=[...this.selectedItems,i]),this.value=this.selectedItems.map(e=>e.value).join(`;`),t.active=!0,this.displayValue=``):(this.selectedItems.length===0||this.selectedItems[0].value!==i.value)&&(this.options.forEach(e=>e.active=!1),t.active=!0,this.selectedItems=[i],this.value=i.value.toString(),this.displayValue=i.label,this.hideMenu()),this._emitChangeEvents()}_handleItemUnselect(e){let t=e.target;if(t.disabled)return;t.removeAttribute(`active`);let n=t.textContent?.trim()??``,r=t.getAttribute(`value`)??n,i=this.filteredList.find(e=>e.value.toString()===r)||{label:n,value:r};this.selectedItems=this.selectedItems.filter(e=>e.value!==i.value),this.value=this.selectedItems.map(e=>e.value).join(`;`),this._emitChangeEvents()}async _handleBadgeDismissed(e,t){e.preventDefault();let n=t.value;this.options?.forEach(e=>e.value===n?e.active=!1:null),this.selectedItems=this.selectedItems.filter(e=>e.value!==t.value),this.value=this.selectedItems.map(e=>e.value).join(`;`),this._emitChangeEvents()}async _handleMultiSelectKeyDown(e){if(this.multiSelect&&e.key===`Backspace`&&this.multiSelect&&this.displayValue.trim()===``&&this.selectedItems.length>0){let e=this.selectedItems[this.selectedItems.length-1].value;this.options?.forEach(t=>t.value===e?t.active=!1:null),this.selectedItems=this.selectedItems.slice(0,-1),this.value=this.selectedItems.map(e=>e.value).join(`;`),this._emitChangeEvents()}}_handleFocus(){this.emit(`sgds-focus`)}async _handleInputBlur(e){e.preventDefault(),this.emit(`sgds-blur`);let t=e.relatedTarget;(this.creatable||this.multiSelect)&&t&&(this.contains(t)||this.shadowRoot?.contains(t))||(this.multiSelect?this.selectedItems.filter(({label:e})=>this.displayValue===e).length<=0&&(this.displayValue=``):this.displayValue=this.selectedItems.length>0?this.selectedItems[0].label:``)}async _handleClear(){this.value=this.displayValue=``,this.options?.forEach(e=>e.active=!1),this._emitChangeEvents(),(await this._input).focus(),this.showMenu()}async _mixinResetFormControl(){if(this.value=this.defaultValue,this.multiSelect){let e=this.value.split(`;`);this.options.forEach(t=>{t.active=e.includes(t.value)});let t=this.options.filter(t=>e.includes(t.value));this.selectedItems=t.map(e=>({value:e.value,label:e.textContent.trim()})),this._mixinResetValidity(await this._multiSelectInput)}else{this.options.forEach(e=>{e.active=e.value===this.value});let e=this.options.filter(e=>e.value===this.value);this.displayValue=e.length<=0?``:e[0].textContent.trim(),this._mixinResetValidity(await this._input)}}async _handleScroll(e){let t=e.target;if(t){let e=t.scrollHeight-t.clientHeight,n=Math.max(0,this.scrollBottomOffset);t.scrollTop>=e-n?(this.isScrollEnd||this.emit(`sgds-scroll-end`),this.isScrollEnd=!0):this.isScrollEnd=!1}}_renderInput(e){let t=this.hasFeedback,n=e;return y`
       <div
         ${Gg(this.myDropdown)}
         class="form-control-group ${O({disabled:this.disabled,readonly:this.readonly,"is-invalid":this.invalid&&t})}"
@@ -2892,7 +2892,7 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
             `:b}
         ${this.suffixIconTemplate}
       </div>
-    `}_syncCreateOption(){this._showCreateOption=this.creatable&&this.emptyMenuAfterFiltering&&this.displayValue!==``,this._showCreateOption&&(this._createOptionValue=this.displayValue)}_handleCreateOptionSlotChange(e){this._createOptionSlotContent=e.target.assignedElements({flatten:!0})}_handleCreateOptionClick(e){e.composedPath()[0].closest?.(`a, button`)||(this.emit(`sgds-create-option`,{detail:{value:this._createOptionValue}}),this.emptyMenuAfterFiltering=!1,this._syncCreateOption(),this.hideMenu())}_handleCreateOptionKeydown(e){if(e.key===`Enter`){this._handleCreateOptionClick(e);return}if(e.key===`ArrowUp`){e.preventDefault();let t=this._getActiveMenuItems();t.length>0&&this._setMenuItem(t.length-1);return}e.key===`ArrowDown`&&(e.preventDefault(),this._getActiveMenuItems().length>0&&this._setMenuItem(0))}_handleKeyboardMenuItemsEvent(e){let t=this.shadowRoot?.querySelector(`.create-option`);if(!(t?.matches(`:focus`)&&e.key===`Tab`)){if(this._showCreateOption&&(e.key===`ArrowDown`||e.key===`Tab`&&!e.shiftKey)){let n=this._getActiveMenuItems();if(n.length>0&&n[n.length-1].shadowRoot?.querySelector(`.dropdown-item`)?.matches(`:focus`)){e.preventDefault(),t?.focus();return}if(n.length===0){e.preventDefault(),t?.focus();return}}super._handleKeyboardMenuItemsEvent(e)}}_renderFeedbackMenu(){return this.loading?this._renderLoadingMenu():this.async?this.emptyMenuAsync||this.optionList.length===0?this._renderEmptyMenu():b:this.creatable&&this.emptyMenuAfterFiltering&&this.optionList.length>0?b:this.optionList.length===0||this.emptyMenuAfterFiltering&&this.optionList.length>0?this._renderEmptyMenu():b}render(){let e=(this.isFocused||this.menuIsOpen)&&this.value!==``&&this.clearable&&!this.readonly;return y`
+    `}_syncCreateOption(){this._showCreateOption=this.creatable&&this.emptyMenuAfterFiltering&&this.displayValue!==``,this._showCreateOption&&(this._createOptionValue=this.displayValue)}_handleCreateOptionSlotChange(e){this._createOptionSlotContent=e.target.assignedElements({flatten:!0})}_handleCreateOptionClick(e){e.composedPath()[0].closest?.(`a, button`)||(this.emptyMenuAfterFiltering=!1,this._syncCreateOption(),this.hideMenu(),this.emit(`sgds-create-option`,{detail:{value:this._createOptionValue}}))}_handleCreateOptionKeydown(e){if(e.key===`Enter`){this._handleCreateOptionClick(e);return}if(e.key===`ArrowUp`){e.preventDefault();let t=this._getActiveMenuItems();t.length>0&&this._setMenuItem(t.length-1);return}e.key===`ArrowDown`&&(e.preventDefault(),this._getActiveMenuItems().length>0&&this._setMenuItem(0))}_handleKeyboardMenuItemsEvent(e){let t=this.shadowRoot?.querySelector(`.create-option`);if(!(t?.matches(`:focus`)&&e.key===`Tab`)){if(this._showCreateOption&&(e.key===`ArrowDown`||e.key===`Tab`&&!e.shiftKey)){let n=this._getActiveMenuItems();if(n.length>0&&n[n.length-1].shadowRoot?.querySelector(`.dropdown-item`)?.matches(`:focus`)){e.preventDefault(),t?.focus();return}if(n.length===0){e.preventDefault(),t?.focus();return}}super._handleKeyboardMenuItemsEvent(e)}}_renderFeedbackMenu(){return this.loading?this._renderLoadingMenu():this.async?this.emptyMenuAsync||this.optionList.length===0?this._renderEmptyMenu():b:this._showCreateOption?b:this.optionList.length===0||this.emptyMenuAfterFiltering&&this.optionList.length>0?this._renderEmptyMenu():b}render(){let e=(this.isFocused||this.menuIsOpen)&&this.value!==``&&this.clearable&&!this.readonly;return y`
       <div
         class=${O({"form-control-container":!0,"m-width-256":!0,disabled:this.disabled,combobox:!0})}
         @keydown=${this._handleMultiSelectKeyDown}
@@ -3906,9 +3906,9 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
                 <slot name="description"></slot>
               </div>
             </div>
-            <div class="modal-body" tabindex="0">
+            <section class="modal-body" tabindex="0" aria-label="Modal body content">
               <slot></slot>
-            </div>
+            </section>
           </div class="modal-content">
           <div class="modal-footer">
             <slot name="footer"></slot>