feat(dialog): Custom-Dialoge mit View-Transition-Fade, Teardown in Closure

src/js/dialog.js

@@ -3,6 +3,20 @@
    Custom Dialog System (ersetzt native alert/confirm)
    ============================================= */
 
+/**
+ * Fuehrt eine DOM-Mutation mit nativem View-Transition-Fade aus.
+ * Feature-Detection-Fallback (Firefox < 144): instant.
+ * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block.
+ * @param {Function} mutate - synchrone DOM-Mutation
+ */
+function dialogViewTransition(mutate) {
+  if (document.startViewTransition) {
+    document.startViewTransition(mutate);
+  } else {
+    mutate();
+  }
+}
+
 const HellionDialog = {
   /** SVG-Icons je nach Dialog-Typ */
   _icons: {
@@ -64,9 +78,11 @@ const HellionDialog = {
       actions.className = 'dialog-actions';
 
       function cleanup(result) {
-        overlay.classList.remove('active');
         document.removeEventListener('keydown', keyHandler);
-        setTimeout(() => overlay.remove(), 200);
+        dialogViewTransition(() => {
+          overlay.classList.remove('active');
+          overlay.remove();
+        });
         resolve(result);
       }
 
@@ -108,8 +124,8 @@ const HellionDialog = {
       document.addEventListener('keydown', keyHandler);
 
       document.body.appendChild(overlay);
-      // Nächster Frame für CSS-Transition
-      requestAnimationFrame(() => {
+      // View-Transition uebernimmt das Fade; Fokus bleibt erhalten
+      dialogViewTransition(() => {
         overlay.classList.add('active');
         confirmBtn.focus();
       });