Sync styleguide 2026.05.18.1

docs/styleguide/components/email-footer.html

@@ -1,41 +0,0 @@
-<!doctype html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Styleguide – Komponente E-Mail Footer</title>
-  <link rel="stylesheet" href="../styleguide.css">
-</head>
-<body>
-
-  <h1 class="sg-main-heading">Komponente – E-Mail Footer</h1>
-
-  <section id="component-email-footer">
-    <p class="sg-preview-label">Komponente: E-Mail Footer</p>
-
-    <p class="sg-preview-label">E-Mail Footer not subscribed</p>
-
-    <div class="sg-preview-area">
-      <article
-        class="sg-card sg-card--content-card sg-card--footer-card"
-        data-component="content-card"
-        data-component-context="email-footer"
-        data-component-variant="not-subscribed"
-        aria-label="E-Mail Footer not subscribed"
-      >
-        <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
-          <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
-            <p class="sg-body sg-text-layout-pattern__column">
-              Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im zweispaltigen Layout.
-            </p>
-            <p class="sg-body sg-text-layout-pattern__column">
-              Footer rechts: Platzhaltertext fuer ergaenzende Angaben, rechtliche Hinweise oder sekundäre Footer-Inhalte im gleichen Raster.
-            </p>
-          </div>
-        </div>
-      </article>
-    </div>
-  </section>
-
-</body>
-</html>

docs/styleguide/components/email-header.html

@@ -1,37 +0,0 @@
-<!doctype html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Styleguide – Komponente E-Mail Header</title>
-  <link rel="stylesheet" href="../styleguide.css">
-  <link rel="stylesheet" href="../email-styleguide.css">
-</head>
-<body>
-
-  <h1 class="sg-main-heading">Komponente – E-Mail Header</h1>
-
-  <section id="component-email-header">
-    <p class="sg-preview-label">Komponente: E-Mail Header</p>
-
-    <div class="sg-preview-area">
-      <div class="sg-email-preview-viewport">
-        <div class="sg-email-preview-body">
-          <header
-            class="sg-email-header"
-            aria-label="E-Mail Header"
-            data-component="email-header"
-            data-component-variant="logo-only"
-            data-derived-from="portal-header-without-options-row"
-          >
-            <div class="sg-email-header__main" data-component-part="main">
-              <p class="sg-email-header__brand" data-component-part="brand">ValueStockFinder</p>
-            </div>
-          </header>
-        </div>
-      </div>
-    </div>
-  </section>
-
-</body>
-</html>

docs/styleguide/foundations.html

@@ -39,7 +39,7 @@
         <tr><td>font-light</td><td>#FFFFFF</td><td>Schrift auf dunklen Flächen, Portalheader, Card-Headern, Prozessbuttons und ausgewählten Tab-Buttons.</td></tr>
         <tr><td>font-hyperlink</td><td>#FF6900</td><td>Links in Texten, Prozessbuttons und Page-Navigations-Cards.</td></tr>
         <tr><td>process-inactive</td><td>#FFAE79</td><td>Inaktive Hintergrundfläche des Prozessbuttons.</td></tr>
-        <tr><td>background-purple</td><td>#373C4A</td><td>Globaler Portal- und E-Mail-Hintergrund.</td></tr>
+        <tr><td>background-purple</td><td>#373C4A</td><td>Globaler Portalhintergrund.</td></tr>
         <tr><td>background-purple-light</td><td>#656C7D</td><td>Group Cards und gruppierende Card-Flächen.</td></tr>
         <tr><td>transparent</td><td>transparent</td><td>Transparenter Foundation-Wert für semantische Overlay-/Box-Varianten ohne Eigenfläche.</td></tr>
       </tbody>
@@ -157,7 +157,6 @@
         <tr><td>input-label-width</td><td>9rem</td><td>Desktop-Breite der Label-Spalte für gruppierte Formularzeilen mit Pulldowns, Slidern, Radio-Feldern, Checkbox-Feldern sowie ein- und mehrzeiligen Eingabefeldern.</td></tr>
         <tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
         <tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
