@planningcenter/tapestry 3.8.1-rc.2 → 3.8.1-rc.4

package/dist/components/modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import "./index.css";
-import React, { type DialogHTMLAttributes } from "react";
+import React, { type HTMLAttributes } from "react";
 export type ModalSize = "sm" | "md" | "lg" | "xl";
 export interface ModalProps {
     /**
@@ -10,11 +10,11 @@ export interface ModalProps {
     dismissible?: boolean;
     /** Fires on every dismissal — Esc, backdrop, close button, or programmatic. */
     onClose?: () => void;
-    /** Controls the dialog. Synced to `showModal()`/`close()`. */
+    /** Controls the modal. */
     open: boolean;
     /** Default `'md'`. */
     size?: ModalSize;
 }
-export type ModalElementProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, keyof ModalProps | "onCancel"> & ModalProps;
-export declare const Modal: React.ForwardRefExoticComponent<Omit<React.DialogHTMLAttributes<HTMLDialogElement>, keyof ModalProps | "onCancel"> & ModalProps & React.RefAttributes<HTMLDialogElement>>;
+export type ModalElementProps = Omit<HTMLAttributes<HTMLElement>, keyof ModalProps | "role"> & ModalProps;
+export declare const Modal: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "role" | keyof ModalProps> & ModalProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=Modal.d.ts.map

package/dist/components/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EACZ,KAAK,oBAAoB,EAK1B,MAAM,OAAO,CAAA;AAId,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEjD,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0FAA0F;IAC1F,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAA;IACb,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,UAAU,GAAG,UAAU,CAC9B,GACC,UAAU,CAAA;AAuCZ,eAAO,MAAM,KAAK,2KAyHjB,CAAA"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAEZ,KAAK,cAAc,EAIpB,MAAM,OAAO,CAAA;AAMd,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEjD,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0FAA0F;IAC1F,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0BAA0B;IAC1B,IAAI,EAAE,OAAO,CAAA;IACb,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,cAAc,CAAC,WAAW,CAAC,EAC3B,MAAM,UAAU,GAAG,MAAM,CAC1B,GACC,UAAU,CAAA;AAEZ,eAAO,MAAM,KAAK,qJAiFhB,CAAA"}

package/dist/components/modal/Modal.js

@@ -1,111 +1,55 @@
 import { useId } from '../../utilities/useId.js';
 import classNames from 'classnames';
 import React__default, { forwardRef, useRef, useEffect, useCallback } from 'react';
+import { Dialog } from 'react-aria-components/Dialog';
+import { ModalOverlay, Modal as Modal$1 } from 'react-aria-components/Modal';
 import { ModalContext } from './ModalContext.js';
 
