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

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

@@ -0,0 +1,268 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render as rtlRender, fireEvent } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { Pagination, buildPaginationItems } from '../pagination'
+
+// Pagination uses useT() for aria-labels; wrap every render in an
+// empty-dict I18nProvider so the primitive falls back to its English
+// hardcoded defaults ("First page", "Previous page", ...).
+const render: typeof rtlRender = (ui: React.ReactElement, options?: Parameters<typeof rtlRender>[1]) =>
+  rtlRender(
+    <I18nProvider locale="en" dict={{}}>
+      {ui}
+    </I18nProvider>,
+    options,
+  )
+
+describe('buildPaginationItems', () => {
+  it('returns every page when totalPages <= total slots', () => {
+    expect(buildPaginationItems(1, 5, 1, 1)).toEqual([1, 2, 3, 4, 5])
+    expect(buildPaginationItems(3, 7, 1, 1)).toEqual([1, 2, 3, 4, 5, 6, 7])
+  })
+
+  it('inserts left + right ellipsis around the current page in the middle', () => {
+    const items = buildPaginationItems(10, 20, 1, 1)
+    expect(items[0]).toBe(1)
+    expect(items[items.length - 1]).toBe(20)
+    expect(items).toContain('ellipsis-left')
+    expect(items).toContain('ellipsis-right')
+    expect(items).toContain(10)
+  })
+
+  it('omits left ellipsis when current page is near the start', () => {
+    const items = buildPaginationItems(2, 20, 1, 1)
+    expect(items.includes('ellipsis-left')).toBe(false)
+    expect(items.includes('ellipsis-right')).toBe(true)
+    expect(items[0]).toBe(1)
+    expect(items[items.length - 1]).toBe(20)
+  })
+
+  it('omits right ellipsis when current page is near the end', () => {
+    const items = buildPaginationItems(19, 20, 1, 1)
+    expect(items.includes('ellipsis-right')).toBe(false)
+    expect(items.includes('ellipsis-left')).toBe(true)
+  })
+
+  it('returns empty array for totalPages = 0', () => {
+    expect(buildPaginationItems(1, 0, 1, 1)).toEqual([])
+  })
+})
+
+describe('Pagination', () => {
+  it('renders the navigation landmark with default aria-label', () => {
+    const { container } = render(
+      <Pagination page={1} pageSize={10} total={100} onPageChange={() => {}} />,
+    )
+    const nav = container.querySelector('[data-slot="pagination"]') as HTMLElement
+    expect(nav.tagName).toBe('NAV')
+    expect(nav.getAttribute('aria-label')).toBe('Pagination')
+  })
+
+  it('renders "Page X of Y" info by default', () => {
+    const { container } = render(
+      <Pagination page={2} pageSize={10} total={100} onPageChange={() => {}} />,
+    )
+    const info = container.querySelector('[data-slot="pagination-info"]') as HTMLElement
+    expect(info.textContent).toBe('Page 2 of 10')
+  })
+
+  it('hides the page info when showInfo=false', () => {
+    const { container } = render(
+      <Pagination
+        page={1}
+        pageSize={10}
+        total={100}
+        onPageChange={() => {}}
+        showInfo={false}
+      />,
+    )
+    expect(container.querySelector('[data-slot="pagination-info"]')).toBeNull()
+  })
+
+  it('renders first, prev, next, last buttons by default', () => {
+    const { container } = render(
+      <Pagination page={5} pageSize={10} total={100} onPageChange={() => {}} />,
+    )
+    expect(container.querySelector('[data-slot="pagination-first"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="pagination-prev"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="pagination-next"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="pagination-last"]')).not.toBeNull()
+  })
+
+  it('hides first/last buttons when showFirstLast=false', () => {
+    const { container } = render(
+      <Pagination
+        page={1}
+        pageSize={10}
+        total={100}
+        onPageChange={() => {}}
+        showFirstLast={false}
+      />,
+    )
+    expect(container.querySelector('[data-slot="pagination-first"]')).toBeNull()
+    expect(container.querySelector('[data-slot="pagination-last"]')).toBeNull()
+  })
+
+  it('hides prev/next buttons when showPrevNext=false', () => {
+    const { container } = render(
+      <Pagination
+        page={1}
+        pageSize={10}
+        total={100}
+        onPageChange={() => {}}
+        showPrevNext={false}
+      />,
+    )
+    expect(container.querySelector('[data-slot="pagination-prev"]')).toBeNull()
+    expect(container.querySelector('[data-slot="pagination-next"]')).toBeNull()
+  })
+
+  it('marks the current page button with aria-current="page" and data-state="on"', () => {
+    const { container } = render(
+      <Pagination page={3} pageSize={10} total={100} onPageChange={() => {}} />,
+    )
+    const currentPage = container.querySelector(
+      '[data-slot="pagination-page"][data-state="on"]',
+    ) as HTMLButtonElement
+    expect(currentPage).not.toBeNull()
+    expect(currentPage.textContent).toBe('3')
+    expect(currentPage.getAttribute('aria-current')).toBe('page')
+  })
+
+  it('fires onPageChange when a page button is clicked', () => {
+    const onPageChange = jest.fn()
+    const { container } = render(
+      <Pagination page={1} pageSize={10} total={100} onPageChange={onPageChange} />,
+    )
+    const pageButtons = container.querySelectorAll('[data-slot="pagination-page"]')
+    fireEvent.click(pageButtons[2])
+    expect(onPageChange).toHaveBeenCalledWith(3)
+  })
+
+  it('disables the first / prev buttons on page 1', () => {
+    const { container } = render(
+      <Pagination page={1} pageSize={10} total={100} onPageChange={() => {}} />,
+    )
+    expect(
+      (container.querySelector('[data-slot="pagination-first"]') as HTMLButtonElement).disabled,
+    ).toBe(true)
+    expect(
+      (container.querySelector('[data-slot="pagination-prev"]') as HTMLButtonElement).disabled,
+    ).toBe(true)
+  })
+
+  it('disables the next / last buttons on the last page', () => {
+    const { container } = render(
+      <Pagination page={10} pageSize={10} total={100} onPageChange={() => {}} />,
+    )
+    expect(
+      (container.querySelector('[data-slot="pagination-next"]') as HTMLButtonElement).disabled,
+    ).toBe(true)
+    expect(
+      (container.querySelector('[data-slot="pagination-last"]') as HTMLButtonElement).disabled,
+    ).toBe(true)
+  })
+
+  it('Last button jumps to the final page', () => {
+    const onPageChange = jest.fn()
+    const { container } = render(
+      <Pagination page={3} pageSize={10} total={100} onPageChange={onPageChange} />,
+    )
+    const lastButton = container.querySelector(
+      '[data-slot="pagination-last"]',
+    ) as HTMLButtonElement
+    fireEvent.click(lastButton)
+    expect(onPageChange).toHaveBeenCalledWith(10)
+  })
+
+  it('Prev button jumps to the previous page', () => {
+    const onPageChange = jest.fn()
+    const { container } = render(
+      <Pagination page={5} pageSize={10} total={100} onPageChange={onPageChange} />,
+    )
+    const prevButton = container.querySelector(
+      '[data-slot="pagination-prev"]',
+    ) as HTMLButtonElement
+    fireEvent.click(prevButton)
+    expect(onPageChange).toHaveBeenCalledWith(4)
+  })
+
+  it('renders the page-size select when onPageSizeChange is provided', () => {
+    const { container } = render(
+      <Pagination
+        page={1}
+        pageSize={25}
+        total={100}
+        onPageChange={() => {}}
+        onPageSizeChange={() => {}}
+      />,
+    )
+    expect(container.querySelector('[data-slot="pagination-page-size"]')).not.toBeNull()
+  })
+
+  it('does NOT render the page-size select without onPageSizeChange', () => {
+    const { container } = render(
+      <Pagination page={1} pageSize={25} total={100} onPageChange={() => {}} />,
+    )
+    expect(container.querySelector('[data-slot="pagination-page-size"]')).toBeNull()
+  })
+
+  it('renders ellipsis placeholders when totalPages is large', () => {
+    const { container } = render(
+      <Pagination page={10} pageSize={10} total={200} onPageChange={() => {}} />,
+    )
+    const ellipses = container.querySelectorAll('[data-slot="pagination-ellipsis"]')
+    expect(ellipses.length).toBeGreaterThan(0)
+    expect(ellipses[0].textContent).toBe('…')
+  })
+
+  it('clamps out-of-range page input to [1..totalPages]', () => {
+    const { container } = render(
+      <Pagination page={999} pageSize={10} total={50} onPageChange={() => {}} />,
+    )
+    const info = container.querySelector('[data-slot="pagination-info"]') as HTMLElement
+    expect(info.textContent).toBe('Page 5 of 5')
+  })
+
+  it('disables all controls when disabled prop is set', () => {
+    const onPageChange = jest.fn()
+    const { container } = render(
+      <Pagination
+        page={5}
+        pageSize={10}
+        total={100}
+        onPageChange={onPageChange}
+        disabled
+      />,
+    )
+    const buttons = container.querySelectorAll('button')
+    buttons.forEach((btn) => expect(btn.disabled).toBe(true))
+    fireEvent.click(buttons[0])
+    expect(onPageChange).not.toHaveBeenCalled()
+  })
+
+  it('honors a custom formatPageInfo callback', () => {
+    const { container } = render(
+      <Pagination
+        page={3}
+        pageSize={10}
+        total={100}
+        onPageChange={() => {}}
+        formatPageInfo={(p, t) => `Strona ${p} z ${t}`}
+      />,
+    )
+    expect(
+      container.querySelector('[data-slot="pagination-info"]')?.textContent,
+    ).toBe('Strona 3 z 10')
+  })
+
+  it('forwards ref to the root nav element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(
+      <Pagination ref={ref} page={1} pageSize={10} total={100} onPageChange={() => {}} />,
+    )
+    expect(ref.current?.getAttribute('data-slot')).toBe('pagination')
+  })
+})

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

