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 <nav>
@@ -59,8 +60,59 @@
         font-variant-numeric: tabular-nums;
     }
 
-    button[data-md-pagination-step] {
+    :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'] {
diff --git a/resources/views/pagination/laravel/tailwind.blade.php b/resources/views/pagination/laravel/tailwind.blade.php
index 558dbff9..0e39eda1 100644
--- a/resources/views/pagination/laravel/tailwind.blade.php
+++ b/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 class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Previous') }}">
+                <a href="{{ $paginator->previousPageUrl() }}" rel="prev" 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 class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</a>
+                            <a href="{{ $url }}" 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 class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Next') }}">
+                <a href="{{ $paginator->nextPageUrl() }}" rel="next" data-md-pagination-step aria-label="{{ __('Next') }}">
                     <x-livewire-material::icon name="chevron_right" mirror-rtl />
                 </a>
             @else
diff --git a/resources/views/pagination/livewire/tailwind.blade.php b/resources/views/pagination/livewire/tailwind.blade.php
index 0c923d82..da06dd66 100644
--- a/resources/views/pagination/livewire/tailwind.blade.php
+++ b/resources/views/pagination/livewire/tailwind.blade.php
@@ -5,9 +5,9 @@
 
      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. A page number is drawn as a
-     40px state layer and catches presses over M3's 48px target (`md-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. Below `medium` (600px) the numbers give way to "Page 2 of 7". --}}
+     40px state layer and catches presses over M3's 48px target; the current one is the selected
+     state, secondary-container, never the action colour — it is where you are, not what to do next.
+     Below `medium` (600px) the numbers give way to "Page 2 of 7". --}}
 
 @php
     if (! isset($scrollTo)) {
@@ -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 class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Previous') }}">
+                    <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') }}">
                         <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 class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</button>
+                                    <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>
                                 @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 class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Next') }}">
+                    <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') }}">
                         <x-livewire-material::icon name="chevron_right" mirror-rtl />
                     </button>
                 @else
diff --git a/tests/Feature/Components/DataTest.php b/tests/Feature/Components/DataTest.php
index 90e82f8c..893a9239 100644
--- a/tests/Feature/Components/DataTest.php
+++ b/tests/Feature/Components/DataTest.php
@@ -5,6 +5,7 @@ use Illuminate\Pagination\Paginator;
 use Livewire\Component;
 use Livewire\Livewire;
 use Livewire\WithPagination;
+use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
 
 it('marks a table for its styles and takes a size', function () {
     expect((string) $this->blade('<x-table class="min-w-160"><tbody><tr><td>a</td></tr></tbody></x-table>'))
@@ -50,7 +51,19 @@ 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('data-md-pagination-step class="md-state-layer md-focus-ring md-touch-target"');
+        ->toContain('<a href="/shares?page=4" 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',
+        ]);
 });
 
 it('draws Laravel\'s paginators in M3', function () {
@@ -65,7 +78,7 @@ it('draws Laravel\'s paginators in M3', function () {
         ->toContain('aria-label="Go to page 4"')
         ->toContain('data-md-mirror-rtl')
         ->not->toContain('text-gray')
-        ->not->toMatch('/class="(?!md-)[^"]*"/');
+        ->not->toContain('class="');
 
     expect((string) (new Paginator(range(1, 11), 10, 2, ['path' => '/shares']))->links())
         ->toContain('data-md-pagination')
@@ -94,7 +107,8 @@ it('draws Livewire\'s paginators in M3, wired to its page actions', function ()
         ->toContain('data-md-pagination-page')
         ->toContain('wire:click="gotoPage(2, \'page\')"')
         ->toContain('wire:click="nextPage(\'page\')"')
-        ->not->toContain('text-gray');
+        ->not->toContain('text-gray')
+        ->not->toContain('class="');
 });
 
 it('draws the sort header from its stylesheet, its arrow hidden until the column sorts or is hovered', function () {