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

resources/js/bottom-sheet.js

@@ -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)
+    },
+})

resources/js/list-rows.js

@@ -0,0 +1,119 @@
+/**
+ * A row opens from anywhere on it.
+ *
+ * A row is `data-list-row` — an `<x-list-item>`, an `<x-card>`, a table row — and exactly one
+ * control inside it is its opener, `data-list-open`: the title button that opens a sheet, or the
+ * link that goes to the item's page. A click anywhere else on the row is handed to the opener, so
+ * the whole row is the target while the opener stays a real control — the tab stop, the name a
+ * screen reader reads, and the owner of the `wire:click` or the `href`. The row's other controls
+ * keep their own clicks. How a row looks while that happens is resources/css/components/list.css.
+ *
+ * Not a stretched link (`::after { inset: 0 }`): Safari makes no containing block of a <tr>, so in
+ * a table every overlay would cover the whole table; and not one <button> around the row, which
+ * could hold no other buttons. The listeners sit on `document` and are added once.
+ */
+
+/** Anything that answers a click itself — the row's own controls, and the opener. */
+const CONTROLS = 'a, button, input, select, textarea, label, summary, [contenteditable]'
+
+/** How far a pointer may travel between press and release and still be a click. */
+const DRAG_PX = 6
+
+/**
+ * Where the last press went down, so a click that was really a drag — a pan across a map inside
+ * a card — is not taken for a click. Cleared by the click it belongs to, so a click with no press
+ * behind it (a script's `.click()`) is never a drag.
+ */
+let pressedAt = null
+
+/**
+ * The opener a click on a row should reach, or null when the click is not the
+ * row's to hand on: it landed on a control, outside any row, or it ends a text
+ * selection somebody was making.
+ */
+const openerFor = (event) => {
+    if (event.defaultPrevented || !(event.target instanceof Element)) {
+        return null
+    }
+
+    if (event.target.closest(CONTROLS)) {
+        return null
+    }
+
+    const opener = event.target.closest('[data-list-row]')?.querySelector('[data-list-open]')
+
+    if (!opener) {
+        return null
+    }
+
+    if (!(window.getSelection()?.isCollapsed ?? true)) {
+        return null
+    }
+
+    return opener
+}
+
+/** A link opens in a new tab the way it would have under the same click. */
+const openInNewTab = (opener) => {
+    if (opener instanceof HTMLAnchorElement && opener.href) {
+        window.open(opener.href, '_blank', 'noopener')
+    }
+}
+
+document.addEventListener('pointerdown', (event) => {
+    pressedAt = event.isPrimary ? { x: event.clientX, y: event.clientY } : null
+}, { capture: true, passive: true })
+
+document.addEventListener('click', (event) => {
+    const from = pressedAt
+    pressedAt = null
+
+    if (event.button !== 0) {
+        return
+    }
+
+    const opener = openerFor(event)
+
+    if (!opener) {
+        return
+    }
+
+    if (from && Math.hypot(event.clientX - from.x, event.clientY - from.y) > DRAG_PX) {
+        return
+    }
+
+    // Cmd, Ctrl or Shift on a row that goes somewhere is a new tab, as on the link
+    // itself. On a row that opens a drawer it is nothing: a drawer has no address.
+    if (event.metaKey || event.ctrlKey || event.shiftKey) {
+        openInNewTab(opener)
+
+        return
+    }
+
+    if (event.altKey) {
+        return
+    }
+
+    // A script's click, which Livewire honours on both halves: `wire:click` runs,
+    // and a `wire:navigate` link navigates in place rather than reloading the page.
+    opener.click()
+})
+
+// The middle button is not a `click`, and on a row that goes somewhere it means
+// what it means on a link.
+document.addEventListener('auxclick', (event) => {
+    if (event.button !== 1) {
+        return
+    }
+
+    const opener = openerFor(event)
+
+    if (opener) {
+        openInNewTab(opener)
+    }
+})
+
+// iOS Safari paints `:active` on an element that is not a link or a button only
+// when some touch listener exists, and a row is neither — without this the press
+// layer in list.css never shows on an iPhone.
+document.addEventListener('touchstart', () => {}, { passive: true })

resources/js/material.js

@@ -14,3 +14,5 @@ import './menu.js'
 import './snackbar.js'
 import './rich-tooltip.js'
 import './progress.js'
+import './list-rows.js'
+import './bottom-sheet.js'