@nysds/nys-modal 1.18.1 → 1.18.3

package/dist/nys-modal.js

@@ -5,7 +5,7 @@ import { property as d, state as v } from "lit/decorators.js";
    * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
    * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
    *
-   * Modal Component v1.18.1
+   * Modal Component v1.18.3
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
@@ -23,13 +23,24 @@ const f = class f extends _ {
    * --------------------------------------------------------------------------
    */
   constructor() {
-    super(), this.id = "", this.heading = "", this.subheading = "", this.open = !1, this.mandatory = !1, this.width = "md", this._actionButtonSlot = null, this._prevFocusedElement = null, this._originalBodyOverflow = null, this.hasBodySlots = !1, this.hasActionSlots = !1;
+    super(), this.id = "", this.heading = "", this.subheading = "", this.open = !1, this.mandatory = !1, this.width = "md", this._actionButtonSlot = null, this._prevFocusedElement = null, this._originalBodyOverflow = null, this._mobileMedia = window.matchMedia("(max-width: 480px)"), this.hasBodySlots = !1, this.hasActionSlots = !1, this._handleBodySlotChange = async () => {
+      const e = this.shadowRoot?.querySelector("slot");
+      e && (this.hasBodySlots = e.assignedNodes({ flatten: !0 }).some(
+        (o) => o.nodeType === Node.ELEMENT_NODE || o.textContent?.trim()
+      ));
+    };
   }
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `nys-modal-${Date.now()}-${x++}`), window.addEventListener("resize", () => this._updateSlottedButtonWidth()), window.addEventListener("keydown", (e) => this._handleKeydown(e));
+    super.connectedCallback(), this.id || (this.id = `nys-modal-${Date.now()}-${x++}`), this._mobileMedia.addEventListener(
+      "change",
+      this._updateSlottedButtonWidth
+    ), window.addEventListener("keydown", (e) => this._handleKeydown(e));
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._restoreBodyScroll(), window.removeEventListener("keydown", (e) => this._handleKeydown(e));
+    super.disconnectedCallback(), this._restoreBodyScroll(), this._mobileMedia.removeEventListener(
+      "change",
+      this._updateSlottedButtonWidth
+    ), window.removeEventListener("keydown", (e) => this._handleKeydown(e));
   }
   async updated(e) {
     e.has("open") && (this.open ? (this._hideBodyScroll(), this._dispatchOpenEvent(), await this.updateComplete, this._savePrevFocused(), this._focusOnModal(), this._updateDismissAria()) : (this._restorePrevFocused(), this._restoreBodyScroll(), this._dispatchCloseEvent(), this._updateDismissAria()));
@@ -53,13 +64,6 @@ const f = class f extends _ {
   async _restorePrevFocused() {
     this._prevFocusedElement?.focus(), this._prevFocusedElement = null;
   }
-  // Check if the slot contains stuff (aka user add texts & action buttons), and render visibility accordingly
-  async _handleBodySlotChange() {
-    const e = this.shadowRoot?.querySelector("slot");
-    e && (this.hasBodySlots = e.assignedNodes({ flatten: !0 }).some(
-      (o) => o.nodeType === Node.ELEMENT_NODE || o.textContent?.trim()
-    ));
-  }
   // Determines whether we hide the action buttons slot container based on if user put in action buttons
   async _handleActionSlotChange() {
     const e = this.shadowRoot?.querySelector(
@@ -73,7 +77,7 @@ const f = class f extends _ {
   // Therefore, we need to account for mobile size and screen resizes
   _updateSlottedButtonWidth() {
     if (!this._actionButtonSlot) return;
-    const e = window.innerWidth <= 480;
+    const e = this._mobileMedia.matches;
     this._actionButtonSlot.assignedElements().forEach((o) => {
       o.querySelectorAll("nys-button").forEach((l) => {
         e ? l?.setAttribute("fullWidth", "") : l?.removeAttribute("fullWidth");

package/dist/nys-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"nys-modal.js","sources":["../src/nys-modal.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-modal.scss?inline\";\n\nlet componentIdCounter = 0;\n\n/**\n * An accessible modal dialog with focus trapping, keyboard navigation, and scroll management.\n *\n * Set `open` to show the modal. Content goes in the default slot; action buttons in the `actions` slot.\n * Dismisses via close button or Escape key unless `mandatory` is set. Focus returns to trigger on close.\n *\n * @summary Accessible modal dialog with focus trap, keyboard support, and action slots.\n * @element nys-modal\n *\n * @slot - Default slot for body content.\n * @slot actions - Action buttons displayed in footer. Buttons auto-resize on mobile.\n *\n * @fires nys-open - Fired when modal opens. Detail: `{id}`.\n * @fires nys-close - Fired when modal closes. Detail: `{id}`.\n *\n * @example Basic modal\n * ```html\n * <nys-modal id=\"confirm-modal\" heading=\"Confirm action\" open>\n *   <p>Are you sure you want to proceed?</p>\n *   <div slot=\"actions\">\n *     <nys-button label=\"Cancel\" variant=\"outline\"></nys-button>\n *     <nys-button label=\"Confirm\" variant=\"filled\"></nys-button>\n *   </div>\n * </nys-modal>\n * ```\n */\n\nexport class NysModal extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /** Unique identifier. Auto-generated if not provided. */\n  @property({ type: String, reflect: true }) id = \"\";\n\n  /** Modal heading text. Required for accessibility. */\n  @property({ type: String }) heading = \"\";\n\n  /** Secondary heading below the main heading. */\n  @property({ type: String }) subheading = \"\";\n\n  /** Controls modal visibility. Set to `true` to show. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Prevents dismissal via close button or Escape key. User must take an action. */\n  @property({ type: Boolean, reflect: true }) mandatory = false;\n\n  /**\n   * Modal width: `sm` (400px), `md` (600px), or `lg` (800px).\n   * @default \"md\"\n   */\n  @property({ type: String, reflect: true }) width: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n  private _actionButtonSlot: HTMLSlotElement | null = null; // cache action button slots (if given) so we can manipulate their widths for mobile vs desktop\n  private _prevFocusedElement: HTMLElement | null = null;\n  private _originalBodyOverflow: string | null = null;\n\n  // Track slot contents to control what HTML is rendered\n  @state() private hasBodySlots = false;\n  @state() private hasActionSlots = false;\n\n  /**\n   * Lifecycle Methods\n   * --------------------------------------------------------------------------\n   */\n\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.id) {\n      this.id = `nys-modal-${Date.now()}-${componentIdCounter++}`;\n    }\n    window.addEventListener(\"resize\", () => this._updateSlottedButtonWidth());\n    window.addEventListener(\"keydown\", (e) => this._handleKeydown(e));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._restoreBodyScroll(); // make sure scroll is restored when modal is removed\n    window.removeEventListener(\"keydown\", (e) => this._handleKeydown(e));\n  }\n\n  async updated(changeProps: Map<string, any>) {\n    // Hide main body's scroll bar if modal is open/active\n    if (changeProps.has(\"open\")) {\n      if (this.open) {\n        this._hideBodyScroll();\n        this._dispatchOpenEvent();\n        await this.updateComplete;\n        this._savePrevFocused();\n        this._focusOnModal();\n        this._updateDismissAria();\n      } else {\n        this._restorePrevFocused();\n        this._restoreBodyScroll();\n        this._dispatchCloseEvent();\n        this._updateDismissAria();\n      }\n    }\n  }\n\n  /**\n   * Functions\n   * --------------------------------------------------------------------------\n   */\n\n  private _hideBodyScroll() {\n    if (this._originalBodyOverflow === null) {\n      this._originalBodyOverflow = document.body.style.overflow;\n    }\n    document.body.style.overflow = \"hidden\";\n  }\n\n  private _restoreBodyScroll() {\n    if (this._originalBodyOverflow !== null) {\n      document.body.style.overflow = this._originalBodyOverflow;\n      this._originalBodyOverflow = null;\n    }\n  }\n\n  private _savePrevFocused() {\n    this._prevFocusedElement = document.activeElement as HTMLElement;\n  }\n\n  private _focusOnModal() {\n    const modal = this.shadowRoot?.querySelector<HTMLElement>(\".nys-modal\");\n    modal?.focus();\n  }\n\n  private async _restorePrevFocused() {\n    const prev = this._prevFocusedElement;\n    prev?.focus();\n\n    this._prevFocusedElement = null;\n  }\n\n  // Check if the slot contains stuff (aka user add texts & action buttons), and render visibility accordingly\n  private async _handleBodySlotChange() {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(\"slot\");\n    if (!slot) return;\n    this.hasBodySlots = slot\n      .assignedNodes({ flatten: true })\n      .some(\n        (node) =>\n          node.nodeType === Node.ELEMENT_NODE || node.textContent?.trim(),\n      );\n  }\n\n  // Determines whether we hide the action buttons slot container based on if user put in action buttons\n  private async _handleActionSlotChange() {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n      'slot[name=\"actions\"]',\n    );\n    if (!slot) return;\n    this.hasActionSlots = slot\n      .assignedNodes({ flatten: true })\n      .some(\n        (node) =>\n          node.nodeType === Node.ELEMENT_NODE || node.textContent?.trim(),\n      );\n\n    // Cached the action button slot container so we can use it continuously for _updateSlottedButtonWidth() during screen resize\n    this._actionButtonSlot = slot;\n    // Update button widths immediately\n    this._updateSlottedButtonWidth();\n  }\n\n  // Design has it that the slotted action buttons should be fullWidth and display:column direction for mobile view.\n  // Therefore, we need to account for mobile size and screen resizes\n  private _updateSlottedButtonWidth() {\n    if (!this._actionButtonSlot) return; // use the cached variable\n    const isMobile = window.innerWidth <= 480;\n\n    this._actionButtonSlot.assignedElements().forEach((el) => {\n      el.querySelectorAll(\"nys-button\").forEach((btn) => {\n        if (isMobile) {\n          btn?.setAttribute(\"fullWidth\", \"\");\n        } else {\n          btn?.removeAttribute(\"fullWidth\");\n        }\n      });\n    });\n  }\n\n  private _dispatchOpenEvent() {\n    this.dispatchEvent(\n      new CustomEvent(\"nys-open\", {\n        detail: { id: this.id },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _dispatchCloseEvent() {\n    this.dispatchEvent(\n      new CustomEvent(\"nys-close\", {\n        detail: { id: this.id },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _getAriaDescribedBy() {\n    // Handling what aria-describedby needs to announce in VO based on if the subheading or slot contents exists\n    const ariaDescriptions: string[] = [];\n    if (this.subheading) {\n      ariaDescriptions.push(`${this.id}-subheading`);\n    }\n    if (this.hasBodySlots) {\n      ariaDescriptions.push(`${this.id}-desc`);\n    }\n    return ariaDescriptions.join(\" \");\n  }\n\n  /**\n   * This exist to prevent the VO for dismiss button from announcing itself between the heading & subheading/slot content.\n   * We add the \"Close this window\" ariaLabel after the initial VO is done\n   */\n  private _updateDismissAria() {\n    const dismissBtn = this.shadowRoot?.querySelector(\"nys-button\");\n    if (!dismissBtn) return;\n\n    // Hide from VO initially\n    dismissBtn.setAttribute(\"ariaLabel\", \" \");\n\n    if (this.open) {\n      // After focus is moved into modal, update label\n      setTimeout(() => {\n        dismissBtn.setAttribute(\"ariaLabel\", \"Close this window\");\n      }, 100);\n    }\n  }\n\n  /**\n   * Event Handlers\n   * --------------------------------------------------------------------------\n   */\n\n  private async _handleKeydown(e: KeyboardEvent) {\n    if (!this.open) return;\n\n    // Exit the modal for \"escape\" key\n    if (e.key === \"Escape\" && !this.mandatory) {\n      e.preventDefault();\n      this._closeModal();\n    }\n\n    // Trap focus to be within the modal only\n    if (e.key === \"Tab\") {\n      const modal = this.shadowRoot?.querySelector(\".nys-modal\");\n      if (!modal) return;\n\n      // Gather all elements from slots + dismissible btn\n      const knownFocusableElements =\n        'a[href], area[href], button:not([disabled]), details, iframe, object, input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [contentEditable=\"true\"], [tabindex]:not([tabindex^=\"-\"])';\n      const focusableElements: HTMLElement[] = [];\n      const dismissBtn = modal.querySelector(\"nys-button\") as HTMLElement;\n\n      if (dismissBtn) {\n        focusableElements.push(dismissBtn);\n      }\n\n      // Gather from slot elements to store the focusable elements in focusableElements for focus trapping\n      const slotElements = Array.from(modal.querySelectorAll(\"slot\"));\n      for (const slot of slotElements) {\n        const assigned = slot.assignedElements({ flatten: true });\n        for (const el of assigned) {\n          if (el instanceof HTMLElement && el.matches(knownFocusableElements)) {\n            focusableElements.push(el);\n          }\n          // also account for the action slot container that has nys-buttons\n          el.querySelectorAll<HTMLElement>(\"nys-button\").forEach(\n            (actionBtn) => {\n              focusableElements.push(actionBtn);\n            },\n          );\n        }\n      }\n\n      if (focusableElements.length > 0) {\n        // Laying out the starting (i.e. dismiss btn) and ending elements for looping focus elements\n        const firstFocusableEl = focusableElements[0];\n        const lastFocusableEl = focusableElements[focusableElements.length - 1];\n        let activeElement = document.activeElement as HTMLElement | null;\n        let activeIndex = focusableElements.indexOf(\n          activeElement as HTMLElement,\n        );\n\n        /**\n         * Move focus backward when Shift+Tab is pressed.\n         * Focus goes to the previous element in focusableElements.\n         * If currently at the first element, wrap around to the last element and focus directly.\n         */\n        if (e.shiftKey) {\n          e.preventDefault();\n\n          let prevIndex = activeIndex - 1;\n          if (prevIndex < 0) {\n            prevIndex = focusableElements.length - 1; // wrap back to lastFocusableEl\n          }\n\n          const prevElement = focusableElements[prevIndex];\n          prevElement.focus();\n        } else {\n          // Tab (go back to first focusable element if we're at last)\n          if (activeElement === lastFocusableEl) {\n            e.preventDefault();\n            firstFocusableEl.focus();\n          }\n        }\n      }\n    }\n  }\n\n  private _closeModal() {\n    this.open = false;\n    this._dispatchCloseEvent();\n  }\n\n  render() {\n    return this.open\n      ? html`<div\n          class=\"nys-modal-overlay\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"${this.id}-heading\"\n          aria-describedby=\"${this._getAriaDescribedBy()}\"\n        >\n          <div class=\"nys-modal\" tabindex=\"-1\">\n            <div class=\"nys-modal_header\">\n              <div class=\"nys-modal_header-inner\">\n                <h2 id=\"${this.id}-heading\">${this.heading}</h2>\n                ${!this.mandatory\n                  ? html`<nys-button\n                      id=\"dismiss-modal\"\n                      circle\n                      icon=\"close\"\n                      variant=\"ghost\"\n                      @nys-click=${this._closeModal}\n                    ></nys-button>`\n                  : \"\"}\n              </div>\n              ${this.subheading\n                ? html`<p id=\"${this.id}-subheading\">${this.subheading}</p>`\n                : \"\"}\n            </div>\n\n            <div\n              id=\"${this.id}-desc\"\n              class=\"nys-modal_body ${!this.hasBodySlots ? \"hidden\" : \"\"}\"\n            >\n              <div class=\"nys-modal_body-inner\">\n                <slot @slotchange=${this._handleBodySlotChange}></slot>\n              </div>\n            </div>\n\n            <div\n              class=\"nys-modal_footer ${!this.hasActionSlots ? \"hidden\" : \"\"}\"\n            >\n              <slot\n                name=\"actions\"\n                @slotchange=${this._handleActionSlotChange}\n              ></slot>\n            </div>\n          </div>\n        </div>`\n      : \"\";\n  }\n}\n\nif (!customElements.get(\"nys-modal\")) {\n  customElements.define(\"nys-modal\", NysModal);\n}\n"],"names":["componentIdCounter","_NysModal","LitElement","changeProps","slot","node","isMobile","el","btn","ariaDescriptions","dismissBtn","modal","knownFocusableElements","focusableElements","slotElements","assigned","actionBtn","firstFocusableEl","lastFocusableEl","activeElement","activeIndex","prevIndex","html","unsafeCSS","styles","NysModal","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"nys-modal.js","sources":["../src/nys-modal.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-modal.scss?inline\";\n\nlet componentIdCounter = 0;\n\n/**\n * An accessible modal dialog with focus trapping, keyboard navigation, and scroll management.\n *\n * Set `open` to show the modal. Content goes in the default slot; action buttons in the `actions` slot.\n * Dismisses via close button or Escape key unless `mandatory` is set. Focus returns to trigger on close.\n *\n * @summary Accessible modal dialog with focus trap, keyboard support, and action slots.\n * @element nys-modal\n *\n * @slot - Default slot for body content.\n * @slot actions - Action buttons displayed in footer. Buttons auto-resize on mobile.\n *\n * @fires nys-open - Fired when modal opens. Detail: `{id}`.\n * @fires nys-close - Fired when modal closes. Detail: `{id}`.\n *\n * @example Basic modal\n * ```html\n * <nys-modal id=\"confirm-modal\" heading=\"Confirm action\" open>\n *   <p>Are you sure you want to proceed?</p>\n *   <div slot=\"actions\">\n *     <nys-button label=\"Cancel\" variant=\"outline\"></nys-button>\n *     <nys-button label=\"Confirm\" variant=\"filled\"></nys-button>\n *   </div>\n * </nys-modal>\n * ```\n */\n\nexport class NysModal extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /** Unique identifier. Auto-generated if not provided. */\n  @property({ type: String, reflect: true }) id = \"\";\n\n  /** Modal heading text. Required for accessibility. */\n  @property({ type: String }) heading = \"\";\n\n  /** Secondary heading below the main heading. */\n  @property({ type: String }) subheading = \"\";\n\n  /** Controls modal visibility. Set to `true` to show. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Prevents dismissal via close button or Escape key. User must take an action. */\n  @property({ type: Boolean, reflect: true }) mandatory = false;\n\n  /**\n   * Modal width: `sm` (400px), `md` (600px), or `lg` (800px).\n   * @default \"md\"\n   */\n  @property({ type: String, reflect: true }) width: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n  private _actionButtonSlot: HTMLSlotElement | null = null; // cache action button slots (if given) so we can manipulate their widths for mobile vs desktop\n  private _prevFocusedElement: HTMLElement | null = null;\n  private _originalBodyOverflow: string | null = null;\n  private _mobileMedia = window.matchMedia(\"(max-width: 480px)\");\n\n  // Track slot contents to control what HTML is rendered\n  @state() private hasBodySlots = false;\n  @state() private hasActionSlots = false;\n\n  /**\n   * Lifecycle Methods\n   * --------------------------------------------------------------------------\n   */\n\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.id) {\n      this.id = `nys-modal-${Date.now()}-${componentIdCounter++}`;\n    }\n    this._mobileMedia.addEventListener(\n      \"change\",\n      this._updateSlottedButtonWidth,\n    );\n    window.addEventListener(\"keydown\", (e) => this._handleKeydown(e));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._restoreBodyScroll(); // make sure scroll is restored when modal is removed\n    this._mobileMedia.removeEventListener(\n      \"change\",\n      this._updateSlottedButtonWidth,\n    );\n    window.removeEventListener(\"keydown\", (e) => this._handleKeydown(e));\n  }\n\n  async updated(changeProps: Map<string, any>) {\n    // Hide main body's scroll bar if modal is open/active\n    if (changeProps.has(\"open\")) {\n      if (this.open) {\n        this._hideBodyScroll();\n        this._dispatchOpenEvent();\n        await this.updateComplete;\n        this._savePrevFocused();\n        this._focusOnModal();\n        this._updateDismissAria();\n      } else {\n        this._restorePrevFocused();\n        this._restoreBodyScroll();\n        this._dispatchCloseEvent();\n        this._updateDismissAria();\n      }\n    }\n  }\n\n  /**\n   * Functions\n   * --------------------------------------------------------------------------\n   */\n\n  private _hideBodyScroll() {\n    if (this._originalBodyOverflow === null) {\n      this._originalBodyOverflow = document.body.style.overflow;\n    }\n    document.body.style.overflow = \"hidden\";\n  }\n\n  private _restoreBodyScroll() {\n    if (this._originalBodyOverflow !== null) {\n      document.body.style.overflow = this._originalBodyOverflow;\n      this._originalBodyOverflow = null;\n    }\n  }\n\n  private _savePrevFocused() {\n    this._prevFocusedElement = document.activeElement as HTMLElement;\n  }\n\n  private _focusOnModal() {\n    const modal = this.shadowRoot?.querySelector<HTMLElement>(\".nys-modal\");\n    modal?.focus();\n  }\n\n  private async _restorePrevFocused() {\n    const prev = this._prevFocusedElement;\n    prev?.focus();\n\n    this._prevFocusedElement = null;\n  }\n\n  // Check if the slot contains stuff (aka user add texts & action buttons), and render visibility accordingly\n  private _handleBodySlotChange = async () => {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(\"slot\");\n    if (!slot) return;\n    this.hasBodySlots = slot\n      .assignedNodes({ flatten: true })\n      .some(\n        (node) =>\n          node.nodeType === Node.ELEMENT_NODE || node.textContent?.trim(),\n      );\n  };\n\n  // Determines whether we hide the action buttons slot container based on if user put in action buttons\n  private async _handleActionSlotChange() {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n      'slot[name=\"actions\"]',\n    );\n    if (!slot) return;\n    this.hasActionSlots = slot\n      .assignedNodes({ flatten: true })\n      .some(\n        (node) =>\n          node.nodeType === Node.ELEMENT_NODE || node.textContent?.trim(),\n      );\n\n    // Cached the action button slot container so we can use it continuously for _updateSlottedButtonWidth() during screen resize\n    this._actionButtonSlot = slot;\n    // Update button widths immediately\n    this._updateSlottedButtonWidth();\n  }\n\n  // Design has it that the slotted action buttons should be fullWidth and display:column direction for mobile view.\n  // Therefore, we need to account for mobile size and screen resizes\n  private _updateSlottedButtonWidth() {\n    if (!this._actionButtonSlot) return; // use the cached variable\n    const isMobile = this._mobileMedia.matches;\n\n    this._actionButtonSlot.assignedElements().forEach((el) => {\n      el.querySelectorAll(\"nys-button\").forEach((btn) => {\n        if (isMobile) {\n          btn?.setAttribute(\"fullWidth\", \"\");\n        } else {\n          btn?.removeAttribute(\"fullWidth\");\n        }\n      });\n    });\n  }\n\n  private _dispatchOpenEvent() {\n    this.dispatchEvent(\n      new CustomEvent(\"nys-open\", {\n        detail: { id: this.id },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _dispatchCloseEvent() {\n    this.dispatchEvent(\n      new CustomEvent(\"nys-close\", {\n        detail: { id: this.id },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _getAriaDescribedBy() {\n    // Handling what aria-describedby needs to announce in VO based on if the subheading or slot contents exists\n    const ariaDescriptions: string[] = [];\n    if (this.subheading) {\n      ariaDescriptions.push(`${this.id}-subheading`);\n    }\n    if (this.hasBodySlots) {\n      ariaDescriptions.push(`${this.id}-desc`);\n    }\n    return ariaDescriptions.join(\" \");\n  }\n\n  /**\n   * This exist to prevent the VO for dismiss button from announcing itself between the heading & subheading/slot content.\n   * We add the \"Close this window\" ariaLabel after the initial VO is done\n   */\n  private _updateDismissAria() {\n    const dismissBtn = this.shadowRoot?.querySelector(\"nys-button\");\n    if (!dismissBtn) return;\n\n    // Hide from VO initially\n    dismissBtn.setAttribute(\"ariaLabel\", \" \");\n\n    if (this.open) {\n      // After focus is moved into modal, update label\n      setTimeout(() => {\n        dismissBtn.setAttribute(\"ariaLabel\", \"Close this window\");\n      }, 100);\n    }\n  }\n\n  /**\n   * Event Handlers\n   * --------------------------------------------------------------------------\n   */\n\n  private async _handleKeydown(e: KeyboardEvent) {\n    if (!this.open) return;\n\n    // Exit the modal for \"escape\" key\n    if (e.key === \"Escape\" && !this.mandatory) {\n      e.preventDefault();\n      this._closeModal();\n    }\n\n    // Trap focus to be within the modal only\n    if (e.key === \"Tab\") {\n      const modal = this.shadowRoot?.querySelector(\".nys-modal\");\n      if (!modal) return;\n\n      // Gather all elements from slots + dismissible btn\n      const knownFocusableElements =\n        'a[href], area[href], button:not([disabled]), details, iframe, object, input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [contentEditable=\"true\"], [tabindex]:not([tabindex^=\"-\"])';\n      const focusableElements: HTMLElement[] = [];\n      const dismissBtn = modal.querySelector(\"nys-button\") as HTMLElement;\n\n      if (dismissBtn) {\n        focusableElements.push(dismissBtn);\n      }\n\n      // Gather from slot elements to store the focusable elements in focusableElements for focus trapping\n      const slotElements = Array.from(modal.querySelectorAll(\"slot\"));\n      for (const slot of slotElements) {\n        const assigned = slot.assignedElements({ flatten: true });\n        for (const el of assigned) {\n          if (el instanceof HTMLElement && el.matches(knownFocusableElements)) {\n            focusableElements.push(el);\n          }\n          // also account for the action slot container that has nys-buttons\n          el.querySelectorAll<HTMLElement>(\"nys-button\").forEach(\n            (actionBtn) => {\n              focusableElements.push(actionBtn);\n            },\n          );\n        }\n      }\n\n      if (focusableElements.length > 0) {\n        // Laying out the starting (i.e. dismiss btn) and ending elements for looping focus elements\n        const firstFocusableEl = focusableElements[0];\n        const lastFocusableEl = focusableElements[focusableElements.length - 1];\n        let activeElement = document.activeElement as HTMLElement | null;\n        let activeIndex = focusableElements.indexOf(\n          activeElement as HTMLElement,\n        );\n\n        /**\n         * Move focus backward when Shift+Tab is pressed.\n         * Focus goes to the previous element in focusableElements.\n         * If currently at the first element, wrap around to the last element and focus directly.\n         */\n        if (e.shiftKey) {\n          e.preventDefault();\n\n          let prevIndex = activeIndex - 1;\n          if (prevIndex < 0) {\n            prevIndex = focusableElements.length - 1; // wrap back to lastFocusableEl\n          }\n\n          const prevElement = focusableElements[prevIndex];\n          prevElement.focus();\n        } else {\n          // Tab (go back to first focusable element if we're at last)\n          if (activeElement === lastFocusableEl) {\n            e.preventDefault();\n            firstFocusableEl.focus();\n          }\n        }\n      }\n    }\n  }\n\n  private _closeModal() {\n    this.open = false;\n    this._dispatchCloseEvent();\n  }\n\n  render() {\n    return this.open\n      ? html`<div\n          class=\"nys-modal-overlay\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"${this.id}-heading\"\n          aria-describedby=\"${this._getAriaDescribedBy()}\"\n        >\n          <div class=\"nys-modal\" tabindex=\"-1\">\n            <div class=\"nys-modal_header\">\n              <div class=\"nys-modal_header-inner\">\n                <h2 id=\"${this.id}-heading\">${this.heading}</h2>\n                ${!this.mandatory\n                  ? html`<nys-button\n                      id=\"dismiss-modal\"\n                      circle\n                      icon=\"close\"\n                      variant=\"ghost\"\n                      @nys-click=${this._closeModal}\n                    ></nys-button>`\n                  : \"\"}\n              </div>\n              ${this.subheading\n                ? html`<p id=\"${this.id}-subheading\">${this.subheading}</p>`\n                : \"\"}\n            </div>\n\n            <div\n              id=\"${this.id}-desc\"\n              class=\"nys-modal_body ${!this.hasBodySlots ? \"hidden\" : \"\"}\"\n            >\n              <div class=\"nys-modal_body-inner\">\n                <slot @slotchange=${this._handleBodySlotChange}></slot>\n              </div>\n            </div>\n\n            <div\n              class=\"nys-modal_footer ${!this.hasActionSlots ? \"hidden\" : \"\"}\"\n            >\n              <slot\n                name=\"actions\"\n                @slotchange=${this._handleActionSlotChange}\n              ></slot>\n            </div>\n          </div>\n        </div>`\n      : \"\";\n  }\n}\n\nif (!customElements.get(\"nys-modal\")) {\n  customElements.define(\"nys-modal\", NysModal);\n}\n"],"names":["componentIdCounter","_NysModal","LitElement","slot","node","changeProps","isMobile","el","btn","ariaDescriptions","dismissBtn","modal","knownFocusableElements","focusableElements","slotElements","assigned","actionBtn","firstFocusableEl","lastFocusableEl","activeElement","activeIndex","prevIndex","html","unsafeCSS","styles","NysModal","__decorateClass","property","state"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-modal",
-  "version": "1.18.1",
+  "version": "1.18.3",
   "description": "The Modal component from the NYS Design System.",
   "module": "dist/nys-modal.js",
   "types": "dist/index.d.ts",
@@ -22,7 +22,7 @@
     "test:watch": "vite build && wtr --watch"
   },
   "dependencies": {
-    "@nysds/nys-button": "^1.18.1"
+    "@nysds/nys-button": "^1.18.3"
   },
   "devDependencies": {
     "lit": "^3.3.1",