Add content group box component

semantic-tokens-components.html

@@ -86,9 +86,17 @@
 
   <section id="semantic-public-page-components">
     <h2 class="sg-sub-heading sg-section-h2">Public Page Components</h2>
-    <p class="sg-table-label">
-      Die konkreten semantischen Tokens für diese Component-Gruppe werden ergänzt, sobald die Components für Public Pages festgelegt sind.
-    </p>
+
+    <h3 class="sg-sub-heading sg-section-h3">Content 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>
+      <tbody>
+        <tr><td>surface-content-group-box</td><td>color-transparent</td><td>Transparente Fläche der Wrapper-Component.</td></tr>
+        <tr><td>border-content-group-box</td><td>color-white</td><td>Temporärer Prüfrahmen für die visuelle Kontrolle der Component-Erstellung.</td></tr>
+        <tr><td>layout-content-group-box-gap</td><td>spacing-large</td><td>Vertikaler Abstand zwischen den direkten Abschnitts-Containern innerhalb der Wrapper-Component.</td></tr>
+        <tr><td>layout-content-group-box-margin-block</td><td>calc(var(--spacing-large) * 0.5)</td><td>Oberer und unterer Außenabstand der Wrapper-Component.</td></tr>
+      </tbody>
+    </table>
   </section>
 
   <section id="semantic-interactive">