srcdev-nuxt-components 9.6.4 → 9.6.5

package/app/components/02.molecules/stepper-list/tests/StepperList.spec.ts

@@ -1,12 +1,21 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { nextTick } from "vue";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
+import type { VueWrapper } from "@vue/test-utils";
 import StepperList from "../StepperList.vue";
 
+let wrapper: VueWrapper | undefined;
+
 describe("StepperList", () => {
+  afterEach(() => {
+    wrapper?.unmount();
+    wrapper = undefined;
+    vi.restoreAllMocks();
+  });
   // ─── Mount ───────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 3 },
     });
     expect(wrapper.vm).toBeTruthy();
@@ -15,21 +24,21 @@ describe("StepperList", () => {
   // ─── Snapshots ───────────────────────────────────────────────────────────
 
   it("renders correct HTML structure (ul, 3 items)", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { tag: "ul", itemCount: 3 },
     });
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders correct HTML structure (ol, 5 items)", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { tag: "ol", itemCount: 5 },
     });
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders correct HTML structure with styleClassPassthrough", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: {
         itemCount: 2,
         styleClassPassthrough: ["custom-class", "another-class"],
@@ -39,7 +48,7 @@ describe("StepperList", () => {
   });
 
   it("renders correct HTML structure with indicator slots", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 2 },
       slots: {
         "indicator-0": '<span class="indicator-icon">✓</span>',
@@ -53,21 +62,21 @@ describe("StepperList", () => {
   // ─── Tag rendering ───────────────────────────────────────────────────────
 
   it("renders as <ul> by default", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1 },
     });
     expect(wrapper.element.tagName).toBe("UL");
   });
 
   it("renders as <ul> when tag='ul'", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { tag: "ul", itemCount: 1 },
     });
     expect(wrapper.element.tagName).toBe("UL");
   });
 
   it("renders as <ol> when tag='ol'", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { tag: "ol", itemCount: 1 },
     });
     expect(wrapper.element.tagName).toBe("OL");
@@ -76,23 +85,70 @@ describe("StepperList", () => {
   // ─── Item count ──────────────────────────────────────────────────────────
 
   it("renders the correct number of <li> elements", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 4 },
     });
     expect(wrapper.findAll("li").length).toBe(4);
   });
 
   it("renders zero <li> elements when itemCount is 0", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 0 },
     });
     expect(wrapper.findAll("li").length).toBe(0);
   });
 
+  it("floors a fractional itemCount instead of rendering nothing", async () => {
+    wrapper = await mountSuspended(StepperList, {
+      props: { itemCount: 2.7 },
+    });
+    expect(wrapper.findAll("li").length).toBe(2);
+  });
+
+  it("renders zero <li> elements for a negative itemCount", async () => {
+    wrapper = await mountSuspended(StepperList, {
+      props: { itemCount: -3 },
+    });
+    expect(wrapper.findAll("li").length).toBe(0);
+  });
+
+  it("renders zero <li> elements for a NaN itemCount", async () => {
+    wrapper = await mountSuspended(StepperList, {
+      props: { itemCount: Number.NaN },
+    });
+    expect(wrapper.findAll("li").length).toBe(0);
+  });
+
+  it("updates the number of <li> elements when itemCount changes", async () => {
+    wrapper = await mountSuspended(StepperList, {
+      props: { itemCount: 2 },
+    });
+    await wrapper.setProps({ itemCount: 5 });
+    expect(wrapper.findAll("li").length).toBe(5);
+  });
+
+  // ─── Semantics ───────────────────────────────────────────────────────────
+
+  it("keeps list semantics with role='list' despite list-style: none", async () => {
+    wrapper = await mountSuspended(StepperList, {
+      props: { tag: "ol", itemCount: 1 },
+    });
+    expect(wrapper.attributes("role")).toBe("list");
+  });
+
+  it("wraps each item slot in .stepper-list-content", async () => {
+    wrapper = await mountSuspended(StepperList, {
+      props: { itemCount: 2 },
+      slots: { "item-1": "<span class='second'>Second</span>" },
+    });
+    expect(wrapper.findAll(".stepper-list-item").length).toBe(2);
+    expect(wrapper.findAll(".stepper-list-content")[1]!.find(".second").exists()).toBe(true);
+  });
+
   // ─── Base classes ────────────────────────────────────────────────────────
 
   it("always has the indicator-list class", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1 },
     });
     expect(wrapper.classes()).toContain("stepper-list");
