Rename package to @nhsdigital/fdp-design-system

- Changed package name from @nhsdigital/nhs-fdp-design-system to @nhsdigital/fdp-design-system
- Updated all import references across docs, src, and config files
- Package name now matches the repo name and avoids redundant "nhs" prefix

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: fergusbisset

.github/workflows/npm-publish.yml

@@ -80,4 +80,4 @@ jobs:
       - name: Summary
         run: |
           VERSION=$(node -p "require('./package.json').version")
-          echo "Published @nhsdigital/nhs-fdp-design-system@$VERSION to npm" >> $GITHUB_STEP_SUMMARY
+          echo "Published @nhsdigital/fdp-design-system@$VERSION to npm" >> $GITHUB_STEP_SUMMARY

CLAUDE.md

@@ -70,7 +70,7 @@ Components with interactivity use a split pattern:
 - `.tsx` - Client variant with state and data attributes for behaviours
 - `.server.tsx` - Server variant invoking pure renderer only
 
-Server variants can be imported via `@nhsdigital/nhs-fdp-design-system/components/ComponentName/server`
+Server variants can be imported via `@nhsdigital/fdp-design-system/components/ComponentName/server`
 
 ### Design Token System
 Built with Style Dictionary, tokens are in `packages/nhs-fdp/tokens/`:
@@ -112,7 +112,7 @@ The build system auto-generates exports:
 
 1. **Documentation Location**: All docs go in `docs/` subdirectories, never at repo root
 2. **React Version**: Uses React 19.2.0
-3. **Package Registry**: Published to npm public registry (`@nhsdigital/nhs-fdp-design-system`)
+3. **Package Registry**: Published to npm public registry (`@nhsdigital/fdp-design-system`)
 4. **Next.js Compatibility**: Supports Next.js 13.4+ through 16
 5. **Pre-version Checks**: `npm run preversion` runs lint, tests, and build before version bumps
 6. **Repository**: https://github.com/NHSDigital/fdp-react-design-system

MIGRATION-PLAN.md

