srcdev-nuxt-components 9.1.1 → 9.1.2

package/.claude/skills/components/services-card-grid.md

@@ -0,0 +1,110 @@
+# ServicesCardGrid Component
+
+## Overview
+
+`ServicesCardGrid` renders a responsive auto-fit CSS grid of `ServicesCard` components from a `Service[]` array. It owns the grid layout; card-level presentation (eyebrow/hero typography) and slot content are configured via pass-through props and a scoped `#actions` slot.
+
+## Props
+
+| Prop                    | Type                              | Default  | Required |
+| ----------------------- | --------------------------------- | -------- | -------- |
+| `servicesData`          | `Service[]`                       | —        | **yes**  |
+| `tag`                   | `"div" \| "section" \| "main"`    | `"div"`  | no       |
+| `eyebrowConfig`         | `EyebrowConfig`                   | `{}`     | no       |
+| `heroConfig`            | `HeroConfig`                      | `{}`     | no       |
+| `styleClassPassthrough` | `string \| string[]`              | `[]`     | no       |
+
+Both config props are passed through to every `ServicesCard` in the grid unchanged. See [services-card.md](./services-card.md) for the full `EyebrowConfig` / `HeroConfig` key reference.
+
+## Slots
+
+| Slot      | Slot props                 | Purpose                                          |
+| --------- | -------------------------- | ------------------------------------------------ |
+| `actions` | `{ serviceData: Service }` | CTA rendered inside each card below description  |
+
+## CSS custom properties
+
+Set on `.services-card-grid` (or scoped to a page class):
+
+| Token                  | Default   | Controls                              |
+| ---------------------- | --------- | ------------------------------------- |
+| `--_gap`               | `4rem`    | Gap between grid cells                |
+| `--_column-min-width`  | `250px`   | Minimum column width before wrapping  |
+
+## Consumer page boilerplate
+
+```vue
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Services</h1>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <ServicesCardGrid
+            :services-data="servicesData ?? []"
+            :eyebrow-config="{ fontSize: 'large' }"
+            :hero-config="{ tag: 'h2', fontSize: 'heading' }"
+          >
+            <template #actions="{ serviceData }">
+              <InputButtonCore
+                variant="secondary"
+                :button-text="`Enquire about ${serviceData.title}`"
+                :href="`/services/${serviceData.slug}`"
+                :style-class-passthrough="['mbs-24']"
+              >
+                <template #right>
+                  <Icon name="mdi:arrow-right" class="icon" />
+                </template>
+              </InputButtonCore>
+            </template>
+          </ServicesCardGrid>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: false });
+
+useHead({
+  title: "Services",
+  meta: [{ name: "description", content: "Our services" }],
+  bodyAttrs: { class: "page-services" },
+});
+
+const store = useServicesStore();
+const { servicesData } = storeToRefs(store);
+
+if (servicesData.value.length === 0) {
+  await store.fetchServicesData();
+}
+</script>
+
+<style lang="css">
+.page-services {
+  /* Page-level CSS token overrides — delete any you don't need */
+  .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>
+```
+
+## Notes
+
+- Component is auto-imported in Nuxt — no import needed.
+- The `Service` type is imported from `~/types/types.services`.
+- Uses `repeat(auto-fit, minmax(var(--_column-min-width), 1fr))` — columns grow to fill available space and wrap when below the minimum width.
+- The `#actions` slot template is passed down into each `ServicesCard`; `serviceData` is the scoped prop for the current iteration item.
+- Data fetching is the page's responsibility — pass an empty array as fallback while loading (`servicesData ?? []`).

package/.claude/skills/components/services-card.md

@@ -10,8 +10,26 @@
 | ----------------------- | --------------------------------- | ------- | -------- |
 | `serviceData`           | `Service`                         | —       | **yes**  |
 | `tag`                   | `"div" \| "section" \| "article"` | `"div"` | no       |
+| `eyebrowConfig`         | `EyebrowConfig`                   | `{}`    | no       |
+| `heroConfig`            | `HeroConfig`                      | `{}`    | no       |
 | `styleClassPassthrough` | `string \| string[]`              | `[]`    | no       |
 
