Draw the data table without Tailwind

<x-table> renders data-md-table with data-md-size and data-md-dense,
and table.css moves into material.components on px and spacing tokens,
its cell selectors still inside :where() so a caller's cell rule wins
(plan step 36). The showcase's layout table follows the hook. A browser
test pins 52px rows and 36px dense ones.

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

resources/views/components/table.blade.php

@@ -1,20 +1,20 @@
 {{-- A data table. Its callers write `<thead>`, `<tr>`, `<th>` and `<td>` as they always do; how they
-     look is resources/css/components/table.css, keyed on the `data-table` attribute set here (the
-     top of that file says why).
+     look is resources/css/components/table.css, keyed on the `data-md-table` attribute set here (the
+     top of that file says why), with `data-md-size` and `data-md-dense`.
 
      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>`. --}}
+     table in an element that scrolls sideways (`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' }}"{{ $dense ? ' data-dense' : '' }} {{ $attributes }}>
+<table data-md-table data-md-size="{{ $size === 'xs' ? 'xs' : 'sm' }}"{{ $dense ? ' data-md-dense' : '' }} {{ $attributes }}>
     {{ $slot }}
 </table>

resources/views/showcase/sections/layout.blade.php

@@ -47,7 +47,7 @@
     </div>
 
     <div class="overflow-x-auto rounded-corner-lg border border-structure">
-        <table class="w-full type-body-md" data-table>
+        <table class="w-full type-body-md" data-md-table>
             <thead>
                 <tr>
                     <th class="text-start">Class</th>