Designer: 93 Eigenschaften, neun Einblendungen, drei neue Bausteine

Umut fragte nach Zeilen, nach Rahmen und Rundungen - und ob der Designer so
aufgestellt ist wie Flatsome. Der Vergleich steht in
docs/DESIGNER-VERGLEICH.md, mit der Einschraenkung, dass Flatsome hier nicht
installierbar war: das ist Wissen, keine Messung.

Zwei echte Fehler kamen dabei heraus, beide vorher unbemerkt.

Eine Rahmenstaerke je Seite wurde zu border-width-top. Das ist kein CSS, der
Browser verwirft die Zeile stillschweigend - Rahmenstaerken je Seite hatten
nie eine Wirkung, und es gab keine Meldung, die darauf hingewiesen haette. Die
Schreibweise steht jetzt je Eigenschaft im Schema, weil padding-top dem Namen
folgt und border-top-width nicht.

Und eine Rundung auf einem Bildblock landete auf dem figure, waehrend das Bild
darin eckig blieb. Eigenschaften koennen jetzt auf das Bild im Block zielen
(target 'img' im Schema, eine zweite Regel im Compiler) - deshalb tut
object-fit ueberhaupt etwas, denn auf einem figure tut es nichts.

Von 50 auf 93 Eigenschaften: Bild (Ausschnitt, Bildmitte, Seitenverhaeltnis,
Hoehe, Ecken, Rahmen), Positionierung mit z-index, getrennte Zeilen- und
Spaltenabstaende, Flex je Element, Innen- und Textschatten, acht Bildfilter
als eine filter-Deklaration in fester Reihenfolge, Mischmodus, Zusatzrahmen,
Mauszeiger. Neun Einblendungen mit Verzoegerung, sieben Hover-Effekte, alle
innerhalb von prefers-reduced-motion.

Drei neue Bausteine (Dokumentschema v15): Symbol als eigenes Element,
Fortschritt mit role=meter und dem Wert im Markup statt nur in der
Balkenbreite, und ein Slider als Scrollbereich mit Einrasten - ohne
JavaScript, ohne Autoplay, mit Finger, Trackpad, Mausrad und Tastatur.

Zeilen waren nicht unauffindbar, sondern unbrauchbar leer: eine Zeile ohne
Spalten sieht aus wie nichts. Jetzt legt "Zeile, 2/3/4 Spalten" beides auf
einen Klick an, und im Werkzeugkasten steht, wie der Aufbau gemeint ist.

315 PHP-Tests / 1309 Assertions, 16 JS-Modelltests, axe auf dreizehn
Bildschirmen ohne Verstoesse. 16 Datensaetze rechnen jede Eigenschaftsform
gegen die erwartete Deklaration nach - die Pruefung, die die beiden Fehler
oben gefunden haette, wenn es sie vorher gegeben haette.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/Content/StyleCompiler.php

@@ -111,6 +111,12 @@ final class StyleCompiler
             if ('' !== $base) {
                 $rules .= sprintf('#%s{%s}', $id, $base);
             }
+            // Some properties belong on the images inside the block, not on the block: object-fit
+            // on a figure does nothing, and a radius on the figure leaves the image square.
+            $images = $this->declarations($values, 'img');
+            if ('' !== $images) {
+                $rules .= sprintf('#%s img{%s}', $id, $images);
+            }
             $hover = is_array($values['hover'] ?? null) ? $this->declarations($values['hover']) : '';
             if ('' !== $hover) {
                 $rules .= sprintf('#%s:hover,#%s:focus-within{%s}', $id, $id, $hover);
@@ -127,8 +133,12 @@ final class StyleCompiler
         return $css;
     }
 
-    /** Turns one validated value set into CSS declarations. */
-    private function declarations(array $values): string
+    /**
+     * Turns one validated value set into CSS declarations.
+     *
+     * @param string $target 'self' for the block, 'img' for the images inside it
+     */
+    private function declarations(array $values, string $target = 'self'): string
     {
         $properties = StyleSchema::properties();
         $out = [];
@@ -137,6 +147,9 @@ final class StyleCompiler
                 continue;
             }
             $property = $properties[$key];
