From 2acd9ab4927b1ef58de88de3edf53e8a153c5d87 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 14 Sep 2026 15:47:07 +0200
Subject: [PATCH] Draw the paginators without Tailwind

Laravel's and Livewire's paginator views render data-md-pagination
hooks; pagination.css draws the row, the 40px steps with their 48px
targets, the selected page and the swap to "Page n of m" below 600px
(plan step 36, inputs). It imports button.css for the simple
paginators, now that the button is rewritten.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 resources/css/components.css                  |  1 +
 resources/css/components/pagination.css       | 87 +++++++++++++++++++
 .../laravel/simple-tailwind.blade.php         |  2 +-
 .../pagination/laravel/tailwind.blade.php     | 43 ++++-----
 .../livewire/simple-tailwind.blade.php        |  2 +-
 .../pagination/livewire/tailwind.blade.php    | 47 +++++-----
 tests/Browser/DataTest.php                    | 14 ++-
 tests/Feature/Components/DataTest.php         | 27 ++++--
 8 files changed, 160 insertions(+), 63 deletions(-)
 create mode 100644 resources/css/components/pagination.css

diff --git a/resources/css/components.css b/resources/css/components.css
index ea00ad5f..a4ed3014 100644
--- a/resources/css/components.css
+++ b/resources/css/components.css
@@ -40,6 +40,7 @@
 @import './components/search.css';
 @import './components/table.css';
 @import './components/sort-header.css';
+@import './components/pagination.css';
 
 /* Containment */
 
diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css
new file mode 100644
index 00000000..e26ea35f
--- /dev/null
+++ b/resources/css/components/pagination.css
@@ -0,0 +1,87 @@
+/*
+ * The paginators, Laravel's and Livewire's, drawn in M3 (resources/views/pagination/**): the package
+ * puts its views in front of the frameworks' `tailwind` and `simple-tailwind` ones, whose names they
+ * keep.
+ *
+ * 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
+ * row holding two outlined buttons.
+ *
+ *   [data-md-pagination]                   the <nav>
+ *     [data-md-pagination-summary]         [data-md-pagination-compact], [data-md-pagination-range]
+ *     [data-md-pagination-steps]
+ *       [data-md-pagination-step]          aria-current="page", aria-disabled="true";
+ *                                          [data-md-pagination-page] is a number, hidden below 600px
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './button.css';
+@import './icon.css';
+
+@layer material.components {
+    [data-md-pagination] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--md-sys-measurement-space200);
+    }
+
+    [data-md-pagination-summary] {
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-body-sm);
+        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-pagination-steps] {
+        display: flex;
+        align-items: center;
+        gap: var(--md-sys-measurement-space50);
+    }
+
+    [data-md-pagination-step] {
+        display: grid;
+        place-items: center;
+        width: var(--md-sys-measurement-space500);
+        height: var(--md-sys-measurement-space500);
+        border-radius: var(--md-sys-shape-corner-full);
+        color: var(--md-sys-color-on-surface);
+        font: var(--md-sys-typescale-label-lg);
+        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
+        font-variation-settings: normal;
+        font-variant-numeric: tabular-nums;
+    }
+
+    button[data-md-pagination-step] {
+        cursor: pointer;
+    }
+
+    [data-md-pagination-step][aria-current='page'] {
+        background-color: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+    }
+
+    [data-md-pagination-step][aria-disabled='true'] {
+        color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
+    }
+
+    @media (width < 600px) {
+        [data-md-pagination-page],
+        [data-md-pagination-range] {
+            display: none;
+        }
+    }
+
+    @media (width >= 600px) {
+        [data-md-pagination-compact] {
+            display: none;
+        }
+    }
+}
diff --git a/resources/views/pagination/laravel/simple-tailwind.blade.php b/resources/views/pagination/laravel/simple-tailwind.blade.php
index e64533c4..b49f2b59 100644
--- a/resources/views/pagination/laravel/simple-tailwind.blade.php
+++ b/resources/views/pagination/laravel/simple-tailwind.blade.php
@@ -2,7 +2,7 @@
      (the package puts this in front of `pagination::simple-tailwind`). --}}
 
 @if ($paginator->hasPages())
-    <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-pagination class="flex items-center justify-between gap-4">
+    <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-md-pagination>
         @if ($paginator->onFirstPage())
             <x-livewire-material::button variant="outlined" icon="chevron_left" :label="__('Previous')" disabled />
         @else
diff --git a/resources/views/pagination/laravel/tailwind.blade.php b/resources/views/pagination/laravel/tailwind.blade.php
index 7fef8e15..558dbff9 100644
--- a/resources/views/pagination/laravel/tailwind.blade.php
+++ b/resources/views/pagination/laravel/tailwind.blade.php
@@ -1,55 +1,50 @@
 {{-- Laravel's paginator (`$items->links()` outside Livewire), drawn in M3 as Livewire's is
      (resources/views/pagination/livewire/tailwind.blade.php): links instead of actions, the current
-     page in secondary-container, "Page 2 of 7" on a phone. The package puts this in front of
-     `pagination::tailwind` (config `livewire-material.pagination`). --}}
-
-@php
-    $step = 'grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums';
-    $live = $step.' state-layer focus-ring touch-target text-on-surface';
-    $dead = $step.' text-on-surface/38';
-@endphp
+     page in secondary-container, "Page 2 of 7" below 600px. The package puts this in front of
+     `pagination::tailwind` (config `livewire-material.pagination`); the name is Laravel's, the drawing
+     resources/css/components/pagination.css. --}}
 
 @if ($paginator->hasPages())
-    <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-pagination class="flex items-center justify-between gap-4">
-        <p class="type-body-sm text-on-surface-variant">
-            <span class="medium:hidden">{{ __('Page :page of :pages', ['page' => $paginator->currentPage(), 'pages' => $paginator->lastPage()]) }}</span>
-            <span class="max-medium:hidden">{{ __(':first–:last of :total', ['first' => $paginator->firstItem(), 'last' => $paginator->lastItem(), 'total' => $paginator->total()]) }}</span>
+    <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-md-pagination>
+        <p data-md-pagination-summary>
+            <span data-md-pagination-compact>{{ __('Page :page of :pages', ['page' => $paginator->currentPage(), 'pages' => $paginator->lastPage()]) }}</span>
+            <span data-md-pagination-range>{{ __(':first–:last of :total', ['first' => $paginator->firstItem(), 'last' => $paginator->lastItem(), 'total' => $paginator->total()]) }}</span>
         </p>
 
-        <div class="flex items-center gap-1">
+        <div data-md-pagination-steps>
             @if ($paginator->onFirstPage())
-                <span class="{{ $dead }}" aria-disabled="true" aria-label="{{ __('Previous') }}">
-                    <x-livewire-material::icon name="chevron_left" class="size-6 rtl:-scale-x-100" />
+                <span data-md-pagination-step aria-disabled="true" aria-label="{{ __('Previous') }}">
+                    <x-livewire-material::icon name="chevron_left" mirror-rtl />
                 </span>
             @else
-                <a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="{{ $live }}" aria-label="{{ __('Previous') }}">
-                    <x-livewire-material::icon name="chevron_left" class="size-6 rtl:-scale-x-100" />
+                <a href="{{ $paginator->previousPageUrl() }}" rel="prev" data-md-pagination-step class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Previous') }}">
+                    <x-livewire-material::icon name="chevron_left" mirror-rtl />
                 </a>
             @endif
 
             @foreach ($elements as $element)
                 @if (is_string($element))
-                    <span class="{{ $dead }} max-medium:hidden" aria-disabled="true">{{ $element }}</span>
+                    <span data-md-pagination-step data-md-pagination-page aria-disabled="true">{{ $element }}</span>
                 @endif
 
                 @if (is_array($element))
                     @foreach ($element as $page => $url)
                         @if ($page == $paginator->currentPage())
-                            <span aria-current="page" class="{{ $step }} bg-secondary-container text-on-secondary-container max-medium:hidden">{{ $page }}</span>
+                            <span aria-current="page" data-md-pagination-step data-md-pagination-page>{{ $page }}</span>
                         @else
-                            <a href="{{ $url }}" class="{{ $live }} max-medium:hidden" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</a>
+                            <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>
                         @endif
                     @endforeach
                 @endif
             @endforeach
 
             @if ($paginator->hasMorePages())
-                <a href="{{ $paginator->nextPageUrl() }}" rel="next" class="{{ $live }}" aria-label="{{ __('Next') }}">
-                    <x-livewire-material::icon name="chevron_right" class="size-6 rtl:-scale-x-100" />
+                <a href="{{ $paginator->nextPageUrl() }}" rel="next" data-md-pagination-step class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Next') }}">
+                    <x-livewire-material::icon name="chevron_right" mirror-rtl />
                 </a>
             @else
-                <span class="{{ $dead }}" aria-disabled="true" aria-label="{{ __('Next') }}">
-                    <x-livewire-material::icon name="chevron_right" class="size-6 rtl:-scale-x-100" />
+                <span data-md-pagination-step aria-disabled="true" aria-label="{{ __('Next') }}">
+                    <x-livewire-material::icon name="chevron_right" mirror-rtl />
                 </span>
             @endif
         </div>
diff --git a/resources/views/pagination/livewire/simple-tailwind.blade.php b/resources/views/pagination/livewire/simple-tailwind.blade.php
index ba512284..ff810f1b 100644
--- a/resources/views/pagination/livewire/simple-tailwind.blade.php
+++ b/resources/views/pagination/livewire/simple-tailwind.blade.php
@@ -17,7 +17,7 @@
 
 <div>
     @if ($paginator->hasPages())
-        <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-pagination class="flex items-center justify-between gap-4">
+        <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-md-pagination>
             @if ($paginator->onFirstPage())
                 <x-livewire-material::button variant="outlined" icon="chevron_left" :label="__('Previous')" disabled />
             @elseif ($cursor)
diff --git a/resources/views/pagination/livewire/tailwind.blade.php b/resources/views/pagination/livewire/tailwind.blade.php
index 27839dcd..0c923d82 100644
--- a/resources/views/pagination/livewire/tailwind.blade.php
+++ b/resources/views/pagination/livewire/tailwind.blade.php
@@ -1,12 +1,13 @@
 {{-- Livewire's paginator, drawn in M3. The package puts this in front of Livewire's own
      `livewire::tailwind` (config `livewire-material.pagination`), whose gray and blue classes do
-     not exist in an M3 theme.
+     not exist in an M3 theme. The file keeps Livewire's view name; nothing in it is Tailwind — the
+     drawing is resources/css/components/pagination.css.
 
      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 (`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". --}}
+     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". --}}
 
 @php
     if (! isset($scrollTo)) {
@@ -18,43 +19,39 @@
            (\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
         JS
         : '';
-
-    $step = 'grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums';
-    $live = $step.' state-layer focus-ring touch-target cursor-pointer text-on-surface';
-    $dead = $step.' text-on-surface/38';
 @endphp
 
 <div>
     @if ($paginator->hasPages())
-        <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-pagination class="flex items-center justify-between gap-4">
-            <p class="type-body-sm text-on-surface-variant">
-                <span class="medium:hidden">{{ __('Page :page of :pages', ['page' => $paginator->currentPage(), 'pages' => $paginator->lastPage()]) }}</span>
-                <span class="max-medium:hidden">{{ __(':first–:last of :total', ['first' => $paginator->firstItem(), 'last' => $paginator->lastItem(), 'total' => $paginator->total()]) }}</span>
+        <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-md-pagination>
+            <p data-md-pagination-summary>
+                <span data-md-pagination-compact>{{ __('Page :page of :pages', ['page' => $paginator->currentPage(), 'pages' => $paginator->lastPage()]) }}</span>
+                <span data-md-pagination-range>{{ __(':first–:last of :total', ['first' => $paginator->firstItem(), 'last' => $paginator->lastItem(), 'total' => $paginator->total()]) }}</span>
             </p>
 
-            <div class="flex items-center gap-1">
+            <div data-md-pagination-steps>
                 @if ($paginator->onFirstPage())
-                    <span class="{{ $dead }}" aria-disabled="true" aria-label="{{ __('Previous') }}">
-                        <x-livewire-material::icon name="chevron_left" class="size-6 rtl:-scale-x-100" />
+                    <span data-md-pagination-step aria-disabled="true" aria-label="{{ __('Previous') }}">
+                        <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() }}" class="{{ $live }}" aria-label="{{ __('Previous') }}">
-                        <x-livewire-material::icon name="chevron_left" class="size-6 rtl:-scale-x-100" />
+                    <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') }}">
+                        <x-livewire-material::icon name="chevron_left" mirror-rtl />
                     </button>
                 @endif
 
                 @foreach ($elements as $element)
                     @if (is_string($element))
-                        <span class="{{ $dead }} max-medium:hidden" aria-disabled="true">{{ $element }}</span>
+                        <span data-md-pagination-step data-md-pagination-page aria-disabled="true">{{ $element }}</span>
                     @endif
 
                     @if (is_array($element))
                         @foreach ($element as $page => $url)
-                            <span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}" class="max-medium:hidden">
+                            <span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}" data-md-pagination-page>
                                 @if ($page == $paginator->currentPage())
-                                    <span aria-current="page" class="{{ $step }} bg-secondary-container text-on-secondary-container">{{ $page }}</span>
+                                    <span aria-current="page" data-md-pagination-step>{{ $page }}</span>
                                 @else
-                                    <button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="{{ $live }}" 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 class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</button>
                                 @endif
                             </span>
                         @endforeach
@@ -62,12 +59,12 @@
                 @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() }}" class="{{ $live }}" aria-label="{{ __('Next') }}">
-                        <x-livewire-material::icon name="chevron_right" class="size-6 rtl:-scale-x-100" />
+                    <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') }}">
+                        <x-livewire-material::icon name="chevron_right" mirror-rtl />
                     </button>
                 @else
-                    <span class="{{ $dead }}" aria-disabled="true" aria-label="{{ __('Next') }}">
-                        <x-livewire-material::icon name="chevron_right" class="size-6 rtl:-scale-x-100" />
+                    <span data-md-pagination-step aria-disabled="true" aria-label="{{ __('Next') }}">
+                        <x-livewire-material::icon name="chevron_right" mirror-rtl />
                     </span>
                 @endif
             </div>
diff --git a/tests/Browser/DataTest.php b/tests/Browser/DataTest.php
index 24a12741..ada65635 100644
--- a/tests/Browser/DataTest.php
+++ b/tests/Browser/DataTest.php
@@ -99,12 +99,12 @@ it('sorts by a column and flips the direction on a second press', function () {
 it('pages through Livewire results and marks the current page', function () {
     $page = dataProbe()
         ->assertSee('1–10 of 25')
-        ->assertAttribute('[data-pagination] [aria-current="page"]', 'aria-current', 'page')
-        ->click('[data-pagination] button[aria-label="Go to page 3"]')
+        ->assertAttribute('[data-md-pagination] [aria-current="page"]', 'aria-current', 'page')
+        ->click('[data-md-pagination] button[aria-label="Go to page 3"]')
         ->assertSee('21–25 of 25')
-        ->assertSeeIn('[data-pagination] [aria-current="page"]', '3');
+        ->assertSeeIn('[data-md-pagination] [aria-current="page"]', '3');
 
-    $page->click('[data-pagination] button[aria-label="Previous"]')
+    $page->click('[data-md-pagination] button[aria-label="Previous"]')
         ->assertSee('11–20 of 25');
 
     $page->resize(400, 800)
@@ -126,3 +126,9 @@ it('lets the sort button be pressed anywhere in its 48px target', function () {
         ->assertScript("(() => { const button = document.querySelector('#by-size [data-md-sort-header-button]'); const after = getComputedStyle(button, '::after'); return button.getBoundingClientRect().height < 48 && after.minHeight === '48px' && after.minWidth === '48px'; })()")
         ->assertScript("(() => { const button = document.querySelector('#by-size [data-md-sort-header-button]'); const box = button.getBoundingClientRect(); const probe = document.elementFromPoint(box.left + box.width / 2, box.top + box.height / 2 - 22); return probe === button; })()");
 });
+
+it('draws each page step 40px and lets it be pressed anywhere in its 48px target', function () {
+    dataProbe()
+        ->assertScript("(() => { const step = document.querySelector('[data-md-pagination] button[aria-label=\"Go to page 2\"]'); const box = step.getBoundingClientRect(); return box.width === 40 && box.height === 40 && document.elementFromPoint(box.left + box.width / 2, box.top - 3) === step; })()")
+        ->assertScript("getComputedStyle(document.querySelector('[data-md-pagination] [aria-current=\"page\"]')).backgroundColor !== 'rgba(0, 0, 0, 0)'");
+});
diff --git a/tests/Feature/Components/DataTest.php b/tests/Feature/Components/DataTest.php
index 60de3c20..90e82f8c 100644
--- a/tests/Feature/Components/DataTest.php
+++ b/tests/Feature/Components/DataTest.php
@@ -50,23 +50,25 @@ 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('state-layer focus-ring touch-target');
+        ->toContain('data-md-pagination-step class="md-state-layer md-focus-ring md-touch-target"');
 });
 
 it('draws Laravel\'s paginators in M3', function () {
     $pages = new LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '/shares']);
 
     expect((string) $pages->links())
-        ->toContain('data-pagination')
-        ->toContain('Page 3 of 10')
-        ->toContain('21–30 of 95')
-        ->toContain('<span aria-current="page" class="grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums bg-secondary-container text-on-secondary-container max-medium:hidden">3</span>')
+        ->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>')
+        ->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"')
-        ->not->toContain('text-gray');
+        ->toContain('data-md-mirror-rtl')
+        ->not->toContain('text-gray')
+        ->not->toMatch('/class="(?!md-)[^"]*"/');
 
     expect((string) (new Paginator(range(1, 11), 10, 2, ['path' => '/shares']))->links())
-        ->toContain('data-pagination')
+        ->toContain('data-md-pagination')
         ->toContain('href="/shares?page=1"')
         ->toContain('href="/shares?page=3"')
         ->toContain('Previous');
@@ -88,7 +90,8 @@ it('draws Livewire\'s paginators in M3, wired to its page actions', function ()
     });
 
     expect(Livewire::test('paging-probe')->html())
-        ->toContain('data-pagination')
+        ->toContain('data-md-pagination')
+        ->toContain('data-md-pagination-page')
         ->toContain('wire:click="gotoPage(2, \'page\')"')
         ->toContain('wire:click="nextPage(\'page\')"')
         ->not->toContain('text-gray');
@@ -100,3 +103,11 @@ it('draws the sort header from its stylesheet, its arrow hidden until the column
         ->toMatch('/\\[data-md-sort-header\\]:not\\(\\[data-md-active\\]\\) \\[data-md-sort-header-arrow\\] \\{\\s*opacity: 0;/')
         ->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/sort-header.css';");
 });
+
+it('draws the paginators from their stylesheet, trading the numbers for "Page n of m" below 600px', function () {
+    expect((string) file_get_contents(__DIR__.'/../../../resources/css/components/pagination.css'))
+        ->toContain('@layer material.components')
+        ->toMatch('/@media \\(width < 600px\\) \\{\\s*\\[data-md-pagination-page\\],\\s*\\[data-md-pagination-range\\] \\{\\s*display: none;/')
+        ->toMatch('/@media \\(width >= 600px\\) \\{\\s*\\[data-md-pagination-compact\\] \\{\\s*display: none;/')
+        ->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/pagination.css';");
+});