srcdev-nuxt-components 9.0.15 → 9.0.17

package/app/components/02.molecules/navigation/navigation-horizontal/tests/__snapshots__/NavigationHorizontal.spec.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`NavigationHorizontal > renders correct HTML structure 1`] = `
+"<nav class="navigation-horizontal">
+  <ul class="navigation-horizontal-list">
+    <li class=""><a href="/">
+        <!--v-if--> Home
+      </a></li>
+    <li class=""><a href="/about">
+        <!--v-if--> About
+      </a></li>
+    <li class=""><a href="/contact">
+        <!--v-if--> Contact
+      </a></li>
+  </ul>
+</nav>"
+`;

package/app/components/02.molecules/profile-section/ProfileSection.vue

@@ -3,7 +3,7 @@
     :is="tag"
     class="profile-section"
     :class="[elementClasses]"
-    :aria-labelledby="needsLabel ? headingId : undefined"
+    :aria-labelledby="ariaLabelledby"
   >
     <header class="profile-section-header">
       <slot v-if="hasEyebrowTextSlot" name="eyebrowText"></slot>
@@ -51,8 +51,7 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const headingId = useId();
-const needsLabel = computed(() => props.tag === "section" || props.tag === "article");
+const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
 
 const slots = useSlots();
 const hasEyebrowTextSlot = computed(() => Boolean(slots.eyebrowText));

package/app/components/02.molecules/profile-section/tests/ProfileSection.spec.ts

@@ -152,11 +152,11 @@ describe("ProfileSection", () => {
     expect(wrapper.find(".profile-section").attributes("aria-labelledby")).toBeUndefined();
   });
 
