Andreas Reinhold / reiniandClaude Opus 5
7e4e7b44c6
Plan step 22, actions.md § Missing (FAB to extended FAB scroll collapse): M3 has an extended FAB collapse to a FAB on scroll-down and re-extend on scroll-up, and `<x-button fab>` only swapped on window width. `<x-fab collapse-on-scroll>` (extended, with an icon) takes a `materialFab` flag from the new resources/js/fab.js, which reads the window's scroll once a frame, ignores moves under 8px and extends again near the top. The morph is CSS in actions.css: the label sits in a grid track that closes to zero, the gap and minimum width follow on the default spatial spring, and the label fades on the effects one; reduced motion swaps outright through the motion tokens. The label is clipped, not removed, so the collapsed FAB keeps its accessible name. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
31 lines
855 B
JavaScript
31 lines
855 B
JavaScript
/*
|
|
* Livewire Material — imported once from the application's app.js:
|
|
*
|
|
* import '../../vendor/nonameweb/livewire-material/resources/js/material.js'
|
|
*
|
|
* Alpine ships with Livewire, so these only register onto it (on `alpine:init`). A module
|
|
* script runs before Livewire starts Alpine, and wire:navigate keeps it rather than running
|
|
* it again, so nothing registers twice.
|
|
*/
|
|
import './theme.js'
|
|
import './figure.js'
|
|
import './tooltip.js'
|
|
import './menu.js'
|
|
import './fab.js'
|
|
import './snackbar.js'
|
|
import './rich-tooltip.js'
|
|
import './progress.js'
|
|
import './list-rows.js'
|
|
import './bottom-sheet.js'
|
|
import './carousel.js'
|
|
import './chips.js'
|
|
import './field.js'
|
|
import './search.js'
|
|
import './datepicker.js'
|
|
import './timepicker.js'
|
|
import './slider.js'
|
|
import './tabs.js'
|
|
import './app-bar.js'
|
|
import './navigation.js'
|
|
import './toolbar.js'
|