@open-mercato/ui 0.6.4-develop.4178.1.aad9ddaa95 → 0.6.4-develop.4210.1.d412061cfe

package/src/primitives/__tests__/scroll-area.test.tsx

@@ -0,0 +1,109 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import {
+  ScrollArea,
+  ScrollAreaRoot,
+  ScrollAreaViewport,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaCorner,
+} from '../scroll-area'
+
+// NOTE: Radix ScrollArea defers scrollbar / corner rendering until the viewport
+// reports overflow via layout measurements. jsdom does not implement layout,
+// so scrollbars are not mounted in these tests. The assertions below cover
+// the primitive's own surface area (root + viewport + className/ref
+// forwarding + exported sub-components). Scrollbar visual behaviour belongs
+// to Radix's own test suite.
+
+describe('ScrollArea', () => {
+  it('renders children inside the viewport', () => {
+    const { getByText, container } = render(
+      <ScrollArea className="h-32">
+        <div>Scrollable content</div>
+      </ScrollArea>,
+    )
+    expect(getByText('Scrollable content')).toBeInTheDocument()
+    const viewport = container.querySelector('[data-slot="scroll-area-viewport"]')
+    expect(viewport).not.toBeNull()
+    expect(viewport?.textContent).toContain('Scrollable content')
+  })
+
+  it('forwards className to the root element', () => {
+    const { container } = render(
+      <ScrollArea className="custom-class h-32">
+        <div>content</div>
+      </ScrollArea>,
+    )
+    const root = container.querySelector('[data-slot="scroll-area-root"]')
+    expect(root).not.toBeNull()
+    expect(root?.className).toContain('custom-class')
+    expect(root?.className).toContain('h-32')
+    expect(root?.className).toContain('relative')
+    expect(root?.className).toContain('overflow-hidden')
+  })
+
+  it('forwards viewportClassName to the viewport', () => {
+    const { container } = render(
+      <ScrollArea className="h-32" viewportClassName="custom-viewport">
+        <div>content</div>
+      </ScrollArea>,
+    )
+    const viewport = container.querySelector('[data-slot="scroll-area-viewport"]')
+    expect(viewport?.className).toContain('custom-viewport')
+    expect(viewport?.className).toContain('h-full')
+    expect(viewport?.className).toContain('w-full')
+  })
+
+  it('forwards ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(
+      <ScrollArea ref={ref} className="h-32">
+        <div>content</div>
+      </ScrollArea>,
+    )
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.getAttribute('data-slot')).toBe('scroll-area-root')
+  })
+
+  it('accepts dir, type, and other Radix Root passthrough props without error', () => {
+    expect(() => {
+      render(
+        <ScrollArea className="h-32" dir="rtl" type="always">
+          <div>content</div>
+        </ScrollArea>,
+      )
+    }).not.toThrow()
+  })
+
+  it('exposes compound sub-components for custom composition', () => {
+    // The convenience `<ScrollArea>` wrapper covers the 90% case; reaching for
+    // the lower-level primitives must stay possible for callers that need
+    // conditional scrollbars, a custom viewport, or a custom corner element.
+    const { container, getByText } = render(
+      <ScrollAreaRoot className="h-32">
+        <ScrollAreaViewport>
+          <div>custom composition</div>
+        </ScrollAreaViewport>
+        <ScrollAreaScrollbar orientation="vertical">
+          <ScrollAreaThumb />
+        </ScrollAreaScrollbar>
+        <ScrollAreaCorner />
+      </ScrollAreaRoot>,
+    )
+    expect(getByText('custom composition')).toBeInTheDocument()
+    expect(container.querySelector('[data-slot="scroll-area-root"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="scroll-area-viewport"]')).not.toBeNull()
+  })
+
+  it('exports every sub-component as a referenceable React component', () => {
+    // Guards against accidental removal of the compound API exports.
+    expect(typeof ScrollAreaRoot).toBe('object')
+    expect(typeof ScrollAreaViewport).toBe('object')
+    expect(typeof ScrollAreaScrollbar).toBe('object')
+    expect(typeof ScrollAreaThumb).toBe('object')
+    expect(typeof ScrollAreaCorner).toBe('object')
+  })
+})

