diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html index df5d6a1..735cb29 100644 --- a/docs/styleguide/foundations.html +++ b/docs/styleguide/foundations.html @@ -155,8 +155,9 @@ input-field-desktop-width400pxFixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview. input-field-max-width600pxMaximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld). object-card-height600pxFixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card). - object-group-card-min-width550pxMindestbreite der Group Card im Pattern Object Group Card. - object-group-card-max-width800pxMaximale Breite der Group Card im Pattern Object Group Card. + object-group-card-min-width450pxMindestbreite der Group Card im Pattern Object Group Card. + object-group-card-max-width650pxMaximale Breite der Group Card im Pattern Object Group Card. + object-group-card-height700pxFixe Desktop-Höhe der Group Card im Pattern Object Group Card. notifications-card-min-width445pxMindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns. search-field-width15.3remFixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. layer-pulldown-panel40Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen. diff --git a/docs/styleguide/patterns/object-group-card.html b/docs/styleguide/patterns/object-group-card.html index f49b0d7..348be09 100644 --- a/docs/styleguide/patterns/object-group-card.html +++ b/docs/styleguide/patterns/object-group-card.html @@ -117,7 +117,9 @@ } const referenceWidth = referenceCard.getBoundingClientRect().width; - grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`); + const maxWidth = parseFloat(getComputedStyle(referenceCard).maxWidth); + const sharedWidth = Number.isFinite(maxWidth) ? Math.min(referenceWidth, maxWidth) : referenceWidth; + grid.style.setProperty('--layout-object-card-shared-width', `${sharedWidth}px`); grid.classList.add('sg-object-card-grid--multi-row'); }); }; diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html index 3e71f45..c01f5a7 100644 --- a/docs/styleguide/semantic-tokens-components.html +++ b/docs/styleguide/semantic-tokens-components.html @@ -55,6 +55,7 @@ layout-object-group-card-min-widthdimension-object-group-card-min-widthMindestbreite der Karteninstanzen im Pattern Object Group Card. layout-object-group-card-max-widthdimension-object-group-card-max-widthMaximalbreite der Karteninstanzen im Pattern Object Group Card. + layout-object-group-card-heightdimension-object-group-card-heightFixe Desktop-Höhe der Karteninstanzen im Pattern Object Group Card. layout-notifications-text-segment-fixed-height150pxFixe Desktop-Höhe des ersten Text-Segments im Pattern Notifications; auf Mobile wird die Höhe wieder auf auto gesetzt. diff --git a/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html index e51d9bc..2f46f10 100644 --- a/docs/styleguide/semantic-tokens-patterns.html +++ b/docs/styleguide/semantic-tokens-patterns.html @@ -52,6 +52,7 @@ +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
layout-object-group-card-min-widthdimension-object-group-card-min-widthMindestbreite der einzelnen Karten im Pattern Object Group Card.
layout-object-group-card-max-widthdimension-object-group-card-max-widthMaximalbreite der einzelnen Karten im Pattern Object Group Card.
layout-object-group-card-heightdimension-object-group-card-heightFixe Desktop-Höhe der einzelnen Karten im Pattern Object Group Card.

Notifications

diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css index 9bf5ab6..288ba7e 100644 --- a/docs/styleguide/styles/01-foundations.css +++ b/docs/styleguide/styles/01-foundations.css @@ -182,6 +182,7 @@ --layout-notifications-text-segment-fixed-height-small: var(--dimension-notifications-text-segment-fixed-height-small); --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width); --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width); + --layout-object-group-card-height: var(--dimension-object-group-card-height); --surface-object-card-lower-segment: var(--color-white); --text-company-card-data-negative: var(--chart-value-negative); --text-company-card-moat-neutral: var(--chart-value-neutral); @@ -271,8 +272,9 @@ --dimension-object-card-mobile-width: 100%; --dimension-object-card-mobile-height: auto; --dimension-object-card-desktop-breakpoint: 768px; - --dimension-object-group-card-min-width: 550px; - --dimension-object-group-card-max-width: 800px; + --dimension-object-group-card-min-width: 450px; + --dimension-object-group-card-max-width: 650px; + --dimension-object-group-card-height: 700px; --dimension-input-label-width: 9rem; --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px; diff --git a/docs/styleguide/styles/23-patterns-object-group-card.css b/docs/styleguide/styles/23-patterns-object-group-card.css index 8ada867..447c9b0 100644 --- a/docs/styleguide/styles/23-patterns-object-group-card.css +++ b/docs/styleguide/styles/23-patterns-object-group-card.css @@ -10,6 +10,13 @@ flex: 1 1 var(--layout-object-group-card-min-width); min-width: var(--layout-object-group-card-min-width); max-width: var(--layout-object-group-card-max-width); + height: var(--layout-object-group-card-height); +} + +@media (max-width: 767px) { + .sg-object-card[data-pattern="object-group-card"] { + height: auto; + } } .sg-object-group-card__hint { diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 1e82268..bd31103 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -182,6 +182,7 @@ --layout-notifications-text-segment-fixed-height-small: var(--dimension-notifications-text-segment-fixed-height-small); --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width); --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width); + --layout-object-group-card-height: var(--dimension-object-group-card-height); --surface-object-card-lower-segment: var(--color-white); --text-company-card-data-negative: var(--chart-value-negative); --text-company-card-moat-neutral: var(--chart-value-neutral); @@ -271,8 +272,9 @@ --dimension-object-card-mobile-width: 100%; --dimension-object-card-mobile-height: auto; --dimension-object-card-desktop-breakpoint: 768px; - --dimension-object-group-card-min-width: 550px; - --dimension-object-group-card-max-width: 800px; + --dimension-object-group-card-min-width: 450px; + --dimension-object-group-card-max-width: 650px; + --dimension-object-group-card-height: 700px; --dimension-input-label-width: 9rem; --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px; @@ -2330,6 +2332,13 @@ section + section { flex: 1 1 var(--layout-object-group-card-min-width); min-width: var(--layout-object-group-card-min-width); max-width: var(--layout-object-group-card-max-width); + height: var(--layout-object-group-card-height); +} + +@media (max-width: 767px) { + .sg-object-card[data-pattern="object-group-card"] { + height: auto; + } } .sg-object-group-card__hint { diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 64173c8..532ba8b 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": "436eb55", - "syncedAtUtc": "2026-06-11T09:20:37Z", + "styleguideCommit": "5b2e0ff", + "syncedAtUtc": "2026-06-12T06:53:40Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 1e82268..bd31103 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -182,6 +182,7 @@ --layout-notifications-text-segment-fixed-height-small: var(--dimension-notifications-text-segment-fixed-height-small); --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width); --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width); + --layout-object-group-card-height: var(--dimension-object-group-card-height); --surface-object-card-lower-segment: var(--color-white); --text-company-card-data-negative: var(--chart-value-negative); --text-company-card-moat-neutral: var(--chart-value-neutral); @@ -271,8 +272,9 @@ --dimension-object-card-mobile-width: 100%; --dimension-object-card-mobile-height: auto; --dimension-object-card-desktop-breakpoint: 768px; - --dimension-object-group-card-min-width: 550px; - --dimension-object-group-card-max-width: 800px; + --dimension-object-group-card-min-width: 450px; + --dimension-object-group-card-max-width: 650px; + --dimension-object-group-card-height: 700px; --dimension-input-label-width: 9rem; --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px; @@ -2330,6 +2332,13 @@ section + section { flex: 1 1 var(--layout-object-group-card-min-width); min-width: var(--layout-object-group-card-min-width); max-width: var(--layout-object-group-card-max-width); + height: var(--layout-object-group-card-height); +} + +@media (max-width: 767px) { + .sg-object-card[data-pattern="object-group-card"] { + height: auto; + } } .sg-object-group-card__hint {