Andreas Reinhold / reiniandClaude Fable 5.1
42d62ed00c
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
21 lines
961 B
PHP
21 lines
961 B
PHP
{{-- 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).
|
|
|
|
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' }}"{{ $dense ? ' data-dense' : '' }} {{ $attributes }}>
|
|
{{ $slot }}
|
|
</table>
|