srcdev-nuxt-components 9.1.50 → 9.1.52

package/app/components/02.molecules/action-menu/tests/__snapshots__/ActionMenuItemCore.spec.ts.snap

@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ActionMenuItemCore > Snapshots > as external link 1`] = `
+"<a href="https://example.com" class="action-menu-item-core" role="menuitem">
+  <!--v-if--><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span>
+</a>"
+`;
+
+exports[`ActionMenuItemCore > Snapshots > as internal link 1`] = `
+"<a href="/about" class="action-menu-item-core" role="menuitem">
+  <!--v-if--><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span>
+</a>"
+`;
+
+exports[`ActionMenuItemCore > Snapshots > default button (no href) 1`] = `
+"<button type="button" class="action-menu-item-core" role="menuitem">
+  <!--v-if--><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span>
+</button>"
+`;
+
+exports[`ActionMenuItemCore > Snapshots > with icon slot 1`] = `"<button type="button" class="action-menu-item-core" role="menuitem"><span class="action-menu-item-icon" aria-hidden="true"><span data-testid="test-icon">⚡</span></span><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span></button>"`;
+
+exports[`ActionMenuItemCore > Snapshots > with styleClassPassthrough 1`] = `
+"<button type="button" class="action-menu-item-core custom-class another-class" role="menuitem">
+  <!--v-if--><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span>
+</button>"
+`;

package/app/components/02.molecules/display-chip/tests/DisplayChip.spec.ts

@@ -1,8 +1,12 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import DisplayChip from "../DisplayChip.vue";
 
 describe("DisplayChip", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   // ─── Mount ───────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {

package/app/components/02.molecules/navigation/tab-navigation/TabNavigation.vue

@@ -139,7 +139,8 @@ const props = withDefaults(defineProps<Props>(), {
   anchorScrollOffset: undefined,
 });
 
-const { isCollapsed, isLoaded, isMenuOpen, isActiveItem, toggleMenu, closeMenu } = useNavCollapse("tab-nav-loaded");
+const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, isActiveItem, toggleMenu, closeMenu } =
+  useNavCollapse("tab-nav-loaded");
 
 const { handleNavClick, activeHash } = useAnchorScroll({ offset: props.anchorScrollOffset });
 

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

@@ -0,0 +1,138 @@
+# StepperList — Consumer Styling Guide
+
+## Public token API
+
+All `--stepper-list-*` tokens are the stable override surface. Set them globally in a theme
+file, scoped to a page wrapper, or per-instance via `styleClassPassthrough`.
+
+### Layout & sizing
+
+| Token | Default | Controls |
+|---|---|---|
+| `--stepper-list-padding-block` | `1.2rem` | Vertical padding for each list item |
+| `--stepper-list-gap` | `2.2rem` | Horizontal gap between indicator and content |
+| `--stepper-list-counter-size` | prop `indicatorSize` (`3rem`) | Width and height of the counter bubble or custom icon |
+| `--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 |
+
+### Colours
+
+| Token | Default | Controls |
+|---|---|---|
+| `--stepper-list-connector-color` | `currentColor` | Connector line colour |
+| `--stepper-list-icon-color` | `currentColor` | Icon colour for custom `indicator-icon` elements |
+
+### Circle indicator
+
+| Token | Default | Controls |
+|---|---|---|
+| `--stepper-list-counter-circle-background` | `transparent` | Bubble fill |
+| `--stepper-list-counter-circle-text` | `currentColor` | Counter number colour |
+| `--stepper-list-counter-circle-border` | `currentColor` | Bubble border colour |
+| `--stepper-list-counter-circle-border-radius` | `100vw` | Bubble corner rounding |
+
+### Disc indicator
+
+| Token | Default | Controls |
+|---|---|---|
+| `--stepper-list-counter-disc-background` | `transparent` | Bubble fill |
+| `--stepper-list-counter-disc-text` | `currentColor` | Counter number colour |
+| `--stepper-list-counter-disc-border` | `transparent` | Bubble border colour |
+| `--stepper-list-counter-disc-border-radius` | `100vw` | Bubble corner rounding |
+
+### Square indicator
+
+| Token | Default | Controls |
+|---|---|---|
+| `--stepper-list-counter-square-background` | `transparent` | Bubble fill |
+| `--stepper-list-counter-square-text` | `currentColor` | Counter number colour |
+| `--stepper-list-counter-square-border` | `transparent` | Bubble border colour |
+| `--stepper-list-counter-square-border-radius` | `0.25rem` | Bubble corner rounding |
+
+---
+
+## Global theming — recommended approach
+
+Create `assets/styles/setup/07.components/stepper-list.css` in the consuming app and set
+tokens on `:root`. This applies to every `StepperList` across the site.
+
+```css
+/* assets/styles/setup/07.components/stepper-list.css */
+:root {
+  --stepper-list-counter-disc-background: var(--brand-primary);
+  --stepper-list-counter-disc-text: var(--brand-primary-contrast);
+  --stepper-list-counter-disc-border: transparent;
+
+  --stepper-list-counter-circle-text: var(--brand-primary);
+  --stepper-list-counter-circle-border: var(--brand-primary);
+
+  --stepper-list-counter-square-background: var(--brand-primary);
+  --stepper-list-counter-square-text: var(--brand-primary-contrast);
+  --stepper-list-counter-square-border: transparent;
+
+  --stepper-list-connector-color: var(--brand-border);
+  --stepper-list-icon-color: var(--brand-primary);
+}
+```
+
+---
+
+## Page-scoped overrides
+
+Override tokens for a specific section by scoping them under the page or layout wrapper.
+No `:deep()` is required (component styles are unscoped).
+
+```css
+/* In the consuming page's unscoped <style> block */
+.how-it-works {
+  .stepper-list {
+    --stepper-list-padding-block: 2rem;
+    --stepper-list-gap: 3.2rem;
+    --stepper-list-counter-size: 4rem;
+    --stepper-list-counter-font-size: 1.6rem;
+    --stepper-list-connector-color: var(--brand-border-subtle);
+  }
+}
+```
+
+---
+
+## Per-instance overrides via styleClassPassthrough
+
+Use sparingly — prefer global or page-scoped CSS. When a single instance needs a distinct
+visual style, pass a modifier class:
+
+```vue
+<StepperList
+  :style-class-passthrough="['completed-steps']"
+  indicator-variant="circle"
+  :item-count="3"
+>
+  ...
+</StepperList>
+```
+
+```css
+.stepper-list.completed-steps {
+  --stepper-list-counter-circle-background: var(--color-success);
+  --stepper-list-counter-circle-text: white;
+  --stepper-list-counter-circle-border: transparent;
+  --stepper-list-connector-color: var(--color-success);
+  --stepper-list-icon-color: var(--color-success);
+}
+```
+
+---
+
+## Notes
+
+- `--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.
+- `--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