@@ -101,14 +157,14 @@ describe("StepperList", () => {
   // ─── styleClassPassthrough ───────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1, styleClassPassthrough: "my-class" },
     });
     expect(wrapper.classes()).toContain("my-class");
   });
 
   it("applies multiple styleClassPassthrough classes from an array", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: {
         itemCount: 1,
         styleClassPassthrough: ["class-a", "class-b"],
@@ -119,7 +175,7 @@ describe("StepperList", () => {
   });
 
   it("updates classes when styleClassPassthrough changes after mount", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1, styleClassPassthrough: ["original"] },
     });
     await wrapper.setProps({ styleClassPassthrough: ["updated"] });
@@ -128,7 +184,7 @@ describe("StepperList", () => {
   });
 
   it("renders cleanly with no styleClassPassthrough prop", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1 },
     });
     // Only the base class should be present (and any passthrough-derived ones)
@@ -138,7 +194,7 @@ describe("StepperList", () => {
   // ─── Slot: item-N ────────────────────────────────────────────────────────
 
   it("renders item slot content inside each <li>", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 2 },
       slots: {
         "item-0": "<span>First</span>",
@@ -153,7 +209,7 @@ describe("StepperList", () => {
   // ─── Slot: indicator-N ───────────────────────────────────────────────────
 
   it("adds has-indicator class to <li> when indicator slot is provided", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 3 },
       slots: {
         "indicator-1": '<span class="indicator-icon">★</span>',
@@ -166,7 +222,7 @@ describe("StepperList", () => {
   });
 
   it("renders the custom indicator wrapper when indicator slot is provided", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 2 },
       slots: {
         "indicator-0": '<span class="indicator-icon">✓</span>',
@@ -177,7 +233,7 @@ describe("StepperList", () => {
   });
 
   it("renders the counter wrapper when no indicator slot is provided", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 2 },
     });
     const items = wrapper.findAll("li");
@@ -186,7 +242,7 @@ describe("StepperList", () => {
   });
 
   it("renders indicator slot content inside the custom indicator wrapper", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1 },
       slots: {
         "indicator-0": '<span class="indicator-icon">✓</span>',
@@ -197,7 +253,7 @@ describe("StepperList", () => {
   });
 
   it("only items with indicator slots receive has-indicator; others do not", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 4 },
       slots: {
         "indicator-0": "<span>A</span>",
@@ -214,37 +270,108 @@ describe("StepperList", () => {
   // ─── connected ──────────────────────────────────────────────────────
 
   it("has has-connectors class by default", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1 },
     });
     expect(wrapper.classes()).toContain("has-connectors");
   });
 
   it("has has-connectors class when connected is true", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1, connected: true },
     });
     expect(wrapper.classes()).toContain("has-connectors");
   });
 
   it("does not have has-connectors class when connected is false", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1, connected: false },
     });
     expect(wrapper.classes()).not.toContain("has-connectors");
   });
 
