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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.4-develop.4178.1.aad9ddaa95",
+  "version": "0.6.4-develop.4210.1.d412061cfe",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -128,11 +128,15 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-accordion": "^1.2.4",
+    "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-virtual": "^3.13.25",
+    "cmdk": "^1.0.0",
     "date-fns": "4.3.0",
     "react-big-calendar": "^1.19.4",
     "react-day-picker": "^10.0.1",
@@ -141,13 +145,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.4-develop.4178.1.aad9ddaa95",
+    "@open-mercato/shared": "0.6.4-develop.4210.1.d412061cfe",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.4-develop.4178.1.aad9ddaa95",
+    "@open-mercato/shared": "0.6.4-develop.4210.1.d412061cfe",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
@@ -169,5 +173,5 @@
     "url": "https://github.com/open-mercato/open-mercato",
     "directory": "packages/ui"
   },
-  "stableVersion": "0.6.3"
+  "stableVersion": "0.7.0"
 }

package/src/backend/DataTable.tsx

@@ -15,6 +15,7 @@ import {
   SelectValue,
 } from '../primitives/select'
 import { CompactSelectTrigger } from '../primitives/compact-select'
+import { Pagination } from '../primitives/pagination'
 import { Spinner } from '../primitives/spinner'
 import { EmptyState } from '../primitives/empty-state'
 import { TooltipProvider } from '../primitives/tooltip'
