srcdev-nuxt-components 9.6.4 → 9.6.6

package/app/components/02.molecules/social-icons-list/stories/social-icons-list-recipes.css

@@ -0,0 +1,108 @@
+/*
+ * SocialIconsList recipes, as a consumer would write them: unlayered, on a class passed through
+ * style-class-passthrough. Tokens that read --social-icons-list-brand-colour are set on
+ * .social-icons-list-item, the element that defines it (a var() in a custom property resolves where
+ * that property is declared, so setting them on the root would find no brand colour).
+ */
+
+/* 2a: mono tiles, brand colour on hover */
+.demo-social-mono-tiles {
+  --social-icons-list-gap: 1rem;
+  --social-icons-list-icon-size: 2rem;
+  --social-icons-list-icon-colour: #16171b;
+  --social-icons-list-link-padding: 1.2rem;
+  --social-icons-list-link-radius: 1.2rem;
+  --social-icons-list-link-background: #f1f2f5;
+  --social-icons-list-link-background-hover: #e6e8ee;
+  --social-icons-list-hover-scale: 1.04;
+  --social-icons-list-hover-opacity: 1;
+
+  .social-icons-list-item {
+    --social-icons-list-icon-colour-hover: var(--social-icons-list-brand-colour);
+  }
+}
+
+/* 2b: dark dock with glow */
+.demo-social-dark-dock {
+  inline-size: fit-content;
+  padding: 0.8rem;
+  border: 1px solid #34353b;
+  border-radius: 2.2rem;
+  background: #232428;
+  --social-icons-list-gap: 0.8rem;
+  --social-icons-list-icon-size: 2rem;
+  --social-icons-list-icon-colour: #ffffff;
+  --social-icons-list-link-padding: 1.2rem;
+  --social-icons-list-link-radius: 1.4rem;
+  --social-icons-list-link-background: #1a1b1f;
+  --social-icons-list-hover-scale: 1;
+  --social-icons-list-hover-opacity: 1;
+
+  .social-icons-list-item {
+    --social-icons-list-link-shadow-hover:
+      0 0 0 1px color-mix(in oklab, var(--social-icons-list-brand-colour) 60%, transparent),
+      0 0 1.6rem color-mix(in oklab, var(--social-icons-list-brand-colour) 55%, transparent);
+    --social-icons-list-icon-colour-hover: var(--social-icons-list-brand-colour);
+  }
+}
+
+/* 2c: labelled pills (show-label) */
+.demo-social-pills {
+  justify-content: center;
+  --social-icons-list-gap: 1rem;
+  --social-icons-list-icon-size: 1.6rem;
+  --social-icons-list-icon-colour: #ffffff;
+  --social-icons-list-link-padding: 0.4rem 1.4rem 0.4rem 0.4rem;
+  --social-icons-list-link-gap: 0.8rem;
+  --social-icons-list-link-border: 1.5px solid #16171b;
+  --social-icons-list-link-radius: 99rem;
+  --social-icons-list-link-background: #ffffff;
+  --social-icons-list-label-colour: #16171b;
+  --social-icons-list-icon-wrapper-padding: 0.6rem;
+  --social-icons-list-icon-wrapper-radius: 50%;
+  --social-icons-list-hover-scale: 1.03;
+  --social-icons-list-hover-opacity: 1;
+
+  .social-icons-list-item {
+    --social-icons-list-icon-wrapper-background: var(--social-icons-list-brand-colour);
+  }
+}
+
+/* 2d: overlapping stack, fans out on hover or keyboard focus */
+.demo-social-stack {
+  --social-icons-list-gap: 0;
+  --social-icons-list-icon-size: 1.8rem;
+  --social-icons-list-icon-colour: #ffffff;
+  --social-icons-list-icon-wrapper-padding: 1rem;
+  --social-icons-list-icon-wrapper-radius: 50%;
+  --social-icons-list-icon-wrapper-border: 2px solid #ffffff;
+  --social-icons-list-link-radius: 50%;
+  --social-icons-list-hover-scale: 1.08;
+  --social-icons-list-hover-opacity: 1;
+
+  .social-icons-list-item {
+    --social-icons-list-icon-wrapper-background: var(--social-icons-list-brand-colour);
+
+    & + .social-icons-list-item {
+      margin-inline-start: -1.2rem;
+    }
+
+    &:hover,
+    &:focus-within {
+      z-index: 1;
+    }
+  }
+
+  &:hover,
+  &:focus-within {
+    .social-icons-list-item + .social-icons-list-item {
+      margin-inline-start: 0.4rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .social-icons-list-item {
+      transition: margin-inline-start 250ms ease-out;
+    }
+  }
+}

package/app/components/02.molecules/social-icons-list/tests/SocialIconsList.spec.ts

@@ -1,8 +1,22 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { h } from "vue";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import SocialIconsList from "../SocialIconsList.vue";
 import type { ISocialIcon } from "~/types/components/social-icons-list.d";
 
+const mounted: { unmount: () => void }[] = [];
+
+async function mountList(props: Record<string, unknown>) {
+  const wrapper = await mountSuspended(SocialIconsList, { props: props as { items: ISocialIcon[] } });
+  mounted.push(wrapper);
+  return wrapper;
+}
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
+
 const defaultItems: ISocialIcon[] = [
   {
     networkName: "Facebook",
@@ -26,120 +40,177 @@ const defaultItems: ISocialIcon[] = [
 
 describe("SocialIconsList", () => {
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: defaultItems },
-    });
+    const wrapper = await mountList({ items: defaultItems });
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders as a ul element", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: defaultItems },
-    });
+    const wrapper = await mountList({ items: defaultItems });
     expect(wrapper.element.tagName.toLowerCase()).toBe("ul");
   });
 
   it("renders the correct number of list items", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: defaultItems },
