srcdev-nuxt-components 9.5.2 → 9.5.4

package/.claude/skills/theming-override-default.md

@@ -120,10 +120,10 @@ Create `app/assets/styles/setup/03.theming/_default.css`:
   --theme-chroma: var(--palette-gold-chroma);
 
   /* Page-level tokens — readable named steps, not raw oklch */
-  --page-bg: light-dark(var(--slate-00), var(--slate-08));
-  --colour-text-default:  light-dark(var(--slate-09), var(--slate-01));
-  --colour-text-accent:   light-dark(var(--gold-09), var(--gold-04));
-  --colour-text-eyebrow:  light-dark(var(--gold-09), var(--gold-04));
+  --page-bg: var(--slate-00);
+  --colour-text-default:  var(--slate-09);
+  --colour-text-accent:   var(--gold-09);
+  --colour-text-eyebrow:  var(--gold-09);
 }
 ```
 
@@ -172,8 +172,8 @@ export default defineNuxtConfig({
 The layer's `theme-ramp.css` declares the formula on `:where(html, [data-theme], [data-invalid])`.
 When your override sets `--theme-hue`/`--theme-chroma` on `:where(html)`, every `--colour-theme-*`
 step recalculates to your palette. Semantic slots (`--theme-surface`, `--theme-text`, etc.) are
-declared on that same selector using `light-dark()` — light/dark mode continues to work without
-any extra declarations.
+declared on that same selector with light values only. The layer ships no dark scheme; to add
+one, see `theming-dark-mode.md`.
 
 The generated `_gold.css` gives you a named alias for each step (`--gold-09` etc.) so your
 page-level token values stay readable. The values match what the formula would produce for
@@ -183,7 +183,6 @@ that hue/chroma pair.
 
 - Define `--colour-theme-0` through `--colour-theme-10` — the formula handles it
 - Redeclare `--theme-surface`, `--theme-border`, `--theme-ring` etc. — they auto-update
-- Write separate light/dark files — use `light-dark()` in a single file
 - Override any button or input component tokens — they all consume semantic slots
 
 ## rem sizing

package/.claude/skills/theming-partial-override.md

@@ -88,8 +88,8 @@ Page-level tokens:
 ```css
 /* Make primary buttons darker/more saturated (step-7/9 defaults, step-9/7 hover) */
 :where(html) {
-  --theme-surface:       light-dark(oklch(48% 0.18 85), oklch(32% 0.20 85));
-  --theme-surface-hover: light-dark(oklch(32% 0.18 85), oklch(48% 0.20 85));
+  --theme-surface:       oklch(48% 0.18 85);
+  --theme-surface-hover: oklch(32% 0.18 85);
 }
 ```
 
@@ -97,9 +97,9 @@ Page-level tokens:
 
 ```css
 :where(html) {
-  --theme-input-surface:           light-dark(oklch(0.99 0 0), oklch(0.12 0.01 255));
-  --theme-input-text-color-normal: light-dark(oklch(0.20 0.01 255), oklch(0.95 0.01 255));
-  --theme-input-placeholder:       light-dark(oklch(0.60 0.01 255), oklch(0.40 0.01 255));
+  --theme-input-surface:           oklch(0.99 0 0);
+  --theme-input-text-color-normal: oklch(0.20 0.01 255);
+  --theme-input-placeholder:       oklch(0.60 0.01 255);
 }
 ```
 
@@ -107,9 +107,9 @@ Page-level tokens:
 
 ```css
 :where(html) {
-  --page-bg:             light-dark(oklch(0.98 0 0), oklch(0.10 0 0));
-  --colour-text-default: light-dark(oklch(0.20 0 0), oklch(0.93 0 0));
-  --colour-text-accent:  light-dark(oklch(0.30 0.16 85), oklch(0.65 0.18 85));
+  --page-bg:             oklch(0.98 0 0);
+  --colour-text-default: oklch(0.20 0 0);
+  --colour-text-accent:  oklch(0.30 0.16 85);
 }
 ```
 
@@ -140,8 +140,8 @@ To restrict an override to a specific section, scope to a wrapper class instead
 
 .hero-cta {
   /* Just these buttons use a different surface colour */
-  --theme-surface:       light-dark(oklch(48% 0.16 85), oklch(32% 0.18 85));
-  --theme-surface-hover: light-dark(oklch(32% 0.14 85), oklch(48% 0.16 85));
+  --theme-surface:       oklch(48% 0.16 85);
+  --theme-surface-hover: oklch(32% 0.14 85);
 }
 ```
 
