srcdev-nuxt-components 9.2.11 → 9.3.0

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/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(),

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.11",
+  "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"
   }
 }