-        <tr><td>email-body-max-width</td><td>600px</td><td>Maximale Breite des Inhaltsbereichs von E-Mail-Templates innerhalb des E-Mail-Viewports.</td></tr>
         <tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
         <tr><td>scrollable-card-width</td><td>600px</td><td>Standardbreite der eigenständigen Scrollable Card; kann im konsumierenden Portal über den semantischen Layout-Token angepasst werden.</td></tr>
         <tr><td>scrollable-card-height</td><td>600px</td><td>Standardhöhe der eigenständigen Scrollable Card; kann im konsumierenden Portal über den semantischen Layout-Token angepasst werden.</td></tr>

docs/styleguide/index.html

@@ -48,6 +48,7 @@
         <li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
         <li><a href="./patterns/left-navigation.html">Left Navigation</a></li>
         <li><a href="./patterns/notifications.html">Notifications</a></li>
+        <li><a href="./patterns/history-graph.html">History Graph</a></li>
         <li><a href="./patterns/content-cards-group.html">Content Cards Group</a></li>
         <li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
         <li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>

docs/styleguide/patterns/history-graph.html

@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Pattern History Graph</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Pattern – History Graph</h1>
+
+  <section id="pattern-history-graph">
+    <p class="sg-preview-label">Pattern: History Graph</p>
+
+    <div class="sg-preview-area sg-history-graph" aria-label="Verlauf von Ereignissen">
+      <ol class="sg-history-graph__events">
+        <li class="sg-history-graph__event">
+          <article class="sg-card sg-history-graph__card" data-component="card" data-pattern="history-graph-event" aria-label="Aktuellstes Ereignis">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
+              <p class="sg-body">Aktuellstes Ereignis mit einem einzelnen farbigen Segment.</p>
+            </div>
+          </article>
+        </li>
+
+        <li class="sg-history-graph__event">
+          <article class="sg-card sg-history-graph__card" data-component="card" data-pattern="history-graph-event" aria-label="Zweites Ereignis">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow" data-component-part="card-header">
+              <p class="sg-body">Ereignis mit mehreren unabhängig gefärbten Segmenten.</p>
+            </div>
+            <div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
+              <p class="sg-body">Der Inhalt, zum Beispiel Datum und Beschreibung, wird individuell durch das konsumierende Portal definiert.</p>
+            </div>
+          </article>
+        </li>
+
+        <li class="sg-history-graph__event">
+          <article class="sg-card sg-history-graph__card" data-component="card" data-pattern="history-graph-event" aria-label="Ältestes dargestelltes Ereignis">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
+              <p class="sg-body">Ältestes dargestelltes Ereignis.</p>
+            </div>
+          </article>
+        </li>
+
+        <li class="sg-history-graph__event">
+          <article class="sg-card sg-history-graph__card" data-component="card" data-pattern="history-graph-event" aria-label="Viertes Ereignis">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-light" data-component-part="card-header">
+              <p class="sg-body">Viertes Ereignis.</p>
+            </div>
+          </article>
+        </li>
+
+        <li class="sg-history-graph__event">
+          <article class="sg-card sg-history-graph__card" data-component="card" data-pattern="history-graph-event" aria-label="Fünftes Ereignis">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow" data-component-part="card-header">
+              <p class="sg-body">Fünftes Ereignis.</p>
+            </div>
+          </article>
+        </li>
+
+        <li class="sg-history-graph__event">
+          <article class="sg-card sg-history-graph__card" data-component="card" data-pattern="history-graph-event" aria-label="Sechstes Ereignis">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
+              <p class="sg-body">Sechstes Ereignis.</p>
+            </div>
+          </article>
+        </li>
+
+        <li class="sg-history-graph__event">
+          <article class="sg-card sg-history-graph__card" data-component="card" data-pattern="history-graph-event" aria-label="Siebtes Ereignis">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
+              <p class="sg-body">Siebtes Ereignis.</p>
+            </div>
+          </article>
+        </li>
+
+        <li class="sg-history-graph__event">
+          <article class="sg-card sg-history-graph__card" data-component="card" data-pattern="history-graph-event" aria-label="Achtes Ereignis">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-light" data-component-part="card-header">
+              <p class="sg-body">Achtes Ereignis.</p>
+            </div>
+          </article>
+        </li>
+
+        <li class="sg-history-graph__event">
+          <article class="sg-card sg-history-graph__card" data-component="card" data-pattern="history-graph-event" aria-label="Neuntes Ereignis">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow" data-component-part="card-header">
+              <p class="sg-body">Neuntes Ereignis.</p>
+            </div>
+          </article>
+        </li>
+
+        <li class="sg-history-graph__event">
+          <article class="sg-card sg-history-graph__card" data-component="card" data-pattern="history-graph-event" aria-label="Zehntes Ereignis">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
+              <p class="sg-body">Zehntes Ereignis.</p>
+            </div>
+          </article>
+        </li>
+      </ol>
+
+      <!-- Wird nur gerendert, wenn weitere Ereignisse geladen werden können. -->
+      <div class="sg-history-graph__navigation">
+        <div class="sg-navigation-card-layout">
+          <div class="sg-navigation-card-block">
+            <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Weitere Ereignisse laden">
+              <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+                <div class="sg-navigation-card-center">
+                  <a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</body>
+</html>

