Add the feed canonical layout

Plan step 35: <x-feed min-item gap>, following the reference's feed rules
- one column below medium, then as many equal columns of at least the
minimum item width as the feed has room for, 24px apart from medium,
items in their source order.

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

tests/Browser/LayoutTest.php

@@ -386,3 +386,24 @@ it('docks the supporting pane as a bottom sheet below expanded, opened and close
         ->assertScript(layoutRect(SUPPORTING_SIDE, 'width').' === 360')
         ->assertNoJavaScriptErrors();
 });
+
+it('lays a feed out in one column below medium and in columns of its minimum width from it, in order', function () {
+    $body = '<x-feed id="feed" min-item="240px">'
+        .collect(range(1, 6))->map(fn (int $item): string => "<article id=\"item-{$item}\">Item {$item}</article>")->implode('')
+        .'</x-feed>';
+
+    layoutPage($body, 599)
+        ->assertScript(layoutColumns('#feed').' === 1')
+        ->assertScript(layoutStyle('#feed', 'rowGap')." === '16px'");
+
+    // 600px, less no margins, fits two 240px columns with M3's 24px spacer between them.
+    layoutPage($body, 600)
+        ->assertScript(layoutColumns('#feed').' === 2')
+        ->assertScript(layoutStyle('#feed', 'columnGap')." === '24px'")
+        ->assertScript(layoutRect('#item-2', 'left').' > '.layoutRect('#item-1', 'left'))
+        ->assertScript(layoutRect('#item-3', 'top').' > '.layoutRect('#item-1', 'top'));
+
+    layoutPage($body, 1200)
+        ->assertScript(layoutColumns('#feed').' === 4')
+        ->assertScript(layoutRect('#item-5', 'left').' === '.layoutRect('#item-1', 'left'));
+});

tests/Feature/Components/FeedTest.php

@@ -0,0 +1,42 @@
+<?php
+
+it('lays out a feed with a 240px minimum item and M3\'s spacer', function () {
+    $html = (string) $this->blade('<x-feed><article>One</article><article>Two</article></x-feed>');
+
+    expect(layoutRoot($html))->toMatchArray(['<' => 'div', 'data-md-feed' => 'data-md-feed', 'style' => '--md-min-item: 240px;'])
+        ->not->toHaveKey('data-md-gap')
+        ->and($html)->toContain('<article>One</article><article>Two</article>');
+});
+
+it('takes a minimum item width as a length or a number of px', function () {
+    foreach (['280px' => '280px', '18rem' => '18rem', '320' => '320px'] as $given => $length) {
+        expect(layoutRoot((string) $this->blade('<x-feed :min-item="$m" />', ['m' => $given]))['style'])->toBe("--md-min-item: {$length};");
+    }
+
+    expect(layoutRoot((string) $this->blade('<x-feed min-item="a third" />'))['style'])->toBe('--md-min-item: 240px;');
+});
+
+it('replaces the spacer with a spacing token, and with no gap for an unknown one', function () {
+    expect(layoutRoot((string) $this->blade('<x-feed gap="space400" />'))['data-md-gap'])->toBe('space400')
+        ->and(layoutRoot((string) $this->blade('<x-feed gap="wide" />'))['data-md-gap'])->toBe('none');
+});
+
+it('takes the element, the visibility props, and the caller\'s class and style after its own', function () {
+    expect(layoutRoot((string) $this->blade('<x-feed as="ul" hide-below="medium" class="photos" style="padding-block: 1rem" />')))
+        ->toMatchArray([
+            '<' => 'ul',
+            'data-md-hide-below' => 'medium',
+            'class' => 'photos',
+            'style' => '--md-min-item: 240px; padding-block: 1rem;',
+        ]);
+});
+
+it('keeps one column on a compact window and fills columns from medium, in the layout layer', function () {
+    $css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/feed.css');
+
+    expect($css)->toContain('@layer material.layout')
+        ->toContain("[data-md-feed] {\n        display: grid;\n        grid-template-columns: minmax(0, 1fr);")
+        ->toContain("@media (width >= 600px) {\n            grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--md-min-item, 240px)), 1fr));")
+        ->not->toContain('grid-auto-flow')
+        ->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/feed.css';");
+});