Make a table's density the caller's decision

Density was applied to every fine-pointer device with no way out, which
M3 forbids outright: "don't apply density by default; offer an explicit
density opt-in instead, keeping opt-out targets at >= 48x48 CSS px". A
row is now 52px and `dense` is a prop that tightens it to 36. The row
divider also takes outline-variant itself rather than 60% of it, since M3
keeps opacity for state layers and disabled.

Plan step 20, findings IN-16 and IN-30.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/table.blade.php

@@ -2,15 +2,19 @@
      look is resources/css/components/table.css, keyed on the `data-table` attribute set here (the
      top of that file says why).
 
-     `size="xs"` for a table inside a panel inside a panel. A selected row is
-     `<tr aria-selected="true">`. Horizontal scrolling stays the caller's — wrap the table in
-     `<div class="overflow-x-auto">` where the page needs it. A column that sorts is
+     Rows are 52px, a target a finger can hit. `dense` tightens them to 36px — M3 asks that density
+     always be an opt-in and never a default, so it is the caller's decision and the caller's to
+     justify. `size="xs"` for a table inside a panel inside a panel (32px rows, 24px with `dense`).
+
+     A selected row is `<tr aria-selected="true">`. Horizontal scrolling stays the caller's — wrap the
+     table in `<div class="overflow-x-auto">` where the page needs it. A column that sorts is
      `<x-sort-header>`. --}}
 
 @props([
     'size' => 'sm',
+    'dense' => false,
 ])
 
-<table data-table data-size="{{ $size === 'xs' ? 'xs' : 'sm' }}" {{ $attributes }}>
+<table data-table data-size="{{ $size === 'xs' ? 'xs' : 'sm' }}"{{ $dense ? ' data-dense' : '' }} {{ $attributes }}>
     {{ $slot }}
 </table>