-function supportsRequestClose(dialogEl) {
-    return "requestClose" in dialogEl;
-}
-function supportsClosedBy(dialogEl) {
-    return "closedBy" in dialogEl;
-}
-function getActiveFocusableElement() {
-    return document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : null;
-}
-function isBackdropClick(event, dialogEl) {
-    return event.target === dialogEl;
-}
-function closeViaRequestOrDirect(dialogEl, dismissible) {
-    const dialogWithRequestClose = dialogEl;
-    if (supportsRequestClose(dialogEl)) {
-        dialogWithRequestClose.requestClose?.();
-    }
-    else if (dismissible) {
-        dialogEl.close();
-    }
-}
 const Modal = forwardRef(function Modal({ children, className, dismissible = false, id, onClose, open, size = "md", ...restProps }, ref) {
     const stableId = useId();
     const modalId = id || `tds-modal-${stableId}`;
     const titleId = `${modalId}-title`;
     const subtitleId = `${modalId}-subtitle`;
-    const dialogRef = useRef(null);
-    const previouslyFocusedElementRef = useRef(null);
     const onCloseRef = useRef(onClose);
-    const requestClose = () => {
-        const dialogEl = dialogRef.current;
-        if (dialogEl)
-            closeViaRequestOrDirect(dialogEl, dismissible);
-    };
-    const contextValue = { dismissible, requestClose, subtitleId, titleId };
     useEffect(() => {
         onCloseRef.current = onClose;
     }, [onClose]);
-    const setDialogRef = useCallback((element) => {
-        dialogRef.current = element;
-        if (typeof ref === "function") {
-            ref(element);
-        }
-        else if (ref) {
-            ref.current = element;
-        }
-    }, [ref]);
-    useEffect(() => {
-        const dialogEl = dialogRef.current;
-        if (!dialogEl)
+    // Tracks whether the current "open" has already been reported to
+    // `onClose`, so a dismiss gesture (Esc/backdrop/close button) and the
+    // `open=false` re-render it causes don't both fire the callback.
+    const reportedOpenRef = useRef(open);
+    const notifyClose = useCallback(() => {
+        if (!reportedOpenRef.current)
             return;
-        if (open && !dialogEl.open) {
-            previouslyFocusedElementRef.current = getActiveFocusableElement();
-            dialogEl.showModal();
-        }
-        else if (!open && dialogEl.open) {
-            dialogEl.close();
-        }
-    }, [open]);
+        reportedOpenRef.current = false;
+        onCloseRef.current?.();
+    }, []);
     useEffect(() => {
-        const dialogEl = dialogRef.current;
-        if (!dialogEl)
-            return;
-        const handleClose = () => {
-            onCloseRef.current?.();
-            previouslyFocusedElementRef.current?.focus();
-            previouslyFocusedElementRef.current = null;
-        };
-        const handleCancel = (event) => {
-            if (!dismissible)
-                event.preventDefault();
-        };
-        dialogEl.addEventListener("close", handleClose);
-        dialogEl.addEventListener("cancel", handleCancel);
-        let handleBackdropClick;
-        if (supportsClosedBy(dialogEl)) {
-            dialogEl.setAttribute("closedby", dismissible ? "any" : "none");
+        if (open) {
+            reportedOpenRef.current = true;
         }
         else {
-            handleBackdropClick = (event) => {
-                if (isBackdropClick(event, dialogEl)) {
-                    closeViaRequestOrDirect(dialogEl, dismissible);
-                }
-            };
-            dialogEl.addEventListener("click", handleBackdropClick);
+            notifyClose();
         }
-        return () => {
-            dialogEl.removeEventListener("close", handleClose);
-            dialogEl.removeEventListener("cancel", handleCancel);
-            if (handleBackdropClick) {
-                dialogEl.removeEventListener("click", handleBackdropClick);
-            }
-        };
-    }, [dismissible]);
-    const combinedClassName = classNames("tds-modal", {
-        "tds-modal--lg": size === "lg",
-        "tds-modal--sm": size === "sm",
-        "tds-modal--xl": size === "xl",
-    }, className);
-    return (React__default.createElement("dialog", { ...restProps, ref: setDialogRef, "aria-describedby": subtitleId, "aria-labelledby": titleId, className: combinedClassName, id: modalId },
-        React__default.createElement(ModalContext.Provider, { value: contextValue }, children)));
+    }, [open, notifyClose]);
+    const contextValue = {
+        dismissible,
+        requestClose: notifyClose,
+        subtitleId,
+        titleId,
+    };
+    const frameClassName = classNames("tds-modal-frame", {
+        "tds-modal-frame--lg": size === "lg",
+        "tds-modal-frame--sm": size === "sm",
+        "tds-modal-frame--xl": size === "xl",
+    });
+    return (React__default.createElement(ModalOverlay, { className: "tds-modal-overlay", isDismissable: dismissible, isKeyboardDismissDisabled: !dismissible, isOpen: open, onOpenChange: (isOpen) => {
+            if (!isOpen)
+                notifyClose();
+        } },
+        React__default.createElement(Modal$1, { className: frameClassName },
+            React__default.createElement(Dialog, { ...restProps, ref: ref, "aria-describedby": subtitleId, "aria-labelledby": titleId, className: classNames("tds-modal", className), id: modalId },
+                React__default.createElement(ModalContext.Provider, { value: contextValue }, children)))));
 });
 Modal.displayName = "Modal";
 