-    });
-    expect(wrapper.findAll(".social-icon-item").length).toBe(defaultItems.length);
+    const wrapper = await mountList({ items: defaultItems });
+    expect(wrapper.findAll(".social-icons-list-item").length).toBe(defaultItems.length);
   });
 
   it("renders the correct href for each item", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: defaultItems },
-    });
-    const links = wrapper.findAll(".social-icon-link");
+    const wrapper = await mountList({ items: defaultItems });
+    const links = wrapper.findAll(".social-icons-list-link");
     defaultItems.forEach((item, i) => {
       expect(links[i]!.attributes("href")).toBe(`${item.baseHref}${item.profileId}`);
     });
   });
 
   it("renders aria-label on each link using networkName", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: defaultItems },
-    });
-    const links = wrapper.findAll(".social-icon-link");
+    const wrapper = await mountList({ items: defaultItems });
+    const links = wrapper.findAll(".social-icons-list-link");
     defaultItems.forEach((item, i) => {
       expect(links[i]!.attributes("aria-label")).toBe(`${item.networkName} profile (opens in a new tab)`);
     });
   });
 
   it("adds rel='noopener noreferrer' to each link", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: defaultItems },
-    });
-    const links = wrapper.findAll(".social-icon-link");
+    const wrapper = await mountList({ items: defaultItems });
+    const links = wrapper.findAll(".social-icons-list-link");
     links.forEach((link) => {
       expect(link.attributes("rel")).toBe("noopener noreferrer");
     });
   });
 
   it("opens each link in a new tab", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: defaultItems },
-    });
-    const links = wrapper.findAll(".social-icon-link");
+    const wrapper = await mountList({ items: defaultItems });
+    const links = wrapper.findAll(".social-icons-list-link");
     links.forEach((link) => {
       expect(link.attributes("target")).toBe("_blank");
     });
   });
 
   it("uses the default aria-label on the list", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: defaultItems },
-    });
+    const wrapper = await mountList({ items: defaultItems });
     expect(wrapper.attributes("aria-label")).toBe("Social media profiles");
   });
 
   it("uses a custom label prop as aria-label on the list", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: defaultItems, label: "Follow us" },
-    });
+    const wrapper = await mountList({ items: defaultItems, label: "Follow us" });
     expect(wrapper.attributes("aria-label")).toBe("Follow us");
   });
 
   it("renders an empty list when items is empty", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: [] },
