@nysds/nys-modal 1.12.0 → 1.13.0

package/dist/nys-modal.js

@@ -8,7 +8,10 @@ var B = Object.defineProperty, i = (v, t, o, n) => {
 };
 let E = 0;
 const p = class p extends g {
-  // Lifecycle Methods
+  /**
+   * Lifecycle Methods
+   * --------------------------------------------------------------------------
+   */
   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;
   }
@@ -21,7 +24,10 @@ const p = class p extends g {
   async updated(t) {
     t.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()));
   }
-  // Functions
+  /**
+   * Functions
+   * --------------------------------------------------------------------------
+   */
   _hideBodyScroll() {
     this._originalBodyOverflow === null && (this._originalBodyOverflow = document.body.style.overflow), document.body.style.overflow = "hidden";
   }
@@ -105,7 +111,10 @@ const p = class p extends g {
       t.setAttribute("ariaLabel", "Close this window");
     }, 100));
   }
-  // Event Handlers
+  /**
+   * Event Handlers
+   * --------------------------------------------------------------------------
+   */
   async _handleKeydown(t) {
     if (this.open && (t.key === "Escape" && !this.mandatory && (t.preventDefault(), this._closeModal()), t.key === "Tab")) {
       const o = this.shadowRoot?.querySelector(".nys-modal");

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; // Counter for generating unique IDs\n\nexport class NysModal extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  @property({ type: String, reflect: true }) id = \"\";\n  @property({ type: String }) heading = \"\";\n  @property({ type: String }) subheading = \"\";\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: Boolean, reflect: true }) mandatory = false;\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  // Lifecycle Methods\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.id) {\n      this.id = `nys-{{componentName}}-${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  // Functions\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\n    if (prev && prev.tagName.toLowerCase() === \"nys-button\") {\n      const nysButton = prev as HTMLElement & {\n        getButtonElement: () => Promise<HTMLButtonElement>;\n      };\n      const innerBtn = await nysButton.getButtonElement();\n      if (innerBtn) {\n        innerBtn.focus();\n        return;\n      }\n    } else {\n      this._prevFocusedElement?.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  // Event Handlers\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 active = document.activeElement as HTMLElement | null;\n        let activeIndex = focusableElements.indexOf(active as HTMLElement);\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.\n         * For <nys-button>, focus the internal button. For other elements, 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          const isNysButton =\n            focusableElements[prevIndex].tagName.toLowerCase() === \"nys-button\";\n\n          // When users slot in \"nys-button\", we have to call focus for the native button within its shadowDOM.\n          // Hence the condition statement below\n          if (isNysButton) {\n            const nysButton = prevElement as HTMLElement & {\n              getButtonElement: () => Promise<HTMLButtonElement>;\n            };\n            const innerBtn = await nysButton.getButtonElement();\n            innerBtn?.focus();\n          } else {\n            prevElement.focus();\n          }\n        } else {\n          // Tab (go back to first focusable element if we're at last)\n          if (active === lastFocusableEl) {\n            e.preventDefault();\n            if (firstFocusableEl.tagName.toLowerCase() === \"nys-button\") {\n              const nysButton = firstFocusableEl as HTMLElement & {\n                getButtonElement: () => Promise<HTMLButtonElement>;\n              };\n              const innerBtn = await nysButton.getButtonElement();\n              innerBtn?.focus();\n            } else {\n              firstFocusableEl.focus();\n            }\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","e","changeProps","prev","innerBtn","slot","node","isMobile","el","btn","ariaDescriptions","dismissBtn","modal","knownFocusableElements","focusableElements","slotElements","assigned","actionBtn","firstFocusableEl","lastFocusableEl","active","activeIndex","prevIndex","prevElement","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 * `<nys-modal>` renders an accessible modal dialog.\n *\n * Supports headings, optional subheading, body content, and action buttons.\n * Manages focus trapping, escape key handling, and body scroll locking.\n *\n * @slot - Modal body content\n * @slot actions - Action buttons shown in the footer\n *\n * @fires nys-open - Emitted when the modal opens\n * @fires nys-close - Emitted when the modal closes\n */\n\nexport class NysModal extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  @property({ type: String, reflect: true }) id = \"\";\n  @property({ type: String }) heading = \"\";\n  @property({ type: String }) subheading = \"\";\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: Boolean, reflect: true }) mandatory = false;\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-{{componentName}}-${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\n    if (prev && prev.tagName.toLowerCase() === \"nys-button\") {\n      const nysButton = prev as HTMLElement & {\n        getButtonElement: () => Promise<HTMLButtonElement>;\n      };\n      const innerBtn = await nysButton.getButtonElement();\n      if (innerBtn) {\n        innerBtn.focus();\n        return;\n      }\n    } else {\n      this._prevFocusedElement?.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 active = document.activeElement as HTMLElement | null;\n        let activeIndex = focusableElements.indexOf(active as HTMLElement);\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.\n         * For <nys-button>, focus the internal button. For other elements, 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          const isNysButton =\n            focusableElements[prevIndex].tagName.toLowerCase() === \"nys-button\";\n\n          // When users slot in \"nys-button\", we have to call focus for the native button within its shadowDOM.\n          // Hence the condition statement below\n          if (isNysButton) {\n            const nysButton = prevElement as HTMLElement & {\n              getButtonElement: () => Promise<HTMLButtonElement>;\n            };\n            const innerBtn = await nysButton.getButtonElement();\n            innerBtn?.focus();\n          } else {\n            prevElement.focus();\n          }\n        } else {\n          // Tab (go back to first focusable element if we're at last)\n          if (active === lastFocusableEl) {\n            e.preventDefault();\n            if (firstFocusableEl.tagName.toLowerCase() === \"nys-button\") {\n              const nysButton = firstFocusableEl as HTMLElement & {\n                getButtonElement: () => Promise<HTMLButtonElement>;\n              };\n              const innerBtn = await nysButton.getButtonElement();\n              innerBtn?.focus();\n            } else {\n              firstFocusableEl.focus();\n            }\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","e","changeProps","prev","innerBtn","slot","node","isMobile","el","btn","ariaDescriptions","dismissBtn","modal","knownFocusableElements","focusableElements","slotElements","assigned","actionBtn","firstFocusableEl","lastFocusableEl","active","activeIndex","prevIndex","prevElement","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.12.0",
+  "version": "1.13.0",
   "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.12.0"
+    "@nysds/nys-button": "^1.13.0"
   },
   "devDependencies": {
     "lit": "^3.3.1",