docs/styleguide/styleguide.css

@@ -3,6 +3,7 @@
 @import "./styles/03-typography-helpers.css";
 @import "./styles/10-components-interactive-elements.css";
 @import "./styles/47-patterns-file-upload.css";
+@import "./styles/48-patterns-history-graph.css";
 @import "./styles/20-patterns-portal-header.css";
 @import "./styles/21-patterns-options-row.css";
 @import "./styles/22-patterns-object-card.css";

docs/styleguide/styles/01-foundations.css

@@ -145,7 +145,6 @@
   --layout-preview-align-items: flex-start;
 
   /* Semantic pattern tokens: Portal header */
-  --surface-portal-background: var(--color-background-purple);
   --surface-portal-header: var(--color-darkblue);
   --surface-portal-header-tab: var(--color-midblue);
   --surface-portal-header-tab-active: var(--color-light-grey);
@@ -311,7 +310,6 @@
   --dimension-input-label-width: 9rem;
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;
-  --dimension-email-body-max-width: 600px;
   --dimension-search-field-width: 15.3rem;
   --dimension-public-content-width: 100%;
   --dimension-layer-pulldown-panel: 40;

docs/styleguide/styles/02-base.css

@@ -8,7 +8,7 @@ body {
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-base);
   color: var(--color-font-dark);
-  background: var(--surface-portal-background);
+  background: var(--color-background-purple);
   margin: 0;
   padding: var(--spacing-small);
 }

docs/styleguide/styles/48-patterns-history-graph.css

@@ -0,0 +1,45 @@
+/* ========================================================= */
+/* Pattern: History Graph                                    */
+/* ========================================================= */
+
+.sg-history-graph {
+  --layout-history-graph-connector-width: var(--score-marker-width);
+  --surface-history-graph-connector: var(--chart-marker-line);
+  width: 100%;
+}
+
+.sg-history-graph__events {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sg-history-graph__event {
+  position: relative;
+  width: 100%;
+}
+
+.sg-history-graph__event:not(:last-child)::after {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: var(--layout-history-graph-connector-width);
+  height: var(--spacing-large);
+  background: var(--surface-history-graph-connector);
+  content: "";
+  transform: translateX(-50%);
+}
+
+.sg-history-graph__card {
+  width: 100%;
+  max-width: var(--layout-object-card-min-width);
+  margin-inline: auto;
+}
+
+.sg-history-graph__navigation {
+  width: 100%;
+}

public/assets/styleguide.upstream.css

@@ -145,7 +145,6 @@
   --layout-preview-align-items: flex-start;
 
   /* Semantic pattern tokens: Portal header */
-  --surface-portal-background: var(--color-background-purple);
   --surface-portal-header: var(--color-darkblue);
   --surface-portal-header-tab: var(--color-midblue);
   --surface-portal-header-tab-active: var(--color-light-grey);
@@ -311,7 +310,6 @@
   --dimension-input-label-width: 9rem;
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;
-  --dimension-email-body-max-width: 600px;
   --dimension-search-field-width: 15.3rem;
   --dimension-public-content-width: 100%;
   --dimension-layer-pulldown-panel: 40;
@@ -359,7 +357,7 @@ body {
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-base);
   color: var(--color-font-dark);
-  background: var(--surface-portal-background);
+  background: var(--color-background-purple);
   margin: 0;
   padding: var(--spacing-small);
 }
