srcdev-nuxt-components 9.6.12 → 9.6.14

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

@@ -17,9 +17,9 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
               </li>
             </ol>
           </nav>
-          <div class="eyebrow-text large">Freehand colour artistry</div>
-          <h1 id="v-0-0" class="hero-text display axis-horizontal">
-            <!--v-if--><span class="text-block-0 normal">Balayage</span>
+          <div class="eyebrow-text" data-font-size="large">Freehand colour artistry</div>
+          <h1 id="v-0-0" class="hero-text" data-font-size="display" data-axis="horizontal">
+            <!--v-if--><span class="hero-text-segment normal">Balayage</span>
           </h1>
           <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>
@@ -30,12 +30,12 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
     <div class="service-detail__body">
       <div class="service-detail__main">
         <p class="page-body-normal">Balayage is a freehand hair colouring technique that creates a soft gradient.</p>
-        <h2 class="hero-text mb-20 subheading axis-horizontal">
-          <!--v-if--><span class="text-block-0 normal">What is Balayage?</span>
+        <h2 class="hero-text mb-20" data-font-size="subheading" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">What is Balayage?</span>
         </h2>
         <p class="page-body-normal">The word balayage comes from the French for 'to sweep'.</p>
-        <h2 class="hero-text mb-20 subheading axis-horizontal">
-          <!--v-if--><span class="text-block-0 normal">The Process</span>
+        <h2 class="hero-text mb-20" data-font-size="subheading" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">The Process</span>
         </h2>
         <ol role="list" class="stepper-list has-connectors service-detail__process">
           <li class="stepper-list-item indicator-top indicator-circle" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
@@ -57,8 +57,8 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
             </div>
           </li>
         </ol>
-        <h2 class="hero-text mb-20 subheading axis-horizontal">
-          <!--v-if--><span class="text-block-0 normal">Ideal For</span>
+        <h2 class="hero-text mb-20" data-font-size="subheading" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">Ideal For</span>
         </h2>
         <ul class="service-detail__ideal-for">
           <li class="service-detail__ideal-for-item"><span class="iconify i-mdi:diamond-stone service-detail__ideal-for-icon" aria-hidden="true"></span>
@@ -68,12 +68,12 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
             <p class="page-body-normal">Low-maintenance colour</p>
           </li>
         </ul>
-        <h2 class="hero-text mb-20 subheading axis-horizontal">
-          <!--v-if--><span class="text-block-0 normal">Aftercare &amp; Maintenance</span>
+        <h2 class="hero-text mb-20" data-font-size="subheading" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">Aftercare &amp; Maintenance</span>
         </h2>
         <p class="page-body-normal">Balayage is low maintenance since regrowth is soft and natural.</p>
-        <h2 class="hero-text mb-20 subheading axis-horizontal">
-          <!--v-if--><span class="text-block-0 normal">Frequently Asked Questions</span>
+        <h2 class="hero-text mb-20" data-font-size="subheading" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">Frequently Asked Questions</span>
         </h2>
         <div class="service-detail__faqs">
           <div class="service-detail__faq">
@@ -98,8 +98,8 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
   <div class="page-row content service-detail__final-cta-row">
     <div class="service-detail__final-cta">
       <div class="service-detail__final-cta-copy">
-        <h2 class="hero-text subheading axis-horizontal">
-          <!--v-if--><span class="text-block-0 normal">Ready to book your appointment?</span>
+        <h2 class="hero-text" data-font-size="subheading" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">Ready to book your appointment?</span>
         </h2>
         <p class="page-body-normal">Get in touch to book your appointment.</p>
       </div>

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