-    });
-    expect(wrapper.findAll(".social-icon-item").length).toBe(0);
+    const wrapper = await mountList({ items: [] });
+    expect(wrapper.findAll(".social-icons-list-item").length).toBe(0);
   });
 
   it("applies styleClassPassthrough classes to the root element", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: defaultItems, styleClassPassthrough: ["custom-class", "another-class"] },
-    });
+    const wrapper = await mountList({ items: defaultItems, styleClassPassthrough: ["custom-class", "another-class"] });
     expect(wrapper.classes()).toContain("custom-class");
     expect(wrapper.classes()).toContain("another-class");
   });
 
   it("renders the correct HTML structure", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: defaultItems },
-    });
+    const wrapper = await mountList({ items: defaultItems });
     expect(wrapper.html()).toMatchSnapshot();
   });
 });
 
 describe("SocialIconsList link labels", () => {
   it("uses linkLabelTemplate for each link", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: defaultItems, linkLabelTemplate: "Profil {network}" },
-    });
-    expect(wrapper.findAll(".social-icon-link")[0]!.attributes("aria-label")).toBe("Profil Facebook");
+    const wrapper = await mountList({ items: defaultItems, linkLabelTemplate: "Profil {network}" });
+    expect(wrapper.findAll(".social-icons-list-link")[0]!.attributes("aria-label")).toBe("Profil Facebook");
   });
 
   it("lets an item's own label override the template", async () => {
+    const wrapper = await mountList({ items: [{ ...defaultItems[0]!, label: "Our Facebook page" }] });
+    expect(wrapper.find(".social-icons-list-link").attributes("aria-label")).toBe("Our Facebook page");
+  });
+
+  it("hides the icon from assistive tech (the link carries the name)", async () => {
+    const wrapper = await mountList({ items: defaultItems });
+    expect(wrapper.find(".social-icons-list-icon-wrapper").attributes("aria-hidden")).toBe("true");
+  });
+});
+
+describe("SocialIconsList hostile data", () => {
+  it("announces as a list even with list-style: none (Safari/VoiceOver)", async () => {
+    const wrapper = await mountList({ items: defaultItems });
+    expect(wrapper.attributes("role")).toBe("list");
+  });
+
+  it("renders every item when two share a networkName", async () => {
+    const twoInstagrams: ISocialIcon[] = [
+      { ...defaultItems[1]!, profileId: "salon" },
+      { ...defaultItems[1]!, profileId: "academy" },
+    ];
+    const wrapper = await mountList({ items: twoInstagrams });
+    const hrefs = wrapper.findAll(".social-icons-list-link").map((link) => link.attributes("href"));
+    expect(hrefs).toEqual(["https://www.instagram.com/salon", "https://www.instagram.com/academy"]);
+  });
+
+  it("skips an item whose href isn't http(s), mailto, tel or site-relative", async () => {
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+    const wrapper = await mountList({
+      items: [
+        { ...defaultItems[0]!, baseHref: "javascript:", profileId: "alert(1)" },
+        { ...defaultItems[0]!, baseHref: " JavaScript:", profileId: "alert(1)" },
+        { ...defaultItems[0]!, baseHref: "//evil.example/", profileId: "x" },
+        defaultItems[1]!,
+      ],
+    });
+    const links = wrapper.findAll(".social-icons-list-link");
+    expect(links.length).toBe(1);
+    expect(links[0]!.attributes("href")).toBe("https://www.instagram.com/testhandle");
+  });
+
+  it("keeps mailto, tel and site-relative hrefs", async () => {
+    const wrapper = await mountList({
+      items: [
+        { networkName: "Email", iconName: "mdi:email", baseHref: "mailto:", profileId: "hello@example.com" },
+        { networkName: "Phone", iconName: "mdi:phone", baseHref: "tel:", profileId: "+441234567890" },
+        { networkName: "Contact", iconName: "mdi:account", baseHref: "/", profileId: "contact" },
+      ],
+    });
+    const hrefs = wrapper.findAll(".social-icons-list-link").map((link) => link.attributes("href"));
+    expect(hrefs).toEqual(["mailto:hello@example.com", "tel:+441234567890", "/contact"]);
+  });
+});
+
+describe("SocialIconsList labels, slots and brand colour", () => {
+  it("renders no visible label by default", async () => {
+    const wrapper = await mountList({ items: defaultItems });
+    expect(wrapper.find(".social-icons-list-label").exists()).toBe(false);
+  });
+
+  it("shows each networkName as visible text with showLabel, keeping the aria-label", async () => {
+    const wrapper = await mountList({ items: defaultItems, showLabel: true });
+    const labels = wrapper.findAll(".social-icons-list-label").map((label) => label.text());
+    expect(labels).toEqual(["Facebook", "Instagram", "YouTube"]);
+    expect(wrapper.find(".social-icons-list-link").attributes("aria-label")).toBe("Facebook profile (opens in a new tab)");
+  });
+
+  it("sets --social-icons-list-brand-colour on an item only when it has a brandColour", async () => {
+    const wrapper = await mountList({ items: [{ ...defaultItems[0]!, brandColour: "#1877f2" }, defaultItems[1]!] });
+    const items = wrapper.findAll(".social-icons-list-item");
+    expect((items[0]!.element as HTMLElement).style.getPropertyValue("--social-icons-list-brand-colour")).toBe("#1877f2");
+    expect((items[1]!.element as HTMLElement).style.getPropertyValue("--social-icons-list-brand-colour")).toBe("");
+  });
+
+  it("replaces the icon with the scoped icon slot, inside the wrapper", async () => {
     const wrapper = await mountSuspended(SocialIconsList, {
-      props: { items: [{ ...defaultItems[0]!, label: "Our Facebook page" }] },
+      props: { items: defaultItems },
+      slots: { icon: ({ item }: { item: ISocialIcon }) => h("b", { class: "custom-icon" }, item.networkName[0]) },
     });
-    expect(wrapper.find(".social-icon-link").attributes("aria-label")).toBe("Our Facebook page");
+    mounted.push(wrapper);
+    const custom = wrapper.findAll(".social-icons-list-icon-wrapper .custom-icon");
+    expect(custom.map((el) => el.text())).toEqual(["F", "I", "Y"]);
+    expect(wrapper.find(".social-icons-list-icon").exists()).toBe(false);
   });
 
-  it("hides the icon from assistive tech (the link carries the name)", async () => {
-    const wrapper = await mountSuspended(SocialIconsList, { props: { items: defaultItems } });
-    expect(wrapper.find(".social-icon").attributes("aria-hidden")).toBe("true");
+  it("renders the scoped label slot without showLabel", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+      slots: { label: ({ item }: { item: ISocialIcon }) => `@${item.profileId}` },
+    });
+    mounted.push(wrapper);
+    expect(wrapper.find(".social-icons-list-label").text()).toBe("@testprofile");
   });
 });

