chore: prepare pagination release metadata

Author: diogo-filipe-costa

CHANGELOG.md

@@ -6,7 +6,28 @@ We are following [Semantic Versioning](https://semver.org/spec/v2.0.0.html), as
 
 ## Monorepo Package Releases (`toolkit-v*`, `react-v*`)
 
-### Unreleased
+### 2026-04-16
+
+#### @ourfuturehealth/toolkit 4.14.0 (`toolkit-v4.14.0`)
+
+##### Changed
+
+- Refreshed the toolkit `pagination` component to the current design-system treatment, including 4px arrow spacing, the boxed focus style, and state coloring that keeps the title and arrow in the brand color while the page label carries the link-state change
+- Changed pagination links to hug their content instead of owning 50% click zones, while keeping the existing responsive outer margin pending broader design confirmation
+- Expanded the pagination docs page and examples to cover default, previous-only, and next-only sequence edges
+
+#### @ourfuturehealth/react-components 0.13.0 (`react-v0.13.0`)
+
+##### Added
+
+- First public React `Pagination` component with toolkit-parity previous/next link structure and support for previous-only and next-only variants
+- Storybook coverage and unit/accessibility tests for the React pagination component
+
+##### Changed
+
+- Aligned the React pagination arrows, focus treatment, and state coloring with the refreshed toolkit component and current design spec
+
+### 2026-04-15
 
 #### @ourfuturehealth/react-components 0.8.0 (`react-v0.8.0`)
 

UPGRADING.md

@@ -8,6 +8,7 @@ This guide provides detailed migration instructions for upgrading between versio
 
 | Version                                                 | Date          | Breaking Changes           | Migration Complexity                     |
 | ------------------------------------------------------- | ------------- | -------------------------- | ---------------------------------------- |
+| [v4.14.0 / React v0.13.0](#upgrading-to-v4140--react-v0130) | April 2026    | No breaking changes        | 🟢 Low - adopt the public React pagination if needed |
 | [React v0.8.0](#upgrading-to-react-v080)                | April 2026    | React `spritePath` removal | 🟢 Low - Remove the deprecated prop      |
 | [v4.9.0 / React v0.7.0](#upgrading-to-v490--react-v070) | April 2026    | Icon naming sync           | 🟡 Medium - Search/replace icon names    |
 | [v4.8.0 / React v0.6.0](#upgrading-to-v480--react-v060) | March 2026    | No breaking changes        | 🟢 Low - only relevant if you adopted the earlier TextInput prototype |
@@ -20,6 +21,64 @@ This guide provides detailed migration instructions for upgrading between versio
 
 ---
 
+## Upgrading to v4.14.0 / React v0.13.0
+
+**Released:** April 2026
+**Affected packages:**
+
+- `@ourfuturehealth/toolkit` v4.14.0+
+- `@ourfuturehealth/react-components` v0.13.0+
+
+### Breaking Changes
+
+None.
+
+### Release Overview
+
+This release refreshes the toolkit `pagination` component to the current design-system treatment and introduces the first public React `Pagination` component.
+
+- Toolkit consumers now get boxed pagination focus states, corrected state coloring, and content-hugging previous/next hit areas instead of 50/50 click zones.
+- Toolkit docs now show the start and end of a sequence explicitly through `previous-only` and `next-only` examples.
+- React consumers can now adopt the public `Pagination` component instead of carrying local previous/next page navigation markup.
+
+### Migration Steps
+
+1. Adopt the public React `Pagination` component where you need toolkit-parity previous/next page navigation in React.
+2. Re-run visual QA if you have local pagination overrides, because the link hit area now hugs the content instead of filling half of the row.
+3. For sequence endpoints, omit the unavailable side rather than rendering placeholder markup.
+
+#### React example
+
+**New in `react-v0.13.0`:**
+
+```tsx
+import { Pagination } from '@ourfuturehealth/react-components';
+```
+
+#### Toolkit example
+
+**Before:**
+
+```njk
+<nav class="app-pagination" aria-label="Pagination">
+  <a href="/previous">Previous page</a>
+  <a href="/next">Next page</a>
+</nav>
+```
+
+**After (`toolkit-v4.14.0`):**
+
+```njk
+{{ pagination({
+  "previousUrl": "/section/treatments",
+  "previousPage": "Treatments",
+  "nextUrl": "/section/symptoms",
+  "nextPage": "Symptoms"
+}) }}
+```
+
+---
+
 ## Upgrading to React v0.8.0
 
 **Planned:** April 2026

docs/consuming-react-components.md

@@ -57,7 +57,7 @@ Import components and styles in your React application:
 
 ```tsx
 import React from 'react';
-import { Button, TextInput } from '@ourfuturehealth/react-components';
+import { Button, Pagination, TextInput } from '@ourfuturehealth/react-components';
 import '@ourfuturehealth/react-components/styles/participant';
 
 function App() {
@@ -70,6 +70,12 @@ function App() {
         inputWidth={20}
         onChange={(e) => console.log(e.target.value)}
       />
+      <Pagination
+        previousUrl="/section/treatments"
+        previousPage="Treatments"
+        nextUrl="/section/symptoms"
+        nextPage="Symptoms"
+      />
       <Button onClick={() => console.log('Clicked')}>Submit</Button>
     </div>
   );
@@ -136,6 +142,7 @@ The React components package currently provides the following components:
 - `Card` - Content presentation cards for summaries, status, and next steps
 - `CardCallout` - Feedback-style callout cards for informational, warning, success, and error messages
 - `CardDoDont` - Positive and negative recommendation lists
+- `Pagination` - Previous/next page navigation for a small related sequence
 
 For complete component documentation and live examples, run Storybook locally from this repository:
 

docs/release-versioning-strategy.md

@@ -128,7 +128,17 @@ This table is a visual aid for pre-monorepo versus post-monorepo releases.
 | 19    | `react-v0.6.0`   | N/A             | `0.6.0`       | Monorepo       | Released               |
 | 20    | `toolkit-v4.9.0` | `4.9.0`         | N/A           | Monorepo       | Released               |
 | 21    | `react-v0.7.0`   | N/A             | `0.7.0`       | Monorepo       | Released               |
-| 22    | `react-v0.8.0`   | N/A             | `0.8.0`       | Monorepo       | Planned in this branch |
+| 22    | `react-v0.8.0`   | N/A             | `0.8.0`       | Monorepo       | Released               |
+| 23    | `toolkit-v4.10.0` | `4.10.0`       | N/A           | Monorepo       | Planned in DSE-335     |
+| 24    | `react-v0.9.0`   | N/A             | `0.9.0`       | Monorepo       | Planned in DSE-335     |
+| 25    | `toolkit-v4.11.0` | `4.11.0`       | N/A           | Monorepo       | Planned in DSE-326 / DSE-328 |
+| 26    | `react-v0.10.0`  | N/A             | `0.10.0`      | Monorepo       | Planned in DSE-326 / DSE-328 |
+| 27    | `toolkit-v4.12.0` | `4.12.0`       | N/A           | Monorepo       | Planned in DSE-331     |
+| 28    | `react-v0.11.0`  | N/A             | `0.11.0`      | Monorepo       | Planned in DSE-331     |
+| 29    | `toolkit-v4.13.0` | `4.13.0`       | N/A           | Monorepo       | Planned in DSE-337     |
+| 30    | `react-v0.12.0`  | N/A             | `0.12.0`      | Monorepo       | Planned in DSE-337     |
+| 31    | `toolkit-v4.14.0` | `4.14.0`       | N/A           | Monorepo       | Planned in this branch |
+| 32    | `react-v0.13.0`  | N/A             | `0.13.0`      | Monorepo       | Planned in this branch |
 
 ## References
 

packages/react-components/README.md

@@ -52,6 +52,7 @@ import {
   ErrorSummary,
   Fieldset,
   Icon,
+  Pagination,
   Radios,
   Select,
   Tag,
@@ -86,6 +87,12 @@ function App() {
       />
       <Tag variant="brand">Beta</Tag>
       <Button variant="contained">Click me</Button>
+      <Pagination
+        previousUrl="/section/treatments"
+        previousPage="Treatments"
+        nextUrl="/section/symptoms"
+        nextPage="Symptoms"
+      />
       <Icon name="Search" size={24} />
       <Card heading="Profile complete" description="You’ve completed all the required profile details." />
       <CardCallout heading="Warning" variant="warning" text="Check this information before you continue." />
@@ -189,6 +196,7 @@ The package also provides:
 - `Checkboxes`
 - `Radios`
 - `Icon`
+- `Pagination`
 
 ### ErrorSummary
 

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ourfuturehealth/react-components",
-  "version": "0.8.0",
+  "version": "0.13.0",
   "type": "module",
   "description": "React component library for OFH Design System",
   "packageManager": "pnpm@10.29.2",

packages/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ourfuturehealth/toolkit",
-  "version": "4.9.0",
+  "version": "4.14.0",
   "description": "Our Future Health design system toolkit contains the code you need to start building user interfaces for Our Future Health websites and services.",
   "repository": {
     "type": "git",