Fix overlay pattern dimming and align VSF pages to shared overlay dialog contract

patterns/delete-confirmation-overlay.html

@@ -13,7 +13,7 @@
   <section id="pattern-overlay-card" class="sg-delete-confirmation-pattern">
     <p class="sg-preview-label">Pattern: Overlay Card</p>
 
-    <div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card">
+    <div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false">
       <article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" aria-label="Zu löschendes Objekt">
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
           <div class="sg-strong">Alcon Inc.</div>
@@ -25,6 +25,9 @@
                 <span class="sg-sandwich-button__line"></span>
               </span>
             </button>
+            <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
+              <a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="delete">Objekt löschen</a>
+            </div>
           </div>
         </header>
         <div class="sg-card-segment sg-card-segment--body sg-object-card__content">
@@ -38,7 +41,7 @@
         </footer>
       </article>
 
-      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="delete-confirmation-title">
+      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="delete-confirmation-title" data-overlay-dialog="delete" hidden>
         <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
           <p class="sg-body sg-delete-confirmation-pattern__text" id="delete-confirmation-title"><strong>Möchtest du Alcon Inc. wirklich löschen?</strong></p>
           <p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
@@ -55,13 +58,14 @@
           </label>
 
           <div class="sg-delete-confirmation-pattern__actions">
-            <button class="sg-interaction-element sg-button sg-button--active" type="button">Abbrechen</button>
+            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
             <button
               class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive"
               type="button"
               disabled
               aria-disabled="true"
               data-delete-confirmation-submit
+              data-overlay-dialog-close
             >
               Löschen
             </button>
@@ -87,6 +91,108 @@
       confirmationInput.addEventListener('input', updateDeleteConfirmationState);
       updateDeleteConfirmationState();
     }
+
+    const closeStageDialogs = (stage) => {
+      stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
+        dialog.hidden = true;
+      });
+      stage.dataset.dialogOpen = 'false';
+    };
+
+    document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
+      closeStageDialogs(stage);
+    });
+
+    document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
+      link.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const stage = link.closest('.sg-delete-confirmation-pattern__stage');
+        if (!stage) {
+          return;
+        }
+
+        const target = link.getAttribute('data-overlay-open-dialog');
+        const dialog = stage.querySelector(`[data-overlay-dialog="${target}"]`);
+        if (!dialog) {
+          return;
+        }
+
+        closeStageDialogs(stage);
+        dialog.hidden = false;
+        stage.dataset.dialogOpen = 'true';
+
+        const menuWrap = link.closest('.sg-sandwich-menu-wrap');
+        const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
+        if (menuWrap) {
+          menuWrap.dataset.open = 'false';
+        }
+        if (menuButton) {
+          menuButton.setAttribute('aria-expanded', 'false');
+        }
+      });
+    });
+
+    document.querySelectorAll('[data-overlay-dialog-close]').forEach((button) => {
+      button.addEventListener('click', (event) => {
+        event.preventDefault();
+        const stage = button.closest('.sg-delete-confirmation-pattern__stage');
+        if (!stage) {
+          return;
+        }
+        closeStageDialogs(stage);
+      });
+    });
+
+    document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
+      const button = wrap.querySelector('.sg-sandwich-button');
+      const panel = wrap.querySelector('.sg-sandwich-menu-panel');
+
+      if (!button) {
+        return;
+      }
+
+      button.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const nextState = wrap.dataset.open !== 'true';
+
+        document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
+          const otherButton = otherWrap.querySelector('.sg-sandwich-button');
+          otherWrap.dataset.open = 'false';
+          if (otherButton) {
+            otherButton.setAttribute('aria-expanded', 'false');
+          }
+        });
+
+        wrap.dataset.open = String(nextState);
+        button.setAttribute('aria-expanded', String(nextState));
+
+        if (!nextState || !panel) {
+          return;
+        }
+
+        wrap.dataset.align = 'right';
+        const panelRect = panel.getBoundingClientRect();
+        if (panelRect.left < 0) {
+          wrap.dataset.align = 'left';
+        }
+      });
+    });
+
+    document.addEventListener('click', (event) => {
+      if (event.target.closest('.sg-sandwich-menu-wrap')) {
+        return;
+      }
+
+      document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
+        const button = wrap.querySelector('.sg-sandwich-button');
+        wrap.dataset.open = 'false';
+        if (button) {
+          button.setAttribute('aria-expanded', 'false');
+        }
+      });
+    });
   </script>
 
 </body>

patterns/vsf-list-card.html

@@ -161,8 +161,8 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link" href="#!" data-vsf-open-dialog="edit">Editieren</a>
+              <a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="edit">Editieren</a>
-              <a class="sg-sandwich-menu-link" href="#!" data-vsf-open-dialog="delete">Liste loeschen</a>
+              <a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="delete">Liste loeschen</a>
             </div>
           </div>
         </header>
@@ -227,7 +227,7 @@
         </footer>
       </article>
 
-      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-vsf-dialog="edit" hidden>
+      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
         <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
           <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title"><strong>Liste editieren</strong></p>
           <div class="sg-form-sections-card__field-group">
@@ -241,7 +241,7 @@
             </label>
           </div>
           <div class="sg-delete-confirmation-pattern__actions">
-            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-vsf-dialog-close>Abbrechen</button>
+            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
             <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-edit-save>
               Speichern
             </button>
@@ -249,7 +249,7 @@
         </div>
       </article>
 
-      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-vsf-dialog="delete" hidden>
+      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
         <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
           <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
           <p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
