srcdev-nuxt-components 9.6.12 → 9.6.13

package/app/components/01.atoms/navigation/skip-links/SkipLinks.vue

@@ -3,8 +3,13 @@
     <div v-if="$slots.homeLink" class="skip-links__home">
       <slot name="homeLink"></slot>
     </div>
-    <nav class="skip-links__nav" :aria-label="ariaLabel">
-      <a v-for="link in links" :key="link.href" :href="link.href" class="skip-links__link">{{ link.label }}</a>
+    <nav v-if="validLinks.length" class="skip-links__nav" :aria-label="ariaLabel">
+      <a
+        v-for="(link, index) in validLinks"
+        :key="`${index}-${link.href}`"
+        :href="link.href"
+        class="skip-links__link"
+      >{{ link.label }}</a>
     </nav>
   </div>
 </template>
@@ -28,6 +33,8 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 })
 
+const validLinks = computed(() => props.links.filter((link) => link.href?.trim() && link.label?.trim()))
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 watch(
@@ -46,22 +53,21 @@ watch(
     .skip-links__nav {
       position: absolute;
       top: 100%;
-      left: 0;
-      z-index: var(--skip-links-z-index, 1000);
+      inset-inline-start: 0;
+      z-index: var(--skip-links-z-index, 999999);
 
       display: flex;
       flex-direction: column;
       gap: var(--skip-links-gap, 0.2rem);
-      background-color: var(--skip-links-background-colour, black);
-      border: var(--skip-links-border-width, 1px) solid var(--skip-links-border-colour, white);
+      inline-size: max-content;
+      max-inline-size: calc(100vw - 3.2rem);
+      background-color: var(--skip-links-background-colour, var(--theme-surface-inverted));
+      border: var(--skip-links-border-width, 1px) solid var(--skip-links-border-colour, var(--theme-on-surface));
       padding: var(--skip-links-padding, 0.2rem);
       margin: 0;
 
-      /* Hidden off-screen via transform — does NOT break keyboard focusability. pointer-events is
-         off in this state too: translateY(-100%) puts this at the same position as .skip-links__home
-         (the homeLink slot), and opacity:0 alone doesn't stop it from catching hover/clicks meant
-         for whatever sits underneath it. Keyboard tab focus doesn't need pointer-events, so this
-         doesn't affect focusability. */
+      /* Hidden by transform, not display, so the links stay focusable; pointer-events stops the
+         invisible panel catching clicks meant for the homeLink slot it overlaps. */
       opacity: 0;
       pointer-events: none;
       transform: translateY(-100%);
@@ -78,13 +84,13 @@ watch(
 
     .skip-links__link {
       display: block;
-      color: var(--skip-links-text-colour, white);
+      color: var(--skip-links-text-colour, var(--theme-on-surface));
       text-decoration: none;
       padding: var(--skip-links-link-padding-block, 0.8rem) var(--skip-links-link-padding-inline, 1.2rem);
-      white-space: nowrap;
+      overflow-wrap: anywhere;
 
       &:focus-visible {
-        outline: var(--skip-links-focus-outline-width, 2px) solid var(--skip-links-focus-outline-colour, white);
+        outline: var(--skip-links-focus-outline-width, 2px) solid var(--skip-links-focus-outline-colour, var(--theme-on-surface));
       }
     }
   }

package/app/components/01.atoms/navigation/skip-links/stories/SkipLinks.stories.ts

@@ -8,11 +8,11 @@ const meta: Meta<typeof SkipLinks> = {
   argTypes: {
     links: {
       control: "object",
-      description: "Ordered list of { href, label } skip targets",
+      description: "Ordered list of { href, label } skip targets. Entries with an empty href or label are skipped.",
     },
     ariaLabel: {
       control: "text",
-      description: "aria-label on the nav landmark — override for localisation",
+      description: "aria-label on the nav landmark (override for localisation)",
     },
     styleClassPassthrough: {
       control: "object",
@@ -27,7 +27,7 @@ const meta: Meta<typeof SkipLinks> = {
     docs: {
       description: {
         component:
-          "An accessibility utility that renders a set of visually-hidden links revealed only on keyboard focus, letting keyboard/screen-reader users jump past repeated navigation straight to main content, the footer, or any other in-page target. The links are placed first in the DOM — consumers should place `<SkipLinks>` at the very top of their page layout.",
+          "Keyboard skip links: a `<nav>` of in-page links that stays hidden until one of them takes focus, letting keyboard and screen-reader users jump past repeated navigation. Place `<SkipLinks>` first in the page layout. Links come from the `links` prop (`{ href, label }[]`, default main content and footer); the optional `homeLink` slot renders a visible item (usually the logo link) that the panel drops down beneath. `ariaLabel` names the landmark. SiteHeader renders this as its branding row: see the [Site Header](?path=/story/organisms-site-header--default) story.",
       },
     },
   },
@@ -36,7 +36,24 @@ const meta: Meta<typeof SkipLinks> = {
 export default meta;
 type Story = StoryObj<typeof SkipLinks>;
 
-// ─── Stories ──────────────────────────────────────────────────────────────────
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const siteHeaderNote = `
+  <p style="${storyNoteStyle}">
+    SiteHeader puts its branding in the <code>homeLink</code> slot and these links beneath it: open the
+    <a href="/?path=/story/organisms-site-header--default" target="_top">Site Header</a> story to see it in a real header.
+  </p>
+`;
+
+const forceOpenStyle = `
+  <style>
+    .skip-links-force-open .skip-links__nav {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+      transform: translateY(0) !important;
+      position: static !important;
+    }
+  </style>
+`;
 
 export const Default: Story = {
   render: (args) => ({
@@ -45,10 +62,10 @@ export const Default: Story = {
       return { args };
     },
     template: `
-      <div>
-        <p style="padding: 2rem; text-align: center;">
-          The skip links below are visually hidden until focused. Click into this preview, then
-          press <kbd>Tab</kbd> to reveal them.
+      <div style="padding: 2rem;">
+        ${siteHeaderNote}
+        <p style="${storyNoteStyle}">
+          The skip links are hidden until focused. Click into this preview, then press <kbd>Tab</kbd> to reveal them.
         </p>
         <SkipLinks v-bind="args" />
       </div>
@@ -71,8 +88,9 @@ export const CustomLinks: Story = {
       return { args };
     },
     template: `
-      <div>
-        <p style="padding: 2rem; text-align: center;">
+      <div style="padding: 2rem;">
+        ${siteHeaderNote}
+        <p style="${storyNoteStyle}">
           Press <kbd>Tab</kbd> after clicking into this preview to reveal three custom skip links.
         </p>
         <SkipLinks v-bind="args" />
@@ -86,7 +104,8 @@ export const AlwaysVisible: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Forces the skip-nav panel open via `:focus-within` emulation so it can be inspected without tabbing — for visual review only, not representative of real usage.",
+        story:
+          "Forces the panel open with story-only CSS so it can be inspected without tabbing. For visual review only: in real use it only shows while a link has focus.",
       },
     },
   },
@@ -96,18 +115,68 @@ export const AlwaysVisible: Story = {
       return { args };
     },
     template: `
-      <div>
-        <style>
-          .always-visible-demo .skip-links__nav {
-            opacity: 1 !important;
-            transform: translateY(0) !important;
-            position: static !important;
-          }
-        </style>
-        <div class="always-visible-demo">
+      <div style="padding: 2rem;">
+        ${forceOpenStyle}
+        ${siteHeaderNote}
+        <div class="skip-links-force-open">
           <SkipLinks v-bind="args" />
         </div>
       </div>
     `,
   }),
 };
+
+const stressLinks: SkipLink[] = [
+  { href: "#main-content", label: "Zumhauptinhaltspringenundnavigationüberspringen" },
+  { href: "#main-content", label: "😀 Same target, second label" },
+  { href: "#search", label: "<b>not bold</b> renders as text" },
+  { href: "#footer-content", label: "انتقل إلى التذييل" },
+  { href: "#x", label: "X" },
+  { href: "", label: "Dropped: empty href" },
+  { href: "#dropped", label: "   " },
+  ...Array.from({ length: 6 }, (_, index) => ({ href: `#section-${index + 1}`, label: `Skip to section ${index + 1}` })),
+];
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    links: stressLinks,
+    ariaLabel: "Navigationsübersprunglinksfürtastaturnutzerinnenundnutzer 😀",
+  },
+  render: (args) => ({
+    components: { SkipLinks },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 2.4rem; padding: 2rem; font-size: 1.4rem;">
+        ${forceOpenStyle}
+        <p style="margin: 0;">Forced open in a narrow column: long unbroken, emoji, HTML-like and right-to-left labels wrap inside the panel, two links share a target, and the two entries with an empty href or label are dropped (11 links show, not 13).</p>
+        <div class="skip-links-force-open" style="inline-size: 18rem; outline: 0.1rem dashed currentColor;">
+          <SkipLinks v-bind="args" />
+        </div>
+
+        <p style="margin: 0;">The real behaviour with the same data: press <kbd>Tab</kbd> from here. The panel drops down under the logo, stays inside the viewport and shows each link's focus ring.</p>
+        <SkipLinks v-bind="args">
+          <template #homeLink>
+            <a href="#" style="display: inline-block; padding: 0.8rem;">Logo</a>
+          </template>
+        </SkipLinks>
+
+        <p style="margin: 0;">No usable links (an empty array): nothing renders, not even an empty <code>&lt;nav&gt;</code> landmark.</p>
+        <div class="skip-links-force-open" style="outline: 0.1rem dashed currentColor; min-block-size: 2rem;">
+          <SkipLinks :links="[]" />
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      story: { inline: false, height: "900px" },
+      description: {
+        story:
+          "Worst-case `links`. Check: labels wrap instead of running off-screen, the panel is never wider than the viewport, links that share an href both render, entries with an empty href or label are dropped, HTML-like text renders as text, and an empty list leaves no landmark behind. Tab through the second instance to check the reveal and focus rings. The long `ariaLabel` only names the landmark, so it never shows on screen.",
+      },
+    },
+  },
+};

package/app/components/01.atoms/navigation/skip-links/tests/SkipLinks.spec.ts

@@ -1,21 +1,34 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import SkipLinks from "../SkipLinks.vue";
 import type { SkipLink } from "~/types/components";
 
+const mounted: { unmount: () => void }[] = [];
+
+const mountSkipLinks = async (options: Parameters<typeof mountSuspended<typeof SkipLinks>>[1] = {}) => {
+  const wrapper = await mountSuspended(SkipLinks, options);
+  mounted.push(wrapper);
+  return wrapper;
+};
+
 describe("SkipLinks", () => {
+  afterEach(() => {
+    mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+    vi.restoreAllMocks();
+  });
+
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(SkipLinks);
+    const wrapper = await mountSkipLinks();
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders correct HTML structure (default props)", async () => {
-    const wrapper = await mountSuspended(SkipLinks);
+    const wrapper = await mountSkipLinks();
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders correct HTML structure (all props set)", async () => {
-    const wrapper = await mountSuspended(SkipLinks, {
+    const wrapper = await mountSkipLinks({
       props: {
         links: [{ href: "#content", label: "Skip to content" }],
         ariaLabel: "Custom skip nav",
@@ -25,7 +38,7 @@ describe("SkipLinks", () => {
   });
 
   it("renders the default main-content and footer links", async () => {
-    const wrapper = await mountSuspended(SkipLinks);
+    const wrapper = await mountSkipLinks();
     const links = wrapper.findAll(".skip-links__link");
     expect(links).toHaveLength(2);
     expect(links[0]!.attributes("href")).toBe("#main-content");
@@ -40,29 +53,76 @@ describe("SkipLinks", () => {
       { href: "#search", label: "Skip to search" },
       { href: "#content", label: "Skip to content" },
     ];
-    const wrapper = await mountSuspended(SkipLinks, { props: { links: customLinks } });
+    const wrapper = await mountSkipLinks({ props: { links: customLinks } });
     const links = wrapper.findAll(".skip-links__link");
     expect(links).toHaveLength(3);
     expect(links.map((link) => link.text())).toEqual(["Skip to navigation", "Skip to search", "Skip to content"]);
   });
 
+  it("drops links with an empty or whitespace-only href or label", async () => {
+    const wrapper = await mountSkipLinks({
+      props: {
+        links: [
+          { href: "#a", label: "Keep" },
+          { href: "", label: "No target" },
+          { href: "#b", label: "   " },
+          { href: "#c", label: "Also keep" },
+        ],
+      },
+    });
+    expect(wrapper.findAll(".skip-links__link").map((link) => link.text())).toEqual(["Keep", "Also keep"]);
+  });
+
+  it("keeps the right links when two share an href and the list is reordered", async () => {
+    const wrapper = await mountSkipLinks({
+      props: {
+        links: [
+          { href: "#nav", label: "Skip to navigation" },
+          { href: "#main", label: "Skip to content" },
+          { href: "#main", label: "Skip to article" },
+          { href: "#footer", label: "Skip to footer" },
+        ],
+      },
+    });
+    expect(wrapper.findAll(".skip-links__link")).toHaveLength(4);
+    await wrapper.setProps({
+      links: [
+        { href: "#footer", label: "Skip to footer" },
+        { href: "#main", label: "Skip to content" },
+        { href: "#main", label: "Skip to article" },
+        { href: "#nav", label: "Skip to navigation" },
+      ],
+    });
+    expect(wrapper.findAll(".skip-links__link").map((link) => link.text())).toEqual([
+      "Skip to footer",
+      "Skip to content",
+      "Skip to article",
+      "Skip to navigation",
+    ]);
+  });
+
+  it("omits the nav landmark entirely when there are no usable links", async () => {
+    const wrapper = await mountSkipLinks({ props: { links: [{ href: "", label: "" }] } });
+    expect(wrapper.find("nav").exists()).toBe(false);
+  });
+
   it("defaults the nav aria-label to 'Skip navigation'", async () => {
-    const wrapper = await mountSuspended(SkipLinks);
+    const wrapper = await mountSkipLinks();
     expect(wrapper.find(".skip-links__nav").attributes("aria-label")).toBe("Skip navigation");
   });
 
   it("uses a custom ariaLabel when provided", async () => {
-    const wrapper = await mountSuspended(SkipLinks, { props: { ariaLabel: "Custom skip nav" } });
+    const wrapper = await mountSkipLinks({ props: { ariaLabel: "Custom skip nav" } });
     expect(wrapper.find(".skip-links__nav").attributes("aria-label")).toBe("Custom skip nav");
   });
 
   it("does not render the home-link slot wrapper when the slot is unused", async () => {
-    const wrapper = await mountSuspended(SkipLinks);
+    const wrapper = await mountSkipLinks();
     expect(wrapper.find(".skip-links__home").exists()).toBe(false);
   });
 
   it("renders the homeLink slot content when provided", async () => {
-    const wrapper = await mountSuspended(SkipLinks, {
+    const wrapper = await mountSkipLinks({
       slots: { homeLink: "<a href='/' class='logo-link'>Home</a>" },
     });
     expect(wrapper.find(".skip-links__home").exists()).toBe(true);

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

@@ -0,0 +1,110 @@
+# DisplayTooltipRich — Consumer Styling Guide
+
+> Renamed 2026-10-18 from `DisplayTooltipDefined`. Every `--display-tooltip-defined-*` token is now
+> `--display-tooltip-rich-*` (same suffixes and defaults), and the `.display-tooltip-defined*`
+> classes are now `.display-tooltip-rich*`. Find and replace `display-tooltip-defined` with
+> `display-tooltip-rich` in your CSS.
+
+## Public token API
+
+No private `--_` tokens of its own. This component renders `DisplayTooltip`, so every
+`--display-tooltip-*` token (trigger, popover panel, close button) applies too: see
+`DisplayTooltip`'s CONSUMER-STYLING.md.
+
+### Layout
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-tooltip-rich-content-gap` | `1.2rem` | Gap between title/body/action/close-button |
+| `--display-tooltip-rich-close-button-margin-block` | `1.2rem 0` | Space above the close button, on top of the gap |
+
+### Title (`contentText.tooltipTitle`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-tooltip-rich-title-colour` | `inherit` | Text colour |
+| `--display-tooltip-rich-title-margin-block` | `0 0` | Block margin |
+| `--display-tooltip-rich-title-font-size` | `1.6rem` | Font size |
+| `--display-tooltip-rich-title-font-weight` | `700` | Font weight |
+| `--display-tooltip-rich-title-line-height` | `120%` | Line height |
+| `--display-tooltip-rich-title-letter-spacing` | `normal` | Letter spacing |
+| `--display-tooltip-rich-title-line-clamp` | `none` | Line cap with ellipsis (`1` is single-line ellipsis) |
+
+### Body (`contentText.tooltipContent`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-tooltip-rich-body-colour` | `inherit` | Text colour |
+| `--display-tooltip-rich-body-margin-block` | `0 0` | Block margin |
+| `--display-tooltip-rich-body-font-size` | `1.3rem` | Font size |
+| `--display-tooltip-rich-body-font-weight` | `inherit` | Font weight |
+| `--display-tooltip-rich-body-line-height` | `140%` | Line height |
+| `--display-tooltip-rich-body-letter-spacing` | `normal` | Letter spacing |
+| `--display-tooltip-rich-body-line-clamp` | `none` | Line cap with ellipsis |
+
+### Action (`contentText.tooltipAction`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-tooltip-rich-action-colour` | `inherit` | Text colour |
+| `--display-tooltip-rich-action-margin-block` | `0 0` | Block margin |
+| `--display-tooltip-rich-action-font-size` | `1.4rem` | Font size |
+| `--display-tooltip-rich-action-font-weight` | `700` | Font weight |
+| `--display-tooltip-rich-action-line-height` | `130%` | Line height |
+| `--display-tooltip-rich-action-letter-spacing` | `normal` | Letter spacing |
+| `--display-tooltip-rich-action-line-clamp` | `none` | Line cap with ellipsis |
+
+The three `*-colour` tokens default to `inherit`, which resolves to the panel's own
+`--display-tooltip-popover-text-colour`: override that for a uniform colour change, or one of these
+three for a single field. Clamped text stays in the DOM, so screen readers still read all of it;
+the panel has nowhere else to show the rest, which is why the clamps default to `none`.
+
+> Changed 2026-10-18: the three `*-line-clamp` tokens are new. Long unbroken text in every field
+> now wraps (`overflow-wrap: anywhere`).
+
+---
+
+## State hooks
+
+Inner classes: `.display-tooltip-rich` (on the root, next to `.display-tooltip`),
+`.display-tooltip-rich-content`, `.display-tooltip-rich-title`,
+`.display-tooltip-rich-body`, `.display-tooltip-rich-action`, and the close button
+`.display-tooltip-close-button.input-button`. The panel's open and placement hooks are
+`DisplayTooltip`'s.
+
+> Changed 2026-10-18: `.popover-content-defined`, `.tooltip-title`, `.tooltip-body` and
+> `.tooltip-action` are now `.display-tooltip-rich-content`, `-title`, `-body` and `-action`
+> (the old names were generic enough for a consumer's own CSS to match them). The undefined
+> `subtitle-sm`, `body-sm` and `input-value` classes on the fields were removed. The close button is
+> now an `InputButton` (`variant="inline"`) that keeps the `.display-tooltip-close-button` class and
+> its tokens, and its right alignment and top margin now apply: `DisplayTooltip`'s close-button
+> reset used to override them, so the button stretched the full panel width.
+
+---
+
+## Global theming
+
+```css
+:where(html) {
+  --display-tooltip-rich-title-colour: var(--brand-accent);
+  --display-tooltip-rich-title-font-size: 1.8rem;
+}
+```
+
+---
+
+## 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` is forwarded to `DisplayTooltip`'s root, alongside the
+`display-tooltip-rich` class this component always adds, so tokens set on a passthrough class
+reach the trigger, the panel and every field.

package/app/components/02.molecules/display-tooltip-rich/DisplayTooltipRich.vue

@@ -0,0 +1,148 @@
+<template>
+  <DisplayTooltip
+    :tooltip-id="tooltipId"
+    :trigger-aria-label="triggerAriaLabel"
+    :trigger-icon="triggerIcon"
+    :style-class-passthrough="rootClasses"
+  >
+    <template v-if="$slots.triggerContent" #triggerContent>
+      <slot name="triggerContent"></slot>
+    </template>
+    <template #tooltipContent="{ close }">
+      <div class="display-tooltip-rich-content">
+        <component
+          :is="tagOf(contentText.tooltipTitle, 'p')"
+          v-if="contentText.tooltipTitle"
+          class="display-tooltip-rich-title"
+        >
+          {{ contentText.tooltipTitle.text }}
+        </component>
+        <component
+          :is="tagOf(contentText.tooltipContent, 'p')"
+          v-if="contentText.tooltipContent"
+          class="display-tooltip-rich-body"
+        >
+          {{ contentText.tooltipContent.text }}
+        </component>
+        <component
+          :is="tagOf(contentText.tooltipAction, 'span')"
+          v-if="contentText.tooltipAction"
+          class="display-tooltip-rich-action"
+        >
+          {{ contentText.tooltipAction.text }}
+        </component>
+        <InputButton
+          type="button"
+          variant="inline"
+          :popovertarget="tooltipId"
+          popovertargetaction="hide"
+          :button-text="closeButtonText"
+          :aria-label="closeButtonAriaLabel"
+          style-class-passthrough="display-tooltip-close-button"
+          @click="close"
+        />
+      </div>
+    </template>
+  </DisplayTooltip>
+</template>
+
+<script setup lang="ts">
+import type { TooltipContentText, TooltipContentTextItem } from "~/types/components";
+
+interface Props {
+  tooltipId?: string;
+  contentText?: TooltipContentText;
+  /** aria-label on the trigger button — override for localisation. */
+  triggerAriaLabel?: string;
+  /** Iconify name for the trigger button icon. */
+  triggerIcon?: 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",
+  triggerIcon: undefined,
+  closeButtonText: "Close",
+  closeButtonAriaLabel: "Close tool tip",
+  styleClassPassthrough: () => [],
+});
+
+const generatedTooltipId = `nuxt-tooltip-${useId()}`;
+const tooltipId = computed(() => (props.tooltipId ? `nuxt-tooltip-${props.tooltipId}` : generatedTooltipId));
+
+const rootClasses = computed(() => ["display-tooltip-rich", ...[props.styleClassPassthrough].flat()]);
+
+const tagOf = (item: TooltipContentTextItem | undefined, fallback: string) => item?.tag?.trim() || fallback;
+</script>
+
+<style lang="css">
+@layer components {
+  .display-tooltip.display-tooltip-rich {
+    .display-tooltip-rich-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--display-tooltip-rich-content-gap, 1.2rem);
+
+      .display-tooltip-rich-title,
+      .display-tooltip-rich-body,
+      .display-tooltip-rich-action {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        overflow-wrap: anywhere;
+      }
+
+      /* margin-block resets the UA margin of whatever tag contentText.*.tag picks, so gap is the only spacing. */
+      .display-tooltip-rich-title {
+        color: var(--display-tooltip-rich-title-colour, inherit);
+        margin-block: var(--display-tooltip-rich-title-margin-block, 0 0);
+        font-size: var(--display-tooltip-rich-title-font-size, 1.6rem);
+        font-weight: var(--display-tooltip-rich-title-font-weight, 700);
+        line-height: var(--display-tooltip-rich-title-line-height, 120%);
+        letter-spacing: var(--display-tooltip-rich-title-letter-spacing, normal);
+        -webkit-line-clamp: var(--display-tooltip-rich-title-line-clamp, none);
+        line-clamp: var(--display-tooltip-rich-title-line-clamp, none);
+      }
+
+      .display-tooltip-rich-body {
+        color: var(--display-tooltip-rich-body-colour, inherit);
+        margin-block: var(--display-tooltip-rich-body-margin-block, 0 0);
+        font-size: var(--display-tooltip-rich-body-font-size, 1.3rem);
+        font-weight: var(--display-tooltip-rich-body-font-weight, inherit);
+        line-height: var(--display-tooltip-rich-body-line-height, 140%);
+        letter-spacing: var(--display-tooltip-rich-body-letter-spacing, normal);
+        -webkit-line-clamp: var(--display-tooltip-rich-body-line-clamp, none);
+        line-clamp: var(--display-tooltip-rich-body-line-clamp, none);
+      }
+
+      .display-tooltip-rich-action {
+        color: var(--display-tooltip-rich-action-colour, inherit);
+        margin-block: var(--display-tooltip-rich-action-margin-block, 0 0);
+        font-size: var(--display-tooltip-rich-action-font-size, 1.4rem);
+        font-weight: var(--display-tooltip-rich-action-font-weight, 700);
+        line-height: var(--display-tooltip-rich-action-line-height, 130%);
+        letter-spacing: var(--display-tooltip-rich-action-letter-spacing, normal);
+        -webkit-line-clamp: var(--display-tooltip-rich-action-line-clamp, none);
+        line-clamp: var(--display-tooltip-rich-action-line-clamp, none);
+      }
+
+      .display-tooltip-close-button.input-button {
+        align-self: flex-end;
+        margin-block: var(--display-tooltip-rich-close-button-margin-block, 1.2rem 0);
+        overflow-wrap: anywhere;
+
+        .input-button-text {
+          font-size: inherit;
+          text-transform: none;
+        }
+      }
+    }
+  }
+}
+</style>