From 32313e0fd9987f3fe56ac9a4b87f06438bfd6370 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 17:08:54 +0200 Subject: [PATCH] Draw the page steps' state layer from the paginator stylesheet Plan step 36. The paginators put md-state-layer, md-focus-ring and md-touch-target on their live steps, where the rest of the actions and communication group (button, FAB, menu item, snackbar, alert) writes no class list and carries those declarations keyed on its own hooks, as the plan's data-md-* rule and the brief's "text classes, nothing else" ask. pagination.css now draws them on a link or button step, the layer hidden while Livewire disables previous and next; the views render no class at all, which the render tests pin. 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 | 12 ++-- tests/Feature/Components/DataTest.php | 20 +++++- 4 files changed, 84 insertions(+), 18 deletions(-) diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css index e26ea35f..1eb78aa3 100644 --- a/resources/css/components/pagination.css +++ b/resources/css/components/pagination.css @@ -6,11 +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 in on-surface with the state layer, the - * focus ring and a 48px target (`md-state-layer`, `md-focus-ring`, `md-touch-target`, - * foundation/interaction.css); 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 + * 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. * * [data-md-pagination] the