srcdev-nuxt-components 9.0.8 → 9.0.10

package/.claude/skills/storybook-add-story.md

@@ -156,6 +156,24 @@ Playwright `STORY_BASE` slug. The slug is derived by lowercasing and replacing s
 | Enum / union   | `{ type: "select" }` + `options` |
 | Array / object | `"object"`                       |
 
+## Scoped slots
+
+When a component exposes data via slot props (e.g. an internally-generated `headingId`),
+use the scoped slot destructuring syntax directly in the inline template string:
+
+```ts
+template: `
+  <ComponentName v-bind="args">
+    <template #heroText="{ headingId }">
+      <HeroText :id="headingId" tag="h2" ... />
+    </template>
+  </ComponentName>
+`,
+```
+
+This keeps the ID wiring self-contained inside the component — the parent story just
+consumes what the slot exposes, rather than generating its own ID.
+
 ## Notes
 
 - Use `table: { category: "..." }` in `argTypes` when a component has many props — it groups

package/.claude/skills/testing-add-unit-test.md

@@ -107,6 +107,19 @@ describe("ComponentName", () => {
       wrapper = await createWrapper({}, { default: "<span>Content</span>" });
       expect(wrapper.find("span").exists()).toBe(true);
     });
+
+    it("exposes scoped slot prop and it matches the rendered element", async () => {
+      // Import h from vue at the top of the file (not auto-imported in test files)
+      wrapper = await mountSuspended(ComponentName, {
+        props: { ...defaultProps },
+        slots: {
+          slotName: (props: Record<string, unknown>) =>
+            h("h2", { id: props.exposedId, class: "target" }, "Content"),
+        },
+      });
+      const attrValue = wrapper.find(".component-name").attributes("aria-labelledby");
+      expect(wrapper.find(".target").attributes("id")).toBe(attrValue);
+    });
   });
 
   // -------------------------
