Document missing pattern and layout semantic tokens

semantic-tokens-components.html

@@ -25,6 +25,17 @@
         <tr><td>divider-card-segment</td><td>color-white</td><td>Trenner zwischen Segmenten.</td></tr>
         <tr><td>text-card-header</td><td>color-font-light</td><td>Header-Textfarbe.</td></tr>
         <tr><td>text-card-body</td><td>color-font-dark</td><td>Standard-Textfarbe im Body.</td></tr>
+        <tr><td>layout-card-body-content-justify</td><td>flex-start</td><td>Ausrichtung des Inhalts im Body-Segment der Card.</td></tr>
+        <tr><td>layout-card-segment-content-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen Inhaltselementen innerhalb eines Card-Segments.</td></tr>
+        <tr><td>layout-card-segment-padding-top</td><td>card-segment-padding-vertical</td><td>Oberer Innenabstand von Card-Segmenten.</td></tr>
+        <tr><td>layout-card-segment-padding-right</td><td>card-segment-padding-horizontal</td><td>Rechter Innenabstand von Card-Segmenten.</td></tr>
+        <tr><td>layout-card-segment-padding-bottom</td><td>card-segment-padding-vertical</td><td>Unterer Innenabstand von Card-Segmenten.</td></tr>
+        <tr><td>layout-card-segment-padding-left</td><td>card-segment-padding-horizontal</td><td>Linker Innenabstand von Card-Segmenten.</td></tr>
+        <tr><td>layout-card-body-padding-top</td><td>layout-card-segment-padding-top</td><td>Oberer Innenabstand des Card-Body-Segments.</td></tr>
+        <tr><td>layout-card-body-padding-right</td><td>layout-card-segment-padding-right</td><td>Rechter Innenabstand des Card-Body-Segments.</td></tr>
+        <tr><td>layout-card-body-padding-bottom</td><td>layout-card-segment-padding-bottom</td><td>Unterer Innenabstand des Card-Body-Segments.</td></tr>
+        <tr><td>layout-card-body-padding-left</td><td>layout-card-segment-padding-left</td><td>Linker Innenabstand des Card-Body-Segments.</td></tr>
+        <tr><td>layout-card-body-text-margin</td><td>0</td><td>Textabstand im Card-Body; verhindert zusätzliche Default-Margins.</td></tr>
       </tbody>
     </table>
 
@@ -65,8 +76,11 @@
     <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-tab-selected</td><td>color-dark-grey</td><td>Fläche des ausgewählten Tabs.</td></tr>
       <tr><td>surface-tab-unselected</td><td>color-white</td><td>Fläche nicht ausgewählter Tabs.</td></tr>
+      <tr><td>surface-tab-compact-background</td><td>surface-form-preview</td><td>Hintergrundfläche kompakter Tab-Navigationen.</td></tr>
+      <tr><td>surface-tab-compact-unselected</td><td>color-medium-grey</td><td>Fläche nicht aktiver Tabs in der kompakten Variante.</td></tr>
       <tr><td>text-tab-selected</td><td>color-font-light</td><td>Textfarbe des ausgewählten Tabs.</td></tr>
       <tr><td>text-tab-unselected</td><td>color-dark-grey</td><td>Textfarbe nicht ausgewählter Tabs.</td></tr>
+      <tr><td>layout-tab-navigation-large-padding-inline</td><td>interaction-padding-horizontal</td><td>Horizontaler Innenabstand für große Tab-Navigationen.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Form Controls</h3>
@@ -105,6 +119,7 @@
       <tr><td>surface-toggle-handle</td><td>color-darkblue</td><td>Toggle-Handle-Fläche.</td></tr>
       <tr><td>layout-mode-toggle-local-height</td><td>compact-interaction-height</td><td>Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß (wie Tasten-Navigation-schmal).</td></tr>
       <tr><td>layout-mode-toggle-local-width-factor</td><td>3</td><td>Breitenfaktor des Modus Schieber lokal relativ zur lokalen Höhe für eine proportionale Kompaktvariante.</td></tr>
+      <tr><td>layout-mode-toggle-width</td><td>calc(interaction-height * 3.5)</td><td>Standardbreite des Mode-Toggles in regulären Varianten.</td></tr>
       <tr><td>surface-checkbox-default</td><td>color-light-grey</td><td>Standardfläche der Checkbox.</td></tr>
       <tr><td>surface-checkbox-on-context</td><td>color-white</td><td>Checkbox-Fläche auf Kontextflächen.</td></tr>
       <tr><td>surface-radio-default</td><td>color-white</td><td>Standardfläche des Radio-Buttons.</td></tr>
