From 236d9cf1f2da90f20e85bf4863465d847ecdc9fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 1 Jun 2026 17:24:18 +0200
Subject: [PATCH] Add notifications sizing tokens and group-card variant rule

---
 semantic-tokens-patterns.html        |  8 ++++++++
 styles/01-foundations.css            |  3 +++
 styles/28-patterns-notifications.css | 14 +++++++++++---
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html
index de7446d..6af69ce 100644
--- a/semantic-tokens-patterns.html
+++ b/semantic-tokens-patterns.html
@@ -54,6 +54,14 @@
       <tr><td>layout-object-group-card-max-width</td><td>dimension-object-group-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">Notifications</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-notifications-card-flex-basis</td><td>layout-object-card-min-width</td><td>Flex-Basis der Notification Card im Notifications-Pattern; gilt auch in der dokumentierten Variante innerhalb von <code>.sg-group-card</code>.</td></tr>
+      <tr><td>layout-notifications-card-min-width</td><td>layout-object-card-min-width</td><td>Mindestbreite der Notification Card im Notifications-Pattern; verhindert zu frühes Schrumpfen bei Viewport-Änderungen.</td></tr>
+      <tr><td>layout-notifications-card-max-width</td><td>layout-object-card-max-width</td><td>Maximalbreite der Notification Card im Notifications-Pattern; begrenzt Wachstum konsistent zur Object-Card-Breite.</td></tr>
+      <tr><td>layout-notifications-text-segment-fixed-height</td><td>150px</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Notifications-Pattern; auf Mobile wird die Höhe auf auto gesetzt.</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/styles/01-foundations.css b/styles/01-foundations.css
index 592c1f1..959030a 100644
--- a/styles/01-foundations.css
+++ b/styles/01-foundations.css
@@ -170,6 +170,9 @@
   --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-notifications-card-flex-basis: var(--layout-object-card-min-width);
+  --layout-notifications-card-min-width: var(--layout-object-card-min-width);
+  --layout-notifications-card-max-width: var(--layout-object-card-max-width);
   --layout-notifications-text-segment-fixed-height: 150px;
   --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);
diff --git a/styles/28-patterns-notifications.css b/styles/28-patterns-notifications.css
index 64161bd..2f6ade0 100644
--- a/styles/28-patterns-notifications.css
+++ b/styles/28-patterns-notifications.css
@@ -11,9 +11,17 @@
 }
 
 .sg-notifications-pattern__card {
-  flex: 1 1 var(--layout-object-card-min-width);
-  min-width: var(--layout-object-card-min-width);
-  max-width: var(--layout-object-card-max-width);
+  flex: 1 1 var(--layout-notifications-card-flex-basis);
+  min-width: var(--layout-notifications-card-min-width);
+  max-width: var(--layout-notifications-card-max-width);
+}
+
+/* Dokumentierte Pattern-Variante: Notifications innerhalb Group Card */
+.sg-notifications-pattern.sg-group-card > .sg-notifications-pattern__card {
+  flex: 1 1 var(--layout-notifications-card-flex-basis);
+  min-width: var(--layout-notifications-card-min-width);
+  max-width: var(--layout-notifications-card-max-width);
+  width: auto;
 }
 
 .sg-notifications-pattern.sg-notifications-pattern--multi-row .sg-notifications-pattern__card {