srcdev-nuxt-components 9.4.4 → 9.4.5

package/app/components/01.atoms/display-tooltip/DisplayTooltip.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="display-tooltip-core" :class="[elementClasses]" :style="{ '--_anchor-name': tooltipAnchorName }">
+    <div class="display-tooltip-trigger-wrapper body-md">
+      <slot v-if="$slots.triggerContent" name="triggerContent"></slot>
+      <button
+        :popovertarget="tooltipId"
+        popovertargetaction="toggle"
+        class="display-tooltip-trigger-button"
+        :class="{ hide: hideTrigger }"
+        aria-label="Toggle the popover"
+      >
+        <Icon name="fa7-solid:circle-question" class="display-tooltip-trigger-icon" aria-hidden="true" />
+      </button>
+    </div>
+    <div :id="tooltipId" popover class="display-tooltip-popover">
+      <div class="display-tooltip-popover-content">
+        <slot name="tooltipContent"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tooltipId?: string;
+  hideTrigger?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tooltipId: "",
+  hideTrigger: false,
+  styleClassPassthrough: () => [],
+});
+
+const tooltipId = computed(() => (props.tooltipId.length ? props.tooltipId : `nuxt-tooltip-${useId()}`));
+const tooltipAnchorName = `--tooltip-anchor-${useId()}`;
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .display-tooltip-core {
+    padding-block: var(--display-tooltip-padding-block, 0.8rem);
+    position: relative;
+
+    .display-tooltip-trigger-wrapper {
+      display: inline-flex;
+      align-items: flex-start;
+
+      .display-tooltip-trigger-button {
+        margin-left: var(--display-tooltip-trigger-gap, 0.8rem);
+
+        &.hide {
+          width: 0;
+          overflow: hidden;
+          opacity: 0;
+        }
+
+        .display-tooltip-trigger-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--display-tooltip-trigger-icon-box-size, 2rem);
+          height: var(--display-tooltip-trigger-icon-box-size, 2rem);
+          color: var(--display-tooltip-trigger-icon-colour, var(--theme-text));
+          font-size: var(--display-tooltip-trigger-icon-font-size, 1.8rem);
+          line-height: var(--display-tooltip-trigger-icon-box-size, 2rem);
+        }
+      }
+    }
+
+    .display-tooltip-trigger-button {
+      all: unset;
+      aspect-ratio: 1 / 1;
+      width: 2.4rem;
+      display: grid;
+      place-items: center;
+
+      outline: var(--display-tooltip-trigger-outline-width, 0.1rem) solid transparent;
+      anchor-name: var(--_anchor-name);
+
+      @supports (corner-shape: squircle) {
+        corner-shape: squircle;
+        border-radius: 50%;
+      }
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+
+      &:hover,
+      &:focus-visible {
+        outline-color: var(--display-tooltip-trigger-outline-colour-hover, var(--theme-ring));
+        outline-offset: 0.2rem;
+      }
+    }
+
+    .display-tooltip-popover {
+      display: none;
+      position: absolute;
+      border: none;
+      width: var(--display-tooltip-popover-width, 30rem);
+
+      outline: var(--display-tooltip-popover-outline-width, 0.1rem) solid
+        var(--display-tooltip-popover-outline-colour, light-dark(var(--slate-02), var(--slate-06)));
+      color: var(--display-tooltip-popover-text-colour, light-dark(var(--slate-09), var(--slate-01)));
+      background-color: var(--display-tooltip-popover-background-colour, light-dark(var(--slate-00), var(--slate-07)));
+      border-radius: var(--display-tooltip-popover-border-radius, 0.8rem);
+      box-shadow: var(
+        --display-tooltip-popover-shadow,
+        light-dark(0 0.4rem 1.6rem rgba(0, 0, 0, 0.12), 0 0.4rem 1.6rem rgba(0, 0, 0, 0.5))
+      );
+
+      position-anchor: var(--_anchor-name);
+      margin: 0;
+      inset: auto;
+      top: calc(anchor(top) + 0rem);
+      left: calc(anchor(right) + var(--display-tooltip-popover-offset, 0.1rem));
+      opacity: 0;
+      transition:
+        opacity 200ms,
+        display 200ms,
+        overlay 200ms;
+
+      transition-behavior: allow-discrete;
+      position-try-fallbacks: flip-inline;
+
+      .display-tooltip-popover-content {
+        padding: var(--display-tooltip-popover-padding, 1.2rem);
+        display: flex;
+        flex-direction: column;
+        gap: var(--display-tooltip-popover-content-gap, 1.2rem);
+
+        .display-tooltip-close-button {
+          all: unset;
+          cursor: pointer;
+          color: var(--display-tooltip-close-button-colour, light-dark(var(--slate-09), var(--slate-01)));
+          border: var(--display-tooltip-close-button-border-width, 0.1rem) solid
+            var(--display-tooltip-close-button-border-colour, light-dark(var(--slate-03), var(--slate-06)));
+          outline: var(--display-tooltip-close-button-outline-width, 0.1rem) solid transparent;
+
+          font-weight: 600;
+          padding: var(--display-tooltip-close-button-padding, 0.4rem 1rem);
+
+          &:hover,
+          &:focus {
+            text-decoration: underline;
+            border-color: var(
+              --display-tooltip-close-button-border-colour-hover,
+              light-dark(var(--slate-06), var(--slate-03))
+            );
+            outline-color: var(
+              --display-tooltip-close-button-outline-colour-hover,
+              light-dark(var(--slate-06), var(--slate-03))
+            );
+            outline-offset: 0.2rem;
+          }
+        }
+      }
+
+      &:popover-open {
+        display: flex;
+        opacity: 1;
+
+        flex-direction: column;
+
+        @starting-style {
+          display: flex;
+          opacity: 0;
+        }
+      }
+    }
+  }
+}
+</style>

