@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/SwipableMobileCarousel/SwipableMobileCarouselSlideBody.tsx

@@ -1,42 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './SwipableMobileCarouselSlideParts.module.css';
-
-export interface SwipableMobileCarouselSlideBodyProps {
-  children: ReactNode;
-  /** While true, renders `loadingFallback` INSTEAD OF children — scoped to
-   *  just this region, not the whole slide. This is what fixes the
-   *  "whole slide blanks out, title included, until its own fetch resolves"
-   *  bug: a caller renders `<SwipableMobileCarouselSlideHeader>` from
-   *  already-known metadata unconditionally, and gates only this component's
-   *  `loading` on the slower fetch — the natural way to compose
-   *  Header/Body/Footer as siblings already produces that behavior, instead
-   *  of gating the entire slide behind one boolean. */
-  loading?: boolean;
-  loadingFallback?: ReactNode;
-  className?: string;
-}
-
-const defaultLoadingFallback = <div className={styles.loading}>Loading…</div>;
-
-/**
- * SwipableMobileCarouselSlideBody — the scrollable region of a slide.
- *
- * Deliberately does not set `touch-action: pan-y` on its scroll container
- * (see SwipableMobileCarouselSlideParts.module.css's `.body` rule) — that
- * would intersect-to-empty against the carousel's own horizontal
- * touch-action handling (docs/architecture-rules.md's touch-action
- * intersection rule), breaking both the vertical scroll here and the
- * horizontal swipe between slides.
- */
-export function SwipableMobileCarouselSlideBody({
-  children,
-  loading = false,
-  loadingFallback,
-  className,
-}: SwipableMobileCarouselSlideBodyProps) {
-  return (
-    <div className={[styles.body, className].filter(Boolean).join(' ')}>
-      {loading ? (loadingFallback ?? defaultLoadingFallback) : children}
-    </div>
-  );
-}

package/src/components/SwipableMobileCarousel/SwipableMobileCarouselSlideFooter.tsx

@@ -1,18 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './SwipableMobileCarouselSlideParts.module.css';
-
-export interface SwipableMobileCarouselSlideFooterProps {
-  children: ReactNode;
-  className?: string;
-}
-
-/**
- * SwipableMobileCarouselSlideFooter — always renders its children, no
- * loading concept. See SwipableMobileCarouselSlideHeader's doc comment.
- */
-export function SwipableMobileCarouselSlideFooter({
-  children,
-  className,
-}: SwipableMobileCarouselSlideFooterProps) {
-  return <div className={[styles.footer, className].filter(Boolean).join(' ')}>{children}</div>;
-}

package/src/components/SwipableMobileCarousel/SwipableMobileCarouselSlideHeader.tsx

@@ -1,21 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './SwipableMobileCarouselSlideParts.module.css';
-
-export interface SwipableMobileCarouselSlideHeaderProps {
-  children: ReactNode;
-  className?: string;
-}
-
-/**
- * SwipableMobileCarouselSlideHeader — always renders its children, no
- * loading concept. Meant for content already known synchronously (a list's
- * title, color, item count from data the caller already has) so it can
- * render immediately even while SwipableMobileCarouselSlideBody's own
- * content is still loading — see that component's doc comment.
- */
-export function SwipableMobileCarouselSlideHeader({
-  children,
-  className,
-}: SwipableMobileCarouselSlideHeaderProps) {
-  return <div className={[styles.header, className].filter(Boolean).join(' ')}>{children}</div>;
-}

package/src/components/SwipableMobileCarousel/SwipableMobileCarouselSlideParts.module.css

@@ -1,29 +0,0 @@
-.header,
-.footer {
-  flex: 0 0 auto;
-}
-
-.body {
-  flex: 1 1 auto;
-  min-height: 0; /* allow shrinking inside the slide's flex column, so it can scroll instead of overflowing */
-  overflow-y: auto;
-  overflow-x: hidden;
-  /* Deliberately does NOT set touch-action: pan-y here. touch-action's
-     effective value is the INTERSECTION of this element's and every
-     ancestor's value (docs/architecture-rules.md) — the ancestor .scroller
-     (SwipableMobileCarousel.module.css) needs the horizontal swipe gesture,
-     so pan-y here ∩ that horizontal handling would resolve to neither axis
-     working natively. Relying on the browser's default touch-action (auto)
-     here lets native gesture arbitration between the two nested scrollers
-     sort out which axis wins per-gesture — don't "fix" perceived nested-
-     scroll jank by adding pan-y; it silently breaks horizontal swipe instead. */
-}
-
-.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--sv-color-text-subtle);
-  font-size: var(--sv-font-size-sm);
-}

