ionbase-ui 0.46.0 → 0.48.0

package/dist/meta/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
   "hooks": [
     "useToast"
@@ -416,6 +416,23 @@
       "detail": "dist/meta/NavItem.json",
       "hasIntent": true
     },
+    "Pagination": {
+      "summary": "Page navigation for a table or list. Renders prev/next arrows, a truncated run of page numbers, and an optional rows-per-page Select.",
+      "status": "stable",
+      "variants": {
+        "type": [
+          "numbered",
+          "simple"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/Pagination.json",
+      "hasIntent": true
+    },
     "PhoneInput": {
       "summary": "A dial-code block butted against an Input, sharing one outline. It does not pick countries.",
       "status": "stable",

package/dist/meta/pageItems.json

@@ -0,0 +1,16 @@
+{
+  "name": "pageItems",
+  "source": "src/components/Pagination.tsx",
+  "propsType": null,
+  "description": "Which page numbers to draw, and where the runs are broken.\n\nExported for tests: truncation is the only real logic in this component, and\nthe failure mode is a pager that renders a gap marker with nothing behind it\n— an ellipsis standing in for exactly one page, which is both a lie and a\ncell the user cannot click to reach a page they can see the number of.\n\nThe rule that prevents it: a gap is only drawn where it replaces TWO or more\npages. `left > 2` rather than `left > 1`, and the mirror on the right.",
+  "import": "import { pageItems } from 'ionbase-ui';",
+  "stylesheet": null,
+  "tokens": [],
+  "props": {},
+  "propCounts": {
+    "own": 0,
+    "aria": 0,
+    "dom": 0,
+    "other": 0
+  }
+}

package/dist/meta/patterns/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "usage": "A pattern is a documented composition of components, not a component. Read one here, then read the contracts of what it composes.",
   "patterns": {
     "AgentRun": {

package/dist/styles/avatar-gradient.css

@@ -67,26 +67,30 @@
    * a userSpaceOnUse radial scaled per size, and the ratios come out the same
    * to three decimals, so the geometry is written once as percentages.
    *
-   * THE ALPHA IS A TOKEN NOW, AND IT HAS TO BE. It was a raw `18%` in both
-   * themes, and the initials sit exactly where the gloss peaks: over the dark
-   * disc it lightened the ground under light text and dropped five of seven
-   * hues under AA — green 3.76, red 3.92, pink 4.08, orange 4.15, blue 4.23.
-   * `surface/sheen` is 20% in Light and 5% in Dark, which brings the worst hue
-   * back to 4.94. 10% would land exactly on 4.50, which is not a margin.
+   * THE ALPHA IS A TOKEN NOW. It was a raw `18%` in both themes, hardcoded
+   * twice, which is a place dark mode has to be fixed by hand — the same reason
+   * the bevel below is a local. `surface/sheen` is 20% in Light and 5% in Dark,
+   * following `surface/scrim` and `surface/hover`: a translucent wash whose
+   * alpha themes.
    *
-   * THE GATE ENFORCES THAT NUMBER NOW. It used to composite a translucent
-   * ground over the component's flat `background-color` — the `to` stop — so it
-   * measured the gloss over the palest part of the disc and never over `from`,
-   * where the failure is; 4.94 was a hand measurement in this comment and
-   * nothing checked it. `verify-contrast` pairs each layer against every opaque
-   * ground beneath it as of 5 Sep 2026, so the sheen is measured over all three
-   * disc stops and reports 4.94 on red by itself. Putting 18% back fails five
-   * hues at the values above.
+   * THE ACCESSIBILITY ARGUMENT THAT PUT IT AT 5% WAS WRONG, AND THIS COMMENT
+   * USED TO MAKE IT. It claimed the gloss dropped five of seven hues under AA in
+   * Dark — green 3.76, red 3.92, pink 4.08, orange 4.15, blue 4.23. Those
+   * numbers came from compositing the sheen at FULL STRENGTH over the `from`
+   * stop, and that pixel does not exist. `from` is the top of the disc; the
+   * radial is centred at 70.513% of the height with a vertical radius of
+   * 64.103%, so at y=0 it is 1.10 radii out — past its own transparent stop,
+   * contributing nothing. The gloss and the darkest stop never meet.
    *
-   * The cross product is a bound, not a rendering: the gloss peaks low and
-   * centre, where the linear gradient is already near `to`, so full-strength
-   * sheen over `from` is not a pixel that exists. It is the strictest the
-   * composite could be, which is the right side to be wrong on for a floor.
+   * The gate evaluates the gradient geometrically as of 5 Sep 2026, and at the
+   * authored 18% the worst REAL point in Dark is 5.07 (green, at 50%,69%, where
+   * the gloss actually peaks and the disc beneath it is already near `to`).
+   * Nothing was ever failing. 5% is an aesthetic choice, not a fix, and it is
+   * only still here because it was reviewed in Figma and preferred.
+   *
+   * The worst point on this component is the bare top of the disc — 5.29 in
+   * Light (pink) and 5.31 in Dark (red), the same two numbers the stop comment
+   * below records, because the sheen never touches it.
    */
 
   /*
@@ -134,12 +138,14 @@
    * in the component that was not mirrored, which is precisely why Light failed
    * and Dark did not.
    *
-   * THE GATE MEASURES ALL THREE STOPS NOW. It used to read only a flat
-   * `background-color`, which is what let this hide; `verify-contrast` parses
-   * `background-image` gradients as of 4 Sep 2026, so the worst stop is enforced
-   * rather than trusted — 5.29 in Light (pink) and 5.31 in Dark (red) as it
-   * stands. Negative-tested by putting the initials back on `/600`: ten
-   * pairings fail that the old gate passed.
+   * THE GATE DOES NOT READ STOPS ANY MORE, IT EVALUATES THE GRADIENT. It began
+   * by reading only a flat `background-color`, which is what let this hide; then
+   * every stop; and as of 5 Sep 2026 it samples the disc, composites the layers
+   * at each point and reports the worst pixel the element actually paints —
+   * 5.29 in Light (pink) and 5.31 in Dark (red), both at 50%,0%, the bare top.
+   * Colours BETWEEN two stops are real pixels and none of them were measured
+   * before. Negative-tested by putting the initials back on `/600`: pink fails
+   * at 3.27 where the old gate passed it.
    */
   background-color: var(--ion-avatar-gradient-to);
   background-image:

package/dist/styles/index.css

@@ -43,6 +43,7 @@
 @import url('./header.css');
 @import url('./logo.css');
 @import url('./table.css');
+@import url('./pagination.css');
 @import url('./divider.css');
 @import url('./link.css');
 @import url('./modal.css');

package/dist/styles/pagination.css

@@ -0,0 +1,170 @@
+/*
+ * Pagination
+ *
+ * Geometry measured from Figma `Pagination Item` (1283:289) and `Pagination`
+ * (1291:503), designed 5 Sep 2026. Two Figma sets, one exported component: the
+ * item is an internal part, not something a caller composes, so it is not in
+ * the public API. See the `unmapped` note in figma/mapping.json.
+ *
+ * Size is a set of slots defaulting to medium — the same shape tabs.css uses.
+ * A size modifier reassigns five variables rather than restating five rules,
+ * which is why the item, the icon and the summary all resize from one class.
+ *
+ *   sm   32   type/body-sm   icon 14
+ *   md   40   type/body      icon 20
+ *   lg   48   type/body-lg   icon 24
+ *
+ * THE CELL IS NOT A FIXED SQUARE, AND FIGMA'S IS.
+ *
+ * Figma binds width AND height to the same spacing token, because a Figma
+ * variant has to pick a number and `1` is what fits in the frame. A real pager
+ * reaches three and four digits, and a fixed 40px box either clips `1024` or
+ * pads every single-digit cell to fit the widest one that might occur. So the
+ * height is the token and the width is a MINIMUM — the cell is square until the
+ * number outgrows it, then it grows. Do not "fix" this back to a square to
+ * match the Figma frame; the frame is the constraint, not the intent.
+ */
+
+.ion-pagination {
+  --ion-pagination-box: var(--spacing-40);
+  --ion-pagination-gap: var(--spacing-8);
+  --ion-pagination-font-size: var(--type-body);
+  --ion-pagination-line-height: var(--type-body-line-height);
+  --ion-pagination-icon: var(--icon-size-md);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-16);
+}
+
+.ion-pagination--sm {
+  --ion-pagination-box: var(--spacing-32);
+  --ion-pagination-gap: var(--spacing-6);
+  --ion-pagination-font-size: var(--type-body-sm);
+  --ion-pagination-line-height: var(--type-body-sm-line-height);
+  --ion-pagination-icon: var(--icon-size-xs);
+}
+
+.ion-pagination--lg {
+  --ion-pagination-box: var(--spacing-48);
+  --ion-pagination-font-size: var(--type-body-lg);
+  --ion-pagination-line-height: var(--type-body-lg-line-height);
+  --ion-pagination-icon: var(--icon-size-lg);
+}
+
+/*
+ * With no page-size slot there is nothing to sit opposite, and
+ * `space-between` would pin a lone control group to the left edge of whatever
+ * contains it. Ending the row is what the component means in that case.
+ */
+.ion-pagination--no-page-size {
+  justify-content: flex-end;
+}
+
+.ion-pagination__page-size {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.ion-pagination__controls {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* The cell. A button for pages and arrows; a span for the ellipsis. */
+.ion-pagination__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--ion-pagination-box);
+  height: var(--ion-pagination-box);
+  padding: 0 var(--spacing-4);
+  border: 0;
+  border-radius: var(--radius-md);
+  background-color: transparent;
+  color: var(--text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--ion-pagination-font-size);
+  line-height: var(--ion-pagination-line-height);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition:
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-pagination__item[data-hovered] {
+  background-color: var(--surface-hover);
+  color: var(--text-default);
+}
+
+/*
+ * SELECTED IS `surface/selected`, NOT THE `surface/default` TABS USES.
+ *
+ * A Tabs pill sits on a `surface/muted` track, so `surface/default` reads as a
+ * raised chip against it. Pagination has no track: on a `surface/default` card
+ * the current page would be the same colour as the thing behind it, and the one
+ * cell that must be unmistakable would be the only invisible one.
+ */
+.ion-pagination__item[data-selected] {
+  background-color: var(--surface-selected);
+  color: var(--text-default);
+}
+
+.ion-pagination__item[data-selected][data-hovered] {
+  background-color: var(--surface-selected-hover);
+}
+
+.ion-pagination__item[data-disabled] {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.ion-pagination__item[data-focused] {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: var(--spacing-2);
+}
+
+.ion-pagination__icon {
+  width: var(--ion-pagination-icon);
+  height: var(--ion-pagination-icon);
+  flex-shrink: 0;
+}
+
+/*
+ * The truncation marker. Not a button and not focusable — it is the absence of
+ * pages, and giving it a tab stop would put a control in the sequence that does
+ * nothing when activated. `aria-hidden` in the TSX keeps it out of the
+ * announcement too; the surrounding numbers already say what was skipped.
+ */
+.ion-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--ion-pagination-box);
+  height: var(--ion-pagination-box);
+  color: var(--text-tertiary);
+}
+
+.ion-pagination__summary {
+  padding: 0 var(--spacing-8);
+  color: var(--text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--ion-pagination-font-size);
+  line-height: var(--ion-pagination-line-height);
+  font-weight: var(--font-weight-regular);
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ion-pagination__item {
+    transition: none;
+  }
+}

package/llms.txt

@@ -2,7 +2,7 @@
 
 > IonBase is a React design system for enterprise SaaS, built to be consumed by an agent rather than read by a developer. Every component ships a machine-readable contract carrying the judgement a type signature cannot: when to use it, what to use instead, the anti-patterns, and what it guarantees for accessibility versus what it requires of you.
 
-Version 0.46.0. 46 components.
+Version 0.48.0. 47 components.
 
 ## Read these, in this order
 
@@ -13,7 +13,7 @@ Both are importable: `ionbase-ui/meta/index` and `ionbase-ui/meta/<Name>.json`.
 
 ## Components
 
-`AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGradient`, `AvatarGroup`, `Badge`, `Button`, `Checkbox`, `Citation`, `CitationList`, `CitationListItem`, `ConfidenceIndicator`, `Divider`, `EmptyState`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `PhoneInput`, `Popover`, `Radio`, `RadioGroup`, `ScrollProgress`, `Select`, `StreamingText`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Toast`, `ToastProvider`, `Toggle`, `Tooltip`
+`AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGradient`, `AvatarGroup`, `Badge`, `Button`, `Checkbox`, `Citation`, `CitationList`, `CitationListItem`, `ConfidenceIndicator`, `Divider`, `EmptyState`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `Pagination`, `PhoneInput`, `Popover`, `Radio`, `RadioGroup`, `ScrollProgress`, `Select`, `StreamingText`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Toast`, `ToastProvider`, `Toggle`, `Tooltip`
 
 ## Patterns
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",