+### EyebrowConfig
+
+| Key        | Type                              | Default    |
+| ---------- | --------------------------------- | ---------- |
+| `tag`      | `"p" \| "div" \| "span"`         | `"div"`    |
+| `fontSize` | `"large" \| "medium" \| "small"` | `"large"`  |
+
+### HeroConfig
+
+| Key        | Type                                                           | Default     |
+| ---------- | -------------------------------------------------------------- | ----------- |
+| `tag`      | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`              | `"h2"`      |
+| `fontSize` | `"display" \| "title" \| "heading" \| "subheading" \| "label"` | `"heading"` |
+
+Config objects are partial — only specify the keys you want to override. Unset keys fall back to the defaults shown above.
+
 ## Slots
 
 | Slot      | Slot props                 | Purpose                                                                |
@@ -20,6 +38,16 @@
 
 The `actions` slot receives `serviceData` as a scoped prop so the consumer can construct routes or labels from the service data without additional props.
 
+## CSS custom properties
+
+Set on `.services-card` (or scoped to a page class):
+
+| Token                          | Default                       | Controls                        |
+| ------------------------------ | ----------------------------- | ------------------------------- |
+| `--_eyebrow-text-margin-block` | `0.8rem 0`                    | Space above/below the eyebrow   |
+| `--_hero-text-margin-block`    | `2rem 1rem`                   | Space above/below the title     |
+| `--_description-text-colour`   | `var(--colour-text-secondary)` | Description paragraph colour    |
+
 ## Basic usage
 
 ```vue
@@ -38,44 +66,50 @@ The `actions` slot receives `serviceData` as a scoped prop so the consumer can c
 </ServicesCard>
 ```
 
-## Multiple actions
+## With config overrides
 
 ```vue
-<ServicesCard :service-data="service">
+<ServicesCard
+  :service-data="service"
+  :eyebrow-config="{ fontSize: 'small' }"
+  :hero-config="{ tag: 'h3', fontSize: 'title' }"
+>
   <template #actions="{ serviceData }">
-    <InputButtonCore
-      variant="secondary"
-      :button-text="`More about ${serviceData.title}`"
-      :href="`/services/${serviceData.slug}`"
-    />
-    <NuxtLink :to="`/services/${serviceData.slug}/contact`">Get in touch</NuxtLink>
+    <InputButtonCore variant="secondary" :button-text="`Enquire`" :href="`/services/${serviceData.slug}`" />
   </template>
 </ServicesCard>
 ```
 
-## Local style override scaffold
-
-When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
-
-See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+## Consumer page boilerplate
 
 ```vue
