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/DocumentValidator.php

@@ -25,6 +25,10 @@ final class DocumentValidator
     public const V11_TYPES = ['partialref', 'menu'];
     /** Schema v14: content from a third party, which stays unloaded until consent is given. */
     public const V14_TYPES = ['embed'];
+    /** The sizes an icon can have; each one has a class in site.css. */
+    public const ICON_SIZES = [12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 120, 160, 200, 240];
+    /** Schema v15: a single icon, a progress bar and a slider that works without a script. */
+    public const V15_TYPES = ['icon', 'progress', 'slider'];
 
     /**
      * @param bool $requireHeading A page needs exactly one main heading. A header, a footer or a
@@ -34,7 +38,7 @@ final class DocumentValidator
     public function validate(array $document, bool $requireHeading = true): void
     {
         $schemaVersion = $document['schemaVersion'] ?? null;
-        $this->require(in_array($schemaVersion, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], true), 'Unsupported document schema.');
+        $this->require(in_array($schemaVersion, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], true), 'Unsupported document schema.');
         $this->text($document['title'] ?? null, 160);
         $this->text($document['description'] ?? null, 320);
         $this->require(is_array($document['blocks'] ?? null) && array_is_list($document['blocks']), 'Blocks must be a list.');
@@ -62,7 +66,7 @@ final class DocumentValidator
         // page: a deactivated plugin must never make stored content unreadable. Nothing from
         // props is rendered for such a block, so unvalidated values never reach the output.
         $plugin = $schemaVersion >= 4 && is_string($type) && 1 === preg_match('/^[a-z][a-z0-9]{1,30}\.[a-z][a-z0-9-]{1,40}$/D', $type);
-        $this->require(in_array($type, ['section', 'row', 'column', 'heading', 'text', 'image', 'button'], true) || ($schemaVersion >= 3 && 'gallery' === $type) || ($schemaVersion >= 5 && 'postlist' === $type) || ($schemaVersion >= 6 && in_array($type, self::V6_TYPES, true)) || ($schemaVersion >= 7 && in_array($type, self::V7_TYPES, true)) || ($schemaVersion >= 8 && in_array($type, self::V8_TYPES, true)) || ($schemaVersion >= 9 && in_array($type, self::V9_TYPES, true)) || ($schemaVersion >= 11 && in_array($type, self::V11_TYPES, true)) || ($schemaVersion >= 14 && in_array($type, self::V14_TYPES, true)) || $plugin, 'Unknown block type. Preserve source until its plugin is available.');
+        $this->require(in_array($type, ['section', 'row', 'column', 'heading', 'text', 'image', 'button'], true) || ($schemaVersion >= 3 && 'gallery' === $type) || ($schemaVersion >= 5 && 'postlist' === $type) || ($schemaVersion >= 6 && in_array($type, self::V6_TYPES, true)) || ($schemaVersion >= 7 && in_array($type, self::V7_TYPES, true)) || ($schemaVersion >= 8 && in_array($type, self::V8_TYPES, true)) || ($schemaVersion >= 9 && in_array($type, self::V9_TYPES, true)) || ($schemaVersion >= 11 && in_array($type, self::V11_TYPES, true)) || ($schemaVersion >= 14 && in_array($type, self::V14_TYPES, true)) || ($schemaVersion >= 15 && in_array($type, self::V15_TYPES, true)) || $plugin, 'Unknown block type. Preserve source until its plugin is available.');
         // An accordion entry only ever renders inside an accordion; at the top level or anywhere
         // else it would produce a details element without its group.
         $this->require('accordionitem' !== $type || 'accordion' === $parentType, 'An accordion entry belongs into an accordion.');
@@ -90,7 +94,14 @@ final class DocumentValidator
         foreach ($layout as $key => $value) {
             if ('effects' === $key && $schemaVersion >= 3) {
                 $this->require(is_array($value), 'Effects must be an object.');
-                $effects = ['shadow' => ['none', 'soft', 'strong'], 'hover' => ['none', 'lift', 'zoom'], 'entrance' => ['none', 'fade', 'rise']];
+                $effects = [
+                    'shadow' => ['none', 'soft', 'strong'],
+                    'hover' => ['none', 'lift', 'zoom', 'sink', 'glow', 'tilt', 'grow-border'],
+                    // Entrance animations run when the page loads, not when the element scrolls
+                    // into view: that would need a script, and a public page runs none.
+                    'entrance' => ['none', 'fade', 'rise', 'sink', 'left', 'right', 'zoom', 'flip', 'blur'],
+                    'delay' => ['none', 'short', 'medium', 'long'],
+                ];
                 foreach ($value as $effect => $token) {
                     $this->require(isset($effects[$effect]) && in_array($token, $effects[$effect], true), 'Unknown effect.');
                 }
@@ -181,6 +192,34 @@ final class DocumentValidator
             // change reaches every page that links it and a page cannot alter a shared section.
             $this->require(is_string($props['partial'] ?? null) && 1 === preg_match('/^[a-z0-9]+(?:-[a-z0-9]+)*$/D', $props['partial']) && strlen($props['partial']) <= 80, 'Invalid section address.');
         }
+        if ('icon' === $type) {
+            $this->require(in_array($props['icon'] ?? null, self::ICONS, true), 'Unknown icon.');
+            // A fixed list, because the size becomes a class: a value without a class would leave
+            // an icon with no dimensions at all, and an SVG without dimensions is invisible.
+            $this->require(in_array($props['size'] ?? null, self::ICON_SIZES, true), sprintf('Die Symbolgröße ist eine aus %s.', implode(', ', self::ICON_SIZES)));
+            // A decorative icon is hidden from assistive technology; one that carries meaning
+            // needs a label, or a screen reader announces nothing at all.
+            $this->require(is_bool($props['decorative'] ?? null), 'Der Zweck des Symbols ist anzugeben.');
+            $this->text($props['label'] ?? null, 120, $props['decorative']);
+            $this->require(!$props['decorative'] || '' === $props['label'], 'Ein dekoratives Symbol hat keine Beschriftung.');
+            if ('' !== ($props['href'] ?? '')) {
+                $this->url($props['href']);
+            }
+        }
+        if ('progress' === $type) {
+            $this->text($props['label'] ?? null, 120);
+            $this->require(is_int($props['value'] ?? null) && $props['value'] >= 0 && $props['value'] <= 100, 'Der Wert liegt zwischen 0 und 100.');
+            $this->require(is_bool($props['showValue'] ?? null), 'Die Anzeige des Werts ist anzugeben.');
+        }
+        if ('slider' === $type) {
+            // The slider is a scroll container: how many slides are visible per device is the
+            // only thing it stores, the slides themselves are ordinary blocks.
+            foreach (['desktop', 'tablet', 'mobile'] as $device) {
+                $key = $device.'Visible';
+                $this->require(is_int($props[$key] ?? null) && $props[$key] >= 1 && $props[$key] <= 6, sprintf('"%s" liegt zwischen 1 und 6.', $key));
+            }
+            $this->require(is_bool($props['snap'] ?? null), 'Das Einrasten ist anzugeben.');
+        }
         if ('embed' === $type) {
             // Everything about the embed is validated here, because the address ends up in an
             // iframe and in the content security policy of the page.
@@ -236,7 +275,7 @@ final class DocumentValidator
         $children = $block['children'] ?? [];
         $this->require(is_array($children) && array_is_list($children), 'Children must be a list.');
         // A plugin block may nest content; keeping its children is part of preserving the page.
-        $container = $plugin || in_array($type, ['section', 'row', 'column', 'gallery', 'logos', 'accordion', 'accordionitem', 'tabs', 'tabitem'], true);
+        $container = $plugin || in_array($type, ['section', 'row', 'column', 'gallery', 'logos', 'accordion', 'accordionitem', 'tabs', 'tabitem', 'slider'], true);
         $this->require($container || [] === $children, 'Leaf blocks cannot contain children.');
         // Containers that only accept one kind of child, so the rendered markup stays valid.
         $only = ['gallery' => 'image', 'logos' => 'image', 'accordion' => 'accordionitem', 'tabs' => 'tabitem'];