+  it("centres each connector on its measured indicator, not on --_counter-size", async () => {
+    const rect = (left: number, width: number, top: number, height: number) =>
+      ({ left, width, top, height, right: left + width, bottom: top + height, x: left, y: top }) as DOMRect;
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
+      this: HTMLElement
+    ) {
+      if (this.tagName === "LI") return rect(100, 400, this.previousElementSibling ? 80 : 0, 80);
+      return rect(110, 60, this.closest("li")?.previousElementSibling ? 90 : 10, 30);
+    });
+
+    wrapper = await mountSuspended(StepperList, {
+      props: { itemCount: 2 },
+      slots: { "indicator-0": "<span>Wide custom indicator</span>" },
+    });
+    const first = wrapper.findAll("li")[0]!.element as HTMLElement;
+    expect(first.style.getPropertyValue("--_connector-left")).toBe("40px");
+    expect(first.style.getPropertyValue("--_connector-top")).toBe("40px");
+    expect(first.style.getPropertyValue("--_connector-height")).toBe("50px");
+  });
+
+  it("re-measures connectors when a class changes inside the list, even if nothing resizes", async () => {
+    let secondIndicatorTop = 90;
+    const rect = (top: number, height: number) =>
+      ({ left: 100, width: 30, top, height, right: 130, bottom: top + height, x: 100, y: top }) as DOMRect;
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (this: HTMLElement) {
+      if (this.tagName === "LI") return rect(this.previousElementSibling ? 80 : 0, 80);
+      return this.closest("li")?.previousElementSibling ? rect(secondIndicatorTop, 30) : rect(10, 30);
+    });
+
+    wrapper = await mountSuspended(StepperList, {
+      props: { itemCount: 2 },
+      slots: { "indicator-1": "<span class='marker'>2</span>" },
+    });
+    const first = wrapper.findAll("li")[0]!.element as HTMLElement;
+    expect(first.style.getPropertyValue("--_connector-height")).toBe("50px");
+
+    secondIndicatorTop = 120;
+    wrapper.find(".marker").element.classList.add("is-current");
+    await Promise.resolve();
+    expect(first.style.getPropertyValue("--_connector-height")).toBe("80px");
+  });
+
+  it("observes every item for size changes, not only the list", async () => {
+    const observed: Element[] = [];
+    const originalResizeObserver = globalThis.ResizeObserver;
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        observe(el: Element) {
+          observed.push(el);
+        }
+        disconnect() {
+          observed.length = 0;
+        }
+        unobserve() {}
+      }
+    );
+
+    try {
+      wrapper = await mountSuspended(StepperList, { props: { itemCount: 3 } });
+      expect(observed.filter((el) => el.tagName === "LI")).toHaveLength(3);
+      expect(observed).toContain(wrapper.element);
+
+      await wrapper.setProps({ itemCount: 4 });
+      await nextTick();
+      expect(observed.filter((el) => el.tagName === "LI")).toHaveLength(4);
+    } finally {
+      vi.stubGlobal("ResizeObserver", originalResizeObserver);
+    }
+  });
+
   // ─── indicatorAlignment ───────────────────────────────────────────────────
 
   it("applies indicator-top class by default", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1 },
     });
     expect(wrapper.find("li")?.classes()).toContain("indicator-top");
   });
 
   it("applies indicator-center class when indicatorAlignment is center", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1, indicatorAlignment: "center" },
     });
     expect(wrapper.find("li")?.classes()).toContain("indicator-center");
@@ -253,21 +380,21 @@ describe("StepperList", () => {
   // ─── indicatorVariant ─────────────────────────────────────────────────────
 
   it("applies indicator-disc class by default", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1 },
     });
     expect(wrapper.find("li")?.classes()).toContain("indicator-disc");
   });
 
   it("applies indicator-circle class when indicatorVariant is circle", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1, indicatorVariant: "circle" },
     });
     expect(wrapper.find("li")?.classes()).toContain("indicator-circle");
   });
 
   it("applies indicator-square class when indicatorVariant is square", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1, indicatorVariant: "square" },
     });
     expect(wrapper.find("li")?.classes()).toContain("indicator-square");
@@ -276,7 +403,7 @@ describe("StepperList", () => {
   // ─── indicatorSize ────────────────────────────────────────────────────────
 
   it("defaults indicatorSize to 3rem", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1 },
     });
     const style = (wrapper.element as HTMLElement).style;