@@ -5,9 +5,9 @@ exports[`ServiceSummary > renders correct HTML structure 1`] = `
   <div class="service-summary__grid">
     <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/test.jpg 1x, /_ipx/s_2160x2160/images/test.jpg 2x" alt="Test Service" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/s_1080x1080/images/test.jpg"></div>
     <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
-      <div class="eyebrow-text large">A subtitle</div>
-      <h2 id="v-0-0" class="hero-text mb-20 title axis-horizontal">
-        <!--v-if--><span class="text-block-0 normal">Test Service</span>
+      <div class="eyebrow-text" data-font-size="large">A subtitle</div>
+      <h2 id="v-0-0" class="hero-text mb-20" data-font-size="title" data-axis="horizontal">
+        <!--v-if--><span class="hero-text-segment normal">Test Service</span>
       </h2>
       <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>

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

@@ -217,14 +217,14 @@ describe("ServicesCard", () => {
     const wrapper = await mountSuspended(ServicesCard, {
       props: { serviceData: mockService },
     });
-    expect(wrapper.find(".eyebrow-text").classes()).toContain("large");
+    expect(wrapper.find(".eyebrow-text").attributes("data-font-size")).toBe("large");
   });
 
   it("applies eyebrowConfig.fontSize override", async () => {
     const wrapper = await mountSuspended(ServicesCard, {
       props: { serviceData: mockService, eyebrowConfig: { fontSize: "small" } },
     });
-    expect(wrapper.find(".eyebrow-text").classes()).toContain("small");
+    expect(wrapper.find(".eyebrow-text").attributes("data-font-size")).toBe("small");
   });
 
   it("applies eyebrowConfig.tag override", async () => {
@@ -254,7 +254,7 @@ describe("ServicesCard", () => {
     const wrapper = await mountSuspended(ServicesCard, {
       props: { serviceData: mockService, heroConfig: { fontSize: "title" } },
     });
-    expect(wrapper.find(".hero-text").classes()).toContain("title");
+    expect(wrapper.find(".hero-text").attributes("data-font-size")).toBe("title");
   });
 
   // ─── styleClassPassthrough ──────────────────────────────────────────────

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

@@ -7,9 +7,9 @@ exports[`ServicesCard > renders correct HTML structure 1`] = `
     <div class="grid-stack__layer"></div>
   </div>
   <div class="services-card-details">
-    <div class="eyebrow-text large">A subtitle</div>
-    <h2 class="hero-text heading axis-horizontal">
-      <!--v-if--><span class="text-block-0 normal">Test Service</span>
+    <div class="eyebrow-text" data-font-size="large">A subtitle</div>
+    <h2 class="hero-text" data-font-size="heading" data-axis="horizontal">
+      <!--v-if--><span class="hero-text-segment normal">Test Service</span>
     </h2>
     <div class="services-card-description">A short description of the service.</div>
     <div class="services-card-footer">

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

@@ -139,7 +139,7 @@ describe("ServicesCardGrid", () => {
       props: { servicesData: mockServices, eyebrowConfig: { fontSize: "small" } },
     });
     wrapper.findAll(".eyebrow-text").forEach((el) => {
-      expect(el.classes()).toContain("small");
+      expect(el.attributes("data-font-size")).toBe("small");
     });
   });
 

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

@@ -6,9 +6,9 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
     <div class="service-summary__grid">
       <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>
+        <div class="eyebrow-text" data-font-size="large">Subtitle for Locs Installation</div>
+        <h2 id="v-0-0-0" class="hero-text mb-20" data-font-size="title" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">Locs Installation</span>
         </h2>
         <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>
@@ -19,9 +19,9 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
     <div class="service-summary__grid">
       <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>
+        <div class="eyebrow-text" data-font-size="large">Subtitle for Locs Retwist</div>
+        <h2 id="v-0-0-1" class="hero-text mb-20" data-font-size="title" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">Locs Retwist</span>
         </h2>
         <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>
@@ -32,9 +32,9 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
     <div class="service-summary__grid">
       <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>
+        <div class="eyebrow-text" data-font-size="large">Subtitle for Colour Treatment</div>
+        <h2 id="v-0-0-2" class="hero-text mb-20" data-font-size="title" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">Colour Treatment</span>
         </h2>
         <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>

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

@@ -8,9 +8,9 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
       <div class="grid-stack__layer"></div>
     </div>
     <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>
+      <div class="eyebrow-text" data-font-size="large">Subtitle for Locs Installation</div>
+      <h2 class="hero-text" data-font-size="heading" data-axis="horizontal">
+        <!--v-if--><span class="hero-text-segment normal">Locs Installation</span>
       </h2>
       <div class="services-card-description">Short description for Locs Installation.</div>
       <div class="services-card-footer">
@@ -31,9 +31,9 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
       <div class="grid-stack__layer"></div>
     </div>
     <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>
