Collapse an extended FAB to a FAB while the page scrolls

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

This commit is contained in:

Andreas Reinhold / reini

2026-09-14 07:15:56 +02:00

co-authored by

Claude Opus 5

parent 44ae9ecea4

commit 7e4e7b44c6

7 changed files with 179 additions and 2 deletions

									
										resources/js/material.js
									
		+1
		
												View File
												
				@@ -11,6 +11,7 @@ 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'