package/src/components/SwipableMobileCarousel/__tests__/SwipableMobileCarousel.test.tsx

@@ -1,214 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { SwipableMobileCarousel } from '../SwipableMobileCarousel';
-import { SwipableMobileCarouselSlide } from '../SwipableMobileCarouselSlide';
-import { SwipableMobileCarouselSlideHeader } from '../SwipableMobileCarouselSlideHeader';
-import { SwipableMobileCarouselSlideBody } from '../SwipableMobileCarouselSlideBody';
-
-// Same jsdom scroll polyfill/fake-timer setup as useSnapCarousel.test.tsx,
-// since this component wraps that hook directly.
-beforeEach(() => {
-  vi.useFakeTimers();
-  if (!Element.prototype.scrollTo) {
-    Element.prototype.scrollTo = vi.fn();
-  }
-});
-
-afterEach(() => {
-  vi.runOnlyPendingTimers();
-  vi.useRealTimers();
-  cleanup();
-});
-
-function setLayout(el: HTMLElement, clientWidth: number, scrollLeft: number) {
-  Object.defineProperty(el, 'clientWidth', { value: clientWidth, configurable: true });
-  Object.defineProperty(el, 'scrollLeft', { value: scrollLeft, configurable: true });
-}
-
-const KEYS = ['a', 'b', 'c', 'd', 'e'];
-
-function FiveSlides({
-  activeIndex,
-  onSettle,
-}: {
-  activeIndex: number;
-  onSettle: (i: number) => void;
-}) {
-  return (
-    <SwipableMobileCarousel activeIndex={activeIndex} onSettle={onSettle} aria-label="Test slides">
-      {KEYS.map((key) => (
-        <SwipableMobileCarouselSlide key={key} slideKey={key} label={key}>
-          <SwipableMobileCarouselSlideHeader>{`header-${key}`}</SwipableMobileCarouselSlideHeader>
-          <SwipableMobileCarouselSlideBody>{`body-${key}`}</SwipableMobileCarouselSlideBody>
-        </SwipableMobileCarouselSlide>
-      ))}
-    </SwipableMobileCarousel>
-  );
-}
-
-describe('SwipableMobileCarousel', () => {
-  it('only mounts the active slide and its immediate neighbors (default prefetchDistance=1)', () => {
-    render(<FiveSlides activeIndex={2} onSettle={() => {}} />);
-    // active (c) and neighbors (b, d) are mounted
-    expect(screen.getByText('header-b')).toBeDefined();
-    expect(screen.getByText('header-c')).toBeDefined();
-    expect(screen.getByText('header-d')).toBeDefined();
-    // out-of-window slides (a, e) render nothing at all
-    expect(screen.queryByText('header-a')).toBeNull();
-    expect(screen.queryByText('body-a')).toBeNull();
-    expect(screen.queryByText('header-e')).toBeNull();
-    expect(screen.queryByText('body-e')).toBeNull();
-  });
-
-  it("SlideBody's loading prop only hides that region, not the Header", () => {
-    render(
-      <SwipableMobileCarousel activeIndex={0} onSettle={() => {}} aria-label="Test slides">
-        <SwipableMobileCarouselSlide slideKey="only" label="Only">
-          <SwipableMobileCarouselSlideHeader>the-title</SwipableMobileCarouselSlideHeader>
-          <SwipableMobileCarouselSlideBody loading>tasks-content</SwipableMobileCarouselSlideBody>
-        </SwipableMobileCarouselSlide>
-      </SwipableMobileCarousel>,
-    );
-    expect(screen.getByText('the-title')).toBeDefined();
-    expect(screen.queryByText('tasks-content')).toBeNull();
-    expect(screen.getByText('Loading…')).toBeDefined();
-  });
-
-  it('calls onSettle with the new index after a swipe settles', () => {
-    const onSettle = vi.fn();
-    render(<FiveSlides activeIndex={0} onSettle={onSettle} />);
-    const scroller = screen.getByRole('region', { name: 'Test slides' });
-    fireEvent.touchStart(scroller);
-    setLayout(scroller, 300, 300); // scrollLeft 300 / width 300 -> index 1
-    fireEvent.scroll(scroller);
-    act(() => void vi.advanceTimersByTime(120));
-    expect(onSettle).toHaveBeenCalledWith(1);
-  });
-
-  it('clicking a dot calls onSettle directly with that index', () => {
-    const onSettle = vi.fn();
-    render(<FiveSlides activeIndex={0} onSettle={onSettle} />);
-    const dots = screen.getAllByRole('tab');
-    const fourthDot = dots[3];
-    if (!fourthDot) throw new Error('expected a 4th dot');
-    setLayout(screen.getByRole('region', { name: 'Test slides' }), 300, 0);
-    fireEvent.click(fourthDot);
-    expect(onSettle).toHaveBeenCalledWith(3);
-  });
-
-  it('positions both the default and a custom renderIndicator inside the same overlay slot', () => {
-    // Regression test: the overlay-positioning class used to be applied
-    // directly to the default SwipableMobileCarouselDots instance, so any
-    // caller-supplied renderIndicator rendered as a plain static element
-    // instead — pushed out of view below the full-height scroller. The
-    // carousel must own positioning for whatever renderIndicator returns.
-    const { unmount } = render(<FiveSlides activeIndex={0} onSettle={() => {}} />);
-    const defaultTablist = screen.getByRole('tablist');
-    expect(defaultTablist.parentElement?.className).toMatch(/indicatorSlot/);
-    unmount();
-
-    render(
-      <SwipableMobileCarousel
-        activeIndex={0}
-        onSettle={() => {}}
-        aria-label="Test slides"
-        renderIndicator={({ count, activeIndex, onJump }) => (
-          <div role="tablist" aria-label="Custom">
-            {Array.from({ length: count }, (_, i) => (
-              <button key={i} type="button" role="tab" onClick={() => onJump(i)}>
-                {i === activeIndex ? 'active' : 'inactive'}
-              </button>
-            ))}
-          </div>
-        )}
-      >
-        {KEYS.map((key) => (
-          <SwipableMobileCarouselSlide key={key} slideKey={key} label={key}>
-            {`slide-${key}`}
-          </SwipableMobileCarouselSlide>
-        ))}
-      </SwipableMobileCarousel>,
-    );
-    const customTablist = screen.getByRole('tablist', { name: 'Custom' });
-    expect(customTablist.parentElement?.className).toMatch(/indicatorSlot/);
-  });
-
-  it('re-snaps and reports the new index when the active slide moves position (reorder-jump fix)', () => {
-    function Reorderable({ order, onSettle }: { order: string[]; onSettle: (i: number) => void }) {
-      return (
-        <SwipableMobileCarousel activeIndex={1} onSettle={onSettle} aria-label="Test slides">
-          {order.map((key) => (
-            <SwipableMobileCarouselSlide key={key} slideKey={key} label={key}>
-              <SwipableMobileCarouselSlideHeader>{`header-${key}`}</SwipableMobileCarouselSlideHeader>
-            </SwipableMobileCarouselSlide>
-          ))}
-        </SwipableMobileCarousel>
-      );
-    }
-    const onSettle = vi.fn();
-    const { rerender } = render(<Reorderable order={['a', 'b', 'c']} onSettle={onSettle} />);
-    const scroller = screen.getByRole('region', { name: 'Test slides' });
-    setLayout(scroller, 300, 0);
-    const spy = vi.spyOn(scroller, 'scrollTo');
-
-    // 'b' (index 1, active) moves to index 0.
-    rerender(<Reorderable order={['b', 'a', 'c']} onSettle={onSettle} />);
-
-    expect(onSettle).toHaveBeenCalledWith(0);
-    expect(spy).toHaveBeenCalledWith({ left: 0, behavior: 'instant' });
-  });
-
-  it('mounts a slide reached by a fast multi-slide flick before settle-detection reports it', () => {
-    // Regression test, found via a user screen recording: a fast flick can
-    // carry native scroll-snap momentum straight past an intermediate slide
-    // to one two-or-more away in a single continuous gesture. Settle-
-    // detection deliberately still waits out the full debounce window before
-    // calling onSettle (to distinguish a real settle from drift — see
-    // useSnapCarousel's chainTrustedRef comment), but the mount window used
-    // to be keyed *only* off that settled index — so the slide the container
-    // had already scrolled to, visually, sat completely unmounted (not even
-    // a loading skeleton, per SwipableMobileCarouselSlide's `return null`)
-    // for the entire debounce window. liveIndex closes that gap.
-    const onSettle = vi.fn();
-    const KEYS8 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
-    function EightSlides({ onSettle }: { onSettle: (i: number) => void }) {
-      return (
-        <SwipableMobileCarousel activeIndex={0} onSettle={onSettle} aria-label="Test slides">
-          {KEYS8.map((key) => (
-            <SwipableMobileCarouselSlide key={key} slideKey={key} label={key}>
-              <SwipableMobileCarouselSlideHeader>{`header-${key}`}</SwipableMobileCarouselSlideHeader>
-            </SwipableMobileCarouselSlide>
-          ))}
-        </SwipableMobileCarousel>
-      );
-    }
-    render(<EightSlides onSettle={onSettle} />);
-    const scroller = screen.getByRole('region', { name: 'Test slides' });
-    // Slide 'e' (index 4) is well outside the default prefetchDistance=1
-    // window around the settled index 0.
-    expect(screen.queryByText('header-e')).toBeNull();
-
-    fireEvent.touchStart(scroller);
-    setLayout(scroller, 300, 1200); // scrollLeft 1200 / width 300 -> index 4
-    fireEvent.scroll(scroller);
-    // Well short of the 120ms settle debounce — onSettle must not have fired
-    // yet, but the rAF-throttled liveIndex update has had time to run.
-    act(() => void vi.advanceTimersByTime(20));
-    expect(onSettle).not.toHaveBeenCalled();
-    expect(screen.getByText('header-e')).toBeDefined();
-
-    act(() => void vi.advanceTimersByTime(120));
-    expect(onSettle).toHaveBeenCalledWith(4);
-  });
-
-  it('does not re-snap when slide order is unchanged', () => {
-    function Reorderable({ onSettle }: { onSettle: (i: number) => void }) {
-      return <FiveSlides activeIndex={2} onSettle={onSettle} />;
-    }
-    const onSettle = vi.fn();
-    const { rerender } = render(<Reorderable onSettle={onSettle} />);
-    rerender(<Reorderable onSettle={onSettle} />);
-    expect(onSettle).not.toHaveBeenCalled();
-  });
-});