package/app/components/02.molecules/social-icons-list/tests/__snapshots__/SocialIconsList.spec.ts.snap

@@ -1,9 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SocialIconsList > renders the correct HTML structure 1`] = `
-"<ul class="social-icons-list" aria-label="Social media profiles">
-  <li class="social-icon-item"><a href="https://www.facebook.com/testprofile" class="social-icon-link" aria-label="Facebook profile (opens in a new tab)" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:facebook social-icon" aria-hidden="true"></span></a></li>
-  <li class="social-icon-item"><a href="https://www.instagram.com/testhandle" class="social-icon-link" aria-label="Instagram profile (opens in a new tab)" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:instagram-icon social-icon" aria-hidden="true"></span></a></li>
-  <li class="social-icon-item"><a href="https://www.youtube.com/@testchannel" class="social-icon-link" aria-label="YouTube profile (opens in a new tab)" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:youtube-icon social-icon" aria-hidden="true"></span></a></li>
+"<ul class="social-icons-list" role="list" aria-label="Social media profiles">
+  <li class="social-icons-list-item"><a href="https://www.facebook.com/testprofile" class="social-icons-list-link" aria-label="Facebook profile (opens in a new tab)" rel="noopener noreferrer" target="_blank"><span class="social-icons-list-icon-wrapper" aria-hidden="true"><span class="iconify i-logos:facebook social-icons-list-icon" aria-hidden="true"></span></span>
+      <!--v-if-->
+    </a></li>
+  <li class="social-icons-list-item"><a href="https://www.instagram.com/testhandle" class="social-icons-list-link" aria-label="Instagram profile (opens in a new tab)" rel="noopener noreferrer" target="_blank"><span class="social-icons-list-icon-wrapper" aria-hidden="true"><span class="iconify i-logos:instagram-icon social-icons-list-icon" aria-hidden="true"></span></span>
+      <!--v-if-->
+    </a></li>
+  <li class="social-icons-list-item"><a href="https://www.youtube.com/@testchannel" class="social-icons-list-link" aria-label="YouTube profile (opens in a new tab)" rel="noopener noreferrer" target="_blank"><span class="social-icons-list-icon-wrapper" aria-hidden="true"><span class="iconify i-logos:youtube-icon social-icons-list-icon" aria-hidden="true"></span></span>
+      <!--v-if-->
+    </a></li>
 </ul>"
 `;

package/app/components/02.molecules/stepper-list/CONSUMER-STYLING.md

@@ -15,12 +15,14 @@ file, scoped to a page wrapper, or per-instance via `styleClassPassthrough`.
 | `--stepper-list-counter-font-size` | `1.4rem` | Counter number font size |
 | `--stepper-list-counter-font-weight` | `600` | Counter number font weight |
 | `--stepper-list-connector-width` | `0.2rem` | Connector line thickness |
+| `--stepper-list-connector-gap` | `0` | Space between each end of the connector line and the indicators it joins. A gap larger than half the space between two indicators hides that line |
 
 ### Colours
 
 | Token | Default | Controls |
 |---|---|---|
 | `--stepper-list-connector-color` | `currentColor` | Connector line colour |
+| `--stepper-list-connector-image` | `none` | Image painted over the connector colour, e.g. a `repeating-linear-gradient()` for a dashed or dotted line (set the colour to `transparent` underneath) |
 | `--stepper-list-icon-color` | `currentColor` | Icon colour for custom `indicator-icon` elements |
 
 ### Circle indicator
@@ -58,8 +60,8 @@ The defaults above are the component's own fallbacks. The library's default them
 > reads, so custom indicator icons fell back to `currentColor`. It now sets
 > `--stepper-list-icon-color`.
 
-Private (not public API): `--_gap`, `--_counter-size` and `--_padding-block`, plus `--_connector-top` and
-`--_connector-height`, which script measures and sets inline on each `<li>`.
+Private (not public API): `--_counter-size` and `--_padding-block`, plus `--_connector-left`,
+`--_connector-top` and `--_connector-height`, which script measures and sets inline on each `<li>`.
 
 ---
 
@@ -72,8 +74,14 @@ Private (not public API): `--_gap`, `--_counter-size` and `--_padding-block`, pl
 | `.indicator-top`, `.indicator-center` | `<li>` | `indicator-alignment` |
 | `.indicator-disc`, `.indicator-square`, `.indicator-circle` | `<li>` | `indicator-variant` |
 
-Inner classes: `.stepper-list__indicator-counter` (auto-numbered bubble) or
-`.stepper-list__indicator-custom` (wraps a custom `indicator-{n}` slot).
+Inner classes: `.stepper-list-item` (each `<li>`), `.stepper-list__indicator-counter`
+(auto-numbered bubble) or `.stepper-list__indicator-custom` (wraps a custom `indicator-{n}` slot),
+and `.stepper-list-content` (wraps the `item-{n}` slot).
+
+> Changed 2026-10-15: `<li>` gained `.stepper-list-item` and the content wrapper gained
+> `.stepper-list-content` (it had no class). The content column is now `minmax(0, 1fr)` with
+> `overflow-wrap: anywhere`, so an unbroken string or long URL wraps instead of widening the list.
+> The root carries `role="list"`, since `list-style: none` drops list semantics in Safari.
 
 ---
 
@@ -156,6 +164,29 @@ visual style, pass a modifier class:
 
 ---
 
+## Recipe: per-step states and dashed connectors
+
+The component has no "done / current / upcoming" prop. Put a state class on the content you pass
+to each `#indicator-{n}` slot, then set tokens on the matching `.stepper-list-item` with `:has()`.
+Each connector belongs to the item above it, so it takes that item's state.
+
+```css
+.onboarding-steps {
+  --stepper-list-connector-color: transparent;
+  --stepper-list-connector-image: repeating-linear-gradient(to bottom, #3a3d45 0 0.2rem, transparent 0.2rem 0.6rem);
+
+  .stepper-list-item:has(.step-marker.is-done) {
+    --stepper-list-connector-image: repeating-linear-gradient(to bottom, #00c8d7 0 0.4rem, transparent 0.4rem 0.7rem);
+  }
+}
+```
+
+Shapes such as diamonds go in the indicator slot (a rotated square). The connector is centred on
+whatever the slot renders, so it needs no adjustment. The "Timeline (styled demo)" story shows the
+full pattern.
+
+---
+
 ## Class passthrough
 
 `style-class-passthrough` adds classes to the root `<ul>`/`<ol>`. Tokens set on a passthrough class