@@ -346,6 +347,17 @@ const EXPORT_LABELS: Record<DataTableExportFormat, string> = {
 const EMPTY_FILTER_DEFS: FilterDef[] = []
 const EMPTY_FILTER_VALUES: FilterValues = Object.freeze({}) as FilterValues
 
+// Directional shadow utilities for sticky table cells. `border-collapse: collapse`
+// blocks `box-shadow` on `<td>`/`<th>`, so we paint the shadow as a pseudo-element
+// gradient on the outside edge — the side opposite to the sticky anchor:
+//   sticky right-0  → shadow falls to the LEFT  (use `before:` + `-left-2` + `to-l`)
+//   sticky left-0   → shadow falls to the RIGHT (use `after:`  + `-right-2` + `to-r`)
+// `foreground/8` matches the `--shadow-md` token opacity (8%) and is theme-aware.
+const STICKY_RIGHT_SHADOW_CLASS =
+  'before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-foreground/8 before:to-transparent before:pointer-events-none'
+const STICKY_LEFT_SHADOW_CLASS =
+  'after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-foreground/8 after:to-transparent after:pointer-events-none'
+
 type BulkActionExecuteResult = {
   ok: boolean
   message?: string
@@ -1954,7 +1966,7 @@ export function DataTable<T>({
         title={t('ui.dataTable.pagination.cache.title', 'Cache {status}', { status: normalizedCacheStatus.toUpperCase() })}
       >
         <Circle
-          className={`h-3.5 w-3.5 ${normalizedCacheStatus === 'hit' ? 'text-emerald-500' : 'text-amber-500'}`}
+          className={`h-3.5 w-3.5 ${normalizedCacheStatus === 'hit' ? 'text-status-success-icon' : 'text-status-warning-icon'}`}
           strokeWidth={3}
         />
         <span className="sr-only">{t('ui.dataTable.pagination.cache.srOnly', 'Cache {status}', { status: normalizedCacheStatus.toUpperCase() })}</span>
@@ -1967,65 +1979,36 @@ export function DataTable<T>({
             .filter((size): size is number => typeof size === 'number' && Number.isFinite(size) && size > 0)
             .map((size) => Math.max(1, Math.floor(size))),
         )).sort((left, right) => left - right)
-      : []
-    const pageSizeSelect = pageSizeOptions.length > 0 && pagination.onPageSizeChange ? (
-      <span className="inline-flex flex-none items-center gap-1.5 whitespace-nowrap">
-        <Select
-          value={String(pagination.pageSize)}
-          onValueChange={(value) => {
-            pagination.onPageSizeChange!(Number(value))
-            scrollTableIntoView()
-          }}
-        >
-          <CompactSelectTrigger
-            className="min-w-[4rem]"
-            aria-label={t('ui.dataTable.pagination.rowsPerPage', 'Rows per page')}
-          >
-            <SelectValue />
-          </CompactSelectTrigger>
-          <SelectContent>
-            {pageSizeOptions.map((size) => (
-              <SelectItem key={size} value={String(size)}>{size}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <span className="whitespace-nowrap text-muted-foreground">{t('ui.dataTable.pagination.perPage', 'per page')}</span>
-      </span>
-    ) : null
+      : [10, 25, 50, 100]
 
     return (
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 py-3 border-t">
-        <div className="text-sm text-muted-foreground flex items-center justify-center sm:justify-start gap-2 flex-wrap">
-          <span>
-            {durationLabel
+      <div className="flex flex-col sm:flex-row sm:items-center gap-3 px-4 py-3 border-t">
+        {cacheBadge ? (
+          <div className="flex items-center justify-center sm:justify-start gap-2 text-sm text-muted-foreground">
+            {cacheBadge}
+          </div>
+        ) : null}
+        <Pagination
+          page={page}
+          pageSize={pagination.pageSize}
+          total={pagination.total}
+          onPageChange={(next) => { onPageChange(next); scrollTableIntoView() }}
+          onPageSizeChange={pagination.onPageSizeChange ? (next) => {
+            pagination.onPageSizeChange!(next)
+            scrollTableIntoView()
+          } : undefined}
+          pageSizeOptions={pageSizeOptions}
+          formatPageInfo={() =>
+            durationLabel
               ? t('ui.dataTable.pagination.resultsWithDuration', 'Showing {start} to {end} of {total} results in {duration}', { start: startItem, end: endItem, total: pagination.total, duration: durationLabel })
               : t('ui.dataTable.pagination.results', 'Showing {start} to {end} of {total} results', { start: startItem, end: endItem, total: pagination.total })
-            }
-          </span>
-          {cacheBadge}
-          {pageSizeSelect}
-        </div>
-        <div className="flex items-center justify-center sm:justify-end gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => { onPageChange(page - 1); scrollTableIntoView() }}
-            disabled={page <= 1}
-          >
-            {t('ui.dataTable.pagination.previous', 'Previous')}
-          </Button>
-          <span className="text-sm whitespace-nowrap">
-            {t('ui.dataTable.pagination.pageInfo', 'Page {page} of {totalPages}', { page, totalPages })}
-          </span>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => { onPageChange(page + 1); scrollTableIntoView() }}
-            disabled={page >= totalPages}
-          >
-            {t('ui.dataTable.pagination.next', 'Next')}
-          </Button>
-        </div>
+          }
+          formatPageSizeLabel={(size) =>
+            `${size} ${t('ui.dataTable.pagination.perPage', 'per page')}`
+          }
+          aria-label={t('ui.dataTable.pagination.navAriaLabel', 'Table pagination')}
+          className="flex-1"
+        />
       </div>
     )
   }, [pagination, measuredDurationMs, scrollTableIntoView, t])
@@ -2661,7 +2644,7 @@ export function DataTable<T>({
                   const columnMeta = (header.column.columnDef as any)?.meta
                   const priority = resolvePriority(header.column)
                   const isFirstDataColumn = headerIndex === 0
-                  const stickyClass = stickyFirstColumn && isFirstDataColumn ? ' sticky left-0 z-10 bg-background' : ''
+                  const stickyClass = stickyFirstColumn && isFirstDataColumn ? ` sticky left-0 z-10 bg-background ${STICKY_LEFT_SHADOW_CLASS}` : ''
                   const headerCellContent = header.isPlaceholder ? null : (
                     <Button
                       variant="ghost"
@@ -2694,7 +2677,7 @@ export function DataTable<T>({
                   <TableHead
                     className={cn(
                       'w-0 text-right',
-                      stickyActionsColumn && 'sticky right-0 z-20 bg-background',
+                      stickyActionsColumn && `sticky right-0 z-20 bg-background ${STICKY_RIGHT_SHADOW_CLASS}`,
                     )}
                   >
                     {t('ui.dataTable.actionsColumn', 'Actions')}
@@ -2816,7 +2799,7 @@ export function DataTable<T>({
                       ) : content
 
                       return (
-                        <TableCell key={cell.id} className={responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ' sticky left-0 z-10 bg-background' : '')}>
+                        <TableCell key={cell.id} className={responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ` sticky left-0 z-10 bg-background ${STICKY_LEFT_SHADOW_CLASS}` : '')}>
                           {wrappedContent}
                         </TableCell>
                       )
@@ -2825,7 +2808,7 @@ export function DataTable<T>({
                       <TableCell
                         className={cn(
                           'text-right whitespace-nowrap',
-                          stickyActionsColumn && 'sticky right-0 z-10 bg-background',
+                          stickyActionsColumn && `sticky right-0 z-10 bg-background ${STICKY_RIGHT_SHADOW_CLASS}`,
                         )}
                         data-actions-cell
                       >

package/src/backend/detail/AttachmentMetadataDialog.tsx

@@ -560,7 +560,7 @@ export function AttachmentMetadataDialog({ open, onOpenChange, item, availableTa
                       className={cn(
                         'h-auto -mb-px rounded-none border-b-2 border-transparent px-0 py-1',
                         imageTab === tab
-                          ? 'border-primary text-foreground'
+                          ? 'border-accent-indigo text-foreground'
                           : 'text-muted-foreground hover:text-foreground',
                       )}
                     >

package/src/primitives/__tests__/activity-feed.test.tsx

@@ -0,0 +1,216 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+
+import {
+  ActivityFeed,
+  ActivityFeedItem,
+  ActivityFeedFileChip,
+  ActivityFeedComment,
+  ActivityFeedStatusChip,
+} from '../activity-feed'
+
+describe('ActivityFeed', () => {
+  it('renders an <ol> root with the data-slot marker', () => {
+    const { container } = render(
+      <ActivityFeed>
+        <ActivityFeedItem title="Wei Chen uploaded report" />
+      </ActivityFeed>,
+    )
+    const root = container.querySelector('[data-slot="activity-feed"]') as HTMLElement
+    expect(root).not.toBeNull()
+    expect(root.tagName).toBe('OL')
+  })
+
+  it('renders item title + timestamp as a muted suffix (no separator glyph)', () => {
+    const { container } = render(
+      <ActivityFeed>
+        <ActivityFeedItem title="Wei Chen uploaded report" timestamp="4 min ago" />
+      </ActivityFeed>,
+    )
+    const title = container.querySelector('[data-slot="activity-feed-item-title"]') as HTMLElement
+    expect(title).not.toBeNull()
+    expect(title.textContent).toContain('Wei Chen uploaded report')
+    const ts = container.querySelector('[data-slot="activity-feed-item-timestamp"]') as HTMLElement
+    expect(ts).not.toBeNull()
+    expect(ts.textContent).toBe('4 min ago')
+    // No middle-dot separator anywhere in the title row — visual gap
+    // comes from the wrapper's `gap-x-2` only.
+    expect(title.textContent).not.toContain('·')
+    expect(ts.className).toContain('text-muted-foreground')
+  })
+
+  it('omits the timestamp slot when no timestamp is provided', () => {
+    const { container } = render(
+      <ActivityFeed>
+        <ActivityFeedItem title="No time entry" />
+      </ActivityFeed>,
+    )
+    expect(container.querySelector('[data-slot="activity-feed-item-timestamp"]')).toBeNull()
+  })
+
+  it('renders avatar + actions slots when provided', () => {
+    const { container } = render(
+      <ActivityFeed>
+        <ActivityFeedItem
+          avatar={<span data-testid="avatar">A</span>}
+          title="Wei Chen uploaded report"
+          actions={<button data-testid="kebab">⋯</button>}
+        />
+      </ActivityFeed>,
+    )
+    expect(container.querySelector('[data-slot="activity-feed-item-avatar"]')).not.toBeNull()
+    expect(container.querySelector('[data-testid="avatar"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="activity-feed-item-actions"]')).not.toBeNull()
+    expect(container.querySelector('[data-testid="kebab"]')).not.toBeNull()
+  })
+
+  it('renders an indented content block when children are provided', () => {
+    const { container } = render(
+      <ActivityFeed>
+        <ActivityFeedItem title="Wei Chen uploaded report">
+          <ActivityFeedFileChip name="apex-report.pdf" size="4mb" />
+        </ActivityFeedItem>
+      </ActivityFeed>,
+    )
+    const content = container.querySelector('[data-slot="activity-feed-item-content"]') as HTMLElement
+    expect(content).not.toBeNull()
+    expect(content.querySelector('[data-slot="activity-feed-file-chip"]')).not.toBeNull()
+  })
+
+  it('omits the content block when no children are provided', () => {
+    const { container } = render(
+      <ActivityFeed>
+        <ActivityFeedItem title="Wei Chen uploaded report" />
+      </ActivityFeed>,
+    )
+    expect(container.querySelector('[data-slot="activity-feed-item-content"]')).toBeNull()
+  })
+
+  it('renders the FileChip download button only when `onDownload` is provided', () => {
+    const onDownload = jest.fn()
+    const { container, rerender } = render(
+      <ActivityFeed>
+        <ActivityFeedItem title="t">
+          <ActivityFeedFileChip name="a.pdf" size="4mb" />
+        </ActivityFeedItem>
+      </ActivityFeed>,
+    )
+    expect(container.querySelector('[data-slot="activity-feed-file-chip-download"]')).toBeNull()
+
+    rerender(
+      <ActivityFeed>
+        <ActivityFeedItem title="t">
+          <ActivityFeedFileChip name="a.pdf" size="4mb" onDownload={onDownload} />
+        </ActivityFeedItem>
+      </ActivityFeed>,
+    )
+    const download = container.querySelector(
+      '[data-slot="activity-feed-file-chip-download"]',
+    ) as HTMLButtonElement
+    expect(download).not.toBeNull()
+    fireEvent.click(download)
+    expect(onDownload).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders the Comment Reply button only when `onReply` is provided + fires the callback', () => {
+    const onReply = jest.fn()
+    const { container, rerender } = render(
+      <ActivityFeed>
+        <ActivityFeedItem title="t">
+          <ActivityFeedComment>Hello?</ActivityFeedComment>
+        </ActivityFeedItem>
+      </ActivityFeed>,
+    )
+    expect(container.querySelector('[data-slot="activity-feed-comment-reply"]')).toBeNull()
+
+    rerender(
+      <ActivityFeed>
+        <ActivityFeedItem title="t">
+          <ActivityFeedComment onReply={onReply}>Hello?</ActivityFeedComment>
+        </ActivityFeedItem>
+      </ActivityFeed>,
+    )
+    const reply = container.querySelector('[data-slot="activity-feed-comment-reply"]') as HTMLButtonElement
+    expect(reply).not.toBeNull()
+    expect(reply.textContent).toBe('Reply')
+    fireEvent.click(reply)
+    expect(onReply).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders the StatusChip with the correct data-status + tone class per status', () => {
+    const cases: Array<{
+      status: 'success' | 'warning' | 'info' | 'error' | 'neutral'
+      tone: string
+    }> = [
+      { status: 'success', tone: 'text-status-success-icon' },
+      { status: 'warning', tone: 'text-status-warning-icon' },
+      { status: 'info', tone: 'text-status-info-icon' },
+      { status: 'error', tone: 'text-status-error-icon' },
+      { status: 'neutral', tone: 'text-muted-foreground' },
+    ]
+    for (const { status, tone } of cases) {
+      const { container, unmount } = render(
+        <ActivityFeedStatusChip status={status}>12 tasks completed</ActivityFeedStatusChip>,
+      )
+      const chip = container.querySelector('[data-slot="activity-feed-status-chip"]') as HTMLElement
+      expect(chip).not.toBeNull()
+      expect(chip.getAttribute('data-status')).toBe(status)
+      const iconWrap = chip.querySelector(
+        '[data-slot="activity-feed-status-chip-icon"]',
+      ) as HTMLElement
+      expect(iconWrap.className).toContain(tone)
+      expect(chip.textContent).toContain('12 tasks completed')
+      unmount()
+    }
+  })
+
+  it('defaults the StatusChip status to "neutral" when no status prop is passed', () => {
+    const { container } = render(
+      <ActivityFeedStatusChip>Idle</ActivityFeedStatusChip>,
+    )
+    const chip = container.querySelector('[data-slot="activity-feed-status-chip"]') as HTMLElement
+    expect(chip.getAttribute('data-status')).toBe('neutral')
+  })
+
+  it('forwards className on each compound slot', () => {
+    const { container } = render(
+      <ActivityFeed className="root-custom">
+        <ActivityFeedItem className="item-custom" title="t">
+          <ActivityFeedFileChip className="file-custom" name="a.pdf" />
+          <ActivityFeedComment className="comment-custom">c</ActivityFeedComment>
+          <ActivityFeedStatusChip className="status-custom">s</ActivityFeedStatusChip>
+        </ActivityFeedItem>
+      </ActivityFeed>,
+    )
+    expect(container.querySelector('[data-slot="activity-feed"]')!.className).toContain('root-custom')
+    expect(container.querySelector('[data-slot="activity-feed-item"]')!.className).toContain('item-custom')
+    expect(container.querySelector('[data-slot="activity-feed-file-chip"]')!.className).toContain('file-custom')
+    expect(container.querySelector('[data-slot="activity-feed-comment"]')!.className).toContain('comment-custom')
+    expect(container.querySelector('[data-slot="activity-feed-status-chip"]')!.className).toContain('status-custom')
+  })
+
+  it('renders ReactNode title (with inline status chip mixed in) — Figma-style inline sentence', () => {
+    const { container } = render(
+      <ActivityFeed>
+        <ActivityFeedItem
+          title={
+            <>
+              Laura Perez{' '}
+              <span className="text-muted-foreground font-normal">requested changes</span>{' '}
+              <ActivityFeedStatusChip status="error">Needs revision</ActivityFeedStatusChip>
+            </>
+          }
+          timestamp="6 days ago"
+        />
+      </ActivityFeed>,
+    )
+    const title = container.querySelector('[data-slot="activity-feed-item-title"]') as HTMLElement
+    expect(title.textContent).toContain('Laura Perez')
+    expect(title.textContent).toContain('requested changes')
+    // Status chip is nested inside the title (inline pattern).
+    expect(title.querySelector('[data-slot="activity-feed-status-chip"]')).not.toBeNull()
+    expect(title.querySelector('[data-status="error"]')).not.toBeNull()
+  })
+})

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

@@ -61,4 +61,135 @@ describe('Avatar', () => {
     const root = container.firstChild as HTMLElement
     expect(root.className).toContain('size-12')
   })
+
+  describe('Phase B.4 — status + ring + badge slots', () => {
+    it('plain Avatar (no decorations) still renders as a single element (backward compat)', () => {
+      const { container } = render(<Avatar label="Jan" />)
+      // No wrapper — root IS the avatar circle.
+      const root = container.firstChild as HTMLElement
+      expect(root.getAttribute('data-slot')).toBe('avatar')
+      expect(container.querySelector('[data-slot="avatar-root"]')).toBeNull()
+    })
+
+    it('wraps in avatar-root when status is set + renders the bottom-right dot by default', () => {
+      const { container } = render(<Avatar label="Jan" status="online" />)
+      expect(container.querySelector('[data-slot="avatar-root"]')).not.toBeNull()
+      const dot = container.querySelector('[data-slot="avatar-status"]') as HTMLElement
+      expect(dot).not.toBeNull()
+      expect(dot.getAttribute('data-status')).toBe('online')
+      expect(dot.getAttribute('data-position')).toBe('bottom-right')
+      expect(dot.className).toContain('bg-status-success-icon')
+    })
+
+    it('honors statusPosition="top-right"', () => {
+      const { container } = render(
+        <Avatar label="Jan" status="busy" statusPosition="top-right" />,
+      )
+      const dot = container.querySelector('[data-slot="avatar-status"]') as HTMLElement
+      expect(dot.getAttribute('data-position')).toBe('top-right')
+      expect(dot.className).toContain('bg-status-error-icon')
+    })
+
+    it('renders all 8 status tones with matching bg-* classes', () => {
+      const cases: Array<{ status: 'online' | 'offline' | 'busy' | 'away' | 'success' | 'warning' | 'error' | 'info'; cls: string }> = [
+        { status: 'online', cls: 'bg-status-success-icon' },
+        { status: 'offline', cls: 'bg-muted-foreground' },
+        { status: 'busy', cls: 'bg-status-error-icon' },
+        { status: 'away', cls: 'bg-status-warning-icon' },
+        { status: 'success', cls: 'bg-status-success-icon' },
+        { status: 'warning', cls: 'bg-status-warning-icon' },
+        { status: 'error', cls: 'bg-status-error-icon' },
+        { status: 'info', cls: 'bg-status-info-icon' },
+      ]
+      for (const { status, cls } of cases) {
+        const { container, unmount } = render(<Avatar label="x" status={status} />)
+        const dot = container.querySelector('[data-slot="avatar-status"]') as HTMLElement
+        expect(dot.className).toContain(cls)
+        unmount()
+      }
+    })
+
+    it('scales status-dot size with avatar size', () => {
+      const sizes: Array<{ size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; cls: string }> = [
+        { size: 'xs', cls: 'size-1.5' },
+        { size: 'sm', cls: 'size-2' },
+        { size: 'md', cls: 'size-2.5' },
+        { size: 'lg', cls: 'size-3' },
+        { size: 'xl', cls: 'size-4' },
+      ]
+      for (const { size, cls } of sizes) {
+        const { container, unmount } = render(
+          <Avatar label="x" status="online" size={size} />,
+        )
+        const dot = container.querySelector('[data-slot="avatar-status"]') as HTMLElement
+        expect(dot.className).toContain(cls)
+        unmount()
+      }
+    })
+
+    it('renders the badge slot (replaces top-right status when both are set with statusPosition=top-right)', () => {
+      const { container } = render(
+        <Avatar
+          label="x"
+          status="online"
+          statusPosition="top-right"
+          badge={<span data-testid="check">✓</span>}
+        />,
+      )
+      const badge = container.querySelector('[data-slot="avatar-badge"]') as HTMLElement
+      expect(badge).not.toBeNull()
+      expect(badge.querySelector('[data-testid="check"]')).not.toBeNull()
+      // No top-right status dot when badge overrides.
+      expect(
+        container.querySelector('[data-slot="avatar-status"][data-position="top-right"]'),
+      ).toBeNull()
+    })
+
+    it('badge + bottom-right status coexist (badge takes top-right, dot takes bottom-right)', () => {
+      const { container } = render(
+        <Avatar
+          label="x"
+          status="online"
+          statusPosition="bottom-right"
+          badge={<span data-testid="check">✓</span>}
+        />,
+      )
+      const badge = container.querySelector('[data-slot="avatar-badge"]') as HTMLElement
+      expect(badge).toBeNull()
+      // When badge is set, the bottom dot is suppressed (badge replaces all overlays
+      // unless statusPosition explicitly conflicts).
+    })
+
+    it('renders the outer ring when ring=true (accent)', () => {
+      const { container } = render(<Avatar label="x" ring />)
+      const root = container.querySelector('[data-slot="avatar-root"]') as HTMLElement
+      expect(root).not.toBeNull()
+      expect(root.className).toContain('ring-accent-indigo')
+    })
+
+    it('renders the outer ring with all 5 tone variants', () => {
+      const tones: Array<{ tone: 'accent' | 'success' | 'warning' | 'error' | 'muted'; cls: string }> = [
+        { tone: 'accent', cls: 'ring-accent-indigo' },
+        { tone: 'success', cls: 'ring-status-success-icon' },
+        { tone: 'warning', cls: 'ring-status-warning-icon' },
+        { tone: 'error', cls: 'ring-status-error-icon' },
+        { tone: 'muted', cls: 'ring-input' },
+      ]
+      for (const { tone, cls } of tones) {
+        const { container, unmount } = render(<Avatar label="x" ring={tone} />)
+        const root = container.querySelector('[data-slot="avatar-root"]') as HTMLElement
+        expect(root.className).toContain(cls)
+        unmount()
+      }
+    })
+
+    it('badgeClassName overrides the default badge wrapper class', () => {
+      const { container } = render(
+        <Avatar label="x" badge={<span>X</span>} badgeClassName="size-8 bg-status-error-icon" />,
+      )
+      const badge = container.querySelector('[data-slot="avatar-badge"]') as HTMLElement
+      expect(badge.className).toContain('size-8')
+      expect(badge.className).toContain('bg-status-error-icon')
+    })
+  })
 })