Add the stack layout component and the layout foundation

Plan step 35: <x-stack gap align>, the first of M3's layout components, with what they all share - src/Support/Layout.php reading the props into data-md-* attributes, the spacing-token gap and padding rules, the hide-below/hide-from rules in material.visibility, the stylesheet checks for resources/css/layout, the browser test file and the skill's Layout group. The Workbench puts the material layers above Tailwind's preflight, which would otherwise zero every layout padding and margin. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-14 14:50:27 +02:00
parent 6be9f35c98
commit b677e60876
13 changed files with 724 additions and 3 deletions
@@ -0,0 +1,43 @@
+<?php
+
+it('stacks its children in a div with no gap and no alignment of its own', function () {
+    $root = layoutRoot((string) $this->blade('<x-stack><p>One</p><p>Two</p></x-stack>'));
+
+    expect($root)->toMatchArray(['<' => 'div', 'data-md-stack' => 'data-md-stack'])
+        ->not->toHaveKeys(['data-md-gap', 'data-md-align', 'data-md-hide-below', 'data-md-hide-from']);
+});
+
+it('spaces its children with a spacing token only, and with none for anything else', function () {
+    expect(layoutRoot((string) $this->blade('<x-stack gap="space200" />'))['data-md-gap'])->toBe('space200')
+        ->and(layoutRoot((string) $this->blade('<x-stack gap="16px" />'))['data-md-gap'])->toBe('none')
+        ->and(layoutRoot((string) $this->blade('<x-stack gap="space1000" />'))['data-md-gap'])->toBe('none');
+});
+
+it('aligns its children across it', function () {
+    foreach (['stretch', 'start', 'center', 'end'] as $align) {
+        expect(layoutRoot((string) $this->blade('<x-stack :align="$align" />', ['align' => $align]))['data-md-align'])->toBe($align);
+    }
+
+    expect(layoutRoot((string) $this->blade('<x-stack align="baseline" />')))->not->toHaveKey('data-md-align');
+});
+
+it('takes the element, the visibility props and the caller\'s class and style', function () {
+    expect(layoutRoot((string) $this->blade('<x-stack as="ul" hide-below="medium" hide-from="large" class="steps" style="max-width: 40rem" />')))
+        ->toMatchArray([
+            '<' => 'ul',
+            'data-md-hide-below' => 'medium',
+            'data-md-hide-from' => 'large',
+            'class' => 'steps',
+            'style' => 'max-width: 40rem;',
+        ]);
+});
+
+it('draws the stack from a stylesheet in the layout layer, imported by layout.css', function () {
+    $css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/stack.css');
+
+    expect($css)->toContain('@layer material.layout')
+        ->toContain("[data-md-stack] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--md-gap);")
+        // A stack inside another never takes its parent's gap.
+        ->toContain(":where([data-md-stack]) {\n        --md-gap: 0px;")
+        ->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/stack.css';");
+});