Morph the rail's FAB, and offer a divider, no fill and a width floor
M3 asks the rail to animate its FAB into an extended FAB as it expands; the documented pattern was two FABs swapped by `display`, so the collapsed one appeared at once while the rail's width was still springing. The header now takes one <x-fab label icon> whose label springs open and shut on the rail's own spring — and names it at both widths, where the collapsed FAB had needed a tooltip to have a name at all. M3 also lists two container treatments as optional that the library had neither of: `divider` draws the vertical divider on the page's edge, which is its own answer to a page scrolling under a fixed rail, and `fill="false"` drops the container colour. Neither reaches a rail open over a scrim. And a `collapsible` rail, whose width is the visitor's choice rather than the window's, is held to the collapsed 96px below `medium`, where M3 asks for a navigation bar instead. Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-22, N-23, N-24). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Opus 5
parent
1218371568
commit
7d14f2bd03
@@ -45,8 +45,7 @@
|
||||
</x-slot:brand>
|
||||
|
||||
<x-slot:rail-header>
|
||||
<span class="rail-collapsed:hidden"><x-livewire-material::fab label="Compose" icon="edit" x-on:click="materialToast('Compose opens here')" /></span>
|
||||
<span class="hidden rail-collapsed:inline-flex"><x-livewire-material::fab icon="edit" tooltip-right="Compose" x-on:click="materialToast('Compose opens here')" /></span>
|
||||
<x-livewire-material::fab label="Compose" icon="edit" x-on:click="materialToast('Compose opens here')" />
|
||||
</x-slot:rail-header>
|
||||
|
||||
<x-slot:rail-footer>
|
||||
|
||||
Reference in New Issue
Block a user