srcdev-nuxt-components 9.5.7 → 9.6.1

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

@@ -1,367 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import { defineComponent, nextTick } from "vue";
-import SiteNavigation from "../SiteNavigation.vue";
-import type { NavItemData } from "~/types/components/nav-item.d";
-
-// useResizeObserver (from @vueuse/core) requires ResizeObserver
-// 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);
-  // ⚠️ Do NOT call vi.unstubAllGlobals() in afterEach —
-  // it removes global stubs from vitest.setup.ts ($fetch, etc.)
-});
-
-const defaultNavItemData: NavItemData = {
-  main: [
-    { text: "Home", href: "/" },
-    { text: "About", href: "/about" },
-    { text: "Contact", href: "/contact" },
-  ],
-};
-
-describe("SiteNavigation", () => {
-  it("mounts without error", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("renders a nav element as root", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    expect(wrapper.element.tagName.toLowerCase()).toBe("nav");
-  });
-
-  it("has aria-label on the nav", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    expect(wrapper.attributes("aria-label")).toBe("Site navigation");
-  });
-
-  it("renders correct HTML structure", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  // ─── isLoaded ──────────────────────────────────────────────────────────────
-
-  it("applies is-loaded class after mounting", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    await nextTick();
-    expect(wrapper.classes()).toContain("is-loaded");
-  });
-
-  // ─── Nav list ──────────────────────────────────────────────────────────────
-
-  it("renders the nav list when not collapsed", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    expect(wrapper.find(".site-nav-list").exists()).toBe(true);
-  });
-
-  it("renders the correct number of nav items", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    // Filter out .nav-indicator-li elements injected by initNavDecorators
-    const items = wrapper.findAll(".site-nav-list li:not(.nav-indicator-li)");
-    expect(items.length).toBe(3);
-  });
-
-  it("renders item text correctly", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    const links = wrapper.findAll(".site-nav-link");
-    expect(links[0]!.text()).toContain("Home");
-    expect(links[1]!.text()).toContain("About");
-    expect(links[2]!.text()).toContain("Contact");
-  });
-
-  it("renders item href correctly", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    const links = wrapper.findAll(".site-nav-link");
-    expect(links[0]!.attributes("href")).toBe("/");
-    expect(links[1]!.attributes("href")).toBe("/about");
-    expect(links[2]!.attributes("href")).toBe("/contact");
-  });
-
-  it("applies cssName as class on the li element", async () => {
-    const navItemData: NavItemData = {
-      main: [{ text: "Home", href: "/", cssName: "is-active" }],
-    };
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData },
-    });
-    expect(wrapper.find(".site-nav-list li").classes()).toContain("is-active");
-  });
-
-  it("renders an icon when iconName is provided", async () => {
-    const navItemData: NavItemData = {
-      main: [{ text: "Home", href: "/", iconName: "heroicons:home" }],
-    };
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData },
-    });
-    // Icon renders with aria-hidden="true"
-    const firstItem = wrapper.find(".site-nav-list li:not(.nav-indicator-li)");
-    expect(firstItem.find("[aria-hidden='true']").exists()).toBe(true);
-  });
-
-  it("does not render an icon when iconName is not provided", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    const firstLink = wrapper.find(".site-nav-link");
-    expect(firstLink.find("[aria-hidden='true']").exists()).toBe(false);
-  });
-
-  it("renders external links with the correct href", async () => {
-    const navItemData: NavItemData = {
-      main: [{ text: "External", href: "https://example.com", isExternal: true }],
-    };
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData },
-    });
-    expect(wrapper.find(".site-nav-link").attributes("href")).toBe("https://example.com");
-  });
-
-  // ─── Alignment variants ────────────────────────────────────────────────────
-
-  it("applies site-navigation--left class by default", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    expect(wrapper.classes()).toContain("site-navigation--left");
-  });
-
-  it("applies site-navigation--center class when navAlign is center", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData, navAlign: "center" },
-    });
-    expect(wrapper.classes()).toContain("site-navigation--center");
-  });
-
-  it("applies site-navigation--right class when navAlign is right", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData, navAlign: "right" },
-    });
-    expect(wrapper.classes()).toContain("site-navigation--right");
-  });
-
-  // ─── styleClassPassthrough ─────────────────────────────────────────────────
-
-  it("applies styleClassPassthrough classes to the nav element", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: {
-        navItemData: defaultNavItemData,
-        styleClassPassthrough: ["custom-nav", "theme-dark"],
-      },
-    });
-    expect(wrapper.classes()).toContain("custom-nav");
-    expect(wrapper.classes()).toContain("theme-dark");
-  });
-
-  it("updates classes when styleClassPassthrough prop changes", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: {
-        navItemData: defaultNavItemData,
-        styleClassPassthrough: ["initial-class"],
-      },
-    });
-    expect(wrapper.classes()).toContain("initial-class");
-
-    await wrapper.setProps({ styleClassPassthrough: ["updated-class"] });
-    await nextTick();
-
-    expect(wrapper.classes()).toContain("updated-class");
-    expect(wrapper.classes()).not.toContain("initial-class");
-  });
-
-  // ─── Non-collapsed state (default in JSDOM — dimensions are all 0) ─────────
-
-  it("does not show the burger button when not collapsed", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    expect(wrapper.find(".site-nav-burger").exists()).toBe(false);
-  });
-
-  it("does not show the nav panel when not collapsed", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    expect(wrapper.find(".site-nav-panel").exists()).toBe(false);
-  });
-
-  it("does not have is-collapsed class when not collapsed", async () => {
-    const wrapper = await mountSuspended(SiteNavigation, {
-      props: { navItemData: defaultNavItemData },
-    });
-    expect(wrapper.classes()).not.toContain("is-collapsed");
-  });
-
-  // ─── Collapsed state ───────────────────────────────────────────────────────
-  // isCollapsed is driven by DOM layout measurements (scrollWidth > clientWidth).
-  // In JSDOM both values are 0 so we cannot trigger collapse via resize.
-  // Instead we force the state directly through the component's setup context.
-
-  describe("when collapsed", () => {
-    // setupState auto-unwraps refs — set the plain value directly
-    interface SiteNavSetup {
-      isCollapsed: boolean;
-      isMenuOpen: boolean;
-    }
-
-    async function mountCollapsed(extraProps: Record<string, unknown> = {}) {
-      const wrapper = await mountSuspended(SiteNavigation, {
-        props: { navItemData: defaultNavItemData, ...extraProps },
-      });
-      const setup = (wrapper.vm as unknown as { $: { setupState: SiteNavSetup } }).$.setupState;
-      setup.isCollapsed = true;
-      await nextTick();
-      return { wrapper, setup };
-    }
-
-    it("applies is-collapsed class", async () => {
-      const { wrapper } = await mountCollapsed();
-      expect(wrapper.classes()).toContain("is-collapsed");
-    });
-
-    it("hides the horizontal nav list", async () => {
-      const { wrapper } = await mountCollapsed();
-      expect(wrapper.find(".site-nav-list").exists()).toBe(false);
-    });
-
-    it("shows the burger button", async () => {
-      const { wrapper } = await mountCollapsed();
-      expect(wrapper.find(".site-nav-burger").exists()).toBe(true);
-    });
-
-    it("shows the nav panel", async () => {
-      const { wrapper } = await mountCollapsed();
-      expect(wrapper.find(".site-nav-panel").exists()).toBe(true);
-    });
-
-    it("burger button has aria-expanded false when menu is closed", async () => {
-      const { wrapper } = await mountCollapsed();
-      expect(wrapper.find(".site-nav-burger").attributes("aria-expanded")).toBe("false");
-    });
-
-    it("panel does not have is-open class when menu is closed", async () => {
-      const { wrapper } = await mountCollapsed();
-      expect(wrapper.find(".site-nav-panel").classes()).not.toContain("is-open");
-    });
-
-    it("renders panel links matching main nav items", async () => {
-      const { wrapper } = await mountCollapsed();
-      const panelLinks = wrapper.findAll(".site-nav-panel-link");
-      expect(panelLinks.length).toBe(3);
-      expect(panelLinks[0]!.text()).toContain("Home");
-      expect(panelLinks[1]!.text()).toContain("About");
-      expect(panelLinks[2]!.text()).toContain("Contact");
-    });
-
-    it("toggles isMenuOpen on burger click", async () => {
-      const { wrapper, setup } = await mountCollapsed();
-      expect(setup.isMenuOpen).toBe(false);
-      await wrapper.find(".site-nav-burger").trigger("click");
-      expect(setup.isMenuOpen).toBe(true);
-      await wrapper.find(".site-nav-burger").trigger("click");
-      expect(setup.isMenuOpen).toBe(false);
-    });
-
-    it("applies menu-open class when menu is open", async () => {
-      const { wrapper } = await mountCollapsed();
-      await wrapper.find(".site-nav-burger").trigger("click");
-      await nextTick();
-      expect(wrapper.classes()).toContain("menu-open");
-    });
-
-    it("burger has aria-expanded true when menu is open", async () => {
-      const { wrapper } = await mountCollapsed();
-      await wrapper.find(".site-nav-burger").trigger("click");
-      await nextTick();
-      expect(wrapper.find(".site-nav-burger").attributes("aria-expanded")).toBe("true");
-    });
-
-    it("panel has is-open class when menu is open", async () => {
-      const { wrapper } = await mountCollapsed();
-      await wrapper.find(".site-nav-burger").trigger("click");
-      await nextTick();
-      expect(wrapper.find(".site-nav-panel").classes()).toContain("is-open");
-    });
-
-    it("panel is inert when menu is closed", async () => {
-      const { wrapper } = await mountCollapsed();
-      expect(wrapper.find(".site-nav-panel").attributes("inert")).toBeDefined();
-    });
-
-    it("panel is not inert when menu is open", async () => {
-      const { wrapper } = await mountCollapsed();
-      await wrapper.find(".site-nav-burger").trigger("click");
-      await nextTick();
-      expect(wrapper.find(".site-nav-panel").attributes("inert")).toBeUndefined();
-    });
-
-    it("burger aria-controls points at the panel's own id", async () => {
-      const { wrapper } = await mountCollapsed();
-      const panelId = wrapper.find(".site-nav-panel").attributes("id");
-      expect(panelId).toMatch(/^site-nav-panel-/);
-      expect(wrapper.find(".site-nav-burger").attributes("aria-controls")).toBe(panelId);
-    });
-
-    it("gives two instances on the same page distinct panel ids", async () => {
-      const Host = defineComponent({
-        components: { SiteNavigation },
-        setup: () => ({ navItemData: defaultNavItemData }),
-        template: `<div><SiteNavigation :nav-item-data="navItemData" /><SiteNavigation :nav-item-data="navItemData" /></div>`,
-      });
-      const host = await mountSuspended(Host);
-      const navs = host.findAllComponents(SiteNavigation);
-      for (const nav of navs) {
-        (nav.vm as unknown as { $: { setupState: SiteNavSetup } }).$.setupState.isCollapsed = true;
-      }
-      await nextTick();
-      const ids = host.findAll(".site-nav-panel").map((p) => p.attributes("id"));
-      expect(ids).toHaveLength(2);
-      expect(ids[0]).not.toBe(ids[1]);
-    });
-
-    it("uses the default burger labels", async () => {
-      const { wrapper } = await mountCollapsed();
-      expect(wrapper.find(".site-nav-burger").text()).toContain("Open navigation menu");
-      await wrapper.find(".site-nav-burger").trigger("click");
-      await nextTick();
-      expect(wrapper.find(".site-nav-burger").text()).toContain("Close navigation menu");
-    });
-
-    it("uses openMenuLabel and closeMenuLabel when given", async () => {
-      const { wrapper } = await mountCollapsed({ openMenuLabel: "Ouvrir le menu", closeMenuLabel: "Fermer le menu" });
-      expect(wrapper.find(".site-nav-burger").text()).toContain("Ouvrir le menu");
-      await wrapper.find(".site-nav-burger").trigger("click");
-      await nextTick();
-      expect(wrapper.find(".site-nav-burger").text()).toContain("Fermer le menu");
-    });
-  });
-});

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

