Review changes for #205, removes deprecated components

README.md

@@ -14,7 +14,7 @@ The library is published to npm as [`@eqtylab/equality`](https://www.npmjs.com/p
 ## Prerequisites
 
 - Node 22.12+ (Astro 6 requires Node ≥ 22.12.0)
-- pnpm 9.x (workspace uses `packageManager: pnpm@9.12.3`)
+- pnpm 12.x (workspace uses `packageManager: pnpm@12.5.1`)
 
 Verify versions:
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "equality",
   "private": true,
-  "packageManager": "pnpm@9.12.3",
+  "packageManager": "pnpm@12.15.0",
   "scripts": {
     "build": "pnpm -r run build",
     "dev": "pnpm --filter @eqtylab/docs run build:dev && pnpm -r --parallel run dev",
@@ -25,11 +25,5 @@
     "prettier-plugin-astro": "0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "typescript-eslint": "^8.53.0"
-  },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "^19.2.2",
-      "@types/react-dom": "^19.2.2"
-    }
   }
 }

packages/demo/src/content/docs/components/nav.mdx

@@ -8,9 +8,11 @@ import { NavListDemo } from "@demo/components/demo/nav-list";
 
 ## Overview
 
-Nav builds an app's sidebar. `NavRail` is the column of icon links on the left, and `NavPanel` is the panel beside it, with a header and a scrolling body. `NavSwitcher` sits in the panel's header to switch between items such as projects; with one option and no action it is a plain heading.
+Nav builds an app's sidebar. `NavRail` composes the largest sections of an application as icons with tooltips, and `NavPanel` sits beside it containing each page within the section, a header, and a scrolling body. `NavSwitcher` sits in the panel's header to allow users to quickly switch between the parent item of a section such as projects in Guardian.
 
-Inside the panel, `NavList` holds the links, one per row, in groups. A row can open a deeper level, which slides in with a ‹ to go back. A nav list also works on its own, such as in a popover, a sheet or a settings list. For actions in a pop-up, use a [Dropdown Menu](/components/dropdown-menu): menus are for actions, nav lists are for going places.
+Our Nav component progressively displays a tree of navigation options. In addition to navigating between pages, `NavListItem` can also open a deeper level. Users go back up a level with the ‹ row at the top.
+
+Nav should not be used for actions, for these use a [Dropdown Menu](/components/dropdown-menu) instead. Always put `NavList` inside an element with a background colour, such as a popover, sheet or panel: the sliding levels inherit the background colour to cover each other.
 
 ## Usage
 
@@ -31,7 +33,7 @@ import {
 } from "@eqtylab/equality";
 ```
 
-Group the rows, each group with an optional label, and put a separator between groups. Rows are 36px, and grow to 44px on touch screens:
+Group the rows, each group with an optional label, and add a separator between groups.
 
 <NavListDemo client:only="react" />
 
@@ -94,7 +96,7 @@ Put a group inside another group to nest it one level, under a tree line. Nested
 
 ## Drill-in
 
-A row with `drill="eu-ai-act"` opens the level whose `value` is `"eu-ai-act"`. A level with a `parent` gets a ‹ row at the top, named by its `label`, that returns to the parent. Levels must be direct children of `NavDrill`. Put `NavList` inside an element with a background colour, such as a popover, sheet or panel: the sliding levels borrow it to cover each other.
+A `NavListItem` with `drill="eu-ai-act"` opens a level whose `value` is `"eu-ai-act"`. A `NavDrillLevel` with a `parent` attribute gets a ‹ row at the top, named by its `label`, that returns the user to the parent level of the tree. Levels must be direct children of `NavDrill`.
 
 After a drill row, focus moves to the new level's ‹; after ‹, back to the row you came from. Any other change of level leaves focus alone, and levels swap without sliding under reduced motion.
 
@@ -159,7 +161,7 @@ function openLevel(level) {
 
 ### App Sidebar
 
-A rail of sections beside a panel, with a switcher in the panel's header and a nav list that drills into a policy.
+A rail of top-level app sections in `NavRail` beside a `NavPanel`, with a switcher in the panel's header to quick switch between objects, and a nav list that drills into a policy. Not all applications or navigation implementations require this level of organisation. Use NavRail when an application is sufficiently complex, and only for app-level navigation.
 
 <NavDemo client:only="react" />
 
@@ -202,8 +204,6 @@ A rail of sections beside a panel, with a switcher in the panel's header and a n
 </div>
 ```
 
-A `NavDrill` inside a `NavPanel` scrolls the panel back to the top on every change of level.
-
 The switcher's trigger stops a typed letter from picking an item while its list is closed: a switch navigates, and focus lands on the trigger afterwards. To do the same on your own `Select`, see [A select that navigates](/components/select#a-select-that-navigates).
 
 ### Navigation in a Sheet
@@ -280,8 +280,8 @@ On a phone, the sidebar comes in from the left in a [Sheet](/components/sheet).
 | `options`        | The items to switch between                                                                                                | `{ value, label, keywords? }[]`           |         | ✅       |
 | `value`          | The current item's value                                                                                                   | `string`                                  |         | ✅       |
 | `onValueChange`  | Called with the picked item's value                                                                                        | `(value: string) => void`                 |         | ✅       |
