srcdev-nuxt-components 9.6.4 → 9.6.5

package/.claude/skills/component-compliance-checklist.md

@@ -130,7 +130,10 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
       number of items
     - emoji (including at the start of anything that takes initials or first letters), HTML-like
       text (must render as text), right-to-left text
-    - out-of-range or odd numbers (0, negative, above the maximum, fractional, very large)
+    - out-of-range or odd numbers (0, negative, above the maximum, fractional, very large). A
+      count prop used as a `v-for` range (`itemCount`) needs flooring and clamping in a
+      `computed()`: Vue renders nothing for a fractional or negative range and only warns in dev
+      (`StepperList`, 2026-10-15)
     - broken image or link URLs
     Describe what to check in the story's docs description, and look at it at every
     `CanvasSwitcher` width. Fixes usually mean `overflow-wrap: anywhere`, `min-inline-size: 0` on
@@ -179,6 +182,8 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
 9. **Accessibility** — check for gaps beyond what already-passing tests would catch:
    - Interactive controls (buttons, toggles, custom form-like widgets) have an accessible name —
      visible text, `aria-label`, or `aria-labelledby`.
+   - A `<ul>`/`<ol>` styled with `list-style: none` gets `role="list"`, or Safari/VoiceOver stops
+     announcing it as a list (`StepperList`, 2026-10-15).
    - Keyboard behaviour matches what's actually implemented — no keydown case that only calls
      `event.preventDefault()` with a comment like "could add this later", and no screen-reader
      copy (visible or `sr-only`) that describes an interaction the component doesn't actually
@@ -253,6 +258,9 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
       the edits in private memory. Note that an inline-size container can't size itself from its
       content: say so in `CONSUMER-STYLING.md` (`ProfileSection`).
     - Grid tracks that hold text are `minmax(0, …)` so an unbroken string can't widen the grid.
