Activate create-list submit on input

patterns/delete-confirmation-overlay.html

@@ -143,6 +143,11 @@
             </li>
           </ul>
 
+          <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 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">
@@ -181,11 +186,6 @@
               </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>
       </article>
     </div>
@@ -199,6 +199,9 @@
       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 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(
         (stage.dataset.overlaySelectedLists ?? '')
           .split(',')
@@ -210,6 +213,16 @@
         stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
           dialog.hidden = true;
         });
+        if (createListForm) {
+          createListForm.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');
+        }
         stage.dataset.dialogOpen = 'false';
       };
 
@@ -261,11 +274,33 @@
       }
 
       if (createListForm && createListFormToggle) {
+        const updateCreateListButtonState = () => {
+          if (!createListSubmitButton) {
+            return;
+          }
+
+          const hasName = Boolean(createListNameInput?.value.trim());
+          const hasDescription = Boolean(createListDescriptionInput?.value.trim());
+          const isActive = hasName || hasDescription;
+
+          createListSubmitButton.disabled = !isActive;
+          createListSubmitButton.setAttribute('aria-disabled', String(!isActive));
+          createListSubmitButton.classList.toggle('sg-button--process-inactive', !isActive);
+        };
+
+        createListNameInput?.addEventListener('input', updateCreateListButtonState);
+        createListDescriptionInput?.addEventListener('input', updateCreateListButtonState);
+        updateCreateListButtonState();
+
         createListFormToggle.addEventListener('click', (event) => {
           event.preventDefault();
           createListForm.hidden = false;
           createListFormToggle.setAttribute('aria-expanded', 'true');
+          createListFormToggle.classList.remove('sg-button--active');
+          createListFormToggle.classList.add('sg-button--inactive');
           createListFormToggle.disabled = true;
+          createListFormToggle.setAttribute('aria-disabled', 'true');
+          updateCreateListButtonState();
         });
       }