diff --git a/package-lock.json b/package-lock.json
index 30b0727..33a1359 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@stryker-mutator/vitest-runner": "^10.0.0",
         "@vitest/coverage-v8": "^4.1.11",
         "eslint": "^10.8.0",
+        "jsdom": "^30.0.1",
         "prettier": "^3.9.6",
         "stylelint": "^17.14.1",
         "stylelint-config-standard-scss": "^17.0.0",
@@ -25,6 +26,39 @@
         "node": "^22.12.0 || >=24.0.0"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-6.0.7.tgz",
+      "integrity": "sha512-vC/bk1Lz7Tn/EfU9/apOTBk80/8dyGyWMowPoV1tJ52muDGsDqt2HPT2klrFUiY60MQmQv9q8yIht15JnBgDGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.3.0",
+        "@csstools/css-color-parser": "^4.1.10",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "lru-cache": "^11.5.2"
+      },
+      "engines": {
+        "node": "^22.13.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-8.3.2.tgz",
+      "integrity": "sha512-93Z1N+BQNXysodoicpOIyNh2drHfz/CTf9nnT0FEx72GJcIiwgydD7tGAr78j41LsYn3hlRn+LdGPuBLn1Bl8Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.5.2"
+      },
+      "engines": {
+        "node": "^22.13.0 || >=24.0.0"
+      }
+    },
     "node_modules/@axe-core/playwright": {
       "version": "4.13.0",
       "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.13.0.tgz",
@@ -641,6 +675,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
     "node_modules/@cacheable/memory": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@cacheable/memory/-/memory-2.2.0.tgz",
@@ -702,10 +749,30 @@
         "@keyv/serialize": "^1.1.1"
       }
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.1.tgz",
+      "integrity": "sha512-gLNsunvwf3mCi5u5o46/Z/JcJMnhbHSaZ69rkgPzNM3J4s8hWwpPUQB6/tt0EDFyCiWzxANlx+2LJwpYj4zS1w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
     "node_modules/@csstools/css-calc": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.3.0.tgz",
-      "integrity": "sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.4.0.tgz",
+      "integrity": "sha512-XQKj5B7QiZcHiegCOCAzcAOJdhGgWOHbbu62h5e5mkHnn8lWcfiJhllkqWmxu5zWR9jucPHuo1iTB56P033hcg==",
       "dev": true,
       "funding": [
         {
@@ -726,6 +793,34 @@
         "@csstools/css-tokenizer": "^4.0.0"
       }
     },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.2.3.tgz",
+      "integrity": "sha512-y4LpL+lmpuyKDiEFq2PnZUVFdAjsoB/qQJod79yLNokXyW7jewi+/WJ69EfItj8A2unWtxXnGjw6LYXgXu5ZjA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.1.1",
+        "@csstools/css-calc": "^3.4.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
     "node_modules/@csstools/css-parser-algorithms": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
@@ -971,6 +1066,24 @@
         "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
+      "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@fontsource/ibm-plex-sans": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-sans/-/ibm-plex-sans-5.3.0.tgz",
@@ -2276,6 +2389,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.1.0.tgz",
+      "integrity": "sha512-fX1Onk0tdVPC7obPWB5EbJ1z7NVhLq4m2xZLq2YXBkxzMXIGRpNMU88n0EPgWseKl12J7zXs7qrDxPK4sRs2fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "5.0.9",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
@@ -2585,6 +2708,35 @@
         "node": ">=4"
       }
     },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2603,6 +2755,13 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2677,6 +2836,19 @@
         "node": ">=14"
       }
     },
+    "node_modules/entities": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.1.0.tgz",
+      "integrity": "sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/env-paths": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
@@ -3463,6 +3635,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -3658,6 +3843,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-stream": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-4.0.1.tgz",
@@ -3790,6 +3982,47 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdom": {
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-30.0.1.tgz",
+      "integrity": "sha512-52v7mUVUfNQVYYqE1lcdaymWL0njO7lTLUog6ZvW2U5KsbiLk/GnZlVJ+qx0xfNJZ6Gn+KSpPNE52vurbxZwrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^6.0.5",
+        "@asamuzakjp/dom-selector": "^8.3.0",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.7",
+        "@exodus/bytes": "^1.15.1",
+        "css-tree": "^3.2.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.5.2",
+        "parse5": "^8.0.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.2",
+        "undici": "^8.9.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^17.1.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.2.3"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -4672,6 +4905,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5094,6 +5340,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/semver": {
       "version": "7.8.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
@@ -5587,6 +5846,13 @@
       "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
       "dev": true
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/table": {
       "version": "6.9.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.9.0.tgz",
@@ -5724,6 +5990,26 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tldts": {
+      "version": "7.4.13",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.13.tgz",
+      "integrity": "sha512-iHtaIWWIbMDkCeJdTBzZFGgbluE5J+oHlb2g7+oAz1S1gpuVpabRZdQyd471Vl8UUkcz2vXSL8xZH2kyCe8tfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.4.13"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.4.13",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.13.tgz",
+      "integrity": "sha512-mbYsrih5FRtGxs3Usvl/PqwJsNpp+jsmrdFviiK02teHDG0/HebBG/pqCylje3kzgXYzuLoHJF/0mz9W53t8Xg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5737,6 +6023,32 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.2.tgz",
+      "integrity": "sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -5811,6 +6123,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/undici": {
+      "version": "8.10.2",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-8.10.2.tgz",
+      "integrity": "sha512-/y4/bH9YNU5hi9NIrpOuvGXFcxrj3CMrV+/AYpowAYTpHn8gX/XPFjNy766FPoYY0miQhdW977JFWKGNhBdwyQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.19.0"
+      }
+    },
     "node_modules/unicorn-magic": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
@@ -6081,6 +6403,19 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/weapon-regex": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/weapon-regex/-/weapon-regex-2.0.4.tgz",
@@ -6088,6 +6423,41 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "17.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-17.1.1.tgz",
+      "integrity": "sha512-ohjk1mdUebJVadRt3bAhQhx8lSnISq+GDttK79LFl8EHQkAPvzwctoasC4hs8tBt6kLAncBWWyq1N52qEfKvDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.15.1",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^22.14.0 || >=24.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6144,6 +6514,23 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index fedac96..a8d64b5 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@stryker-mutator/vitest-runner": "^10.0.0",
     "@vitest/coverage-v8": "^4.1.11",
     "eslint": "^10.8.0",
+    "jsdom": "^30.0.1",
     "prettier": "^3.9.6",
     "stylelint": "^17.14.1",
     "stylelint-config-standard-scss": "^17.0.0",
