@moontra/moonui 3.1.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",
@@ -101,6 +101,7 @@
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toast": "^1.2.14",
     "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.17",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.0",

package/src/components/ui/__tests__/button-group.test.tsx

@@ -0,0 +1,183 @@
+import { render, screen } from '@testing-library/react'
+import { ButtonGroup } from '../button-group'
+import { Button } from '../button'
+
+describe('ButtonGroup Component', () => {
+  it('renders a role="group" container with child buttons', () => {
+    render(
+      <ButtonGroup>
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+    )
+
+    const group = screen.getByRole('group')
+    expect(group).toBeInTheDocument()
+    expect(screen.getAllByRole('button')).toHaveLength(3)
+    expect(screen.getByRole('button', { name: /one/i })).toBeInTheDocument()
+  })
+
+  it('applies horizontal orientation by default', () => {
+    render(
+      <ButtonGroup>
+        <Button>One</Button>
+      </ButtonGroup>
+    )
+    const group = screen.getByRole('group')
+    expect(group).toHaveClass('inline-flex')
+    expect(group).toHaveClass('flex-row')
+    expect(group).not.toHaveClass('flex-col')
+  })
+
+  it('applies vertical orientation with flex-col', () => {
+    render(
+      <ButtonGroup orientation="vertical">
+        <Button>One</Button>
+      </ButtonGroup>
+    )
+    const group = screen.getByRole('group')
+    expect(group).toHaveClass('flex-col')
+    expect(group).not.toHaveClass('flex-row')
+  })
+
+  it('applies attached horizontal border-radius join classes to children (default)', () => {
+    render(
+      <ButtonGroup>
+        <Button>One</Button>
+        <Button>Two</Button>
+      </ButtonGroup>
+    )
+    const group = screen.getByRole('group')
+    expect(group).toHaveClass('[&>*:not(:first-child)]:rounded-l-none')
+    expect(group).toHaveClass('[&>*:not(:last-child)]:rounded-r-none')
+    expect(group).toHaveClass('[&>*:not(:first-child)]:-ml-px')
+  })
+
+  it('applies attached vertical border-radius join classes to children', () => {
+    render(
+      <ButtonGroup orientation="vertical">
+        <Button>One</Button>
+        <Button>Two</Button>
+      </ButtonGroup>
+    )
+    const group = screen.getByRole('group')
+    expect(group).toHaveClass('[&>*:not(:first-child)]:rounded-t-none')
+    expect(group).toHaveClass('[&>*:not(:last-child)]:rounded-b-none')
+    expect(group).toHaveClass('[&>*:not(:first-child)]:-mt-px')
+  })
+
+  it('uses spacing (gap-2) and no join classes when attached is false', () => {
+    render(
+      <ButtonGroup attached={false}>
+        <Button>One</Button>
+        <Button>Two</Button>
+      </ButtonGroup>
+    )
+    const group = screen.getByRole('group')
+    expect(group).toHaveClass('gap-2')
+    expect(group).not.toHaveClass('[&>*:not(:first-child)]:rounded-l-none')
+    expect(group).not.toHaveClass('[&>*:not(:first-child)]:-ml-px')
+  })
+
+  it('propagates size to child buttons via cloneElement', () => {
+    render(
+      <ButtonGroup size="sm">
+        <Button>One</Button>
+        <Button>Two</Button>
+      </ButtonGroup>
+    )
+    screen.getAllByRole('button').forEach((btn) => {
+      // sm size => h-8
+      expect(btn).toHaveClass('h-8')
+    })
+  })
+
+  it('propagates variant to child buttons via cloneElement', () => {
+    render(
+      <ButtonGroup variant="destructive">
+        <Button>One</Button>
+      </ButtonGroup>
+    )
+    const btn = screen.getByRole('button')
+    expect(btn).toHaveClass('bg-destructive')
+    expect(btn).not.toHaveClass('bg-primary')
+  })
+
+  it("lets a child's own size override the group size", () => {
+    render(
+      <ButtonGroup size="sm">
+        <Button size="lg">Large child</Button>
+      </ButtonGroup>
+    )
+    const btn = screen.getByRole('button')
+    // child's own lg => h-12, not group's sm h-8
+    expect(btn).toHaveClass('h-12')
+    expect(btn).not.toHaveClass('h-8')
+  })
+
+  it("lets a child's own variant override the group variant", () => {
+    render(
+      <ButtonGroup variant="destructive">
+        <Button variant="success">Success child</Button>
+      </ButtonGroup>
+    )
+    const btn = screen.getByRole('button')
+    expect(btn).toHaveClass('bg-success')
+    expect(btn).not.toHaveClass('bg-destructive')
+  })
+
+  it('does not propagate when neither size nor variant is provided', () => {
+    render(
+      <ButtonGroup>
+        <Button>Default</Button>
+      </ButtonGroup>
+    )
+    const btn = screen.getByRole('button')
+    // Button defaults: md => h-10, primary => bg-primary
+    expect(btn).toHaveClass('h-10')
+    expect(btn).toHaveClass('bg-primary')
+  })
+
+  it('gracefully passes non-Button children without injecting props', () => {
+    render(
+      <ButtonGroup size="sm">
+        <span data-testid="non-button">Not a button</span>
+        <Button>Real button</Button>
+      </ButtonGroup>
+    )
+    const span = screen.getByTestId('non-button')
+    expect(span).toBeInTheDocument()
+    // size prop must NOT leak onto a plain span as a DOM attribute
+    expect(span).not.toHaveAttribute('size')
+    // the real Button still receives the propagated size (h-8)
+    expect(screen.getByRole('button')).toHaveClass('h-8')
+  })
+
+  it('gracefully renders plain string children when propagating', () => {
+    render(<ButtonGroup size="sm">Just text</ButtonGroup>)
+    expect(screen.getByRole('group')).toHaveTextContent('Just text')
+  })
+
+  it('applies custom className', () => {
+    render(
+      <ButtonGroup className="custom-class">
+        <Button>One</Button>
+      </ButtonGroup>
+    )
+    expect(screen.getByRole('group')).toHaveClass('custom-class')
+  })
+
+  it('forwards ref to the container div', () => {
+    const ref = jest.fn()
+    render(
+      <ButtonGroup ref={ref}>
+        <Button>One</Button>
+      </ButtonGroup>
+    )
+    expect(ref).toHaveBeenCalled()
+    const el = ref.mock.calls[0][0]
+    expect(el).toBeInstanceOf(HTMLDivElement)
+    expect(el).toHaveAttribute('role', 'group')
+  })
+})

