@dashforge/tw 1.0.0 → 1.1.1

package/src/components/Box/box.variants.ts

@@ -1,230 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * `boxVariants` — the surface primitive for @dashforge/tw.
- *
- * Architectural choice (planned with the user — F9 deep dive):
- *
- *   Box replaces FOUR overlapping concepts from MUI in one component:
- *     • Box        (typed div)
- *     • Paper      (surface with elevation)
- *     • Card       (Paper specialisation)
- *     • Surface    (Joy UI's outlined / soft / solid / plain variants)
- *
- *   The reason for the consolidation: in MUI you have to compose two or
- *   three of these to express even basic intent ("an outlined card with
- *   warning tone"). Here, one `<Box variant="outlined" color="warning">`
- *   says exactly that.
- *
- * Variant taxonomy (5 axes, intentionally non-overlapping with Stack/Grid):
- *
- *   • plain     — bare div + padding + radius. The escape hatch.
- *   • outlined  — 1px border + subtle bg tint. The "card lite".
- *   • elevated  — bg surface + shadow scale (0-5). The "floating panel".
- *   • soft      — semi-transparent intent bg + intent text. The "callout".
- *   • solid     — solid intent bg + contrasting text. The "CTA banner".
- *
- *   `color` applies to outlined/soft/solid (each gets the 7 intent
- *   variants). `elevated` is color-agnostic (always neutral surface +
- *   shadow scale). `plain` is everything-agnostic.
- *
- * Spacing axes (p/px/py/m/mx/my): mapped explicitly to the 11 token
- * steps from @dashforge/tw-tokens (0, 0.5, 1, 2, 3, 4, 6, 8, 12, 16, 24).
- * Tailwind JIT requires literal class strings — building them dynamically
- * with template literals would purge them. The verbosity below is the
- * cost of keeping the bundle CSS-pure and rebuild-free.
- *
- * What this does NOT do (deliberate, see component docs):
- *   • No display / flex / grid props      → use Stack or Grid
- *   • No position / overflow / z-index    → use `sx`
- *   • No animation / transition           → use `sx`
- *
- * The "Box is not flex" rule is the spine of the layout layer. Without
- * it, every `<div>` in an app gravitates back to Box and the surface
- * vs layout distinction collapses — exactly the failure mode this
- * primitive exists to prevent.
- */
-export const boxVariants = tv({
-  base: 'block',
-
-  variants: {
-    /*
-     * Surface variant. Compound with `color` for outlined / soft / solid;
-     * standalone for plain / elevated.
-     */
-    variant: {
-      plain:    '',
-      outlined: 'border',
-      // `bg-white` is hardcoded (does NOT auto-invert via CSS vars),
-      // so the `dark:` variant is required. Target `dark:bg-neutral-100`
-      // resolves to `#171717` via the inversion → one elevation tier
-      // above the page surface (`bg-neutral-50` = `#0a0a0a`) in dark
-      // mode. `dark:bg-neutral-900` was wrong (resolved to near-white
-      // in dark mode — overpowering elevation).
-      elevated: 'bg-white dark:bg-neutral-100',
-      soft:     '',
-      solid:    '',
-    },
-
-    /*
-     * Intent color. Only meaningful when variant is outlined / soft /
-     * solid (resolved via compoundVariants below). For plain / elevated
-     * this axis is ignored at the visual level — but kept in the type
-     * so the prop is always available without conditional typing.
-     */
-    color: {
-      primary:   '',
-      secondary: '',
-      success:   '',
-      warning:   '',
-      danger:    '',
-      info:      '',
-      neutral:   '',
-    },
-
-    /*
-     * Shadow scale — relevant for `variant='elevated'`. We keep elevation
-     * as a separate axis (not folded into `variant`) so consumers can
-     * dial it up/down without changing the variant. Default `0` = no
-     * shadow (consistent with MUI's elevation=0).
-     */
-    elevation: {
-      0: 'shadow-none',
-      1: 'shadow-sm',
-      2: 'shadow',
-      3: 'shadow-md',
-      4: 'shadow-lg',
-      5: 'shadow-xl',
-    },
-
-    rounded: {
-      none: 'rounded-none',
-      sm:   'rounded-sm',
-      md:   'rounded-md',
-      lg:   'rounded-lg',
-      xl:   'rounded-xl',
-      '2xl':'rounded-2xl',
-      full: 'rounded-full',
-    },
-
-    /*
-     * Spacing — six axes (p/px/py/m/mx/my), 11 token steps each.
-     * Literals enumerated explicitly so Tailwind's JIT scanner finds
-     * every class. Token steps mirror @dashforge/tw-tokens spacing scale.
-     */
-    p: {
-      0:    'p-0',    '0.5': 'p-0.5', 1:  'p-1',  2:  'p-2',  3:  'p-3',
-      4:    'p-4',    6:     'p-6',   8:  'p-8',  12: 'p-12', 16: 'p-16',
-      24:   'p-24',
-    },
-    px: {
-      0:    'px-0',   '0.5': 'px-0.5', 1:  'px-1',  2:  'px-2',  3:  'px-3',
-      4:    'px-4',   6:     'px-6',   8:  'px-8',  12: 'px-12', 16: 'px-16',
-      24:   'px-24',
-    },
-    py: {
-      0:    'py-0',   '0.5': 'py-0.5', 1:  'py-1',  2:  'py-2',  3:  'py-3',
-      4:    'py-4',   6:     'py-6',   8:  'py-8',  12: 'py-12', 16: 'py-16',
-      24:   'py-24',
-    },
-    m: {
-      0:    'm-0',    '0.5': 'm-0.5', 1:  'm-1',  2:  'm-2',  3:  'm-3',
-      4:    'm-4',    6:     'm-6',   8:  'm-8',  12: 'm-12', 16: 'm-16',
-      24:   'm-24',
-    },
-    mx: {
-      0:    'mx-0',   '0.5': 'mx-0.5', 1:  'mx-1',  2:  'mx-2',  3:  'mx-3',
-      4:    'mx-4',   6:     'mx-6',   8:  'mx-8',  12: 'mx-12', 16: 'mx-16',
-      24:   'mx-24',
-    },
-    my: {
-      0:    'my-0',   '0.5': 'my-0.5', 1:  'my-1',  2:  'my-2',  3:  'my-3',
-      4:    'my-4',   6:     'my-6',   8:  'my-8',  12: 'my-12', 16: 'my-16',
-      24:   'my-24',
-    },
-
-    fullWidth:  { true: 'w-full' },
-    fullHeight: { true: 'h-full' },
-  },
-
-  /*
-   * Compound variants — where surface × color get their actual visual.
-   * Twenty-one entries: 7 (outlined) + 7 (soft) + 7 (solid).
-   * `plain` and `elevated` don't appear here (no color contribution).
-   *
-   * Dark-mode pair is baked in: light-mode picks the 50-300 steps,
-   * dark-mode picks the 800-950 steps — both reactive to setMode()
-   * via the @dashforge/tw-theme CSS variables.
-   */
-  compoundVariants: [
-    // ─── outlined × color ─────────────────────────────────────────────
-    { variant: 'outlined', color: 'primary',
-      class: 'border-primary-300 bg-primary-50/40 dark:border-primary-800 dark:bg-primary-950/30' },
-    { variant: 'outlined', color: 'secondary',
-      class: 'border-secondary-300 bg-secondary-50/40 dark:border-secondary-800 dark:bg-secondary-950/30' },
-    { variant: 'outlined', color: 'success',
-      class: 'border-success-300 bg-success-50/40 dark:border-success-800 dark:bg-success-950/30' },
-    { variant: 'outlined', color: 'warning',
-      class: 'border-warning-300 bg-warning-50/40 dark:border-warning-800 dark:bg-warning-950/30' },
-    { variant: 'outlined', color: 'danger',
-      class: 'border-danger-300 bg-danger-50/40 dark:border-danger-800 dark:bg-danger-950/30' },
-    { variant: 'outlined', color: 'info',
-      class: 'border-info-300 bg-info-50/40 dark:border-info-800 dark:bg-info-950/30' },
-    { variant: 'outlined', color: 'neutral',
-      // border-neutral-200 auto-inverts via CSS var swap (no `dark:`
-      // needed). bg-white is hardcoded — `dark:bg-neutral-100` keeps
-      // elevation tier above page surface in dark mode (NOT
-      // `dark:bg-neutral-900` which renders near-white).
-      class: 'border-neutral-200 bg-white dark:bg-neutral-100' },
-
-    // ─── soft × color ─────────────────────────────────────────────────
-    { variant: 'soft', color: 'primary',
-      class: 'bg-primary-100 text-primary-900 dark:bg-primary-950/50 dark:text-primary-100' },
-    { variant: 'soft', color: 'secondary',
-      class: 'bg-secondary-100 text-secondary-900 dark:bg-secondary-950/50 dark:text-secondary-100' },
-    { variant: 'soft', color: 'success',
-      class: 'bg-success-100 text-success-900 dark:bg-success-950/50 dark:text-success-100' },
-    { variant: 'soft', color: 'warning',
-      class: 'bg-warning-100 text-warning-900 dark:bg-warning-950/50 dark:text-warning-100' },
-    { variant: 'soft', color: 'danger',
-      class: 'bg-danger-100 text-danger-900 dark:bg-danger-950/50 dark:text-danger-100' },
-    { variant: 'soft', color: 'info',
-      class: 'bg-info-100 text-info-900 dark:bg-info-950/50 dark:text-info-100' },
-    { variant: 'soft', color: 'neutral',
-      // Both neutral classes auto-invert via the dashforgePreset() CSS
-      // var swap — no `dark:` variants needed.
-      class: 'bg-neutral-100 text-neutral-900' },
-
-    // ─── solid × color ────────────────────────────────────────────────
-    { variant: 'solid', color: 'primary',
-      class: 'bg-primary-600 text-white dark:bg-primary-500' },
-    { variant: 'solid', color: 'secondary',
-      class: 'bg-secondary-600 text-white dark:bg-secondary-500' },
-    { variant: 'solid', color: 'success',
-      class: 'bg-success-600 text-white dark:bg-success-500' },
-    { variant: 'solid', color: 'warning',
-      class: 'bg-warning-500 text-white dark:bg-warning-600' },
-    { variant: 'solid', color: 'danger',
-      class: 'bg-danger-600 text-white dark:bg-danger-500' },
-    { variant: 'solid', color: 'info',
-      class: 'bg-info-600 text-white dark:bg-info-500' },
-    { variant: 'solid', color: 'neutral',
-      // Solid neutral is the high-emphasis "always-foreground accent"
-      // variant. Both classes auto-invert: dark surface + light text
-      // in light mode (`#171717` / `#fafafa`) flips to light surface +
-      // dark text in dark mode (`#f5f5f5` / `#0a0a0a`). The
-      // accent inverts WITH the page surface — consistent with the
-      // identity rule. Previously used `text-white` (no auto-invert)
-      // which forced double-inversion to keep readable.
-      class: 'bg-neutral-900 text-neutral-50' },
-  ],
-
-  defaultVariants: {
-    variant:   'plain',
-    color:     'neutral',
-    elevation: 0,
-    rounded:   'none',
-  },
-});
-
-export type BoxVariants = VariantProps<typeof boxVariants>;

package/src/components/Breadcrumbs/Breadcrumbs.perf.test.tsx

@@ -1,128 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Performance + re-render budget tests for `<Breadcrumbs>`.
- *
- * Layout components are typically near the top of the tree, so a
- * regression here ripples through everything below. Guardrails:
- *
- *  1. Mount cost stays bounded even with very long trails.
- *  2. Re-rendering the parent with the SAME items reference does not
- *     re-do the truncation memo work (verifies `useMemo` deps).
- *  3. Truncation does not allocate per-render arrays that would defeat
- *     the React keyed-reuse heuristics.
- */
-import * as React from 'react';
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, cleanup } from '@testing-library/react';
-import { Breadcrumbs } from './Breadcrumbs.js';
-import type { BreadcrumbItem } from './breadcrumbs.types.js';
-
-void React;
-afterEach(() => cleanup());
-
-function makeTrail(n: number): BreadcrumbItem[] {
-  return Array.from({ length: n }, (_, i) => ({
-    id: `c${i}`,
-    label: `Crumb ${i}`,
-    href: i === n - 1 ? undefined : `/c${i}`,
-  }));
-}
-
-function withRenderCounter<P>(
-  Component: React.ComponentType<P>,
-  counterRef: { count: number }
-): React.FC<P> {
-  return function Counted(props: P) {
-    counterRef.count++;
-    return <Component {...(props as P & object)} />;
-  };
-}
-
-describe('<Breadcrumbs> performance', () => {
-  it('mounts a 50-crumb trail under 200ms', () => {
-    const trail = makeTrail(50);
-    const t0 = performance.now();
-    render(<Breadcrumbs items={trail} />);
-    const t1 = performance.now();
-    // Generous bound — matches the rest of the perf suite. The old
-    // 50ms budget was flaky under a parallel full-suite run (cold
-    // start jitter), not a real regression signal.
-    expect(t1 - t0).toBeLessThan(200);
-  });
-
-  it('mounts a 1000-crumb (collapsed) trail under 100ms', () => {
-    const trail = makeTrail(1000);
-    const t0 = performance.now();
-    render(<Breadcrumbs items={trail} maxItems={5} />);
-    const t1 = performance.now();
-    expect(t1 - t0).toBeLessThan(100);
-  });
-});
-
-describe('<Breadcrumbs> re-render budget', () => {
-  it('renders at most 2 times on mount', () => {
-    const counter = { count: 0 };
-    const Counted = withRenderCounter(Breadcrumbs, counter);
-    render(<Counted items={makeTrail(5)} />);
-    expect(counter.count).toBeLessThanOrEqual(2);
-  });
-
-  it('re-renders exactly once per prop change to items', () => {
-    const counter = { count: 0 };
-    const Counted = withRenderCounter(Breadcrumbs, counter);
-    const a = makeTrail(3);
-    const b = makeTrail(4);
-    const c = makeTrail(5);
-    const { rerender } = render(<Counted items={a} />);
-    const baseline = counter.count;
-    rerender(<Counted items={b} />);
-    rerender(<Counted items={c} />);
-    // Two prop changes → up to two renders (plus tolerance).
-    expect(counter.count - baseline).toBeLessThanOrEqual(3);
-  });
-
-  it('does NOT re-render siblings when only Breadcrumbs items change', () => {
-    // Truncation memoization shouldn't leak through React.memo'd
-    // siblings, but at minimum it must not trigger sibling renders
-    // when the parent re-renders for an unrelated reason.
-    const sibCount = { count: 0 };
-    const Sibling = () => {
-      sibCount.count++;
-      return <div data-testid="sib" />;
-    };
-    const Tree = ({ items }: { items: BreadcrumbItem[] }) => (
-      <div>
-        <Breadcrumbs items={items} />
-        <Sibling />
-      </div>
-    );
-    const trail = makeTrail(5);
-    const { rerender } = render(<Tree items={trail} />);
-    const baseline = sibCount.count;
-    // Re-render the parent with the SAME items reference — Sibling
-    // should still re-render (parent re-rendered) but only ONCE per
-    // parent re-render, no extra renders triggered by Breadcrumbs.
-    rerender(<Tree items={trail} />);
-    rerender(<Tree items={trail} />);
-    expect(sibCount.count - baseline).toBeLessThanOrEqual(2);
-  });
-
-  it('truncation logic is stable: same items + same maxItems => same DOM ids', () => {
-    // If `useMemo` is well-keyed, the rendered <li> elements (with
-    // stable keys from item.id) should be identical DOM nodes across
-    // unrelated re-renders. Detects an accidental "always new array"
-    // refactor that would invalidate keys.
-    const items = makeTrail(10);
-    const { rerender, container } = render(
-      <Breadcrumbs items={items} maxItems={4} />
-    );
-    const firstSnapshot = Array.from(container.querySelectorAll('li')).map(
-      (li) => li.outerHTML
-    );
-    rerender(<Breadcrumbs items={items} maxItems={4} />);
-    const secondSnapshot = Array.from(container.querySelectorAll('li')).map(
-      (li) => li.outerHTML
-    );
-    expect(secondSnapshot).toEqual(firstSnapshot);
-  });
-});

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -1,231 +0,0 @@
-// @vitest-environment jsdom
-import * as React from 'react';
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import {
-  render,
-  screen,
-  fireEvent,
-  cleanup,
-} from '@testing-library/react';
-import { Breadcrumbs } from './Breadcrumbs.js';
-import type { BreadcrumbItem } from './breadcrumbs.types.js';
-
-// Keep the React import alive for the classic JSX transform — when this
-// file is run in environments where the bundler tree-shakes
-// `import * as React`, the JSX call sites would lose the global.
-void React;
-
-// Auto-cleanup is not reliably registered when test-library is loaded
-// before vitest globals are wired up — register the unmount step
-// explicitly so back-to-back `render()` calls don't accumulate trees.
-afterEach(() => {
-  cleanup();
-});
-
-const trail: BreadcrumbItem[] = [
-  { id: 'home', label: 'Home', href: '/' },
-  { id: 'settings', label: 'Settings', href: '/settings' },
-  { id: 'profile', label: 'Profile' },
-];
-
-describe('<Breadcrumbs>', () => {
-  describe('basic rendering', () => {
-    it('renders a nav with role + accessible name', () => {
-      render(<Breadcrumbs items={trail} />);
-      const nav = screen.getByRole('navigation', { name: 'Breadcrumb' });
-      expect(nav).toBeTruthy();
-    });
-
-    it('renders an <ol> with one <li> per item', () => {
-      const { container } = render(<Breadcrumbs items={trail} />);
-      expect(container.querySelectorAll('li')).toHaveLength(3);
-    });
-
-    it('returns null for an empty items array', () => {
-      const { container } = render(<Breadcrumbs items={[]} />);
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('marks the last crumb as aria-current="page" by default', () => {
-      render(<Breadcrumbs items={trail} />);
-      const current = screen.getByText('Profile').closest('span');
-      expect(current?.getAttribute('aria-current')).toBe('page');
-    });
-
-    it('honours an explicit `current: true` flag', () => {
-      const custom: BreadcrumbItem[] = [
-        { id: 'a', label: 'A', href: '/a' },
-        { id: 'b', label: 'B', current: true },
-        { id: 'c', label: 'C', href: '/c' },
-      ];
-      render(<Breadcrumbs items={custom} />);
-      const bElement = screen.getByText('B').closest('span');
-      expect(bElement?.getAttribute('aria-current')).toBe('page');
-    });
-  });
-
-  describe('separator', () => {
-    it('inserts the default `/` between crumbs', () => {
-      const { container } = render(<Breadcrumbs items={trail} />);
-      const separators = container.querySelectorAll('[aria-hidden="true"]');
-      // 2 separators between 3 crumbs.
-      expect(separators).toHaveLength(2);
-      expect(separators[0].textContent).toBe('/');
-    });
-
-    it('accepts a custom separator (string)', () => {
-      const { container } = render(
-        <Breadcrumbs items={trail} separator=">" />
-      );
-      const separators = container.querySelectorAll('[aria-hidden="true"]');
-      expect(separators[0].textContent).toBe('>');
-    });
-
-    it('accepts a custom separator (ReactNode)', () => {
-      render(
-        <Breadcrumbs
-          items={trail}
-          separator={<span data-testid="sep">»</span>}
-        />
-      );
-      // Two separators ⇒ two custom nodes.
-      expect(screen.getAllByTestId('sep')).toHaveLength(2);
-    });
-  });
-
-  describe('navigation links', () => {
-    it('renders a non-current crumb with href as a real link', () => {
-      render(<Breadcrumbs items={trail} />);
-      const link = screen.getByRole('link', { name: 'Home' });
-      expect(link.getAttribute('href')).toBe('/');
-    });
-
-    it('renders a crumb without href as a non-link span', () => {
-      const noHref: BreadcrumbItem[] = [
-        { id: 'a', label: 'A' },
-        { id: 'b', label: 'B' },
-      ];
-      render(<Breadcrumbs items={noHref} />);
-      expect(screen.queryByRole('link')).toBeNull();
-    });
-
-    it('fires onClick on link crumbs', () => {
-      const onClick = vi.fn();
-      const itemsWithClick: BreadcrumbItem[] = [
-        { id: 'a', label: 'A', href: '/a', onClick },
-        { id: 'b', label: 'B' },
-      ];
-      render(<Breadcrumbs items={itemsWithClick} />);
-      fireEvent.click(screen.getByText('A'));
-      expect(onClick).toHaveBeenCalled();
-    });
-
-    it('renders a disabled crumb as a non-interactive span', () => {
-      const dis: BreadcrumbItem[] = [
-        { id: 'a', label: 'A', href: '/a', disabled: true },
-        { id: 'b', label: 'B' },
-      ];
-      render(<Breadcrumbs items={dis} />);
-      // 'A' must not be a link (disabled overrides interactivity).
-      expect(screen.queryByRole('link', { name: 'A' })).toBeNull();
-      const span = screen.getByText('A').closest('span');
-      expect(span?.getAttribute('aria-disabled')).toBe('true');
-    });
-  });
-
-  describe('truncation', () => {
-    const long: BreadcrumbItem[] = Array.from({ length: 6 }, (_, i) => ({
-      id: `c${i}`,
-      label: `Crumb ${i}`,
-      href: i === 5 ? undefined : `/c${i}`,
-    }));
-
-    it('collapses the middle when items > maxItems', () => {
-      const { container } = render(
-        <Breadcrumbs items={long} maxItems={3} />
-      );
-      // 1 (head) + 1 ellipsis + 1 (tail) = 3 <li>s.
-      expect(container.querySelectorAll('li')).toHaveLength(3);
-      expect(
-        container.querySelector('[aria-label="More breadcrumbs"]')
-      ).toBeTruthy();
-    });
-
-    it('respects itemsBeforeCollapse / itemsAfterCollapse', () => {
-      const { container } = render(
-        <Breadcrumbs
-          items={long}
-          maxItems={4}
-          itemsBeforeCollapse={2}
-          itemsAfterCollapse={2}
-        />
-      );
-      // 2 head + 1 ellipsis + 2 tail = 5 <li>s.
-      // (maxItems is the visible-budget hint; once collapsed the
-      // before/after counts drive the final visible count.)
-      expect(container.querySelectorAll('li')).toHaveLength(5);
-    });
-
-    it('does NOT collapse when items.length <= maxItems', () => {
-      const { container } = render(
-        <Breadcrumbs items={trail} maxItems={10} />
-      );
-      expect(container.querySelectorAll('li')).toHaveLength(3);
-      expect(
-        container.querySelector('[aria-label="More breadcrumbs"]')
-      ).toBeNull();
-    });
-
-    it('does NOT collapse when maxItems is 0 (default)', () => {
-      const { container } = render(<Breadcrumbs items={long} />);
-      expect(container.querySelectorAll('li')).toHaveLength(6);
-    });
-
-    it('preserves the LAST crumb (current page) when collapsing', () => {
-      render(<Breadcrumbs items={long} maxItems={3} />);
-      expect(screen.getByText('Crumb 0')).toBeTruthy(); // first
-      expect(screen.getByText('Crumb 5')).toBeTruthy(); // last/current
-      expect(screen.queryByText('Crumb 2')).toBeNull(); // middle, collapsed
-    });
-  });
-
-  describe('polymorphic link component', () => {
-    it('uses the provided linkComponent instead of <a>', () => {
-      const MyLink = vi.fn(
-        ({ children, ...rest }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
-          <a data-testid="custom-link" {...rest}>
-            {children}
-          </a>
-        )
-      );
-      render(<Breadcrumbs items={trail} linkComponent={MyLink} />);
-      // Two interactive crumbs ⇒ MyLink called twice.
-      expect(MyLink).toHaveBeenCalledTimes(2);
-      expect(screen.getAllByTestId('custom-link')).toHaveLength(2);
-    });
-  });
-
-  describe('size variants', () => {
-    it('renders sm / md / lg without throwing', () => {
-      const sizes = ['sm', 'md', 'lg'] as const;
-      sizes.forEach((s) => {
-        const { unmount } = render(
-          <Breadcrumbs items={trail} size={s} />
-        );
-        expect(
-          screen.getByRole('navigation', { name: 'Breadcrumb' })
-        ).toBeTruthy();
-        unmount();
-      });
-    });
-  });
-
-  describe('aria-label override', () => {
-    it('applies a custom aria-label to the nav landmark', () => {
-      render(<Breadcrumbs items={trail} ariaLabel="Sentiero corrente" />);
-      expect(
-        screen.getByRole('navigation', { name: 'Sentiero corrente' })
-      ).toBeTruthy();
-    });
-  });
-});