@primer/behaviors 0.0.0-20221313611 → 0.0.0-202223115014

package/dist/cjs/components/modal-dialog.d.ts

@@ -0,0 +1,18 @@
+declare class ModalDialogElement extends HTMLElement {
+    #private;
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    close(): void;
+}
+declare global {
+    interface Window {
+        ModalDialogElement: typeof ModalDialogElement;
+    }
+    interface HTMLElementTagNameMap {
+        'modal-dialog': ModalDialogElement;
+    }
+}
+export default ModalDialogElement;

package/dist/cjs/components/modal-dialog.js

@@ -0,0 +1,117 @@
+"use strict";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ModalDialogElement_instances, _ModalDialogElement_focusAbortController, _ModalDialogElement_abortController, _ModalDialogElement_isComposing, _ModalDialogElement_openButton, _ModalDialogElement_overlayBackdrop_get, _ModalDialogElement_keydown;
+Object.defineProperty(exports, "__esModule", { value: true });
+const iterate_focusable_elements_js_1 = require("../utils/iterate-focusable-elements.js");
+const focus_trap_js_1 = require("../focus-trap.js");
+class ModalDialogElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ModalDialogElement_instances.add(this);
+        _ModalDialogElement_focusAbortController.set(this, new AbortController());
+        _ModalDialogElement_abortController.set(this, new AbortController());
+        _ModalDialogElement_isComposing.set(this, false);
+        _ModalDialogElement_openButton.set(this, void 0);
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        var _a, _b;
+        if (value) {
+            if (this.open)
+                return;
+            this.setAttribute('open', '');
+            (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay-hidden');
+            document.body.style.overflow = 'hidden';
+            if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
+                __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
+            }
+            (0, focus_trap_js_1.focusTrap)(this, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
+        }
+        else {
+            if (!this.open)
+                return;
+            this.removeAttribute('open');
+            (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay-hidden');
+            document.body.style.overflow = 'initial';
+            __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
+            (0, iterate_focusable_elements_js_1.focusIfNeeded)(__classPrivateFieldGet(this, _ModalDialogElement_openButton, "f"));
+            __classPrivateFieldSet(this, _ModalDialogElement_openButton, undefined, "f");
+        }
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'dialog');
+        const signal = __classPrivateFieldGet(this, _ModalDialogElement_abortController, "f").signal;
+        this.ownerDocument.addEventListener('click', event => {
+            const target = event.target;
+            const clickOutsideDialog = target.closest(this.tagName) !== this;
+            const button = target === null || target === void 0 ? void 0 : target.closest('button');
+            if (!button) {
+                if (clickOutsideDialog) {
+                    this.close();
+                }
+                return;
+            }
+            let dialogId = button.getAttribute('data-close-dialog-id');
+            if (dialogId === this.id) {
+                this.close();
+            }
+            dialogId = button.getAttribute('data-show-dialog-id');
+            if (dialogId === this.id) {
+                event.stopPropagation();
+                __classPrivateFieldSet(this, _ModalDialogElement_openButton, button, "f");
+                this.show();
+            }
+        }, { signal });
+        this.addEventListener('compositionstart', () => (__classPrivateFieldSet(this, _ModalDialogElement_isComposing, true, "f")));
+        this.addEventListener('compositionend', () => (__classPrivateFieldSet(this, _ModalDialogElement_isComposing, false, "f")));
+        this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _ModalDialogElement_abortController, "f").abort();
+    }
+    show() {
+        this.open = true;
+    }
+    close() {
+        this.open = false;
+    }
+}
+_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_abortController = new WeakMap(), _ModalDialogElement_isComposing = new WeakMap(), _ModalDialogElement_openButton = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
+    var _a;
+    if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('Overlay-backdrop')) {
+        return this.parentElement;
+    }
+    return null;
+}, _ModalDialogElement_keydown = function _ModalDialogElement_keydown(event) {
+    if (!(event instanceof KeyboardEvent))
+        return;
+    if (__classPrivateFieldGet(this, _ModalDialogElement_isComposing, "f"))
+        return;
+    switch (event.key) {
+        case 'Escape':
+            if (this.open) {
+                this.close();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            break;
+    }
+};
+exports.default = ModalDialogElement;
+if (!window.customElements.get('modal-dialog')) {
+    window.ModalDialogElement = ModalDialogElement;
+    window.customElements.define('modal-dialog', ModalDialogElement);
+}

package/dist/cjs/focus-trap.d.ts

@@ -1 +1 @@
-export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement, abortSignal?: AbortSignal): AbortController | undefined;
+export declare function focusTrap(container: HTMLElement, abortSignal: AbortSignal, initialFocus?: HTMLElement): void;

