srcdev-nuxt-components 9.5.5 → 9.5.7

package/app/components/03.organisms/responsive-header/tests/.nuxt/types/nitro-nuxt.d.ts

@@ -0,0 +1,64 @@
+
+/// <reference path="nitro-layouts.d.ts" />
+/// <reference path="app.config.d.ts" />
+/// <reference path="runtime-config.d.ts" />
+/// <reference path="../../../../../../../node_modules/@nuxt/nitro-server/dist/index.d.mts" />
+/// <reference path="middleware.d.ts" />
+
+import type { RuntimeConfig } from 'nuxt/schema'
+import type { H3Event } from 'h3'
+import type { LogObject } from 'consola'
+import type { NuxtIslandContext, NuxtIslandResponse, NuxtRenderHTMLContext } from 'nuxt/app'
+
+declare module 'nitropack' {
+  interface NitroRuntimeConfigApp {
+    buildAssetsDir: string
+    cdnURL: string
+  }
+  interface NitroRuntimeConfig extends RuntimeConfig {}
+  interface NitroRouteConfig {
+    ssr?: boolean
+    noScripts?: boolean
+    /** @deprecated Use `noScripts` instead */
+    experimentalNoScripts?: boolean
+  }
+  interface NitroRouteRules {
+    ssr?: boolean
+    noScripts?: boolean
+    /** @deprecated Use `noScripts` instead */
+    experimentalNoScripts?: boolean
+    appMiddleware?: Record<string, boolean>
+    appLayout?: string | false
+  }
+  interface NitroRuntimeHooks {
+    'dev:ssr-logs': (ctx: { logs: LogObject[], path: string }) => void | Promise<void>
+    'render:html': (htmlContext: NuxtRenderHTMLContext, context: { event: H3Event }) => void | Promise<void>
+    'render:island': (islandResponse: NuxtIslandResponse, context: { event: H3Event, islandContext: NuxtIslandContext }) => void | Promise<void>
+  }
+}
+declare module 'nitropack/types' {
+  interface NitroRuntimeConfigApp {
+    buildAssetsDir: string
+    cdnURL: string
+  }
+  interface NitroRuntimeConfig extends RuntimeConfig {}
+  interface NitroRouteConfig {
+    ssr?: boolean
+    noScripts?: boolean
+    /** @deprecated Use `noScripts` instead */
+    experimentalNoScripts?: boolean
+  }
+  interface NitroRouteRules {
+    ssr?: boolean
+    noScripts?: boolean
+    /** @deprecated Use `noScripts` instead */
+    experimentalNoScripts?: boolean
+    appMiddleware?: Record<string, boolean>
+    appLayout?: string | false
+  }
+  interface NitroRuntimeHooks {
+    'dev:ssr-logs': (ctx: { logs: LogObject[], path: string }) => void | Promise<void>
+    'render:html': (htmlContext: NuxtRenderHTMLContext, context: { event: H3Event }) => void | Promise<void>
+    'render:island': (islandResponse: NuxtIslandResponse, context: { event: H3Event, islandContext: NuxtIslandContext }) => void | Promise<void>
+  }
+}

package/app/components/03.organisms/responsive-header/tests/.nuxt/types/plugins.d.ts

@@ -0,0 +1,29 @@
+// Generated by Nuxt'
+import type { Plugin } from '#app'
+
+type Decorate<T extends Record<string, any>> = { [K in keyof T as K extends string ? `$${K}` : never]: T[K] }
+
+type InjectionType<A extends Plugin> = A extends {default: Plugin<infer T>} ? Decorate<T> : unknown
+
+type NuxtAppInjections = 
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/revive-payload.client.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/head/runtime/plugins/unhead.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/router.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/navigation-repaint.client.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/check-outdated-build.client.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/revive-payload.server.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/chunk-reload.client.js")>
+
+declare module '#app' {
+  interface NuxtApp extends NuxtAppInjections { }
+
+  interface NuxtAppLiterals {
+    pluginName: 'nuxt:revive-payload:client' | 'nuxt:head' | 'nuxt:router' | 'nuxt:revive-payload:server' | 'nuxt:chunk-reload' | 'nuxt:global-components'
+  }
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties extends NuxtAppInjections { }
+}
+
+export { }

package/app/components/03.organisms/responsive-header/tests/.nuxt/types/runtime-config.d.ts

