Add dedicated Object Group Card width tokens and rules

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>

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>

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);
 }