srcdev-nuxt-components 9.5.2 → 9.5.4

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

@@ -0,0 +1,43 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`GoogleReviews > renders correct HTML structure 1`] = `
+"<section class="google-reviews" aria-label="Google reviews">
+  <div class="google-reviews-header">
+    <div class="google-reviews-summary"><span class="google-reviews-summary-rating" aria-hidden="true">4.7</span><span class="google-reviews-stars" style="--_rating: 4.66;" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.7 out of 5</span><a href="https://maps.google.com/?cid=1" class="google-reviews-summary-link">128 reviews on Google</a></div>
+  </div>
+  <!--v-if-->
+  <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>
+        <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>
+      </article>
+    </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>
+        <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>
+      </article>
+    </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>
+        <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>
+      </article>
+    </li>
+  </ul>
+  <div class="google-reviews-footer">
+    <!--v-if-->
+    <p class="google-reviews-attribution">Reviews from Google Maps</p>
+  </div>
+</section>"
+`;

package/app/components/03.organisms/services/services-card/CONSUMER-STYLING.md

@@ -3,8 +3,8 @@
 ## Public token API
 
 Every token below is consumed directly at its point of use (`var(--services-card-gap, 1rem)`,
-etc.) — there is no `--_`-prefixed private indirection layer, since none of these values are
-reused across multiple declarations or computed from something else. Set the token globally in
+etc.). The only private token is `--_scrim-colour`, which resolves
+`--image-wrapper-details-scrim-colour` once so the scrim and the text colour read the same value. Set the token globally in
 a theme file, scoped to a page wrapper, or per-instance via `styleClassPassthrough` — no
 `:deep()` needed, component styles are unscoped.
 
@@ -25,6 +25,8 @@ i.e. `is-clickable` is on the root — since these all default to `transparent`/
 | `--services-card-outline-colour-hover` | `transparent` | Outline colour on `:hover`/`:focus-visible` |
 | `--services-card-outline-offset` | `0px` | Resting outline offset |
 | `--services-card-outline-offset-hover` | `0px` | Outline offset on `:hover`/`:focus-visible` — e.g. set to a larger value than the resting offset for an outline that grows outward on hover |
