srcdev-nuxt-components 9.0.15 → 9.0.16

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

@@ -24,6 +24,10 @@ const meta: Meta<typeof StepperList> = {
       options: ["disc", "circle", "square"],
       description: "Visual style of the counter indicator",
     },
+    indicatorSize: {
+      control: "text",
+      description: "Size of the indicator bubble — any valid CSS length (e.g. '3rem', '40px')",
+    },
     connected: {
       control: "boolean",
       description: "Whether to show connectors between indicators (only visible in supported browsers)",
@@ -38,6 +42,7 @@ const meta: Meta<typeof StepperList> = {
     itemCount: 3,
     indicatorAlignment: "top",
     indicatorVariant: "disc",
+    indicatorSize: "3rem",
     connected: false,
     styleClassPassthrough: [],
   },
@@ -289,6 +294,32 @@ export const VariantSquare: Story = {
   }),
 };
 
+/** Custom indicator size — demonstrates a larger indicator bubble. */
+export const CustomIndicatorSize: Story = {
+  name: "Custom Indicator Size",
+  args: {
+    tag: "ul",
+    itemCount: 4,
+    indicatorSize: "5rem",
+    connected: true,
+    indicatorAlignment: "center",
+  },
+  render: (args) => ({
+    components: { StepperList },
+    setup() {
+      return { args };
+    },
+    template: `
+      <StepperList v-bind="args">
+        <template #item-0><p class="page-body-normal">Create your account</p></template>
+        <template #item-1><p class="page-body-normal">Verify your email and complete your profile with a photo, bio, and preferred contact details</p></template>
+        <template #item-2><p class="page-body-normal">Choose a plan</p></template>
+        <template #item-3><p class="page-body-normal">Start building</p></template>
+      </StepperList>
+    `,
+  }),
+};
+
 /** Rich content — items contain a mix of heading + body, varying in length. */
 export const RichContent: Story = {
   name: "Rich Item Content",

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

@@ -264,6 +264,30 @@ describe("StepperList", () => {
     expect(wrapper.find("li")?.classes()).toContain("indicator-square");
   });
 
+  // ─── indicatorSize ────────────────────────────────────────────────────────
+
+  it("defaults indicatorSize to 3rem", async () => {
+    const wrapper = await mountSuspended(StepperList, {
+      props: { itemCount: 1 },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--v-bind-indicatorSize") || wrapper.html()).toBeTruthy();
+  });
+
+  it("accepts a custom indicatorSize prop without error", async () => {
+    const 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, {
+      props: { itemCount: 2, indicatorSize: "4rem" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
   // ─── Combined props ───────────────────────────────────────────────────────
 
   it("renders correctly with all props and slots combined", async () => {

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

@@ -2,19 +2,19 @@
 
 exports[`StepperList > renders correct HTML structure (ol, 5 items) 1`] = `
 "<ol class="stepper-list has-connectors">
-  <li class="indicator-top indicator-disc">
+  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
     <div></div>
   </li>
-  <li class="indicator-top indicator-disc">
+  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
     <div></div>
   </li>
-  <li class="indicator-top indicator-disc">
+  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
     <div></div>
   </li>
-  <li class="indicator-top indicator-disc">
+  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
     <div></div>
   </li>
@@ -27,7 +27,11 @@ exports[`StepperList > renders correct HTML structure (ol, 5 items) 1`] = `
 
 exports[`StepperList > renders correct HTML structure (ul, 3 items) 1`] = `
 "<ul class="stepper-list has-connectors">
-  <li class="indicator-top indicator-disc">
+  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
+    <div class="stepper-list__indicator-counter"></div>
+    <div></div>
+  </li>
+  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
     <div></div>
   </li>
@@ -35,6 +39,15 @@ exports[`StepperList > renders correct HTML structure (ul, 3 items) 1`] = `
     <div class="stepper-list__indicator-counter"></div>
     <div></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;">
+    <div class="stepper-list__indicator-counter"></div>
+    <div></div>
+  </li>
   <li class="indicator-top indicator-disc">
     <div class="stepper-list__indicator-counter"></div>
     <div></div>
@@ -44,7 +57,7 @@ exports[`StepperList > renders correct HTML structure (ul, 3 items) 1`] = `
 
 exports[`StepperList > renders correct HTML structure with indicator slots 1`] = `
 "<ul class="stepper-list has-connectors">
-  <li class="has-indicator indicator-top indicator-disc">
+  <li class="has-indicator indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-custom"><span class="indicator-icon">✓</span></div>
     <div><span>First item</span></div>
   </li>
@@ -57,7 +70,7 @@ exports[`StepperList > renders correct HTML structure with indicator slots 1`] =
 
 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">
+  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
     <div></div>
   </li>
@@ -70,11 +83,11 @@ exports[`StepperList > renders correct HTML structure with styleClassPassthrough
 
 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">
+  <li class="has-indicator indicator-top indicator-disc" style="--_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>
   </li>
-  <li class="indicator-top indicator-disc">
+  <li class="indicator-top indicator-disc" style="--_connector-top: 0px; --_connector-height: 0px;">
     <div class="stepper-list__indicator-counter"></div>
     <div><span>Step two</span></div>
   </li>