From 104f5d771c8d9c8805497b1746c6c541f4c4b38e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 19 May 2026 19:43:57 +0200
Subject: [PATCH] Move test pulldown below multiselect options row as separate
 element

---
 patterns/multiselektions-pulldown.html | 63 +++++++++++++-------------
 1 file changed, 32 insertions(+), 31 deletions(-)

diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html
index 4f9c607..d54b699 100644
--- a/patterns/multiselektions-pulldown.html
+++ b/patterns/multiselektions-pulldown.html
@@ -225,40 +225,41 @@
           </div>
         </div>
 
-        <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true">
-          <span class="sg-activatable-control">
-            <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Test-Pulldown ohne aktive Auswahl" data-label-base="Test-Pulldown" data-component-part="pulldown-trigger">
-              Test-Pulldown
-            </button>
-            <button class="sg-activatable-remove" type="button" aria-label="Test-Pulldown entfernen" data-pulldown-activate-remove hidden>×</button>
-          </span>
+      </div>
+    </div>
 
-          <div class="sg-pulldown-panel" aria-label="Geöffnetes Test-Pulldown" data-component-part="pulldown-panel">
-            <div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Test-Inhalt">
-              <form class="sg-form-sections-card" action="#" method="post">
-                <div class="sg-form-sections-card__body" data-pattern-part="form-body">
-                  <section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-test-block-1">
-                    <h2 id="multiselect-test-block-1" class="sg-strong sg-form-sections-card__chapter-title">Testblock</h2>
+    <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true">
+      <span class="sg-activatable-control">
+        <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Test-Pulldown ohne aktive Auswahl" data-label-base="Test-Pulldown" data-component-part="pulldown-trigger">
+          Test-Pulldown
+        </button>
+        <button class="sg-activatable-remove" type="button" aria-label="Test-Pulldown entfernen" data-pulldown-activate-remove hidden>×</button>
+      </span>
 
-                    <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
-                      <span class="sg-label">Slider Test</span>
-                      <input
-                        class="sg-interaction-element sg-slider sg-form-inactive-selectable"
-                        type="range"
-                        min="1"
-                        max="10"
-                        step="0.1"
-                        value="4.0"
-                        aria-label="Slider Test von 1 bis 10"
-                      >
-                      <output class="sg-slider-value sg-body" for="slider">4.0</output>
-                      <button class="sg-activatable-remove" type="button" aria-label="Slider Test entfernen" data-slider-activate-remove hidden>×</button>
-                    </label>
-                  </section>
-                </div>
-              </form>
+      <div class="sg-pulldown-panel" aria-label="Geöffnetes Test-Pulldown" data-component-part="pulldown-panel">
+        <div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Test-Inhalt">
+          <form class="sg-form-sections-card" action="#" method="post">
+            <div class="sg-form-sections-card__body" data-pattern-part="form-body">
+              <section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-test-block-1">
+                <h2 id="multiselect-test-block-1" class="sg-strong sg-form-sections-card__chapter-title">Testblock</h2>
+
+                <label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+                  <span class="sg-label">Slider Test</span>
+                  <input
+                    class="sg-interaction-element sg-slider sg-form-inactive-selectable"
+                    type="range"
+                    min="1"
+                    max="10"
+                    step="0.1"
+                    value="4.0"
+                    aria-label="Slider Test von 1 bis 10"
+                  >
+                  <output class="sg-slider-value sg-body" for="slider">4.0</output>
+                  <button class="sg-activatable-remove" type="button" aria-label="Slider Test entfernen" data-slider-activate-remove hidden>×</button>
+                </label>
+              </section>
             </div>
-          </div>
+          </form>
         </div>
       </div>
     </div>