@@ -2381,6 +2379,52 @@ section + section {
   }
 }
 
+/* ========================================================= */
+/* Pattern: History Graph                                    */
+/* ========================================================= */
+
+.sg-history-graph {
+  --layout-history-graph-connector-width: var(--score-marker-width);
+  --surface-history-graph-connector: var(--chart-marker-line);
+  width: 100%;
+}
+
+.sg-history-graph__events {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sg-history-graph__event {
+  position: relative;
+  width: 100%;
+}
+
+.sg-history-graph__event:not(:last-child)::after {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: var(--layout-history-graph-connector-width);
+  height: var(--spacing-large);
+  background: var(--surface-history-graph-connector);
+  content: "";
+  transform: translateX(-50%);
+}
+
+.sg-history-graph__card {
+  width: 100%;
+  max-width: var(--layout-object-card-min-width);
+  margin-inline: auto;
+}
+
+.sg-history-graph__navigation {
+  width: 100%;
+}
+
 /* ========================================================= */
 /* Patterns: Portal Header                                   */
 /* ========================================================= */

public/assets/styleguide.upstream.meta.json

@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "8824dc6",
+  "styleguideCommit": "4e4474e",
-  "syncedAtUtc": "2026-09-21T15:27:45Z",
+  "syncedAtUtc": "2026-09-22T07:55:02Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }

public/assets/styles.css

@@ -145,7 +145,6 @@
   --layout-preview-align-items: flex-start;
 
   /* Semantic pattern tokens: Portal header */
-  --surface-portal-background: var(--color-background-purple);
   --surface-portal-header: var(--color-darkblue);
   --surface-portal-header-tab: var(--color-midblue);
   --surface-portal-header-tab-active: var(--color-light-grey);
@@ -311,7 +310,6 @@
   --dimension-input-label-width: 9rem;
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;
-  --dimension-email-body-max-width: 600px;
   --dimension-search-field-width: 15.3rem;
   --dimension-public-content-width: 100%;
   --dimension-layer-pulldown-panel: 40;
@@ -359,7 +357,7 @@ body {
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-base);
   color: var(--color-font-dark);
-  background: var(--surface-portal-background);
+  background: var(--color-background-purple);
   margin: 0;
   padding: var(--spacing-small);
 }
@@ -2381,6 +2379,52 @@ section + section {
   }
 }
 
+/* ========================================================= */
+/* Pattern: History Graph                                    */
+/* ========================================================= */
+
+.sg-history-graph {
+  --layout-history-graph-connector-width: var(--score-marker-width);
+  --surface-history-graph-connector: var(--chart-marker-line);
+  width: 100%;
+}
+
+.sg-history-graph__events {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sg-history-graph__event {
+  position: relative;
+  width: 100%;
+}
+
+.sg-history-graph__event:not(:last-child)::after {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: var(--layout-history-graph-connector-width);
+  height: var(--spacing-large);
+  background: var(--surface-history-graph-connector);
+  content: "";
+  transform: translateX(-50%);
+}
+
+.sg-history-graph__card {
+  width: 100%;
+  max-width: var(--layout-object-card-min-width);
+  margin-inline: auto;
+}
+
+.sg-history-graph__navigation {
+  width: 100%;
+}
+
 /* ========================================================= */
 /* Patterns: Portal Header                                   */
 /* ========================================================= */