srcdev-nuxt-components 9.5.7 → 9.6.1

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

@@ -4,39 +4,39 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
 "<div class="service-summary-grid">
   <div class="service-summary">
     <div class="service-summary__grid">
-      <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/_/images/locs-installation.jpg"></div>
+      <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/locs-installation.jpg 1x, /_ipx/s_2160x2160/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/s_1080x1080/images/locs-installation.jpg"></div>
       <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
         <div class="eyebrow-text large">Subtitle for Locs Installation</div>
         <h2 id="v-0-0-0" class="hero-text mb-20 title axis-horizontal">
           <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
         </h2>
-        <div class="service-summary__pills"><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
+        <div class="service-summary__pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
         <p class="page-body-normal">What this service is.</p>
       </div>
     </div>
   </div>
   <div class="service-summary">
     <div class="service-summary__grid">
-      <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" fetchpriority="auto" class="service-summary__image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+      <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/locs-retwist.jpg 1x, /_ipx/s_2160x2160/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" fetchpriority="auto" class="service-summary__image" src="/_ipx/s_1080x1080/images/locs-retwist.jpg"></div>
       <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
         <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
         <h2 id="v-0-0-1" class="hero-text mb-20 title axis-horizontal">
           <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
         </h2>
-        <div class="service-summary__pills"><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
+        <div class="service-summary__pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
         <p class="page-body-normal">What this service is.</p>
       </div>
     </div>
   </div>
   <div class="service-summary">
     <div class="service-summary__grid">
-      <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" fetchpriority="auto" class="service-summary__image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+      <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/colour-treatment.jpg 1x, /_ipx/s_2160x2160/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" fetchpriority="auto" class="service-summary__image" src="/_ipx/s_1080x1080/images/colour-treatment.jpg"></div>
       <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
         <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
         <h2 id="v-0-0-2" class="hero-text mb-20 title axis-horizontal">
           <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
         </h2>
-        <div class="service-summary__pills"><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
+        <div class="service-summary__pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
         <p class="page-body-normal">What this service is.</p>
       </div>
     </div>

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

@@ -3,20 +3,20 @@
 exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
 "<div class="services-card-grid">
   <div class="services-card">
-    <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 services-card-image-wrapper">
+      <div class="grid-stack__layer"><img width="640" height="853" data-nuxt-img="" srcset="/_ipx/s_640x853/images/locs-installation.jpg 1x, /_ipx/s_1280x1706/images/locs-installation.jpg 2x" alt="Locs Installation" loading="lazy" class="services-card-image" src="/_ipx/s_640x853/images/locs-installation.jpg"></div>
       <div class="grid-stack__layer"></div>
     </div>
-    <div class="details-wrapper">
+    <div class="services-card-details">
       <div class="eyebrow-text large">Subtitle for Locs Installation</div>
       <h2 class="hero-text heading axis-horizontal">
         <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
       </h2>
-      <div class="description">Short description for Locs Installation.</div>
-      <div class="footer">
-        <div class="meta">
-          <div class="meta-duration">60 mins</div>
-          <div class="meta-price">£50</div>
+      <div class="services-card-description">Short description for Locs Installation.</div>
+      <div class="services-card-footer">
+        <div class="services-card-meta">
+          <div class="services-card-meta-duration">60 mins</div>
+          <div class="services-card-meta-price">£50</div>
         </div><a href="/services/locs-installation" data-testid="input-button" data-theme="default" class="input-button secondary mbs-24 is-link">
           <!--v-if-->
           <!--v-if--><span class="button-text">Enquire about Locs Installation</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
@@ -26,20 +26,20 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
     </div>
   </div>
   <div class="services-card">
-    <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 services-card-image-wrapper">
+      <div class="grid-stack__layer"><img width="640" height="853" data-nuxt-img="" srcset="/_ipx/s_640x853/images/locs-retwist.jpg 1x, /_ipx/s_1280x1706/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="lazy" class="services-card-image" src="/_ipx/s_640x853/images/locs-retwist.jpg"></div>
       <div class="grid-stack__layer"></div>
     </div>
-    <div class="details-wrapper">
+    <div class="services-card-details">
       <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
       <h2 class="hero-text heading axis-horizontal">
         <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
       </h2>
