srcdev-nuxt-components 9.0.18 → 9.1.0

package/.claude/settings.json

@@ -15,7 +15,8 @@
       "Bash(git mv:*)",
       "Bash(npx tsc:*)",
       "Bash(npx vitest:*)",
-      "Bash(git show:*)"
+      "Bash(git show:*)",
+      "Edit(/.claude/skills/components/**)"
     ],
     "additionalDirectories": [
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",

package/.claude/skills/component-inline-action-button.md

@@ -0,0 +1,79 @@
+# Inline Action Button in a Custom Input Wrapper
+
+## Overview
+
+When a component needs an action button visually attached to an input-like wrapper (e.g. copy-to-clipboard, search-submit), use `InputButtonCore variant="inline"` rather than a raw `<button>`. The `inline` variant applies no built-in styles intentionally — the parent component's CSS provides all context. This keeps the button consistent with the rest of the input system (focus rings, hover tokens, transition timing) without duplicating the button style system.
+
+## Pattern
+
+```vue
+<template>
+  <div class="my-wrapper" :class="{ 'some-state': isActive }">
+    <input class="my-field" ... />
+    <InputButtonCore
+      type="button"
+      variant="inline"
+      class="my-action-button"
+      :button-text="label"
+      :aria-label="label"
+      @click="handleAction"
+    >
+      <template v-if="slots.icon" #left>
+        <slot name="icon"></slot>
+      </template>
+    </InputButtonCore>
+  </div>
+</template>
+```
+
+`aria-label` is not a declared prop on InputButtonCore — it falls through to the root element via Vue's default `inheritAttrs: true`.
+
+## CSS
+
+Target `.my-action-button.input-button-core` inside the wrapper to override InputButtonCore's defaults. Use theme tokens — not private `--_` tokens — for colours that already have theme equivalents:
+
+```css
+@layer components {
+  .my-wrapper {
+    display: flex;
+    align-items: stretch;
+    border: var(--form-element-border-width) solid var(--theme-input-border);
+    border-radius: var(--form-input-border-radius);
+    background-color: var(--theme-input-surface);
+
+    .my-action-button.input-button-core {
+      border-radius: 0;
+      border-inline-start: var(--form-element-border-width) solid var(--theme-input-border);
+      padding-inline: var(--input-padding-inline);
+      min-width: var(--input-min-height);
+      background-color: var(--theme-button-secondary-surface);
+      color: var(--theme-button-secondary-text);
+
+      &:hover {
+        background-color: var(--theme-button-primary-surface);
+        color: var(--theme-button-primary-text);
+      }
+
+      &:focus-visible {
+        outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+        outline-offset: -4px;
+      }
+    }
+
+    /* Use private tokens only for new semantic states with no theme equivalent */
+    &.some-state {
+      --_state-surface: light-dark(var(--green-01), var(--green-09));
+      --_state-text: light-dark(var(--green-08), var(--green-01));
+
+      .my-action-button.input-button-core {
+        background-color: var(--_state-surface);
+        color: var(--_state-text);
+      }
+    }
+  }
+}
+```
+
+## Real example
+
+`InputCopyCore` — `app/components/forms/input-copy/InputCopyCore.vue`

package/.claude/skills/components/input-copy-core.md

@@ -0,0 +1,66 @@
+# InputCopyCore
+
+Readonly input that displays a value with a one-click copy-to-clipboard button. Intended for license keys, API tokens, share URLs, etc.
+
+**File**: `app/components/forms/input-copy/InputCopyCore.vue`
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | `string` | required | `id` attribute on the `<input>` |
+| `value` | `string` | required | Text to display and copy |
+| `copy-label` | `string` | `"Copy"` | Button label before copying |
+| `copied-label` | `string` | `"Copied!"` | Button label after a successful copy |
+| `feedback-duration` | `number` | `2000` | ms to show the copied state before resetting |
+| `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+## Emits
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `copy` | `value: string` | Fires on successful clipboard write |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `icon` | Optional icon shown to the left of the button label (passes through to InputButtonCore `#left`) |
+
+## Behaviour
+
+- Calls `navigator.clipboard.writeText(value)` on button click
+- On success: adds `.copied` class to root, shows `copiedLabel`, emits `copy`
+- After `feedbackDuration` ms: removes `.copied` class, reverts button label
+- Clipboard failure is caught silently — no `.copied` state is set
+
+## CSS classes
+
+| Class | Where | Description |
+|-------|-------|-------------|
+| `.input-copy-core` | root | always present |
+| `.copied` | root | present during feedback window |
+| `.input-copy-field` | `<input>` | the readonly text field |
+| `.input-copy-button` | button | extra class added to InputButtonCore root |
+
+## Usage
+
+```vue
+<InputCopyCore
+  id="license-key-input"
+  value="sk_live_abc123def456"
+  copy-label="Copy key"
+  copied-label="Copied!"
+  :feedback-duration="2000"
+/>
+```
+
+With icon slot (e.g. using a Radix icon):
+
+```vue
+<InputCopyCore id="api-key" value="sk_live_abc123def456">
+  <template #icon>
+    <Icon name="radix-icons:clipboard" class="icon" />
+  </template>
+</InputCopyCore>
+```

package/.claude/skills/components/treatment-consultant.md

@@ -0,0 +1,128 @@
+# TreatmentConsultant Component
+
+## Overview
+
+`TreatmentConsultant` is a self-contained 5-step hair consultation wizard (`03.organisms`). It collects a user's hair profile across four steps (hair type, natural colour, dream colour, style & treatments) and renders a personalised recommendation on the final step.
+
+All data — hair types, colour swatches, treatments, and the recommendation matrix — is hard-coded inside the component. There are no external data dependencies.
+
+## Props
+
+| Prop | Type | Default | Purpose |
+|------|------|---------|---------|
+| `autoAdvance` | `boolean` | `false` | Automatically advances to the next step immediately after each selection (steps 0–2). On step 3, a "View Results" button still appears when `allowMultipleTreatments` is also `true`. |
+| `allowMultipleTreatments` | `boolean` | `false` | Enables multi-select on the treatments step. When `false`, selecting a treatment deselects any previous choice. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Standard passthrough prop for HOC styling. |
+
+## Basic usage
+
+```vue
+<TreatmentConsultant :auto-advance="true" :allow-multiple-treatments="true" />
+```
+
+## Steps
+
+| Index | Label | Behaviour |
+|-------|-------|-----------|
+| 0 | Hair Type | Single select — straight, wavy, curly, coily |
+| 1 | Your Colour | Single select — 7 natural colour swatches |
+| 2 | Dream Colour | Single select — 8 desired colours (incl. "none") |
+| 3 | Style & Treatments | Single or multi-select (see `allowMultipleTreatments`) |
+| 4 | Results | Read-only — recommendation, treatment cards, summary, CTA |
+
+## Navigation rules
+
+- Completed steps (index < current) are clickable to go back.
+- Future steps are disabled via `aria-disabled` + `tabindex="-1"`.
+- Steps 0–2 require a selection before proceeding (`canProceed`).
+- Step 3 is always passable — treatments are optional.
+- `reset()` clears all state and returns to step 0.
+
+## Treatment selection logic
+
+- Selecting `"none"` clears all other treatments (and vice versa).
+- In multi-select mode, selecting a treatment automatically removes any conflicting ones (defined by each treatment's `excludes` array).
+- Conflicting treatments are visually marked with a `lucide:ban` icon and a "Conflicts with X" label.
+
+## Treatment–Colour compatibility
+
+Some treatments clash with same-day colour services: `keratin-smoothing`, `perm`, `relaxer`, `japanese-straightening`. These show a "Not same-day as colour" badge in the results view when a colour change was also selected.
+
+## Recommendation matrix
+
+`getColourRecommendation(naturalColour, desiredColour, hairType)` maps the combination to:
+
+```ts
+interface Recommendation {
+  suitability: "great" | "possible" | "difficult" | "not-recommended";
+  method: string;      // e.g. "Semi-Permanent", "Bleach Required"
+  notes: string;       // one-line summary
+  details: string[];   // bullet points
+}
+```
+
+Curly or coily hair type appends an extra conditioning note to `details`. Unmapped combinations fall back to `suitability: "possible"` with a consultation prompt.
+
+## Image assets
+
+Swatch JPEGs live at `public/images/treatment-consultant/`:
+- `swatch-{light-blonde,dark-blonde,light-brown,dark-brown,red,black,grey-white}.jpeg` (natural colours)
+- `swatch-dream-{blonde,brown,red,black,grey-silver,vivid,balayage}.jpeg` (desired colours)
+
+All `NuxtImg` usages include explicit `width` and `height` (128×128 in options, 96×96 in results summary).
+
+## Styling
+
+Amber-toned dark theme. Tokens scoped to `.treatment-consultant`:
+
+```css
+.treatment-consultant {
+  --_canvas-color: var(--amber-09);
+  --_canvas-text: var(--amber-02);
+  --_surface-active: var(--amber-10);
+  --_surface-checked: var(--green-09);
+  --_surface-excluded: color-mix(in srgb, var(--red-07) 10%, transparent);
+  /* … */
+}
+```
+
+Fonts: Inter (body), Playfair Display (accent).
+Step transitions: `<Transition name="slide" mode="out-in">`.
+Results cards use `v-motion` with staggered enter animations.
+
+## Local style override scaffold
+
+```vue
+<TreatmentConsultant :style-class-passthrough="['my-consultant']" />
+
+<style>
+/* ─── TreatmentConsultant local overrides ──────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.treatment-consultant {
+  &.my-consultant {
+    /* Canvas background */
+    /* --_canvas-color: var(--brand-surface); */
+
+    /* Option selected state */
+    /* --_surface-checked: var(--brand-accent); */
+    /* --_border-checked: var(--brand-accent-border); */
+  }
+}
+</style>
+```
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+## CTA (results step)
+
+- "Book Consultation" links to `/#contact` (hardcoded anchor).
+- "Start Again" calls `reset()`.
+
+## Notes
+
+- Component is auto-imported in Nuxt — no import needed.
+- No slots — entirely self-contained UI and data.
+- `styleClassPassthrough` is accepted but not currently wired to `useStyleClassPassthrough` inside the component.
+- Storybook story at `Organisms/TreatmentConsultant` — controls for both props.

package/.claude/skills/icon-sets.md

@@ -0,0 +1,45 @@
+# Icon Sets
+
+## Overview
+
+`@nuxt/icon` can serve icons from two sources:
+
+1. **Local package** (`@iconify-json/*` installed in the project) — SVG is inlined at build/SSR time, zero runtime cost, no flash.
+2. **Iconify CDN** (`api.iconify.design`) — icon is fetched client-side after JS loads, causing a visible flash of content (FOUC) on first page load.
+
+The layer uses several icon sets across its components. Because these are in the layer's `devDependencies` (not `dependencies`), they are **not automatically installed** in consumer apps. Any missing set falls back to the CDN and will flash.
+
+## How the layer signals missing sets
+
+The layer's `modules/icon-sets.ts` runs at dev/build time and logs an info message listing any icon sets that are used by layer components but not found in the consumer's project. Check the terminal output when running `nuxt dev` or `nuxt build`.
+
+## Component → icon set mapping
+
+| Icon set | Package | Used by |
+|----------|---------|---------|
+| `akar-icons` | `@iconify-json/akar-icons` | DisplayToast, display-prompt variants |
+| `bi` | `@iconify-json/bi` | NavigationItems (overflow caret) |
+| `bitcoin-icons` | `@iconify-json/bitcoin-icons` | Display components |
+| `gravity-ui` | `@iconify-json/gravity-ui` | NavigationItems (burger/ellipsis overflow) |
+| `ic` | `@iconify-json/ic` | CarouselBasic, CarouselFlip, CarouselInfinite, SliderGallery, CanvasSwitcher |
+| `lucide` | `@iconify-json/lucide` | ColourFinder, TreatmentConsultant |
+| `material-symbols` | `@iconify-json/material-symbols` | ServicesSection, form components |
+| `mdi` | `@iconify-json/mdi` | NavigationHorizontal, form components, ServicesCard |
+| `radix-icons` | `@iconify-json/radix-icons` | InputPasswordWithLabel, InputError, DisplayThemeSwitch |
+
+## Fix: install missing packages
+
+```bash
+npm install @iconify-json/akar-icons @iconify-json/bi @iconify-json/bitcoin-icons \
+  @iconify-json/gravity-ui @iconify-json/ic @iconify-json/lucide \
+  @iconify-json/material-symbols @iconify-json/mdi @iconify-json/radix-icons
+```
+
+Only install the sets you actually need — unused ones cost nothing either way, but the install above covers everything the layer ships.
+
+## Notes
+
+- The layer's build-time info message only lists sets missing from the **consumer's own project**. It is not a hard error.
+- A consumer app can install any additional icon sets it needs for its own components — these won't conflict.
+- If you're not using a particular layer component (e.g. `ColourFinder`), missing `@iconify-json/lucide` won't cause any visible problem.
+- The `peerDependencies` + `peerDependenciesMeta (optional: true)` in the layer's `package.json` is the npm-standard signal — package managers like npm 7+ will show a notice for missing optional peers during install.

package/.claude/skills/index.md

@@ -19,6 +19,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ```text
 .claude/skills/
 ├── index.md                    — this file
+├── performance-review.md       — spawn a subagent to inspect recently written code for Vue/Nuxt performance issues before dev handoff
 ├── storybook-add-story.md      — create a Storybook story for a component
 ├── storybook-add-font.md       — add a new font to Storybook
 ├── testing-add-unit-test.md    — create a Vitest unit test with snapshots
@@ -31,6 +32,9 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── css-grid-max-width-gutters.md             — cap a centre grid column width by growing gutters, with start/center alignment variants
 ├── component-aria-landmark.md        — useAriaLabelledById composable: aria-labelledby for section/main/article/aside tags
 ├── component-export-types.md         — move inline component types to app/types/components/ barrel for consumer imports
+├── component-inline-action-button.md — InputButtonCore variant="inline" pattern for buttons embedded in custom input wrappers
+├── icon-sets.md                      — icon set packages required by layer components, FOUC prevention, component→package map
+├── robots-env-aware.md               — @nuxtjs/robots: allow crawling on prod domain only, block on preview/staging via env var
 └── components/
     ├── accordian-core.md       — AccordianCore indexed dynamic slots (accordian-{n}-summary/icon/content), exclusive-open grouping
     ├── eyebrow-text.md         — EyebrowText props, usage patterns, styling
@@ -44,7 +48,9 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
     ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, slots (summary/icon/content), ARIA wiring
-    └── navigation-horizontal.md — NavigationHorizontal props, NavItemData type, CSS token API, import path gotcha
+    ├── navigation-horizontal.md — NavigationHorizontal props, NavItemData type, CSS token API, import path gotcha
+    ├── input-copy-core.md      — InputCopyCore: readonly copy-to-clipboard input; props, emits, slots, CSS classes, usage
+    └── treatment-consultant.md — TreatmentConsultant 5-step wizard: props, step flow, treatment exclusion logic, recommendation matrix, image paths
 ```
 
 ## Skill file template

package/.claude/skills/performance-review.md

@@ -0,0 +1,105 @@
+# Performance Review
+
+## Overview
+
+Spawn a subagent to inspect recently written or modified code for performance issues and report findings back before handoff to dev. Run this after code is written and ready for review.
+
+## When to invoke
+
+Invoke this skill (`/performance-review`) after completing any of:
+- A new component
+- A significant edit to an existing component
+- A new composable
+- A test file that exercises heavy setup
+
+## Steps
+
+### 1. Identify files to review
+
+Collect the list of files changed in this conversation. If unclear, run `git diff --name-only HEAD` to get recently modified files.
+
+### 2. Spawn the performance review subagent
+
+Use the Agent tool with `subagent_type: "general-purpose"` and the following prompt, substituting `{FILE_LIST}` with the actual file paths:
+
+---
+
+**Subagent prompt template:**
+
+```
+You are a Vue 3 / Nuxt performance reviewer. Inspect the following files for performance issues and produce a concise report.
+
+Files to review:
+{FILE_LIST}
+
+Read each file in full, then check for the following issues. Report only issues that are actually present — do not flag hypothetical problems.
+
+─── Vue / Nuxt Reactivity ───────────────────────────────────────
+□ Expensive operations inside computed properties (should be pure/cheap)
+□ `watch` with no `{ immediate }` where it could cause double-execution on mount
+□ Large objects stored in `ref()` where `shallowRef()` would suffice
+□ Reactive state that is never mutated (should be a plain const)
+□ Missing `watchEffect` cleanup / `onUnmounted` teardown for subscriptions or timers
+
+─── Template Rendering ──────────────────────────────────────────
+□ `v-for` without a stable `:key` (or using array index as key on mutable lists)
+□ Heavy inline expressions in templates (should be computed properties)
+□ `v-if` + `v-for` on the same element (use a wrapping element or computed filter)
+□ Components mounted unconditionally that could be `v-if`-deferred until needed
+□ Missing `v-once` on truly static subtrees
+□ Transitions on elements that trigger layout (width/height) rather than transform/opacity
+
+─── CSS / Styling ───────────────────────────────────────────────
+□ CSS custom properties defined but never consumed (dead tokens)
+□ Expensive selectors: deep descendant chains, universal selectors inside scoped blocks
+□ `transition: all` (transitions every property — prefer explicit property list)
+□ Animations that animate layout properties (top/left/width/height) instead of transform
+□ `v-bind()` in CSS used for values that never change (should be a static custom property)
+
+─── Images / Assets ─────────────────────────────────────────────
+□ `NuxtImg` without explicit `width` and `height` (causes layout shift + Vercel width fallback)
+□ Images without `loading="lazy"` where above-the-fold loading is not required
+□ Large inline SVGs that could be icon components
+
+─── Bundle / Imports ────────────────────────────────────────────
+□ Manual imports of Vue internals (`ref`, `computed`, etc.) — these are auto-imported in Nuxt
+□ Entire libraries imported where only specific named exports are needed
+□ Unused imports left in the file
+
+─── Data & Logic ────────────────────────────────────────────────
+□ Large static data arrays defined inside `<script setup>` (re-created on every HMR — move outside the component or to a separate module)
+□ Nested loops or O(n²) logic in computed properties or render functions
+□ Repeated `.find()` / `.filter()` calls on the same array within a single render — consolidate into one computed
+□ `setTimeout` / `setInterval` not cleared in `onUnmounted`
+
+─── Report format ───────────────────────────────────────────────
+For each issue found, output:
+
+**File:** `path/to/file.vue` (line N)
+**Issue:** One-sentence description of the problem
+**Impact:** Low / Medium / High
+**Fix:** Concrete code change or approach to resolve it
+
+Group findings by file. If no issues are found in a file, skip it.
+End the report with a one-line summary: total issues found, breakdown by impact level.
+```
+
+---
+
+### 3. Review the report
+
+Read the subagent's findings. For each **High** or **Medium** impact issue:
+- Apply the fix immediately if it is straightforward and does not change behaviour
+- Flag it to the user with the suggested fix if it requires a design decision
+
+For **Low** impact issues, present them as a list for the user to decide on.
+
+### 4. Confirm completion
+
+After applying any fixes, re-run the subagent on the modified files to confirm no new issues were introduced.
+
+## Notes
+
+- This skill is read-only when used via the subagent — it does not edit files directly. Edits are made by the main agent after reviewing the report.
+- Focus on issues that are actually present in the code — do not pre-emptively flag patterns that might become a problem.
+- The subagent uses `subagent_type: "general-purpose"` so it has access to all tools (Read, Grep, Glob) needed to inspect the files.

package/.claude/skills/robots-env-aware.md

@@ -0,0 +1,69 @@
+# Environment-Aware robots.txt and Meta Robots
+
+## Overview
+
+SSR apps often run on multiple domains — a preview/staging URL (e.g. Vercel's auto-generated domain) and the real production domain. This skill sets up `@nuxtjs/robots` so that crawling is allowed only on the production host, and blocked everywhere else — covering both `robots.txt` and `<meta name="robots">` injection.
+
+## Prerequisites
+
+- SSR deployment (e.g. Vercel)
+- `@nuxtjs/robots` installed: `npm install @nuxtjs/robots`
+
+## Steps
+
+### 1. Derive `isProduction` at the top of `nuxt.config.ts`
+
+Before `defineNuxtConfig`, read the canonical host from an env var and compare it to the known production domain:
+
+```ts
+const PROD_HOST = "yourdomain.com"
+const canonicalHost = process.env.NUXT_PUBLIC_CANONICAL_HOST ?? "your-preview.vercel.app"
+const isProduction = canonicalHost === PROD_HOST
+```
+
+Using `??` means local dev and Vercel preview deployments default to the non-production host, so no special local config is needed.
+
+### 2. Wire `canonicalHost` into `runtimeConfig` and add the robots module
+
+```ts
+export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      canonicalHost,   // shorthand — value comes from the const above
+    },
+  },
+  modules: ["@nuxtjs/robots"],
+  robots: {
+    enabled: isProduction,
+    groups: [
+      {
+        userAgent: ["*"],
+        allow: ["/"],
+      },
+    ],
+    sitemap: [`https://${PROD_HOST}/sitemap.xml`],
+  },
+})
+```
+
+When `enabled: false` the module:
+- Serves `robots.txt` with `Disallow: /` for all user agents
+- Injects `<meta name="robots" content="noindex, nofollow">` on every page
+
+When `enabled: true` it serves the `groups` config and no blocking meta tag.
+
+### 3. Set the env var in Vercel
+
+In the Vercel dashboard → Project → Settings → Environment Variables:
+
+| Name | Value | Environment |
+|---|---|---|
+| `NUXT_PUBLIC_CANONICAL_HOST` | `yourdomain.com` | **Production** only |
+
+Leave it unset for Preview and Development — the `??` fallback in step 1 handles those.
+
+## Notes
+
+- The `sitemap` URL always points to the production host (hardcoded via `PROD_HOST`) so it is never wrong regardless of which environment serves the file
+- `NUXT_PUBLIC_CANONICAL_HOST` follows Nuxt's standard automatic env var mapping for `runtimeConfig.public.canonicalHost`
+- No `sitemap.xml` is required immediately — remove the `sitemap` line until one is generated

package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_error.css

@@ -14,7 +14,7 @@
   --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-10));
   --theme-input-surface-focus: light-dark(var(--slate-01), var(--slate-10));
 
-  --theme-input-border: var(--red-10);
+  --theme-input-border: var(--red-06);
   --theme-input-border-hover: light-dark(var(--slate-10), var(--slate-05));
   --theme-input-border-focus: light-dark(var(--slate-10), var(--slate-05));
 

package/app/assets/styles/setup/02.colours/_amber.css

@@ -7,6 +7,6 @@
   --amber-06: oklch(0.501 0.166 75);
   --amber-07: oklch(0.433 0.144 75);
   --amber-08: oklch(0.383 0.123 75);
-  --amber-09: oklch(0.338 0.1 75);
-  --amber-10: oklch(0.288 0.072 75);
+  --amber-09: oklch(0.238 0.1 75);
+  --amber-10: oklch(0.188 0.072 75);
 }

package/app/assets/styles/setup/03.theming/default/_dark.css

@@ -32,6 +32,16 @@
   --glass-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
   --glass-panel-highlight: rgba(255, 255, 255, 0.04);
 
+  /* ===========================================
+     HERO TEXT VARIABLES
+     =========================================== */
+  --hero-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
+
+  /* ===========================================
+     EYEBROW TEXT VARIABLES
+     =========================================== */
+  --eyebrow-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
+
   /* ===========================================
      STEPPER LIST VARIABLES
      =========================================== */
@@ -66,8 +76,16 @@
   /* ===========================================
      TREATMENT CONSULTANT VARIABLES
      =========================================== */
-  --treatment-consultant-primary-colour: var(--blue-03);
-  --treatment-consultant-border-colour: var(--blue-03);
+  --treatment-consultant-primary-colour: var(--amber-02);
+  --treatment-consultant-primary-foreground: var(--amber-02);
+
+  --treatment-consultant-muted-colour: var(--amber-05);
+  --treatment-consultant-muted-foreground: var(--amber-05);
+
+  --treatment-consultant-background: var(--amber-10);
+  --treatment-consultant-foreground: var(--amber-02);
+
+  --treatment-consultant-border-colour: var(--amber-03);
 
   --treatment-consultant-checked-surface-colour: var(--green-10);
   --treatment-consultant-checked-stroke-colour: var(--green-03);

package/app/assets/styles/setup/03.theming/default/_light.css

@@ -30,6 +30,16 @@
   --glass-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
   --glass-panel-highlight: rgba(255, 255, 255, 0.9);
 
+  /* ===========================================
+     HERO TEXT VARIABLES
+     =========================================== */
+  --hero-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
+
+  /* ===========================================
+     EYEBROW TEXT VARIABLES
+     =========================================== */
+  --eyebrow-text-bg-img: linear-gradient(135deg, #c2a770, #b4747e, #d1bd94);
+
   /* ===========================================
      STEPPER LIST VARIABLES
      =========================================== */
@@ -64,7 +74,7 @@
   /* ===========================================
      TREATMENT CONSULTANT VARIABLES
      =========================================== */
-  --treatment-consultant-primary-colour: var(--blue-03);
+  --treatment-consultant-primary-colour: var(--amber-05);
   --treatment-consultant-border-colour: var(--blue-02);
 
   --treatment-consultant-checked-surface-colour: var(--green-03);

package/app/assets/styles/setup/03.theming/error/_dark.css

@@ -26,7 +26,7 @@
      FORM INPUT VARIABLES
      Styling for form inputs and controls
      =========================================== */
-  --theme-input-border: var(--red-05);
+  --theme-input-border: var(--red-06);
   --theme-input-border-focus: var(--red-04);
 
   /* Input outlines and focus */

package/app/components/01.atoms/text-blocks/eyebrow-text/EyebrowText.vue

@@ -22,21 +22,24 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 <style lang="css">
 @layer components {
-.eyebrow-text {
-  text-transform: uppercase;
-  color: var(--colour-text-eyebrow);
+  .eyebrow-text {
+    text-transform: uppercase;
+    background-clip: text;
+    background-image: var(--eyebrow-text-bg-img);
+    font-style: italic;
+    color: transparent;
 
-  &.large {
-    font-size: var(--eyebrow-text-large);
-  }
+    &.large {
+      font-size: var(--eyebrow-text-large);
+    }
 
-  &.medium {
-    font-size: var(--eyebrow-text-medium);
-  }
+    &.medium {
+      font-size: var(--eyebrow-text-medium);
+    }
 
-  &.small {
-    font-size: var(--eyebrow-text-small);
+    &.small {
+      font-size: var(--eyebrow-text-small);
+    }
   }
 }
-}
 </style>