From 3cd2ced365000d998e1ca173b12d4626b3d76bcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Wed, 17 Jun 2026 13:45:35 +0200 Subject: [PATCH] Sync styleguide 2026.05.18.1 --- docs/styleguide/patterns/left-navigation.html | 58 ++++++++++++++++++- .../10-components-interactive-elements.css | 1 + .../styles/25-patterns-form-sections.css | 2 +- .../styles/29-patterns-left-navigation.css | 9 ++- .../styles/30-layouts-card-list-page.css | 16 +---- public/assets/styleguide.upstream.css | 30 ++++------ public/assets/styleguide.upstream.meta.json | 4 +- public/assets/styles.css | 41 ++++--------- 8 files changed, 90 insertions(+), 71 deletions(-) diff --git a/docs/styleguide/patterns/left-navigation.html b/docs/styleguide/patterns/left-navigation.html index a6d785a..3866239 100644 --- a/docs/styleguide/patterns/left-navigation.html +++ b/docs/styleguide/patterns/left-navigation.html @@ -41,7 +41,51 @@ - +
+

Übersicht

+

+ Zeile 1: Überblick über die aktuelle Navigation.
+ Zeile 2: Die Inhalte orientieren sich am aktiven Menüpunkt.
+ Zeile 3: Jede Auswahl aktualisiert die Überschrift.
+ Zeile 4: Die Content-Card bleibt optisch eigenständig.
+ Zeile 5: Der Aufbau folgt dem linken Navigationsbereich.
+ Zeile 6: Die Breite bleibt flexibel innerhalb des Layouts.
+ Zeile 7: Lange Inhalte werden im Card-Rahmen geführt.
+ Zeile 8: Der Text dient als Platzhalter für spätere Inhalte.
+ Zeile 9: Die Darstellung bleibt auf Desktop und Mobile stabil.
+ Zeile 10: Die Navigation links steuert den sichtbaren Zustand.
+ Zeile 11: Der aktive Punkt ist visuell hervorgehoben.
+ Zeile 12: Inaktive Punkte bleiben als klare Auswahloptionen sichtbar.
+ Zeile 13: Die Content-Card reagiert auf den ausgewählten Eintrag.
+ Zeile 14: Die Überschrift übernimmt den Namen des Menüpunkts.
+ Zeile 15: Der Text kann später durch Fachinhalte ersetzt werden.
+ Zeile 16: Die Gruppe bleibt als zusammenhängender Bereich lesbar.
+ Zeile 17: Kartenabstände folgen den vorhandenen Styleguide-Tokens.
+ Zeile 18: Keine lokalen Sonderregeln sind für den Demo-Text nötig.
+ Zeile 19: Die Struktur bleibt bewusst einfach und nachvollziehbar.
+ Zeile 20: Das Layout zeigt Navigation und Inhalt nebeneinander.
+ Zeile 21: Der linke Bereich bleibt auf die Navigation fokussiert.
+ Zeile 22: Der rechte Bereich zeigt den zugehörigen Inhalt.
+ Zeile 23: Der Text dient als Füllmaterial für die Layoutprüfung.
+ Zeile 24: Die Card-Höhe passt sich dem vorhandenen Inhalt an.
+ Zeile 25: Scrollverhalten ist in diesem Demo-Zustand nicht nötig.
+ Zeile 26: Die Darstellung bleibt ohne zusätzliche Interaktion verständlich.
+ Zeile 27: Weitere Inhalte lassen sich später ergänzen oder ersetzen.
+ Zeile 28: Die Auswahl folgt weiterhin dem Tab-Button-Verhalten.
+ Zeile 29: Visuelle Konsistenz hat Vorrang vor dekorativen Effekten.
+ Zeile 30: Der Demo-Text bleibt neutral und fachlich unaufgeladen.
+ Zeile 31: Jede Zeile stützt die Prüfung der vertikalen Kartengröße.
+ Zeile 32: Der Content-Bereich ist damit klar als gefüllte Fläche erkennbar.
+ Zeile 33: Der Text nutzt die vorhandenen Typografie-Tokens.
+ Zeile 34: Die Lesbarkeit bleibt auf hellem Inhaltshintergrund hoch.
+ Zeile 35: Die Spaltenlogik wird durch den Text noch deutlicher.
+ Zeile 36: Das Beispiel unterstützt die Wahrnehmung des Pattern-Rahmens.
+ Zeile 37: Der Inhalt bleibt austauschbar und ohne Geschäftslogik.
+ Zeile 38: Die Group Card dient als Container für den Demo-Inhalt.
+ Zeile 39: Das Muster zeigt die vorgesehene Struktur des Portals.
+ Zeile 40: Die finale Zeile schließt den Demo-Block sauber ab. +