@@ -1,30 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`SiteNavigation > renders correct HTML structure 1`] = `
-"<nav class="site-navigation site-navigation--left is-loaded" aria-label="Site navigation">
-  <ul class="site-nav-list" style="--_transition-duration: 0ms; --_x-active: 0px; --_width-active: NaN; --_x-hovered: 0px; --_width-hovered: NaN;">
-    <li class="is-active"><a href="/" class="site-nav-link" data-nav-item="">
-        <!--v-if--> Home
-      </a></li>
-    <li class=""><a href="/about" class="site-nav-link" data-nav-item="">
-        <!--v-if--> About
-      </a></li>
-    <li class=""><a href="/contact" class="site-nav-link" data-nav-item="">
-        <!--v-if--> Contact
-      </a></li>
-    <li aria-hidden="true" role="none" class="nav-indicator-li">
-      <div class="nav__hovered"></div>
-    </li>
-    <li aria-hidden="true" role="none" class="nav-indicator-li">
-      <div class="nav__active"></div>
-    </li>
-    <li aria-hidden="true" role="none" class="nav-indicator-li">
-      <div class="nav__active-indicator"></div>
-    </li>
-  </ul>
-  <!--v-if-->
-  <!--teleport start-->
-  <!--teleport end-->
-  <!--v-if-->
-</nav>"
-`;