@@ -0,0 +1,222 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render } from '@testing-library/react'
+
+import { Progress, CircularProgress } from '../progress'
+
+describe('Progress (linear)', () => {
+  it('renders bar role + aria attrs with computed percentage width', () => {
+    const { container } = render(<Progress value={42} />)
+    const bar = container.querySelector('[data-slot="progress"]') as HTMLElement
+    expect(bar).not.toBeNull()
+    expect(bar.getAttribute('role')).toBe('progressbar')
+    expect(bar.getAttribute('aria-valuenow')).toBe('42')
+    expect(bar.getAttribute('aria-valuemin')).toBe('0')
+    expect(bar.getAttribute('aria-valuemax')).toBe('100')
+    const fill = bar.querySelector('[data-slot="progress-fill"]') as HTMLElement
+    expect(fill).not.toBeNull()
+    expect(fill.style.width).toBe('42%')
+  })
+
+  it('clamps value to [0, max]', () => {
+    const { container, rerender } = render(<Progress value={-50} />)
+    let fill = container.querySelector('[data-slot="progress-fill"]') as HTMLElement
+    expect(fill.style.width).toBe('0%')
+    rerender(<Progress value={250} max={100} />)
+    fill = container.querySelector('[data-slot="progress-fill"]') as HTMLElement
+    expect(fill.style.width).toBe('100%')
+  })
+
+  it('honors custom max', () => {
+    const { container } = render(<Progress value={5} max={10} />)
+    const fill = container.querySelector('[data-slot="progress-fill"]') as HTMLElement
+    expect(fill.style.width).toBe('50%')
+    const bar = container.querySelector('[data-slot="progress"]') as HTMLElement
+    expect(bar.getAttribute('aria-valuemax')).toBe('10')
+  })
+
+  it('applies size variant classes', () => {
+    const { container, rerender } = render(<Progress value={50} />)
+    let bar = container.querySelector('[data-slot="progress"]') as HTMLElement
+    expect(bar.className).toContain('h-2')
+
+    rerender(<Progress value={50} size="sm" />)
+    bar = container.querySelector('[data-slot="progress"]') as HTMLElement
+    expect(bar.className).toContain('h-1')
+
+    rerender(<Progress value={50} size="lg" />)
+    bar = container.querySelector('[data-slot="progress"]') as HTMLElement
+    expect(bar.className).toContain('h-3')
+  })
+
+  it('applies tone variant classes to the fill', () => {
+    const cases: Array<{ tone: 'accent' | 'success' | 'warning' | 'destructive' | 'muted'; cls: string }> = [
+      { tone: 'accent', cls: 'bg-accent-indigo' },
+      { tone: 'success', cls: 'bg-status-success-icon' },
+      { tone: 'warning', cls: 'bg-status-warning-icon' },
+      { tone: 'destructive', cls: 'bg-status-error-icon' },
+      { tone: 'muted', cls: 'bg-muted-foreground' },
+    ]
+    for (const { tone, cls } of cases) {
+      const { container, unmount } = render(<Progress value={50} tone={tone} />)
+      const fill = container.querySelector('[data-slot="progress-fill"]') as HTMLElement
+      expect(fill.className).toContain(cls)
+      const bar = container.querySelector('[data-slot="progress"]') as HTMLElement
+      expect(bar.getAttribute('data-tone')).toBe(tone)
+      unmount()
+    }
+  })
+
+  it('renders the label + value row when `label` is provided and showValue=true', () => {
+    const { container } = render(
+      <Progress value={80} label="Data Storage" showValue description="Upgrade to unlock more." />,
+    )
+    expect(container.querySelector('[data-slot="progress-wrapper"]')).not.toBeNull()
+    const label = container.querySelector('[data-slot="progress-label"]') as HTMLElement
+    expect(label.textContent).toBe('Data Storage')
+    const value = container.querySelector('[data-slot="progress-value"]') as HTMLElement
+    expect(value.textContent).toBe('80%')
+    const description = container.querySelector('[data-slot="progress-description"]') as HTMLElement
+    expect(description.textContent).toBe('Upgrade to unlock more.')
+  })
+
+  it('omits the label row entirely when no label/showValue/description is set', () => {
+    const { container } = render(<Progress value={50} />)
+    expect(container.querySelector('[data-slot="progress-wrapper"]')).toBeNull()
+    expect(container.querySelector('[data-slot="progress-label"]')).toBeNull()
+    expect(container.querySelector('[data-slot="progress-value"]')).toBeNull()
+    expect(container.querySelector('[data-slot="progress-description"]')).toBeNull()
+  })
+
+  it('renders showValue alone (no label) — empty label slot stays in place for layout', () => {
+    const { container } = render(<Progress value={42} showValue />)
+    expect(container.querySelector('[data-slot="progress-wrapper"]')).not.toBeNull()
+    const value = container.querySelector('[data-slot="progress-value"]') as HTMLElement
+    expect(value.textContent).toBe('42%')
+  })
+
+  it('forwards className to the bar without dropping track classes', () => {
+    const { container } = render(<Progress value={50} className="custom-class" />)
+    const bar = container.querySelector('[data-slot="progress"]') as HTMLElement
+    expect(bar.className).toContain('custom-class')
+    expect(bar.className).toContain('rounded-full')
+    expect(bar.className).toContain('bg-input')
+  })
+
+  it('forwards fillClassName to override the fill', () => {
+    const { container } = render(
+      <Progress value={50} fillClassName="custom-fill" />,
+    )
+    const fill = container.querySelector('[data-slot="progress-fill"]') as HTMLElement
+    expect(fill.className).toContain('custom-fill')
+    // Default tone class still applied (cn merges, doesn't replace).
+    expect(fill.className).toContain('bg-accent-indigo')
+  })
+})
+
+describe('CircularProgress', () => {
+  it('renders an SVG with two concentric circles + aria attrs', () => {
+    const { container } = render(<CircularProgress value={50} />)
+    const root = container.querySelector('[data-slot="circular-progress"]') as HTMLElement
+    expect(root).not.toBeNull()
+    expect(root.getAttribute('role')).toBe('progressbar')
+    expect(root.getAttribute('aria-valuenow')).toBe('50')
+    expect(root.getAttribute('aria-valuemin')).toBe('0')
+    expect(root.getAttribute('aria-valuemax')).toBe('100')
+    expect(root.getAttribute('aria-label')).toBe('50%')
+    const track = root.querySelector('[data-slot="circular-progress-track"]') as SVGCircleElement
+    const fill = root.querySelector('[data-slot="circular-progress-fill"]') as SVGCircleElement
+    expect(track).not.toBeNull()
+    expect(fill).not.toBeNull()
+  })
+
+  it('computes stroke-dashoffset from percentage', () => {
+    const { container } = render(<CircularProgress value={75} size="default" />)
+    const fill = container.querySelector('[data-slot="circular-progress-fill"]') as SVGCircleElement
+    // size="default": box=48, stroke=4, radius=22, circumference≈138.23, dashOffset≈34.56
+    const dashArray = parseFloat(fill.getAttribute('stroke-dasharray') ?? '0')
+    const dashOffset = parseFloat(fill.getAttribute('stroke-dashoffset') ?? '0')
+    expect(dashArray).toBeCloseTo(2 * Math.PI * 22, 1)
+    expect(dashOffset).toBeCloseTo(dashArray * 0.25, 1)
+  })
+
+  it('clamps value', () => {
+    const { container, rerender } = render(<CircularProgress value={-10} />)
+    let fill = container.querySelector('[data-slot="circular-progress-fill"]') as SVGCircleElement
+    const dashArray = parseFloat(fill.getAttribute('stroke-dasharray') ?? '0')
+    expect(parseFloat(fill.getAttribute('stroke-dashoffset') ?? '0')).toBeCloseTo(dashArray, 1)
+
+    rerender(<CircularProgress value={500} max={100} />)
+    fill = container.querySelector('[data-slot="circular-progress-fill"]') as SVGCircleElement
+    expect(parseFloat(fill.getAttribute('stroke-dashoffset') ?? '0')).toBeCloseTo(0, 1)
+  })
+
+  it('renders the centre value badge when showValue=true', () => {
+    const { container } = render(<CircularProgress value={42} showValue />)
+    const valueLabel = container.querySelector(
+      '[data-slot="circular-progress-value"]',
+    ) as HTMLElement
+    expect(valueLabel).not.toBeNull()
+    expect(valueLabel.textContent).toBe('42%')
+  })
+
+  it('replaces the centre value with children when both are provided', () => {
+    const { container } = render(
+      <CircularProgress value={42} showValue>
+        <span data-testid="custom-center">3/7</span>
+      </CircularProgress>,
+    )
+    const valueLabel = container.querySelector(
+      '[data-slot="circular-progress-value"]',
+    ) as HTMLElement
+    expect(valueLabel.querySelector('[data-testid="custom-center"]')).not.toBeNull()
+    expect(valueLabel.textContent).toBe('3/7')
+  })
+
+  it('honors ariaLabel override', () => {
+    const { container } = render(
+      <CircularProgress value={50} ariaLabel="Sprint completion" />,
+    )
+    const root = container.querySelector('[data-slot="circular-progress"]') as HTMLElement
+    expect(root.getAttribute('aria-label')).toBe('Sprint completion')
+  })
+
+  it('applies tone variant strokes', () => {
+    const cases: Array<{ tone: 'accent' | 'success' | 'warning' | 'destructive' | 'muted'; cls: string }> = [
+      { tone: 'accent', cls: 'stroke-accent-indigo' },
+      { tone: 'success', cls: 'stroke-status-success-icon' },
+      { tone: 'warning', cls: 'stroke-status-warning-icon' },
+      { tone: 'destructive', cls: 'stroke-status-error-icon' },
+      { tone: 'muted', cls: 'stroke-muted-foreground' },
+    ]
+    for (const { tone, cls } of cases) {
+      const { container, unmount } = render(<CircularProgress value={50} tone={tone} />)
+      const fill = container.querySelector(
+        '[data-slot="circular-progress-fill"]',
+      ) as SVGCircleElement
+      expect(fill.getAttribute('class')).toContain(cls)
+      const root = container.querySelector('[data-slot="circular-progress"]') as HTMLElement
+      expect(root.getAttribute('data-tone')).toBe(tone)
+      unmount()
+    }
+  })
+
+  it('honors size variants (box dimensions)', () => {
+    const cases: Array<{ size: 'xs' | 'sm' | 'default' | 'lg'; box: number }> = [
+      { size: 'xs', box: 24 },
+      { size: 'sm', box: 32 },
+      { size: 'default', box: 48 },
+      { size: 'lg', box: 64 },
+    ]
+    for (const { size, box } of cases) {
+      const { container, unmount } = render(<CircularProgress value={50} size={size} />)
+      const root = container.querySelector('[data-slot="circular-progress"]') as HTMLElement
+      expect(root.getAttribute('data-size')).toBe(size)
+      const svg = root.querySelector('svg') as SVGElement
+      expect(svg.getAttribute('width')).toBe(String(box))
+      expect(svg.getAttribute('height')).toBe(String(box))
+      unmount()
+    }
+  })
+})

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

