srcdev-nuxt-components 9.6.0 → 9.6.1

package/app/components/01.atoms/navigation/tabs/tests/TabsCore.spec.ts

@@ -1,274 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import TabsCore from "../TabsCore.vue";
-
-class MockResizeObserver {
-  observe = vi.fn();
-  unobserve = vi.fn();
-  disconnect = vi.fn();
-}
-
-const slots = {
-  "tab-0-trigger": "Tab One",
-  "tab-0-content": "<p class='panel-0'>Content one</p>",
-  "tab-1-trigger": "Tab Two",
-  "tab-1-content": "<p class='panel-1'>Content two</p>",
-  "tab-2-trigger": "Tab Three",
-  "tab-2-content": "<p class='panel-2'>Content three</p>",
-};
-
-const fiveSlots = {
-  ...slots,
-  "tab-3-trigger": "Tab Four",
-  "tab-3-content": "<p class='panel-3'>Content four</p>",
-  "tab-4-trigger": "Tab Five",
-  "tab-4-content": "<p class='panel-4'>Content five</p>",
-};
-
-describe("TabsCore", () => {
-  beforeEach(() => {
-    vi.stubGlobal("ResizeObserver", MockResizeObserver);
-  });
-
-  // ─── Mount ───────────────────────────────────────────────────────────────
-
-  it("mounts without error", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("renders one trigger and one panel per itemCount", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    expect(wrapper.findAll(".tabs-list-item")).toHaveLength(3);
-    expect(wrapper.findAll(".tab-content")).toHaveLength(3);
-  });
-
-  // ─── Accessibility structure ─────────────────────────────────────────────
-
-  it("renders a tablist with the default aria-label", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    const tablist = wrapper.find("[role='tablist']");
-    expect(tablist.exists()).toBe(true);
-    expect(tablist.attributes("aria-label")).toBe("Tabs");
-  });
-
-  it("uses a custom ariaLabel when provided", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3, ariaLabel: "Settings" }, slots });
-    expect(wrapper.find("[role='tablist']").attributes("aria-label")).toBe("Settings");
-  });
-
-  it("renders each trigger as a type=button with role=tab", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    const triggers = wrapper.findAll(".tabs-list-item");
-    triggers.forEach((trigger) => {
-      expect(trigger.attributes("type")).toBe("button");
-      expect(trigger.attributes("role")).toBe("tab");
-    });
-  });
-
-  it("renders each panel as role=tabpanel labelled by its trigger", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    const panels = wrapper.findAll(".tab-content");
-    panels.forEach((panel, index) => {
-      expect(panel.attributes("role")).toBe("tabpanel");
-      expect(panel.attributes("aria-labelledby")).toBe(`tab-${index}-trigger`);
-    });
-  });
-
-  // ─── Active tab state ────────────────────────────────────────────────────
-
-  it("marks the first tab active and its panel visible/unhidden on mount", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    const triggers = wrapper.findAll(".tabs-list-item");
-    const panels = wrapper.findAll(".tab-content");
-
-    expect(triggers[0]!.attributes("aria-selected")).toBe("true");
-    expect(triggers[0]!.attributes("tabindex")).toBe("0");
-    expect(triggers[1]!.attributes("aria-selected")).toBe("false");
-    expect(triggers[1]!.attributes("tabindex")).toBe("-1");
-
-    expect(panels[0]!.attributes("aria-hidden")).toBe("false");
-    expect((panels[0]!.element as HTMLElement).style.display).toBe("block");
-    expect(panels[1]!.attributes("aria-hidden")).toBe("true");
-    expect((panels[1]!.element as HTMLElement).style.display).toBe("none");
-  });
-
-  it("activates a tab on click and updates aria-selected, tabindex, and panel visibility", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    const triggers = wrapper.findAll(".tabs-list-item");
-    const panels = wrapper.findAll(".tab-content");
-
-    await triggers[1]!.trigger("click");
-
-    expect(triggers[0]!.attributes("aria-selected")).toBe("false");
-    expect(triggers[0]!.attributes("tabindex")).toBe("-1");
-    expect(triggers[1]!.attributes("aria-selected")).toBe("true");
-    expect(triggers[1]!.attributes("tabindex")).toBe("0");
-
-    expect(panels[0]!.attributes("aria-hidden")).toBe("true");
-    expect(panels[1]!.attributes("aria-hidden")).toBe("false");
-    expect((panels[1]!.element as HTMLElement).style.display).toBe("block");
-  });
-
-  // ─── Keyboard navigation ─────────────────────────────────────────────────
-
-  it("moves focus and activates the next tab on ArrowRight (axis x)", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    const triggers = wrapper.findAll(".tabs-list-item");
-
-    await triggers[0]!.trigger("keydown", { key: "ArrowRight" });
-
-    expect(triggers[1]!.attributes("aria-selected")).toBe("true");
-    expect(triggers[1]!.attributes("tabindex")).toBe("0");
-  });
-
-  it("wraps to the first tab on ArrowRight from the last tab", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    const triggers = wrapper.findAll(".tabs-list-item");
-
-    await triggers[2]!.trigger("click");
-    await triggers[2]!.trigger("keydown", { key: "ArrowRight" });
-
-    expect(triggers[0]!.attributes("aria-selected")).toBe("true");
-  });
-
-  it("moves focus to the previous tab on ArrowLeft (axis x)", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    const triggers = wrapper.findAll(".tabs-list-item");
-
-    await triggers[1]!.trigger("click");
-    await triggers[1]!.trigger("keydown", { key: "ArrowLeft" });
-
-    expect(triggers[0]!.attributes("aria-selected")).toBe("true");
-  });
-
-  it("uses ArrowUp/ArrowDown instead of ArrowLeft/ArrowRight when axis is y", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3, axis: "y" }, slots });
-    const triggers = wrapper.findAll(".tabs-list-item");
-
-    await triggers[0]!.trigger("keydown", { key: "ArrowRight" });
-    expect(triggers[0]!.attributes("aria-selected")).toBe("true");
-
-    await triggers[0]!.trigger("keydown", { key: "ArrowDown" });
-    expect(triggers[1]!.attributes("aria-selected")).toBe("true");
-  });
-
-  it("jumps to the last tab on End and the first tab on Home", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    const triggers = wrapper.findAll(".tabs-list-item");
-
-    await triggers[0]!.trigger("keydown", { key: "End" });
-    expect(triggers[2]!.attributes("aria-selected")).toBe("true");
-
-    await triggers[2]!.trigger("keydown", { key: "Home" });
-    expect(triggers[0]!.attributes("aria-selected")).toBe("true");
-  });
-
-  // ─── trackHover / trackActive / trackIndicator ──────────────────────────
-
-  it("renders all three indicator decorators by default", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    expect(wrapper.find(".nav__hovered").exists()).toBe(true);
-    expect(wrapper.find(".nav__active").exists()).toBe(true);
-    expect(wrapper.find(".nav__active-indicator").exists()).toBe(true);
-  });
-
-  it("omits the hover decorator when trackHover is false", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3, trackHover: false }, slots });
-    expect(wrapper.find(".nav__hovered").exists()).toBe(false);
-  });
-
-  it("omits the active decorator when trackActive is false", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3, trackActive: false }, slots });
-    expect(wrapper.find(".nav__active").exists()).toBe(false);
-  });
-
-  it("omits the underline indicator when trackIndicator is false", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3, trackIndicator: false }, slots });
-    expect(wrapper.find(".nav__active-indicator").exists()).toBe(false);
-  });
-
-  // ─── Hover indicator movement ────────────────────────────────────────────
-
-  it("moves the hover indicator position on mouseenter", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    const tabsList = wrapper.find(".tabs-list").element as HTMLElement;
-    const triggers = wrapper.findAll(".tabs-list-item");
-
-    expect(tabsList.style.getPropertyValue("--_width-hovered")).toBe("");
-
-    await triggers[1]!.trigger("mouseenter");
-
-    expect(tabsList.style.getPropertyValue("--_width-hovered")).not.toBe("");
-  });
-
-  it("resets the hover indicator to the active tab on mouseleave", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    const tabsList = wrapper.find(".tabs-list");
-    const triggers = wrapper.findAll(".tabs-list-item");
-
-    await triggers[1]!.trigger("mouseenter");
-    await tabsList.trigger("mouseleave");
-
-    // Should not throw, and the hover indicator settles back onto the active (first) tab.
-    expect((tabsList.element as HTMLElement).style.getPropertyValue("--_x-hovered")).toBe("0px");
-  });
-
-  it("clears a pending settle timeout when hovering a second tab before the first settles", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 3 }, slots });
-    const triggers = wrapper.findAll(".tabs-list-item");
-    const clearTimeoutSpy = vi.spyOn(global, "clearTimeout");
-
-    await triggers[1]!.trigger("mouseenter");
-    await triggers[2]!.trigger("mouseenter");
-
-    expect(clearTimeoutSpy).toHaveBeenCalled();
-  });
-
-  // ─── Regression: more than 3 tabs ────────────────────────────────────────
-  // The original hand-rolled version of this component had an indicator-positioning issue
-  // that only showed up with itemCount > 3 — these lock in correct behaviour at 5.
-
-  it("activates a distant tab (index 0 -> index 4) directly via click", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 5 }, slots: fiveSlots });
-    const triggers = wrapper.findAll(".tabs-list-item");
-
-    await triggers[4]!.trigger("click");
-
-    expect(triggers[0]!.attributes("aria-selected")).toBe("false");
-    expect(triggers[4]!.attributes("aria-selected")).toBe("true");
-    expect(triggers[4]!.attributes("tabindex")).toBe("0");
-    expect(wrapper.findAll(".tab-content")[4]!.attributes("aria-hidden")).toBe("false");
-  });
-
-  it("does not recolour tabs spanned by a distant activation jump (regression: intermediate labels going invisible)", async () => {
-    // The old implementation force-applied a "transitioning" class to every tab spanned by a
-    // jump, forcing it to the active-indicator's text colour for the whole transition — even
-    // though the sliding indicator only visually reaches each spanned tab partway through, and
-    // for a forward jump doesn't reach the middle tabs until late in the transition. That made
-    // intermediate labels flash a colour matching neither their own background nor (yet) the
-    // indicator's, going invisible. Spanned tabs should only ever carry aria-selected/hover
-    // state of their own — never a class forcing them to look active.
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 5 }, slots: fiveSlots });
-    const triggers = wrapper.findAll(".tabs-list-item");
-
-    // Active tab starts at index 0, so activating index 4 spans every tab in between.
-    await triggers[4]!.trigger("click");
-
-    [1, 2, 3].forEach((index) => {
-      expect(triggers[index]!.attributes("aria-selected")).toBe("false");
-      expect(triggers[index]!.classes()).not.toContain("transitioning");
-    });
-  });
-
-  it("wraps correctly with End then ArrowRight across 5 tabs", async () => {
-    const wrapper = await mountSuspended(TabsCore, { props: { itemCount: 5 }, slots: fiveSlots });
-    const triggers = wrapper.findAll(".tabs-list-item");
-
-    await triggers[0]!.trigger("keydown", { key: "End" });
-    expect(triggers[4]!.attributes("aria-selected")).toBe("true");
-
-    await triggers[4]!.trigger("keydown", { key: "ArrowRight" });
-    expect(triggers[0]!.attributes("aria-selected")).toBe("true");
-  });
-});

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

