Commit current styleguide updates

components/interactive-elements.html

@@ -221,7 +221,7 @@
               Interactive styleguide variant:
               The panel opens and closes via the pulldown button above.
               It closes when clicking outside, when another pulldown opens, or when a sandwich menu opens.
-              If the panel would overflow the viewport, it aligns from the opposite side of the trigger.
+              If the panel is wider than the trigger or would overflow the viewport, it aligns from the opposite side of the trigger.
               Cross-dependencies between pulldowns are application logic and are not defined in this component.
             -->
 
@@ -623,10 +623,10 @@
 
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">form-invalid</p>
-        <div class="sg-input-validation-stack">
-          <label class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="default">
+        <div class="sg-labeled-input-row">
+          <span class="sg-label">Label</span>
+          <span class="sg-input-validation-stack">
             <span class="sg-radio-field-row">
-              <span class="sg-label">Label</span>
               <span class="sg-radio-activatable-group__choices">
                 <span class="sg-radio-activatable-group__choice">
                   <button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Radio 1 mit Validierung" aria-invalid="true" aria-describedby="radio-invalid-feedback">
@@ -642,8 +642,8 @@
                 </span>
               </span>
             </span>
-          </label>
-          <span class="sg-form-validation-text" id="radio-invalid-feedback">Bitte eine Option auswählen.</span>
+            <span class="sg-form-validation-text" id="radio-invalid-feedback">Bitte eine Option auswählen.</span>
+          </span>
         </div>
       </div>
 
@@ -1173,7 +1173,7 @@
 
     // Pulldown behavior: pulldown demos open their panel below the trigger.
     // Opening one closes all sandwich menus and any other open pulldown demo.
-    // If the panel would overflow the viewport, it aligns from the opposite trigger edge.
+    // If the panel is wider than the trigger or would overflow the viewport, it aligns from the opposite trigger edge.
     document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
       const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
 
@@ -1217,8 +1217,9 @@
           return;
         }
 
+        const triggerRect = trigger.getBoundingClientRect();
         const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
+        if (panelRect.width > triggerRect.width || panelRect.right > window.innerWidth) {
           demo.dataset.align = 'right';
         }