package/dist/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, {\n  type DialogHTMLAttributes,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\"\n\nimport { ModalContext } from \"./ModalContext\"\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport interface ModalProps {\n  /**\n   * A `<ModalHeader>` followed by a `<ModalBody>` and a `<ModalFooter>`.\n   */\n  children: React.ReactNode\n  /** Default `false`. `true` enables Esc, backdrop-click, and the close button together. */\n  dismissible?: boolean\n  /** Fires on every dismissal — Esc, backdrop, close button, or programmatic. */\n  onClose?: () => void\n  /** Controls the dialog. Synced to `showModal()`/`close()`. */\n  open: boolean\n  /** Default `'md'`. */\n  size?: ModalSize\n}\n\nexport type ModalElementProps = Omit<\n  DialogHTMLAttributes<HTMLDialogElement>,\n  keyof ModalProps | \"onCancel\"\n> &\n  ModalProps\n\ntype DialogWithRequestClose = HTMLDialogElement & {\n  requestClose?: (returnValue?: string) => void\n}\n\nfunction supportsRequestClose(dialogEl: HTMLDialogElement): boolean {\n  return \"requestClose\" in dialogEl\n}\n\nfunction supportsClosedBy(dialogEl: HTMLDialogElement): boolean {\n  return \"closedBy\" in dialogEl\n}\n\nfunction getActiveFocusableElement(): HTMLElement | null {\n  return document.activeElement instanceof HTMLElement\n    ? document.activeElement\n    : null\n}\n\nfunction isBackdropClick(\n  event: MouseEvent,\n  dialogEl: HTMLDialogElement\n): boolean {\n  return event.target === dialogEl\n}\n\nfunction closeViaRequestOrDirect(\n  dialogEl: HTMLDialogElement,\n  dismissible: boolean\n) {\n  const dialogWithRequestClose = dialogEl as DialogWithRequestClose\n  if (supportsRequestClose(dialogEl)) {\n    dialogWithRequestClose.requestClose?.()\n  } else if (dismissible) {\n    dialogEl.close()\n  }\n}\n\nexport const Modal = forwardRef<HTMLDialogElement, ModalElementProps>(\n  function Modal(\n    {\n      children,\n      className,\n      dismissible = false,\n      id,\n      onClose,\n      open,\n      size = \"md\",\n      ...restProps\n    }: ModalElementProps,\n    ref\n  ) {\n    const stableId = useId()\n    const modalId = id || `tds-modal-${stableId}`\n    const titleId = `${modalId}-title`\n    const subtitleId = `${modalId}-subtitle`\n\n    const dialogRef = useRef<HTMLDialogElement | null>(null)\n    const previouslyFocusedElementRef = useRef<HTMLElement | null>(null)\n    const onCloseRef = useRef(onClose)\n\n    const requestClose = () => {\n      const dialogEl = dialogRef.current\n      if (dialogEl) closeViaRequestOrDirect(dialogEl, dismissible)\n    }\n\n    const contextValue = { dismissible, requestClose, subtitleId, titleId }\n\n    useEffect(() => {\n      onCloseRef.current = onClose\n    }, [onClose])\n\n    const setDialogRef = useCallback(\n      (element: HTMLDialogElement | null) => {\n        dialogRef.current = element\n        if (typeof ref === \"function\") {\n          ref(element)\n        } else if (ref) {\n          ref.current = element\n        }\n      },\n      [ref]\n    )\n\n    useEffect(() => {\n      const dialogEl = dialogRef.current\n      if (!dialogEl) return\n\n      if (open && !dialogEl.open) {\n        previouslyFocusedElementRef.current = getActiveFocusableElement()\n        dialogEl.showModal()\n      } else if (!open && dialogEl.open) {\n        dialogEl.close()\n      }\n    }, [open])\n\n    useEffect(() => {\n      const dialogEl = dialogRef.current\n      if (!dialogEl) return\n\n      const handleClose = () => {\n        onCloseRef.current?.()\n        previouslyFocusedElementRef.current?.focus()\n        previouslyFocusedElementRef.current = null\n      }\n\n      const handleCancel = (event: Event) => {\n        if (!dismissible) event.preventDefault()\n      }\n\n      dialogEl.addEventListener(\"close\", handleClose)\n      dialogEl.addEventListener(\"cancel\", handleCancel)\n\n      let handleBackdropClick: ((event: MouseEvent) => void) | undefined\n      if (supportsClosedBy(dialogEl)) {\n        dialogEl.setAttribute(\"closedby\", dismissible ? \"any\" : \"none\")\n      } else {\n        handleBackdropClick = (event) => {\n          if (isBackdropClick(event, dialogEl)) {\n            closeViaRequestOrDirect(dialogEl, dismissible)\n          }\n        }\n        dialogEl.addEventListener(\"click\", handleBackdropClick)\n      }\n\n      return () => {\n        dialogEl.removeEventListener(\"close\", handleClose)\n        dialogEl.removeEventListener(\"cancel\", handleCancel)\n        if (handleBackdropClick) {\n          dialogEl.removeEventListener(\"click\", handleBackdropClick)\n        }\n      }\n    }, [dismissible])\n\n    const combinedClassName = classNames(\n      \"tds-modal\",\n      {\n        \"tds-modal--lg\": size === \"lg\",\n        \"tds-modal--sm\": size === \"sm\",\n        \"tds-modal--xl\": size === \"xl\",\n      },\n      className\n    )\n\n    return (\n      <dialog\n        {...restProps}\n        ref={setDialogRef}\n        aria-describedby={subtitleId}\n        aria-labelledby={titleId}\n        className={combinedClassName}\n        id={modalId}\n      >\n        <ModalContext.Provider value={contextValue}>\n          {children}\n        </ModalContext.Provider>\n      </dialog>\n    )\n  }\n)\n\nModal.displayName = \"Modal\"\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, {\n  forwardRef,\n  type HTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\"\nimport { Dialog } from \"react-aria-components/Dialog\"\nimport { Modal as AriaModal, ModalOverlay } from \"react-aria-components/Modal\"\n\nimport { ModalContext } from \"./ModalContext\"\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport interface ModalProps {\n  /**\n   * A `<ModalHeader>` followed by a `<ModalBody>` and a `<ModalFooter>`.\n   */\n  children: React.ReactNode\n  /** Default `false`. `true` enables Esc, backdrop-click, and the close button together. */\n  dismissible?: boolean\n  /** Fires on every dismissal — Esc, backdrop, close button, or programmatic. */\n  onClose?: () => void\n  /** Controls the modal. */\n  open: boolean\n  /** Default `'md'`. */\n  size?: ModalSize\n}\n\nexport type ModalElementProps = Omit<\n  HTMLAttributes<HTMLElement>,\n  keyof ModalProps | \"role\"\n> &\n  ModalProps\n\nexport const Modal = forwardRef<HTMLElement, ModalElementProps>(function Modal(\n  {\n    children,\n    className,\n    dismissible = false,\n    id,\n    onClose,\n    open,\n    size = \"md\",\n    ...restProps\n  }: ModalElementProps,\n  ref\n) {\n  const stableId = useId()\n  const modalId = id || `tds-modal-${stableId}`\n  const titleId = `${modalId}-title`\n  const subtitleId = `${modalId}-subtitle`\n\n  const onCloseRef = useRef(onClose)\n  useEffect(() => {\n    onCloseRef.current = onClose\n  }, [onClose])\n\n  // Tracks whether the current \"open\" has already been reported to\n  // `onClose`, so a dismiss gesture (Esc/backdrop/close button) and the\n  // `open=false` re-render it causes don't both fire the callback.\n  const reportedOpenRef = useRef(open)\n\n  const notifyClose = useCallback(() => {\n    if (!reportedOpenRef.current) return\n    reportedOpenRef.current = false\n    onCloseRef.current?.()\n  }, [])\n\n  useEffect(() => {\n    if (open) {\n      reportedOpenRef.current = true\n    } else {\n      notifyClose()\n    }\n  }, [open, notifyClose])\n\n  const contextValue = {\n    dismissible,\n    requestClose: notifyClose,\n    subtitleId,\n    titleId,\n  }\n\n  const frameClassName = classNames(\"tds-modal-frame\", {\n    \"tds-modal-frame--lg\": size === \"lg\",\n    \"tds-modal-frame--sm\": size === \"sm\",\n    \"tds-modal-frame--xl\": size === \"xl\",\n  })\n\n  return (\n    <ModalOverlay\n      className=\"tds-modal-overlay\"\n      isDismissable={dismissible}\n      isKeyboardDismissDisabled={!dismissible}\n      isOpen={open}\n      onOpenChange={(isOpen) => {\n        if (!isOpen) notifyClose()\n      }}\n    >\n      <AriaModal className={frameClassName}>\n        <Dialog\n          {...restProps}\n          ref={ref}\n          aria-describedby={subtitleId}\n          aria-labelledby={titleId}\n          className={classNames(\"tds-modal\", className)}\n          id={modalId}\n        >\n          <ModalContext.Provider value={contextValue}>\n            {children}\n          </ModalContext.Provider>\n        </Dialog>\n      </AriaModal>\n    </ModalOverlay>\n  )\n})\n\nModal.displayName = \"Modal\"\n"],"names":["React","AriaModal"],"mappings":";;;;;;;AAuCO,MAAM,KAAK,GAAG,UAAU,CAAiC,SAAS,KAAK,CAC5E,EACE,QAAQ,EACR,SAAS,EACT,WAAW,GAAG,KAAK,EACnB,EAAE,EACF,OAAO,EACP,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACM,EACpB,GAAG,EAAA;AAEH,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAC7C,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,OAAO,QAAQ;AAClC,IAAA,MAAM,UAAU,GAAG,CAAA,EAAG,OAAO,WAAW;AAExC,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IAClC,SAAS,CAAC,MAAK;AACb,QAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAC9B,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;;;;AAKb,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC;AAEpC,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;QACnC,IAAI,CAAC,eAAe,CAAC,OAAO;YAAE;AAC9B,QAAA,eAAe,CAAC,OAAO,GAAG,KAAK;AAC/B,QAAA,UAAU,CAAC,OAAO,IAAI;IACxB,CAAC,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;QACb,IAAI,IAAI,EAAE;AACR,YAAA,eAAe,CAAC,OAAO,GAAG,IAAI;QAChC;aAAO;AACL,YAAA,WAAW,EAAE;QACf;AACF,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAEvB,IAAA,MAAM,YAAY,GAAG;QACnB,WAAW;AACX,QAAA,YAAY,EAAE,WAAW;QACzB,UAAU;QACV,OAAO;KACR;AAED,IAAA,MAAM,cAAc,GAAG,UAAU,CAAC,iBAAiB,EAAE;QACnD,qBAAqB,EAAE,IAAI,KAAK,IAAI;QACpC,qBAAqB,EAAE,IAAI,KAAK,IAAI;QACpC,qBAAqB,EAAE,IAAI,KAAK,IAAI;AACrC,KAAA,CAAC;IAEF,QACEA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACX,SAAS,EAAC,mBAAmB,EAC7B,aAAa,EAAE,WAAW,EAC1B,yBAAyB,EAAE,CAAC,WAAW,EACvC,MAAM,EAAE,IAAI,EACZ,YAAY,EAAE,CAAC,MAAM,KAAI;AACvB,YAAA,IAAI,CAAC,MAAM;AAAE,gBAAA,WAAW,EAAE;QAC5B,CAAC,EAAA;AAED,QAAAA,cAAA,CAAA,aAAA,CAACC,OAAS,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;YAClCD,cAAA,CAAA,aAAA,CAAC,MAAM,OACD,SAAS,EACb,GAAG,EAAE,GAAG,EAAA,kBAAA,EACU,UAAU,EAAA,iBAAA,EACX,OAAO,EACxB,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,EAC7C,EAAE,EAAE,OAAO,EAAA;AAEX,gBAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,EACvC,QAAQ,CACa,CACjB,CACC,CACC;AAEnB,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/index.css

