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
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 14:50:27 +02:00
co-authored by Claude Opus 5
parent 6be9f35c98
commit b677e60876
13 changed files with 724 additions and 3 deletions
@@ -0,0 +1,33 @@
{{-- Children one under another, inside a pane.
<x-stack gap="space200"></x-stack>
`gap` is a spacing token's name, `space25` … `space900` (docs/reference/m3/styles-supplement.md
§ Spacing), and none when left out or unknown. `align` places the children across the stack:
`stretch` (the default), `start`, `center` or `end`.
M3's layout has no arrangement component inside a pane its "column" is a grid column so
this is the package's neutral one, beside `<x-row>` and `<x-grid>`. It takes `as`,
`hide-below` and `hide-from` like every layout component, and the caller's `class` and
`style` land on it untouched. Drawn by resources/css/layout/stack.css. --}}
@props([
'as' => null,
'gap' => null,
'align' => null,
'hideBelow' => null,
'hideFrom' => null,
])
@php
$layout = \NoNameWeb\LivewireMaterial\Support\Layout::class;
$element = $layout::element($as);
$attributes = $attributes->merge(array_filter([
'data-md-stack' => true,
'data-md-gap' => $layout::spacing($gap),
'data-md-align' => $layout::choice($align, ['stretch', 'start', 'center', 'end']),
] + $layout::visibility($hideBelow, $hideFrom), fn ($value): bool => $value !== null));
@endphp
<{{ $element }} {{ $attributes }}>{{ $slot }}</{{ $element }}>