package/src/components/SwipableMobileCarousel/__tests__/SwipableMobileCarouselDevGuard.test.tsx

@@ -1,61 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render } from '@testing-library/react';
-import { SwipableMobileCarousel } from '../SwipableMobileCarousel';
-import { SwipableMobileCarouselSlide } from '../SwipableMobileCarouselSlide';
-
-beforeEach(() => {
-  if (!Element.prototype.scrollTo) {
-    Element.prototype.scrollTo = vi.fn();
-  }
-});
-
-afterEach(() => {
-  cleanup();
-  vi.restoreAllMocks();
-});
-
-function renderWithStrayChild() {
-  return render(
-    <SwipableMobileCarousel activeIndex={0} onSettle={() => {}} aria-label="Test slides">
-      <SwipableMobileCarouselSlide slideKey="a" label="A">
-        content
-      </SwipableMobileCarouselSlide>
-      {/* stray non-Slide child — shifts index math for anything after it */}
-      <div>oops</div>
-      <SwipableMobileCarouselSlide slideKey="b" label="B">
-        content
-      </SwipableMobileCarouselSlide>
-    </SwipableMobileCarousel>,
-  );
-}
-
-describe('SwipableMobileCarousel dev-mode child-type guard', () => {
-  it('warns via console.error in development, mentioning the offending child', () => {
-    const originalEnv = process.env.NODE_ENV;
-    vi.stubEnv('NODE_ENV', 'development');
-    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-
-    expect(() => renderWithStrayChild()).not.toThrow();
-
-    expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining('<div>'));
-    vi.stubEnv('NODE_ENV', originalEnv ?? 'test');
-  });
-
-  it('does not call console.error in production', () => {
-    const originalEnv = process.env.NODE_ENV;
-    vi.stubEnv('NODE_ENV', 'production');
-    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-
-    expect(() => renderWithStrayChild()).not.toThrow();
-
-    expect(errorSpy).not.toHaveBeenCalled();
-    vi.stubEnv('NODE_ENV', originalEnv ?? 'test');
-  });
-
-  it('never throws, even with a stray child (a miscounted slide degrades, it does not crash)', () => {
-    vi.stubEnv('NODE_ENV', 'development');
-    vi.spyOn(console, 'error').mockImplementation(() => {});
-    expect(() => renderWithStrayChild()).not.toThrow();
-  });
-});

