srcdev-nuxt-components 9.6.3 → 9.6.5

package/app/components/02.molecules/progress-tracker/tests/__snapshots__/ProgressTracker.spec.ts.snap

@@ -0,0 +1,46 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ProgressTracker > renders correct HTML structure 1`] = `
+"<div class="progress-tracker">
+  <div class="progress-tracker-header">
+    <p class="progress-tracker-label" aria-live="polite" tabindex="-1">Step 2 of 3</p>
+    <div class="progress-tracker-bar" role="progressbar" aria-valuemin="0" aria-valuemax="3" aria-valuenow="1" aria-valuetext="Step 2 of 3" style="--_progress-tracker-progress: 0.3333333333333333;"><span class="progress-tracker-bar-fill"></span></div>
+  </div>
+  <ol role="list" class="stepper-list has-connectors progress-tracker-list">
+    <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="progress-tracker-indicator is-done" aria-hidden="true"><span class="iconify i-lucide:check progress-tracker-indicator-icon" aria-hidden="true"></span></span></div>
+      <div class="stepper-list-content">
+        <div class="progress-tracker-step is-done">
+          <h3 id="v-0-0-step-0" class="progress-tracker-title" tabindex="-1">Create your account<span class="sr-only">, Completed</span></h3>
+          <p class="progress-tracker-body">Enter your email and choose a password.</p>
+          <!--v-if-->
+        </div>
+      </div>
+    </li>
+    <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="progress-tracker-indicator is-current" aria-hidden="true">2</span></div>
+      <div class="stepper-list-content">
+        <div class="progress-tracker-step is-current">
+          <h3 id="v-0-0-step-1" class="progress-tracker-title" tabindex="-1" aria-current="step">Verify your email
+            <!--v-if-->
+          </h3>
+          <p class="progress-tracker-body">Click the link we sent to your inbox.</p>
+          <!--v-if-->
+        </div>
+      </div>
+    </li>
+    <li class="stepper-list-item has-indicator indicator-top indicator-disc">
+      <div class="stepper-list__indicator-custom"><span class="progress-tracker-indicator is-upcoming" aria-hidden="true">3</span></div>
+      <div class="stepper-list-content">
+        <div class="progress-tracker-step is-upcoming">
+          <h3 id="v-0-0-step-2" class="progress-tracker-title" tabindex="-1">Choose a plan
+            <!--v-if-->
+          </h3>
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+      </div>
+    </li>
+  </ol>
+</div>"
+`;

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>