srcdev-nuxt-components 9.2.10 → 9.3.0

package/.claude/settings.json

@@ -106,5 +106,19 @@
       "/Users/simoncornforth/websites/nuxt-components/.claude/skills/components",
       "/Users/simoncornforth/websites/nuxt-components/.claude/skills"
     ]
+  },
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Write|Edit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "f=$(jq -r '.tool_input.file_path // empty'); if [[ \"$f\" == */app/components/*.vue && \"$f\" != */tests/* && \"$f\" != */stories/* ]]; then name=$(basename \"$f\" .vue); skill=$(printf '%s' \"$name\" | sed -E 's/([a-z0-9])([A-Z])/\\1-\\2/g; s/([A-Z]+)([A-Z][a-z])/\\1-\\2/g' | tr '[:upper:]' '[:lower:]'); jq -n --arg msg \"Component file $f was edited/written. Per Claude.md Development Workflow step 7, check whether .claude/skills/components/$skill.md needs updating to reflect this change (props/slots/models/defaults/behaviour).\" '{hookSpecificOutput:{hookEventName:\"PostToolUse\",additionalContext:$msg}}'; fi",
+            "timeout": 15
+          }
+        ]
+      }
+    ]
   }
 }

package/.claude/skills/components/content-docs.md

@@ -36,7 +36,7 @@ interface DocsNavItem {
 | `v-model:activeNavItem` | `string \| undefined` | `undefined` | The `to` of the currently-active `docsNav` item. Updates automatically on click; bind externally (e.g. to route matching) to control it. |
 | `v-model:activePageNavItem` | `string \| undefined` | `undefined` | Same, for `docsPageNav`. |
 
-Open/expanded state of the two panels is **not** exposed as a model — it's driven entirely by the container-width breakpoint logic (see below), not user-controllable.
+Open/expanded state of the two panels is **not** exposed as a model to `ContentDocs`' own consumers — externally it's driven entirely by the container-width breakpoint logic (see below), not user-controllable. Internally, each panel is still a controlled `ExpandingPanel` (`v-model`, not left uncontrolled) so it can be closed programmatically — see "Mobile overlay dismissal" below.
 
 ---
 
@@ -93,6 +93,21 @@ Widths are measured on the component's own root element (`useContainerBreakpoint
 | 768–1023px (tablet) | collapsible, closed by default | **forced open**, no toggle icon |
 | ≥ 1024px (desktop) | **forced open**, no toggle icon | **forced open**, no toggle icon |
 
+Below 1024px (i.e. whenever a panel isn't `forceOpened`), it's also `contentIsOnTop` — an overlay, not in-flow — since a collapsible nav panel pushing page content down/up as it opens reads as janky on mobile/tablet. See "Mobile overlay dismissal" below for how these are closed.
+
+### Mobile overlay dismissal
+
+Below 1024px, `docsNav`/`docsPageNav` are `contentIsOnTop` `ExpandingPanel`s (see the breakpoint table above), so they need an explicit way to close again beyond just toggling the summary:
+
+- **Click outside** — inherited for free from `ExpandingPanel`'s own `contentIsOnTop` behaviour (see `expanding-panel.md`), no extra wiring in `ContentDocs` itself.
+- **Clicking a nav link inside the open panel** — `ContentDocs` does not leave either `ExpandingPanel` uncontrolled: it holds its own `docsNavPanelOpen`/`docsPageNavPanelOpen` refs, bound via `v-model`, and each nav link's click handler sets its panel's ref to `false` in addition to updating `activeNavItem`/`activePageNavItem`. Without this, selecting a link would leave the overlay open on top of the page it just navigated to.
+
+Both are no-ops at desktop/tablet where a panel is `forceOpened` — `open` there is `forceOpened || isPanelOpen`, so `forceOpened` wins regardless of what these refs are set to.
+
+### DOM order vs visual order (accessibility)
+
+In the template, `docsContent` is placed **before** `docsNav`/`docsPageNav` — the reverse of their left-to-right visual position at desktop. This is deliberate: `docsNav`/`docsPageNav` each render an `<h3>` heading (`docsNavLabel`/`docsPageNavLabel`), and if they came first in the DOM, a screen-reader user navigating by heading would hit one of those h3s *before* the consuming page's own `h1` inside `docsContent` — a broken heading outline. Visual position is unaffected because layout comes from `grid-template-areas` (see the `<style>` block), not source order. The trade-off: default Tab order now reaches main content before the side nav — an accepted consequence, not a regression to "fix" back by reverting the order.
+
 ### Why the two panels share a `name` only on mobile
 
 Both panels are `ExpandingPanel`s using the native `<details name="...">` grouping feature, which makes same-named panels mutually exclusive (browser force-closes one when the other opens). That's the wanted behaviour on mobile (accordion — only one open at a time), but at tablet/desktop both panels must be open **simultaneously** — a shared name there would make the browser silently force-close one of them the moment both try to be open. So the component computes distinct names (`"docsNav"` / `"docsPageNav"`) once past mobile, and a shared name (`"docsPanelGroup"`) only while mobile.

package/.claude/skills/components/expanding-panel.md

@@ -13,7 +13,7 @@
 | `name` | `string` | `useId()` | Identifies the panel. Used in ARIA attributes (`id-{name}-trigger`, `id-{name}-content`). If omitted, a unique id is generated automatically. |
 | `animationDuration` | `number` | `400` | Expand/collapse transition duration in milliseconds. Pass `0` to disable animation. |
 | `forceOpened` | `boolean` | `false` | When `true`, the panel is always open. The toggle icon is hidden and clicks do not close the panel. |
-| `contentIsOnTop` | `boolean` | `false` | When `true`, the content region is taken out of flow and absolutely positioned directly below the summary, raised above surrounding page content via `z-index` — instead of pushing layout down when it opens. Applies a `content-is-on-top` class to the root `.expanding-panel` element (not the content div). |
+| `contentIsOnTop` | `boolean` | `false` | When `true`, the content region is taken out of flow and absolutely positioned directly below the summary, raised above surrounding page content via `z-index` — instead of pushing layout down when it opens. Applies a `content-is-on-top` class to the root `.expanding-panel` element (not the content div). Also enables click-outside-to-close (see below) — not applied when `forceOpened` is `true`. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.expanding-panel` element. |
 
 ## Model
@@ -157,6 +157,14 @@ Why: `.expanding-panel-content` collapses via `grid-template-rows: 0fr → 1fr`,
 
 ---
 
+## Click-outside-to-close (contentIsOnTop only)
+
+When `contentIsOnTop` is `true` and the panel is open, clicking anywhere outside the panel's root element closes it (via `@vueuse/core`'s `onClickOutside`, sets `v-model` to `false`) — matching the dismissal behaviour of a native `<select>` or dropdown menu, since that's what an overlay panel functionally is. This does **not** apply to ordinary in-flow panels (`contentIsOnTop: false`, the default) — an inline accordion staying open when you click elsewhere on the page is expected, not a bug. It also never applies when `forceOpened` is `true`, regardless of `contentIsOnTop` — a forced-open panel isn't dismissible by any interaction.
+
+If you also want the panel to close when something *inside* it is activated (e.g. a nav link) — clicking outside doesn't cover that case — set `v-model` to `false` from that element's own click handler, same as any other controlled usage. See `ContentDocs`' `docsNav`/`docsPageNav` panels for a real example: both are `contentIsOnTop` on mobile, and each nav link closes its panel on click in addition to relying on click-outside.
+
+---
+
 ## CSS Token Customization
 
 All `--expanding-panel-*` tokens can be overridden at global, page, or instance scope. See `CONSUMER-STYLING.md` in the component directory for full token documentation and examples.

package/app/app.config.ts

@@ -1,4 +1,4 @@
-import type { SemanticTheme, DisplayPromptTheme, DisplayToastTheme, DisplayToastPosition, DisplayToastAlignment } from "~/types/components";
+import type { SemanticTheme, DisplayPromptTheme, DisplayToastTheme, DisplayToastPosition, DisplayToastAlignment } from "./types/components";
 
 export default defineAppConfig({
   srcdev: {

package/app/assets/styles/setup/01.config/index.css

@@ -1,2 +1,2 @@
-@import "./_normalise";
-@import "./_head";
+@import "./_normalise.css";
+@import "./_head.css";

package/app/assets/styles/setup/02.colours/index.css

@@ -1,8 +1,8 @@
-@import "./_theme-params";
-@import "./_amber";
-@import "./_blue";
-@import "./_green";
-@import "./_orange";
-@import "./_red";
-@import "./_slate";
-@import "./_sunset";
+@import "./_theme-params.css";
+@import "./_amber.css";
+@import "./_blue.css";
+@import "./_green.css";
+@import "./_orange.css";
+@import "./_red.css";
+@import "./_slate.css";
+@import "./_sunset.css";

package/app/assets/styles/setup/03.theming/index.css

@@ -1,6 +1,6 @@
-@import "./theme-ramp";
-@import "./_theme-slots";
-@import "./_default";
-@import "./_error";
-@import "./_success";
-@import "./_warning";
+@import "./theme-ramp.css";
+@import "./_theme-slots.css";
+@import "./_default.css";
+@import "./_error.css";
+@import "./_success.css";
+@import "./_warning.css";

package/app/assets/styles/setup/04.elements/forms/index.css

@@ -1,7 +1,7 @@
-@import "./00.element-defaults";
+@import "./00.element-defaults.css";
 @import "./01.field-layout-container-level.css";
 @import "./02.typography.css";
-@import "./03.generic-input-geometry";
+@import "./03.generic-input-geometry.css";
 @import "./04.slot-icon-system.css";
 @import "./05.checkbox-radio-geometry.css";
 @import "./06.button-geometry.css";

package/app/assets/styles/setup/04.elements/index.css

@@ -1 +1 @@
-@import "./forms/";
+@import "./forms/index.css";

package/app/assets/styles/setup/05.typography/01.tokens/index.css

@@ -1,3 +1,3 @@
-@import "./_font-family";
-@import "./_reponsive-font-sizes";
-@import "./_timing-functions";
+@import "./_font-family.css";
+@import "./_reponsive-font-sizes.css";
+@import "./_timing-functions.css";

package/app/assets/styles/setup/05.typography/02.utility-classes/index.css

@@ -1,9 +1,9 @@
-@import "./_font-classes-page-heading";
-@import "./_font-classes-page-body";
-@import "./_font-classes-page-link";
-@import "./_font-classes-section";
-@import "./_font-classes-article";
-@import "./_font-classes-card";
+@import "./_font-classes-page-heading.css";
+@import "./_font-classes-page-body.css";
+@import "./_font-classes-page-link.css";
+@import "./_font-classes-section.css";
+@import "./_font-classes-article.css";
+@import "./_font-classes-card.css";
 @import "./_generic-font-classes.css";
 @import "./_generic-font-variation-settings.css";
 @import "./_generic-font-weights.css";

package/app/assets/styles/setup/05.typography/index.css

@@ -1,2 +1,2 @@
-@import "./01.tokens";
-@import "./02.utility-classes";
+@import "./01.tokens/index.css";
+@import "./02.utility-classes/index.css";

package/app/assets/styles/setup/06.utility-classes/animations/index.css

@@ -1,5 +1,5 @@
-@import "./_entry-zoom-reveal";
-@import "./_entry-slide-in";
-@import "./_entry-exit-blur";
-@import "./_auto-rotate";
+@import "./_entry-zoom-reveal.css";
+@import "./_entry-slide-in.css";
+@import "./_entry-exit-blur.css";
+@import "./_auto-rotate.css";
 @import "./_animation-scroller-x.css";

package/app/assets/styles/setup/06.utility-classes/index.css

@@ -1,4 +1,4 @@
-@import "./animations/";
-@import "./spacing/";
+@import "./animations/index.css";
+@import "./spacing/index.css";
 /* @import "./layout/"; */
-@import "./_a11y";
+@import "./_a11y.css";

package/app/assets/styles/setup/06.utility-classes/spacing/index.css

@@ -1,3 +1,3 @@
-@import "./_fluid-spacing";
-@import "./_margin";
-@import "./_padding";
+@import "./_fluid-spacing.css";
+@import "./_margin.css";
+@import "./_padding.css";

package/app/assets/styles/setup/a11y/index.css

@@ -1 +1 @@
-@import "./_variables";
+@import "./_variables.css";

package/app/assets/styles/setup/index.css

@@ -1,9 +1,9 @@
 @layer reset, colours, theming, form-tokens, typography, a11y, components, utilities, consumer;
 
-@import "./01.config/" layer(reset);
-@import "./02.colours/" layer(colours);
-@import "./03.theming/" layer(theming);
-@import "./04.elements/" layer(form-tokens);
-@import "./05.typography/" layer(typography);
-@import "./a11y/" layer(a11y);
-@import "./06.utility-classes/" layer(utilities);
+@import "./01.config/index.css" layer(reset);
+@import "./02.colours/index.css" layer(colours);
+@import "./03.theming/index.css" layer(theming);
+@import "./04.elements/index.css" layer(form-tokens);
+@import "./05.typography/index.css" layer(typography);
+@import "./a11y/index.css" layer(a11y);
+@import "./06.utility-classes/index.css" layer(utilities);

package/app/components/01.atoms/content-wrappers/docs-pages/ContentDocs.vue

@@ -1,8 +1,12 @@
 <template>
   <component :is="tag" ref="rootEl" class="content-docs" :class="[elementClasses]">
     <div class="content-docs-inner">
+      <div v-if="hasDocsContent" class="docs-content">
+        <slot name="docsContent"></slot>
+      </div>
       <div v-if="hasDocsNav" class="docs-nav">
         <ExpandingPanel
+          v-model="docsNavPanelOpen"
           :name="docsNavPanelName"
           :animation-duration="200"
           :force-opened="docsNavForceOpen"
@@ -21,7 +25,10 @@
                     class="docs-nav-link"
                     :class="{ 'is-active': item.to === activeNavItem }"
                     :aria-current="item.to === activeNavItem ? 'page' : undefined"
-                    @click="activeNavItem = item.to"
+                    @click="
+                      activeNavItem = item.to;
+                      docsNavPanelOpen = false;
+                    "
                   >
                     <Icon v-if="item.icon" :name="item.icon" class="docs-nav-link-icon" aria-hidden="true" />
                     <span class="docs-nav-link-label">{{ item.label }}</span>
@@ -32,11 +39,9 @@
           </template>
         </ExpandingPanel>
       </div>
-      <div v-if="hasDocsContent" class="docs-content">
-        <slot name="docsContent"></slot>
-      </div>
       <div v-if="hasDocsPageNav" class="docs-page-nav">
         <ExpandingPanel
+          v-model="docsPageNavPanelOpen"
           :name="docsPageNavPanelName"
           :animation-duration="200"
           :force-opened="docsPageNavForceOpen"
@@ -55,7 +60,10 @@
                     class="docs-page-nav-link"
                     :class="{ 'is-active': item.to === activePageNavItem }"
                     :aria-current="item.to === activePageNavItem ? 'page' : undefined"
-                    @click="activePageNavItem = item.to"
+                    @click="
+                      activePageNavItem = item.to;
+                      docsPageNavPanelOpen = false;
+                    "
                   >
                     <Icon v-if="item.icon" :name="item.icon" class="docs-page-nav-link-icon" aria-hidden="true" />
                     <span class="docs-page-nav-link-label">{{ item.label }}</span>
@@ -121,9 +129,9 @@ const docsNavOnTop = computed(() => !isDesktop.value);
 const docsPageNavForceOpen = computed(() => !isMobile.value);
 const docsPageNavOnTop = computed(() => isMobile.value);
 
-// Shared `name` groups the two <details> into a mutually-exclusive native accordion —
-// wanted on mobile (neither is forceOpened), wrong on tablet/desktop where both are
-// forceOpened simultaneously: a shared name would make the browser force-close one.
+const docsNavPanelOpen = ref(false);
+const docsPageNavPanelOpen = ref(false);
+
 const panelGroupId = useId();
 const docsNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${panelGroupId}-docsNav`));
 const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${panelGroupId}-docsPageNav`));
@@ -132,7 +140,6 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
 <style lang="css">
 @layer components {
   .content-docs {
-    /* Shared defaults — theme both docsNav and docsPageNav at once */
     --_heading-font-size: var(--content-docs-heading-font-size, 1.4rem);
     --_heading-font-weight: var(--content-docs-heading-font-weight, 700);
     --_heading-color: var(--content-docs-heading-color, light-dark(var(--slate-10), var(--slate-01)));
@@ -146,8 +153,6 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
     --_panel-padding-inline: var(--content-docs-panel-padding-inline, 0.8rem);
     --_panel-border-radius: var(--content-docs-panel-border-radius, 0.5rem);
 
-    /* Fixed-width grid tracks — the docsNav/docsPageNav columns at tablet/desktop.
-       docsPageNav gets a narrower track at tablet since docsNav is full-width there. */
     --_nav-column-width: var(--content-docs-nav-column-width, 23rem);
     --_page-nav-column-width: var(--content-docs-page-nav-column-width, 22rem);
     --_page-nav-column-width-tablet: var(--content-docs-page-nav-column-width-tablet, 20rem);
@@ -164,7 +169,6 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
     --_link-active-bg: var(--content-docs-link-active-bg, light-dark(var(--green-01), var(--green-09)));
     --_link-active-color: var(--content-docs-link-active-color, light-dark(var(--green-10), var(--green-04)));
 
-    /* Per-side overrides — each falls back to the shared token above */
     --_nav-heading-font-size: var(--content-docs-nav-heading-font-size, var(--_heading-font-size));
     --_nav-heading-font-weight: var(--content-docs-nav-heading-font-weight, var(--_heading-font-weight));
     --_nav-heading-color: var(--content-docs-nav-heading-color, var(--_heading-color));
@@ -313,15 +317,6 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
       }
     }
 
-    /* Grid (not flex) so the label column stays aligned at a fixed offset whether or
-       not an item has an icon — an icon-less item's label still starts in column 2,
-       instead of collapsing back to column 1 like it would with flex.
-
-       Icon at the end: set --docs-nav-link-icon-order to rtl. This mirrors which
-       physical side each grid column renders on without touching column sizing —
-       swapping grid-column values directly would leave the label squeezed into the
-       icon-sized track instead. The label/icon direction resets further down undo
-       the mirroring for their own content so text and icon glyphs don't visually flip. */
     .docs-nav-link {
       display: grid;
       grid-template-columns: var(--docs-nav-link-icon-size, 1.6rem) 1fr;

package/app/components/01.atoms/content-wrappers/docs-pages/tests/ContentDocs.spec.ts

@@ -9,7 +9,9 @@ beforeEach(() => {
   resizeCallback = null;
   vi.stubGlobal(
     "ResizeObserver",
-    vi.fn((callback: ResizeObserverCallback) => {
+    // Vitest 4: a mock's implementation must be a regular function (not an
+    // arrow function) to remain constructible via `new`.
+    vi.fn(function (callback: ResizeObserverCallback) {
       resizeCallback = callback;
       return {
         observe: vi.fn(),
@@ -74,6 +76,16 @@ describe("ContentDocs", () => {
     expect(wrapper.find('[data-testid="body"]').text()).toBe("Body");
   });
 
+  it("places docsContent before docsNav and docsPageNav in DOM order, so a consumer's h1 is reachable before either nav panel's h3 heading (visual position is unaffected — grid-template-areas places all three, not source order)", async () => {
+    const wrapper = await mountSuspended(ContentDocs, {
+      props: { docsNavItems: navItems, docsPageNavItems: pageNavItems },
+      slots: { docsContent: "<h1>Title</h1>" },
+    });
+    const inner = wrapper.find(".content-docs-inner").element;
+    const children = [...inner.children].map((el) => el.className);
+    expect(children).toEqual(["docs-content", "docs-nav", "docs-page-nav"]);
+  });
+
   // ─── labels ─────────────────────────────────────────────────────────────
 
   it("defaults docsNavLabel to 'Navigation' and docsPageNavLabel to 'On this page'", async () => {
@@ -142,6 +154,28 @@ describe("ContentDocs", () => {
     expect(wrapper.emitted("update:activePageNavItem")?.[0]).toEqual(["/one#overview"]);
   });
 
+  // ─── closing on link click (mobile overlay behaviour) ─────────────────────
+
+  it("closes the docsNav panel when a link inside it is clicked", async () => {
+    const wrapper = await mountSuspended(ContentDocs, { props: { docsNavItems: navItems } });
+
+    await wrapper.find(".docs-nav summary").trigger("click");
+    expect(wrapper.find(".docs-nav details").attributes("open")).toBeDefined();
+
+    await wrapper.find(".docs-nav").findAll("a")[0]?.trigger("click");
+    expect(wrapper.find(".docs-nav details").attributes("open")).toBeUndefined();
+  });
+
+  it("closes the docsPageNav panel when a link inside it is clicked", async () => {
+    const wrapper = await mountSuspended(ContentDocs, { props: { docsPageNavItems: pageNavItems } });
+
+    await wrapper.find(".docs-page-nav summary").trigger("click");
+    expect(wrapper.find(".docs-page-nav details").attributes("open")).toBeDefined();
+
+    await wrapper.find(".docs-page-nav").find("a").trigger("click");
+    expect(wrapper.find(".docs-page-nav details").attributes("open")).toBeUndefined();
+  });
+
   // ─── container-width-driven forceOpened ────────────────────────────────────
 
   describe("breakpoint-driven forceOpened", () => {

package/app/components/02.molecules/alert-masked-content/tests/AlertMaskedContent.spec.ts

@@ -2,11 +2,15 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import AlertMaskedContent from "../AlertMaskedContent.vue";
 
-const mockResizeObserver = vi.fn(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
+// Vitest 4: a mock's implementation must be a regular function (not an
+// arrow function) to remain constructible via `new`.
+const mockResizeObserver = vi.fn(function () {
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  };
+});
 
 vi.stubGlobal("ResizeObserver", mockResizeObserver);
 

package/app/components/02.molecules/expandable/expanding-panel/tests/ExpandingPanel.spec.ts

@@ -437,6 +437,12 @@ describe("ExpandingPanel", () => {
     await wrapper.find("summary").trigger("click");
     expect(vm.isPanelOpen).toBe(true);
 
+    // vueuse's onClickOutside debounces re-entrant clicks via a real setTimeout(0) that
+    // flips an internal "isProcessingClick" flag back off. With fake timers active
+    // (test/vitest.setup.ts) that flag never resets on its own, so the summary click
+    // above would otherwise permanently suppress the very next click. Advance past it.
+    vi.advanceTimersByTime(0);
+
     document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     await nextTick();
 

package/app/components/02.molecules/navigation/site-navigation/tests/SiteNavigation.spec.ts

@@ -5,11 +5,15 @@ import SiteNavigation from "../SiteNavigation.vue";
 import type { NavItemData } from "~/types/components/navigation-horizontal.d";
 
 // useResizeObserver (from @vueuse/core) requires ResizeObserver
-const mockResizeObserver = vi.fn(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
+// Vitest 4: a mock's implementation must be a regular function (not an
+// arrow function) to remain constructible via `new`.
+const mockResizeObserver = vi.fn(function () {
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  };
+});
 
 beforeEach(() => {
   vi.stubGlobal("ResizeObserver", mockResizeObserver);

package/app/components/02.molecules/navigation/tab-navigation/tests/TabNavigation.spec.ts

@@ -5,11 +5,15 @@ import TabNavigation from "../TabNavigation.vue";
 import type { NavItemData } from "~/types/components/navigation-horizontal.d";
 
 // useResizeObserver (from @vueuse/core) requires ResizeObserver
-const mockResizeObserver = vi.fn(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
+// Vitest 4: a mock's implementation must be a regular function (not an
+// arrow function) to remain constructible via `new`.
+const mockResizeObserver = vi.fn(function () {
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  };
+});
 
 beforeEach(() => {
   vi.stubGlobal("ResizeObserver", mockResizeObserver);

package/app/components/03.organisms/image-galleries/slider-gallery/tests/SliderGallery.spec.ts

@@ -63,7 +63,11 @@ describe("SliderGallery", () => {
     mockImage = { src: "", onload: null, onerror: null };
     vi.stubGlobal(
       "Image",
-      vi.fn(() => mockImage)
+      // Vitest 4: a mock's implementation must be a regular function (not an
+      // arrow function) to remain constructible via `new`.
+      vi.fn(function () {
+        return mockImage;
+      })
     );
   });
 

package/app/components/alert-mask/tests/AlertMaskCore.spec.ts

@@ -23,11 +23,15 @@ interface AlertMaskCoreInstance {
 }
 
 // Mock ResizeObserver
-const mockResizeObserver = vi.fn(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
+// Vitest 4: a mock's implementation must be a regular function (not an
+// arrow function) to remain constructible via `new`.
+const mockResizeObserver = vi.fn(function () {
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  };
+});
 
 vi.stubGlobal("ResizeObserver", mockResizeObserver);
 

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

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { nextTick, ref } from "vue";
 import { useContainerBreakpoints } from "../useContainerBreakpoints";
 
@@ -8,7 +8,9 @@ beforeEach(() => {
   resizeCallback = null;
   vi.stubGlobal(
     "ResizeObserver",
-    vi.fn((callback: ResizeObserverCallback) => {
+    // Vitest 4: a mock's implementation must be a regular function (not an
+    // arrow function) to remain constructible via `new`.
+    vi.fn(function (callback: ResizeObserverCallback) {
       resizeCallback = callback;
       return {
         observe: vi.fn(),
@@ -19,6 +21,10 @@ beforeEach(() => {
   );
 });
 
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
 function triggerResize(el: HTMLElement, width: number) {
   Object.defineProperty(el, "offsetWidth", { value: width, configurable: true });
   resizeCallback?.(
@@ -27,15 +33,29 @@ function triggerResize(el: HTMLElement, width: number) {
   );
 }
 
+// @vueuse/core's useElementSize reads the element's initial width in onMounted via
+// `offsetWidth - computed padding/border`, ahead of any ResizeObserver callback. happy-dom's
+// getComputedStyle() only resolves real "0px" values (rather than "") for padding/border on an
+// element that's actually attached to the document — a detached `createElement` div keeps
+// returning "", so parseFloat() turns the subtraction into NaN. Zero the box model AND attach
+// the element so that initial-width read is a real, non-NaN value.
+function createEl(): HTMLElement {
+  const el = document.createElement("div");
+  el.style.padding = "0px";
+  el.style.border = "0px";
+  document.body.appendChild(el);
+  return el;
+}
+
 describe("useContainerBreakpoints", () => {
   it("defaults active to base when narrower than the smallest breakpoint", () => {
-    const el = ref<HTMLElement | null>(document.createElement("div"));
+    const el = ref<HTMLElement | null>(createEl());
     const { active } = useContainerBreakpoints(undefined, el);
     expect(active.value).toBe("base");
   });
 
   it("updates active as the observed element's width crosses breakpoints", async () => {
-    const el = ref<HTMLElement | null>(document.createElement("div"));
+    const el = ref<HTMLElement | null>(createEl());
     const { active } = useContainerBreakpoints(undefined, el);
 
     triggerResize(el.value as HTMLElement, 700);
@@ -48,7 +68,7 @@ describe("useContainerBreakpoints", () => {
   });
 
   it("greaterOrEqual/smaller reflect the current width against a named breakpoint", async () => {
-    const el = ref<HTMLElement | null>(document.createElement("div"));
+    const el = ref<HTMLElement | null>(createEl());
     const { greaterOrEqual, smaller } = useContainerBreakpoints(undefined, el);
     const isLg = greaterOrEqual("lg");
     const isSmallerThanMd = smaller("md");
@@ -63,7 +83,7 @@ describe("useContainerBreakpoints", () => {
   });
 
   it("between returns true only within the [min, max) range", async () => {
-    const el = ref<HTMLElement | null>(document.createElement("div"));
+    const el = ref<HTMLElement | null>(createEl());
     const { between } = useContainerBreakpoints(undefined, el);
     const isTablet = between("sm", "lg");
 
@@ -77,7 +97,7 @@ describe("useContainerBreakpoints", () => {
   });
 
   it("supports a custom breakpoints map", async () => {
-    const el = ref<HTMLElement | null>(document.createElement("div"));
+    const el = ref<HTMLElement | null>(createEl());
     const { active } = useContainerBreakpoints({ narrow: 400, wide: 900 }, el);
 
     triggerResize(el.value as HTMLElement, 500);

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

@@ -6,8 +6,14 @@ const PHONE_NUMBER = "447700900000";
 
 // mockNuxtImport intercepts Nuxt's auto-import resolution — vi.stubGlobal cannot.
 // Use vi.hoisted so the mock function is available before module evaluation.
+// Nuxt's own router plugin also calls useRuntimeConfig() during app init and
+// reads `.app.baseURL` — the mock must include that shape too, or app
+// initialization throws before the test body runs.
 const { useRuntimeConfigMock } = vi.hoisted(() => ({
-  useRuntimeConfigMock: vi.fn(() => ({ public: { whatsappNumber: PHONE_NUMBER } })),
+  useRuntimeConfigMock: vi.fn(() => ({
+    public: { whatsappNumber: PHONE_NUMBER },
+    app: { baseURL: "/" },
+  })),
 }));
 
 mockNuxtImport("useRuntimeConfig", () => useRuntimeConfigMock);
@@ -17,7 +23,7 @@ describe("useWhatsApp", () => {
 
   beforeEach(() => {
     windowOpenSpy = vi.spyOn(window, "open").mockImplementation(() => null);
-    useRuntimeConfigMock.mockReturnValue({ public: { whatsappNumber: PHONE_NUMBER } });
+    useRuntimeConfigMock.mockReturnValue({ public: { whatsappNumber: PHONE_NUMBER }, app: { baseURL: "/" } });
   });
 
   afterEach(() => {
@@ -85,14 +91,14 @@ describe("useWhatsApp", () => {
     });
 
     it("does not call window.open when number is not configured", () => {
-      useRuntimeConfigMock.mockReturnValue({ public: { whatsappNumber: "" } });
+      useRuntimeConfigMock.mockReturnValue({ public: { whatsappNumber: "" }, app: { baseURL: "/" } });
       const { openWhatsApp } = useWhatsApp();
       openWhatsApp([{ label: "Name", value: "Jane" }]);
       expect(windowOpenSpy).not.toHaveBeenCalled();
     });
 
     it("logs a warning when number is not configured", () => {
-      useRuntimeConfigMock.mockReturnValue({ public: { whatsappNumber: "" } });
+      useRuntimeConfigMock.mockReturnValue({ public: { whatsappNumber: "" }, app: { baseURL: "/" } });
       const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
       const { openWhatsApp } = useWhatsApp();
       openWhatsApp([{ label: "Name", value: "Jane" }]);

package/nuxt.config.ts

@@ -130,6 +130,15 @@ export default defineNuxtConfig({
         ...(isStandalone ? ["vue-qrcode-reader"] : []),
       ],
     },
+    // Vite 8 (pulled in by Nuxt 4.5) defaults build.cssMinify to "lightningcss" instead of
+    // "esbuild". lightningcss has an open bug where it drops the unprefixed `backdrop-filter`
+    // once autoprefixer adds `-webkit-backdrop-filter` alongside it, breaking glass/blur effects
+    // (see https://github.com/vitejs/vite/issues/22649) — this repo relies on backdrop-filter in
+    // several components (GlassPanel, SiteNavigation, TabNavigation, DisplayDialog, ColourFinder,
+    // MagneticNavigation). Pin back to esbuild until upstream fixes it.
+    build: {
+      cssMinify: "esbuild",
+    },
   },
   vue: {
     runtimeCompiler: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.2.10",
+  "version": "9.3.0",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -90,33 +90,35 @@
     "@iconify-json/akar-icons": "1.2.7",
     "@iconify-json/bi": "1.2.7",
     "@iconify-json/bitcoin-icons": "1.2.5",
-    "@iconify-json/gravity-ui": "1.2.12",
+    "@iconify-json/gravity-ui": "1.2.14",
     "@iconify-json/ic": "*",
-    "@iconify-json/logos": "1.2.11",
-    "@iconify-json/lucide": "*",
-    "@iconify-json/material-symbols": "1.2.73",
+    "@iconify-json/logos": "1.2.13",
+    "@iconify-json/lucide": "1.2.124",
+    "@iconify-json/material-symbols": "1.2.89",
     "@iconify-json/mdi": "1.2.3",
     "@iconify-json/radix-icons": "*",
-    "@nuxt/eslint": "1.15.2",
+    "@nuxt/eslint": "1.17.0",
     "@nuxt/schema": "4.4.6",
-    "@nuxt/test-utils": "3.23.0",
+    "@nuxt/test-utils": "4.1.0",
     "@nuxtjs/storybook": "9.1.0-29374011.dab79ae",
-    "@playwright/test": "1.60.0",
+    "@playwright/test": "1.62.1",
     "@storybook/addon-a11y": "10.0.7",
     "@storybook/addon-docs": "10.0.7",
     "@storybook/builder-vite": "10.0.7",
-    "@vue/test-utils": "2.4.10",
-    "@vueuse/core": "14.3.0",
-    "eslint": "10.4.0",
+    "@vue/test-utils": "2.4.11",
+    "@vueuse/core": "14.4.0",
+    "eslint": "10.8.1",
     "eslint-plugin-storybook": "10.0.7",
-    "happy-dom": "20.9.0",
+    "happy-dom": "20.11.2",
     "nuxt-qrcode": "0.4.10",
+    "oxc-parser": "0.131.0",
     "patch-package": "8.0.1",
-    "release-it": "20.0.1",
+    "release-it": "21.0.2",
     "storybook": "10.0.7",
-    "typescript": "~5.8.3",
-    "vitest": "3.2.4",
-    "vue-tsc": "3.3.1"
+    "typescript": "5.9.3",
+    "vitest": "4.1.11",
+    "vue-router": "5.2.0",
+    "vue-tsc": "3.3.10"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",
@@ -130,15 +132,18 @@
   },
   "dependencies": {
     "@nuxt/fonts": "0.14.0",
-    "@nuxt/icon": "2.2.2",
-    "@nuxt/image": "2.0.0",
-    "@oddbird/css-anchor-positioning": "0.9.0",
-    "@pinia/nuxt": "0.11.3",
+    "@nuxt/icon": "2.5.0",
+    "@nuxt/image": "2.1.0",
+    "@oddbird/css-anchor-positioning": "0.10.2",
+    "@pinia/nuxt": "1.0.2",
     "@vueuse/motion": "3.0.3",
     "focus-trap-vue": "4.1.0",
     "nuxt": "4.4.6",
-    "pinia": "3.0.4",
+    "pinia": "4.0.3",
     "pinia-plugin-persistedstate": "4.7.1",
     "zod": "4.4.3"
+  },
+  "overrides": {
+    "vue-router": "5.2.0"
   }
 }