@@ -167,11 +198,15 @@ land for the whole list. Reactive after mount.
 
 - `--stepper-list-counter-size` takes precedence over the `indicatorSize` prop. Use the prop
   for programmatic/template control; use the CSS token for pure-CSS theme overrides.
-- The connector line is positioned by JS (`ResizeObserver`) on each `<li>` as
-  `--_connector-top` and `--_connector-height`. These are internal — do not set them.
+- The connector line is positioned by JS on each `<li>` as `--_connector-left`,
+  `--_connector-top` and `--_connector-height`, centred on the measured indicator, so it lines up
+  under a custom indicator wider than `--stepper-list-counter-size`. These are internal — do not
+  set them. They are re-measured when the list or any item resizes, and when a `class` or the
+  content changes inside the list, so per-step state styling (the recipe above) keeps the lines
+  in place. A change made only through an inline `style` attribute isn't seen; toggle a class
+  instead.
 - `--stepper-list-connector-color` defaults to `currentColor`, inheriting from the nearest
   ancestor's text colour. Set it explicitly when that behaviour is undesirable.
 - All border tokens (`--stepper-list-counter-*-border`) control the **colour** only — the
   border is always `2px solid`. Override the border shorthand directly on `.stepper-list li
   .stepper-list__indicator-counter::before` if you need a different width.
