Add data tables, sort headers and M3 paginators

A data table styled from descendant selectors, a Livewire sort header
with aria-sort, and Laravel's and Livewire's full and simple paginators
drawn in M3, put in front of their own views.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy

resources/css/components/table.css

@@ -0,0 +1,78 @@
+/*
+ * Data tables: `<x-table>` (resources/views/components/table.blade.php), whose callers write plain
+ * `<thead>`, `<tr>`, `<th>` and `<td>` inside it.
+ *
+ * So the styling is descendant selectors on the one attribute the component sets, all inside
+ * `:where()` and `@layer components`: a caller's `text-end` or `whitespace-nowrap` on a cell always
+ * wins. Header cells in title-small on-surface-variant over an outline-variant rule, body cells in
+ * body-medium between faint rules. One density step tighter on a fine pointer — keyed on the
+ * pointer, not the width, so a touch tablet in landscape keeps rows a finger can hit. A row that
+ * opens something is `data-list-row` and answers a pointer as a list row does (components/list.css).
+ */
+
+@layer components {
+    /* `relative` makes the table the containing block for anything absolute inside it — an `sr-only`
+       header label, a tooltip. Without it they escape the scroll box and widen a phone's layout
+       viewport. */
+    [data-table] {
+        --cell-x: 0.75rem;
+        --cell-y: 0.75rem;
+
+        position: relative;
+        width: 100%;
+        border-collapse: collapse;
+        color: var(--md-sys-color-on-surface);
+        font: var(--md-sys-typescale-body-md);
+        letter-spacing: var(--md-sys-typescale-body-md-tracking);
+    }
+
+    [data-table][data-size="xs"] {
+        --cell-x: 0.5rem;
+        --cell-y: 0.5rem;
+
+        font: var(--md-sys-typescale-body-sm);
+        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
+    }
+
+    @media (pointer: fine) {
+        [data-table] {
+            --cell-y: 0.5rem;
+        }
+
+        [data-table][data-size="xs"] {
+            --cell-y: 0.25rem;
+        }
+    }
+
+    [data-table] :where(th, td) {
+        padding: var(--cell-y) var(--cell-x);
+        text-align: start;
+        vertical-align: middle;
+    }
+
+    [data-table] :where(thead th) {
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-title-sm);
+        letter-spacing: var(--md-sys-typescale-title-sm-tracking);
+        white-space: nowrap;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    [data-table][data-size="xs"] :where(thead th) {
+        font: var(--md-sys-typescale-label-md);
+        letter-spacing: var(--md-sys-typescale-label-md-tracking);
+    }
+
+    [data-table] :where(tbody tr) {
+        border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);
+    }
+
+    [data-table] :where(tbody tr:last-child) {
+        border-bottom: 0;
+    }
+
+    [data-table] :where(tbody tr[aria-selected="true"]) {
+        background-color: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+    }
+}

resources/css/material.css

@@ -29,6 +29,7 @@
 @import './components/tabs.css';
 @import './components/app-bar.css';
 @import './components/toolbar.css';
+@import './components/table.css';
 
 @layer base {
     html {