Pulldown: robust long-value trigger and panel width/wrap behavior

components/interactive-elements.html

@@ -111,7 +111,7 @@
                 </li>
 
                 <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                  <span>Menüpunkt 4</span>
+                  <span>Menüpunkt 4 mit sehr langem Optionstext zur Verifikation von Umbruch und Panelbreite im geöffneten Zustand</span>
                 </li>
 
                 <li class="sg-pulldown-option sg-pulldown-option--disabled">
@@ -186,6 +186,17 @@
         </div>
       </div>
 
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">form-active / selected (lang)</p>
+
+        <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>
+      </div>
+
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">form-disabled</p>
         <label class="sg-labeled-input-row">