diff --git a/package-lock.json b/package-lock.json
index c4bcc068..e00e64f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -65,7 +65,9 @@
         "@types/jest": "^29.5.12",
         "@types/node": "^20.14.12",
         "@typescript-eslint/parser": "^7.18.0",
+        "@vitejs/plugin-vue": "^6.0.8",
         "@vitest/coverage-v8": "^3.2.7",
+        "@vue/compiler-dom": "^3.5.41",
         "@vue/compiler-sfc": "^3.5.40",
         "@vue/eslint-config-typescript": "^13.0.0",
         "@vue/test-utils": "^2.4.6",
@@ -89,6 +91,7 @@
         "jest": "^29.0.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-transform-stub": "^2.0.0",
+        "jsdom": "^29.1.1",
         "postcss-html": "^1.8.1",
         "stylelint": "^15.11.0",
         "stylelint-config-recommended-scss": "^13.1.0",
@@ -119,6 +122,121 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.1.11",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.11.tgz",
+      "integrity": "sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@csstools/css-calc": "^3.2.0",
+        "@csstools/css-color-parser": "^4.1.0",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/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",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "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/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "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/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-7.1.1.tgz",
+      "integrity": "sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/@asamuzakjp/generational-cache": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/generational-cache/-/generational-cache-1.0.1.tgz",
+      "integrity": "sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
@@ -1893,6 +2011,40 @@
       "dev": true,
       "license": "MIT"
     },
+    "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/@bramus/specificity/node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@bramus/specificity/node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/@buttercup/fetch": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@buttercup/fetch/-/fetch-0.2.1.tgz",
@@ -2160,6 +2312,78 @@
         }
       }
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.0.tgz",
+      "integrity": "sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "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/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==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "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/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.1.10.tgz",
+      "integrity": "sha512-UZhQLIUyJaaMepqehrCODwCg2KW25vFvLWBmqYFaPclYvvxzj/sG8LBOhBFCp11i9uE7t1EyS+RAoV9tztPFyw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "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/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.1.0",
+        "@csstools/css-calc": "^3.3.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": "2.7.1",
       "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz",
@@ -2183,6 +2407,31 @@
         "@csstools/css-tokenizer": "^2.4.1"
       }
     },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.7.tgz",
+      "integrity": "sha512-fQ+05118eQS1cofO3aJpB5efgpBZMvIzwr/sbC8kDLVA5XLG8q1kJV5yzrUAI1f7lvhPnm8fgIjzFB8/O/5Dig==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "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/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@csstools/css-tokenizer": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz",
@@ -3001,6 +3250,24 @@
         "url": "https://eslint.org/donate"
       }
     },
+    "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/@file-type/xml": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/@file-type/xml/-/xml-0.4.4.tgz",
@@ -5484,6 +5751,13 @@
         "node": ">=20"
       }
     },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.62.4",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.4.tgz",
@@ -6912,6 +7186,23 @@
         "win32"
       ]
     },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
+      "integrity": "sha512-0ZjgOg7oO6farnNGup7yvoM/YXZV84OZxHAwtflItNa/6zzQyVb5LNxyea3FEKEX2XlagIKzrlH7wwxkKgtiew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "vue": "^3.2.25"
+      }
+    },
     "node_modules/@vitest/coverage-v8": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-3.2.7.tgz",
@@ -7258,15 +7549,37 @@
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.40",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.40.tgz",
-      "integrity": "sha512-pwkx4vqlqOspFstrcmzwkKLePVMD3PT65imRzLhanU2V1Fj4K13g6OXjanOyzw3aTAuRk84BOmY8f3rEHqPaVA==",
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz",
+      "integrity": "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.40",
-        "@vue/shared": "3.5.40"
+        "@vue/compiler-core": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/compiler-dom/node_modules/@vue/compiler-core": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.41.tgz",
+      "integrity": "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/shared": "3.5.41",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
       }
     },
+    "node_modules/@vue/compiler-dom/node_modules/@vue/shared": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.41.tgz",
+      "integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@vue/compiler-sfc": {
       "version": "3.5.40",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.40.tgz",
@@ -7284,6 +7597,16 @@
         "source-map-js": "^1.2.1"
       }
     },
+    "node_modules/@vue/compiler-sfc/node_modules/@vue/compiler-dom": {
+      "version": "3.5.40",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.40.tgz",
+      "integrity": "sha512-pwkx4vqlqOspFstrcmzwkKLePVMD3PT65imRzLhanU2V1Fj4K13g6OXjanOyzw3aTAuRk84BOmY8f3rEHqPaVA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.40",
+        "@vue/shared": "3.5.40"
+      }
+    },
     "node_modules/@vue/compiler-ssr": {
       "version": "3.5.40",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.40.tgz",
@@ -7294,6 +7617,16 @@
         "@vue/shared": "3.5.40"
       }
     },
+    "node_modules/@vue/compiler-ssr/node_modules/@vue/compiler-dom": {
+      "version": "3.5.40",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.40.tgz",
+      "integrity": "sha512-pwkx4vqlqOspFstrcmzwkKLePVMD3PT65imRzLhanU2V1Fj4K13g6OXjanOyzw3aTAuRk84BOmY8f3rEHqPaVA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.40",
+        "@vue/shared": "3.5.40"
+      }
+    },
     "node_modules/@vue/devtools-api": {
       "version": "7.7.10",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.10.tgz",
@@ -8637,6 +8970,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/bindings": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
@@ -9995,18 +10338,17 @@
       }
     },
     "node_modules/data-urls": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
-      "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+      "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": {
-        "abab": "^2.0.6",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^11.0.0"
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
     "node_modules/data-view-buffer": {
@@ -10471,6 +10813,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/domexception/node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/domhandler": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
@@ -13231,16 +13583,16 @@
       "license": "MIT"
     },
     "node_modules/html-encoding-sniffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "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": {
-        "whatwg-encoding": "^2.0.0"
+        "@exodus/bytes": "^1.6.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
     "node_modules/html-escaper": {
@@ -14957,6 +15309,156 @@
         }
       }
     },
+    "node_modules/jest-environment-jsdom/node_modules/data-urls": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
+      "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "abab": "^2.0.6",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^11.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/html-encoding-sniffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/jsdom": {
+      "version": "20.0.3",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
+      "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "abab": "^2.0.6",
+        "acorn": "^8.8.1",
+        "acorn-globals": "^7.0.0",
+        "cssom": "^0.5.0",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^3.0.2",
+        "decimal.js": "^10.4.2",
+        "domexception": "^4.0.0",
+        "escodegen": "^2.0.0",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy-agent": "^5.0.0",
+        "https-proxy-agent": "^5.0.1",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.2",
+        "parse5": "^7.1.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.1.2",
+        "w3c-xmlserializer": "^4.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^2.0.0",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^11.0.0",
+        "ws": "^8.11.0",
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/tr46": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
+      "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/w3c-xmlserializer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
+      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/whatwg-url": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
+      "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^3.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/jest-environment-node": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.7.0.tgz",
@@ -16171,44 +16673,39 @@
       }
     },
     "node_modules/jsdom": {
-      "version": "20.0.3",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
-      "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
+      "version": "29.1.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.1.1.tgz",
+      "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "abab": "^2.0.6",
-        "acorn": "^8.8.1",
-        "acorn-globals": "^7.0.0",
-        "cssom": "^0.5.0",
-        "cssstyle": "^2.3.0",
-        "data-urls": "^3.0.2",
-        "decimal.js": "^10.4.2",
-        "domexception": "^4.0.0",
-        "escodegen": "^2.0.0",
-        "form-data": "^4.0.0",
-        "html-encoding-sniffer": "^3.0.0",
-        "http-proxy-agent": "^5.0.0",
-        "https-proxy-agent": "^5.0.1",
+        "@asamuzakjp/css-color": "^5.1.11",
+        "@asamuzakjp/dom-selector": "^7.1.1",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.3",
+        "@exodus/bytes": "^1.15.0",
+        "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",
-        "nwsapi": "^2.2.2",
-        "parse5": "^7.1.1",
+        "lru-cache": "^11.3.5",
+        "parse5": "^8.0.1",
         "saxes": "^6.0.0",
         "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.1.2",
-        "w3c-xmlserializer": "^4.0.0",
-        "webidl-conversions": "^7.0.0",
-        "whatwg-encoding": "^2.0.0",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^11.0.0",
-        "ws": "^8.11.0",
-        "xml-name-validator": "^4.0.0"
+        "tough-cookie": "^6.0.1",
+        "undici": "^7.25.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.1",
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "canvas": "^2.5.0"
+        "canvas": "^3.0.0"
       },
       "peerDependenciesMeta": {
         "canvas": {
@@ -16216,6 +16713,73 @@
         }
       }
     },
+    "node_modules/jsdom/node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jsdom/node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "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/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/jsdom/node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/jsdom/node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/jsdom/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": "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/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/jsdom/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/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -22268,6 +22832,26 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tldts": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.10.tgz",
+      "integrity": "sha512-GgouD1B+sWwvkaEq8vXC15DjQitxbvs12oIXELpconwm+Tg3zfcEv4jgzq3vtKverDXsg3VI8aRgNL2Nra0Iog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.4.10"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.10.tgz",
+      "integrity": "sha512-KnQjp53ZekKgm/r3l+u8kJGGzYgrWdP8+Mql7a4vijh2WE0IrZWspQj/TpTxDho/YxO+AnOZnIjQcCD+q6iJsw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -22309,32 +22893,29 @@
       "license": "MIT"
     },
     "node_modules/tough-cookie": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "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": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
+        "tldts": "^7.0.5"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=16"
       }
     },
     "node_modules/tr46": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
-      "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+      "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.1.1"
+        "punycode": "^2.3.1"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=20"
       }
     },
     "node_modules/tributejs": {
@@ -22867,6 +23448,16 @@
         "url": "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/sponsors/ljharb"
       }
     },
+    "node_modules/undici": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.29.0.tgz",
+      "integrity": "sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
@@ -23884,6 +24475,16 @@
       "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
       "license": "MIT"
     },
+    "node_modules/vue/node_modules/@vue/compiler-dom": {
+      "version": "3.5.40",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.40.tgz",
+      "integrity": "sha512-pwkx4vqlqOspFstrcmzwkKLePVMD3PT65imRzLhanU2V1Fj4K13g6OXjanOyzw3aTAuRk84BOmY8f3rEHqPaVA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.40",
+        "@vue/shared": "3.5.40"
+      }
+    },
     "node_modules/vue3-apexcharts": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.8.0.tgz",
@@ -23913,16 +24514,26 @@
       "license": "MIT"
     },
     "node_modules/w3c-xmlserializer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+      "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": "^4.0.0"
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
+      }
+    },
+    "node_modules/w3c-xmlserializer/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/walker": {
@@ -24018,13 +24629,13 @@
       }
     },
     "node_modules/webidl-conversions": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "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": ">=12"
+        "node": ">=20"
       }
     },
     "node_modules/webpack": {
@@ -24174,27 +24785,28 @@
       }
     },
     "node_modules/whatwg-mimetype": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "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": ">=12"
+        "node": ">=20"
       }
     },
     "node_modules/whatwg-url": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
