Andreas Reinhold / reiniandClaude Opus 5
cbc0fa76d2
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
32 lines
876 B
JavaScript
32 lines
876 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 './dialog.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'
|