From 627709b67db36bbbad2bdf815c00ebdb16b37137 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 18:12:05 +0200 Subject: [PATCH] Draw the paginators' live steps from the interaction classes Plan step 36 ("Interaction is the shared classes", the user, 2026-09-14). A prior pass on this same step had hand-rolled the page step's state layer, focus ring and touch target to keep the views free of a class list; the user's decision reverses that: a live step (a link or button, never the current-page or disabled span) now renders md-state-layer, md-focus-ring and md-touch-target, and pagination.css keeps only the step's own size, colour and shape. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/css/components/pagination.css | 64 ++----------------- .../pagination/laravel/tailwind.blade.php | 6 +- .../pagination/livewire/tailwind.blade.php | 6 +- tests/Feature/Components/DataTest.php | 21 +++--- 4 files changed, 21 insertions(+), 76 deletions(-) diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css index 1eb78aa3..3daf7c48 100644 --- a/resources/css/components/pagination.css +++ b/resources/css/components/pagination.css @@ -6,13 +6,12 @@ * The numbered paginator is a row: on its start, what the page holds in body-small on-surface-variant * — "21–30 of 95", or "Page 3 of 10" below `medium` (600px), where the page numbers give way and only * previous and next stay — and on its end the steps, 4px apart. A step is a 40px circle in label-large - * with tabular figures, M3's icon-button geometry: a live one (a link or a button) in on-surface with - * the state layer, the focus ring and a 48px target — the declarations of the foundation's - * `md-state-layer`, `md-focus-ring` and `md-touch-target` (foundation/interaction.css), keyed on the - * step itself as button.css does, because the views write no class list; the current page is the - * selected state, secondary-container, never the action colour — it is where you are, not what to do - * next; an unreachable one (`aria-disabled`) is on-surface at 38%. The chevrons mirror in a right-to-left page. The simple paginator is the same - * row holding two outlined buttons. + * with tabular figures, M3's icon-button geometry: a live one (a link or a button) in on-surface, + * rendering the foundation's `md-state-layer`, `md-focus-ring` and `md-touch-target` + * (foundation/interaction.css) to reach the 48px target; the current page is the selected state, + * secondary-container, never the action colour — it is where you are, not what to do next; an + * unreachable one (`aria-disabled`) is on-surface at 38%. The chevrons mirror in a right-to-left page. + * The simple paginator is the same row holding two outlined buttons. * * [data-md-pagination] the