@nysds/nys-modal 1.11.4 → 1.12.0

package/dist/nys-modal.js

@@ -1,28 +1,19 @@
-import { LitElement as g, unsafeCSS as b, html as p } from "lit";
-import { property as r, state as _ } from "lit/decorators.js";
+import { LitElement as g, unsafeCSS as b, html as f } from "lit";
+import { property as d, state as _ } from "lit/decorators.js";
 const w = ':host{--_nys-modal-width: 480px;--_nys-modal-min-width: 320px;--_nys-modal-border-radius: var(--nys-radius-lg, 8px);--_nys-modal-border-color: var(--nys-color-neutral-200, #bec0c1);--_nys-modal-border-width: 1px;--_nys-modal-background-color: var(--nys-color-surface, #fff);--_nys-modal-margin: var(--nys-space-250, 20px);--_nys-modal-padding: var(--nys-space-300, 24px);--_nys-modal-gap: var(--nys-space-200, 16px);--_nys-modal-background-color--overlay: var( --nys-color-black-transparent-700, rgba(27, 27, 27, .7) );--_nys-modal-gap--header: var(--nys-space-100, 8px);--_nys-modal-gap--footer: var(--nys-space-250, 20px);--_nys-modal-font-size: var(--nys-font-size-ui-md, 16px);--_nys-modal-font-weight--header: var(--nys-font-weight-bold, 700);--_nys-modal-font-weight--subheader: var(--nys-font-weight-regular, 400);--_nys-modal-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-modal-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) )}*{box-sizing:border-box}::slotted(p){margin:0!important}h2,p{flex:1;margin:0}.nys-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;z-index:1000;background:var(--_nys-modal-background-color--overlay)}.nys-modal{display:flex;flex-direction:column;margin:var(--_nys-modal-margin);padding:var(--_nys-modal-padding);gap:var(--_nys-modal-gap);width:var(--_nys-modal-width);min-width:var(--_nys-modal-min-width);border-radius:var(--_nys-modal-border-radius);border:var(--_nys-modal-border-width) solid var(--_nys-modal-border-color);font-family:var(--_nys-modal-font-family);font-size:var(--_nys-modal-font-size);line-height:var(--_nys-modal-line-height);background:var(--_nys-modal-background-color);position:relative;z-index:10000}.nys-modal_header{display:flex;flex-direction:column;align-items:flex-start;gap:var(--_nys-modal-gap--header)}.nys-modal_header p{font-weight:var(--_nys-modal-font-weight--subheader)}.nys-modal_header-inner{display:flex;align-items:center;width:100%;font-weight:var(--_nys-modal-font-weight--header)}.nys-modal_body{display:flex;flex-direction:column;align-items:flex-start}.nys-modal_body-inner{overflow:auto;width:100%;max-height:45vh}.nys-modal_body.hidden{display:none}.nys-modal_footer ::slotted(*){display:flex;flex-direction:column-reverse;justify-content:center;gap:var(--_nys-modal-gap--footer);align-self:stretch}.nys-modal_footer.hidden ::slotted(*){display:none}@media(min-width:480px){.nys-modal_body-inner{max-height:25vh}.nys-modal_footer ::slotted(*){flex-direction:row;justify-content:flex-end;align-items:center}}';
