From 097af6662e123c2b27cc0124774a89edee54d4a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 21 May 2026 09:07:55 +0200
Subject: [PATCH] Add dedicated Object Group Card width tokens and rules

---
 semantic-tokens-components.html | 9 +++++++++
 semantic-tokens-patterns.html   | 6 ++++++
 styleguide.css                  | 8 ++++++++
 3 files changed, 23 insertions(+)

diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index 147967a..7d541b1 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -47,6 +47,15 @@
       </tbody>
     </table>
 
+    <h3 class="sg-sub-heading sg-section-h3">Pattern Card Breiten</h3>
+    <table class="sg-foundation-table sg-table-label">
+      <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
+      <tbody>
+        <tr><td>layout-object-group-card-min-width</td><td>dimension-object-card-min-width</td><td>Mindestbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
+        <tr><td>layout-object-group-card-max-width</td><td>dimension-object-card-max-width</td><td>Maximalbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
+      </tbody>
+    </table>
+
     <h3 class="sg-sub-heading sg-section-h3">Text Group Box</h3>
     <table class="sg-foundation-table sg-table-label">
       <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html
index c75e0a4..88eb5b7 100644
--- a/semantic-tokens-patterns.html
+++ b/semantic-tokens-patterns.html
@@ -47,6 +47,12 @@
       <tr><td>surface-object-card-lower-segment</td><td>color-white</td><td>Hintergrundfläche der unteren zwei Segmente der Object Card.</td></tr>
     </tbody></table>
 
+    <h3 class="sg-sub-heading sg-section-h3">Object Group Card</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
+      <tr><td>layout-object-group-card-min-width</td><td>dimension-object-card-min-width</td><td>Mindestbreite der einzelnen Karten im Pattern Object Group Card.</td></tr>
+      <tr><td>layout-object-group-card-max-width</td><td>dimension-object-card-max-width</td><td>Maximalbreite der einzelnen Karten im Pattern Object Group Card.</td></tr>
+    </tbody></table>
+
     <h3 class="sg-sub-heading sg-section-h3">Company Card</h3>
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
       <tr><td>text-company-card-data-negative</td><td>chart-value-negative</td><td>Textfarbe für negative Kennzahlenwerte im Data-Columns-Segment der Company Card.</td></tr>
diff --git a/styleguide.css b/styleguide.css
index b7e9804..6609c5d 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -164,6 +164,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
+  --layout-object-group-card-min-width: var(--dimension-object-card-min-width);
+  --layout-object-group-card-max-width: var(--dimension-object-card-max-width);
   --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);
@@ -1806,6 +1808,12 @@ section + section {
   margin-top: auto;
 }
 
+.sg-object-card[data-pattern="object-group-card"] {
+  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);
+}
+
 .sg-object-group-card__hint {
   color: var(--color-font-light);
 }