-| `onHighlight`    | Hover or focus on an option, to warm its destination                                                                       | `(value: string) => void`                 |         | ❌       |
-| `onHighlightEnd` | Hover or focus leaves an option                                                                                            | `() => void`                              |         | ❌       |
+| `onHighlight`    | Hover or focus on an option, to preload its destination                                                                    | `(value: string) => void`                 |         | ❌       |
+| `onHighlightEnd` | Hover or focus leaves an option, to cancel its preload                                                                     | `() => void`                              |         | ❌       |
 | `action`         | A command at the bottom of the list, kept while searching, such as "Create Project"; `onSelect` runs after the list closes | `{ label: string; onSelect: () => void }` |         | ❌       |
 | `loading`        | Holds the switcher's height while the current item loads                                                                   | `boolean`                                 | `false` | ❌       |
 

packages/demo/src/content/docs/getting-started/elevation.mdx

@@ -97,7 +97,6 @@ The following components have an `elevation` prop:
 | ------------- | --------- |
 | Alert Dialog  | Overlay   |
 | Dialog        | Overlay   |
-| Drawer        | Overlay   |
 | Dropdown Menu | Overlay   |
 | Popover       | Overlay   |
 | Sheet         | Overlay   |

packages/demo/src/content/docs/getting-started/usage.mdx

@@ -81,7 +81,7 @@ import { ThemeProvider } from "@eqtylab/equality";
 
 ### Portalled surfaces
 
-Tooltips, popovers, selects, dialogs, sheets, drawers, and dropdown menus render into a portal that `<ThemeProvider />` supplies automatically, so they stay inside the themed subtree. Two cases need you to provide that container yourself, via the `portalContainer` prop:
+Tooltips, popovers, selects, dialogs, sheets, and dropdown menus render into a portal that `<ThemeProvider />` supplies automatically, so they stay inside the themed subtree. Two cases need you to provide that container yourself, via the `portalContainer` prop:
 
 - **Shadow DOM** — the default document lookup can't see into a shadow root, so portalled surfaces escape the boundary and render unstyled.
 - **More than one theme root on a page** — otherwise the second root's portals can land inside the first one's container.

packages/skills/equality-design-system/SKILL.md

@@ -91,7 +91,6 @@ Verified absent — do not go hunting:
 - Standalone Calendar or single date picker (only `DateRangePicker`)
 - Free-text or async autocomplete (`Select` with `SelectSearch` only filters fixed options)
 - Carousel
-- Sidebar/Navigation/Menubar primitives
 - Rating
 - Timeline
 - Resizable panels

packages/skills/equality-design-system/references/setup.md

@@ -53,7 +53,7 @@ Components each ship their own scoped CSS Module, so there is no global componen
 
 ## Portalled surfaces
 
-Tooltips, popovers, selects, dialogs, sheets, drawers, and dropdown menus render into a portal. `ThemeProvider` creates and supplies that container, which keeps those surfaces inside the themed subtree.
+Tooltips, popovers, selects, dialogs, sheets, and dropdown menus render into a portal. `ThemeProvider` creates and supplies that container, which keeps those surfaces inside the themed subtree.
 
 **If a dropdown or dialog renders unstyled, you almost certainly have no `ThemeProvider`.** That is the single most common setup failure.
 

packages/ui/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 Notable changes to Equality are recorded here, following [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## 5.0.0 - 2026-10-27
+
+Removes components that were deprecated or never used. Code that imports any of them needs a
+change before upgrading.
+
+### Removed
+
+- `ScrollArea` and `ScrollBar`. Set an overflow and a height on your own element instead; browsers
+  draw theme-aware scrollbars of their own.
+- `ListOrGridViewToggle`. Use `SegmentedControls` instead.
+- `Drawer` and its parts. Use `Sheet` instead.
+- `Pagination` no longer scrolls a `ScrollArea` viewport to the top when the page changes. Pass
+  `scrollTargetRef` to choose what scrolls into view.
+- The `vaul` and `@radix-ui/react-scroll-area` dependencies.
+
 ## 4.15.0 - 2026-10-27
 
 Sidebar navigation comes to Equality as two sets of parts: `NavList` rows for going somewhere,

packages/ui/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/eqtylab/equality.git",
     "directory": "packages/ui"
   },
-  "version": "4.15.0",
+  "version": "5.0.0",
   "license": "Apache-2.0",
   "keywords": [
     "component library",
@@ -61,7 +61,6 @@
     "@radix-ui/react-popover": "^1.1.3",
     "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.1",
@@ -78,8 +77,7 @@
     "react-hook-form": "^7.63.0",
     "react-truncate-inside": "^1.0.3",
     "tailwind-merge": "^2.5.4",
-    "tw-animate-css": "^1.4.0",
-    "vaul": "^1.1.2"
+    "tw-animate-css": "^1.4.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",