Add the surface layout component

Plan step 35: <x-surface level padding corner outlined>, a tonal region
in surface or a surface-container step, padded with a spacing token,
rounded with a corner token and optionally edged in outline-variant. A
pane on a surface keeps its margin again, since the surface is a new edge.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

tests/Browser/LayoutTest.php

@@ -126,3 +126,19 @@ it('fills a grid with columns of a minimum width, capped by the count', function
         ->assertScript(layoutColumns('#fill').' === 3')
         ->assertScript(layoutColumns('#capped').' === 2');
 });
+
+it('draws a surface in its role, padding and corner, and hides it below a breakpoint', function () {
+    $body = '<x-surface id="surface" level="surface-container-high" padding="space300" corner="lg" outlined hide-below="medium">Surface</x-surface>'
+        .'<div id="role" style="background-color: var(--md-sys-color-surface-container-high)"></div>';
+
+    layoutPage($body, 599)
+        ->assertScript(layoutStyle('#surface', 'display')." === 'none'");
+
+    layoutPage($body, 600)
+        ->assertScript(layoutStyle('#surface', 'display')." === 'block'")
+        ->assertScript(layoutStyle('#surface', 'backgroundColor').' === '.layoutStyle('#role', 'backgroundColor'))
+        ->assertScript(layoutStyle('#surface', 'paddingTop')." === '24px'")
+        ->assertScript(layoutStyle('#surface', 'borderTopLeftRadius')." === '16px'")
+        ->assertScript(layoutStyle('#surface', 'borderTopWidth')." === '1px'")
+        ->assertNoJavaScriptErrors();
+});