-      <div class="description">Short description for Locs Retwist.</div>
-      <div class="footer">
-        <div class="meta">
-          <div class="meta-duration">60 mins</div>
-          <div class="meta-price">£50</div>
+      <div class="services-card-description">Short description for Locs Retwist.</div>
+      <div class="services-card-footer">
+        <div class="services-card-meta">
+          <div class="services-card-meta-duration">60 mins</div>
+          <div class="services-card-meta-price">£50</div>
         </div><a href="/services/locs-retwist" data-testid="input-button" data-theme="default" class="input-button secondary mbs-24 is-link">
           <!--v-if-->
           <!--v-if--><span class="button-text">Enquire about Locs Retwist</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
@@ -49,20 +49,20 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
     </div>
   </div>
   <div class="services-card">
-    <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 services-card-image-wrapper">
+      <div class="grid-stack__layer"><img width="640" height="853" data-nuxt-img="" srcset="/_ipx/s_640x853/images/colour-treatment.jpg 1x, /_ipx/s_1280x1706/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" class="services-card-image" src="/_ipx/s_640x853/images/colour-treatment.jpg"></div>
       <div class="grid-stack__layer"></div>
     </div>
-    <div class="details-wrapper">
+    <div class="services-card-details">
       <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
       <h2 class="hero-text heading axis-horizontal">
         <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
       </h2>
-      <div class="description">Short description for Colour Treatment.</div>
-      <div class="footer">
-        <div class="meta">
-          <div class="meta-duration">60 mins</div>
-          <div class="meta-price">£50</div>
+      <div class="services-card-description">Short description for Colour Treatment.</div>
+      <div class="services-card-footer">
+        <div class="services-card-meta">
+          <div class="services-card-meta-duration">60 mins</div>
+          <div class="services-card-meta-price">£50</div>
         </div><a href="/services/colour-treatment" data-testid="input-button" data-theme="default" class="input-button secondary mbs-24 is-link">
           <!--v-if-->
           <!--v-if--><span class="button-text">Enquire about Colour Treatment</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>

package/app/components/05.forms/input-button/CONSUMER-STYLING.md

@@ -70,6 +70,14 @@ Same shape again:
 something this token set changes. The animated border added by `has-pending-effect` has its own
 `--pending-effect-*` tokens, see `../pending-effect/CONSUMER-STYLING.md`.
 
+### Text wrapping
+
+| Token | Default | Controls |
+|---|---|---|
+| `--input-button-text-white-space` | `nowrap` | Set `normal` to let a long label wrap onto several lines instead of overflowing the button. Unbroken strings break anywhere once wrapping is on |
+
+> Added 2026-10-06. `ServicesCardGrid` sets it to `normal` on its CTA buttons so a long service title stays inside the card.
+
 `InputCopy` and `PricingCard` fall back through `--input-button-primary-*` for their own copy/CTA
 buttons (see their own `CONSUMER-STYLING.md`) rather than duplicating this chain.
 

package/app/components/05.forms/input-button/InputButton.vue

@@ -292,7 +292,9 @@ watch(
 
     .button-text {
       display: inline-block;
-      white-space: nowrap;
+      min-inline-size: 0;
+      white-space: var(--input-button-text-white-space, nowrap);
+      overflow-wrap: anywhere;
       font-size: var(--button-font-size);
       line-height: var(--button-line-height);
       font-weight: var(--button-font-weight);

package/app/composables/tests/useAnchorScroll.spec.ts

@@ -75,6 +75,14 @@ describe("useAnchorScroll", () => {
         expect(history.pushState).not.toHaveBeenCalled();
       });
 
+      it("still records the clicked hash as active", () => {
+        stubMatchMedia(true);
+        appendEl("overview");
+        const { handleNavClick, activeHash } = useAnchorScroll();
+        handleNavClick(makeEvent(), "#overview");
+        expect(activeHash.value).toBe("#overview");
+      });
+
       it("does not scroll", () => {
         stubMatchMedia(true);
         const el = appendEl("overview");

package/app/composables/useAnchorScroll.ts

@@ -47,10 +47,10 @@ export const useAnchorScroll = (options: UseAnchorScrollOptions = {}) => {
   // and smooth-scroll ourselves.
   const handleNavClick = (event: MouseEvent, href: string): void => {
     if (!href.startsWith("#")) return;
+    activeHash.value = href;
     if (prefersReducedMotion()) return;
 
     event.preventDefault();
-    activeHash.value = href;
     history.pushState(null, "", href);
     scrollToAnchor(href);
   };