-  it("does not add aria-labelledby when tag is main", async () => {
+  it("adds aria-labelledby when tag is main", async () => {
     const wrapper = await mountSuspended(ProfileSection, {
       props: { ...defaultProps, tag: "main" },
     });
-    expect(wrapper.find(".profile-section").attributes("aria-labelledby")).toBeUndefined();
+    expect(wrapper.find(".profile-section").attributes("aria-labelledby")).toBeTruthy();
   });
 
   it("does not render profile-links section when slot is not provided", async () => {

package/app/components/02.molecules/stepper-list/StepperList.vue

@@ -1,5 +1,10 @@
 <template>
-  <component :is="tag" class="stepper-list" :class="[elementClasses, { 'has-connectors': props.connected }]">
+  <component
+    :is="tag"
+    ref="listEl"
+    class="stepper-list"
+    :class="[elementClasses, { 'has-connectors': props.connected }]"
+  >
     <li
       v-for="index in itemCount"
       :key="index"
@@ -10,9 +15,7 @@
       ]"
     >
       <div
-        :class="
-          $slots[`indicator-${index - 1}`] ? 'stepper-list__indicator-custom' : 'stepper-list__indicator-counter'
-        "
+        :class="$slots[`indicator-${index - 1}`] ? 'stepper-list__indicator-custom' : 'stepper-list__indicator-counter'"
       >
         <slot :name="`indicator-${index - 1}`"></slot>
       </div>
@@ -28,6 +31,7 @@ interface Props {
   tag?: "ul" | "ol";
   indicatorAlignment?: "top" | "center";
   indicatorVariant?: "disc" | "square" | "circle";
+  indicatorSize?: string;
   connected?: boolean;
   itemCount: number;
   styleClassPassthrough?: string | string[];
@@ -37,122 +41,157 @@ const props = withDefaults(defineProps<Props>(), {
   tag: "ul",
   indicatorAlignment: "top",
   indicatorVariant: "disc",
+  indicatorSize: "3rem",
   connected: true,
   styleClassPassthrough: () => [],
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const listEl = ref<HTMLElement | null>(null);
+let resizeObserver: ResizeObserver | null = null;
+
+function updateConnectors() {
+  if (!listEl.value || !props.connected) return;
+  const lis = Array.from(listEl.value.querySelectorAll<HTMLLIElement>(":scope > li"));
+
+  lis.forEach((li, i) => {
+    if (i >= lis.length - 1) return;
+
+    const indicator = li.querySelector<HTMLElement>(
+      ".stepper-list__indicator-counter, .stepper-list__indicator-custom"
+    );
+    const nextIndicator = lis[i + 1]?.querySelector<HTMLElement>(
+      ".stepper-list__indicator-counter, .stepper-list__indicator-custom"
+    );
+
+    if (!indicator || !nextIndicator) return;
+
+    const liRect = li.getBoundingClientRect();
+    const indicatorRect = indicator.getBoundingClientRect();
+    const nextIndicatorRect = nextIndicator.getBoundingClientRect();
+
+    li.style.setProperty("--_connector-top", `${indicatorRect.bottom - liRect.top}px`);
+    li.style.setProperty("--_connector-height", `${Math.max(0, nextIndicatorRect.top - indicatorRect.bottom)}px`);
+  });
+}
+
+onMounted(() => {
+  updateConnectors();
+  if (typeof ResizeObserver !== "undefined" && listEl.value) {
+    resizeObserver = new ResizeObserver(updateConnectors);
+    resizeObserver.observe(listEl.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+});
+
+watch(
+  () => [props.itemCount, props.connected, props.indicatorAlignment],
+  async () => {
+    await nextTick();
+    updateConnectors();
+  }
+);
 </script>
 
 <style lang="css">
 @layer components {
-.stepper-list {
-  --_list-padding-block: 1.2rem;
-  --_counter-size: 3rem;
-  --_stepper-list-connector-width: 0.2rem;
-
-  list-style: none;
-  counter-reset: stepper-list;
-  padding: 0;
-
-  li {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 2.2rem;
-    counter-increment: stepper-list;
-    padding-inline-start: 0rem;
-    padding-block: var(--_list-padding-block);
-    position: relative;
-
-    &.indicator-top {
-      align-items: start;
-    }
+  .stepper-list {
+    --_list-padding-block: 1.2rem;
+    --_counter-size: v-bind(indicatorSize);
+    --_stepper-list-connector-width: 0.2rem;
 
-    &.indicator-center {
-      align-items: center;
-    }
-
-    .stepper-list__indicator-counter::before {
-      content: counter(stepper-list);
+    list-style: none;
+    counter-reset: stepper-list;
+    padding: 0;
 
+    li {
       display: grid;
-      place-content: center;
-      width: var(--_counter-size);
-      height: var(--_counter-size);
-      font-size: 1.4rem;
-      font-weight: 600;
-    }
+      grid-template-columns: auto 1fr;
+      gap: 2.2rem;
+      counter-increment: stepper-list;
+      padding-inline-start: 0rem;
+      padding-block: var(--_list-padding-block);
+      position: relative;
+
+      &.indicator-top {
+        align-items: start;
+      }
 
-    &.indicator-circle .stepper-list__indicator-counter::before {
-      background-color: var(--stepper-list-counter-circle-background);
-      color: var(--stepper-list-counter-circle-text);
-      border: 2px solid var(--stepper-list-counter-circle-border);
-      border-radius: 100vw;
-    }
+      &.indicator-center {
+        align-items: center;
+      }
 
-    &.indicator-disc .stepper-list__indicator-counter::before {
-      background-color: var(--stepper-list-counter-disc-background);
-      color: var(--stepper-list-counter-disc-text);
-      border: 2px solid var(--stepper-list-counter-disc-border);
-      border-radius: 100vw;
-    }
+      .stepper-list__indicator-counter::before {
+        content: counter(stepper-list);
 
-    &.indicator-square .stepper-list__indicator-counter::before {
-      background-color: var(--stepper-list-counter-square-background);
-      color: var(--stepper-list-counter-square-text);
-      border: 2px solid var(--stepper-list-counter-square-border);
-      border-radius: 0.25rem;
-    }
+        display: grid;
+        place-content: center;
+        width: var(--_counter-size);
+        height: var(--_counter-size);
+        font-size: 1.4rem;
+        font-weight: 600;
+      }
 
-    &.has-indicator::before {
-      display: none;
-    }
+      &.indicator-circle .stepper-list__indicator-counter::before {
+        background-color: var(--stepper-list-counter-circle-background);
+        color: var(--stepper-list-counter-circle-text);
+        border: 2px solid var(--stepper-list-counter-circle-border);
+        border-radius: 100vw;
+      }
 
-    .stepper-list__indicator-custom,
-    .stepper-list__indicator-counter {
-      anchor-name: --indicator-bubble;
-    }
+      &.indicator-disc .stepper-list__indicator-counter::before {
+        background-color: var(--stepper-list-counter-disc-background);
+        color: var(--stepper-list-counter-disc-text);
+        border: 2px solid var(--stepper-list-counter-disc-border);
+        border-radius: 100vw;
+      }
 
-    .stepper-list__indicator-custom {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      &.indicator-square .stepper-list__indicator-counter::before {
+        background-color: var(--stepper-list-counter-square-background);
+        color: var(--stepper-list-counter-square-text);
+        border: 2px solid var(--stepper-list-counter-square-border);
+        border-radius: 0.25rem;
+      }
 
-      .indicator-icon {
-        color: var(--stepper-list-icon);
-        width: var(--_counter-size);
-        height: var(--_counter-size);
+      &.has-indicator::before {
+        display: none;
+      }
+
+      .stepper-list__indicator-custom,
+      .stepper-list__indicator-counter {
+        anchor-name: --indicator-bubble;
+      }
+
+      .stepper-list__indicator-custom {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        .indicator-icon {
+          color: var(--stepper-list-icon);
+          width: var(--_counter-size) !important;
+          height: var(--_counter-size) !important;
+        }
       }
     }
   }
-}
-
-/* Fallback: per-li connectors for browsers without anchor positioning */
-/* @supports not (anchor-name: --x) { */
-.stepper-list.has-connectors li:not(:last-child)::after {
-  content: "";
-  position: absolute;
-  left: calc(var(--_counter-size) / 2);
-  transform: translateX(-50%);
-  top: calc(1.2rem + 3rem);
-  bottom: calc(-1 * var(--_list-padding-block));
-  width: var(--_stepper-list-connector-width);
-  background-color: var(--stepper-list-connector-color, currentColor);
-}
-/* } */
 
-/* Enhanced: anchor-based connector positioning */
-/* @supports (anchor-name: --x) {
   .stepper-list.has-connectors li:not(:last-child)::after {
     content: "";
     position: absolute;
-    left: anchor(--indicator-bubble, center);
+    left: calc(var(--_counter-size) / 2);
     transform: translateX(-50%);
-    top: anchor(--indicator-bubble, bottom);
-    bottom: calc(-1 * var(--stepper-list-item-gap, 2.4rem));
-    width: var(--stepper-list-connector-width, 2px);
+    /* JS sets --_connector-top and --_connector-height from measured indicator positions.
+     The fallback values handle the indicator-top case before JS runs. */
+    top: var(--_connector-top, calc(var(--_list-padding-block) + var(--_counter-size)));
+    height: var(--_connector-height, auto);
+    bottom: calc(-1 * var(--_list-padding-block));
+    width: var(--_stepper-list-connector-width);
     background-color: var(--stepper-list-connector-color, currentColor);
   }
-} */
 }
 </style>

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>