-<ServicesCard :style-class-passthrough="['my-card']" :service-data="service">
-  ...
-</ServicesCard>
-
-<style>
-/* ─── ServicesCard local overrides ─────────────────────────────────
-   Colours, borders, geometry only — do not override behaviour.
-   Delete this block if no overrides are needed.
-   ─────────────────────────────────────────────────────────────────── */
-.services-card {
-  &.my-card {
-    /* Geometry — image */
-    /* .image-wrapper { border-radius: 1.2rem; } */
-
-    /* Colours */
-    /* .description { color: var(--brand-text-secondary); } */
+<template>
+  <ServicesCard
+    :service-data="service"
+    :eyebrow-config="{ fontSize: 'large' }"
+    :hero-config="{ tag: 'h2', fontSize: 'heading' }"
+  >
+    <template #actions="{ serviceData }">
+      <InputButtonCore
+        variant="secondary"
+        :button-text="`Enquire about ${serviceData.title}`"
+        :href="`/services/${serviceData.slug}`"
+        :style-class-passthrough="['mbs-24']"
+      >
+        <template #right>
+          <Icon name="mdi:arrow-right" class="icon" />
+        </template>
+      </InputButtonCore>
+    </template>
+  </ServicesCard>
+</template>
+
+<style lang="css">
+.page-my-page {
+  .services-card {
+    --_eyebrow-text-margin-block: 0.8rem 0;
+    --_hero-text-margin-block: 2rem 1rem;
+    --_description-text-colour: var(--colour-text-secondary);
   }
 }
 </style>
@@ -85,5 +119,6 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
 - Component is auto-imported in Nuxt — no import needed.
 - The `Service` type is imported from `~/types/types.services`.
-- Grid rows are sized `auto 2ch auto 5lh auto` — the last row (`auto`) accommodates the `actions` slot at any height.
+- Grid rows are sized `auto auto auto 5lh auto` — the `5lh` row locks description height so actions align across cards.
 - Image has a `3/4` aspect ratio with a subtle scale-on-hover effect.
+- Usually consumed via `ServicesCardGrid` rather than directly.

package/.claude/skills/index.md

@@ -43,7 +43,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── layout-row.md           — LayoutRow variant guide, width/margin decisions, usage patterns
     ├── link-text.md            — LinkText props, slots, usage patterns, styling
     ├── page-hero-highlights.md — PageHeroHighlights template: hero + highlights strip grid, CSS custom property theming
-    ├── services-card.md        — ServicesCard props, actions slot, usage patterns
+    ├── services-card.md        — ServicesCard props (incl. eyebrowConfig/heroConfig), actions slot, CSS tokens, page boilerplate
+    ├── services-card-grid.md   — ServicesCardGrid props, config pass-through, CSS tokens, full page boilerplate
     ├── services-section.md     — ServicesSection props, summary-link/cta slots, summary vs full mode
     ├── 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

package/app/components/03.organisms/services/services-card/ServicesCard.vue

@@ -3,10 +3,10 @@
     <div class="image-wrapper">
       <NuxtImg :src="serviceData.image" :alt="serviceData.title" loading="lazy" class="image" />
     </div>
-    <EyebrowText :text-content="serviceData.subtitle" />
+    <EyebrowText :font-size="eyebrowConfig.fontSize ?? 'large'" :tag="eyebrowConfig.tag ?? 'div'" :text-content="serviceData.subtitle" />
     <HeroText
-      tag="h2"
-      font-size="heading"
+      :tag="heroConfig.tag ?? 'h2'"
+      :font-size="heroConfig.fontSize ?? 'heading'"
       :text-content="[
         {
           text: serviceData.title,
@@ -24,20 +24,31 @@
 <script setup lang="ts">
 import type { Service } from "~/types/types.services";
 
+interface EyebrowConfig {
+  tag?: "p" | "div" | "span";
+  fontSize?: "large" | "medium" | "small";
+}
+
+interface HeroConfig {
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  fontSize?: "display" | "title" | "heading" | "subheading" | "label";
+}
+
 interface Props {
   tag?: "div" | "section" | "article";
   serviceData: Service;
+  eyebrowConfig?: EyebrowConfig;
+  heroConfig?: HeroConfig;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   tag: "div",
+  eyebrowConfig: () => ({}),
+  heroConfig: () => ({}),
   styleClassPassthrough: () => [],
 });
 
-// const slots = useSlots();
-// const hasDefaultSlot = computed(() => Boolean(slots.default));
-
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -51,8 +62,13 @@ watch(
 <style lang="css">
 @layer components {
   .services-card {
+    /* Consumer definable css tokens */
+    --_eyebrow-text-margin-block: 0.8rem 0;
+    --_hero-text-margin-block: 2rem 1rem;
+    --_description-text-colour: var(--colour-text-secondary);
+
     display: grid;
-    grid-template-rows: auto 2ch auto 5lh auto;
+    grid-template-rows: auto auto auto 5lh auto;
     gap: 1rem;
 
     .image-wrapper {
@@ -74,15 +90,15 @@ watch(
     }
 
     .eyebrow-text {
-      margin-block: 0.8rem;
+      margin-block: var(--_eyebrow-text-margin-block);
     }
 
     .hero-text {
-      margin-block: 2rem 1rem;
+      margin-block: var(--_hero-text-margin-block);
     }
 
     .description {
-      color: var(--colour-text-secondary);
+      color: var(--_description-text-colour);
 
       /* display: -webkit-box;
     -webkit-box-orient: vertical;

package/app/components/03.organisms/services/services-grids/ServicesCardGrid.vue

@@ -1,6 +1,12 @@
 <template>
   <component :is="tag" class="services-card-grid" :class="[elementClasses]">
-    <ServicesCard v-for="(item, index) in servicesData" :key="index" :service-data="item">
+    <ServicesCard
+      v-for="(item, index) in servicesData"
+      :key="index"
+      :service-data="item"
+      :eyebrow-config="eyebrowConfig"
+      :hero-config="heroConfig"
+    >
       <template #actions="{ serviceData }">
         <InputButtonCore
           variant="secondary"
@@ -20,14 +26,28 @@
 <script setup lang="ts">
 import type { Service } from "~/types/types.services";
 
+interface EyebrowConfig {
+  tag?: "p" | "div" | "span";
+  fontSize?: "large" | "medium" | "small";
+}
+
+interface HeroConfig {
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  fontSize?: "display" | "title" | "heading" | "subheading" | "label";
+}
+
 interface Props {
   tag?: "div" | "section" | "main";
   servicesData: Service[];
+  eyebrowConfig?: EyebrowConfig;
+  heroConfig?: HeroConfig;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   tag: "div",
+  eyebrowConfig: () => ({}),
+  heroConfig: () => ({}),
   styleClassPassthrough: () => [],
 });
 
@@ -44,9 +64,13 @@ watch(
 <style lang="css">
 @layer components {
   .services-card-grid {
+    /* Consumer definable css tokens */
+    --_gap: 4rem;
+    --_column-min-width: 250px;
+
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 4rem;
+    grid-template-columns: repeat(auto-fit, minmax(var(--_column-min-width), 1fr));
+    gap: var(--_gap);
   }
 }
 </style>

package/app/layouts/default.vue

@@ -97,6 +97,7 @@ const responsiveNavLinks = {
       childLinks: [
         { name: "Block Decorators", path: "/ui/block-decorators" },
         { name: "Navigation Horizontal", path: "/ui/navigation/navigation-horizontal" },
+        { name: "Site Navigation", path: "/ui/navigation/site-navigation" },
         { name: "Magnetic Navigation", path: "/ui/magnetic-navigation" },
         { name: "Layout Row", path: "/ui/layout-row" },
         { name: "Layout Grid A", path: "/ui/layout-grid-a" },

package/app/layouts/site-navigation-demo.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="site-nav-demo-layout">
+    <header class="site-nav-demo-header">
+      <NuxtLink to="/ui/navigation/site-navigation" class="site-nav-demo-logo">SiteNav Demo</NuxtLink>
+      <SiteNavigation :nav-item-data="navItemData" nav-align="right" />
+    </header>
+    <main class="site-nav-demo-main">
+      <slot></slot>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NavItemData } from "~/types/components/navigation-horizontal.d";
+
+const navItemData: NavItemData = {
+  main: [
+    { text: "Home", href: "/ui/navigation/site-navigation" },
+    { text: "About", href: "/ui/navigation/site-navigation/about" },
+    { text: "Services", href: "/ui/navigation/site-navigation/services" },
+    { text: "Portfolio", href: "/ui/navigation/site-navigation/portfolio" },
+    { text: "Contact", href: "/ui/navigation/site-navigation/contact" },
+  ],
+};
+</script>
+
+<style lang="css">
+.site-nav-demo-layout {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+
+  .site-nav-demo-header {
+    display: flex;
+    align-items: center;
+    gap: 2.4rem;
+    padding-block: 1.2rem;
+    padding-inline: 2.4rem;
+    background-color: #0e0e0e;
+    border-block-end: 1px solid oklch(100% 0 0 / 10%);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
+  .site-nav-demo-logo {
+    font-size: 1.6rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    color: var(--warm-01, #fff);
+    text-decoration: none;
+    text-wrap: nowrap;
+    flex-shrink: 0;
+  }
+
+  .site-navigation {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .site-nav-demo-main {
+    flex: 1;
+    padding: 4rem 2.4rem;
+    max-width: 80rem;
+    margin-inline: auto;
+    width: 100%;
+  }
+}
+</style>

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.1",
+  "version": "9.1.2",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",