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
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Opus 5
Claude Opus 5
parent
7ff6928d4a
commit
627709b67d
@@ -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'] {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user