-

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

@@ -2,13 +2,15 @@
   <component
     :is="tag"
     ref="listEl"
+    role="list"
     class="stepper-list"
     :class="[elementClasses, { 'has-connectors': props.connected }]"
   >
     <li
-      v-for="index in itemCount"
+      v-for="index in itemTotal"
       :key="index"
       :class="[
+        'stepper-list-item',
         { 'has-indicator': $slots[`indicator-${index - 1}`] },
         `indicator-${props.indicatorAlignment}`,
         `indicator-${props.indicatorVariant}`,
@@ -19,7 +21,7 @@
       >
         <slot :name="`indicator-${index - 1}`"></slot>
       </div>
-      <div>
+      <div class="stepper-list-content">
         <slot :name="`item-${index - 1}`"></slot>
       </div>
     </li>
@@ -53,6 +55,8 @@ watch(
   () => resetElementClasses(props.styleClassPassthrough)
 );
 
+const itemTotal = computed(() => Math.max(0, Math.floor(Number(props.itemCount)) || 0));
+
 const listEl = ref<HTMLElement | null>(null);
 let resizeObserver: ResizeObserver | null = null;
 
@@ -76,27 +80,50 @@ function updateConnectors() {
     const indicatorRect = indicator.getBoundingClientRect();
     const nextIndicatorRect = nextIndicator.getBoundingClientRect();
 
-    li.style.setProperty("--_connector-top", `${indicatorRect.bottom - liRect.top}px`);
+    li.style.setProperty("--_connector-left", `${indicatorRect.left - liRect.left + indicatorRect.width / 2}px`);
+    li.style.setProperty("--_connector-top",`${indicatorRect.bottom - liRect.top}px`);
     li.style.setProperty("--_connector-height", `${Math.max(0, nextIndicatorRect.top - indicatorRect.bottom)}px`);
   });
 }
 
