From 102e391977f07ed4623880fb2e7e3a96e7f32e11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 25 May 2026 07:11:40 +0200
Subject: [PATCH] feat(components): add pulldown labels and activatable wrap
 behavior

---
 components/interactive-elements.html | 83 +++++++++++++++-------------
 styleguide.css                       | 46 +++++++++++++++
 2 files changed, 92 insertions(+), 37 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 7089000..cdbadb0 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -82,52 +82,58 @@
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">Komponente normal</p>
 
-        <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-state="inactive-selectable">
-          <!--
-            Inactive selectable pulldowns use the same overlay behavior as active pulldowns.
-            The option panel opens below the trigger and may be aligned left or right to remain visible inside the viewport.
-          -->
-          <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger">
-            Auswahl
-          </button>
+        <label 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="inactive-selectable">
+            <!--
+              Inactive selectable pulldowns use the same overlay behavior as active pulldowns.
+              The option panel opens below the trigger and may be aligned left or right to remain visible inside the viewport.
+            -->
+            <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger">
+              Auswahl
+            </button>
 
-          <div class="sg-pulldown-panel" aria-label="Geöffnetes inaktives Pulldown" data-component-part="pulldown-panel">
-            <ul class="sg-pulldown-option-list" aria-label="Verfügbare Optionen im inaktiven Pulldown">
-              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                <span>Menüpunkt 1</span>
-              </li>
+            <div class="sg-pulldown-panel" aria-label="Geöffnetes inaktives Pulldown" data-component-part="pulldown-panel">
+              <ul class="sg-pulldown-option-list" aria-label="Verfügbare Optionen im inaktiven Pulldown">
+                <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                  <span>Menüpunkt 1</span>
+                </li>
 
-              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                <span>Menüpunkt 2</span>
-              </li>
+                <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                  <span>Menüpunkt 2</span>
+                </li>
 
-              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                <span>Menüpunkt 3</span>
-              </li>
+                <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                  <span>Menüpunkt 3</span>
+                </li>
 
-              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                <span>Menüpunkt 4</span>
-              </li>
+                <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                  <span>Menüpunkt 4</span>
+                </li>
 
-              <li class="sg-pulldown-option sg-pulldown-option--disabled">
-                <span>Menüpunkt 5</span>
-              </li>
-            </ul>
+                <li class="sg-pulldown-option sg-pulldown-option--disabled">
+                  <span>Menüpunkt 5</span>
+                </li>
+              </ul>
+            </div>
           </div>
-        </div>
+        </label>
       </div>
 
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
 
         <div class="sg-activatable-row">
-          <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-pulldown-activatable">
-            <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
-              <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
-              <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
-              <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
-            </span>
-          </button>
+          <div class="sg-pulldown-activatable-header">
+            <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-pulldown-activatable">
+              <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
+                <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
+              </span>
+            </button>
+            <span class="sg-label">Label</span>
+          </div>
 
           <div class="sg-pulldown-demo" id="component-pulldown-activatable" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true">
           <!--
@@ -215,9 +221,12 @@
 
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">form-disabled</p>
-        <select class="sg-interaction-element sg-pulldown sg-pulldown--disabled" aria-label="Deaktivierter Pulldown" disabled data-component="pulldown" data-component-state="disabled">
-          <option>Nicht verfügbar</option>
-        </select>
+        <label class="sg-labeled-input-row">
+          <span class="sg-label">Label</span>
+          <select class="sg-interaction-element sg-pulldown sg-pulldown--disabled" aria-label="Deaktivierter Pulldown" disabled data-component="pulldown" data-component-state="disabled">
+            <option>Nicht verfügbar</option>
+          </select>
+        </label>
       </div>
     </div>
 
diff --git a/styleguide.css b/styleguide.css
index 7d64dc6..87cd318 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -811,6 +811,18 @@ section + section {
       max-width: var(--layout-input-field-max-width);
     }
 
+    #component-pulldown .sg-labeled-input-row {
+      width: 100%;
+      max-width: none;
+    }
+
+    #component-pulldown .sg-labeled-input-row .sg-pulldown,
+    #component-pulldown .sg-labeled-input-row .sg-pulldown-demo {
+      width: 100%;
+      min-width: 0;
+      max-width: var(--layout-input-field-max-width);
+    }
+
     #component-pulldown .sg-pulldown-demo__trigger,
     #component-pulldown .sg-state-example > .sg-pulldown {
       width: 100%;
@@ -819,8 +831,35 @@ section + section {
     }
 
     #component-pulldown .sg-activatable-row {
+      display: grid;
+      grid-template-columns: 1fr;
+      align-items: start;
+      row-gap: var(--spacing-small);
+      width: 100%;
+    }
+
+    #component-pulldown .sg-pulldown-activatable-header {
+      display: grid;
+      grid-template-columns: max-content max-content;
+      align-items: center;
+      column-gap: var(--spacing-large);
+      width: 100%;
+      justify-content: start;
+    }
+
+    #component-pulldown .sg-pulldown-activatable-header .sg-mode-toggle {
+      grid-column: 1;
+    }
+
+    #component-pulldown .sg-pulldown-activatable-header .sg-label {
+      grid-column: 2;
+      min-width: 0;
+    }
+
+    #component-pulldown .sg-activatable-row .sg-pulldown-demo {
       width: 100%;
       max-width: var(--layout-input-field-max-width);
+      min-width: 0;
     }
 
     .sg-input-component .sg-state-example {
@@ -862,6 +901,13 @@ section + section {
         min-width: 0;
       }
 
+      #component-pulldown .sg-labeled-input-row .sg-pulldown,
+      #component-pulldown .sg-labeled-input-row .sg-pulldown-demo {
+        width: 100%;
+        min-width: 0;
+        max-width: 100%;
+      }
+
       #component-pulldown .sg-activatable-row {
         width: 100%;
         max-width: 100%;