srcdev-nuxt-components 9.6.1 → 9.6.3

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { h } from "vue";
+import { defineComponent, h, nextTick, ref } from "vue";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import ProfileSection from "../ProfileSection.vue";
 
@@ -52,25 +52,28 @@ describe("ProfileSection", () => {
     expect(img.attributes("alt")).toBe("Jane Doe");
   });
 
-  it("renders 3 profile-info blocks by default", async () => {
+  it("renders no profile-info blocks when no profile-info slots are given", async () => {
     const wrapper = await mountSuspended(ProfileSection, {
       props: defaultProps,
     });
-    const blocks = wrapper.findAll(".profile-section-info-block");
-    expect(blocks.length).toBe(3);
+    expect(wrapper.findAll(".profile-section-info-block").length).toBe(0);
   });
 
-  it("renders the correct number of profile-info blocks from profileInfoCount", async () => {
+  it("renders one block per provided profile-info slot, in numeric order, with gaps", async () => {
     const wrapper = await mountSuspended(ProfileSection, {
-      props: { ...defaultProps, profileInfoCount: 5 },
+      props: defaultProps,
+      slots: {
+        "profile-info-10": "<p>Ten</p>",
+        "profile-info-3": "<p>Three</p>",
+        "profile-info-1": "<p>One</p>",
+      },
     });
-    const blocks = wrapper.findAll(".profile-section-info-block");
-    expect(blocks.length).toBe(5);
+    expect(wrapper.findAll(".profile-section-info-block").map((b) => b.text())).toEqual(["One", "Three", "Ten"]);
   });
 
   it("renders named profile-info slot content", async () => {
     const wrapper = await mountSuspended(ProfileSection, {
-      props: { ...defaultProps, profileInfoCount: 2 },
+      props: defaultProps,
       slots: {
         "profile-info-1": "<p>First info block</p>",
         "profile-info-2": "<p>Second info block</p>",
@@ -91,11 +94,11 @@ describe("ProfileSection", () => {
     const wrapper = await mountSuspended(ProfileSection, {
       props: defaultProps,
       slots: {
-        eyebrowText: "<p class='eyebrow'>About Natasha</p>",
+        eyebrowText: "<p class='eyebrow'>About the author</p>",
       },
     });
     expect(wrapper.find(".eyebrow").exists()).toBe(true);
-    expect(wrapper.html()).toContain("About Natasha");
+    expect(wrapper.html()).toContain("About the author");
   });
 
   it("does not render heroText slot area when slot is not provided", async () => {
@@ -188,4 +191,134 @@ describe("ProfileSection", () => {
     expect(el.classes()).toContain("extra-class");
     expect(el.classes()).toContain("another-class");
   });
+
+  // ─── Stress test 2026-10-14 ────────────────────────────────────────────────
+
+  it("does not render an empty header when neither header slot is given", async () => {
+    const wrapper = await mountSuspended(ProfileSection, { props: defaultProps });
+    expect(wrapper.find(".profile-section-header").exists()).toBe(false);
+  });
+
+  it("adds and removes the header and info blocks when slots are toggled after mount", async () => {
+    const show = ref(false);
+    const Host = defineComponent({
+      components: { ProfileSection },
+      setup: () => ({ show, defaultProps }),
+      template: `
+        <ProfileSection v-bind="defaultProps">
+          <template v-if="show" #heroText><h2>Heading</h2></template>
+          <template v-if="show" #profile-info-1><p>Info</p></template>
+        </ProfileSection>
+      `,
+    });
+    const wrapper = await mountSuspended(Host);
+    expect(wrapper.find(".profile-section-header").exists()).toBe(false);
+    expect(wrapper.findAll(".profile-section-info-block").length).toBe(0);
+
+    show.value = true;
+    await nextTick();
+    expect(wrapper.find(".profile-section-header").exists()).toBe(true);
+    expect(wrapper.findAll(".profile-section-info-block").length).toBe(1);
+
+    show.value = false;
+    await nextTick();
+    expect(wrapper.find(".profile-section-header").exists()).toBe(false);
+    expect(wrapper.findAll(".profile-section-info-block").length).toBe(0);
+  });
+
+  it("uses the given picture width and height", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { profilePicture: { src: "/a.jpg", alt: "A", width: 640, height: 480 } },
+    });
+    expect(wrapper.find("img").attributes("width")).toBe("640");
+    expect(wrapper.find("img").attributes("height")).toBe("480");
+  });
+
+  it.each([0, -100, Number.NaN, Number.POSITIVE_INFINITY])(
+    "falls back to 828x1104 for an invalid picture size (%s)",
+    async (size) => {
+      const wrapper = await mountSuspended(ProfileSection, {
+        props: { profilePicture: { src: "/a.jpg", alt: "A", width: size, height: size } },
+      });
+      expect(wrapper.find("img").attributes("width")).toBe("828");
+      expect(wrapper.find("img").attributes("height")).toBe("1104");
+    }
+  );
+
+  it("renders HTML-like alt text as text", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { profilePicture: { src: "/a.jpg", alt: "<script>alert(1)</script>" } },
+    });
+    expect(wrapper.find("script").exists()).toBe(false);
+    expect(wrapper.find("img").attributes("alt")).toBe("<script>alert(1)</script>");
+  });
+
+  // ─── headerPlacement ─────────────────────────────────────────────────────────────────────────────────────────────────────────
+
+  const headerSlots = {
+    eyebrowText: "<p class='eyebrow'>About</p>",
+    heroText: (props: Record<string, unknown>) => h("h2", { id: props.headingId, class: "hero-heading" }, "Heading"),
+  };
+
+  it("renders the header above the grid by default", async () => {
+    const wrapper = await mountSuspended(ProfileSection, { props: defaultProps, slots: headerSlots });
+    expect(wrapper.find(".profile-section > .profile-section-header").exists()).toBe(true);
+    expect(wrapper.find(".profile-section-picture .profile-section-header").exists()).toBe(false);
+    expect(wrapper.attributes("data-header-placement")).toBe("above");
+  });
+
+  it("renders the header inside the picture frame, before the image, for picture-bottom", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, headerPlacement: "picture-bottom" },
+      slots: headerSlots,
+    });
+    expect(wrapper.attributes("data-header-placement")).toBe("picture-bottom");
+    expect(wrapper.findAll(".profile-section-header").length).toBe(1);
+    const picture = wrapper.find(".profile-section-picture");
+    expect(picture.element.firstElementChild?.classList.contains("profile-section-header")).toBe(true);
+    expect(picture.find(".eyebrow").exists()).toBe(true);
+    expect(picture.find(".hero-heading").exists()).toBe(true);
+  });
+
+  it("keeps aria-labelledby pointing at the heading when it is inside the picture", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, tag: "section", headerPlacement: "picture-bottom" },
+      slots: headerSlots,
+    });
+    expect(wrapper.attributes("aria-labelledby")).toBe(wrapper.find(".hero-heading").attributes("id"));
+  });
+
+  it("renders no header in the picture when no header slot is given", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, headerPlacement: "picture-bottom" },
+    });
+    expect(wrapper.find(".profile-section-header").exists()).toBe(false);
+  });
+
+  it("moves the header when headerPlacement changes after mount", async () => {
+    const wrapper = await mountSuspended(ProfileSection, { props: defaultProps, slots: headerSlots });
+    await wrapper.setProps({ headerPlacement: "picture-bottom" });
+    expect(wrapper.find(".profile-section-picture .profile-section-header").exists()).toBe(true);
+    expect(wrapper.find(".profile-section > .profile-section-header").exists()).toBe(false);
+  });
+
+  it("renders the header inside the picture for picture-top too", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, headerPlacement: "picture-top" },
+      slots: headerSlots,
+    });
+    expect(wrapper.attributes("data-header-placement")).toBe("picture-top");
+    expect(wrapper.find(".profile-section-picture > .profile-section-header").exists()).toBe(true);
+    expect(wrapper.find(".profile-section > .profile-section-header").exists()).toBe(false);
+  });
+
+  it("moves the header back above the grid when headerPlacement returns to above", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, headerPlacement: "picture-top" },
+      slots: headerSlots,
+    });
+    await wrapper.setProps({ headerPlacement: "above" });
+    expect(wrapper.find(".profile-section > .profile-section-header").exists()).toBe(true);
+    expect(wrapper.find(".profile-section-picture .profile-section-header").exists()).toBe(false);
+  });
 });

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

