srcdev-nuxt-components 9.6.11 → 9.6.13

package/app/components/05.forms/form-fieldset/FormFieldset.vue

@@ -3,11 +3,11 @@
     :id="id"
     :role="groupRole === 'radiogroup' ? 'radiogroup' : undefined"
     :aria-required="groupRole === 'radiogroup' && required ? 'true' : undefined"
-    :aria-invalid="fieldHasError"
+    :aria-invalid="fieldHasError ? 'true' : undefined"
     :name="name"
     class="form-fieldset"
     :class="elementClasses"
-    :data-testid="dataTestid"
+    :data-testid="dataTestid || undefined"
   >
     <legend v-if="legend || slots.legend" class="form-fieldset-legend">
       <slot name="legend">{{ legend }}</slot>
@@ -54,6 +54,7 @@ watch(
 <style lang="css">
 @layer components {
   .form-fieldset {
+    min-inline-size: 0;
     margin-block: var(--form-fieldset-margin-block, 0);
     margin-inline: var(--form-fieldset-margin-inline, 0);
     padding-block: var(--form-fieldset-padding-block, 0);
@@ -65,6 +66,7 @@ watch(
 
     .form-fieldset-legend {
       color: var(--form-fieldset-legend-color, inherit);
+      overflow-wrap: anywhere;
       margin-block: var(--form-fieldset-legend-margin-block, 0.8rem);
       margin-inline: var(--form-fieldset-legend-margin-inline, 0);
       font-size: var(--form-fieldset-legend-font-size, var(--step-5));

package/app/components/05.forms/form-fieldset/stories/FormFieldset.stories.ts

@@ -1,5 +1,8 @@
+import { ref } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import StorybookComponent from "../FormFieldset.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 interface FormFieldsetStoryArgs {
   id: string;
@@ -41,15 +44,53 @@ export default {
     fieldHasError: false,
     styleClassPassthrough: "",
   },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Shared `<fieldset>` + `<legend>` wrapper for a group of controls. `legend` (or the `legend` slot) names the group, the `content` slot holds the controls, `group-role` switches between the native `group` and `radiogroup`, and `required`/`field-has-error` set `aria-required` (radiogroup only) and `aria-invalid`. Mostly a building block: `SingleCheckbox`, `MultipleCheckboxes` and `MultipleRadiobuttons` render it.",
+      },
+    },
+  },
 } as Meta<FormFieldsetStoryArgs>;
 
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const parentNote = `
+  <p style="font-size: 1.3rem; margin: 0 0 1.6rem;">
+    Rendered by
+    <a href="/?path=/story/components-forms-input-checkbox-singlecheckbox--default" target="_top">SingleCheckbox</a>,
+    <a href="/?path=/story/components-forms-input-checkbox-multiplecheckboxes--default" target="_top">MultipleCheckboxes</a> and
+    <a href="/?path=/story/components-forms-input-radio-multipleradiobuttons--default" target="_top">MultipleRadiobuttons</a>,
+    which add styled options, a description and an error message. Inspect the fieldset to see role and aria-* output.
+  </p>
+`;
+
 const Template: StoryFn<FormFieldsetStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
     return { args };
   },
   template: `
-    <div style="margin: 3.6rem; max-width: 48rem;">
+    <div>
+      ${parentNote}
       <StorybookComponent
         :id="args.id"
         :name="args.name"
@@ -68,17 +109,40 @@ const Template: StoryFn<FormFieldsetStoryArgs> = (args) => ({
           </label>
         </template>
       </StorybookComponent>
-      <p style="font-size: 1.3rem; margin-top: 1.6rem;">
-        Rendered by SingleCheckbox, MultipleCheckboxes and MultipleRadiobuttons. Inspect the fieldset to see role and aria-* output.
-      </p>
     </div>
   `,
 });
 
 export const Default = Template.bind({});
+Default.parameters = {
+  docs: { description: { story: "A required radio group: `role=\"radiogroup\"` and `aria-required=\"true\"` on the fieldset." } },
+};
 
 export const CheckboxGroup = Template.bind({});
 CheckboxGroup.args = { groupRole: "group", legend: "Interests", required: false };
+CheckboxGroup.parameters = {
+  docs: { description: { story: "`group-role=\"group\"`: no `role` attribute (a fieldset is already a group) and never `aria-required`." } },
+};
 
 export const WithError = Template.bind({});
 WithError.args = { fieldHasError: true };
+WithError.parameters = {
+  docs: { description: { story: "`field-has-error` sets `aria-invalid=\"true\"`. With it off, the attribute is left out entirely." } },
+};
+
+export const StressTest = Template.bind({});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = {
+  legend:
+    "📞 Bevorzugtekontaktmethodefürrückfragenzuihrerbestellung https://example.com/a/very/long/unbroken/url <b>not bold</b> طريقة الاتصال",
+  fieldHasError: true,
+};
+StressTest.parameters = {
+  initialCanvas: "mobileCanvas",
+  docs: {
+    description: {
+      story:
+        "Long unbroken German, a URL, emoji, HTML-like and right-to-left copy in the legend, with the error state on. Check at every canvas width: the legend wraps inside the dashed outline, the fieldset never grows past its column (it sets `min-inline-size: 0`, so a native fieldset's min-content width can't push it out), and markup renders as text. Wrapping the slotted controls is the slot content's job.",
+    },
+  },
+};

package/app/components/05.forms/form-fieldset/tests/FormFieldset.spec.ts

@@ -22,6 +22,11 @@ describe("FormFieldset", () => {
     expect(fieldset.attributes("data-testid")).toBe("fieldset-test");
   });
 
