srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/02.molecules/price-list/tests/PriceList.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import PriceList from "../PriceList.vue";
-import type { PriceListData } from "../PriceList.vue";
+import type { PriceListData } from "~/types/components/price-list";
 
 const defaultPriceListData = [
   {
@@ -22,7 +22,11 @@ const defaultPriceListData = [
 
 const createWrapper = async (
   priceListData: PriceListData[] = defaultPriceListData,
-  extraProps: { styleClassPassthrough?: string | string[] } = {}
+  extraProps: {
+    headingTag?: "h2" | "h3" | "h4" | "h5" | "h6";
+    fromLabel?: string;
+    styleClassPassthrough?: string | string[];
+  } = {}
 ) => {
   return mountSuspended(PriceList, {
     props: { priceListData, ...extraProps },
@@ -160,6 +164,33 @@ describe("PriceList", () => {
       expect(wrapper.find(".price-list__from").text()).toBe("from");
     });
 
+    it("renders a custom fromLabel", async () => {
+      wrapper = await createWrapper(
+        [{ headingtext: "Cuts", items: [{ description: "Cut", price: "£45", from: true }] }],
+        { fromLabel: "ab" }
+      );
+      expect(wrapper.find(".price-list__from").text()).toBe("ab");
+    });
+
+    it("renders column headings as h2 by default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.findAll("h2.price-list__heading").length).toBe(2);
+    });
+
+    it("renders column headings with a custom headingTag", async () => {
+      wrapper = await createWrapper(defaultPriceListData, { headingTag: "h3" });
+      expect(wrapper.findAll("h3.price-list__heading").length).toBe(2);
+      expect(wrapper.findAll("h2").length).toBe(0);
+    });
+
+    it("updates classes when styleClassPassthrough changes", async () => {
+      wrapper = await createWrapper(defaultPriceListData, { styleClassPassthrough: ["first-class"] });
+      await wrapper.setProps({ styleClassPassthrough: ["second-class"] });
+      const classes = wrapper.find(".price-list").classes();
+      expect(classes).toContain("second-class");
+      expect(classes).not.toContain("first-class");
+    });
+
     it("does not render a 'from' label when item.from is omitted", async () => {
       wrapper = await createWrapper();
       expect(wrapper.find(".price-list__from").exists()).toBe(false);
@@ -182,6 +213,12 @@ describe("PriceList", () => {
       expect(dts[0]!.text()).toBe("Cut & Blow Dry");
     });
 
+    it("renders headings only for column titles, not prices", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.findAll("h1, h2, h3, h4, h5, h6").length).toBe(2);
+      expect(wrapper.find("dd h2").exists()).toBe(false);
+    });
+
     it("uses dd for prices", async () => {
       wrapper = await createWrapper();
       const dds = wrapper.findAll("dd");

package/app/components/02.molecules/price-list/tests/__snapshots__/PriceList.spec.ts.snap

@@ -27,19 +27,13 @@ exports[`PriceList > Snapshots > default 1`] = `
       <div class="price-list__row">
         <dt class="price-list__description">Cut &amp; Blow Dry</dt>
         <dd class="price-list__price">
-          <!--v-if-->
-          <h2 class="hero-text label axis-horizontal">
-            <!--v-if--><span class="text-block-0">£45</span>
-          </h2>
+          <!--v-if--><span class="price-list__amount">£45</span>
         </dd>
       </div>
       <div class="price-list__row">
         <dt class="price-list__description">Restyle</dt>
         <dd class="price-list__price">
-          <!--v-if-->
-          <h2 class="hero-text label axis-horizontal">
-            <!--v-if--><span class="text-block-0">£65</span>
-          </h2>
+          <!--v-if--><span class="price-list__amount">£65</span>
         </dd>
       </div>
     </dl>
@@ -52,19 +46,13 @@ exports[`PriceList > Snapshots > default 1`] = `
       <div class="price-list__row">
         <dt class="price-list__description">Full Head Colour</dt>
         <dd class="price-list__price">
-          <!--v-if-->
-          <h2 class="hero-text label axis-horizontal">
-            <!--v-if--><span class="text-block-0">£75</span>
-          </h2>
+          <!--v-if--><span class="price-list__amount">£75</span>
         </dd>
       </div>
       <div class="price-list__row">
         <dt class="price-list__description">Balayage</dt>
         <dd class="price-list__price">
-          <!--v-if-->
-          <h2 class="hero-text label axis-horizontal">
-            <!--v-if--><span class="text-block-0">£95</span>
-          </h2>
+          <!--v-if--><span class="price-list__amount">£95</span>
         </dd>
       </div>
     </dl>

package/app/components/02.molecules/pricing-card/CONSUMER-STYLING.md

@@ -41,7 +41,7 @@ override it — there is no locale-aware formatting, just a literal prefix chara
 
 ---
 
-## Global theming — app-level CSS file
+## Global theming
 
 Create `assets/styles/setup/07.components/pricing-card.css` in the consuming app and set tokens on
 `:root`. These values apply to every `PricingCard` instance across the site.
@@ -62,7 +62,15 @@ Create `assets/styles/setup/07.components/pricing-card.css` in the consuming app
 
 ---
 
-## Per-instance overrides via inline styles
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+### One instance
 
 Override tokens directly on a single card instance:
 
@@ -78,9 +86,7 @@ Override tokens directly on a single card instance:
 />
 ```
 
----
-
-## Page-scoped overrides
+### Page or section
 
 When pricing cards appear in a specific page context, scope overrides under the page wrapper:
 
@@ -131,6 +137,17 @@ When displaying multiple cards side-by-side (common in pricing pages), wrap in a
 
 ---
 
+## Highlight badge text
+
+`isHighlighted` shows a top-centred badge reading "Most Popular". Pass `badge-text` to change it,
+e.g. for localisation:
+
+```vue
+<PricingCard planName="Standard" :price="99" is-highlighted :badge-text="t('pricing.mostPopular')" />
+```
+
+---
+
 ## Discount ribbon
 
 Pass `ribbon-text` to render a diagonal corner ribbon (top-right, 45°) for marketing callouts —
@@ -180,3 +197,4 @@ Or inline:
 ```
 
 (Note: `--_feature-checkmark-color` is an internal token; consider requesting it as a public token if override is needed frequently.)
+

package/app/components/02.molecules/pricing-card/PricingCard.vue

@@ -1,6 +1,6 @@
 <template>
   <component :is="tag" class="pricing-card" :class="[elementClasses, { 'is-highlighted': isHighlighted }]">
-    <div v-if="isHighlighted" class="pricing-card__badge">Most Popular</div>
+    <div v-if="isHighlighted" class="pricing-card__badge">{{ badgeText }}</div>
 
     <div v-if="ribbonText" class="pricing-card__ribbon-clip">
       <span class="pricing-card__ribbon">{{ ribbonText }}</span>
@@ -25,7 +25,7 @@
 
     <div class="pricing-card__cta">
       <slot name="cta" :cta-text="ctaText" :is-disabled="ctaDisabled" :plan-name="planName" :on-select="handleSelect">
-        <InputButtonCore :button-text="ctaText" :readonly="ctaDisabled" @click="handleSelect" />
+        <InputButton :button-text="ctaText" :readonly="ctaDisabled" @click="handleSelect" />
       </slot>
     </div>
   </component>
@@ -41,6 +41,7 @@ interface Props {
   description?: string;
   features?: string[];
   isHighlighted?: boolean;
+  badgeText?: string;
   ctaText?: string;
   ctaDisabled?: boolean;
   ribbonText?: string;
@@ -54,6 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
   description: undefined,
   features: () => [],
   isHighlighted: false,
+  badgeText: "Most Popular",
   ctaText: "Get started",
   ctaDisabled: false,
   ribbonText: undefined,
@@ -81,62 +83,30 @@ watch(
 <style lang="css">
 @layer components {
   .pricing-card {
-    --_card-border: var(--pricing-card-border, 1px solid var(--slate-03));
-    --_card-border-radius: var(--pricing-card-border-radius, 0.8rem);
-    --_card-padding: var(--pricing-card-padding, 2rem);
-    --_card-background: var(--pricing-card-background, var(--slate-00));
-    --_card-shadow: var(--pricing-card-shadow, 0 2px 8px oklch(from var(--slate-08) l c h / 0.12));
-    --_card-gap: var(--pricing-card-gap, 1.2rem);
-
-    --_highlight-border: var(--pricing-card-highlight-border, 2px solid var(--teal-06));
-    --_highlight-shadow: var(--pricing-card-highlight-shadow, 0 8px 24px oklch(from var(--teal-06) l c h / 0.2));
-    --_highlight-scale: var(--pricing-card-highlight-scale, 1.05);
-
-    --_badge-bg: var(--pricing-card-badge-bg, var(--teal-06));
-    --_badge-text: var(--pricing-card-badge-text, var(--teal-00));
-
-    --_ribbon-bg: var(--pricing-card-ribbon-bg, var(--red-06));
-    --_ribbon-text: var(--pricing-card-ribbon-text, var(--red-00, white));
     --_ribbon-size: var(--pricing-card-ribbon-size, 20rem);
 
-    --_name-font-size: var(--pricing-card-name-font-size, 1.8rem);
-    --_name-color: var(--pricing-card-name-color, #1a1a1a);
-
-    --_amount-font-size: var(--pricing-card-amount-font-size, 3.2rem);
-    --_amount-color: var(--pricing-card-amount-color, #1a1a1a);
-    --_period-font-size: var(--pricing-card-period-font-size, 0.9rem);
-    --_period-color: var(--pricing-card-period-color, #666);
-
-    --_description-color: var(--pricing-card-description-color, #555);
-    --_feature-color: var(--pricing-card-feature-color, #333);
-
-    --_cta-align: var(--pricing-card-cta-align, flex-start);
-    --_cta-bg: var(--pricing-card-cta-bg, var(--input-button-primary-surface, var(--theme-surface)));
     --_cta-bg-hover: var(
       --pricing-card-cta-bg-hover,
       var(--input-button-primary-surface-hover, var(--theme-surface-hover))
     );
-    --_cta-text: var(--pricing-card-cta-text, var(--input-button-primary-text, var(--theme-on-surface)));
-    --_cta-padding: var(--pricing-card-cta-padding, 1rem 1.6rem);
-    --_cta-border-radius: var(--pricing-card-cta-border-radius, 0.4rem);
 
     display: flex;
     flex-direction: column;
-    gap: var(--_card-gap);
+    gap: var(--pricing-card-gap, 1.2rem);
     position: relative;
 
-    padding: var(--_card-padding);
-    background-color: var(--_card-background);
-    border: var(--_card-border);
-    border-radius: var(--_card-border-radius);
-    box-shadow: var(--_card-shadow);
+    padding: var(--pricing-card-padding, 2rem);
+    background-color: var(--pricing-card-background, var(--slate-00));
+    border: var(--pricing-card-border, 1px solid var(--slate-03));
+    border-radius: var(--pricing-card-border-radius, 0.8rem);
+    box-shadow: var(--pricing-card-shadow, 0 2px 8px oklch(from var(--slate-08) l c h / 0.12));
 
     transition: all 0.3s ease;
 
     &.is-highlighted {
-      border: var(--_highlight-border);
-      box-shadow: var(--_highlight-shadow);
-      transform: scale(var(--_highlight-scale));
+      border: var(--pricing-card-highlight-border, 2px solid var(--teal-06));
+      box-shadow: var(--pricing-card-highlight-shadow, 0 8px 24px oklch(from var(--teal-06) l c h / 0.2));
+      transform: scale(var(--pricing-card-highlight-scale, 1.05));
     }
 
     .pricing-card__badge {
@@ -150,8 +120,8 @@ watch(
 
       display: inline-block;
       padding: 0.4rem 1rem;
-      background-color: var(--_badge-bg);
-      color: var(--_badge-text);
+      background-color: var(--pricing-card-badge-bg, var(--teal-06));
+      color: var(--pricing-card-badge-text, var(--teal-00));
       border-radius: 2rem;
       font-size: 0.75rem;
       font-weight: 600;
@@ -180,8 +150,8 @@ watch(
 
         display: block;
         padding: 0.6rem 1.4rem 0.6rem 0;
-        background-color: var(--_ribbon-bg);
-        color: var(--_ribbon-text);
+        background-color: var(--pricing-card-ribbon-bg, var(--red-06));
+        color: var(--pricing-card-ribbon-text, var(--red-00, white));
         text-align: right;
         font-size: 1.2rem;
         font-weight: 700;
@@ -192,9 +162,9 @@ watch(
 
     .pricing-card__name {
       margin: 0;
-      font-size: var(--_name-font-size);
+      font-size: var(--pricing-card-name-font-size, 1.8rem);
       font-weight: 600;
-      color: var(--_name-color);
+      color: var(--pricing-card-name-color, #1a1a1a);
     }
 
     .pricing-card__price {
@@ -204,19 +174,19 @@ watch(
     }
 
     .pricing-card__amount {
-      font-size: var(--_amount-font-size);
+      font-size: var(--pricing-card-amount-font-size, 3.2rem);
       font-weight: 700;
-      color: var(--_amount-color);
+      color: var(--pricing-card-amount-color, #1a1a1a);
     }
 
     .pricing-card__period {
-      font-size: var(--_period-font-size);
-      color: var(--_period-color);
+      font-size: var(--pricing-card-period-font-size, 0.9rem);
+      color: var(--pricing-card-period-color, #666);
     }
 
     .pricing-card__description {
       margin: 0;
-      color: var(--_description-color);
+      color: var(--pricing-card-description-color, #555);
       line-height: 1.5;
     }
 
@@ -232,7 +202,7 @@ watch(
     }
 
     .pricing-card__feature {
-      color: var(--_feature-color);
+      color: var(--pricing-card-feature-color, #333);
       padding-left: 1.6rem;
       position: relative;
 
@@ -246,13 +216,13 @@ watch(
     }
 
     .pricing-card__cta {
-      align-self: var(--_cta-align);
+      align-self: var(--pricing-card-cta-align, flex-start);
 
-      :deep(.input-button-core) {
-        padding: var(--_cta-padding);
-        background-color: var(--_cta-bg);
-        color: var(--_cta-text);
-        border-radius: var(--_cta-border-radius);
+      :deep(.input-button) {
+        padding: var(--pricing-card-cta-padding, 1rem 1.6rem);
+        background-color: var(--pricing-card-cta-bg, var(--input-button-primary-surface, var(--theme-surface)));
+        color: var(--pricing-card-cta-text, var(--input-button-primary-text, var(--theme-on-surface)));
+        border-radius: var(--pricing-card-cta-border-radius, 0.4rem);
         font-weight: 600;
 
         &:hover:not([aria-disabled="true"]) {

package/app/components/02.molecules/pricing-card/stories/PricingCard.stories.ts

@@ -11,6 +11,7 @@ const meta: Meta<typeof PricingCard> = {
     billingPeriod: { control: "text" },
     description: { control: "text" },
     isHighlighted: { control: "boolean" },
+    badgeText: { control: "text" },
     ctaText: { control: "text" },
     ctaDisabled: { control: "boolean" },
     ribbonText: { control: "text" },
@@ -22,6 +23,7 @@ const meta: Meta<typeof PricingCard> = {
     description: "Perfect for freelancers and solo practitioners.",
     features: ["Embed on one domain", "Unlimited consultations", "Email support", "Monthly updates"],
     isHighlighted: false,
+    badgeText: "Most Popular",
     ctaText: "Get started",
     ctaDisabled: false,
     ribbonText: undefined,

package/app/components/02.molecules/pricing-card/tests/PricingCard.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect } from "vitest";
 import { mount } from "@vue/test-utils";
 import PricingCard from "../PricingCard.vue";
 
@@ -84,6 +84,19 @@ describe("PricingCard", () => {
     expect(wrapper.text()).toContain("Most Popular");
   });
 
+  it("renders custom badge text when highlighted", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+        isHighlighted: true,
+        badgeText: "Le plus populaire",
+      },
+    });
+
+    expect(wrapper.find(".pricing-card__badge").text()).toBe("Le plus populaire");
+  });
+
   it("emits select event with plan name on CTA click", async () => {
     const wrapper = mount(PricingCard, {
       props: {

package/app/components/02.molecules/profile-section/CONSUMER-STYLING.md

@@ -0,0 +1,53 @@
+# ProfileSection — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--profile-section-gap` | `2rem` | Gap between picture and info, single column (below 768px) |
+| `--profile-section-gap-wide` | `4rem` | Gap between picture and info columns (768px+) |
+| `--profile-section-picture-width` | `384px` | Picture column width (768px+) |
+| `--profile-section-picture-aspect-ratio` | `3 / 4` | Picture frame aspect ratio |
+| `--profile-section-picture-border-radius` | `8px` | Picture frame corner rounding |
+| `--profile-section-info-block-gap` | `1.5rem` | Space after each `profile-info-N` block |
+| `--profile-section-links-gap` | `1rem` | Gap between items in the `profileLinks` slot |
+
+Highlight colours inside info blocks read the global `--colour-text-accent`,
+`--colour-link-default` and `--colour-link-hover` (see **State hooks**).
+
+> Changed 2026-09-27: all of these were hardcoded values; they're now tokens with the same
+> defaults.
+
+No private `--_` tokens.
+
+---
+
+## State hooks
+
+Inner classes: `.profile-section-header`, `.profile-section-inner` (the grid),
+`.profile-section-picture` (frame), `.profile-section-image` (the `NuxtImg`),
+`.profile-section-info`, `.profile-section-info-content`, `.profile-section-info-block` (one per
+`profile-info-N` slot), `.profile-section-links`.
+
+Content hooks inside info blocks: an element with class `location` or `services` containing a
+`.highlight` gets a bold accent (`location`) or link (`services`) colour.
+
+> Changed 2026-09-27: renamed from `.picture`, `.profile-picture`, `.profile-info`,
+> `.profile-info-content`, `.profile-info-block` and `.profile-links`. `.picture` in particular
+> collided with any consumer class of the same name.
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root element. Reactive after mount.

package/app/components/02.molecules/profile-section/ProfileSection.vue

@@ -1,27 +1,29 @@
 <template>
   <component :is="tag" class="profile-section" :class="[elementClasses]" :aria-labelledby="ariaLabelledby">
     <header class="profile-section-header">
-      <slot v-if="hasEyebrowTextSlot" name="eyebrowText"></slot>
-      <slot v-if="hasHeroTextSlot" name="heroText" :heading-id="headingId"></slot>
+      <slot v-if="hasEyebrowTextSlot()" name="eyebrowText"></slot>
+      <slot v-if="hasHeroTextSlot()" name="heroText" :heading-id="headingId"></slot>
     </header>
 
     <div class="profile-section-inner">
-      <div class="picture">
-        <NuxtImg :src="props.profilePicture.src" :alt="props.profilePicture.alt" class="profile-picture" />
+      <div class="profile-section-picture">
+        <NuxtImg
+          :src="profilePicture.src"
+          :alt="profilePicture.alt"
+          :width="profilePicture.width ?? 828"
+          :height="profilePicture.height ?? 1104"
+          class="profile-section-image"
+        />
       </div>
-      <div class="profile-info">
-        <div class="profile-info-content">
-          <div v-for="slotName in profileInfoSlots" :key="slotName" class="profile-info-block">
-            <slot :name="slotName">
-              <p>Profile info content {{ slotName }}</p>
-            </slot>
+      <div class="profile-section-info">
+        <div class="profile-section-info-content">
+          <div v-for="slotName in profileInfoSlots()" :key="slotName" class="profile-section-info-block">
+            <slot :name="slotName"></slot>
           </div>
         </div>
 
-        <div v-if="hasProfileLinksSlot" class="profile-links">
-          <slot name="profileLinks">
-            <p>Profile links content</p>
-          </slot>
+        <div v-if="hasProfileLinksSlot()" class="profile-section-links">
+          <slot name="profileLinks"></slot>
         </div>
       </div>
     </div>
@@ -29,10 +31,7 @@
 </template>
 
 <script setup lang="ts">
-interface ProfilePicture {
-  src: string;
-  alt: string;
-}
+import type { ProfilePicture } from "~/types/components";
 
 interface Props {
   tag?: "div" | "section" | "article" | "main";
@@ -49,18 +48,18 @@ const props = withDefaults(defineProps<Props>(), {
 const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
 
 const slots = useSlots();
-const hasEyebrowTextSlot = computed(() => Boolean(slots.eyebrowText));
-const hasHeroTextSlot = computed(() => Boolean(slots.heroText));
-const hasProfileLinksSlot = computed(() => Boolean(slots.profileLinks));
+const hasEyebrowTextSlot = () => Boolean(slots.eyebrowText);
+const hasHeroTextSlot = () => Boolean(slots.heroText);
+const hasProfileLinksSlot = () => Boolean(slots.profileLinks);
 
-const profileInfoSlots = computed(() => {
+const profileInfoSlots = () => {
   const provided = Object.keys(slots)
     .filter((key) => /^profile-info-\d+$/.test(key))
     .sort((a, b) => parseInt(a.split("-")[2] ?? "0") - parseInt(b.split("-")[2] ?? "0"));
   return provided.length > 0
     ? provided
     : Array.from({ length: props.profileInfoCount }, (_, i) => `profile-info-${i + 1}`);
-});
+};
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
@@ -75,68 +74,56 @@ watch(
 <style lang="css">
 @layer components {
   .profile-section {
-    /* .profile-section-header {
-  } */
     .profile-section-inner {
       display: grid;
       grid-template-columns: 1fr;
-      gap: 2rem;
+      gap: var(--profile-section-gap, 2rem);
 
       @media (min-width: 768px) {
-        grid-template-columns: 384px 1fr;
+        grid-template-columns: var(--profile-section-picture-width, 384px) 1fr;
         align-items: start;
-        gap: 4rem;
+        gap: var(--profile-section-gap-wide, 4rem);
       }
 
-      .picture {
-        aspect-ratio: 3 / 4;
-        border-radius: 8px;
+      .profile-section-picture {
+        aspect-ratio: var(--profile-section-picture-aspect-ratio, 3 / 4);
+        border-radius: var(--profile-section-picture-border-radius, 8px);
         overflow: hidden;
 
-        .profile-picture {
+        .profile-section-image {
           object-fit: cover;
           width: 100%;
+          height: 100%;
         }
       }
 
-      .profile-info {
-        .profile-info-content {
-          .profile-info-block {
-            margin-block-end: 1.5rem;
-
-            /* .experience {
-          } */
-
-            .location {
-              .highlight {
-                color: var(--colour-text-accent);
-                font-weight: 600;
-                font-variation-settings: "wght" 600;
-              }
-            }
-
-            .services {
-              .highlight {
-                color: var(--colour-link-default);
-                font-weight: 600;
-                font-variation-settings: "wght" 600;
-
-                &:hover {
-                  color: var(--colour-link-hover);
-                }
-              }
-            }
-          }
+      .profile-section-info-block {
+        margin-block-end: var(--profile-section-info-block-gap, 1.5rem);
+
+        .location .highlight {
+          color: var(--colour-text-accent);
+          font-weight: 600;
+          font-variation-settings: "wght" 600;
         }
 
-        .profile-links {
-          display: flex;
-          flex-grow: 1;
-          gap: 1rem;
-          align-items: end;
-          justify-content: flex-end;
+        .services .highlight {
+          color: var(--colour-link-default);
+          font-weight: 600;
+          font-variation-settings: "wght" 600;
+
+          &:hover {
+            color: var(--colour-link-hover);
+          }
         }
       }
+
+      .profile-section-links {
+        display: flex;
+        flex-grow: 1;
+        gap: var(--profile-section-links-gap, 1rem);
+        align-items: end;
+        justify-content: flex-end;
+      }
     }
   }
 }

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

@@ -56,7 +56,7 @@ describe("ProfileSection", () => {
     const wrapper = await mountSuspended(ProfileSection, {
       props: defaultProps,
     });
-    const blocks = wrapper.findAll(".profile-info-block");
+    const blocks = wrapper.findAll(".profile-section-info-block");
     expect(blocks.length).toBe(3);
   });
 
@@ -64,7 +64,7 @@ describe("ProfileSection", () => {
     const wrapper = await mountSuspended(ProfileSection, {
       props: { ...defaultProps, profileInfoCount: 5 },
     });
-    const blocks = wrapper.findAll(".profile-info-block");
+    const blocks = wrapper.findAll(".profile-section-info-block");
     expect(blocks.length).toBe(5);
   });
 
@@ -163,7 +163,7 @@ describe("ProfileSection", () => {
     const wrapper = await mountSuspended(ProfileSection, {
       props: defaultProps,
     });
-    expect(wrapper.find(".profile-links").exists()).toBe(false);
+    expect(wrapper.find(".profile-section-links").exists()).toBe(false);
   });
 
   it("renders profile-links section when profileLinks slot is provided", async () => {
@@ -173,7 +173,7 @@ describe("ProfileSection", () => {
         profileLinks: "<a href='/'>Link</a>",
       },
     });
-    expect(wrapper.find(".profile-links").exists()).toBe(true);
+    expect(wrapper.find(".profile-section-links").exists()).toBe(true);
     expect(wrapper.html()).toContain("Link");
   });