@@ -1,19 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ProfileSection > renders correct HTML structure 1`] = `
-"<div class="profile-section custom-class">
-  <header class="profile-section-header">
-    <!--v-if-->
-    <!--v-if-->
-  </header>
+"<div class="profile-section custom-class" data-header-placement="above">
+  <!--v-if-->
   <div class="profile-section-inner">
-    <div class="profile-section-picture"><img width="828" height="1104" data-nuxt-img="" srcset="/_ipx/s_828x1104/images/test.jpg 1x, /_ipx/s_1656x2208/images/test.jpg 2x" alt="Test profile picture" class="profile-section-image" src="/_ipx/s_828x1104/images/test.jpg"></div>
+    <div class="profile-section-picture">
+      <!--v-if--><img width="828" height="1104" data-nuxt-img="" srcset="/_ipx/s_828x1104/images/test.jpg 1x, /_ipx/s_1656x2208/images/test.jpg 2x" alt="Test profile picture" class="profile-section-image" src="/_ipx/s_828x1104/images/test.jpg">
+    </div>
     <div class="profile-section-info">
-      <div class="profile-section-info-content">
-        <div class="profile-section-info-block"></div>
-        <div class="profile-section-info-block"></div>
-        <div class="profile-section-info-block"></div>
-      </div>
+      <div class="profile-section-info-content"></div>
       <!--v-if-->
     </div>
   </div>

