From bca4c086e7430e8e3bf20fdb8e3c3af3ea10151b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Tue, 9 Jun 2026 09:14:33 +0200 Subject: [PATCH] Sync styleguide 2026.05.18.1 --- docs/styleguide/components/interactive-elements.html | 7 ++++--- docs/styleguide/patterns/options-row.html | 3 ++- docs/styleguide/patterns/vsf-list-detailseite.html | 3 ++- docs/styleguide/patterns/vsf-meldungen.html | 3 ++- .../styles/32-patterns-card-group-keyboard-nav.css | 4 ++++ public/assets/styleguide.upstream.css | 4 ++++ public/assets/styleguide.upstream.meta.json | 4 ++-- public/assets/styles.css | 4 ++++ 8 files changed, 24 insertions(+), 8 deletions(-) diff --git a/docs/styleguide/components/interactive-elements.html b/docs/styleguide/components/interactive-elements.html index 2e294ca..1b37e9b 100644 --- a/docs/styleguide/components/interactive-elements.html +++ b/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'; } diff --git a/docs/styleguide/patterns/options-row.html b/docs/styleguide/patterns/options-row.html index 7acdec9..4a36238 100644 --- a/docs/styleguide/patterns/options-row.html +++ b/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'; } diff --git a/docs/styleguide/patterns/vsf-list-detailseite.html b/docs/styleguide/patterns/vsf-list-detailseite.html index de3a72e..a8eb204 100644 --- a/docs/styleguide/patterns/vsf-list-detailseite.html +++ b/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'; } diff --git a/docs/styleguide/patterns/vsf-meldungen.html b/docs/styleguide/patterns/vsf-meldungen.html index b631d66..f316bc8 100644 --- a/docs/styleguide/patterns/vsf-meldungen.html +++ b/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'; } diff --git a/docs/styleguide/styles/32-patterns-card-group-keyboard-nav.css b/docs/styleguide/styles/32-patterns-card-group-keyboard-nav.css index 3f01f66..1edef62 100644 --- a/docs/styleguide/styles/32-patterns-card-group-keyboard-nav.css +++ b/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, diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 45ef87b..4e35e2d 100644 --- a/public/assets/styleguide.upstream.css +++ b/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, diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index e7e0ef2..a03fb9b 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/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" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 45ef87b..4e35e2d 100644 --- a/public/assets/styles.css +++ b/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,