@@ -100,9 +100,35 @@ watch(
 <style lang="css">
 @layer components {
   .stepper-list {
-    --_list-padding-block: 1.2rem;
-    --_counter-size: v-bind(indicatorSize);
-    --_stepper-list-connector-width: 0.2rem;
+    /* 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));
+    --_counter-font-size: var(--stepper-list-counter-font-size, 1.4rem);
+    --_counter-font-weight: var(--stepper-list-counter-font-weight, 600);
+    --_connector-width: var(--stepper-list-connector-width, 0.2rem);
+
+    /* Colours */
+    --_connector-color: var(--stepper-list-connector-color, currentColor);
+    --_icon-color: var(--stepper-list-icon-color, currentColor);
+
+    /* Circle indicator */
+    --_counter-circle-background: var(--stepper-list-counter-circle-background, transparent);
+    --_counter-circle-text: var(--stepper-list-counter-circle-text, currentColor);
+    --_counter-circle-border-color: var(--stepper-list-counter-circle-border, currentColor);
+    --_counter-circle-border-radius: var(--stepper-list-counter-circle-border-radius, 100vw);
+
+    /* Disc indicator */
+    --_counter-disc-background: var(--stepper-list-counter-disc-background, transparent);
+    --_counter-disc-text: var(--stepper-list-counter-disc-text, currentColor);
+    --_counter-disc-border-color: var(--stepper-list-counter-disc-border, transparent);
+    --_counter-disc-border-radius: var(--stepper-list-counter-disc-border-radius, 100vw);
+
+    /* Square indicator */
+    --_counter-square-background: var(--stepper-list-counter-square-background, transparent);
+    --_counter-square-text: var(--stepper-list-counter-square-text, currentColor);
+    --_counter-square-border-color: var(--stepper-list-counter-square-border, transparent);
+    --_counter-square-border-radius: var(--stepper-list-counter-square-border-radius, 0.25rem);
 
     list-style: none;
     counter-reset: stepper-list;
@@ -111,10 +137,10 @@ watch(
     li {
       display: grid;
       grid-template-columns: auto 1fr;
-      gap: 2.2rem;
+      gap: var(--_gap);
       counter-increment: stepper-list;
       padding-inline-start: 0rem;
-      padding-block: var(--_list-padding-block);
+      padding-block: var(--_padding-block);
       position: relative;
 
       &.indicator-top {
@@ -132,29 +158,29 @@ watch(
         place-content: center;
         width: var(--_counter-size);
         height: var(--_counter-size);
-        font-size: 1.4rem;
-        font-weight: 600;
+        font-size: var(--_counter-font-size);
+        font-weight: var(--_counter-font-weight);
       }
 
       &.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;
+        background-color: var(--_counter-circle-background);
+        color: var(--_counter-circle-text);
+        border: 2px solid var(--_counter-circle-border-color);
+        border-radius: var(--_counter-circle-border-radius);
       }
 
       &.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;
+        background-color: var(--_counter-disc-background);
+        color: var(--_counter-disc-text);
+        border: 2px solid var(--_counter-disc-border-color);
+        border-radius: var(--_counter-disc-border-radius);
       }
 
       &.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;
+        background-color: var(--_counter-square-background);
+        color: var(--_counter-square-text);
+        border: 2px solid var(--_counter-square-border-color);
+        border-radius: var(--_counter-square-border-radius);
       }
 
       &.has-indicator::before {
@@ -172,7 +198,7 @@ watch(
         justify-content: center;
 
         .indicator-icon {
-          color: var(--stepper-list-icon);
+          color: var(--_icon-color);
           width: var(--_counter-size) !important;
           height: var(--_counter-size) !important;
         }
@@ -187,11 +213,11 @@ watch(
     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. */
-    top: var(--_connector-top, calc(var(--_list-padding-block) + var(--_counter-size)));
+    top: var(--_connector-top, calc(var(--_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);
+    bottom: calc(-1 * var(--_padding-block));
+    width: var(--_connector-width);
+    background-color: var(--_connector-color);
   }
 }
 </style>

package/app/components/03.organisms/image-galleries/slider-gallery/tests/SliderGallery.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { nextTick } from "vue";
 import SliderGallery from "../SliderGallery.vue";
@@ -67,6 +67,10 @@ describe("SliderGallery", () => {
     );
   });
 
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   // ─── Mount ───────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {

package/app/components/05.forms/input-button/InputButtonCore.vue

@@ -27,7 +27,6 @@
 
 <script setup lang="ts">
 import type { InputTypesButton, FormUiTheme, InputButtonVariant } from "~/types/forms/types.forms";
-import { NuxtLink } from "#components";
 interface Props {
   type?: InputTypesButton;
   href?: string;
@@ -55,6 +54,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const slots = useSlots();
+const NuxtLink = resolveComponent("NuxtLink");
 
 // If href is undefined tag is button, else it's a link
 const isLink = computed(() => Boolean(props.href));

package/app/components/carousels/tests/CarouselFlip.spec.ts

@@ -119,6 +119,7 @@ describe("CarouselFlip", () => {
 
   afterEach(() => {
     wrapper?.unmount();
+    vi.restoreAllMocks();
   });
 
   describe("Component Rendering", () => {