Add the list-detail canonical layout

Plan step 35: <x-list-detail>, following the reference's visible-panes table row by row - one pane below expanded, the detail replacing the list with a back button once something is selected; from 840px the list a fixed 360px (412px from 1200px) beside the detail, 24px apart. The selection binds with wire:model or x-model; below expanded focus moves to the detail and back() returns it to the item (resources/js/layout.js). Grid columns mirror in RTL, and the back arrow turns with them. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-14 14:51:13 +02:00
parent b4f1e005de
commit b5c5be1fd7
9 changed files with 578 additions and 0 deletions
@@ -0,0 +1,88 @@
+/*
+ * <x-list-detail>: M3's list-detail canonical layout — a list, and the detail of what it selected.
+ *
+ * Its visible-panes table, row by row (docs/reference/m3/foundations-supplement.md § Canonical
+ * layouts → List-detail):
+ *
+ *   Compact (0–599)        1 pane    list, or the detail once something is selected
+ *   Medium (600–839)       1 or 2    1, M3's recommendation for a layout that is not low-density
+ *   Expanded (840+)        2         list and detail side by side
+ *   Large (1200–1599)      2         the same
+ *   Extra-large (1600+)    2         the same
+ *
+ * Below 840px one pane shows: the list while `data-md-selected` is absent, the detail while it is
+ * there, with a back button — M3: "a Back button appears in the detail view only for single-pane
+ * layouts". From 840px the list is a fixed pane and the detail flexible, 24px apart: the fixed pane
+ * is 360dp at expanded and 412dp from large (§ Breakpoints, "fixed-and-flexible layout's fixed pane
+ * defaults to 360dp" at expanded and "412dp" at large and extra-large; 24dp margins and spacer),
+ * and every back button inside is hidden. Grid columns run in the inline direction, so in a
+ * right-to-left document the list is on the right — the mirror M3 requires of every canonical
+ * layout (docs/reference/m3/foundations.md § Layout → Bidirectionality / RTL) — and the back arrow
+ * turns with it.
+ *
+ * The layout keeps its content off the window's edge by M3's margin (16px below medium, 24px from
+ * it) unless it is inside something that already does (`--md-layout-margin`, pane.css), and tells
+ * what is inside it that the margin is drawn. A pane that is focused as a whole draws no outline:
+ * it is not a control, and the element focus lands on inside it is what shows the ring.
+ *
+ * In `material.layout`; the state and focus are resources/js/layout.js.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './visibility.css';
+
+@layer material.layout {
+    [data-md-list-detail] {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        align-items: start;
+        padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space200));
+
+        @media (width >= 600px) {
+            padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300));
+        }
+
+        @media (width >= 840px) {
+            grid-template-columns: 360px minmax(0, 1fr);
+            column-gap: var(--md-sys-measurement-space300);
+        }
+
+        @media (width >= 1200px) {
+            grid-template-columns: 412px minmax(0, 1fr);
+        }
+    }
+
+    [data-md-list-detail] > * {
+        --md-layout-margin: 0px;
+    }
+
+    [data-md-list-detail-pane] {
+        min-inline-size: 0;
+        outline: none;
+    }
+
+    [data-md-list-detail-back-row] {
+        display: flex;
+        align-items: center;
+        min-block-size: var(--md-sys-measurement-space800);
+    }
+
+    [data-md-list-detail-back] [data-md-icon]:dir(rtl) {
+        transform: scaleX(-1);
+    }
+
+    @media (width < 840px) {
+        [data-md-list-detail]:not([data-md-selected]) > [data-md-list-detail-pane='detail'],
+        [data-md-list-detail][data-md-selected] > [data-md-list-detail-pane='list'] {
+            display: none;
+        }
+    }
+
+    @media (width >= 840px) {
+        [data-md-list-detail-back-row],
+        [data-md-list-detail] [data-md-list-detail-back] {
+            display: none;
+        }
+    }
+}