diff --git a/resources/views/components/sort-header.blade.php b/resources/views/components/sort-header.blade.php
index 5fc98da2..7ac2cf60 100644
--- a/resources/views/components/sort-header.blade.php
+++ b/resources/views/components/sort-header.blade.php
@@ -3,7 +3,10 @@
Pressing it sorts by this column, ascending first and then flipping; the arrow says which way,
and `aria-sort` says it to a screen reader. A column that cannot be sorted is a plain `
`.
- `class` lands on the ` | ` (`text-end` for a number column moves the button with it). --}}
+ `class` lands on the ` | ` (`text-end` for a number column moves the button with it).
+
+ The button is only as tall as its title-small line, so it carries `touch-target` and catches
+ presses over M3's 48px minimum; the cell's own padding belongs to the cell, not to it. --}}
@props([
'sortBy' => [],
@@ -23,7 +26,7 @@
wire:click="$set('{{ $model }}', {{ json_encode(['column' => $column, 'direction' => $next]) }})"
data-sort-header
@class([
- 'group/sort focus-ring inline-flex cursor-pointer items-center gap-1 rounded-corner-xs',
+ 'group/sort focus-ring touch-target inline-flex cursor-pointer items-center gap-1 rounded-corner-xs',
'text-on-surface' => $active,
'hover:text-on-surface' => ! $active,
])
diff --git a/resources/views/pagination/laravel/tailwind.blade.php b/resources/views/pagination/laravel/tailwind.blade.php
index 4083dd81..7fef8e15 100644
--- a/resources/views/pagination/laravel/tailwind.blade.php
+++ b/resources/views/pagination/laravel/tailwind.blade.php
@@ -5,7 +5,7 @@
@php
$step = 'grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums';
- $live = $step.' state-layer focus-ring text-on-surface';
+ $live = $step.' state-layer focus-ring touch-target text-on-surface';
$dead = $step.' text-on-surface/38';
@endphp
diff --git a/resources/views/pagination/livewire/tailwind.blade.php b/resources/views/pagination/livewire/tailwind.blade.php
index e08b2355..27839dcd 100644
--- a/resources/views/pagination/livewire/tailwind.blade.php
+++ b/resources/views/pagination/livewire/tailwind.blade.php
@@ -3,10 +3,10 @@
not exist in an M3 theme.
The wiring is Livewire's, unchanged: `previousPage`, `nextPage` and `gotoPage` with the page
- name, and the scroll back to the top of whatever `scrollTo` names. Page numbers are 40px
- icon-button targets; the current one is the selected state, secondary-container, never the
- action colour — it is where you are, not what to do next. On a phone the numbers give way to
- "Page 2 of 7". --}}
+ name, and the scroll back to the top of whatever `scrollTo` names. A page number is drawn as a
+ 40px state layer and catches presses over M3's 48px target (`touch-target`); the current one is
+ the selected state, secondary-container, never the action colour — it is where you are, not
+ what to do next. On a phone the numbers give way to "Page 2 of 7". --}}
@php
if (! isset($scrollTo)) {
@@ -20,7 +20,7 @@
: '';
$step = 'grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums';
- $live = $step.' state-layer focus-ring cursor-pointer text-on-surface';
+ $live = $step.' state-layer focus-ring touch-target cursor-pointer text-on-surface';
$dead = $step.' text-on-surface/38';
@endphp
diff --git a/tests/Feature/Components/DataTest.php b/tests/Feature/Components/DataTest.php
index cca2a077..97801759 100644
--- a/tests/Feature/Components/DataTest.php
+++ b/tests/Feature/Components/DataTest.php
@@ -26,6 +26,15 @@ it('sorts by its column, ascending first and then flipping', function () {
->toContain('"direction":"asc"');
});
+it('gives the sort button and every page control a 48px target', function () {
+ $pages = new LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '/shares']);
+
+ expect((string) $this->blade('Size'))
+ ->toContain('touch-target')
+ ->and((string) $pages->links())
+ ->toContain('state-layer focus-ring touch-target');
+});
+
it('draws Laravel\'s paginators in M3', function () {
$pages = new LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '/shares']);
|