+    - Layout measured in script (connector lines, indicators) re-measures when any measured item
+      resizes or changes class, not only when the container resizes (`measured-layout-observers.md`,
+      pitfall #28).
     - Action buttons are `InputButton` (`variant="inline"` when the wrapper styles them), not a raw
       `<button>` (`component-inline-button.md`, `component-inline-action-button.md`). The ledger
       doesn't check this, which is how `InputCopy` scored 5/5 with one (fixed 2026-10-15).

package/.claude/skills/components/progress-tracker.md

@@ -0,0 +1,140 @@
+# ProgressTracker Component
+
+## Overview
+
+`ProgressTracker` (`app/components/02.molecules/progress-tracker/`) is a presentational progress
+track for a multi-step flow: a header with "Step X of Y" and a progress bar, then the steps as a
+`StepperList`. Steps before the `v-model` index are done (filled indicator with a tick), the model's
+step is current (ringed number, content in a focus card) and later steps are upcoming (outlined
+number, muted text). The current step's `#step-{n}` slot is where a parent puts a form or actions,
+so it also works as an accordion-style n-step wizard. The parent owns all state; the component has
+no events and never changes the model. Styling tokens:
+`app/components/02.molecules/progress-tracker/CONSUMER-STYLING.md`.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: write camelCase props hyphenated in templates: `:style-class-passthrough`.
+
+| Prop (template form) | Type | Default | Notes |
+|---|---|---|---|
+| `v-model` | `number` | (required) | 0-based index of the current step. `steps.length` means every step is done. Floored, and clamped to `0`–`steps.length`. |
+| `:steps` | `ProgressTrackerStep[]` | (required) | `{ title: string; body?: string }`, exported from `~/types/components`. An empty array renders nothing. |
+| `heading-tag` | `"h2" \| "h3" \| "h4" \| "h5" \| "h6"` | `"h3"` | Tag for each step title. |
+| `step-label` | `string` | `"Step {current} of {total}"` | Header text and the bar's `aria-valuetext`; `{current}` is 1-based. |
+| `complete-label` | `string` | `"All steps complete"` | Header text once every step is done. |
+| `done-label` | `string` | `"Completed"` | Screen-reader text appended to each done title (", Completed"). |
+| `done-icon` | `string` | `"lucide:check"` | Iconify name for the tick. |
+| `:focus-on-change` | `boolean` | `true` | Move focus when the model changes (see Behaviour). |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root `div`. |
+
+## Slots
+
+| Slot | Props | Notes |
+|---|---|---|
+| `#step-{n}` | `{ step, index, headingId }` | Rendered **only while step `n` is current**, inside its focus card under the body. `headingId` is the step title's id, for `aria-labelledby` on a form. |
+
+---
+
+## Behaviour
+
+- One row per step, with its title and body; a step without a body has no body paragraph.
+- Steps before the model are done, the model's step is current, later steps are upcoming.
+- The current title has `aria-current="step"`; done titles carry `done-label` as screen-reader
+  text; indicators are `aria-hidden`. The list is an `ol`, so position ("2 of 5") is announced too.
+- The header shows `step-label` filled in, or `complete-label` when every step is done. It's a
+  polite live region, so a change is announced.
+- The bar is `role="progressbar"` with `aria-valuemin="0"`, `aria-valuemax` = step count,
+  `aria-valuenow` = done count and `aria-valuetext` = the header label.
+- Changing the model after mount moves focus to the new current title (`tabindex="-1"`), or to the
+  header label when complete, so keyboard and screen-reader users aren't dropped when a slot's
+  focused button unmounts. Never on first render. `:focus-on-change="false"` turns it off (e.g.
+  when the parent restores saved progress after mount).
+- Done steps are plain text: there is nothing clickable in the component itself.
+- The model is clamped: negative counts as 0, above `steps.length` counts as complete, fractions
+  are floored.
+- Survives worst-case data (unbroken strings, long copy, 20+ steps, empty steps) without breaking
+  the layout; the header wraps the bar below the label when space runs out.
+- Bar and state colour transitions are off under `prefers-reduced-motion: reduce`.
+
+---
+
+## Usage
+
+### Display only
+
+```vue
+<ProgressTracker v-model="currentStep" :steps="onboardingSteps" />
+```
+
+### Wizard (parent-owned forms)
+
+```vue
+<script setup lang="ts">
+import type { ProgressTrackerStep } from "~/types/components";
+
+const currentStep = ref(0);
+const form = reactive({ name: "", email: "" });
+
+const steps = computed<ProgressTrackerStep[]>(() => [
+  { title: "Your details", body: currentStep.value > 0 ? form.name : "Tell us who you are." },
+  { title: "Contact", body: currentStep.value > 1 ? form.email : "Where can we reach you?" },
+  { title: "Review and submit" },
+]);
+</script>
+
+<template>
+  <ProgressTracker v-model="currentStep" :steps="steps">
+    <template #step-0="{ headingId }">
+      <form :aria-labelledby="headingId" @submit.prevent="currentStep++">
+        <!-- fields, then a submit InputButton labelled Continue -->
+      </form>
+    </template>
+    <template #step-1="{ headingId }">
+      <form :aria-labelledby="headingId" @submit.prevent="currentStep++">
+        <!-- fields, a Back InputButton (@click="currentStep--") and Continue -->
+      </form>
+    </template>
+    <template #step-2="{ headingId }">
+      <form :aria-labelledby="headingId" @submit.prevent="currentStep = steps.length">
+        <!-- review, Back and Submit -->
+      </form>
+    </template>
+  </ProgressTracker>
+</template>
+```
+
+Validation, saving and what "complete" means are the parent's job. Pass a summary of each completed
+step back in as its `body` so done steps show what was entered.
+
+---
+
+## Composition
+
+- Built on `StepperList` (`tag="ol"`, `indicator-alignment="top"`), filling its `indicator-{n}` and
+  `item-{n}` slots. ProgressTracker sets StepperList's `--stepper-list-*` tokens on
+  `.progress-tracker-list` from its own, so an ancestor's `--stepper-list-*` values don't reach it.
+- Connector colour per state uses `.stepper-list-item:has(.progress-tracker-indicator.is-done)`,
+  the per-step state recipe from StepperList's `CONSUMER-STYLING.md`.
+- The focus card bleeds left by `--progress-tracker-card-padding-inline` so the current step's text
+  stays aligned with the other steps; the current indicator moves down by the card's block padding
+  to stay level with its title. Clearance between the current ring and the card is
+  `gap - card-padding-inline - ring-width` (4rem - 2rem - 0.6rem = 1.4rem by default). The first
+  defaults (3.2rem gap, 2.4rem padding) left 0.2rem and the ring touched the card, so change these
+  three together.
+
+---
+
+## Stories
+
+Default, All Complete, Interactive (Mark complete), Wizard (parent-owned forms), Translated
+Labels, White Card on a Panel, Stress Test. Title: `Molecules/ProgressTracker`.
+
+---
+
+## Notes
+
+- Out of scope: clickable or back-navigable steps, a built-in complete event or validation,
+  horizontal layout, auto-advance.
+- Auto-imported in Nuxt; import the `ProgressTrackerStep` type from `~/types/components`.

package/.claude/skills/components/stepper-list.md

@@ -20,6 +20,7 @@
 | … | … |
 
 **Rules:**
+
 - Slots are always **zero-indexed**: first item = `item-0`, last item = `item-{itemCount - 1}`.
 - `item-{n}` slots are required if you want content in each row.
 - `indicator-{n}` slots are **optional**. When omitted, a CSS counter bubble is rendered automatically. When provided, the custom content replaces the counter entirely — the CSS counter is hidden for that item only.
@@ -32,7 +33,7 @@
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `itemCount` | `number` | — | **Required.** Controls how many `<li>` elements are rendered and which slots exist. |
+| `itemCount` | `number` | — | **Required.** Controls how many `<li>` elements are rendered and which slots exist. Floored to a whole number; negative or `NaN` renders no rows. |
 | `tag` | `"ul" \| "ol"` | `"ul"` | Use `"ol"` for sequentially meaningful content (recipes, instructions). |
 | `indicatorAlignment` | `"top" \| "center"` | `"top"` | Vertical alignment of the indicator relative to each item's content. `"center"` suits single-line items; `"top"` suits multi-line content. |
 | `indicatorVariant` | `"disc" \| "circle" \| "square"` | `"disc"` | Visual style of the auto-generated counter bubble. |
@@ -160,12 +161,14 @@ for full examples (global theming, page-scoped, and per-instance overrides).
 | `--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 its indicators |
 
 ### Colours
 
 | Token | Default | Controls |
 |---|---|---|
 | `--stepper-list-connector-color` | `currentColor` | Connector line colour |
+| `--stepper-list-connector-image` | `none` | Image over the connector colour, e.g. a `repeating-linear-gradient()` for a dashed line |
 | `--stepper-list-icon-color` | `currentColor` | Icon colour for custom `indicator-icon` elements |
 
 ### Per-variant tokens
@@ -190,10 +193,10 @@ for full examples (global theming, page-scoped, and per-instance overrides).
 ## Connector behaviour
 
 - Connectors are drawn as `::after` pseudo-elements on each `<li>` except the last.
-- JS (`ResizeObserver`) measures the bottom of each indicator and the top of the next to set `--_connector-top` and `--_connector-height` precisely, keeping the line flush between bubbles regardless of content height.
+- JS (`ResizeObserver`) measures the bottom of each indicator and the top of the next to set `--_connector-top` and `--_connector-height` precisely, keeping the line flush between bubbles regardless of content height. It also sets `--_connector-left` to the indicator's measured centre, so the line stays centred under a custom indicator wider than the counter bubble (before JS runs it falls back to half of `--_counter-size`).
 - Before JS runs (SSR / initial paint), CSS fallback values approximate the correct position for `indicatorAlignment="top"`.
 - If `connected="false"`, no connectors are rendered and JS measurement is skipped.
-- Connectors recalculate automatically when `itemCount`, `connected`, or `indicatorAlignment` props change.
+- Connectors recalculate when `itemCount`, `connected` or `indicatorAlignment` change, when the list or any `<li>` resizes (a `ResizeObserver` on the list and every item), and when a `class` attribute or child nodes change anywhere inside the list (a `MutationObserver`). The last two cover a consumer restyling a step without the list changing size, e.g. ProgressTracker moving its focus card from one step to the next. Inline `style` changes are not watched, since the connector values themselves are written there.
 
 ---
 
@@ -222,6 +225,7 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
     /* --stepper-list-counter-font-size: 1.4rem; */
     /* --stepper-list-counter-font-weight: 600; */
     /* --stepper-list-connector-width: 0.2rem; */
+    /* --stepper-list-connector-gap: 0.6rem; */
 
     /* Counter bubble — disc variant */
     /* --stepper-list-counter-disc-background: var(--brand-primary); */
@@ -246,6 +250,7 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
     /* Connector line */
     /* --stepper-list-connector-color: var(--brand-primary); */
+    /* --stepper-list-connector-image: repeating-linear-gradient(to bottom, currentColor 0 0.4rem, transparent 0.4rem 0.8rem); */
   }
 }
 </style>
@@ -258,4 +263,6 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 - Always keep `itemCount` in sync with the number of `#item-*` slots you provide — mismatches will render empty `<li>` rows.
 - Slot names are **zero-indexed** — `#item-0` not `#item-1`.
 - The `indicator-icon` class is defined inside the component CSS and sizes the SVG to `var(--_counter-size)` (driven by `indicatorSize` or `--stepper-list-counter-size`). Always add it to custom SVGs.
+- Markup: root `<ul>`/`<ol>` with `role="list"` (Safari drops list semantics under `list-style: none`), each row `li.stepper-list-item`, content in `.stepper-list-content`. The content column is `minmax(0, 1fr)` with `overflow-wrap: anywhere`, so long unbroken strings wrap.
+- Used by `ServiceDetail` for its process steps (circle variant, `tag="ol"`, item count from CMS data) and by `ProgressTracker`, which fills the indicator and item slots with done/current/upcoming states (skill `progress-tracker.md`).
 - Auto-imported in Nuxt — no manual import needed.

package/.claude/skills/components/tabbed-content.md

@@ -145,6 +145,10 @@ and the trailing edge catches up: the same stretch effect as before, symmetric b
 settle timer. CSS retargets each edge from its current position, so a quick second move can't
 pull an edge backwards. Hover and active have separate duration/delay variables.
 
+`--tabs-hover-indicator-stretch` (default `1`) multiplies the hover pair's two edge delays in CSS,
+so `0` turns the hover stretch into a plain slide (both edges move together over the same
+duration). The active indicator and underline always stretch.
+
 This replaced a `translate` + `scale` model (a bar-wide box translated to the tab's left and
 scaled to its width, plus a timeout to settle after a stretch, and one shared
 `--_transition-duration`). Rightward moves animated both properties together in the settle step,

package/.claude/skills/index.md

@@ -99,7 +99,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── skip-links.md                — SkipLinks: focus-revealed accessibility skip-nav, links (SkipLink[]) data-driven, homeLink slot, CSS token API
     ├── tabbed-content.md            — TabbedContent (was TabsCore): tablist + panels from indexed slots (itemCount), arrow-key nav, moving hover/active/underline indicators, CSS token API
     ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
-    ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
+    ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, measured connectors (gap, dashed image tokens), per-step state recipe
+    ├── progress-tracker.md     — ProgressTracker: steps (ProgressTrackerStep[]) + v-model current index over StepperList, header label + progressbar, current-step #step-{n} slot for wizard forms, focus on change, CSS token API
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, contentIsOnTop overlay mode, slots (summary/icon/content), ARIA wiring, CSS token API
     ├── content-docs.md         — ContentDocs docs-page shell: prop-driven docsNav/docsPageNav (not slots), DocsNavItem icons, container-width breakpoint behaviour, shared/per-side CSS token API
     ├── glass-panel.md          — GlassPanel: frosted-glass container, light-only token defaults in-component (light-dark() block removed from _default.css, no built-in dark glass), highlight behind content, section/article labelled via headingId slot prop, CSS token API

package/.claude/skills/storybook-add-story.md

@@ -242,6 +242,12 @@ export default meta;
 type Story = StoryObj<typeof ComponentName>; // ← still strict for individual stories
 ```
 
+When the story assigns a model arg itself (a button doing `args.modelValue = index + 1`, a wizard's
+Back/Continue), a type built from `InstanceType<typeof C>["$props"]` fails `vue-tsc` with "Cannot
+assign to 'modelValue' because it is a read-only property". Re-declare it writable:
+`Omit<InstanceType<typeof C>["$props"], "modelValue"> & { modelValue: number; ... }`
+(`ProgressTracker.stories.ts`).
+
 Strip extra args before `v-bind` using a `useStorySetup` helper in `setup()`:
 
 ```ts

package/.vscode/srcdev-component-progress-tracker.code-snippets

@@ -0,0 +1,45 @@
+{
+  "SRCDEV ProgressTracker": {
+    "description": "ProgressTracker showing progress through steps (v-model is the 0-based current step)",
+    "scope": "vue,html",
+    "body": [
+      "<ProgressTracker v-model=\"${1:currentStep}\" :steps=\"${2:steps}\" />"
+    ]
+  },
+  "SRCDEV ProgressTracker Wizard": {
+    "description": "ProgressTracker as a wizard: each step's form lives in its #step-{n} slot and drives the model",
+    "scope": "vue,html",
+    "body": [
+      "<ProgressTracker v-model=\"${1:currentStep}\" :steps=\"${2:steps}\">",
+      "  <template #step-0=\"{ headingId }\">",
+      "    <form :aria-labelledby=\"headingId\" @submit.prevent=\"$1++\">",
+      "      $3",
+      "      <InputButton type=\"submit\" button-text=\"Continue\" />",
+      "    </form>",
+      "  </template>",
+      "  <template #step-1=\"{ headingId }\">",
+      "    <form :aria-labelledby=\"headingId\" @submit.prevent=\"$1 = $2.length\">",
+      "      $4",
+      "      <InputButton button-text=\"Back\" variant=\"secondary\" @click=\"$1--\" />",
+      "      <InputButton type=\"submit\" button-text=\"Submit\" />",
+      "    </form>",
+      "  </template>",
+      "</ProgressTracker>"
+    ]
+  },
+  "SRCDEV ProgressTracker CSS Override": {
+    "description": "CSS override scaffold for ProgressTracker tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --progress-tracker-accent: $2;",
+      "  --progress-tracker-track: $3;",
+      "  --progress-tracker-card-surface: $4;",
+      "  --progress-tracker-card-shadow: $5;",
+      "  --progress-tracker-label-font-family: $6;",
+      "  --progress-tracker-title-line-clamp: $7;",
+      "  --progress-tracker-body-line-clamp: $8;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-stepper-list.code-snippets

@@ -31,8 +31,9 @@
       ".$1my-page {",
       "  --stepper-list-gap: $2;",
       "  --stepper-list-connector-color: $3;",
-      "  --stepper-list-counter-disc-background: $4;",
-      "  --stepper-list-counter-disc-text: $5;",
+      "  --stepper-list-connector-gap: $4;",
+      "  --stepper-list-counter-disc-background: $5;",
+      "  --stepper-list-counter-disc-text: $6;",
       "}"
     ]
   }

package/.vscode/srcdev-component-tabbed-content.code-snippets

@@ -58,6 +58,7 @@
       "    --tabs-underline-indicator-height: ;",
       "    --tabs-hover-underline-indicator-colour: ;",
       "    --tabs-hover-underline-indicator-height: ;",
+      "    --tabs-hover-indicator-stretch: ;",
       "    --tabs-list-item-opacity: ;",
       "    --tabs-list-item-colour: ;",
       "    --tabs-list-item-colour-selected: ;",

package/app/components/01.atoms/tabbed-content/CONSUMER-STYLING.md

@@ -58,6 +58,7 @@ box.
 | `--tabs-underline-indicator-height` | `0.4rem` | Thickness of the underline (`axis="x"`), also its width on `axis="y"` |
 | `--tabs-hover-underline-indicator-colour` | `--tabs-underline-indicator-colour` | Colour of the thin underline/sideline that follows the hovered tab (`trackHover` and `trackIndicator`) |
 | `--tabs-hover-underline-indicator-height` | `0.1rem` | Its thickness; `0` hides it. Sits under the active underline where they overlap |
+| `--tabs-hover-indicator-stretch` | `1` | Stretch of the hover highlight and hover underline as they move: `1` stretches (leading edge first, trailing edge catches up), `0` slides both edges together. Values in between shorten the stretch |
 
 ### More menu (`overflowMode="menu"`, `axis="x"`)
 
@@ -98,7 +99,10 @@ measured layout, per indicator (`active` / `hovered`): `--_{kind}-start` / `--_{
 insets from the bar's start and end along the axis), `--_{kind}-duration`,
 `--_{kind}-start-delay` / `--_{kind}-end-delay`; each indicator reads them through its own
 `--_start` / `--_end` / `--_duration` / `--_start-delay` / `--_end-delay`. Not public API; use the
-`transitionDuration` prop for indicator speed (one edge moves for that long, then the other).
+`transitionDuration` prop for indicator speed (one edge moves for that long, then the other), and
+`--tabs-hover-indicator-stretch` to turn the hover stretch off. The More menu also uses
+`--_anchor-name` (a per-instance anchor name) and the `--_anchor-*` position values
+`useAnchoredPopover` writes for browsers without CSS anchor positioning.
 
 > **Changed 2026-10-08**: indicators were a bar-wide box moved with `translate` and sized with
 > `scale` (`--_x-*`, `--_width-*`, `--_y-*`, a shared `--_transition-duration`), with a timer

package/app/components/01.atoms/tabbed-content/TabbedContent.vue

@@ -354,8 +354,8 @@ watch(
         --_start: var(--_hovered-start, 0px);
         --_end: var(--_hovered-end, 100%);
         --_duration: var(--_hovered-duration, 0ms);
-        --_start-delay: var(--_hovered-start-delay, 0ms);
-        --_end-delay: var(--_hovered-end-delay, 0ms);
+        --_start-delay: calc(var(--_hovered-start-delay, 0ms) * var(--tabs-hover-indicator-stretch, 1));
+        --_end-delay: calc(var(--_hovered-end-delay, 0ms) * var(--tabs-hover-indicator-stretch, 1));
       }
 
       .tabbed-content-indicator-active,

package/app/components/01.atoms/tabbed-content/stories/TabbedContent.stories.ts

@@ -219,6 +219,32 @@ export const IndicatorColours: Story = {
   }),
 };
 
+export const HoverWithoutStretch: Story = {
+  name: "Hover Without Stretch",
+  args: { itemCount: 5 },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "--tabs-hover-indicator-stretch: 0 makes the hover highlight slide between tabs instead of stretching across and catching up. Clicking a tab still stretches the active indicator.",
+      },
+    },
+  },
+  render: (args) => ({
+    components: { TabbedContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="--tabs-hover-indicator-stretch: 0">
+        <TabbedContent v-bind="args">
+          ${tabSlots}
+        </TabbedContent>
+      </div>
+    `,
+  }),
+};
+
 // ─── Stress test ──────────────────────────────────────────────────────────────
 
 const stressTabs = [

package/app/components/02.molecules/contact-section/tests/__snapshots__/ContactSection.spec.ts.snap

@@ -4,22 +4,22 @@ exports[`ContactSection > renders correct HTML structure with default props 1`]
 "<div class="contact-section">
   <div class="contact-section-inner">
     <div class="contact-section-info">
-      <ul class="stepper-list">
-        <li class="has-indicator indicator-top indicator-disc">
+      <ul role="list" class="stepper-list">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 1</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 2</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 3</p>
           </div>
         </li>
@@ -34,22 +34,22 @@ exports[`ContactSection > renders correct HTML structure with form slot 1`] = `
 "<div class="contact-section">
   <div class="contact-section-inner">
     <div class="contact-section-info">
-      <ul class="stepper-list">
-        <li class="has-indicator indicator-top indicator-disc">
+      <ul role="list" class="stepper-list">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 1</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 2</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 3</p>
           </div>
         </li>
@@ -66,22 +66,22 @@ exports[`ContactSection > renders correct HTML structure with styleClassPassthro
 "<div class="contact-section custom-class another-class">
   <div class="contact-section-inner">
     <div class="contact-section-info">
-      <ul class="stepper-list">
-        <li class="has-indicator indicator-top indicator-disc">
+      <ul role="list" class="stepper-list">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 1</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 2</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 3</p>
           </div>
         </li>
@@ -96,18 +96,18 @@ exports[`ContactSection > renders correctly with all props and slots combined 1`
 "<section class="contact-section combined-class">
   <div class="contact-section-inner">
     <div class="contact-section-info">
-      <ul class="stepper-list">
-        <li class="has-indicator indicator-top indicator-disc">
+      <ul role="list" class="stepper-list">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"><span class="icon">✓</span></div>
-          <div><span>Step one</span></div>
+          <div class="stepper-list-content"><span>Step one</span></div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div><span>Step two</span></div>
+          <div class="stepper-list-content"><span>Step two</span></div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div><span>Step three</span></div>
+          <div class="stepper-list-content"><span>Step three</span></div>
         </li>
       </ul>
     </div>