+ Ü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/29-patterns-left-navigation.css b/docs/styleguide/styles/29-patterns-left-navigation.css
index 980dd6c..01487b0 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;
@@ -46,7 +46,6 @@
@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..322584e 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -3057,7 +3057,7 @@ section + section {
.sg-left-navigation-pattern__layout {
display: flex;
- align-items: stretch;
+ align-items: flex-start;
gap: 0;
width: 100%;
min-width: 0;
@@ -3093,8 +3093,7 @@ section + section {
@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 +3136,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 +4368,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..b04ccfd 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": "a077731",
+ "syncedAtUtc": "2026-06-16T18:42:20Z",
"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..322584e 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -3057,7 +3057,7 @@ section + section {
.sg-left-navigation-pattern__layout {
display: flex;
- align-items: stretch;
+ align-items: flex-start;
gap: 0;
width: 100%;
min-width: 0;
@@ -3093,7 +3093,6 @@ section + section {
@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 +3136,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 +4247,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 +4295,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 +4305,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 +4368,4 @@ section + section {
color: var(--text-typography-preview);
margin-top: 0;
}
+