Divide a dialog's scrolling body from its pinned header and actions

Plan step 23 (containment), containment.md § Missing: "no divider pinned
between a scrolling body and the header/actions". Every dialog now draws a
1px outline-variant rule under the header once the body is scrolled away
from its top, and over the actions while more of it is below; a body that
fits shows neither. The rules are pseudo-elements in the rows' own padding
(dialog.css), so showing one moves nothing, and x-dialog-dividers
(dialog.js) marks the wire:ignore.self <dialog>, which a morph leaves
alone, watching scroll and a ResizeObserver on the body and a wrapper
around the slot. The M3 gaps are split around the rules (8/8 under the
header, 8/16 over the actions). A full-screen dialog's rule sits under its
phone bar, and its action bar's always-on border follows the scroll too.
`separator` now means "draw both rules always" instead of rendering two
<x-divider> elements. The fade uses the effects-fast token, zero under
reduced motion.

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 11:03:05 +02:00

co-authored by

Claude Opus 5

parent 12cdeaaf67

commit cbc0fa76d2

6 changed files with 240 additions and 28 deletions

									
										resources/js/material.js
									
		+1
		
												View File
												
				@@ -17,6 +17,7 @@ import './rich-tooltip.js'

				import './progress.js'

				import './list-rows.js'

				import './bottom-sheet.js'

				import './dialog.js'

				import './carousel.js'

				import './chips.js'

				import './field.js'