package/dist/cjs/focus-trap.js

@@ -9,7 +9,7 @@ let activeTrap = undefined;
 function tryReactivate() {
     const trapToReactivate = suspendedTrapStack.pop();
     if (trapToReactivate) {
-        focusTrap(trapToReactivate.container, trapToReactivate.initialFocus, trapToReactivate.originalSignal);
+        focusTrap(trapToReactivate.container, trapToReactivate.originalSignal, trapToReactivate.initialFocus);
     }
 }
 function followSignal(signal) {
@@ -19,9 +19,7 @@ function followSignal(signal) {
     });
     return controller;
 }
-function focusTrap(container, initialFocus, abortSignal) {
-    const controller = new AbortController();
-    const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
+function focusTrap(container, abortSignal, initialFocus) {
     container.setAttribute('data-focus-trap', 'active');
     const sentinelStart = document.createElement('span');
     sentinelStart.setAttribute('class', 'sentinel');
@@ -50,22 +48,22 @@ function focusTrap(container, initialFocus, abortSignal) {
             }
             else {
                 if (lastFocusedChild && (0, iterate_focusable_elements_js_1.isTabbable)(lastFocusedChild) && container.contains(lastFocusedChild)) {
-                    lastFocusedChild.focus();
+                    (0, iterate_focusable_elements_js_1.focusIfNeeded)(lastFocusedChild);
                     return;
                 }
                 else if (initialFocus && container.contains(initialFocus)) {
-                    initialFocus.focus();
+                    (0, iterate_focusable_elements_js_1.focusIfNeeded)(initialFocus);
                     return;
                 }
                 else {
                     const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
-                    firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+                    (0, iterate_focusable_elements_js_1.focusIfNeeded)(firstFocusableChild);
                     return;
                 }
             }
         }
     }
