feat(components): add pulldown labels and activatable wrap behavior

components/interactive-elements.html

@@ -82,6 +82,8 @@
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">Komponente normal</p>
 
+        <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.
@@ -115,12 +117,14 @@
               </ul>
             </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">
+          <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>
@@ -128,6 +132,8 @@
                 <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>
+        <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>
 

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%;