package/app/components/02.molecules/navigation/tab-navigation/CONSUMER-STYLING.md

@@ -1,150 +0,0 @@
-# TabNavigation — Consumer Styling Guide
-
-## Public token API
-
-All `--tab-nav-*` tokens are the stable override surface. Set them at any scope (global, page, or
-instance) without touching the component itself.
-
-### Horizontal nav
-
-| Token | Default | Controls |
-|---|---|---|
-| `--tab-nav-link-color` | `var(--slate-01, currentColor)` | Link text colour (rest state) |
-| `--tab-nav-link-hover-color` | `var(--slate-04, currentColor)` | Link text colour on hover |
-| `--tab-nav-link-active-color` | `var(--slate-01, currentColor)` | Link text colour when route is active |
-| `--tab-nav-link-size` | `1.6rem` | Link font size |
-| `--tab-nav-link-weight` | `400` | Link font weight |
-| `--tab-nav-link-tracking` | `0.06em` | Link letter spacing |
-| `--tab-nav-gap` | `2.2rem` | Gap between nav items |
-| `--tab-nav-transition` | `250ms ease` | Colour transition on hover/active |
-
-### Indicator decorators
-
-| Token | Default | Controls |
-|---|---|---|
-| `--tab-nav-decorator-indicator-color` | `var(--slate-01, currentColor)` | Active-item underline bar colour |
-| `--tab-nav-decorator-hovered-bg` | `transparent` | Background fill pill that follows the pointer |
-
-### Mobile panel
-
-| Token | Default | Controls |
-|---|---|---|
-| `--tab-nav-panel-bg` | `var(--page-bg, #1a1614)` | Panel background colour |
-| `--tab-nav-panel-border-color` | `color-mix(in oklch, var(--slate-01, #c0847a) 35%, transparent)` | Border between nav bar and open panel |
-| `--tab-nav-panel-item-border` | `color-mix(in oklch, var(--slate-01, white) 8%, transparent)` | Divider between panel items |
-| `--tab-nav-panel-link-color` | `var(--slate-01, currentColor)` | Panel link text colour |
-| `--tab-nav-panel-link-hover-color` | `var(--slate-04, currentColor)` | Panel link text colour on hover |
-| `--tab-nav-panel-link-active-color` | `var(--slate-01, currentColor)` | Panel active link colour |
-| `--tab-nav-panel-padding-block` | `1.4rem` | Panel link vertical padding |
-| `--tab-nav-panel-padding-inline` | `1.5rem` | Panel link horizontal padding |
-| `--tab-nav-panel-slide-duration` | `350ms` | Panel open/close animation duration |
-| `--tab-nav-panel-slide-easing` | `cubic-bezier(0.4, 0, 0.2, 1)` | Panel open/close easing |
-
-### Burger button
-
-| Token | Default | Controls |
-|---|---|---|
-| `--tab-nav-burger-color` | `var(--slate-01, currentColor)` | Burger bar colour |
-| `--tab-nav-burger-width` | `22px` | Width of each burger bar |
-| `--tab-nav-burger-height` | `1.5px` | Height of each burger bar |
-| `--tab-nav-burger-gap` | `5px` | Gap between burger bars |
-| `--tab-nav-burger-transition` | `300ms ease` | Burger open/close animation |
-
-### Backdrop
-
-| Token | Default | Controls |
-|---|---|---|
-| `--tab-nav-backdrop-bg` | `oklch(0% 0 0 / 55%)` | Backdrop overlay background colour |
-| `--tab-nav-backdrop-blur` | `3px` | Backdrop blur amount |
-| `--tab-nav-backdrop-duration` | `350ms` | Backdrop fade duration |
-
----
-
-## Global theming
-
-Create `assets/styles/setup/07.components/tab-navigation.css` in the consuming app and set tokens
-on `:root`. These values apply to every `TabNavigation` instance across the site.
-
-```css
-/* assets/styles/setup/07.components/tab-navigation.css */
-:root {
-  --tab-nav-link-color: var(--brand-text);
-  --tab-nav-link-hover-color: var(--brand-text-muted);
-  --tab-nav-link-active-color: var(--brand-accent);
-  --tab-nav-decorator-indicator-color: var(--brand-accent);
-  --tab-nav-decorator-hovered-bg: oklch(from var(--brand-accent) l c h / 0.1);
-  --tab-nav-gap: 3rem;
-}
-```
-
----
-
-## 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`.
-
-### Page or section
-
-Override tokens for a single page by scoping them under a page wrapper. No `:deep()` is required
-(component styles are unscoped).
-
-```css
-/* In the consuming page's unscoped <style> block */
-.about-page {
-  .tab-navigation {
-    --tab-nav-link-color: var(--brand-warm-text);
-    --tab-nav-decorator-indicator-color: var(--brand-warm-accent);
-    --tab-nav-gap: 4rem;
-  }
-}
-```
-
-### One instance: inline style
-
-```vue
-<TabNavigation
-  :nav-item-data="navData"
-  style="
-    --tab-nav-decorator-indicator-color: oklch(65% 0.2 230);
-    --tab-nav-link-active-color: oklch(65% 0.2 230);
-    --tab-nav-gap: 3rem;
-  "
-/>
-```
-
-### One instance: style-class-passthrough
-
-```vue
-<TabNavigation :nav-item-data="navData" :style-class-passthrough="['brand-nav']" />
-```
-
-```css
-.tab-navigation.brand-nav {
-  --tab-nav-decorator-indicator-color: var(--brand-accent);
-  --tab-nav-decorator-hovered-bg: oklch(from var(--brand-accent) l c h / 0.1);
-  --tab-nav-link-active-color: var(--brand-accent);
-  --tab-nav-link-size: 1.4rem;
-  --tab-nav-link-tracking: 0.08em;
-}
-```
-
----
-
-## Notes
-
-- The active underline indicator and hover pill use CSS Anchor Positioning. They animate via
-  `left`/`right` transitions, so `transition` on `.nav__active-indicator` and `.nav__hovered` is
-  handled internally — only set `--tab-nav-transition` to control the link colour fade.
-- `--tab-nav-decorator-hovered-bg: transparent` (the default) hides the hover pill entirely; set
-  a semi-transparent colour to enable it.
-- Panel and burger tokens only take visual effect when the nav has collapsed to the burger state
-  (i.e. when the nav list overflows its container).
-- `--tab-nav-panel-bg` should match `--page-bg` so the panel blends with the page background in
-  the collapsed state.
-- The backdrop (`--tab-nav-backdrop-*`) appears behind the open panel and above page content at
-  `z-index: 10`. It teleports to `<body>` so it is unaffected by parent stacking contexts.
-