From 4c67276645240827a3ec11c9fefa0d22bc780881 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Fri, 5 Jun 2026 08:08:46 +0200 Subject: [PATCH] Sync styleguide 2026.05.18.1 --- docs/styleguide/components/charts.html | 7 + docs/styleguide/components/data-display.html | 379 ++++++++++++++++++ .../components/interactive-elements.html | 13 + docs/styleguide/index.html | 1 + docs/styleguide/patterns/left-navigation.html | 104 +++++ docs/styleguide/styleguide.css | 1 + .../10-components-interactive-elements.css | 12 + .../styles/29-patterns-left-navigation.css | 75 ++++ .../styles/41-components-charts.css | 19 + .../styles/42-components-data-display.css | 107 +++++ public/assets/styleguide.upstream.css | 214 ++++++++++ public/assets/styleguide.upstream.meta.json | 4 +- public/assets/styles.css | 214 ++++++++++ 13 files changed, 1148 insertions(+), 2 deletions(-) create mode 100644 docs/styleguide/patterns/left-navigation.html create mode 100644 docs/styleguide/styles/29-patterns-left-navigation.css diff --git a/docs/styleguide/components/charts.html b/docs/styleguide/components/charts.html index 881e73f..5b8511d 100644 --- a/docs/styleguide/components/charts.html +++ b/docs/styleguide/components/charts.html @@ -38,6 +38,13 @@
+ +
+

Kirschen

+ +
diff --git a/docs/styleguide/components/data-display.html b/docs/styleguide/components/data-display.html index 40e86b3..b024738 100644 --- a/docs/styleguide/components/data-display.html +++ b/docs/styleguide/components/data-display.html @@ -72,5 +72,384 @@ + +
+ +

Component: Large Table

+ +
+
+
Large Table
+ + + + + + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
A1
+
B1
+
C1
+
D1
+
E1
+
+ +
+
A2
+
B2
+
C2
+
D2
+
E2
+
+ +
+
A3
+
B3
+
C3
+
D3
+
E3
+
+ +
+
A4
+
B4
+
C4
+
D4
+
E4
+
+ +
+
A5
+
B5
+
C5
+
D5
+
E5
+
+ +
+
A6
+
B6
+
C6
+
D6
+
E6
+
+ +
+
A7
+
B7
+
C7
+
D7
+
E7
+
+ +
+
A8
+
B8
+
C8
+
D8
+
E8
+
+ +
+
A9
+
B9
+
C9
+
D9
+
E9
+
+ +
+
A10
+
B10
+
C10
+
D10
+
E10
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+ + + diff --git a/docs/styleguide/components/interactive-elements.html b/docs/styleguide/components/interactive-elements.html index d9dce58..2e294ca 100644 --- a/docs/styleguide/components/interactive-elements.html +++ b/docs/styleguide/components/interactive-elements.html @@ -57,6 +57,19 @@ + +
+

Component: Linksmenue-Items

+ +
+ + + + + +
+
+

Component: Tasten-Navigation-gross in content

diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html index e24fd7d..3643483 100644 --- a/docs/styleguide/index.html +++ b/docs/styleguide/index.html @@ -44,6 +44,7 @@
  • Object Card
  • Object Group Card
  • Navigation Card
    • +
  • Left Navigation
  • Notifications
  • Content Cards Group
  • Card Gruppe mit Tastennavigation
    • diff --git a/docs/styleguide/patterns/left-navigation.html b/docs/styleguide/patterns/left-navigation.html new file mode 100644 index 0000000..a6d785a --- /dev/null +++ b/docs/styleguide/patterns/left-navigation.html @@ -0,0 +1,104 @@ + + + + + + Styleguide – Pattern Left Navigation + + + + +

    Pattern – Left Navigation

    + +
    +

    Pattern: Left Navigation

    +

    + Die linke Navigationsspalte nutzt auf Desktop 15% der verfügbaren Breite. Die zweite Group Card ist leer und dient in der Demo nur dazu, den restlichen Bildschirm zu füllen. +

    + +
    + + + +
    +
    + + + + + diff --git a/docs/styleguide/styleguide.css b/docs/styleguide/styleguide.css index 7ee74cb..66b3a38 100644 --- a/docs/styleguide/styleguide.css +++ b/docs/styleguide/styleguide.css @@ -11,6 +11,7 @@ @import "./styles/26-patterns-vsf-list-card.css"; @import "./styles/27-patterns-delete-confirmation.css"; @import "./styles/28-patterns-notifications.css"; +@import "./styles/29-patterns-left-navigation.css"; @import "./styles/30-layouts-card-list-page.css"; @import "./styles/33-layouts-vsf-list-detailseite.css"; @import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css"; diff --git a/docs/styleguide/styles/10-components-interactive-elements.css b/docs/styleguide/styles/10-components-interactive-elements.css index 9d65a39..073f85c 100644 --- a/docs/styleguide/styles/10-components-interactive-elements.css +++ b/docs/styleguide/styles/10-components-interactive-elements.css @@ -155,6 +155,18 @@ background: var(--surface-tab-compact-background); } + .sg-tab-button-group[data-component-variant="linksmenu-items"] { + flex-direction: column; + align-items: stretch; + width: 100%; + } + + .sg-tab-button-group[data-component-variant="linksmenu-items"] .sg-tab-button { + width: 100%; + justify-content: flex-start; + text-align: left; + } + .sg-tab-button-group[data-component-context="content"] { background: var(--surface-tab-compact-background); } diff --git a/docs/styleguide/styles/29-patterns-left-navigation.css b/docs/styleguide/styles/29-patterns-left-navigation.css new file mode 100644 index 0000000..fcea361 --- /dev/null +++ b/docs/styleguide/styles/29-patterns-left-navigation.css @@ -0,0 +1,75 @@ +/* ========================================================= */ +/* Patterns: Left Navigation */ +/* ========================================================= */ + +.sg-left-navigation-pattern { + display: flex; + flex-direction: column; + gap: var(--spacing-small); +} + +.sg-left-navigation-pattern__layout { + display: flex; + align-items: stretch; + gap: 0; + width: 100%; + min-width: 0; +} + +.sg-left-navigation-pattern__header-row { + display: none; +} + +.sg-left-navigation-pattern__toggle { + display: none; +} + +.sg-left-navigation-pattern__menu--collapsed { + display: none; +} + +.sg-left-navigation-pattern__group-card { + min-width: 0; +} + +.sg-left-navigation-pattern__group-card--navigation { + flex: 0 0 15vw; + width: 15vw; + max-width: 15vw; + padding: var(--spacing-small); + margin: 0 var(--spacing-small) var(--spacing-small) 0; +} + +.sg-left-navigation-pattern__group-card--content { + flex: 1 1 auto; +} + +@media (max-width: 767px) { + .sg-left-navigation-pattern__layout { + flex-direction: column; + } + + .sg-left-navigation-pattern__header-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-small); + margin-bottom: 0; + } + + .sg-left-navigation-pattern__toggle { + display: inline-flex; + flex: 0 0 auto; + } + + .sg-left-navigation-pattern__group-card--navigation { + flex: 0 0 auto; + width: 100%; + max-width: none; + margin: 0; + } + + .sg-left-navigation-pattern__group-card--content { + margin-top: var(--spacing-small); + } +} diff --git a/docs/styleguide/styles/41-components-charts.css b/docs/styleguide/styles/41-components-charts.css index 62dafa7..5e2d8e1 100644 --- a/docs/styleguide/styles/41-components-charts.css +++ b/docs/styleguide/styles/41-components-charts.css @@ -56,6 +56,10 @@ --score-marker-position: 50%; } +.sg-score-bar--no-value { + display: block; +} + .sg-score-bar__value { height: 100%; border-radius: var(--radius-graph-bar); @@ -85,6 +89,21 @@ background: transparent; } +.sg-score-bar__empty-state { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: flex-start; + padding-inline-start: var(--spacing-small); + color: var(--text-chart-default); + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + pointer-events: none; +} + .sg-chart-preview-area { min-width: var(--layout-object-card-min-width); max-width: var(--layout-object-card-max-width); diff --git a/docs/styleguide/styles/42-components-data-display.css b/docs/styleguide/styles/42-components-data-display.css index bf6af2a..8d558b7 100644 --- a/docs/styleguide/styles/42-components-data-display.css +++ b/docs/styleguide/styles/42-components-data-display.css @@ -67,3 +67,110 @@ background: var(--surface-data-table-help-icon); } +.sg-large-table { + width: 100%; +} + +.sg-large-table__title-segment { + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); +} + +.sg-large-table__row { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + align-items: stretch; + gap: 0; + width: 100%; + box-sizing: border-box; + background: var(--color-white); +} + +.sg-large-table__row--hidden { + display: none; +} + +.sg-large-table__row--header { + font-weight: var(--font-weight-semibold); + background: var(--color-medium-grey); +} + +.sg-large-table__row--striped-light { + background: var(--color-light-grey); +} + +.sg-large-table__row--load-more { + background: var(--color-medium-grey); +} + +.sg-large-table__cell { + min-width: 0; + padding: 0 var(--spacing-small); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.sg-large-table__cell--load-more { + grid-column: 1 / -1; + padding: 0; + white-space: normal; +} + +.sg-large-table__load-more-layout { + width: 100%; + max-width: 100%; + box-sizing: border-box; +} + +.sg-large-table__cell--header { + padding: 0; +} + +.sg-large-table__sort-button { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0.2rem; + width: 100%; + padding: 0 var(--spacing-small); + border: var(--border-none); + background: var(--color-transparent); + color: inherit; + font: inherit; + font-weight: var(--font-weight-semibold); + text-align: left; + cursor: pointer; +} + +.sg-large-table__sort-button:focus-visible { + outline: 2px solid var(--color-darkblue); + outline-offset: -2px; +} + +.sg-large-table__sort-icon { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + width: 0.85rem; + height: 0.85rem; + line-height: 1; + transform: translateY(0.02em); +} + +.sg-large-table__sort-icon::before { + content: ""; + display: block; + width: 0; + height: 0; + border-left: 0.36rem solid transparent; + border-right: 0.36rem solid transparent; + border-bottom: 0.55rem solid currentColor; +} + +.sg-large-table__sort-icon[data-direction="descending"]::before { + transform: rotate(180deg); +} diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 30059d6..f39af61 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -638,6 +638,18 @@ section + section { background: var(--surface-tab-compact-background); } + .sg-tab-button-group[data-component-variant="linksmenu-items"] { + flex-direction: column; + align-items: stretch; + width: 100%; + } + + .sg-tab-button-group[data-component-variant="linksmenu-items"] .sg-tab-button { + width: 100%; + justify-content: flex-start; + text-align: left; + } + .sg-tab-button-group[data-component-context="content"] { background: var(--surface-tab-compact-background); } @@ -2837,6 +2849,82 @@ section + section { } } +/* ========================================================= */ +/* Patterns: Left Navigation */ +/* ========================================================= */ + +.sg-left-navigation-pattern { + display: flex; + flex-direction: column; + gap: var(--spacing-small); +} + +.sg-left-navigation-pattern__layout { + display: flex; + align-items: stretch; + gap: 0; + width: 100%; + min-width: 0; +} + +.sg-left-navigation-pattern__header-row { + display: none; +} + +.sg-left-navigation-pattern__toggle { + display: none; +} + +.sg-left-navigation-pattern__menu--collapsed { + display: none; +} + +.sg-left-navigation-pattern__group-card { + min-width: 0; +} + +.sg-left-navigation-pattern__group-card--navigation { + flex: 0 0 15vw; + width: 15vw; + max-width: 15vw; + padding: var(--spacing-small); + margin: 0 var(--spacing-small) var(--spacing-small) 0; +} + +.sg-left-navigation-pattern__group-card--content { + flex: 1 1 auto; +} + +@media (max-width: 767px) { + .sg-left-navigation-pattern__layout { + flex-direction: column; + } + + .sg-left-navigation-pattern__header-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-small); + margin-bottom: 0; + } + + .sg-left-navigation-pattern__toggle { + display: inline-flex; + flex: 0 0 auto; + } + + .sg-left-navigation-pattern__group-card--navigation { + flex: 0 0 auto; + width: 100%; + max-width: none; + margin: 0; + } + + .sg-left-navigation-pattern__group-card--content { + margin-top: var(--spacing-small); + } +} + /* ========================================================= */ /* Layouts: Card Listen Seite */ /* ========================================================= */ @@ -3610,6 +3698,10 @@ section + section { --score-marker-position: 50%; } +.sg-score-bar--no-value { + display: block; +} + .sg-score-bar__value { height: 100%; border-radius: var(--radius-graph-bar); @@ -3639,6 +3731,21 @@ section + section { background: transparent; } +.sg-score-bar__empty-state { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: flex-start; + padding-inline-start: var(--spacing-small); + color: var(--text-chart-default); + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + pointer-events: none; +} + .sg-chart-preview-area { min-width: var(--layout-object-card-min-width); max-width: var(--layout-object-card-max-width); @@ -3895,6 +4002,113 @@ section + section { background: var(--surface-data-table-help-icon); } +.sg-large-table { + width: 100%; +} + +.sg-large-table__title-segment { + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); +} + +.sg-large-table__row { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + align-items: stretch; + gap: 0; + width: 100%; + box-sizing: border-box; + background: var(--color-white); +} + +.sg-large-table__row--hidden { + display: none; +} + +.sg-large-table__row--header { + font-weight: var(--font-weight-semibold); + background: var(--color-medium-grey); +} + +.sg-large-table__row--striped-light { + background: var(--color-light-grey); +} + +.sg-large-table__row--load-more { + background: var(--color-medium-grey); +} + +.sg-large-table__cell { + min-width: 0; + padding: 0 var(--spacing-small); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.sg-large-table__cell--load-more { + grid-column: 1 / -1; + padding: 0; + white-space: normal; +} + +.sg-large-table__load-more-layout { + width: 100%; + max-width: 100%; + box-sizing: border-box; +} + +.sg-large-table__cell--header { + padding: 0; +} + +.sg-large-table__sort-button { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0.2rem; + width: 100%; + padding: 0 var(--spacing-small); + border: var(--border-none); + background: var(--color-transparent); + color: inherit; + font: inherit; + font-weight: var(--font-weight-semibold); + text-align: left; + cursor: pointer; +} + +.sg-large-table__sort-button:focus-visible { + outline: 2px solid var(--color-darkblue); + outline-offset: -2px; +} + +.sg-large-table__sort-icon { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + width: 0.85rem; + height: 0.85rem; + line-height: 1; + transform: translateY(0.02em); +} + +.sg-large-table__sort-icon::before { + content: ""; + display: block; + width: 0; + height: 0; + border-left: 0.36rem solid transparent; + border-right: 0.36rem solid transparent; + border-bottom: 0.55rem solid currentColor; +} + +.sg-large-table__sort-icon[data-direction="descending"]::before { + transform: rotate(180deg); +} /* ========================================================= */ /* Components: Typography */ diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index fd6947e..74f9fb3 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": "cfc933f", - "syncedAtUtc": "2026-06-04T12:33:11Z", + "styleguideCommit": "a5e286f", + "syncedAtUtc": "2026-06-05T06:08:46Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 30059d6..f39af61 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -638,6 +638,18 @@ section + section { background: var(--surface-tab-compact-background); } + .sg-tab-button-group[data-component-variant="linksmenu-items"] { + flex-direction: column; + align-items: stretch; + width: 100%; + } + + .sg-tab-button-group[data-component-variant="linksmenu-items"] .sg-tab-button { + width: 100%; + justify-content: flex-start; + text-align: left; + } + .sg-tab-button-group[data-component-context="content"] { background: var(--surface-tab-compact-background); } @@ -2837,6 +2849,82 @@ section + section { } } +/* ========================================================= */ +/* Patterns: Left Navigation */ +/* ========================================================= */ + +.sg-left-navigation-pattern { + display: flex; + flex-direction: column; + gap: var(--spacing-small); +} + +.sg-left-navigation-pattern__layout { + display: flex; + align-items: stretch; + gap: 0; + width: 100%; + min-width: 0; +} + +.sg-left-navigation-pattern__header-row { + display: none; +} + +.sg-left-navigation-pattern__toggle { + display: none; +} + +.sg-left-navigation-pattern__menu--collapsed { + display: none; +} + +.sg-left-navigation-pattern__group-card { + min-width: 0; +} + +.sg-left-navigation-pattern__group-card--navigation { + flex: 0 0 15vw; + width: 15vw; + max-width: 15vw; + padding: var(--spacing-small); + margin: 0 var(--spacing-small) var(--spacing-small) 0; +} + +.sg-left-navigation-pattern__group-card--content { + flex: 1 1 auto; +} + +@media (max-width: 767px) { + .sg-left-navigation-pattern__layout { + flex-direction: column; + } + + .sg-left-navigation-pattern__header-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-small); + margin-bottom: 0; + } + + .sg-left-navigation-pattern__toggle { + display: inline-flex; + flex: 0 0 auto; + } + + .sg-left-navigation-pattern__group-card--navigation { + flex: 0 0 auto; + width: 100%; + max-width: none; + margin: 0; + } + + .sg-left-navigation-pattern__group-card--content { + margin-top: var(--spacing-small); + } +} + /* ========================================================= */ /* Layouts: Card Listen Seite */ /* ========================================================= */ @@ -3610,6 +3698,10 @@ section + section { --score-marker-position: 50%; } +.sg-score-bar--no-value { + display: block; +} + .sg-score-bar__value { height: 100%; border-radius: var(--radius-graph-bar); @@ -3639,6 +3731,21 @@ section + section { background: transparent; } +.sg-score-bar__empty-state { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: flex-start; + padding-inline-start: var(--spacing-small); + color: var(--text-chart-default); + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + pointer-events: none; +} + .sg-chart-preview-area { min-width: var(--layout-object-card-min-width); max-width: var(--layout-object-card-max-width); @@ -3895,6 +4002,113 @@ section + section { background: var(--surface-data-table-help-icon); } +.sg-large-table { + width: 100%; +} + +.sg-large-table__title-segment { + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); +} + +.sg-large-table__row { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + align-items: stretch; + gap: 0; + width: 100%; + box-sizing: border-box; + background: var(--color-white); +} + +.sg-large-table__row--hidden { + display: none; +} + +.sg-large-table__row--header { + font-weight: var(--font-weight-semibold); + background: var(--color-medium-grey); +} + +.sg-large-table__row--striped-light { + background: var(--color-light-grey); +} + +.sg-large-table__row--load-more { + background: var(--color-medium-grey); +} + +.sg-large-table__cell { + min-width: 0; + padding: 0 var(--spacing-small); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.sg-large-table__cell--load-more { + grid-column: 1 / -1; + padding: 0; + white-space: normal; +} + +.sg-large-table__load-more-layout { + width: 100%; + max-width: 100%; + box-sizing: border-box; +} + +.sg-large-table__cell--header { + padding: 0; +} + +.sg-large-table__sort-button { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0.2rem; + width: 100%; + padding: 0 var(--spacing-small); + border: var(--border-none); + background: var(--color-transparent); + color: inherit; + font: inherit; + font-weight: var(--font-weight-semibold); + text-align: left; + cursor: pointer; +} + +.sg-large-table__sort-button:focus-visible { + outline: 2px solid var(--color-darkblue); + outline-offset: -2px; +} + +.sg-large-table__sort-icon { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + width: 0.85rem; + height: 0.85rem; + line-height: 1; + transform: translateY(0.02em); +} + +.sg-large-table__sort-icon::before { + content: ""; + display: block; + width: 0; + height: 0; + border-left: 0.36rem solid transparent; + border-right: 0.36rem solid transparent; + border-bottom: 0.55rem solid currentColor; +} + +.sg-large-table__sort-icon[data-direction="descending"]::before { + transform: rotate(180deg); +} /* ========================================================= */ /* Components: Typography */