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>`.
resources/css/layout.css
+1
View File
@@ -12,3 +12,4 @@
@import './layout/surface.css';
@import './layout/pane.css';
@import './layout/list-detail.css';
@import './layout/supporting-pane.css';
resources/css/layout/supporting-pane.css
+131
View File
@@ -0,0 +1,131 @@
/*
* <x-supporting-pane>: M3's supporting-pane canonical layout — a focus pane, and a pane of what is
* only meaningful beside it.
*
* Its placement table, row by row (docs/reference/m3/foundations-supplement.md § Canonical layouts
* → Supporting pane):
*
* Below the focus pane flexible width compact or medium (below 840px)
* Leading or trailing side of the focus fixed, 360dp expanded (from 840px)
*
* From 840px the supporting pane is on the trailing side, 360px (`data-md-width="fixed"`, the
* default) and 412px from 1200px, where M3's fixed pane "defaults to 412dp" (§ Breakpoints, large
* and extra-large); or `data-md-width="split"`, the overview's split, the focus pane "about
* two-thirds" and the supporting pane the remaining third. The two are 24px apart, M3's spacer from
* medium on. Only the trailing side: on the leading side the pane would come first on screen and
* second in focus order, and M3 asks co-planar panes for a focus order that matches what is on
* screen (docs/reference/m3/foundations.md § Layout → Scaffold, Panes → Accessibility). Grid columns
* run in the inline direction, so a right-to-left document mirrors it, as M3 requires.
*
* Below 840px it is under the focus pane, 16px apart on a compact window and 24px from medium
* (`data-md-compact="below"`, the default), or a docked bottom sheet (`data-md-compact="sheet"`), the
* compact row's "a bottom sheet is a good way to keep focus on the primary pane": sticky to the
* bottom of the window, clear of the navigation bar (`--material-bottom-bar`), surface-container-low
* with extra-large top corners at elevation 1 and 640dp at most (M3's bottom sheet, SheetBottomTokens,
* androidx Compose Material 3), with a 32×4dp drag handle in on-surface-variant that is the button
* opening and closing it, 48dp to press (SheetDefaults.kt `DragHandleVerticalPadding = 22.dp`). Open,
* its content scrolls inside half the window, the height M3 caps a sheet's opening at. Sticky, not
* fixed, so it takes its own room at the end of the layout and never covers the last of the focus
* pane.
*
* The layout keeps M3's margin unless it is inside something that already does (pane.css). In
* `material.layout`; the sheet's state is Alpine in the view.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './visibility.css';
@layer material.layout {
[data-md-supporting-pane] {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: var(--md-sys-measurement-space200);
padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space200));
@media (width >= 600px) {
gap: var(--md-sys-measurement-space300);
padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300));
}
@media (width >= 840px) {
grid-template-columns: minmax(0, 1fr) 360px;
}
@media (width >= 1200px) {
grid-template-columns: minmax(0, 1fr) 412px;
}
}
@media (width >= 840px) {
[data-md-supporting-pane][data-md-width='split'] {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
[data-md-supporting-pane] > * {
--md-layout-margin: 0px;
}
[data-md-supporting-pane-main],
[data-md-supporting-pane-supporting] {
min-inline-size: 0;
}
[data-md-supporting-pane-handle] {
display: none;
}
@media (width < 840px) {
[data-md-compact='sheet'] > [data-md-supporting-pane-supporting] {
position: sticky;
inset-block-end: max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom)));
z-index: 20;
inline-size: 100%;
max-inline-size: 640px;
margin-inline: auto;
border-start-start-radius: var(--md-sys-shape-corner-xl);
border-start-end-radius: var(--md-sys-shape-corner-xl);
background-color: var(--md-sys-color-surface-container-low);
color: var(--md-sys-color-on-surface);
box-shadow: var(--md-sys-elevation-1);
}
[data-md-compact='sheet'] [data-md-supporting-pane-handle] {
display: flex;
flex-direction: column;
align-items: center;
inline-size: 100%;
min-block-size: var(--md-sys-measurement-space600);
border-start-start-radius: inherit;
border-start-end-radius: inherit;
color: var(--md-sys-color-on-surface-variant);
cursor: pointer;
}
[data-md-supporting-pane-grip] {
inline-size: var(--md-sys-measurement-space400);
block-size: var(--md-sys-measurement-space50);
margin-block: 22px;
border-radius: var(--md-sys-shape-corner-full);
background-color: currentColor;
}
[data-md-supporting-pane-label] {
margin-block-start: calc(-1 * var(--md-sys-measurement-space100));
padding-block-end: var(--md-sys-measurement-space200);
color: var(--md-sys-color-on-surface);
}
[data-md-compact='sheet'] [data-md-supporting-pane-body] {
max-block-size: 50dvh;
overflow-y: auto;
overscroll-behavior: contain;
}
[data-md-compact='sheet'] > [data-md-supporting-pane-supporting]:not([data-md-open]) [data-md-supporting-pane-body] {
display: none;
}
}
}
resources/views/components/supporting-pane.blade.php
+92
View File
@@ -0,0 +1,92 @@
{{-- M3's supporting-pane canonical layout: a focus pane, and beside it what only means something
in relation to it — the comments on a document, the details of a video.
<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>
M3's placement table, row by row (docs/reference/m3/foundations-supplement.md § Canonical
layouts → Supporting pane): below the focus pane at a flexible width on a compact or medium
window (below 840px), and at the side of the focus pane, a fixed 360dp, from expanded (840px).
If the relationship is parent and child — a list and what it selected — use `<x-list-detail>`.
`width`, from 840px: `fixed` (the default) is 360px, and 412px from 1200px, M3's fixed pane at
large and extra-large (§ Breakpoints); `split` gives the focus pane two-thirds and the
supporting pane the other third, the overview's split. Always on the trailing side, 24px from
the focus pane, which keeps the focus order the order on screen at every width, as M3 asks of
panes side by side (docs/reference/m3/foundations.md § Layout → Scaffold, Panes); a
right-to-left document mirrors it.
`compact`, below 840px: `below` (the default) stacks the supporting pane under the focus pane;
`sheet` docks it to the bottom of the window as a bottom sheet — M3's compact advice, "a
bottom sheet is a good way to keep focus on the primary pane while still giving access to
supporting info". The sheet shows its drag handle and `label` until the handle, a button
(`aria-expanded`), opens it; open, its content scrolls within half the window, and Escape
inside it closes it and returns focus to the handle. It clears a navigation bar and the
bottom safe area. From 840px the sheet is the side pane again, open.
`main` (or the default slot) is the focus pane, `supporting` the supporting one; `label`
names the supporting pane, an `<aside>`, and the sheet's handle. The
layout keeps M3's margin (16px below medium, 24px from it) unless it sits inside something
that already does, such as `<x-scaffold>`'s content region. 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/supporting-pane.css. --}}
@props([
'as' => null,
'label' => null,
'width' => null,
'compact' => null,
'hideBelow' => null,
'hideFrom' => null,
])
@php
$layout = \NoNameWeb\LivewireMaterial\Support\Layout::class;
$element = $layout::element($as);
$compact = $layout::choice($compact, ['below', 'sheet'], 'below');
$sheet = $compact === 'sheet';
$body = 'material-supporting-pane-'.\Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
$attributes = $attributes->merge(array_filter([
'data-md-supporting-pane' => true,
'data-md-width' => $layout::choice($width, ['fixed', 'split'], 'fixed'),
'data-md-compact' => $compact,
] + $layout::visibility($hideBelow, $hideFrom), fn ($value): bool => $value !== null));
@endphp
<{{ $element }} {{ $attributes }}>
<div data-md-supporting-pane-main>{{ $main ?? $slot }}</div>
<aside
data-md-supporting-pane-supporting
@if (filled($label)) aria-label="{{ $label }}" @endif
@if ($sheet)
x-data="{ sheetOpen: false }"
x-bind:data-md-open="sheetOpen ? '' : null"
x-on:keydown.escape="if (sheetOpen && $refs.handle.checkVisibility()) { sheetOpen = false; $refs.handle.focus() }"
@endif
>
@if ($sheet)
<button
type="button"
class="md-state-layer md-focus-ring"
data-md-supporting-pane-handle
aria-expanded="false"
aria-controls="{{ $body }}"
x-ref="handle"
x-bind:aria-expanded="sheetOpen.toString()"
x-on:click="sheetOpen = ! sheetOpen"
@if (blank($label)) aria-label="{{ __('Show more') }}" @endif
>
<span data-md-supporting-pane-grip aria-hidden="true"></span>
@if (filled($label))
<span class="md-type-title-sm" data-md-supporting-pane-label>{{ $label }}</span>
@endif
</button>
@endif
<div data-md-supporting-pane-body id="{{ $body }}">{{ $supporting ?? '' }}</div>
</aside>
</{{ $element }}>
resources/views/showcase/sections/layout.blade.php
+1
View File
@@ -115,6 +115,7 @@
<x-livewire-material::stack as="ul" gap="space100" class="md-type-body-md">
<li><code>&lt;x-pane&gt;</code> — a content region with M3's margins and its own app bar.</li>
<li><code>&lt;x-list-detail&gt;</code> — a list and the detail of its selection: one pane below 840px, two from it.</li>
<li><code>&lt;x-supporting-pane&gt;</code> — a focus pane and a pane beside it from 840px, below it or a bottom sheet before.</li>
<li><code>&lt;x-surface&gt;</code> — a tonal region: a surface role, padding, a corner and an outline.</li>
<li><code>&lt;x-stack&gt;</code>, <code>&lt;x-row&gt;</code> and <code>&lt;x-grid&gt;</code> — arrangement inside a pane.</li>
</x-livewire-material::stack>