@@ -113,6 +128,7 @@
       <tr><td>surface-help-panel</td><td>color-light-grey</td><td>Fläche des Help-Panels.</td></tr>
       <tr><td>text-help-icon</td><td>color-font-dark</td><td>Textfarbe im Help-Icon.</td></tr>
       <tr><td>text-help-panel</td><td>color-font-dark</td><td>Textfarbe im Help-Panel.</td></tr>
+      <tr><td>layout-help-panel-width</td><td>calc(interaction-height * 8)</td><td>Standardbreite des Help-Panels.</td></tr>
       <tr><td>icon-sandwich-line-portal</td><td>color-font-dark</td><td>Linienfarbe des Portal-Sandwich-Icons (groß).</td></tr>
       <tr><td>icon-sandwich-line-object</td><td>color-font-dark</td><td>Linienfarbe des Objekt-Sandwich-Icons (klein).</td></tr>
     </tbody></table>
@@ -176,6 +192,7 @@
     <h3 class="sg-sub-heading sg-section-h3">Typography Preview</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>text-typography-preview</td><td>color-font-light</td><td>Textfarbe in der Typografie-Preview.</td></tr>
+      <tr><td>layout-preview-align-items</td><td>flex-start</td><td>Vertikale Ausrichtung der Elemente innerhalb der Typografie-Preview.</td></tr>
     </tbody></table>
   </section>
 
@@ -219,6 +236,8 @@
       <tr><td>layout-options-row-margin-top</td><td>spacing-small</td><td>Abstand oberhalb der Options Row.</td></tr>
       <tr><td>layout-options-row-main-gap</td><td>spacing-large</td><td>Horizontaler Abstand zwischen linker und rechter Aktionsgruppe.</td></tr>
       <tr><td>layout-options-row-group-gap</td><td>spacing-small</td><td>Abstand zwischen Controls innerhalb der linken und rechten Gruppe.</td></tr>
+      <tr><td>layout-options-row-mode-toggle-width</td><td>7rem</td><td>Breite des Mode-Toggles innerhalb der Options Row.</td></tr>
+      <tr><td>layout-options-row-help-panel-width</td><td>16rem</td><td>Breite des Help-Panels innerhalb der Options Row.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Object Card</h3>
@@ -230,6 +249,8 @@
       <tr><td>layout-object-card-mobile-height</td><td>dimension-object-card-mobile-height</td><td>Inhaltsabhängige Höhe der Object Card auf Mobile.</td></tr>
       <tr><td>layout-object-card-desktop-breakpoint</td><td>dimension-object-card-desktop-breakpoint</td><td>Breakpoint, ab dem die Desktop-Maße der Object Card aktiv sind.</td></tr>
       <tr><td>layout-object-card-content-grow</td><td>dimension-object-card-content-grow</td><td>Flex-Grow-Wert für das vorletzte Segment, damit das Action-Segment unten in der Card bleibt.</td></tr>
+      <tr><td>layout-object-card-actions-margin-top</td><td>spacing-small</td><td>Abstand oberhalb des Action-Segments innerhalb der Object Card.</td></tr>
+      <tr><td>layout-object-card-shared-width</td><td>auto</td><td>Geteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.</td></tr>
       <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>
 
@@ -245,6 +266,10 @@
       <tr><td>surface-content-block-card-content</td><td>color-white</td><td>Hintergrundfläche des unteren Inhalts-Segments der Inhaltsblock-Karte.</td></tr>
       <tr><td>text-content-block-card-title</td><td>color-font-dark</td><td>Textfarbe im Titel-Segment der Inhaltsblock-Karte.</td></tr>
       <tr><td>text-content-block-card-content</td><td>color-font-dark</td><td>Textfarbe im Inhalts-Segment der Inhaltsblock-Karte.</td></tr>
+      <tr><td>layout-content-cards-group-gap</td><td>spacing-small</td><td>Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.</td></tr>
+      <tr><td>surface-card-list-drawer</td><td>color-background-purple</td><td>Fläche des ausziehbaren Card-Listenbereichs.</td></tr>
+      <tr><td>text-card-list-drawer</td><td>color-font-dark</td><td>Textfarbe im ausziehbaren Card-Listenbereich.</td></tr>
+      <tr><td>layout-card-list-drawer-width</td><td>40%</td><td>Breite des ausziehbaren Card-Listenbereichs relativ zum Container.</td></tr>
     </tbody></table>
   </section>