@@ -4985,76 +4985,90 @@ a.tds-dropdown-item:is(:hover, :active){
     line-height:1.35;
   }
 
-.tds-modal{
-  --tds-modal-width:600px;
-  --tds-modal-opacity:0;
-  --tds-modal-backdrop-opacity:0;
-  --tds-modal-scale:.96;
-  --tds-modal-transition-duration:var(--t-duration-200);
-  --tds-modal-transition-timing-function:var(--t-ease-in);
-  --tds-modal-transition:opacity var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function), scale var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function);
-  --tds-modal-backdrop-transition:opacity var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function);
+.tds-modal-overlay{
+  position:fixed;
+  inset:0;
+  z-index:1000;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background:hsl(0 0% 0% / 40%);
+}
 
-  flex-direction:column;
-  width:min(var(--tds-modal-width), calc(100% - 48px));
-  padding-block:var(--t-spacing-3);
-  padding-inline:0;
-  background:var(--t-surface-color-card);
+.tds-modal-overlay[data-entering]{
+    animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
+  }
 
-  border:0;
-  border-radius:var(--t-border-radius-lg);
-  box-shadow:0 4px 18px 0 #0003;
+.tds-modal-overlay[data-exiting]{
+    animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
+  }
 
-  opacity:var(--tds-modal-opacity);
-  scale:var(--tds-modal-scale);
-  transition:var(--tds-modal-transition);
+@keyframes tds-modal-overlay-fade{
+  from{
+    opacity:0;
+  }
 }
 