+      <div class="eyebrow-text" data-font-size="large">Subtitle for Locs Retwist</div>
+      <h2 class="hero-text" data-font-size="heading" data-axis="horizontal">
+        <!--v-if--><span class="hero-text-segment normal">Locs Retwist</span>
       </h2>
       <div class="services-card-description">Short description for Locs Retwist.</div>
       <div class="services-card-footer">
@@ -54,9 +54,9 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
       <div class="grid-stack__layer"></div>
     </div>
     <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>
+      <div class="eyebrow-text" data-font-size="large">Subtitle for Colour Treatment</div>
+      <h2 class="hero-text" data-font-size="heading" data-axis="horizontal">
+        <!--v-if--><span class="hero-text-segment normal">Colour Treatment</span>
       </h2>
       <div class="services-card-description">Short description for Colour Treatment.</div>
       <div class="services-card-footer">

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

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { defineComponent, h, nextTick, ref } from "vue";
 import { useTooltipsGuide } from "../useTooltips";
-import DisplayTooltipDefined from "~/components/02.molecules/display-tooltip-defined/DisplayTooltipDefined.vue";
+import DisplayTooltipRich from "~/components/02.molecules/display-tooltip-rich/DisplayTooltipRich.vue";
 
 const flush = async () => {
   for (let i = 0; i < 5; i++) await nextTick();
@@ -18,8 +18,8 @@ const mountGuide = () =>
       },
       render() {
         return h("div", { ref: "containerRef" }, [
-          h(DisplayTooltipDefined, { tooltipId: "one", contentText: { tooltipTitle: { tag: "h4", text: "One" } } }),
-          h(DisplayTooltipDefined, { tooltipId: "two", contentText: { tooltipTitle: { tag: "h4", text: "Two" } } }),
+          h(DisplayTooltipRich, { tooltipId: "one", contentText: { tooltipTitle: { tag: "h4", text: "One" } } }),
+          h(DisplayTooltipRich, { tooltipId: "two", contentText: { tooltipTitle: { tag: "h4", text: "Two" } } }),
         ]);
       },
     }),

package/app/types/components/index.ts

@@ -15,7 +15,7 @@ export * from "./social-icons-list.d"
 export * from "./content-docs.d"
 export * from "./breadcrumb"
 export * from "./cookie-consent-banner.d"
-export * from "./display-tooltip-defined.d"
+export * from "./display-tooltip-rich.d"
 export * from "./marquee-scroller.d"
 export * from "./rotating-carousel-image.d"
 export * from "./skip-links.d"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.12",
+  "version": "9.6.14",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

package/.vscode/srcdev-component-display-tooltip-defined.code-snippets

@@ -1,29 +0,0 @@
-{
-  "SRCDEV DisplayTooltipDefined Basic": {
-    "description": "DisplayTooltipDefined — structured title/body/action tooltip",
-    "scope": "vue,html",
-    "body": [
-      "<DisplayTooltipDefined",
-      "  :content-text=\"{",
-      "    tooltipTitle: { tag: 'h4', text: '$1' },",
-      "    tooltipContent: { tag: 'p', text: '$0' },",
-      "  }\"",
-      "/>"
-    ]
-  },
-  "SRCDEV DisplayTooltipDefined Localised Copy": {
-    "description": "DisplayTooltipDefined with localised trigger/close-button copy",
-    "scope": "vue,html",
-    "body": [
-      "<DisplayTooltipDefined",
-      "  :content-text=\"{",
-      "    tooltipTitle: { tag: 'h4', text: '$1' },",
-      "    tooltipContent: { tag: 'p', text: '$2' },",
-      "  }\"",
-      "  trigger-aria-label=\"${3:Toggle the popover}\"",
-      "  close-button-text=\"${4:Close}\"",
-      "  close-button-aria-label=\"${5:Close tool tip}\"",
-      "/>"
-    ]
-  }
-}

package/app/components/02.molecules/display-tooltip-defined/CONSUMER-STYLING.md