package/src/components/SwipableMobileCarousel/context.ts

@@ -1,13 +0,0 @@
-'use client';
-
-import { createContext } from 'react';
-
-export interface CarouselSlideMountContextValue {
-  /** Whether this slide is within the carousel's mount window (the active
-   *  slide ± its configured prefetchDistance). Kept out of the main .tsx
-   *  file for React Fast Refresh hygiene (a file exporting only components
-   *  refreshes more reliably than one mixing components and plain values). */
-  isMounted: boolean;
-}
-
-export const CarouselSlideMountContext = createContext<CarouselSlideMountContextValue | null>(null);

package/src/components/SwipableMobileCarouselDots/SwipableMobileCarouselDots.module.css

@@ -1,64 +0,0 @@
-.dots {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sv-space-2);
-}
-
-/* Opt-in — see the `density` prop doc comment. Shrinks both the gap and each
-   dot's own hit target (20px -> 16px) — for a carousel with enough slides
-   that even the space-1 gap alone still read as too wide. The visible 6px
-   dot is unchanged; only the surrounding tap-target box shrinks, via the
-   descendant override below rather than a second dot variant, so this stays
-   a pure CSS opt-in with no JS/prop plumbing beyond `density` itself. */
-.dotsCompact {
-  gap: var(--sv-space-1);
-}
-
-.dotsCompact .dot {
-  width: 16px;
-  height: 16px;
-}
-
-.dot {
-  /* A 6px visible dot is too small a hit target on its own — the button's
-     real box is larger (20px) with the dot itself painted by ::before and
-     centered inside, so tap area grows without changing the visible dot
-     size or the row's gap-based spacing math. */
-  position: relative;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-}
-
-.dot::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--sv-color-border-strong);
-  transform: translate(-50%, -50%);
-  transition: background 0.15s ease;
-}
-
-.dot:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-  border-radius: 50%;
-}
-
-.dotActive::before {
-  background: var(--sv-color-text-primary);
-}
-
-@media (hover: hover) {
-  .dot:not(.dotActive):hover::before {
-    background: var(--sv-color-text-muted);
-  }
-}

