Add cards, lists, dialogs, sheets and the rest of M3's containment

<x-card> (filled, elevated, outlined), <x-list> and <x-list-item> (plain or M3 Expressive's segmented list), <x-divider>, <x-collapse> on <details>, <x-modal> on the native <dialog>, <x-drawer> as a side sheet or list-detail pane, and <x-bottom-sheet> with drag to dismiss. Dialogs and sheets bind to a Livewire flag or id and write back false or null on close, or use the surrounding Alpine scope. Rows open from anywhere on them through data-list-row and data-list-open. DesignGuard now also reports Blade directives written inside a component tag, where they do not compile. Browser test helpers wait for a complete document with Alpine and Livewire running: in Firefox, networkidle alone could return before a repeated visit had loaded. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
2026-09-13 07:28:05 +02:00
parent e57063b0f4
commit fef20a9178
30 changed files with 1490 additions and 16 deletions
@@ -0,0 +1,60 @@
+/**
+ * `materialBottomSheet(standard)`: the behaviour of `<x-bottom-sheet>`, spread into its x-data
+ * alongside `open` (entangled with Livewire, or the surrounding Alpine scope's).
+ *
+ * A downward drag follows the pointer and, released past a quarter of the sheet's height or
+ * flicked down, closes it; otherwise it springs back. The drag starts on the handle, or anywhere
+ * on the sheet while its content is scrolled to the top, so scrolling the content still scrolls.
+ */
+const DISMISS_FRACTION = 0.25
+const FLICK_PX_PER_MS = 0.5
+
+window.materialBottomSheet = (standard = false) => ({
+    standard,
+    dragged: 0,
+
+    close() {
+        this.dragged = 0
+        this.open = typeof this.open === 'boolean' ? false : null
+    },
+
+    dragStart(event) {
+        const sheet = this.$refs.sheet
+        const onHandle = event.target.closest('[data-drag-handle]')
+        const atTop = this.$refs.body.scrollTop <= 0
+
+        if (event.button !== 0 || (!onHandle && !atTop) || event.target.closest('input, textarea, select, [contenteditable]')) {
+            return
+        }
+
+        const startY = event.clientY
+        let lastY = startY
+        let lastAt = performance.now()
+        let velocity = 0
+
+        const move = (moveEvent) => {
+            const now = performance.now()
+
+            velocity = (moveEvent.clientY - lastY) / Math.max(now - lastAt, 1)
+            lastY = moveEvent.clientY
+            lastAt = now
+            this.dragged = Math.max(0, moveEvent.clientY - startY)
+        }
+
+        const end = () => {
+            window.removeEventListener('pointermove', move)
+            window.removeEventListener('pointerup', end)
+            window.removeEventListener('pointercancel', end)
+
+            if (this.dragged > sheet.offsetHeight * DISMISS_FRACTION || (this.dragged > 0 && velocity > FLICK_PX_PER_MS)) {
+                this.close()
+            } else {
+                this.dragged = 0
+            }
+        }
+
+        window.addEventListener('pointermove', move)
+        window.addEventListener('pointerup', end)
+        window.addEventListener('pointercancel', end)
+    },
+})