@@ -1,53 +0,0 @@
-# DisplayTooltipDefined — Consumer Styling Guide
-
-## Public token API
-
-| Token | Default | Controls |
-|---|---|---|
-| `--display-tooltip-defined-content-gap` | `1.2rem` | Gap between title/body/action/close-button |
-| `--display-tooltip-defined-title-colour` | `inherit` | `tooltipTitle` text colour |
-| `--display-tooltip-defined-title-margin-block` | `0 0` | `tooltipTitle` block margin |
-| `--display-tooltip-defined-title-font-size` | `1.6rem` | `tooltipTitle` font size |
-| `--display-tooltip-defined-title-font-weight` | `700` | `tooltipTitle` font weight |
-| `--display-tooltip-defined-title-line-height` | `120%` | `tooltipTitle` line height |
-| `--display-tooltip-defined-title-letter-spacing` | `normal` | `tooltipTitle` letter spacing |
-| `--display-tooltip-defined-body-colour` | `inherit` | `tooltipContent` text colour |
-| `--display-tooltip-defined-body-margin-block` | `0 0` | `tooltipContent` block margin |
-| `--display-tooltip-defined-body-font-size` | `1.3rem` | `tooltipContent` font size |
-| `--display-tooltip-defined-body-font-weight` | `inherit` | `tooltipContent` font weight |
-| `--display-tooltip-defined-body-line-height` | `140%` | `tooltipContent` line height |
-| `--display-tooltip-defined-body-letter-spacing` | `normal` | `tooltipContent` letter spacing |
-| `--display-tooltip-defined-action-colour` | `inherit` | `tooltipAction` text colour |
-| `--display-tooltip-defined-action-margin-block` | `0 0` | `tooltipAction` block margin |
-| `--display-tooltip-defined-action-font-size` | `1.4rem` | `tooltipAction` font size |
-| `--display-tooltip-defined-action-font-weight` | `700` | `tooltipAction` font weight |
-| `--display-tooltip-defined-action-line-height` | `130%` | `tooltipAction` line height |
-| `--display-tooltip-defined-action-letter-spacing` | `normal` | `tooltipAction` letter spacing |
-| `--display-tooltip-defined-close-button-margin-block` | `1.2rem 0` | Space above the close button |
-
-The three `*-colour` tokens default to `inherit`, which resolves to the underlying
-`DisplayTooltip` popover's own `--display-tooltip-popover-text-colour` (see its
-CONSUMER-STYLING.md) — override there for a uniform colour change, or override one of these three
-for a single field.
-
-```css
-.my-page {
-  --display-tooltip-defined-title-colour: var(--brand-accent);
-  --display-tooltip-defined-title-font-size: 1.8rem;
-}
-```
-
-This component also renders (and can override) every `--display-tooltip-*` token from the
-underlying `DisplayTooltip` — see its CONSUMER-STYLING.md for the full popover/trigger/close-button
-token API.
-
----
-
-## 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`.
-

package/app/components/02.molecules/display-tooltip-defined/DisplayTooltipDefined.vue