@@ -284,14 +411,14 @@ describe("StepperList", () => {
   });
 
   it("accepts a custom indicatorSize prop without error", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 1, indicatorSize: "5rem" },
     });
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders correct HTML structure with custom indicatorSize", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: { itemCount: 2, indicatorSize: "4rem" },
     });
     expect(wrapper.html()).toMatchSnapshot();
@@ -300,7 +427,7 @@ describe("StepperList", () => {
   // ─── Combined props ───────────────────────────────────────────────────────
 
   it("renders correctly with all props and slots combined", async () => {
-    const wrapper = await mountSuspended(StepperList, {
+    wrapper = await mountSuspended(StepperList, {
       props: {
         tag: "ol",
         itemCount: 3,

package/app/components/02.molecules/stepper-list/tests/__snapshots__/StepperList.spec.ts.snap

@@ -1,99 +1,99 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`StepperList > renders correct HTML structure (ol, 5 items) 1`] = `
-"<ol class="stepper-list has-connectors">
-  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
+"<ol role="list" class="stepper-list has-connectors">
+  <li class="stepper-list-item indicator-top indicator-disc" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
-    <div></div>
+    <div class="stepper-list-content"></div>
   </li>
-  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
+  <li class="stepper-list-item indicator-top indicator-disc" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
-    <div></div>
+    <div class="stepper-list-content"></div>
   </li>
-  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
+  <li class="stepper-list-item indicator-top indicator-disc" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
-    <div></div>
+    <div class="stepper-list-content"></div>
   </li>
-  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
+  <li class="stepper-list-item indicator-top indicator-disc" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
-    <div></div>
+    <div class="stepper-list-content"></div>
   </li>
-  <li class="indicator-top indicator-disc">
+  <li class="stepper-list-item indicator-top indicator-disc">
     <div class="stepper-list__indicator-counter"></div>
-    <div></div>
+    <div class="stepper-list-content"></div>
   </li>
 </ol>"
 `;
 
 exports[`StepperList > renders correct HTML structure (ul, 3 items) 1`] = `
-"<ul class="stepper-list has-connectors">
-  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
+"<ul role="list" class="stepper-list has-connectors">
+  <li class="stepper-list-item indicator-top indicator-disc" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
-    <div></div>
+    <div class="stepper-list-content"></div>
   </li>
-  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
+  <li class="stepper-list-item indicator-top indicator-disc" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
-    <div></div>
+    <div class="stepper-list-content"></div>
   </li>
-  <li class="indicator-top indicator-disc">
+  <li class="stepper-list-item indicator-top indicator-disc">
     <div class="stepper-list__indicator-counter"></div>
-    <div></div>
+    <div class="stepper-list-content"></div>
   </li>
 </ul>"
 `;
 
 exports[`StepperList > renders correct HTML structure with custom indicatorSize 1`] = `
-"<ul class="stepper-list has-connectors">
-  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
+"<ul role="list" class="stepper-list has-connectors">
+  <li class="stepper-list-item indicator-top indicator-disc" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
-    <div></div>
+    <div class="stepper-list-content"></div>
   </li>
-  <li class="indicator-top indicator-disc">
+  <li class="stepper-list-item indicator-top indicator-disc">
     <div class="stepper-list__indicator-counter"></div>
-    <div></div>
+    <div class="stepper-list-content"></div>
   </li>
 </ul>"
 `;
 
 exports[`StepperList > renders correct HTML structure with indicator slots 1`] = `
-"<ul class="stepper-list has-connectors">
-  <li class="has-indicator indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
+"<ul role="list" class="stepper-list has-connectors">
+  <li class="stepper-list-item has-indicator indicator-top indicator-disc" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-custom"><span class="indicator-icon">✓</span></div>
-    <div><span>First item</span></div>
+    <div class="stepper-list-content"><span>First item</span></div>
   </li>
-  <li class="indicator-top indicator-disc">
+  <li class="stepper-list-item indicator-top indicator-disc">
     <div class="stepper-list__indicator-counter"></div>
-    <div><span>Second item</span></div>
+    <div class="stepper-list-content"><span>Second item</span></div>
   </li>
 </ul>"
 `;
 
 exports[`StepperList > renders correct HTML structure with styleClassPassthrough 1`] = `
-"<ul class="stepper-list custom-class another-class has-connectors">
-  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
+"<ul role="list" class="stepper-list custom-class another-class has-connectors">
+  <li class="stepper-list-item indicator-top indicator-disc" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
-    <div></div>
+    <div class="stepper-list-content"></div>
   </li>
-  <li class="indicator-top indicator-disc">
+  <li class="stepper-list-item indicator-top indicator-disc">
     <div class="stepper-list__indicator-counter"></div>
-    <div></div>
+    <div class="stepper-list-content"></div>
   </li>
 </ul>"
 `;
 
 exports[`StepperList > renders correctly with all props and slots combined 1`] = `
-"<ol class="stepper-list combined-class has-connectors">
-  <li class="has-indicator indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
+"<ol role="list" class="stepper-list combined-class has-connectors">
+  <li class="stepper-list-item has-indicator indicator-top indicator-disc" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-custom"><span class="indicator-icon">1</span></div>
-    <div><span>Step one</span></div>
+    <div class="stepper-list-content"><span>Step one</span></div>
   </li>
-  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
+  <li class="stepper-list-item indicator-top indicator-disc" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
-    <div><span>Step two</span></div>
+    <div class="stepper-list-content"><span>Step two</span></div>
   </li>
-  <li class="indicator-top indicator-disc">
+  <li class="stepper-list-item indicator-top indicator-disc">
     <div class="stepper-list__indicator-counter"></div>
-    <div><span>Step three</span></div>
+    <div class="stepper-list-content"><span>Step three</span></div>
   </li>
 </ol>"
 `;

package/app/components/03.organisms/services/service-detail/tests/__snapshots__/ServiceDetail.spec.ts.snap

@@ -37,22 +37,22 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
         <h2 class="hero-text mb-20 subheading axis-horizontal">
           <!--v-if--><span class="text-block-0 normal">The Process</span>
         </h2>
-        <ol class="stepper-list has-connectors service-detail__process">
-          <li class="indicator-top indicator-circle" style="--_connector-top: 0px; --_connector-height: 0px;">
+        <ol role="list" class="stepper-list has-connectors service-detail__process">
+          <li class="stepper-list-item indicator-top indicator-circle" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
             <div class="stepper-list__indicator-counter"></div>
-            <div>
+            <div class="stepper-list-content">
               <p class="page-body-normal">Consultation</p>
             </div>
           </li>
-          <li class="indicator-top indicator-circle" style="--_connector-top: 0px; --_connector-height: 0px;">
+          <li class="stepper-list-item indicator-top indicator-circle" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
             <div class="stepper-list__indicator-counter"></div>
-            <div>
+            <div class="stepper-list-content">
               <p class="page-body-normal">Sectioning</p>
             </div>
           </li>
-          <li class="indicator-top indicator-circle">
+          <li class="stepper-list-item indicator-top indicator-circle">
             <div class="stepper-list__indicator-counter"></div>
-            <div>
+            <div class="stepper-list-content">
               <p class="page-body-normal">Painting</p>
             </div>
           </li>

package/app/types/components/index.ts

@@ -26,3 +26,4 @@ export * from "./samaritan-prompt.d"
 export * from "./profile-section.d"
 export * from "./services-card.d"
 export * from "./google-reviews.d"
+export * from "./progress-tracker.d"

package/app/types/components/progress-tracker.d.ts

@@ -0,0 +1,6 @@
+export interface ProgressTrackerStep {
+  title: string;
+  body?: string;
+}
+
+export type ProgressTrackerStepState = "done" | "current" | "upcoming";

package/package.json

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