@estiva-app/ui 0.7.0 → 0.8.0

package/src/Checkbox.tsx

@@ -1,14 +1,29 @@
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox'
 import { IconCheck } from '@tabler/icons-react'
 import { cn } from './cn'
 
 /**
  * A 16px square that fills with the accent when checked — Peek's Checkbox
- * (2026-09-01), verbatim.
+ * (2026-09-01), verbatim; on Base UI Checkbox since stage 1 of the migration
+ * (2026-09-06).
  *
- * Controlled only; parents own the state. Rendered as a button with the
- * checkbox role so it works standalone or inside clickable rows: a caller
- * that toggles on the row's own click passes no `onChange`, and the square
- * goes inert rather than stealing the click.
+ * Controlled only; parents own the state. Two renderings, one class list:
+ *
+ * - With `onChange` it is the control, as Base UI renders it: a
+ *   `<span role="checkbox">` with a hidden `<input>` beside it. Space
+ *   toggles, Enter does not, and its click never reaches the row around it.
+ * - Without `onChange` it is a picture of the state, for a row that toggles
+ *   on its own click. It is hidden from assistive technology and takes no
+ *   focus, so the row is one control and says the state itself
+ *   (`aria-pressed`, or `aria-selected` on an option). Two focusable controls
+ *   nested in one another is what axe's `nested-interactive` rule rejects.
+ *
+ * The tick is always in the box, hidden when unchecked. A box that is empty
+ * in one state and holds an icon in the other hangs on a line of text
+ * differently in each, and moved 1px on every click (Katerina, 2026-09-07:
+ * "it should be fixed"). With the tick always there, Base UI's `<span>` and
+ * the `<button>` this used to be land on the same pixel, measured. In a flex
+ * row nothing ever moved.
  */
 export interface CheckboxProps {
   checked: boolean
@@ -18,29 +33,41 @@ export interface CheckboxProps {
   className?: string
 }
 
+function squareClasses(checked: boolean, disabled: boolean, interactive: boolean, className?: string) {
+  return cn(
+    'inline-flex items-center justify-center size-4 shrink-0 rounded-[4px] border transition-colors',
+    checked ? 'bg-accent-primary border-accent-primary text-text-inverse' : 'bg-transparent border-border-strong hover:border-text-muted',
+    disabled && 'opacity-50 pointer-events-none',
+    interactive ? 'cursor-pointer' : 'pointer-events-none',
+    className,
+  )
+}
+
+/** `flex`, so the icon is a flex item and not an inline box with a line height of its own. */
+const tickClasses = (checked: boolean) => cn('flex', !checked && 'invisible')
+
 export function Checkbox({ checked, onChange, disabled = false, className, ...aria }: CheckboxProps) {
+  if (!onChange) {
+    return (
+      <span aria-hidden="true" className={squareClasses(checked, disabled, false, className)}>
+        <span className={tickClasses(checked)}>
+          <IconCheck size={12} stroke={3} />
+        </span>
+      </span>
+    )
+  }
   return (
-    <button
-      type="button"
-      role="checkbox"
-      aria-checked={checked}
-      aria-label={aria['aria-label']}
+    <BaseCheckbox.Root
+      checked={checked}
       disabled={disabled}
-      onClick={(e) => {
-        e.stopPropagation()
-        onChange?.(!checked)
-      }}
-      className={cn(
-        'inline-flex items-center justify-center size-4 shrink-0 rounded-[4px] border transition-colors',
-        checked
-          ? 'bg-accent-primary border-accent-primary text-text-inverse'
-          : 'bg-transparent border-border-strong hover:border-text-muted',
-        disabled && 'opacity-50 pointer-events-none',
-        onChange ? 'cursor-pointer' : 'pointer-events-none',
-        className,
-      )}
+      aria-label={aria['aria-label']}
+      onCheckedChange={(next) => onChange(next)}
+      onClick={(e) => e.stopPropagation()}
+      className={(state) => squareClasses(state.checked, state.disabled, true, className)}
     >
-      {checked && <IconCheck size={12} stroke={3} />}
-    </button>
+      <BaseCheckbox.Indicator keepMounted className={(state) => tickClasses(state.checked)}>
+        <IconCheck size={12} stroke={3} />
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
   )
 }

package/src/Chip.stories.tsx

@@ -5,6 +5,10 @@ import { Chip } from './Chip'
 const meta = {
   title: 'Primitives/Chip',
   component: Chip,
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // in ship the brand chip reads 2.70:1 and the info chip 3.99:1 on their washes
+  // (AA 4.5:1).
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
   args: { type: 'neutral', label: 'Label' },
   argTypes: {
     type: { control: 'inline-radio', options: ['neutral', 'brand', 'info', 'warning', 'success', 'error'] },

package/src/Chip.tsx

@@ -23,11 +23,11 @@ export interface ChipProps {
 
 const typeStyles: Record<ChipType, string> = {
   neutral: 'bg-bg-inset text-text-primary',
-  brand: 'bg-accent-muted text-accent-primary signal:border signal:border-[rgba(86,200,255,0.3)]',
-  info: 'bg-info-muted text-info-default signal:border signal:border-[rgba(86,200,255,0.3)]',
-  warning: 'bg-warning-muted text-warning-default signal:border signal:border-[rgba(255,176,32,0.3)] signal:shadow-[shadow:0_0_5px_rgba(255,176,32,0.4)]',
-  success: 'bg-success-muted text-success-default signal:border signal:border-[rgba(63,222,140,0.3)]',
-  error: 'bg-error-muted text-error-default signal:border signal:border-[rgba(255,107,107,0.3)]',
+  brand: 'bg-accent-muted text-accent-primary signal:border signal:border-accent-outline',
+  info: 'bg-info-muted text-info-default signal:border signal:border-info-outline',
+  warning: 'bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning',
+  success: 'bg-success-muted text-success-default signal:border signal:border-success-outline',
+  error: 'bg-error-muted text-error-default signal:border signal:border-error-outline',
 }
 
 export function Chip({ type = 'neutral', label, leadingIcon, trailingIcon, className }: ChipProps) {

package/src/ChipInput.stories.tsx

@@ -29,6 +29,10 @@ const meta = {
   title: 'Inputs/ChipInput',
   component: ChipInput,
   parameters: {
+    // axe label is off here: once a chip is in the field the input drops its placeholder
+    // and has no name of its own, and no prop lets the caller give it one. Settled at the
+    // Combobox port (PLAN.md stage 5).
+    a11y: { config: { rules: [{ id: 'label', enabled: false }] } },
     // The suggestion list portals to document.body at fixed coordinates —
     // render docs usage in an iframe so it lands where the field is.
     docs: { story: { inline: false, height: '320px' } },

package/src/DialogShell.tsx

@@ -40,7 +40,7 @@ export function DialogShell({ title, onClose, headerContent, footer, children, b
   return createPortal(
     <>
       {/* Backdrop */}
-      <div className="fixed inset-0 z-40 bg-black/50" onClick={onClose} />
+      <div className="fixed inset-0 z-40 bg-scrim" onClick={onClose} />
 
       {/* Dialog */}
       <div className="fixed inset-0 z-50 flex items-center justify-center pointer-events-none">

package/src/EditableText.stories.tsx

@@ -49,7 +49,12 @@ export const Multiline: Story = {
 }
 
 /** Empty shows the placeholder, muted — still clickable. */
-export const Empty: Story = { args: { value: '' } }
+export const Empty: Story = {
+  args: { value: '' },
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // the placeholder is muted text, 3.94:1 on --bg-base in signal (AA 4.5:1).
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
+}
 
 /** For a reader who cannot write: the value alone, no edit affordance. */
 export const ReadOnly: Story = { args: { readOnly: true } }

package/src/IconButton.mdx

@@ -40,7 +40,18 @@ import { IconPencil } from '@tabler/icons-react'
   control. The `tooltip` shows sighted hover users the same word; it does
   not replace the label.
 - The icon is 16px at stroke 1.5.
-- `type` defaults to `"button"`; every native prop passes through.
+- `type` defaults to `"button"`; it is a native `<button>` on Base UI's
+  Button, and every native prop passes through.
+- `disabledReason="Read only"` disables it, keeps it reachable by Tab,
+  and shows the reason in place of the tooltip (on hover for now; on
+  keyboard focus too once Tooltip moves onto Base UI, stage 4).
+
+## Keys
+
+| Key | Does |
+|---|---|
+| Tab | Onto the button, also when it is disabled with a reason; never when it is plain `disabled`. |
+| Space / Enter | The action. Nothing while disabled. |
 
 ## Props
 

package/src/IconButton.stories.tsx

@@ -5,7 +5,8 @@ import { IconButton } from './IconButton'
 const meta = {
   title: 'Primitives/IconButton',
   component: IconButton,
-  args: { variant: 'muted', disabled: false, children: <IconSettings className="size-4" stroke={1.5} /> },
+  // An icon-only button owes its name; axe's button-name rule fails without it.
+  args: { variant: 'muted', disabled: false, 'aria-label': 'Settings', children: <IconSettings className="size-4" stroke={1.5} /> },
   argTypes: {
     variant: { control: 'inline-radio', options: ['muted', 'outlined', 'primary'] },
     tooltipPlacement: { control: 'inline-radio', options: ['top', 'bottom'] },
@@ -22,18 +23,22 @@ export const Primary: Story = { args: { variant: 'primary' } }
 export const Disabled: Story = { args: { variant: 'primary', disabled: true } }
 /** Hover to see the portalled tooltip (top or bottom placement). */
 export const WithTooltip: Story = { args: { tooltip: 'Settings', tooltipPlacement: 'top' } }
+/** Disabled with its reason in place of the tooltip; Tab still reaches it. */
+export const WithAReason: Story = { args: { tooltip: 'Settings', disabledReason: 'Sign in to change settings' } }
 
 /** Every variant × enabled/disabled. */
 export const AllVariants: Story = {
-  parameters: { controls: { disable: true } },
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // the variant captions are muted text, 3.94:1 on --bg-base in signal (AA 4.5:1).
+  parameters: { controls: { disable: true }, a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
   render: () => (
     <div className="flex flex-col gap-3">
       {(['muted', 'outlined', 'primary'] as const).map((variant) => (
         <div key={variant} className="flex items-center gap-2">
-          <IconButton variant={variant}>
+          <IconButton variant={variant} aria-label="Settings">
             <IconSettings className="size-4" stroke={1.5} />
           </IconButton>
-          <IconButton variant={variant} disabled>
+          <IconButton variant={variant} disabled aria-label="Settings">
             <IconSettings className="size-4" stroke={1.5} />
           </IconButton>
           <span className="text-[12px] leading-[120%] text-text-muted">{variant}</span>

package/src/IconButton.test.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+/**
+ * What the IconButton page claims, pinned: the label, the tooltip on hover,
+ * and `disabledReason` in place of the tooltip (stage 2 of the migration).
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { IconButton } from './IconButton'
+
+afterEach(cleanup)
+
+const icon = <svg data-testid="icon" />
+
+describe('IconButton', () => {
+  it('is a native button named by its aria-label, type button', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    render(
+      <IconButton aria-label="Edit" onClick={onClick}>
+        {icon}
+      </IconButton>,
+    )
+    const button = screen.getByRole('button', { name: 'Edit' })
+    expect(button.tagName).toBe('BUTTON')
+    expect(button.getAttribute('type')).toBe('button')
+    await user.click(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows the tooltip on hover, with its shortcut', async () => {
+    const user = userEvent.setup()
+    render(
+      <IconButton aria-label="Edit" tooltip="Edit" tooltipShortcut="E">
+        {icon}
+      </IconButton>,
+    )
+    expect(screen.queryByRole('tooltip')).toBeNull()
+    await user.hover(screen.getByRole('button', { name: 'Edit' }))
+    expect(screen.getByRole('tooltip').textContent).toBe('EditE')
+  })
+
+  it('disabledReason: disabled, reachable by Tab, the reason replaces the tooltip', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    render(
+      <IconButton aria-label="Edit" tooltip="Edit" tooltipShortcut="E" disabledReason="Read only" onClick={onClick}>
+        {icon}
+      </IconButton>,
+    )
+    const button = screen.getByRole('button', { name: 'Edit' })
+    expect(button.getAttribute('aria-disabled')).toBe('true')
+    expect(button.hasAttribute('disabled')).toBe(false)
+    await user.click(button)
+    expect(onClick).not.toHaveBeenCalled()
+    await user.tab()
+    expect(document.activeElement).toBe(button)
+    await user.hover(button)
+    expect(screen.getByRole('tooltip').textContent).toBe('Read only')
+  })
+
+  it('Space and Enter are the action, and nothing while disabled with a reason', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    const { unmount } = render(
+      <IconButton aria-label="Edit" onClick={onClick}>
+        {icon}
+      </IconButton>,
+    )
+    await user.tab()
+    await user.keyboard('{Enter}')
+    await user.keyboard(' ')
+    expect(onClick).toHaveBeenCalledTimes(2)
+    unmount()
+
+    const held = vi.fn()
+    render(
+      <IconButton aria-label="Edit" disabledReason="Read only" onClick={held}>
+        {icon}
+      </IconButton>,
+    )
+    await user.tab()
+    await user.keyboard('{Enter}')
+    await user.keyboard(' ')
+    expect(held).not.toHaveBeenCalled()
+  })
+
+  it('disabled without a reason: a real disabled button, out of the Tab order', async () => {
+    const user = userEvent.setup()
+    render(
+      <>
+        <IconButton aria-label="Edit" disabled>
+          {icon}
+        </IconButton>
+        <button type="button">After</button>
+      </>,
+    )
+    expect(screen.getByRole('button', { name: 'Edit' }).hasAttribute('disabled')).toBe(true)
+    await user.tab()
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'After' }))
+  })
+})

package/src/IconButton.tsx

@@ -1,4 +1,5 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { Button as BaseButton } from '@base-ui/react/button'
 import { cn } from './cn'
 import { WithTooltip } from './Tooltip'
 
@@ -6,7 +7,11 @@ import { WithTooltip } from './Tooltip'
  * Peek's IconButton (2026-08-28), verbatim: a square 4px-padded button
  * around a 16px icon, 8px radius, three variants, an optional tooltip that
  * portals above or below. Plus `type="button"` by default (Ship's addition),
- * so it never submits a form by accident.
+ * so it never submits a form by accident. On Base UI's Button since stage 2
+ * of the migration (2026-09-07).
+ *
+ * `disabledReason` disables it, keeps it reachable by keyboard, and shows
+ * the reason in place of the tooltip — see Button.
  */
 export type IconButtonVariant = 'muted' | 'outlined' | 'primary'
 
@@ -17,6 +22,9 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
    *  whose only other affordance is a keyboard shortcut. */
   tooltipShortcut?: string
   tooltipPlacement?: 'top' | 'bottom'
+  /** Why the action cannot succeed right now. Disables the button, keeps it
+   *  reachable by keyboard, and shows the reason as the tooltip. */
+  disabledReason?: string
   /** The icon: 16px, stroke 1.5. */
   children: ReactNode
 }
@@ -26,6 +34,7 @@ export function IconButton({
   className,
   children,
   disabled,
+  disabledReason,
   tooltip,
   tooltipShortcut,
   tooltipPlacement,
@@ -33,29 +42,33 @@ export function IconButton({
   ...props
 }: IconButtonProps) {
   const button = (
-    <button
+    <BaseButton
       type={type}
-      className={cn(
-        'flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 cursor-pointer',
-        !disabled && variant === 'primary' && 'bg-accent-primary hover:bg-accent-hover text-text-inverse',
-        !disabled && variant === 'muted' && 'text-text-secondary hover:bg-bg-hover hover:text-text-primary',
-        !disabled && variant === 'outlined' && 'border border-border-default hover:bg-bg-hover text-text-secondary',
-        disabled && variant === 'primary' && 'bg-bg-disabled text-text-disabled',
-        disabled && variant === 'muted' && 'text-text-disabled',
-        disabled && variant === 'outlined' && 'border border-border-default text-text-disabled',
-        disabled && 'pointer-events-none cursor-not-allowed',
-        className,
-      )}
-      disabled={disabled}
+      disabled={disabled || !!disabledReason}
+      focusableWhenDisabled={!!disabledReason}
+      className={(state) =>
+        cn(
+          'flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 cursor-pointer',
+          !state.disabled && variant === 'primary' && 'bg-accent-primary hover:bg-accent-hover text-text-inverse',
+          !state.disabled && variant === 'muted' && 'text-text-secondary hover:bg-bg-hover hover:text-text-primary',
+          !state.disabled && variant === 'outlined' && 'border border-border-default hover:bg-bg-hover text-text-secondary',
+          state.disabled && variant === 'primary' && 'bg-bg-disabled text-text-disabled',
+          state.disabled && variant === 'muted' && 'text-text-disabled',
+          state.disabled && variant === 'outlined' && 'border border-border-default text-text-disabled',
+          state.disabled && 'pointer-events-none cursor-not-allowed',
+          className,
+        )
+      }
       {...props}
     >
       {children}
-    </button>
+    </BaseButton>
   )
 
-  if (tooltip) {
+  const label = disabledReason ?? tooltip
+  if (label) {
     return (
-      <WithTooltip label={tooltip} shortcut={tooltipShortcut} placement={tooltipPlacement}>
+      <WithTooltip label={label} shortcut={disabledReason ? undefined : tooltipShortcut} placement={tooltipPlacement}>
         {button}
       </WithTooltip>
     )

package/src/IdentityMenu.stories.tsx

@@ -26,7 +26,11 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 /** A browser-held key: silhouette, "Acting as", and the honest sentence. */
-export const Anonymous: Story = {}
+export const Anonymous: Story = {
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // the fallback name is muted text, 3.50:1 on --bg-elevated in signal (AA 4.5:1).
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
+}
 
 /** Signed in through Estiva ID, in a build that offers sign-in. */
 export const SignedIn: Story = {

package/src/Kbd.tsx

@@ -31,8 +31,8 @@ export function Kbd({ children, className }: KbdProps) {
     <kbd
       className={cn(
         'inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset px-1 py-px font-sans text-[12px] leading-[120%] font-normal text-text-secondary',
-        'signal:border-b-2 signal:pt-[2px] signal:pb-px signal:bg-[rgba(255,255,255,.05)] signal:font-mono signal:text-[10px]',
-        'ship:border-b-2 ship:pt-[2px] ship:pb-px ship:bg-[rgba(255,255,255,.05)] ship:font-mono ship:text-[10px]',
+        'signal:border-b-2 signal:pt-[2px] signal:pb-px signal:bg-bg-wash signal:font-mono signal:text-[10px]',
+        'ship:border-b-2 ship:pt-[2px] ship:pb-px ship:bg-bg-wash ship:font-mono ship:text-[10px]',
         className,
       )}
     >

package/src/NavItem.stories.tsx

@@ -23,6 +23,9 @@ export const Active: Story = { args: { active: true } }
 /** The count is a muted mono number, and its tooltip says what it counts. */
 export const WithIconAndCount: Story = {
   args: { icon: placeholder, count: 18, countLabel: '18 open' },
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // the count is muted text, 3.94:1 on --bg-base in signal (AA 4.5:1).
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
 }
 
 /** A zero is not drawn at all — this row's rule (a tab draws its zero; both are deliberate). */

package/src/Person.stories.tsx

@@ -21,6 +21,9 @@ export const Unnamed: Story = {
 /** Where the unnamed person is *you*, pass a word instead of the dash. */
 export const OwnFallback: Story = {
   args: { name: undefined, fallback: 'Anonymous' },
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // the fallback name is muted text, 3.94:1 on --bg-base in signal (AA 4.5:1).
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
 }
 
 /** The text size is the caller's, so face and words are set together. */

package/src/PersonTrigger.mdx

@@ -44,7 +44,15 @@ import { PersonTrigger } from '@estiva-app/ui'
 - A toggle trigger must swallow its `mousedown` (as above) or the menu's
   outside-click dismiss turns each press into close-then-reopen — the
   trap is spelled out on the Menu page.
-- It takes a `ref` and every native button prop — anchor your menu on it.
+- It is a native `<button>` on Base UI's Button: it takes a `ref` and
+  every native button prop — anchor your menu on it.
+
+## Keys
+
+| Key | Does |
+|---|---|
+| Tab | Onto it. |
+| Space / Enter | Your `onClick`: open what it opens. |
 
 ## Props
 

package/src/PersonTrigger.stories.tsx

@@ -22,6 +22,9 @@ export const RowOpen: Story = {
 /** The row for someone with no published name. */
 export const RowUnnamed: Story = {
   args: { name: undefined, fallback: 'Anonymous' },
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // the fallback name is muted text, 3.94:1 on --bg-base in signal (AA 4.5:1).
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
 }
 
 /** The face alone — Peek's top-bar shape. No chevron, no padding, and no hover fill: the face fills the whole control, so a fill would have nowhere to show. */

package/src/PersonTrigger.test.tsx

@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+/**
+ * What the PersonTrigger page claims, pinned: a menu button named by the
+ * person, `open` on `aria-expanded`, a ref that reaches the button (stage 2
+ * of the migration).
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { createRef } from 'react'
+import { PersonTrigger } from './PersonTrigger'
+
+afterEach(cleanup)
+
+describe('PersonTrigger', () => {
+  it('the row is a menu button named by the person, and open shows on it', () => {
+    const { rerender } = render(<PersonTrigger name="Ana Duarte" />)
+    // The face's initials are text too, so the name reads "AD Ana Duarte"
+    // today; that is the Avatar's to settle at its own port (stage 6).
+    const button = screen.getByRole('button', { name: /Ana Duarte$/ })
+    expect(button.tagName).toBe('BUTTON')
+    expect(button.getAttribute('type')).toBe('button')
+    expect(button.getAttribute('aria-haspopup')).toBe('menu')
+    expect(button.getAttribute('aria-expanded')).toBe('false')
+    rerender(<PersonTrigger name="Ana Duarte" open />)
+    expect(button.getAttribute('aria-expanded')).toBe('true')
+  })
+
+  it('Tab reaches it; Space and Enter are the click', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    render(<PersonTrigger name="Ana Duarte" onClick={onClick} />)
+    await user.tab()
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: /Ana Duarte$/ }))
+    await user.keyboard('{Enter}')
+    await user.keyboard(' ')
+    expect(onClick).toHaveBeenCalledTimes(2)
+  })
+
+  it('the compact face takes the label it is given, and a ref and handlers reach the button', async () => {
+    const user = userEvent.setup()
+    const ref = createRef<HTMLButtonElement>()
+    const onMouseDown = vi.fn()
+    const onClick = vi.fn()
+    render(<PersonTrigger name="Ana Duarte" compact aria-label="Account menu" ref={ref} onMouseDown={onMouseDown} onClick={onClick} />)
+    const button = screen.getByRole('button', { name: 'Account menu' })
+    expect(ref.current).toBe(button)
+    await user.click(button)
+    expect(onMouseDown).toHaveBeenCalledTimes(1)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

package/src/PersonTrigger.tsx

@@ -1,11 +1,13 @@
 import type { ComponentPropsWithRef } from 'react'
+import { Button as BaseButton } from '@base-ui/react/button'
 import { IconChevronDown } from '@tabler/icons-react'
 import { cn } from './cn'
 import { Avatar } from './Avatar'
 import { Person, type PersonProps } from './Person'
 
 /**
- * The person, as the button that opens the account menu.
+ * The person, as the button that opens the account menu. On Base UI's Button
+ * since stage 2 of the migration (2026-09-07).
  *
  * Two shapes, one component (Katerina, 2026-09-01):
  *
@@ -29,7 +31,7 @@ export interface PersonTriggerProps
 export function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }: PersonTriggerProps) {
   if (compact) {
     return (
-      <button
+      <BaseButton
         type="button"
         aria-haspopup="menu"
         aria-expanded={open}
@@ -37,19 +39,16 @@ export function PersonTrigger({ name, picture, fallback, size, open = false, com
         {...props}
       >
         <Avatar name={name} src={picture} size={size ?? 36} />
-      </button>
+      </BaseButton>
     )
   }
   return (
-    <button
+    <BaseButton
       type="button"
       aria-haspopup="menu"
       aria-expanded={open}
       className={cn(
-        // The size is an arbitrary value (the body-2 token): this list goes through
-        // cn(), and tw-merge silently drops a custom text-{size} once a
-        // text-{colour} follows it. Measured: the name rendered 16px.
-        'flex h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-[14px] leading-[140%] text-text-primary transition-colors hover:bg-bg-hover',
+        'flex h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-body-2 text-text-primary transition-colors hover:bg-bg-hover',
         open && 'bg-bg-hover',
         className,
       )}
@@ -57,6 +56,6 @@ export function PersonTrigger({ name, picture, fallback, size, open = false, com
     >
       <Person name={name} picture={picture} fallback={fallback} size={size ?? 22} />
       <IconChevronDown size={14} stroke={1.5} className="shrink-0 text-text-muted" />
-    </button>
+    </BaseButton>
   )
 }

package/src/Select.stories.tsx

@@ -49,7 +49,12 @@ function Demo(props: Omit<ComponentProps<typeof Select>, 'value' | 'onChange'> &
 export const Default: Story = { render: (args) => <Demo {...args} initial="in_progress" /> }
 
 /** Nothing chosen yet: the placeholder is muted, so an empty select does not read as one already holding a value. */
-export const Empty: Story = { render: (args) => <Demo {...args} initial="" placeholder="Choose a status…" /> }
+export const Empty: Story = {
+  render: (args) => <Demo {...args} initial="" placeholder="Choose a status…" />,
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // the placeholder is muted text, 3.21:1 on the field in signal (AA 4.5:1).
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
+}
 
 /** The dense size, matching `Button`'s small — for property rows, where a full-height field would dominate the label beside it. */
 export const Small: Story = { render: (args) => <Demo {...args} size="small" initial="todo" /> }
@@ -181,7 +186,7 @@ export const LongLabelInPropertyRow: Story = {
   render: (args) => (
     <div className="w-[300px] rounded-lg border border-border-subtle p-3">
       <div className="flex items-center gap-2">
-        <span className="w-[68px] shrink-0 text-xs text-text-secondary">Lead</span>
+        <span className="w-[68px] shrink-0 text-caption text-text-secondary">Lead</span>
         <Demo
           {...args}
           size="small"

package/src/Sidebar.stories.tsx

@@ -20,6 +20,9 @@ type Story = StoryObj<typeof meta>
 
 /** Entries, then a labelled group — the heading is a SectionLabel in a 32px row. */
 export const Composed: Story = {
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // the count chip is muted text, 3.06:1 on the active row in signal (AA 4.5:1).
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
   render: (args) => (
     <Sidebar {...args}>
       <NavItem href="#" label="Item one" icon={placeholder} count={18} countLabel="18 open" active />
@@ -36,6 +39,9 @@ export const Composed: Story = {
 
 /** The column scrolls on its own — a long list never scrolls the frame away. */
 export const Scrolls: Story = {
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // the count chips are muted text, 3.78:1 on --bg-surface in signal (AA 4.5:1).
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
   render: (args) => (
     <Sidebar {...args}>
       <NavItem href="#" label="Item one" icon={placeholder} count={18} countLabel="18 open" />