From bc522af2a5d0e5fd08ecc2beb70bc02c93173b96 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:55:18 +0200
Subject: [PATCH] Pulldown: move stable trigger width to generic component
 rules

---
 components/interactive-elements.html          | 29 +------------------
 styles/10-components-interactive-elements.css | 21 ++++++++++++++
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 9961a34..0aecb61 100644
--- a/components/interactive-elements.html
+++ b/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 mit sehr langem Optionstext zur Verifikation von Umbruch und Panelbreite im geöffneten Zustand</span>
+                  <span>Menüpunkt 4</span>
                 </li>
 
                 <li class="sg-pulldown-option sg-pulldown-option--disabled">
@@ -186,33 +186,6 @@
         </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>
-          <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>
-
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">form-disabled</p>
         <label class="sg-labeled-input-row">
diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css
index 9122d8e..33759d9 100644
--- a/styles/10-components-interactive-elements.css
+++ b/styles/10-components-interactive-elements.css
@@ -206,6 +206,20 @@
       text-overflow: ellipsis;
     }
 
+    .sg-pulldown-demo[data-component-context="form"],
+    .sg-pulldown-demo[data-component-context="overlay"] {
+      width: 100%;
+      min-width: 0;
+      max-width: var(--layout-input-field-max-width);
+    }
+
+    .sg-pulldown-demo[data-component-context="form"] .sg-pulldown-demo__trigger,
+    .sg-pulldown-demo[data-component-context="overlay"] .sg-pulldown-demo__trigger {
+      width: 100%;
+      min-width: 0;
+      max-width: var(--layout-input-field-max-width);
+    }
+
     .sg-pulldown--selected {
       background-color: var(--surface-control-active);
       color: var(--text-control-default);
@@ -223,6 +237,13 @@
       opacity: var(--disabled-opacity);
     }
 
+    .sg-labeled-input-row .sg-pulldown-demo,
+    .sg-labeled-input-row .sg-pulldown-demo .sg-pulldown {
+      width: 100%;
+      min-width: 0;
+      max-width: var(--layout-input-field-max-width);
+    }
+
     .sg-pulldown--disabled {
       background-color: var(--surface-control-disabled);
       color: var(--text-control-disabled);