diff --git a/packages/propel/src/components/pagination/pagination.stories.tsx b/packages/propel/src/components/pagination/pagination.stories.tsx
index 761bb29c..a844039c 100644
--- a/packages/propel/src/components/pagination/pagination.stories.tsx
+++ b/packages/propel/src/components/pagination/pagination.stories.tsx
@@ -2,11 +2,39 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import * as React from "react";
 import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
+import {
+  PaginationArrowButton,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationList,
+  PaginationPageButton,
+  PaginationPerPage,
+  PaginationPerPageIndicator,
+  PaginationPerPageLabel,
+  PaginationPerPageTrigger,
+  PaginationRange,
+  PaginationRangeCurrent,
+  PaginationSpinner,
+} from "../../ui/pagination/index";
 import { Pagination } from "./index";
 
 const meta = {
   title: "Components/Pagination",
   component: Pagination,
+  subcomponents: {
+    PaginationList,
+    PaginationItem,
+    PaginationPageButton,
+    PaginationArrowButton,
+    PaginationEllipsis,
+    PaginationSpinner,
+    PaginationPerPage,
+    PaginationPerPageTrigger,
+    PaginationPerPageIndicator,
+    PaginationPerPageLabel,
+    PaginationRange,
+    PaginationRangeCurrent,
+  },
   parameters: {
     design: {
       type: "figma",
diff --git a/packages/propel/src/components/pagination/pagination.tsx b/packages/propel/src/components/pagination/pagination.tsx
index 013845bd..3c03d3f4 100644
--- a/packages/propel/src/components/pagination/pagination.tsx
+++ b/packages/propel/src/components/pagination/pagination.tsx
@@ -1,12 +1,21 @@
-import { ArrowLeft, ArrowRight, ChevronDown, LoaderCircle } from "lucide-react";
+import { ArrowLeft, ArrowRight, ChevronDown, LoaderCircle, MoreHorizontal } from "lucide-react";
 import * as React from "react";
 
 import { Menu, MenuTrigger } from "../../ui/menu/index";
 import {
+  Pagination as PaginationRoot,
   PaginationArrowButton,
   PaginationEllipsis,
+  PaginationItem,
+  PaginationList,
   PaginationPageButton,
+  PaginationPerPage,
+  PaginationPerPageIndicator,
+  PaginationPerPageLabel,
   PaginationPerPageTrigger,
+  PaginationRange,
+  PaginationRangeCurrent,
+  PaginationSpinner,
 } from "../../ui/pagination/index";
 import { MenuContent, MenuItem } from "../menu/index";
 
@@ -16,17 +25,8 @@ import { MenuContent, MenuItem } from "../menu/index";
 // at render time from `page`/`pageCount` — never a prop. What designers can toggle is
 // genuinely additive: an optional per-page selector and an optional range label.
 //
-// Tokens (Figma node 4762-503):
-// - page-number button: 24px square, radius/sm (4px), text/13, transparent bg that
-//   fills to `layer-transparent-hover` on hover and `layer-transparent-active` when
-//   it is the current page; disabled/loading dim to the placeholder/disabled colors.
-// - prev/next: 24px square icon buttons, radius/md (6px), 16px arrows. The arrows are
-//   directional, so they mirror in RTL via `rtl:-scale-x-100`.
-// - ellipsis: a non-interactive 24px slot holding a 14px more-horizontal glyph.
-// - per-page selector: a `layer-3` pill, 24px tall, radius/md, "50" + chevron-down,
-//   followed by "per page" tertiary text. The pill is the trigger for a propel
-//   Menu (single-select) whose menu lists the page-size options; picking one
-//   reports it through `pageSize.onValueChange`.
+// This components tier only COMPOSES the `ui/pagination` parts (each a single styled
+// element); all chrome lives in their cva — there is no className/cva/cx here.
 
 // Builds the sequence of visible page tokens. Always shows the first and last page;
 // shows up to one neighbour either side of the current page; inserts an ellipsis
@@ -89,7 +89,7 @@ export type PaginationLabels = {
   /** Visible text on the per-page selector trigger, given the size. Defaults to `"50"`. */
   perPageValue: (pageSize: number) => React.ReactNode;
   /** Trailing text after the per-page selector. Defaults to `"per page"`. */
-  perPage: React.ReactNode;
+  perPage: string;
 };
 
 const DEFAULT_LABELS: PaginationLabels = {
@@ -165,22 +165,25 @@ export function Pagination({
   const atEnd = page >= pageCount;
 
   return (
-    <nav aria-label={l.root} className="flex items-center gap-4" {...props}>
+    <PaginationRoot aria-label={l.root} {...props}>
       {pageSize ? (
-        <div className="flex min-w-0 flex-1 items-center gap-2">
+        <PaginationPerPage>
           {/*
             The selector is the propel Menu (single-select): the `layer-3` pill is
             its trigger and the menu lists the page sizes, the current one marked with a
-            trailing check. The trigger carries the accessible name (the visible size +
-            the visually-hidden "per page"), and picking a size reports it through
-            `pageSize.onValueChange`. Keyboard works via the Menu (Enter/ArrowDown opens,
-            arrows move, Enter selects).
+            trailing check. The trigger carries the accessible name "<size> per page",
+            and picking a size reports it through `pageSize.onValueChange`. Keyboard
+            works via the Menu (Enter/ArrowDown opens, arrows move, Enter selects).
           */}
           <Menu>
-            <MenuTrigger render={<PaginationPerPageTrigger />}>
-              <span>{l.perPageValue(pageSize.value)}</span>
-              <span className="sr-only">{l.perPage}</span>
-              <ChevronDown aria-hidden className="transition-transform" />
+            <MenuTrigger
+              render={<PaginationPerPageTrigger />}
+              aria-label={`${pageSize.value} ${l.perPage}`}
+            >
+              {l.perPageValue(pageSize.value)}
+              <PaginationPerPageIndicator>
+                <ChevronDown />
+              </PaginationPerPageIndicator>
             </MenuTrigger>
             <MenuContent width="anchor" align="center">
               {pageSize.options.map((option) => (
@@ -194,22 +197,20 @@ export function Pagination({
               ))}
             </MenuContent>
           </Menu>
-          <span aria-hidden className="text-13 whitespace-nowrap text-tertiary">
-            {l.perPage}
-          </span>
-        </div>
+          <PaginationPerPageLabel>{l.perPage}</PaginationPerPageLabel>
+        </PaginationPerPage>
       ) : null}
 
       {range ? (
-        <p className="text-12 whitespace-nowrap text-tertiary">
-          <span className="text-primary">{range.current}</span>
-          <span>{" of "}</span>
-          <span>{range.total}</span>
-        </p>
+        <PaginationRange>
+          <PaginationRangeCurrent>{range.current}</PaginationRangeCurrent>
+          {" of "}
+          {range.total}
+        </PaginationRange>
       ) : null}
 
-      <ul className="flex items-center gap-1.5">
-        <li>
+      <PaginationList>
+        <PaginationItem>
           <PaginationArrowButton
             aria-label={l.previous}
             disabled={atStart}
@@ -217,15 +218,21 @@ export function Pagination({
           >
             <ArrowLeft aria-hidden />
           </PaginationArrowButton>
-        </li>
+        </PaginationItem>
 
         {tokens.map((token) => {
           if (token === "ellipsis-start" || token === "ellipsis-end") {
-            return <PaginationEllipsis key={token} />;
+            return (
+              <PaginationItem key={token}>
+                <PaginationEllipsis>
+                  <MoreHorizontal />
+                </PaginationEllipsis>
+              </PaginationItem>
+            );
           }
           const isCurrent = token === page;
           return (
-            <li key={token}>
+            <PaginationItem key={token}>
               <PaginationPageButton
                 aria-label={l.page(token)}
                 aria-current={isCurrent ? "page" : undefined}
@@ -234,19 +241,18 @@ export function Pagination({
                 onClick={() => onPageChange(token)}
               >
                 {isCurrent && loading ? (
-                  <LoaderCircle
-                    aria-hidden
-                    className="size-3.5 shrink-0 animate-spin text-icon-placeholder"
-                  />
+                  <PaginationSpinner>
+                    <LoaderCircle />
+                  </PaginationSpinner>
                 ) : (
                   token
                 )}
               </PaginationPageButton>
-            </li>
+            </PaginationItem>
           );
         })}
 
-        <li>
+        <PaginationItem>
           <PaginationArrowButton
             aria-label={l.next}
             disabled={atEnd}
@@ -254,8 +260,8 @@ export function Pagination({
           >
             <ArrowRight aria-hidden />
           </PaginationArrowButton>
-        </li>
-      </ul>
-    </nav>
+        </PaginationItem>
+      </PaginationList>
+    </PaginationRoot>
   );
 }
diff --git a/packages/propel/src/ui/pagination/index.tsx b/packages/propel/src/ui/pagination/index.tsx
index 724a07b7..13369b6e 100644
--- a/packages/propel/src/ui/pagination/index.tsx
+++ b/packages/propel/src/ui/pagination/index.tsx
@@ -1,13 +1,40 @@
+export { Pagination, type PaginationProps } from "./pagination";
 export { PaginationArrowButton, type PaginationArrowButtonProps } from "./pagination-arrow-button";
-export { PaginationEllipsis } from "./pagination-ellipsis";
+export { PaginationEllipsis, type PaginationEllipsisProps } from "./pagination-ellipsis";
+export { PaginationItem, type PaginationItemProps } from "./pagination-item";
+export { PaginationList, type PaginationListProps } from "./pagination-list";
 export { PaginationPageButton, type PaginationPageButtonProps } from "./pagination-page-button";
+export { PaginationPerPage, type PaginationPerPageProps } from "./pagination-per-page";
+export {
+  PaginationPerPageIndicator,
+  type PaginationPerPageIndicatorProps,
+} from "./pagination-per-page-indicator";
+export {
+  PaginationPerPageLabel,
+  type PaginationPerPageLabelProps,
+} from "./pagination-per-page-label";
 export {
   PaginationPerPageTrigger,
   type PaginationPerPageTriggerProps,
 } from "./pagination-per-page-trigger";
+export { PaginationRange, type PaginationRangeProps } from "./pagination-range";
+export {
+  PaginationRangeCurrent,
+  type PaginationRangeCurrentProps,
+} from "./pagination-range-current";
+export { PaginationSpinner, type PaginationSpinnerProps } from "./pagination-spinner";
 export {
-  arrowButtonVariants,
-  pageButtonVariants,
-  perPageTriggerVariants,
-  slotBase,
+  paginationArrowButtonVariants,
+  paginationEllipsisVariants,
+  paginationItemVariants,
+  paginationListVariants,
+  paginationPageButtonVariants,
+  paginationPerPageIndicatorVariants,
+  paginationPerPageLabelVariants,
+  paginationPerPageTriggerVariants,
+  paginationPerPageVariants,
+  paginationRangeCurrentVariants,
+  paginationRangeVariants,
+  paginationSpinnerVariants,
+  paginationVariants,
 } from "./variants";
diff --git a/packages/propel/src/ui/pagination/pagination-arrow-button.tsx b/packages/propel/src/ui/pagination/pagination-arrow-button.tsx
index 9f7fbd16..918922ea 100644
--- a/packages/propel/src/ui/pagination/pagination-arrow-button.tsx
+++ b/packages/propel/src/ui/pagination/pagination-arrow-button.tsx
@@ -1,6 +1,6 @@
 import type * as React from "react";
 
-import { arrowButtonVariants } from "./variants";
+import { paginationArrowButtonVariants } from "./variants";
 
 export type PaginationArrowButtonProps = Omit<
   React.ComponentProps<"button">,
@@ -8,9 +8,10 @@ export type PaginationArrowButtonProps = Omit<
 >;
 
 /**
- * A styled prev/next arrow button. Applies `arrowButtonVariants()`; pass the (directional,
- * RTL-mirrored) arrow icon as `children` and wire `aria-label`/`disabled`/`onClick` through props.
+ * A styled prev/next arrow button. Applies `paginationArrowButtonVariants()`; pass the
+ * (directional, RTL-mirrored) arrow icon as `children` and wire `aria-label`/`disabled`/`onClick`
+ * through props.
  */
 export function PaginationArrowButton(props: PaginationArrowButtonProps) {
-  return <button type="button" className={arrowButtonVariants()} {...props} />;
+  return <button type="button" className={paginationArrowButtonVariants()} {...props} />;
 }
diff --git a/packages/propel/src/ui/pagination/pagination-ellipsis.tsx b/packages/propel/src/ui/pagination/pagination-ellipsis.tsx
index 2af318f6..414c31fb 100644
--- a/packages/propel/src/ui/pagination/pagination-ellipsis.tsx
+++ b/packages/propel/src/ui/pagination/pagination-ellipsis.tsx
@@ -1,13 +1,17 @@
-import { cx } from "class-variance-authority";
-import { MoreHorizontal } from "lucide-react";
+import type * as React from "react";
 
-import { slotBase } from "./variants";
+import { paginationEllipsisVariants } from "./variants";
 
-/** A non-interactive gap marker between distant page numbers. */
-export function PaginationEllipsis() {
-  return (
-    <li aria-hidden className={cx(slotBase, "text-icon-placeholder")}>
-      <MoreHorizontal className="size-3.5 shrink-0" />
-    </li>
-  );
+export type PaginationEllipsisProps = Omit<
+  React.ComponentPropsWithoutRef<"span">,
+  "className" | "style"
+>;
+
+/**
+ * A non-interactive gap marker between distant page numbers. Renders whatever icon you pass (sized
+ * to the slot's `--node-size`, 14px) — never baking a specific glyph in. Decorative, so
+ * `aria-hidden`.
+ */
+export function PaginationEllipsis(props: PaginationEllipsisProps) {
+  return <span aria-hidden className={paginationEllipsisVariants()} {...props} />;
 }
diff --git a/packages/propel/src/ui/pagination/pagination-item.tsx b/packages/propel/src/ui/pagination/pagination-item.tsx
new file mode 100644
index 00000000..3a7345d8
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination-item.tsx
@@ -0,0 +1,10 @@
+import type * as React from "react";
+
+import { paginationItemVariants } from "./variants";
+
+export type PaginationItemProps = Omit<React.ComponentProps<"li">, "className" | "style">;
+
+/** One slot in the pagination list, holding a page button, an arrow button, or the ellipsis. */
+export function PaginationItem(props: PaginationItemProps) {
+  return <li className={paginationItemVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/pagination/pagination-list.tsx b/packages/propel/src/ui/pagination/pagination-list.tsx
new file mode 100644
index 00000000..d23668ba
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination-list.tsx
@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+import { paginationListVariants } from "./variants";
+
+export type PaginationListProps = Omit<React.ComponentProps<"ul">, "className" | "style">;
+
+/**
+ * The ordered list of page controls: the previous button, page numbers and ellipses, and the next
+ * button.
+ */
+export function PaginationList(props: PaginationListProps) {
+  return <ul className={paginationListVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/pagination/pagination-page-button.tsx b/packages/propel/src/ui/pagination/pagination-page-button.tsx
index cc5d819e..f9136e4c 100644
--- a/packages/propel/src/ui/pagination/pagination-page-button.tsx
+++ b/packages/propel/src/ui/pagination/pagination-page-button.tsx
@@ -1,6 +1,6 @@
 import type * as React from "react";
 
-import { pageButtonVariants } from "./variants";
+import { paginationPageButtonVariants } from "./variants";
 
 export type PaginationPageButtonProps = Omit<
   React.ComponentProps<"button">,
@@ -11,9 +11,9 @@ export type PaginationPageButtonProps = Omit<
 };
 
 /**
- * A styled page-number button. Applies `pageButtonVariants({ current })`; pass the page number (or
- * a loading spinner) as `children` and wire `aria-current`/`onClick` through props.
+ * A styled page-number button. Applies `paginationPageButtonVariants({ current })`; pass the page
+ * number (or a loading spinner) as `children` and wire `aria-current`/`onClick` through props.
  */
 export function PaginationPageButton({ current, ...props }: PaginationPageButtonProps) {
-  return <button type="button" className={pageButtonVariants({ current })} {...props} />;
+  return <button type="button" className={paginationPageButtonVariants({ current })} {...props} />;
 }
diff --git a/packages/propel/src/ui/pagination/pagination-per-page-indicator.tsx b/packages/propel/src/ui/pagination/pagination-per-page-indicator.tsx
new file mode 100644
index 00000000..2765a367
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination-per-page-indicator.tsx
@@ -0,0 +1,17 @@
+import type * as React from "react";
+
+import { paginationPerPageIndicatorVariants } from "./variants";
+
+export type PaginationPerPageIndicatorProps = Omit<
+  React.ComponentPropsWithoutRef<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The chevron inside the per-page trigger. Renders whatever icon you pass (sized to `--node-size`,
+ * 14px) and rotates a half-turn while the menu is open. Decorative — the trigger carries the
+ * accessible name and state — so `aria-hidden`.
+ */
+export function PaginationPerPageIndicator(props: PaginationPerPageIndicatorProps) {
+  return <span aria-hidden className={paginationPerPageIndicatorVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/pagination/pagination-per-page-label.tsx b/packages/propel/src/ui/pagination/pagination-per-page-label.tsx
new file mode 100644
index 00000000..1bb262db
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination-per-page-label.tsx
@@ -0,0 +1,16 @@
+import type * as React from "react";
+
+import { paginationPerPageLabelVariants } from "./variants";
+
+export type PaginationPerPageLabelProps = Omit<
+  React.ComponentPropsWithoutRef<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The trailing "per page" text after the selector pill (Figma `50 v per page`). Decorative, so
+ * `aria-hidden`.
+ */
+export function PaginationPerPageLabel(props: PaginationPerPageLabelProps) {
+  return <span aria-hidden className={paginationPerPageLabelVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/pagination/pagination-per-page-trigger.tsx b/packages/propel/src/ui/pagination/pagination-per-page-trigger.tsx
index f313a4b9..0bd536c0 100644
--- a/packages/propel/src/ui/pagination/pagination-per-page-trigger.tsx
+++ b/packages/propel/src/ui/pagination/pagination-per-page-trigger.tsx
@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 
-import { perPageTriggerVariants } from "./variants";
+import { paginationPerPageTriggerVariants } from "./variants";
 
 export type PaginationPerPageTriggerProps = Omit<
   useRender.ComponentProps<"button">,
@@ -10,12 +10,13 @@ export type PaginationPerPageTriggerProps = Omit<
 
 /**
  * The per-page selector pill, styled as a `layer-3` Menu trigger. Compose a `Menu.Trigger` through
- * the `render` prop; pass the visible size, the `sr-only` label, and the chevron as `children`.
+ * the `render` prop; pass the visible size and the `PaginationPerPageIndicator` chevron as
+ * children.
  */
 export function PaginationPerPageTrigger({ render, ...props }: PaginationPerPageTriggerProps) {
   const defaultProps: useRender.ElementProps<"button"> = {
     ...(render == null ? { type: "button" } : null),
-    className: perPageTriggerVariants(),
+    className: paginationPerPageTriggerVariants(),
   };
 
   return useRender({
diff --git a/packages/propel/src/ui/pagination/pagination-per-page.tsx b/packages/propel/src/ui/pagination/pagination-per-page.tsx
new file mode 100644
index 00000000..793a9400
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination-per-page.tsx
@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+import { paginationPerPageVariants } from "./variants";
+
+export type PaginationPerPageProps = Omit<React.ComponentProps<"div">, "className" | "style">;
+
+/**
+ * The per-page region: the selector pill (`PaginationPerPageTrigger`) followed by the trailing
+ * `PaginationPerPageLabel`.
+ */
+export function PaginationPerPage(props: PaginationPerPageProps) {
+  return <div className={paginationPerPageVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/pagination/pagination-range-current.tsx b/packages/propel/src/ui/pagination/pagination-range-current.tsx
new file mode 100644
index 00000000..5112d0c9
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination-range-current.tsx
@@ -0,0 +1,16 @@
+import type * as React from "react";
+
+import { paginationRangeCurrentVariants } from "./variants";
+
+export type PaginationRangeCurrentProps = Omit<
+  React.ComponentPropsWithoutRef<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The emphasized current-range portion (e.g. `1-50`) inside `PaginationRange`, in the primary text
+ * color.
+ */
+export function PaginationRangeCurrent(props: PaginationRangeCurrentProps) {
+  return <span className={paginationRangeCurrentVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/pagination/pagination-range.tsx b/packages/propel/src/ui/pagination/pagination-range.tsx
new file mode 100644
index 00000000..e87563ee
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination-range.tsx
@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+import { paginationRangeVariants } from "./variants";
+
+export type PaginationRangeProps = Omit<React.ComponentProps<"p">, "className" | "style">;
+
+/**
+ * The optional range label shown before the controls (Figma `1-50 of 250`): tertiary, nowrap. The
+ * current range inside it is emphasized via `PaginationRangeCurrent`.
+ */
+export function PaginationRange(props: PaginationRangeProps) {
+  return <p className={paginationRangeVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/pagination/pagination-spinner.tsx b/packages/propel/src/ui/pagination/pagination-spinner.tsx
new file mode 100644
index 00000000..b9e45d40
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination-spinner.tsx
@@ -0,0 +1,17 @@
+import type * as React from "react";
+
+import { paginationSpinnerVariants } from "./variants";
+
+export type PaginationSpinnerProps = Omit<
+  React.ComponentPropsWithoutRef<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The in-flight indicator a page button shows in place of its number while navigating to it. Spins
+ * whatever icon you pass, sized to `--node-size` (14px) and tinted the placeholder color.
+ * Decorative, so `aria-hidden`.
+ */
+export function PaginationSpinner(props: PaginationSpinnerProps) {
+  return <span aria-hidden className={paginationSpinnerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/pagination/pagination.stories.tsx b/packages/propel/src/ui/pagination/pagination.stories.tsx
index fc2a34b6..abdf39ab 100644
--- a/packages/propel/src/ui/pagination/pagination.stories.tsx
+++ b/packages/propel/src/ui/pagination/pagination.stories.tsx
@@ -1,17 +1,31 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import { expect } from "storybook/test";
 
-import { PaginationArrowButton, PaginationEllipsis, PaginationPageButton } from "./index";
+import {
+  Pagination,
+  PaginationArrowButton,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationList,
+  PaginationPageButton,
+} from "./index";
 
-// UI-tier story: composes the ATOMIC pagination parts (each renders a single styled control).
+// UI-tier story: composes the ATOMIC pagination parts (each renders a single element).
 // The components-tier `Pagination` story owns the truncation logic, the per-page Menu and the
-// range label. Here you lay out the raw slots yourself inside a `<nav>` › `<ul>`: prev/next
-// arrows, page-number buttons (one marked `current`), and the non-interactive ellipsis.
+// range label. Here you lay out the raw slots yourself: the `Pagination` nav wraps a
+// `PaginationList`, whose `PaginationItem`s hold prev/next arrows, page-number buttons (one
+// marked `current`), and the non-interactive ellipsis (an icon slot).
 const meta = {
   title: "UI/Pagination",
   component: PaginationPageButton,
-  subcomponents: { PaginationArrowButton, PaginationEllipsis },
+  subcomponents: {
+    Pagination,
+    PaginationList,
+    PaginationItem,
+    PaginationArrowButton,
+    PaginationEllipsis,
+  },
   args: { current: false, children: "1" },
 } satisfies Meta<typeof PaginationPageButton>;
 
@@ -24,15 +38,15 @@ const PAGES = [1, 2, 3, 4, 5];
 export const Default: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <nav aria-label="Pagination">
-      <ul className="flex items-center gap-0.5">
-        <li>
+    <Pagination aria-label="Pagination">
+      <PaginationList>
+        <PaginationItem>
           <PaginationArrowButton aria-label="Go to previous page" disabled>
             <ChevronLeft />
           </PaginationArrowButton>
-        </li>
+        </PaginationItem>
         {PAGES.map((n) => (
-          <li key={n}>
+          <PaginationItem key={n}>
             <PaginationPageButton
               current={n === 1}
               aria-current={n === 1 ? "page" : undefined}
@@ -41,15 +55,15 @@ export const Default: Story = {
             >
               {n}
             </PaginationPageButton>
-          </li>
+          </PaginationItem>
         ))}
-        <li>
+        <PaginationItem>
           <PaginationArrowButton aria-label="Go to next page">
             <ChevronRight />
           </PaginationArrowButton>
-        </li>
-      </ul>
-    </nav>
+        </PaginationItem>
+      </PaginationList>
+    </Pagination>
   ),
   play: async ({ canvas }) => {
     // Page 1 is current (pressed fill + aria-current) and the prev arrow is disabled at the start.
@@ -63,15 +77,15 @@ export const Default: Story = {
 export const WithEllipsis: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <nav aria-label="Pagination">
-      <ul className="flex items-center gap-0.5">
-        <li>
+    <Pagination aria-label="Pagination">
+      <PaginationList>
+        <PaginationItem>
           <PaginationArrowButton aria-label="Go to previous page">
             <ChevronLeft />
           </PaginationArrowButton>
-        </li>
+        </PaginationItem>
         {[1, 2, 3].map((n) => (
-          <li key={n}>
+          <PaginationItem key={n}>
             <PaginationPageButton
               current={n === 2}
               aria-current={n === 2 ? "page" : undefined}
@@ -80,21 +94,25 @@ export const WithEllipsis: Story = {
             >
               {n}
             </PaginationPageButton>
-          </li>
+          </PaginationItem>
         ))}
-        <PaginationEllipsis />
-        <li>
+        <PaginationItem>
+          <PaginationEllipsis>
+            <MoreHorizontal />
+          </PaginationEllipsis>
+        </PaginationItem>
+        <PaginationItem>
           <PaginationPageButton current={false} aria-label="Go to page 100">
             100
           </PaginationPageButton>
-        </li>
-        <li>
+        </PaginationItem>
+        <PaginationItem>
           <PaginationArrowButton aria-label="Go to next page">
             <ChevronRight />
           </PaginationArrowButton>
-        </li>
-      </ul>
-    </nav>
+        </PaginationItem>
+      </PaginationList>
+    </Pagination>
   ),
 };
 
diff --git a/packages/propel/src/ui/pagination/pagination.tsx b/packages/propel/src/ui/pagination/pagination.tsx
new file mode 100644
index 00000000..0b4fdf4c
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination.tsx
@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+import { paginationVariants } from "./variants";
+
+export type PaginationProps = Omit<React.ComponentProps<"nav">, "className" | "style">;
+
+/**
+ * The pagination landmark: a `<nav>` wrapping the optional per-page region, range label, and the
+ * page-control list.
+ */
+export function Pagination(props: PaginationProps) {
+  return <nav className={paginationVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/pagination/variants.ts b/packages/propel/src/ui/pagination/variants.ts
index bf74e560..08aaa58d 100644
--- a/packages/propel/src/ui/pagination/variants.ts
+++ b/packages/propel/src/ui/pagination/variants.ts
@@ -1,16 +1,36 @@
 import { cva, cx } from "class-variance-authority";
 
+import { nodeSlotClass } from "../../internal/node-slot";
+
+// Pagination is a structural navigation primitive: the Figma "variant" axis (all
+// pages visible / near start / middle / near end) is a function of where the current
+// page sits in the total, not a styling axis — so the parts carry only static chrome
+// and the `current` page state. Every part renders ONE element, with its className held
+// in the cva below so no `className` crosses the part boundary. The Figma 24px slot is
+// the only defined size, so it is baked in (no size/magnitude axis to expose).
+
+// The `<nav>` landmark wrapping the whole control: the optional per-page region and
+// range label sit before the page-button list, laid out in a row.
+export const paginationVariants = cva("flex items-center gap-4");
+
+// The ordered list of page controls (prev, page numbers + ellipses, next).
+export const paginationListVariants = cva("flex items-center gap-1.5");
+
+// One slot in the list. A bare list item; its child (a button or the ellipsis) carries
+// the chrome.
+export const paginationItemVariants = cva("flex items-center");
+
 // Shared 24px slot used by page numbers, the prev/next buttons and the ellipsis.
 // 24px tall with a 24px minimum width so single digits stay square (per Figma),
 // but the slot grows for wider content — multi-digit page numbers like `100` get
 // their own width plus horizontal padding rather than clipping a fixed square.
 // `radius/sm` for page numbers, `radius/md` for the arrow buttons.
-export const slotBase = cx(
+const slotBase = cx(
   "inline-flex h-6 w-auto min-w-6 shrink-0 items-center justify-center px-1",
   "text-13 text-primary outline-none",
 );
 
-export const pageButtonVariants = cva(
+export const paginationPageButtonVariants = cva(
   cx(
     slotBase,
     "rounded-sm bg-layer-transparent",
@@ -32,7 +52,7 @@ export const pageButtonVariants = cva(
   },
 );
 
-export const arrowButtonVariants = cva(
+export const paginationArrowButtonVariants = cva(
   cx(
     slotBase,
     "rounded-md bg-layer-transparent text-icon-secondary",
@@ -40,22 +60,58 @@ export const arrowButtonVariants = cva(
     "focus-visible:ring-2 focus-visible:ring-accent-strong",
     "disabled:pointer-events-none disabled:text-icon-disabled",
     // Prev/next arrows are directional — mirror them under RTL so "previous" always
-    // points toward the start of the run.
-    "[&_svg]:size-4 [&_svg]:shrink-0 rtl:[&_svg]:-scale-x-100",
+    // points toward the start of the run. Sizes whatever svg is passed to 16px.
+    "[&>svg]:size-4 [&>svg]:shrink-0 rtl:[&>svg]:-scale-x-100",
   ),
 );
 
+// A non-interactive gap marker between distant page numbers. Sizes its single child
+// (the more-horizontal glyph, 14px) via the shared node-slot class and tints it the
+// placeholder color, instead of baking a specific glyph/size in.
+export const paginationEllipsisVariants = cva(
+  cx(slotBase, "text-icon-placeholder [--node-size:0.875rem]", nodeSlotClass),
+);
+
+// The current page can render a spinner in place of its number while navigating to it
+// is in flight. A node-slot sized to 14px that spins its child; placeholder tint.
+export const paginationSpinnerVariants = cva(
+  cx(nodeSlotClass, "animate-spin text-icon-placeholder [--node-size:0.875rem]"),
+);
+
+// The per-page region (Figma `50 v per page`): the selector pill followed by the
+// trailing "per page" text. Grows to fill the leading space before the page list.
+export const paginationPerPageVariants = cva("flex min-w-0 flex-1 items-center gap-2");
+
 // The per-page selector trigger (Figma `4762-503`): a `layer-3` pill, 24px tall,
 // `radius/md`, holding the current size + a chevron-down. It's the trigger for the
-// page-size Menu, so it gets a focus ring and rotates its chevron while the menu
-// is open.
-export const perPageTriggerVariants = cva(
+// page-size Menu, so it gets a focus ring; the `group` lets its chevron indicator
+// rotate while the menu is open.
+export const paginationPerPageTriggerVariants = cva(
   cx(
-    "inline-flex h-6 min-w-10 cursor-default items-center justify-center gap-1 rounded-md px-2",
+    "group inline-flex h-6 min-w-10 cursor-default items-center justify-center gap-1 rounded-md px-2",
     "bg-layer-3 text-13 font-medium text-secondary outline-none",
     "hover:bg-layer-3-hover",
     "focus-visible:ring-2 focus-visible:ring-accent-strong",
-    "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-icon-secondary",
-    "[&[data-popup-open]_svg]:rotate-180",
   ),
 );
+
+// The chevron indicator inside the per-page trigger. Sizes its single child (14px) and
+// rotates a half-turn while the menu is open (Base UI sets `data-popup-open` on the
+// trigger, which carries the `group` class).
+export const paginationPerPageIndicatorVariants = cva(
+  cx(
+    nodeSlotClass,
+    "text-icon-secondary [--node-size:0.875rem]",
+    "transition-transform duration-200 group-data-popup-open:rotate-180",
+  ),
+);
+
+// The trailing "per page" text after the selector pill.
+export const paginationPerPageLabelVariants = cva("text-13 whitespace-nowrap text-tertiary");
+
+// The optional range label shown before the controls (Figma `1-50 of 250`): tertiary,
+// nowrap. The current range inside it is emphasized via `PaginationRangeCurrent`.
+export const paginationRangeVariants = cva("text-12 whitespace-nowrap text-tertiary");
+
+// The emphasized current-range portion (e.g. `1-50`) inside `PaginationRange`.
+export const paginationRangeCurrentVariants = cva("text-primary");