package/src/components/ui/__tests__/kbd.test.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Kbd } from '../kbd'
+
+describe('Kbd Component', () => {
+  it('renders a <kbd> element with children', () => {
+    render(<Kbd>K</Kbd>)
+    const kbd = screen.getByText('K')
+    expect(kbd).toBeInTheDocument()
+    expect(kbd.tagName).toBe('KBD')
+  })
+
+  it('applies base keyboard-key styles (token based)', () => {
+    render(<Kbd>Ctrl</Kbd>)
+    const kbd = screen.getByText('Ctrl')
+    expect(kbd).toHaveClass('inline-flex')
+    expect(kbd).toHaveClass('items-center')
+    expect(kbd).toHaveClass('border-border')
+    expect(kbd).toHaveClass('bg-muted')
+    expect(kbd).toHaveClass('text-muted-foreground')
+    expect(kbd).toHaveClass('font-mono')
+  })
+
+  it('applies custom className', () => {
+    render(<Kbd className="custom-kbd">Esc</Kbd>)
+    expect(screen.getByText('Esc')).toHaveClass('custom-kbd')
+  })
+
+  describe('Sizes', () => {
+    it('renders medium size by default', () => {
+      render(<Kbd>Enter</Kbd>)
+      const kbd = screen.getByText('Enter')
+      expect(kbd).toHaveClass('h-6')
+      expect(kbd).toHaveClass('min-w-6')
+      expect(kbd).toHaveClass('text-xs')
+    })
+
+    it('renders small size correctly', () => {
+      render(<Kbd size="sm">Shift</Kbd>)
+      const kbd = screen.getByText('Shift')
+      expect(kbd).toHaveClass('h-5')
+      expect(kbd).toHaveClass('min-w-5')
+      expect(kbd).toHaveClass('text-[10px]')
+    })
+
+    it('renders medium size explicitly', () => {
+      render(<Kbd size="md">Tab</Kbd>)
+      const kbd = screen.getByText('Tab')
+      expect(kbd).toHaveClass('h-6')
+      expect(kbd).toHaveClass('min-w-6')
+      expect(kbd).toHaveClass('text-xs')
+    })
+  })
+
+  describe('Children content', () => {
+    it('renders symbol content visibly', () => {
+      render(<Kbd>⌘</Kbd>)
+      expect(screen.getByText('⌘')).toBeInTheDocument()
+    })
+
+    it('renders multi-character content visibly', () => {
+      render(<Kbd>Ctrl</Kbd>)
+      expect(screen.getByText('Ctrl')).toBeInTheDocument()
+    })
+  })
+
+  describe('Ref forwarding', () => {
+    it('forwards ref to the kbd element', () => {
+      const ref = React.createRef<HTMLElement>()
+      render(<Kbd ref={ref}>K</Kbd>)
+      expect(ref.current).toBeInstanceOf(HTMLElement)
+      expect(ref.current?.tagName).toBe('KBD')
+    })
+  })
+
+  it('maintains displayName', () => {
+    expect(Kbd.displayName).toBe('Kbd')
+  })
+
+  it('passes through HTML attributes', () => {
+    render(<Kbd data-testid="kbd-test" id="kbd-1">K</Kbd>)
+    const kbd = screen.getByTestId('kbd-test')
+    expect(kbd).toHaveAttribute('id', 'kbd-1')
+  })
+})