package/app/components/02.molecules/social-icons-list/CONSUMER-STYLING.md

@@ -6,12 +6,16 @@
 |---|---|---|
 | `--social-icons-list-icon-size` | `2.4rem` | Icon size (applied as `font-size`) |
 | `--social-icons-list-gap` | `1.2rem` | Gap between icons |
+| `--social-icons-list-icon-colour` | `currentColor` | Colour of mono icons (sets that draw in `currentColor`, e.g. `mdi:instagram`). No effect on `logos:` icons, whose colours are fixed in the SVG |
 | `--social-icons-list-hover-scale` | `1.15` | Scale on hover/focus (no scaling under `prefers-reduced-motion: reduce`) |
 | `--social-icons-list-hover-opacity` | `0.85` | Opacity on hover/focus |
 
-The focus outline uses `--theme-ring`, falling back to `currentColor`. Icon colour is whatever the
-Iconify icon renders (`logos:` icons carry their own brand colours; mono sets follow `color`).
+The focus outline uses `--theme-ring`, falling back to `currentColor`. `logos:` icons carry their own brand colours. Some are dark (`logos:instagram-icon`, `logos:x`,
+`logos:github-icon`) and vanish on a dark background: use a mono icon there (`mdi:instagram`,
+`bi:instagram`, ...) and colour it with `--social-icons-list-icon-colour`.
 
+> Changed 2026-10-14: new `--social-icons-list-icon-colour` token for mono icons.
+>
 > Changed 2026-09-28: `--theme-social-icon-size` and `--theme-social-icon-gap` were renamed to
 > `--social-icons-list-icon-size` and `--social-icons-list-gap`; the old names no longer work. The
 > icon is now sized with `font-size` (it used an inline `width`/`height` style). The hover tokens

package/app/components/02.molecules/social-icons-list/SocialIconsList.vue

@@ -82,6 +82,7 @@ watch(
 
         .social-icon {
           font-size: var(--social-icons-list-icon-size, 2.4rem);
+          color: var(--social-icons-list-icon-colour, currentColor);
         }
       }
     }

package/app/components/02.molecules/toast/stories/DisplayToast.stories.ts

@@ -87,6 +87,10 @@ export default {
     description: "This is a toast notification message.",
     customIcon: "",
   },
