srcdev-nuxt-components 9.1.0 → 9.1.2

package/app/pages/page-hero-highlights.vue

@@ -3,18 +3,26 @@
     <NuxtLayout name="default">
       <template #layout-content>
         <PageHeroHighlights
+          tag="section"
           max-width="1064px"
           content-align="start"
+          :content-panel="true"
           :highlights-equal-widths="false"
           highlights-justify="start"
           :highlight-title-baseline="true"
           :style-class-passthrough="['mbe-32']"
         >
-          <template #header>
-            <div class="some-header-content">
-              <p class="page-heading-1">Dashboard</p>
-              <p class="page-body-normal">Overview of your account activity and key metrics.</p>
-            </div>
+          <template #header="{ headingId }">
+            <PageHeroHighlightsHeader>
+              <template #start>
+                <h1 :id="headingId" class="page-heading-1">Dashboard</h1>
+                <p class="page-body-normal">Overview of your account activity and key metrics.</p>
+              </template>
+              <template #end>
+                <h1 :id="headingId" class="page-heading-1">Dashboard</h1>
+                <p class="page-body-normal">Overview of your account activity and key metrics.</p>
+              </template>
+            </PageHeroHighlightsHeader>
           </template>
           <template #highlights>
             <div class="highlight">
@@ -59,12 +67,8 @@ useHead({
 <style lang="css">
 .page-hero-highlights-page {
   .page-hero-highlights {
-    .header-row {
-      .header-slot {
-        .some-header-content {
-          padding-block: 4rem 3rem;
-        }
-      }
+    .page-hero-highlights-header {
+      padding-block: 4rem 3rem;
     }
 
     .content-row {

package/app/pages/ui/navigation/site-navigation/about.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>About</h1>
+    <p>This is the About page. The active indicator in the navigation above should be sitting under "About".</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: "site-navigation-demo" });
+useHead({ title: "SiteNavigation Demo — About" });
+</script>

package/app/pages/ui/navigation/site-navigation/contact.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Contact</h1>
+    <p>This is the Contact page. The active indicator in the navigation above should be sitting under "Contact".</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: "site-navigation-demo" });
+useHead({ title: "SiteNavigation Demo — Contact" });
+</script>

package/app/pages/ui/navigation/site-navigation/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Home</h1>
+    <p>Welcome to the SiteNavigation component demo. Resize the window to see the burger menu collapse, and navigate between pages to see the active indicator update.</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: "site-navigation-demo" });
+useHead({ title: "SiteNavigation Demo — Home" });
+</script>

package/app/pages/ui/navigation/site-navigation/portfolio.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Portfolio</h1>
+    <p>This is the Portfolio page. The active indicator in the navigation above should be sitting under "Portfolio".</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: "site-navigation-demo" });
+useHead({ title: "SiteNavigation Demo — Portfolio" });
+</script>

package/app/pages/ui/navigation/site-navigation/services.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Services</h1>
+    <p>This is the Services page. The active indicator in the navigation above should be sitting under "Services".</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: "site-navigation-demo" });
+useHead({ title: "SiteNavigation Demo — Services" });
+</script>

package/app/pages/ui/services/services-cards.vue

@@ -8,7 +8,11 @@
         </LayoutRow>
 
         <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <ServicesCardGrid :services-data="servicesData ?? []" />
+          <ServicesCardGrid
+            :services-data="servicesData ?? []"
+            :eyebrow-config="{ fontSize: 'large' }"
+            :hero-config="{ tag: 'h2', fontSize: 'heading' }"
+          />
         </LayoutRow>
       </template>
     </NuxtLayout>
@@ -38,5 +42,16 @@ if (servicesData.value.length === 0) {
 
 <style lang="css">
 .page-services-card-grid {
+  /* Page specific styles here */
+  .services-card-grid {
+    --_gap: 4rem;
+    --_column-min-width: 250px;
+
+    .services-card {
+      --_eyebrow-text-margin-block: 0.8rem 0;
+      --_hero-text-margin-block: 2rem 1rem;
+      --_description-text-colour: var(--colour-text-secondary);
+    }
+  }
 }
 </style>

package/nuxt.config.ts

@@ -5,6 +5,8 @@ const { resolve } = createResolver(import.meta.url);
 const isStandalone = !!process.env.SRCDEV_STANDALONE;
 
 export default defineNuxtConfig({
+  // debug: !isProduction,
+  debug: false,
   devtools: { enabled: true },
 
   // Server-only secrets — Nuxt reads matching NUXT_* env vars automatically.
@@ -104,6 +106,11 @@ export default defineNuxtConfig({
     // (avoids /_vercel/image which has no source images in storybook-static/)
     provider: process.env.STORYBOOK ? "none" : undefined,
   },
+  vite: {
+    optimizeDeps: {
+      include: ["@oddbird/css-anchor-positioning"],
+    },
+  },
   vue: {
     runtimeCompiler: true,
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.0",
+  "version": "9.1.2",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -84,10 +84,10 @@
     "@iconify-json/akar-icons": "1.2.7",
     "@iconify-json/bi": "1.2.7",
     "@iconify-json/bitcoin-icons": "1.2.4",
-    "@iconify-json/gravity-ui": "1.2.11",
+    "@iconify-json/gravity-ui": "1.2.12",
     "@iconify-json/ic": "*",
     "@iconify-json/lucide": "*",
-    "@iconify-json/material-symbols": "1.2.53",
+    "@iconify-json/material-symbols": "1.2.64",
     "@iconify-json/mdi": "1.2.3",
     "@iconify-json/radix-icons": "*",
     "@nuxt/eslint": "1.13.0",
@@ -98,6 +98,7 @@
     "@storybook/addon-docs": "10.0.7",
     "@storybook/builder-vite": "10.0.7",
     "@vue/test-utils": "2.4.6",
+    "@vueuse/core": "14.2.1",
     "eslint": "9.39.2",
     "eslint-plugin-storybook": "10.0.7",
     "happy-dom": "20.5.0",
@@ -125,10 +126,9 @@
     "@nuxt/image": "2.0.0",
     "@oddbird/css-anchor-positioning": "0.9.0",
     "@pinia/nuxt": "0.11.3",
-    "@vueuse/core": "14.2.0",
-    "@vueuse/motion": "^3.0.3",
+    "@vueuse/motion": "3.0.3",
     "focus-trap-vue": "4.1.0",
-    "nuxt": "4.3.0",
+    "nuxt": "4.4.2",
     "pinia": "3.0.4",
     "pinia-plugin-persistedstate": "4.7.1",
     "zod": "4.3.6"

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

@@ -1,128 +0,0 @@
-# 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.