Let the slider controls take their colours from the slider in 1.11.3

Dots, arrows, counter and button background are style properties of the
slider ("Slider-Steuerung"), written as custom properties onto the slider and
onto the control bar the script places after it, so the script-free markers
and the scripted controls share the same colours.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

src/Content/StyleCompiler.php

@@ -185,6 +185,12 @@ final class StyleCompiler
             if ('' !== $images) {
                 $rules .= sprintf('#%s img{%s}', $id, $images);
             }
+            // Slider colours: on the slider for the script-free markers, and on the control bar
+            // the script places right after it.
+            $controls = $this->declarations($values, 'controls', $device);
+            if ('' !== $controls) {
+                $rules .= sprintf('#%s,#%s + .slider-controls{%s}', $id, $id, $controls);
+            }
             $hover = is_array($values['hover'] ?? null) ? $this->declarations($values['hover'], 'self', $device) : '';
             if ('' !== $hover) {
                 $rules .= sprintf('#%s:hover,#%s:focus-within{%s}', $id, $id, $hover);

src/Content/StyleSchema.php

@@ -204,6 +204,11 @@ final class StyleSchema
                 'auto' => 'Automatisch', 'pointer' => 'Hand', 'default' => 'Pfeil', 'not-allowed' => 'Gesperrt', 'grab' => 'Greifen', 'zoom-in' => 'Lupe',
             ]],
             'transition' => ['group' => 'effect', 'type' => 'number', 'css' => null, 'label' => 'Übergangsdauer (ms)', 'min' => 0, 'max' => 2000, 'step' => 25],
+            // The slider controls are built by the script next to the slider, so their colours
+            // travel as custom properties onto the slider and its controls (target "controls").
+            'sliderDotColor' => ['group' => 'slider', 'type' => 'color', 'css' => '--slider-dot', 'label' => 'Punkte', 'target' => 'controls'],
+            'sliderControlColor' => ['group' => 'slider', 'type' => 'color', 'css' => '--slider-ink', 'label' => 'Pfeile und Zähler', 'target' => 'controls'],
+            'sliderControlBackground' => ['group' => 'slider', 'type' => 'color', 'css' => '--slider-bg', 'label' => 'Hintergrund der Knöpfe', 'target' => 'controls'],
         ];
     }