package/src/primitives/__tests__/segmented-control.test.tsx

@@ -0,0 +1,129 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { SegmentedControl, SegmentedControlItem } from '../segmented-control'
+
+function Controlled({
+  initial = 'all',
+  size,
+  disabled,
+  onChange,
+}: {
+  initial?: string
+  size?: 'sm' | 'default'
+  disabled?: boolean
+  onChange?: (next: string) => void
+}) {
+  const [value, setValue] = React.useState(initial)
+  return (
+    <SegmentedControl
+      value={value}
+      onValueChange={(next) => {
+        setValue(next)
+        onChange?.(next)
+      }}
+      size={size}
+      disabled={disabled}
+      aria-label="View"
+    >
+      <SegmentedControlItem value="all">All</SegmentedControlItem>
+      <SegmentedControlItem value="active">Active</SegmentedControlItem>
+      <SegmentedControlItem value="archived">Archived</SegmentedControlItem>
+    </SegmentedControl>
+  )
+}
+
+describe('SegmentedControl', () => {
+  it('renders a radiogroup with one radio item per child', () => {
+    const { container, getByRole, getAllByRole } = render(<Controlled />)
+    const root = getByRole('radiogroup', { name: 'View' })
+    expect(root).toBeInTheDocument()
+    expect(root.getAttribute('data-slot')).toBe('segmented-control')
+    const items = getAllByRole('radio')
+    expect(items.length).toBe(3)
+    expect(container.querySelectorAll('[data-slot="segmented-control-item"]').length).toBe(3)
+  })
+
+  it('marks the initial value as checked', () => {
+    const { getByRole } = render(<Controlled initial="active" />)
+    const all = getByRole('radio', { name: 'All' })
+    const active = getByRole('radio', { name: 'Active' })
+    const archived = getByRole('radio', { name: 'Archived' })
+    expect(all.getAttribute('aria-checked')).toBe('false')
+    expect(active.getAttribute('aria-checked')).toBe('true')
+    expect(active.getAttribute('data-state')).toBe('checked')
+    expect(archived.getAttribute('aria-checked')).toBe('false')
+  })
+
+  it('fires onValueChange when an unselected item is clicked', () => {
+    const onChange = jest.fn()
+    const { getByRole } = render(<Controlled onChange={onChange} />)
+    fireEvent.click(getByRole('radio', { name: 'Active' }))
+    expect(onChange).toHaveBeenCalledWith('active')
+  })
+
+  it('updates aria-checked + data-state after selection', () => {
+    const { getByRole } = render(<Controlled />)
+    fireEvent.click(getByRole('radio', { name: 'Archived' }))
+    expect(getByRole('radio', { name: 'Archived' }).getAttribute('aria-checked')).toBe('true')
+    expect(getByRole('radio', { name: 'All' }).getAttribute('aria-checked')).toBe('false')
+  })
+
+  it('applies size="default" classes by default (h-8 track, h-7 items, text-sm)', () => {
+    const { container } = render(<Controlled />)
+    const root = container.querySelector('[data-slot="segmented-control"]') as HTMLElement
+    expect(root.className).toContain('h-8')
+    expect(root.className).toContain('rounded-full')
+    const item = container.querySelector('[data-slot="segmented-control-item"]') as HTMLElement
+    expect(item.className).toContain('h-7')
+    expect(item.className).toContain('text-sm')
+  })
+
+  it('applies size="sm" classes (h-7 track, h-6 items, text-xs)', () => {
+    const { container } = render(<Controlled size="sm" />)
+    const root = container.querySelector('[data-slot="segmented-control"]') as HTMLElement
+    expect(root.className).toContain('h-7')
+    expect(root.className).not.toContain('h-8')
+    const item = container.querySelector('[data-slot="segmented-control-item"]') as HTMLElement
+    expect(item.className).toContain('h-6')
+    expect(item.className).toContain('text-xs')
+  })
+
+  it('disables all items when disabled prop is set on the root', () => {
+    const onChange = jest.fn()
+    const { container, getByRole } = render(<Controlled disabled onChange={onChange} />)
+    const root = container.querySelector('[data-slot="segmented-control"]') as HTMLElement
+    expect(root.className).toContain('opacity-60')
+    const items = container.querySelectorAll('[data-slot="segmented-control-item"]')
+    items.forEach((item) => {
+      expect((item as HTMLButtonElement).disabled).toBe(true)
+    })
+    fireEvent.click(getByRole('radio', { name: 'Active' }))
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('forwards ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(
+      <SegmentedControl ref={ref} value="a" onValueChange={() => {}} aria-label="x">
+        <SegmentedControlItem value="a">A</SegmentedControlItem>
+        <SegmentedControlItem value="b">B</SegmentedControlItem>
+      </SegmentedControl>,
+    )
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.getAttribute('data-slot')).toBe('segmented-control')
+  })
+
+  it('forwards className without dropping variant classes', () => {
+    const { container } = render(
+      <SegmentedControl value="a" onValueChange={() => {}} className="custom-class">
+        <SegmentedControlItem value="a">A</SegmentedControlItem>
+      </SegmentedControl>,
+    )
+    const root = container.querySelector('[data-slot="segmented-control"]') as HTMLElement
+    expect(root.className).toContain('custom-class')
+    expect(root.className).toContain('rounded-full')
+    expect(root.className).toContain('bg-muted')
+  })
+})