@@ -0,0 +1,164 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render as rtlRender, fireEvent } from '@testing-library/react'
+import { Rating } from '../rating'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+
+// Rating uses useT() for read-only summary + item aria-labels.
+// Wrap every render in an empty-dict I18nProvider so the primitive
+// falls back to its English fallbacks without real translations.
+const render: typeof rtlRender = (ui: React.ReactElement, options?: Parameters<typeof rtlRender>[1]) =>
+  rtlRender(
+    <I18nProvider locale="en" dict={{}}>
+      {ui}
+    </I18nProvider>,
+    options,
+  )
+
+describe('Rating', () => {
+  describe('read-only mode (no onChange)', () => {
+    it('renders role="img" with aria-label "{value} out of {max}" by default', () => {
+      const { getByRole } = render(<Rating value={3} max={5} />)
+      const node = getByRole('img')
+      expect(node.getAttribute('aria-label')).toBe('3 out of 5')
+    })
+
+    it('honors a custom aria-label', () => {
+      const { getByRole } = render(<Rating value={4} max={5} aria-label="Average review score" />)
+      expect(getByRole('img').getAttribute('aria-label')).toBe('Average review score')
+    })
+
+    it('renders max items, marking the first `value` as filled', () => {
+      const { container } = render(<Rating value={3} max={5} />)
+      const items = container.querySelectorAll('[data-slot="rating-item"]')
+      expect(items.length).toBe(5)
+      expect(items[0].getAttribute('data-fill')).toBe('full')
+      expect(items[1].getAttribute('data-fill')).toBe('full')
+      expect(items[2].getAttribute('data-fill')).toBe('full')
+      expect(items[3].getAttribute('data-fill')).toBe('empty')
+      expect(items[4].getAttribute('data-fill')).toBe('empty')
+    })
+
+    it('does NOT render buttons when no onChange is provided', () => {
+      const { container } = render(<Rating value={3} max={5} />)
+      expect(container.querySelector('button')).toBeNull()
+    })
+
+    it('renders a half-fill state when allowHalf and value falls between integers', () => {
+      const { container } = render(<Rating value={3.5} max={5} allowHalf />)
+      const items = container.querySelectorAll('[data-slot="rating-item"]')
+      expect(items[2].getAttribute('data-fill')).toBe('full')
+      expect(items[3].getAttribute('data-fill')).toBe('half')
+      expect(items[4].getAttribute('data-fill')).toBe('empty')
+    })
+
+    it('treats half values as full when allowHalf is false (default)', () => {
+      const { container } = render(<Rating value={3.5} max={5} />)
+      const items = container.querySelectorAll('[data-slot="rating-item"]')
+      // 3.5 with allowHalf=false → first 3 full, 4th is empty (cannot half)
+      expect(items[2].getAttribute('data-fill')).toBe('full')
+      expect(items[3].getAttribute('data-fill')).toBe('empty')
+    })
+  })
+
+  describe('interactive mode (onChange provided)', () => {
+    it('renders role="radiogroup" with N role="radio" buttons', () => {
+      const { getByRole, getAllByRole } = render(
+        <Rating value={2} max={5} onChange={() => {}} aria-label="Rate" />,
+      )
+      expect(getByRole('radiogroup', { name: 'Rate' })).toBeInTheDocument()
+      expect(getAllByRole('radio').length).toBe(5)
+    })
+
+    it('fires onChange with (index + 1) on full-click without allowHalf', () => {
+      const onChange = jest.fn()
+      const { getAllByRole } = render(
+        <Rating value={0} max={5} onChange={onChange} aria-label="Rate" />,
+      )
+      fireEvent.click(getAllByRole('radio')[2])
+      expect(onChange).toHaveBeenCalledWith(3)
+    })
+
+    it('does not fire onChange when disabled', () => {
+      const onChange = jest.fn()
+      const { getAllByRole } = render(
+        <Rating value={0} max={5} onChange={onChange} disabled aria-label="Rate" />,
+      )
+      fireEvent.click(getAllByRole('radio')[3])
+      expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it('marks aria-checked on items that are filled (full or half)', () => {
+      const { getAllByRole } = render(
+        <Rating value={2.5} max={5} onChange={() => {}} allowHalf aria-label="Rate" />,
+      )
+      const items = getAllByRole('radio')
+      expect(items[0].getAttribute('aria-checked')).toBe('true')
+      expect(items[1].getAttribute('aria-checked')).toBe('true')
+      expect(items[2].getAttribute('aria-checked')).toBe('true') // half counts as checked
+      expect(items[3].getAttribute('aria-checked')).toBe('false')
+    })
+
+    it('moves the value with ArrowRight / ArrowLeft keys', () => {
+      const onChange = jest.fn()
+      const { getAllByRole } = render(
+        <Rating value={2} max={5} onChange={onChange} aria-label="Rate" />,
+      )
+      fireEvent.keyDown(getAllByRole('radio')[1], { key: 'ArrowRight' })
+      expect(onChange).toHaveBeenLastCalledWith(3)
+      fireEvent.keyDown(getAllByRole('radio')[1], { key: 'ArrowLeft' })
+      expect(onChange).toHaveBeenLastCalledWith(1)
+    })
+
+    it('Home / End keys snap to the first / last position', () => {
+      const onChange = jest.fn()
+      const { getAllByRole } = render(
+        <Rating value={3} max={5} onChange={onChange} aria-label="Rate" />,
+      )
+      fireEvent.keyDown(getAllByRole('radio')[2], { key: 'Home' })
+      expect(onChange).toHaveBeenLastCalledWith(1)
+      fireEvent.keyDown(getAllByRole('radio')[2], { key: 'End' })
+      expect(onChange).toHaveBeenLastCalledWith(5)
+    })
+
+    it('keyboard step with allowHalf is 0.5', () => {
+      const onChange = jest.fn()
+      const { getAllByRole } = render(
+        <Rating value={2} max={5} onChange={onChange} allowHalf aria-label="Rate" />,
+      )
+      fireEvent.keyDown(getAllByRole('radio')[1], { key: 'ArrowRight' })
+      expect(onChange).toHaveBeenLastCalledWith(2.5)
+    })
+
+    it('clamps keyboard moves at 0 and max', () => {
+      const onChange = jest.fn()
+      const { getAllByRole } = render(
+        <Rating value={0} max={5} onChange={onChange} aria-label="Rate" />,
+      )
+      fireEvent.keyDown(getAllByRole('radio')[0], { key: 'ArrowLeft' })
+      expect(onChange).toHaveBeenLastCalledWith(0)
+    })
+  })
+
+  describe('shape & sizing', () => {
+    it('applies default size (size-5 via [&>*]:size-5) when size prop omitted', () => {
+      const { container } = render(<Rating value={1} max={3} />)
+      const root = container.querySelector('[data-slot="rating"]') as HTMLElement
+      expect(root.className).toContain('size-5')
+    })
+
+    it('applies sm and lg size classes', () => {
+      const small = render(<Rating value={1} max={3} size="sm" />)
+      expect(small.container.querySelector('[data-slot="rating"]')?.className).toContain('size-4')
+      const large = render(<Rating value={1} max={3} size="lg" />)
+      expect(large.container.querySelector('[data-slot="rating"]')?.className).toContain('size-6')
+    })
+
+    it('forwards ref to the root element', () => {
+      const ref = React.createRef<HTMLSpanElement>()
+      render(<Rating ref={ref} value={1} max={3} />)
+      expect(ref.current?.getAttribute('data-slot')).toBe('rating')
+    })
+  })
+})