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

Add the supporting-pane canonical layout

Browse Source 
Plan step 35: <x-supporting-pane>, following the reference's placement
table - below the focus pane below expanded, beside it from 840px at a
fixed 360px (412px from large) or the two-thirds split. Below expanded
compact="sheet" docks the supporting pane as a bottom sheet whose drag
handle opens it; always on the trailing side, so focus order matches the
panes on screen, and mirrored in RTL.

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:51:22 +02:00
co-authored by Claude Opus 5
parent b5c5be1fd7
commit 9eb06323aa
7 changed files with 386 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/boost/skills/livewire-material-development/SKILL.md
+15
View File
@@ -835,6 +835,21 @@ M3's list-detail canonical layout, for parent and child content: an inbox and a
- Focus: below `expanded`, selecting moves focus to the detail pane and `back()` returns it to the item it came from (or the list's `aria-current`/`aria-selected` item, or the list). From `expanded` focus stays where it is. Mark the selected item (`:selected`, `aria-current`) — M3 shows a selected state in the list where both panes show.
- A right-to-left document puts the list on the right. The root's attributes belong to Alpine (`wire:ignore.self`); the slots morph as usual.
#### `<x-supporting-pane>`
M3's supporting-pane canonical layout, for content that only means something beside the focus pane: comments on a document, details of a video. For a parent and its children use `<x-list-detail>`. `main` (or the default slot) and `supporting` slots.
```blade
<x-supporting-pane label="Comments" compact="sheet">
<x-slot:main><x-pane title="Proposal">…</x-pane></x-slot:main>
<x-slot:supporting><x-pane title="Comments" heading="h2">…</x-pane></x-slot:supporting>
</x-supporting-pane>
```
- From `expanded` the supporting pane is on the trailing side, 24px from the focus pane: `width="fixed"` (default) is 360px, 412px from `large`; `width="split"` gives the focus pane two-thirds and the supporting pane one-third. Always trailing, so focus order stays the order on screen; a right-to-left document mirrors it.
- Below `expanded`: `compact="below"` (default) stacks it under the focus pane; `compact="sheet"` docks it to the bottom of the window as a bottom sheet (surface-container-low, extra-large top corners), shown as its drag handle and `label` until the handle — a button with `aria-expanded` — opens it; open, it scrolls within half the window, and Escape inside it closes it and returns focus to the handle. It clears the navigation bar and the bottom safe area and never covers the end of the focus pane.
- `label` names the supporting `<aside>` and the sheet's handle.
#### `<x-surface>`
A tonal region: `<x-surface level="surface-container-low" padding="space300" corner="lg" outlined>…</x-surface>`.