+
@@ -50,6 +94,7 @@ const mediaQuery = window.matchMedia('(max-width: 767px)'); const toggle = document.querySelector('[data-left-navigation-toggle]'); const menu = document.getElementById('left-navigation-menu'); + const contentHeading = document.querySelector('[data-left-navigation-content-heading]'); if (!toggle || !menu) { return; @@ -64,6 +109,14 @@ toggle.classList.remove('sg-button--inactive'); }; + const setContentHeading = (button) => { + if (!contentHeading || !button) { + return; + } + + contentHeading.textContent = button.textContent.trim(); + }; + const syncMode = () => { if (mediaQuery.matches) { if (toggle.getAttribute('aria-expanded') !== 'true' && toggle.getAttribute('aria-expanded') !== 'false') { @@ -92,9 +145,12 @@ menu.querySelectorAll('.sg-tab-button').forEach((otherButton) => { otherButton.setAttribute('aria-selected', String(otherButton === button)); }); + + setContentHeading(button); }); }); + setContentHeading(menu.querySelector('.sg-tab-button[aria-selected="true"]')); syncMode(); mediaQuery.addEventListener('change', syncMode); })(); diff --git a/docs/styleguide/styles/10-components-interactive-elements.css b/docs/styleguide/styles/10-components-interactive-elements.css index a1bc316..8dde8d5 100644 --- a/docs/styleguide/styles/10-components-interactive-elements.css +++ b/docs/styleguide/styles/10-components-interactive-elements.css @@ -383,6 +383,7 @@ flex-direction: column; gap: var(--spacing-small); min-width: 0; + width: 100%; max-width: var(--layout-form-input-field-max-width); } diff --git a/docs/styleguide/styles/25-patterns-form-sections.css b/docs/styleguide/styles/25-patterns-form-sections.css index b17af49..94d43a7 100644 --- a/docs/styleguide/styles/25-patterns-form-sections.css +++ b/docs/styleguide/styles/25-patterns-form-sections.css @@ -36,7 +36,7 @@ } .sg-form-sections-card__actions-segment { - margin-top: calc(var(--spacing-large) - var(--card-segment-padding-vertical)); + margin-top: var(--spacing-large); padding: 0; } diff --git a/docs/styleguide/styles/29-patterns-left-navigation.css b/docs/styleguide/styles/29-patterns-left-navigation.css index 980dd6c..eb24147 100644 --- a/docs/styleguide/styles/29-patterns-left-navigation.css +++ b/docs/styleguide/styles/29-patterns-left-navigation.css @@ -10,7 +10,7 @@ .sg-left-navigation-pattern__layout { display: flex; - align-items: stretch; + align-items: flex-start; gap: 0; width: 100%; min-width: 0; @@ -44,9 +44,14 @@ flex: 1 1 auto; } +.sg-left-navigation-pattern__group-card--content .sg-group-card__heading { + flex: 0 1 auto; + width: auto; + margin-left: 0; +} + @media (min-width: 768px) { .sg-left-navigation-pattern__group-card--navigation .sg-tab-button-group[data-component-variant="linksmenu-items"] { - height: 100%; justify-content: flex-start; } } diff --git a/docs/styleguide/styles/30-layouts-card-list-page.css b/docs/styleguide/styles/30-layouts-card-list-page.css index dd0e6e2..94f8ba1 100644 --- a/docs/styleguide/styles/30-layouts-card-list-page.css +++ b/docs/styleguide/styles/30-layouts-card-list-page.css @@ -7,21 +7,6 @@ flex-direction: column; } -.sg-card-list-page-drawer-backdrop { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.45); - opacity: 0; - pointer-events: none; - transition: opacity 220ms ease; - z-index: 999; -} - -.sg-card-list-page-drawer-backdrop[data-open="true"] { - opacity: 1; - pointer-events: auto; -} - .sg-card-list-page-drawer { position: fixed; top: 0; @@ -198,3 +183,4 @@ margin: 0; color: var(--text-vsf-drawer-object-card-body); } + diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index f0ebe08..119bc47 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -869,6 +869,7 @@ section + section { flex-direction: column; gap: var(--spacing-small); min-width: 0; + width: 100%; max-width: var(--layout-form-input-field-max-width); } @@ -2431,7 +2432,7 @@ section + section { } .sg-form-sections-card__actions-segment { - margin-top: calc(var(--spacing-large) - var(--card-segment-padding-vertical)); + margin-top: var(--spacing-large); padding: 0; } @@ -3057,7 +3058,7 @@ section + section { .sg-left-navigation-pattern__layout { display: flex; - align-items: stretch; + align-items: flex-start; gap: 0; width: 100%; min-width: 0; @@ -3091,10 +3092,15 @@ section + section { flex: 1 1 auto; } +.sg-left-navigation-pattern__group-card--content .sg-group-card__heading { + flex: 0 1 auto; + width: auto; + margin-left: 0; +} + @media (min-width: 768px) { .sg-left-navigation-pattern__group-card--navigation .sg-tab-button-group[data-component-variant="linksmenu-items"] { - height: 100%; - justify-content: center; + justify-content: flex-start; } } @@ -3137,21 +3143,6 @@ section + section { flex-direction: column; } -.sg-card-list-page-drawer-backdrop { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.45); - opacity: 0; - pointer-events: none; - transition: opacity 220ms ease; - z-index: 999; -} - -.sg-card-list-page-drawer-backdrop[data-open="true"] { - opacity: 1; - pointer-events: auto; -} - .sg-card-list-page-drawer { position: fixed; top: 0; @@ -4384,3 +4375,4 @@ section + section { color: var(--text-typography-preview); margin-top: 0; } + diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 4f501bf..ef05d42 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": "8a7b6fa", - "syncedAtUtc": "2026-06-16T12:22:28Z", + "styleguideCommit": "46a742f", + "syncedAtUtc": "2026-06-17T11:45:34Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 44bb67d..119bc47 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -869,6 +869,7 @@ section + section { flex-direction: column; gap: var(--spacing-small); min-width: 0; + width: 100%; max-width: var(--layout-form-input-field-max-width); } @@ -2431,7 +2432,7 @@ section + section { } .sg-form-sections-card__actions-segment { - margin-top: calc(var(--spacing-large) - var(--card-segment-padding-vertical)); + margin-top: var(--spacing-large); padding: 0; } @@ -3057,7 +3058,7 @@ section + section { .sg-left-navigation-pattern__layout { display: flex; - align-items: stretch; + align-items: flex-start; gap: 0; width: 100%; min-width: 0; @@ -3091,9 +3092,14 @@ section + section { flex: 1 1 auto; } +.sg-left-navigation-pattern__group-card--content .sg-group-card__heading { + flex: 0 1 auto; + width: auto; + margin-left: 0; +} + @media (min-width: 768px) { .sg-left-navigation-pattern__group-card--navigation .sg-tab-button-group[data-component-variant="linksmenu-items"] { - height: 100%; justify-content: flex-start; } } @@ -3137,21 +3143,6 @@ section + section { flex-direction: column; } -.sg-card-list-page-drawer-backdrop { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.45); - opacity: 0; - pointer-events: none; - transition: opacity 220ms ease; - z-index: 999; -} - -.sg-card-list-page-drawer-backdrop[data-open="true"] { - opacity: 1; - pointer-events: auto; -} - .sg-card-list-page-drawer { position: fixed; top: 0; @@ -4263,10 +4254,6 @@ section + section { width: 100%; } -.sg-large-table--bestellungen .sg-large-table__row { - grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(8.5rem, max-content); -} - .sg-large-table__title-segment { flex-direction: row; align-items: center; @@ -4315,10 +4302,6 @@ section + section { white-space: normal; } -.sg-large-table--bestellungen .sg-large-table__cell--amount { - text-align: right; -} - .sg-large-table__load-more-layout { width: 100%; max-width: 100%; @@ -4329,11 +4312,6 @@ section + section { padding: 0; } -.sg-large-table--bestellungen .sg-large-table__cell--amount .sg-large-table__sort-button { - justify-content: flex-end; - text-align: right; -} - .sg-large-table__sort-button { display: flex; align-items: center; @@ -4397,3 +4375,4 @@ section + section { color: var(--text-typography-preview); margin-top: 0; } +