srcdev-nuxt-components 9.6.0 → 9.6.1

package/app/components/03.organisms/responsive-header/CONSUMER-STYLING.md

@@ -20,25 +20,51 @@ are documented alongside it since that's where they're consumed.
 | `--responsive-header-padding-block` / `--responsive-header-padding-inline` | `0` | Root element padding. |
 | `--responsive-header-max-height` | `none` | Root element max-height. |
 | `--responsive-header-inline-size` | `100%` | Root element inline-size. |
-| `--responsive-header-sub-nav-bg` / `-border` / `-border-radius` / `-padding` | `Canvas` / `1px solid #efefef75` / `8px` / `12px` | Top-bar dropdown panel (`.main-navigation-sub-nav`). |
+| `--responsive-header-link-color-hover` | `--responsive-header-link-color` | Top-bar link/summary colour on the hovered item. Unset, an active item keeps its active colour. |
+| `--responsive-header-link-color-active` | `--responsive-header-link-color` | Top-bar link/summary colour on the active item (current route or hash). |
+| `--responsive-header-sub-nav-bg` / `-border` / `-border-radius` / `-padding` | `var(--page-bg, var(--theme-surface-subtle))` / `1px solid color-mix(in oklch, var(--theme-text) 20%, transparent)` / `8px` / `12px` | Top-bar dropdown panel (`.main-navigation-sub-nav`). |
 | `--responsive-header-sub-nav-max-inline-size` | `min(48rem, calc(100vw - 3.2rem))` | Widest the top-bar dropdown panel gets; long child names wrap inside it. |
 | `--responsive-header-sub-nav-max-block-size` | `70vh` | Tallest the top-bar dropdown panel gets before it scrolls, so a long child list stays reachable under a sticky header. |
-| `--responsive-header-overflow-btn-bg` / `-size` / `-border` / `-outline` / `-icon-color` / `-hover-outline` | `Canvas` / `20px` / `1px solid #ffffff90` / `1px solid #ffffff10` / `inherit` / `1px solid #ffffff` | Overflow burger button. |
-| `--responsive-header-overflow-nav-bg` / `-border` / `-border-radius` / `-padding-block` | `Canvas` / `1px solid #ffffff90` / `8px` / `12px` | Overflow panel container. |
+| `--responsive-header-overflow-btn-bg` / `-size` / `-border` / `-outline` / `-icon-color` / `-hover-outline` | `transparent` / `20px` / `1px solid color-mix(in oklch, var(--theme-text) 20%, transparent)` / `1px solid transparent` / `inherit` / `1px solid var(--theme-border-focus)` | Overflow burger button. |
+| `--responsive-header-overflow-nav-bg` / `-border` / `-border-radius` / `-padding-block` | `var(--page-bg, var(--theme-surface-subtle))` / `1px solid color-mix(in oklch, var(--theme-text) 20%, transparent)` / `8px` / `12px` | Overflow panel container. |
 | `--responsive-header-overflow-nav-max-block-size` | `70vh` | Tallest the overflow panel gets before it scrolls. |
-| `--overflow-nav-max-inline-size` | `calc(100vw - 3.2rem)` | Widest the overflow panel's content gets (set on `NavigationItems`); long names wrap inside it. |
+| `--responsive-nav-decorator-indicator-color` | `currentColor` | Active-item indicator bar/underline. |
+| `--responsive-nav-decorator-hovered-indicator-color` | inherits the above | Indicator colour while hovering. |
+| `--responsive-nav-decorator-hovered-bg` | `color-mix(in oklch, var(--theme-text) 8%, transparent)` | Hover highlight background behind the hovered item. |
+
+### Overflow panel content (`NavigationItems`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--overflow-nav-link-color` | `inherit` | Link/summary colour in the overflow panel. |
+| `--overflow-nav-link-color-hover` | `--overflow-nav-link-color` | Colour on the hovered item. Unset, an active item keeps its active colour. |
+| `--overflow-nav-link-color-active` | `--overflow-nav-link-color` | Colour on the active item. |
+| `--overflow-nav-link-border-color` | `color-mix(in oklch, var(--theme-text) 12%, transparent)` | Divider under each row. |
+| `--overflow-nav-sub-item-color` / `--overflow-nav-sub-item-font-size` | `inherit` / `inherit` | Child links inside a group. |
+| `--overflow-nav-decorator-indicator-color` | `currentColor` | Active-row indicator bar. |
+| `--overflow-nav-decorator-hovered-indicator-color` | inherits the above | Indicator colour while hovering. |
+| `--overflow-nav-decorator-hovered-bg` | `color-mix(in oklch, var(--theme-text) 6%, transparent)` | Hover highlight behind a row. |
+| `--overflow-nav-padding-inline` / `--overflow-nav-items-padding-block` / `--overflow-nav-items-gap` | `0.8rem` / `0.8rem` / `0px` | Row spacing. |
+| `--overflow-nav-max-inline-size` | `calc(100vw - 3.2rem)` | Widest the overflow panel's content gets; long names wrap inside it. |
+
+Private: `--_link-color` / `--_overflow-link-color` carry the per-state (hover/active) link colour
+from the item to its link and summary. Not public API.
 
 Link and dropdown text is never line-clamped: it names where the link goes. Long unbroken names
 wrap inside the dropdown and overflow panels; in the top bar, an item too wide to fit moves to the
 overflow menu.
 
