{{-- 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-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 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-md-table data-md-size="{{ $size === 'xs' ? 'xs' : 'sm' }}"{{ $dense ? ' data-md-dense' : '' }} {{ $attributes }}>
    {{ $slot }}
</table>