@percy/dom 1.31.11-beta.1 → 1.31.12-beta.0

package/dist/bundle.js

@@ -228,7 +228,7 @@
     function markElement(domElement, disableShadowDOM, forceShadowAsLightDOM) {
       var _domElement$tagName;
       // Mark elements that are to be serialized later with a data attribute.
-      if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style'].includes((_domElement$tagName = domElement.tagName) === null || _domElement$tagName === void 0 ? void 0 : _domElement$tagName.toLowerCase())) {
+      if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style', 'dialog'].includes((_domElement$tagName = domElement.tagName) === null || _domElement$tagName === void 0 ? void 0 : _domElement$tagName.toLowerCase())) {
         if (!domElement.getAttribute('data-percy-element-id')) {
           domElement.setAttribute('data-percy-element-id', uid());
         }
@@ -578,8 +578,8 @@
           }
         }
       }
-      if (config.selector && Array.isArray(config.selector)) {
-        for (const selector of config.selector) {
+      if (config.selectors && Array.isArray(config.selectors)) {
+        for (const selector of config.selectors) {
           try {
             const matched = Array.from(dom.querySelectorAll(selector));
             if (!matched.length) {
@@ -670,6 +670,38 @@
       }
     }
 
+    // Serializes open <dialog> elements opened via showModal().
+    //
+    // The browser's ::backdrop and top-layer positioning are lost during
+    // DOM serialization. We stamp data-percy-dialog-modal so the renderer
+    // can call removeAttribute('open') then showModal() to restore them.
+    //
+    // The open attribute is kept so the dialog is visible during Percy's
+    // asset discovery and rendering phases.
+    function serializeDialogs(ctx) {
+      let {
+        dom,
+        clone
+      } = ctx;
+      for (let elem of dom.querySelectorAll('dialog[open]')) {
+        try {
+          let dialogId = elem.getAttribute('data-percy-element-id');
+          if (!dialogId) continue;
+          let cloneEl = clone.querySelector(`[data-percy-element-id="${dialogId}"]`);
+          if (!cloneEl) continue;
+
+          // Detect showModal() vs show()/setAttribute:
+          // :modal pseudo-class matches only dialogs in the top layer (opened via showModal())
+          if (!elem.matches(':modal')) continue;
+
+          // Mark for renderer — it will removeAttribute('open') then showModal()
+          cloneEl.setAttribute('data-percy-dialog-modal', 'true');
+        } catch (err) {
+          handleErrors(err, 'Error serializing dialog element: ', elem);
+        }
+      }
+    }
+
     // Drop loading attribute. We do not scroll page in discovery stage but we want to make sure that
     // all resources are requested, so we drop loading attribute [as it can be set to lazy]
     function dropLoadingAttribute(domElement) {
@@ -950,6 +982,7 @@
       serializeInputElements(ctx);
       serializeFrames(ctx);
       serializeVideos(ctx);
+      serializeDialogs(ctx);
       if (!ctx.enableJavaScript) {
         serializeCSSOM(ctx);
         serializeCanvas(ctx);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.31.11-beta.1",
+  "version": "1.31.12-beta.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "af02ca2e28a4e3f0908b25cb018dd6b81faf5380"
+  "gitHead": "65b6c76698560f85ef40bcb1687bcb2d4f409c61"
 }