-    const wrappingController = followSignal(signal);
+    const wrappingController = followSignal(abortSignal);
     if (activeTrap) {
         const suspendedTrap = activeTrap;
         activeTrap.container.setAttribute('data-focus-trap', 'suspended');
@@ -75,7 +73,7 @@ function focusTrap(container, initialFocus, abortSignal) {
     wrappingController.signal.addEventListener('abort', () => {
         activeTrap = undefined;
     });
-    signal.addEventListener('abort', () => {
+    abortSignal.addEventListener('abort', () => {
         container.removeAttribute('data-focus-trap');
         const sentinels = container.getElementsByClassName('sentinel');
         while (sentinels.length > 0)
@@ -94,14 +92,11 @@ function focusTrap(container, initialFocus, abortSignal) {
         container,
         controller: wrappingController,
         initialFocus,
-        originalSignal: signal
+        originalSignal: abortSignal
     };
     const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
     if (suspendedTrapIndex >= 0) {
         suspendedTrapStack.splice(suspendedTrapIndex, 1);
     }
-    if (!abortSignal) {
-        return controller;
-    }
 }
 exports.focusTrap = focusTrap;

package/dist/cjs/utils/iterate-focusable-elements.d.ts

@@ -4,6 +4,7 @@ export interface IterateFocusableElements {
     onlyTabbable?: boolean;
 }
 export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
+export declare function focusIfNeeded(elem?: HTMLElement): void;
 export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
 export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
 export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;

package/dist/cjs/utils/iterate-focusable-elements.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTabbable = exports.isFocusable = exports.getFocusableChild = exports.iterateFocusableElements = void 0;
+exports.isTabbable = exports.isFocusable = exports.getFocusableChild = exports.focusIfNeeded = exports.iterateFocusableElements = void 0;
 function* iterateFocusableElements(container, options = {}) {
     var _a, _b;
     const strict = (_a = options.strict) !== null && _a !== void 0 ? _a : false;
@@ -32,6 +32,12 @@ function* iterateFocusableElements(container, options = {}) {
     return undefined;
 }
 exports.iterateFocusableElements = iterateFocusableElements;
+function focusIfNeeded(elem) {
+    if (document.activeElement !== elem) {
+        elem === null || elem === void 0 ? void 0 : elem.focus();
+    }
+}
+exports.focusIfNeeded = focusIfNeeded;
 function getFocusableChild(container, lastChild = false) {
     return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
 }

package/dist/esm/components/modal-dialog.d.ts

@@ -0,0 +1,18 @@
+declare class ModalDialogElement extends HTMLElement {
+    #private;
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    close(): void;
+}
+declare global {
+    interface Window {
+        ModalDialogElement: typeof ModalDialogElement;
+    }
+    interface HTMLElementTagNameMap {
+        'modal-dialog': ModalDialogElement;
+    }
+}
+export default ModalDialogElement;

package/dist/esm/components/modal-dialog.js

@@ -0,0 +1,115 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ModalDialogElement_instances, _ModalDialogElement_focusAbortController, _ModalDialogElement_abortController, _ModalDialogElement_isComposing, _ModalDialogElement_openButton, _ModalDialogElement_overlayBackdrop_get, _ModalDialogElement_keydown;
+import { focusIfNeeded } from '../utils/iterate-focusable-elements.js';
+import { focusTrap } from '../focus-trap.js';
+class ModalDialogElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ModalDialogElement_instances.add(this);
+        _ModalDialogElement_focusAbortController.set(this, new AbortController());
+        _ModalDialogElement_abortController.set(this, new AbortController());
+        _ModalDialogElement_isComposing.set(this, false);
+        _ModalDialogElement_openButton.set(this, void 0);
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        var _a, _b;
+        if (value) {
+            if (this.open)
+                return;
+            this.setAttribute('open', '');
+            (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay-hidden');
+            document.body.style.overflow = 'hidden';
+            if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
+                __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
+            }
+            focusTrap(this, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
+        }
+        else {
+            if (!this.open)
+                return;
+            this.removeAttribute('open');
+            (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay-hidden');
+            document.body.style.overflow = 'initial';
+            __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
+            focusIfNeeded(__classPrivateFieldGet(this, _ModalDialogElement_openButton, "f"));
+            __classPrivateFieldSet(this, _ModalDialogElement_openButton, undefined, "f");
+        }
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'dialog');
+        const signal = __classPrivateFieldGet(this, _ModalDialogElement_abortController, "f").signal;
+        this.ownerDocument.addEventListener('click', event => {
+            const target = event.target;
+            const clickOutsideDialog = target.closest(this.tagName) !== this;
+            const button = target === null || target === void 0 ? void 0 : target.closest('button');
+            if (!button) {
+                if (clickOutsideDialog) {
+                    this.close();
+                }
+                return;
+            }
+            let dialogId = button.getAttribute('data-close-dialog-id');
+            if (dialogId === this.id) {
+                this.close();
+            }
+            dialogId = button.getAttribute('data-show-dialog-id');
+            if (dialogId === this.id) {
+                event.stopPropagation();
+                __classPrivateFieldSet(this, _ModalDialogElement_openButton, button, "f");
+                this.show();
+            }
+        }, { signal });
+        this.addEventListener('compositionstart', () => (__classPrivateFieldSet(this, _ModalDialogElement_isComposing, true, "f")));
+        this.addEventListener('compositionend', () => (__classPrivateFieldSet(this, _ModalDialogElement_isComposing, false, "f")));
+        this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _ModalDialogElement_abortController, "f").abort();
+    }
+    show() {
+        this.open = true;
+    }
+    close() {
+        this.open = false;
+    }
+}
+_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_abortController = new WeakMap(), _ModalDialogElement_isComposing = new WeakMap(), _ModalDialogElement_openButton = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
+    var _a;
+    if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('Overlay-backdrop')) {
+        return this.parentElement;
+    }
+    return null;
+}, _ModalDialogElement_keydown = function _ModalDialogElement_keydown(event) {
+    if (!(event instanceof KeyboardEvent))
+        return;
+    if (__classPrivateFieldGet(this, _ModalDialogElement_isComposing, "f"))
+        return;
+    switch (event.key) {
+        case 'Escape':
+            if (this.open) {
+                this.close();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            break;
+    }
+};
+export default ModalDialogElement;
+if (!window.customElements.get('modal-dialog')) {
+    window.ModalDialogElement = ModalDialogElement;
+    window.customElements.define('modal-dialog', ModalDialogElement);
+}

package/dist/esm/focus-trap.d.ts

@@ -1 +1 @@
-export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement, abortSignal?: AbortSignal): AbortController | undefined;
+export declare function focusTrap(container: HTMLElement, abortSignal: AbortSignal, initialFocus?: HTMLElement): void;

package/dist/esm/focus-trap.js

@@ -1,4 +1,4 @@
-import { getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.js';
+import { focusIfNeeded, getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.js';
 import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
 eventListenerSignalPolyfill();
 const suspendedTrapStack = [];
@@ -6,7 +6,7 @@ let activeTrap = undefined;
 function tryReactivate() {
     const trapToReactivate = suspendedTrapStack.pop();
     if (trapToReactivate) {
-        focusTrap(trapToReactivate.container, trapToReactivate.initialFocus, trapToReactivate.originalSignal);
+        focusTrap(trapToReactivate.container, trapToReactivate.originalSignal, trapToReactivate.initialFocus);
     }
 }
 function followSignal(signal) {
@@ -16,9 +16,7 @@ function followSignal(signal) {
     });
     return controller;
 }
-export function focusTrap(container, initialFocus, abortSignal) {
-    const controller = new AbortController();
-    const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
+export function focusTrap(container, abortSignal, initialFocus) {
     container.setAttribute('data-focus-trap', 'active');
     const sentinelStart = document.createElement('span');
     sentinelStart.setAttribute('class', 'sentinel');
@@ -47,22 +45,22 @@ export function focusTrap(container, initialFocus, abortSignal) {
             }
             else {
                 if (lastFocusedChild && isTabbable(lastFocusedChild) && container.contains(lastFocusedChild)) {
-                    lastFocusedChild.focus();
+                    focusIfNeeded(lastFocusedChild);
                     return;
                 }
                 else if (initialFocus && container.contains(initialFocus)) {
-                    initialFocus.focus();
+                    focusIfNeeded(initialFocus);
                     return;
                 }
                 else {
                     const firstFocusableChild = getFocusableChild(container);
-                    firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+                    focusIfNeeded(firstFocusableChild);
                     return;
                 }
             }
         }
     }
-    const wrappingController = followSignal(signal);
+    const wrappingController = followSignal(abortSignal);
     if (activeTrap) {
         const suspendedTrap = activeTrap;
         activeTrap.container.setAttribute('data-focus-trap', 'suspended');
@@ -72,7 +70,7 @@ export function focusTrap(container, initialFocus, abortSignal) {
     wrappingController.signal.addEventListener('abort', () => {
         activeTrap = undefined;
     });
-    signal.addEventListener('abort', () => {
+    abortSignal.addEventListener('abort', () => {
         container.removeAttribute('data-focus-trap');
         const sentinels = container.getElementsByClassName('sentinel');
         while (sentinels.length > 0)
@@ -91,13 +89,10 @@ export function focusTrap(container, initialFocus, abortSignal) {
         container,
         controller: wrappingController,
         initialFocus,
-        originalSignal: signal
+        originalSignal: abortSignal
     };
     const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
     if (suspendedTrapIndex >= 0) {
         suspendedTrapStack.splice(suspendedTrapIndex, 1);
     }
-    if (!abortSignal) {
-        return controller;
-    }
 }

package/dist/esm/utils/iterate-focusable-elements.d.ts

@@ -4,6 +4,7 @@ export interface IterateFocusableElements {
     onlyTabbable?: boolean;
 }
 export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
+export declare function focusIfNeeded(elem?: HTMLElement): void;
 export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
 export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
 export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;

package/dist/esm/utils/iterate-focusable-elements.js

@@ -28,6 +28,11 @@ export function* iterateFocusableElements(container, options = {}) {
     }
     return undefined;
 }
+export function focusIfNeeded(elem) {
+    if (document.activeElement !== elem) {
+        elem === null || elem === void 0 ? void 0 : elem.focus();
+    }
+}
 export function getFocusableChild(container, lastChild = false) {
     return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/behaviors",
-  "version": "0.0.0-20221313611",
+  "version": "0.0.0-202223115014",
   "description": "Shared behaviors for JavaScript components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -14,18 +14,26 @@
       "types": "./dist/utils/index.d.ts",
       "require": "./dist/cjs/utils/index.js",
       "module": "./dist/esm/utils/index.js"
+    },
+    "./components/modal-dialog": {
+      "types": "./dist/components/modal-dialog.d.ts",
+      "require": "./dist/cjs/components/modal-dialog.js",
+      "module": "./dist/esm/components/modal-dialog.js"
     }
   },
   "types": "dist/cjs/index.d.ts",
   "files": [
     "dist",
-    "utils"
+    "utils",
+    "modal-dialog"
   ],
   "sideEffects": [
     "dist/esm/focus-zone.js",
     "dist/esm/focus-trap.js",
     "dist/cjs/focus-zone.js",
-    "dist/cjs/focus-trap.js"
+    "dist/cjs/focus-trap.js",
+    "dist/esm/components/modal-dialog.js",
+    "dist/cjs/components/modal-dialog.js"
   ],
   "scripts": {
     "lint": "eslint src/",