package/src/components/ui/__tests__/rating.test.tsx

@@ -0,0 +1,218 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Rating, ratingVariants } from '../rating'
+
+describe('Rating Component', () => {
+  describe('Rendering', () => {
+    it('renders a radiogroup with the default aria-label', () => {
+      render(<Rating />)
+      const group = screen.getByRole('radiogroup')
+      expect(group).toBeInTheDocument()
+      expect(group).toHaveAttribute('aria-label', 'Rating')
+    })
+
+    it('renders the default number of stars (5)', () => {
+      const { container } = render(<Rating />)
+      const stars = container.querySelectorAll('[data-slot="rating-star"]')
+      expect(stars).toHaveLength(5)
+    })
+
+    it('renders a custom number of stars via max', () => {
+      const { container } = render(<Rating max={10} />)
+      const stars = container.querySelectorAll('[data-slot="rating-star"]')
+      expect(stars).toHaveLength(10)
+    })
+
+    it('renders one radio option per star in full precision', () => {
+      render(<Rating max={5} />)
+      expect(screen.getAllByRole('radio')).toHaveLength(5)
+    })
+
+    it('renders two radio options per star in half precision', () => {
+      render(<Rating max={5} precision="half" />)
+      expect(screen.getAllByRole('radio')).toHaveLength(10)
+    })
+
+    it('applies a custom className to the root', () => {
+      render(<Rating className="custom-rating" aria-label="Score" />)
+      expect(screen.getByRole('radiogroup')).toHaveClass('custom-rating')
+    })
+
+    it('respects a user-provided aria-label', () => {
+      render(<Rating aria-label="Product rating" />)
+      expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-label', 'Product rating')
+    })
+
+    it('forwards ref to the root div', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(<Rating ref={ref} />)
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('maintains displayName', () => {
+      expect(Rating.displayName).toBe('Rating')
+    })
+  })
+
+  describe('Sizes', () => {
+    it('applies default (md) size gap', () => {
+      render(<Rating />)
+      expect(screen.getByRole('radiogroup')).toHaveClass('gap-1')
+    })
+
+    it('applies sm size gap', () => {
+      render(<Rating size="sm" />)
+      expect(screen.getByRole('radiogroup')).toHaveClass('gap-0.5')
+    })
+
+    it('applies lg size gap', () => {
+      render(<Rating size="lg" />)
+      expect(screen.getByRole('radiogroup')).toHaveClass('gap-1.5')
+    })
+
+    it('exposes ratingVariants helper', () => {
+      expect(typeof ratingVariants).toBe('function')
+      expect(ratingVariants({ size: 'lg' })).toContain('gap-1.5')
+    })
+  })
+
+  describe('Interaction', () => {
+    it('calls onValueChange with the clicked star value', () => {
+      const onValueChange = jest.fn()
+      render(<Rating onValueChange={onValueChange} />)
+      fireEvent.click(screen.getByRole('radio', { name: '3 stars' }))
+      expect(onValueChange).toHaveBeenCalledWith(3)
+    })
+
+    it('uses singular label for the first star', () => {
+      const onValueChange = jest.fn()
+      render(<Rating onValueChange={onValueChange} />)
+      fireEvent.click(screen.getByRole('radio', { name: '1 star' }))
+      expect(onValueChange).toHaveBeenCalledWith(1)
+    })
+
+    it('updates uncontrolled value on click (defaultValue)', () => {
+      render(<Rating defaultValue={2} />)
+      // 2 stars initially checked
+      expect(screen.getByRole('radio', { name: '2 stars' })).toHaveAttribute('aria-checked', 'true')
+      fireEvent.click(screen.getByRole('radio', { name: '4 stars' }))
+      expect(screen.getByRole('radio', { name: '4 stars' })).toHaveAttribute('aria-checked', 'true')
+      expect(screen.getByRole('radio', { name: '2 stars' })).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('supports half precision selection', () => {
+      const onValueChange = jest.fn()
+      render(<Rating precision="half" onValueChange={onValueChange} />)
+      fireEvent.click(screen.getByRole('radio', { name: '2.5 stars' }))
+      expect(onValueChange).toHaveBeenCalledWith(2.5)
+    })
+  })
+
+  describe('Controlled behavior', () => {
+    it('reflects the controlled value prop', () => {
+      render(<Rating value={4} />)
+      expect(screen.getByRole('radio', { name: '4 stars' })).toHaveAttribute('aria-checked', 'true')
+      expect(screen.getByRole('radio', { name: '3 stars' })).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('does not change the controlled value internally on click but fires callback', () => {
+      const onValueChange = jest.fn()
+      render(<Rating value={2} onValueChange={onValueChange} />)
+      fireEvent.click(screen.getByRole('radio', { name: '5 stars' }))
+      // callback fired
+      expect(onValueChange).toHaveBeenCalledWith(5)
+      // but the displayed selection stays controlled at 2
+      expect(screen.getByRole('radio', { name: '2 stars' })).toHaveAttribute('aria-checked', 'true')
+      expect(screen.getByRole('radio', { name: '5 stars' })).toHaveAttribute('aria-checked', 'false')
+    })
+  })
+
+  describe('Keyboard navigation', () => {
+    it('increments value with ArrowRight', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={3} onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenCalledWith(4)
+    })
+
+    it('decrements value with ArrowLeft', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={3} onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowLeft' })
+      expect(onValueChange).toHaveBeenCalledWith(2)
+    })
+
+    it('sets minimum with Home and maximum with End', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={3} onValueChange={onValueChange} />)
+      const group = screen.getByRole('radiogroup')
+      fireEvent.keyDown(group, { key: 'Home' })
+      expect(onValueChange).toHaveBeenCalledWith(1)
+      fireEvent.keyDown(group, { key: 'End' })
+      expect(onValueChange).toHaveBeenCalledWith(5)
+    })
+
+    it('clamps at max on ArrowRight', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={5} onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenCalledWith(5)
+    })
+
+    it('steps by 0.5 in half precision', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={3} precision="half" onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenCalledWith(3.5)
+    })
+
+    it('is focusable when interactive', () => {
+      render(<Rating />)
+      expect(screen.getByRole('radiogroup')).toHaveAttribute('tabindex', '0')
+    })
+  })
+
+  describe('ReadOnly mode', () => {
+    it('marks the group as aria-readonly and non-focusable', () => {
+      render(<Rating value={3} readOnly />)
+      const group = screen.getByRole('radiogroup')
+      expect(group).toHaveAttribute('aria-readonly', 'true')
+      expect(group).not.toHaveAttribute('tabindex')
+    })
+
+    it('renders no interactive radio options', () => {
+      render(<Rating value={3} readOnly />)
+      expect(screen.queryAllByRole('radio')).toHaveLength(0)
+    })
+
+    it('does not respond to keyboard input', () => {
+      const onValueChange = jest.fn()
+      render(<Rating value={3} readOnly onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowRight' })
+      expect(onValueChange).not.toHaveBeenCalled()
+    })
+
+    it('still renders the star visuals', () => {
+      const { container } = render(<Rating value={3} readOnly />)
+      expect(container.querySelectorAll('[data-slot="rating-star"]')).toHaveLength(5)
+    })
+  })
+
+  describe('Custom icon', () => {
+    it('renders a custom icon instead of the default Star', () => {
+      const CustomIcon = <svg data-testid="custom-icon" />
+      const { container } = render(<Rating icon={CustomIcon} max={3} />)
+      // Both empty and filled layers per star -> 2 icons per star
+      expect(container.querySelectorAll('[data-testid="custom-icon"]').length).toBeGreaterThanOrEqual(3)
+    })
+  })
+
+  describe('HTML attributes', () => {
+    it('passes through arbitrary HTML attributes', () => {
+      render(<Rating data-testid="my-rating" id="rating-1" />)
+      const group = screen.getByTestId('my-rating')
+      expect(group).toHaveAttribute('id', 'rating-1')
+    })
+  })
+})