@@ -258,7 +258,7 @@
             <input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-vsf-delete-confirmation-input>
           </label>
           <div class="sg-delete-confirmation-pattern__actions">
-            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-vsf-dialog-close>Abbrechen</button>
+            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
             <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-delete-confirmation-submit>
               Löschen
             </button>
@@ -402,7 +402,7 @@
       closeStageDialogs(stage);
     });
 
-    document.querySelectorAll('[data-vsf-open-dialog]').forEach((link) => {
+    document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
       link.addEventListener('click', (event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -412,8 +412,8 @@
           return;
         }
 
-        const target = link.getAttribute('data-vsf-open-dialog');
+        const target = link.getAttribute('data-overlay-open-dialog');
-        const dialog = stage.querySelector(`.sg-delete-confirmation-pattern__floating-card[data-vsf-dialog="${target}"]`);
+        const dialog = stage.querySelector(`.sg-delete-confirmation-pattern__floating-card[data-overlay-dialog="${target}"]`);
 
         if (!dialog) {
           return;
@@ -434,7 +434,7 @@
       });
     });
 
-    document.querySelectorAll('[data-vsf-dialog-close], [data-vsf-delete-confirmation-submit], [data-vsf-edit-save]').forEach((button) => {
+    document.querySelectorAll('[data-overlay-dialog-close], [data-vsf-delete-confirmation-submit], [data-vsf-edit-save]').forEach((button) => {
       button.addEventListener('click', (event) => {
         event.preventDefault();
         const stage = button.closest('.sg-delete-confirmation-pattern__stage');

patterns/vsf-list-detailseite.html

@@ -123,7 +123,7 @@
                     </span>
                   </button>
                   <div class="sg-sandwich-menu-panel" aria-label="Meldungsmenü" data-component-part="sandwich-panel">
-                    <a class="sg-sandwich-menu-link" href="#!" data-component-part="sandwich-menu-link" data-vsf-open-dialog="meldungen">Meldungen anpassen</a>
+                    <a class="sg-sandwich-menu-link" href="#!" data-component-part="sandwich-menu-link" data-overlay-open-dialog="meldungen">Meldungen anpassen</a>
                   </div>
                 </div>
               </div>
@@ -164,12 +164,12 @@
               </article>
             </div>
 
-            <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Meldungen anpassen" role="dialog" aria-modal="true" aria-labelledby="vsf-meldungen-overlay-title" data-vsf-dialog="meldungen" hidden>
+            <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Meldungen anpassen" role="dialog" aria-modal="true" aria-labelledby="vsf-meldungen-overlay-title" data-overlay-dialog="meldungen" hidden>
               <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
                 <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-meldungen-overlay-title"><strong>Meldungen anpassen</strong></p>
                 <p class="sg-body sg-delete-confirmation-pattern__text">Passe die Anzeige und Priorisierung der Meldungen an.</p>
                 <div class="sg-delete-confirmation-pattern__actions">
-                  <button class="sg-interaction-element sg-button sg-button--active" type="button" data-vsf-dialog-close>Schließen</button>
+                  <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Schließen</button>
                 </div>
               </div>
             </article>
@@ -378,37 +378,47 @@
         return;
       }
 
-      stage.querySelectorAll('[data-vsf-dialog]').forEach((dialog) => {
+      stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
         dialog.hidden = true;
       });
       stage.dataset.dialogOpen = 'false';
     };
 
-    document.querySelectorAll('[data-vsf-open-dialog]').forEach((link) => {
+    document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
       link.addEventListener('click', (event) => {
         event.preventDefault();
+        event.stopPropagation();
 
         const stage = link.closest('.sg-delete-confirmation-pattern__stage');
         if (!stage) {
           return;
         }
 
-        const target = link.getAttribute('data-vsf-open-dialog');
+        const target = link.getAttribute('data-overlay-open-dialog');
-        const dialog = stage.querySelector(`[data-vsf-dialog="${target}"]`);
+        const dialog = stage.querySelector(`[data-overlay-dialog="${target}"]`);
         if (!dialog) {
           return;
         }
 
-        stage.querySelectorAll('[data-vsf-dialog]').forEach((otherDialog) => {
+        stage.querySelectorAll('[data-overlay-dialog]').forEach((otherDialog) => {
           otherDialog.hidden = true;
         });
 
         dialog.hidden = false;
         stage.dataset.dialogOpen = 'true';
+
+        const menuWrap = link.closest('.sg-sandwich-menu-wrap');
+        const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
+        if (menuWrap) {
+          menuWrap.dataset.open = 'false';
+        }
+        if (menuButton) {
+          menuButton.setAttribute('aria-expanded', 'false');
+        }
       });
     });
 
-    document.querySelectorAll('[data-vsf-dialog-close]').forEach((button) => {
+    document.querySelectorAll('[data-overlay-dialog-close]').forEach((button) => {
       button.addEventListener('click', () => {
         const stage = button.closest('.sg-delete-confirmation-pattern__stage');
         closeVsfDialog(stage);
@@ -564,7 +574,7 @@
         });
       }
 
-      if (!event.target.closest('.sg-delete-confirmation-pattern__floating-card') && !event.target.closest('[data-vsf-open-dialog]')) {
+      if (!event.target.closest('.sg-delete-confirmation-pattern__floating-card') && !event.target.closest('[data-overlay-open-dialog]')) {
         document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
           if (stage.dataset.dialogOpen === 'true') {
             closeVsfDialog(stage);