@@ -7,7 +7,7 @@ This document outlines the step-by-step process to migrate from `fergusbisset/nh
 | Item | From | To |
 |------|------|-----|
 | **Repository** | `github.com/fergusbisset/nhs-fdp-design-system` | `github.com/NHSDigital/fdp-react-design-system` |
-| **Package Name** | `@nhsdigital/nhs-fdp-design-system` | `@nhsdigital/nhs-fdp-design-system` |
+| **Package Name** | `@nhsdigital/fdp-design-system` | `@nhsdigital/fdp-design-system` |
 | **Registry** | GitHub Packages | npm public registry |
 | **Author** | Fergus Bisset | FDP Product Design Team |
 
@@ -171,7 +171,7 @@ Update `package.json` to remove corresponding npm scripts.
 
 ```json
 {
-  "name": "@nhsdigital/nhs-fdp-design-system",
+  "name": "@nhsdigital/fdp-design-system",
   "author": "FDP Product Design Team",
   "license": "MIT",
   "repository": {
@@ -191,7 +191,7 @@ Update `package.json` to remove corresponding npm scripts.
 
 ### Step 5.2: Update all internal package references
 Search and replace throughout codebase:
-- `@nhsdigital/nhs-fdp-design-system` → `@nhsdigital/nhs-fdp-design-system`
+- `@nhsdigital/fdp-design-system` → `@nhsdigital/fdp-design-system`
 
 Files to update:
 - `README.md` (all import examples)
@@ -202,7 +202,7 @@ Files to update:
 
 ### Step 5.3: Update README.md
 - Remove GitHub Packages authentication instructions
-- Add npm public registry installation: `npm install @nhsdigital/nhs-fdp-design-system`
+- Add npm public registry installation: `npm install @nhsdigital/fdp-design-system`
 - Update repository URLs
 - Update author/team references
 
@@ -287,7 +287,7 @@ npm publish --access public
 
 ### Step 8.3: Verify npm installation
 ```bash
-npm install @nhsdigital/nhs-fdp-design-system
+npm install @nhsdigital/fdp-design-system
 ```
 
 ---
@@ -328,7 +328,7 @@ After the main migration is stable, extract SPC to its own repository:
 - [x] Update package.json scripts
 
 ### Phase 5: Package Config
-- [x] Update package name to `@nhsdigital/nhs-fdp-design-system`
+- [x] Update package name to `@nhsdigital/fdp-design-system`
 - [x] Update author to "FDP Product Design Team"
 - [x] Update license to MIT
 - [x] Update publishConfig for npm public

README.md

@@ -9,14 +9,14 @@ The NHS FDP Design System provides a complete set of reusable components, design
 ## Installation
 
 ```bash
-npm install @nhsdigital/nhs-fdp-design-system
+npm install @nhsdigital/fdp-design-system
 ```
 
 ## Basic Usage
 
 ```tsx
-import { Button, Panel, Heading } from '@nhsdigital/nhs-fdp-design-system';
-import '@nhsdigital/nhs-fdp-design-system/dist/nhs-fdp-design-system.css';
+import { Button, Panel, Heading } from '@nhsdigital/fdp-design-system';
+import '@nhsdigital/fdp-design-system/dist/nhs-fdp-design-system.css';
 
 function App() {
   return (
@@ -34,17 +34,17 @@ You can import individual components via stable subpaths to keep bundles lean an
 
 ```tsx
 // Import a single component (JS + types)
-import Button from '@nhsdigital/nhs-fdp-design-system/components/Button';
+import Button from '@nhsdigital/fdp-design-system/components/Button';
 
 // Many components are available this way, e.g.
-import Card from '@nhsdigital/nhs-fdp-design-system/components/Card';
-import Grid from '@nhsdigital/nhs-fdp-design-system/components/Grid';
+import Card from '@nhsdigital/fdp-design-system/components/Card';
+import Grid from '@nhsdigital/fdp-design-system/components/Grid';
 
 // Server-only variants (where available)
-import { HeaderServer } from '@nhsdigital/nhs-fdp-design-system/components/Header/server';
+import { HeaderServer } from '@nhsdigital/fdp-design-system/components/Header/server';
 
 // Styles can still be brought in globally or per-component via CSS subpaths
-import '@nhsdigital/nhs-fdp-design-system/components/Button/css';
+import '@nhsdigital/fdp-design-system/components/Button/css';
 ```
 
 Notes:
@@ -61,9 +61,9 @@ Interactive components (Header overflow, CharacterCount, etc.) require the behav
 
 ```tsx
 // app/layout.tsx (Server Component)
-import '@nhsdigital/nhs-fdp-design-system/dist/nhs-fdp-design-system.css';
-import { HeaderServer } from '@nhsdigital/nhs-fdp-design-system/ssr';
-import { NHSBehavioursInit } from '@nhsdigital/nhs-fdp-design-system/nextjs';
+import '@nhsdigital/fdp-design-system/dist/nhs-fdp-design-system.css';
+import { HeaderServer } from '@nhsdigital/fdp-design-system/ssr';
+import { NHSBehavioursInit } from '@nhsdigital/fdp-design-system/nextjs';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -124,13 +124,13 @@ Some interactive components adopt an explicit split to guarantee deterministic,
 - `Component.tsx` – Client interactive variant that wraps the pure renderer and adds state, effects and data attributes for behaviours.
 - `Component.server.tsx` – Server (static) variant invoking the pure renderer only. Contains no React hooks (enforced via `npm run verify:server-variants`).
 
-Current migrated components: `Radios`, `Header` (exporting `RadiosServer`, `HeaderServer`). You can import server variants via `@nhsdigital/nhs-fdp-design-system/components/ComponentName/server`.
+Current migrated components: `Radios`, `Header` (exporting `RadiosServer`, `HeaderServer`). You can import server variants via `@nhsdigital/fdp-design-system/components/ComponentName/server`.
 
 Quick SSR usage (Next.js server components):
 
 ```tsx
 // Import SSR-safe components only
-import { Header, ButtonServer, SummaryList, Input, Textarea, Select } from '@nhsdigital/nhs-fdp-design-system/ssr';
+import { Header, ButtonServer, SummaryList, Input, Textarea, Select } from '@nhsdigital/fdp-design-system/ssr';
 ```
 
 ## Development

docs/BEHAVIOURS_ARCHITECTURE.md

@@ -63,12 +63,12 @@ This architecture ensures:
 
 ### 1. SSR Components (Server-Side)
 
-**Import from:** `@nhsdigital/nhs-fdp-design-system/ssr` or main export
+**Import from:** `@nhsdigital/fdp-design-system/ssr` or main export
 
 **Usage:**
 ```tsx
 // app/page.tsx (Next.js App Router - Server Component)
-import { Button, Radios, Input } from '@nhsdigital/nhs-fdp-design-system/ssr';
+import { Button, Radios, Input } from '@nhsdigital/fdp-design-system/ssr';
 
 export default function Page() {
   return (
@@ -97,12 +97,12 @@ export default function Page() {
 
 ### 2. BehavioursLoader (Client Component)
 
-**Import from:** `@nhsdigital/nhs-fdp-design-system/behaviours/react`
+**Import from:** `@nhsdigital/fdp-design-system/behaviours/react`
 
 **Usage:**
 ```tsx
 // app/layout.tsx (Next.js App Router - Server Component)
-import { BehavioursLoader } from '@nhsdigital/nhs-fdp-design-system/behaviours/react';
+import { BehavioursLoader } from '@nhsdigital/fdp-design-system/behaviours/react';
 
 export default function RootLayout({ children }) {
   return (
@@ -137,12 +137,12 @@ export default function RootLayout({ children }) {
 
 ### 3. Vanilla JS Behaviours (Browser-Only)
 
-**Import from:** `@nhsdigital/nhs-fdp-design-system/behaviours`
+**Import from:** `@nhsdigital/fdp-design-system/behaviours`
 
 **Usage:**
 ```typescript
 // Traditional approach (if not using React)
-import { initAll } from '@nhsdigital/nhs-fdp-design-system/behaviours';
+import { initAll } from '@nhsdigital/fdp-design-system/behaviours';
 
 // After DOM is ready
 document.addEventListener('DOMContentLoaded', () => {
@@ -163,8 +163,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
 ```tsx
 // app/layout.tsx (Server Component)
-import { BehavioursLoader } from '@nhsdigital/nhs-fdp-design-system/behaviours/react';
-import '@nhsdigital/nhs-fdp-design-system/css';
+import { BehavioursLoader } from '@nhsdigital/fdp-design-system/behaviours/react';
+import '@nhsdigital/fdp-design-system/css';
 
 export default function RootLayout({ children }) {
   return (
@@ -180,7 +180,7 @@ export default function RootLayout({ children }) {
 
 ```tsx
 // app/page.tsx (Server Component)
-import { Button, Radios } from '@nhsdigital/nhs-fdp-design-system/ssr';
+import { Button, Radios } from '@nhsdigital/fdp-design-system/ssr';
 
 export default function Page() {
   return (
@@ -196,8 +196,8 @@ export default function Page() {
 
 ```tsx
 // pages/_app.tsx
-import { BehavioursLoader } from '@nhsdigital/nhs-fdp-design-system/behaviours/react';
-import '@nhsdigital/nhs-fdp-design-system/css';
+import { BehavioursLoader } from '@nhsdigital/fdp-design-system/behaviours/react';
+import '@nhsdigital/fdp-design-system/css';
 
 export default function App({ Component, pageProps }) {
   return (
@@ -219,7 +219,7 @@ import nunjucks from 'nunjucks';
 const app = express();
 
 // Serve behaviours bundle
-app.use('/static', express.static('node_modules/@nhsdigital/nhs-fdp-design-system/dist/behaviours'));
+app.use('/static', express.static('node_modules/@nhsdigital/fdp-design-system/dist/behaviours'));
 
 // In your template:
 // <script src="/static/index.js"></script>
@@ -282,7 +282,7 @@ export function initRadios(scope = document) {
 ```tsx
 // ✅ CORRECT - Import in layout, use after children
 // app/layout.tsx (Server Component is OK)
-import { BehavioursLoader } from '@nhsdigital/nhs-fdp-design-system/behaviours/react';
+import { BehavioursLoader } from '@nhsdigital/fdp-design-system/behaviours/react';
 
 export default function Layout({ children }) {
   return (

docs/BEHAVIOURS_INITIALIZATION.md

@@ -38,7 +38,7 @@ Use Next.js `Script` component or plain `<script>` tags to initialize behaviours
 
 ```tsx
 // app/layout.tsx (Server Component - no "use client" needed!)
-import { InitBehaviours } from '@nhsdigital/nhs-fdp-design-system/nextjs'
+import { InitBehaviours } from '@nhsdigital/fdp-design-system/nextjs'
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -77,7 +77,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 ```tsx
 // app/layout.tsx
-import { InitBehavioursInline } from '@nhsdigital/nhs-fdp-design-system/nextjs'
+import { InitBehavioursInline } from '@nhsdigital/fdp-design-system/nextjs'
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -112,7 +112,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
   <!-- Load behaviours after content -->
   <script 
-    src="/node_modules/@nhsdigital/nhs-fdp-design-system/dist/behaviours/init.js" 
+    src="/node_modules/@nhsdigital/fdp-design-system/dist/behaviours/init.js" 
     type="module"
     defer
   ></script>
@@ -124,7 +124,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 ```html
 <script 
-  src="https://unpkg.com/@nhsdigital/nhs-fdp-design-system/dist/behaviours/init.js"
+  src="https://unpkg.com/@nhsdigital/fdp-design-system/dist/behaviours/init.js"
   type="module"
   defer
 ></script>
@@ -149,7 +149,7 @@ export function ClientInitializer() {
     if (typeof window === 'undefined') return
 
     // Import and initialize
-    import('@nhsdigital/nhs-fdp-design-system/behaviours')
+    import('@nhsdigital/fdp-design-system/behaviours')
       .then(({ initAll }) => {
         initAll(document)
       })
@@ -197,7 +197,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 ```tsx
 // app/layout.tsx
-import { BehavioursLoader } from '@nhsdigital/nhs-fdp-design-system/behaviours/react'
+import { BehavioursLoader } from '@nhsdigital/fdp-design-system/behaviours/react'
 
 export default function RootLayout({ children }) {
   return (
@@ -215,7 +215,7 @@ export default function RootLayout({ children }) {
 
 ```tsx
 // app/layout.tsx
-import { InitBehaviours } from '@nhsdigital/nhs-fdp-design-system/nextjs'
+import { InitBehaviours } from '@nhsdigital/fdp-design-system/nextjs'
 
 export default function RootLayout({ children }) {
   return (
@@ -247,7 +247,7 @@ export function ScopedSection() {
   useEffect(() => {
     if (!containerRef.current) return
 
-    import('@nhsdigital/nhs-fdp-design-system/behaviours')
+    import('@nhsdigital/fdp-design-system/behaviours')
       .then(({ initAll }) => {
         initAll(containerRef.current!) // Init only in this container
       })
@@ -275,7 +275,7 @@ export function ManagedSection() {
 
     let cleanup: (() => void) | undefined
 
-    import('@nhsdigital/nhs-fdp-design-system/behaviours')
+    import('@nhsdigital/fdp-design-system/behaviours')
       .then(({ initAll, teardownAll }) => {
         initAll(containerRef.current!)
         cleanup = () => teardownAll(containerRef.current!)
@@ -306,8 +306,8 @@ export function ManagedSection() {
 ### "Module not found" errors
 
 **Check**:
-1. Package is installed: `npm list @nhsdigital/nhs-fdp-design-system`
-2. Import path is correct: `@nhsdigital/nhs-fdp-design-system/nextjs`
+1. Package is installed: `npm list @nhsdigital/fdp-design-system`
+2. Import path is correct: `@nhsdigital/fdp-design-system/nextjs`
 3. Build succeeded: `npm run build`
 
 ### Behaviours run too early (before hydration)
@@ -342,7 +342,7 @@ Use `<InitBehavioursInline />` if:
 **The recommended approach is `<InitBehaviours />`** from the `/nextjs` export:
 
 ```tsx
-import { InitBehaviours } from '@nhsdigital/nhs-fdp-design-system/nextjs'
+import { InitBehaviours } from '@nhsdigital/fdp-design-system/nextjs'
 ```
 
 This gives you:

docs/MIGRATIONS.md

@@ -5,7 +5,7 @@ We’ve simplified SPC imports to a few stable surfaces and reduced accidental c
 Recommended pattern (barrel-first):
 
 - Component and basic types → `src/components/DataVisualisation/charts/SPC` (SPC barrel)
-  - Example: `import { SPCChart } from '@nhsdigital/nhs-fdp-design-system/src/components/DataVisualisation/charts/SPC'`
+  - Example: `import { SPCChart } from '@nhsdigital/fdp-design-system/src/components/DataVisualisation/charts/SPC'`
   - Example: `import type { SPCChartProps, SPCDatum } from '.../charts/SPC'`
 - Engine helpers and enums → `src/components/DataVisualisation/charts/SPC/engine`
   - Example: `import { buildSpcV26a, SpcVisualCategory } from '.../charts/SPC/engine'`

docs/NEXTJS-QUICK-START.md

@@ -14,9 +14,9 @@ Load the behaviours via a tiny client-only component provided by the library. Th
 
 ```tsx
 // app/layout.tsx (Server Component)
-import '@nhsdigital/nhs-fdp-design-system/dist/nhs-fdp-design-system.css';
-import { HeaderServer } from '@nhsdigital/nhs-fdp-design-system/ssr';
-import { NHSBehavioursInit } from '@nhsdigital/nhs-fdp-design-system/nextjs';
+import '@nhsdigital/fdp-design-system/dist/nhs-fdp-design-system.css';
+import { HeaderServer } from '@nhsdigital/fdp-design-system/ssr';
+import { NHSBehavioursInit } from '@nhsdigital/fdp-design-system/nextjs';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -34,7 +34,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
-Alternative (legacy): If you can’t use the component, create your own client-only wrapper that imports '@nhsdigital/nhs-fdp-design-system/behaviours'. Note: avoid manual script tags (e.g. adding a src directly) – this is brittle in Next.js and won’t help SSR inline dynamic imports.
+Alternative (legacy): If you can’t use the component, create your own client-only wrapper that imports '@nhsdigital/fdp-design-system/behaviours'. Note: avoid manual script tags (e.g. adding a src directly) – this is brittle in Next.js and won’t help SSR inline dynamic imports.
 
 ## How to Verify It's Working
 
@@ -64,7 +64,7 @@ So behaviours **automatically initialize** there. But in your Next.js app, nothi
 
 ## What the Behaviours Do
 
-When you import `@nhsdigital/nhs-fdp-design-system/behaviours`, it:
+When you import `@nhsdigital/fdp-design-system/behaviours`, it:
 
 1. **Auto-initializes** on DOM ready (code at bottom of `behaviours/index.ts`)
 2. **Finds all headers** on the page (`.nhsuk-header`)
@@ -80,9 +80,9 @@ Without this, you just get the static SSR markup with no interactivity.
 
 ```tsx
 // app/layout.tsx
-import '@nhsdigital/nhs-fdp-design-system/behaviours'  // ← The magic line
-import { Header } from '@nhsdigital/nhs-fdp-design-system/ssr'
-import '@nhsdigital/nhs-fdp-design-system/dist/nhs-fdp-design-system.css'
+import '@nhsdigital/fdp-design-system/behaviours'  // ← The magic line
+import { Header } from '@nhsdigital/fdp-design-system/ssr'
+import '@nhsdigital/fdp-design-system/dist/nhs-fdp-design-system.css'
 
 export default function RootLayout({ 
   children