+  parameters: {
+    // Own iframe on the Docs page: each story opens a viewport-fixed toast on mount.
+    docs: { story: { inline: false, height: "320px" } },
+  },
 } as Meta<ToastStoryArgs>;
 
 const Template: StoryFn<ToastStoryArgs> = (args) => ({

package/app/components/02.molecules/toast/stories/DisplayToastProvider.stories.ts

@@ -74,6 +74,10 @@ export default {
     autoDismiss: true,
     duration: 4000,
   },
+  parameters: {
+    // Own iframe on the Docs page: toasts are fixed to the viewport.
+    docs: { story: { inline: false, height: "400px" } },
+  },
 } as Meta<StoryArgs>;
 
 const Template: StoryFn<StoryArgs> = (args) => ({

package/app/components/03.organisms/google-reviews/tests/__snapshots__/GoogleReviewCard.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`GoogleReviewCard > renders correct HTML structure 1`] = `
 "<article class="google-review-card">
-  <div class="google-review-card-author"><span class="display-avatar md" aria-hidden="true"><img data-nuxt-img="" srcset="/_ipx/_/https://lh3.googleusercontent.com/a 1x, /_ipx/_/https://lh3.googleusercontent.com/a 2x" alt="" class="display-avatar-image" src="/_ipx/_/https://lh3.googleusercontent.com/a"></span><a id="v-0-0" href="https://maps.google.com/contrib/1" class="google-review-card-author-name">Alex Doe</a><time datetime="2026-09-18T10:00:00Z" class="google-review-card-time">2 weeks ago</time></div>
+  <div class="google-review-card-author"><span class="display-avatar" data-size="md" aria-hidden="true"><span class="display-avatar-surface"><img width="112" height="112" data-nuxt-img="" srcset="/_ipx/s_112x112/https://lh3.googleusercontent.com/a 1x, /_ipx/s_224x224/https://lh3.googleusercontent.com/a 2x" alt="" class="display-avatar-image" src="/_ipx/s_112x112/https://lh3.googleusercontent.com/a"></span></span><a id="v-0-0" href="https://maps.google.com/contrib/1" class="google-review-card-author-name">Alex Doe</a><time datetime="2026-09-18T10:00:00Z" class="google-review-card-time">2 weeks ago</time></div>
   <div class="google-review-card-rating"><span class="google-review-card-stars" style="--_rating: 4;" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4 out of 5</span></div>
   <p class="google-review-card-text">Lovely visit, would come again.</p><a href="https://maps.google.com/review/1" aria-describedby="v-0-0" class="google-review-card-link">Read on Google</a>
 </article>"

package/app/components/03.organisms/google-reviews/tests/__snapshots__/GoogleReviews.spec.ts.snap

@@ -9,8 +9,8 @@ exports[`GoogleReviews > renders correct HTML structure 1`] = `
   <ul class="google-reviews-list" tabindex="0">
     <li class="google-reviews-item">
       <article class="google-review-card">
-        <div class="google-review-card-author"><span class="display-avatar md" aria-hidden="true"><span>R1</span>
-          <!--v-if--></span><a id="v-0-0-0" href="https://maps.google.com/contrib/1" class="google-review-card-author-name">Reviewer 1</a><time datetime="2026-09-18T10:00:00Z" class="google-review-card-time">1 weeks ago</time>
+        <div class="google-review-card-author"><span class="display-avatar" data-size="md" aria-hidden="true"><span class="display-avatar-surface"><span class="display-avatar-fallback">R1</span>
+          <!--v-if--></span></span><a id="v-0-0-0" href="https://maps.google.com/contrib/1" class="google-review-card-author-name">Reviewer 1</a><time datetime="2026-09-18T10:00:00Z" class="google-review-card-time">1 weeks ago</time>
         </div>
         <div class="google-review-card-rating"><span class="google-review-card-stars" style="--_rating: 5;" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 5 out of 5</span></div>
         <p class="google-review-card-text">Review text 1</p><a href="https://maps.google.com/review/1" aria-describedby="v-0-0-0" class="google-review-card-link">Read on Google</a>
@@ -18,8 +18,8 @@ exports[`GoogleReviews > renders correct HTML structure 1`] = `
     </li>
     <li class="google-reviews-item">
       <article class="google-review-card">
-        <div class="google-review-card-author"><span class="display-avatar md" aria-hidden="true"><span>R2</span>
-          <!--v-if--></span><a id="v-0-0-1" href="https://maps.google.com/contrib/2" class="google-review-card-author-name">Reviewer 2</a><time datetime="2026-09-18T10:00:00Z" class="google-review-card-time">2 weeks ago</time>
+        <div class="google-review-card-author"><span class="display-avatar" data-size="md" aria-hidden="true"><span class="display-avatar-surface"><span class="display-avatar-fallback">R2</span>
+          <!--v-if--></span></span><a id="v-0-0-1" href="https://maps.google.com/contrib/2" class="google-review-card-author-name">Reviewer 2</a><time datetime="2026-09-18T10:00:00Z" class="google-review-card-time">2 weeks ago</time>
         </div>
         <div class="google-review-card-rating"><span class="google-review-card-stars" style="--_rating: 4;" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4 out of 5</span></div>
         <p class="google-review-card-text">Review text 2</p><a href="https://maps.google.com/review/2" aria-describedby="v-0-0-1" class="google-review-card-link">Read on Google</a>
@@ -27,8 +27,8 @@ exports[`GoogleReviews > renders correct HTML structure 1`] = `
     </li>
     <li class="google-reviews-item">
       <article class="google-review-card">
-        <div class="google-review-card-author"><span class="display-avatar md" aria-hidden="true"><span>R3</span>
-          <!--v-if--></span><a id="v-0-0-2" href="https://maps.google.com/contrib/3" class="google-review-card-author-name">Reviewer 3</a><time datetime="2026-09-18T10:00:00Z" class="google-review-card-time">3 weeks ago</time>
+        <div class="google-review-card-author"><span class="display-avatar" data-size="md" aria-hidden="true"><span class="display-avatar-surface"><span class="display-avatar-fallback">R3</span>
+          <!--v-if--></span></span><a id="v-0-0-2" href="https://maps.google.com/contrib/3" class="google-review-card-author-name">Reviewer 3</a><time datetime="2026-09-18T10:00:00Z" class="google-review-card-time">3 weeks ago</time>
         </div>
         <div class="google-review-card-rating"><span class="google-review-card-stars" style="--_rating: 3;" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 3 out of 5</span></div>
         <p class="google-review-card-text">Review text 3</p><a href="https://maps.google.com/review/3" aria-describedby="v-0-0-2" class="google-review-card-link">Read on Google</a>

package/app/components/05.forms/toggle-switch/ToggleSwitchWithLabel.vue

@@ -87,7 +87,7 @@ const descriptionId = computed(() => `${id}-description`);
 const errorId = computed(() => `${id}-error-message`);
 
 // A plain function, like useAriaDescribedById's: slots aren't reactive, so a computed would keep
-// its first answer if a description slot is added or removed after mount (Claude.md pitfall #25).
+// its first answer if a description slot is added or removed after mount (CLAUDE.md pitfall #25).
 // Lists both ids when there's a description and an error, so the description is still announced
 // while the field is invalid.
 const ariaDescribedby = () => {

package/app/composables/useAriaDescribedById.ts

@@ -7,7 +7,7 @@ export function useAriaDescribedById(name: string | Ref<string>, fieldHasError:
 
   // A plain function, not a computed: the slots object isn't reactive, so a computed would cache
   // its first answer and keep pointing at (or away from) the description after a description slot
-  // is added or removed post-mount (Claude.md pitfall #25). Call it from the template,
+  // is added or removed post-mount (CLAUDE.md pitfall #25). Call it from the template,
   // `:aria-describedby="ariaDescribedby()"`, so it's re-evaluated on every render.
   const ariaDescribedby = () => {
     const hasDescription = slots.descriptionText || slots.descriptionHtml || slots.description;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.1",
+  "version": "9.6.3",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -36,6 +36,7 @@
   },
   "files": [
     ".claude/skills/",
+    ".claude/rules/consumer/",
     ".vscode/",
     "app/",
     "modules/",