package/src/primitives/__tests__/separator.test.tsx

@@ -0,0 +1,143 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render } from '@testing-library/react'
+
+import { Separator } from '../separator'
+
+describe('Separator', () => {
+  describe('horizontal (default)', () => {
+    it('renders role="separator" with the bare-rule look (backward compat)', () => {
+      const { container } = render(<Separator />)
+      const sep = container.querySelector('[data-slot="separator"]') as HTMLElement
+      expect(sep).not.toBeNull()
+      expect(sep.getAttribute('role')).toBe('separator')
+      expect(sep.getAttribute('aria-orientation')).toBe('horizontal')
+      expect(sep.getAttribute('data-variant')).toBe('solid')
+      expect(sep.className).toContain('h-px')
+      expect(sep.className).toContain('w-full')
+      expect(sep.className).toContain('bg-border')
+    })
+
+    it('forwards className', () => {
+      const { container } = render(<Separator className="my-4 custom-class" />)
+      const sep = container.querySelector('[data-slot="separator"]') as HTMLElement
+      expect(sep.className).toContain('my-4')
+      expect(sep.className).toContain('custom-class')
+      // Default base classes still applied.
+      expect(sep.className).toContain('bg-border')
+    })
+  })
+
+  describe('vertical', () => {
+    it('renders w-px h-full vertical rule', () => {
+      const { container } = render(<Separator orientation="vertical" />)
+      const sep = container.querySelector('[data-slot="separator"]') as HTMLElement
+      expect(sep.getAttribute('aria-orientation')).toBe('vertical')
+      expect(sep.className).toContain('h-full')
+      expect(sep.className).toContain('w-px')
+      expect(sep.className).toContain('bg-border')
+    })
+
+    it('vertical + dashed switches to border-l-dashed', () => {
+      const { container } = render(
+        <Separator orientation="vertical" variant="dashed" />,
+      )
+      const sep = container.querySelector('[data-slot="separator"]') as HTMLElement
+      expect(sep.className).toContain('border-l')
+      expect(sep.className).toContain('border-dashed')
+      expect(sep.className).not.toContain('bg-border')
+    })
+  })
+
+  describe('variant="dashed"', () => {
+    it('renders horizontal dashed rule with border-t border-dashed', () => {
+      const { container } = render(<Separator variant="dashed" />)
+      const sep = container.querySelector('[data-slot="separator"]') as HTMLElement
+      expect(sep.getAttribute('data-variant')).toBe('dashed')
+      expect(sep.className).toContain('border-t')
+      expect(sep.className).toContain('border-dashed')
+      expect(sep.className).toContain('h-0')
+      expect(sep.className).not.toContain('bg-border')
+    })
+  })
+
+  describe('label (inline label between two rule halves)', () => {
+    it('renders the label slot with two rule segments by default', () => {
+      const { container } = render(<Separator label="OR" />)
+      const sep = container.querySelector('[data-slot="separator"]') as HTMLElement
+      expect(sep.getAttribute('data-label-align')).toBe('center')
+      const label = container.querySelector('[data-slot="separator-label"]') as HTMLElement
+      expect(label).not.toBeNull()
+      expect(label.textContent).toBe('OR')
+      const rules = container.querySelectorAll('[data-slot="separator-rule"]')
+      expect(rules.length).toBe(2)
+    })
+
+    it('start-aligned label has a short left segment + flex-1 right segment', () => {
+      const { container } = render(<Separator label="Section" labelAlign="start" />)
+      const sep = container.querySelector('[data-slot="separator"]') as HTMLElement
+      expect(sep.getAttribute('data-label-align')).toBe('start')
+      const rules = Array.from(
+        container.querySelectorAll('[data-slot="separator-rule"]'),
+      ) as HTMLElement[]
+      expect(rules.length).toBe(2)
+      // First segment is the short stub (w-6), second is flex-1.
+      expect(rules[0].className).toContain('w-6')
+      expect(rules[1].className).toContain('flex-1')
+    })
+
+    it('end-aligned label has flex-1 left segment + short right segment', () => {
+      const { container } = render(<Separator label="Section" labelAlign="end" />)
+      const rules = Array.from(
+        container.querySelectorAll('[data-slot="separator-rule"]'),
+      ) as HTMLElement[]
+      expect(rules[0].className).toContain('flex-1')
+      expect(rules[1].className).toContain('w-6')
+    })
+
+    it('label + dashed variant flows through to both rule segments', () => {
+      const { container } = render(<Separator label="OR" variant="dashed" />)
+      const rules = Array.from(
+        container.querySelectorAll('[data-slot="separator-rule"]'),
+      ) as HTMLElement[]
+      expect(rules.length).toBe(2)
+      for (const rule of rules) {
+        expect(rule.className).toContain('border-dashed')
+        expect(rule.className).toContain('border-t')
+      }
+    })
+  })
+
+  describe('section variant', () => {
+    it('renders a full-width bg-muted strip with uppercase label', () => {
+      const { container } = render(
+        <Separator section label="AMOUNT & ACCOUNT" />,
+      )
+      const sep = container.querySelector('[data-slot="separator"]') as HTMLElement
+      expect(sep.getAttribute('data-variant')).toBe('section')
+      expect(sep.className).toContain('bg-muted')
+      expect(sep.className).toContain('uppercase')
+      expect(sep.textContent).toBe('AMOUNT & ACCOUNT')
+    })
+
+    it('section variant accepts children when label is omitted', () => {
+      const { container } = render(
+        <Separator section>
+          <span data-testid="custom">Custom JSX</span>
+        </Separator>,
+      )
+      const sep = container.querySelector('[data-slot="separator"]') as HTMLElement
+      expect(sep.querySelector('[data-testid="custom"]')).not.toBeNull()
+    })
+
+    it('section variant forwards className', () => {
+      const { container } = render(
+        <Separator section label="X" className="mt-4 custom" />,
+      )
+      const sep = container.querySelector('[data-slot="separator"]') as HTMLElement
+      expect(sep.className).toContain('mt-4')
+      expect(sep.className).toContain('custom')
+    })
+  })
+})