@@ -121,6 +134,31 @@ describe("ComponentName", () => {
 });
 ```
 
+## Scoped slots
+
+When a component exposes data via slot props (e.g. an internally-generated `headingId`),
+import `h` from `vue` explicitly — it is **not** auto-imported in test files — and use a
+render function as the slot value so VTU receives a real VNode:
+
+```ts
+import { h } from "vue";
+
+it("exposes headingId via scoped slot", async () => {
+  const wrapper = await mountSuspended(ProfileSection, {
+    props: { tag: "section", ...defaultProps },
+    slots: {
+      heroText: (props: Record<string, unknown>) =>
+        h("h2", { id: props.headingId, class: "hero-heading" }, "Heading"),
+    },
+  });
+  const labelledBy = wrapper.find(".profile-section").attributes("aria-labelledby");
+  expect(labelledBy).toBeTruthy();
+  expect(wrapper.find(".hero-heading").attributes("id")).toBe(labelledBy);
+});
+```
+
+> Returning a plain string from a slot function does **not** produce DOM — always use `h()`.
+
 ## Key rules
 
 - Always `mountSuspended` — never `mount` or `shallowMount` from `@vue/test-utils` directly.

package/app/assets/styles/setup/06.utility-classes/spacing/_fluid-spacing.css

@@ -1,13 +1,17 @@
 /* @link https://utopia.fyi/clamp/calculator?a=360,1240,1—2|2—4|4—8|6—12|8—16|10—20|12—24|16—32|20—40 */
 
 :where(html) {
-  --fluid-1-2: clamp(0.0625rem, 0.0369rem + 0.1136vw, 0.125rem);
-  --fluid-2-4: clamp(0.125rem, 0.0739rem + 0.2273vw, 0.25rem);
-  --fluid-4-8: clamp(0.25rem, 0.1477rem + 0.4545vw, 0.5rem);
-  --fluid-6-12: clamp(0.375rem, 0.2216rem + 0.6818vw, 0.75rem);
-  --fluid-8-16: clamp(0.5rem, 0.2955rem + 0.9091vw, 1rem);
-  --fluid-10-20: clamp(0.625rem, 0.3693rem + 1.1364vw, 1.25rem);
-  --fluid-12-24: clamp(0.75rem, 0.4432rem + 1.3636vw, 1.5rem);
-  --fluid-16-32: clamp(1rem, 0.5909rem + 1.8182vw, 2rem);
-  --fluid-20-40: clamp(1.25rem, 0.7386rem + 2.2727vw, 2.5rem);
+  --fluid-space-1-2: clamp(0.0625rem, 0.0369rem + 0.1136vw, 0.125rem);
+  --fluid-space-2-4: clamp(0.125rem, 0.0739rem + 0.2273vw, 0.25rem);
+  --fluid-space-4-8: clamp(0.25rem, 0.1477rem + 0.4545vw, 0.5rem);
+  --fluid-space-6-12: clamp(0.375rem, 0.2216rem + 0.6818vw, 0.75rem);
+  --fluid-space-8-16: clamp(0.5rem, 0.2955rem + 0.9091vw, 1rem);
+  --fluid-space-10-20: clamp(0.625rem, 0.3693rem + 1.1364vw, 1.25rem);
+  --fluid-space-12-24: clamp(0.75rem, 0.4432rem + 1.3636vw, 1.5rem);
+  --fluid-space-16-32: clamp(1rem, 0.5909rem + 1.8182vw, 2rem);
+  --fluid-space-20-40: clamp(1.25rem, 0.7386rem + 2.2727vw, 2.5rem);
+  --fluid-space-24-48: clamp(1.5rem, 0.8863rem + 2.7273vw, 3rem);
+  --fluid-space-32-64: clamp(2rem, 1.1818rem + 3.6364vw, 4rem);
+  --fluid-space-40-80: clamp(2.5rem, 1.4773rem + 4.5455vw, 5rem);
+  --fluid-space-48-96: clamp(3rem, 1.7727rem + 5.4545vw, 6rem);
 }

package/app/components/01.atoms/text-block/TextBlock.vue

@@ -0,0 +1,27 @@
+<template>
+  <component :is="tag" class="text-block" :class="[elementClasses]">
+    <slot name="default"></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  styleClassPassthrough?: string | string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+  .text-block {
+    padding-block-start: var(--fluid-space-48-96);
+    padding-block-end: var(--fluid-space-48-96);
+  }
+}
+</style>

package/app/components/01.atoms/text-blocks/link-text/tests/__snapshots__/LinkText.spec.ts.snap

@@ -0,0 +1,29 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LinkText > renders correct HTML structure with all props set 1`] = `
+"<a href="https://example.com" rel="noopener noreferrer" target="_blank" class="link-text custom-class">
+  <!--v-if--><span class="link-text__label">Visit Us</span>
+  <!--v-if-->
+</a>"
+`;
+
+exports[`LinkText > renders correct HTML structure with both slots 1`] = `"<a href="/about" class="link-text"><span class="link-text__icon link-text__icon--left"><svg data-testid="icon-left"></svg></span><span class="link-text__label">About Us</span><span class="link-text__icon link-text__icon--right"><svg data-testid="icon-right"></svg></span></a>"`;
+
+exports[`LinkText > renders correct HTML structure with default props 1`] = `
+"<a href="/about" class="link-text">
+  <!--v-if--><span class="link-text__label">About Us</span>
+  <!--v-if-->
+</a>"
+`;
+
+exports[`LinkText > renders correct HTML structure with left slot 1`] = `
+"<a href="/about" class="link-text"><span class="link-text__icon link-text__icon--left"><svg data-testid="icon-left"></svg></span><span class="link-text__label">About Us</span>
+  <!--v-if-->
+</a>"
+`;
+
+exports[`LinkText > renders correct HTML structure with right slot 1`] = `
+"<a href="/about" class="link-text">
+  <!--v-if--><span class="link-text__label">About Us</span><span class="link-text__icon link-text__icon--right"><svg data-testid="icon-right"></svg></span>
+</a>"
+`;

package/app/components/02.molecules/profile-section/ProfileSection.vue

@@ -6,19 +6,8 @@
     :aria-labelledby="needsLabel ? headingId : undefined"
   >
     <header class="profile-section-header">
-      <EyebrowText tag="p" text-content="About Natasha" :style-class-passthrough="['mb-0']" />
-      <HeroText
-        :id="headingId"
-        tag="h2"
-        axis="vertical"
-        font-size="display"
-        :text-content="[
-          { text: 'Your', styleClass: 'normal' },
-          { text: 'mobile hairdresser', styleClass: 'accent' },
-          { text: 'in Bath', styleClass: 'normal' },
-        ]"
-        :style-class-passthrough="['mb-20']"
-      />
+      <slot v-if="hasEyebrowTextSlot" name="eyebrowText"></slot>
+      <slot v-if="hasHeroTextSlot" name="heroText" :heading-id="headingId"></slot>
     </header>
 
     <div class="profile-section-inner">