+  it("omits data-testid when none is given", async () => {
+    const wrapper = await mountSuspended(FormFieldset, { props: baseProps });
+    expect(wrapper.find("fieldset").attributes("data-testid")).toBeUndefined();
+  });
+
   it("renders the content slot", async () => {
     const wrapper = await mountSuspended(FormFieldset, {
       props: baseProps,
@@ -79,6 +84,11 @@ describe("FormFieldset", () => {
       expect(wrapper.find("fieldset").attributes("aria-invalid")).toBe("true");
     });
 
+    it("omits aria-invalid when fieldHasError is false", async () => {
+      const wrapper = await mountSuspended(FormFieldset, { props: baseProps });
+      expect(wrapper.find("fieldset").attributes("aria-invalid")).toBeUndefined();
+    });
+
     it("does not add a bare error class", async () => {
       const wrapper = await mountSuspended(FormFieldset, { props: { ...baseProps, fieldHasError: true } });
       expect(wrapper.find("fieldset").classes()).not.toContain("error");

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.11",
+  "version": "9.6.13",
   "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>
-    `,
-  }),
-};

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

@@ -1,85 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import DisplayTooltipDefined from "../DisplayTooltipDefined.vue";
-import type { TooltipContentText } from "~/types/components";
-
-const contentText: TooltipContentText = {
-  tooltipTitle: { tag: "h4", text: "Title" },
-  tooltipContent: { tag: "p", text: "Body copy" },
-  tooltipAction: { tag: "span", text: "Learn more" },
-};
-
-describe("DisplayTooltipDefined", () => {
-  it("mounts without error", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined);
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("renders correct HTML structure", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { contentText, tooltipId: "fixed" } });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("renders the title, body, and action from contentText", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { contentText } });
-    expect(wrapper.find(".tooltip-title").text()).toBe("Title");
-    expect(wrapper.find(".tooltip-body").text()).toBe("Body copy");
-    expect(wrapper.find(".tooltip-action").text()).toBe("Learn more");
-  });
-
-  it("renders each contentText field with its given tag", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { contentText } });
-    expect(wrapper.find(".tooltip-title").element.tagName.toLowerCase()).toBe("h4");
-    expect(wrapper.find(".tooltip-body").element.tagName.toLowerCase()).toBe("p");
-    expect(wrapper.find(".tooltip-action").element.tagName.toLowerCase()).toBe("span");
-  });
-
-  it("omits a field when not present in contentText", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, {
-      props: { contentText: { tooltipTitle: { tag: "h4", text: "Only a title" } } },
-    });
-    expect(wrapper.find(".tooltip-title").exists()).toBe(true);
-    expect(wrapper.find(".tooltip-body").exists()).toBe(false);
-    expect(wrapper.find(".tooltip-action").exists()).toBe(false);
-  });
-
-  it("renders a close button wired to the tooltip id", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { tooltipId: "my-tip" } });
-    const closeButton = wrapper.find(".display-tooltip-close-button");
-    expect(closeButton.attributes("popovertarget")).toBe("nuxt-tooltip-my-tip");
-    expect(closeButton.attributes("popovertargetaction")).toBe("hide");
-  });
-
-  it("renders the triggerContent slot", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, {
-      slots: { triggerContent: "<span class='slot-trigger'>?</span>" },
-    });
-    expect(wrapper.find(".slot-trigger").text()).toBe("?");
-  });
-
-  it("applies styleClassPassthrough classes to the underlying DisplayTooltip", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, {
-      props: { styleClassPassthrough: ["custom-class"] },
-    });
-    expect(wrapper.classes()).toContain("custom-class");
-  });
-
-  describe("without the Popover API", () => {
-    beforeEach(() => {
-      Object.defineProperty(HTMLElement.prototype, "showPopover", { value: undefined, writable: true, configurable: true });
-    });
-
-    afterEach(() => {
-      delete (HTMLElement.prototype as unknown as Record<string, unknown>)["showPopover"];
-    });
-
-    it("closes from the close button", async () => {
-      const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { contentText } });
-      await wrapper.find(".display-tooltip-trigger-button").trigger("click");
-      expect(wrapper.find(".display-tooltip-popover").classes()).toContain("display-tooltip-popover-open");
-
-      await wrapper.find(".display-tooltip-close-button").trigger("click");
-      expect(wrapper.find(".display-tooltip-popover").classes()).not.toContain("display-tooltip-popover-open");
-    });
-  });
-});

package/app/components/02.molecules/display-tooltip-defined/tests/__snapshots__/DisplayTooltipDefined.spec.ts.snap

@@ -1,17 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`DisplayTooltipDefined > renders correct HTML structure 1`] = `
-"<div class="display-tooltip-core" style="--_anchor-name: --tooltip-anchor-v-0-0-0;">
-  <div class="display-tooltip-trigger-wrapper body-md">
-    <!--v-if--><button popovertarget="nuxt-tooltip-fixed" popovertargetaction="toggle" class="display-tooltip-trigger-button" aria-label="Toggle the popover" aria-expanded="false"><span class="iconify i-fa7-solid:circle-question display-tooltip-trigger-icon" aria-hidden="true"></span></button>
-  </div>
-  <div id="nuxt-tooltip-fixed" popover="" class="display-tooltip-popover">
-    <div class="display-tooltip-popover-content">
-      <div class="popover-content-defined">
-        <h4 class="tooltip-title subtitle-sm">Title</h4>
-        <p class="tooltip-body body-sm">Body copy</p><span class="tooltip-action input-value">Learn more</span><button popovertarget="nuxt-tooltip-fixed" popovertargetaction="hide" class="display-tooltip-close-button" aria-label="Close tool tip">Close</button>
-      </div>
-    </div>
-  </div>
-</div>"
-`;