From e34285df391736c97f2359bb6c7461b87b1915ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 15 Jun 2026 11:09:31 +0200
Subject: [PATCH] Add create-list form reveal to overlay

---
 patterns/delete-confirmation-overlay.html  | 51 ++++++++++++++++++++++
 styles/27-patterns-delete-confirmation.css |  4 ++
 2 files changed, 55 insertions(+)

diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html
index 6ac1318..0c059b7 100644
--- a/patterns/delete-confirmation-overlay.html
+++ b/patterns/delete-confirmation-overlay.html
@@ -143,7 +143,47 @@
             </li>
           </ul>
 
+          <div class="sg-form-sections-card-wrapper sg-delete-confirmation-pattern__create-list-form" data-create-list-form hidden aria-label="Formular mit Abschnitten">
+            <form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
+              <div class="sg-form-sections-card__body" data-pattern-part="form-body">
+                <section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
+                  <div class="sg-form-sections-card__field-group">
+                    <label class="sg-labeled-input-row">
+                      <span class="sg-label">Name</span>
+                      <input
+                        class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                        type="text"
+                        placeholder="Name eingeben"
+                        aria-label="Name"
+                        maxlength="80"
+                      >
+                    </label>
+
+                    <label class="sg-labeled-input-row">
+                      <span class="sg-label">Beschreibung</span>
+                      <textarea
+                        class="sg-input-multi-line sg-form-inactive-selectable"
+                        rows="4"
+                        placeholder="Beschreibung eingeben"
+                        aria-label="Beschreibung"
+                        maxlength="350"
+                      ></textarea>
+                    </label>
+                  </div>
+                </section>
+              </div>
+
+              <footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
+                <div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
+                  <button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Zuruecksetzen</button>
+                  <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
+                </div>
+              </footer>
+            </form>
+          </div>
+
           <div class="sg-delete-confirmation-pattern__actions">
+            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
             <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
           </div>
         </div>
@@ -157,6 +197,8 @@
       const confirmationSubmitButton = stage.querySelector('[data-overlay-confirmation-submit]');
       const expectedConfirmationValue = stage.dataset.overlayConfirmationValue ?? '';
       const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]'));
+      const createListForm = stage.querySelector('[data-create-list-form]');
+      const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]');
       const selectedListIds = new Set(
         (stage.dataset.overlaySelectedLists ?? '')
           .split(',')
@@ -218,6 +260,15 @@
         });
       }
 
+      if (createListForm && createListFormToggle) {
+        createListFormToggle.addEventListener('click', (event) => {
+          event.preventDefault();
+          createListForm.hidden = false;
+          createListFormToggle.setAttribute('aria-expanded', 'true');
+          createListFormToggle.disabled = true;
+        });
+      }
+
       closeStageDialogs();
 
       stage.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
diff --git a/styles/27-patterns-delete-confirmation.css b/styles/27-patterns-delete-confirmation.css
index cf846bf..4d530e7 100644
--- a/styles/27-patterns-delete-confirmation.css
+++ b/styles/27-patterns-delete-confirmation.css
@@ -110,6 +110,10 @@
   background-image: url("../assets/icons/star-outline.svg");
 }
 
+.sg-delete-confirmation-pattern__create-list-form {
+  margin-top: var(--spacing-large);
+}
+
 .sg-delete-confirmation-pattern__text {
   margin: 0;
   color: var(--text-delete-confirmation-overlay);