@@ -66,6 +55,8 @@ const headingId = useId();
 const needsLabel = computed(() => props.tag === "section" || props.tag === "article");
 
 const slots = useSlots();
+const hasEyebrowTextSlot = computed(() => Boolean(slots.eyebrowText));
+const hasHeroTextSlot = computed(() => Boolean(slots.heroText));
 const hasProfileLinksSlot = computed(() => Boolean(slots.profileLinks));
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -80,75 +71,75 @@ watch(
 
 <style lang="css">
 @layer components {
-.profile-section {
-  /* .profile-section-header {
+  .profile-section {
+    /* .profile-section-header {
   } */
-  .profile-section-inner {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 2rem;
-
-    @media (min-width: 768px) {
-      grid-template-columns: 384px 1fr;
-      align-items: start;
-      gap: 4rem;
-    }
+    .profile-section-inner {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 2rem;
+
+      @media (min-width: 768px) {
+        grid-template-columns: 384px 1fr;
+        align-items: start;
+        gap: 4rem;
+      }
 
-    .picture {
-      aspect-ratio: 3 / 4;
-      border-radius: 8px;
-      overflow: hidden;
+      .picture {
+        aspect-ratio: 3 / 4;
+        border-radius: 8px;
+        overflow: hidden;
 
-      .profile-picture {
-        object-fit: cover;
-        width: 100%;
+        .profile-picture {
+          object-fit: cover;
+          width: 100%;
+        }
       }
-    }
 
-    .profile-info {
-      display: flex;
-      flex-direction: column;
-      gap: 1.5rem;
-      height: stretch;
+      .profile-info {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+        height: stretch;
 
-      .profile-info-content {
-        .profile-info-block {
-          margin-block-end: 1.5rem;
+        .profile-info-content {
+          .profile-info-block {
+            margin-block-end: 1.5rem;
 
-          /* .experience {
+            /* .experience {
           } */
 
-          .location {
-            .highlight {
-              color: var(--colour-text-accent);
-              font-weight: 600;
-              font-variation-settings: "wght" 600;
+            .location {
+              .highlight {
+                color: var(--colour-text-accent);
+                font-weight: 600;
+                font-variation-settings: "wght" 600;
+              }
             }
-          }
 
-          .services {
-            .highlight {
-              color: var(--colour-link-default);
-              font-weight: 600;
-              font-variation-settings: "wght" 600;
+            .services {
+              .highlight {
+                color: var(--colour-link-default);
+                font-weight: 600;
+                font-variation-settings: "wght" 600;
 
-              &:hover {
-                color: var(--colour-link-hover);
+                &:hover {
+                  color: var(--colour-link-hover);
+                }
               }
             }
           }
         }
-      }
 
-      .profile-links {
-        display: flex;
-        flex-grow: 1;
-        gap: 1rem;
-        align-items: end;
-        justify-content: flex-end;
+        .profile-links {
+          display: flex;
+          flex-grow: 1;
+          gap: 1rem;
+          align-items: end;
+          justify-content: flex-end;
+        }
       }
     }
   }
 }
-}
 </style>

package/app/components/02.molecules/profile-section/stories/ProfileSection.stories.ts

@@ -39,7 +39,7 @@ type Story = StoryObj<typeof ProfileSection>;
 
 // ─── Stories ─────────────────────────────────────────────────────────────────
 
-/** Default — three profile-info blocks with representative content. */
+/** Default — three profile-info blocks with eyebrow and hero text header slots. */
 export const Default: Story = {
   render: (args) => ({
     components: { ProfileSection },
@@ -48,6 +48,23 @@ export const Default: Story = {
     },
     template: `
       <ProfileSection v-bind="args">
+        <template #eyebrowText>
+          <EyebrowText tag="p" font-size="large" text-content="About Natasha" :style-class-passthrough="['mb-0']" />
+        </template>
+        <template #heroText="{ headingId }">
+          <HeroText
+            :id="headingId"
+            tag="h2"
+            axis="vertical"
+            font-size="display"
+            :text-content="[
+              { text: 'Your', styleClass: 'normal' },
+              { text: 'mobile hairdresser', styleClass: 'accent' },
+              { text: 'in Bath', styleClass: 'normal' },
+            ]"
+            :style-class-passthrough="['mb-20']"
+          />
+        </template>
         <template #profile-info-1>
           <div class="experience">
             <p class="page-body-normal">With over 10 years of experience as a mobile hairdresser, Natasha brings the salon to you — whether you're at home, in the office, or getting ready for a special occasion.</p>
@@ -78,6 +95,23 @@ export const WithProfileLinks: Story = {
     },
     template: `
       <ProfileSection v-bind="args">
+        <template #eyebrowText>
+          <EyebrowText tag="p" font-size="large" text-content="About Natasha" :style-class-passthrough="['mb-0']" />
+        </template>
+        <template #heroText="{ headingId }">
+          <HeroText
+            :id="headingId"
+            tag="h2"
+            axis="vertical"
+            font-size="display"
+            :text-content="[
+              { text: 'Your', styleClass: 'normal' },
+              { text: 'mobile hairdresser', styleClass: 'accent' },
+              { text: 'in Bath', styleClass: 'normal' },
+            ]"
+            :style-class-passthrough="['mb-20']"
+          />
+        </template>
         <template #profile-info-1>
           <div class="experience">
             <p class="page-body-normal">With over 10 years of experience as a mobile hairdresser, Natasha brings the salon to you.</p>
@@ -102,6 +136,30 @@ export const WithProfileLinks: Story = {
   }),
 };
 
+/** No header slots — renders without eyebrow or hero text. */
+export const WithoutHeader: Story = {
+  name: "Without Header Slots",
+  render: (args) => ({
+    components: { ProfileSection },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProfileSection v-bind="args">
+        <template #profile-info-1>
+          <p class="page-body-normal">Profile information block one.</p>
+        </template>
+        <template #profile-info-2>
+          <p class="page-body-normal">Profile information block two.</p>
+        </template>
+        <template #profile-info-3>
+          <p class="page-body-normal">Profile information block three.</p>
+        </template>
+      </ProfileSection>
+    `,
+  }),
+};
+
 /** Section tag — renders the root as a semantic section element. */
 export const AsSectionTag: Story = {
   name: "As section Tag",
@@ -115,6 +173,18 @@ export const AsSectionTag: Story = {
     },
     template: `
       <ProfileSection v-bind="args">
+        <template #eyebrowText>
+          <EyebrowText tag="p" font-size="large" text-content="About Natasha" :style-class-passthrough="['mb-0']" />
+        </template>
+        <template #heroText="{ headingId }">
+          <HeroText
+            :id="headingId"
+            tag="h2"
+            axis="horizontal"
+            font-size="large"
+            :text-content="[{ text: 'Profile section heading', styleClass: 'normal' }]"
+          />
+        </template>
         <template #profile-info-1>
           <p class="page-body-normal">Profile information block one.</p>
         </template>
@@ -142,6 +212,18 @@ export const CustomInfoCount: Story = {
     },
     template: `
       <ProfileSection v-bind="args">
+        <template #eyebrowText>
+          <EyebrowText tag="p" font-size="large" text-content="About Natasha" :style-class-passthrough="['mb-0']" />
+        </template>
+        <template #heroText="{ headingId }">
+          <HeroText
+            :id="headingId"
+            tag="h2"
+            axis="horizontal"
+            font-size="large"
+            :text-content="[{ text: 'Profile section heading', styleClass: 'normal' }]"
+          />
+        </template>
         <template #profile-info-1>
           <p class="page-body-normal">First block of information about this person.</p>
         </template>

package/app/components/02.molecules/profile-section/tests/ProfileSection.spec.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect } from "vitest";
+import { h } from "vue";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import ProfileSection from "../ProfileSection.vue";
 
@@ -79,26 +80,69 @@ describe("ProfileSection", () => {
     expect(wrapper.html()).toContain("Second info block");
   });
 
-  it("adds aria-labelledby referencing the heading id when tag is section", async () => {
+  it("does not render eyebrowText slot area when slot is not provided", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: defaultProps,
+    });
+    expect(wrapper.html()).not.toContain("eyebrow");
+  });
+
+  it("renders eyebrowText slot content when provided", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: defaultProps,
+      slots: {
+        eyebrowText: "<p class='eyebrow'>About Natasha</p>",
+      },
+    });
+    expect(wrapper.find(".eyebrow").exists()).toBe(true);
+    expect(wrapper.html()).toContain("About Natasha");
+  });
+
+  it("does not render heroText slot area when slot is not provided", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: defaultProps,
+    });
+    expect(wrapper.find("header h1, header h2, header h3, header h4, header h5, header h6").exists()).toBe(false);
+  });
+
+  it("renders heroText slot content when provided", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: defaultProps,
+      slots: {
+        heroText: "<h2 class='hero-heading'>My Heading</h2>",
+      },
+    });
+    expect(wrapper.find(".hero-heading").exists()).toBe(true);
+    expect(wrapper.html()).toContain("My Heading");
+  });
+
+  it("adds aria-labelledby when tag is section", async () => {
     const wrapper = await mountSuspended(ProfileSection, {
       props: { ...defaultProps, tag: "section" },
     });
     const root = wrapper.find(".profile-section");
-    const labelledBy = root.attributes("aria-labelledby");
-    expect(labelledBy).toBeTruthy();
-    const heading = wrapper.find(".hero-text");
-    expect(heading.attributes("id")).toBe(labelledBy);
+    expect(root.attributes("aria-labelledby")).toBeTruthy();
   });
 
-  it("adds aria-labelledby referencing the heading id when tag is article", async () => {
+  it("adds aria-labelledby when tag is article", async () => {
     const wrapper = await mountSuspended(ProfileSection, {
       props: { ...defaultProps, tag: "article" },
     });
     const root = wrapper.find(".profile-section");
-    const labelledBy = root.attributes("aria-labelledby");
+    expect(root.attributes("aria-labelledby")).toBeTruthy();
+  });
+
+  it("exposes headingId via heroText scoped slot and aria-labelledby matches the heading id", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, tag: "section" },
+      slots: {
+        heroText: (props: Record<string, unknown>) =>
+          h("h2", { id: props.headingId, class: "hero-heading" }, "My Heading"),
+      },
+    });
+    const labelledBy = wrapper.find(".profile-section").attributes("aria-labelledby");
     expect(labelledBy).toBeTruthy();
-    const heading = wrapper.find(".hero-text");
-    expect(heading.attributes("id")).toBe(labelledBy);
+    expect(wrapper.find(".hero-heading").attributes("id")).toBe(labelledBy);
   });
 
   it("does not add aria-labelledby when tag is div", async () => {

package/app/components/02.molecules/profile-section/tests/__snapshots__/ProfileSection.spec.ts.snap

@@ -3,10 +3,8 @@
 exports[`ProfileSection > renders correct HTML structure 1`] = `
 "<div class="profile-section custom-class">
   <header class="profile-section-header">
-    <p class="eyebrow-text mb-0 medium">About Natasha</p>
-    <h2 id="v-0-0" class="hero-text mb-20 display axis-vertical">
-      <!--v-if--><span class="text-block-0 normal">Your </span><span class="text-block-1 accent">mobile hairdresser </span><span class="text-block-2 normal">in Bath</span>
-    </h2>
+    <!--v-if-->
+    <!--v-if-->
   </header>
   <div class="profile-section-inner">
     <div class="picture"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test profile picture" class="profile-picture" src="/_ipx/_/images/test.jpg"></div>

package/app/pages/ui/profile-section.vue

@@ -14,6 +14,24 @@
             }"
             :profile-info-count="3"
           >
+            <template #eyebrowText>
+              <EyebrowText tag="p" font-size="large" text-content="About Natasha" :style-class-passthrough="['mb-0']" />
+            </template>
+            <template #heroText="{ headingId }">
+              <HeroText
+                :id="headingId"
+                tag="h2"
+                axis="vertical"
+                font-size="display"
+                :text-content="[
+                  { text: 'Your', styleClass: 'normal' },
+                  { text: 'mobile hairdresser', styleClass: 'accent' },
+                  { text: 'in Bath', styleClass: 'normal' },
+                ]"
+                :style-class-passthrough="['mb-20']"
+              />
+            </template>
+
             <template #profile-info-1>
               <p class="page-body-medium experience">
                 With over 10 years' experience, I offer a range of professional and luxurious, one-to-one hairdressing

package/package.json

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