Add the row layout component

Plan step 35: <x-row gap align justify wrap stack-below>, children side by side in a pane and stacked under one another below an M3 breakpoint, in the inline direction so a right-to-left document mirrors it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-14 14:50:39 +02:00
parent b677e60876
commit 8de053f15c
6 changed files with 247 additions and 0 deletions
@@ -7,3 +7,4 @@
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@import './layout/stack.css';
+@import './layout/row.css';
@@ -0,0 +1,111 @@
+/*
+ * <x-row>: its children side by side, in a pane, stacked under one another below a breakpoint.
+ *
+ * A flex row in the inline direction, so it runs right to left in a right-to-left document, as M3's
+ * bidirectionality rules ask of every layout (docs/reference/m3/foundations.md § Layout →
+ * Bidirectionality / RTL). Children are centred across the row unless `data-md-align` says
+ * `start`, `end`, `stretch` or `baseline`; `data-md-justify` places them along it (`start`,
+ * `center`, `end`, `between`); `data-md-wrap` lets them wrap. The space between them is `--md-gap`
+ * (spacing.css).
+ *
+ * `data-md-stack-below` turns the row into a column on a window narrower than the breakpoint it
+ * names (M3's, in px: medium 600, expanded 840, large 1200, extra-large 1600) — M3's "reposition"
+ * as the window shrinks (§ Layout → Breakpoints). A stacked row stretches its children across its
+ * width unless an `align` was given.
+ *
+ * In `material.layout`; `hide-below`/`hide-from` come from visibility.css.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './spacing.css';
+@import './visibility.css';
+
+@layer material.layout {
+    :where([data-md-row]) {
+        --md-gap: 0px;
+    }
+
+    [data-md-row] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--md-gap);
+    }
+
+    [data-md-row][data-md-align='start'] {
+        align-items: flex-start;
+    }
+
+    [data-md-row][data-md-align='end'] {
+        align-items: flex-end;
+    }
+
+    [data-md-row][data-md-align='stretch'] {
+        align-items: stretch;
+    }
+
+    [data-md-row][data-md-align='baseline'] {
+        align-items: baseline;
+    }
+
+    [data-md-row][data-md-justify='start'] {
+        justify-content: flex-start;
+    }
+
+    [data-md-row][data-md-justify='center'] {
+        justify-content: center;
+    }
+
+    [data-md-row][data-md-justify='end'] {
+        justify-content: flex-end;
+    }
+
+    [data-md-row][data-md-justify='between'] {
+        justify-content: space-between;
+    }
+
+    [data-md-row][data-md-wrap] {
+        flex-wrap: wrap;
+    }
+
+    @media (width < 600px) {
+        [data-md-row][data-md-stack-below='medium'] {
+            flex-direction: column;
+        }
+
+        [data-md-row][data-md-stack-below='medium']:not([data-md-align]) {
+            align-items: stretch;
+        }
+    }
+
+    @media (width < 840px) {
+        [data-md-row][data-md-stack-below='expanded'] {
+            flex-direction: column;
+        }
+
+        [data-md-row][data-md-stack-below='expanded']:not([data-md-align]) {
+            align-items: stretch;
+        }
+    }
+
+    @media (width < 1200px) {
+        [data-md-row][data-md-stack-below='large'] {
+            flex-direction: column;
+        }
+
+        [data-md-row][data-md-stack-below='large']:not([data-md-align]) {
+            align-items: stretch;
+        }
+    }
+
+    @media (width < 1600px) {
+        [data-md-row][data-md-stack-below='extra-large'] {
+            flex-direction: column;
+        }
+
+        [data-md-row][data-md-stack-below='extra-large']:not([data-md-align]) {
+            align-items: stretch;
+        }
+    }
+}