From f9520658c8a03bbac69ab878781d67c278454552 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Fri, 29 May 2026 14:48:05 +0200
Subject: [PATCH] Pulldown demo: make long selected-state test interactive

---
 components/interactive-elements.html | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 5d9a609..1ab587f 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -191,9 +191,25 @@
 
         <div class="sg-labeled-input-row">
           <span class="sg-label">Label</span>
-          <button class="sg-interaction-element sg-pulldown sg-pulldown--selected sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown mit aktiver Auswahl" data-component="pulldown" data-component-state="active" data-component-part="pulldown-trigger">
-            Sehr langer ausgewählter Wert mit bewusst überlanger Bezeichnung für die Ellipsis-Verifikation im geschlossenen Trigger
-          </button>
+          <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-state="active">
+            <button class="sg-interaction-element sg-pulldown sg-pulldown--selected sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown mit aktiver Auswahl" data-component-part="pulldown-trigger">
+              Sehr langer ausgewählter Wert mit bewusst überlanger Bezeichnung für die Ellipsis-Verifikation im geschlossenen Trigger
+            </button>
+
+            <div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown mit langem Wert" data-component-part="pulldown-panel">
+              <ul class="sg-pulldown-option-list" aria-label="Verfügbare Optionen mit langen Texten">
+                <li class="sg-pulldown-option sg-pulldown-option--selected" role="checkbox" aria-checked="true" data-pulldown-option>
+                  <span>Sehr langer ausgewählter Wert mit bewusst überlanger Bezeichnung für die Ellipsis-Verifikation im geschlossenen Trigger</span>
+                </li>
+                <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                  <span>Lange Alternative mit mehreren Worten zur Prüfung von Umbruch, Lesbarkeit und stabiler Triggerbreite</span>
+                </li>
+                <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                  <span>Kurz</span>
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
       </div>