+| `--services-card-background-color-hover` | resting background colour | Background on `:hover`/`:focus-visible` |
+| `--services-card-transform-hover` | `none` | Transform on `:hover`/`:focus-visible`, e.g. `translateY(-0.4rem)` for a lift. Transitions with the other states; skipped under `prefers-reduced-motion: reduce` |
 
 ```css
 /* A card that gets a visible border + outline ring when it's a whole-card link */
@@ -40,11 +42,14 @@ i.e. `is-clickable` is on the root — since these all default to `transparent`/
 | Token | Default | Controls |
 |---|---|---|
 | `--services-card-gap` | `1rem` | Gap between the image row and the details row |
+| `--services-card-background-color` | `transparent` | Card background |
+| `--services-card-padding-block` | none | Padding on the card root (block axis) |
+| `--services-card-padding-inline` | `0` | Padding on the card root (inline axis). Leave at `0` for a flush image, and pad `--details-wrapper-padding-*` instead |
 | `--image-wrapper-aspect-ratio` | `3/4` | Image aspect ratio |
 | `--image-wrapper-border-radius` | `8px` | Image corner radius |
 | `--image-wrapper-padding-block` | `0 0` | Padding inside the image wrapper (block axis) |
 | `--image-wrapper-padding-inline` | `0 0` | Padding inside the image wrapper (inline axis) |
-| `--image-wrapper-border-image-zoom-transform` | `scale(1.05)` | Transform applied to the image on hover |
+| `--image-wrapper-border-image-zoom-transform` | `scale(1.05)` | Transform applied to the image while the pointer is over the image. Set `none` to turn the zoom off (not `scale(0)`, which hides the image). Turning it off suits a whole-card link with its own hover effect (`--services-card-transform-hover`, border/background hover tokens): otherwise moving from the card body onto the image starts a second, separate effect |
 | `--details-wrapper-grid-gap` | `1rem` | Gap between eyebrow/title/description/footer |
 | `--details-wrapper-padding-block` | `0` | Padding inside the details wrapper (block axis) |
 | `--details-wrapper-padding-inline` | `0` | Padding inside the details wrapper (inline axis) |
@@ -53,15 +58,35 @@ i.e. `is-clickable` is on the root — since these all default to `transparent`/
 | `--description-padding-block` | `0 0` | Padding on the description text |
 | `--description-text-colour` | `var(--colour-text-secondary)` | Description paragraph colour |
 | `--description-line-height` | `1.4` | Description line height |
+| `--description-font-weight` | `inherit` | Description font weight |
 | `--description-line-clamp` | `100` | Number of lines the description clamps to — default is effectively unclamped; set e.g. `3` to clamp |
 | `--meta-padding-block` | `1.6rem 0` | Padding above/below the meta row's divider line |
 | `--meta-border-colour` | `var(--theme-border)` | Meta row's top divider colour |
 | `--meta-text-colour` | `inherit` | Duration/price text colour |
+| `--meta-duration-text-colour` | meta text colour | Duration colour only |
+| `--meta-price-text-colour` | meta text colour | Price colour only, e.g. brighter than the duration |
+| `--meta-duration-font-weight` | `500` | Duration font weight |
+| `--meta-price-font-weight` | `700` | Price font weight |
+| `--meta-letter-spacing` | `inherit` | Letter-spacing on the meta row |
 | `--meta-font-size` | `1.4rem` | Duration/price text size |
 | `--meta-text-transform` | `uppercase` | Text transform on the duration/price meta row |
 | `--footer-padding-block` | `0` | Padding on the `.footer` wrapper (meta row + actions slot) |
 | `--footer-wrapper-grid-gap` | `1rem` | Gap between the meta row and the actions slot inside `.footer` |
 
+### Titles over the image (`titlesWithinImageWrapper`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--image-wrapper-details-scrim-colour` | `#000` | Colour of the gradient scrim behind the title/eyebrow. Use an opaque colour: the default scrim fades it with `color-mix()`, and the text colour is derived from it |
+| `--image-wrapper-details-scrim` | `linear-gradient(to top, <scrim colour at 75%>, transparent 70%)` | The whole scrim `background` value — replace it for a different shape or direction, or set `none` to remove it |
+| `--image-wrapper-details-text-colour` | `contrast-color(<scrim colour>)`, `#fff` without support | Title/eyebrow text colour. Where `contrast-color()` is supported it picks black or white against the scrim colour, so a light scrim gets dark text automatically |
+| `--image-wrapper-details-eyebrow-text-colour` | `inherit` | Eyebrow colour. The eyebrow's gradient fill is turned off over the image so it can't clash with the photo |
+| `--image-wrapper-details-gap` | `0.5rem` | Gap between eyebrow and title |
+| `--image-wrapper-details-eyebrow-text-padding-block` / `-inline` | `0` / `2.2rem` | Eyebrow padding |
+| `--image-wrapper-details-hero-text-padding-block` / `-inline` | `1.2rem 2.2rem` / `2.2rem` | Title padding |
+
+`contrast-color()` only reads the scrim colour, not the photo. If you remove the scrim, set `--image-wrapper-details-text-colour` yourself to suit the images.
+
 ```css
 /* assets/styles/setup/07.components/services-card.css */
 :root {

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

@@ -5,16 +5,40 @@
     class="services-card"
     :class="[elementClasses, { 'is-clickable': isClickable() }]"
   >
-    <div class="image-wrapper">
-      <NuxtImg :src="serviceData.image" :alt="serviceData.title" loading="lazy" class="image" />
-    </div>
+    <GridStack tag="div" :style-class-passthrough="['image-wrapper']">
+      <template #layer-1>
+        <NuxtImg :src="serviceData.image" :alt="serviceData.title" loading="lazy" class="image" />
+      </template>
+      <template #layer-2>
+        <div v-if="props.titlesWithinImageWrapper" class="image-wrapper-details">
+          <EyebrowText
+            :font-size="eyebrowConfig.fontSize ?? 'medium'"
+            :tag="eyebrowConfig.tag ?? 'div'"
+            :text-content="serviceData.subtitle"
+          />
+          <HeroText
+            :tag="heroConfig.tag ?? 'h2'"
+            :font-size="heroConfig.fontSize ?? 'heading'"
+            :text-content="[
+              {
+                text: serviceData.title,
+                styleClass: 'normal',
+              },
+            ]"
+          />
+        </div>
+      </template>
+    </GridStack>
+
     <div class="details-wrapper">
       <EyebrowText
+        v-if="!props.titlesWithinImageWrapper"
         :font-size="eyebrowConfig.fontSize ?? 'large'"
         :tag="eyebrowConfig.tag ?? 'div'"
         :text-content="serviceData.subtitle"
       />
       <HeroText
+        v-if="!props.titlesWithinImageWrapper"
         :tag="heroConfig.tag ?? 'h2'"
         :font-size="heroConfig.fontSize ?? 'heading'"
         :text-content="[
@@ -50,6 +74,7 @@ interface Props {
   tag?: "div" | "section" | "article";
   serviceData: Service;
   href?: string;
+  titlesWithinImageWrapper?: boolean;
   /**
    * Force a real browser navigation instead of client-side routing, even for a same-origin
    * href starting with "/". See InputButton's `external` prop for the full rationale.
@@ -67,6 +92,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   tag: "div",
   href: undefined,
+  titlesWithinImageWrapper: false,
   external: false,
   eyebrowConfig: () => ({}),
   heroConfig: () => ({}),
@@ -114,6 +140,9 @@ watch(
     gap: var(--services-card-gap, 1rem);
     min-inline-size: 0;
 
+    background-color: var(--services-card-background-color, transparent);
+    padding-block: var(--services-card-padding-block,);
+    padding-inline: var(--services-card-padding-inline, 0);
     border-radius: var(--services-card-border-radius, 0);
     border: var(--services-card-border-width, 1px) solid var(--services-card-border-colour, transparent);
     outline: var(--services-card-outline-width, 2px) solid var(--services-card-outline-colour, transparent);
@@ -121,9 +150,11 @@ watch(
     overflow: hidden;
 
     transition:
+      background-color 0.3s ease-in-out,
       border-color 0.3s ease-in-out,
       outline-color 0.3s ease-in-out,
-      outline-offset 0.3s ease-in-out;
+      outline-offset 0.3s ease-in-out,
+      transform 0.3s ease-in-out;
 
     &.is-clickable {
       color: inherit;
@@ -134,9 +165,21 @@ watch(
       &:focus-visible {
         /* Falls back to the resting border colour (not transparent) so setting only
            --services-card-border-colour doesn't make the border vanish on hover/focus. */
+        background-color: var(
+          --services-card-background-color-hover,
+          var(--services-card-background-color, transparent)
+        );
         border-color: var(--services-card-border-colour-hover, var(--services-card-border-colour, transparent));
         outline-color: var(--services-card-outline-colour-hover, transparent);
         outline-offset: var(--services-card-outline-offset-hover, 0px);
+        transform: var(--services-card-transform-hover, none);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        &:hover,
+        &:focus-visible {
+          transform: none;
+        }
       }
     }
 
@@ -144,6 +187,7 @@ watch(
       aspect-ratio: var(--image-wrapper-aspect-ratio, 3/4);
       border-radius: var(--image-wrapper-border-radius, 8px);
       overflow: hidden;
+      isolation: isolate;
       min-inline-size: 0;
       padding-block: var(--image-wrapper-padding-block, 0 0);
       padding-inline: var(--image-wrapper-padding-inline, 0 0);
@@ -154,9 +198,46 @@ watch(
         width: 100%;
         height: 100%;
         transition: transform 0.3s ease-in-out;
+      }
+
+      &:hover .image {
+        transform: var(--image-wrapper-border-image-zoom-transform, scale(1.05));
+      }
+
+      .image-wrapper-details {
+        --_scrim-colour: var(--image-wrapper-details-scrim-colour, #000);
+
+        position: relative;
+        z-index: 1;
+        display: grid;
+        grid-auto-flow: row;
+        align-content: end;
+        gap: var(--image-wrapper-details-gap, 0.5rem);
+        height: 100%;
+        color: var(--image-wrapper-details-text-colour, #fff);
+        background: var(--image-wrapper-details-scrim, linear-gradient(to top, rgb(0 0 0 / 0.75), transparent 70%));
 
-        &:hover {
-          transform: var(--image-wrapper-border-image-zoom-transform, scale(1.05));
+        @supports (color: color-mix(in oklab, red, transparent)) {
+          background: var(
+            --image-wrapper-details-scrim,
+            linear-gradient(to top, color-mix(in oklab, var(--_scrim-colour) 75%, transparent), transparent 70%)
+          );
+        }
+
+        @supports (color: contrast-color(red)) {
+          color: var(--image-wrapper-details-text-colour, contrast-color(var(--_scrim-colour)));
+        }
+
+        .eyebrow-text {
+          --eyebrow-text-bg-img: none;
+          color: var(--image-wrapper-details-eyebrow-text-colour, inherit);
+          padding-block: var(--image-wrapper-details-eyebrow-text-padding-block, 0);
+          padding-inline: var(--image-wrapper-details-eyebrow-text-padding-inline, 2.2rem);
+        }
+
+        .hero-text {
+          padding-block: var(--image-wrapper-details-hero-text-padding-block, 1.2rem 2.2rem);
+          padding-inline: var(--image-wrapper-details-hero-text-padding-inline, 2.2rem);
         }
       }
     }
@@ -175,11 +256,12 @@ watch(
       }
 
       .hero-text {
-        padding-block: var(--hero-text-padding-block, 2rem 1rem);
+        padding-block: var(--hero-text-padding-block, 1.2rem 1rem);
       }
 
       .description {
         color: var(--description-text-colour, var(--colour-text-secondary));
+        font-weight: var(--description-font-weight, inherit);
         line-height: var(--description-line-height, 1.4);
         padding-block: var(--description-padding-block, 0 0);
 
@@ -198,18 +280,29 @@ watch(
         margin-block-start: auto;
         min-inline-size: 0;
         padding-block: var(--footer-padding-block, 0);
-      }
 
-      .meta {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 1rem;
-        padding-block: var(--meta-padding-block, 1.6rem 0);
-        border-block-start: 1px solid var(--meta-border-colour, var(--theme-border));
-        color: var(--meta-text-colour, inherit);
-        font-size: var(--meta-font-size, 1.4rem);
-        text-transform: var(--meta-text-transform, uppercase);
+        .meta {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 1rem;
+          padding-block: var(--meta-padding-block, 1.6rem 0);
+          border-block-start: 1px solid var(--meta-border-colour, var(--theme-border));
+          color: var(--meta-text-colour, inherit);
+          font-size: var(--meta-font-size, 1.4rem);
+          letter-spacing: var(--meta-letter-spacing, inherit);
+          text-transform: var(--meta-text-transform, uppercase);
+
+          .meta-duration {
+            color: var(--meta-duration-text-colour, inherit);
+            font-weight: var(--meta-duration-font-weight, 500);
+          }
+
+          .meta-price {
+            color: var(--meta-price-text-colour, inherit);
+            font-weight: var(--meta-price-font-weight, 700);
+          }
+        }
       }
     }
   }

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">