@@ -0,0 +1,32 @@
+import { RuntimeConfig as UserRuntimeConfig, PublicRuntimeConfig as UserPublicRuntimeConfig } from 'nuxt/schema'
+  interface SharedRuntimeConfig {
+   app: {
+      buildId: string,
+
+      baseURL: string,
+
+      buildAssetsDir: string,
+
+      cdnURL: string,
+   },
+
+   nitro: {
+      envPrefix: string,
+   },
+  }
+  interface SharedPublicRuntimeConfig {
+
+  }
+declare module '@nuxt/schema' {
+  interface RuntimeConfig extends UserRuntimeConfig {}
+  interface PublicRuntimeConfig extends UserPublicRuntimeConfig {}
+}
+declare module 'nuxt/schema' {
+  interface RuntimeConfig extends SharedRuntimeConfig {}
+  interface PublicRuntimeConfig extends SharedPublicRuntimeConfig {}
+}
+declare module 'vue' {
+        interface ComponentCustomProperties {
+          $config: UserRuntimeConfig
+        }
+      }

package/app/components/03.organisms/responsive-header/tests/.nuxt/types/shared-imports.d.ts

@@ -0,0 +1,10 @@
+// Generated by auto imports
+export {}
+declare global {
+  const useRuntimeConfig: (event?: import('h3').H3Event) => import('nuxt/schema').RuntimeConfig
+  const useAppConfig: () => import('nuxt/schema').AppConfig
+  const defineAppConfig: <C extends import('nuxt/schema').AppConfigInput>(config: C) => C
+  const createError: typeof import('h3')['createError']
+  const setResponseStatus: typeof import('h3')['setResponseStatus']
+
+}

package/app/components/03.organisms/responsive-header/tests/NavigationItems.spec.ts

@@ -146,6 +146,22 @@ describe("NavigationItems", () => {
     expect(details.attributes("open")).toBe("");
   });
 
