diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index 15bd66b..c318213 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -25,6 +25,17 @@
| divider-card-segment | color-white | Trenner zwischen Segmenten. |
| text-card-header | color-font-light | Header-Textfarbe. |
| text-card-body | color-font-dark | Standard-Textfarbe im Body. |
+ | layout-card-body-content-justify | flex-start | Ausrichtung des Inhalts im Body-Segment der Card. |
+ | layout-card-segment-content-gap | spacing-small | Vertikaler Abstand zwischen Inhaltselementen innerhalb eines Card-Segments. |
+ | layout-card-segment-padding-top | card-segment-padding-vertical | Oberer Innenabstand von Card-Segmenten. |
+ | layout-card-segment-padding-right | card-segment-padding-horizontal | Rechter Innenabstand von Card-Segmenten. |
+ | layout-card-segment-padding-bottom | card-segment-padding-vertical | Unterer Innenabstand von Card-Segmenten. |
+ | layout-card-segment-padding-left | card-segment-padding-horizontal | Linker Innenabstand von Card-Segmenten. |
+ | layout-card-body-padding-top | layout-card-segment-padding-top | Oberer Innenabstand des Card-Body-Segments. |
+ | layout-card-body-padding-right | layout-card-segment-padding-right | Rechter Innenabstand des Card-Body-Segments. |
+ | layout-card-body-padding-bottom | layout-card-segment-padding-bottom | Unterer Innenabstand des Card-Body-Segments. |
+ | layout-card-body-padding-left | layout-card-segment-padding-left | Linker Innenabstand des Card-Body-Segments. |
+ | layout-card-body-text-margin | 0 | Textabstand im Card-Body; verhindert zusätzliche Default-Margins. |
@@ -69,6 +80,7 @@
| surface-tab-compact-unselected | color-medium-grey | Fläche nicht aktiver Tabs in der kompakten Variante. |
| text-tab-selected | color-font-light | Textfarbe des ausgewählten Tabs. |
| text-tab-unselected | color-dark-grey | Textfarbe nicht ausgewählter Tabs. |
+ | layout-tab-navigation-large-padding-inline | interaction-padding-horizontal | Horizontaler Innenabstand für große Tab-Navigationen. |
Form Controls
@@ -80,12 +92,21 @@
| text-control-default | color-font-dark | Standard-Textfarbe in Controls. |
| text-control-disabled | color-dark-grey | Textfarbe deaktivierter Controls. |
| surface-input-clear | color-medium-grey | Fläche des Clear-Buttons in Inputs. |
+ | layout-input-label-width | dimension-input-label-width | Desktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder. |
+ | layout-input-field-desktop-width | dimension-input-field-desktop-width | Fixe Desktop-Breite für ein- und mehrzeilige Eingabefelder. |
+ | layout-input-field-max-width | dimension-input-field-max-width | Maximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld). |
+ | layout-search-field-width | dimension-search-field-width | Fixe Breite des Suchfeld-Inputs. |
Pulldown and Menu
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
| surface-pulldown-panel | color-light-grey | Fläche geöffneter Pulldown-Panels. |
| icon-pulldown-chevron | currentColor-basierte Verlaufsgrafik | Chevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe. |
+ | layout-pulldown-panel-padding-inline | compact-interaction-padding-horizontal | Horizontaler Innenabstand des geöffneten Pulldown-Panels. |
+ | layout-pulldown-option-padding-inline | compact-interaction-padding-horizontal | Horizontaler Innenabstand der einzelnen Pulldown-Optionen. |
+ | layout-pulldown-padding-inline | compact-interaction-padding-horizontal | Innenabstand links für Pulldown-Trigger und Select-Felder. |
+ | layout-pulldown-chevron-offset | compact-interaction-padding-horizontal | Rechter Innenabstand des Chevron-Icons im Pulldown. |
+ | layout-pulldown-chevron-reserved-space | spacing-large | Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich. |
| surface-menu-panel-portal | color-light-grey | Fläche des Sandwich-Menü-Panels für große und kleine Variante. |
| text-menu-link-portal | color-font-dark | Linktextfarbe im Sandwich-Menü für große und kleine Variante. |
@@ -94,6 +115,9 @@
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
| surface-toggle-track | color-medium-grey | Toggle-Track-Fläche. |
| surface-toggle-handle | color-darkblue | Toggle-Handle-Fläche. |
+ | layout-mode-toggle-local-height | compact-interaction-height | Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß. |
+ | layout-mode-toggle-local-width-factor | 3 | Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe. |
+ | layout-mode-toggle-width | calc(interaction-height * 3.5) | Standardbreite des Mode-Toggles in regulären Varianten. |
| surface-checkbox-default | color-light-grey | Standardfläche der Checkbox. |
| surface-checkbox-on-context | color-white | Checkbox-Fläche auf Kontextflächen. |
| surface-radio-default | color-white | Standardfläche des Radio-Buttons. |
@@ -102,6 +126,7 @@
| surface-help-panel | color-light-grey | Fläche des Help-Panels. |
| text-help-icon | color-font-dark | Textfarbe im Help-Icon. |
| text-help-panel | color-font-dark | Textfarbe im Help-Panel. |
+ | layout-help-panel-width | calc(interaction-height * 8) | Standardbreite des Help-Panels. |
| icon-sandwich-line-portal | color-font-dark | Linienfarbe des Sandwich-Icons für große und kleine Variante. |
@@ -164,6 +189,7 @@
Typography Preview
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
| text-typography-preview | color-font-light | Textfarbe in der Typografie-Preview. |
+ | layout-preview-align-items | flex-start | Vertikale Ausrichtung der Elemente innerhalb der Typografie-Preview. |
diff --git a/semantic-tokens-layouts.html b/semantic-tokens-layouts.html
index 46f3829..7d31c6c 100644
--- a/semantic-tokens-layouts.html
+++ b/semantic-tokens-layouts.html
@@ -13,45 +13,7 @@
Layouts
- Cards
- | Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Layout |
- | layout-card-body-content-justify | flex-start | Ausrichtung des Inhalts im Body-Segment der Card. |
- | layout-card-segment-content-gap | spacing-small | Vertikaler Abstand zwischen Inhaltselementen innerhalb eines Card-Segments. |
- | layout-card-segment-padding-top | card-segment-padding-vertical | Oberer Innenabstand von Card-Segmenten. |
- | layout-card-segment-padding-right | card-segment-padding-horizontal | Rechter Innenabstand von Card-Segmenten. |
- | layout-card-segment-padding-bottom | card-segment-padding-vertical | Unterer Innenabstand von Card-Segmenten. |
- | layout-card-segment-padding-left | card-segment-padding-horizontal | Linker Innenabstand von Card-Segmenten. |
- | layout-card-body-padding-top | layout-card-segment-padding-top | Oberer Innenabstand des Card-Body-Segments. |
- | layout-card-body-padding-right | layout-card-segment-padding-right | Rechter Innenabstand des Card-Body-Segments. |
- | layout-card-body-padding-bottom | layout-card-segment-padding-bottom | Unterer Innenabstand des Card-Body-Segments. |
- | layout-card-body-padding-left | layout-card-segment-padding-left | Linker Innenabstand des Card-Body-Segments. |
- | layout-card-body-text-margin | 0 | Textabstand im Card-Body; verhindert zusätzliche Default-Margins. |
-
-
- Interactive Elements
- | Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Layout |
- | layout-tab-navigation-large-padding-inline | interaction-padding-horizontal | Horizontaler Innenabstand für große Tab-Navigationen. |
- | layout-input-label-width | dimension-input-label-width | Desktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder. |
- | layout-input-field-desktop-width | dimension-input-field-desktop-width | Fixe Desktop-Breite für ein- und mehrzeilige Eingabefelder. |
- | layout-input-field-max-width | dimension-input-field-max-width | Maximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld). |
- | layout-search-field-width | dimension-search-field-width | Fixe Breite des Suchfeld-Inputs. |
- | layout-pulldown-panel-padding-inline | compact-interaction-padding-horizontal | Horizontaler Innenabstand des geöffneten Pulldown-Panels. |
- | layout-pulldown-option-padding-inline | compact-interaction-padding-horizontal | Horizontaler Innenabstand der einzelnen Pulldown-Optionen. |
- | layout-pulldown-padding-inline | compact-interaction-padding-horizontal | Innenabstand links für Pulldown-Trigger und Select-Felder. |
- | layout-pulldown-chevron-offset | compact-interaction-padding-horizontal | Rechter Innenabstand des Chevron-Icons im Pulldown. |
- | layout-pulldown-chevron-reserved-space | spacing-large | Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich. |
- | layout-mode-toggle-local-height | compact-interaction-height | Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß. |
- | layout-mode-toggle-local-width-factor | 3 | Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe. |
- | layout-mode-toggle-width | calc(interaction-height * 3.5) | Standardbreite des Mode-Toggles in regulären Varianten. |
- | layout-help-panel-width | calc(interaction-height * 8) | Standardbreite des Help-Panels. |
-
-
- Typography
- | Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Layout |
- | layout-preview-align-items | flex-start | Vertikale Ausrichtung der Elemente innerhalb der Typografie-Preview. |
-
-
- Pattern Layout Tokens
+ Pattern und Seiten-Layouts
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Layout |
| layout-options-row-margin-top | spacing-small | Abstand oberhalb der Options Row. |
| layout-options-row-main-gap | spacing-large | Horizontaler Abstand zwischen linker und rechter Aktionsgruppe. |