@@ -1,191 +0,0 @@
-# TabNavigation — Consumer Styling Guide
-
-> **Deprecated (2026-10-06):** use `ResponsiveHeader`. The token mapping is in "Migrating from
-> TabNavigation" in `.claude/skills/components/responsive-header.md`.
-
-## 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(--theme-text)` | Link text colour (rest state) |
-| `--tab-nav-link-hover-color` | `var(--theme-accent)` | Link text colour on hover |
-| `--tab-nav-link-active-color` | the link colour | 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 |
-| `--tab-nav-focus-ring-width` | `2px` | Keyboard focus ring width, on bar and panel links |
-| `--tab-nav-focus-ring-colour` | `currentColor` | Keyboard focus ring colour |
-| `--tab-nav-focus-ring-offset` | `2px` | Focus ring gap on bar links (panel links draw it inset) |
-
-> Changed 2026-10-06: keyboard focus now shows a ring. Before, `:focus-visible` only changed the
-> link colour (`outline: none`).
-
-> **Changed 2026-10-06: light defaults.** The colours used to assume a dark header (light `--slate-01`
-> links, burger and indicator; dark `#1a1614` panel), so on a light page they were light-on-light.
-> They now come from the light theme slots: links and burger `--theme-text`, hover and the indicator
-> `--theme-accent`, the panel `--page-bg` (else `--theme-surface-subtle`), dividers mixed from the link
-> colour. For a dark header, or dark mode, set the colour tokens yourself (e.g. with `light-dark()` in
-> your own overrides); the library ships light values only. New: `--tab-nav-panel-item-hover-bg`.
-
-### Indicator decorators
-
-| Token | Default | Controls |
-|---|---|---|
-| `--tab-nav-decorator-indicator-color` | `var(--theme-accent)` | 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, var(--theme-surface-subtle))` | Panel background colour |
-| `--tab-nav-panel-border-color` | the link colour at 20% | Border between nav bar and open panel |
-| `--tab-nav-panel-item-border` | the panel link colour at 12% | Divider between panel items |
-| `--tab-nav-panel-item-hover-bg` | the panel link colour at 5% | Panel item background on hover |
-| `--tab-nav-panel-link-color` | the link colour | Panel link text colour |
-| `--tab-nav-panel-link-hover-color` | the link hover colour | Panel link text colour on hover |
-| `--tab-nav-panel-link-active-color` | the panel link colour | 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` | the link colour | 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 |
-
----
-
-## State hooks
-
-| Hook | When |
-|---|---|
-| `.tab-navigation.is-collapsed` | The items don't fit, so the bar shows the burger instead |
-| `.tab-navigation.menu-open`, `.tab-nav-burger.is-open`, `.tab-nav-panel.is-open`, `.tab-nav-backdrop.is-open` | The burger menu is open |
-| `.tab-navigation.is-loaded` | First measurement done (the nav is hidden before it, to avoid a wrong-state flash) |
-| `.tab-navigation.is-animated` | Indicator transitions are on (off for a frame during route changes) |
-| `.tab-navigation--left` / `--center` / `--right` | The `navAlign` prop |
-| `.tab-nav-list li.is-active` / `.is-hovered` | The active and hovered items (the indicators anchor to these) |
-| `.tab-nav-link.router-link-exact-active` | Route link for the current page |
-
-Inner classes: `.tab-nav-list`, `.tab-nav-link`, `.nav__hovered`, `.nav__active-indicator`, `.tab-nav-burger`,
-`.burger-bar`, `.tab-nav-panel`, `.tab-nav-panel-inner`, `.tab-nav-panel-list`, `.tab-nav-panel-link`,
-`.tab-nav-backdrop` (teleported to `<body>`). Each item's `cssName` is added to its `<li>`.
-
----
-
-## 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;
-}
-```
-
----
-
-## Class passthrough
-
-`style-class-passthrough` adds classes to the root `nav.tab-navigation`. Reactive after mount.
-
----
-
-## 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.
-