@@ -1,117 +0,0 @@
-<template>
-  <DisplayTooltip
-    :tooltip-id="tooltipId"
-    :trigger-aria-label="triggerAriaLabel"
-    :style-class-passthrough="styleClassPassthrough"
-  >
-    <template v-if="$slots.triggerContent" #triggerContent>
-      <slot name="triggerContent"></slot>
-    </template>
-    <template #tooltipContent="{ close }">
-      <div class="popover-content-defined">
-        <component
-          :is="contentText.tooltipTitle?.tag"
-          v-if="contentText.tooltipTitle"
-          class="tooltip-title subtitle-sm"
-        >
-          {{ contentText.tooltipTitle.text }}
-        </component>
-        <component :is="contentText.tooltipContent?.tag" v-if="contentText.tooltipContent" class="tooltip-body body-sm">
-          {{ contentText.tooltipContent.text }}
-        </component>
-        <component
-          :is="contentText.tooltipAction?.tag"
-          v-if="contentText.tooltipAction"
-          class="tooltip-action input-value"
-        >
-          {{ contentText.tooltipAction.text }}
-        </component>
-        <button
-          :popovertarget="tooltipId"
-          popovertargetaction="hide"
-          class="display-tooltip-close-button"
-          :aria-label="closeButtonAriaLabel"
-          @click="close"
-        >
-          {{ closeButtonText }}
-        </button>
-      </div>
-    </template>
-  </DisplayTooltip>
-</template>
-
-<script setup lang="ts">
-import type { TooltipContentText } from "~/types/components";
-
-interface Props {
-  tooltipId?: string;
-  contentText?: TooltipContentText;
-  /** aria-label on the trigger button — override for localisation. */
-  triggerAriaLabel?: string;
-  /** Visible text on the close button — override for localisation. */
-  closeButtonText?: string;
-  /** aria-label on the close button — override for localisation. */
-  closeButtonAriaLabel?: string;
-  styleClassPassthrough?: string | string[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  tooltipId: "",
-  contentText: () => ({}),
-  triggerAriaLabel: "Toggle the popover",
-  closeButtonText: "Close",
-  closeButtonAriaLabel: "Close tool tip",
-  styleClassPassthrough: () => [],
-});
-
-const tooltipId = computed(() =>
-  props.tooltipId.length ? `nuxt-tooltip-${props.tooltipId}` : `nuxt-tooltip-${useId()}`
-);
-</script>
-
-<style lang="css">
-@layer components {
-  .display-tooltip-core {
-    .popover-content-defined {
-      display: flex;
-      flex-direction: column;
-      gap: var(--display-tooltip-defined-content-gap, 1.2rem);
-
-      /* margin-block resets below neutralise the UA default margin of whatever tag the consumer
-         picks via contentText.*.tag (e.g. h3/h4 carry their own margin-block) — gap is the only
-         intended spacing mechanism between these three. */
-      .tooltip-title {
-        color: var(--display-tooltip-defined-title-colour, inherit);
-        margin-block: var(--display-tooltip-defined-title-margin-block, 0 0);
-        font-size: var(--display-tooltip-defined-title-font-size, 1.6rem);
-        font-weight: var(--display-tooltip-defined-title-font-weight, 700);
-        line-height: var(--display-tooltip-defined-title-line-height, 120%);
-        letter-spacing: var(--display-tooltip-defined-title-letter-spacing, normal);
-      }
-
-      .tooltip-body {
-        color: var(--display-tooltip-defined-body-colour, inherit);
-        margin-block: var(--display-tooltip-defined-body-margin-block, 0 0);
-        font-size: var(--display-tooltip-defined-body-font-size, 1.3rem);
-        font-weight: var(--display-tooltip-defined-body-font-weight, inherit);
-        line-height: var(--display-tooltip-defined-body-line-height, 140%);
-        letter-spacing: var(--display-tooltip-defined-body-letter-spacing, normal);
-      }
-
-      .tooltip-action {
-        color: var(--display-tooltip-defined-action-colour, inherit);
-        margin-block: var(--display-tooltip-defined-action-margin-block, 0 0);
-        font-size: var(--display-tooltip-defined-action-font-size, 1.4rem);
-        font-weight: var(--display-tooltip-defined-action-font-weight, 700);
-        line-height: var(--display-tooltip-defined-action-line-height, 130%);
-        letter-spacing: var(--display-tooltip-defined-action-letter-spacing, normal);
-      }
-
-      .display-tooltip-close-button {
-        align-self: flex-end;
-        margin-block: var(--display-tooltip-defined-close-button-margin-block, 1.2rem 0);
-      }
-    }
-  }
-}
-</style>

package/app/components/02.molecules/display-tooltip-defined/stories/DisplayTooltipDefined.stories.ts

