srcdev-nuxt-components 9.6.14 → 9.6.16

package/app/components/02.molecules/sliding-toggle/tests/SlidingToggle.spec.ts

@@ -0,0 +1,335 @@
+import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import SlidingToggle from "../SlidingToggle.vue";
+import type { SlidingToggleOption } from "~/types/components";
+
+const billing: SlidingToggleOption[] = [
+  { value: "monthly", label: "Monthly" },
+  { value: "yearly", label: "Yearly" },
+  { value: "lifetime", label: "Lifetime" },
+];
+
+const observed: Element[] = [];
+
+class MockResizeObserver {
+  observe = vi.fn((element: Element) => observed.push(element));
+  unobserve = vi.fn();
+  disconnect = vi.fn(() => observed.splice(0));
+}
+
+const mounted: Awaited<ReturnType<typeof mountSuspended>>[] = [];
+
+const mountToggle = async (props: Record<string, unknown> = {}, attrs: Record<string, unknown> = {}) => {
+  const holder: { current?: Awaited<ReturnType<typeof mountSuspended>> } = {};
+  const onUpdate = (value: string | number) => {
+    void holder.current?.setProps({ modelValue: value });
+  };
+  const wrapper = await mountSuspended(SlidingToggle, {
+    props: { options: billing, modelValue: "monthly", ariaLabel: "Billing period", "onUpdate:modelValue": onUpdate, ...props },
+    attrs,
+    attachTo: document.body,
+  });
+  holder.current = wrapper;
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+const radios = (wrapper: Awaited<ReturnType<typeof mountToggle>>) => wrapper.findAll('[role="radio"]');
+
+const mockRow = () => {
+  vi.spyOn(HTMLElement.prototype, "offsetLeft", "get").mockImplementation(function (this: HTMLElement) {
+    return this.dataset.index === undefined ? 0 : Number(this.dataset.index) * 100;
+  });
+  vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(function (this: HTMLElement) {
+    return this.dataset.index === undefined ? 0 : 100;
+  });
+  vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockImplementation(function (this: HTMLElement) {
+    return this.classList.contains("sliding-toggle") ? 300 : 0;
+  });
+};
+
+const edge = (wrapper: Awaited<ReturnType<typeof mountToggle>>, name: string) =>
+  (wrapper.element as HTMLElement).style.getPropertyValue(`--_sliding-toggle-${name}`);
+
+beforeEach(() => {
+  vi.stubGlobal("ResizeObserver", MockResizeObserver);
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+  observed.splice(0);
+});
+
+describe("SlidingToggle", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountToggle();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountToggle({ styleClassPassthrough: "custom-class" });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Semantics ───────────────────────────────────────────────────────────
+
+  it("renders a named radiogroup", async () => {
+    const wrapper = await mountToggle();
+    expect(wrapper.attributes("role")).toBe("radiogroup");
+    expect(wrapper.attributes("aria-label")).toBe("Billing period");
+  });
+
+  it("can be named by aria-labelledby instead", async () => {
+    const wrapper = await mountToggle({ ariaLabel: "", ariaLabelledby: "billing-heading" });
+    expect(wrapper.attributes("aria-label")).toBeUndefined();
+    expect(wrapper.attributes("aria-labelledby")).toBe("billing-heading");
+  });
+
+  it("renders one type=button radio per option, labelled by its text", async () => {
+    const wrapper = await mountToggle();
+    const options = radios(wrapper);
+    expect(options).toHaveLength(3);
+    options.forEach((option, index) => {
+      expect(option.element.tagName).toBe("BUTTON");
+      expect(option.attributes("type")).toBe("button");
+      expect(option.text()).toBe(billing[index]!.label);
+    });
+  });
+
+  it("marks the selected option aria-checked", async () => {
+    const wrapper = await mountToggle({ modelValue: "yearly" });
+    expect(radios(wrapper).map((option) => option.attributes("aria-checked"))).toEqual(["false", "true", "false"]);
+  });
+
+  it("hides both indicators from assistive tech", async () => {
+    const wrapper = await mountToggle();
+    wrapper.findAll(".sliding-toggle-indicator").forEach((indicator) => {
+      expect(indicator.attributes("aria-hidden")).toBe("true");
+    });
+  });
+
+  // ─── Selection ───────────────────────────────────────────────────────────
+
+  it("selects on click", async () => {
+    const wrapper = await mountToggle();
+    await radios(wrapper)[2]!.trigger("click");
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["lifetime"]);
+    expect(radios(wrapper)[2]!.attributes("aria-checked")).toBe("true");
+  });
+
+  it("follows an external v-model change", async () => {
+    const wrapper = await mountToggle();
+    await wrapper.setProps({ modelValue: "lifetime" });
+    expect(radios(wrapper)[2]!.attributes("aria-checked")).toBe("true");
+    expect(radios(wrapper)[0]!.attributes("aria-checked")).toBe("false");
+  });
+
+  it("supports numeric values", async () => {
+    const wrapper = await mountToggle({
+      options: [
+        { value: 1, label: "One" },
+        { value: 2, label: "Two" },
+      ],
+      modelValue: 1,
+    });
+    await radios(wrapper)[1]!.trigger("click");
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([2]);
+  });
+
+  // ─── Roving tabindex ─────────────────────────────────────────────────────
+
+  it("gives only the checked option the tab stop", async () => {
+    const wrapper = await mountToggle({ modelValue: "yearly" });
+    expect(radios(wrapper).map((option) => option.attributes("tabindex"))).toEqual(["-1", "0", "-1"]);
+  });
+
+  it("gives the first enabled option the tab stop when the value matches no option", async () => {
+    const wrapper = await mountToggle({
+      modelValue: "weekly",
+      options: [{ value: "a", label: "A", disabled: true }, ...billing],
+    });
+    expect(radios(wrapper).map((option) => option.attributes("tabindex"))).toEqual(["-1", "0", "-1", "-1"]);
+    expect(wrapper.attributes("data-has-selection")).toBeUndefined();
+  });
+
+  // ─── Keyboard ────────────────────────────────────────────────────────────
+
+  it("ArrowRight selects and focuses the next option", async () => {
+    const wrapper = await mountToggle();
+    await radios(wrapper)[0]!.trigger("keydown", { key: "ArrowRight" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["yearly"]);
+    expect(document.activeElement).toBe(radios(wrapper)[1]!.element);
+  });
+
+  it("ArrowDown also moves to the next option, and ArrowLeft/ArrowUp to the previous", async () => {
+    const wrapper = await mountToggle({ modelValue: "yearly" });
+    await radios(wrapper)[1]!.trigger("keydown", { key: "ArrowDown" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["lifetime"]);
+    await radios(wrapper)[2]!.trigger("keydown", { key: "ArrowUp" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["yearly"]);
+    await radios(wrapper)[1]!.trigger("keydown", { key: "ArrowLeft" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["monthly"]);
+  });
+
+  it("wraps from the last option to the first and back", async () => {
+    const wrapper = await mountToggle({ modelValue: "lifetime" });
+    await radios(wrapper)[2]!.trigger("keydown", { key: "ArrowRight" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["monthly"]);
+    await radios(wrapper)[0]!.trigger("keydown", { key: "ArrowLeft" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["lifetime"]);
+  });
+
+  it("Home and End select the first and last options", async () => {
+    const wrapper = await mountToggle({ modelValue: "yearly" });
+    await radios(wrapper)[1]!.trigger("keydown", { key: "End" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["lifetime"]);
+    await radios(wrapper)[2]!.trigger("keydown", { key: "Home" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["monthly"]);
+  });
+
+  it("skips disabled options", async () => {
+    const wrapper = await mountToggle({
+      options: [billing[0]!, { ...billing[1]!, disabled: true }, billing[2]!],
+    });
+    await radios(wrapper)[0]!.trigger("keydown", { key: "ArrowRight" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["lifetime"]);
+  });
+
+  it("RTL swaps the arrow directions", async () => {
+    const wrapper = await mountToggle({}, { dir: "rtl" });
+    await radios(wrapper)[0]!.trigger("keydown", { key: "ArrowLeft" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["yearly"]);
+  });
+
+  it("ignores other keys", async () => {
+    const wrapper = await mountToggle();
+    await radios(wrapper)[0]!.trigger("keydown", { key: "a" });
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+  });
+
+  // ─── Disabled ────────────────────────────────────────────────────────────
+
+  it("disables every option and blocks selection when the group is disabled", async () => {
+    const wrapper = await mountToggle({ disabled: true });
+    expect(wrapper.attributes("aria-disabled")).toBe("true");
+    radios(wrapper).forEach((option) => expect(option.attributes("disabled")).toBeDefined());
+    await radios(wrapper)[1]!.trigger("keydown", { key: "ArrowRight" });
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+  });
+
+  it("does not select a disabled option on click", async () => {
+    const wrapper = await mountToggle({ options: [billing[0]!, { ...billing[1]!, disabled: true }, billing[2]!] });
+    const vm = wrapper.vm as unknown as { select: (index: number) => void };
+    vm.select(1);
+    await nextTick();
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+  });
+
+  // ─── Indicators ──────────────────────────────────────────────────────────
+
+  it("sets data-ready once mounted and measured", async () => {
+    const wrapper = await mountToggle();
+    expect(wrapper.attributes("data-ready")).toBeDefined();
+    expect(wrapper.attributes("data-has-selection")).toBeDefined();
+  });
+
+  it("snaps the active indicator onto the checked option on mount", async () => {
+    mockRow();
+    const wrapper = await mountToggle({ modelValue: "yearly" });
+    expect(edge(wrapper, "active-start")).toBe("100px");
+    expect(edge(wrapper, "active-end")).toBe("100px");
+    expect(edge(wrapper, "active-duration")).toBe("0ms");
+  });
+
+  it("slides the active indicator with the leading edge first", async () => {
+    mockRow();
+    const wrapper = await mountToggle();
+    await radios(wrapper)[2]!.trigger("click");
+    await nextTick();
+    expect(edge(wrapper, "active-start")).toBe("200px");
+    expect(edge(wrapper, "active-start-delay")).toBe("200ms");
+    expect(edge(wrapper, "active-end-delay")).toBe("0ms");
+  });
+
+  it("moves the hover indicator with the pointer and back to the checked option on leave", async () => {
+    mockRow();
+    const wrapper = await mountToggle();
+    await radios(wrapper)[2]!.trigger("mouseenter");
+    expect(edge(wrapper, "hover-start")).toBe("200px");
+    expect(wrapper.attributes("data-hovering")).toBeDefined();
+    await wrapper.trigger("mouseleave");
+    expect(edge(wrapper, "hover-start")).toBe("0px");
+    expect(wrapper.attributes("data-hovering")).toBeUndefined();
+  });
+
+  it("does not track hover when trackHover is false", async () => {
+    mockRow();
+    const wrapper = await mountToggle({ trackHover: false });
+    await radios(wrapper)[2]!.trigger("mouseenter");
+    expect(edge(wrapper, "hover-start")).toBe("0px");
+    expect(wrapper.attributes("data-hovering")).toBeUndefined();
+  });
+
+  it("uses transitionDuration for the slide", async () => {
+    mockRow();
+    const wrapper = await mountToggle({ transitionDuration: 350 });
+    await radios(wrapper)[1]!.trigger("click");
+    await nextTick();
+    expect(edge(wrapper, "active-duration")).toBe("350ms");
+  });
+
+  // ─── Re-measuring ────────────────────────────────────────────────────────
+
+  it("observes the track and each option for size changes", async () => {
+    const wrapper = await mountToggle();
+    expect(observed).toContain(wrapper.element);
+    radios(wrapper).forEach((option) => expect(observed).toContain(option.element));
+  });
+
+  it("re-places the indicators when the options change", async () => {
+    mockRow();
+    const wrapper = await mountToggle({ modelValue: "lifetime" });
+    await wrapper.setProps({ options: [billing[2]!, billing[0]!] });
+    await nextTick();
+    await nextTick();
+    expect(edge(wrapper, "active-start")).toBe("0px");
+  });
+
+  // ─── Worst-case data ─────────────────────────────────────────────────────
+
+  it("renders an empty group without errors", async () => {
+    const wrapper = await mountToggle({ options: [] });
+    expect(radios(wrapper)).toHaveLength(0);
+    expect(wrapper.attributes("data-has-selection")).toBeUndefined();
+  });
+
+  it("renders duplicate labels as separate radios", async () => {
+    const wrapper = await mountToggle({
+      options: [
+        { value: "a", label: "Same" },
+        { value: "b", label: "Same" },
+      ],
+      modelValue: "b",
+    });
+    expect(radios(wrapper)).toHaveLength(2);
+    expect(radios(wrapper)[1]!.attributes("aria-checked")).toBe("true");
+  });
+
+  it("renders HTML-like labels as text", async () => {
+    const wrapper = await mountToggle({ options: [{ value: "x", label: "<b>not bold</b>" }], modelValue: "x" });
+    expect(wrapper.find("b").exists()).toBe(false);
+    expect(radios(wrapper)[0]!.text()).toBe("<b>not bold</b>");
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("updates classes when styleClassPassthrough changes after mount", async () => {
+    const wrapper = await mountToggle({ styleClassPassthrough: ["original"] });
+    expect(wrapper.classes()).toContain("sliding-toggle");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/02.molecules/sliding-toggle/tests/__snapshots__/SlidingToggle.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SlidingToggle > renders correct HTML structure 1`] = `"<div class="sliding-toggle custom-class" role="radiogroup" aria-label="Billing period" data-has-selection="" style="--_sliding-toggle-active-duration: 0ms; --_sliding-toggle-active-start-delay: 0ms; --_sliding-toggle-active-end-delay: 0ms; --_sliding-toggle-active-start: 0px; --_sliding-toggle-active-end: 0px; --_sliding-toggle-hover-duration: 0ms; --_sliding-toggle-hover-start-delay: 0ms; --_sliding-toggle-hover-end-delay: 0ms; --_sliding-toggle-hover-start: 0px; --_sliding-toggle-hover-end: 0px;" data-ready=""><span class="sliding-toggle-indicator sliding-toggle-indicator-hover" aria-hidden="true"></span><span class="sliding-toggle-indicator sliding-toggle-indicator-active" aria-hidden="true"></span><button type="button" role="radio" class="sliding-toggle-option" data-index="0" aria-checked="true" tabindex="0">Monthly</button><button type="button" role="radio" class="sliding-toggle-option" data-index="1" aria-checked="false" tabindex="-1">Yearly</button><button type="button" role="radio" class="sliding-toggle-option" data-index="2" aria-checked="false" tabindex="-1">Lifetime</button></div>"`;

package/app/components/03.organisms/responsive-header/CONSUMER-STYLING.md

@@ -10,6 +10,8 @@ are documented alongside it since that's where they're consumed.
 | Token | Default | Controls |
 |---|---|---|
 | `--responsive-header-link-font-size` | `inherit` | Nav-link font-size. **Always set this to a fixed value.** Leaving it `inherit` means a fluid ancestor font-size (`clamp()`/`vw`) can drift nav-item text width without ever re-triggering the overflow-collapse measurement — see the component skill doc's "measurement pipeline" section for the full mechanism. |
+| `--responsive-header-link-padding-block` / `--responsive-header-link-padding-inline` | `0.8rem` / `0.2rem` | Padding around each top-bar link and summary. The active underline and hover highlight span this box, so larger inline padding makes them reach past the label. Set fixed values, as with the font size: the overflow-collapse measurement only re-runs when the header resizes. |
+| `--responsive-header-nav-item-gap` | `30px` | Gap between items within each top-bar list. Reduce it when you raise the inline padding to keep the label-to-label spacing. |
 | `--responsive-header-link-color` | `inherit` | Link/summary text colour. |
 | `--responsive-header-main-nav-justify-content` | `space-between` | How the main nav's groups are spread along the bar. Use `flex-start`, `safe center` or `safe end`; plain `center`/`end` let items that don't fit spill off the start edge, where they're clipped. (Safari 16 ignores `safe` values and falls back to start alignment.) |
 | `--responsive-header-color` | `inherit` | Root element text colour. |

package/app/components/03.organisms/responsive-header/ResponsiveHeader.vue

@@ -779,6 +779,9 @@ watch(
        --responsive-nav-decorator-hovered-bg              (default: color-mix(in oklch, var(--theme-text) 8%, transparent))
 
        --responsive-header-link-font-size       (default: inherit)
+       --responsive-header-link-padding-block   (default: 0.8rem)
+       --responsive-header-link-padding-inline  (default: 0.2rem)
+       --responsive-header-nav-item-gap         (default: 30px)
        --responsive-header-main-nav-justify-content (default: space-between)
     ──────────────────────────────────────────────────────────────────────── */
 
@@ -810,8 +813,8 @@ watch(
 
     .main-navigation {
       /* Set up some global vars */
-      --_link-padding-block: 0.8rem;
-      --_link-padding-inline: 0.2rem;
+      --_link-padding-block: var(--responsive-header-link-padding-block, 0.8rem);
+      --_link-padding-inline: var(--responsive-header-link-padding-inline, 0.2rem);
       --_link-margin-block: 0.1rem;
       --_link-margin-inline: 0.1rem;
       --_link-focus-visible-outline-width: 0.2rem;
@@ -835,11 +838,11 @@ watch(
         flex-wrap: nowrap;
 
         &:nth-of-type(1) {
-          gap: 30px;
+          gap: var(--responsive-header-nav-item-gap, 30px);
         }
 
         &:nth-of-type(2) {
-          gap: 30px;
+          gap: var(--responsive-header-nav-item-gap, 30px);
         }
 
         .main-navigation-item {

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

@@ -0,0 +1,143 @@
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { ref } from "vue";
+import useSlidingIndicator from "../useSlidingIndicator";
+
+const box = (props: Partial<Record<"offsetLeft" | "offsetTop" | "offsetWidth" | "offsetHeight", number>>) => {
+  const element = document.createElement("div");
+  Object.entries(props).forEach(([key, value]) => Object.defineProperty(element, key, { value }));
+  return element;
+};
+
+const container = (width = 500, height = 300) => {
+  const element = document.createElement("div");
+  Object.defineProperty(element, "clientWidth", { value: width });
+  Object.defineProperty(element, "clientHeight", { value: height });
+  return element;
+};
+
+const vars = (element: HTMLElement, name: string) => ({
+  start: element.style.getPropertyValue(`--_${name}-start`),
+  end: element.style.getPropertyValue(`--_${name}-end`),
+  duration: element.style.getPropertyValue(`--_${name}-duration`),
+  startDelay: element.style.getPropertyValue(`--_${name}-start-delay`),
+  endDelay: element.style.getPropertyValue(`--_${name}-end-delay`),
+});
+
+const originalMatchMedia = window.matchMedia;
+
+const stubReducedMotion = (matches: boolean) => {
+  window.matchMedia = vi.fn(() => ({ matches }) as MediaQueryList);
+};
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  window.matchMedia = originalMatchMedia;
+});
+
+describe("useSlidingIndicator", () => {
+  it("snaps the first placement and writes the edges as insets", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    const ms = place("active", box({ offsetLeft: 100, offsetWidth: 50 }), true);
+
+    expect(ms).toBe(0);
+    expect(vars(track, "active")).toEqual({ start: "100px", end: "350px", duration: "0ms", startDelay: "0ms", endDelay: "0ms" });
+  });
+
+  it("moving forward sends the end edge first and delays the start edge", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    place("active", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    const ms = place("active", box({ offsetLeft: 300, offsetWidth: 100 }), true);
+
+    expect(ms).toBe(200);
+    expect(vars(track, "active")).toEqual({ start: "300px", end: "100px", duration: "200ms", startDelay: "200ms", endDelay: "0ms" });
+  });
+
+  it("moving backward sends the start edge first and delays the end edge", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    place("active", box({ offsetLeft: 300, offsetWidth: 100 }), true);
+    place("active", box({ offsetLeft: 100, offsetWidth: 100 }), true);
+
+    expect(vars(track, "active")).toMatchObject({ startDelay: "0ms", endDelay: "200ms" });
+  });
+
+  it("snaps when animate is false", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    place("active", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    expect(place("active", box({ offsetLeft: 300, offsetWidth: 100 }), false)).toBe(0);
+    expect(vars(track, "active")).toMatchObject({ duration: "0ms", startDelay: "0ms" });
+  });
+
+  it("snaps under prefers-reduced-motion", () => {
+    stubReducedMotion(true);
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    place("active", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    expect(place("active", box({ offsetLeft: 300, offsetWidth: 100 }), true)).toBe(0);
+    expect(vars(track, "active").duration).toBe("0ms");
+  });
+
+  it("animates when reduced motion is not requested", () => {
+    stubReducedMotion(false);
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 150 });
+
+    place("active", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    expect(place("active", box({ offsetLeft: 300, offsetWidth: 100 }), true)).toBe(150);
+  });
+
+  it("measures along the y axis", () => {
+    const track = container(500, 300);
+    const { place } = useSlidingIndicator(ref(track), { axis: "y", duration: 200 });
+
+    place("active", box({ offsetTop: 40, offsetHeight: 60 }), false);
+
+    expect(vars(track, "active")).toMatchObject({ start: "40px", end: "200px" });
+  });
+
+  it("tracks each named indicator separately", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    place("active", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    place("hover", box({ offsetLeft: 200, offsetWidth: 100 }), true);
+
+    expect(vars(track, "hover").duration).toBe("0ms");
+    expect(vars(track, "active").start).toBe("0px");
+  });
+
+  it("snaps again after reset", () => {
+    const track = container();
+    const { place, reset } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    place("hover", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    reset("hover");
+
+    expect(place("hover", box({ offsetLeft: 300, offsetWidth: 100 }), true)).toBe(0);
+  });
+
+  it("treats a negative or invalid duration as 0", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: Number.NaN });
+
+    place("active", box({ offsetLeft: 0, offsetWidth: 100 }), true);
+    expect(place("active", box({ offsetLeft: 300, offsetWidth: 100 }), true)).toBe(0);
+  });
+
+  it("returns null and writes nothing without a container or target", () => {
+    const track = container();
+    const { place } = useSlidingIndicator(ref(track), { duration: 200 });
+
+    expect(place("active", null, true)).toBeNull();
+    expect(useSlidingIndicator(ref(null), { duration: 200 }).place("active", box({}), true)).toBeNull();
+    expect(track.style.getPropertyValue("--_active-start")).toBe("");
+  });
+});

package/app/composables/useSlidingIndicator.ts

@@ -0,0 +1,56 @@
+import type { MaybeRefOrGetter } from "vue";
+
+interface SlidingIndicatorOptions {
+  axis?: MaybeRefOrGetter<"x" | "y">;
+  duration: MaybeRefOrGetter<number>;
+}
+
+/**
+ * Positions sliding indicators inside a container by writing `--_{name}-start`, `-end`, `-duration`,
+ * `-start-delay` and `-end-delay` on it: the edges as insets from the container's start and end along
+ * the axis. On a move, the edge in the direction of travel goes first and the trailing edge follows
+ * one duration later, so the indicator stretches across and then catches up. Under
+ * `prefers-reduced-motion`, or with `animate: false` (mount, resize), both edges snap.
+ */
+const useSlidingIndicator = (containerRef: Ref<HTMLElement | null>, options: SlidingIndicatorOptions) => {
+  // Leading edge each indicator was last sent to, to tell the direction of the next move.
+  const lastStart = new Map<string, number>();
+
+  const prefersReducedMotion = () =>
+    typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+
+  /** Returns the transition length in ms, or `null` when there was nothing to place. */
+  const place = (name: string, target: HTMLElement | null | undefined, animate: boolean): number | null => {
+    const container = containerRef.value;
+    if (!container || !target) return null;
+
+    const vertical = toValue(options.axis) === "y";
+    const start = vertical ? target.offsetTop : target.offsetLeft;
+    const size = vertical ? target.offsetHeight : target.offsetWidth;
+    const end = (vertical ? container.clientHeight : container.clientWidth) - start - size;
+
+    const previous = lastStart.get(name);
+    const duration = Math.max(0, Number(toValue(options.duration)) || 0);
+    const ms = animate && previous !== undefined && !prefersReducedMotion() ? duration : 0;
+    const forward = previous !== undefined && start > previous;
+    const backward = previous !== undefined && start < previous;
+    lastStart.set(name, start);
+
+    container.style.setProperty(`--_${name}-duration`, ms + "ms");
+    container.style.setProperty(`--_${name}-start-delay`, forward ? ms + "ms" : "0ms");
+    container.style.setProperty(`--_${name}-end-delay`, backward ? ms + "ms" : "0ms");
+    container.style.setProperty(`--_${name}-start`, start + "px");
+    container.style.setProperty(`--_${name}-end`, end + "px");
+
+    return ms;
+  };
+
+  /** Forgets where an indicator was, so its next placement snaps instead of sliding in from there. */
+  const reset = (name: string) => {
+    lastStart.delete(name);
+  };
+
+  return { place, reset };
+};
+
+export default useSlidingIndicator;

package/app/composables/useTabs.ts

@@ -16,12 +16,10 @@ const useTabs = (
   const currentHoveredTab = ref<HTMLElement>();
 
   type IndicatorKind = "active" | "hovered";
-  // Leading edge (start along the axis) each indicator was last sent to, to tell the direction of a move.
-  const lastStart: Record<IndicatorKind, number | null> = { active: null, hovered: null };
   let coverageFrameId: number | null = null;
   let coverageUntil = 0;
 
-  const transitionMs = () => Math.max(0, Number(toValue(duration)) || 0);
+  const { place: placeEdges } = useSlidingIndicator(tabsNavRef, { axis, duration });
 
   const activeIndex = computed(() => {
     const index = currentActiveTab.value?.dataset.tabIndex;
@@ -144,36 +142,11 @@ const useTabs = (
     activateTab(targetTab);
   };
 
-  /**
-   * Sends an indicator's two edges to its target tab, as insets from the bar's start and end edges
-   * along the axis. On a move, the edge in the direction of travel goes first and the trailing edge
-   * follows one duration later, so the indicator stretches across and then catches up. CSS retargets
-   * each edge from wherever it is, so a quick second move never pulls an edge backwards.
-   * `animate: false` (mount, resize, tab-count change) snaps both edges.
-   */
+  // Edge motion lives in useSlidingIndicator; the CSS reads --_active-* and --_hovered-* off the bar.
   const placeIndicator = (kind: IndicatorKind, animate: boolean) => {
-    const nav = tabsNavRef.value;
     const target = indicatorTarget(kind === "active" ? currentActiveTab.value : currentHoveredTab.value);
-    if (!nav || !target) return;
-
-    const vertical = toValue(axis) === "y";
-    const start = vertical ? target.offsetTop : target.offsetLeft;
-    const size = vertical ? target.offsetHeight : target.offsetWidth;
-    const end = (vertical ? nav.clientHeight : nav.clientWidth) - start - size;
-
-    const previous = lastStart[kind];
-    const ms = animate && previous !== null ? transitionMs() : 0;
-    const forward = previous !== null && start > previous;
-    const backward = previous !== null && start < previous;
-    lastStart[kind] = start;
-
-    nav.style.setProperty(`--_${kind}-duration`, ms + "ms");
-    nav.style.setProperty(`--_${kind}-start-delay`, forward ? ms + "ms" : "0ms");
-    nav.style.setProperty(`--_${kind}-end-delay`, backward ? ms + "ms" : "0ms");
-    nav.style.setProperty(`--_${kind}-start`, start + "px");
-    nav.style.setProperty(`--_${kind}-end`, end + "px");
-
-    if (kind === "active") trackCoverage(ms * 2);
+    const ms = placeEdges(kind, target, animate);
+    if (ms !== null && kind === "active") trackCoverage(ms * 2);
   };
 
   // Marks each visible tab (and the overflow trigger) that the active indicator covers by at least half,

package/app/types/components/index.ts

@@ -27,3 +27,4 @@ export * from "./profile-section.d"
 export * from "./services-card.d"
 export * from "./google-reviews.d"
 export * from "./progress-tracker.d"
+export * from "./sliding-toggle.d"

package/app/types/components/sliding-toggle.d.ts

@@ -0,0 +1,5 @@
+export interface SlidingToggleOption<T extends string | number = string> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.14",
+  "version": "9.6.16",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",