From 4ace465f328d84be744e223510b57ad2e7c6727e 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:42:53 +0200
Subject: [PATCH] Add second multiselect pulldown variant with single
 activatable slider

---
 patterns/multiselektions-pulldown.html | 36 ++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html
index d82dbb9..4f9c607 100644
--- a/patterns/multiselektions-pulldown.html
+++ b/patterns/multiselektions-pulldown.html
@@ -224,6 +224,42 @@
             </div>
           </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 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>
+              </form>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>