Stage overlay card changes until save

patterns/delete-confirmation-overlay.html

@@ -143,7 +143,6 @@
           </ul>
 
           <div class="sg-delete-confirmation-pattern__actions">
-            <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--active" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
           </div>
         </div>
@@ -189,6 +188,13 @@
             </form>
           </div>
         </div>
+
+        <footer class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__actions-segment">
+          <div class="sg-delete-confirmation-pattern__actions sg-delete-confirmation-pattern__actions--footer">
+            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-cancel>Abbrechen</button>
+            <button class="sg-interaction-element sg-button sg-button--process" type="button" data-overlay-dialog-save>Speichern</button>
+          </div>
+        </footer>
       </article>
     </div>
   </section>
@@ -206,26 +212,23 @@
       const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]');
       const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]');
       const createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]');
-      const selectedListIds = new Set(
+      const isAddToListOverlay = stage.dataset.pattern === 'add-to-list-overlay';
+      const committedListIds = new Set(
         (stage.dataset.overlaySelectedLists ?? '')
           .split(',')
           .map((value) => value.trim())
           .filter(Boolean)
       );
+      let draftListIds = new Set(committedListIds);
+      let updateCreateListButtonState = () => {};
+      let resetAddToListDraftState = () => {};
 
-      const closeStageDialogs = () => {
+      const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => {
         stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
           dialog.hidden = true;
         });
-        if (createListSegment) {
+        if (isAddToListOverlay && resetAddToListDraft) {
-          createListSegment.hidden = true;
+          resetAddToListDraftState();
-        }
-        if (createListFormToggle) {
-          createListFormToggle.disabled = false;
-          createListFormToggle.setAttribute('aria-disabled', 'false');
-          createListFormToggle.setAttribute('aria-expanded', 'false');
-          createListFormToggle.classList.remove('sg-button--inactive');
-          createListFormToggle.classList.add('sg-button--active');
         }
         stage.dataset.dialogOpen = 'false';
       };
@@ -233,12 +236,10 @@
       const syncOverlayListState = () => {
         overlayListButtons.forEach((button) => {
           const listId = button.dataset.overlayListId;
-          const isSelected = Boolean(listId && selectedListIds.has(listId));
+          const isSelected = Boolean(listId && draftListIds.has(listId));
           button.dataset.selected = String(isSelected);
           button.setAttribute('aria-pressed', String(isSelected));
         });
-
-        stage.dataset.overlaySelectedLists = Array.from(selectedListIds).join(',');
       };
 
       if (confirmationInput && confirmationSubmitButton) {
@@ -266,10 +267,10 @@
               return;
             }
 
-            if (selectedListIds.has(listId)) {
+            if (draftListIds.has(listId)) {
-              selectedListIds.delete(listId);
+              draftListIds.delete(listId);
             } else {
-              selectedListIds.add(listId);
+              draftListIds.add(listId);
             }
 
             syncOverlayListState();
@@ -278,7 +279,7 @@
       }
 
       if (createListForm && createListFormToggle) {
-        const updateCreateListButtonState = () => {
+        updateCreateListButtonState = () => {
           if (!createListSubmitButton) {
             return;
           }
@@ -294,6 +295,33 @@
 
         createListNameInput?.addEventListener('input', updateCreateListButtonState);
         createListDescriptionInput?.addEventListener('input', updateCreateListButtonState);
+        createListForm.addEventListener('submit', (event) => {
+          event.preventDefault();
+        });
+
+        resetAddToListDraftState = () => {
+          draftListIds = new Set(committedListIds);
+          syncOverlayListState();
+
+          if (createListSegment) {
+            createListSegment.hidden = true;
+          }
+          if (createListFormToggle) {
+            createListFormToggle.disabled = false;
+            createListFormToggle.setAttribute('aria-disabled', 'false');
+            createListFormToggle.setAttribute('aria-expanded', 'false');
+            createListFormToggle.classList.remove('sg-button--inactive');
+            createListFormToggle.classList.add('sg-button--active');
+          }
+          if (createListNameInput) {
+            createListNameInput.value = '';
+          }
+          if (createListDescriptionInput) {
+            createListDescriptionInput.value = '';
+          }
+          updateCreateListButtonState();
+        };
+
         updateCreateListButtonState();
 
         createListFormToggle.addEventListener('click', (event) => {
@@ -310,7 +338,11 @@
         });
       }
 
-      closeStageDialogs();
+      if (isAddToListOverlay) {
+        resetAddToListDraftState();
+      }
+
+      closeStageDialogs({ resetAddToListDraft: false });
 
       stage.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
         link.addEventListener('click', (event) => {
@@ -323,7 +355,7 @@
             return;
           }
 
-          closeStageDialogs();
+          closeStageDialogs({ resetAddToListDraft: target === 'add-to-list' });
           dialog.hidden = false;
           stage.dataset.dialogOpen = 'true';
 
@@ -345,6 +377,25 @@
         });
       });
 
+      stage.querySelectorAll('[data-overlay-dialog-cancel]').forEach((button) => {
+        button.addEventListener('click', (event) => {
+          event.preventDefault();
+          closeStageDialogs({ resetAddToListDraft: true });
+        });
+      });
+
+      stage.querySelectorAll('[data-overlay-dialog-save]').forEach((button) => {
+        button.addEventListener('click', (event) => {
+          event.preventDefault();
+          if (isAddToListOverlay) {
+            committedListIds.clear();
+            draftListIds.forEach((value) => committedListIds.add(value));
+            stage.dataset.overlaySelectedLists = Array.from(committedListIds).join(',');
+          }
+          closeStageDialogs({ resetAddToListDraft: true });
+        });
+      });
+
       stage.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
         const button = wrap.querySelector('.sg-sandwich-button');
         const panel = wrap.querySelector('.sg-sandwich-menu-panel');

styles/27-patterns-delete-confirmation.css

@@ -64,7 +64,7 @@
   background: var(--surface-delete-confirmation-overlay);
 }
 
-.sg-delete-confirmation-pattern__floating-card > .sg-delete-confirmation-pattern__body:has(+ .sg-delete-confirmation-pattern__create-list-segment[hidden]) {
+.sg-delete-confirmation-pattern__actions-segment {
   border-bottom-left-radius: var(--radius-card);
   border-bottom-right-radius: var(--radius-card);
 }
@@ -156,6 +156,10 @@
   margin-top: var(--layout-delete-confirmation-actions-offset-block-start);
 }
 
+.sg-delete-confirmation-pattern__actions--footer {
+  margin-top: 0;
+}
+
 @media (max-width: 48rem) {
   .sg-delete-confirmation-pattern__actions {
     flex-wrap: wrap;