@@ -160,6 +160,6 @@ To change how `data-theme="success"` looks without affecting other themes:
 ## Notes
 
 - Only override the tokens you actually need — everything else falls back to layer defaults
-- Use `light-dark()` in a single rule rather than separate `:where(html.light)` / `:where(html.dark)` blocks — the layer's `color-scheme` infrastructure handles mode switching
+- The layer ships light values only (no `light-dark()`, for older iPad Safari). For dark mode, redeclare tokens under `html[data-color-scheme="dark"]` plus a `prefers-color-scheme` block for `auto`, or use `light-dark()` yourself if you accept the browser-support cost. Full setup in `theming-dark-mode.md`.
 - `--slate-*` neutral tokens come from the layer and do not need to be redefined unless you genuinely want different neutrals
 - For a full palette replacement (changing the layer default), use `theming-override-default.md` instead

package/.vscode/srcdev-component-eyebrow-text.code-snippets

@@ -13,6 +13,10 @@
       ".$1my-page {",
       "  --eyebrow-text-bg-img: linear-gradient(135deg, $2, $3);",
       "  --eyebrow-text-medium: $4;",
+      "  --eyebrow-text-font-family: ;",
+      "  --eyebrow-text-font-style: ;",
+      "  --eyebrow-text-font-weight: ;",
+      "  --eyebrow-text-letter-spacing: ;",
       "}"
     ]
   }

package/.vscode/srcdev-component-google-reviews.code-snippets

