noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add the stack layout component and the layout foundation

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
workbench/resources/css/app.css
+6 -3
View File
@@ -1,7 +1,10 @@
/* The Workbench builds the package as an application would, with explicit sources so the plans
in docs/ are not scanned for class names. The foundation comes before Tailwind, so the
`material` layers are declared first and sit below Tailwind's; tailwind.css brings the
components still written for Tailwind, without declaring the tokens a second time. */
in docs/ are not scanned for class names. The layer statement puts the `material` layers above
Tailwind's preflight (`base`) and below its `components` and `utilities`: a rewritten component's
padding, margin and border would otherwise lose to preflight's `* { padding: 0 }`, which the
material reset already carries, while every utility still outranks the package. tailwind.css
brings the components still written for Tailwind, without declaring the tokens a second time. */
@layer theme, base, material, components, utilities;
@import '../../../resources/css/foundation.css';
@import '../../../resources/css/layout.css';
@import '../../../resources/css/components.css';