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) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

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 <nav>
  *     [data-md-pagination-summary]         [data-md-pagination-compact], [data-md-pagination-range]
@@ -61,58 +60,7 @@
     }
 
     :is(a, button)[data-md-pagination-step] {
-        position: relative;
-        isolation: isolate;
         cursor: pointer;
-        outline: none;
-
-        &::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            z-index: -1;
-            border-radius: inherit;
-            background-color: currentColor;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
-        }
-
-        &::after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 100%;
-            height: 100%;
-            min-width: var(--md-sys-measurement-space600);
-            min-height: var(--md-sys-measurement-space600);
-            transform: translate(-50%, -50%);
-        }
-
-        @media (hover: hover) {
-            &:hover::before {
-                opacity: var(--md-sys-state-hover-state-layer-opacity);
-            }
-        }
-
-        &:focus-visible {
-            outline: 3px solid var(--md-sys-color-secondary);
-            outline-offset: 2px;
-        }
-
-        &:focus-visible::before {
-            opacity: var(--md-sys-state-focus-state-layer-opacity);
-        }
-
-        &:active::before {
-            opacity: var(--md-sys-state-pressed-state-layer-opacity);
-        }
-
-        /* Livewire disables previous and next while a page loads. */
-        &:disabled::before {
-            display: none;
-        }
     }
 
     [data-md-pagination-step][aria-current='page'] {

resources/views/pagination/laravel/tailwind.blade.php

@@ -17,7 +17,7 @@
                     <x-livewire-material::icon name="chevron_left" mirror-rtl />
                 </span>
             @else
-                <a href="{{ $paginator->previousPageUrl() }}" rel="prev" data-md-pagination-step aria-label="{{ __('Previous') }}">
+                <a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="md-state-layer md-focus-ring md-touch-target" data-md-pagination-step aria-label="{{ __('Previous') }}">
                     <x-livewire-material::icon name="chevron_left" mirror-rtl />
                 </a>
             @endif
@@ -32,14 +32,14 @@
                         @if ($page == $paginator->currentPage())
                             <span aria-current="page" data-md-pagination-step data-md-pagination-page>{{ $page }}</span>
                         @else
-                            <a href="{{ $url }}" data-md-pagination-step data-md-pagination-page aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</a>
+                            <a href="{{ $url }}" class="md-state-layer md-focus-ring md-touch-target" data-md-pagination-step data-md-pagination-page aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</a>
                         @endif
                     @endforeach
                 @endif
             @endforeach
 
             @if ($paginator->hasMorePages())
-                <a href="{{ $paginator->nextPageUrl() }}" rel="next" data-md-pagination-step aria-label="{{ __('Next') }}">
+                <a href="{{ $paginator->nextPageUrl() }}" rel="next" class="md-state-layer md-focus-ring md-touch-target" data-md-pagination-step aria-label="{{ __('Next') }}">
                     <x-livewire-material::icon name="chevron_right" mirror-rtl />
                 </a>
             @else

resources/views/pagination/livewire/tailwind.blade.php

@@ -35,7 +35,7 @@
                         <x-livewire-material::icon name="chevron_left" mirror-rtl />
                     </span>
                 @else
-                    <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.'.$paginator->getPageName() }}" data-md-pagination-step aria-label="{{ __('Previous') }}">
+                    <button type="button" class="md-state-layer md-focus-ring md-touch-target" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.'.$paginator->getPageName() }}" data-md-pagination-step aria-label="{{ __('Previous') }}">
                         <x-livewire-material::icon name="chevron_left" mirror-rtl />
                     </button>
                 @endif
@@ -51,7 +51,7 @@
                                 @if ($page == $paginator->currentPage())
                                     <span aria-current="page" data-md-pagination-step>{{ $page }}</span>
                                 @else
-                                    <button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" data-md-pagination-step aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</button>
+                                    <button type="button" class="md-state-layer md-focus-ring md-touch-target" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" data-md-pagination-step aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</button>
                                 @endif
                             </span>
                         @endforeach
@@ -59,7 +59,7 @@
                 @endforeach
 
                 @if ($paginator->hasMorePages())
-                    <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.'.$paginator->getPageName() }}" data-md-pagination-step aria-label="{{ __('Next') }}">
+                    <button type="button" class="md-state-layer md-focus-ring md-touch-target" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.'.$paginator->getPageName() }}" data-md-pagination-step aria-label="{{ __('Next') }}">
                         <x-livewire-material::icon name="chevron_right" mirror-rtl />
                     </button>
                 @else

tests/Feature/Components/DataTest.php

@@ -43,7 +43,7 @@ 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 () {
+it('gives the sort button and every page control a 48px target, from the foundation\'s classes', function () {
     $pages = new LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '/shares']);
 
     expect((string) $this->blade('<x-sort-header column="size" :sort-by="[]">Size</x-sort-header>'))
@@ -51,19 +51,13 @@ it('gives the sort button and every page control a 48px target', function () {
         ->toContain('--md-icon-size: 16px')
         ->not->toContain('data-md-active')
         ->and((string) $pages->links())
-        ->toContain('<a href="/shares?page=4" data-md-pagination-step data-md-pagination-page aria-label="Go to page 4">')
+        ->toContain('<a href="/shares?page=4" class="md-state-layer md-focus-ring md-touch-target" data-md-pagination-step data-md-pagination-page aria-label="Go to page 4">')
         ->and(ComponentStylesheet::read('pagination')->declarations('[data-md-pagination-step]'))->toMatchArray([
             'width' => 'var(--md-sys-measurement-space500)',
             'height' => 'var(--md-sys-measurement-space500)',
         ])
-        ->and(ComponentStylesheet::read('pagination')->declarations(':is(a, button)[data-md-pagination-step]::after'))->toMatchArray([
-            'min-width' => 'var(--md-sys-measurement-space600)',
-            'min-height' => 'var(--md-sys-measurement-space600)',
-        ])
-        ->and(ComponentStylesheet::read('pagination')->declarations(':is(a, button)[data-md-pagination-step]:focus-visible'))->toBe([
-            'outline' => '3px solid var(--md-sys-color-secondary)',
-            'outline-offset' => '2px',
-        ]);
+        ->and(ComponentStylesheet::read('pagination')->has(':is(a, button)[data-md-pagination-step]::after'))->toBeFalse()
+        ->and(ComponentStylesheet::read('pagination')->has(':is(a, button)[data-md-pagination-step]:focus-visible'))->toBeFalse();
 });
 
 it('draws Laravel\'s paginators in M3', function () {
@@ -73,12 +67,14 @@ it('draws Laravel\'s paginators in M3', function () {
         ->toContain('data-md-pagination')
         ->toContain('<span data-md-pagination-compact>Page 3 of 10</span>')
         ->toContain('<span data-md-pagination-range>21–30 of 95</span>')
+        // The current page is a plain span, not a live step: it carries no interaction class.
         ->toContain('<span aria-current="page" data-md-pagination-step data-md-pagination-page>3</span>')
         ->toContain('href="/shares?page=2" rel="prev"')
         ->toContain('aria-label="Go to page 4"')
         ->toContain('data-md-mirror-rtl')
         ->not->toContain('text-gray')
-        ->not->toContain('class="');
+        // A live step (a link or a button) carries only the foundation's interaction classes.
+        ->not->toMatch('/class="(?!md-state-layer md-focus-ring md-touch-target")/');
 
     expect((string) (new Paginator(range(1, 11), 10, 2, ['path' => '/shares']))->links())
         ->toContain('data-md-pagination')
@@ -108,7 +104,8 @@ it('draws Livewire\'s paginators in M3, wired to its page actions', function ()
         ->toContain('wire:click="gotoPage(2, \'page\')"')
         ->toContain('wire:click="nextPage(\'page\')"')
         ->not->toContain('text-gray')
-        ->not->toContain('class="');
+        // A live step (a link or a button) carries only the foundation's interaction classes.
+        ->not->toMatch('/class="(?!md-state-layer md-focus-ring md-touch-target")/');
 });
 
 it('draws the sort header from its stylesheet, its arrow hidden until the column sorts or is hovered', function () {