-var B = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (v, t, o, s) => {
-  for (var e = s > 1 ? void 0 : s ? E(t, o) : t, d = v.length - 1, h; d >= 0; d--)
-    (h = v[d]) && (e = (s ? h(t, o, e) : h(e)) || e);
-  return s && e && B(t, o, e), e;
+var B = Object.defineProperty, i = (v, t, o, n) => {
+  for (var e = void 0, l = v.length - 1, c; l >= 0; l--)
+    (c = v[l]) && (e = c(t, o, e) || e);
+  return e && B(t, o, e), e;
 };
-let x = 0;
-var i;
-const n = (i = class extends g {
-  /**************** Lifecycle Methods ****************/
+let E = 0;
+const p = class p extends g {
+  // 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;
-  }
-  get width() {
-    return this._width;
-  }
-  set width(t) {
-    this._width = i.VALID_WIDTHS.includes(
-      t
-    ) ? t : "md";
+    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;
   }
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `nys-{{componentName}}-${Date.now()}-${x++}`), window.addEventListener("resize", () => this._updateSlottedButtonWidth()), window.addEventListener("keydown", (t) => this._handleKeydown(t));
+    super.connectedCallback(), this.id || (this.id = `nys-{{componentName}}-${Date.now()}-${E++}`), window.addEventListener("resize", () => this._updateSlottedButtonWidth()), window.addEventListener("keydown", (t) => this._handleKeydown(t));
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._restoreBodyScroll(), window.removeEventListener("keydown", (t) => this._handleKeydown(t));
@@ -30,7 +21,7 @@ const n = (i = class 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";
   }
@@ -46,9 +37,9 @@ const n = (i = class extends g {
   async _restorePrevFocused() {
     const t = this._prevFocusedElement;
     if (t && t.tagName.toLowerCase() === "nys-button") {
-      const s = await t.getButtonElement();
-      if (s) {
-        s.focus();
+      const n = await t.getButtonElement();
+      if (n) {
+        n.focus();
         return;
       }
     } else
@@ -77,8 +68,8 @@ const n = (i = class extends g {
     if (!this._actionButtonSlot) return;
     const t = window.innerWidth <= 480;
     this._actionButtonSlot.assignedElements().forEach((o) => {
-      o.querySelectorAll("nys-button").forEach((s) => {
-        t ? s?.setAttribute("fullWidth", "") : s?.removeAttribute("fullWidth");
+      o.querySelectorAll("nys-button").forEach((n) => {
+        t ? n?.setAttribute("fullWidth", "") : n?.removeAttribute("fullWidth");
       });
     });
   }
@@ -114,34 +105,34 @@ const n = (i = class 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");
       if (!o) return;
-      const s = 'a[href], area[href], button:not([disabled]), details, iframe, object, input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [contentEditable="true"], [tabindex]:not([tabindex^="-"])', e = [], d = o.querySelector("nys-button");
-      d && e.push(d);
-      const h = Array.from(o.querySelectorAll("slot"));
-      for (const c of h) {
-        const u = c.assignedElements({ flatten: !0 });
-        for (const l of u)
-          l instanceof HTMLElement && l.matches(s) && e.push(l), l.querySelectorAll("nys-button").forEach(
-            (m) => {
-              e.push(m);
+      const 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^="-"])', e = [], l = o.querySelector("nys-button");
+      l && e.push(l);
+      const c = Array.from(o.querySelectorAll("slot"));
+      for (const r of c) {
+        const y = r.assignedElements({ flatten: !0 });
+        for (const a of y)
+          a instanceof HTMLElement && a.matches(n) && e.push(a), a.querySelectorAll("nys-button").forEach(
+            (u) => {
+              e.push(u);
             }
           );
       }
       if (e.length > 0) {
-        const c = e[0], u = e[e.length - 1];
-        let l = document.activeElement, m = e.indexOf(l);
+        const r = e[0], y = e[e.length - 1];
+        let a = document.activeElement, u = e.indexOf(a);
         if (t.shiftKey) {
           t.preventDefault();
-          let y = m - 1;
-          y < 0 && (y = e.length - 1);
-          const f = e[y];
-          e[y].tagName.toLowerCase() === "nys-button" ? (await f.getButtonElement())?.focus() : f.focus();
+          let h = u - 1;
+          h < 0 && (h = e.length - 1);
+          const m = e[h];
+          e[h].tagName.toLowerCase() === "nys-button" ? (await m.getButtonElement())?.focus() : m.focus();
         } else
-          l === u && (t.preventDefault(), c.tagName.toLowerCase() === "nys-button" ? (await c.getButtonElement())?.focus() : c.focus());
+          a === y && (t.preventDefault(), r.tagName.toLowerCase() === "nys-button" ? (await r.getButtonElement())?.focus() : r.focus());
       }
     }
   }
@@ -149,7 +140,7 @@ const n = (i = class extends g {
     this.open = !1, this._dispatchCloseEvent();
   }
   render() {
-    return this.open ? p`<div
+    return this.open ? f`<div
           class="nys-modal-overlay"
           role="dialog"
           aria-modal="true"
@@ -160,7 +151,7 @@ const n = (i = class extends g {
             <div class="nys-modal_header">
               <div class="nys-modal_header-inner">
                 <h2 id="${this.id}-heading">${this.heading}</h2>
-                ${this.mandatory ? "" : p`<nys-button
+                ${this.mandatory ? "" : f`<nys-button
                       id="dismiss-modal"
                       circle
                       icon="close"
@@ -168,7 +159,7 @@ const n = (i = class extends g {
                       @nys-click=${this._closeModal}
                     ></nys-button>`}
               </div>
-              ${this.subheading ? p`<p id="${this.id}-subheading">${this.subheading}</p>` : ""}
+              ${this.subheading ? f`<p id="${this.id}-subheading">${this.subheading}</p>` : ""}
             </div>
 
             <div
@@ -191,34 +182,35 @@ const n = (i = class extends g {
           </div>
         </div>` : "";
   }
-}, i.styles = b(w), i.VALID_WIDTHS = ["sm", "md", "lg"], i);
-a([
-  r({ type: String, reflect: !0 })
-], n.prototype, "id", 2);
-a([
-  r({ type: String })
-], n.prototype, "heading", 2);
-a([
-  r({ type: String })
-], n.prototype, "subheading", 2);
-a([
-  r({ type: Boolean, reflect: !0 })
-], n.prototype, "open", 2);
-a([
-  r({ type: Boolean, reflect: !0 })
-], n.prototype, "mandatory", 2);
-a([
-  r({ reflect: !0 })
-], n.prototype, "width", 1);
-a([
+};
+p.styles = b(w);
+let s = p;
+i([
+  d({ type: String, reflect: !0 })
+], s.prototype, "id");
+i([
+  d({ type: String })
+], s.prototype, "heading");
+i([
+  d({ type: String })
+], s.prototype, "subheading");
+i([
+  d({ type: Boolean, reflect: !0 })
+], s.prototype, "open");
+i([
+  d({ type: Boolean, reflect: !0 })
+], s.prototype, "mandatory");
+i([
+  d({ type: String, reflect: !0 })
+], s.prototype, "width");
+i([
   _()
-], n.prototype, "hasBodySlots", 2);
-a([
+], s.prototype, "hasBodySlots");
+i([
   _()
-], n.prototype, "hasActionSlots", 2);
-let S = n;
-customElements.get("nys-modal") || customElements.define("nys-modal", S);
+], s.prototype, "hasActionSlots");
+customElements.get("nys-modal") || customElements.define("nys-modal", s);
 export {
-  S as NysModal
+  s as NysModal
 };
 //# sourceMappingURL=nys-modal.js.map

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\n  private static readonly VALID_WIDTHS = [\"sm\", \"md\", \"lg\"] as const;\n  private _width: (typeof NysModal.VALID_WIDTHS)[number] = \"md\";\n  @property({ reflect: true })\n  get width(): (typeof NysModal.VALID_WIDTHS)[number] {\n    return this._width;\n  }\n  set width(value: string) {\n    this._width = NysModal.VALID_WIDTHS.includes(\n      value as (typeof NysModal.VALID_WIDTHS)[number],\n    )\n      ? (value as (typeof NysModal.VALID_WIDTHS)[number])\n      : \"md\";\n  }\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","_a","LitElement","value","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","__decorateClass","property","state","NysModal"],"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; // 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":";;;;;;;;AAKA,IAAIA,IAAqB;AAElB,MAAMC,IAAN,MAAMA,UAAiBC,EAAW;AAAA;AAAA,EAmBvC,cAAc;AACZ,UAAA,GAjByC,KAAA,KAAK,IACpB,KAAA,UAAU,IACV,KAAA,aAAa,IACG,KAAA,OAAO,IACP,KAAA,YAAY,IACb,KAAA,QAA4B,MAEvE,KAAQ,oBAA4C,MACpD,KAAQ,sBAA0C,MAClD,KAAQ,wBAAuC,MAGtC,KAAQ,eAAe,IACvB,KAAQ,iBAAiB;AAAA,EAKlC;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA,GACD,KAAK,OACR,KAAK,KAAK,yBAAyB,KAAK,KAAK,IAAIF,GAAoB,KAEvE,OAAO,iBAAiB,UAAU,MAAM,KAAK,2BAA2B,GACxE,OAAO,iBAAiB,WAAW,CAACG,MAAM,KAAK,eAAeA,CAAC,CAAC;AAAA,EAClE;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAA,GACN,KAAK,mBAAA,GACL,OAAO,oBAAoB,WAAW,CAACA,MAAM,KAAK,eAAeA,CAAC,CAAC;AAAA,EACrE;AAAA,EAEA,MAAM,QAAQC,GAA+B;AAE3C,IAAIA,EAAY,IAAI,MAAM,MACpB,KAAK,QACP,KAAK,gBAAA,GACL,KAAK,mBAAA,GACL,MAAM,KAAK,gBACX,KAAK,iBAAA,GACL,KAAK,cAAA,GACL,KAAK,mBAAA,MAEL,KAAK,oBAAA,GACL,KAAK,mBAAA,GACL,KAAK,oBAAA,GACL,KAAK,mBAAA;AAAA,EAGX;AAAA;AAAA,EAGQ,kBAAkB;AACxB,IAAI,KAAK,0BAA0B,SACjC,KAAK,wBAAwB,SAAS,KAAK,MAAM,WAEnD,SAAS,KAAK,MAAM,WAAW;AAAA,EACjC;AAAA,EAEQ,qBAAqB;AAC3B,IAAI,KAAK,0BAA0B,SACjC,SAAS,KAAK,MAAM,WAAW,KAAK,uBACpC,KAAK,wBAAwB;AAAA,EAEjC;AAAA,EAEQ,mBAAmB;AACzB,SAAK,sBAAsB,SAAS;AAAA,EACtC;AAAA,EAEQ,gBAAgB;AAEtB,IADc,KAAK,YAAY,cAA2B,YAAY,GAC/D,MAAA;AAAA,EACT;AAAA,EAEA,MAAc,sBAAsB;AAClC,UAAMC,IAAO,KAAK;AAElB,QAAIA,KAAQA,EAAK,QAAQ,YAAA,MAAkB,cAAc;AAIvD,YAAMC,IAAW,MAHCD,EAGe,iBAAA;AACjC,UAAIC,GAAU;AACZ,QAAAA,EAAS,MAAA;AACT;AAAA,MACF;AAAA,IACF;AACE,WAAK,qBAAqB,MAAA;AAE5B,SAAK,sBAAsB;AAAA,EAC7B;AAAA;AAAA,EAGA,MAAc,wBAAwB;AACpC,UAAMC,IAAO,KAAK,YAAY,cAA+B,MAAM;AACnE,IAAKA,MACL,KAAK,eAAeA,EACjB,cAAc,EAAE,SAAS,GAAA,CAAM,EAC/B;AAAA,MACC,CAACC,MACCA,EAAK,aAAa,KAAK,gBAAgBA,EAAK,aAAa,KAAA;AAAA,IAAK;AAAA,EAEtE;AAAA;AAAA,EAGA,MAAc,0BAA0B;AACtC,UAAMD,IAAO,KAAK,YAAY;AAAA,MAC5B;AAAA,IAAA;AAEF,IAAKA,MACL,KAAK,iBAAiBA,EACnB,cAAc,EAAE,SAAS,GAAA,CAAM,EAC/B;AAAA,MACC,CAACC,MACCA,EAAK,aAAa,KAAK,gBAAgBA,EAAK,aAAa,KAAA;AAAA,IAAK,GAIpE,KAAK,oBAAoBD,GAEzB,KAAK,0BAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAIQ,4BAA4B;AAClC,QAAI,CAAC,KAAK,kBAAmB;AAC7B,UAAME,IAAW,OAAO,cAAc;AAEtC,SAAK,kBAAkB,iBAAA,EAAmB,QAAQ,CAACC,MAAO;AACxD,MAAAA,EAAG,iBAAiB,YAAY,EAAE,QAAQ,CAACC,MAAQ;AACjD,QAAIF,IACFE,GAAK,aAAa,aAAa,EAAE,IAEjCA,GAAK,gBAAgB,WAAW;AAAA,MAEpC,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEQ,qBAAqB;AAC3B,SAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,QAAQ,EAAE,IAAI,KAAK,GAAA;AAAA,QACnB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,sBAAsB;AAC5B,SAAK;AAAA,MACH,IAAI,YAAY,aAAa;AAAA,QAC3B,QAAQ,EAAE,IAAI,KAAK,GAAA;AAAA,QACnB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,sBAAsB;AAE5B,UAAMC,IAA6B,CAAA;AACnC,WAAI,KAAK,cACPA,EAAiB,KAAK,GAAG,KAAK,EAAE,aAAa,GAE3C,KAAK,gBACPA,EAAiB,KAAK,GAAG,KAAK,EAAE,OAAO,GAElCA,EAAiB,KAAK,GAAG;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,qBAAqB;AAC3B,UAAMC,IAAa,KAAK,YAAY,cAAc,YAAY;AAC9D,IAAKA,MAGLA,EAAW,aAAa,aAAa,GAAG,GAEpC,KAAK,QAEP,WAAW,MAAM;AACf,MAAAA,EAAW,aAAa,aAAa,mBAAmB;AAAA,IAC1D,GAAG,GAAG;AAAA,EAEV;AAAA;AAAA,EAGA,MAAc,eAAeV,GAAkB;AAC7C,QAAK,KAAK,SAGNA,EAAE,QAAQ,YAAY,CAAC,KAAK,cAC9BA,EAAE,eAAA,GACF,KAAK,YAAA,IAIHA,EAAE,QAAQ,QAAO;AACnB,YAAMW,IAAQ,KAAK,YAAY,cAAc,YAAY;AACzD,UAAI,CAACA,EAAO;AAGZ,YAAMC,IACJ,4MACIC,IAAmC,CAAA,GACnCH,IAAaC,EAAM,cAAc,YAAY;AAEnD,MAAID,KACFG,EAAkB,KAAKH,CAAU;AAInC,YAAMI,IAAe,MAAM,KAAKH,EAAM,iBAAiB,MAAM,CAAC;AAC9D,iBAAWP,KAAQU,GAAc;AAC/B,cAAMC,IAAWX,EAAK,iBAAiB,EAAE,SAAS,IAAM;AACxD,mBAAWG,KAAMQ;AACf,UAAIR,aAAc,eAAeA,EAAG,QAAQK,CAAsB,KAChEC,EAAkB,KAAKN,CAAE,GAG3BA,EAAG,iBAA8B,YAAY,EAAE;AAAA,YAC7C,CAACS,MAAc;AACb,cAAAH,EAAkB,KAAKG,CAAS;AAAA,YAClC;AAAA,UAAA;AAAA,MAGN;AAEA,UAAIH,EAAkB,SAAS,GAAG;AAEhC,cAAMI,IAAmBJ,EAAkB,CAAC,GACtCK,IAAkBL,EAAkBA,EAAkB,SAAS,CAAC;AACtE,YAAIM,IAAS,SAAS,eAClBC,IAAcP,EAAkB,QAAQM,CAAqB;AAQjE,YAAInB,EAAE,UAAU;AACd,UAAAA,EAAE,eAAA;AAEF,cAAIqB,IAAYD,IAAc;AAC9B,UAAIC,IAAY,MACdA,IAAYR,EAAkB,SAAS;AAGzC,gBAAMS,IAAcT,EAAkBQ,CAAS;AAM/C,UAJER,EAAkBQ,CAAS,EAAE,QAAQ,kBAAkB,gBAQtC,MAHCC,EAGe,iBAAA,IACvB,MAAA,IAEVA,EAAY,MAAA;AAAA,QAEhB;AAEE,UAAIH,MAAWD,MACblB,EAAE,eAAA,GACEiB,EAAiB,QAAQ,YAAA,MAAkB,gBAI5B,MAHCA,EAGe,iBAAA,IACvB,MAAA,IAEVA,EAAiB,MAAA;AAAA,MAIzB;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,cAAc;AACpB,SAAK,OAAO,IACZ,KAAK,oBAAA;AAAA,EACP;AAAA,EAEA,SAAS;AACP,WAAO,KAAK,OACRM;AAAA;AAAA;AAAA;AAAA,6BAIqB,KAAK,EAAE;AAAA,8BACN,KAAK,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK9B,KAAK,EAAE,aAAa,KAAK,OAAO;AAAA,kBACvC,KAAK,YAQJ,KAPAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKe,KAAK,WAAW;AAAA,mCAE7B;AAAA;AAAA,gBAEN,KAAK,aACHA,WAAc,KAAK,EAAE,gBAAgB,KAAK,UAAU,SACpD,EAAE;AAAA;AAAA;AAAA;AAAA,oBAIA,KAAK,EAAE;AAAA,sCACY,KAAK,eAA0B,KAAX,QAAa;AAAA;AAAA;AAAA,oCAGpC,KAAK,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,wCAKrB,KAAK,iBAA4B,KAAX,QAAa;AAAA;AAAA;AAAA;AAAA,8BAI9C,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA,kBAKlD;AAAA,EACN;AACF;AA5VEzB,EAAO,SAAS0B,EAAUC,CAAM;AAD3B,IAAMC,IAAN5B;AAGsC6B,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BF,EAGgC,WAAA,IAAA;AACfC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfF,EAIiB,WAAA,SAAA;AACAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GALfF,EAKiB,WAAA,YAAA;AACgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAN/BF,EAMiC,WAAA,MAAA;AACAC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAP/BF,EAOiC,WAAA,WAAA;AACDC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BF,EAQgC,WAAA,OAAA;AAO1BC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAfIH,EAeM,WAAA,cAAA;AACAC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAhBIH,EAgBM,WAAA,gBAAA;AA+Ud,eAAe,IAAI,WAAW,KACjC,eAAe,OAAO,aAAaA,CAAQ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-modal",
-  "version": "1.11.4",
+  "version": "1.12.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.11.4"
+    "@nysds/nys-button": "^1.12.0"
   },
   "devDependencies": {
     "lit": "^3.3.1",