+> **Changed 2026-10-07**: the defaults assumed a dark bar: `Canvas` panel and button backgrounds,
+> translucent white borders (`#ffffff90`, `#efefef75`), a white button outline/hover outline and
+> white-tint hover highlights, all near-invisible on a light header. They now come from the
+> `--theme-*` slots and `--page-bg` (see the tables). A dark header sets these tokens. Also added
+> the `-link-color-hover` / `-link-color-active` tokens (top bar and overflow panel), which
+> TabNavigation had and ResponsiveHeader lacked.
+
 > **Changed 2026-10-05**: the dropdown and overflow panels had no maximum size, so a long child
-> name or a long child list ran off-screen. They are now capped by the four tokens above.
+> name or a long child list ran off-screen. They are now capped by the max-size tokens above.
 > `--_overflow-drop-down-width`, a private token nothing ever set, is gone (`min-width: fit-content`
 > directly).
-| `--responsive-nav-decorator-indicator-color` | `currentColor` | Active-item indicator bar/underline. |
-| `--responsive-nav-decorator-hovered-indicator-color` | inherits the above | Indicator colour while hovering. |
-| `--responsive-nav-decorator-hovered-bg` | `oklch(100% 0 0 / 8%)` | Hover highlight background behind the hovered item. |
 
 ---
 
