From 166b9ce174f2e0d928e1a188e39bd6b35d36d720 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 14:26:27 +0200
Subject: [PATCH] Add second VSF card with create-list layout beside existing
 list card

---
 patterns/vsf-listen-uebersicht-seite-v2.html | 91 ++++++++++++++++++++
 1 file changed, 91 insertions(+)

diff --git a/patterns/vsf-listen-uebersicht-seite-v2.html b/patterns/vsf-listen-uebersicht-seite-v2.html
index 37aa41a..aa78118 100644
--- a/patterns/vsf-listen-uebersicht-seite-v2.html
+++ b/patterns/vsf-listen-uebersicht-seite-v2.html
@@ -190,6 +190,68 @@
         </footer>
       </article>
 
+      <article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Neue Liste anlegen Karte">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
+          <div class="sg-strong">Neue Liste anlegen</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--gray sg-object-card__content" data-pattern-part="object-group-card-content">
+          <div class="sg-form-sections-card-wrapper" data-pattern="form-sections" 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">Listentyp</span>
+                      <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable">
+                        <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-form-inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp">
+                          Listentyp
+                        </button>
+                        <div class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">
+                          <ul class="sg-pulldown-option-list" aria-label="Listentyp Optionen">
+                            <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Watchlist</span></li>
+                            <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Portfolio</span></li>
+                            <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Screening</span></li>
+                          </ul>
+                        </div>
+                      </div>
+                    </label>
+
+                    <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>
+      </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-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>
@@ -554,6 +616,35 @@
         closeStageDialogs(stage);
       });
     });
+
+    const createListForm = document.querySelector('.sg-vsf-list-overview-page-v2 .sg-object-card-grid .sg-form-sections-card');
+    const createListProcessButton = createListForm?.querySelector('.sg-button--process');
+
+    const updateCreateListProcessButtonState = () => {
+      if (!createListForm || !createListProcessButton) {
+        return;
+      }
+
+      const hasPulldownSelection = Array.from(createListForm.querySelectorAll('[data-pulldown-option]'))
+        .some((option) => option.getAttribute('aria-checked') === 'true');
+      const hasTextInput = Array.from(createListForm.querySelectorAll('input[type="text"], textarea'))
+        .some((field) => field.value.trim().length > 0);
+      const isActive = hasPulldownSelection || hasTextInput;
+
+      createListProcessButton.disabled = !isActive;
+      createListProcessButton.setAttribute('aria-disabled', String(!isActive));
+      createListProcessButton.classList.toggle('sg-button--process-inactive', !isActive);
+    };
+
+    createListForm?.querySelectorAll('input[type="text"], textarea').forEach((field) => {
+      field.addEventListener('input', updateCreateListProcessButtonState);
+    });
+    createListForm?.querySelectorAll('.sg-pulldown-demo__trigger, [data-pulldown-option]').forEach((control) => {
+      control.addEventListener('click', () => {
+        setTimeout(updateCreateListProcessButtonState, 0);
+      });
+    });
+    updateCreateListProcessButtonState();
   </script>
 
 </body>