diff --git a/resources/assets/dist/js/debug.min.js b/resources/assets/dist/js/debug.min.js
index b65ec7e..1b298df 100644
--- a/resources/assets/dist/js/debug.min.js
+++ b/resources/assets/dist/js/debug.min.js
@@ -1,2 +1,2 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./db.min.js","./dom.min.js","./userswitch.min.js"])))=>i.map(i=>d[i]);
-import{a as e}from"./focus.min.js";function t(e,t,n){if(t.tag){for(var r=e.querySelectorAll(`.yii-debug-nav-link[href], a.yii-debug-brand-chip-config[href]`),i=0;i<r.length;i++){var a=new URL(r[i].getAttribute(`href`),n);a.origin!==new URL(n).origin||!a.searchParams.has(`tag`)||(a.searchParams.set(`tag`,t.tag),r[i].setAttribute(`href`,a.pathname+a.search+a.hash))}var o=e.querySelector(`.yii-debug-brand-bar`);if(o){var s=o.querySelector(`.yii-debug-brand-chip-mem`);if(!t.memory){s&&s.remove();return}if(!s){s=e.createElement(`span`),s.className=`yii-debug-brand-chip yii-debug-brand-chip-mem`;var c=e.createElement(`span`);c.className=`yii-debug-brand-label`,c.textContent=`Memory`;var l=e.createElement(`span`);l.className=`yii-debug-brand-value`,s.append(c,l),o.insertBefore(s,o.querySelector(`.yii-debug-brand-chip-config`))}s.querySelector(`.yii-debug-brand-value`).textContent=t.memory}}}(function(){var e=document.querySelector(`[data-yii-debug-history-cursor]`);if(!e)return;var n=Array.prototype.slice.call(document.querySelectorAll(`tr[data-yii-debug-tag]`));if(n.length===0)return;var r=[`2xx`,`3xx`,`4xx`,`5xx`,`none`],i=[`get`,`post`,`put`,`delete`,`other`],a=e.getAttribute(`data-yii-debug-cursor-init`)||``,o=0;if(a!==``){for(var s=0;s<n.length;s++)if(n[s].getAttribute(`data-yii-debug-tag`)===a){o=s;break}}function c(e){if(!e||e.indexOf(`php yii `)===0)return e;try{var t=new URL(e);return(t.pathname||`/`)+t.search+t.hash}catch{return e}}function l(e){var t=parseInt(e.getAttribute(`data-yii-debug-status`)||`0`,10),n=e.getAttribute(`data-yii-debug-url`)||``;return{tag:e.getAttribute(`data-yii-debug-tag`)||``,method:e.getAttribute(`data-yii-debug-method`)||``,url:c(n),fullUrl:n,status:t,time:e.getAttribute(`data-yii-debug-time`)||``,ajax:e.getAttribute(`data-yii-debug-ajax`)===`1`,memory:e.getAttribute(`data-yii-debug-memory`)||``}}function u(e){return e>=500?`5xx`:e>=400?`4xx`:e>=300?`3xx`:e>=200?`2xx`:`none`}function d(e){var t=(e||``).toUpperCase();return t===`GET`||t===`HEAD`?`get`:t===`POST`?`post`:t===`PUT`||t===`PATCH`?`put`:t===`DELETE`?`delete`:`other`}function f(){n.forEach(function(e,t){e.classList.toggle(`is-cursor`,t===o)});var a=l(n[o]);e.querySelectorAll(`[data-snapshot-field]`).forEach(function(e){var t=e.getAttribute(`data-snapshot-field`);t===`method`?(e.textContent=a.method,i.forEach(function(t){e.classList.remove(`yii-debug-verb-`+t)}),e.classList.add(`yii-debug-verb-`+d(a.method))):t===`url`?(e.textContent=a.url,a.fullUrl&&e.setAttribute(`title`,a.fullUrl)):t===`status`?(e.textContent=a.status?String(a.status):`–`,r.forEach(function(t){e.classList.remove(`yii-debug-status-`+t)}),e.classList.add(`yii-debug-status-`+u(a.status))):t===`time`?(e.textContent=a.time,e.hidden=a.time===``):t===`ajax`&&(e.hidden=!a.ajax)});var s=e.querySelector(`.yii-debug-history-card`);s&&s.setAttribute(`title`,(a.method+` `+(a.fullUrl||a.url)).trim()),t(document,a,window.location&&window.location.href);var c=e.querySelector(`[data-yii-debug-cursor="newest"]`),f=e.querySelector(`[data-yii-debug-cursor="newer"]`),p=e.querySelector(`[data-yii-debug-cursor="older"]`),m=e.querySelector(`[data-yii-debug-cursor="oldest"]`),h=o===0,g=o===n.length-1;c&&(c.disabled=h),f&&(f.disabled=h),p&&(p.disabled=g),m&&(m.disabled=g)}function p(e){var t=e.getBoundingClientRect(),n=window.innerHeight||document.documentElement.clientHeight;if(!(t.top>=0&&t.bottom<=n)){var r=window.scrollY+t.top-n/2+t.height/2;window.scrollTo({top:Math.max(0,r),behavior:`smooth`})}}function m(e){e<0||e>=n.length||e===o||(o=e,f(),p(n[o]))}e.addEventListener(`click`,function(t){var r=t.target.closest(`[data-yii-debug-cursor]`);if(r&&e.contains(r)){if(t.preventDefault(),r.disabled)return;var i=r.getAttribute(`data-yii-debug-cursor`);i===`newer`?m(o-1):i===`older`?m(o+1):i===`newest`?m(0):i===`oldest`&&m(n.length-1)}}),f(),o!==0&&p(n[o])})();var n=Object.freeze({error:{button:`Copy failed`,label:`Retry copy`,status:`Copy failed. Try again.`},success:{button:`Copied`,label:`Copied`,status:`Copied to clipboard.`},unavailable:{button:`Copy unavailable`,label:`Unavailable`,status:`Clipboard access is unavailable.`}}),r=0;function i(e){return(e.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(Boolean)}function a(e,t){var n=i(e);n.indexOf(t)===-1&&(n.push(t),e.setAttribute(`aria-describedby`,n.join(` `)))}function o(e){var t=e.ownerDocument.createElement(`span`);return r+=1,t.id=`yii-debug-copy-status-`+r,t.className=`yii-debug-sr-only`,t.setAttribute(`aria-atomic`,`true`),t.setAttribute(`aria-live`,`polite`),t.setAttribute(`data-yii-debug-copy-status`,`true`),e.after(t),a(e,t.id),t}function s(e){for(var t=i(e),n=e.ownerDocument,r=0;r<t.length;r++){var a=n.getElementById(t[r]);if(a&&a.getAttribute(`data-yii-debug-copy-status`)===`true`)return a}return o(e)}function c(e,t,r){var i=e.querySelector(`[data-yii-debug-copy-label]`),a=n[r];e.setAttribute(`aria-label`,a.button),e.setAttribute(`title`,a.button),t.textContent=a.status,i&&(i.textContent=a.label)}function l(e,t,n){var r=e.getAttribute(`data-yii-debug-copy-value`);if(r!==null)return r;var i=e.getAttribute(`data-yii-debug-copy-target`);if(i){var a=i.charAt(0)===`#`?i.slice(1):i,o=t.getElementById?t.getElementById(a):null;return o?o.textContent:null}return e.hasAttribute(`data-yii-debug-copy-link`)?typeof n==`string`?n:n&&n.href?n.href:null:null}function u(e,t,n){for(var r=e.querySelectorAll(`[data-yii-debug-copy], [data-yii-debug-copy-link]`),i=0,a=0;a<r.length;a++){var o=r[a];if(o.getAttribute(`data-yii-debug-copy-bound`)!==`true`){o.setAttribute(`data-yii-debug-copy-bound`,`true`);var u=s(o);o.addEventListener(`click`,(function(r,i){return function(){var a=l(r,e,n);if(a===null||!t||typeof t.writeText!=`function`){c(r,i,`unavailable`);return}try{Promise.resolve(t.writeText(a)).then(function(){c(r,i,`success`)},function(){c(r,i,`error`)})}catch{c(r,i,`error`)}}})(o,u)),i+=1}}return i}var d=`.yii-debug-section-count, .yii-debug-badge, .yii-debug-panel-heading-kind, .yii-debug-heading-permalink, [data-yii-debug-count], [aria-hidden="true"]`;function f(e){var t=e&&e.hash?e.hash:``;try{return t.length>1?decodeURIComponent(t.slice(1)):``}catch{return``}}function p(e){return String(e||``).normalize(`NFKD`).replace(/[\u0300-\u036f]/g,``).toLowerCase().replace(/[^a-z0-9]+/g,`-`).replace(/^-|-$/g,``)||`section`}function m(e){return e.nodeType===3?e.textContent||``:e.nodeType!==1||e.matches&&e.matches(d)?``:e.childNodes?Array.from(e.childNodes).map(m).join(` `):``}function h(e){return((e.childNodes?Array.from(e.childNodes).map(m).join(` `):``)||e.textContent||``).replace(/\s+/g,` `).trim()}function g(e,t,n){for(var r=t,i=2,a=e.getElementById(r);a&&a!==n;)r=t+`-`+i,i+=1,a=e.getElementById(r);return r}function _(e){for(var t=e.querySelectorAll(`#yii-debug-main h2, #yii-debug-main h3`),n=0;n<t.length;n++){var r=t[n];if(!(r.getAttribute(`data-yii-debug-permalink-bound`)===`true`||r.classList.contains(`yii-debug-sr-only`)||r.closest(`a, button, summary, [aria-hidden="true"]`))){var i=h(r);if(i){r.id||=g(r.ownerDocument,`yii-debug-section-`+p(i),r);var a=r.ownerDocument.createElement(`a`);a.className=`yii-debug-heading-permalink`,a.href=`#`+encodeURIComponent(r.id),a.textContent=`#`,a.setAttribute(`aria-label`,`Permalink to `+i),a.setAttribute(`title`,`Permalink to `+i),r.appendChild(a),r.classList.add(`yii-debug-has-permalink`),r.setAttribute(`data-yii-debug-permalink-bound`,`true`)}}}}function v(e,t,n){var r=f(t),i=r&&e.getElementById?e.getElementById(r):null;if(!i)return null;for(var a=e.querySelectorAll(`.yii-debug-deep-link-target`),o=0;o<a.length;o++)a[o].classList.remove(`yii-debug-deep-link-target`);for(var s=i.closest?i.closest(`details`):null;s;)s.open=!0,s=s.parentElement?s.parentElement.closest(`details`):null;var c=i.getAttribute&&i.getAttribute(`role`)===`tabpanel`,l=i.matches&&i.matches(`details.yii-debug-event-item`);return!c&&!l&&i.classList.add(`yii-debug-deep-link-target`),n&&typeof i.scrollIntoView==`function`&&i.scrollIntoView({block:`start`}),i}function y(e,t){_(e);function n(){t.setTimeout(function(){v(e,t.location,!0)},0)}t.addEventListener(`hashchange`,n),t.addEventListener(`popstate`,n),n()}function b(e,t,n,r){return!Number.isInteger(e)||e<=0?-1:n===`Home`?0:n===`End`?e-1:r?n===`ArrowUp`?e-1:0:n===`ArrowUp`?t<0?e-1:(t-1+e)%e:t<0?0:(t+1)%e}function x(e){return!!(e&&e.key===`Escape`&&e.target&&e.target.matches&&e.target.matches(`.yii-debug-grid .filters input`)&&e.target.value!==``)}function S(e){e.value=``,e.dispatchEvent(new Event(`change`,{bubbles:!0}))}var C=`modulepreload`,w=function(e,t){return new URL(e,t).href},T={},E=function(e,t,n){let r=Promise.resolve();if(t&&t.length>0){let e=document.getElementsByTagName(`link`),i=document.querySelector(`meta[property=csp-nonce]`),a=i?.nonce||i?.getAttribute(`nonce`);function o(e){return Promise.all(e.map(e=>Promise.resolve(e).then(e=>({status:`fulfilled`,value:e}),e=>({status:`rejected`,reason:e}))))}function s(e){return import.meta.resolve?import.meta.resolve(e):new URL(e,import.meta.url).href}r=o(t.map(t=>{if(t=w(t,n),t=s(t),t in T)return;T[t]=!0;let r=t.endsWith(`.css`);for(let n=e.length-1;n>=0;n--){let i=e[n];if(i.href===t&&(!r||i.rel===`stylesheet`))return}let i=document.createElement(`link`);if(i.rel=r?`stylesheet`:C,r||(i.as=`script`),i.crossOrigin=``,i.href=t,a&&i.setAttribute(`nonce`,a),document.head.appendChild(i),r)return new Promise((e,n)=>{i.addEventListener(`load`,e),i.addEventListener(`error`,()=>n(Error(`Unable to preload CSS for ${t}`)))})}))}function i(e){let t=new Event(`vite:preloadError`,{cancelable:!0});if(t.payload=e,window.dispatchEvent(t),!t.defaultPrevented)throw e}return r.then(t=>{for(let e of t||[])e.status===`rejected`&&i(e.reason);return e().catch(i)})},D=Object.freeze({db:`.yii-debug-db-explain-toggle, [data-yii-debug-n1-filter]`,phpinfo:`[data-yii-debug-phpinfo-search]`,userswitch:`#debug-userswitch__filter, #debug-userswitch__reset-identity-button`}),O={db:()=>E(()=>import(`./db.min.js`),__vite__mapDeps([0,1]),import.meta.url),phpinfo:()=>E(()=>import(`./phpinfo-search.min.js`),[],import.meta.url),userswitch:()=>E(()=>import(`./userswitch.min.js`),__vite__mapDeps([2,1]),import.meta.url)};function k(e,t=O){var n=[];return Object.keys(D).forEach(function(r){e.querySelector(D[r])&&n.push(Promise.resolve().then(t[r]))}),Promise.all(n)}var A=`[data-yii-debug-filter-row], tbody tr`,j=`data-yii-debug-filter-default-open`,M=`data-yii-debug-filter-previous-open`,N=`[data-yii-debug-filter-target]`;function P(e){var t=e.closest(`[data-yii-debug-filter-scope], .yii-debug-disclosure-body`);if(t){var n=t.querySelector(N);if(n)return n}for(var r=(e.closest(`header, .yii-debug-section-header, .yii-debug-mini-toolbar`)||e).nextElementSibling;r&&!r.matches(N);)r=r.nextElementSibling;return r}function F(e,t){for(var n=e.querySelectorAll(A),r=t.trim().toLowerCase(),i=0,a=0;a<n.length;a++){var o=n[a],s=r===``||o.textContent.toLowerCase().indexOf(r)!==-1;o.hidden=!s,i+=+!!s}for(var c=e.querySelectorAll(`[data-yii-debug-filter-group]`),l=0;l<c.length;l++){for(var u=c[l],d=u.querySelectorAll(A),f=!1,p=0;p<d.length;p++)if(!d[p].hidden){f=!0;break}u.hidden=r!==``&&!f}for(var m=e.querySelectorAll(`[data-yii-debug-filter-details]`),h=0;h<m.length;h++){var g=m[h],_=g.getAttribute(M);r===``?(g.open=(_??g.getAttribute(j))===`true`,_!==null&&g.removeAttribute(M)):(_===null&&g.setAttribute(M,g.open?`true`:`false`),g.hidden||(g.open=!0))}var v=e.querySelector(`[data-yii-debug-filter-empty]`);return v&&(v.hidden=r===``||i>0),{total:n.length,unit:e.getAttribute(`data-yii-debug-filter-unit`)||`rows`,visible:i}}var I=[`ArrowLeft`,`ArrowRight`,`Home`,`End`];function L(e,t){return e&&e.nodeType!==1&&(e=e.parentElement),e&&typeof e.closest==`function`?e.closest(t):null}function R(e,t){var n=e.getAttribute(`aria-controls`);if(!n){var r=e.getAttribute(`href`)||``;n=r.charAt(0)===`#`?r.slice(1):``}return n&&t.getElementById?t.getElementById(n):null}function z(e,t){var n=R(e,t);if(!n)return!1;var r=L(e,`.yii-debug-tabs`),i=n.parentElement,a=r?r.querySelectorAll(`[data-yii-debug-toggle="tab"]`):[],o=i?i.children:[],s;for(s=0;s<a.length;s++)a[s].classList.remove(`is-active`),a[s].setAttribute(`aria-selected`,`false`),a[s].setAttribute(`tabindex`,`-1`);for(s=0;s<o.length;s++)o[s].classList&&o[s].classList.contains(`yii-debug-tab-panel`)&&(o[s].classList.remove(`is-active`),o[s].hidden=!0);return e.classList.add(`is-active`),e.setAttribute(`aria-selected`,`true`),e.setAttribute(`tabindex`,`0`),n.classList.add(`is-active`),n.hidden=!1,!0}function B(e,t){var n=new URL(e);return n.hash=t,n.href}function V(e,t){var n=f(t),r=n&&e.getElementById?e.getElementById(n):null,i=r?r.classList&&r.classList.contains(`yii-debug-tab-panel`)?r:L(r,`.yii-debug-tab-panel`):null;if(!i)return!1;for(var a=e.querySelectorAll(`[data-yii-debug-toggle="tab"]`),o=0;o<a.length;o++)if(a[o].getAttribute(`aria-controls`)===i.id)return z(a[o],e);return!1}function H(e,t){function n(){V(e,t.location)}function r(n,r){if(z(n,e)){var i=n.getAttribute(`aria-controls`);i&&t.history&&t.history.pushState(null,``,B(t.location.href,i)),r&&typeof n.focus==`function`&&n.focus()}}e.addEventListener(`click`,function(e){var t=L(e.target,`[data-yii-debug-toggle="tab"]`);t&&(e.preventDefault(),r(t,!1))}),e.addEventListener(`keydown`,function(e){if(I.indexOf(e.key)!==-1){var t=L(e.target,`[data-yii-debug-toggle="tab"]`);if(t){var n=L(t,`[role="tablist"]`),i=n?Array.from(n.querySelectorAll(`[data-yii-debug-toggle="tab"]`)):[],a=b(i.length,i.indexOf(t),e.key===`ArrowLeft`?`ArrowUp`:e.key,!1);i[a]&&(e.preventDefault(),r(i[a],!0))}}}),t.addEventListener(`hashchange`,n),t.addEventListener(`popstate`,n),n()}var U=`yii_debug_theme`,W=`yii-debug-toolbar-theme`;function G(e){if(!e)return null;let t=String(e).toLowerCase().trim().split(/\s+/),n=t.some(e=>[`dark`,`night`,`black`].includes(e));return n===t.some(e=>[`light`,`day`,`white`].includes(e))?null:n?`dark`:`light`}function K(e){return G(e)===`dark`?`Switch to light theme`:`Switch to dark theme`}function q(e,t){if(!e)return;let n=e.querySelector(`.yii-debug-brand-icon`),r=t=>{let r=G(t)||`light`,i=K(r);e.setAttribute(`data-current-theme`,r),e.setAttribute(`aria-label`,i),e.setAttribute(`aria-pressed`,r===`dark`?`true`:`false`),e.setAttribute(`title`,i),n&&(n.innerHTML=r===`dark`?e.getAttribute(`data-icon-sun`):e.getAttribute(`data-icon-moon`))};r(G(document.documentElement.getAttribute(`data-yii-debug-theme`))),e.addEventListener(`click`,()=>{let e=G(document.documentElement.getAttribute(`data-yii-debug-theme`))===`dark`?`light`:`dark`;document.documentElement.setAttribute(`data-yii-debug-theme`,e),r(e),X(e),$(e),t&&t(e)})}function J(e=W){try{return window.localStorage?G(localStorage.getItem(e)):null}catch{return null}}function Y(){let e=`${W}=`,t=(document.cookie||``).split(`;`).map(e=>e.trim()).find(t=>t.startsWith(e));if(!t)return null;try{return G(decodeURIComponent(t.slice(e.length)))}catch{return null}}function X(e){let t=G(e);if(t){try{localStorage.setItem(W,t)}catch{}try{document.cookie=`${W}=${encodeURIComponent(t)};path=/;max-age=31536000;SameSite=Lax`}catch{}}}function Z(e){let t;try{t=new URL(e,window.location.href)}catch{return null}if(t.origin!==window.location.origin)return null;let n=t.searchParams.get(`r`)||``;return!t.pathname.includes(`/debug/`)&&!t.pathname.endsWith(`/debug`)&&!n.startsWith(`debug/`)&&!n.startsWith(`debug%2F`)?null:t}function Q(e,t){let n=G(t);if(!n)return e;let r=Z(e);return r?(r.searchParams.set(U,n),r.href):e}function $(e){let t=document.querySelectorAll(`a[href]`),n=document.querySelectorAll(`form[action]`),r;for(let n=0;n<t.length;n++){let r=t[n].getAttribute(`href`);r&&!r.startsWith(`#`)&&!r.startsWith(`javascript:`)&&t[n].setAttribute(`href`,Q(r,e))}for(let t=0;t<n.length;t++){let i=n[t].getAttribute(`action`)||window.location.href,a=Z(i)!==null;n[t].setAttribute(`action`,Q(i,e)),!(!a||(n[t].getAttribute(`method`)||`get`).toLowerCase()!==`get`)&&(r=n[t].querySelector(`input[name="${U}"]`),r||(r=document.createElement(`input`),r.type=`hidden`,r.name=U,n[t].appendChild(r)),r.value=e)}}(function(){function t(){var e,t;try{return window.frameElement?(e=window.frameElement.getRootNode?window.frameElement.getRootNode():null,t=e&&e.host?e.host:null,t?G(t.getAttribute(`data-theme`)):null):null}catch{return null}}function n(){try{return G(new URL(window.location.href).searchParams.get(U))}catch{return null}}function r(){var e=t()||Y()||J()||n()||G(document.documentElement.getAttribute(`data-yii-debug-theme`))||(window.matchMedia&&window.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`);return document.documentElement.setAttribute(`data-yii-debug-theme`,e),X(e),e}function i(){q(document.querySelector(`[data-yii-debug-theme-toggle]`),function(e){window.parent&&window.parent!==window&&window.parent.postMessage({source:`yii-debug-toolbar`,type:`theme`,theme:e},window.location.origin)})}function a(e,t){for(e&&e.nodeType!==1&&(e=e.parentElement);e&&e.nodeType===1;){if(e.matches(t))return e;e=e.parentElement}return null}function o(e,t){return a(e,`[data-yii-debug-toggle="`+t+`"]`)}function s(e){return e?Array.from(e.querySelectorAll(`a[href], button:not([disabled]), [role="menuitem"][tabindex]`)).filter(function(e){return!e.hidden&&e.getAttribute(`aria-hidden`)!==`true`}):[]}function c(){for(var e=document.querySelectorAll(`.yii-debug-cell-more`),t=0,n=0;n<e.length;n++){var r=e[n].querySelector(`.yii-debug-cell-more-body`),i=e[n].querySelector(`[data-yii-debug-toggle="cell-more"]`);if(!(!r||!i)){if(!r.id)do t++,r.id=`yii-debug-cell-more-`+t;while(document.querySelectorAll(`[id="`+r.id+`"]`).length>1);i.setAttribute(`aria-controls`,r.id),i.textContent=e[n].classList.contains(`is-open`)?`Show less`:`Show more`}}}function l(e){var t=P(e);if(t){var n=e.closest(`header, .yii-debug-section-header, .yii-debug-mini-toolbar`)||e.parentElement||e,r=F(t,e.value),i=n.querySelector(`[data-yii-debug-filter-status]`);if(!i){i=document.createElement(`span`),i.id=e.id?e.id+`-status`:`yii-debug-filter-status-`+(document.querySelectorAll(`[data-yii-debug-filter-status]`).length+1),i.className=`yii-debug-sr-only`,i.setAttribute(`aria-live`,`polite`),i.setAttribute(`aria-atomic`,`true`),i.setAttribute(`data-yii-debug-filter-status`,`true`),n.appendChild(i);var a=(e.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(Boolean);a.indexOf(i.id)===-1&&(a.push(i.id),e.setAttribute(`aria-describedby`,a.join(` `)))}i.textContent=r.visible+` of `+r.total+` `+r.unit+` shown.`}}function d(e){for(var t=document.querySelectorAll(`.yii-debug-dropdown.is-open`),n=0;n<t.length;n++){var r=t[n].querySelector(`.yii-debug-dropdown-menu`);if(!(e&&r===e)){t[n].classList.remove(`is-open`);var i=t[n].querySelector(`[data-yii-debug-toggle="dropdown"]`);i&&i.setAttribute(`aria-expanded`,`false`)}}}$(r()),i(),c(),document.addEventListener(`click`,function(e){var t=o(e.target,`dropdown`),n=o(e.target,`collapse`),r=o(e.target,`cell-more`);if(r){var i=a(r,`.yii-debug-cell-more`);if(e.preventDefault(),!i)return;var s=i.classList.toggle(`is-open`);r.setAttribute(`aria-expanded`,s?`true`:`false`),r.textContent=s?`Show less`:`Show more`;return}if(n){var c=n.getAttribute(`data-target`)||n.getAttribute(`href`),l=c?document.querySelector(c):null;if(e.preventDefault(),!l)return;var u=l.classList.contains(`is-open`);l.classList.toggle(`is-open`,!u),n.setAttribute(`aria-expanded`,u?`false`:`true`);return}if(t){var f=a(t,`.yii-debug-dropdown`),p=f?f.querySelector(`.yii-debug-dropdown-menu`):null;if(e.preventDefault(),e.stopPropagation(),!f||!p)return;var m=f.classList.contains(`is-open`);d(p),f.classList.toggle(`is-open`,!m),t.setAttribute(`aria-expanded`,m?`false`:`true`);return}d(null)}),document.addEventListener(`keydown`,function(t){if(t.key===`Escape`&&t.target.matches&&t.target.matches(`[data-yii-debug-filter]`)&&t.target.value!==``){t.preventDefault(),t.stopPropagation(),t.target.value=``,l(t.target),t.target.focus();return}if(x(t)){t.preventDefault(),t.stopImmediatePropagation(),S(t.target);return}var n=a(t.target,`.yii-debug-dropdown`),r=n?n.querySelector(`[data-yii-debug-toggle="dropdown"]`):null,i=n?n.querySelector(`.yii-debug-dropdown-menu`):null;if(n&&r&&i&&[`ArrowDown`,`ArrowUp`,`Home`,`End`].indexOf(t.key)!==-1){var o=s(i),c=o.indexOf(t.target),u=b(o.length,c,t.key,t.target===r);if(o.length===0)return;t.preventDefault(),d(i),n.classList.add(`is-open`),r.setAttribute(`aria-expanded`,`true`),o[u].focus();return}if(t.key===`Escape`){var f=document.querySelector(`.yii-debug-dropdown.is-open`),p=!!f,m=f?f.querySelector(`[data-yii-debug-toggle="dropdown"]`):null;d(null),m&&m.focus(),window.setTimeout(function(){e(t,window,p)},0)}}),document.addEventListener(`click`,function(e){var t=e.target.closest(`[data-yii-debug-reveal]`);if(t){var n=t.classList.toggle(`is-revealed`),r=t.getAttribute(`data-yii-debug-reveal-label`)||`value`;t.setAttribute(`aria-pressed`,n?`true`:`false`),t.setAttribute(`aria-label`,(n?`Hide `:`Reveal `)+r)}}),document.addEventListener(`change`,function(e){var t=e.target;if(!(!t||!t.matches(`[data-yii-debug-pagesize]`))){var n=new URL(window.location.href);t.value===``||t.value===`0`?n.searchParams.delete(`per-page`):n.searchParams.set(`per-page`,t.value),n.searchParams.delete(`page`),window.location.href=n.toString()}}),document.addEventListener(`input`,function(e){var t=e.target;!t||!t.matches(`[data-yii-debug-filter]`)||l(t)}),(function(){var e=`yii-debug-grid-filter-focus`,t=/^[A-Za-z][A-Za-z0-9_]*\[[^\]]+\]$/,n=null;function r(e){return!!e&&!!e.name&&t.test(e.name)}function i(){try{return window.sessionStorage}catch{return null}}function a(t){var n=i();if(n)try{n.setItem(e,JSON.stringify({end:t.selectionEnd,name:t.name,start:t.selectionStart}))}catch{}}function o(){var t=i(),n;if(t){try{n=JSON.parse(t.getItem(e)||`null`),t.removeItem(e)}catch{return}if(!(!n||!r(n))){var a=document.getElementsByName(n.name),o=a.length>0?a[0]:null;!o||o.tagName!==`INPUT`||(o.focus({preventScroll:!0}),typeof o.setSelectionRange==`function`&&o.setSelectionRange(n.start,n.end))}}}function s(e){if(r(e)){var t=new URL(window.location.href);e.value===``||e.value===null?t.searchParams.delete(e.name):t.searchParams.set(e.name,e.value),t.searchParams.delete(`page`),t.toString()!==window.location.href&&(a(e),document.documentElement.setAttribute(`aria-busy`,`true`),window.location.href=t.toString())}}function c(e){n&&clearTimeout(n.timeout),n={input:e,timeout:setTimeout(function(){var e=n;n=null,s(e.input)},650)}}function l(){if(!n)return!1;clearTimeout(n.timeout);var e=n.input;return n=null,s(e),!0}document.addEventListener(`change`,function(e){r(e.target)&&(n&&n.input===e.target&&(clearTimeout(n.timeout),n=null),(e.target.tagName===`SELECT`||e.target.tagName===`INPUT`)&&s(e.target))}),document.addEventListener(`input`,function(e){e.target.tagName===`INPUT`&&e.target.type!==`submit`&&r(e.target)&&c(e.target)}),document.addEventListener(`keydown`,function(e){e.key===`Enter`&&e.target.tagName===`INPUT`&&e.target.type!==`submit`&&r(e.target)&&(e.preventDefault(),l()||s(e.target))}),document.addEventListener(`focusout`,function(e){e.target.tagName===`INPUT`&&e.target.type!==`submit`&&r(e.target)&&n&&n.input===e.target&&l()}),o()})(),y(document,window),H(document,window),u(document,window.navigator?window.navigator.clipboard:null,window.location),k(document).catch(function(){document.documentElement.setAttribute(`data-yii-debug-feature-load-error`,`true`);var e=document.createElement(`div`);e.className=`yii-debug-callout yii-debug-callout-danger`,e.setAttribute(`role`,`alert`),e.textContent=`An interactive debugger feature failed to load. Reload the page and try again.`;var t=document.getElementById(`yii-debug-main`);t&&t.prepend(e)})})();
\ No newline at end of file
+import{a as e}from"./focus.min.js";function t(e,t,n){if(t.tag){for(var r=e.querySelectorAll(`.yii-debug-nav-link[href], a.yii-debug-brand-chip-config[href]`),i=0;i<r.length;i++){var a=new URL(r[i].getAttribute(`href`),n);a.origin!==new URL(n).origin||!a.searchParams.has(`tag`)||(a.searchParams.set(`tag`,t.tag),r[i].setAttribute(`href`,a.pathname+a.search+a.hash))}var o=e.querySelector(`.yii-debug-brand-bar`);if(o){var s=o.querySelector(`.yii-debug-brand-chip-mem`);if(!t.memory){s&&s.remove();return}if(!s){s=e.createElement(`span`),s.className=`yii-debug-brand-chip yii-debug-brand-chip-mem`;var c=e.createElement(`span`);c.className=`yii-debug-brand-label`,c.textContent=`Memory`;var l=e.createElement(`span`);l.className=`yii-debug-brand-value`,s.append(c,l),o.insertBefore(s,o.querySelector(`.yii-debug-brand-chip-config`))}s.querySelector(`.yii-debug-brand-value`).textContent=t.memory}}}(function(){var e=document.querySelector(`[data-yii-debug-history-cursor]`);if(!e)return;var n=Array.prototype.slice.call(document.querySelectorAll(`tr[data-yii-debug-tag]`));if(n.length===0)return;var r=[`2xx`,`3xx`,`4xx`,`5xx`,`none`],i=[`get`,`post`,`put`,`delete`,`other`],a=e.getAttribute(`data-yii-debug-cursor-init`)||``,o=0;if(a!==``){for(var s=0;s<n.length;s++)if(n[s].getAttribute(`data-yii-debug-tag`)===a){o=s;break}}function c(e){if(!e||e.indexOf(`php yii `)===0)return e;try{var t=new URL(e);return(t.pathname||`/`)+t.search+t.hash}catch{return e}}function l(e){var t=parseInt(e.getAttribute(`data-yii-debug-status`)||`0`,10),n=e.getAttribute(`data-yii-debug-url`)||``;return{tag:e.getAttribute(`data-yii-debug-tag`)||``,method:e.getAttribute(`data-yii-debug-method`)||``,url:c(n),fullUrl:n,status:t,time:e.getAttribute(`data-yii-debug-time`)||``,ajax:e.getAttribute(`data-yii-debug-ajax`)===`1`,memory:e.getAttribute(`data-yii-debug-memory`)||``}}function u(e){return e>=500?`5xx`:e>=400?`4xx`:e>=300?`3xx`:e>=200?`2xx`:`none`}function d(e){var t=(e||``).toUpperCase();return t===`GET`||t===`HEAD`?`get`:t===`POST`?`post`:t===`PUT`||t===`PATCH`?`put`:t===`DELETE`?`delete`:`other`}function f(){n.forEach(function(e,t){e.classList.toggle(`is-cursor`,t===o)});var a=l(n[o]);e.querySelectorAll(`[data-snapshot-field]`).forEach(function(e){var t=e.getAttribute(`data-snapshot-field`);t===`method`?(e.textContent=a.method,i.forEach(function(t){e.classList.remove(`yii-debug-verb-`+t)}),e.classList.add(`yii-debug-verb-`+d(a.method))):t===`url`?(e.textContent=a.url,a.fullUrl&&e.setAttribute(`title`,a.fullUrl)):t===`status`?(e.textContent=a.status?String(a.status):`–`,r.forEach(function(t){e.classList.remove(`yii-debug-status-`+t)}),e.classList.add(`yii-debug-status-`+u(a.status))):t===`time`?(e.textContent=a.time,e.hidden=a.time===``):t===`ajax`&&(e.hidden=!a.ajax)});var s=e.querySelector(`.yii-debug-history-card`);s&&s.setAttribute(`title`,(a.method+` `+(a.fullUrl||a.url)).trim()),t(document,a,window.location&&window.location.href);var c=e.querySelector(`[data-yii-debug-cursor="newest"]`),f=e.querySelector(`[data-yii-debug-cursor="newer"]`),p=e.querySelector(`[data-yii-debug-cursor="older"]`),m=e.querySelector(`[data-yii-debug-cursor="oldest"]`),h=o===0,g=o===n.length-1;c&&(c.disabled=h),f&&(f.disabled=h),p&&(p.disabled=g),m&&(m.disabled=g)}function p(e){var t=e.getBoundingClientRect(),n=window.innerHeight||document.documentElement.clientHeight;if(!(t.top>=0&&t.bottom<=n)){var r=window.scrollY+t.top-n/2+t.height/2;window.scrollTo({top:Math.max(0,r),behavior:`smooth`})}}function m(e){e<0||e>=n.length||e===o||(o=e,f(),p(n[o]))}e.addEventListener(`click`,function(t){var r=t.target.closest(`[data-yii-debug-cursor]`);if(r&&e.contains(r)){if(t.preventDefault(),r.disabled)return;var i=r.getAttribute(`data-yii-debug-cursor`);i===`newer`?m(o-1):i===`older`?m(o+1):i===`newest`?m(0):i===`oldest`&&m(n.length-1)}}),f(),o!==0&&p(n[o])})();var n=Object.freeze({error:{button:`Copy failed`,label:`Retry copy`,status:`Copy failed. Try again.`},success:{button:`Copied`,label:`Copied`,status:`Copied to clipboard.`},unavailable:{button:`Copy unavailable`,label:`Unavailable`,status:`Clipboard access is unavailable.`}}),r=0;function i(e){return(e.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(Boolean)}function a(e,t){var n=i(e);n.indexOf(t)===-1&&(n.push(t),e.setAttribute(`aria-describedby`,n.join(` `)))}function o(e){var t=e.ownerDocument.createElement(`span`);return r+=1,t.id=`yii-debug-copy-status-`+r,t.className=`yii-debug-sr-only`,t.setAttribute(`aria-atomic`,`true`),t.setAttribute(`aria-live`,`polite`),t.setAttribute(`data-yii-debug-copy-status`,`true`),e.after(t),a(e,t.id),t}function s(e){for(var t=i(e),n=e.ownerDocument,r=0;r<t.length;r++){var a=n.getElementById(t[r]);if(a&&a.getAttribute(`data-yii-debug-copy-status`)===`true`)return a}return o(e)}function c(e,t,r){var i=e.querySelector(`[data-yii-debug-copy-label]`),a=n[r];e.setAttribute(`aria-label`,a.button),e.setAttribute(`title`,a.button),t.textContent=a.status,i&&(i.textContent=a.label)}function l(e,t,n){var r=e.getAttribute(`data-yii-debug-copy-value`);if(r!==null)return r;var i=e.getAttribute(`data-yii-debug-copy-target`);if(i){var a=i.charAt(0)===`#`?i.slice(1):i,o=t.getElementById?t.getElementById(a):null;return o?o.textContent:null}return e.hasAttribute(`data-yii-debug-copy-link`)?typeof n==`string`?n:n&&n.href?n.href:null:null}function u(e,t,n){for(var r=e.querySelectorAll(`[data-yii-debug-copy], [data-yii-debug-copy-link]`),i=0,a=0;a<r.length;a++){var o=r[a];if(o.getAttribute(`data-yii-debug-copy-bound`)!==`true`){o.setAttribute(`data-yii-debug-copy-bound`,`true`);var u=s(o);o.addEventListener(`click`,(function(r,i){return function(){var a=l(r,e,n);if(a===null||!t||typeof t.writeText!=`function`){c(r,i,`unavailable`);return}try{Promise.resolve(t.writeText(a)).then(function(){c(r,i,`success`)},function(){c(r,i,`error`)})}catch{c(r,i,`error`)}}})(o,u)),i+=1}}return i}var d=`.yii-debug-section-count, .yii-debug-badge, .yii-debug-panel-heading-kind, .yii-debug-heading-permalink, [data-yii-debug-count], [aria-hidden="true"]`;function f(e){var t=e&&e.hash?e.hash:``;try{return t.length>1?decodeURIComponent(t.slice(1)):``}catch{return``}}function p(e){return String(e||``).normalize(`NFKD`).replace(/[\u0300-\u036f]/g,``).toLowerCase().replace(/[^a-z0-9]+/g,`-`).replace(/^-|-$/g,``)||`section`}function m(e){return e.nodeType===3?e.textContent||``:e.nodeType!==1||e.matches&&e.matches(d)?``:e.childNodes?Array.from(e.childNodes).map(m).join(` `):``}function h(e){return((e.childNodes?Array.from(e.childNodes).map(m).join(` `):``)||e.textContent||``).replace(/\s+/g,` `).trim()}function g(e,t,n){for(var r=t,i=2,a=e.getElementById(r);a&&a!==n;)r=t+`-`+i,i+=1,a=e.getElementById(r);return r}function _(e){for(var t=e.querySelectorAll(`#yii-debug-main h2, #yii-debug-main h3`),n=0;n<t.length;n++){var r=t[n];if(!(r.getAttribute(`data-yii-debug-permalink-bound`)===`true`||r.classList.contains(`yii-debug-sr-only`)||r.closest(`a, button, summary, [aria-hidden="true"]`))){var i=h(r);if(i){r.id||=g(r.ownerDocument,`yii-debug-section-`+p(i),r);var a=r.ownerDocument.createElement(`a`);a.className=`yii-debug-heading-permalink`,a.href=`#`+encodeURIComponent(r.id),a.textContent=`#`,a.setAttribute(`aria-label`,`Permalink to `+i),a.setAttribute(`title`,`Permalink to `+i),r.appendChild(a),r.classList.add(`yii-debug-has-permalink`),r.setAttribute(`data-yii-debug-permalink-bound`,`true`)}}}}function v(e,t,n){var r=f(t),i=r&&e.getElementById?e.getElementById(r):null;if(!i)return null;for(var a=e.querySelectorAll(`.yii-debug-deep-link-target`),o=0;o<a.length;o++)a[o].classList.remove(`yii-debug-deep-link-target`);for(var s=i.closest?i.closest(`details`):null;s;)s.open=!0,s=s.parentElement?s.parentElement.closest(`details`):null;var c=i.getAttribute&&i.getAttribute(`role`)===`tabpanel`,l=i.matches&&i.matches(`details.yii-debug-event-item`);return!c&&!l&&i.classList.add(`yii-debug-deep-link-target`),n&&typeof i.scrollIntoView==`function`&&i.scrollIntoView({block:`start`}),i}function y(e,t){_(e);function n(){t.setTimeout(function(){v(e,t.location,!0)},0)}t.addEventListener(`hashchange`,n),t.addEventListener(`popstate`,n),n()}function b(e,t,n,r){return!Number.isInteger(e)||e<=0?-1:n===`Home`?0:n===`End`?e-1:r?n===`ArrowUp`?e-1:0:n===`ArrowUp`?t<0?e-1:(t-1+e)%e:t<0?0:(t+1)%e}function x(e){return!!(e&&e.key===`Escape`&&e.target&&e.target.matches&&e.target.matches(`.yii-debug-grid .filters input`)&&e.target.value!==``)}function S(e){e.value=``,e.dispatchEvent(new Event(`change`,{bubbles:!0}))}var C=`modulepreload`,w=function(e,t){return new URL(e,t).href},T={},E=function(e,t,n){let r=Promise.resolve();if(t&&t.length>0){let e=document.getElementsByTagName(`link`),i=document.querySelector(`meta[property=csp-nonce]`),a=i?.nonce||i?.getAttribute(`nonce`);function o(e){return Promise.all(e.map(e=>Promise.resolve(e).then(e=>({status:`fulfilled`,value:e}),e=>({status:`rejected`,reason:e}))))}function s(e){return import.meta.resolve?import.meta.resolve(e):new URL(e,import.meta.url).href}r=o(t.map(t=>{if(t=w(t,n),t=s(t),t in T)return;T[t]=!0;let r=t.endsWith(`.css`);for(let n=e.length-1;n>=0;n--){let i=e[n];if(i.href===t&&(!r||i.rel===`stylesheet`))return}let i=document.createElement(`link`);if(i.rel=r?`stylesheet`:C,r||(i.as=`script`),i.crossOrigin=``,i.href=t,a&&i.setAttribute(`nonce`,a),document.head.appendChild(i),r)return new Promise((e,n)=>{i.addEventListener(`load`,e),i.addEventListener(`error`,()=>n(Error(`Unable to preload CSS for ${t}`)))})}))}function i(e){let t=new Event(`vite:preloadError`,{cancelable:!0});if(t.payload=e,window.dispatchEvent(t),!t.defaultPrevented)throw e}return r.then(t=>{for(let e of t||[])e.status===`rejected`&&i(e.reason);return e().catch(i)})},D=Object.freeze({db:`.yii-debug-db-explain-toggle, [data-yii-debug-n1-filter]`,phpinfo:`[data-yii-debug-phpinfo-search]`,userswitch:`#debug-userswitch__filter, #debug-userswitch__reset-identity-button`}),O={db:()=>E(()=>import(`./db.min.js`),__vite__mapDeps([0,1]),import.meta.url),phpinfo:()=>E(()=>import(`./phpinfo-search.min.js`),[],import.meta.url),userswitch:()=>E(()=>import(`./userswitch.min.js`),__vite__mapDeps([2,1]),import.meta.url)};function k(e,t=O){var n=[];return Object.keys(D).forEach(function(r){e.querySelector(D[r])&&n.push(Promise.resolve().then(t[r]))}),Promise.all(n)}var A=`[data-yii-debug-filter-row], tbody tr`,j=`data-yii-debug-filter-default-open`,M=`data-yii-debug-filter-previous-open`,N=`[data-yii-debug-filter-target]`;function P(e){var t=e.closest(`[data-yii-debug-filter-scope], .yii-debug-disclosure-body`);if(t){var n=t.querySelector(N);if(n)return n}for(var r=(e.closest(`header, .yii-debug-section-header, .yii-debug-mini-toolbar`)||e).nextElementSibling;r&&!r.matches(N);)r=r.nextElementSibling;return r}function F(e,t){for(var n=e.querySelectorAll(A),r=t.trim().toLowerCase(),i=0,a=0;a<n.length;a++){var o=n[a],s=r===``||o.textContent.toLowerCase().indexOf(r)!==-1;o.hidden=!s,i+=+!!s}for(var c=e.querySelectorAll(`[data-yii-debug-filter-group]`),l=0;l<c.length;l++){for(var u=c[l],d=u.querySelectorAll(A),f=!1,p=0;p<d.length;p++)if(!d[p].hidden){f=!0;break}u.hidden=r!==``&&!f}for(var m=e.querySelectorAll(`[data-yii-debug-filter-details]`),h=0;h<m.length;h++){var g=m[h],_=g.getAttribute(M);r===``?(g.open=(_??g.getAttribute(j))===`true`,_!==null&&g.removeAttribute(M)):(_===null&&g.setAttribute(M,g.open?`true`:`false`),g.hidden||(g.open=!0))}var v=e.querySelector(`[data-yii-debug-filter-empty]`);return v&&(v.hidden=r===``||i>0),{total:n.length,unit:e.getAttribute(`data-yii-debug-filter-unit`)||`rows`,visible:i}}var I=[`ArrowLeft`,`ArrowRight`,`Home`,`End`];function L(e,t){return e&&e.nodeType!==1&&(e=e.parentElement),e&&typeof e.closest==`function`?e.closest(t):null}function R(e,t){var n=e.getAttribute(`aria-controls`);if(!n){var r=e.getAttribute(`href`)||``;n=r.charAt(0)===`#`?r.slice(1):``}return n&&t.getElementById?t.getElementById(n):null}function z(e,t){var n=R(e,t);if(!n)return!1;var r=L(e,`.yii-debug-tabs`),i=n.parentElement,a=r?r.querySelectorAll(`[data-yii-debug-toggle="tab"]`):[],o=i?i.children:[],s;for(s=0;s<a.length;s++)a[s].classList.remove(`is-active`),a[s].setAttribute(`aria-selected`,`false`),a[s].setAttribute(`tabindex`,`-1`);for(s=0;s<o.length;s++)o[s].classList&&o[s].classList.contains(`yii-debug-tab-panel`)&&(o[s].classList.remove(`is-active`),o[s].hidden=!0);return e.classList.add(`is-active`),e.setAttribute(`aria-selected`,`true`),e.setAttribute(`tabindex`,`0`),n.classList.add(`is-active`),n.hidden=!1,!0}function B(e,t){var n=new URL(e);return n.hash=t,n.href}function V(e,t){var n=f(t),r=n&&e.getElementById?e.getElementById(n):null,i=r?r.classList&&r.classList.contains(`yii-debug-tab-panel`)?r:L(r,`.yii-debug-tab-panel`):null;if(!i)return!1;for(var a=e.querySelectorAll(`[data-yii-debug-toggle="tab"]`),o=0;o<a.length;o++)if(a[o].getAttribute(`aria-controls`)===i.id)return z(a[o],e);return!1}function H(e,t){function n(){V(e,t.location)}function r(n,r){if(z(n,e)){var i=n.getAttribute(`aria-controls`);i&&t.history&&t.history.pushState(null,``,B(t.location.href,i)),r&&typeof n.focus==`function`&&n.focus()}}e.addEventListener(`click`,function(e){var t=L(e.target,`[data-yii-debug-toggle="tab"]`);t&&(e.preventDefault(),r(t,!1))}),e.addEventListener(`keydown`,function(e){if(I.indexOf(e.key)!==-1){var t=L(e.target,`[data-yii-debug-toggle="tab"]`);if(t){var n=L(t,`[role="tablist"]`),i=n?Array.from(n.querySelectorAll(`[data-yii-debug-toggle="tab"]`)):[],a=b(i.length,i.indexOf(t),e.key===`ArrowLeft`?`ArrowUp`:e.key,!1);i[a]&&(e.preventDefault(),r(i[a],!0))}}}),t.addEventListener(`hashchange`,n),t.addEventListener(`popstate`,n),n()}var U=`yii_debug_theme`,W=`yii-debug-toolbar-theme`;function G(e){if(!e)return null;let t=String(e).toLowerCase().trim().split(/\s+/),n=t.some(e=>[`dark`,`night`,`black`].includes(e));return n===t.some(e=>[`light`,`day`,`white`].includes(e))?null:n?`dark`:`light`}function K(e){return G(e)===`dark`?`Switch to light theme`:`Switch to dark theme`}function q(e,t){if(!e)return;let n=e.querySelector(`.yii-debug-brand-icon`),r=t=>{let r=G(t)||`light`,i=K(r);e.setAttribute(`data-current-theme`,r),e.setAttribute(`aria-label`,i),e.setAttribute(`aria-pressed`,r===`dark`?`true`:`false`),e.setAttribute(`title`,i),n&&(n.innerHTML=r===`dark`?e.getAttribute(`data-icon-sun`):e.getAttribute(`data-icon-moon`))};r(G(document.documentElement.getAttribute(`data-yii-debug-theme`))),e.addEventListener(`click`,()=>{let e=G(document.documentElement.getAttribute(`data-yii-debug-theme`))===`dark`?`light`:`dark`;document.documentElement.setAttribute(`data-yii-debug-theme`,e),r(e),X(e),$(e),t&&t(e)})}function J(e=W){try{return window.localStorage?G(localStorage.getItem(e)):null}catch{return null}}function Y(){let e=`${W}=`,t=(document.cookie||``).split(`;`).map(e=>e.trim()).find(t=>t.startsWith(e));if(!t)return null;try{return G(decodeURIComponent(t.slice(e.length)))}catch{return null}}function X(e){let t=G(e);if(t){try{localStorage.setItem(W,t)}catch{}try{document.cookie=`${W}=${encodeURIComponent(t)};path=/;max-age=31536000;SameSite=Lax`}catch{}}}function Z(e){let t;try{t=new URL(e,window.location.href)}catch{return null}if(t.origin!==window.location.origin)return null;let n=t.searchParams.get(`r`)||``;return!t.pathname.includes(`/debug/`)&&!t.pathname.endsWith(`/debug`)&&!n.startsWith(`debug/`)&&!n.startsWith(`debug%2F`)?null:t}function Q(e,t){let n=G(t);if(!n)return e;let r=Z(e);return r?(r.searchParams.set(U,n),r.href):e}function $(e){let t=document.querySelectorAll(`a[href]`),n=document.querySelectorAll(`form[action]`),r;for(let n=0;n<t.length;n++){let r=t[n].getAttribute(`href`);r&&!r.startsWith(`#`)&&!r.startsWith(`javascript:`)&&t[n].setAttribute(`href`,Q(r,e))}for(let t=0;t<n.length;t++){let i=n[t].getAttribute(`action`)||window.location.href,a=Z(i)!==null;n[t].setAttribute(`action`,Q(i,e)),!(!a||(n[t].getAttribute(`method`)||`get`).toLowerCase()!==`get`)&&(r=n[t].querySelector(`input[name="${U}"]`),r||(r=document.createElement(`input`),r.type=`hidden`,r.name=U,n[t].appendChild(r)),r.value=e)}}(function(){function t(){var e,t;try{return window.frameElement?(e=window.frameElement.getRootNode?window.frameElement.getRootNode():null,t=e&&e.host?e.host:null,t?G(t.getAttribute(`data-theme`)):null):null}catch{return null}}function n(){try{return G(new URL(window.location.href).searchParams.get(U))}catch{return null}}function r(){var e=t()||Y()||J()||n()||G(document.documentElement.getAttribute(`data-yii-debug-theme`))||(window.matchMedia&&window.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`);return document.documentElement.setAttribute(`data-yii-debug-theme`,e),X(e),e}function i(){q(document.querySelector(`[data-yii-debug-theme-toggle]`),function(e){window.parent&&window.parent!==window&&window.parent.postMessage({source:`yii-debug-toolbar`,type:`theme`,theme:e},window.location.origin)})}function a(e,t){for(e&&e.nodeType!==1&&(e=e.parentElement);e&&e.nodeType===1;){if(e.matches(t))return e;e=e.parentElement}return null}function o(e,t){return a(e,`[data-yii-debug-toggle="`+t+`"]`)}function s(e){return Array.from(e.querySelectorAll(`a[href], button:not([disabled]), [role="menuitem"][tabindex]`)).filter(function(e){return!e.hidden&&e.getAttribute(`aria-hidden`)!==`true`})}function c(){for(var e=document.querySelectorAll(`.yii-debug-cell-more`),t=0,n=0;n<e.length;n++){var r=e[n].querySelector(`.yii-debug-cell-more-body`),i=e[n].querySelector(`[data-yii-debug-toggle="cell-more"]`);if(!(!r||!i)){if(!r.id)do t++,r.id=`yii-debug-cell-more-`+t;while(document.querySelectorAll(`[id="`+r.id+`"]`).length>1);i.setAttribute(`aria-controls`,r.id),i.textContent=e[n].classList.contains(`is-open`)?`Show less`:`Show more`}}}function l(e){var t=P(e);if(t){var n=e.closest(`header, .yii-debug-section-header, .yii-debug-mini-toolbar`)||e.parentElement||e,r=F(t,e.value),i=n.querySelector(`[data-yii-debug-filter-status]`);if(!i){i=document.createElement(`span`),i.id=e.id?e.id+`-status`:`yii-debug-filter-status-`+(document.querySelectorAll(`[data-yii-debug-filter-status]`).length+1),i.className=`yii-debug-sr-only`,i.setAttribute(`aria-live`,`polite`),i.setAttribute(`aria-atomic`,`true`),i.setAttribute(`data-yii-debug-filter-status`,`true`),n.appendChild(i);var a=(e.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(Boolean);a.indexOf(i.id)===-1&&(a.push(i.id),e.setAttribute(`aria-describedby`,a.join(` `)))}i.textContent=r.visible+` of `+r.total+` `+r.unit+` shown.`}}function d(e){for(var t=document.querySelectorAll(`.yii-debug-dropdown.is-open`),n=0;n<t.length;n++){var r=t[n].querySelector(`.yii-debug-dropdown-menu`);if(!(e&&r===e)){t[n].classList.remove(`is-open`);var i=t[n].querySelector(`[data-yii-debug-toggle="dropdown"]`);i&&i.setAttribute(`aria-expanded`,`false`)}}}$(r()),i(),c(),document.addEventListener(`click`,function(e){var t=o(e.target,`dropdown`),n=o(e.target,`collapse`),r=o(e.target,`cell-more`);if(r){var i=a(r,`.yii-debug-cell-more`);if(e.preventDefault(),!i)return;var s=i.classList.toggle(`is-open`);r.setAttribute(`aria-expanded`,s?`true`:`false`),r.textContent=s?`Show less`:`Show more`;return}if(n){var c=n.getAttribute(`data-target`)||n.getAttribute(`href`),l=c?document.querySelector(c):null;if(e.preventDefault(),!l)return;var u=l.classList.contains(`is-open`);l.classList.toggle(`is-open`,!u),n.setAttribute(`aria-expanded`,u?`false`:`true`);return}if(t){var f=a(t,`.yii-debug-dropdown`),p=f?f.querySelector(`.yii-debug-dropdown-menu`):null;if(e.preventDefault(),e.stopPropagation(),!f||!p)return;var m=f.classList.contains(`is-open`);d(p),f.classList.toggle(`is-open`,!m),t.setAttribute(`aria-expanded`,m?`false`:`true`);return}d(null)}),document.addEventListener(`keydown`,function(t){if(t.key===`Escape`&&t.target.matches&&t.target.matches(`[data-yii-debug-filter]`)&&t.target.value!==``){t.preventDefault(),t.stopPropagation(),t.target.value=``,l(t.target),t.target.focus();return}if(x(t)){t.preventDefault(),t.stopImmediatePropagation(),S(t.target);return}var n=a(t.target,`.yii-debug-dropdown`),r=n?n.querySelector(`[data-yii-debug-toggle="dropdown"]`):null,i=n?n.querySelector(`.yii-debug-dropdown-menu`):null;if(n&&r&&i&&[`ArrowDown`,`ArrowUp`,`Home`,`End`].indexOf(t.key)!==-1){var o=s(i),c=o.indexOf(t.target),u=b(o.length,c,t.key,t.target===r);if(o.length===0)return;t.preventDefault(),d(i),n.classList.add(`is-open`),r.setAttribute(`aria-expanded`,`true`),o[u].focus();return}if(t.key===`Escape`){var f=document.querySelector(`.yii-debug-dropdown.is-open`),p=!!f,m=f?f.querySelector(`[data-yii-debug-toggle="dropdown"]`):null;d(null),m&&m.focus(),window.setTimeout(function(){e(t,window,p)},0)}}),document.addEventListener(`click`,function(e){var t=e.target.closest(`[data-yii-debug-reveal]`);if(t){var n=t.classList.toggle(`is-revealed`),r=t.getAttribute(`data-yii-debug-reveal-label`)||`value`;t.setAttribute(`aria-pressed`,n?`true`:`false`),t.setAttribute(`aria-label`,(n?`Hide `:`Reveal `)+r)}}),document.addEventListener(`change`,function(e){var t=e.target;if(!(!t||!t.matches(`[data-yii-debug-pagesize]`))){var n=new URL(window.location.href);t.value===``||t.value===`0`?n.searchParams.delete(`per-page`):n.searchParams.set(`per-page`,t.value),n.searchParams.delete(`page`),window.location.href=n.toString()}}),document.addEventListener(`input`,function(e){var t=e.target;!t||!t.matches(`[data-yii-debug-filter]`)||l(t)}),(function(){var e=`yii-debug-grid-filter-focus`,t=/^[A-Za-z][A-Za-z0-9_]*\[[^\]]+\]$/,n=null;function r(e){return!!e&&!!e.name&&t.test(e.name)}function i(){try{return window.sessionStorage}catch{return null}}function a(t){var n=i();if(n)try{n.setItem(e,JSON.stringify({end:t.selectionEnd,name:t.name,start:t.selectionStart}))}catch{}}function o(){var t=i(),n;if(t){try{n=JSON.parse(t.getItem(e)||`null`),t.removeItem(e)}catch{return}if(!(!n||!r(n))){var a=document.getElementsByName(n.name),o=a.length>0?a[0]:null;!o||o.tagName!==`INPUT`||(o.focus({preventScroll:!0}),typeof o.setSelectionRange==`function`&&o.setSelectionRange(n.start,n.end))}}}function s(e){if(r(e)){var t=new URL(window.location.href);e.value===``||e.value===null?t.searchParams.delete(e.name):t.searchParams.set(e.name,e.value),t.searchParams.delete(`page`),t.toString()!==window.location.href&&(a(e),document.documentElement.setAttribute(`aria-busy`,`true`),window.location.href=t.toString())}}function c(e){n&&clearTimeout(n.timeout),n={input:e,timeout:setTimeout(function(){var e=n;n=null,s(e.input)},650)}}function l(){if(!n)return!1;clearTimeout(n.timeout);var e=n.input;return n=null,s(e),!0}document.addEventListener(`change`,function(e){r(e.target)&&(n&&n.input===e.target&&(clearTimeout(n.timeout),n=null),(e.target.tagName===`SELECT`||e.target.tagName===`INPUT`)&&s(e.target))}),document.addEventListener(`input`,function(e){e.target.tagName===`INPUT`&&e.target.type!==`submit`&&r(e.target)&&c(e.target)}),document.addEventListener(`keydown`,function(e){e.key===`Enter`&&e.target.tagName===`INPUT`&&e.target.type!==`submit`&&r(e.target)&&(e.preventDefault(),l()||s(e.target))}),document.addEventListener(`focusout`,function(e){e.target.tagName===`INPUT`&&e.target.type!==`submit`&&r(e.target)&&n&&n.input===e.target&&l()}),o()})(),y(document,window),H(document,window),u(document,window.navigator?window.navigator.clipboard:null,window.location),k(document).catch(function(){document.documentElement.setAttribute(`data-yii-debug-feature-load-error`,`true`);var e=document.createElement(`div`);e.className=`yii-debug-callout yii-debug-callout-danger`,e.setAttribute(`role`,`alert`),e.textContent=`An interactive debugger feature failed to load. Reload the page and try again.`;var t=document.getElementById(`yii-debug-main`);t&&t.prepend(e)})})();
\ No newline at end of file
diff --git a/resources/src/core/debug.js b/resources/src/core/debug.js
index 5a49639..ff5690b 100644
--- a/resources/src/core/debug.js
+++ b/resources/src/core/debug.js
@@ -122,15 +122,13 @@ import { requestParentToolbarDrawerClose } from "../toolbar/focus.js";
   }
 
   function dropdownItems(menu) {
-    return menu
-      ? Array.from(
-          menu.querySelectorAll(
-            'a[href], button:not([disabled]), [role="menuitem"][tabindex]',
-          ),
-        ).filter(function (item) {
-          return !item.hidden && item.getAttribute("aria-hidden") !== "true";
-        })
-      : [];
+    return Array.from(
+      menu.querySelectorAll(
+        'a[href], button:not([disabled]), [role="menuitem"][tabindex]',
+      ),
+    ).filter(function (item) {
+      return !item.hidden && item.getAttribute("aria-hidden") !== "true";
+    });
   }
 
   function prepareCellMoreControls() {
diff --git a/resources/tests/debug-bootstrap.test.js b/resources/tests/debug-bootstrap.test.js
new file mode 100644
index 0000000..dd27170
--- /dev/null
+++ b/resources/tests/debug-bootstrap.test.js
@@ -0,0 +1,233 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { test, vi } from "vitest";
+
+import { bootDebugPage, fire, settle } from "./debug-page-harness.js";
+
+/**
+ * The Database panel feature is the failure fixture: it is the only module the
+ * bootstrap loads on demand here, and its import must reject for the degraded
+ * callout to appear. No other scenario in this file ships a panel marker.
+ */
+vi.doMock("../src/panels/db.js", () => {
+  throw new Error("Chunk load failed.");
+});
+
+const CELL_MORE =
+  '<div class="yii-debug-cell-more">' +
+  '<div class="yii-debug-cell-more-body">Full value</div>' +
+  '<button type="button" data-yii-debug-toggle="cell-more"></button>' +
+  "</div>";
+const CELL_MORE_OPEN =
+  '<div class="yii-debug-cell-more is-open">' +
+  '<div class="yii-debug-cell-more-body">Full value</div>' +
+  '<button type="button" data-yii-debug-toggle="cell-more"></button>' +
+  "</div>";
+const COPY_CONTROL =
+  '<button type="button" data-yii-debug-copy data-yii-debug-copy-value="SELECT 1">' +
+  "<span data-yii-debug-copy-label>Copy</span></button>";
+const DB_MARKER = '<button class="yii-debug-db-explain-toggle"></button>';
+const TABS =
+  '<div class="yii-debug-tabs" role="tablist">' +
+  '<a role="tab" href="#panel-one" aria-controls="panel-one" ' +
+  'data-yii-debug-toggle="tab">One</a>' +
+  '<a role="tab" href="#panel-two" aria-controls="panel-two" ' +
+  'data-yii-debug-toggle="tab">Two</a></div>' +
+  '<div><div class="yii-debug-tab-panel" id="panel-one">One</div>' +
+  '<div class="yii-debug-tab-panel" id="panel-two" hidden>Two</div></div>';
+
+test("cell-more controls describe the body they disclose", async () => {
+  const page = await bootDebugPage({ body: CELL_MORE + CELL_MORE_OPEN });
+  const controls = page.document.querySelectorAll(
+    '[data-yii-debug-toggle="cell-more"]',
+  );
+  const bodies = page.document.querySelectorAll(".yii-debug-cell-more-body");
+
+  assert.equal(
+    controls[0].getAttribute("aria-controls"),
+    bodies[0].id,
+    "Control must point at its own body.",
+  );
+  assert.equal(controls[0].textContent, "Show more", "Closed box invites.");
+  assert.equal(controls[1].textContent, "Show less", "Open box retracts.");
+  assert.notEqual(bodies[0].id, bodies[1].id, "Generated ids must be unique.");
+});
+
+test("a cell-more box missing its body or its control is left alone", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<div class="yii-debug-cell-more">' +
+      '<button type="button" data-yii-debug-toggle="cell-more">Raw</button>' +
+      "</div>" +
+      '<div class="yii-debug-cell-more">' +
+      '<div class="yii-debug-cell-more-body">Orphan</div></div>',
+  });
+  const control = page.document.querySelector(
+    '[data-yii-debug-toggle="cell-more"]',
+  );
+
+  assert.equal(control.textContent, "Raw", "Half-rendered box must be left.");
+  assert.equal(
+    control.getAttribute("aria-controls"),
+    null,
+    "No body means nothing to reference.",
+  );
+  assert.equal(
+    page.document.querySelector(".yii-debug-cell-more-body").id,
+    "",
+    "A body without a control needs no id.",
+  );
+});
+
+test("a server-rendered body id is kept", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<div class="yii-debug-cell-more">' +
+      '<div class="yii-debug-cell-more-body" id="db-row-7">Full value</div>' +
+      '<button type="button" data-yii-debug-toggle="cell-more"></button>' +
+      "</div>",
+  });
+
+  assert.equal(
+    page.document
+      .querySelector('[data-yii-debug-toggle="cell-more"]')
+      .getAttribute("aria-controls"),
+    "db-row-7",
+    "Server id must be reused.",
+  );
+});
+
+test("generated body ids skip ids already taken on the page", async () => {
+  const page = await bootDebugPage({
+    body: '<span id="yii-debug-cell-more-1"></span>' + CELL_MORE,
+  });
+
+  assert.equal(
+    page.document.querySelector(".yii-debug-cell-more-body").id,
+    "yii-debug-cell-more-2",
+    "Collision must be resolved by the next sequence number.",
+  );
+});
+
+test("panel headings receive a permalink", async () => {
+  const page = await bootDebugPage({
+    body: '<main id="yii-debug-main"><h2>Database queries</h2></main>',
+  });
+  const heading = page.document.querySelector("h2");
+
+  assert.equal(
+    heading.id,
+    "yii-debug-section-database-queries",
+    "Heading must get a stable fragment id.",
+  );
+  assert.equal(
+    heading.querySelector(".yii-debug-heading-permalink").getAttribute("href"),
+    "#yii-debug-section-database-queries",
+    "Permalink must target the heading.",
+  );
+});
+
+test("the tab named by the fragment is revealed on load", async () => {
+  const page = await bootDebugPage({
+    body: TABS,
+    url: "https://debug.test/debug/index#panel-two",
+  });
+
+  assert.equal(
+    page.document.getElementById("panel-two").hidden,
+    false,
+    "Fragment panel must be shown.",
+  );
+  assert.equal(
+    page.document.getElementById("panel-one").hidden,
+    true,
+    "Sibling panel must be hidden.",
+  );
+});
+
+test("copy controls hand their value to the clipboard", async () => {
+  const copied = [];
+  const page = await bootDebugPage({
+    body: COPY_CONTROL,
+    clipboard: {
+      writeText(text) {
+        copied.push(text);
+
+        return Promise.resolve();
+      },
+    },
+  });
+  const control = page.document.querySelector("[data-yii-debug-copy]");
+
+  fire(control, "click");
+
+  await settle(page.window);
+
+  assert.deepEqual(copied, ["SELECT 1"], "Literal value must be copied.");
+  assert.equal(
+    control.getAttribute("aria-label"),
+    "Copied",
+    "Control must confirm the copy.",
+  );
+});
+
+test("a host without a navigator reports the clipboard as unavailable", async () => {
+  const page = await bootDebugPage({
+    body: COPY_CONTROL,
+    navigator: "none",
+  });
+  const control = page.document.querySelector("[data-yii-debug-copy]");
+
+  fire(control, "click");
+
+  await settle(page.window);
+
+  assert.equal(
+    control.getAttribute("aria-label"),
+    "Copy unavailable",
+    "Missing navigator must degrade, not throw.",
+  );
+});
+
+test("a panel feature that fails to load raises a callout", async () => {
+  const page = await bootDebugPage({
+    body: '<main id="yii-debug-main"><p>Queries</p></main>' + DB_MARKER,
+  });
+
+  await settle(page.window);
+
+  const alert = page.document.querySelector('[role="alert"]');
+
+  assert.equal(
+    page.document.documentElement.getAttribute(
+      "data-yii-debug-feature-load-error",
+    ),
+    "true",
+    "Failure must be flagged on the document.",
+  );
+  assert.equal(
+    alert.parentElement.id,
+    "yii-debug-main",
+    "Callout must open the main region.",
+  );
+  assert.match(alert.textContent, /Reload the page/, "Callout must advise.");
+});
+
+test("a panel feature failure without a main region only flags the page", async () => {
+  const page = await bootDebugPage({ body: DB_MARKER });
+
+  await settle(page.window);
+
+  assert.equal(
+    page.document.documentElement.getAttribute(
+      "data-yii-debug-feature-load-error",
+    ),
+    "true",
+    "Failure must be flagged on the document.",
+  );
+  assert.equal(
+    page.document.querySelector('[role="alert"]'),
+    null,
+    "No region means no callout.",
+  );
+});
diff --git a/resources/tests/debug-disclosure.test.js b/resources/tests/debug-disclosure.test.js
new file mode 100644
index 0000000..3879f2e
--- /dev/null
+++ b/resources/tests/debug-disclosure.test.js
@@ -0,0 +1,179 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { test } from "vitest";
+
+import { bootDebugPage, fire } from "./debug-page-harness.js";
+
+const CELL_MORE =
+  '<div class="yii-debug-cell-more">' +
+  '<div class="yii-debug-cell-more-body">Full value</div>' +
+  '<button type="button" data-yii-debug-toggle="cell-more"></button></div>';
+
+test("a cell-more control expands and collapses its box", async () => {
+  const page = await bootDebugPage({ body: CELL_MORE });
+  const box = page.document.querySelector(".yii-debug-cell-more");
+  const control = box.querySelector('[data-yii-debug-toggle="cell-more"]');
+
+  fire(control, "click");
+
+  assert.equal(box.classList.contains("is-open"), true, "Box must open.");
+  assert.equal(control.getAttribute("aria-expanded"), "true", "State is up.");
+  assert.equal(control.textContent, "Show less", "Label must retract.");
+
+  fire(control, "click");
+
+  assert.equal(box.classList.contains("is-open"), false, "Box must close.");
+  assert.equal(control.getAttribute("aria-expanded"), "false", "State down.");
+  assert.equal(control.textContent, "Show more", "Label must invite.");
+});
+
+test("a cell-more control outside a box is inert", async () => {
+  const page = await bootDebugPage({
+    body: '<button type="button" data-yii-debug-toggle="cell-more">More</button>',
+  });
+  const control = page.document.querySelector(
+    '[data-yii-debug-toggle="cell-more"]',
+  );
+  const event = fire(control, "click");
+
+  assert.equal(event.defaultPrevented, true, "Navigation must be suppressed.");
+  assert.equal(control.textContent, "More", "Orphan control must not change.");
+});
+
+test("a collapse control toggles the region named by data-target", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<button type="button" data-yii-debug-toggle="collapse" ' +
+      'data-target="#trace"><span>Trace</span></button>' +
+      '<div id="trace" class="is-open">frames</div>',
+  });
+  const control = page.document.querySelector(
+    '[data-yii-debug-toggle="collapse"]',
+  );
+  const target = page.document.getElementById("trace");
+
+  fire(control.querySelector("span"), "click");
+
+  assert.equal(target.classList.contains("is-open"), false, "Must collapse.");
+  assert.equal(control.getAttribute("aria-expanded"), "false", "State down.");
+
+  fire(control, "click");
+
+  assert.equal(target.classList.contains("is-open"), true, "Must expand.");
+  assert.equal(control.getAttribute("aria-expanded"), "true", "State is up.");
+});
+
+test("a collapse control falls back to its href", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<a data-yii-debug-toggle="collapse" href="#trace">Trace</a>' +
+      '<div id="trace">frames</div>',
+  });
+
+  fire(page.document.querySelector("a"), "click");
+
+  assert.equal(
+    page.document.getElementById("trace").classList.contains("is-open"),
+    true,
+    "Fragment href must name the region.",
+  );
+});
+
+test("a collapse control without a target is inert", async () => {
+  const page = await bootDebugPage({
+    body: '<button type="button" data-yii-debug-toggle="collapse">Trace</button>',
+  });
+  const control = page.document.querySelector(
+    '[data-yii-debug-toggle="collapse"]',
+  );
+  const event = fire(control, "click");
+
+  assert.equal(event.defaultPrevented, true, "Navigation must be suppressed.");
+  assert.equal(
+    control.getAttribute("aria-expanded"),
+    null,
+    "Nothing to expand means no state.",
+  );
+});
+
+test("a collapse control pointing at a missing region is inert", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<button type="button" data-yii-debug-toggle="collapse" ' +
+      'data-target="#gone">Trace</button>',
+  });
+  const control = page.document.querySelector(
+    '[data-yii-debug-toggle="collapse"]',
+  );
+
+  fire(control, "click");
+
+  assert.equal(
+    control.getAttribute("aria-expanded"),
+    null,
+    "A dangling target must leave the control alone.",
+  );
+});
+
+test("a reveal control flips its pressed state and its label", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<button type="button" data-yii-debug-reveal ' +
+      'data-yii-debug-reveal-label="access token">***</button>',
+  });
+  const control = page.document.querySelector("[data-yii-debug-reveal]");
+
+  fire(control, "click");
+
+  assert.equal(
+    control.classList.contains("is-revealed"),
+    true,
+    "Value must be revealed.",
+  );
+  assert.equal(control.getAttribute("aria-pressed"), "true", "State is up.");
+  assert.equal(
+    control.getAttribute("aria-label"),
+    "Hide access token",
+    "Label must offer the reverse action.",
+  );
+
+  fire(control, "click");
+
+  assert.equal(
+    control.classList.contains("is-revealed"),
+    false,
+    "Value must be masked again.",
+  );
+  assert.equal(control.getAttribute("aria-pressed"), "false", "State down.");
+  assert.equal(
+    control.getAttribute("aria-label"),
+    "Reveal access token",
+    "Label must offer the reverse action.",
+  );
+});
+
+test("a reveal control without a label describes a generic value", async () => {
+  const page = await bootDebugPage({
+    body: '<button type="button" data-yii-debug-reveal>***</button>',
+  });
+  const control = page.document.querySelector("[data-yii-debug-reveal]");
+
+  fire(control, "click");
+
+  assert.equal(
+    control.getAttribute("aria-label"),
+    "Hide value",
+    "Unlabelled fields fall back to a generic noun.",
+  );
+});
+
+test("a click away from any control leaves the page alone", async () => {
+  const page = await bootDebugPage({ body: "<p>Nothing to toggle</p>" });
+  const event = fire(page.document.querySelector("p"), "click");
+
+  assert.equal(
+    event.defaultPrevented,
+    false,
+    "Plain content clicks must stay live.",
+  );
+});
diff --git a/resources/tests/debug-dropdown.test.js b/resources/tests/debug-dropdown.test.js
new file mode 100644
index 0000000..70fcef9
--- /dev/null
+++ b/resources/tests/debug-dropdown.test.js
@@ -0,0 +1,295 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { test } from "vitest";
+
+import { bootDebugPage, fire, press, settle } from "./debug-page-harness.js";
+
+const DEFAULT_ITEMS =
+  '<a href="/debug/db">Database</a><button type="button">Clear</button>';
+
+/** Renders one server-side dropdown, optionally degraded or already open. */
+function dropdown(options) {
+  const settings = options || {};
+  const expanded = settings.open === true ? "true" : "false";
+  const items = settings.items === undefined ? DEFAULT_ITEMS : settings.items;
+
+  return (
+    '<div class="yii-debug-dropdown' +
+    (settings.open === true ? " is-open" : "") +
+    '" id="' +
+    (settings.id || "filters") +
+    '">' +
+    (settings.trigger === false
+      ? ""
+      : '<button type="button" data-yii-debug-toggle="dropdown" ' +
+        'aria-expanded="' +
+        expanded +
+        '">Menu</button>') +
+    (settings.menu === false
+      ? ""
+      : '<div class="yii-debug-dropdown-menu">' + items + "</div>") +
+    "</div>"
+  );
+}
+
+function trigger(page, id) {
+  return page.document
+    .getElementById(id || "filters")
+    .querySelector('[data-yii-debug-toggle="dropdown"]');
+}
+
+function isOpen(page, id) {
+  return page.document.getElementById(id).classList.contains("is-open");
+}
+
+test("opening a dropdown closes the one already open", async () => {
+  const page = await bootDebugPage({
+    body: dropdown({ id: "sort", open: true }) + dropdown({ id: "filters" }),
+  });
+
+  fire(trigger(page, "filters"), "click");
+
+  assert.equal(isOpen(page, "filters"), true, "Clicked menu must open.");
+  assert.equal(isOpen(page, "sort"), false, "Only one menu may stay open.");
+  assert.equal(
+    trigger(page, "sort").getAttribute("aria-expanded"),
+    "false",
+    "Closed trigger must report its state.",
+  );
+  assert.equal(
+    trigger(page, "filters").getAttribute("aria-expanded"),
+    "true",
+    "Open trigger must report its state.",
+  );
+});
+
+test("clicking an open trigger closes its own menu", async () => {
+  const page = await bootDebugPage({ body: dropdown({ open: true }) });
+
+  fire(trigger(page), "click");
+
+  assert.equal(isOpen(page, "filters"), false, "Second click must close.");
+  assert.equal(
+    trigger(page).getAttribute("aria-expanded"),
+    "false",
+    "Trigger must report the collapsed state.",
+  );
+});
+
+test("a dropdown trigger outside a wrapper is inert", async () => {
+  const page = await bootDebugPage({
+    body: '<button type="button" data-yii-debug-toggle="dropdown">Menu</button>',
+  });
+  const control = page.document.querySelector(
+    '[data-yii-debug-toggle="dropdown"]',
+  );
+  const event = fire(control, "click");
+
+  assert.equal(event.defaultPrevented, true, "Navigation must be suppressed.");
+  assert.equal(
+    control.getAttribute("aria-expanded"),
+    null,
+    "An orphan trigger controls nothing.",
+  );
+});
+
+test("a dropdown without a menu is inert", async () => {
+  const page = await bootDebugPage({ body: dropdown({ menu: false }) });
+
+  fire(trigger(page), "click");
+
+  assert.equal(isOpen(page, "filters"), false, "Nothing to reveal.");
+  assert.equal(
+    trigger(page).getAttribute("aria-expanded"),
+    "false",
+    "Trigger state must not change.",
+  );
+});
+
+test("a click elsewhere closes a dropdown left open without a trigger", async () => {
+  const page = await bootDebugPage({
+    body: dropdown({ open: true, trigger: false }) + "<p>Elsewhere</p>",
+  });
+
+  fire(page.document.querySelector("p"), "click");
+
+  assert.equal(isOpen(page, "filters"), false, "Outside click must close.");
+});
+
+test("ArrowDown from the trigger opens the menu on its first item", async () => {
+  const page = await bootDebugPage({ body: dropdown() });
+  const event = press(trigger(page), "ArrowDown");
+
+  assert.equal(event.defaultPrevented, true, "Scrolling must be suppressed.");
+  assert.equal(isOpen(page, "filters"), true, "Navigation must open the menu.");
+  assert.equal(
+    page.document.activeElement.textContent,
+    "Database",
+    "Focus must land on the first item.",
+  );
+});
+
+test("ArrowUp from the trigger opens the menu on its last item", async () => {
+  const page = await bootDebugPage({ body: dropdown() });
+
+  press(trigger(page), "ArrowUp");
+
+  assert.equal(
+    page.document.activeElement.textContent,
+    "Clear",
+    "Focus must land on the last item.",
+  );
+});
+
+test("Home and End jump to the ends of the menu", async () => {
+  const page = await bootDebugPage({ body: dropdown({ open: true }) });
+  const items = page.document.querySelectorAll(".yii-debug-dropdown-menu > *");
+
+  press(items[0], "End");
+
+  assert.equal(page.document.activeElement, items[1], "End must go last.");
+
+  press(items[1], "Home");
+
+  assert.equal(page.document.activeElement, items[0], "Home must go first.");
+});
+
+test("ArrowDown from an item moves to the next item", async () => {
+  const page = await bootDebugPage({ body: dropdown({ open: true }) });
+  const items = page.document.querySelectorAll(".yii-debug-dropdown-menu > *");
+
+  press(items[0], "ArrowDown");
+
+  assert.equal(page.document.activeElement, items[1], "Focus must advance.");
+});
+
+test("hidden menu items are skipped by keyboard navigation", async () => {
+  const page = await bootDebugPage({
+    body: dropdown({
+      items:
+        '<a href="/debug/db">Database</a>' +
+        '<a href="/debug/log" hidden>Log</a>' +
+        '<a href="/debug/mail" aria-hidden="true">Mail</a>' +
+        '<button type="button" disabled>Clear</button>' +
+        '<span role="menuitem" tabindex="-1">Reset</span>',
+    }),
+  });
+
+  press(trigger(page), "End");
+
+  assert.equal(
+    page.document.activeElement.textContent,
+    "Reset",
+    "Only perceivable, enabled items may take focus.",
+  );
+});
+
+test("an empty menu stays closed under keyboard navigation", async () => {
+  const page = await bootDebugPage({ body: dropdown({ items: "" }) });
+  const event = press(trigger(page), "ArrowDown");
+
+  assert.equal(isOpen(page, "filters"), false, "Nothing to navigate.");
+  assert.equal(event.defaultPrevented, false, "The key must stay available.");
+});
+
+test("a dropdown without a trigger ignores arrow keys", async () => {
+  const page = await bootDebugPage({ body: dropdown({ trigger: false }) });
+  const item = page.document.querySelector(".yii-debug-dropdown-menu > *");
+
+  press(item, "ArrowDown");
+
+  assert.equal(isOpen(page, "filters"), false, "No trigger, no navigation.");
+});
+
+test("a dropdown without a menu ignores arrow keys", async () => {
+  const page = await bootDebugPage({ body: dropdown({ menu: false }) });
+
+  press(trigger(page), "ArrowDown");
+
+  assert.equal(isOpen(page, "filters"), false, "No menu, no navigation.");
+});
+
+test("Escape closes the dropdown and returns focus to its trigger", async () => {
+  const page = await bootDebugPage({
+    body: dropdown({ open: true }),
+    parent: "frame",
+  });
+
+  press(page.document.querySelector(".yii-debug-dropdown-menu > *"), "Escape");
+
+  await settle(page.window);
+
+  assert.equal(isOpen(page, "filters"), false, "Escape must close the menu.");
+  assert.equal(
+    page.document.activeElement,
+    trigger(page),
+    "Focus must return to the trigger.",
+  );
+  assert.equal(
+    page.posts.length,
+    0,
+    "Closing a menu must not also close the drawer.",
+  );
+});
+
+test("Escape closes a triggerless dropdown without moving focus", async () => {
+  const page = await bootDebugPage({
+    body: dropdown({ open: true, trigger: false }),
+  });
+  const item = page.document.querySelector(".yii-debug-dropdown-menu > *");
+
+  press(item, "Escape");
+
+  await settle(page.window);
+
+  assert.equal(isOpen(page, "filters"), false, "Escape must close the menu.");
+  assert.equal(
+    page.document.activeElement,
+    page.document.body,
+    "There is nothing to focus.",
+  );
+});
+
+test("Escape with no menu open asks the parent toolbar to close the drawer", async () => {
+  const page = await bootDebugPage({
+    body: "<p>Panel</p>",
+    parent: "frame",
+  });
+
+  press(page.document.querySelector("p"), "Escape");
+
+  await settle(page.window);
+
+  assert.deepEqual(
+    page.posts,
+    [
+      {
+        data: { source: "yii-debug-toolbar", type: "close-drawer" },
+        origin: "https://debug.test",
+      },
+    ],
+    "Host toolbar must be asked to close.",
+  );
+});
+
+test("Escape on a standalone page posts nothing", async () => {
+  const page = await bootDebugPage({ body: "<p>Panel</p>" });
+
+  press(page.document.querySelector("p"), "Escape");
+
+  await settle(page.window);
+
+  assert.equal(page.posts.length, 0, "There is no drawer to close.");
+});
+
+test("a keydown on the document itself is ignored", async () => {
+  const page = await bootDebugPage({ body: dropdown() });
+
+  fire(page.document, "keydown", { key: "ArrowDown" });
+
+  assert.equal(
+    isOpen(page, "filters"),
+    false,
+    "A targetless key does nothing.",
+  );
+});
diff --git a/resources/tests/debug-grid-url.test.js b/resources/tests/debug-grid-url.test.js
new file mode 100644
index 0000000..2ebed26
--- /dev/null
+++ b/resources/tests/debug-grid-url.test.js
@@ -0,0 +1,579 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { test, vi } from "vitest";
+
+import {
+  bootDebugPage,
+  FILTER_FOCUS_KEY,
+  fire,
+  press,
+} from "./debug-page-harness.js";
+
+const LISTED = "https://debug.test/debug/index?page=3&sort=-time";
+const PAGE_SIZE =
+  "<select data-yii-debug-pagesize>" +
+  '<option value="">Default</option>' +
+  '<option value="0">All</option>' +
+  '<option value="50">50</option></select>';
+
+function change(element, value) {
+  element.value = value;
+  fire(element, "change");
+}
+
+test("choosing a page size rewrites per-page and returns to page one", async () => {
+  const page = await bootDebugPage({ body: PAGE_SIZE, url: LISTED });
+
+  change(page.document.querySelector("select"), "50");
+
+  assert.deepEqual(
+    page.navigations,
+    ["https://debug.test/debug/index?sort=-time&per-page=50"],
+    "Size must replace the page cursor, not the sort.",
+  );
+});
+
+test("choosing the default page size drops per-page", async () => {
+  const page = await bootDebugPage({
+    body: PAGE_SIZE,
+    url: "https://debug.test/debug/index?per-page=50&page=3",
+  });
+
+  change(page.document.querySelector("select"), "");
+
+  assert.deepEqual(
+    page.navigations,
+    ["https://debug.test/debug/index"],
+    "The default size must leave no trace in the URL.",
+  );
+});
+
+test("choosing the unlimited page size drops per-page", async () => {
+  const page = await bootDebugPage({
+    body: PAGE_SIZE,
+    url: "https://debug.test/debug/index?per-page=50",
+  });
+
+  change(page.document.querySelector("select"), "0");
+
+  assert.deepEqual(
+    page.navigations,
+    ["https://debug.test/debug/index"],
+    "Unlimited must be expressed by absence.",
+  );
+});
+
+test("a change from an unrelated control is ignored", async () => {
+  const page = await bootDebugPage({
+    body: '<select id="sort"><option value="time">Time</option></select>',
+    url: LISTED,
+  });
+
+  change(page.document.getElementById("sort"), "time");
+
+  assert.equal(page.navigations.length, 0, "Only marked selects reload.");
+});
+
+test("a GridView select filter applies as soon as it changes", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<select name="Debug[method]"><option value="">Any</option>' +
+      '<option value="GET">GET</option></select>',
+    url: LISTED,
+  });
+
+  change(page.document.querySelector("select"), "GET");
+
+  assert.deepEqual(
+    page.navigations,
+    ["https://debug.test/debug/index?sort=-time&Debug%5Bmethod%5D=GET"],
+    "Filter must join the query without the page cursor.",
+  );
+  assert.equal(
+    page.document.documentElement.getAttribute("aria-busy"),
+    "true",
+    "Page must announce the pending reload.",
+  );
+});
+
+test("Enter applies a typed GridView filter immediately", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site/index">',
+    url: LISTED,
+  });
+  const event = press(page.document.querySelector("input"), "Enter");
+
+  assert.equal(event.defaultPrevented, true, "Form submission is suppressed.");
+  assert.deepEqual(
+    page.navigations,
+    [
+      "https://debug.test/debug/index?sort=-time&Debug%5Burl%5D=%2Fsite%2Findex",
+    ],
+    "Typed value must reach the query.",
+  );
+});
+
+test("clearing a GridView filter removes its query parameter", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="">',
+    url: "https://debug.test/debug/index?Debug%5Burl%5D=%2Fsite&page=2",
+  });
+
+  press(page.document.querySelector("input"), "Enter");
+
+  assert.deepEqual(
+    page.navigations,
+    ["https://debug.test/debug/index"],
+    "An empty filter must leave no parameter behind.",
+  );
+});
+
+test("re-applying the value already in the URL does not reload", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[method]" value="GET">',
+    url: "https://debug.test/debug/index?Debug%5Bmethod%5D=GET",
+  });
+
+  press(page.document.querySelector("input"), "Enter");
+
+  assert.equal(
+    page.navigations.length,
+    0,
+    "An unchanged URL is not worth a trip.",
+  );
+  assert.equal(
+    page.document.documentElement.getAttribute("aria-busy"),
+    null,
+    "No reload means no busy state.",
+  );
+});
+
+test("typing applies the filter once the field goes idle", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site">',
+    url: LISTED,
+  });
+
+  vi.useFakeTimers();
+
+  try {
+    fire(page.document.querySelector("input"), "input");
+
+    assert.equal(
+      page.navigations.length,
+      0,
+      "Every keystroke must not reload.",
+    );
+
+    vi.advanceTimersByTime(650);
+
+    assert.deepEqual(
+      page.navigations,
+      ["https://debug.test/debug/index?sort=-time&Debug%5Burl%5D=%2Fsite"],
+      "The idle field must reach the query.",
+    );
+  } finally {
+    vi.useRealTimers();
+  }
+});
+
+test("every keystroke restarts the idle wait", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site">',
+    url: LISTED,
+  });
+  const input = page.document.querySelector("input");
+
+  vi.useFakeTimers();
+
+  try {
+    fire(input, "input");
+    vi.advanceTimersByTime(400);
+
+    input.value = "/site/index";
+    fire(input, "input");
+    vi.advanceTimersByTime(400);
+
+    assert.equal(page.navigations.length, 0, "The first wait must be dropped.");
+
+    vi.advanceTimersByTime(250);
+
+    assert.deepEqual(
+      page.navigations,
+      [
+        "https://debug.test/debug/index?sort=-time&Debug%5Burl%5D=%2Fsite%2Findex",
+      ],
+      "Only the last value may reach the query.",
+    );
+  } finally {
+    vi.useRealTimers();
+  }
+});
+
+test("a filter renamed while the wait runs is dropped", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site">',
+    url: LISTED,
+  });
+  const input = page.document.querySelector("input");
+
+  vi.useFakeTimers();
+
+  try {
+    fire(input, "input");
+    input.removeAttribute("name");
+    vi.advanceTimersByTime(650);
+
+    assert.equal(
+      page.navigations.length,
+      0,
+      "A field that stopped being a filter must not reload.",
+    );
+  } finally {
+    vi.useRealTimers();
+  }
+});
+
+test("leaving the field flushes what was typed", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site">',
+    url: LISTED,
+  });
+  const input = page.document.querySelector("input");
+
+  vi.useFakeTimers();
+
+  try {
+    fire(input, "input");
+    fire(input, "focusout");
+
+    assert.equal(page.navigations.length, 1, "Tabbing out must not lose text.");
+
+    vi.advanceTimersByTime(650);
+
+    assert.equal(page.navigations.length, 1, "The flush must cancel the wait.");
+  } finally {
+    vi.useRealTimers();
+  }
+});
+
+test("Enter flushes the pending edit instead of applying it twice", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site">',
+    url: LISTED,
+  });
+  const input = page.document.querySelector("input");
+
+  vi.useFakeTimers();
+
+  try {
+    fire(input, "input");
+    press(input, "Enter");
+
+    vi.advanceTimersByTime(650);
+
+    assert.equal(page.navigations.length, 1, "Only one reload may happen.");
+  } finally {
+    vi.useRealTimers();
+  }
+});
+
+test("a change cancels the wait started by the same field", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site">',
+    url: LISTED,
+  });
+  const input = page.document.querySelector("input");
+
+  vi.useFakeTimers();
+
+  try {
+    fire(input, "input");
+    fire(input, "change");
+
+    assert.equal(page.navigations.length, 1, "The change must apply at once.");
+
+    vi.advanceTimersByTime(650);
+
+    assert.equal(page.navigations.length, 1, "The wait must be cancelled.");
+  } finally {
+    vi.useRealTimers();
+  }
+});
+
+test("a change on another field leaves the first one waiting", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<input name="Debug[url]" value="/site">' +
+      '<input name="Debug[method]" value="GET">',
+    url: LISTED,
+  });
+  const inputs = page.document.querySelectorAll("input");
+
+  vi.useFakeTimers();
+
+  try {
+    fire(inputs[0], "input");
+    fire(inputs[1], "change");
+
+    assert.equal(page.navigations.length, 1, "The change must apply at once.");
+
+    vi.advanceTimersByTime(650);
+
+    assert.equal(page.navigations.length, 2, "The waiting field must follow.");
+  } finally {
+    vi.useRealTimers();
+  }
+});
+
+test("a field whose name is not a Yii form input is ignored", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="q" value="debug">',
+    url: LISTED,
+  });
+  const input = page.document.querySelector("input");
+
+  press(input, "Enter");
+  fire(input, "input");
+  fire(input, "change");
+  fire(input, "focusout");
+
+  assert.equal(
+    page.navigations.length,
+    0,
+    "Foreign fields must be left alone.",
+  );
+});
+
+test("a field without a name is ignored", async () => {
+  const page = await bootDebugPage({
+    body: '<input value="debug">',
+    url: LISTED,
+  });
+
+  press(page.document.querySelector("input"), "Enter");
+
+  assert.equal(page.navigations.length, 0, "A nameless field drives nothing.");
+});
+
+test("a submit button is never treated as a filter", async () => {
+  const page = await bootDebugPage({
+    body: '<input type="submit" name="Debug[go]" value="Go">',
+    url: LISTED,
+  });
+  const button = page.document.querySelector("input");
+
+  press(button, "Enter");
+  fire(button, "input");
+  fire(button, "focusout");
+
+  assert.equal(page.navigations.length, 0, "Submitting is not filtering.");
+});
+
+test("a named control that is not an input or a select is ignored", async () => {
+  const page = await bootDebugPage({
+    body: '<textarea name="Debug[note]">hello</textarea>',
+    url: LISTED,
+  });
+  const field = page.document.querySelector("textarea");
+
+  press(field, "Enter");
+  fire(field, "input");
+  fire(field, "focusout");
+  fire(field, "change");
+
+  assert.equal(page.navigations.length, 0, "Only fields drive the query.");
+});
+
+test("a key other than Enter leaves the field alone", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site">',
+    url: LISTED,
+  });
+
+  press(page.document.querySelector("input"), "a");
+
+  assert.equal(page.navigations.length, 0, "Typing must not reload.");
+});
+
+test("leaving an untouched field does not reload", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site">',
+    url: LISTED,
+  });
+
+  fire(page.document.querySelector("input"), "focusout");
+
+  assert.equal(page.navigations.length, 0, "Nothing was typed, nothing to do.");
+});
+
+test("the caret position is recorded before the reload", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site/index">',
+    url: LISTED,
+  });
+  const input = page.document.querySelector("input");
+
+  input.setSelectionRange(2, 5);
+  press(input, "Enter");
+
+  assert.deepEqual(
+    JSON.parse(page.session.items.get(FILTER_FOCUS_KEY)),
+    { end: 5, name: "Debug[url]", start: 2 },
+    "Caret must survive the round trip.",
+  );
+});
+
+test("the recorded caret is restored on the next page", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site/index">',
+    sessionData: {
+      [FILTER_FOCUS_KEY]: JSON.stringify({
+        end: 5,
+        name: "Debug[url]",
+        start: 2,
+      }),
+    },
+  });
+  const input = page.document.querySelector("input");
+
+  assert.equal(page.document.activeElement, input, "Field must regain focus.");
+  assert.equal(input.selectionStart, 2, "Caret must start where it was.");
+  assert.equal(input.selectionEnd, 5, "Caret must end where it was.");
+  assert.equal(
+    page.session.items.has(FILTER_FOCUS_KEY),
+    false,
+    "A restored position must be consumed.",
+  );
+});
+
+test("a field that cannot place a caret is only refocused", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site/index">',
+    prepare(documentValue) {
+      /**
+       * Older engines expose no selection API on some input types; the source
+       * must still hand the field back its focus.
+       */
+      documentValue.querySelector("input").setSelectionRange = undefined;
+    },
+    sessionData: {
+      [FILTER_FOCUS_KEY]: JSON.stringify({
+        end: 5,
+        name: "Debug[url]",
+        start: 2,
+      }),
+    },
+  });
+
+  assert.equal(
+    page.document.activeElement,
+    page.document.querySelector("input"),
+    "Field must regain focus.",
+  );
+});
+
+test("a recorded position for a field that is gone is dropped", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[method]" value="GET">',
+    sessionData: {
+      [FILTER_FOCUS_KEY]: JSON.stringify({ end: 5, name: "Db[url]", start: 2 }),
+    },
+  });
+
+  assert.equal(
+    page.document.activeElement,
+    page.document.body,
+    "Nothing to focus.",
+  );
+  assert.equal(
+    page.session.items.has(FILTER_FOCUS_KEY),
+    false,
+    "A stale position must be consumed.",
+  );
+});
+
+test("a recorded position naming a control that is not an input is dropped", async () => {
+  const page = await bootDebugPage({
+    body: '<button name="Debug[url]">Go</button>',
+    sessionData: {
+      [FILTER_FOCUS_KEY]: JSON.stringify({
+        end: 5,
+        name: "Debug[url]",
+        start: 2,
+      }),
+    },
+  });
+
+  assert.equal(
+    page.document.activeElement,
+    page.document.body,
+    "Only a field may take the caret back.",
+  );
+});
+
+test("a recorded position that is not a filter name is dropped", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="q" value="debug">',
+    sessionData: { [FILTER_FOCUS_KEY]: JSON.stringify({ name: "q" }) },
+  });
+
+  assert.equal(
+    page.document.activeElement,
+    page.document.body,
+    "Foreign names must be refused.",
+  );
+});
+
+test("an unreadable recorded position is ignored", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site/index">',
+    sessionData: { [FILTER_FOCUS_KEY]: "{not json" },
+  });
+
+  assert.equal(
+    page.document.activeElement,
+    page.document.body,
+    "A corrupt entry must not throw.",
+  );
+});
+
+test("a page without session storage still filters", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site">',
+    session: "throws",
+    url: LISTED,
+  });
+
+  press(page.document.querySelector("input"), "Enter");
+
+  assert.deepEqual(
+    page.navigations,
+    ["https://debug.test/debug/index?sort=-time&Debug%5Burl%5D=%2Fsite"],
+    "Blocked storage must not block the reload.",
+  );
+});
+
+test("a session storage that refuses writes still filters", async () => {
+  const page = await bootDebugPage({
+    body: '<input name="Debug[url]" value="/site">',
+    session: {
+      getItem() {
+        return null;
+      },
+      removeItem() {},
+      setItem() {
+        throw new Error("Quota exceeded.");
+      },
+    },
+    url: LISTED,
+  });
+
+  press(page.document.querySelector("input"), "Enter");
+
+  assert.deepEqual(
+    page.navigations,
+    ["https://debug.test/debug/index?sort=-time&Debug%5Burl%5D=%2Fsite"],
+    "A full quota must not block the reload.",
+  );
+});
diff --git a/resources/tests/debug-live-filter.test.js b/resources/tests/debug-live-filter.test.js
new file mode 100644
index 0000000..4e50b60
--- /dev/null
+++ b/resources/tests/debug-live-filter.test.js
@@ -0,0 +1,241 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { test } from "vitest";
+
+import { bootDebugPage, fire, press } from "./debug-page-harness.js";
+
+const ROWS =
+  "<tbody><tr><td>SELECT 1</td></tr><tr><td>UPDATE users</td></tr></tbody>";
+const TARGET =
+  '<table data-yii-debug-filter-target data-yii-debug-filter-unit="queries">' +
+  ROWS +
+  "</table>";
+
+function filtered(page, value) {
+  const input = page.document.querySelector("[data-yii-debug-filter]");
+
+  input.value = value;
+  fire(input, "input");
+
+  return input;
+}
+
+function status(page) {
+  return page.document.querySelector("[data-yii-debug-filter-status]");
+}
+
+test("typing hides the rows that do not match and announces the count", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<header class="yii-debug-section-header">' +
+      '<input data-yii-debug-filter id="db-filter"></header>' +
+      TARGET,
+  });
+  const input = filtered(page, "select");
+  const rows = page.document.querySelectorAll("tbody tr");
+
+  assert.equal(rows[0].hidden, false, "Matching row must stay.");
+  assert.equal(rows[1].hidden, true, "Other rows must go.");
+  assert.equal(
+    status(page).textContent,
+    "1 of 2 queries shown.",
+    "Count must name the filtered unit.",
+  );
+  assert.equal(
+    status(page).id,
+    "db-filter-status",
+    "Status id must derive from the field.",
+  );
+  assert.equal(
+    input.getAttribute("aria-describedby"),
+    "db-filter-status",
+    "Field must point at its own status.",
+  );
+  assert.equal(
+    status(page).parentElement.className,
+    "yii-debug-section-header",
+    "Status must live in the section header.",
+  );
+});
+
+test("the status region is reused on every keystroke", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<header class="yii-debug-section-header">' +
+      '<input data-yii-debug-filter id="db-filter"></header>' +
+      TARGET,
+  });
+
+  filtered(page, "select");
+  filtered(page, "");
+
+  assert.equal(
+    page.document.querySelectorAll("[data-yii-debug-filter-status]").length,
+    1,
+    "Only one live region may exist.",
+  );
+  assert.equal(
+    status(page).textContent,
+    "2 of 2 queries shown.",
+    "Clearing must announce the full set.",
+  );
+});
+
+test("an unnamed filter gets a numbered status region", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<header class="yii-debug-section-header">' +
+      "<input data-yii-debug-filter></header>" +
+      TARGET,
+  });
+
+  filtered(page, "select");
+
+  assert.equal(
+    status(page).id,
+    "yii-debug-filter-status-1",
+    "Status id must fall back to a sequence.",
+  );
+});
+
+test("a filter already describing its status is not described twice", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<header class="yii-debug-section-header">' +
+      '<input data-yii-debug-filter aria-describedby="yii-debug-filter-status-1">' +
+      "</header>" +
+      TARGET,
+  });
+  const input = filtered(page, "select");
+
+  assert.equal(
+    input.getAttribute("aria-describedby"),
+    "yii-debug-filter-status-1",
+    "Description list must stay free of duplicates.",
+  );
+});
+
+test("a filter with no target is ignored", async () => {
+  const page = await bootDebugPage({
+    body: "<input data-yii-debug-filter>",
+  });
+
+  filtered(page, "select");
+
+  assert.equal(status(page), null, "Nothing to filter, nothing to announce.");
+});
+
+test("input from a plain field is ignored", async () => {
+  const page = await bootDebugPage({
+    body: '<input id="search">' + TARGET,
+  });
+  const input = page.document.getElementById("search");
+
+  input.value = "select";
+  fire(input, "input");
+
+  assert.equal(status(page), null, "Only marked filters drive the rows.");
+  assert.equal(
+    page.document.querySelector("tbody tr").hidden,
+    false,
+    "Unmarked fields must not touch the target.",
+  );
+});
+
+test("a scoped filter anchors its status next to itself", async () => {
+  const page = await bootDebugPage({
+    body:
+      "<div data-yii-debug-filter-scope><input data-yii-debug-filter>" +
+      TARGET +
+      "</div>",
+  });
+
+  filtered(page, "select");
+
+  assert.equal(
+    status(page).parentElement.getAttribute("data-yii-debug-filter-scope"),
+    "",
+    "Status must join the scope that owns the filter.",
+  );
+});
+
+test("Escape empties a live filter and keeps the caret in it", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<header class="yii-debug-section-header">' +
+      '<input data-yii-debug-filter id="db-filter"></header>' +
+      TARGET,
+  });
+  const input = filtered(page, "select");
+  const event = press(input, "Escape");
+
+  assert.equal(event.defaultPrevented, true, "Escape must be consumed.");
+  assert.equal(input.value, "", "Field must be emptied.");
+  assert.equal(page.document.activeElement, input, "Caret must stay put.");
+  assert.equal(
+    status(page).textContent,
+    "2 of 2 queries shown.",
+    "Full set must be announced again.",
+  );
+  assert.equal(
+    page.document.querySelectorAll("tbody tr")[1].hidden,
+    false,
+    "Every row must come back.",
+  );
+});
+
+test("Escape on an empty live filter is left to the page", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<header class="yii-debug-section-header">' +
+      '<input data-yii-debug-filter id="db-filter"></header>' +
+      TARGET,
+  });
+  const event = press(
+    page.document.querySelector("[data-yii-debug-filter]"),
+    "Escape",
+  );
+
+  assert.equal(event.defaultPrevented, false, "Nothing to clear.");
+});
+
+test("Escape empties a GridView filter cell", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<table class="yii-debug-grid"><thead><tr class="filters"><td>' +
+      '<input name="Debug[method]" value="GET"></td></tr></thead></table>',
+  });
+  const input = page.document.querySelector(".yii-debug-grid .filters input");
+  const event = press(input, "Escape");
+
+  assert.equal(event.defaultPrevented, true, "Escape must be consumed.");
+  assert.equal(input.value, "", "Cell must be emptied.");
+  assert.equal(
+    page.navigations.length,
+    0,
+    "Clearing an unapplied filter must not reload.",
+  );
+});
+
+test("a filter control without a parent anchors its status on itself", async () => {
+  const page = await bootDebugPage({
+    html:
+      "<!doctype html><html data-yii-debug-filter data-yii-debug-filter-scope>" +
+      "<head></head><body>" +
+      TARGET +
+      "</body></html>",
+  });
+
+  press(page.document.documentElement, "Escape");
+
+  assert.equal(
+    status(page).parentElement,
+    page.document.documentElement,
+    "Status must fall back to the control itself.",
+  );
+  assert.equal(
+    status(page).textContent,
+    "2 of 2 queries shown.",
+    "Cleared filter must announce the full set.",
+  );
+});
diff --git a/resources/tests/debug-page-harness.js b/resources/tests/debug-page-harness.js
new file mode 100644
index 0000000..d91f41e
--- /dev/null
+++ b/resources/tests/debug-page-harness.js
@@ -0,0 +1,313 @@
+/**
+ * Shared jsdom scaffolding for the debugger page bootstrap (`core/debug.js`).
+ *
+ * `debug.js` is a side-effect module: importing it runs the whole page
+ * bootstrap against the ambient `window` and `document` and leaves its
+ * listeners on that document forever. Every scenario therefore needs a pristine
+ * page, which `bootDebugPage()` builds from a fresh jsdom instance, publishes as
+ * the ambient globals and then re-imports the module against.
+ *
+ * Facilities the source assumes but jsdom does not provide are installed from
+ * here — never from the source — through a window facade that inherits from the
+ * real jsdom window: `matchMedia`, a `location` that records assignments instead
+ * of refusing to navigate, `parent`/`frameElement` for the drawer iframe, and a
+ * `navigator.clipboard`. Node's experimental `localStorage` accessor shadows the
+ * jsdom one, so an in-memory store is redefined over both globals.
+ */
+import { JSDOM } from "jsdom";
+import { vi } from "vitest";
+
+export const FILTER_FOCUS_KEY = "yii-debug-grid-filter-focus";
+
+const DEFAULT_URL = "https://debug.test/debug/index";
+const LOCATION_KEYS = [
+  "hash",
+  "host",
+  "hostname",
+  "href",
+  "origin",
+  "pathname",
+  "port",
+  "protocol",
+  "search",
+];
+
+var openDom = null;
+
+function define(target, name, value) {
+  Object.defineProperty(target, name, {
+    configurable: true,
+    enumerable: true,
+    value: value,
+    writable: true,
+  });
+}
+
+/** Mirrors the real location for reads and records every assignment. */
+function createLocation(win, navigations, href) {
+  var location = {};
+
+  LOCATION_KEYS.forEach(function (key) {
+    Object.defineProperty(location, key, {
+      configurable: true,
+      enumerable: true,
+      get: function () {
+        return key === "href" && typeof href === "string"
+          ? href
+          : win.location[key];
+      },
+      set: function (value) {
+        navigations.push(String(value));
+      },
+    });
+  });
+
+  return location;
+}
+
+function createStorage(initial) {
+  var items = new Map(Object.entries(initial || {}));
+
+  return {
+    items: items,
+    getItem(key) {
+      return items.has(key) ? items.get(key) : null;
+    },
+    removeItem(key) {
+      items.delete(key);
+    },
+    setItem(key, value) {
+      items.set(key, String(value));
+    },
+  };
+}
+
+function installSessionStorage(facade, options) {
+  if (options.session === "throws") {
+    Object.defineProperty(facade, "sessionStorage", {
+      configurable: true,
+      enumerable: true,
+      get() {
+        throw new Error("Session storage is blocked.");
+      },
+    });
+
+    return null;
+  }
+
+  var storage = options.session || createStorage(options.sessionData);
+
+  define(facade, "sessionStorage", storage);
+
+  return storage;
+}
+
+function installMatchMedia(facade, preference) {
+  if (preference === undefined) {
+    return;
+  }
+
+  define(facade, "matchMedia", function (media) {
+    return { matches: preference === "dark", media: media };
+  });
+}
+
+function installFrameElement(facade, documentValue, frameElement) {
+  if (frameElement === "throws") {
+    Object.defineProperty(facade, "frameElement", {
+      configurable: true,
+      enumerable: true,
+      get() {
+        throw new Error("Cross-origin frame access is denied.");
+      },
+    });
+
+    return;
+  }
+
+  define(
+    facade,
+    "frameElement",
+    typeof frameElement === "function" ? frameElement(documentValue) : null,
+  );
+}
+
+/**
+ * Builds the drawer iframe the toolbar renders: a frame living inside a shadow
+ * root whose host carries the toolbar theme.
+ */
+export function shadowHostFrame(theme) {
+  return function (documentValue) {
+    var host = documentValue.createElement("div");
+    var frame = documentValue.createElement("iframe");
+
+    if (theme !== undefined) {
+      host.setAttribute("data-theme", theme);
+    }
+
+    documentValue.body.appendChild(host);
+    host.attachShadow({ mode: "open" }).appendChild(frame);
+
+    return frame;
+  };
+}
+
+/** Builds a frame element that reports no root node, as a detached one would. */
+export function rootlessFrame() {
+  return function () {
+    return {};
+  };
+}
+
+/** Builds a frame whose root node is a plain document, so it has no host. */
+export function hostlessFrame() {
+  return function (documentValue) {
+    var frame = documentValue.createElement("iframe");
+
+    documentValue.body.appendChild(frame);
+
+    return frame;
+  };
+}
+
+/**
+ * Renders a page and runs the `core/debug.js` bootstrap against it.
+ *
+ * Every option describes the browser state the bootstrap reads: `body` (or the
+ * whole `html` document) is the server-rendered markup, `url` the address bar,
+ * `cookie`/`storage` the client theme memory, and `frameElement`/`parent`
+ * whether the page is the toolbar drawer or a standalone tab.
+ */
+export async function bootDebugPage(options) {
+  var settings = options || {};
+  var navigations = [];
+  var posts = [];
+  var dom = new JSDOM(
+    settings.html ||
+      "<!doctype html><html><head></head><body>" +
+        (settings.body || "") +
+        "</body></html>",
+    { url: settings.url || DEFAULT_URL },
+  );
+  var win = dom.window;
+  var documentValue = win.document;
+  var facade = Object.create(win);
+  var storage = createStorage(settings.storage);
+
+  if (openDom) {
+    openDom.window.close();
+  }
+
+  openDom = dom;
+
+  if (settings.documentTheme !== undefined) {
+    documentValue.documentElement.setAttribute(
+      "data-yii-debug-theme",
+      settings.documentTheme,
+    );
+  }
+
+  if (settings.cookie) {
+    documentValue.cookie = settings.cookie;
+  }
+
+  if (settings.prepare) {
+    settings.prepare(documentValue);
+  }
+
+  /**
+   * jsdom's EventTarget methods reject an inheriting receiver, so the facade
+   * forwards them to the window they were taken from.
+   */
+  ["addEventListener", "dispatchEvent", "removeEventListener"].forEach(
+    function (name) {
+      define(facade, name, win[name].bind(win));
+    },
+  );
+
+  define(facade, "localStorage", storage);
+  define(facade, "location", createLocation(win, navigations, settings.href));
+  define(
+    facade,
+    "parent",
+    settings.parent === "none"
+      ? undefined
+      : settings.parent === "frame"
+        ? {
+            postMessage(data, origin) {
+              posts.push({ data: data, origin: origin });
+            },
+          }
+        : facade,
+  );
+
+  if (settings.clipboard !== undefined) {
+    define(facade, "navigator", { clipboard: settings.clipboard });
+  } else if (settings.navigator === "none") {
+    define(facade, "navigator", undefined);
+  }
+
+  var session = installSessionStorage(facade, settings);
+
+  installMatchMedia(facade, settings.matchMedia);
+  installFrameElement(facade, documentValue, settings.frameElement);
+
+  Object.defineProperty(globalThis, "window", {
+    configurable: true,
+    value: facade,
+    writable: true,
+  });
+  Object.defineProperty(globalThis, "document", {
+    configurable: true,
+    value: documentValue,
+    writable: true,
+  });
+  Object.defineProperty(globalThis, "localStorage", {
+    configurable: true,
+    value: storage,
+    writable: true,
+  });
+
+  vi.resetModules();
+
+  await import("../src/core/debug.js");
+
+  return {
+    document: documentValue,
+    navigations: navigations,
+    posts: posts,
+    session: session,
+    storage: storage,
+    window: facade,
+    realWindow: win,
+  };
+}
+
+/** Dispatches a bubbling UI event from `element`, as the browser would. */
+export function fire(element, type, init) {
+  var documentValue = element.ownerDocument || element;
+  var view = documentValue.defaultView;
+  var event =
+    type === "keydown"
+      ? new view.KeyboardEvent(type, Object.assign({ bubbles: true }, init))
+      : new view.Event(
+          type,
+          Object.assign({ bubbles: true, cancelable: true }, init),
+        );
+
+  element.dispatchEvent(event);
+
+  return event;
+}
+
+/** Presses a key on `element` and reports the dispatched event. */
+export function press(element, key) {
+  return fire(element, "keydown", { cancelable: true, key: key });
+}
+
+/** Lets pending zero-delay timers and microtasks run. */
+export function settle(windowValue) {
+  return new Promise(function (resolve) {
+    windowValue.setTimeout(resolve, 0);
+  });
+}
diff --git a/resources/tests/debug-theme.test.js b/resources/tests/debug-theme.test.js
new file mode 100644
index 0000000..28949c2
--- /dev/null
+++ b/resources/tests/debug-theme.test.js
@@ -0,0 +1,225 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { test } from "vitest";
+
+import {
+  bootDebugPage,
+  fire,
+  hostlessFrame,
+  rootlessFrame,
+  shadowHostFrame,
+} from "./debug-page-harness.js";
+
+const TOGGLE =
+  '<button type="button" data-yii-debug-theme-toggle data-icon-moon="MOON" ' +
+  'data-icon-sun="SUN"><span class="yii-debug-brand-icon"></span></button>';
+
+function theme(page) {
+  return page.document.documentElement.getAttribute("data-yii-debug-theme");
+}
+
+test("the parent toolbar outranks every stored preference", async () => {
+  const page = await bootDebugPage({
+    cookie: "yii-debug-toolbar-theme=light",
+    documentTheme: "light",
+    frameElement: shadowHostFrame("dark"),
+    matchMedia: "light",
+    storage: { "yii-debug-toolbar-theme": "light" },
+    url: "https://debug.test/debug/index?yii_debug_theme=light",
+  });
+
+  assert.equal(theme(page), "dark", "Drawer must follow its host toolbar.");
+});
+
+test("the cookie wins for a page that is not framed", async () => {
+  const page = await bootDebugPage({
+    cookie: "yii-debug-toolbar-theme=dark",
+    documentTheme: "light",
+    storage: { "yii-debug-toolbar-theme": "light" },
+    url: "https://debug.test/debug/index?yii_debug_theme=light",
+  });
+
+  assert.equal(theme(page), "dark", "Cookie is the last client write.");
+});
+
+test("the stored theme is used when the cookie is missing", async () => {
+  const page = await bootDebugPage({
+    documentTheme: "light",
+    storage: { "yii-debug-toolbar-theme": "dark" },
+    url: "https://debug.test/debug/index?yii_debug_theme=light",
+  });
+
+  assert.equal(theme(page), "dark", "Storage covers blocked cookies.");
+});
+
+test("the query parameter is used when no client choice is stored", async () => {
+  const page = await bootDebugPage({
+    documentTheme: "light",
+    url: "https://debug.test/debug/index?yii_debug_theme=dark",
+  });
+
+  assert.equal(theme(page), "dark", "Deep link must seed a fresh client.");
+});
+
+test("the server-rendered attribute is used when the query has no theme", async () => {
+  const page = await bootDebugPage({
+    documentTheme: "dark",
+    matchMedia: "light",
+  });
+
+  assert.equal(theme(page), "dark", "Server render outranks the system.");
+});
+
+test("a dark system preference is the last resort", async () => {
+  const page = await bootDebugPage({ matchMedia: "dark" });
+
+  assert.equal(theme(page), "dark", "System preference must apply.");
+});
+
+test("a light system preference resolves to the light theme", async () => {
+  const page = await bootDebugPage({ matchMedia: "light" });
+
+  assert.equal(theme(page), "light", "System preference must apply.");
+});
+
+test("a host without matchMedia resolves to the light theme", async () => {
+  const page = await bootDebugPage({});
+
+  assert.equal(theme(page), "light", "Missing query support means light.");
+});
+
+test("an unreadable frame element falls through to the next source", async () => {
+  const page = await bootDebugPage({
+    cookie: "yii-debug-toolbar-theme=dark",
+    frameElement: "throws",
+  });
+
+  assert.equal(theme(page), "dark", "Cross-origin denial must not throw.");
+});
+
+test("a frame element without a root node falls through", async () => {
+  const page = await bootDebugPage({
+    cookie: "yii-debug-toolbar-theme=dark",
+    frameElement: rootlessFrame(),
+  });
+
+  assert.equal(theme(page), "dark", "No root node means no host theme.");
+});
+
+test("a frame outside a shadow root falls through", async () => {
+  const page = await bootDebugPage({
+    cookie: "yii-debug-toolbar-theme=dark",
+    frameElement: hostlessFrame(),
+  });
+
+  assert.equal(theme(page), "dark", "A document root carries no host.");
+});
+
+test("a shadow host without a usable theme falls through", async () => {
+  const page = await bootDebugPage({
+    cookie: "yii-debug-toolbar-theme=dark",
+    frameElement: shadowHostFrame("mauve"),
+  });
+
+  assert.equal(theme(page), "dark", "Unknown host theme must be ignored.");
+});
+
+test("an unparsable address drops the query source and leaves links alone", async () => {
+  const page = await bootDebugPage({
+    body: '<a href="/debug/db">Database</a>',
+    documentTheme: "dark",
+    href: "not a url",
+  });
+
+  assert.equal(theme(page), "dark", "Server render must still apply.");
+  assert.equal(
+    page.document.querySelector("a").getAttribute("href"),
+    "/debug/db",
+    "Link must stay untouched.",
+  );
+});
+
+test("the resolved theme is persisted and carried by debug links and forms", async () => {
+  const page = await bootDebugPage({
+    body:
+      '<a href="/debug/db">Database</a><a href="#top">Top</a>' +
+      '<form action="/debug/db" method="get"></form>',
+    matchMedia: "dark",
+  });
+
+  const links = page.document.querySelectorAll("a");
+
+  assert.equal(
+    page.storage.items.get("yii-debug-toolbar-theme"),
+    "dark",
+    "Storage must record the resolved theme.",
+  );
+  assert.match(
+    page.document.cookie,
+    /yii-debug-toolbar-theme=dark/,
+    "Cookie must record the resolved theme.",
+  );
+  assert.equal(
+    links[0].getAttribute("href"),
+    "https://debug.test/debug/db?yii_debug_theme=dark",
+    "Debug links must carry the theme.",
+  );
+  assert.equal(
+    links[1].getAttribute("href"),
+    "#top",
+    "Fragment links must stay untouched.",
+  );
+  assert.equal(
+    page.document.querySelector('form input[name="yii_debug_theme"]').value,
+    "dark",
+    "GET forms must resubmit the theme.",
+  );
+});
+
+test("the toggle tells the parent toolbar about the new theme", async () => {
+  const page = await bootDebugPage({
+    body: TOGGLE,
+    matchMedia: "light",
+    parent: "frame",
+  });
+
+  fire(page.document.querySelector("[data-yii-debug-theme-toggle]"), "click");
+
+  assert.equal(theme(page), "dark", "Toggle must flip the page theme.");
+  assert.deepEqual(
+    page.posts,
+    [
+      {
+        data: {
+          source: "yii-debug-toolbar",
+          theme: "dark",
+          type: "theme",
+        },
+        origin: "https://debug.test",
+      },
+    ],
+    "Host toolbar must receive the new theme.",
+  );
+});
+
+test("the toggle stays silent on a standalone page", async () => {
+  const page = await bootDebugPage({ body: TOGGLE, matchMedia: "light" });
+
+  fire(page.document.querySelector("[data-yii-debug-theme-toggle]"), "click");
+
+  assert.equal(theme(page), "dark", "Toggle must flip the page theme.");
+  assert.equal(page.posts.length, 0, "Nothing must be posted to itself.");
+});
+
+test("the toggle stays silent when the window has no parent", async () => {
+  const page = await bootDebugPage({
+    body: TOGGLE,
+    matchMedia: "light",
+    parent: "none",
+  });
+
+  fire(page.document.querySelector("[data-yii-debug-theme-toggle]"), "click");
+
+  assert.equal(theme(page), "dark", "Toggle must flip the page theme.");
+  assert.equal(page.posts.length, 0, "A parentless window must be skipped.");
+});
diff --git a/resources/tests/toolbar-element-ajax.test.js b/resources/tests/toolbar-element-ajax.test.js
new file mode 100644
index 0000000..4e8958c
--- /dev/null
+++ b/resources/tests/toolbar-element-ajax.test.js
@@ -0,0 +1,395 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { afterEach, test } from "vitest";
+
+import {
+  createToolbar,
+  installLocalStorage,
+  installMatchMedia,
+  renderToolbar,
+  teardownToolbars,
+  toolbarPayload,
+} from "./toolbar-element-harness.js";
+
+var storage = installLocalStorage({ "yii-debug-toolbar-expanded": "1" });
+
+installMatchMedia();
+
+/**
+ * Detaches the fixtures and restores the expanded flag unconditionally: a
+ * thrown assertion must not hand the next test a collapsed bar.
+ */
+afterEach(() => {
+  teardownToolbars();
+  storage.set("yii-debug-toolbar-expanded", "1");
+});
+
+function request(overrides) {
+  return Object.assign(
+    {
+      duration: 12,
+      error: false,
+      loading: false,
+      method: "GET",
+      statusCode: 200,
+      url: "/api/items",
+    },
+    overrides || {},
+  );
+}
+
+function withRequests(requests) {
+  var element = renderToolbar(toolbarPayload());
+
+  element.ajaxRequests = requests;
+  element.render();
+
+  return element;
+}
+
+function badgeClass(element) {
+  return element.shadowRoot.querySelector(".ajax-panel .metric-value")
+    .className;
+}
+
+function rows(element) {
+  return element.shadowRoot.querySelectorAll(".ajax-popover tbody tr");
+}
+
+test("the AJAX chip counts every request but lists only the last twenty", () => {
+  var stack = [];
+
+  for (var i = 0; i < 22; i++) {
+    stack.push(request({ url: "/api/items/" + i }));
+  }
+
+  var element = withRequests(stack);
+
+  assert.equal(
+    element.shadowRoot.querySelector(".ajax-panel .metric-value").textContent,
+    "22",
+    "Counter must reflect the whole stack.",
+  );
+  assert.equal(
+    rows(element).length,
+    20,
+    "Popover must show the newest twenty.",
+  );
+  assert.equal(
+    rows(element)[0].querySelector(".ajax-url").textContent,
+    "/api/items/2",
+    "Window must start after the dropped entries.",
+  );
+  assert.equal(
+    badgeClass(element),
+    "metric-value badge-success",
+    "Badge: success.",
+  );
+
+  element.remove();
+});
+
+test("an in-flight request switches the chip to the loading badge", () => {
+  var element = withRequests([
+    request(),
+    request({ loading: true, statusCode: undefined }),
+  ]);
+
+  assert.equal(
+    badgeClass(element),
+    "metric-value badge-loading",
+    "Badge: loading.",
+  );
+  assert.equal(
+    rows(element)[1].querySelector(".badge").className,
+    "badge badge-loading",
+    "In-flight row must carry the loading badge.",
+  );
+
+  element.remove();
+});
+
+test("a recent failure turns the chip red while an older one does not", () => {
+  var element = withRequests([
+    request({ error: true, statusCode: 500 }),
+    request(),
+    request(),
+    request(),
+    request(),
+  ]);
+
+  assert.equal(
+    badgeClass(element),
+    "metric-value badge-success",
+    "A failure outside the recency window must not raise the badge.",
+  );
+
+  element.ajaxRequests = [
+    request(),
+    request({ error: true, statusCode: 500 }),
+    request(),
+  ];
+  element.render();
+
+  assert.equal(
+    badgeClass(element),
+    "metric-value badge-danger",
+    "Badge: danger.",
+  );
+
+  element.remove();
+});
+
+test("an untracked stack renders the placeholder row", () => {
+  var element = withRequests([]);
+
+  assert.equal(
+    rows(element)[0].querySelector(".empty").textContent,
+    "No AJAX requests tracked yet.",
+    "Placeholder must explain the empty popover.",
+  );
+
+  element.ajaxRequests = null;
+  element.render();
+
+  assert.equal(
+    rows(element).length,
+    1,
+    "A missing stack must behave as empty.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelector(".ajax-panel").getAttribute("aria-label"),
+    "AJAX requests: 0",
+    "Label must announce an empty stack.",
+  );
+
+  element.remove();
+});
+
+test("status codes map onto the badge palette", () => {
+  var element = withRequests([
+    request({ statusCode: 204 }),
+    request({ statusCode: 302 }),
+    request({ statusCode: 404 }),
+    request({ statusCode: 500 }),
+    request({ statusCode: "n/a" }),
+  ]);
+  var badges = Array.prototype.map.call(
+    element.shadowRoot.querySelectorAll(".ajax-popover .badge"),
+    function (node) {
+      return node.className;
+    },
+  );
+
+  assert.deepEqual(
+    badges,
+    [
+      "badge badge-status-2xx",
+      "badge badge-status-3xx",
+      "badge badge-status-4xx",
+      "badge badge-status-5xx",
+      "badge badge-danger",
+    ],
+    "Palette: 2xx, 3xx, 4xx, 5xx, unparsable.",
+  );
+
+  element.remove();
+});
+
+test("HTTP verbs map onto the verb palette", () => {
+  var element = withRequests([
+    request({ method: "GET" }),
+    request({ method: "head" }),
+    request({ method: "POST" }),
+    request({ method: "PUT" }),
+    request({ method: "patch" }),
+    request({ method: "DELETE" }),
+    request({ method: "OPTIONS" }),
+    request({ method: undefined }),
+  ]);
+  var verbs = Array.prototype.map.call(
+    element.shadowRoot.querySelectorAll(
+      ".ajax-popover tbody tr td:first-child span",
+    ),
+    function (node) {
+      return node.className + ":" + node.textContent;
+    },
+  );
+
+  assert.deepEqual(
+    verbs,
+    [
+      "verb-get:GET",
+      "verb-get:head",
+      "verb-post:POST",
+      "verb-put:PUT",
+      "verb-put:patch",
+      "verb-delete:DELETE",
+      "verb-other:OPTIONS",
+      "verb-other:GET",
+    ],
+    "Palette: get, post, put, delete, other; a method-less row keeps the neutral class.",
+  );
+
+  element.remove();
+});
+
+test("a profiled request links to its snapshot and an unprofiled one does not", () => {
+  var element = withRequests([
+    request({ profile: "tag-1", profilerUrl: "/debug/view?tag=tag-1" }),
+    request({ profile: "tag-2" }),
+  ]);
+  var cells = element.shadowRoot.querySelectorAll(
+    ".ajax-popover tbody tr td:last-child",
+  );
+
+  assert.equal(
+    cells[0].querySelector(".ajax-link").getAttribute("href"),
+    "http://localhost:3000/debug/view?tag=tag-1&yii_debug_theme=light",
+    "Snapshot link must carry the stamped theme.",
+  );
+  assert.equal(
+    cells[0].querySelector(".ajax-link").getAttribute("data-debug-url"),
+    "/debug/view?tag=tag-1",
+    "Snapshot link must double as a drawer trigger.",
+  );
+  assert.equal(
+    cells[1].textContent,
+    "n/a",
+    "Unprofiled requests must read `n/a`.",
+  );
+
+  element.remove();
+});
+
+test("missing status, duration and URL fall back to placeholders", () => {
+  var element = withRequests([
+    request({ duration: undefined, statusCode: undefined, url: "<script>" }),
+  ]);
+  var cells = rows(element)[0].querySelectorAll("td");
+
+  assert.equal(cells[1].textContent, "-", "Missing status must read `-`.");
+  assert.equal(cells[3].textContent, "-", "Missing duration must read `-`.");
+  assert.equal(
+    cells[2].textContent,
+    "<script>",
+    "URL must be escaped, not parsed.",
+  );
+
+  element.remove();
+
+  var timed = withRequests([request({ duration: 42 })]);
+
+  assert.equal(
+    timed.shadowRoot.querySelectorAll(".ajax-popover tbody td")[3].textContent,
+    "42 ms",
+    "A measured request must read its duration.",
+  );
+
+  timed.remove();
+});
+
+test("new metrics swap the AJAX panel without rebuilding the rest of the bar", () => {
+  var element = withRequests([request()]);
+  var panels = element.shadowRoot.querySelector(".panels");
+  var previous = element.shadowRoot.querySelector(".ajax-panel");
+
+  element.setAjaxRequests([request(), request()]);
+
+  assert.equal(
+    element.shadowRoot.querySelector(".panels"),
+    panels,
+    "Surrounding bar must be preserved.",
+  );
+  assert.notEqual(
+    element.shadowRoot.querySelector(".ajax-panel"),
+    previous,
+    "AJAX chip must be replaced.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelector(".ajax-panel .metric-value").textContent,
+    "2",
+    "Counter must follow the new stack.",
+  );
+
+  element.remove();
+});
+
+test("metrics arriving before a first render are only recorded", () => {
+  var detached = createToolbar();
+
+  detached.data = toolbarPayload();
+  detached.expanded = true;
+  detached.setAjaxRequests([request()]);
+
+  assert.equal(detached.barRoot, null, "No skeleton may be built.");
+  assert.equal(
+    detached.ajaxRequests.length,
+    1,
+    "Stack must still be recorded.",
+  );
+
+  var blank = createToolbar();
+
+  blank.setAjaxRequests([request()]);
+
+  assert.equal(
+    blank.barRoot,
+    null,
+    "A payload-less toolbar must stay untouched.",
+  );
+
+  storage.set("yii-debug-toolbar-expanded", "0");
+
+  var collapsed = renderToolbar(toolbarPayload());
+  var bar = collapsed.shadowRoot.querySelector(".bar").innerHTML;
+
+  collapsed.setAjaxRequests([request()]);
+
+  assert.equal(
+    collapsed.shadowRoot.querySelector(".bar").innerHTML,
+    bar,
+    "A collapsed bar must not be redrawn.",
+  );
+
+  collapsed.remove();
+  storage.set("yii-debug-toolbar-expanded", "1");
+});
+
+test("a bar without an AJAX panel is redrawn from scratch", () => {
+  var element = withRequests([request()]);
+
+  element.renderError("Debug data is no longer available for this request.");
+  element.setAjaxRequests([request(), request()]);
+
+  assert.equal(
+    element.shadowRoot.querySelector(".ajax-panel .metric-value").textContent,
+    "2",
+    "Full render must restore the chip.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelector(".error-message"),
+    null,
+    "Error message must be replaced.",
+  );
+
+  element.remove();
+});
+
+test("an empty AJAX fragment leaves the rendered panel untouched", () => {
+  var element = withRequests([request()]);
+  var previous = element.shadowRoot.querySelector(".ajax-panel");
+
+  element.renderAjaxPanel = function () {
+    return "";
+  };
+  element.setAjaxRequests([request(), request()]);
+
+  assert.equal(
+    element.shadowRoot.querySelector(".ajax-panel"),
+    previous,
+    "Panel must survive an empty fragment.",
+  );
+
+  element.remove();
+});
diff --git a/resources/tests/toolbar-element-bootstrap.test.js b/resources/tests/toolbar-element-bootstrap.test.js
new file mode 100644
index 0000000..9c8a8be
--- /dev/null
+++ b/resources/tests/toolbar-element-bootstrap.test.js
@@ -0,0 +1,81 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { test, vi } from "vitest";
+
+const tagName = "yii-debug-toolbar";
+
+test("the entry point defines the element and installs AJAX tracking", async () => {
+  var browserOpen = window.XMLHttpRequest.prototype.open;
+
+  await import("../src/toolbar/index.js");
+
+  const { YiiDebugToolbar } = await import("../src/toolbar/element.js");
+
+  assert.equal(
+    window.customElements.get(tagName),
+    YiiDebugToolbar,
+    "Registry must hold the toolbar constructor.",
+  );
+  assert.equal(
+    window.__yiiDebugToolbarTracking,
+    true,
+    "Tracking flag must be raised.",
+  );
+  assert.notEqual(
+    window.XMLHttpRequest.prototype.open,
+    browserOpen,
+    "`open` must be replaced by the tracker.",
+  );
+});
+
+test("a second bootstrap keeps the first registration and the installed hooks", async () => {
+  var registered = window.customElements.get(tagName);
+  var trackedOpen = window.XMLHttpRequest.prototype.open;
+
+  vi.resetModules();
+
+  await import("../src/toolbar/index.js");
+
+  const { YiiDebugToolbar } = await import("../src/toolbar/element.js");
+
+  assert.equal(
+    window.customElements.get(tagName),
+    registered,
+    "Registry entry must survive the duplicate bootstrap.",
+  );
+  assert.notEqual(
+    window.customElements.get(tagName),
+    YiiDebugToolbar,
+    "Reloaded constructor must not replace the registered one.",
+  );
+  assert.equal(
+    window.XMLHttpRequest.prototype.open,
+    trackedOpen,
+    "`open` must not be hooked twice.",
+  );
+});
+
+test("a host without custom element support still installs AJAX tracking", async () => {
+  var registry = window.customElements;
+  var trackedOpen = window.XMLHttpRequest.prototype.open;
+
+  vi.resetModules();
+  delete window.customElements;
+
+  try {
+    await import("../src/toolbar/index.js");
+
+    assert.equal(
+      window.customElements,
+      undefined,
+      "Registry must stay absent.",
+    );
+    assert.equal(
+      window.XMLHttpRequest.prototype.open,
+      trackedOpen,
+      "`open` must not be hooked twice.",
+    );
+  } finally {
+    window.customElements = registry;
+  }
+});
diff --git a/resources/tests/toolbar-element-drawer.test.js b/resources/tests/toolbar-element-drawer.test.js
new file mode 100644
index 0000000..8177443
--- /dev/null
+++ b/resources/tests/toolbar-element-drawer.test.js
@@ -0,0 +1,688 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { afterEach, test } from "vitest";
+
+import {
+  installLocalStorage,
+  installMatchMedia,
+  renderToolbar,
+  stubBoundingHeight,
+  stubViewportHeight,
+  teardownToolbars,
+  toolbarPayload,
+} from "./toolbar-element-harness.js";
+
+var storage = installLocalStorage({ "yii-debug-toolbar-expanded": "1" });
+
+installMatchMedia();
+
+/**
+ * Detaches the fixtures and restores the expanded flag, which the collapse
+ * control persists as part of the behaviour under test.
+ */
+afterEach(() => {
+  teardownToolbars();
+  storage.set("yii-debug-toolbar-expanded", "1");
+});
+
+function payload(overrides) {
+  return toolbarPayload(
+    Object.assign(
+      {
+        items: [
+          {
+            icon: "db",
+            id: "db",
+            items: [{ label: "Queries", value: "3" }],
+            title: "Database",
+            url: "/debug/db",
+          },
+          {
+            icon: "logs",
+            id: "logs",
+            items: [{ label: "Errors", value: "0" }],
+            title: "Logs",
+            url: "/debug/logs",
+          },
+        ],
+      },
+      overrides || {},
+    ),
+  );
+}
+
+function click(node, options) {
+  node.dispatchEvent(
+    new window.MouseEvent(
+      "click",
+      Object.assign({ bubbles: true, cancelable: true }, options),
+    ),
+  );
+}
+
+function keydown(node, key) {
+  node.dispatchEvent(
+    new window.KeyboardEvent("keydown", {
+      bubbles: true,
+      cancelable: true,
+      key: key,
+    }),
+  );
+}
+
+function drawerHeight(element) {
+  return element.style.getPropertyValue("--yii-debug-toolbar-drawer-height");
+}
+
+test("clicking a panel opens the drawer and focuses the close control", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+
+  var frame = element.shadowRoot.querySelector(".drawer iframe");
+
+  assert.equal(element.drawerOpen, true, "Drawer must be open.");
+  assert.equal(element.activeUrl, "/debug/db", "Active URL must be recorded.");
+  assert.equal(
+    frame.getAttribute("src"),
+    "http://localhost:3000/debug/db?yii_debug_theme=light",
+    "Frame must load the stamped URL.",
+  );
+  assert.ok(
+    element.shadowRoot
+      .querySelector(".toolbar")
+      .classList.contains("drawer-open"),
+    "Open drawer must be reflected in the class list.",
+  );
+  assert.equal(
+    element.shadowRoot.activeElement,
+    element.shadowRoot.querySelector(".close-drawer"),
+    "Focus must land on the close control.",
+  );
+  assert.equal(
+    storage.get("yii-debug-toolbar-expanded"),
+    "1",
+    "Opening a panel must pin the expanded state.",
+  );
+
+  element.remove();
+});
+
+test("a modified click and a click beside a trigger leave the drawer closed", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'), {
+    ctrlKey: true,
+  });
+
+  assert.equal(
+    element.drawerOpen,
+    false,
+    "A modified click must not be captured.",
+  );
+
+  click(element.shadowRoot.querySelector(".bar"));
+
+  assert.equal(
+    element.drawerOpen,
+    false,
+    "A click on inert chrome must be ignored.",
+  );
+
+  element.remove();
+});
+
+test("an unsafe panel URL never opens the drawer", () => {
+  var element = renderToolbar(payload());
+
+  element.openPanel("//evil.test/debug/db");
+
+  assert.equal(
+    element.drawerOpen,
+    false,
+    "Protocol-relative URLs must be rejected.",
+  );
+  assert.equal(element.activeUrl, "", "No URL may be recorded.");
+
+  element.remove();
+});
+
+test("Escape closes the drawer and restores focus to the trigger", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+  keydown(element.shadowRoot.querySelector(".close-drawer"), "Escape");
+
+  assert.equal(element.drawerOpen, false, "Drawer must be closed.");
+  assert.equal(
+    element.shadowRoot.activeElement.getAttribute("title"),
+    "Database",
+    "Focus must return to the chip that opened it.",
+  );
+  assert.equal(
+    element.restoreFocusUrl,
+    null,
+    "Restore target must be cleared.",
+  );
+
+  keydown(element.shadowRoot.querySelector(".bar"), "Escape");
+
+  assert.equal(
+    element.drawerOpen,
+    false,
+    "A closed drawer must ignore Escape.",
+  );
+
+  element.remove();
+});
+
+test("closing a drawer whose trigger disappeared focuses the collapse control", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+  element.data.items = [];
+  element.closeDrawer();
+
+  assert.equal(
+    element.shadowRoot.activeElement,
+    element.shadowRoot.querySelector(".toggle-toolbar"),
+    "Focus must fall back to the collapse control.",
+  );
+
+  element.remove();
+});
+
+test("the close control closes the drawer", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+  click(element.shadowRoot.querySelector(".close-drawer"));
+
+  assert.equal(element.drawerOpen, false, "Drawer must be closed.");
+  assert.equal(
+    element.drawerRoot.innerHTML,
+    "",
+    "Drawer host must be emptied.",
+  );
+
+  element.render();
+
+  assert.equal(
+    element.drawerRoot.innerHTML,
+    "",
+    "An already empty host must not be rewritten.",
+  );
+
+  element.remove();
+});
+
+test("the collapse control folds the bar and drops the drawer", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+  click(element.shadowRoot.querySelector(".toggle-toolbar"));
+
+  assert.equal(element.expanded, false, "Bar must collapse.");
+  assert.equal(element.drawerOpen, false, "Drawer must close with the bar.");
+  assert.equal(
+    storage.get("yii-debug-toolbar-expanded"),
+    "0",
+    "Collapsed state must be persisted.",
+  );
+
+  click(element.shadowRoot.querySelector(".toggle-toolbar"));
+
+  assert.equal(element.expanded, true, "Bar must expand again.");
+  assert.equal(
+    storage.get("yii-debug-toolbar-expanded"),
+    "1",
+    "Expanded state must be persisted.",
+  );
+
+  element.remove();
+});
+
+test("the drawer keeps its browsing context while the bar is refreshed", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+
+  var frame = element.shadowRoot.querySelector(".drawer iframe");
+
+  element.render();
+
+  assert.equal(
+    element.shadowRoot.querySelector(".drawer iframe"),
+    frame,
+    "Frame node must survive a refresh.",
+  );
+  assert.equal(
+    frame.getAttribute("src"),
+    "http://localhost:3000/debug/db?yii_debug_theme=light",
+    "Unchanged URL must not renavigate the frame.",
+  );
+
+  element.openPanel("/debug/logs");
+
+  assert.equal(
+    element.shadowRoot.querySelector(".drawer iframe"),
+    frame,
+    "Navigating must reuse the same frame.",
+  );
+  assert.equal(
+    frame.getAttribute("src"),
+    "http://localhost:3000/debug/logs?yii_debug_theme=light",
+    "Frame must follow the new panel.",
+  );
+
+  element.remove();
+});
+
+test("a drawer missing its resize handle is rebuilt", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+  element.drawerRoot.querySelector(".resize-handle").remove();
+  element.render();
+
+  assert.ok(
+    element.drawerRoot.querySelector(".resize-handle"),
+    "Handle must be restored.",
+  );
+  assert.ok(
+    element.drawerRoot.querySelector(".drawer"),
+    "Drawer must be restored.",
+  );
+
+  element.remove();
+});
+
+test("switching the docking position reorders the handle and the drawer", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+
+  assert.deepEqual(
+    Array.prototype.map.call(element.drawerRoot.children, function (node) {
+      return node.className;
+    }),
+    ["resize-handle", "drawer"],
+    "Bottom dock: handle above the drawer.",
+  );
+
+  element.setAttribute("data-position", "top");
+  element.render();
+
+  assert.deepEqual(
+    Array.prototype.map.call(element.drawerRoot.children, function (node) {
+      return node.className;
+    }),
+    ["drawer", "resize-handle"],
+    "Top dock: drawer above the handle.",
+  );
+
+  element.render();
+
+  assert.equal(
+    element.drawerPosition,
+    "top",
+    "An unchanged position must not reorder again.",
+  );
+
+  element.setAttribute("data-position", "bottom");
+  element.render();
+
+  assert.deepEqual(
+    Array.prototype.map.call(element.drawerRoot.children, function (node) {
+      return node.className;
+    }),
+    ["resize-handle", "drawer"],
+    "Docking back at the bottom must restore the original order.",
+  );
+
+  element.remove();
+});
+
+test("a drawer rebuilt while docked at the top keeps the drawer first", () => {
+  var element = renderToolbar(payload({ position: "top" }));
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+
+  assert.deepEqual(
+    Array.prototype.map.call(element.drawerRoot.children, function (node) {
+      return node.className;
+    }),
+    ["drawer", "resize-handle"],
+    "Top dock: drawer above the handle.",
+  );
+
+  element.remove();
+});
+
+test("an unsafe active URL tears the drawer down", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+  element.activeUrl = "//evil.test/debug/db";
+  element.render();
+
+  assert.equal(element.drawerOpen, false, "Drawer must be closed.");
+  assert.equal(element.activeUrl, "", "Active URL must be dropped.");
+  assert.equal(
+    element.drawerRoot.innerHTML,
+    "",
+    "Drawer host must be emptied.",
+  );
+  assert.equal(
+    element.renderDrawer("bottom"),
+    "",
+    "A closed drawer must render nothing.",
+  );
+
+  element.remove();
+});
+
+test("the drawer height comes from the attribute, then the payload, then the default", () => {
+  var element = renderToolbar(payload({ defaultHeight: 40 }), {
+    "data-height": "70",
+  });
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+
+  assert.equal(drawerHeight(element), "70vh", "Attribute must win.");
+
+  element.style.removeProperty("--yii-debug-toolbar-drawer-height");
+  element.removeAttribute("data-height");
+  element.applyDrawerHeight();
+
+  assert.equal(
+    drawerHeight(element),
+    "40vh",
+    "Payload default must be used next.",
+  );
+
+  element.style.removeProperty("--yii-debug-toolbar-drawer-height");
+  element.data.defaultHeight = undefined;
+  element.applyDrawerHeight();
+
+  assert.equal(
+    drawerHeight(element),
+    "50vh",
+    "Built-in default must be the last resort.",
+  );
+
+  element.applyDrawerHeight();
+
+  assert.equal(
+    drawerHeight(element),
+    "50vh",
+    "An explicit height must not be recomputed.",
+  );
+
+  element.remove();
+});
+
+test("the drawer height is clamped to the supported range", () => {
+  var low = renderToolbar(payload(), { "data-height": "5" });
+
+  click(low.shadowRoot.querySelector('[title="Database"]'));
+
+  assert.equal(drawerHeight(low), "20vh", "Lower bound: 20vh.");
+
+  low.remove();
+
+  var high = renderToolbar(payload(), { "data-height": "99" });
+
+  click(high.shadowRoot.querySelector('[title="Database"]'));
+
+  assert.equal(drawerHeight(high), "90vh", "Upper bound: 90vh.");
+
+  high.remove();
+});
+
+test("a closed toolbar exposes no drawer height to apply", () => {
+  var element = renderToolbar(payload());
+
+  element.applyDrawerHeight();
+
+  assert.equal(drawerHeight(element), "", "No drawer means no height.");
+
+  element.remove();
+});
+
+test("dragging the handle resizes the drawer until the pointer is released", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+
+  var handle = element.shadowRoot.querySelector(".resize-handle");
+
+  stubBoundingHeight(element.shadowRoot.querySelector(".drawer"), {
+    bottom: 700,
+    height: 300,
+    top: 400,
+  });
+  handle.dispatchEvent(
+    new window.MouseEvent("pointerdown", { bubbles: true, cancelable: true }),
+  );
+
+  assert.equal(element.resizing, true, "Pointer down must start the drag.");
+
+  document.dispatchEvent(
+    new window.MouseEvent("pointermove", { clientY: 400 }),
+  );
+
+  assert.equal(
+    drawerHeight(element),
+    "300px",
+    "Height must follow the cursor.",
+  );
+  assert.equal(
+    handle.getAttribute("aria-valuenow"),
+    "300",
+    "Handle must publish the measured height.",
+  );
+  assert.equal(
+    handle.getAttribute("aria-valuemin"),
+    "120",
+    "Range floor: 120.",
+  );
+  assert.equal(
+    handle.getAttribute("aria-valuemax"),
+    "720",
+    "Range ceiling: viewport - 48.",
+  );
+
+  document.dispatchEvent(new window.MouseEvent("pointerup", {}));
+
+  assert.equal(element.resizing, false, "Pointer up must end the drag.");
+
+  document.dispatchEvent(
+    new window.MouseEvent("pointermove", { clientY: 200 }),
+  );
+  element.onPointerMove({ clientY: 200 });
+
+  assert.equal(
+    drawerHeight(element),
+    "300px",
+    "A released pointer must not resize.",
+  );
+
+  element.remove();
+});
+
+test("dragging without a drawer rectangle measures against the viewport", () => {
+  var element = renderToolbar(payload({ position: "top" }));
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+
+  element.shadowRoot
+    .querySelector(".resize-handle")
+    .dispatchEvent(
+      new window.MouseEvent("pointerdown", { bubbles: true, cancelable: true }),
+    );
+  element.shadowRoot.querySelector(".drawer").remove();
+  document.dispatchEvent(
+    new window.MouseEvent("pointermove", { clientY: 250 }),
+  );
+
+  assert.equal(
+    drawerHeight(element),
+    "250px",
+    "Top dock must measure from the cursor down.",
+  );
+
+  element.onPointerUp();
+  element.remove();
+});
+
+test("a viewport without an inner height falls back to the document height", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+
+  element.resizing = true;
+  stubViewportHeight(0);
+
+  try {
+    element.onPointerMove({ clientY: 10 });
+
+    assert.equal(
+      drawerHeight(element),
+      "120px",
+      "Collapsed viewport must clamp to the floor.",
+    );
+
+    element.onResizeKeyDown({ key: "End", preventDefault() {} });
+
+    assert.equal(
+      drawerHeight(element),
+      "120px",
+      "Bounds must collapse onto the floor.",
+    );
+    assert.equal(
+      element.shadowRoot
+        .querySelector(".resize-handle")
+        .getAttribute("aria-valuemax"),
+      "120",
+      "Range ceiling must collapse onto the floor.",
+    );
+  } finally {
+    stubViewportHeight(768);
+  }
+
+  element.onPointerUp();
+  element.remove();
+});
+
+test("the keyboard grows, shrinks and jumps the drawer to its bounds", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+
+  var handle = element.shadowRoot.querySelector(".resize-handle");
+
+  stubBoundingHeight(element.shadowRoot.querySelector(".drawer"), {
+    height: 300,
+  });
+
+  keydown(handle, "ArrowUp");
+
+  assert.equal(
+    drawerHeight(element),
+    "324px",
+    "Arrow up must grow a bottom drawer.",
+  );
+
+  keydown(handle, "ArrowDown");
+
+  assert.equal(
+    drawerHeight(element),
+    "276px",
+    "Arrow down must shrink a bottom drawer.",
+  );
+
+  keydown(handle, "Home");
+
+  assert.equal(drawerHeight(element), "120px", "Home must jump to the floor.");
+
+  keydown(handle, "End");
+
+  assert.equal(drawerHeight(element), "720px", "End must jump to the ceiling.");
+
+  keydown(handle, "Tab");
+
+  assert.equal(
+    drawerHeight(element),
+    "720px",
+    "An unrelated key must be left alone.",
+  );
+
+  element.remove();
+});
+
+test("resize keys and range updates are inert without a drawer", () => {
+  var element = renderToolbar(payload());
+
+  element.onResizeKeyDown({ key: "Home", preventDefault() {} });
+
+  assert.equal(drawerHeight(element), "", "No drawer means no height.");
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+
+  var handle = element.shadowRoot.querySelector(".resize-handle");
+
+  handle.removeAttribute("aria-valuenow");
+  element.shadowRoot.querySelector(".drawer").remove();
+  element.updateResizeHandleAccessibility();
+
+  assert.equal(
+    handle.getAttribute("aria-valuenow"),
+    null,
+    "An incomplete drawer must not be measured.",
+  );
+
+  element.remove();
+});
+
+test("the resize handle is wired exactly once", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector('[title="Database"]'));
+
+  var handle = element.shadowRoot.querySelector(".resize-handle");
+
+  element.render();
+  stubBoundingHeight(element.shadowRoot.querySelector(".drawer"), {
+    height: 300,
+  });
+  keydown(handle, "Home");
+
+  assert.equal(
+    element.shadowRoot.querySelector(".resize-handle"),
+    handle,
+    "Handle node must be reused.",
+  );
+  assert.equal(
+    drawerHeight(element),
+    "120px",
+    "Handle must stay wired after a refresh.",
+  );
+
+  element.remove();
+});
+
+test("an error bar exposes no controls to wire", () => {
+  var element = renderToolbar(payload());
+
+  element.renderError("Unable to load debug toolbar data.");
+  element.bindEvents();
+
+  assert.equal(
+    element.shadowRoot.querySelector(".toggle-toolbar"),
+    null,
+    "Error bar must expose no controls.",
+  );
+
+  element.remove();
+});
diff --git a/resources/tests/toolbar-element-extensions.test.js b/resources/tests/toolbar-element-extensions.test.js
new file mode 100644
index 0000000..e40657f
--- /dev/null
+++ b/resources/tests/toolbar-element-extensions.test.js
@@ -0,0 +1,393 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { afterEach, test } from "vitest";
+
+import {
+  installLocalStorage,
+  installMatchMedia,
+  renderToolbar,
+  teardownToolbars,
+  toolbarPayload,
+} from "./toolbar-element-harness.js";
+
+installLocalStorage({ "yii-debug-toolbar-expanded": "1" });
+installMatchMedia();
+
+/** Detaches the fixtures a thrown assertion would leave connected. */
+afterEach(teardownToolbars);
+
+function payload(overrides) {
+  return toolbarPayload(
+    Object.assign(
+      {
+        items: [
+          {
+            icon: "request",
+            id: "request",
+            items: [{ label: "Status", value: "200" }],
+            title: "Request",
+            url: "/debug/request",
+          },
+          {
+            extension: true,
+            icon: "inertia",
+            id: "inertia",
+            items: [{ label: "Version", value: "1" }],
+            title: "Inertia",
+            url: "/debug/inertia",
+          },
+          {
+            extension: true,
+            icon: "queue",
+            id: "queue",
+            items: [{ label: "Failed", status: "danger", value: "2" }],
+            title: "Queue",
+            url: "/debug/queue",
+          },
+        ],
+      },
+      overrides || {},
+    ),
+  );
+}
+
+function click(node) {
+  node.dispatchEvent(
+    new window.MouseEvent("click", { bubbles: true, cancelable: true }),
+  );
+}
+
+function keydown(node, key) {
+  node.dispatchEvent(
+    new window.KeyboardEvent("keydown", {
+      bubbles: true,
+      cancelable: true,
+      key: key,
+    }),
+  );
+}
+
+function pointerdown(node) {
+  node.dispatchEvent(
+    new window.MouseEvent("pointerdown", {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }),
+  );
+}
+
+test("provider panels are grouped behind a single Extensions chip", () => {
+  var element = renderToolbar(payload());
+  var root = element.shadowRoot;
+
+  assert.equal(
+    root.querySelectorAll(".panels > .panel").length,
+    1,
+    "Only built-ins may stay in the inline strip.",
+  );
+  assert.equal(
+    root.querySelectorAll(".extensions-menu > .panel").length,
+    2,
+    "Both provider panels must move into the menu.",
+  );
+  assert.equal(
+    root.querySelector(".extensions-toggle .metric-value").textContent,
+    "2",
+    "Counter must report the grouped panels.",
+  );
+  assert.equal(
+    root.querySelector(".extensions-toggle .metric-value").className,
+    "metric-value badge-danger",
+    "A failure hidden in the menu must surface on the chip.",
+  );
+  assert.equal(
+    root.querySelector(".extensions-menu").getAttribute("aria-label"),
+    "Extensions",
+    "Menu must be labelled.",
+  );
+  assert.equal(
+    root.querySelector(".bar > .extensions").nextElementSibling.className,
+    "controls",
+    "Menu must sit between the strip and the controls.",
+  );
+
+  element.remove();
+});
+
+test("a healthy extension set keeps the neutral badge", () => {
+  var element = renderToolbar(
+    payload({
+      items: [
+        {
+          extension: true,
+          id: "inertia",
+          items: [{ label: "Version", value: "1" }],
+          title: "Inertia",
+        },
+      ],
+    }),
+  );
+
+  assert.equal(
+    element.shadowRoot.querySelector(".extensions-toggle .metric-value")
+      .className,
+    "metric-value badge-default",
+    "Badge: default.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelector(".extensions-toggle").className,
+    "panel extensions-toggle",
+    "Chip must stay inactive.",
+  );
+
+  element.remove();
+});
+
+test("a payload without provider panels renders no menu", () => {
+  var element = renderToolbar(
+    payload({
+      items: [{ id: "request", title: "Request", url: "/debug/request" }],
+    }),
+  );
+
+  assert.equal(
+    element.shadowRoot.querySelector(".extensions"),
+    null,
+    "Menu must be absent.",
+  );
+
+  element.remove();
+});
+
+test("the chip opens the menu, moves focus into it, and closes it again", () => {
+  var element = renderToolbar(payload());
+  var root = element.shadowRoot;
+  var toggle = root.querySelector(".extensions-toggle");
+
+  click(toggle);
+
+  assert.equal(element.extensionsOpen, true, "Menu must be open.");
+  assert.ok(
+    root.querySelector(".extensions").classList.contains("is-open"),
+    "Wrapper must carry the open modifier.",
+  );
+  assert.equal(
+    toggle.getAttribute("aria-expanded"),
+    "true",
+    "Chip must announce the open menu.",
+  );
+  assert.equal(
+    root.activeElement,
+    root.querySelector(".extensions-menu [data-debug-url]"),
+    "Focus must land on the first menu entry.",
+  );
+
+  click(toggle);
+
+  assert.equal(element.extensionsOpen, false, "Menu must be closed.");
+  assert.equal(
+    toggle.getAttribute("aria-expanded"),
+    "false",
+    "Chip must announce the closed menu.",
+  );
+
+  element.remove();
+});
+
+test("Escape closes the menu before the drawer and restores focus to the chip", () => {
+  var element = renderToolbar(payload());
+  var root = element.shadowRoot;
+
+  click(root.querySelector('[title="Request"]'));
+  click(root.querySelector(".extensions-toggle"));
+  keydown(root.querySelector(".extensions-toggle"), "Escape");
+
+  assert.equal(element.extensionsOpen, false, "Menu must close first.");
+  assert.equal(
+    element.drawerOpen,
+    true,
+    "Drawer must survive the first Escape.",
+  );
+  assert.equal(
+    root.activeElement,
+    root.querySelector(".extensions-toggle"),
+    "Focus must return to the chip.",
+  );
+
+  keydown(root.querySelector(".extensions-toggle"), "Escape");
+
+  assert.equal(
+    element.drawerOpen,
+    false,
+    "A second Escape must close the drawer.",
+  );
+
+  element.remove();
+});
+
+test("opening a grouped panel closes the menu", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector(".extensions-toggle"));
+  click(element.shadowRoot.querySelector('.extensions-menu [title="Queue"]'));
+
+  assert.equal(
+    element.extensionsOpen,
+    false,
+    "Menu must close with the drawer opening.",
+  );
+  assert.equal(
+    element.activeUrl,
+    "/debug/queue",
+    "Grouped panel must reach the drawer.",
+  );
+  assert.ok(
+    element.shadowRoot
+      .querySelector(".extensions-toggle")
+      .classList.contains("panel-active"),
+    "Chip must mark the open provider panel.",
+  );
+
+  element.remove();
+});
+
+test("a pointer outside the menu dismisses it and one inside does not", () => {
+  var element = renderToolbar(payload());
+  var root = element.shadowRoot;
+
+  click(root.querySelector(".extensions-toggle"));
+  pointerdown(root.querySelector('.extensions-menu [title="Inertia"]'));
+
+  assert.equal(
+    element.extensionsOpen,
+    true,
+    "A pointer inside must keep the menu open.",
+  );
+
+  pointerdown(root.querySelector(".bar"));
+
+  assert.equal(
+    element.extensionsOpen,
+    false,
+    "A pointer outside must dismiss the menu.",
+  );
+
+  element.remove();
+});
+
+test("a pointer event without a composed path falls back to its target", () => {
+  var element = renderToolbar(payload());
+  var root = element.shadowRoot;
+
+  click(root.querySelector(".extensions-toggle"));
+  element.boundExtensionsPointerDown({
+    target: root.querySelector('.extensions-menu [title="Inertia"]'),
+  });
+
+  assert.equal(
+    element.extensionsOpen,
+    true,
+    "A target inside must keep the menu open.",
+  );
+
+  element.boundExtensionsPointerDown({ target: root.querySelector(".bar") });
+
+  assert.equal(
+    element.extensionsOpen,
+    false,
+    "A target outside must dismiss the menu.",
+  );
+
+  element.boundExtensionsPointerDown({ target: root.querySelector(".bar") });
+
+  assert.equal(
+    element.extensionsOpen,
+    false,
+    "A closed menu must ignore further pointers.",
+  );
+
+  element.remove();
+});
+
+test("a bar redrawn while the menu is open keeps it open", () => {
+  var element = renderToolbar(payload());
+
+  click(element.shadowRoot.querySelector(".extensions-toggle"));
+  element.render();
+
+  assert.ok(
+    element.shadowRoot
+      .querySelector(".extensions")
+      .classList.contains("is-open"),
+    "Wrapper must be rendered open.",
+  );
+  assert.equal(
+    element.shadowRoot
+      .querySelector(".extensions-toggle")
+      .getAttribute("aria-expanded"),
+    "true",
+    "Chip must be rendered as expanded.",
+  );
+
+  element.remove();
+});
+
+test("an unrendered menu still tracks its open state", () => {
+  var element = renderToolbar(
+    payload({
+      items: [{ id: "request", title: "Request", url: "/debug/request" }],
+    }),
+  );
+
+  element.toggleExtensions();
+
+  assert.equal(
+    element.extensionsOpen,
+    true,
+    "State must flip without a menu to sync.",
+  );
+
+  element.closeExtensions(false);
+
+  assert.equal(element.extensionsOpen, false, "State must flip back.");
+  assert.equal(
+    element.shadowRoot.activeElement,
+    null,
+    "Nothing may be focused when no chip exists.",
+  );
+
+  element.remove();
+});
+
+test("an empty menu leaves focus where it is", () => {
+  var element = renderToolbar(payload());
+  var root = element.shadowRoot;
+
+  root.querySelector(".extensions-menu").innerHTML = "";
+  root.querySelector(".extensions-toggle").focus();
+  element.toggleExtensions();
+
+  assert.equal(
+    root.activeElement,
+    root.querySelector(".extensions-toggle"),
+    "Focus must stay on the chip.",
+  );
+
+  element.remove();
+});
+
+test("a wrapper without its chip still records the open state", () => {
+  var element = renderToolbar(payload());
+  var root = element.shadowRoot;
+
+  root.querySelector(".extensions-toggle").remove();
+  element.toggleExtensions();
+
+  assert.ok(
+    root.querySelector(".extensions").classList.contains("is-open"),
+    "Wrapper must still be marked open.",
+  );
+
+  element.remove();
+});
diff --git a/resources/tests/toolbar-element-harness.js b/resources/tests/toolbar-element-harness.js
new file mode 100644
index 0000000..abf9997
--- /dev/null
+++ b/resources/tests/toolbar-element-harness.js
@@ -0,0 +1,251 @@
+/**
+ * Shared jsdom scaffolding for the `<yii-debug-toolbar>` element tests.
+ *
+ * jsdom ships custom elements, shadow DOM, cookies and `XMLHttpRequest`, but it
+ * has no `matchMedia`, and Node's experimental `localStorage` accessor shadows
+ * the jsdom one. Both are installed from here — never from the source — so the
+ * element keeps its browser assumptions untouched.
+ */
+import { YiiDebugToolbar } from "../src/toolbar/element.js";
+import { tagName } from "../src/toolbar/state.js";
+
+/**
+ * Installs a synchronous in-memory `localStorage` and returns its backing map,
+ * so a test can seed it and read back what the element persisted.
+ */
+export function installLocalStorage(initial) {
+  var items = new Map(Object.entries(initial || {}));
+
+  Object.defineProperty(window, "localStorage", {
+    configurable: true,
+    writable: true,
+    value: {
+      getItem(key) {
+        return items.has(key) ? items.get(key) : null;
+      },
+      removeItem(key) {
+        items.delete(key);
+      },
+      setItem(key, value) {
+        items.set(key, String(value));
+      },
+    },
+  });
+
+  return items;
+}
+
+/**
+ * Installs a `matchMedia` stub. `legacy` exposes only the deprecated
+ * `addListener`/`removeListener` pair and `inert` exposes neither, which is how
+ * the element's two fallback paths are reached.
+ */
+export function installMatchMedia(options) {
+  var settings = options || {};
+  var listeners = [];
+  var query = {
+    listeners: listeners,
+    matches: settings.matches === true,
+    media: "(prefers-color-scheme: dark)",
+  };
+
+  if (settings.legacy === true) {
+    query.addListener = function (listener) {
+      listeners.push(listener);
+    };
+    query.removeListener = function (listener) {
+      listeners.splice(listeners.indexOf(listener), 1);
+    };
+  } else if (settings.inert !== true) {
+    query.addEventListener = function (type, listener) {
+      listeners.push(listener);
+    };
+    query.removeEventListener = function (type, listener) {
+      listeners.splice(listeners.indexOf(listener), 1);
+    };
+  }
+
+  window.matchMedia = function () {
+    return query;
+  };
+
+  return query;
+}
+
+export function removeMatchMedia() {
+  delete window.matchMedia;
+}
+
+/**
+ * Replaces `XMLHttpRequest` with a fake whose responses the test drives, so
+ * `load()` never reaches the network.
+ */
+export function installXmlHttpRequest() {
+  var original = window.XMLHttpRequest;
+  var requests = [];
+
+  function FakeXmlHttpRequest() {
+    this.headers = {};
+    this.readyState = 0;
+    this.responseText = "";
+    this.sent = false;
+    this.status = 0;
+    requests.push(this);
+  }
+
+  FakeXmlHttpRequest.prototype.open = function (method, url, async) {
+    this.async = async;
+    this.method = method;
+    this.url = url;
+  };
+
+  FakeXmlHttpRequest.prototype.setRequestHeader = function (name, value) {
+    this.headers[name] = value;
+  };
+
+  FakeXmlHttpRequest.prototype.send = function () {
+    this.sent = true;
+  };
+
+  /** Drives the element's `onreadystatechange` with a completed response. */
+  FakeXmlHttpRequest.prototype.respond = function (status, body) {
+    this.readyState = 4;
+    this.responseText = typeof body === "string" ? body : "";
+    this.status = status;
+    this.onreadystatechange();
+  };
+
+  /** Drives an intermediate ready state the element must ignore. */
+  FakeXmlHttpRequest.prototype.progress = function (readyState) {
+    this.readyState = readyState;
+    this.onreadystatechange();
+  };
+
+  window.XMLHttpRequest = FakeXmlHttpRequest;
+
+  return {
+    requests: requests,
+    last() {
+      return requests[requests.length - 1];
+    },
+    restore() {
+      window.XMLHttpRequest = original;
+    },
+  };
+}
+
+/**
+ * Fixtures this module attached to the document, in attachment order.
+ *
+ * Only what the harness appends is recorded: a detached `createToolbar()`
+ * fixture stays out of it, so the lifecycle tests keep driving
+ * `disconnectedCallback()` themselves.
+ */
+var attached = [];
+
+/**
+ * Detaches every recorded fixture still in the document and forgets all of
+ * them, so a thrown assertion cannot leave a connected toolbar registered in
+ * `toolbars`, listening on the document or holding a theme observer.
+ */
+export function teardownToolbars() {
+  for (var i = attached.length - 1; i >= 0; i--) {
+    if (attached[i].isConnected) {
+      attached[i].remove();
+    }
+  }
+
+  attached.length = 0;
+}
+
+export function defineToolbar() {
+  if (!window.customElements.get(tagName)) {
+    window.customElements.define(tagName, YiiDebugToolbar);
+  }
+}
+
+/** Creates an upgraded, detached toolbar carrying the given attributes. */
+export function createToolbar(attributes) {
+  defineToolbar();
+
+  var element = document.createElement(tagName);
+  var names = Object.keys(attributes || {});
+
+  for (var i = 0; i < names.length; i++) {
+    element.setAttribute(names[i], attributes[names[i]]);
+  }
+
+  return element;
+}
+
+/** Creates a toolbar and attaches it, so `connectedCallback()` runs. */
+export function connectToolbar(attributes) {
+  var element = createToolbar(attributes);
+
+  document.body.appendChild(element);
+  attached.push(element);
+
+  return element;
+}
+
+/** Renders `payload` through an attached toolbar and returns the element. */
+export function renderToolbar(payload, attributes) {
+  var element = connectToolbar(attributes);
+
+  element.data = payload;
+  element.render();
+
+  return element;
+}
+
+/** Minimal toolbar payload; `overrides` replaces any top-level key. */
+export function toolbarPayload(overrides) {
+  return Object.assign(
+    {
+      items: [],
+      title: "Yii Debugger",
+      yiiVersion: "3.0.0",
+    },
+    overrides || {},
+  );
+}
+
+/** Forces a laid-out height on an element jsdom would report as zero. */
+export function stubBoundingHeight(element, rect) {
+  element.getBoundingClientRect = function () {
+    return Object.assign(
+      { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, x: 0, y: 0 },
+      rect,
+    );
+  };
+}
+
+/** Overrides `window.innerHeight`, which jsdom exposes as a getter. */
+export function stubViewportHeight(height) {
+  Object.defineProperty(window, "innerHeight", {
+    configurable: true,
+    value: height,
+    writable: true,
+  });
+}
+
+/**
+ * Lends the drawer frame a browsing context: jsdom creates none for an iframe
+ * living inside a shadow root, so `contentWindow` would stay `null`.
+ */
+export function stubFrameWindow(frame) {
+  var donor = document.createElement("iframe");
+
+  document.body.appendChild(donor);
+  attached.push(donor);
+  Object.defineProperty(frame, "contentWindow", {
+    configurable: true,
+    value: donor.contentWindow,
+  });
+
+  return donor.contentWindow;
+}
+
+export function shadowHtml(element) {
+  return element.shadowRoot.innerHTML;
+}
diff --git a/resources/tests/toolbar-element-lifecycle.test.js b/resources/tests/toolbar-element-lifecycle.test.js
new file mode 100644
index 0000000..4de7aa1
--- /dev/null
+++ b/resources/tests/toolbar-element-lifecycle.test.js
@@ -0,0 +1,309 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { afterEach, test, vi } from "vitest";
+
+import { toolbars } from "../src/toolbar/state.js";
+import {
+  createToolbar,
+  installLocalStorage,
+  installMatchMedia,
+  removeMatchMedia,
+  renderToolbar,
+  teardownToolbars,
+  toolbarPayload,
+} from "./toolbar-element-harness.js";
+
+var mutationObserver = window.MutationObserver;
+
+installLocalStorage({ "yii-debug-toolbar-expanded": "1" });
+
+/**
+ * Restores what a thrown assertion would leave behind: a connected toolbar, a
+ * fake clock, the deleted `MutationObserver` and the removed media query. The
+ * detached `createToolbar()` fixtures stay untouched, so the tests that drive
+ * `disconnectedCallback()` themselves keep proving what it does.
+ */
+afterEach(() => {
+  teardownToolbars();
+  vi.useRealTimers();
+  window.MutationObserver = mutationObserver;
+  installMatchMedia();
+});
+
+function payload() {
+  return toolbarPayload({
+    items: [
+      { extension: true, id: "queue", items: [{ value: "0" }], title: "Queue" },
+      {
+        id: "db",
+        items: [{ value: "3" }],
+        title: "Database",
+        url: "/debug/db",
+      },
+    ],
+  });
+}
+
+test("connecting registers the toolbar and watching the theme is idempotent", () => {
+  var media = installMatchMedia();
+  var element = renderToolbar(payload());
+  var observer = element.themeObserver;
+
+  assert.equal(
+    toolbars.indexOf(element),
+    0,
+    "Toolbar must be registered once.",
+  );
+  assert.equal(
+    element.systemThemeQuery,
+    media,
+    "System query must be retained.",
+  );
+  assert.equal(
+    media.listeners.length,
+    1,
+    "System query must be observed once.",
+  );
+
+  element.watchTheme();
+
+  assert.equal(
+    element.themeObserver,
+    observer,
+    "Observer must not be rebuilt.",
+  );
+  assert.equal(
+    media.listeners.length,
+    1,
+    "System query must not be observed twice.",
+  );
+
+  element.remove();
+
+  assert.equal(toolbars.indexOf(element), -1, "Toolbar must be unregistered.");
+  assert.equal(element.themeObserver, null, "Observer must be released.");
+  assert.equal(
+    element.systemThemeQuery,
+    null,
+    "System query must be released.",
+  );
+  assert.equal(
+    media.listeners.length,
+    0,
+    "System query listener must be removed.",
+  );
+  assert.equal(
+    element.boundThemeMessage,
+    null,
+    "Message listener must be released.",
+  );
+});
+
+test("reconnecting an already registered toolbar does not register it twice", () => {
+  vi.useFakeTimers();
+  installMatchMedia();
+
+  var element = renderToolbar(payload());
+
+  try {
+    element.connectedCallback();
+
+    assert.equal(
+      toolbars.filter(function (candidate) {
+        return candidate === element;
+      }).length,
+      1,
+      "Registry must hold a single entry.",
+    );
+  } finally {
+    element.remove();
+    vi.useRealTimers();
+  }
+});
+
+test("disconnecting a toolbar that was never connected is inert", () => {
+  installMatchMedia();
+
+  var element = createToolbar();
+
+  element.disconnectedCallback();
+
+  assert.equal(toolbars.indexOf(element), -1, "Registry must stay empty.");
+  assert.equal(element.themeObserver, null, "No observer may be released.");
+  assert.equal(element.resizing, false, "No drag may be in flight.");
+});
+
+test("the host theme control is re-evaluated after the page settles", () => {
+  vi.useFakeTimers();
+  installMatchMedia();
+
+  var element = renderToolbar(payload());
+  var refreshes = 0;
+
+  try {
+    element.refreshTheme = function () {
+      refreshes += 1;
+    };
+
+    window.dispatchEvent(new window.Event("load"));
+
+    assert.equal(refreshes, 1, "The load event must re-evaluate the host.");
+
+    vi.advanceTimersByTime(1500);
+
+    assert.equal(
+      refreshes,
+      2,
+      "The settling checkpoint must re-evaluate the host.",
+    );
+
+    assert.equal(
+      element.themeRefreshTimer !== null,
+      true,
+      "Timer must be recorded.",
+    );
+  } finally {
+    element.remove();
+    vi.useRealTimers();
+  }
+
+  assert.equal(
+    element.themeRefreshTimer,
+    null,
+    "Timer must be cleared on disconnect.",
+  );
+});
+
+test("a legacy media query is observed and released through the deprecated API", () => {
+  var media = installMatchMedia({ legacy: true });
+  var element = renderToolbar(payload());
+
+  assert.equal(media.listeners.length, 1, "Legacy listener must be attached.");
+
+  element.remove();
+
+  assert.equal(media.listeners.length, 0, "Legacy listener must be detached.");
+});
+
+test("a media query without listener support is tolerated", () => {
+  var media = installMatchMedia({ inert: true });
+  var element = renderToolbar(payload());
+
+  assert.equal(
+    element.systemThemeQuery,
+    media,
+    "System query must still be retained.",
+  );
+
+  element.remove();
+
+  assert.equal(
+    element.systemThemeQuery,
+    null,
+    "System query must still be released.",
+  );
+});
+
+test("a host without media queries or mutation observers is tolerated", () => {
+  var observer = window.MutationObserver;
+
+  removeMatchMedia();
+  delete window.MutationObserver;
+
+  var element = renderToolbar(payload());
+
+  try {
+    assert.equal(element.themeObserver, null, "No observer may be built.");
+    assert.equal(
+      element.systemThemeQuery,
+      null,
+      "No system query may be built.",
+    );
+  } finally {
+    window.MutationObserver = observer;
+    installMatchMedia();
+  }
+
+  element.remove();
+});
+
+test("a document without a body is observed on its root only", () => {
+  installMatchMedia();
+
+  var element = createToolbar();
+
+  Object.defineProperty(document, "body", { configurable: true, value: null });
+
+  try {
+    element.watchTheme();
+
+    assert.ok(element.themeObserver, "The root must still be observed.");
+  } finally {
+    delete document.body;
+  }
+
+  element.disconnectedCallback();
+
+  assert.equal(element.themeObserver, null, "Observer must be released.");
+});
+
+test("the document pointer listener follows the element lifecycle", () => {
+  installMatchMedia();
+
+  var element = renderToolbar(payload());
+
+  element.shadowRoot.querySelector(".extensions-toggle").click();
+
+  assert.equal(element.extensionsOpen, true, "Menu must be open.");
+
+  document.dispatchEvent(
+    new window.MouseEvent("pointerdown", { bubbles: true, composed: true }),
+  );
+
+  assert.equal(
+    element.extensionsOpen,
+    false,
+    "An attached listener must dismiss the menu.",
+  );
+
+  element.remove();
+  element.extensionsOpen = true;
+  document.dispatchEvent(
+    new window.MouseEvent("pointerdown", { bubbles: true, composed: true }),
+  );
+
+  assert.equal(
+    element.extensionsOpen,
+    true,
+    "A detached listener must leave the menu alone.",
+  );
+});
+
+test("disconnecting during a drag stops the resize", () => {
+  installMatchMedia();
+
+  var element = renderToolbar(payload());
+
+  element.openPanel("/debug/db");
+  element.shadowRoot
+    .querySelector(".resize-handle")
+    .dispatchEvent(
+      new window.MouseEvent("pointerdown", { bubbles: true, cancelable: true }),
+    );
+
+  assert.equal(element.resizing, true, "Drag must be in flight.");
+
+  element.remove();
+
+  assert.equal(element.resizing, false, "Drag must be abandoned.");
+
+  document.dispatchEvent(
+    new window.MouseEvent("pointermove", { clientY: 100 }),
+  );
+
+  assert.equal(
+    element.style.getPropertyValue("--yii-debug-toolbar-drawer-height"),
+    "50vh",
+    "A detached toolbar must not be resized.",
+  );
+});
diff --git a/resources/tests/toolbar-element-loading.test.js b/resources/tests/toolbar-element-loading.test.js
new file mode 100644
index 0000000..ce2a592
--- /dev/null
+++ b/resources/tests/toolbar-element-loading.test.js
@@ -0,0 +1,418 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { afterEach, test, vi } from "vitest";
+
+import {
+  connectToolbar,
+  createToolbar,
+  installLocalStorage,
+  installMatchMedia,
+  installXmlHttpRequest,
+  teardownToolbars,
+} from "./toolbar-element-harness.js";
+
+installLocalStorage({ "yii-debug-toolbar-expanded": "1" });
+installMatchMedia();
+
+var transport = installXmlHttpRequest();
+
+/** Detaches the fixtures and drops a fake clock a thrown assertion left set. */
+afterEach(() => {
+  teardownToolbars();
+  vi.useRealTimers();
+});
+
+var snapshot = JSON.stringify({
+  items: [{ id: "db", title: "Database", url: "/debug/db" }],
+  tag: "tag-1",
+  title: "Yii Debugger",
+});
+
+function mount(attributes) {
+  return connectToolbar(attributes);
+}
+
+function errorMessage(element) {
+  return element.shadowRoot.querySelector(".error-message").textContent;
+}
+
+test("a missing data URL is reported instead of fetched", () => {
+  var before = transport.requests.length;
+  var element = mount();
+
+  assert.equal(
+    errorMessage(element),
+    "Debug toolbar data URL is missing or unsafe.",
+    "Missing URL must be reported on the bar.",
+  );
+  assert.equal(transport.requests.length, before, "No request may be issued.");
+
+  element.remove();
+});
+
+test("an unsafe data URL is reported instead of fetched", () => {
+  var element = mount({ "data-url": "//evil.test/debug/toolbar" });
+
+  assert.equal(
+    errorMessage(element),
+    "Debug toolbar data URL is missing or unsafe.",
+    "Unsafe URL must be reported on the bar.",
+  );
+
+  element.remove();
+});
+
+test("a loaded snapshot is rendered and announced", () => {
+  var element = createToolbar({ "data-url": "/debug/toolbar" });
+  var attached = 0;
+
+  element.addEventListener("yii.debug.toolbar_attached", function () {
+    attached += 1;
+  });
+  document.body.appendChild(element);
+
+  var request = transport.last();
+
+  assert.equal(request.method, "GET", "Snapshot must be fetched with GET.");
+  assert.equal(
+    request.headers["X-Requested-With"],
+    "XMLHttpRequest",
+    "Request must be marked as an AJAX call.",
+  );
+  assert.equal(
+    request.headers.Accept,
+    "application/json",
+    "Request must ask for JSON.",
+  );
+
+  request.progress(3);
+
+  assert.equal(
+    element.data,
+    null,
+    "An intermediate ready state must be ignored.",
+  );
+
+  request.respond(200, snapshot);
+
+  assert.equal(element.currentTag, "tag-1", "Snapshot tag must be recorded.");
+  assert.equal(
+    element.lastLoadedTag,
+    "tag-1",
+    "Last good tag must be recorded.",
+  );
+  assert.equal(
+    element.lastLoadedUrl,
+    "/debug/toolbar",
+    "Last good URL must be recorded.",
+  );
+  assert.equal(attached, 1, "Attachment must be announced exactly once.");
+  assert.ok(
+    element.shadowRoot.querySelector('[title="Database"]'),
+    "Snapshot must be rendered.",
+  );
+
+  element.remove();
+});
+
+test("a snapshot without a tag clears the tracked tag", () => {
+  var element = mount({ "data-url": "/debug/toolbar" });
+
+  transport.last().respond(200, JSON.stringify({ items: [] }));
+
+  assert.equal(element.currentTag, null, "Tag must be cleared.");
+  assert.equal(element.lastLoadedTag, null, "Last good tag must be cleared.");
+
+  element.remove();
+});
+
+test("the attachment event falls back to the legacy constructor", () => {
+  var constructor = globalThis.Event;
+  var element = createToolbar({ "data-url": "/debug/toolbar" });
+  var attached = 0;
+
+  element.addEventListener("yii.debug.toolbar_attached", function () {
+    attached += 1;
+  });
+  document.body.appendChild(element);
+
+  try {
+    globalThis.Event = undefined;
+    transport.last().respond(200, snapshot);
+  } finally {
+    globalThis.Event = constructor;
+  }
+
+  assert.equal(attached, 1, "Legacy path must still announce the attachment.");
+
+  element.remove();
+});
+
+test("an unparsable snapshot is reported", () => {
+  var element = mount({ "data-url": "/debug/toolbar" });
+
+  transport.last().respond(200, "<html>not json</html>");
+
+  assert.equal(
+    errorMessage(element),
+    "Invalid debug toolbar data response.",
+    "A malformed body must be reported.",
+  );
+  assert.equal(element.data, null, "No payload may be kept.");
+
+  element.remove();
+});
+
+test("a structured server error surfaces its own message", () => {
+  var element = mount({ "data-url": "/debug/toolbar" });
+
+  transport
+    .last()
+    .respond(500, JSON.stringify({ error: "Storage is unreachable." }));
+
+  assert.equal(
+    errorMessage(element),
+    "Storage is unreachable.",
+    "Structured message must be shown.",
+  );
+
+  element.remove();
+});
+
+test("an opaque server error falls back to a generic message", () => {
+  var element = mount({ "data-url": "/debug/toolbar" });
+
+  transport.last().respond(503, "<html>Service unavailable</html>");
+
+  assert.equal(
+    errorMessage(element),
+    "Unable to load debug toolbar data.",
+    "An unparsable body must not be leaked.",
+  );
+
+  element.remove();
+
+  var typed = mount({ "data-url": "/debug/toolbar" });
+
+  transport.last().respond(500, JSON.stringify({ status: 500 }));
+
+  assert.equal(
+    errorMessage(typed),
+    "Unable to load debug toolbar data.",
+    "A payload without a message must not be leaked.",
+  );
+
+  typed.remove();
+});
+
+test("a snapshot that is not persisted yet is retried before it is reported", () => {
+  vi.useFakeTimers();
+
+  var issued = transport.requests.length;
+  var element = mount({ "data-url": "/debug/toolbar" });
+  var delays = [75, 150, 300, 600, 900];
+
+  try {
+    assert.equal(
+      transport.requests.length,
+      issued + 1,
+      "The first fetch must be issued on connect.",
+    );
+
+    for (var i = 0; i < delays.length; i++) {
+      transport.last().respond(404, "");
+
+      assert.equal(
+        transport.requests.length,
+        issued + 1 + i,
+        "A retry must wait for its backoff.",
+      );
+
+      vi.advanceTimersByTime(delays[i]);
+
+      assert.equal(
+        transport.requests.length,
+        issued + 2 + i,
+        "The elapsed backoff must issue a retry.",
+      );
+    }
+
+    transport.last().respond(404, "");
+
+    assert.equal(
+      errorMessage(element),
+      "Debug data is no longer available for this request.",
+      "An exhausted retry budget must be reported plainly.",
+    );
+
+    vi.advanceTimersByTime(5000);
+
+    assert.equal(
+      transport.requests.length,
+      issued + 6,
+      "No further retry may be issued.",
+    );
+  } finally {
+    vi.useRealTimers();
+    element.remove();
+  }
+});
+
+test("a retry belonging to a superseded load is dropped", () => {
+  vi.useFakeTimers();
+
+  var element = mount({ "data-url": "/debug/toolbar" });
+
+  try {
+    transport.last().respond(404, "");
+    element.load();
+
+    var current = transport.requests.length;
+
+    vi.advanceTimersByTime(75);
+
+    assert.equal(
+      transport.requests.length,
+      current,
+      "A superseded retry must not reach the network.",
+    );
+
+    transport.last().respond(200, snapshot);
+
+    assert.equal(
+      element.currentTag,
+      "tag-1",
+      "The current load must still apply.",
+    );
+  } finally {
+    vi.useRealTimers();
+    element.remove();
+  }
+});
+
+test("a response belonging to a superseded load is dropped", () => {
+  var element = mount({ "data-url": "/debug/toolbar" });
+  var stale = transport.last();
+
+  element.load();
+  stale.respond(200, snapshot);
+
+  assert.equal(element.data, null, "A stale response must not be applied.");
+
+  transport.last().respond(200, snapshot);
+
+  assert.equal(
+    element.currentTag,
+    "tag-1",
+    "The current response must be applied.",
+  );
+
+  element.remove();
+});
+
+test("following a new tag reloads the toolbar for that request", () => {
+  var element = mount({ "data-url": "/debug/toolbar?tag=tag-1" });
+
+  transport.last().respond(200, snapshot);
+  element.followTag("tag-2");
+
+  assert.equal(
+    transport.last().url,
+    "http://localhost:3000/debug/toolbar?tag=tag-2",
+    "Follow-up request must carry the new tag.",
+  );
+
+  transport.last().respond(200, JSON.stringify({ items: [], tag: "tag-2" }));
+
+  assert.equal(element.currentTag, "tag-2", "Tracked tag must move on.");
+
+  element.remove();
+});
+
+test("following the tag already on screen is a no-op", () => {
+  var element = mount({ "data-url": "/debug/toolbar?tag=tag-1" });
+
+  transport.last().respond(200, snapshot);
+
+  var issued = transport.requests.length;
+
+  element.followTag("tag-1");
+  element.followTag(null);
+
+  assert.equal(transport.requests.length, issued, "No request may be issued.");
+
+  element.currentTag = null;
+  element.followTag("tag-1");
+
+  assert.equal(
+    transport.requests.length,
+    issued,
+    "A tag that resolves to the same URL must be skipped.",
+  );
+
+  element.remove();
+});
+
+test("following a tag without a data URL is a no-op", () => {
+  var element = mount();
+  var issued = transport.requests.length;
+
+  element.followTag("tag-2");
+
+  assert.equal(transport.requests.length, issued, "No request may be issued.");
+  assert.equal(element.currentTag, null, "No tag may be tracked.");
+
+  element.remove();
+});
+
+test("a rejected tag rolls back to the last good snapshot", () => {
+  var element = mount({ "data-url": "/debug/toolbar?tag=tag-1" });
+
+  transport.last().respond(200, snapshot);
+  element.followTag("tag-2");
+  transport.last().respond(500, "");
+
+  assert.equal(element.currentTag, "tag-1", "Tracked tag must roll back.");
+  assert.equal(
+    element.getAttribute("data-url"),
+    "/debug/toolbar?tag=tag-1",
+    "Data URL must roll back.",
+  );
+  assert.ok(
+    element.shadowRoot.querySelector('[title="Database"]'),
+    "Last good snapshot must stay on screen.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelector(".error-message"),
+    null,
+    "A recoverable failure must not paint an error.",
+  );
+
+  element.remove();
+});
+
+test("a rejected tag without a snapshot reloads the previous data URL", () => {
+  var element = createToolbar({ "data-url": "/debug/toolbar?tag=tag-1" });
+
+  element.followTag("tag-2");
+
+  assert.equal(
+    transport.last().url,
+    "http://localhost:3000/debug/toolbar?tag=tag-2",
+    "Follow-up request must carry the new tag.",
+  );
+
+  transport.last().respond(500, "");
+
+  assert.equal(element.currentTag, null, "Tracked tag must be forgotten.");
+  assert.equal(
+    element.getAttribute("data-url"),
+    "/debug/toolbar?tag=tag-1",
+    "Data URL must roll back.",
+  );
+  assert.equal(
+    transport.last().url,
+    "/debug/toolbar?tag=tag-1",
+    "Rollback must refetch the previous snapshot.",
+  );
+});
diff --git a/resources/tests/toolbar-element-render.test.js b/resources/tests/toolbar-element-render.test.js
new file mode 100644
index 0000000..7348b3e
--- /dev/null
+++ b/resources/tests/toolbar-element-render.test.js
@@ -0,0 +1,677 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { afterEach, test } from "vitest";
+
+import {
+  createToolbar,
+  installLocalStorage,
+  installMatchMedia,
+  renderToolbar,
+  teardownToolbars,
+  toolbarPayload,
+} from "./toolbar-element-harness.js";
+
+var storage = installLocalStorage();
+
+installMatchMedia();
+
+/** Detaches the fixtures a thrown assertion would leave connected. */
+afterEach(teardownToolbars);
+
+function expanded() {
+  storage.set("yii-debug-toolbar-expanded", "1");
+}
+
+function collapsed() {
+  storage.set("yii-debug-toolbar-expanded", "0");
+}
+
+function fullPayload(overrides) {
+  return toolbarPayload(
+    Object.assign(
+      {
+        configUrl: "/debug/config",
+        iconBaseUrl: "/assets/icons/",
+        items: [
+          null,
+          {
+            icon: "profiling",
+            id: "profiling",
+            items: [
+              {
+                id: "total",
+                label: "Total",
+                status: "success",
+                value: "12 ms",
+              },
+            ],
+            title: "Profiling",
+            url: "/debug/profiling",
+          },
+          {
+            icon: "request",
+            id: "request",
+            items: [
+              {
+                id: "status",
+                status: "success",
+                title: "Status code",
+                url: "/debug/request",
+                value: 200,
+              },
+            ],
+            title: "Request",
+          },
+          {
+            icon: "db",
+            id: "db",
+            items: [{ icon: "clock", value: "3" }],
+            title: "Database",
+            url: "/debug/db",
+          },
+        ],
+        logo: "/debug/logo.svg",
+        phpInfoUrl: "/debug/phpinfo",
+        phpVersion: "8.1.30",
+      },
+      overrides || {},
+    ),
+  );
+}
+
+test("render stays a no-op until a payload arrives", () => {
+  var element = createToolbar();
+
+  element.render();
+
+  assert.equal(
+    element.shadowRoot.querySelector(".bar"),
+    null,
+    "No skeleton may be built without data.",
+  );
+  assert.equal(
+    element.getPosition(),
+    "bottom",
+    "Missing payload and attribute must fall back to the bottom dock.",
+  );
+});
+
+test("a toolbar rendered before it is connected detects its own theme", () => {
+  expanded();
+
+  var element = createToolbar();
+
+  element.data = fullPayload();
+  element.render();
+
+  assert.equal(element.theme, null, "No theme may be pinned yet.");
+  assert.equal(
+    element.shadowRoot.querySelector(".brand-link-yii").getAttribute("href"),
+    "http://localhost:3000/debug/config?yii_debug_theme=light",
+    "Links must be stamped with the detected theme.",
+  );
+});
+
+test("a collapsed toolbar renders only the branded opener", () => {
+  collapsed();
+
+  var element = renderToolbar(fullPayload());
+  var opener = element.shadowRoot.querySelector(".brand-opener");
+
+  assert.equal(
+    element.shadowRoot.querySelector(".toolbar").className,
+    "toolbar position-bottom",
+    "Collapsed bar must carry neither the expanded nor the drawer modifier.",
+  );
+  assert.equal(
+    opener.querySelector(".brand-text").textContent,
+    "Yii Debugger",
+    "Opener must show the payload title.",
+  );
+  assert.equal(
+    opener.querySelector("img").getAttribute("src"),
+    "/debug/logo.svg",
+    "Opener must show the payload logo.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelector(".panels"),
+    null,
+    "Collapsed bar must not render the inline strip.",
+  );
+
+  element.remove();
+});
+
+test("the collapsed opener falls back to the default product name", () => {
+  collapsed();
+
+  var element = renderToolbar(fullPayload({ title: undefined }));
+
+  assert.equal(
+    element.shadowRoot.querySelector(".brand-text").textContent,
+    "Yii Debugger",
+    "Missing title must fall back to the default.",
+  );
+
+  element.remove();
+});
+
+test("an expanded toolbar renders brand, profiling chip, AJAX panel, strip and controls", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload());
+  var root = element.shadowRoot;
+  var order = Array.prototype.map.call(
+    root.querySelector(".bar").children,
+    function (node) {
+      return node.className.split(" ")[0];
+    },
+  );
+
+  assert.deepEqual(
+    order,
+    ["brand", "panel", "panel", "panels", "controls"],
+    "Bar order: brand, profiling chip, AJAX panel, strip, controls.",
+  );
+  assert.equal(
+    root.querySelector(".toolbar").className,
+    "toolbar position-bottom expanded",
+    "Expanded bar must carry the expanded modifier only.",
+  );
+  assert.equal(
+    root.querySelectorAll(".panels > .panel").length,
+    2,
+    "Profiling must be pulled out of the inline strip.",
+  );
+  assert.equal(
+    root.querySelector(".ajax-panel .panel-title").textContent,
+    "AJAX",
+    "AJAX chip must sit outside the strip.",
+  );
+
+  element.remove();
+});
+
+test("a payload without panels still renders the surrounding chrome", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload({ items: undefined }));
+
+  assert.equal(
+    element.shadowRoot.querySelectorAll(".panels > .panel").length,
+    0,
+    "Strip must be empty.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelectorAll(".bar > .panel").length,
+    1,
+    "Only the AJAX chip may remain.",
+  );
+
+  element.remove();
+});
+
+test("the docking position comes from the attribute before the payload", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload({ position: "top" }));
+
+  assert.equal(
+    element.getAttribute("data-position"),
+    "top",
+    "Payload position must be mirrored onto the host.",
+  );
+  assert.ok(
+    element.shadowRoot
+      .querySelector(".toolbar")
+      .classList.contains("position-top"),
+    "Top dock must be reflected in the class list.",
+  );
+
+  element.remove();
+
+  var pinned = renderToolbar(fullPayload({ position: "top" }), {
+    "data-position": "bottom",
+  });
+
+  assert.ok(
+    pinned.shadowRoot
+      .querySelector(".toolbar")
+      .classList.contains("position-bottom"),
+    "Attribute must win over the payload.",
+  );
+
+  pinned.remove();
+});
+
+test("the logo falls back to the payload fallback and then to the brand mark", () => {
+  collapsed();
+
+  var fallback = renderToolbar(
+    fullPayload({ logo: undefined, logoFallback: "/debug/fallback.svg" }),
+  );
+
+  assert.equal(
+    fallback.shadowRoot.querySelector("img").getAttribute("src"),
+    "/debug/fallback.svg",
+    "Fallback source must be used.",
+  );
+
+  fallback.remove();
+
+  var mark = renderToolbar(fullPayload({ logo: undefined }));
+
+  assert.equal(
+    mark.shadowRoot.querySelector(".brand-mark").textContent,
+    "Y",
+    "Without any source the lettermark must be drawn.",
+  );
+
+  mark.remove();
+});
+
+test("the brand links to the configuration page and to phpinfo", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload());
+  var yii = element.shadowRoot.querySelector(".brand-link-yii");
+  var php = element.shadowRoot.querySelector(".brand-link-php");
+
+  assert.equal(
+    yii.getAttribute("data-debug-url"),
+    "http://localhost:3000/debug/config?yii_debug_theme=light",
+    "Configuration link must carry the stamped theme.",
+  );
+  assert.equal(
+    php.getAttribute("href"),
+    "http://localhost:3000/debug/phpinfo?yii_debug_theme=light",
+    "phpinfo link must carry the stamped theme.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelectorAll(".brand-divider").length,
+    1,
+    "Divider must separate the two brand links.",
+  );
+
+  element.remove();
+});
+
+test("the brand falls back to the index URL and drops the PHP half", () => {
+  expanded();
+
+  var element = renderToolbar(
+    fullPayload({
+      configUrl: undefined,
+      indexUrl: "/debug",
+      phpVersion: undefined,
+    }),
+  );
+
+  assert.equal(
+    element.shadowRoot.querySelector(".brand-link-yii").getAttribute("href"),
+    "http://localhost:3000/debug?yii_debug_theme=light",
+    "Index URL must back the configuration link.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelector(".brand-link-php"),
+    null,
+    "Without a PHP version the PHP half must be absent.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelector(".brand-divider"),
+    null,
+    "Divider must be absent with a single brand link.",
+  );
+
+  element.remove();
+});
+
+test("the brand renders statically when no destination is available", () => {
+  expanded();
+
+  var element = renderToolbar(
+    fullPayload({ configUrl: undefined, phpInfoUrl: undefined }),
+  );
+
+  assert.equal(
+    element.shadowRoot.querySelectorAll(".brand-static").length,
+    2,
+    "Both brand halves must be static.",
+  );
+
+  element.remove();
+});
+
+test("a panel is a link only while no metric carries its own URL", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload());
+  var root = element.shadowRoot;
+
+  assert.equal(
+    root.querySelector('[title="Database"]').tagName,
+    "A",
+    "A panel whose metrics are inert must be the link itself.",
+  );
+  assert.equal(
+    root.querySelector('[title="Request"]').tagName,
+    "DIV",
+    "A panel with linked metrics must stay a group.",
+  );
+  assert.equal(
+    root.querySelector('[title="Request"]').getAttribute("role"),
+    "group",
+    "The group must expose its role.",
+  );
+
+  element.remove();
+});
+
+test("a linked panel with linked metrics wraps its label in an inner link", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload());
+
+  element.data.items = [
+    {
+      icon: "logs",
+      id: "logs",
+      items: [
+        {
+          label: "Errors",
+          status: "danger",
+          url: "/debug/logs?level=error",
+          value: "2",
+        },
+      ],
+      title: "Logs",
+      url: "/debug/logs",
+    },
+  ];
+  element.render();
+
+  var panel = element.shadowRoot.querySelector('[title="Logs"]');
+
+  assert.equal(panel.tagName, "DIV", "Panel must stay a group.");
+  assert.equal(
+    panel.querySelector(".panel-link").getAttribute("data-debug-url"),
+    "/debug/logs",
+    "Label must become its own drawer trigger.",
+  );
+  assert.equal(
+    panel.querySelector(".panel-link").getAttribute("href"),
+    "http://localhost:3000/debug/logs?yii_debug_theme=light",
+    "Navigable link must carry the stamped theme.",
+  );
+  assert.equal(
+    panel.querySelector(".panel-link").getAttribute("aria-label"),
+    "Logs",
+    "Inner link must be labelled with the panel title.",
+  );
+
+  element.remove();
+});
+
+test("panel titles fall back to the identifier and then to a generic label", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload());
+
+  assert.match(
+    element.renderPanel({ id: "queue" }),
+    /class="panel" title="queue"/,
+    "A non-string title must fall back to the identifier.",
+  );
+  assert.match(
+    element.renderPanel({}),
+    /class="panel" title="Panel"/,
+    "Without title and identifier a generic label must be used.",
+  );
+  assert.match(
+    element.renderPanel({ id: "queue", title: "" }),
+    /aria-label="queue"/,
+    "An empty title must still label the group with the identifier.",
+  );
+  assert.match(
+    element.renderPanel({ title: "" }),
+    /aria-label="Panel"/,
+    "An empty title without identifier must use the generic label.",
+  );
+  assert.equal(
+    element.renderPanel({ title: "" }).indexOf("panel-title"),
+    -1,
+    "An empty title must not render a caption.",
+  );
+
+  element.remove();
+});
+
+test("metrics render an icon, a label, or neither", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload());
+  var root = element.shadowRoot;
+
+  assert.ok(
+    root.querySelector('[title="Database"] .metric-icon'),
+    "An icon metric must render its glyph.",
+  );
+  assert.equal(
+    root.querySelector('[title="Profiling"] .metric-label').textContent,
+    "Total",
+    "A labelled metric must render its caption.",
+  );
+  assert.equal(
+    root.querySelector('[title="Database"] .metric-value').className,
+    "metric-value badge-default",
+    "A metric without status must fall back to the default badge.",
+  );
+  assert.match(
+    element.renderPanel({ id: "queue", items: [{ value: "0" }] }),
+    /<span class="metric"><span class="metric-value badge-default">0<\/span><\/span>/,
+    "A metric with neither icon nor label must render only its value.",
+  );
+
+  element.remove();
+});
+
+test("a metric pointing at the open panel is marked active", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload());
+
+  element.activeUrl = "/debug/request";
+  element.render();
+
+  var root = element.shadowRoot;
+
+  assert.ok(
+    root.querySelector('[title="Request"]').classList.contains("panel-active"),
+    "Owning panel must be marked active.",
+  );
+  assert.ok(
+    root
+      .querySelector('[data-item-id="status"]')
+      .classList.contains("metric-active"),
+    "Matching metric must be marked active.",
+  );
+  assert.equal(
+    root.querySelector('[title="Database"]').classList.contains("panel-active"),
+    false,
+    "Unrelated panels must stay inactive.",
+  );
+
+  element.remove();
+});
+
+test("a panel whose own URL is open is marked active", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload());
+
+  element.activeUrl = "/debug/db";
+  element.render();
+
+  assert.ok(
+    element.shadowRoot
+      .querySelector('[title="Database"]')
+      .classList.contains("panel-active"),
+    "Panel URL must be compared against the open URL.",
+  );
+  assert.equal(
+    element.isPanelActive({ id: "db", url: "/debug/db" }),
+    true,
+    "A panel without metrics must still match on its own URL.",
+  );
+
+  element.remove();
+});
+
+test("icons resolve from the built-in set, then the payload base URL, then nothing", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload());
+
+  assert.match(
+    element.iconHtml("db", "panel-icon"),
+    /mask-image:url\(data:image\/svg\+xml/,
+    "Built-in glyphs must be inlined.",
+  );
+  assert.match(
+    element.iconHtml("inertia-custom", "panel-icon"),
+    /mask-image:url\(\/assets\/icons\/inertia-custom\.svg\)/,
+    "Unknown glyphs must resolve against the payload base URL.",
+  );
+  assert.equal(
+    element.iconHtml("", "panel-icon"),
+    "",
+    "No name means no glyph.",
+  );
+
+  element.data.iconBaseUrl = undefined;
+
+  assert.equal(
+    element.iconHtml("inertia-custom", "panel-icon"),
+    "",
+    "Without a base URL an unknown glyph must be dropped.",
+  );
+
+  element.data = null;
+
+  assert.equal(
+    element.iconHtml("db", "panel-icon"),
+    "",
+    "Without a payload no glyph may be drawn.",
+  );
+
+  element.remove();
+});
+
+test("controls expose the theme toggle, the external link and the collapse button", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload());
+  var controls = element.shadowRoot.querySelector(".controls");
+
+  assert.equal(
+    controls.querySelector(".toggle-theme").getAttribute("aria-label"),
+    "Switch to dark theme",
+    "Toggle must announce the theme it switches to.",
+  );
+  assert.equal(
+    controls.querySelector(".control.disabled").getAttribute("aria-label"),
+    "Open a panel first",
+    "Without an open panel the external link must be disabled.",
+  );
+  assert.equal(
+    controls.querySelector(".close-drawer"),
+    null,
+    "Without an open drawer the close button must be absent.",
+  );
+  assert.equal(
+    controls.querySelector(".toggle-toolbar").getAttribute("title"),
+    "Collapse toolbar",
+    "Expanded bar must offer to collapse.",
+  );
+
+  element.activeUrl = "/debug/db";
+  element.render();
+
+  assert.equal(
+    element.shadowRoot
+      .querySelector(".controls a.control")
+      .getAttribute("target"),
+    "_blank",
+    "External link must open in a new tab.",
+  );
+
+  element.expanded = false;
+
+  assert.match(
+    element.renderControls(),
+    /title="Expand toolbar"/,
+    "A collapsed state must offer to expand.",
+  );
+
+  element.remove();
+});
+
+test("an error replaces the bar and clears the drawer", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload());
+
+  element.drawerRoot.innerHTML = "<span>stale</span>";
+  element.renderError("Debug data is <gone>.");
+
+  assert.equal(
+    element.shadowRoot.querySelector(".toolbar").className,
+    "toolbar expanded",
+    "Error state must drop the position modifier.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelector(".error-message").textContent,
+    "Debug data is <gone>.",
+    "Message must be escaped, not interpreted.",
+  );
+  assert.equal(element.drawerRoot.innerHTML, "", "Drawer must be emptied.");
+  assert.equal(
+    element.drawerPosition,
+    null,
+    "Drawer position must be forgotten.",
+  );
+
+  element.remove();
+});
+
+test("the shadow skeleton and its stylesheet are built once", () => {
+  expanded();
+
+  var element = renderToolbar(fullPayload());
+  var root = element.toolbarRoot;
+
+  element.ensureShadowSkeleton();
+
+  assert.equal(element.toolbarRoot, root, "Skeleton must be reused.");
+  assert.equal(
+    element.shadowRoot.querySelectorAll("style").length,
+    1,
+    "Only one stylesheet may be injected.",
+  );
+  assert.equal(
+    element.contentRoot,
+    root,
+    "Legacy alias must point at the skeleton.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelector("style").textContent,
+    element.getStyles(),
+    "Injected stylesheet must be the shadow stylesheet.",
+  );
+  assert.ok(
+    element.getStyles().indexOf("yii-debug-toolbar") !== -1,
+    "Shadow stylesheet must be the authored one.",
+  );
+
+  element.remove();
+});
diff --git a/resources/tests/toolbar-element-theme.test.js b/resources/tests/toolbar-element-theme.test.js
new file mode 100644
index 0000000..3d5ff32
--- /dev/null
+++ b/resources/tests/toolbar-element-theme.test.js
@@ -0,0 +1,586 @@
+// @vitest-environment jsdom
+import assert from "node:assert/strict";
+import { afterEach, test } from "vitest";
+
+import { resetHostThemeControlCache } from "../src/toolbar/theme.js";
+import {
+  installLocalStorage,
+  installMatchMedia,
+  removeMatchMedia,
+  renderToolbar,
+  stubFrameWindow,
+  teardownToolbars,
+  toolbarPayload,
+} from "./toolbar-element-harness.js";
+
+var storage = installLocalStorage();
+var media = installMatchMedia();
+var hostControls = [];
+
+/**
+ * Restores what a thrown assertion would leave behind: a connected toolbar, a
+ * host switcher, the removed media query and every document marker `reset()`
+ * clears.
+ */
+afterEach(() => {
+  teardownToolbars();
+
+  for (var i = hostControls.length - 1; i >= 0; i--) {
+    hostControls[i].remove();
+  }
+
+  hostControls.length = 0;
+  media = installMatchMedia();
+
+  reset();
+});
+
+function reset() {
+  var html = document.documentElement;
+
+  storage.clear();
+  storage.set("yii-debug-toolbar-expanded", "1");
+  html.className = "";
+  html.removeAttribute("data-bs-theme");
+  html.removeAttribute("data-theme");
+  html.removeAttribute("data-yii-debug-theme");
+  html.style.removeProperty("color-scheme");
+  document.body.className = "";
+  document.body.removeAttribute("data-theme");
+  media.matches = false;
+  resetHostThemeControlCache();
+}
+
+function payload() {
+  return toolbarPayload({
+    items: [
+      {
+        id: "db",
+        items: [{ value: "3" }],
+        title: "Database",
+        url: "/debug/db",
+      },
+    ],
+  });
+}
+
+/** Adds a host theme switcher jsdom would otherwise report as invisible. */
+function installHostThemeControl() {
+  var control = document.createElement("button");
+
+  control.clicks = 0;
+  control.setAttribute("aria-label", "Toggle theme");
+  control.getClientRects = function () {
+    return [{ height: 20, width: 20 }];
+  };
+  control.addEventListener("click", function () {
+    control.clicks += 1;
+  });
+  document.body.appendChild(control);
+  hostControls.push(control);
+  resetHostThemeControlCache();
+
+  return control;
+}
+
+test("a theme marked on the document outvotes stale storage", () => {
+  reset();
+  storage.set("yii-debug-toolbar-theme", "dark");
+  document.documentElement.className = "light";
+
+  var element = renderToolbar(payload());
+
+  assert.equal(element.theme, "light", "Rendered document state must win.");
+
+  document.documentElement.className = "";
+  document.body.setAttribute("data-theme", "dark");
+
+  assert.equal(
+    element.detectTheme(),
+    "dark",
+    "The body marker must be honoured.",
+  );
+
+  element.remove();
+  reset();
+});
+
+test("a host-owned theme reads the rendered color scheme", () => {
+  reset();
+  storage.set("yii-debug-toolbar-theme", "dark");
+
+  var control = installHostThemeControl();
+  var element = renderToolbar(payload());
+
+  assert.equal(
+    element.ownsTheme,
+    false,
+    "A visible switcher must claim the theme.",
+  );
+  assert.equal(
+    element.theme,
+    "light",
+    "An unmarked document is the host's light state.",
+  );
+
+  document.documentElement.style.colorScheme = "dark";
+  resetHostThemeControlCache();
+
+  assert.equal(
+    element.detectTheme(),
+    "dark",
+    "A declared color scheme must be honoured.",
+  );
+
+  control.remove();
+  element.remove();
+  reset();
+});
+
+test("an owned theme prefers the pinned attribute, then its own key, then host keys", () => {
+  reset();
+
+  var element = renderToolbar(payload(), { "data-yii-debug-theme": "dark" });
+
+  assert.equal(element.theme, "dark", "The pinned attribute must win.");
+
+  element.removeAttribute("data-yii-debug-theme");
+  storage.set("yii-debug-toolbar-theme", "dark");
+
+  assert.equal(
+    element.detectTheme(),
+    "dark",
+    "The toolbar key must be honoured.",
+  );
+
+  storage.delete("yii-debug-toolbar-theme");
+  storage.set("vite-ui-theme", "dark");
+
+  assert.equal(element.detectTheme(), "dark", "A host key must be honoured.");
+
+  element.remove();
+  reset();
+});
+
+test("an owned theme falls back to the system preference and then to light", () => {
+  reset();
+  media.matches = true;
+
+  var element = renderToolbar(payload());
+
+  assert.equal(
+    element.theme,
+    "dark",
+    "A dark system preference must be adopted.",
+  );
+
+  media.matches = false;
+  storage.delete("yii-debug-toolbar-theme");
+  removeMatchMedia();
+
+  assert.equal(
+    element.detectTheme(),
+    "light",
+    "Without a media query light is the default.",
+  );
+
+  installMatchMedia();
+  element.remove();
+  reset();
+});
+
+test("toggling pins the theme, persists it and fans it out to the host", () => {
+  reset();
+
+  var element = renderToolbar(payload());
+  var html = document.documentElement;
+
+  element.shadowRoot.querySelector(".toggle-theme").click();
+
+  assert.equal(
+    element.getAttribute("data-theme"),
+    "dark",
+    "Host attribute must be flipped.",
+  );
+  assert.equal(
+    element.getAttribute("data-yii-debug-theme"),
+    "dark",
+    "Explicit choice must be pinned.",
+  );
+  assert.equal(
+    storage.get("yii-debug-toolbar-theme"),
+    "dark",
+    "Choice must be persisted.",
+  );
+  assert.ok(
+    document.cookie.indexOf("yii-debug-toolbar-theme=dark") !== -1,
+    "Cookie must carry the choice to the backend.",
+  );
+  assert.equal(
+    html.classList.contains("dark"),
+    true,
+    "Tailwind class must be added.",
+  );
+  assert.equal(
+    html.classList.contains("light"),
+    false,
+    "Opposite class must be removed.",
+  );
+  assert.equal(
+    html.getAttribute("data-bs-theme"),
+    "dark",
+    "Bootstrap marker must be set.",
+  );
+  assert.equal(
+    html.style.colorScheme,
+    "dark",
+    "Color scheme must be declared.",
+  );
+  assert.equal(
+    storage.get("vueuse-color-scheme"),
+    "dark",
+    "Host keys must be written.",
+  );
+  assert.equal(
+    element.shadowRoot.activeElement,
+    element.shadowRoot.querySelector(".toggle-theme"),
+    "Focus must stay on the toggle.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelector(".toggle-theme").getAttribute("title"),
+    "Switch to light theme",
+    "Toggle must now offer the opposite theme.",
+  );
+
+  element.shadowRoot.querySelector(".toggle-theme").click();
+
+  assert.equal(element.theme, "light", "A second toggle must return to light.");
+  assert.equal(
+    html.classList.contains("light"),
+    true,
+    "Tailwind class must flip back.",
+  );
+  assert.equal(
+    html.classList.contains("dark"),
+    false,
+    "Dark class must be removed.",
+  );
+
+  element.remove();
+  reset();
+});
+
+test("a host switcher receives the toggle instead of the document", () => {
+  reset();
+
+  var control = installHostThemeControl();
+  var element = renderToolbar(payload());
+
+  element.shadowRoot.querySelector(".toggle-theme").click();
+
+  assert.equal(control.clicks, 1, "The host control must be driven.");
+  assert.equal(
+    element.getAttribute("data-yii-debug-theme"),
+    null,
+    "No choice may be pinned on the toolbar.",
+  );
+  assert.equal(
+    document.documentElement.getAttribute("data-bs-theme"),
+    null,
+    "The document must be left to the host.",
+  );
+
+  element.theme = "light";
+  document.documentElement.setAttribute("data-theme", "dark");
+  element.toggleTheme();
+
+  assert.equal(
+    control.clicks,
+    1,
+    "A host already showing the target must not be clicked.",
+  );
+
+  control.remove();
+  element.remove();
+  reset();
+});
+
+test("a host without a usable document element still absorbs the propagation", () => {
+  reset();
+
+  var element = renderToolbar(payload());
+  var descriptor = Object.getOwnPropertyDescriptor(
+    Document.prototype,
+    "documentElement",
+  );
+
+  try {
+    Object.defineProperty(document, "documentElement", {
+      configurable: true,
+      value: null,
+    });
+    element.propagateThemeToHost("dark");
+
+    assert.equal(
+      storage.get("theme"),
+      "dark",
+      "Storage keys must still be written.",
+    );
+
+    Object.defineProperty(document, "documentElement", {
+      configurable: true,
+      value: { setAttribute() {}, style: {} },
+    });
+    element.propagateThemeToHost("light");
+
+    assert.equal(
+      storage.get("theme"),
+      "light",
+      "Storage keys must still be written.",
+    );
+  } finally {
+    delete document.documentElement;
+    Object.defineProperty(Document.prototype, "documentElement", descriptor);
+  }
+
+  assert.ok(document.documentElement, "The document element must be restored.");
+
+  element.remove();
+  reset();
+});
+
+test("an unchanged theme is neither rewritten nor re-rendered", () => {
+  reset();
+
+  var element = renderToolbar(payload());
+  var bar = element.shadowRoot.querySelector(".panels");
+
+  storage.delete("yii-debug-toolbar-theme");
+  element.refreshTheme();
+
+  assert.equal(
+    storage.get("yii-debug-toolbar-theme"),
+    undefined,
+    "An unchanged theme must not be persisted again.",
+  );
+  assert.equal(
+    element.shadowRoot.querySelector(".panels"),
+    bar,
+    "An unchanged theme must not redraw the bar.",
+  );
+
+  element.remove();
+  reset();
+});
+
+test("a theme change on the host redraws the bar", async () => {
+  reset();
+
+  var element = renderToolbar(payload());
+  var bar = element.shadowRoot.querySelector(".panels");
+
+  document.documentElement.setAttribute("data-theme", "dark");
+
+  await new Promise(function (resolve) {
+    setTimeout(resolve, 0);
+  });
+
+  assert.equal(element.theme, "dark", "The observer must follow the host.");
+  assert.notEqual(
+    element.shadowRoot.querySelector(".panels"),
+    bar,
+    "The bar must be redrawn for the new theme.",
+  );
+
+  element.remove();
+  reset();
+});
+
+test("the panel frame flips the theme through postMessage", () => {
+  reset();
+
+  var element = renderToolbar(payload());
+
+  element.openPanel("/debug/db");
+
+  var frameWindow = stubFrameWindow(
+    element.shadowRoot.querySelector(".drawer iframe"),
+  );
+
+  window.dispatchEvent(
+    new window.MessageEvent("message", {
+      data: { source: "yii-debug-toolbar", theme: "dark", type: "theme" },
+      origin: window.location.origin,
+      source: frameWindow,
+    }),
+  );
+
+  assert.equal(element.theme, "dark", "The flip must be applied on the host.");
+  assert.equal(
+    element.getAttribute("data-yii-debug-theme"),
+    "dark",
+    "The flip must be pinned.",
+  );
+  assert.equal(
+    document.documentElement.getAttribute("data-bs-theme"),
+    "dark",
+    "The flip must reach the surrounding page.",
+  );
+
+  element.remove();
+  reset();
+});
+
+test("the panel frame closes the drawer through postMessage", () => {
+  reset();
+
+  var element = renderToolbar(payload());
+
+  element.openPanel("/debug/db");
+
+  var frameWindow = stubFrameWindow(
+    element.shadowRoot.querySelector(".drawer iframe"),
+  );
+
+  window.dispatchEvent(
+    new window.MessageEvent("message", {
+      data: { source: "yii-debug-toolbar", type: "close-drawer" },
+      origin: window.location.origin,
+      source: frameWindow,
+    }),
+  );
+
+  assert.equal(element.drawerOpen, false, "The drawer must close.");
+
+  element.remove();
+  reset();
+});
+
+test("foreign, unknown and redundant messages are ignored", () => {
+  reset();
+
+  var element = renderToolbar(payload());
+
+  window.dispatchEvent(
+    new window.MessageEvent("message", {
+      data: { source: "yii-debug-toolbar", theme: "dark", type: "theme" },
+      origin: window.location.origin,
+    }),
+  );
+
+  assert.equal(
+    element.theme,
+    "light",
+    "A message without the panel frame must be ignored.",
+  );
+
+  element.openPanel("/debug/db");
+
+  var frameWindow = stubFrameWindow(
+    element.shadowRoot.querySelector(".drawer iframe"),
+  );
+
+  function post(data, origin) {
+    window.dispatchEvent(
+      new window.MessageEvent("message", {
+        data: data,
+        origin: origin || window.location.origin,
+        source: frameWindow,
+      }),
+    );
+  }
+
+  post(
+    { source: "yii-debug-toolbar", theme: "dark", type: "theme" },
+    "https://evil.test",
+  );
+
+  assert.equal(
+    element.theme,
+    "light",
+    "A cross-origin message must be ignored.",
+  );
+
+  post({ source: "other-widget", theme: "dark", type: "theme" });
+
+  assert.equal(element.theme, "light", "A foreign sender must be ignored.");
+
+  post({ source: "yii-debug-toolbar", theme: "chartreuse", type: "theme" });
+
+  assert.equal(element.theme, "light", "An unknown theme must be ignored.");
+
+  post({ source: "yii-debug-toolbar", theme: "light", type: "theme" });
+
+  assert.equal(
+    element.theme,
+    "light",
+    "The theme already shown must be ignored.",
+  );
+
+  element.remove();
+  reset();
+});
+
+test("a theme message reaches the host switcher when one exists", () => {
+  reset();
+
+  var element = renderToolbar(payload());
+
+  element.openPanel("/debug/db");
+
+  var control = installHostThemeControl();
+  var frameWindow = stubFrameWindow(
+    element.shadowRoot.querySelector(".drawer iframe"),
+  );
+
+  window.dispatchEvent(
+    new window.MessageEvent("message", {
+      data: { source: "yii-debug-toolbar", theme: "dark", type: "theme" },
+      origin: window.location.origin,
+      source: frameWindow,
+    }),
+  );
+
+  assert.equal(control.clicks, 1, "The host control must be driven.");
+  assert.equal(
+    element.getAttribute("data-yii-debug-theme"),
+    null,
+    "No choice may be pinned on the toolbar.",
+  );
+
+  control.remove();
+  element.remove();
+  reset();
+});
+
+test("a theme message before the first snapshot only records the theme", () => {
+  reset();
+
+  var element = renderToolbar(payload());
+
+  element.openPanel("/debug/db");
+
+  var frameWindow = stubFrameWindow(
+    element.shadowRoot.querySelector(".drawer iframe"),
+  );
+  var bar = element.shadowRoot.querySelector(".panels");
+
+  element.data = null;
+  window.dispatchEvent(
+    new window.MessageEvent("message", {
+      data: { source: "yii-debug-toolbar", theme: "dark", type: "theme" },
+      origin: window.location.origin,
+      source: frameWindow,
+    }),
+  );
+
+  assert.equal(element.theme, "dark", "The theme must still be recorded.");
+  assert.equal(
+    element.shadowRoot.querySelector(".panels"),
+    bar,
+    "Without a payload the bar must not be redrawn.",
+  );
+
+  element.remove();
+  reset();
+});
diff --git a/vitest.config.js b/vitest.config.js
index 8837a37..bd0f473 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -5,11 +5,11 @@ export default defineConfig({
     coverage: {
       provider: "v8",
       include: ["resources/src/**/*.js"],
-      exclude: [
-        "resources/src/core/debug.js",
-        "resources/src/toolbar/element.js",
-        "resources/src/toolbar/index.js",
-      ],
+      /**
+       * Nothing is hidden from the report: every file matched by `include` is
+       * measured, bootstraps included.
+       */
+      exclude: [],
       reporter: ["text"],
       reportsDirectory: "runtime/coverage-js",
       thresholds: {
@@ -18,6 +18,11 @@ export default defineConfig({
         lines: 100,
       },
     },
+    /**
+     * `element.js` imports its shadow styles with `?inline`; without CSS
+     * processing Vitest would hand it an empty string.
+     */
+    css: true,
     environment: "node",
     include: ["resources/tests/**/*.test.js"],
     isolate: true,