From bc137d420625054dba300a45e3fda850c57b22e3 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:47:08 +0200
Subject: [PATCH] Pulldown: robust long-value trigger and panel width/wrap
 behavior

---
 components/interactive-elements.html          | 13 ++++++++++++-
 semantic-tokens-components.html               |  2 +-
 styles/10-components-interactive-elements.css | 19 ++++++++++++++++---
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 0f15159..5d9a609 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</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">
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index cdef161..ef4f00a 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -134,7 +134,7 @@
       <tr><td>layout-pulldown-chevron-reserved-space</td><td>spacing-large</td><td>Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.</td></tr>
       <tr><td>layout-pulldown-panel-form-mobile-width</td><td>90%</td><td>Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt.</td></tr>
       <tr><td>layer-pulldown-panel</td><td>dimension-layer-pulldown-panel</td><td>Layer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten.</td></tr>
-      <tr><td>layout-multiselect-pulldown-panel-desktop-width</td><td>dimension-multiselect-pulldown-panel-desktop-width</td><td>Reservierter semantischer Alias für feste Desktop-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
+      <tr><td>layout-multiselect-pulldown-panel-desktop-width</td><td>dimension-multiselect-pulldown-panel-desktop-width</td><td>Semantische Obergrenze für die Panelbreite geöffneter Pulldowns; das Panel darf über Triggerbreite wachsen, bleibt aber durch diese Breite und die Viewport-Kappe begrenzt.</td></tr>
       <tr><td>layout-multiselect-pulldown-panel-mobile-width</td><td>dimension-multiselect-pulldown-panel-mobile-width</td><td>Reservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
       <tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
       <tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Sandwich-Menü für große und kleine Variante.</td></tr>
diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css
index 634f352..9122d8e 100644
--- a/styles/10-components-interactive-elements.css
+++ b/styles/10-components-interactive-elements.css
@@ -197,12 +197,21 @@
     }
 
     .sg-pulldown-demo__trigger {
+      display: block;
+      width: 100%;
+      min-width: 0;
       text-align: left;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .sg-pulldown--selected {
       background-color: var(--surface-control-active);
       color: var(--text-control-default);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .sg-pulldown--inactive-selectable {
@@ -1058,7 +1067,10 @@
       gap: var(--spacing-small);
       min-width: 100%;
       width: max-content;
-      max-width: calc(100vw - (2 * var(--spacing-large)));
+      max-width: min(
+        var(--layout-multiselect-pulldown-panel-desktop-width),
+        calc(100dvw - (2 * var(--spacing-large)))
+      );
       box-sizing: border-box;
       padding-block: var(--spacing-large);
       padding-inline: var(--layout-pulldown-panel-padding-inline);
@@ -1139,11 +1151,12 @@
     .sg-pulldown-option {
       display: flex;
       gap: var(--spacing-small);
-      align-items: center;
+      align-items: flex-start;
       padding-block: var(--interaction-padding-vertical);
       padding-inline: var(--layout-pulldown-option-padding-inline);
       border-radius: var(--radius-interaction);
-      white-space: nowrap;
+      white-space: normal;
+      overflow-wrap: anywhere;
       color: var(--text-control-default);
       cursor: pointer;
     }