@@ -0,0 +1,78 @@
+{
+  "SRCDEV GoogleReviews Basic": {
+    "description": "GoogleReviews fed by useGoogleReviews() (needs NUXT_GOOGLE_REVIEWS_API_KEY and NUXT_GOOGLE_REVIEWS_PLACE_ID)",
+    "scope": "vue,html",
+    "body": [
+      "<GoogleReviews :data=\"${1:googleReviews}\" />"
+    ]
+  },
+  "SRCDEV GoogleReviews Script": {
+    "description": "Fetch Google reviews from the layer's server route",
+    "scope": "typescript,javascript,vue",
+    "body": [
+      "const { data: ${1:googleReviews} } = await useGoogleReviews();"
+    ]
+  },
+  "SRCDEV GoogleReviews With Heading": {
+    "description": "GoogleReviews labelled by its own heading, optionally filtered",
+    "scope": "vue,html",
+    "body": [
+      "<GoogleReviews :data=\"${1:googleReviews}\" :min-rating=\"${2:0}\">",
+      "  <template #heading=\"{ headingId }\">",
+      "    <h2 :id=\"headingId\">${3:What clients say}</h2>",
+      "  </template>",
+      "</GoogleReviews>"
+    ]
+  },
+  "SRCDEV GoogleReviews Custom Card": {
+    "description": "GoogleReviews with each card rendered through the card slot",
+    "scope": "vue,html",
+    "body": [
+      "<GoogleReviews :data=\"${1:googleReviews}\">",
+      "  <template #card=\"{ review }\">",
+      "    <GoogleReviewCard :review=\"review\" :style-class-passthrough=\"['${2:my-review}']\" />",
+      "  </template>",
+      "</GoogleReviews>"
+    ]
+  },
+  "SRCDEV GoogleReviews CSS Override": {
+    "description": "CSS override scaffold for GoogleReviews — scope to a page or section class. See CONSUMER-STYLING.md for the full token list.",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .google-reviews {",
+      "    --google-reviews-gap: ;",
+      "    --google-reviews-card-width: ;",
+      "    --google-reviews-scroll-padding: ;",
+      "    --google-reviews-scrollbar-width: ;",
+      "    --google-reviews-scrollbar-thumb-colour: ;",
+      "    --google-reviews-scrollbar-track-colour: ;",
+      "    --google-reviews-summary-rating-font-size: ;",
+      "    --google-reviews-focus-outline-width: ;",
+      "    --google-reviews-focus-outline-colour: ;",
+      "",
+      "    --google-reviews-card-gap: ;",
+      "    --google-reviews-card-padding: ;",
+      "    --google-reviews-card-border-width: ;",
+      "    --google-reviews-card-border-colour: ;",
+      "    --google-reviews-card-border-radius: ;",
+      "    --google-reviews-card-surface: ;",
+      "    --google-reviews-card-text-colour: ;",
+      "    --google-reviews-avatar-surface: ;",
+      "    --google-reviews-avatar-text-colour: ;",
+      "    --google-reviews-author-font-weight: ;",
+      "    --google-reviews-author-line-clamp: ;",
+      "    --google-reviews-text-line-height: ;",
+      "    --google-reviews-text-line-clamp: ;",
+      "    --google-reviews-link-colour: ;",
+      "",
+      "    --google-reviews-star-size: ;",
+      "    --google-reviews-star-colour: ;",
+      "    --google-reviews-star-empty-colour: ;",
+      "    --google-reviews-meta-font-size: ;",
+      "    --google-reviews-meta-text-colour: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-input-otp.code-snippets

@@ -0,0 +1,47 @@
+{
+  "SRCDEV InputOtp Basic": {
+    "description": "Bare InputOtp one-time-code boxes (no legend/description/error wrapper)",
+    "scope": "vue,html",
+    "body": [
+      "<InputOtp",
+      "  id=\"$1otp\"",
+      "  v-model=\"$2code\"",
+      "  name=\"$3code\"",
+      "  :length=\"${4:6}\"",
+      "  group-label=\"$5Verification code\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputOtpField Basic": {
+    "description": "InputOtpField: labelled one-time-code field with description and error support",
+    "scope": "vue,html",
+    "body": [
+      "<InputOtpField",
+      "  v-model=\"$1code\"",
+      "  name=\"$2code\"",
+      "  label=\"$3Verification code\"",
+      "  :length=\"${4:6}\"",
+      "  autofocus",
+      "  :error-message=\"$5errors.code\"",
+      "  :field-has-error=\"!!$5errors.code\"",
+      "  @complete=\"$6onComplete\"",
+      ">",
+      "  <template #descriptionText>$7Enter the code we sent to your email.</template>",
+      "</InputOtpField>"
+    ]
+  },
+  "SRCDEV InputOtp CSS Override": {
+    "description": "CSS override scaffold for InputOtp tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --input-otp-gap: $2;",
+      "  --input-otp-box-inline-size: $3;",
+      "  --input-otp-box-block-size: $4;",
+      "  --input-otp-font-size: $5;",
+      "  --input-otp-border: $6;",
+      "  --input-otp-border-focus: $7;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-select-menu.code-snippets

@@ -35,6 +35,19 @@
       "/>"
     ]
   },
+  "SRCDEV SelectMenu Underlined": {
+    "description": "SelectMenu — text + chevron with an underlined trigger, matching InputSelect's underlined variant",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:filterValue}\"",
+      "  :options=\"${2:filterOptions}\"",
+      "  label=\"${3:Choose a service}\"",
+      "  :show-icon=\"false\"",
+      "  input-variant=\"underlined\"",
+      "/>"
+    ]
+  },
   "SRCDEV SelectMenu Multi-Select": {
     "description": "SelectMenu — checkbox-per-option multi-select, v-model is an array",
     "scope": "vue,html",

package/.vscode/srcdev-component-services-card.code-snippets

@@ -25,6 +25,17 @@
       "<ServicesCard :service-data=\"$1service\" :href=\"`/services/${$1service.slug}`\" />"
     ]
   },
+  "SRCDEV ServicesCard Titles Over Image": {
+    "description": "ServicesCard with eyebrow and title overlaid on the image, over a scrim",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesCard :service-data=\"$1service\" titles-within-image-wrapper>",
+      "  <template #actions=\"{ serviceData }\">",
+      "    <InputButton variant=\"secondary\" button-text=\"$2Enquire\" :href=\"`/services/${serviceData.slug}`\" />",
+      "  </template>",
+      "</ServicesCard>"
+    ]
+  },
   "SRCDEV ServicesCard With Config Overrides": {
     "description": "ServicesCard with eyebrowConfig/heroConfig overrides",
     "scope": "vue,html",
@@ -76,8 +87,13 @@
       "    --services-card-outline-colour-hover: ;",
       "    --services-card-outline-offset: ;",
       "    --services-card-outline-offset-hover: ;",
+      "    --services-card-background-color-hover: ;",
+      "    --services-card-transform-hover: ;",
       "",
       "    --services-card-gap: ;",
+      "    --services-card-background-color: ;",
+      "    --services-card-padding-block: ;",
+      "    --services-card-padding-inline: ;",
       "    --image-wrapper-aspect-ratio: ;",
       "    --image-wrapper-border-radius: ;",
       "    --image-wrapper-padding-block: ;",
@@ -86,21 +102,36 @@
       "    --details-wrapper-grid-gap: ;",
       "    --details-wrapper-padding-block: ;",
       "    --details-wrapper-padding-inline: ;",
+      "    --eyebrow-text-padding-block: ;",
+      "    --hero-text-padding-block: ;",
+      "    --description-text-colour: ;",
       "    --description-padding-block: ;",
       "    --description-line-height: ;",
+      "    --description-font-weight: ;",
       "    --description-line-clamp: ;",
       "    --meta-padding-block: ;",
+      "    --meta-border-colour: ;",
+      "    --meta-text-colour: ;",
+      "    --meta-duration-text-colour: ;",
+      "    --meta-price-text-colour: ;",
+      "    --meta-duration-font-weight: ;",
+      "    --meta-price-font-weight: ;",
+      "    --meta-letter-spacing: ;",
+      "    --meta-font-size: ;",
       "    --meta-text-transform: ;",
       "    --footer-padding-block: ;",
       "    --footer-wrapper-grid-gap: ;",
       "",
-      "    /* Local-only tokens — page-scoped override only, no :root fallback */",
-      "    --_eyebrow-text-padding-block: ;",
-      "    --_hero-text-padding-block: ;",
-      "    --_description-text-colour: ;",
-      "    --_meta-border-colour: ;",
-      "    --_meta-text-colour: ;",
-      "    --_meta-font-size: ;",
+      "    /* Titles over the image (titlesWithinImageWrapper) */",
+      "    --image-wrapper-details-scrim-colour: ;",
+      "    --image-wrapper-details-scrim: ;",
+      "    --image-wrapper-details-text-colour: ;",
+      "    --image-wrapper-details-eyebrow-text-colour: ;",
+      "    --image-wrapper-details-gap: ;",
+      "    --image-wrapper-details-eyebrow-text-padding-block: ;",
+      "    --image-wrapper-details-eyebrow-text-padding-inline: ;",
+      "    --image-wrapper-details-hero-text-padding-block: ;",
+      "    --image-wrapper-details-hero-text-padding-inline: ;",
       "  }",
       "}"
     ]

package/README.md

@@ -6,7 +6,7 @@
 
 ## NOTE
 
-Althought this repo is public and feel free to do what you wish with it, this has been developed for use with websites we develop.
+Although this repo is public and feel free to do what you wish with it, this has been developed for use with websites we develop.
 
 ## Install Nuxt Components layer
 
@@ -58,7 +58,7 @@ To ensure skills are always up to date, VSCode snippets are installed, and `nuxt
 2. `nuxt prepare` — generates Nuxt type declarations
 3. `setup:claude` — copies skills into `.claude/skills/srcdev-nuxt-components/`
 
-> **Note**: The snippet copy must run from your consumer app's postinstall, not the layer's. npm doesn't invoke postinstall hooks for dependencies, so each consumer app is responsible for copying snippets into its own `.vscode/` folder. If your app uses a standalone env flag for `nuxt prepare` (e.g. `NUXT_STANDALONE=true`), add it before `nuxt prepare`. This is project-specific — check your own `nuxt.config.ts` to confirm whether it is needed.
+> **Note**: The snippet copy must run from your consumer app's postinstall, not the layer's. npm doesn't invoke postinstall hooks for dependencies, so each consumer app is responsible for copying snippets into its own `.vscode/` folder. Don't set `SRCDEV_STANDALONE` in a consumer app: that flag is only for running this layer on its own (it enables dev-only modules and the ramp watcher).
 
 ---
 
@@ -77,6 +77,31 @@ via `npm run setup:claude`.
 
 ---
 
+## Components
+
+Components live in `app/components/`, grouped into tiers:
+
+| Folder         | Storybook title prefix |
+| -------------- | ---------------------- |
+| `01.atoms`     | `Atoms/`               |
+| `02.molecules` | `Molecules/`           |
+| `03.organisms` | `Organisms/`           |
+| `04.templates` | `Templates/`           |
+| `05.forms`     | `Forms/`               |
+
+Components are auto-imported with `pathPrefix: false`, so the tier folder never appears in the tag name.
+
+**Naming**: a bare form control is `<Name>` (e.g. `InputNumber`) and its labelled wrapper is `<Name>Field` (e.g. `InputNumberField`). Older `Core` / `Default` / `WithLabel` suffixes are being renamed to this convention; see `.claude/skills/component-naming.md` for the backlog.
+
+Each component ships with:
+
+- **`CONSUMER-STYLING.md`** next to the `.vue` file, listing its public CSS custom properties and how to override them
+- **a Storybook story**, the only place components are demonstrated (this repo has no demo pages)
+- **a skill doc** in `.claude/skills/components/`, copied into your app by `npm run setup:claude`
+- **a VS Code snippet** in `.vscode/srcdev-component-{name}.code-snippets`, copied into your app by `postinstall`
+
+---
+
 ## Consumer App Configuration
 
 Configuration options for apps extending this layer. All options go in the consumer's `nuxt.config.ts` under `runtimeConfig.public` and can also be set via environment variable.
@@ -108,6 +133,40 @@ When disabled, no `data-color-scheme` attribute is set on `<html>` and `useColou
 
 > See [.claude/skills/colour-scheme-disable.md](.claude/skills/colour-scheme-disable.md) for the full guide.
 
+### Analytics
+
+Call `useAnalytics()` from a layout, page or component and use `trackEvent(name, params)` to fire events. Only Google Analytics (GA4) is implemented today; call sites never name the provider, so adding another later won't change them.
+
+```ts
+// nuxt.config.ts
+runtimeConfig: {
+  public: {
+    analytics: {
+      provider: "google-analytics",
+      googleAnalytics: { id: "G-XXXXXXXXXX" },
+    },
+  },
+},
+```
+
+Or via environment variable:
+
+```bash
+NUXT_PUBLIC_ANALYTICS_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
+```
+
+With no ID set, `trackEvent` does nothing.
+
+### WhatsApp
+
+`useWhatsApp().openWhatsApp(fields)` opens a WhatsApp chat pre-filled with the given label/value pairs. Set the number in international format, without `+` or spaces:
+
+```bash
+NUXT_PUBLIC_WHATSAPP_NUMBER=447700900000
+```
+
+Without a number it logs a warning and does nothing.
+
 ---
 
 ## Colour System
@@ -131,7 +190,8 @@ computes the scale from the two params:
 Scale direction: **00 = lightest, 10 = darkest**. Chroma tapers at both ends and peaks at step 06.
 
 Nine semantic slots (`--theme-surface`, `--theme-accent`, `--theme-text`, `--theme-ring`, etc.) are derived from the
-scale using `light-dark()` and are shared by all components. Theme variants (`data-theme="success"`,
+scale and are shared by all components. They ship light values only (no `light-dark()`, which older iPad
+Safari lacks); dark mode is left to the consuming app, see `.claude/skills/theming-dark-mode.md`. Theme variants (`data-theme="success"`,
 `"warning"`, `"error"`) swap `--theme-hue` and `--theme-chroma` on their element; the formula
 re-evaluates locally so each themed element gets its own full palette without affecting the page.
 
@@ -222,8 +282,8 @@ In your `app/assets/styles/setup/02.colours/index.css` (create if it doesn't exi
   --theme-chroma: var(--palette-gold-chroma);
 
   /* Page-level tokens — readable named steps, not raw oklch */
-  --colour-text-accent: light-dark(var(--gold-09), var(--gold-04));
-  --colour-text-eyebrow: light-dark(var(--gold-09), var(--gold-04));
+  --colour-text-accent: var(--gold-09);
+  --colour-text-eyebrow: var(--gold-09);
 }
 ```
 
@@ -270,45 +330,13 @@ npm run check:ramps      # CI: fail if generated CSS is out of date
 | Full ramp architecture, formula details, hue drift      | `.claude/skills/theming-colour-ramps.md`     |
 | Full palette swap for a consumer app                    | `.claude/skills/theming-override-default.md` |
 | Partial token override (palette shift, buttons, inputs) | `.claude/skills/theming-partial-override.md` |
+| Add a dark scheme (layer ships light values only)       | `.claude/skills/theming-dark-mode.md`        |
 | Disable light/dark mode support                         | `.claude/skills/colour-scheme-disable.md`    |
 
 Skills are available in your project after running `npm run setup:claude`.
 
 ---
 
-## Known Build / Production Issues
-
-### `ERR_MODULE_NOT_FOUND: vue/index.mjs` — 500 on every request (Node 22)
-
-**Symptom**: After `npm run build`, running `node .output/server/index.mjs` returns HTTP 500 on every page. The terminal shows:
-
-```text
-Error [ERR_MODULE_NOT_FOUND]: Cannot find module
-  '.output/server/node_modules/vue/index.mjs'
-Did you mean to import
-  '.output/server/node_modules/.nitro/vue@3.5.34/dist/vue.cjs.prod.js'?
-```
-
-**Root cause**: Nitro's dependency tracer externalises `vue` and copies it to `.output/server/node_modules/vue/`, but only traces the CJS build (`dist/vue.cjs.prod.js`). Vue's `package.json` exports map resolves the `"import"` + `"node"` condition (used by Node 22 when importing from an ES module) to `./index.mjs` — a file that was never copied. This is a Nitro tracing bug exposed by Node 22's stricter ESM condition matching, made more likely by `vue.runtimeCompiler: true` (which changes how Nuxt aliases Vue at build time, causing Nitro to fall back to externalising it as a node_modules package).
-
-**Fix** (already applied in this repo's `nuxt.config.ts`):
-
-```ts
-nitro: {
-  externals: {
-    inline: ["vue", "@vue/runtime-core", "@vue/runtime-dom", "@vue/reactivity", "@vue/shared", "@vue/server-renderer"],
-  },
-},
-```
-
-This tells Nitro to bundle these packages inline rather than externalise them, which sidesteps the runtime resolution entirely.
-
-**Consumer apps**: This config is not gated behind `isStandalone`, so it is inherited automatically by any app that extends this layer. No consumer-side action is required.
-
-**When it's safe to remove**: If a future Nitro release fixes the dependency tracer so that all export-condition files are copied correctly, the `inline` list can be removed. Verify by checking that `.output/server/node_modules/vue/index.mjs` exists after a clean build without the config.
-
----
-
 ## Development Environment (`.vscode`)
 
 The `.vscode` directory contains Visual Studio Code configuration files to ensure a consistent development experience across the project:
@@ -428,7 +456,7 @@ npm run test:update
 
 ### Visual Regression Tests (Playwright)
 
-Runs pixel-level screenshot comparisons against Storybook. Requires Storybook to be running first.
+Runs pixel-level screenshot comparisons against Storybook. Requires Storybook to be running first. Coverage is currently limited to a few components (`InputButton`, `HeroText`, `EyebrowText`, `ContentDocs`); specs live in each component's `playwright/` folder as `*.playwright.ts`.
 
 ```bash
 # 1. Start Storybook
@@ -462,12 +490,13 @@ npx playwright show-report
 
 ## Storybook
 
-Storybook is used for isolated component development and as the target for visual regression tests. It runs as a separate Vite-based dev server.
+Storybook (v10, via `@nuxtjs/storybook`) is the only demo surface for this library, and the target for visual regression tests. The deployed build is at [storybook.srcdev.co.uk](https://storybook.srcdev.co.uk).
 
 ### Scripts
 
 ```bash
-# Start Storybook dev server (http://localhost:6006)
+# Start Storybook dev server (http://localhost:6006). `npm run dev` does the same after
+# regenerating the colour ramps; there is no `nuxt dev` entry point.
 npm run storybook
 
 # Build a static Storybook (outputs to storybook-static/)
@@ -483,6 +512,16 @@ npm run storybook:cache:clean
 > After clearing the cache, restart with `npm run storybook`. The cache clear is particularly
 > useful when changes inside `@layer` CSS blocks are not reflected in the running dev server.
 
+### MCP server for AI agents
+
+`@storybook/addon-mcp` exposes the stories over MCP while the dev server is running, so a coding agent can look up components, their props and story examples instead of guessing. The endpoint is `http://localhost:6006/mcp`. To connect Claude Code:
+
+```bash
+claude mcp add --transport http storybook http://localhost:6006/mcp
+```
+
+See the [Storybook MCP docs](https://storybook.js.org/docs/next/ai/mcp/overview) for other clients.
+
 ### Fonts
 
 `@nuxt/fonts` is disabled in Storybook (detected via `process.env.STORYBOOK` in `nuxt.config.ts`).
@@ -492,5 +531,6 @@ Fonts are served instead from local files in `.storybook/public/_fonts/`, declar
 | ---------------- | ------ | -------------------------------------------- |
 | Poppins          | TTF    | `.storybook/public/_fonts/poppins/`          |
 | Playfair Display | woff2  | `.storybook/public/_fonts/playfair-display/` |
+| Mono MMM 5       | TTF    | `public/fonts/`                              |
 
 To add a new font, see [.claude/skills/storybook-add-font.md](.claude/skills/storybook-add-font.md).

package/app/assets/styles/setup/01.config/_head.css

@@ -1,15 +1,6 @@
 html {
-  color-scheme: light dark;
   interpolate-size: allow-keywords;
 
-  &[data-color-scheme="light"] {
-    color-scheme: light;
-  }
-
-  &[data-color-scheme="dark"] {
-    color-scheme: dark;
-  }
-
   font-size: 62.5%;
 
   transition:

package/app/assets/styles/setup/03.theming/_default.css

@@ -6,10 +6,10 @@
   /* ===========================================
      GENERIC BODY VARIABLES
      =========================================== */
-  --page-bg: light-dark(var(--slate-00), var(--slate-08));
-  --colour-text-default: light-dark(var(--slate-09), var(--slate-01));
-  --colour-text-accent: light-dark(var(--blue-09), var(--blue-05));
-  --colour-text-eyebrow: light-dark(var(--blue-09), var(--blue-05));
+  --page-bg: var(--slate-00);
+  --colour-text-default: var(--slate-09);
+  --colour-text-accent: var(--blue-09);
+  --colour-text-eyebrow: var(--blue-09);
 
   /* ===========================================
      HERO / EYEBROW TEXT VARIABLES
@@ -21,46 +21,46 @@
      STEPPER LIST VARIABLES
      =========================================== */
   --stepper-list-counter-circle-background: transparent;
-  --stepper-list-counter-circle-text: light-dark(var(--blue-09), var(--blue-02));
-  --stepper-list-counter-circle-border: light-dark(var(--blue-09), var(--blue-02));
-  --stepper-list-counter-disc-background: light-dark(var(--blue-01), var(--blue-02));
+  --stepper-list-counter-circle-text: var(--blue-09);
+  --stepper-list-counter-circle-border: var(--blue-09);
+  --stepper-list-counter-disc-background: var(--blue-01);
   --stepper-list-counter-disc-text: var(--blue-09);
-  --stepper-list-counter-disc-border: light-dark(var(--blue-01), var(--blue-02));
+  --stepper-list-counter-disc-border: var(--blue-01);
   --stepper-list-counter-square-background: transparent;
-  --stepper-list-counter-square-text: light-dark(var(--blue-09), var(--blue-02));
-  --stepper-list-counter-square-border: light-dark(var(--blue-09), var(--blue-02));
-  --stepper-list-connector-color: light-dark(var(--blue-01), var(--blue-02));
-  --stepper-list-icon-color: light-dark(var(--blue-09), var(--blue-02));
+  --stepper-list-counter-square-text: var(--blue-09);
+  --stepper-list-counter-square-border: var(--blue-09);
+  --stepper-list-connector-color: var(--blue-01);
+  --stepper-list-icon-color: var(--blue-09);
 
   /* ===========================================
      TREATMENT CONSULTANT VARIABLES
      =========================================== */
-  --treatment-consultant-primary-colour: light-dark(var(--amber-05), var(--amber-02));
-  --treatment-consultant-primary-foreground: light-dark(var(--amber-09), var(--amber-02));
-  --treatment-consultant-muted-colour: light-dark(var(--amber-03), var(--amber-05));
-  --treatment-consultant-muted-foreground: light-dark(var(--amber-07), var(--amber-05));
-  --treatment-consultant-background: light-dark(var(--amber-01), var(--amber-10));
-  --treatment-consultant-foreground: light-dark(var(--amber-09), var(--amber-02));
-  --treatment-consultant-border-colour: light-dark(var(--blue-02), var(--amber-03));
-  --treatment-consultant-checked-surface-colour: light-dark(var(--green-03), var(--green-10));
-  --treatment-consultant-checked-stroke-colour: light-dark(var(--green-09), var(--green-03));
-  --treatment-consultant-conflict-surface-colour: light-dark(var(--sunset-03), var(--sunset-09));
-  --treatment-consultant-conflict-stroke-colour: light-dark(var(--sunset-09), var(--sunset-03));
+  --treatment-consultant-primary-colour: var(--amber-05);
+  --treatment-consultant-primary-foreground: var(--amber-09);
+  --treatment-consultant-muted-colour: var(--amber-03);
+  --treatment-consultant-muted-foreground: var(--amber-07);
+  --treatment-consultant-background: var(--amber-01);
+  --treatment-consultant-foreground: var(--amber-09);
+  --treatment-consultant-border-colour: var(--blue-02);
+  --treatment-consultant-checked-surface-colour: var(--green-03);
+  --treatment-consultant-checked-stroke-colour: var(--green-09);
+  --treatment-consultant-conflict-surface-colour: var(--sunset-03);
+  --treatment-consultant-conflict-stroke-colour: var(--sunset-09);
 
   /* ===========================================
      ANCHOR LINK VARIABLES
      =========================================== */
-  --colour-link-default: light-dark(var(--blue-10), var(--blue-02));
-  --colour-link-hover: light-dark(var(--blue-09), var(--blue-03));
+  --colour-link-default: var(--blue-10);
+  --colour-link-hover: var(--blue-09);
 
   /* ===========================================
      STRUCTURAL INPUT TOKENS
      Neutral slate surface — independent of theme colour
      =========================================== */
-  --theme-input-surface: light-dark(var(--slate-00), var(--slate-10));
-  --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-09));
-  --theme-input-text-color-normal: light-dark(var(--slate-09), var(--slate-01));
-  --theme-input-placeholder: light-dark(var(--slate-05), var(--slate-04));
+  --theme-input-surface: var(--slate-00);
+  --theme-input-surface-hover: var(--slate-01);
+  --theme-input-text-color-normal: var(--slate-09);
+  --theme-input-placeholder: var(--slate-05);
   --theme-checkbox-symbol-surface: var(--theme-input-surface);
   --input-error-margin-block-start: 0.25rem;
 }

package/app/assets/styles/setup/03.theming/_error.css

@@ -8,7 +8,7 @@
      These are always error-red regardless of nesting context.
      =========================================== */
   --input-error-color: white;
-  --theme-error-surface: light-dark(var(--red-06), var(--red-07));
-  --theme-error-border: light-dark(var(--red-06), var(--red-07));
-  --theme-error-outline: light-dark(var(--red-01), var(--red-05));
+  --theme-error-surface: var(--red-06);
+  --theme-error-border: var(--red-06);
+  --theme-error-outline: var(--red-01);
 }