package/src/primitives/__tests__/slider.test.tsx

@@ -0,0 +1,86 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { Slider } from '../slider'
+
+describe('Slider', () => {
+  it('renders a single thumb when value has one entry', () => {
+    const { container } = render(<Slider value={[42]} onValueChange={() => {}} />)
+    expect(container.querySelectorAll('[data-slot="slider-thumb"]').length).toBe(1)
+    expect(container.querySelector('[data-slot="slider-root"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="slider-track"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="slider-range"]')).not.toBeNull()
+  })
+
+  it('renders two thumbs when value has two entries (range mode)', () => {
+    const { container } = render(<Slider value={[10, 80]} onValueChange={() => {}} />)
+    expect(container.querySelectorAll('[data-slot="slider-thumb"]').length).toBe(2)
+  })
+
+  it('falls back to a single thumb when only defaultValue is provided', () => {
+    const { container } = render(<Slider defaultValue={[30]} />)
+    expect(container.querySelectorAll('[data-slot="slider-thumb"]').length).toBe(1)
+  })
+
+  it('respects defaultValue with two entries (uncontrolled range)', () => {
+    const { container } = render(<Slider defaultValue={[20, 70]} />)
+    expect(container.querySelectorAll('[data-slot="slider-thumb"]').length).toBe(2)
+  })
+
+  it('exposes role="slider" with min/max/value via Radix', () => {
+    const { container } = render(
+      <Slider value={[25]} onValueChange={() => {}} min={0} max={100} step={1} />,
+    )
+    const thumb = container.querySelector('[role="slider"]')
+    expect(thumb).not.toBeNull()
+    expect(thumb?.getAttribute('aria-valuemin')).toBe('0')
+    expect(thumb?.getAttribute('aria-valuemax')).toBe('100')
+    expect(thumb?.getAttribute('aria-valuenow')).toBe('25')
+  })
+
+  it('applies horizontal-orientation classes by default', () => {
+    const { container } = render(<Slider value={[10]} onValueChange={() => {}} />)
+    const root = container.querySelector('[data-slot="slider-root"]') as HTMLElement
+    expect(root.className).toContain('h-5')
+    expect(root.className).not.toContain('flex-col')
+    const track = container.querySelector('[data-slot="slider-track"]') as HTMLElement
+    expect(track.className).toContain('h-1.5')
+    expect(track.className).toContain('w-full')
+  })
+
+  it('applies vertical-orientation classes when orientation="vertical"', () => {
+    const { container } = render(
+      <Slider value={[10]} onValueChange={() => {}} orientation="vertical" />,
+    )
+    const root = container.querySelector('[data-slot="slider-root"]') as HTMLElement
+    expect(root.className).toContain('flex-col')
+    expect(root.className).toContain('w-5')
+    const track = container.querySelector('[data-slot="slider-track"]') as HTMLElement
+    expect(track.className).toContain('w-1.5')
+    expect(track.className).toContain('h-full')
+  })
+
+  it('propagates disabled state to the root data attribute', () => {
+    const { container } = render(<Slider value={[10]} onValueChange={() => {}} disabled />)
+    const root = container.querySelector('[data-slot="slider-root"]') as HTMLElement
+    expect(root.getAttribute('data-disabled')).not.toBeNull()
+  })
+
+  it('forwards className without dropping orientation classes', () => {
+    const { container } = render(
+      <Slider value={[10]} onValueChange={() => {}} className="custom-class" />,
+    )
+    const root = container.querySelector('[data-slot="slider-root"]') as HTMLElement
+    expect(root.className).toContain('custom-class')
+    expect(root.className).toContain('h-5')
+    expect(root.className).toContain('touch-none')
+  })
+
+  it('forwards ref to the root element', () => {
+    const ref = React.createRef<HTMLSpanElement>()
+    render(<Slider ref={ref} value={[10]} onValueChange={() => {}} />)
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.getAttribute('data-slot')).toBe('slider-root')
+  })
+})