package/app/components/01.atoms/display-tooltip/stories/DisplayTooltip.stories.ts

@@ -0,0 +1,94 @@
+import DisplayTooltip from "../DisplayTooltip.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof DisplayTooltip> = {
+  title: "Atoms/DisplayTooltip",
+  component: DisplayTooltip,
+  argTypes: {
+    tooltipId: {
+      control: "text",
+      description: "Id used to link the trigger button to the popover. Auto-generated when omitted.",
+      table: { category: "Basic" },
+    },
+    hideTrigger: {
+      control: "boolean",
+      description: "Visually hides the trigger button (kept in the DOM) — e.g. while an equivalent trigger is provided via the triggerContent slot.",
+      table: { category: "Basic" },
+    },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    hideTrigger: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A trigger button that opens an anchor-positioned popover panel, built on the native Popover API and CSS anchor-positioning. See DisplayTooltipDefined for a structured title/body/action content variant.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DisplayTooltip>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { DisplayTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="padding: 8rem;">
+        <DisplayTooltip v-bind="args">
+          <template #tooltipContent>
+            <p>This is some helpful additional information.</p>
+          </template>
+        </DisplayTooltip>
+      </div>
+    `,
+  }),
+};
+
+export const WithTriggerContent: Story = {
+  render: (args) => ({
+    components: { DisplayTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="padding: 8rem;">
+        <DisplayTooltip v-bind="args">
+          <template #triggerContent>
+            <span>Delivery cost</span>
+          </template>
+          <template #tooltipContent>
+            <p>Free delivery on orders over £50.</p>
+          </template>
+        </DisplayTooltip>
+      </div>
+    `,
+  }),
+};
+
+export const CustomColours: Story = {
+  render: (args) => ({
+    components: { DisplayTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="padding: 8rem;">
+        <DisplayTooltip
+          v-bind="args"
+          style="--display-tooltip-popover-background-colour: #1a1a1a; --display-tooltip-popover-text-colour: white; --display-tooltip-popover-outline-colour: transparent;"
+        >
+          <template #tooltipContent>
+            <p>Overriding the public tokens via inline custom properties.</p>
+          </template>
+        </DisplayTooltip>
+      </div>
+    `,
+  }),
+};

package/app/components/01.atoms/display-tooltip/tests/DisplayTooltip.spec.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DisplayTooltip from "../DisplayTooltip.vue";
+
+describe("DisplayTooltip", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayTooltip);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(DisplayTooltip, { props: { tooltipId: "fixed-id" } });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("generates a tooltip id when none is provided", async () => {
+    const wrapper = await mountSuspended(DisplayTooltip);
+    const button = wrapper.find(".display-tooltip-trigger-button");
+    expect(button.attributes("popovertarget")).toMatch(/^nuxt-tooltip-/);
+  });
+
+  it("uses the given tooltipId", async () => {
+    const wrapper = await mountSuspended(DisplayTooltip, { props: { tooltipId: "my-tooltip" } });
+    const button = wrapper.find(".display-tooltip-trigger-button");
+    expect(button.attributes("popovertarget")).toBe("my-tooltip");
+    expect(wrapper.find(".display-tooltip-popover").attributes("id")).toBe("my-tooltip");
+  });
+
+  it("does not render triggerContent slot content when unused", async () => {
+    const wrapper = await mountSuspended(DisplayTooltip);
+    expect(wrapper.find(".slot-trigger").exists()).toBe(false);
+  });
+
+  it("renders the triggerContent slot", async () => {
+    const wrapper = await mountSuspended(DisplayTooltip, {
+      slots: { triggerContent: "<span class='slot-trigger'>Label</span>" },
+    });
+    expect(wrapper.find(".slot-trigger").text()).toBe("Label");
+  });
+
+  it("renders the tooltipContent slot", async () => {
+    const wrapper = await mountSuspended(DisplayTooltip, {
+      slots: { tooltipContent: "<p class='slot-content'>Helpful info</p>" },
+    });
+    expect(wrapper.find(".display-tooltip-popover .slot-content").text()).toBe("Helpful info");
+  });
+
+  it("applies the hide class to the trigger button when hideTrigger is true", async () => {
+    const wrapper = await mountSuspended(DisplayTooltip, { props: { hideTrigger: true } });
+    expect(wrapper.find(".display-tooltip-trigger-button").classes()).toContain("hide");
+  });
+
+  it("does not apply the hide class by default", async () => {
+    const wrapper = await mountSuspended(DisplayTooltip);
+    expect(wrapper.find(".display-tooltip-trigger-button").classes()).not.toContain("hide");
+  });
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(DisplayTooltip, {
+      props: { styleClassPassthrough: ["custom-class"] },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("resets classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DisplayTooltip, {
+      props: { styleClassPassthrough: ["initial-class"] },
+    });
+    expect(wrapper.classes()).toContain("initial-class");
+
+    await wrapper.setProps({ styleClassPassthrough: ["updated-class"] });
+    expect(wrapper.classes()).not.toContain("initial-class");
+    expect(wrapper.classes()).toContain("updated-class");
+  });
+});

package/app/components/01.atoms/display-tooltip/tests/__snapshots__/DisplayTooltip.spec.ts.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DisplayTooltip > renders correct HTML structure 1`] = `
+"<div class="display-tooltip-core" style="--_anchor-name: --tooltip-anchor-v-0-0;">
+  <div class="display-tooltip-trigger-wrapper body-md">
+    <!--v-if--><button popovertarget="fixed-id" popovertargetaction="toggle" class="display-tooltip-trigger-button" aria-label="Toggle the popover"><span class="iconify i-fa7-solid:circle-question display-tooltip-trigger-icon" aria-hidden="true"></span></button>
+  </div>
+  <div id="fixed-id" popover="" class="display-tooltip-popover">
+    <div class="display-tooltip-popover-content"></div>
+  </div>
+</div>"
+`;

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

@@ -0,0 +1,42 @@
+# 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.

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

@@ -0,0 +1,103 @@
+<template>
+  <DisplayTooltip :tooltip-id="tooltipId" :style-class-passthrough="styleClassPassthrough">
+    <template v-if="$slots.triggerContent" #triggerContent>
+      <slot name="triggerContent"></slot>
+    </template>
+    <template #tooltipContent>
+      <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="Close tool tip"
+        >
+          Close
+        </button>
+      </div>
+    </template>
+  </DisplayTooltip>
+</template>
+
+<script setup lang="ts">
+import type { TooltipContentText } from "~/types/components";
+
+interface Props {
+  tooltipId?: string;
+  contentText?: TooltipContentText;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tooltipId: "",
+  contentText: () => ({}),
+  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

@@ -0,0 +1,126 @@
+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 with a plain `DisplayTooltip` step (the guide works with either, since it only needs native `[popover]`/`popovertarget` markup). 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 each popover's Close button to advance
+          </span>
+        </div>
+
+        <div ref="guideContainer" style="display: grid; gap: 2rem;">
+          <DisplayTooltipDefined
+            :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>
+              <p style="margin: 0;">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"
+              >
+                Close
+              </button>
+            </template>
+          </DisplayTooltip>
+        </div>
+      </div>
+    `,
+  }),
+};