From fab8b2c4064b40d39b51be488c5266fcff768aaf 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:32:17 +0200
Subject: [PATCH] Hide create-list title until form opens

---
 patterns/delete-confirmation-overlay.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html
index c20d868..ce87d26 100644
--- a/patterns/delete-confirmation-overlay.html
+++ b/patterns/delete-confirmation-overlay.html
@@ -148,7 +148,7 @@
             <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>
 
-          <p class="sg-body sg-delete-confirmation-pattern__text sg-delete-confirmation-pattern__create-list-title">Füge das Unternehmen einer neuen Liste hinzu</p>
+          <p class="sg-body sg-delete-confirmation-pattern__text sg-delete-confirmation-pattern__create-list-title" data-create-list-title hidden>Füge das Unternehmen einer neuen Liste hinzu</p>
 
           <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">
@@ -201,6 +201,7 @@
       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 createListTitle = stage.querySelector('[data-create-list-title]');
       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"]');
@@ -218,6 +219,9 @@
         if (createListForm) {
           createListForm.hidden = true;
         }
+        if (createListTitle) {
+          createListTitle.hidden = true;
+        }
         if (createListFormToggle) {
           createListFormToggle.disabled = false;
           createListFormToggle.setAttribute('aria-disabled', 'false');
@@ -297,6 +301,9 @@
         createListFormToggle.addEventListener('click', (event) => {
           event.preventDefault();
           createListForm.hidden = false;
+          if (createListTitle) {
+            createListTitle.hidden = false;
+          }
           createListFormToggle.setAttribute('aria-expanded', 'true');
           createListFormToggle.classList.remove('sg-button--active');
           createListFormToggle.classList.add('sg-button--inactive');