package/src/components/ui/__tests__/spinner.test.tsx

@@ -0,0 +1,141 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Spinner, spinnerVariants } from '../spinner'
+
+describe('Spinner Component', () => {
+  describe('Rendering', () => {
+    it('renders correctly with default props', () => {
+      render(<Spinner data-testid="spinner" />)
+      const spinner = screen.getByTestId('spinner')
+      expect(spinner).toBeInTheDocument()
+    })
+
+    it('applies custom className', () => {
+      render(<Spinner className="custom-spinner" data-testid="spinner" />)
+      expect(screen.getByTestId('spinner')).toHaveClass('custom-spinner')
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(<Spinner ref={ref} />)
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('maintains displayName', () => {
+      expect(Spinner.displayName).toBe('Spinner')
+    })
+
+    it('passes through HTML attributes', () => {
+      render(<Spinner data-testid="spinner" id="loader-1" />)
+      expect(screen.getByTestId('spinner')).toHaveAttribute('id', 'loader-1')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role="status"', () => {
+      render(<Spinner />)
+      expect(screen.getByRole('status')).toBeInTheDocument()
+    })
+
+    it('has aria-live="polite"', () => {
+      render(<Spinner />)
+      expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite')
+    })
+
+    it('renders default accessible label "Loading" visually hidden', () => {
+      render(<Spinner />)
+      const label = screen.getByText('Loading')
+      expect(label).toBeInTheDocument()
+      expect(label).toHaveClass('sr-only')
+    })
+
+    it('contains the sr-only label inside the status region', () => {
+      render(<Spinner />)
+      const status = screen.getByRole('status')
+      expect(status).toContainElement(screen.getByText('Loading'))
+    })
+
+    it('renders a custom label', () => {
+      render(<Spinner label="Yükleniyor" />)
+      const label = screen.getByText('Yükleniyor')
+      expect(label).toHaveClass('sr-only')
+      expect(screen.queryByText('Loading')).not.toBeInTheDocument()
+    })
+
+    it('marks the visual indicator as aria-hidden', () => {
+      render(<Spinner />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveAttribute('aria-hidden', 'true')
+    })
+  })
+
+  describe('Animation & reduced motion', () => {
+    it('applies animate-spin to the default ring', () => {
+      render(<Spinner />)
+      const ring = screen.getByRole('status').querySelector('span[aria-hidden="true"]')
+      expect(ring).toHaveClass('animate-spin')
+    })
+
+    it('disables animation under prefers-reduced-motion', () => {
+      render(<Spinner />)
+      const ring = screen.getByRole('status').querySelector('span[aria-hidden="true"]')
+      expect(ring).toHaveClass('motion-reduce:animate-none')
+    })
+  })
+
+  describe('Size variants', () => {
+    it('applies md size classes by default', () => {
+      render(<Spinner />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveClass('h-6', 'w-6')
+    })
+
+    it('applies sm size classes', () => {
+      render(<Spinner size="sm" />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveClass('h-4', 'w-4')
+    })
+
+    it('applies lg size classes', () => {
+      render(<Spinner size="lg" />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveClass('h-8', 'w-8')
+    })
+
+    it('applies xl size classes', () => {
+      render(<Spinner size="xl" />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveClass('h-10', 'w-10')
+    })
+
+    it('spinnerVariants generates size classes directly', () => {
+      expect(spinnerVariants({ size: 'sm' })).toContain('h-4')
+      expect(spinnerVariants({ size: 'xl' })).toContain('h-10')
+    })
+  })
+
+  describe('Dots variant', () => {
+    it('renders three dots and no ring', () => {
+      render(<Spinner variant="dots" />)
+      const status = screen.getByRole('status')
+      expect(status.querySelector('.animate-spin')).not.toBeInTheDocument()
+      const dots = status.querySelectorAll('.animate-bounce')
+      expect(dots).toHaveLength(3)
+    })
+
+    it('keeps the sr-only label in dots variant', () => {
+      render(<Spinner variant="dots" label="Please wait" />)
+      const status = screen.getByRole('status')
+      const label = screen.getByText('Please wait')
+      expect(label).toHaveClass('sr-only')
+      expect(status).toContainElement(label)
+    })
+
+    it('disables dot animation under prefers-reduced-motion', () => {
+      render(<Spinner variant="dots" />)
+      const dot = screen.getByRole('status').querySelector('.animate-bounce')
+      expect(dot).toHaveClass('motion-reduce:animate-none')
+    })
+  })
+})