srcdev-nuxt-components 9.5.1 → 9.5.3

package/app/components/03.organisms/services/services-card/stories/ServicesCard.stories.ts

@@ -257,3 +257,125 @@ export const DesignReplica: Story = {
     },
   },
 };
+
+const makeOverlayService = (
+  slug: string,
+  subtitle: string,
+  title: string,
+  shortDescription: string,
+  duration: string,
+  price: string
+): Service => ({
+  ...balayageService,
+  slug,
+  subtitle,
+  title,
+  shortDescription,
+  duration,
+  price,
+  image: `https://picsum.photos/seed/overlay-${slug}/600/800`,
+});
+
+const overlayServices: Service[] = [
+  makeOverlayService(
+    "balayage",
+    "Hair Colouring",
+    "Balayage",
+    "Hand-painted, sun-kissed colour with a soft regrowth line and low upkeep.",
+    "2.5 - 3.5 hours",
+    "From £95"
+  ),
+  makeOverlayService(
+    "full-colour",
+    "Hair Colouring",
+    "Full Colour",
+    "Complete colour coverage, from root touch-ups and natural tones to bold, fashion-forward shades.",
+    "1.5 - 2.5 hours",
+    "From £75"
+  ),
+  makeOverlayService(
+    "restyle",
+    "Cutting & Treatment",
+    "Restyle",
+    "A transformative cut that takes your hair in a new direction: a new shape, length, or style.",
+    "1 - 1.5 hours",
+    "£65"
+  ),
+  makeOverlayService(
+    "keratin-treatment",
+    "Cutting & Treatment",
+    "Keratin Treatment",
+    "Frizz-free smoothing sealed into the hair, with shine that lasts for months.",
+    "2 - 3 hours",
+    "£120"
+  ),
+];
+
+export const DarkOverlayCards: Story = {
+  name: "Dark Overlay Cards",
+  render: (args) => ({
+    components: { ServicesCard },
+    setup() {
+      return { args, overlayServices };
+    },
+    template: `
+      <component is="style">
+        .services-card.dark-overlay-card {
+          --services-card-gap: 0;
+          --services-card-border-radius: 0.4rem;
+          --services-card-background-color: #1c1817;
+          --services-card-background-color-hover: #211c1b;
+          --services-card-border-colour: #2e2826;
+          --services-card-border-colour-hover: #6b5a4e;
+          --services-card-transform-hover: translateY(-0.4rem);
+
+          --image-wrapper-border-radius: 0;
+          --image-wrapper-border-image-zoom-transform: none;
+          --image-wrapper-details-scrim-colour: #141110;
+          --image-wrapper-details-text-colour: #f3ece4;
+          --image-wrapper-details-eyebrow-text-colour: #c9a24a;
+          --image-wrapper-details-gap: 0.4rem;
+          --eyebrow-text-font-family: "Poppins", sans-serif;
+          --eyebrow-text-font-style: normal;
+          --eyebrow-text-font-weight: 600;
+          --eyebrow-text-letter-spacing: 0.25em;
+          --image-wrapper-details-eyebrow-text-padding-inline: 3.6rem;
+          --image-wrapper-details-hero-text-padding-block: 0 2.8rem;
+          --image-wrapper-details-hero-text-padding-inline: 3.6rem;
+
+          --details-wrapper-padding-block: 3.6rem;
+          --details-wrapper-padding-inline: 3.6rem;
+          --description-text-colour: #a39a94;
+          --description-line-height: 1.75;
+          --description-font-weight: 300;
+          --meta-border-colour: #2e2826;
+          --meta-padding-block: 2.4rem 0;
+          --meta-text-colour: #8a817b;
+          --meta-duration-font-weight: 400;
+          --meta-price-font-weight: 400;
+          --meta-letter-spacing: 0.15em;
+          --meta-price-text-colour: #e8dfd6;
+        }
+      </component>
+      <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap:4rem; padding:2.4rem; background:#121010;">
+        <ServicesCard
+          v-for="service in overlayServices"
+          :key="service.slug"
+          v-bind="args"
+          :service-data="service"
+          :href="'#' + service.slug"
+          titles-within-image-wrapper
+          :style-class-passthrough="['dark-overlay-card']"
+        />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A darker variant built from tokens: titles over the image with a dark scrim, a flush square-cornered image, a padded details panel, and a whole-card link whose hover lightens the border. Every value is a token, set on a class added with styleClassPassthrough; the eyebrow tokens are EyebrowText's own and inherit down into the card.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/services/services-card/tests/__snapshots__/ServicesCard.spec.ts.snap

@@ -2,7 +2,10 @@
 
 exports[`ServicesCard > renders correct HTML structure 1`] = `
 "<div class="services-card">
-  <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test Service" loading="lazy" class="image" src="/_ipx/_/images/test.jpg"></div>
+  <div class="grid-stack image-wrapper">
+    <div class="grid-stack__layer"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test Service" loading="lazy" class="image" src="/_ipx/_/images/test.jpg"></div>
+    <div class="grid-stack__layer"></div>
+  </div>
   <div class="details-wrapper">
     <div class="eyebrow-text large">A subtitle</div>
     <h2 class="hero-text heading axis-horizontal">

package/app/components/03.organisms/services/services-grids/stories/ServicesCardGrid.stories.ts

@@ -15,7 +15,9 @@ type StoryArgs = {
   buttonIcon?: string;
   styleClassPassthrough?: string | string[];
   /** Story-only — not a real ServicesCardGrid prop, see useStorySetup below. */
-  lineClamp?: number;
+  lineClamp?: 1 | 2 | 3 | 4 | 5;
+  /** Story-only — sets --services-card-grid-column-min-width on the wrapper, see useStorySetup below. */
+  cardMinWidth?: "200px" | "250px" | "300px" | "350px" | "400px";
 };
 
 const meta: Meta<StoryArgs> = {
@@ -52,10 +54,17 @@ const meta: Meta<StoryArgs> = {
       description: "Additional CSS classes applied to the root element",
     },
     lineClamp: {
-      control: { type: "number", min: 1, max: 10, step: 1 },
+      control: { type: "inline-radio" },
+      options: [1, 2, 3, 4, 5],
       description:
         "Story-only control — sets ServicesCard's --description-line-clamp custom property on the grid wrapper (not a real component prop) to demo description clamping across cards",
     },
+    cardMinWidth: {
+      control: { type: "inline-radio" },
+      options: ["200px", "250px", "300px", "350px", "400px"],
+      description:
+        "Story-only control — sets --services-card-grid-column-min-width on the grid wrapper (not a real component prop). Cards never go narrower than this; auto-fit then stretches each column to share the leftover space",
+    },
   },
   args: {
     tag: "div",
@@ -66,6 +75,7 @@ const meta: Meta<StoryArgs> = {
     buttonIcon: "mdi:arrow-right",
     styleClassPassthrough: [],
     lineClamp: 3,
+    cardMinWidth: "250px",
   },
   parameters: {
     backgrounds: {
@@ -169,31 +179,56 @@ const lineClampServices: Service[] = [
   ),
 ];
 
+// Twelve cards (divides evenly into 2, 3, 4 and 6 columns) to demo how cardMinWidth
+// changes the column count as the canvas resizes.
+const cardWidthServices: Service[] = [
+  ...sampleServices,
+  ...lineClampServices,
+  makeService("silk-press", "Silk Press", "Sleek, glossy straightening", "https://picsum.photos/seed/width-1/600/800"),
+  makeService("box-braids", "Box Braids", "Classic protective style", "https://picsum.photos/seed/width-2/600/800"),
+  makeService("scalp-treatment", "Scalp Treatment", "Healthy hair starts here", "https://picsum.photos/seed/width-3/600/800"),
+];
+
 // ─── Stories ──────────────────────────────────────────────────────────────────
 
+// Hides the story-only lineClamp/cardMinWidth controls on stories whose fixtures can't
+// show them (3 or fewer cards never wrap under auto-fit, and two-line descriptions
+// never clamp) — use the Description Line Clamp and Card Width stories for those.
+const hideDemoControls = {
+  lineClamp: { table: { disable: true } },
+  cardMinWidth: { table: { disable: true } },
+};
+
 /**
- * lineClamp is a story-only control (not a real ServicesCardGrid prop) that sets
- * --description-line-clamp on the grid wrapper — the global custom property each
- * ServicesCard's .description reads for its -webkit-line-clamp value.
+ * lineClamp and cardMinWidth are story-only controls (not real ServicesCardGrid props).
+ * They set --description-line-clamp (read by each ServicesCard's .description) and
+ * --services-card-grid-column-min-width (the grid's minmax() floor) on a wrapper div,
+ * and are stripped from the args bound to the component so they don't leak as attributes.
  */
 function useStorySetup(args: StoryArgs) {
-  const clampStyle = computed(() => ({
+  const wrapperStyle = computed(() => ({
     "--description-line-clamp": String(args.lineClamp ?? 3),
+    "--services-card-grid-column-min-width": args.cardMinWidth ?? "250px",
   }));
   const componentArgs = computed(() => {
-    const { lineClamp: _lineClamp, ...rest } = args;
+    const { lineClamp: _lineClamp, cardMinWidth: _cardMinWidth, ...rest } = args;
     return rest;
   });
-  return { clampStyle, componentArgs };
+  return { wrapperStyle, componentArgs };
 }
 
 export const Default: Story = {
+  argTypes: hideDemoControls,
   render: (args) => ({
     components: { ServicesCardGrid },
     setup() {
-      return { args, sampleServices };
+      return { ...useStorySetup(args), sampleServices };
     },
-    template: `<ServicesCardGrid v-bind="args" :services-data="sampleServices" />`,
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="sampleServices" />
+      </div>
+    `,
   }),
   parameters: {
     docs: {
@@ -205,6 +240,7 @@ export const Default: Story = {
 };
 
 export const CustomButtonText: Story = {
+  argTypes: hideDemoControls,
   name: "Custom Button Text",
   args: {
     hrefBase: "/services/",
@@ -213,9 +249,13 @@ export const CustomButtonText: Story = {
   render: (args) => ({
     components: { ServicesCardGrid },
     setup() {
-      return { args, sampleServices };
+      return { ...useStorySetup(args), sampleServices };
     },
-    template: `<ServicesCardGrid v-bind="args" :services-data="sampleServices" />`,
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="sampleServices" />
+      </div>
+    `,
   }),
   parameters: {
     docs: {
@@ -227,6 +267,7 @@ export const CustomButtonText: Story = {
 };
 
 export const ConfigOverrides: Story = {
+  argTypes: hideDemoControls,
   name: "Config Overrides",
   args: {
     eyebrowConfig: { tag: "p", fontSize: "small" },
@@ -235,9 +276,13 @@ export const ConfigOverrides: Story = {
   render: (args) => ({
     components: { ServicesCardGrid },
     setup() {
-      return { args, sampleServices };
+      return { ...useStorySetup(args), sampleServices };
     },
-    template: `<ServicesCardGrid v-bind="args" :services-data="sampleServices" />`,
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="sampleServices" />
+      </div>
+    `,
   }),
   parameters: {
     docs: {
@@ -250,13 +295,18 @@ export const ConfigOverrides: Story = {
 };
 
 export const SingleCard: Story = {
+  argTypes: hideDemoControls,
   name: "Single Card",
   render: (args) => ({
     components: { ServicesCardGrid },
     setup() {
-      return { args, sampleServices };
+      return { ...useStorySetup(args), sampleServices };
     },
-    template: `<ServicesCardGrid v-bind="args" :services-data="[sampleServices[0]]" />`,
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="[sampleServices[0]]" />
+      </div>
+    `,
   }),
   parameters: {
     docs: {
@@ -268,13 +318,18 @@ export const SingleCard: Story = {
 };
 
 export const EmptyData: Story = {
+  argTypes: hideDemoControls,
   name: "Empty Data",
   render: (args) => ({
     components: { ServicesCardGrid },
     setup() {
-      return { args };
+      return { ...useStorySetup(args) };
     },
-    template: `<ServicesCardGrid v-bind="args" :services-data="[]" />`,
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="[]" />
+      </div>
+    `,
   }),
   parameters: {
     docs: {
@@ -296,7 +351,7 @@ export const DescriptionLineClamp: Story = {
       return { ...useStorySetup(args), lineClampServices };
     },
     template: `
-      <div :style="clampStyle">
+      <div :style="wrapperStyle">
         <ServicesCardGrid v-bind="componentArgs" :services-data="lineClampServices" />
       </div>
     `,
@@ -310,3 +365,29 @@ export const DescriptionLineClamp: Story = {
     },
   },
 };
+
+export const CardWidth: Story = {
+  name: "Card Width",
+  args: {
+    cardMinWidth: "300px",
+  },
+  render: (args) => ({
+    components: { ServicesCardGrid },
+    setup() {
+      return { ...useStorySetup(args), cardWidthServices };
+    },
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="cardWidthServices" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Twelve cards with the cardMinWidth control driving --services-card-grid-column-min-width. The value is a floor, not a fixed width: auto-fit fits as many columns as that minimum allows, then stretches them to fill the row. Change the control or resize the canvas to see the column count change.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesCardGrid.spec.ts.snap

@@ -3,7 +3,10 @@
 exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
 "<div class="services-card-grid">
   <div class="services-card">
-    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="lazy" class="image" src="/_ipx/_/images/locs-installation.jpg"></div>
+    <div class="grid-stack image-wrapper">
+      <div class="grid-stack__layer"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="lazy" class="image" src="/_ipx/_/images/locs-installation.jpg"></div>
+      <div class="grid-stack__layer"></div>
+    </div>
     <div class="details-wrapper">
       <div class="eyebrow-text large">Subtitle for Locs Installation</div>
       <h2 class="hero-text heading axis-horizontal">
@@ -23,7 +26,10 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
     </div>
   </div>
   <div class="services-card">
-    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="lazy" class="image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+    <div class="grid-stack image-wrapper">
+      <div class="grid-stack__layer"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="lazy" class="image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+      <div class="grid-stack__layer"></div>
+    </div>
     <div class="details-wrapper">
       <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
       <h2 class="hero-text heading axis-horizontal">
@@ -43,7 +49,10 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
     </div>
   </div>
   <div class="services-card">
-    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" class="image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+    <div class="grid-stack image-wrapper">
+      <div class="grid-stack__layer"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" class="image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+      <div class="grid-stack__layer"></div>
+    </div>
     <div class="details-wrapper">
       <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
       <h2 class="hero-text heading axis-horizontal">

package/app/components/05.forms/input-checkbox/MultipleCheckboxes.vue

@@ -39,7 +39,7 @@
             :theme
             :input-variant
             :direction
-            :aria-describedby
+            :aria-describedby="ariaDescribedby()"
             :display-as-disc
             :is-pill="isPill"
           >
@@ -64,7 +64,7 @@
             :true-value="item.value"
             :theme
             :input-variant
-            :aria-describedby
+            :aria-describedby="ariaDescribedby()"
             :display-as-disc
           >
             <template #checkedIcon>

package/app/components/05.forms/input-checkbox/SingleCheckbox.vue

@@ -35,7 +35,7 @@
           :false-value
           :theme
           :input-variant
-          :aria-describedby
+          :aria-describedby="ariaDescribedby()"
         >
           <template #checkedIcon>
             <slot name="checkedIcon"></slot>

package/app/components/05.forms/input-number/InputNumberField.vue

@@ -43,7 +43,7 @@
       :input-variant
       :field-has-error
       :style-class-passthrough
-      :aria-describedby
+      :aria-describedby="ariaDescribedby()"
     >
       <template v-if="slots.left" #left>
         <InputButton

package/app/components/05.forms/input-radio/MultipleRadiobuttons.vue

@@ -40,7 +40,7 @@
             :theme
             :input-variant
             :direction
-            :aria-describedby
+            :aria-describedby="ariaDescribedby()"
             :is-pill="isPill"
           >
             <template #checkedIcon>
@@ -63,7 +63,7 @@
             :true-value="item.value"
             :theme
             :input-variant
-            :aria-describedby
+            :aria-describedby="ariaDescribedby()"
           >
             <template #checkedIcon>
               <slot name="checkedIcon"></slot>

package/app/components/05.forms/input-range/InputRangeDefault.vue

@@ -39,7 +39,7 @@
       :required
       :weight
       :field-has-error
-      :aria-describedby="ariaDescribedby"
+      :aria-describedby="ariaDescribedby()"
       :style-class-passthrough="styleClassPassthrough"
     >
       <template v-if="slots.datalist" #datalist>

package/app/components/05.forms/input-select/InputSelectWithLabel.vue

@@ -44,7 +44,7 @@
         :required
         :style-class-passthrough
         :theme="FormUiTheme"
-        :aria-describedby
+        :aria-describedby="ariaDescribedby()"
         :input-variant
       />
 

package/app/components/05.forms/input-text/InputTextAsNumberWithLabel.vue

@@ -45,7 +45,7 @@
       :style-class-passthrough="elementClasses"
       :theme
       inputmode="numeric"
-      :aria-describedby
+      :aria-describedby="ariaDescribedby()"
       :input-variant
     >
       <template v-if="slots.left" #left>

package/app/components/05.forms/input-text/InputTextWithLabel.vue

@@ -49,7 +49,7 @@
         :required
         :style-class-passthrough
         :theme
-        :aria-describedby
+        :aria-describedby="ariaDescribedby()"
         :input-variant
       >
         <template v-if="slots.left" #left>

package/app/components/05.forms/input-text/tests/InputTextWithLabel.spec.ts

@@ -2,6 +2,7 @@
 import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import ComponentUnderTest from "../InputTextWithLabel.vue";
+import { defineComponent, nextTick, ref } from "vue";
 
 const initialPropsData = {
   type: "text" as const,
@@ -44,4 +45,27 @@ describe("InputTextWithLabel", () => {
     expect(input.attributes("min")).toBe("2026-01-01");
     expect(input.attributes("max")).toBe("2026-12-31");
   });
+
+  it("points aria-describedby at the description once it appears after mount", async () => {
+    const Host = defineComponent({
+      components: { ComponentUnderTest },
+      setup() {
+        return { modelValue: ref(""), showDescription: ref(false) };
+      },
+      template: `
+        <ComponentUnderTest v-model="modelValue" type="text" name="email" label="Email" error-message="">
+          <template v-if="showDescription" #descriptionText>We never share it.</template>
+        </ComponentUnderTest>
+      `,
+    });
+    const host = await mountSuspended(Host);
+    const input = () => host.find("input");
+    expect(input().attributes("aria-describedby")).toBeFalsy();
+    (host.vm as unknown as { showDescription: boolean }).showDescription = true;
+    await nextTick();
+    expect(input().attributes("aria-describedby")).toMatch(/-description$/);
+    (host.vm as unknown as { showDescription: boolean }).showDescription = false;
+    await nextTick();
+    expect(input().attributes("aria-describedby")).toBeFalsy();
+  });
 });

package/app/components/05.forms/input-textarea/InputTextareaWithLabel.vue

@@ -44,7 +44,7 @@
         :style-class-passthrough
         :theme
         :input-variant
-        :aria-describedby
+        :aria-describedby="ariaDescribedby()"
       >
         <template v-if="slots.left" #left>
           <slot name="left"></slot>

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

@@ -86,10 +86,10 @@ const toggleSwitchId = computed(() => `toggle-switch-${id}`);
 const descriptionId = computed(() => `${id}-description`);
 const errorId = computed(() => `${id}-error-message`);
 
-// A plain function rather than useAriaDescribedById's computed: 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). Lists both ids when there's a description and an error, so the
-// description is still announced while the field is invalid.
+// 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).
+// Lists both ids when there's a description and an error, so the description is still announced
+// while the field is invalid.
 const ariaDescribedby = () => {
   const ids: string[] = [];
   if (slots.descriptionText || slots.descriptionHtml) ids.push(descriptionId.value);