+            if ($target !== ($property['target'] ?? 'self')) {
+                continue;
+            }
             if (null === $property['css']) {
                 continue; // Composed below out of several values.
             }
@@ -148,16 +161,29 @@ final class StyleCompiler
                 continue;
             }
             if ($property['sides'] ?? false) {
+                // The spelling comes from the schema: "border-top-width", not "border-width-top".
+                $pattern = $property['sideCss'] ?? $property['css'].'-%s';
                 foreach ($value as $side => $single) {
-                    $out[] = sprintf('%s-%s:%s', $property['css'], $side, $this->css($property, (string) $single));
+                    $out[] = sprintf('%s:%s', sprintf($pattern, $side), $this->css($property, (string) $single));
                 }
                 continue;
             }
             $out[] = sprintf('%s:%s', $property['css'], $this->css($property, (string) $value));
         }
-        foreach ([$this->background($values), $this->shadow($values), $this->transform($values), $this->grid($values), $this->transition($values)] as $composed) {
-            if ('' !== $composed) {
-                $out[] = $composed;
+        // The composed declarations describe the block itself; none of them has an image variant.
+        if ('self' === $target) {
+            foreach ([
+                $this->background($values),
+                $this->shadow($values),
+                $this->textShadow($values),
+                $this->filter($values),
+                $this->transform($values),
+                $this->grid($values),
+                $this->transition($values),
+            ] as $composed) {
+                if ('' !== $composed) {
+                    $out[] = $composed;
+                }
             }
         }
 
@@ -214,7 +240,8 @@ final class StyleCompiler
         }
 
         return sprintf(
-            'box-shadow:%s %s %s %s %s',
+            'box-shadow:%s%s %s %s %s %s',
+            'innen' === ($values['shadowInset'] ?? 'aussen') ? 'inset ' : '',
             $values['shadowX'] ?? '0',
             $values['shadowY'] ?? '0',
             $values['shadowBlur'] ?? '0',
@@ -223,6 +250,52 @@ final class StyleCompiler
         );
     }
 
+    /** A text shadow, from the same kind of parts as the box shadow. */
+    private function textShadow(array $values): string
+    {
+        $parts = array_intersect_key($values, array_flip(['textShadowX', 'textShadowY', 'textShadowBlur', 'textShadowColor']));
+        if ([] === $parts) {
+            return '';
+        }
+
+        return sprintf(
+            'text-shadow:%s %s %s %s',
+            $values['textShadowX'] ?? '0',
+            $values['textShadowY'] ?? '0',
+            $values['textShadowBlur'] ?? '0',
+            $this->css(['type' => 'color'], (string) ($values['textShadowColor'] ?? '#00000040')),
+        );
+    }
+
+    /**
+     * The image filters, as one declaration in a fixed order.
+     *
+     * The order matters for the result, so it is written here rather than taken from the order in
+     * which someone happened to set the values.
+     */
+    private function filter(array $values): string
+    {
+        $parts = [];
+        foreach ([
+            'blur' => 'blur(%spx)',
+            'brightness' => 'brightness(%s)',
+            'contrast' => 'contrast(%s)',
+            'saturate' => 'saturate(%s)',
+            'grayscale' => 'grayscale(%s)',
+            'sepia' => 'sepia(%s)',
+            'invert' => 'invert(%s)',
+        ] as $key => $format) {
+            if (isset($values[$key])) {
+                $parts[] = sprintf($format, (float) $values[$key]);
+            }
+        }
+        if (isset($values['hueRotate'])) {
+            $parts[] = sprintf('hue-rotate(%ddeg)', (int) $values['hueRotate']);
+        }
+
+        return [] === $parts ? '' : 'filter:'.implode(' ', $parts);
+    }
+
     private function transform(array $values): string
     {
         $parts = [];