+let mutationObserver: MutationObserver | null = null;
+
+// Items can resize or restyle without the list changing size (e.g. a card moving from one step to the next).
+function observeItems() {
+  if (!resizeObserver || !listEl.value) return;
+  resizeObserver.disconnect();
+  resizeObserver.observe(listEl.value);
+  listEl.value.querySelectorAll(":scope > li").forEach((li) => resizeObserver?.observe(li));
+}
+
 onMounted(() => {
   updateConnectors();
-  if (typeof ResizeObserver !== "undefined" && listEl.value) {
+  if (!listEl.value) return;
+  if (typeof ResizeObserver !== "undefined") {
     resizeObserver = new ResizeObserver(updateConnectors);
-    resizeObserver.observe(listEl.value);
+    observeItems();
+  }
+  if (typeof MutationObserver !== "undefined") {
+    mutationObserver = new MutationObserver(updateConnectors);
+    mutationObserver.observe(listEl.value, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["class"],
+    });
   }
 });
 
 onBeforeUnmount(() => {
   resizeObserver?.disconnect();
+  mutationObserver?.disconnect();
 });
 
 watch(
-  () => [props.itemCount, props.connected, props.indicatorAlignment],
+  () => [itemTotal.value, props.connected, props.indicatorAlignment],
   async () => {
     await nextTick();
+    observeItems();
     updateConnectors();
   }
 );
@@ -107,7 +134,6 @@ watch(
   .stepper-list {
     /* Layout */
     --_padding-block: var(--stepper-list-padding-block, 1.2rem);
-    --_gap: var(--stepper-list-gap, 2.2rem);
     --_counter-size: var(--stepper-list-counter-size, v-bind(indicatorSize));
 
     list-style: none;
@@ -116,8 +142,8 @@ watch(
 
     li {
       display: grid;
-      grid-template-columns: auto 1fr;
-      gap: var(--_gap);
+      grid-template-columns: auto minmax(0, 1fr);
+      gap: var(--stepper-list-gap, 2.2rem);
       counter-increment: stepper-list;
       padding-inline-start: 0rem;
       padding-block: var(--_padding-block);
@@ -163,13 +189,8 @@ watch(
         border-radius: var(--stepper-list-counter-square-border-radius, 0.25rem);
       }
 
-      &.has-indicator::before {
-        display: none;
-      }
-
-      .stepper-list__indicator-custom,
-      .stepper-list__indicator-counter {
-        anchor-name: --indicator-bubble;
+      .stepper-list-content {
+        overflow-wrap: anywhere;
       }
 
       .stepper-list__indicator-custom {
@@ -189,15 +210,17 @@ watch(
   .stepper-list.has-connectors li:not(:last-child)::after {
     content: "";
     position: absolute;
-    left: calc(var(--_counter-size) / 2);
+    left: var(--_connector-left, calc(var(--_counter-size) / 2));
     transform: translateX(-50%);
-    /* JS sets --_connector-top and --_connector-height from measured indicator positions.
-     The fallback values handle the indicator-top case before JS runs. */
+    /* JS sets --_connector-left, --_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(--_padding-block) + var(--_counter-size)));
     height: var(--_connector-height, auto);
     bottom: calc(-1 * var(--_padding-block));
     width: var(--stepper-list-connector-width, 0.2rem);
+    clip-path: inset(var(--stepper-list-connector-gap, 0) 0);
     background-color: var(--stepper-list-connector-color, currentColor);
+    background-image: var(--stepper-list-connector-image, none);
   }
 }
 </style>