+  it("builds the submenu aria-label from submenuAriaLabel, falling back to name", async () => {
+    const wrapper = await mountSuspended(NavigationItems, {
+      props: {
+        submenuAriaLabel: "Untermenü {title}",
+        mainNavigationState: {
+          clonedNavLinks: { firstNav: [{ name: "Services", childLinks: [{ name: "A", path: "/a" }] }] },
+          navListVisibility: { firstNav: false },
+          hasSecondNav: false,
+        },
+      },
+    });
+    const text = wrapper.find(".overflow-navigation-details .overflow-navigation-text");
+    expect(text.text()).toBe("Services");
+    expect(text.attributes("aria-label")).toBe("Untermenü Services");
+  });
+
   it("renders correct HTML structure with default props", async () => {
     const wrapper = await mountSuspended(NavigationItems, {
       props: { mainNavigationState },

package/app/components/03.organisms/responsive-header/tests/ResponsiveHeader.spec.ts

@@ -34,6 +34,19 @@ const triggerGeometryPass = async () => {
   }
 };
 
+// Fake layout: the main nav ends at mainNavRight and each item is 100px wide, laid out in
+// document order, so item n (0-based) ends at (n + 1) * 100.
+const mockGeometry = (mainNavRight: number) =>
+  vi.spyOn(Element.prototype, "getBoundingClientRect").mockImplementation(function (this: Element) {
+    let right = 0;
+    if (this.classList.contains("main-navigation")) right = mainNavRight;
+    if (this.classList.contains("main-navigation-item")) {
+      const items = Array.from(this.closest(".main-navigation")?.querySelectorAll(".main-navigation-item") ?? []);
+      right = (items.indexOf(this) + 1) * 100;
+    }
+    return { left: 0, top: 0, bottom: 0, x: 0, y: 0, height: 0, right, width: right, toJSON: () => ({}) } as DOMRect;
+  });
+
 const navLinks: ResponsiveHeaderProp = {
   firstNav: [
     { name: "Home", path: "/" },
@@ -296,18 +309,90 @@ describe("ResponsiveHeader", () => {
     expect(overflowNav.text()).toContain("UI Components");
   });
 
-  it("completes the geometry pass and marks all items visually-hidden under jsdom's zero-size layout", async () => {
+  it("hides only the items that end past the main nav's right edge", async () => {
+    const geometry = mockGeometry(250);
     const wrapper = await mountSuspended(ResponsiveHeader, {
       props: { responsiveNavLinks: navLinks },
     });
     await triggerGeometryPass();
 
-    // jsdom reports every rect as 0×0, so `rect.right + margin + gap < wrapperRect.right`
-    // (0 + 0 + 12 < 0) is always false — every item correctly collapses into overflow.
     expect(wrapper.find(".navigation").classes()).toContain("geometry-ready");
-    const items = wrapper.findAll(".main-navigation-item");
-    expect(items.length).toBeGreaterThan(0);
-    items.forEach((item) => expect(item.classes()).toContain("visually-hidden"));
+    const hidden = wrapper.findAll(".main-navigation-item").map((item) => item.classes().includes("visually-hidden"));
+    expect(hidden).toEqual([false, false, true, true]);
+    expect(wrapper.find(".overflow-details").classes()).not.toContain("visually-hidden");
+    geometry.mockRestore();
+  });
+
+  it("keeps an item that ends exactly at the main nav's right edge, so a flush-right last item isn't always hidden", async () => {
+    const geometry = mockGeometry(400);
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: { responsiveNavLinks: navLinks },
+    });
+    await triggerGeometryPass();
+
+    wrapper.findAll(".main-navigation-item").forEach((item) => expect(item.classes()).not.toContain("visually-hidden"));
+    expect(wrapper.find(".overflow-details").classes()).toContain("visually-hidden");
+    geometry.mockRestore();
+  });
+
+  it("gives the icon-only overflow button an accessible name", async () => {
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: { responsiveNavLinks: navLinks },
+    });
+    expect(wrapper.find(".overflow-details-summary").attributes("aria-label")).toBe("More navigation");
+    await wrapper.setProps({ overflowButtonLabel: "Menü" });
+    expect(wrapper.find(".overflow-details-summary").attributes("aria-label")).toBe("Menü");
+  });
+
+  it("builds the submenu aria-label from submenuAriaLabel", async () => {
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: { responsiveNavLinks: navLinks, submenuAriaLabel: "Untermenü {title}" },
+    });
+    expect(wrapper.find(".main-navigation-details-summary").attributes("aria-label")).toBe("Untermenü UI Components");
+  });
+
+  it("falls back to name for a dropdown with no childLinksTitle", async () => {
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: { responsiveNavLinks: { firstNav: [{ name: "Services", childLinks: [{ name: "A", path: "/a" }] }] } },
+    });
+    const summary = wrapper.find(".main-navigation-details-summary");
+    expect(summary.text()).toBe("Services");
+    expect(summary.attributes("aria-label")).toBe("Services submenu");
+  });
+
+  it("renders child links with duplicate names without key clashes", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: {
+        responsiveNavLinks: {
+          firstNav: [
+            { name: "Dup", childLinksTitle: "Dup", childLinks: [{ name: "Same", path: "/a" }, { name: "Same", path: "/b" }] },
+          ],
+        },
+      },
+    });
+    expect(wrapper.findAll(".main-navigation-sub-nav-link")).toHaveLength(2);
+    expect(warn.mock.calls.some(([msg]) => String(msg).includes("Duplicate keys"))).toBe(false);
+    warn.mockRestore();
+  });
+
+  it("shows the overflow button for any group key once an item is hidden", async () => {
+    const geometry = mockGeometry(150);
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: { responsiveNavLinks: { main: [{ name: "Home", path: "/" }, { name: "About", path: "/about" }] } },
+    });
+    await triggerGeometryPass();
+    expect(wrapper.find(".overflow-details").classes()).not.toContain("visually-hidden");
+    geometry.mockRestore();
+  });
+
+  it("keeps the overflow button hidden when there are no nav items", async () => {
+    const wrapper = await mountSuspended(ResponsiveHeader, {
+      props: { responsiveNavLinks: {} },
+    });
+    await triggerGeometryPass();
+    expect(wrapper.find(".navigation").classes()).toContain("geometry-ready");
+    expect(wrapper.find(".overflow-details").classes()).toContain("visually-hidden");
   });
 
   it("renders correct HTML structure with default props", async () => {

package/app/components/03.organisms/responsive-header/tests/__snapshots__/ResponsiveHeader.spec.ts.snap

@@ -4,11 +4,11 @@ exports[`ResponsiveHeader > renders correct HTML structure with default props 1`
 "<div class="navigation loaded" role="banner">
   <nav class="main-navigation is-animated" aria-label="Main navigation">
     <ul class="main-navigation-list">
-      <li class="main-navigation-item visually-hidden is-active" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="0"><a href="/" class="main-navigation-link">
+      <li class="main-navigation-item visually-hidden is-active" data-group-key="firstNav" data-local-index="0"><a href="/" class="main-navigation-link">
           <!--v-if--> Home
         </a></li>
-      <li class="main-navigation-item visually-hidden" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="1"><a href="/about" class="main-navigation-link has-icon"><span class="iconify i-mdi:home decorator-icon" aria-hidden="true"></span> About</a></li>
-      <li class="main-navigation-item visually-hidden" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="2">
+      <li class="main-navigation-item visually-hidden" data-group-key="firstNav" data-local-index="1"><a href="/about" class="main-navigation-link has-icon"><span class="iconify i-mdi:home decorator-icon" aria-hidden="true"></span> About</a></li>
+      <li class="main-navigation-item visually-hidden" data-group-key="firstNav" data-local-index="2">
         <details class="main-navigation-details" name="navigation-group">
           <summary class="main-navigation-details-summary has-toggle-icon" aria-label="UI Components submenu"><span class="iconify i-mdi:chevron-down icon" aria-hidden="true"></span>
             <!--v-if--> UI Components
@@ -23,7 +23,7 @@ exports[`ResponsiveHeader > renders correct HTML structure with default props 1`
       </li>
     </ul>
     <ul class="main-navigation-list">
-      <li class="main-navigation-item visually-hidden" style="--_main-navigation-item-width: 0px;" data-group-key="secondNav" data-local-index="0"><a href="/contact" class="main-navigation-link">
+      <li class="main-navigation-item visually-hidden" data-group-key="secondNav" data-local-index="0"><a href="/contact" class="main-navigation-link">
           <!--v-if--> Contact
         </a></li>
     </ul>
@@ -32,13 +32,13 @@ exports[`ResponsiveHeader > renders correct HTML structure with default props 1`
   </nav>
   <nav class="secondary-navigation" aria-label="Secondary navigation">
     <details class="overflow-details visually-hidden" name="overflow-group">
-      <summary class="overflow-details-summary has-toggle-icon"><span class="iconify i-gravity-ui:ellipsis icon show" aria-hidden="true"></span><span class="iconify i-gravity-ui:bars icon" aria-hidden="true"></span></summary>
+      <summary class="overflow-details-summary has-toggle-icon" aria-label="More navigation"><span class="iconify i-gravity-ui:ellipsis icon show" aria-hidden="true"></span><span class="iconify i-gravity-ui:bars icon" aria-hidden="true"></span></summary>
       <div class="overflow-details-nav" role="menu">
         <div class="overflow-navigation-wrapper" role="menu" aria-label="Overflow navigation menu">
           <ul class="overflow-navigation-list visible" style="--_overflow-navigation-list-min-width: 0px;" role="none">
-            <li class="overflow-navigation-item visible is-active" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="0" role="none"><a href="/" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">Home</span></a></li>
-            <li class="overflow-navigation-item visible" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="1" role="none"><a href="/about" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">About</span></a></li>
-            <li class="overflow-navigation-item visible" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="2" role="none">
+            <li class="overflow-navigation-item visible is-active" data-group-key="firstNav" data-local-index="0" role="none"><a href="/" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">Home</span></a></li>
+            <li class="overflow-navigation-item visible" data-group-key="firstNav" data-local-index="1" role="none"><a href="/about" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">About</span></a></li>
+            <li class="overflow-navigation-item visible" data-group-key="firstNav" data-local-index="2" role="none">
               <div class="expanding-panel-classic overflow-navigation-details">
                 <details class="expanding-panel-classic-details" name="overflow-navigation-group">
                   <summary id="id-overflow-navigation-group-trigger" class="expanding-panel-classic-summary" aria-controls="id-overflow-navigation-group-content" aria-expanded="false">
@@ -61,7 +61,7 @@ exports[`ResponsiveHeader > renders correct HTML structure with default props 1`
             </li>
           </ul>
           <ul class="overflow-navigation-list visible" style="--_overflow-navigation-list-min-width: 0px;" role="none">
-            <li class="overflow-navigation-item visible" style="--_main-navigation-item-width: 0px;" data-group-key="secondNav" data-local-index="0" role="none"><a href="/contact" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">Contact</span></a></li>
+            <li class="overflow-navigation-item visible" data-group-key="secondNav" data-local-index="0" role="none"><a href="/contact" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">Contact</span></a></li>
           </ul>
           <div aria-hidden="true" class="overflow-nav-indicator-hovered"></div>
           <div aria-hidden="true" class="overflow-nav-indicator-active"></div>

package/app/components/03.organisms/responsive-header/tests/node_modules/.cache/nuxt/chrome-workspace.json

@@ -0,0 +1 @@
+{"uuid":"21163df5-50d7-4cfc-ab56-45d835fb0c72"}

package/app/components/03.organisms/site-header/SiteHeader.vue

@@ -20,6 +20,8 @@
           :main-nav-aria-label="mainNavAriaLabel"
           :secondary-nav-aria-label="secondaryNavAriaLabel"
           :overflow-menu-aria-label="overflowMenuAriaLabel"
+          :overflow-button-label="overflowButtonLabel"
+          :submenu-aria-label="submenuAriaLabel"
         >
           <template v-if="slots.secondaryNavigation" #secondaryNavigation>
             <slot name="secondaryNavigation"></slot>
@@ -54,6 +56,10 @@ interface Props {
   secondaryNavAriaLabel?: string;
   /** Forwarded to ResponsiveHeader's overflowMenuAriaLabel — override for localisation. */
   overflowMenuAriaLabel?: string;
+  /** Forwarded to ResponsiveHeader's overflowButtonLabel, the burger button's accessible name. */
+  overflowButtonLabel?: string;
+  /** Forwarded to ResponsiveHeader's submenuAriaLabel; {title} is replaced with the item's title. */
+  submenuAriaLabel?: string;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -73,6 +79,8 @@ withDefaults(defineProps<Props>(), {
   mainNavAriaLabel: "Main navigation",
   secondaryNavAriaLabel: "Secondary navigation",
   overflowMenuAriaLabel: "Overflow navigation menu",
+  overflowButtonLabel: "More navigation",
+  submenuAriaLabel: "{title} submenu",
 });
 
 const slots = useSlots();

package/app/components/03.organisms/site-header/tests/__snapshots__/SiteHeader.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`SiteHeader > renders correct HTML structure with default props 1`] = `
         <nav class="skip-links__nav" aria-label="Skip navigation"><a href="#main-content" class="skip-links__link">Skip to main content</a><a href="#footer-content" class="skip-links__link">Skip to footer</a></nav>
       </div>
     </nav>
-    <div class="responsive-header-stub" main-nav-aria-label="Main navigation" secondary-nav-aria-label="Secondary navigation" overflow-menu-aria-label="Overflow navigation menu"></div>
+    <div class="responsive-header-stub" main-nav-aria-label="Main navigation" secondary-nav-aria-label="Secondary navigation" overflow-menu-aria-label="Overflow navigation menu" overflow-button-label="More navigation" submenu-aria-label="{title} submenu"></div>
   </header>
 </div>"
 `;

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

@@ -0,0 +1,231 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { defineComponent, h, nextTick, ref } from "vue";
+import { useAnchoredPopover, type AnchoredPopoverSide } from "../useAnchoredPopover";
+
+type Support = { popover: boolean; anchor: boolean };
+
+const setSupport = ({ popover, anchor }: Support) => {
+  Object.defineProperty(HTMLElement.prototype, "showPopover", {
+    value: popover ? vi.fn() : undefined,
+    writable: true,
+    configurable: true,
+  });
+  Object.defineProperty(HTMLElement.prototype, "hidePopover", {
+    value: popover ? vi.fn() : undefined,
+    writable: true,
+    configurable: true,
+  });
+  // happy-dom's CSS.supports can't be spied on, so swap the whole global and restore it in afterEach.
+  Object.defineProperty(globalThis, "CSS", { value: { supports: () => anchor }, writable: true, configurable: true });
+};
+
+const originalCSS = globalThis.CSS;
+
+const setViewport = (width: number, height: number) => {
+  Object.defineProperty(document.documentElement, "clientWidth", { value: width, configurable: true });
+  Object.defineProperty(document.documentElement, "clientHeight", { value: height, configurable: true });
+};
+
+const mountHost = (side: AnchoredPopoverSide = "bottom") => {
+  const onOpen = vi.fn();
+  const mounted = mountSuspended(
+    defineComponent({
+      setup() {
+        const rootRef = ref<HTMLElement | null>(null);
+        const triggerRef = ref<HTMLElement | null>(null);
+        const popoverRef = ref<HTMLElement | null>(null);
+        return { rootRef, triggerRef, popoverRef, ...useAnchoredPopover({ rootRef, triggerRef, popoverRef, side, onOpen }) };
+      },
+      render() {
+        return h("div", [
+          h("div", { ref: "rootRef", class: "root" }, [
+            h("button", { ref: "triggerRef", class: "trigger", onClick: this.handleTriggerClick }),
+            h("div", { ref: "popoverRef", class: "popover" }),
+          ]),
+          h("button", { class: "outside" }),
+        ]);
+      },
+    }),
+    { attachTo: document.body }
+  );
+  return { mounted, onOpen };
+};
+
+const mockTriggerRect = (wrapper: Awaited<ReturnType<typeof mountHost>["mounted"]>, rect: Partial<DOMRect>) => {
+  const trigger = wrapper.find(".trigger").element as HTMLElement;
+  vi.spyOn(trigger, "getBoundingClientRect").mockReturnValue({ top: 0, bottom: 0, left: 0, right: 0, ...rect } as DOMRect);
+};
+
+const mockPopoverSize = (wrapper: Awaited<ReturnType<typeof mountHost>["mounted"]>, width: number, height: number) => {
+  const popover = wrapper.find(".popover").element;
+  Object.defineProperty(popover, "offsetWidth", { value: width, configurable: true });
+  Object.defineProperty(popover, "offsetHeight", { value: height, configurable: true });
+};
+
+describe("useAnchoredPopover", () => {
+  beforeEach(() => {
+    setViewport(1000, 800);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    delete (HTMLElement.prototype as unknown as Record<string, unknown>)["showPopover"];
+    delete (HTMLElement.prototype as unknown as Record<string, unknown>)["hidePopover"];
+    delete (document.documentElement as unknown as Record<string, unknown>)["clientWidth"];
+    delete (document.documentElement as unknown as Record<string, unknown>)["clientHeight"];
+    Object.defineProperty(globalThis, "CSS", { value: originalCSS, writable: true, configurable: true });
+    document.body.innerHTML = "";
+  });
+
+  describe("native Popover API and anchor positioning", () => {
+    beforeEach(() => setSupport({ popover: true, anchor: true }));
+
+    it("uses neither fallback", async () => {
+      const wrapper = await mountHost().mounted;
+      expect(wrapper.vm.usesFallbackPopover).toBe(false);
+      expect(wrapper.vm.needsPositioning).toBe(false);
+      expect(wrapper.vm.positionStyle).toBeUndefined();
+      expect(wrapper.vm.popoverPlacement).toBeUndefined();
+    });
+
+    it("show and hide call the native methods", async () => {
+      const wrapper = await mountHost().mounted;
+      const popover = wrapper.find(".popover").element as HTMLElement;
+      wrapper.vm.show();
+      wrapper.vm.hide();
+      expect(popover.showPopover).toHaveBeenCalledOnce();
+      expect(popover.hidePopover).toHaveBeenCalledOnce();
+    });
+
+    it("trigger click is left to popovertarget", async () => {
+      const wrapper = await mountHost().mounted;
+      await wrapper.find(".trigger").trigger("click");
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+
+    it("tracks isOpen and calls onOpen from the toggle event", async () => {
+      const { mounted, onOpen } = mountHost();
+      const wrapper = await mounted;
+      wrapper.vm.handleToggle(Object.assign(new Event("toggle"), { newState: "open" }));
+      expect(wrapper.vm.isOpen).toBe(true);
+      expect(onOpen).toHaveBeenCalledOnce();
+
+      wrapper.vm.handleToggle(Object.assign(new Event("toggle"), { newState: "closed" }));
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+  });
+
+  describe("without the Popover API", () => {
+    beforeEach(() => setSupport({ popover: false, anchor: true }));
+
+    it("detects the fallback on mount", async () => {
+      const wrapper = await mountHost().mounted;
+      expect(wrapper.vm.usesFallbackPopover).toBe(true);
+    });
+
+    it("toggles open and closed from the trigger, calling onOpen after render", async () => {
+      const { mounted, onOpen } = mountHost();
+      const wrapper = await mounted;
+
+      await wrapper.find(".trigger").trigger("click");
+      expect(wrapper.vm.isOpen).toBe(true);
+      await nextTick();
+      expect(onOpen).toHaveBeenCalledOnce();
+
+      await wrapper.find(".trigger").trigger("click");
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+
+    it("closes on a pointerdown outside the root, not inside it", async () => {
+      const wrapper = await mountHost().mounted;
+      wrapper.vm.show();
+      await nextTick();
+
+      wrapper.find(".popover").element.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+      expect(wrapper.vm.isOpen).toBe(true);
+
+      wrapper.find(".outside").element.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+
+    it("closes on Escape and returns focus to the trigger", async () => {
+      const wrapper = await mountHost().mounted;
+      const focusSpy = vi.spyOn(wrapper.find(".trigger").element as HTMLElement, "focus");
+      wrapper.vm.show();
+      await nextTick();
+
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+      expect(wrapper.vm.isOpen).toBe(false);
+      expect(focusSpy).toHaveBeenCalledOnce();
+    });
+
+    it("stops listening once closed", async () => {
+      const wrapper = await mountHost().mounted;
+      const focusSpy = vi.spyOn(wrapper.find(".trigger").element as HTMLElement, "focus");
+      wrapper.vm.show();
+      await nextTick();
+      wrapper.vm.hide();
+
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("without anchor positioning", () => {
+    beforeEach(() => setSupport({ popover: true, anchor: false }));
+
+    const openWith = async (side: AnchoredPopoverSide, rect: Partial<DOMRect>, size = { width: 100, height: 200 }) => {
+      const wrapper = await mountHost(side).mounted;
+      mockTriggerRect(wrapper, rect);
+      mockPopoverSize(wrapper, size.width, size.height);
+      wrapper.vm.handleToggle(Object.assign(new Event("toggle"), { newState: "open" }));
+      return wrapper;
+    };
+
+    it("writes every trigger edge, plain and measured from the viewport's far edge", async () => {
+      const wrapper = await mountHost().mounted;
+      mockTriggerRect(wrapper, { top: 100, bottom: 140, left: 50, right: 250 });
+
+      wrapper.vm.handleBeforeToggle(Object.assign(new Event("beforetoggle"), { newState: "open" }));
+      expect(wrapper.vm.needsPositioning).toBe(true);
+      expect(wrapper.vm.positionStyle).toEqual({
+        "--_anchor-top": "100px",
+        "--_anchor-bottom": "140px",
+        "--_anchor-left": "50px",
+        "--_anchor-right": "250px",
+        "--_anchor-top-inverse": "700px",
+        "--_anchor-bottom-inverse": "660px",
+        "--_anchor-left-inverse": "950px",
+        "--_anchor-right-inverse": "750px",
+      });
+    });
+
+    it("ignores beforetoggle when closing", async () => {
+      const wrapper = await mountHost().mounted;
+      mockTriggerRect(wrapper, { top: 100, bottom: 140, left: 50, right: 250 });
+
+      wrapper.vm.handleBeforeToggle(Object.assign(new Event("beforetoggle"), { newState: "closed" }));
+      expect(wrapper.vm.positionStyle).toMatchObject({ "--_anchor-top": "0px" });
+    });
+
+    it.each([
+      ["bottom", { top: 100, bottom: 140, left: 400, right: 450 }, "bottom"],
+      ["bottom", { top: 700, bottom: 740, left: 400, right: 450 }, "top"],
+      ["top", { top: 300, bottom: 340, left: 400, right: 450 }, "top"],
+      ["top", { top: 100, bottom: 140, left: 400, right: 450 }, "bottom"],
+      ["right", { top: 300, bottom: 340, left: 400, right: 450 }, "right"],
+      ["right", { top: 300, bottom: 340, left: 850, right: 950 }, "left"],
+      ["left", { top: 300, bottom: 340, left: 400, right: 450 }, "left"],
+      ["left", { top: 300, bottom: 340, left: 50, right: 100 }, "right"],
+    ] as const)("prefers %s and resolves to %s for %o", async (side, rect, expected) => {
+      const wrapper = await openWith(side, rect);
+      expect(wrapper.vm.popoverPlacement).toBe(expected);
+    });
+
+    it("keeps the preferred side when neither side has room", async () => {
+      const wrapper = await openWith("bottom", { top: 100, bottom: 140, left: 50, right: 250 }, { width: 100, height: 900 });
+      expect(wrapper.vm.popoverPlacement).toBe("bottom");
+    });
+  });
+});