-      "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+      "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": {
-        "tr46": "^3.0.0",
-        "webidl-conversions": "^7.0.0"
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
       },
       "engines": {
-        "node": ">=12"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
     "node_modules/which": {
@@ -24471,9 +25083,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.21.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.2.tgz",
-      "integrity": "sha512-54dMVAo4WIe6SKy3vBgN+9bJZqqQ8IMRevAkOLQALhi49qkkQDQfWdAZ8KQlXiEabw88ARXXdUrlvtbKQX+aKw==",
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",
+      "integrity": "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==",
       "dev": true,
       "license": "MIT",
       "engines": {
diff --git a/package.json b/package.json
index 82fb9624..3395ba30 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,9 @@
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.12",
     "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-vue": "^6.0.8",
     "@vitest/coverage-v8": "^3.2.7",
+    "@vue/compiler-dom": "^3.5.41",
     "@vue/compiler-sfc": "^3.5.40",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
@@ -123,6 +125,7 @@
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-transform-stub": "^2.0.0",
+    "jsdom": "^29.1.1",
     "postcss-html": "^1.8.1",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^13.1.0",
diff --git a/src/components/AlwaysVisibleSection.vue b/src/components/AlwaysVisibleSection.vue
index bca5a605..fbb2cc5e 100644
--- a/src/components/AlwaysVisibleSection.vue
+++ b/src/components/AlwaysVisibleSection.vue
@@ -81,26 +81,36 @@
 			</div>
 		</div>
 
-		<!-- Info Modal -->
-		<NcModal
+		<!-- Info Modal — own file per ADR-004/ADR-012 -->
+		<AlwaysVisibleSectionInfoModal
 			v-if="hasInfoContent"
+			:name="name"
 			:show="showInfoModal"
-			:title="name + ' Information'"
-			:name="name + ' Info'"
 			@close="showInfoModal = false">
-			<div class="info-content">
+			<!--
+				BOTH slot names are honoured. `info-content` wins when supplied and
+				`info` is the fallback, so no caller can be silently empty.
+
+				This section only ever declared `info`, but four of its five callers
+				(UserGroupsConfiguration, EmailConfiguration, ArchiMateImportExport,
+				OrganizationSynchronization) pass `#info-content` — the name
+				CollapsibleSection uses. They all set `:has-info-content="true"`, so
+				the (i) button rendered and opened a completely EMPTY modal.
+			-->
+			<slot name="info-content">
 				<slot name="info" />
-			</div>
-		</NcModal>
+			</slot>
+		</AlwaysVisibleSectionInfoModal>
 	</NcSettingsSection>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
-import { NcSettingsSection, NcButton, NcLoadingIcon, NcModal } from '@nextcloud/vue'
+import { NcSettingsSection, NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import Save from 'vue-material-design-icons/ContentSave.vue'
 import Refresh from 'vue-material-design-icons/Refresh.vue'
 import Information from 'vue-material-design-icons/Information.vue'
+import AlwaysVisibleSectionInfoModal from '../modals/AlwaysVisibleSectionInfoModal.vue'
 
 /**
  * Always Visible Section component
@@ -117,10 +127,10 @@ export default defineComponent({
 		NcSettingsSection,
 		NcButton,
 		NcLoadingIcon,
-		NcModal,
 		Save,
 		Refresh,
 		Information,
+		AlwaysVisibleSectionInfoModal,
 	},
 
 	props: {
@@ -311,10 +321,7 @@ export default defineComponent({
 	color: var(--color-text-lighter);
 }
 
-.info-content {
-	max-width: 600px;
-	line-height: 1.6;
-}
+/* .info-content lives with the modal in src/modals/AlwaysVisibleSectionInfoModal.vue */
 
 /* Responsive */
 @media (max-width: 768px) {
diff --git a/src/components/CollapsibleSection.vue b/src/components/CollapsibleSection.vue
index 3696d73b..c5e5351e 100644
--- a/src/components/CollapsibleSection.vue
+++ b/src/components/CollapsibleSection.vue
@@ -96,26 +96,23 @@
 			</div>
 		</div>
 
-		<!-- Info Modal -->
-		<NcModal
+		<!-- Info Modal — own file per ADR-004/ADR-012 -->
+		<CollapsibleSectionInfoModal
 			v-if="showInfoModal"
+			:name="name"
 			@close="showInfoModal = false">
-			<div class="info-modal">
-				<div class="modal-header">
-					<h2>{{ name }} - Information</h2>
-				</div>
-				<div class="modal-content">
-					<slot name="info-content">
-						<p>No additional information available.</p>
-					</slot>
-				</div>
-				<div class="modal-footer">
-					<NcButton @click="showInfoModal = false">
-						Close
-					</NcButton>
-				</div>
-			</div>
-		</NcModal>
+			<!--
+				BOTH slot names are honoured, matching AlwaysVisibleSection: this
+				section has always used `info-content`, and `info` is accepted as an
+				alias so the two sections share one slot API and no caller can be
+				silently empty. The empty-state paragraph is the last fallback.
+			-->
+			<slot name="info-content">
+				<slot name="info">
+					<p>No additional information available.</p>
+				</slot>
+			</slot>
+		</CollapsibleSectionInfoModal>
 	</NcSettingsSection>
 </template>
 
@@ -136,7 +133,6 @@ import {
 	NcSettingsSection,
 	NcButton,
 	NcLoadingIcon,
-	NcModal,
 } from '@nextcloud/vue'
 
 // Icons
@@ -146,6 +142,8 @@ import Information from 'vue-material-design-icons/Information.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 
+import CollapsibleSectionInfoModal from '../modals/CollapsibleSectionInfoModal.vue'
+
 export default {
 	name: 'CollapsibleSection',
 
@@ -153,12 +151,12 @@ export default {
 		NcSettingsSection,
 		NcButton,
 		NcLoadingIcon,
-		NcModal,
 		Save,
 		Refresh,
 		Information,
 		ChevronUp,
 		ChevronDown,
+		CollapsibleSectionInfoModal,
 	},
 
 	props: {
@@ -365,73 +363,8 @@ export default {
 	padding: 40px 0;
 }
 
-/* Info Modal Styles */
-.info-modal {
-	padding: 20px;
-	max-width: 600px;
-	max-height: 80vh;
-	overflow-y: auto;
-}
-
-.modal-header {
-	margin-bottom: 16px;
-	padding-bottom: 16px;
-	border-bottom: 1px solid var(--color-border);
-}
-
-.modal-header h2 {
-	margin: 0;
-	font-size: 20px;
-	font-weight: 600;
-	color: var(--color-main-text);
-}
-
-.modal-content {
-	margin-bottom: 20px;
-	line-height: 1.6;
-}
-
-.modal-content :deep(h3) {
-	margin-top: 20px;
-	margin-bottom: 12px;
-	font-size: 16px;
-	font-weight: 600;
-}
-
-.modal-content :deep(h4) {
-	margin-top: 16px;
-	margin-bottom: 8px;
-	font-size: 14px;
-	font-weight: 600;
-}
-
-.modal-content :deep(ul) {
-	padding-left: 20px;
-	margin-bottom: 16px;
-}
-
-.modal-content :deep(li) {
-	margin-bottom: 4px;
-}
-
-.modal-content :deep(p) {
-	margin-bottom: 12px;
-}
-
-.modal-content :deep(code) {
-	background-color: var(--color-background-dark);
-	padding: 2px 6px;
-	border-radius: 4px;
-	font-family: monospace;
-	font-size: 13px;
-}
-
-.modal-footer {
-	display: flex;
-	justify-content: flex-end;
-	padding-top: 16px;
-	border-top: 1px solid var(--color-border);
-}
+/* The info-modal styles live with the modal in
+   src/modals/CollapsibleSectionInfoModal.vue */
 
 /* WCAG 2.3.3 — the expand animation is decorative; a reduced-motion user gets
    the expanded section immediately instead of the slide. */
diff --git a/src/components/ContactpersonenList.vue b/src/components/ContactpersonenList.vue
index 382af3bf..eee48f1b 100644
--- a/src/components/ContactpersonenList.vue
+++ b/src/components/ContactpersonenList.vue
@@ -156,166 +156,20 @@
 			</table>
 		</div>
 
-		<!-- Password Change Dialog -->
-		<NcDialog
+		<!-- Password Change Dialog — own file per ADR-004/ADR-012 -->
+		<ChangePasswordDialog
 			v-if="showPasswordDialog"
-			:name="t('softwarecatalog', 'Change Password')"
-			size="small"
-			@closing="closePasswordDialog">
-			<div class="password-dialog">
-				<p class="dialog-description">
-					{{
-						t("softwarecatalog", "Change password for user: {username}", {
-							username: selectedContactpersoon?.user?.username,
-						})
-					}}
-				</p>
-
-				<div class="password-input">
-					<NcTextField
-						v-model="newPassword"
-						type="password"
-						:label="t('softwarecatalog', 'New password')"
-						:placeholder="t('softwarecatalog', 'Enter new password')"
-						class="compact-input" />
-				</div>
-
-				<!-- Password Requirements -->
-				<div class="password-requirements">
-					<h4>{{ t("softwarecatalog", "Password Requirements:") }}</h4>
-					<ul class="requirements-list">
-						<li :class="{ 'requirement-met': passwordValidation.minLength }">
-							<CheckCircle
-								v-if="passwordValidation.minLength"
-								:size="16"
-								class="check-icon" />
-							<CloseCircle v-else :size="16" class="close-icon" />
-							{{ t("softwarecatalog", "At least 10 characters") }}
-						</li>
-						<li :class="{ 'requirement-met': passwordValidation.hasUppercase }">
-							<CheckCircle
-								v-if="passwordValidation.hasUppercase"
-								:size="16"
-								class="check-icon" />
-							<CloseCircle v-else :size="16" class="close-icon" />
-							{{ t("softwarecatalog", "At least one uppercase letter") }}
-						</li>
-						<li :class="{ 'requirement-met': passwordValidation.hasLowercase }">
-							<CheckCircle
-								v-if="passwordValidation.hasLowercase"
-								:size="16"
-								class="check-icon" />
-							<CloseCircle v-else :size="16" class="close-icon" />
-							{{ t("softwarecatalog", "At least one lowercase letter") }}
-						</li>
-						<li :class="{ 'requirement-met': passwordValidation.hasNumber }">
-							<CheckCircle
-								v-if="passwordValidation.hasNumber"
-								:size="16"
-								class="check-icon" />
-							<CloseCircle v-else :size="16" class="close-icon" />
-							{{ t("softwarecatalog", "At least one number") }}
-						</li>
-						<li
-							:class="{ 'requirement-met': passwordValidation.hasSpecialChar }">
-							<CheckCircle
-								v-if="passwordValidation.hasSpecialChar"
-								:size="16"
-								class="check-icon" />
-							<CloseCircle v-else :size="16" class="close-icon" />
-							{{
-								t(
-									"softwarecatalog",
-									"At least one special character (!@#$%^&*)"
-								)
-							}}
-						</li>
-						<li :class="{ 'requirement-met': passwordValidation.notPwned }">
-							<NcLoadingIcon
-								v-if="pwnedCheckLoading"
-								:size="16"
-								class="loading-icon" />
-							<CheckCircle
-								v-else-if="passwordValidation.notPwned"
-								:size="16"
-								class="check-icon" />
-							<CloseCircle
-								v-else
-								:size="16"
-								class="close-icon" />
-							{{
-								t(
-									"softwarecatalog",
-									"Password has not appeared in known data breaches"
-								)
-							}}
-						</li>
-					</ul>
-				</div>
-
-				<div class="dialog-actions">
-					<NcButton variant="secondary" @click="closePasswordDialog">
-						{{ t("softwarecatalog", "Cancel") }}
-					</NcButton>
-					<NcButton
-						variant="primary"
-						:disabled="passwordLoading || !isPasswordValid || pwnedCheckLoading"
-						@click="savePassword">
-						<template #icon>
-							<NcLoadingIcon v-if="passwordLoading" :size="20" />
-						</template>
-						{{ t("softwarecatalog", "Save") }}
-					</NcButton>
-				</div>
-			</div>
-		</NcDialog>
-
-		<!-- Groups Management Dialog -->
-		<NcDialog
+			:username="selectedContactpersoon?.user?.username"
+			@saved="closePasswordDialog"
+			@close="closePasswordDialog" />
+
+		<!-- Groups Management Dialog — own file per ADR-004/ADR-012 -->
+		<ManageUserGroupsDialog
 			v-if="showGroupsDialog"
-			:name="t('softwarecatalog', 'Manage User Groups')"
-			size="normal"
-			@closing="closeGroupsDialog">
-			<div class="groups-dialog">
-				<p class="dialog-description">
-					{{
-						t("softwarecatalog", "Select groups for user: {username}", {
-							username: selectedContactpersoon?.user?.username,
-						})
-					}}
-				</p>
-
-				<div class="groups-selection">
-					<NcCheckboxRadioSwitch
-						v-for="group in availableGroups"
-						:key="group.id"
-						:model-value="selectedGroups.includes(group.id)"
-						type="checkbox"
-						class="compact-checkbox"
-						@update:model-value="toggleGroup(group.id, $event)">
-						{{ group.name }}
-						<template #description>
-							{{ group.description }}
-						</template>
-					</NcCheckboxRadioSwitch>
-				</div>
-
-				<div class="dialog-actions">
-					<NcButton variant="secondary" @click="closeGroupsDialog">
-						{{ t("softwarecatalog", "Cancel") }}
-					</NcButton>
-					<NcButton
-						variant="primary"
-						:disabled="groupsLoading"
-						@click="saveGroups">
-						<template #icon>
-							<NcLoadingIcon v-if="groupsLoading" :size="20" />
-						</template>
-						{{ t("softwarecatalog", "Save") }}
-					</NcButton>
-				</div>
-			</div>
-		</NcDialog>
+			:contactpersoon="selectedContactpersoon"
+			@groups-loaded="onGroupsLoaded"
+			@saved="onGroupsSaved"
+			@close="closeGroupsDialog" />
 	</div>
 </template>
 
@@ -326,10 +180,6 @@ import {
 	NcLoadingIcon,
 	NcNoteCard,
 	NcEmptyContent,
-	NcDialog,
-	NcButton,
-	NcCheckboxRadioSwitch,
-	NcTextField,
 } from '@nextcloud/vue'
 
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
@@ -339,6 +189,9 @@ import Key from 'vue-material-design-icons/Key.vue'
 import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
 import CloseCircle from 'vue-material-design-icons/CloseCircle.vue'
 
+import ChangePasswordDialog from '../dialogs/ChangePasswordDialog.vue'
+import ManageUserGroupsDialog from '../dialogs/ManageUserGroupsDialog.vue'
+
 import { useOrganisatieStore } from '../store/modules/organisatie.js'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 
@@ -351,16 +204,14 @@ export default {
 		NcLoadingIcon,
 		NcNoteCard,
 		NcEmptyContent,
-		NcDialog,
-		NcButton,
-		NcCheckboxRadioSwitch,
-		NcTextField,
 		AccountMultiple,
 		AccountPlus,
 		AccountGroup,
 		Key,
 		CheckCircle,
 		CloseCircle,
+		ChangePasswordDialog,
+		ManageUserGroupsDialog,
 	},
 
 	props: {
@@ -379,16 +230,9 @@ export default {
 			showPasswordDialog: false,
 			showGroupsDialog: false,
 			selectedContactpersoon: null,
-			selectedGroups: [],
-			groupsLoading: false,
-			newPassword: '',
-			passwordLoading: false,
 			userStatusRefreshInProgress: false,
 			userStatusRefreshTimeout: null,
 			userInfoLoaded: false,
-			isPasswordPwned: true, // start of with true
-			pwnedCheckLoading: false,
-			pwnedCheckTimeout: null,
 		}
 	},
 
@@ -436,57 +280,6 @@ export default {
 		availableGroups() {
 			return this.organisatieStore.getAvailableGroups
 		},
-
-		// Password validation computed properties
-		/**
-		 * @spec openspec/specs/fe-organizations/spec.md
-		 */
-		passwordValidation() {
-			return {
-				minLength: this.newPassword.length >= 10,
-				hasUppercase: /[A-Z]/.test(this.newPassword),
-				hasLowercase: /[a-z]/.test(this.newPassword),
-				hasNumber: /\d/.test(this.newPassword),
-				hasSpecialChar: /[!@#$%^&*(),.?":{}|<>]/.test(this.newPassword),
-				// Only consider notPwned valid if check is complete and password is not pwned
-				// If check is still loading, treat as invalid to prevent premature save
-				notPwned: !this.pwnedCheckLoading && !this.isPasswordPwned,
-			}
-		},
-
-		/**
-		 * @spec openspec/specs/fe-organizations/spec.md
-		 */
-		isPasswordValid() {
-			return Object.values(this.passwordValidation).every(
-				(requirement) => requirement,
-			)
-		},
-	},
-
-	watch: {
-		/**
-		 * @spec openspec/specs/fe-organizations/spec.md
-		 */
-		newPassword(newVal) {
-			// Clear existing timeout
-			if (this.pwnedCheckTimeout) {
-				clearTimeout(this.pwnedCheckTimeout)
-			}
-
-			// Only check if password meets minimum length requirement
-			if (newVal && newVal.length >= 10) {
-				// Set loading state immediately to prevent save during debounce
-				this.pwnedCheckLoading = true
-				// Debounce the API call to avoid excessive requests
-				this.pwnedCheckTimeout = setTimeout(() => {
-					this.checkPasswordPwned(newVal)
-				}, 500)
-			} else {
-				// Password too short, no check needed
-				this.pwnedCheckLoading = false
-			}
-		},
 	},
 
 	/**
@@ -506,191 +299,12 @@ export default {
 		if (this.userStatusRefreshTimeout) {
 			clearTimeout(this.userStatusRefreshTimeout)
 		}
-		if (this.pwnedCheckTimeout) {
-			clearTimeout(this.pwnedCheckTimeout)
-		}
 	},
 
 	// Watchers removed to prevent infinite loops
 	// User info and groups will be loaded only when explicitly requested
 
 	methods: {
-		/**
-		 * Compute SHA-1 hash of a string
-		 * @param {string} str - String to hash
-		 * @return {Promise<string>} SHA-1 hash in hexadecimal format (uppercase)
-		  * @spec openspec/specs/fe-organizations/spec.md
-		 */
-		async sha1(str) {
-			// Simple SHA-1 implementation
-			// Based on: https://github.com/emn178/js-sha1
-			const encoder = new TextEncoder()
-			const utf8Bytes = encoder.encode(str)
-			const bytes = Array.from(utf8Bytes)
-
-			const h = [0x67452301, 0xEFCDAB89, 0x98BADCFE, 0x10325476, 0xC3D2E1F0]
-
-			const w = []
-			const length = bytes.length * 8
-
-			bytes.push(0x80)
-			while (bytes.length % 64 !== 56) {
-				bytes.push(0)
-			}
-
-			for (let i = 0; i < bytes.length; i += 4) {
-				w.push(
-					(bytes[i] << 24)
-					| (bytes[i + 1] << 16)
-					| (bytes[i + 2] << 8)
-					| bytes[i + 3],
-				)
-			}
-
-			w.push(0)
-			w.push(0)
-			w[w.length - 2] = Math.floor(length / 0x100000000)
-			w[w.length - 1] = length & 0xffffffff
-
-			for (let i = 0; i < w.length; i += 16) {
-				// Create a local copy of w for this 512-bit block (expand to 80 words)
-				const wLocal = new Array(80)
-				for (let j = 0; j < 16; j++) {
-					wLocal[j] = w[i + j]
-				}
-
-				// Expand w array for rounds 16-79
-				for (let j = 16; j < 80; j++) {
-					const wVal = wLocal[j - 3]
-						^ wLocal[j - 8]
-						^ wLocal[j - 14]
-						^ wLocal[j - 16]
-					wLocal[j] = ((wVal << 1) | (wVal >>> 31)) >>> 0
-				}
-
-				let a = h[0]
-				let b = h[1]
-				let c = h[2]
-				let d = h[3]
-				let e = h[4]
-
-				for (let j = 0; j < 80; j++) {
-					let f
-					let k
-					if (j < 20) {
-						f = (b & c) | (~b & d)
-						k = 0x5A827999
-					} else if (j < 40) {
-						f = b ^ c ^ d
-						k = 0x6ED9EBA1
-					} else if (j < 60) {
-						f = (b & c) | (b & d) | (c & d)
-						k = 0x8F1BBCDC
-					} else {
-						f = b ^ c ^ d
-						k = 0xCA62C1D6
-					}
-
-					const temp = (this.rotl(a, 5) + f + e + k + wLocal[j]) >>> 0
-					e = d
-					d = c
-					c = this.rotl(b, 30) >>> 0
-					b = a
-					a = temp
-				}
-
-				h[0] = (h[0] + a) >>> 0
-				h[1] = (h[1] + b) >>> 0
-				h[2] = (h[2] + c) >>> 0
-				h[3] = (h[3] + d) >>> 0
-				h[4] = (h[4] + e) >>> 0
-			}
-
-			return (
-				h[0].toString(16).padStart(8, '0')
-				+ h[1].toString(16).padStart(8, '0')
-				+ h[2].toString(16).padStart(8, '0')
-				+ h[3].toString(16).padStart(8, '0')
-				+ h[4].toString(16).padStart(8, '0')
-			).toUpperCase()
-		},
-
-		/**
-		 * Rotate left operation for SHA-1
-		 * @param {number} value - Value to rotate
-		 * @param {number} amount - Amount to rotate
-		 * @return {number} Rotated value
-		  * @spec openspec/specs/fe-organizations/spec.md
-		 */
-		rotl(value, amount) {
-			return ((value << amount) | (value >>> (32 - amount))) >>> 0
-		},
-
-		/**
-		 * Check if password is in Have I Been Pwned database
-		 * @param {string} password - Password to check
-		  * @spec openspec/specs/fe-organizations/spec.md
-		 */
-		async checkPasswordPwned(password) {
-			if (!password || password.length < 10) {
-				this.isPasswordPwned = true
-				return
-			}
-
-			this.pwnedCheckLoading = true
-
-			try {
-				// Hash the password with SHA-1
-				const sha1Hash = await this.sha1(password)
-				const prefix = sha1Hash.substring(0, 5)
-				const suffix = sha1Hash.substring(5)
-
-				// Call Have I Been Pwned API
-				const response = await fetch(
-					`https://api.pwnedpasswords.com/range/${prefix}`,
-					{
-						method: 'GET',
-						headers: {
-							'User-Agent': 'Nextcloud-SoftwareCatalog',
-						},
-					},
-				)
-
-				if (!response.ok) {
-					console.error(
-						'HIBP API error:',
-						response.status,
-						response.statusText,
-					)
-					// If API fails, don't block password (fail open)
-					this.isPasswordPwned = false
-					return
-				}
-
-				const text = await response.text()
-				const hashes = text.split('\n')
-
-				// Check if our suffix is in the list
-				for (const line of hashes) {
-					const [hashSuffix] = line.split(':')
-					if (hashSuffix && hashSuffix.toUpperCase() === suffix) {
-						this.isPasswordPwned = true
-						this.pwnedCheckLoading = false
-						return
-					}
-				}
-
-				// Password not found in database
-				this.isPasswordPwned = false
-			} catch (error) {
-				console.error('Error checking password against HIBP:', error)
-				// If check fails, don't block password (fail open)
-				this.isPasswordPwned = false
-			} finally {
-				this.pwnedCheckLoading = false
-			}
-		},
-
 		/**
 		 * @spec openspec/specs/fe-organizations/spec.md
 		 */
@@ -1052,13 +666,8 @@ export default {
 		 */
 		openPasswordDialog(contactpersoon) {
 			this.selectedContactpersoon = contactpersoon
-			this.newPassword = ''
-			this.isPasswordPwned = true // start of with true
-			this.pwnedCheckLoading = false
-			if (this.pwnedCheckTimeout) {
-				clearTimeout(this.pwnedCheckTimeout)
-				this.pwnedCheckTimeout = null
-			}
+			// ChangePasswordDialog is mounted fresh (v-if) on every open, so its
+			// own data() is the reset that used to be spelled out here.
 			this.showPasswordDialog = true
 		},
 
@@ -1068,95 +677,19 @@ export default {
 		closePasswordDialog() {
 			this.showPasswordDialog = false
 			this.selectedContactpersoon = null
-			this.newPassword = ''
-			this.passwordLoading = false
-			this.isPasswordPwned = true // reset to true
-			this.pwnedCheckLoading = false
-			if (this.pwnedCheckTimeout) {
-				clearTimeout(this.pwnedCheckTimeout)
-				this.pwnedCheckTimeout = null
-			}
-		},
-
-		/**
-		 * @spec openspec/specs/fe-organizations/spec.md
-		 */
-		async savePassword() {
-			if (!this.newPassword || this.newPassword.length < 10) {
-				showError(
-					this.t(
-						'softwarecatalog',
-						'Password must be at least 10 characters long',
-					),
-				)
-				return
-			}
-
-			if (!this.isPasswordValid) {
-				if (this.isPasswordPwned) {
-					showError(
-						this.t(
-							'softwarecatalog',
-							'This password has been found in data breaches and is not secure. Please choose a different password.',
-						),
-					)
-				} else {
-					showError(
-						this.t(
-							'softwarecatalog',
-							'Password does not meet all requirements',
-						),
-					)
-				}
-				return
-			}
-
-			this.passwordLoading = true
-
-			try {
-				await this.organisatieStore.changePassword(
-					this.selectedContactpersoon.user.username,
-					this.newPassword,
-				)
-				showSuccess(this.t('softwarecatalog', 'Password changed successfully'))
-				this.closePasswordDialog()
-			} catch (error) {
-				showError(
-					this.t('softwarecatalog', 'Failed to change password: {error}', {
-						error: error.message,
-					}),
-				)
-			} finally {
-				this.passwordLoading = false
-			}
 		},
 
 		/**
 		 * Open groups management dialog.
+		 * ManageUserGroupsDialog reads the user's CURRENT groups itself and
+		 * reports them back through `groups-loaded`.
 		 * @param {object} contactpersoon - The contact person object.
-		 * @return {Promise<void>}
+		 * @return {void}
 		  * @spec openspec/specs/fe-organizations/spec.md
 		 */
-		async openGroupsDialog(contactpersoon) {
+		openGroupsDialog(contactpersoon) {
 			this.selectedContactpersoon = contactpersoon
 			this.showGroupsDialog = true
-
-			try {
-			// Fetch user-specific info to get current groups and available groups.
-				const userInfo = await this.organisatieStore.fetchUserInfo(
-					contactpersoon.id,
-				)
-				this.selectedGroups = [...(userInfo.groups || [])]
-
-				// Update the local contactpersoon data with the fresh groups info.
-				// This ensures the table shows the correct groups.
-				this.updateContactpersoonGroups(contactpersoon.id, userInfo.groups || [])
-			} catch (error) {
-				console.error('Error fetching user info for groups dialog:', error)
-				// Fallback to existing groups.
-				this.selectedGroups = [...contactpersoon.user.groups]
-			// Note: Available groups should already be loaded from loadUserInfoAndGroups().
-			}
 		},
 
 		/**
@@ -1165,58 +698,32 @@ export default {
 		closeGroupsDialog() {
 			this.showGroupsDialog = false
 			this.selectedContactpersoon = null
-			this.selectedGroups = []
-			this.groupsLoading = false
 		},
 
 		/**
-		 * @spec openspec/specs/fe-organizations/spec.md
+		 * The groups dialog read the user's current groups — mirror them into the
+		 * local data so the table shows the correct groups.
+		 * @param {Array} groups - Array of group IDs.
+		 * @return {void}
+		  * @spec openspec/specs/fe-organizations/spec.md
 		 */
-		toggleGroup(groupId, checked) {
-			if (checked) {
-				if (!this.selectedGroups.includes(groupId)) {
-					this.selectedGroups.push(groupId)
-				}
-			} else {
-				const index = this.selectedGroups.indexOf(groupId)
-				if (index > -1) {
-					this.selectedGroups.splice(index, 1)
-				}
-			}
+		onGroupsLoaded(groups) {
+			if (!this.selectedContactpersoon) return
+			this.updateContactpersoonGroups(this.selectedContactpersoon.id, groups)
 		},
 
 		/**
-		 * Save user groups.
-		 * @return {Promise<void>}
+		 * The groups dialog saved a new membership — mirror it into the local data
+		 * and close the dialog.
+		 * @param {Array} groups - Array of group IDs.
+		 * @return {void}
 		  * @spec openspec/specs/fe-organizations/spec.md
 		 */
-		async saveGroups() {
-			if (!this.selectedContactpersoon) return
-
-			this.groupsLoading = true
-
-			try {
-				await this.organisatieStore.updateUserGroups(
-					this.selectedContactpersoon.user.username,
-					this.selectedGroups,
-				)
-
-				// Update the local contactpersoon data to reflect the new groups.
-				this.updateContactpersoonGroups(this.selectedContactpersoon.id, this.selectedGroups)
-
-				showSuccess(
-					this.t('softwarecatalog', 'User groups updated successfully'),
-				)
-				this.closeGroupsDialog()
-			} catch (error) {
-				showError(
-					this.t('softwarecatalog', 'Failed to update user groups: {error}', {
-						error: error.message,
-					}),
-				)
-			} finally {
-				this.groupsLoading = false
+		onGroupsSaved(groups) {
+			if (this.selectedContactpersoon) {
+				this.updateContactpersoonGroups(this.selectedContactpersoon.id, groups)
 			}
+			this.closeGroupsDialog()
 		},
 
 		/**
@@ -1442,122 +949,6 @@ export default {
 	white-space: nowrap;
 }
 
-.password-dialog {
-	padding: 12px;
-	min-width: 320px;
-	max-width: 400px;
-}
-
-.groups-dialog {
-	padding: 12px;
-	min-width: 350px;
-	max-width: 450px;
-}
-
-.dialog-description {
-	margin: 0 0 12px 0;
-	font-size: 14px;
-	color: var(--color-text-lighter);
-}
-
-.password-input {
-	margin: 12px 0;
-}
-
-.groups-selection {
-	margin: 12px 0;
-	max-height: 200px;
-	overflow-y: auto;
-}
-
-.groups-selection .checkbox-radio-switch {
-	margin-bottom: 6px;
-}
-
-.compact-checkbox {
-	padding: 4px 0;
-}
-
-.compact-input {
-	margin: 8px 0;
-}
-
-.dialog-actions {
-	display: flex;
-	justify-content: flex-end;
-	gap: 8px;
-	margin-top: 12px;
-	padding-top: 8px;
-	border-top: 1px solid var(--color-border);
-}
-
-/* Make NcTextField more compact */
-.compact-input :deep(.input-field) {
-	margin-bottom: 8px;
-}
-
-.compact-input :deep(.input-field__main-wrapper) {
-	min-height: 36px;
-}
-
-.compact-input :deep(.input-field__input) {
-	padding: 8px 12px;
-	font-size: 14px;
-}
-
-/* Password Requirements Styles */
-.password-requirements {
-	margin: 16px 0;
-	padding: 12px;
-	background: var(--color-background-dark);
-	border-radius: 6px;
-	border: 1px solid var(--color-border);
-}
-
-.password-requirements h4 {
-	margin: 0 0 8px 0;
-	font-size: 14px;
-	font-weight: 600;
-	color: var(--color-text-dark);
-}
-
-.requirements-list {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-
-.requirements-list li {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 4px 0;
-	font-size: 13px;
-	color: var(--color-text-lighter);
-	transition: color 0.2s ease;
-}
-
-.requirements-list li.requirement-met {
-	color: var(--color-success);
-}
-
-.check-icon {
-	color: var(--color-success);
-}
-
-.close-icon {
-	color: var(--color-error);
-}
-
-.loading-icon {
-	color: var(--color-text-lighter);
-}
-
-/* WCAG 2.3.3 — the password-requirement colour transition is decorative; the
-   met/unmet colour still changes, it just changes instantly. */
-@media (prefers-reduced-motion: reduce) {
-	.requirements-list li {
-		transition: none;
-	}
-}
+/* The password / groups dialog styles live with their dialogs in
+   src/dialogs/ChangePasswordDialog.vue and src/dialogs/ManageUserGroupsDialog.vue. */
 </style>
diff --git a/src/dialogs/ChangePasswordDialog.vue b/src/dialogs/ChangePasswordDialog.vue
new file mode 100644
index 00000000..92f6efa7
--- /dev/null
+++ b/src/dialogs/ChangePasswordDialog.vue
@@ -0,0 +1,590 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>
+  - SPDX-License-Identifier: EUPL-1.2
+  -
+  - Change-password dialog for the Nextcloud user account behind a
+  - contactpersoon. Extracted from ContactpersonenList.vue per ADR-004/ADR-012:
+  - a dialog lives in its own file under src/dialogs/ and is imported by its
+  - parent.
+  -
+  - Everything that decides whether a password MAY be saved is dialog-local:
+  - the requirement checklist, the debounced Have I Been Pwned lookup (k-anonymity
+  - range query over a SHA-1 prefix, so the password itself never leaves the
+  - browser), and the store call that writes it. The parent only mounts this
+  - component (v-if) and reacts to `saved` / `close`.
+  -
+  - The dialog is mounted fresh on every open, so `data()` IS the reset that the
+  - parent used to perform by hand, and `beforeUnmount` IS the timeout cleanup.
+  -
+  - @spec openspec/specs/fe-organizations/spec.md
+  -->
+
+<template>
+	<NcDialog
+		:name="t('softwarecatalog', 'Change Password')"
+		size="small"
+		@closing="$emit('close')">
+		<div class="password-dialog">
+			<p class="dialog-description">
+				{{
+					t("softwarecatalog", "Change password for user: {username}", {
+						username,
+					})
+				}}
+			</p>
+
+			<div class="password-input">
+				<NcTextField
+					v-model="newPassword"
+					type="password"
+					:label="t('softwarecatalog', 'New password')"
+					:placeholder="t('softwarecatalog', 'Enter new password')"
+					class="compact-input" />
+			</div>
+
+			<!-- Password Requirements -->
+			<div class="password-requirements">
+				<h4>{{ t("softwarecatalog", "Password Requirements:") }}</h4>
+				<ul class="requirements-list">
+					<li :class="{ 'requirement-met': passwordValidation.minLength }">
+						<CheckCircle
+							v-if="passwordValidation.minLength"
+							:size="16"
+							class="check-icon" />
+						<CloseCircle v-else :size="16" class="close-icon" />
+						{{ t("softwarecatalog", "At least 10 characters") }}
+					</li>
+					<li :class="{ 'requirement-met': passwordValidation.hasUppercase }">
+						<CheckCircle
+							v-if="passwordValidation.hasUppercase"
+							:size="16"
+							class="check-icon" />
+						<CloseCircle v-else :size="16" class="close-icon" />
+						{{ t("softwarecatalog", "At least one uppercase letter") }}
+					</li>
+					<li :class="{ 'requirement-met': passwordValidation.hasLowercase }">
+						<CheckCircle
+							v-if="passwordValidation.hasLowercase"
+							:size="16"
+							class="check-icon" />
+						<CloseCircle v-else :size="16" class="close-icon" />
+						{{ t("softwarecatalog", "At least one lowercase letter") }}
+					</li>
+					<li :class="{ 'requirement-met': passwordValidation.hasNumber }">
+						<CheckCircle
+							v-if="passwordValidation.hasNumber"
+							:size="16"
+							class="check-icon" />
+						<CloseCircle v-else :size="16" class="close-icon" />
+						{{ t("softwarecatalog", "At least one number") }}
+					</li>
+					<li
+						:class="{ 'requirement-met': passwordValidation.hasSpecialChar }">
+						<CheckCircle
+							v-if="passwordValidation.hasSpecialChar"
+							:size="16"
+							class="check-icon" />
+						<CloseCircle v-else :size="16" class="close-icon" />
+						{{
+							t(
+								"softwarecatalog",
+								"At least one special character (!@#$%^&*)"
+							)
+						}}
+					</li>
+					<li :class="{ 'requirement-met': passwordValidation.notPwned }">
+						<NcLoadingIcon
+							v-if="pwnedCheckLoading"
+							:size="16"
+							class="loading-icon" />
+						<CheckCircle
+							v-else-if="passwordValidation.notPwned"
+							:size="16"
+							class="check-icon" />
+						<CloseCircle
+							v-else
+							:size="16"
+							class="close-icon" />
+						{{
+							t(
+								"softwarecatalog",
+								"Password has not appeared in known data breaches"
+							)
+						}}
+					</li>
+				</ul>
+			</div>
+
+			<div class="dialog-actions">
+				<NcButton variant="secondary" @click="$emit('close')">
+					{{ t("softwarecatalog", "Cancel") }}
+				</NcButton>
+				<NcButton
+					variant="primary"
+					:disabled="passwordLoading || !isPasswordValid || pwnedCheckLoading"
+					@click="savePassword">
+					<template #icon>
+						<NcLoadingIcon v-if="passwordLoading" :size="20" />
+					</template>
+					{{ t("softwarecatalog", "Save") }}
+				</NcButton>
+			</div>
+		</div>
+	</NcDialog>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcLoadingIcon,
+	NcTextField,
+} from '@nextcloud/vue'
+
+import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
+import CloseCircle from 'vue-material-design-icons/CloseCircle.vue'
+
+import { showSuccess, showError } from '@nextcloud/dialogs'
+import { useOrganisatieStore } from '../store/modules/organisatie.js'
+
+export default {
+	name: 'ChangePasswordDialog',
+
+	components: {
+		NcButton,
+		NcDialog,
+		NcLoadingIcon,
+		NcTextField,
+		CheckCircle,
+		CloseCircle,
+	},
+
+	props: {
+		/**
+		 * Nextcloud username whose password is being changed.
+		 */
+		username: {
+			type: String,
+			default: '',
+		},
+	},
+
+	emits: ['close', 'saved'],
+
+	data() {
+		return {
+			newPassword: '',
+			passwordLoading: false,
+			// Start out assuming the password IS pwned: the checklist may only go
+			// green once the HIBP lookup has actually answered.
+			isPasswordPwned: true,
+			pwnedCheckLoading: false,
+			pwnedCheckTimeout: null,
+		}
+	},
+
+	computed: {
+		/**
+		 * @spec openspec/specs/fe-organizations/spec.md
+		 */
+		organisatieStore() {
+			return useOrganisatieStore()
+		},
+
+		// Password validation computed properties
+		/**
+		 * @spec openspec/specs/fe-organizations/spec.md
+		 */
+		passwordValidation() {
+			return {
+				minLength: this.newPassword.length >= 10,
+				hasUppercase: /[A-Z]/.test(this.newPassword),
+				hasLowercase: /[a-z]/.test(this.newPassword),
+				hasNumber: /\d/.test(this.newPassword),
+				hasSpecialChar: /[!@#$%^&*(),.?":{}|<>]/.test(this.newPassword),
+				// Only consider notPwned valid if check is complete and password is not pwned
+				// If check is still loading, treat as invalid to prevent premature save
+				notPwned: !this.pwnedCheckLoading && !this.isPasswordPwned,
+			}
+		},
+
+		/**
+		 * @spec openspec/specs/fe-organizations/spec.md
+		 */
+		isPasswordValid() {
+			return Object.values(this.passwordValidation).every(
+				(requirement) => requirement,
+			)
+		},
+	},
+
+	watch: {
+		/**
+		 * @spec openspec/specs/fe-organizations/spec.md
+		 */
+		newPassword(newVal) {
+			// Clear existing timeout
+			if (this.pwnedCheckTimeout) {
+				clearTimeout(this.pwnedCheckTimeout)
+			}
+
+			// Only check if password meets minimum length requirement
+			if (newVal && newVal.length >= 10) {
+				// Set loading state immediately to prevent save during debounce
+				this.pwnedCheckLoading = true
+				// Debounce the API call to avoid excessive requests
+				this.pwnedCheckTimeout = setTimeout(() => {
+					this.checkPasswordPwned(newVal)
+				}, 500)
+			} else {
+				// Password too short, no check needed
+				this.pwnedCheckLoading = false
+			}
+		},
+	},
+
+	/**
+	 * @spec openspec/specs/fe-organizations/spec.md
+	 */
+	beforeUnmount() {
+		// Clean up the debounce timeout to prevent memory leaks
+		if (this.pwnedCheckTimeout) {
+			clearTimeout(this.pwnedCheckTimeout)
+		}
+	},
+
+	methods: {
+		/**
+		 * Compute SHA-1 hash of a string
+		 * @param {string} str - String to hash
+		 * @return {Promise<string>} SHA-1 hash in hexadecimal format (uppercase)
+		  * @spec openspec/specs/fe-organizations/spec.md
+		 */
+		async sha1(str) {
+			// Simple SHA-1 implementation
+			// Based on: https://github.com/emn178/js-sha1
+			const encoder = new TextEncoder()
+			const utf8Bytes = encoder.encode(str)
+			const bytes = Array.from(utf8Bytes)
+
+			const h = [0x67452301, 0xEFCDAB89, 0x98BADCFE, 0x10325476, 0xC3D2E1F0]
+
+			const w = []
+			const length = bytes.length * 8
+
+			bytes.push(0x80)
+			while (bytes.length % 64 !== 56) {
+				bytes.push(0)
+			}
+
+			for (let i = 0; i < bytes.length; i += 4) {
+				w.push(
+					(bytes[i] << 24)
+					| (bytes[i + 1] << 16)
+					| (bytes[i + 2] << 8)
+					| bytes[i + 3],
+				)
+			}
+
+			w.push(0)
+			w.push(0)
+			w[w.length - 2] = Math.floor(length / 0x100000000)
+			w[w.length - 1] = length & 0xffffffff
+
+			for (let i = 0; i < w.length; i += 16) {
+				// Create a local copy of w for this 512-bit block (expand to 80 words)
+				const wLocal = new Array(80)
+				for (let j = 0; j < 16; j++) {
+					wLocal[j] = w[i + j]
+				}
+
+				// Expand w array for rounds 16-79
+				for (let j = 16; j < 80; j++) {
+					const wVal = wLocal[j - 3]
+						^ wLocal[j - 8]
+						^ wLocal[j - 14]
+						^ wLocal[j - 16]
+					wLocal[j] = ((wVal << 1) | (wVal >>> 31)) >>> 0
+				}
+
+				let a = h[0]
+				let b = h[1]
+				let c = h[2]
+				let d = h[3]
+				let e = h[4]
+
+				for (let j = 0; j < 80; j++) {
+					let f
+					let k
+					if (j < 20) {
+						f = (b & c) | (~b & d)
+						k = 0x5A827999
+					} else if (j < 40) {
+						f = b ^ c ^ d
+						k = 0x6ED9EBA1
+					} else if (j < 60) {
+						f = (b & c) | (b & d) | (c & d)
+						k = 0x8F1BBCDC
+					} else {
+						f = b ^ c ^ d
+						k = 0xCA62C1D6
+					}
+
+					const temp = (this.rotl(a, 5) + f + e + k + wLocal[j]) >>> 0
+					e = d
+					d = c
+					c = this.rotl(b, 30) >>> 0
+					b = a
+					a = temp
+				}
+
+				h[0] = (h[0] + a) >>> 0
+				h[1] = (h[1] + b) >>> 0
+				h[2] = (h[2] + c) >>> 0
+				h[3] = (h[3] + d) >>> 0
+				h[4] = (h[4] + e) >>> 0
+			}
+
+			return (
+				h[0].toString(16).padStart(8, '0')
+				+ h[1].toString(16).padStart(8, '0')
+				+ h[2].toString(16).padStart(8, '0')
+				+ h[3].toString(16).padStart(8, '0')
+				+ h[4].toString(16).padStart(8, '0')
+			).toUpperCase()
+		},
+
+		/**
+		 * Rotate left operation for SHA-1
+		 * @param {number} value - Value to rotate
+		 * @param {number} amount - Amount to rotate
+		 * @return {number} Rotated value
+		  * @spec openspec/specs/fe-organizations/spec.md
+		 */
+		rotl(value, amount) {
+			return ((value << amount) | (value >>> (32 - amount))) >>> 0
+		},
+
+		/**
+		 * Check if password is in Have I Been Pwned database
+		 * @param {string} password - Password to check
+		  * @spec openspec/specs/fe-organizations/spec.md
+		 */
+		async checkPasswordPwned(password) {
+			if (!password || password.length < 10) {
+				this.isPasswordPwned = true
+				return
+			}
+
+			this.pwnedCheckLoading = true
+
+			try {
+				// Hash the password with SHA-1
+				const sha1Hash = await this.sha1(password)
+				const prefix = sha1Hash.substring(0, 5)
+				const suffix = sha1Hash.substring(5)
+
+				// Call Have I Been Pwned API
+				const response = await fetch(
+					`https://api.pwnedpasswords.com/range/${prefix}`,
+					{
+						method: 'GET',
+						headers: {
+							'User-Agent': 'Nextcloud-SoftwareCatalog',
+						},
+					},
+				)
+
+				if (!response.ok) {
+					console.error(
+						'HIBP API error:',
+						response.status,
+						response.statusText,
+					)
+					// If API fails, don't block password (fail open)
+					this.isPasswordPwned = false
+					return
+				}
+
+				const text = await response.text()
+				const hashes = text.split('\n')
+
+				// Check if our suffix is in the list
+				for (const line of hashes) {
+					const [hashSuffix] = line.split(':')
+					if (hashSuffix && hashSuffix.toUpperCase() === suffix) {
+						this.isPasswordPwned = true
+						this.pwnedCheckLoading = false
+						return
+					}
+				}
+
+				// Password not found in database
+				this.isPasswordPwned = false
+			} catch (error) {
+				console.error('Error checking password against HIBP:', error)
+				// If check fails, don't block password (fail open)
+				this.isPasswordPwned = false
+			} finally {
+				this.pwnedCheckLoading = false
+			}
+		},
+
+		/**
+		 * Persist the new password for the selected user.
+		 * @return {Promise<void>}
+		  * @spec openspec/specs/fe-organizations/spec.md
+		 */
+		async savePassword() {
+			if (!this.newPassword || this.newPassword.length < 10) {
+				showError(
+					this.t(
+						'softwarecatalog',
+						'Password must be at least 10 characters long',
+					),
+				)
+				return
+			}
+
+			if (!this.isPasswordValid) {
+				if (this.isPasswordPwned) {
+					showError(
+						this.t(
+							'softwarecatalog',
+							'This password has been found in data breaches and is not secure. Please choose a different password.',
+						),
+					)
+				} else {
+					showError(
+						this.t(
+							'softwarecatalog',
+							'Password does not meet all requirements',
+						),
+					)
+				}
+				return
+			}
+
+			this.passwordLoading = true
+
+			try {
+				await this.organisatieStore.changePassword(
+					this.username,
+					this.newPassword,
+				)
+				showSuccess(this.t('softwarecatalog', 'Password changed successfully'))
+				this.$emit('saved')
+			} catch (error) {
+				showError(
+					this.t('softwarecatalog', 'Failed to change password: {error}', {
+						error: error.message,
+					}),
+				)
+			} finally {
+				this.passwordLoading = false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.password-dialog {
+	padding: 12px;
+	min-width: 320px;
+	max-width: 400px;
+}
+
+.dialog-description {
+	margin: 0 0 12px 0;
+	font-size: 14px;
+	color: var(--color-text-lighter);
+}
+
+.password-input {
+	margin: 12px 0;
+}
+
+.compact-input {
+	margin: 8px 0;
+}
+
+.dialog-actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+	margin-top: 12px;
+	padding-top: 8px;
+	border-top: 1px solid var(--color-border);
+}
+
+/* Make NcTextField more compact */
+.compact-input :deep(.input-field) {
+	margin-bottom: 8px;
+}
+
+.compact-input :deep(.input-field__main-wrapper) {
+	min-height: 36px;
+}
+
+.compact-input :deep(.input-field__input) {
+	padding: 8px 12px;
+	font-size: 14px;
+}
+
+/* Password Requirements Styles */
+.password-requirements {
+	margin: 16px 0;
+	padding: 12px;
+	background: var(--color-background-dark);
+	border-radius: 6px;
+	border: 1px solid var(--color-border);
+}
+
+.password-requirements h4 {
+	margin: 0 0 8px 0;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--color-text-dark);
+}
+
+.requirements-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.requirements-list li {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 4px 0;
+	font-size: 13px;
+	color: var(--color-text-lighter);
+	transition: color 0.2s ease;
+}
+
+.requirements-list li.requirement-met {
+	color: var(--color-success);
+}
+
+.check-icon {
+	color: var(--color-success);
+}
+
+.close-icon {
+	color: var(--color-error);
+}
+
+.loading-icon {
+	color: var(--color-text-lighter);
+}
+
+/* WCAG 2.3.3 — the password-requirement colour transition is decorative; the
+   met/unmet colour still changes, it just changes instantly. */
+@media (prefers-reduced-motion: reduce) {
+	.requirements-list li {
+		transition: none;
+	}
+}
+</style>
diff --git a/src/dialogs/ManageUserGroupsDialog.vue b/src/dialogs/ManageUserGroupsDialog.vue
new file mode 100644
index 00000000..3ddca3ba
--- /dev/null
+++ b/src/dialogs/ManageUserGroupsDialog.vue
@@ -0,0 +1,231 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>
+  - SPDX-License-Identifier: EUPL-1.2
+  -
+  - Group-membership dialog for the Nextcloud user account behind a
+  - contactpersoon. Extracted from ContactpersonenList.vue per ADR-004/ADR-012:
+  - a dialog lives in its own file under src/dialogs/ and is imported by its
+  - parent.
+  -
+  - The dialog owns the selection it is editing: it fetches the user's CURRENT
+  - groups on mount (falling back to the groups already on the contactpersoon if
+  - that call fails), toggles them locally, and writes them back through the
+  - organisatie store.
+  -
+  - It does NOT touch the parent's `organisationData` — the freshly-read groups
+  - are reported up via `groups-loaded`, and the saved ones via `saved`, so the
+  - list row stays the parent's responsibility.
+  -
+  - @spec openspec/specs/fe-organizations/spec.md
+  -->
+
+<template>
+	<NcDialog
+		:name="t('softwarecatalog', 'Manage User Groups')"
+		size="normal"
+		@closing="$emit('close')">
+		<div class="groups-dialog">
+			<p class="dialog-description">
+				{{
+					t("softwarecatalog", "Select groups for user: {username}", {
+						username: contactpersoon?.user?.username,
+					})
+				}}
+			</p>
+
+			<div class="groups-selection">
+				<NcCheckboxRadioSwitch
+					v-for="group in availableGroups"
+					:key="group.id"
+					:model-value="selectedGroups.includes(group.id)"
+					type="checkbox"
+					class="compact-checkbox"
+					@update:model-value="toggleGroup(group.id, $event)">
+					{{ group.name }}
+					<template #description>
+						{{ group.description }}
+					</template>
+				</NcCheckboxRadioSwitch>
+			</div>
+
+			<div class="dialog-actions">
+				<NcButton variant="secondary" @click="$emit('close')">
+					{{ t("softwarecatalog", "Cancel") }}
+				</NcButton>
+				<NcButton
+					variant="primary"
+					:disabled="groupsLoading"
+					@click="saveGroups">
+					<template #icon>
+						<NcLoadingIcon v-if="groupsLoading" :size="20" />
+					</template>
+					{{ t("softwarecatalog", "Save") }}
+				</NcButton>
+			</div>
+		</div>
+	</NcDialog>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcCheckboxRadioSwitch,
+	NcDialog,
+	NcLoadingIcon,
+} from '@nextcloud/vue'
+
+import { showSuccess, showError } from '@nextcloud/dialogs'
+import { useOrganisatieStore } from '../store/modules/organisatie.js'
+
+export default {
+	name: 'ManageUserGroupsDialog',
+
+	components: {
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcDialog,
+		NcLoadingIcon,
+	},
+
+	props: {
+		/**
+		 * The contact person whose user-group membership is being edited.
+		 * Needs `id` and `user.username` / `user.groups`.
+		 */
+		contactpersoon: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	emits: ['close', 'saved', 'groups-loaded'],
+
+	data() {
+		return {
+			selectedGroups: [],
+			groupsLoading: false,
+		}
+	},
+
+	computed: {
+		/**
+		 * @spec openspec/specs/fe-organizations/spec.md
+		 */
+		organisatieStore() {
+			return useOrganisatieStore()
+		},
+
+		/**
+		 * @spec openspec/specs/fe-organizations/spec.md
+		 */
+		availableGroups() {
+			return this.organisatieStore.getAvailableGroups
+		},
+	},
+
+	/**
+	 * @spec openspec/specs/fe-organizations/spec.md
+	 */
+	async mounted() {
+		try {
+			// Fetch user-specific info to get current groups.
+			const userInfo = await this.organisatieStore.fetchUserInfo(
+				this.contactpersoon.id,
+			)
+			this.selectedGroups = [...(userInfo.groups || [])]
+
+			// Report the fresh groups so the list row shows the correct value.
+			this.$emit('groups-loaded', userInfo.groups || [])
+		} catch (error) {
+			console.error('Error fetching user info for groups dialog:', error)
+			// Fallback to existing groups.
+			this.selectedGroups = [...this.contactpersoon.user.groups]
+			// Note: Available groups should already be loaded by the parent.
+		}
+	},
+
+	methods: {
+		/**
+		 * @spec openspec/specs/fe-organizations/spec.md
+		 */
+		toggleGroup(groupId, checked) {
+			if (checked) {
+				if (!this.selectedGroups.includes(groupId)) {
+					this.selectedGroups.push(groupId)
+				}
+			} else {
+				const index = this.selectedGroups.indexOf(groupId)
+				if (index > -1) {
+					this.selectedGroups.splice(index, 1)
+				}
+			}
+		},
+
+		/**
+		 * Save user groups.
+		 * @return {Promise<void>}
+		  * @spec openspec/specs/fe-organizations/spec.md
+		 */
+		async saveGroups() {
+			this.groupsLoading = true
+
+			try {
+				await this.organisatieStore.updateUserGroups(
+					this.contactpersoon.user.username,
+					this.selectedGroups,
+				)
+
+				showSuccess(
+					this.t('softwarecatalog', 'User groups updated successfully'),
+				)
+				this.$emit('saved', [...this.selectedGroups])
+			} catch (error) {
+				showError(
+					this.t('softwarecatalog', 'Failed to update user groups: {error}', {
+						error: error.message,
+					}),
+				)
+			} finally {
+				this.groupsLoading = false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.groups-dialog {
+	padding: 12px;
+	min-width: 350px;
+	max-width: 450px;
+}
+
+.dialog-description {
+	margin: 0 0 12px 0;
+	font-size: 14px;
+	color: var(--color-text-lighter);
+}
+
+.groups-selection {
+	margin: 12px 0;
+	max-height: 200px;
+	overflow-y: auto;
+}
+
+.groups-selection .checkbox-radio-switch {
+	margin-bottom: 6px;
+}
+
+.compact-checkbox {
+	padding: 4px 0;
+}
+
+.dialog-actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+	margin-top: 12px;
+	padding-top: 8px;
+	border-top: 1px solid var(--color-border);
+}
+</style>
diff --git a/src/modals/AlwaysVisibleSectionInfoModal.vue b/src/modals/AlwaysVisibleSectionInfoModal.vue
new file mode 100644
index 00000000..91a42d67
--- /dev/null
+++ b/src/modals/AlwaysVisibleSectionInfoModal.vue
@@ -0,0 +1,74 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>
+  - SPDX-License-Identifier: EUPL-1.2
+  -
+  - Info modal for AlwaysVisibleSection — the panel behind the (i) button in a
+  - settings section header. Extracted from AlwaysVisibleSection.vue per
+  - ADR-004/ADR-012: a modal lives in its own file under src/modals/ and is
+  - imported by its parent.
+  -
+  - Deliberately NOT shared with CollapsibleSectionInfoModal. The two render
+  - different DOM: this one leans on NcModal's own `title`/`name` chrome and has
+  - no footer, while the collapsible variant paints its own <h2> header and a
+  - Close button inside the body. Folding them together would mean a variant
+  - flag switching between two disjoint templates and two disjoint stylesheets —
+  - two components wearing one filename — and would risk changing the rendered
+  - output of one of them.
+  -
+  - Presentation only: the section owns the `info-content` / `info` slot API and
+  - forwards the resolved content into this modal's default slot.
+  -
+  - @spec openspec/specs/fe-shell-navigation/spec.md
+  -->
+
+<template>
+	<NcModal
+		:show="show"
+		:title="name + ' Information'"
+		:name="name + ' Info'"
+		@close="$emit('close')">
+		<div class="info-content">
+			<slot />
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { NcModal } from '@nextcloud/vue'
+
+export default defineComponent({
+	name: 'AlwaysVisibleSectionInfoModal',
+
+	components: {
+		NcModal,
+	},
+
+	props: {
+		/**
+		 * Section name — used to build the modal title.
+		 */
+		name: {
+			type: String,
+			required: true,
+		},
+
+		/**
+		 * Whether the modal is open.
+		 */
+		show: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	emits: ['close'],
+})
+</script>
+
+<style scoped>
+.info-content {
+	max-width: 600px;
+	line-height: 1.6;
+}
+</style>
diff --git a/src/modals/CollapsibleSectionInfoModal.vue b/src/modals/CollapsibleSectionInfoModal.vue
new file mode 100644
index 00000000..434b2073
--- /dev/null
+++ b/src/modals/CollapsibleSectionInfoModal.vue
@@ -0,0 +1,134 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>
+  - SPDX-License-Identifier: EUPL-1.2
+  -
+  - Info modal for CollapsibleSection — the panel behind the (i) button in a
+  - collapsible settings section header. Extracted from CollapsibleSection.vue
+  - per ADR-004/ADR-012: a modal lives in its own file under src/modals/ and is
+  - imported by its parent.
+  -
+  - Deliberately NOT shared with AlwaysVisibleSectionInfoModal. This variant
+  - paints its own <h2> header and a Close button inside the modal body and
+  - carries its own :deep() typography rules for slotted content; the
+  - always-visible variant uses NcModal's built-in title chrome and has no
+  - footer. See the note in AlwaysVisibleSectionInfoModal.vue.
+  -
+  - Presentation only: the section owns the `info-content` / `info` slot API and
+  - forwards the resolved content (including the empty-state fallback) into this
+  - modal's default slot.
+  -
+  - @spec openspec/specs/fe-shell-navigation/spec.md
+  -->
+
+<template>
+	<NcModal @close="$emit('close')">
+		<div class="info-modal">
+			<div class="modal-header">
+				<h2>{{ name }} - Information</h2>
+			</div>
+			<div class="modal-content">
+				<slot />
+			</div>
+			<div class="modal-footer">
+				<NcButton @click="$emit('close')">
+					Close
+				</NcButton>
+			</div>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { NcButton, NcModal } from '@nextcloud/vue'
+
+export default {
+	name: 'CollapsibleSectionInfoModal',
+
+	components: {
+		NcButton,
+		NcModal,
+	},
+
+	props: {
+		/**
+		 * Section name — used to build the modal heading.
+		 */
+		name: {
+			type: String,
+			required: true,
+		},
+	},
+
+	emits: ['close'],
+}
+</script>
+
+<style scoped>
+/* Info Modal Styles */
+.info-modal {
+	padding: 20px;
+	max-width: 600px;
+	max-height: 80vh;
+	overflow-y: auto;
+}
+
+.modal-header {
+	margin-bottom: 16px;
+	padding-bottom: 16px;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.modal-header h2 {
+	margin: 0;
+	font-size: 20px;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+
+.modal-content {
+	margin-bottom: 20px;
+	line-height: 1.6;
+}
+
+.modal-content :deep(h3) {
+	margin-top: 20px;
+	margin-bottom: 12px;
+	font-size: 16px;
+	font-weight: 600;
+}
+
+.modal-content :deep(h4) {
+	margin-top: 16px;
+	margin-bottom: 8px;
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.modal-content :deep(ul) {
+	padding-left: 20px;
+	margin-bottom: 16px;
+}
+
+.modal-content :deep(li) {
+	margin-bottom: 4px;
+}
+
+.modal-content :deep(p) {
+	margin-bottom: 12px;
+}
+
+.modal-content :deep(code) {
+	background-color: var(--color-background-dark);
+	padding: 2px 6px;
+	border-radius: 4px;
+	font-family: monospace;
+	font-size: 13px;
+}
+
+.modal-footer {
+	display: flex;
+	justify-content: flex-end;
+	padding-top: 16px;
+	border-top: 1px solid var(--color-border);
+}
+</style>
diff --git a/src/views/settings/sections/EmailConfiguration.vue b/src/views/settings/sections/EmailConfiguration.vue
index f1c04287..d39ddff4 100644
--- a/src/views/settings/sections/EmailConfiguration.vue
+++ b/src/views/settings/sections/EmailConfiguration.vue
@@ -382,7 +382,12 @@
 				<h4>Email Templates</h4>
 				<p>Customize the content and appearance of system emails:</p>
 				<ul>
-					<li><strong>Template Variables</strong> - Use placeholders like {{ organization.name }} and {{ user.email }}</li>
+					<!-- v-pre: the braces below are LITERAL documentation of the email
+					     template placeholders, not Vue interpolation. Without it Vue
+					     compiles them to `organization.name` / `user.email` lookups on
+					     this component, neither of which exists, and rendering the panel
+					     throws "Cannot read properties of undefined (reading 'name')". -->
+					<li v-pre><strong>Template Variables</strong> - Use placeholders like {{ organization.name }} and {{ user.email }}</li>
 					<li><strong>HTML Support</strong> - Include formatting, links, and basic styling</li>
 					<li><strong>Personalization</strong> - Templates are automatically populated with relevant data</li>
 					<li><strong>Multi-language</strong> - Support for different languages and locales</li>
diff --git a/tests/vitest/sectionInfoSlot.spec.js b/tests/vitest/sectionInfoSlot.spec.js
new file mode 100644
index 00000000..7969d529
--- /dev/null
+++ b/tests/vitest/sectionInfoSlot.spec.js
@@ -0,0 +1,147 @@
+// @vitest-environment jsdom
+
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction / SoftwareCatalog Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Regression tests for the settings-section INFO SLOT CONTRACT.
+ *
+ * Why this exists
+ * ---------------
+ * `AlwaysVisibleSection.vue` declared `<slot name="info" />`, but FOUR of its
+ * five callers pass `<template #info-content>` — the name `CollapsibleSection`
+ * uses:
+ *
+ *   src/views/settings/sections/UserGroupsConfiguration.vue      #info-content
+ *   src/views/settings/sections/EmailConfiguration.vue           #info-content
+ *   src/views/settings/sections/ArchiMateImportExport.vue        #info-content
+ *   src/views/settings/sections/OrganizationSynchronization.vue  #info-content
+ *   src/views/settings/sections/VersionInformation.vue           #info
+ *
+ * All five also set `:has-info-content="true"`, so the (i) button rendered and
+ * opened a modal that was COMPLETELY EMPTY for four of them.
+ *
+ * A mis-named slot is invisible: Vue drops unmatched slot content silently, the
+ * build succeeds, eslint is happy, and the modal still opens. Nothing short of
+ * mounting the component and looking inside the modal can see it — which is
+ * exactly what these tests do.
+ *
+ * Both sections now resolve `info-content` first and fall back to `info`, so
+ * either name works and no caller can be silently empty. Each name is asserted
+ * SEPARATELY: a fix that only honoured `info-content` would still leave
+ * VersionInformation blank, and the previous wiring passed the `info` case
+ * while failing every `info-content` one.
+ *
+ * @spec openspec/specs/fe-shell-navigation/spec.md
+ */
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import AlwaysVisibleSection from '../../src/components/AlwaysVisibleSection.vue'
+import CollapsibleSection from '../../src/components/CollapsibleSection.vue'
+
+const INFO_CONTENT_MARKUP = '<p class="probe-info-content">Info content slot rendered</p>'
+const INFO_MARKUP = '<p class="probe-info">Info slot rendered</p>'
+
+/**
+ * Mount a section and press its (i) button.
+ *
+ * With `showSaveButton` / `showRefreshButton` left at their defaults the info
+ * button is the only button in the header, so it can be addressed positionally
+ * without depending on an icon implementation detail.
+ *
+ * @param {object} component - The section component to mount.
+ * @param {object} slots - Slot definitions to pass to the section.
+ * @return {Promise<object>} The mounted wrapper, with the info modal open.
+ */
+async function mountAndOpenInfo(component, slots) {
+	const wrapper = mount(component, {
+		props: {
+			name: 'User groups',
+			hasInfoContent: true,
+		},
+		slots,
+	})
+
+	const buttons = wrapper.findAll('button')
+	expect(buttons.length).toBeGreaterThan(0)
+	await buttons[0].trigger('click')
+
+	return wrapper
+}
+
+describe('AlwaysVisibleSection info modal', () => {
+	it('does not render the info panel before the (i) button is pressed', () => {
+		const wrapper = mount(AlwaysVisibleSection, {
+			props: { name: 'User groups', hasInfoContent: true },
+			slots: { 'info-content': INFO_CONTENT_MARKUP },
+		})
+
+		expect(wrapper.find('.modal-stub').exists()).toBe(false)
+		expect(wrapper.find('.probe-info-content').exists()).toBe(false)
+	})
+
+	it('renders #info-content inside the info modal', async () => {
+		const wrapper = await mountAndOpenInfo(AlwaysVisibleSection, {
+			'info-content': INFO_CONTENT_MARKUP,
+		})
+
+		const modal = wrapper.find('.modal-stub')
+		expect(modal.exists()).toBe(true)
+		expect(modal.find('.probe-info-content').exists()).toBe(true)
+		expect(modal.text()).toContain('Info content slot rendered')
+	})
+
+	it('still renders #info inside the info modal', async () => {
+		const wrapper = await mountAndOpenInfo(AlwaysVisibleSection, {
+			info: INFO_MARKUP,
+		})
+
+		const modal = wrapper.find('.modal-stub')
+		expect(modal.exists()).toBe(true)
+		expect(modal.find('.probe-info').exists()).toBe(true)
+		expect(modal.text()).toContain('Info slot rendered')
+	})
+
+	it('prefers #info-content over #info when both are supplied', async () => {
+		const wrapper = await mountAndOpenInfo(AlwaysVisibleSection, {
+			'info-content': INFO_CONTENT_MARKUP,
+			info: INFO_MARKUP,
+		})
+
+		const modal = wrapper.find('.modal-stub')
+		expect(modal.find('.probe-info-content').exists()).toBe(true)
+		expect(modal.find('.probe-info').exists()).toBe(false)
+	})
+})
+
+describe('CollapsibleSection info modal', () => {
+	it('renders #info-content inside the info modal', async () => {
+		const wrapper = await mountAndOpenInfo(CollapsibleSection, {
+			'info-content': INFO_CONTENT_MARKUP,
+		})
+
+		const modal = wrapper.find('.modal-stub')
+		expect(modal.exists()).toBe(true)
+		expect(modal.find('.probe-info-content').exists()).toBe(true)
+	})
+
+	it('also accepts #info, so both sections share one slot API', async () => {
+		const wrapper = await mountAndOpenInfo(CollapsibleSection, {
+			info: INFO_MARKUP,
+		})
+
+		const modal = wrapper.find('.modal-stub')
+		expect(modal.exists()).toBe(true)
+		expect(modal.find('.probe-info').exists()).toBe(true)
+	})
+
+	it('falls back to the empty-state text when neither slot is supplied', async () => {
+		const wrapper = await mountAndOpenInfo(CollapsibleSection, {})
+
+		const modal = wrapper.find('.modal-stub')
+		expect(modal.exists()).toBe(true)
+		expect(modal.text()).toContain('No additional information available.')
+	})
+})
diff --git a/tests/vitest/settingsInfoPanels.spec.js b/tests/vitest/settingsInfoPanels.spec.js
new file mode 100644
index 00000000..de85a2bd
--- /dev/null
+++ b/tests/vitest/settingsInfoPanels.spec.js
@@ -0,0 +1,159 @@
+// @vitest-environment jsdom
+
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction / SoftwareCatalog Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Every settings-section info panel must actually RENDER.
+ *
+ * Why this exists
+ * ---------------
+ * These panels were dead code for a long time. `AlwaysVisibleSection` declared
+ * `<slot name="info" />` while four of its five callers passed `#info-content`,
+ * so Vue silently dropped their markup and the (i) button opened an empty
+ * modal. Nothing rendered it, so nothing could fail on it — and one panel had
+ * been quietly broken the whole time:
+ *
+ *     <li>… Use placeholders like {{ organization.name }} and {{ user.email }}</li>
+ *
+ * Those braces are LITERAL documentation of the e-mail template placeholders,
+ * but Vue compiles them as interpolation against the component, which has no
+ * `organization` and no `user`. The moment the slot name was fixed and the
+ * panel rendered for the first time, it threw
+ * `TypeError: Cannot read properties of undefined (reading 'name')` and broke
+ * every Playwright settings test through their shared "no console errors"
+ * assertion.
+ *
+ * What this guards
+ * ----------------
+ * The sibling spec (`sectionInfoSlot.spec.js`) proves the slot MECHANISM
+ * forwards content, but it does so with synthetic probe markup — which is
+ * exactly why it could not see this. This spec renders the REAL markup of every
+ * `#info` / `#info-content` block under `src/views/settings/sections/` and
+ * fails if any of them throws.
+ *
+ * It works on the template source rather than mounting the whole section
+ * component on purpose: the panels are static documentation, and mounting a
+ * section drags in the Pinia stores, axios and the Nextcloud runtime that this
+ * OFFLINE suite deliberately does without. Compiling and rendering the block
+ * reproduces the real failure exactly, with none of that.
+ *
+ * @spec openspec/specs/fe-shell-navigation/spec.md
+ */
+
+import { describe, it, expect } from 'vitest'
+import { readFileSync, readdirSync } from 'fs'
+import path from 'path'
+import { parse } from '@vue/compiler-sfc'
+import { compile } from '@vue/compiler-dom'
+import * as VueRuntime from 'vue'
+import { createApp } from 'vue'
+
+const SECTIONS_DIR = path.resolve(import.meta.dirname, '../../src/views/settings/sections')
+
+/**
+ * Pull the inner markup of every `<template #info>` / `<template #info-content>`
+ * block out of an SFC source.
+ *
+ * @param {string} source - Full `.vue` file contents.
+ * @return {string[]} The inner markup of each info block found.
+ */
+function extractInfoBlocks(source) {
+	const { descriptor } = parse(source)
+	if (!descriptor.template || !descriptor.template.ast) {
+		return []
+	}
+
+	const blocks = []
+	const isInfoSlotTemplate = (node) => node.tag === 'template'
+		&& (node.props || []).some((prop) =>
+			// 7 === DIRECTIVE
+			prop.type === 7
+			&& prop.name === 'slot'
+			&& prop.arg
+			&& ['info', 'info-content'].includes(prop.arg.content),
+		)
+
+	const walk = (nodes) => {
+		for (const node of nodes || []) {
+			if (isInfoSlotTemplate(node) && node.children && node.children.length) {
+				const start = node.children[0].loc.start.offset
+				const end = node.children[node.children.length - 1].loc.end.offset
+				blocks.push(source.slice(start, end))
+			}
+			walk(node.children)
+		}
+	}
+	walk([descriptor.template.ast])
+
+	return blocks
+}
+
+/**
+ * Compile a template fragment and render it into a detached element.
+ *
+ * @param {string} markup - The template fragment to render.
+ * @return {{ error: (Error|null), text: string }} Render outcome.
+ */
+function renderFragment(markup) {
+	const { code } = compile(markup, {
+		mode: 'function',
+		hoistStatic: false,
+		prefixIdentifiers: true,
+	})
+	// eslint-disable-next-line no-new-func
+	const render = new Function('Vue', code)(VueRuntime)
+
+	const host = document.createElement('div')
+	const app = createApp({ render })
+	let error = null
+	app.config.errorHandler = (err) => {
+		error = err
+	}
+	app.mount(host)
+	const text = host.textContent
+	app.unmount()
+
+	return { error, text }
+}
+
+const sectionFiles = readdirSync(SECTIONS_DIR)
+	.filter((file) => file.endsWith('.vue'))
+	.map((file) => ({ file, source: readFileSync(path.join(SECTIONS_DIR, file), 'utf8') }))
+	.map((entry) => ({ ...entry, blocks: extractInfoBlocks(entry.source) }))
+	.filter((entry) => entry.blocks.length > 0)
+
+describe('settings section info panels', () => {
+	it('finds the info panels it is supposed to be guarding', () => {
+		// A positive control: if the extraction silently stopped matching, every
+		// per-file assertion below would vacuously pass.
+		expect(sectionFiles.map((entry) => entry.file).sort()).toEqual([
+			'ArchiMateImportExport.vue',
+			'EmailConfiguration.vue',
+			'OrganizationSynchronization.vue',
+			'UserGroupsConfiguration.vue',
+			'VersionInformation.vue',
+		])
+	})
+
+	for (const { file, blocks } of sectionFiles) {
+		it(`${file} renders its info panel without throwing`, () => {
+			for (const markup of blocks) {
+				const { error, text } = renderFragment(markup)
+				expect(error).toBeNull()
+				expect(text.trim().length).toBeGreaterThan(0)
+			}
+		})
+	}
+
+	it('EmailConfiguration shows its placeholder braces literally', () => {
+		const entry = sectionFiles.find((s) => s.file === 'EmailConfiguration.vue')
+		const { text } = renderFragment(entry.blocks[0])
+
+		// `v-pre` keeps these as documentation. Interpolating them instead is the
+		// exact regression this file exists for, and deleting the line to "fix"
+		// the crash would fail here too.
+		expect(text).toContain('{{ organization.name }}')
+		expect(text).toContain('{{ user.email }}')
+	})
+})
diff --git a/tests/vitest/stubs/nextcloud-vue.js b/tests/vitest/stubs/nextcloud-vue.js
new file mode 100644
index 00000000..d2664086
--- /dev/null
+++ b/tests/vitest/stubs/nextcloud-vue.js
@@ -0,0 +1,92 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction / SoftwareCatalog Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Vitest stub for `@nextcloud/vue`.
+ *
+ * The OFFLINE vitest suite has no Nextcloud runtime, and the real package is a
+ * large ESM bundle that expects one. These stubs are deliberately minimal: each
+ * one renders a SINGLE root element and passes its slots straight through, so
+ * attribute/listener fallthrough behaves the way the real components do and a
+ * test can click a button or look inside a modal.
+ *
+ * `NcModal` honours `show` the way the real component does (default `true`,
+ * nothing rendered when false) — the section specs depend on the info panel
+ * being absent until the (i) button is pressed.
+ *
+ * Anything asserted THROUGH these stubs must be app-owned behaviour (which slot
+ * a section forwards, which button toggles what), never @nextcloud/vue's own.
+ */
+
+import { defineComponent, h } from 'vue'
+
+/**
+ * Build a stub that renders one root element and forwards the default slot.
+ *
+ * @param {string} name - Component name.
+ * @param {string} tag - Root element tag to render.
+ * @param {string} className - Class applied to the root element.
+ * @return {object} A Vue component definition.
+ */
+function passthrough(name, tag, className) {
+	return defineComponent({
+		name,
+		setup(props, { slots }) {
+			return () => h(tag, { class: className }, slots.default ? slots.default() : [])
+		},
+	})
+}
+
+export const NcSettingsSection = defineComponent({
+	name: 'NcSettingsSection',
+	props: {
+		name: { type: String, default: '' },
+		description: { type: String, default: '' },
+		docUrl: { type: String, default: '' },
+	},
+	setup(props, { slots }) {
+		return () => h('section', { class: 'settings-section' }, slots.default ? slots.default() : [])
+	},
+})
+
+export const NcButton = defineComponent({
+	name: 'NcButton',
+	props: {
+		variant: { type: String, default: 'secondary' },
+		disabled: { type: Boolean, default: false },
+	},
+	setup(props, { slots }) {
+		return () => h(
+			'button',
+			{ disabled: props.disabled },
+			[
+				slots.icon ? slots.icon() : null,
+				slots.default ? slots.default() : null,
+			],
+		)
+	},
+})
+
+export const NcModal = defineComponent({
+	name: 'NcModal',
+	props: {
+		// The real NcModal is open unless told otherwise.
+		show: { type: Boolean, default: true },
+		title: { type: String, default: '' },
+		name: { type: String, default: '' },
+	},
+	setup(props, { slots }) {
+		return () => (props.show
+			? h('div', { class: 'modal-stub', 'data-modal-title': props.title }, slots.default ? slots.default() : [])
+			: null)
+	},
+})
+
+export const NcLoadingIcon = passthrough('NcLoadingIcon', 'span', 'loading-icon-stub')
+export const NcNoteCard = passthrough('NcNoteCard', 'div', 'note-card-stub')
+export const NcEmptyContent = passthrough('NcEmptyContent', 'div', 'empty-content-stub')
+export const NcActions = passthrough('NcActions', 'div', 'actions-stub')
+export const NcActionButton = passthrough('NcActionButton', 'button', 'action-button-stub')
+export const NcDialog = passthrough('NcDialog', 'div', 'dialog-stub')
+export const NcTextField = passthrough('NcTextField', 'input', 'text-field-stub')
+export const NcCheckboxRadioSwitch = passthrough('NcCheckboxRadioSwitch', 'label', 'checkbox-stub')
diff --git a/vitest.config.js b/vitest.config.js
index a058b282..9d2aa6ea 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -12,9 +12,17 @@
  *   • src/store/modules/navigation.js — the UI navigation Pinia store
  *     (selected view / organisatie / modal / dialog + the consume-once
  *     transferData handoff), driven through a real Pinia instance.
+ *   • src/components/*Section.vue — the settings-section SLOT CONTRACT, which
+ *     is the one thing about those components that no other check can see:
+ *     a mis-named slot renders NOTHING and throws no error anywhere.
  *
- * These need no DOM, so the environment is `node`. The few @nextcloud/*
- * runtime packages a store module drags in are aliased to lightweight stubs.
+ * Most specs need no DOM, so the default environment stays `node`. The specs
+ * that mount a component opt into jsdom per file with a
+ * `// @vitest-environment jsdom` docblock, and `@vitejs/plugin-vue` compiles
+ * the SFCs they import.
+ *
+ * The few @nextcloud/* runtime packages a store module or a component drags in
+ * are aliased to lightweight stubs.
  *
  * The existing Jest suite (jest + co-located *.spec.js under src/) is
  * UNTOUCHED — Vitest only collects tests/vitest/**.
@@ -22,28 +30,40 @@
 
 const path = require('path')
 
-module.exports = {
-	test: {
-		environment: 'node',
-		globals: false,
-		include: ['tests/vitest/**/*.spec.{js,ts}'],
-		exclude: ['tests/e2e/**', 'tests/integration/**', 'src/**', 'node_modules/**'],
-	},
-	resolve: {
-		alias: [
-			{ find: '@', replacement: path.resolve(__dirname, 'src') },
-			{
-				find: /^@nextcloud\/router$/,
-				replacement: path.resolve(__dirname, 'tests/vitest/stubs/nextcloud-router.js'),
-			},
-			{
-				find: /^@nextcloud\/dialogs$/,
-				replacement: path.resolve(__dirname, 'tests/vitest/stubs/nextcloud-dialogs.js'),
-			},
-			{
-				find: /^@nextcloud\/l10n$/,
-				replacement: path.resolve(__dirname, 'tests/vitest/stubs/nextcloud-l10n.js'),
-			},
-		],
-	},
+// `@vitejs/plugin-vue` v6 is ESM-only while this config is CommonJS, so the
+// plugin is pulled in through a dynamic import from an async config factory
+// (Vite awaits a config exported as a function).
+module.exports = async () => {
+	const vue = (await import('@vitejs/plugin-vue')).default
+
+	return {
+		plugins: [vue()],
+		test: {
+			environment: 'node',
+			globals: false,
+			include: ['tests/vitest/**/*.spec.{js,ts}'],
+			exclude: ['tests/e2e/**', 'tests/integration/**', 'src/**', 'node_modules/**'],
+		},
+		resolve: {
+			alias: [
+				{ find: '@', replacement: path.resolve(__dirname, 'src') },
+				{
+					find: /^@nextcloud\/router$/,
+					replacement: path.resolve(__dirname, 'tests/vitest/stubs/nextcloud-router.js'),
+				},
+				{
+					find: /^@nextcloud\/dialogs$/,
+					replacement: path.resolve(__dirname, 'tests/vitest/stubs/nextcloud-dialogs.js'),
+				},
+				{
+					find: /^@nextcloud\/l10n$/,
+					replacement: path.resolve(__dirname, 'tests/vitest/stubs/nextcloud-l10n.js'),
+				},
+				{
+					find: /^@nextcloud\/vue$/,
+					replacement: path.resolve(__dirname, 'tests/vitest/stubs/nextcloud-vue.js'),
+				},
+			],
+		},
+	}
 }