package/src/components/SwipableMobileCarouselDots/SwipableMobileCarouselDots.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import styles from './SwipableMobileCarouselDots.module.css';
-
-export interface SwipableMobileCarouselDotsProps {
-  count: number;
-  activeIndex: number;
-  onJump: (index: number) => void;
-  /** Per-dot accessible names, e.g. ["Lists", "Starred", "Groceries"]. Falls
-   *  back to "Slide N of count" for any index without one. */
-  labels?: (string | undefined)[];
-  /** Labels the whole group — required, no generic fallback (mirrors
-   *  SwipableMobileCarousel's own required aria-label). */
-  'aria-label': string;
-  /** `'compact'` halves the gap between dots (`--sv-space-2` → `--sv-space-1`)
-   *  and shrinks each dot's own hit target (20px → 16px) — for a carousel
-   *  with enough slides that even the reduced gap alone still reads as too
-   *  wide on a narrow viewport (e.g. a many-list mobile app). The visible
-   *  6px dot itself is unchanged; only its surrounding tap-target box
-   *  shrinks. Defaults to `'default'` — every existing consumer's spacing is
-   *  unaffected unless it opts in. */
-  density?: 'default' | 'compact';
-  className?: string;
-}
-
-/**
- * SwipableMobileCarouselDots — a real, tappable, labeled slide indicator.
- * Standalone (not carousel-only): reusable anywhere a set of positions needs
- * a dot indicator (e.g. an image gallery, an onboarding stepper), and is also
- * SwipableMobileCarousel's default `renderIndicator`.
- *
- * Replaces the `aria-hidden`, non-interactive dots pattern both
- * sovereign-tasks and sovereign-shopper currently hand-roll — every dot here
- * is a real `role="tab"` button with its own accessible name, reachable by
- * keyboard. No roving tabIndex/arrow-key handling: `Tabs` (this library's
- * other `role="tablist"` component) has none either, so this stays
- * consistent with it rather than gold-plating past its sibling.
- */
-export function SwipableMobileCarouselDots({
-  count,
-  activeIndex,
-  onJump,
-  labels,
-  'aria-label': ariaLabel,
-  density = 'default',
-  className,
-}: SwipableMobileCarouselDotsProps) {
-  return (
-    <div
-      role="tablist"
-      aria-label={ariaLabel}
-      className={[styles.dots, density === 'compact' ? styles.dotsCompact : '', className]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {Array.from({ length: count }, (_, i) => {
-        const active = i === activeIndex;
-        const label = labels?.[i] ?? `Slide ${i + 1} of ${count}`;
-        return (
-          <button
-            key={i}
-            type="button"
-            role="tab"
-            aria-selected={active}
-            aria-label={label}
-            className={[styles.dot, active ? styles.dotActive : ''].filter(Boolean).join(' ')}
-            onClick={() => onJump(i)}
-          />
-        );
-      })}
-    </div>
-  );
-}

package/src/components/SwipableMobileCarouselDots/__tests__/SwipableMobileCarouselDots.test.tsx

@@ -1,63 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { SwipableMobileCarouselDots } from '../SwipableMobileCarouselDots';
-
-afterEach(cleanup);
-
-describe('SwipableMobileCarouselDots', () => {
-  it('renders a tablist with one tab per count, none aria-hidden', () => {
-    render(
-      <SwipableMobileCarouselDots count={3} activeIndex={0} onJump={() => {}} aria-label="Lists" />,
-    );
-    const list = screen.getByRole('tablist', { name: 'Lists' });
-    expect(list.getAttribute('aria-hidden')).toBeNull();
-    const tabs = screen.getAllByRole('tab');
-    expect(tabs).toHaveLength(3);
-    tabs.forEach((tab) => expect(tab.getAttribute('aria-hidden')).toBeNull());
-  });
-
-  it('marks only the active dot as aria-selected', () => {
-    render(
-      <SwipableMobileCarouselDots count={3} activeIndex={1} onJump={() => {}} aria-label="Lists" />,
-    );
-    const tabs = screen.getAllByRole('tab');
-    expect(tabs[0]?.getAttribute('aria-selected')).toBe('false');
-    expect(tabs[1]?.getAttribute('aria-selected')).toBe('true');
-    expect(tabs[2]?.getAttribute('aria-selected')).toBe('false');
-  });
-
-  it('uses the provided per-dot labels, falling back to "Slide N of count"', () => {
-    render(
-      <SwipableMobileCarouselDots
-        count={3}
-        activeIndex={0}
-        onJump={() => {}}
-        labels={['Lists', undefined, 'Groceries']}
-        aria-label="Lists"
-      />,
-    );
-    expect(screen.getByRole('tab', { name: 'Lists' })).toBeDefined();
-    expect(screen.getByRole('tab', { name: 'Slide 2 of 3' })).toBeDefined();
-    expect(screen.getByRole('tab', { name: 'Groceries' })).toBeDefined();
-  });
-
-  it('clicking a dot calls onJump with its index', () => {
-    const onJump = vi.fn();
-    render(
-      <SwipableMobileCarouselDots count={3} activeIndex={0} onJump={onJump} aria-label="Lists" />,
-    );
-    const thirdTab = screen.getAllByRole('tab')[2];
-    if (!thirdTab) throw new Error('expected a 3rd tab');
-    fireEvent.click(thirdTab);
-    expect(onJump).toHaveBeenCalledWith(2);
-  });
-
-  it('every dot is a real, focusable button (not a decorative element)', () => {
-    render(
-      <SwipableMobileCarouselDots count={2} activeIndex={0} onJump={() => {}} aria-label="Lists" />,
-    );
-    const tabs = screen.getAllByRole('tab');
-    tabs.forEach((tab) => expect(tab.tagName).toBe('BUTTON'));
-  });
-});