Sync styleguide 2026.05.18.1

docs/styleguide/components/interactive-elements.html

@@ -181,7 +181,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.
             -->
 
@@ -1059,7 +1059,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');
 
@@ -1103,8 +1103,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';
         }
 

docs/styleguide/patterns/options-row.html

@@ -264,13 +264,14 @@
           return;
         }
 
+        const triggerRect = trigger.getBoundingClientRect();
         const panel = demo.querySelector('.sg-pulldown-panel');
         if (!panel) {
           return;
         }
 
         const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
+        if (panelRect.width > triggerRect.width || panelRect.right > window.innerWidth) {
           demo.dataset.align = 'right';
         }
 

docs/styleguide/patterns/vsf-list-detailseite.html

@@ -541,13 +541,14 @@
           return;
         }
 
+        const triggerRect = trigger.getBoundingClientRect();
         const panel = demo.querySelector('.sg-pulldown-panel');
         if (!panel) {
           return;
         }
 
         const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
+        if (panelRect.width > triggerRect.width || panelRect.right > window.innerWidth) {
           demo.dataset.align = 'right';
         }
 

docs/styleguide/patterns/vsf-meldungen.html

@@ -624,13 +624,14 @@
           return;
         }
 
+        const triggerRect = trigger.getBoundingClientRect();
         const panel = demo.querySelector('.sg-pulldown-panel');
         if (!panel) {
           return;
         }
 
         const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
+        if (panelRect.width > triggerRect.width || panelRect.right > window.innerWidth) {
           demo.dataset.align = 'right';
         }
 

docs/styleguide/styles/32-patterns-card-group-keyboard-nav.css

@@ -9,6 +9,10 @@
   width: 100%;
 }
 
+.sg-content-block-card-group[hidden] {
+  display: none;
+}
+
 .sg-content-block-card-group__tabs,
 .sg-content-block-card-group__panels,
 .sg-content-block-card-group__panel,

public/assets/styleguide.upstream.css

@@ -3358,6 +3358,10 @@ section + section {
   width: 100%;
 }
 
+.sg-content-block-card-group[hidden] {
+  display: none;
+}
+
 .sg-content-block-card-group__tabs,
 .sg-content-block-card-group__panels,
 .sg-content-block-card-group__panel,

public/assets/styleguide.upstream.meta.json

@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "a5e286f",
-  "syncedAtUtc": "2026-06-09T07:06:35Z",
+  "styleguideCommit": "dc092fb",
+  "syncedAtUtc": "2026-06-09T07:14:33Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }

public/assets/styles.css

@@ -3358,6 +3358,10 @@ section + section {
   width: 100%;
 }
 
+.sg-content-block-card-group[hidden] {
+  display: none;
+}
+
 .sg-content-block-card-group__tabs,
 .sg-content-block-card-group__panels,
 .sg-content-block-card-group__panel,