{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "description": "Numbers with a dot beneath each, weight falling away from the current page and its accent dot; or a folio, the page over its total; the neighbours, by name; every page as a barcode's line; or an alphabet set as one word.",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "registryDependencies": [
    "https://thedirectors.agency/ui/r/0nlytype.json"
  ],
  "files": [
    {
      "path": "registry/0nlytype/ui/pagination.tsx",
      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@/lib/utils\"\nimport { PaginationBarcode } from \"@/components/ui/pagination-barcode\"\n\n/** Numbers with a dot beneath each; the current page's dot is the accent. Pair it with paginationRange for long runs. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return <nav data-slot=\"pagination\" aria-label=\"Pages\" className={className} {...props} />\n}\n\ntype PaginationContentProps = React.ComponentProps<\"ul\"> & {\n  /**\n   * numbers: every page shown, a dot under each. folio: the current page over the total, arrows only. neighbours: the pages either side, by name.\n   * barcode: every page a hairline, only yours numbered. thumb: an alphabet set as one word, the current letter reversed out.\n   */\n  variant?: \"numbers\" | \"folio\" | \"neighbours\" | \"barcode\" | \"thumb\"\n}\n\nfunction PaginationContent({ className, variant = \"numbers\", ref, children, ...props }: PaginationContentProps) {\n  const Comp = variant === \"barcode\" ? PaginationBarcode : \"ul\"\n  return <Comp ref={ref} data-slot=\"pagination-content\" data-variant={variant} className={cn(\"ot-pager\", className)} {...props}>{children}</Comp>\n}\n\n/**\n * The pages to show for a long run: the ends, the current page and `siblings` either side, \"gap\" for the runs left out.\n * Always the same number of slots (siblings * 2 + 5, or fewer pages), so nothing beside the pager moves as you page,\n * and a gap never stands for a single page.\n */\nfunction paginationRange(current: number, total: number, siblings = 1): (number | \"gap\")[] {\n  const slots = siblings * 2 + 5\n  const run = (from: number, to: number) => Array.from({ length: to - from + 1 }, (_, i) => from + i)\n  if (total <= slots) return run(1, total)\n  if (current <= siblings + 3) return [...run(1, slots - 2), \"gap\", total]\n  if (current >= total - siblings - 2) return [1, \"gap\", ...run(total - slots + 3, total)]\n  return [1, \"gap\", ...run(current - siblings, current + siblings), \"gap\", total]\n}\n\nfunction PaginationItem(props: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = React.ComponentProps<\"a\"> & {\n  isActive?: boolean\n  /** Render your own link (Next's Link, say) with the pager's look. */\n  asChild?: boolean\n}\n\n/** A page number. Give it an aria-label that holds the number as shown (\"Page 03\" for 03), so a voice command for what is seen still finds it; the number alone is a poor name. */\nfunction PaginationLink({ isActive = false, asChild = false, ...props }: PaginationLinkProps) {\n  const Comp = asChild ? Slot : \"a\"\n  return <Comp data-slot=\"pagination-link\" aria-current={isActive ? \"page\" : undefined} {...props} />\n}\n\ntype StepProps = Omit<PaginationLinkProps, \"isActive\" | \"href\"> & {\n  /** Omit at the first or last page: the step shows, but doesn't go anywhere. */\n  href?: string\n}\n\nfunction step(kind: \"previous\" | \"next\", dflt: string) {\n  return function Step({ href, asChild = false, className, children = dflt, ...props }: StepProps) {\n    const Comp = asChild ? Slot : href === undefined ? \"span\" : \"a\"\n    // A word label (the neighbour's name) needs its direction spoken too.\n    const label = typeof children === \"string\" && children !== dflt ? `${kind === \"previous\" ? \"Previous\" : \"Next\"}: ${children}` : undefined\n    return (\n      <Comp\n        data-slot={`pagination-${kind}`}\n        className={cn(\"ot-pager-step\", className)}\n        rel={href === undefined ? undefined : kind === \"previous\" ? \"prev\" : \"next\"}\n        aria-label={label}\n        aria-disabled={href === undefined && !asChild ? true : undefined}\n        {...(href === undefined ? {} : { href })}\n        {...props}\n      >\n        {children}\n      </Comp>\n    )\n  }\n}\n\n/** ← Previous, or ← and a word: the neighbour's name reads well here. The arrow is drawn, so pass only the words. */\nconst PaginationPrevious = step(\"previous\", \"Previous\")\n/** Next →, or a word and →. */\nconst PaginationNext = step(\"next\", \"Next\")\n\n/** Pages left out. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span data-slot=\"pagination-ellipsis\" className={cn(\"ot-pager-gap\", className)} {...props}>\n      <span aria-hidden=\"true\">…</span>\n      <span className=\"ot-sr\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n  paginationRange,\n  type PaginationContentProps,\n  type PaginationLinkProps,\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/0nlytype/ui/pagination-barcode.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\n/** Reveals the current barcode page inside its own horizontal scroller. */\nexport function PaginationBarcode({ ref, children, ...props }: React.ComponentProps<\"ul\">) {\n  const list = React.useRef<HTMLUListElement>(null)\n  React.useImperativeHandle(ref, () => list.current!, [])\n\n  React.useEffect(() => {\n    const nav = list.current?.closest(\"nav\")\n    if (!nav) return\n    const reveal = () => {\n      const current = list.current?.querySelector<HTMLElement>('[aria-current=\"page\"]')\n      if (!current) return\n      const target = current.getBoundingClientRect()\n      const left = nav.getBoundingClientRect().left + nav.clientLeft\n      const right = left + nav.clientWidth\n      // Move only this scroller horizontally, never the page or its ancestors.\n      const delta = target.left < left ? target.left - left : target.right > right ? target.right - right : 0\n      if (delta) nav.scrollBy({ left: delta, behavior: \"instant\" })\n    }\n    reveal()\n    const resize = new ResizeObserver(reveal)\n    resize.observe(nav)\n    return () => resize.disconnect()\n  }, [children])\n\n  return <ul ref={list} {...props}>{children}</ul>\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/0nlytype/styles/pagination.css",
      "content": "@layer components {\n  /* ── ot-pager ── numbers; a dot under each, the current one in accent.\n     The list is the pager; Previous and Next are words with a drawn arrow and no dot. */\n  .ot-pager { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--ot-space-5) - 14px); font-size: var(--ot-mp); line-height: var(--ot-mp-lh); font-variant-numeric: tabular-nums; }\n  .ot-pager a[data-slot=\"pagination-link\"] {\n    /* 7px either side takes a single figure to a 24px target (WCAG 2.5.8); the gap gives the same 14px back, so nothing moves. */\n    position: relative; display: inline-block; padding: 0 7px var(--ot-space-3); color: var(--ot-pencil); text-decoration: none; cursor: pointer;\n    font-weight: 200; transition: color var(--ot-allegro), font-weight var(--ot-moderato) var(--ot-breath);\n  }\n  .ot-pager[data-variant=\"numbers\"] :is(a[data-slot=\"pagination-link\"], .ot-pager-step) { min-width: 24px; text-align: center; }\n  .ot-pager a[data-slot=\"pagination-link\"]::after {\n    content: \"\"; position: absolute; inset-inline-start: 50%; inset-block-end: 0; translate: -50% 0;\n    width: 3px; height: 3px; border-radius: 50%; background: var(--ot-rule-strong);\n    transition: width var(--ot-moderato) var(--ot-spiccato), height var(--ot-moderato) var(--ot-spiccato), background-color var(--ot-moderato), box-shadow var(--ot-allegro);\n  }\n  :is([dir=\"rtl\"], [dir=\"rtl\"] *) .ot-pager a[data-slot=\"pagination-link\"]::after { translate: 50% 0; }\n  .ot-pager a[data-slot=\"pagination-link\"]:is(:hover, [data-force~=\"hover\"]) { color: var(--ot-graphite); }\n  .ot-pager a[data-slot=\"pagination-link\"]:is(:hover, [data-force~=\"hover\"]):not([aria-current=\"page\"])::after { width: 6px; height: 6px; background-color: transparent; box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-rule-strong); }\n  /* Weight falls with distance from the current page: 600, then 350 beside it, then 200. */\n  .ot-pager > :is(li:has(> [aria-current=\"page\"]) + li, li:has(+ li > [aria-current=\"page\"])) > a[data-slot=\"pagination-link\"] { font-weight: 350; color: var(--ot-graphite); }\n  .ot-pager a[data-slot=\"pagination-link\"][aria-current=\"page\"] { color: var(--ot-ink); font-weight: 600; }\n  .ot-pager a[data-slot=\"pagination-link\"][aria-current=\"page\"]::after { width: 6px; height: 6px; background: var(--ot-accent); }\n\n  .ot-pager-step { display: inline-block; padding: 0 7px var(--ot-space-3); color: var(--ot-graphite); font-weight: 300; text-decoration: none; cursor: pointer; transition: color var(--ot-allegro); }\n  a.ot-pager-step:is(:hover, [data-force~=\"hover\"]) { color: var(--ot-ink); }\n  .ot-pager-step[aria-disabled=\"true\"] { color: var(--ot-rule-strong); cursor: default; }\n  [data-slot=\"pagination-previous\"]::before { content: \"← \" / \"\"; }\n  [data-slot=\"pagination-next\"]::after { content: \" →\" / \"\"; }\n  :is([dir=\"rtl\"], [dir=\"rtl\"] *) [data-slot=\"pagination-previous\"]::before { content: \"→ \" / \"\"; }\n  :is([dir=\"rtl\"], [dir=\"rtl\"] *) [data-slot=\"pagination-next\"]::after { content: \" ←\" / \"\"; }\n  /* As wide as a two-digit page, so paging past a gap moves nothing beside it. */\n  .ot-pager-gap { display: inline-block; min-width: calc(2ch + 14px); padding: 0 7px var(--ot-space-3); text-align: center; color: var(--ot-pencil); font-weight: 200; }\n\n  /* ── folio ── the current page over the total, as a book sets its folio: the number stands in ink on its accent dot,\n     a leaning hairline, then the total small and upright, a little wide. The steps are arrows alone; their words stay for screen readers. */\n  .ot-pager[data-variant=\"folio\"] { gap: var(--ot-space-3); }\n  .ot-pager[data-variant=\"folio\"] > li:has(> [aria-current=\"page\"]) + li:not(:has(> *)) {\n    display: inline-flex; align-items: baseline; font-size: var(--ot-p); font-weight: 300; font-stretch: 112%; letter-spacing: 0.02em; color: var(--ot-graphite);\n  }\n  .ot-pager[data-variant=\"folio\"] > li:has(> [aria-current=\"page\"]) + li:not(:has(> *))::before {\n    content: \"\"; align-self: stretch; width: var(--ot-hairline); margin-block-start: -0.75em; margin-inline: calc(0.3em - var(--ot-space-3)) 0.3em; rotate: 24deg;\n    background: linear-gradient(transparent, var(--ot-rule-strong) 22%, var(--ot-rule-strong) 78%, transparent);\n  }\n  :is([dir=\"rtl\"], [dir=\"rtl\"] *) .ot-pager[data-variant=\"folio\"] > li:has(> [aria-current=\"page\"]) + li:not(:has(> *))::before { rotate: -24deg; }\n  .ot-pager[data-variant=\"folio\"] .ot-pager-step { font-size: 0; padding-inline: var(--ot-space-2); }\n  .ot-pager[data-variant=\"folio\"] .ot-pager-step::before, .ot-pager[data-variant=\"folio\"] .ot-pager-step::after { font-size: var(--ot-mp); }\n  /* On a phone the numbers keep one line: a size down, closer, and the steps give up their words as the folio's do. */\n  @media (max-width: 40rem) {\n    .ot-pager[data-variant=\"numbers\"]:has([data-slot=\"pagination-link\"]) { gap: var(--ot-space-1); font-size: var(--ot-p); line-height: var(--ot-p-lh); }\n    .ot-pager[data-variant=\"numbers\"]:has([data-slot=\"pagination-link\"]) .ot-pager-step { font-size: 0; padding-inline: var(--ot-space-1); }\n    .ot-pager[data-variant=\"numbers\"]:has([data-slot=\"pagination-link\"]) .ot-pager-step::before, .ot-pager[data-variant=\"numbers\"]:has([data-slot=\"pagination-link\"]) .ot-pager-step::after { font-size: var(--ot-p); }\n  }\n\n  /* ── neighbours ── the pages either side, by name, set at the two ends of the measure: a small word over the name, hung on\n     a hairline arrow as the notes are in \"It has to be design.\". Pointing thickens the name, as nearness does in the numbers,\n     inks the word and steps the arrow the way it points. */\n  .ot-pager[data-variant=\"neighbours\"] { justify-content: space-between; align-items: end; gap: var(--ot-space-6); }\n  .ot-pager[data-variant=\"neighbours\"] > li:has(> [data-slot=\"pagination-next\"]) { margin-inline-start: auto; text-align: end; }\n  .ot-pager[data-variant=\"neighbours\"] .ot-pager-step {\n    display: grid; gap: var(--ot-space-1); padding: 0; font-size: var(--ot-mf); line-height: var(--ot-mf-lh); letter-spacing: var(--ot-mf-tr); color: var(--ot-ink); font-weight: 300;\n    transition: font-weight var(--ot-moderato) var(--ot-breath);\n  }\n  .ot-pager[data-variant=\"neighbours\"] .ot-pager-step::before { font-size: var(--ot-pp); line-height: var(--ot-pp-lh); letter-spacing: var(--ot-pp-tr); font-weight: 500; color: var(--ot-graphite); transition: color var(--ot-allegro); }\n  .ot-pager[data-variant=\"neighbours\"] .ot-pager-step::after {\n    order: -1; content: \"\"; width: var(--ot-space-6); height: 9px; margin-block-end: calc(var(--ot-space-1) * -1);\n    background: var(--ot-graphite); /* the input group's arrow: a hairline shaft and an open head, drawn by the mask */\n    mask:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9'%3E%3Cpath d='M3.5 1l4 3.5-4 3.5M0 4.5h7.5' fill='none' stroke='%23000'/%3E%3C/svg%3E\") no-repeat 100% 50% / var(--ot-space-2) 9px,\n      linear-gradient(#000, #000) no-repeat 0 50% / calc(100% - 2px) var(--ot-hairline);\n    transition: background-color var(--ot-allegro), translate var(--ot-allegro) var(--ot-spiccato);\n  }\n  .ot-pager[data-variant=\"neighbours\"] [data-slot=\"pagination-previous\"]::after { scale: -1 1; }\n  .ot-pager[data-variant=\"neighbours\"] [data-slot=\"pagination-next\"]::after { justify-self: end; }\n  :is([dir=\"rtl\"], [dir=\"rtl\"] *) .ot-pager[data-variant=\"neighbours\"] [data-slot=\"pagination-previous\"]::after { scale: 1 1; }\n  :is([dir=\"rtl\"], [dir=\"rtl\"] *) .ot-pager[data-variant=\"neighbours\"] [data-slot=\"pagination-next\"]::after { scale: -1 1; }\n  .ot-pager[data-variant=\"neighbours\"] a.ot-pager-step:is(:hover, [data-force~=\"hover\"]) { font-weight: 450; }\n  .ot-pager[data-variant=\"neighbours\"] a.ot-pager-step:is(:hover, [data-force~=\"hover\"])::before { color: var(--ot-ink); }\n  .ot-pager[data-variant=\"neighbours\"] a.ot-pager-step:is(:hover, [data-force~=\"hover\"])::after { background-color: var(--ot-ink); translate: calc(var(--ot-space-1) * -1) 0; }\n  .ot-pager[data-variant=\"neighbours\"] a[data-slot=\"pagination-next\"]:is(:hover, [data-force~=\"hover\"])::after { translate: var(--ot-space-1) 0; }\n  :is([dir=\"rtl\"], [dir=\"rtl\"] *) .ot-pager[data-variant=\"neighbours\"] a[data-slot=\"pagination-previous\"]:is(:hover, [data-force~=\"hover\"])::after { translate: var(--ot-space-1) 0; }\n  :is([dir=\"rtl\"], [dir=\"rtl\"] *) .ot-pager[data-variant=\"neighbours\"] a[data-slot=\"pagination-next\"]:is(:hover, [data-force~=\"hover\"])::after { translate: calc(var(--ot-space-1) * -1) 0; }\n  .ot-pager[data-variant=\"neighbours\"] [data-slot=\"pagination-previous\"]::before { content: \"Previous\" / \"\"; }\n  .ot-pager[data-variant=\"neighbours\"] [data-slot=\"pagination-next\"]::before { content: \"Next\" / \"\"; }\n\n  /* ── barcode ── every page a hairline, the rhythm of SPECTRA's barcode, read as the dot calendar reads its days: the pages\n     behind you in ink, the pages ahead in pencil, yours the tall line in the accent with its number set small above it.\n     Pointing lifts a line and shows its number in its place; the steps are arrows alone. */\n  nav:has(> .ot-pager[data-variant=\"barcode\"]) { min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; overscroll-behavior-x: contain; }\n  .ot-pager[data-variant=\"barcode\"] { inline-size: max-content; flex-wrap: nowrap; align-items: end; gap: 0; }\n  .ot-pager[data-variant=\"barcode\"] > li { flex-shrink: 0; }\n  .ot-pager[data-variant=\"barcode\"] > li:has(> [data-slot=\"pagination-link\"]) { flex: 0 0 24px; min-width: 24px; contain: inline-size; } /* the hidden numbers don't widen the run */\n  .ot-pager[data-variant=\"barcode\"] > li:has(> [data-slot=\"pagination-previous\"]) { margin-inline-end: var(--ot-space-3); }\n  .ot-pager[data-variant=\"barcode\"] > li:has(> [data-slot=\"pagination-next\"]) { margin-inline-start: var(--ot-space-3); }\n  .ot-pager[data-variant=\"barcode\"] a[data-slot=\"pagination-link\"] {\n    display: flex; justify-content: center; width: 100%; height: calc(var(--ot-pp) * 1.45 + var(--ot-space-1) + 26px); padding: 0;\n    font-size: var(--ot-pp); line-height: var(--ot-pp-lh); font-weight: 500; white-space: nowrap; color: transparent;\n  }\n  .ot-pager[data-variant=\"barcode\"] a[data-slot=\"pagination-link\"]::after {\n    inset-inline: 0; margin-inline: auto; translate: none; width: var(--ot-hairline); height: 16px; border-radius: 0; background: var(--ot-pencil);\n    transition: height var(--ot-moderato) var(--ot-spiccato), background-color var(--ot-moderato);\n  }\n  .ot-pager[data-variant=\"barcode\"] > li:has(~ li > [aria-current=\"page\"]) > a[data-slot=\"pagination-link\"]::after { background: var(--ot-ink); }\n  .ot-pager[data-variant=\"barcode\"] a[data-slot=\"pagination-link\"][aria-current=\"page\"] { color: var(--ot-ink); font-weight: 600; }\n  .ot-pager[data-variant=\"barcode\"] a[data-slot=\"pagination-link\"][aria-current=\"page\"]::after { width: calc(var(--ot-stroke) * 2); height: 26px; background: var(--ot-accent); }\n  .ot-pager[data-variant=\"barcode\"] a[data-slot=\"pagination-link\"]:is(:hover, :focus-visible, [data-force~=\"hover\"]):not([aria-current=\"page\"]) { color: var(--ot-graphite); }\n  .ot-pager[data-variant=\"barcode\"] a[data-slot=\"pagination-link\"]:is(:hover, :focus-visible, [data-force~=\"hover\"]):not([aria-current=\"page\"])::after { width: var(--ot-hairline); height: 22px; box-shadow: none; background-color: var(--ot-graphite); }\n  .ot-pager[data-variant=\"barcode\"]:has(a[data-slot=\"pagination-link\"]:is(:hover, :focus-visible, [data-force~=\"hover\"]):not([aria-current=\"page\"])) [aria-current=\"page\"] { color: transparent; }\n  .ot-pager[data-variant=\"barcode\"] .ot-pager-step { font-size: 0; line-height: 1; white-space: nowrap; padding: 0 var(--ot-space-1); }\n  .ot-pager[data-variant=\"barcode\"] .ot-pager-step::before, .ot-pager[data-variant=\"barcode\"] .ot-pager-step::after { font-size: var(--ot-mp); line-height: 1; }\n  /* The weight-by-distance rule of the numbers doesn't apply: there is only one number. */\n  .ot-pager[data-variant=\"barcode\"] > li > a[data-slot=\"pagination-link\"]:not([aria-current=\"page\"]) { font-weight: 500; color: transparent; }\n\n  /* ── thumb ── a dictionary's thumb index, set as \"the uncreative\" sets its word: the alphabet as one heavy, tight word,\n     the current letter reversed out of an accent block. Letters with nothing under them stay in the word, thin and pencil,\n     and aren't links. Pointing sketches the block in rule; choosing inks it. On a phone the word breaks in two, 13 and 13,\n     so every letter is a wide enough target. */\n  .ot-pager[data-variant=\"thumb\"] { flex-wrap: nowrap; gap: 0; font-size: var(--ot-mf); line-height: 1; letter-spacing: var(--ot-mf-tr); font-weight: 700; font-variant-numeric: normal; }\n  .ot-pager[data-variant=\"thumb\"] > li { min-width: 24px; text-align: center; }\n  .ot-pager[data-variant=\"thumb\"] > li:not(:has(> *)) { padding-block: 0.08em; color: var(--ot-pencil); font-weight: 200; }\n  .ot-pager[data-variant=\"thumb\"] a[data-slot=\"pagination-link\"] { display: block; padding: 0.08em 0.03em; color: var(--ot-ink); font-weight: 700; transition: background-color var(--ot-allegro), color var(--ot-allegro); }\n  .ot-pager[data-variant=\"thumb\"] a[data-slot=\"pagination-link\"]::after { content: none; }\n  .ot-pager[data-variant=\"thumb\"] > li > a[data-slot=\"pagination-link\"][href] { font-weight: 700; color: var(--ot-ink); }\n  .ot-pager[data-variant=\"thumb\"] a[data-slot=\"pagination-link\"]:is(:hover, [data-force~=\"hover\"]):not([aria-current=\"page\"]) { background-color: var(--ot-rule); color: var(--ot-ink); }\n  .ot-pager[data-variant=\"thumb\"] > li > a[data-slot=\"pagination-link\"][aria-current=\"page\"] { background-color: var(--ot-accent); color: var(--ot-paper); font-weight: 700; transition-duration: var(--ot-moderato); }\n  @media (max-width: 40rem) {\n    .ot-pager[data-variant=\"thumb\"] { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); row-gap: var(--ot-space-2); font-size: var(--ot-mp); letter-spacing: var(--ot-mp-tr); }\n    .ot-pager[data-variant=\"thumb\"] > li { min-width: 0; } /* thirteen letters to a row stay inside a phone's measure instead of running past it */\n  }\n\n  @media (forced-colors: active) {\n    .ot-pager[data-variant=\"barcode\"] { forced-color-adjust: none; color: CanvasText; --ot-ink: CanvasText; --ot-graphite: CanvasText; --ot-pencil: GrayText; --ot-rule-strong: GrayText; --ot-accent: Highlight; }\n    .ot-pager a[data-slot=\"pagination-link\"]::after { forced-color-adjust: none; background-color: GrayText; }\n    .ot-pager[data-variant=\"barcode\"] > li:has(~ li > [aria-current=\"page\"]) > a[data-slot=\"pagination-link\"]::after { background-color: CanvasText; }\n    .ot-pager:is([data-variant]) > li > a[data-slot=\"pagination-link\"][aria-current=\"page\"]::after { background-color: Highlight; }\n    .ot-pager[data-variant=\"neighbours\"] .ot-pager-step::after { forced-color-adjust: none; background-color: CanvasText; }\n    .ot-pager[data-variant=\"thumb\"] > li > a[data-slot=\"pagination-link\"][aria-current=\"page\"] { forced-color-adjust: none; background-color: Highlight; color: HighlightText; }\n  }\n}\n",
      "type": "registry:file",
      "target": "styles/0nlytype/pagination.css"
    }
  ],
  "css": {
    "@import \"../styles/0nlytype/pagination.css\"": {}
  },
  "meta": {
    "movement": "VIII",
    "underneath": "native",
    "contract": "ot-pager"
  },
  "type": "registry:ui"
}