PaginationFooter

Source: client/lib/theme/vueda-tailwind/navigation/index.js

Class forwarded to the embedded NavigationPaginationBar root. Empty by default: the bar supplies the footer chrome (border, surface, radius caps) and the inner PaginationFooter.layout owns the responsive arrangement.

Vue component: PaginationFooter

Slot	Default classes	Description
root		Class forwarded to the embedded NavigationPaginationBar root. Empty by default: the bar supplies the footer chrome (border, surface, radius caps) and the inner PaginationFooter.layout owns the responsive arrangement.
layout	flex w-full flex-wrap items-center justify-center gap-x-4 gap-y-2 sm:justify-between	Footer arrangement inside the bar. Read-out group and navigation cluster sit on one row split to the edges from sm up (justify-between); below sm they wrap and center so the read-out and selector form a centered row above the navigation row.
summary	flex flex-wrap items-center justify-center gap-x-4 gap-y-1	Read-out group: the PaginationMeta range string and the rows-per-page selector, grouped together (the mockup's left cluster). Wraps and centers on narrow viewports.
rowsPerPage	flex items-center gap-1.5 text-[length:var(--vueda-text-supporting)] text-muted-foreground	Rows-per-page label wrapping the NativeSelect. Supporting-size muted label so the selector reads as secondary chrome beside the read-out.
paginator	shrink-0	Class forwarded to the embedded Pagination navigation cluster (first / previous / page-report / next / last). shrink-0 keeps the cluster intact; the component strips the primitive's w-full via a theme override so it sizes to its content rather than claiming a full row.
rangeEmphasis	font-medium text-foreground	Emphasis span wrapping the numeric figures in the range read-out (the row range and the total record count). Lifts those figures from the read-out's muted tone to text-foreground at font-medium so the meaningful counts pop against the muted label, matching the weight of the Page N of M report.
pageReport	px-2 font-mono text-[length:var(--vueda-text-supporting)] font-medium tabular-nums text-foreground	Mono "Page N of M" indicator between the previous and next controls; tabular for stable numeric width. font-medium so the figures carry the same weight as the emphasized range read-out.

root

Class forwarded to the embedded NavigationPaginationBar root. Empty by default: the bar supplies the footer chrome (border, surface, radius caps) and the inner PaginationFooter.layout owns the responsive arrangement.

Source: client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:16

layout

Footer arrangement inside the bar. Read-out group and navigation cluster sit on one row split to the edges from sm up (justify-between); below sm they wrap and center so the read-out and selector form a centered row above the navigation row.

Default classes:

flex w-full flex-wrap items-center justify-center gap-x-4 gap-y-2 sm:justify-between

Source: client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:20

summary

Read-out group: the PaginationMeta range string and the rows-per-page selector, grouped together (the mockup's left cluster). Wraps and centers on narrow viewports.

Default classes:

flex flex-wrap items-center justify-center gap-x-4 gap-y-1

Source: client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:24

rowsPerPage

Rows-per-page label wrapping the NativeSelect. Supporting-size muted label so the selector reads as secondary chrome beside the read-out.

Default classes:

flex items-center gap-1.5 text-[length:var(--vueda-text-supporting)] text-muted-foreground

Source: client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:28

paginator

Class forwarded to the embedded Pagination navigation cluster (first / previous / page-report / next / last). shrink-0 keeps the cluster intact; the component strips the primitive's w-full via a theme override so it sizes to its content rather than claiming a full row.

Default classes:

shrink-0

Source: client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:32

rangeEmphasis

Emphasis span wrapping the numeric figures in the range read-out (the row range and the total record count). Lifts those figures from the read-out's muted tone to text-foreground at font-medium so the meaningful counts pop against the muted label, matching the weight of the Page N of M report.

Default classes:

font-medium text-foreground

Source: client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:36

pageReport

Mono "Page N of M" indicator between the previous and next controls; tabular for stable numeric width. font-medium so the figures carry the same weight as the emphasized range read-out.

Default classes:

px-2 font-mono text-[length:var(--vueda-text-supporting)] font-medium tabular-nums text-foreground

Source: client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:40