-.tds-modal[open]{
-    --tds-modal-opacity:1;
-    --tds-modal-backdrop-opacity:1;
-    --tds-modal-scale:1;
-    --tds-modal-transition-duration:var(--t-duration-300);
-    --tds-modal-transition-timing-function:var(--t-ease-out);
+.tds-modal-frame{
+  --tds-modal-width:600px;
 
-    display:flex;
-  }
+  display:flex;
+  justify-content:center;
+  width:min(var(--tds-modal-width), calc(100% - 48px));
+}
 
-.tds-modal::backdrop{
-    background:hsl(0 0% 0% / 40%);
-    opacity:var(--tds-modal-backdrop-opacity);
-    transition:var(--tds-modal-backdrop-transition);
+.tds-modal-frame[data-entering]{
+    animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
   }
 
-@starting-style{
-  .tds-modal[open]{
-    --tds-modal-opacity:0;
-    --tds-modal-scale:.96;
+.tds-modal-frame[data-exiting]{
+    animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
   }
 
-  .tds-modal[open]::backdrop{
-    --tds-modal-backdrop-opacity:0;
+.tds-modal-frame--sm{
+  --tds-modal-width:400px;
+}
+
+.tds-modal-frame--lg{
+  --tds-modal-width:800px;
+}
+
+.tds-modal-frame--xl{
+  --tds-modal-width:1000px;
+}
+
+@keyframes tds-modal-zoom{
+  from{
+    opacity:0;
+    scale:.96;
   }
 }
 
 @media (prefers-reduced-motion: reduce){
-  .tds-modal{
-    --tds-modal-transition:none;
-    --tds-modal-backdrop-transition:none;
+  .tds-modal-overlay[data-entering],
+  .tds-modal-overlay[data-exiting],
+  .tds-modal-frame[data-entering],
+  .tds-modal-frame[data-exiting]{
+    animation:none;
   }
 }
 
-.tds-modal--sm{
-  --tds-modal-width:400px;
-}
+.tds-modal{
+  display:flex;
+  flex-direction:column;
+  width:100%;
+  padding-block:var(--t-spacing-3);
+  padding-inline:0;
+  background:var(--t-surface-color-card);
 
-.tds-modal--lg{
-  --tds-modal-width:800px;
+  border:0;
+  border-radius:var(--t-border-radius-lg);
+  box-shadow:0 4px 18px 0 #0003;
 }
 
-.tds-modal--xl{
-  --tds-modal-width:1000px;
-}
+.tds-modal:focus{
+    outline:none;
+  }
 
 .tds-modal-header{
   display:grid;