@@ -1,129 +0,0 @@
-import { ref } from "vue";
-import DisplayTooltipDefined from "../DisplayTooltipDefined.vue";
-import DisplayTooltip from "../../../01.atoms/display-tooltip/DisplayTooltip.vue";
-import { useTooltipsGuide } from "~/composables/useTooltips";
-import type { Meta, StoryObj } from "@nuxtjs/storybook";
-import type { TooltipContentText } from "~/types/components";
-
-const contentText: TooltipContentText = {
-  tooltipTitle: { tag: "h4", text: "Free delivery" },
-  tooltipContent: { tag: "p", text: "Orders over £50 qualify for free standard delivery." },
-  tooltipAction: { tag: "span", text: "See delivery policy" },
-};
-
-const meta: Meta<typeof DisplayTooltipDefined> = {
-  title: "Molecules/DisplayTooltipDefined",
-  component: DisplayTooltipDefined,
-  argTypes: {
-    tooltipId: {
-      control: "text",
-      description: "Id used to link the trigger button to the popover. Auto-generated when omitted.",
-      table: { category: "Basic" },
-    },
-    contentText: { table: { disable: true } },
-    styleClassPassthrough: { table: { disable: true } },
-  },
-  args: {
-    contentText,
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Structured title/body/action content variant of DisplayTooltip, plus a built-in close button wired to the popover.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof DisplayTooltipDefined>;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { DisplayTooltipDefined },
-    setup() {
-      return { args };
-    },
-    template: `<div style="padding: 8rem;"><DisplayTooltipDefined v-bind="args" /></div>`,
-  }),
-};
-
-export const TitleOnly: Story = {
-  args: {
-    contentText: { tooltipTitle: { tag: "h4", text: "Just a title" } },
-  },
-  render: (args) => ({
-    components: { DisplayTooltipDefined },
-    setup() {
-      return { args };
-    },
-    template: `<div style="padding: 8rem;"><DisplayTooltipDefined v-bind="args" /></div>`,
-  }),
-};
-
-export const GuidedTour: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Recreates the deleted `app/pages/ui/tooltips.vue` demo: `useTooltipsGuide` walks a container's `[popover]` elements in DOM order, opening each and waiting for its close button before advancing — the autoplay-through-steps pattern seen on some guide intros. Mixes a `DisplayTooltipDefined` step (its close button relabelled \"Next\" via `closeButtonText`) with a plain `DisplayTooltip` step. A hand-written close button must call the `tooltipContent` slot's `close()` as well as carrying `popovertargetaction=\"hide\"`: the attribute alone does nothing on Safari 16, which has no Popover API. Guide auto-starts 800ms after mount in this story; use \"Run guide again\" to replay it.",
-      },
-    },
-  },
-  render: () => ({
-    components: { DisplayTooltipDefined, DisplayTooltip },
-    setup() {
-      const guideContainer = ref<HTMLElement | null>(null);
-      const { isGuideRunning, restartGuide, currentTooltipIndex, totalPopovers } = useTooltipsGuide(guideContainer, {
-        autoStart: true,
-        startDelay: 800,
-      });
-
-      return { guideContainer, isGuideRunning, restartGuide, currentTooltipIndex, totalPopovers };
-    },
-    template: `
-      <div style="padding: 4rem; display: grid; gap: 2rem; max-width: 48rem;">
-        <div style="display: flex; align-items: center; gap: 1.2rem;">
-          <button @click="restartGuide" :disabled="isGuideRunning" style="padding: 0.6rem 1.2rem;">
-            {{ isGuideRunning ? 'Guide running…' : 'Run guide again' }}
-          </button>
-          <span v-if="isGuideRunning" style="font-size: 1.3rem; color: #666;">
-            Step {{ currentTooltipIndex + 1 }} of {{ totalPopovers }} — click Next (Close on the last step) to advance
-          </span>
-        </div>
-
-        <div ref="guideContainer" style="display: grid; gap: 2rem;">
-          <DisplayTooltipDefined
-            close-button-text="Next"
-            close-button-aria-label="Next step"
-            :content-text="{
-              tooltipTitle: { tag: 'h3', text: 'Step 1' },
-              tooltipContent: { tag: 'p', text: 'This step uses DisplayTooltipDefined — structured title/body/action content plus a built-in close button.' },
-              tooltipAction: { tag: 'p', text: 'Step 1 of 2' },
-            }"
-          >
-            <template #triggerContent>Trigger from DisplayTooltipDefined</template>
-          </DisplayTooltipDefined>
-
-          <DisplayTooltip tooltip-id="guided-tour-step-2">
-            <template #triggerContent>Trigger from plain DisplayTooltip</template>
-            <template #tooltipContent="{ close }">
-              <p>This step uses plain DisplayTooltip — you supply the close button yourself via the tooltipContent slot.</p>
-              <button
-                popovertarget="guided-tour-step-2"
-                popovertargetaction="hide"
-                class="display-tooltip-close-button"
-                style="align-self: flex-end;"
-                aria-label="Close tool tip"
-                @click="close"
-              >
-                Close
-              </button>
-            </template>
-          </DisplayTooltip>
-        </div>
-      </div>
-    `,
-  }),
-};