Clean interactive elements token cascade and sync docs

foundations.html

@@ -121,7 +121,7 @@
         <tr><td>compact-interaction-height</td><td>1.5rem</td><td>Einheitliche Höhe für schmale Interaktionselemente wie Tasten-Navigation-schmal.</td></tr>
         <tr><td>compact-interaction-padding</td><td>0.15rem vertikal / 0.75rem horizontal</td><td>Innenabstand schmaler Interaktionselemente.</td></tr>
         <tr><td>small-interaction-element-size</td><td>1.25rem</td><td>Eigene Höhe und Breite kleiner Interaktionselemente wie Fragezeichen-Icon, Checkboxen und Radio Buttons.</td></tr>
-        <tr><td>disabled-opacity</td><td>0.45</td><td>Deckkraft für fachlich nicht verfügbare oder technisch deaktivierte Interaktionselemente.</td></tr>
+        <tr><td>disabled-opacity</td><td>0.7</td><td>Deckkraft für fachlich nicht verfügbare oder technisch deaktivierte Interaktionselemente.</td></tr>
         <tr><td>sandwich-line-width</td><td>1.25rem</td><td>Länge der Striche im Sandwich-Menü-Button.</td></tr>
         <tr><td>sandwich-line-height</td><td>4px</td><td>Dicke der Striche im Sandwich-Menü-Button.</td></tr>
         <tr><td>sandwich-line-gap</td><td>3px</td><td>Abstand zwischen den Strichen im Sandwich-Menü-Button.</td></tr>
@@ -137,10 +137,13 @@
         <tr><td>input-label-width</td><td>9rem</td><td>Desktop-Breite der Label-Spalte bei 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>slider-min-inline-size</td><td>14rem</td><td>Minimale Flex-Basisbreite des Slider-Felds in Zeilenlayouts, bevor es auf verfügbare Breite umbricht.</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>object-group-card-min-width</td><td>550px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-max-width</td><td>800px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
+        <tr><td>sandwich-line-width-small</td><td>sandwich-line-width - 3px</td><td>Linienlänge des Sandwich-Icons in der kleinen Objekt-Variante.</td></tr>
+        <tr><td>sandwich-line-height-small</td><td>sandwich-line-height - 1px</td><td>Linienstärke des Sandwich-Icons in der kleinen Objekt-Variante.</td></tr>
         <tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr>
         <tr><td>multiselect-pulldown-panel-desktop-width</td><td>500px</td><td>Reservierte Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
         <tr><td>multiselect-pulldown-panel-mobile-width</td><td>80vw</td><td>Reservierte mobile Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>

semantic-tokens-components.html

@@ -114,10 +114,12 @@
       <tr><td>surface-control-disabled</td><td>color-white</td><td>Fläche deaktivierter Controls.</td></tr>
       <tr><td>text-control-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Controls.</td></tr>
       <tr><td>text-control-disabled</td><td>color-dark-grey</td><td>Textfarbe deaktivierter Controls.</td></tr>
+      <tr><td>text-search-result-count</td><td>text-control-disabled</td><td>Sekundäre Textfarbe der Trefferanzahl neben dem Suchfeld.</td></tr>
       <tr><td>surface-input-clear</td><td>color-medium-grey</td><td>Fläche des Clear-Buttons in Inputs.</td></tr>
       <tr><td>layout-input-label-width</td><td>dimension-input-label-width</td><td>Desktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder.</td></tr>
       <tr><td>layout-input-field-desktop-width</td><td>dimension-input-field-desktop-width</td><td>Fixe Desktop-Breite für ein- und mehrzeilige Eingabefelder.</td></tr>
       <tr><td>layout-input-field-max-width</td><td>dimension-input-field-max-width</td><td>Maximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld).</td></tr>
+      <tr><td>layout-slider-min-inline-size</td><td>dimension-slider-min-inline-size</td><td>Minimale Flex-Basisbreite des Slider-Controls im Zeilenlayout.</td></tr>
       <tr><td>layout-search-field-width</td><td>dimension-search-field-width</td><td>Fixe Breite des Suchfeld-Inputs.</td></tr>
     </tbody></table>
 
@@ -158,6 +160,8 @@
       <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 Sandwich-Icons für große und kleine Variante.</td></tr>
+      <tr><td>layout-sandwich-line-width-small</td><td>dimension-sandwich-line-width-small</td><td>Linienlänge des Sandwich-Icons in der kleinen Objekt-Variante.</td></tr>
+      <tr><td>layout-sandwich-line-height-small</td><td>dimension-sandwich-line-height-small</td><td>Linienstärke des Sandwich-Icons in der kleinen Objekt-Variante.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Slider</h3>

styleguide.css

@@ -80,13 +80,17 @@
   --layout-input-label-width: var(--dimension-input-label-width);
   --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
   --layout-input-field-max-width: var(--dimension-input-field-max-width);
+  --layout-slider-min-inline-size: var(--dimension-slider-min-inline-size);
   --layout-search-field-width: var(--dimension-search-field-width);
   --layout-mode-toggle-local-height: var(--compact-interaction-height);
   --layout-mode-toggle-local-width-factor: 3;
   --layout-mode-toggle-width: calc(var(--interaction-height) * 3.5);
   --layout-help-panel-width: calc(var(--interaction-height) * 8);
+  --layout-sandwich-line-width-small: var(--dimension-sandwich-line-width-small);
+  --layout-sandwich-line-height-small: var(--dimension-sandwich-line-height-small);
   --text-control-default: var(--color-font-dark);
   --text-control-disabled: var(--color-dark-grey);
+  --text-search-result-count: var(--text-control-disabled);
   --text-button-process: var(--color-font-light);
   --text-tab-selected: var(--color-font-light);
   --text-tab-unselected: var(--color-dark-grey);
@@ -248,7 +252,10 @@
   --dimension-input-label-width: 9rem;
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;
+  --dimension-slider-min-inline-size: 14rem;
   --dimension-search-field-width: 15.3rem;
+  --dimension-sandwich-line-width-small: calc(var(--sandwich-line-width) - 3px);
+  --dimension-sandwich-line-height-small: calc(var(--sandwich-line-height) - 1px);
   --dimension-layer-pulldown-panel: 40;
   --dimension-multiselect-pulldown-panel-desktop-width: 500px;
   --dimension-multiselect-pulldown-panel-mobile-width: 80vw;
@@ -740,7 +747,7 @@ section + section {
     }
 
     .sg-search-result-count {
-      color: var(--color-dark-grey);
+      color: var(--text-search-result-count);
       font-family: var(--font-family-base);
       font-size: var(--font-size-base);
       line-height: var(--line-height-base);
@@ -951,7 +958,7 @@ section + section {
     }
 
     .sg-slider {
-      flex: 1 1 14rem;
+      flex: 1 1 var(--layout-slider-min-inline-size);
       width: 100%;
       min-width: 0;
       max-width: var(--layout-input-field-max-width);
@@ -1235,12 +1242,12 @@ section + section {
     }
 
     .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line {
-      height: calc(var(--sandwich-line-height) - 1px);
+      height: var(--layout-sandwich-line-height-small);
       background: var(--icon-sandwich-line-portal);
     }
 
     .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon {
-      width: calc(var(--sandwich-line-width) - 3px);
+      width: var(--layout-sandwich-line-width-small);
     }
 
     .sg-sandwich-menu-wrap {