package/src/primitives/__tests__/step-indicator.test.tsx

@@ -0,0 +1,205 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render as rtlRender, fireEvent } from '@testing-library/react'
+import { StepIndicator, type StepIndicatorStep } from '../step-indicator'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+
+// StepIndicator uses useT() for the "Go to step: {label}" aria-label.
+// Wrap every render in an empty-dict I18nProvider so the primitive
+// falls back to its English fallback without real translations.
+const render: typeof rtlRender = (ui: React.ReactElement, options?: Parameters<typeof rtlRender>[1]) =>
+  rtlRender(
+    <I18nProvider locale="en" dict={{}}>
+      {ui}
+    </I18nProvider>,
+    options,
+  )
+
+const baseSteps: StepIndicatorStep[] = [
+  { id: 'account', label: 'Account', status: 'complete' },
+  { id: 'profile', label: 'Profile', status: 'current' },
+  { id: 'review', label: 'Review', status: 'pending' },
+]
+
+describe('StepIndicator', () => {
+  it('renders an ordered list with one item per step', () => {
+    const { container, getByText } = render(<StepIndicator steps={baseSteps} />)
+    const root = container.querySelector('[data-slot="step-indicator"]') as HTMLElement
+    expect(root.tagName).toBe('OL')
+    expect(root.getAttribute('aria-orientation')).toBe('horizontal')
+    const items = container.querySelectorAll('[data-slot="step-indicator-item"]')
+    expect(items.length).toBe(3)
+    expect(getByText('Account')).toBeInTheDocument()
+    expect(getByText('Profile')).toBeInTheDocument()
+    expect(getByText('Review')).toBeInTheDocument()
+  })
+
+  it('marks each step item with its status via data-status', () => {
+    const { container } = render(<StepIndicator steps={baseSteps} />)
+    const items = container.querySelectorAll('[data-slot="step-indicator-item"]')
+    expect(items[0].getAttribute('data-status')).toBe('complete')
+    expect(items[1].getAttribute('data-status')).toBe('current')
+    expect(items[2].getAttribute('data-status')).toBe('pending')
+  })
+
+  it('horizontal: places a ChevronRight connector between each pair of items', () => {
+    const { container } = render(<StepIndicator steps={baseSteps} />)
+    const connectors = container.querySelectorAll('[data-slot="step-indicator-connector"]')
+    // 3 items → 2 connectors (no trailing chevron after the last item)
+    expect(connectors.length).toBe(2)
+  })
+
+  it('horizontal: does NOT render a chevron after the last item', () => {
+    const { container } = render(
+      <StepIndicator
+        steps={[
+          { id: 'a', label: 'A', status: 'complete' },
+          { id: 'b', label: 'B', status: 'current' },
+        ]}
+      />,
+    )
+    expect(container.querySelectorAll('[data-slot="step-indicator-connector"]').length).toBe(1)
+  })
+
+  it('renders the complete dot with a Check icon (svg child)', () => {
+    const { container } = render(<StepIndicator steps={baseSteps} />)
+    const completeDot = container.querySelector(
+      '[data-slot="step-indicator-dot"][data-status="complete"]',
+    ) as HTMLElement
+    expect(completeDot.querySelector('svg')).not.toBeNull()
+  })
+
+  it('renders the current dot as a solid coloured circle (no inner glyph)', () => {
+    const { container } = render(<StepIndicator steps={baseSteps} />)
+    const currentDot = container.querySelector(
+      '[data-slot="step-indicator-dot"][data-status="current"]',
+    ) as HTMLElement
+    // No Check / X icon for current — just the coloured dot
+    expect(currentDot.querySelector('svg')).toBeNull()
+    expect(currentDot.className).toContain('bg-accent-indigo')
+  })
+
+  it('renders the pending dot as an outlined circle (no glyph, transparent bg)', () => {
+    const { container } = render(<StepIndicator steps={baseSteps} />)
+    const pendingDot = container.querySelector(
+      '[data-slot="step-indicator-dot"][data-status="pending"]',
+    ) as HTMLElement
+    expect(pendingDot.querySelector('svg')).toBeNull()
+    expect(pendingDot.className).toContain('border')
+    expect(pendingDot.className).toContain('bg-background')
+  })
+
+  it('renders the error dot with an X icon and status-error bg', () => {
+    const { container } = render(
+      <StepIndicator
+        steps={[
+          { id: 'a', label: 'A', status: 'complete' },
+          { id: 'b', label: 'B', status: 'error' },
+          { id: 'c', label: 'C', status: 'pending' },
+        ]}
+      />,
+    )
+    const errorDot = container.querySelector(
+      '[data-slot="step-indicator-dot"][data-status="error"]',
+    ) as HTMLElement
+    expect(errorDot.querySelector('svg')).not.toBeNull()
+    expect(errorDot.className).toContain('bg-status-error-icon')
+  })
+
+  it('marks the current step with aria-current="step"', () => {
+    const { container } = render(<StepIndicator steps={baseSteps} />)
+    const currentDot = container.querySelector(
+      '[data-slot="step-indicator-dot"][data-status="current"]',
+    ) as HTMLElement
+    expect(currentDot.getAttribute('aria-current')).toBe('step')
+    const pendingDot = container.querySelector(
+      '[data-slot="step-indicator-dot"][data-status="pending"]',
+    ) as HTMLElement
+    expect(pendingDot.getAttribute('aria-current')).toBeNull()
+  })
+
+  describe('vertical orientation', () => {
+    it('switches aria-orientation + flex-col on the root', () => {
+      const { container } = render(<StepIndicator steps={baseSteps} orientation="vertical" />)
+      const root = container.querySelector('[data-slot="step-indicator"]') as HTMLElement
+      expect(root.getAttribute('aria-orientation')).toBe('vertical')
+      expect(root.className).toContain('flex-col')
+    })
+
+    it('does NOT render chevron connectors between items (vertical = pill per item)', () => {
+      const { container } = render(<StepIndicator steps={baseSteps} orientation="vertical" />)
+      expect(container.querySelectorAll('[data-slot="step-indicator-connector"]').length).toBe(0)
+    })
+
+    it('renders the optional description below the label', () => {
+      const { getByText } = render(
+        <StepIndicator
+          steps={[{ id: 'a', label: 'Step A', description: 'Sub-text', status: 'current' }]}
+          orientation="vertical"
+        />,
+      )
+      expect(getByText('Step A')).toBeInTheDocument()
+      expect(getByText('Sub-text')).toBeInTheDocument()
+    })
+  })
+
+  describe('interactive mode', () => {
+    it('renders buttons for complete + current steps when onStepClick is provided', () => {
+      const onStepClick = jest.fn()
+      const { container } = render(
+        <StepIndicator steps={baseSteps} onStepClick={onStepClick} />,
+      )
+      const buttons = container.querySelectorAll('button')
+      // complete (1) + current (1) by default — pending is NOT clickable
+      expect(buttons.length).toBe(2)
+    })
+
+    it('fires onStepClick with the step id', () => {
+      const onStepClick = jest.fn()
+      const { container } = render(
+        <StepIndicator steps={baseSteps} onStepClick={onStepClick} />,
+      )
+      const buttons = container.querySelectorAll('button')
+      fireEvent.click(buttons[0])
+      expect(onStepClick).toHaveBeenCalledWith('account')
+    })
+
+    it('honors clickableStatuses to widen the click target', () => {
+      const onStepClick = jest.fn()
+      const { container } = render(
+        <StepIndicator
+          steps={baseSteps}
+          onStepClick={onStepClick}
+          clickableStatuses={['complete', 'current', 'pending']}
+        />,
+      )
+      expect(container.querySelectorAll('button').length).toBe(3)
+    })
+
+    it('does NOT render buttons when onStepClick is omitted', () => {
+      const { container } = render(<StepIndicator steps={baseSteps} />)
+      expect(container.querySelectorAll('button').length).toBe(0)
+    })
+  })
+
+  describe('size variants', () => {
+    it('default size applies size-5 to the dot', () => {
+      const { container } = render(<StepIndicator steps={baseSteps} />)
+      const dot = container.querySelector('[data-slot="step-indicator-dot"]') as HTMLElement
+      expect(dot.className).toContain('size-5')
+    })
+
+    it('sm size applies size-4', () => {
+      const { container } = render(<StepIndicator steps={baseSteps} size="sm" />)
+      const dot = container.querySelector('[data-slot="step-indicator-dot"]') as HTMLElement
+      expect(dot.className).toContain('size-4')
+    })
+  })
+
+  it('forwards ref to the root <ol> element', () => {
+    const ref = React.createRef<HTMLOListElement>()
+    render(<StepIndicator ref={ref} steps={baseSteps} />)
+    expect(ref.current?.getAttribute('data-slot')).toBe('step-indicator')
+  })
+})