@@ -50,8 +76,9 @@ tokens on a scope class matching the one passed via `styleClassPassthrough`:
 ```css
 /* assets/styles/setup/07.components/responsive-header.css */
 .site-header-nav {
-  --responsive-header-link-color: var(--slate-00);
-  --responsive-header-bg: #efefef05;
+  --responsive-header-link-color: var(--theme-text);
+  --responsive-header-link-color-hover: var(--theme-accent);
+  --responsive-header-link-color-active: var(--theme-accent);
   --responsive-header-padding-inline: 1.2rem;
 
   /* Fixed, NOT a fluid var(--step-*) token — see the token table above. */
@@ -89,7 +116,7 @@ Set the tokens above on an element you own (a page or section class, or a class
   `0` during the initial geometry pass and then pops in afterward with nothing to detect it.
   See `.decorator-icon`/the chevron `.icon` in the component's own `<style>` block for the
   pattern (`1.35em` square, `flex-shrink: 0`).
-- `NavigationItems`' own tokens (`--overflow-nav-*`) are documented in its own skill doc since
+- `NavigationItems`' own tokens (`--overflow-nav-*`) have their own table above since
   they style the overflow-panel's *content*, distinct from `ResponsiveHeader`'s own tokens
   above which style the top bar and the overflow *button*/*container*.
 

package/app/components/03.organisms/responsive-header/NavigationItems.vue

@@ -240,13 +240,15 @@ watch(
        --overflow-nav-items-padding-block    (default: 0.8rem)
 
        --overflow-nav-link-color             (default: inherit)
-       --overflow-nav-link-border-color      (default: #efefef75)
+       --overflow-nav-link-color-hover       (default: --overflow-nav-link-color)
+       --overflow-nav-link-color-active      (default: --overflow-nav-link-color)
+       --overflow-nav-link-border-color      (default: color-mix(in oklch, var(--theme-text) 12%, transparent))
        --overflow-nav-sub-item-color         (default: inherit)
        --overflow-nav-sub-item-font-size     (default: inherit)
 
        --overflow-nav-decorator-indicator-color         (default: currentColor)
        --overflow-nav-decorator-hovered-indicator-color (default: inherits --overflow-nav-decorator-indicator-color)
-       --overflow-nav-decorator-hovered-bg              (default: oklch(100% 0 0 / 6%))
+       --overflow-nav-decorator-hovered-bg              (default: color-mix(in oklch, var(--theme-text) 6%, transparent))
     ──────────────────────────────────────────────────────────────────────── */
 
     --_max-inline-size: var(--overflow-nav-max-inline-size, calc(100vw - 3.2rem));
@@ -276,13 +278,26 @@ watch(
           display: block;
         }
 
+        /* Per-state link colour; hover falls back to the item's current state. Unset means the resting colour. */
+        &.is-active {
+          --_overflow-link-color: var(--overflow-nav-link-color-active);
+        }
+
+        &.is-hovered {
+          --_overflow-link-color: var(--overflow-nav-link-color-hover, var(--overflow-nav-link-color-active));
+        }
+
+        &.is-hovered:not(.is-active) {
+          --_overflow-link-color: var(--overflow-nav-link-color-hover);
+        }
+
         .overflow-navigation-link {
           text-decoration: none;
-          color: var(--overflow-nav-link-color, inherit);
+          color: var(--_overflow-link-color, var(--overflow-nav-link-color, inherit));
           padding-block: var(--overflow-nav-items-padding-block, 0.8rem);
           padding-inline: var(--overflow-nav-padding-inline, 0.8rem);
           display: flex;
-          border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, #efefef75);
+          border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, color-mix(in oklch, var(--theme-text) 12%, transparent));
         }
 
         .overflow-navigation-details {
@@ -300,8 +315,8 @@ watch(
                 padding-block: var(--overflow-nav-items-padding-block, 0.8rem);
                 padding-inline: var(--overflow-nav-padding-inline, 0.8rem);
                 gap: 1rem;
-                color: var(--overflow-nav-link-color, inherit);
-                border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, #efefef75);
+                color: var(--_overflow-link-color, var(--overflow-nav-link-color, inherit));
+                border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, color-mix(in oklch, var(--theme-text) 12%, transparent));
 
                 .label-wrapper {
                   min-inline-size: 0;
@@ -316,7 +331,7 @@ watch(
                   border-bottom: 0.1rem solid transparent;
                 }
                 + .expanding-panel-content {
-                  border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, #efefef75);
+                  border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, color-mix(in oklch, var(--theme-text) 12%, transparent));
                   .overflow-navigation-sub-nav-inner {
                     margin-top: var(--overflow-nav-items-gap, 0px);
                   }
@@ -361,8 +376,8 @@ watch(
                 padding-block: var(--overflow-nav-items-padding-block, 0.8rem);
                 padding-inline: var(--overflow-nav-padding-inline, 0.8rem);
                 gap: 1rem;
-                color: var(--overflow-nav-link-color, inherit);
-                border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, #efefef75);
+                color: var(--_overflow-link-color, var(--overflow-nav-link-color, inherit));
+                border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, color-mix(in oklch, var(--theme-text) 12%, transparent));
 
                 .label-wrapper {
                   min-inline-size: 0;
@@ -377,7 +392,7 @@ watch(
                   border-bottom: 0.1rem solid transparent;
                 }
                 + .expanding-panel-classic-content {
-                  border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, #efefef75);
+                  border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, color-mix(in oklch, var(--theme-text) 12%, transparent));
                   .overflow-navigation-sub-nav-inner {
                     margin-top: var(--overflow-nav-items-gap, 0px);
                   }
@@ -486,7 +501,7 @@ watch(
     right: 0;
     top: anchor(top);
     bottom: anchor(bottom);
-    background: var(--overflow-nav-decorator-hovered-bg, oklch(100% 0 0 / 6%));
+    background: var(--overflow-nav-decorator-hovered-bg, color-mix(in oklch, var(--theme-text) 6%, transparent));
     z-index: 1;
     opacity: 0;
     transition:
@@ -552,7 +567,7 @@ watch(
     right: 0;
     top: anchor(top);
     bottom: anchor(bottom);
-    background: var(--overflow-nav-decorator-hovered-bg, oklch(100% 0 0 / 6%));
+    background: var(--overflow-nav-decorator-hovered-bg, color-mix(in oklch, var(--theme-text) 6%, transparent));
     border-inline-start: 2px solid var(
       --overflow-nav-decorator-hovered-indicator-color,
       var(--overflow-nav-decorator-indicator-color, currentColor)

package/app/components/03.organisms/responsive-header/ResponsiveHeader.vue

@@ -751,30 +751,32 @@ watch(
 
        --responsive-header-color                (default: inherit)
        --responsive-header-link-color           (default: inherit)
+       --responsive-header-link-color-hover     (default: --responsive-header-link-color)
+       --responsive-header-link-color-active    (default: --responsive-header-link-color)
 
-       --responsive-header-sub-nav-bg           (default: Canvas)
-       --responsive-header-sub-nav-border       (default: 1px solid #efefef75)
+       --responsive-header-sub-nav-bg           (default: var(--page-bg, var(--theme-surface-subtle)))
+       --responsive-header-sub-nav-border       (default: 1px solid color-mix(in oklch, var(--theme-text) 20%, transparent))
        --responsive-header-sub-nav-border-radius (default: 8px)
        --responsive-header-sub-nav-padding      (default: 12px)
        --responsive-header-sub-nav-max-inline-size (default: min(48rem, calc(100vw - 3.2rem)))
        --responsive-header-sub-nav-max-block-size  (default: 70vh)
 
-       --responsive-header-overflow-btn-bg              (default: Canvas)
+       --responsive-header-overflow-btn-bg              (default: transparent)
        --responsive-header-overflow-btn-size            (default: 20px)
-       --responsive-header-overflow-btn-border          (default: 1px solid #ffffff90)
-       --responsive-header-overflow-btn-outline         (default: 1px solid #ffffff10)
+       --responsive-header-overflow-btn-border          (default: 1px solid color-mix(in oklch, var(--theme-text) 20%, transparent))
+       --responsive-header-overflow-btn-outline         (default: 1px solid transparent)
        --responsive-header-overflow-btn-icon-color      (default: inherit)
-       --responsive-header-overflow-btn-hover-outline   (default: 1px solid #ffffff)
+       --responsive-header-overflow-btn-hover-outline   (default: 1px solid var(--theme-border-focus))
 
-       --responsive-header-overflow-nav-bg              (default: Canvas)
-       --responsive-header-overflow-nav-border          (default: 1px solid #ffffff90)
+       --responsive-header-overflow-nav-bg              (default: var(--page-bg, var(--theme-surface-subtle)))
+       --responsive-header-overflow-nav-border          (default: 1px solid color-mix(in oklch, var(--theme-text) 20%, transparent))
        --responsive-header-overflow-nav-border-radius   (default: 8px)
        --responsive-header-overflow-nav-padding-block   (default: 12px)
        --responsive-header-overflow-nav-max-block-size  (default: 70vh)
 
        --responsive-nav-decorator-indicator-color         (default: currentColor)
        --responsive-nav-decorator-hovered-indicator-color (default: inherits --responsive-nav-decorator-indicator-color)
-       --responsive-nav-decorator-hovered-bg              (default: oklch(100% 0 0 / 8%))
+       --responsive-nav-decorator-hovered-bg              (default: color-mix(in oklch, var(--theme-text) 8%, transparent))
 
        --responsive-header-link-font-size       (default: inherit)
        --responsive-header-main-nav-justify-content (default: space-between)
@@ -854,7 +856,7 @@ watch(
             gap: 6px;
             white-space: nowrap;
             font-size: var(--responsive-header-link-font-size, inherit);
-            color: var(--responsive-header-link-color, inherit);
+            color: var(--_link-color, var(--responsive-header-link-color, inherit));
             text-decoration: none;
             cursor: pointer;
             margin-inline-start: 0;
@@ -916,7 +918,7 @@ watch(
               position: relative;
               z-index: 4;
               font-size: var(--responsive-header-link-font-size, inherit);
-              color: var(--responsive-header-link-color, inherit);
+              color: var(--_link-color, var(--responsive-header-link-color, inherit));
 
               &::-webkit-details-marker,
               &::marker {
@@ -932,9 +934,9 @@ watch(
               position: absolute;
 
               padding: var(--responsive-header-sub-nav-padding, 12px);
-              border: var(--responsive-header-sub-nav-border, 1px solid #efefef75);
+              border: var(--responsive-header-sub-nav-border, 1px solid color-mix(in oklch, var(--theme-text) 20%, transparent));
               border-radius: var(--responsive-header-sub-nav-border-radius, 8px);
-              background-color: var(--responsive-header-sub-nav-bg, Canvas);
+              background-color: var(--responsive-header-sub-nav-bg, var(--page-bg, var(--theme-surface-subtle)));
               translate: 0 12px;
 
               min-width: var(--_main-navigation-item-width);
@@ -980,6 +982,19 @@ watch(
               margin-inline-start: var(--_main-navigation-item-width);
             }
           }
+
+          /* Per-state link colour; hover falls back to the item's current state. Unset means the resting colour. */
+          &.is-active {
+            --_link-color: var(--responsive-header-link-color-active);
+          }
+
+          &.is-hovered {
+            --_link-color: var(--responsive-header-link-color-hover, var(--responsive-header-link-color-active));
+          }
+
+          &.is-hovered:not(.is-active) {
+            --_link-color: var(--responsive-header-link-color-hover);
+          }
         }
 
         &:last-child {
@@ -1071,9 +1086,9 @@ watch(
 
           aspect-ratio: 1;
           border-radius: 4px;
-          border: var(--responsive-header-overflow-btn-border, 1px solid #ffffff90);
-          outline: var(--responsive-header-overflow-btn-outline, 1px solid #ffffff10);
-          background-color: var(--responsive-header-overflow-btn-bg, Canvas);
+          border: var(--responsive-header-overflow-btn-border, 1px solid color-mix(in oklch, var(--theme-text) 20%, transparent));
+          outline: var(--responsive-header-overflow-btn-outline, 1px solid transparent);
+          background-color: var(--responsive-header-overflow-btn-bg, transparent);
 
           width: var(--_icon-size);
           overflow: hidden;
@@ -1089,7 +1104,7 @@ watch(
           &:hover,
           &:focus-visible {
             --_icon-zoom: 1.2;
-            outline: var(--responsive-header-overflow-btn-hover-outline, 1px solid #ffffff);
+            outline: var(--responsive-header-overflow-btn-hover-outline, 1px solid var(--theme-border-focus));
           }
 
           .icon {
@@ -1115,8 +1130,8 @@ watch(
           position: absolute;
           top: 135%;
           right: 0;
-          background-color: var(--responsive-header-overflow-nav-bg, Canvas);
-          border: var(--responsive-header-overflow-nav-border, 1px solid #ffffff90);
+          background-color: var(--responsive-header-overflow-nav-bg, var(--page-bg, var(--theme-surface-subtle)));
+          border: var(--responsive-header-overflow-nav-border, 1px solid color-mix(in oklch, var(--theme-text) 20%, transparent));
           border-radius: var(--responsive-header-overflow-nav-border-radius, 8px);
           padding-block: var(--responsive-header-overflow-nav-padding-block, 12px);
           margin: 0;
@@ -1172,7 +1187,7 @@ watch(
       right: anchor(right);
       top: anchor(top);
       bottom: anchor(bottom);
-      background: var(--responsive-nav-decorator-hovered-bg, oklch(100% 0 0 / 8%));
+      background: var(--responsive-nav-decorator-hovered-bg, color-mix(in oklch, var(--theme-text) 8%, transparent));
       border-radius: 4px;
       z-index: 1;
       opacity: 0;

package/app/components/03.organisms/responsive-header/stories/ResponsiveHeader.stories.ts

@@ -246,7 +246,7 @@ export const SamePageAnchorLinks: Story = {
           "smooth-scroll to the section (an instant jump under reduced motion), and are active by hash rather than by " +
           "route; the first anchor is active on load. `anchorScrollOffset` (80 here) leaves room for the sticky header. " +
           "Route links like Blog mix in as normal. Narrow the canvas so items move into the overflow menu: anchor links " +
-          "there scroll the same way and close the menu. This replaces TabNavigation's anchor mode.",
+          "there scroll the same way and close the menu.",
       },
     },
   },

package/app/components/03.organisms/services/service-detail/tests/__snapshots__/ServiceDetail.spec.ts.snap

@@ -21,7 +21,7 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
           <h1 id="v-0-0" class="hero-text display axis-horizontal">
             <!--v-if--><span class="text-block-0 normal">Balayage</span>
           </h1>
-          <div class="service-detail__hero-pills"><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">2.5 - 3.5 hours</span></span><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">From £95</span></span></div>
+          <div class="service-detail__hero-pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">2.5 - 3.5 hours</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £95</span></span></div>
         </div>
       </div>
     </div>

package/app/components/03.organisms/services/service-summary/tests/__snapshots__/ServiceSummary.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`ServiceSummary > renders correct HTML structure 1`] = `
       <h2 id="v-0-0" class="hero-text mb-20 title axis-horizontal">
         <!--v-if--><span class="text-block-0 normal">Test Service</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__/ServiceSummaryGrid.spec.ts.snap

@@ -10,7 +10,7 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
         <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>
@@ -23,7 +23,7 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
         <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>
@@ -36,7 +36,7 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
         <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>