@estiva-app/ui 0.13.1 → 0.14.0

package/src/PreviewCard.stories.tsx

@@ -40,11 +40,11 @@ function Detail() {
         ].map(([k, v], i) => (
           <div key={i} className="flex items-baseline gap-2">
             <span className="w-20 shrink-0 text-caption text-text-secondary">{k}</span>
-            <span className="min-w-0 flex-1 truncate text-[12px] leading-[1.45] text-text-primary">{v}</span>
+            <span className="min-w-0 flex-1 truncate text-caption text-text-primary">{v}</span>
           </div>
         ))}
       </div>
-      <span className="text-[12px] leading-[1.45] text-text-secondary">
+      <span className="text-caption text-text-secondary">
         This is the card. It opened because the pointer came to rest on the row
         and stayed there for 350ms, and it will close 200ms after the pointer
         leaves — long enough to move into the card without losing it.
@@ -57,7 +57,7 @@ function Row({ label, note }: { label: string; note?: string }) {
   return (
     <div className="flex w-full items-center gap-2 rounded-lg border border-border-default px-3 py-2 hover:bg-bg-hover">
       <IconSquareRounded size={16} stroke={1.5} className="shrink-0 text-text-secondary" />
-      <span className="min-w-0 flex-1 truncate text-[14px] leading-[140%] text-text-primary">{label}</span>
+      <span className="min-w-0 flex-1 truncate text-body-2 text-text-primary">{label}</span>
       {note && <span className="shrink-0 text-caption text-text-muted">{note}</span>}
     </div>
   )
@@ -131,7 +131,7 @@ export const Scrolling: Story = {
       content={
         <>
           <span className="text-body-2-strong text-text-primary">Item with more than fits</span>
-          <span className="text-[12px] leading-[1.45] text-text-secondary">
+          <span className="text-caption text-text-secondary">
             There is more here than the card's 300px cap allows, so it scrolls.
             You can reach that scrollbar because the pointer can enter this card.
             A tooltip cannot be entered, so a tooltip that scrolled would be a
@@ -140,7 +140,7 @@ export const Scrolling: Story = {
           {Array.from({ length: 14 }, (_, i) => (
             <div key={i} className="flex items-baseline gap-2">
               <span className="w-20 shrink-0 text-caption text-text-secondary">Label</span>
-              <span className="min-w-0 flex-1 truncate text-[12px] leading-[1.45] text-text-primary">Value {i + 1}</span>
+              <span className="min-w-0 flex-1 truncate text-caption text-text-primary">Value {i + 1}</span>
             </div>
           ))}
         </>

package/src/Property.mdx

@@ -46,6 +46,14 @@ import { Property } from '@estiva-app/ui'
 Any control sits inside — a Chip, a Person, a Select, plain text (the
 WithControls story shows the pairings).
 
+- It is HTML's own name–value markup: a `<dl>` with the label as its `<dt>`
+  and what you pass as its `<dd>`, so a screen reader hears the label as the
+  name of the value. Base UI has no part for this. Each property is a list of
+  one; nothing needs wrapping.
+- The `<dd>` draws no box (`display: contents`), so what you pass lays out as
+  a child of the row or the column: a control with `flex-1` still fills the
+  row, and two values still sit the row's gap apart.
+
 ## Props
 
 <Controls of={PropertyStories.Row} />

package/src/Property.stories.tsx

@@ -28,10 +28,10 @@ export const APanel: Story = {
         <Chip type="success" label="Done" />
       </Property>
       <Property label="Lead">
-        <Person name="Ana Duarte" size={16} className="text-[12px] leading-[120%] text-text-primary" />
+        <Person name="Ana Duarte" size={16} className="text-caption text-text-primary" />
       </Property>
       <Property label="Updated">
-        <span className="text-[12px] leading-[120%] text-text-secondary">2d ago</span>
+        <span className="text-caption text-text-secondary">2d ago</span>
       </Property>
     </div>
   ),
@@ -42,7 +42,7 @@ export const Stacked: Story = {
   args: {
     label: 'Assignee',
     layout: 'stacked',
-    children: <Person name="Ravi Mehta" size={20} className="text-[14px] leading-[140%] text-text-primary" />,
+    children: <Person name="Ravi Mehta" size={20} className="text-body-2 text-text-primary" />,
   },
 }
 
@@ -87,5 +87,5 @@ export const WithControls: Story = {
 
 /** No value: the em dash, muted — the same mark Person uses for the unnamed. */
 export const Empty: Story = {
-  args: { label: 'Folder', children: <span className="text-[12px] leading-[120%] text-text-muted">—</span> },
+  args: { label: 'Folder', children: <span className="text-caption text-text-muted">—</span> },
 }

package/src/Property.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+/**
+ * What the Property page claims, pinned: the label is the term, the value is
+ * its definition, and the value's wrapper draws no box, so what a caller puts
+ * inside lays out as a child of the row.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { Property } from './Property'
+
+afterEach(cleanup)
+
+describe('Property', () => {
+  it.each(['row', 'stacked'] as const)('%s: a list of one term and its definition', (layout) => {
+    const { container } = render(
+      <Property label="Status" layout={layout}>
+        <span>Done</span>
+      </Property>,
+    )
+    const list = container.firstElementChild!
+    expect(list.tagName).toBe('DL')
+    expect(Array.from(list.children).map((child) => child.tagName)).toEqual(['DT', 'DD'])
+    expect(screen.getByRole('term').textContent).toBe('Status')
+    expect(screen.getByRole('definition').textContent).toBe('Done')
+  })
+
+  it.each(['row', 'stacked'] as const)('%s: the value wrapper draws no box of its own', (layout) => {
+    render(
+      <Property label="Status" layout={layout}>
+        <span>Done</span>
+      </Property>,
+    )
+    expect(screen.getByRole('definition').className).toBe('contents')
+  })
+
+  it('the caller’s className lands on the list', () => {
+    const { container } = render(
+      <Property label="Status" className="mt-2">
+        <span>Done</span>
+      </Property>,
+    )
+    expect(container.firstElementChild!.className).toContain('mt-2')
+  })
+})

package/src/Property.tsx

@@ -15,6 +15,13 @@ import { cn } from './cn'
  *   is the `menu` token (9px / 115% / 500), uppercase and letter-spaced —
  *   its own voice, deliberately not SectionLabel's (unmerged, Katerina
  *   2026-09-01). A literal string, not merged, so the token size survives.
+ *
+ * **A name and its value, in the markup made for it** (stage 6 of the
+ * migration, 2026-09-14). Base UI has no part for this, so it is HTML's own:
+ * a `<dl>` holding one `<dt>` (the label) and one `<dd>` (the value), so a
+ * screen reader hears the label as the name of what follows rather than as a
+ * loose word beside it. Each property is a list of one, which needs no
+ * wrapper from the caller.
  */
 export interface PropertyProps {
   label: string
@@ -23,22 +30,30 @@ export interface PropertyProps {
   className?: string
 }
 
+/**
+ * The value's `<dd>` draws no box of its own (`display: contents`): whatever
+ * the caller passes stays a child of the row or the column, exactly as it was
+ * before the `<dd>` existed — a control that fills the row (`flex-1`) still
+ * fills it, and two values still sit the row's gap apart.
+ */
+const VALUE_CLASSES = 'contents'
+
 export function Property({ label, layout = 'row', children, className }: PropertyProps) {
   if (layout === 'stacked') {
     return (
       // gap-3 — the one label-above-content distance (Katerina, 2026-09-01):
       // Peek's topic-details sections already sit at 12px, Ship's rail was
       // 6px, and unifying means the bigger, calmer one.
-      <div className={cn('flex flex-col gap-3', className)}>
-        <span className="text-menu uppercase tracking-[0.08em] text-text-secondary">{label}</span>
-        {children}
-      </div>
+      <dl className={cn('flex flex-col gap-3', className)}>
+        <dt className="text-menu uppercase tracking-widest text-text-secondary">{label}</dt>
+        <dd className={VALUE_CLASSES}>{children}</dd>
+      </dl>
     )
   }
   return (
-    <div className={cn('flex items-center gap-2', className)}>
-      <span className="w-[68px] shrink-0 text-caption text-text-secondary">{label}</span>
-      {children}
-    </div>
+    <dl className={cn('flex items-center gap-2', className)}>
+      <dt className="w-[68px] shrink-0 text-caption text-text-secondary">{label}</dt>
+      <dd className={VALUE_CLASSES}>{children}</dd>
+    </dl>
   )
 }

package/src/RailItem.tsx

@@ -45,7 +45,7 @@ export function RailItem({ href, icon, label, active = false, className, ...prop
           {icon}
         </span>
       </div>
-      <span className={cn('text-center text-[9px] font-medium leading-[115%]', active ? 'text-text-primary' : 'text-text-secondary')}>
+      <span className={cn('text-center text-menu', active ? 'text-text-primary' : 'text-text-secondary')}>
         {label}
       </span>
     </a>

package/src/Reaction.mdx

@@ -42,9 +42,20 @@ import { Reaction } from '@estiva-app/ui'
   aloud is noise, and its spoken name differs per screen reader — so the
   count is the only visible text and the control would otherwise be
   announced as "2". Pass the meaning and the count.
-- It is a real `<button>` with `aria-pressed`, so "mine" reaches assistive
-  tech as a toggle rather than as a colour. Every native prop passes
-  through; `type` defaults to `"button"`.
+- It is Base UI's `Toggle`: a real `<button>` with `aria-pressed` and
+  `data-pressed`, so "mine" reaches assistive tech as a toggle rather than as
+  a colour. It is always `type="button"`, never a form's submit.
+- **You own `pressed`.** A press calls `onClick` and changes nothing on its
+  own; the pill shows "yours" when your data says so. A write can fail, and
+  another client can change the count.
+- `disabled` takes it out of the Tab order and ignores presses.
+
+## Keys
+
+| Key | What happens |
+|---|---|
+| Tab | Moves to the reaction; a disabled one is skipped |
+| Enter, Space | Presses it: calls `onClick` |
 
 ## Props
 

package/src/Reaction.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+/**
+ * What the Reaction page claims, pinned: a toggle named by its label, the emoji
+ * kept out of the name, "yours" carried as `aria-pressed`, and the keys a
+ * native button answers to.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Reaction } from './Reaction'
+
+afterEach(cleanup)
+
+describe('Reaction', () => {
+  it('is a button named by its label, never by the emoji or the bare count', () => {
+    render(<Reaction emoji="👍" count={2} aria-label="Makes sense, 2" />)
+    const button = screen.getByRole('button', { name: 'Makes sense, 2' })
+    expect(button.getAttribute('type')).toBe('button')
+    expect(button.querySelector('[aria-hidden="true"]')?.textContent).toBe('👍')
+    expect(button.textContent).toBe('👍2')
+  })
+
+  it('says whether the reaction is yours as a pressed state', () => {
+    const { rerender } = render(<Reaction emoji="👍" count={2} aria-label="Makes sense, 2" />)
+    const button = screen.getByRole('button')
+    expect(button.getAttribute('aria-pressed')).toBe('false')
+    expect(button.hasAttribute('data-pressed')).toBe(false)
+    rerender(<Reaction emoji="👍" count={3} aria-label="Makes sense, 3" pressed />)
+    expect(button.getAttribute('aria-pressed')).toBe('true')
+    expect(button.hasAttribute('data-pressed')).toBe(true)
+  })
+
+  it('a press calls onClick and leaves the pressed state to the caller', async () => {
+    const onClick = vi.fn()
+    render(<Reaction emoji="👍" count={2} aria-label="Makes sense, 2" onClick={onClick} />)
+    const button = screen.getByRole('button')
+    await userEvent.click(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(button.getAttribute('aria-pressed')).toBe('false')
+  })
+
+  it('Tab reaches it; Enter and Space press it', async () => {
+    const onClick = vi.fn()
+    render(<Reaction emoji="👍" count={2} aria-label="Makes sense, 2" onClick={onClick} />)
+    await userEvent.tab()
+    expect(document.activeElement).toBe(screen.getByRole('button'))
+    await userEvent.keyboard('{Enter}')
+    await userEvent.keyboard(' ')
+    expect(onClick).toHaveBeenCalledTimes(2)
+  })
+
+  it('disabled: not reachable by Tab, and a press does nothing', async () => {
+    const onClick = vi.fn()
+    render(<Reaction emoji="👍" count={2} aria-label="Makes sense, 2" onClick={onClick} disabled />)
+    const button = screen.getByRole('button')
+    expect((button as HTMLButtonElement).disabled).toBe(true)
+    await userEvent.tab()
+    expect(document.activeElement).not.toBe(button)
+    await userEvent.click(button)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+})

package/src/Reaction.tsx

@@ -1,4 +1,5 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { Toggle } from '@base-ui/react/toggle'
 import { cn } from './cn'
 
 /**
@@ -22,8 +23,10 @@ import { cn } from './cn'
  * 1px hairline against no border at all — which is legible and is not the
  * signal Peek's accent fill gives.
  *
- * It is a real `<button>` with `aria-pressed`, so the state reaches assistive
- * tech as a toggle rather than as a colour.
+ * On Base UI's `Toggle` since stage 6 of the migration (2026-09-14): a native
+ * `<button>` with `aria-pressed` and `data-pressed`, so the state reaches
+ * assistive tech as a toggle rather than as a colour. Base UI writes both;
+ * this component used to write the first by hand.
  *
  * ## `aria-label` is required, and the reason is specific
  *
@@ -39,12 +42,16 @@ import { cn } from './cn'
  * `small`, the same 8px horizontal padding, the `chip` type token for the
  * count so it sits at 11px/500 like every other count in the system.
  */
-export interface ReactionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+export interface ReactionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type' | 'value'> {
   /** The emoji, drawn decoratively — name the control with `aria-label`. */
   emoji: ReactNode
-  /** How many people reacted. Drawn as-is; `0` is not a reaction and is not drawn. */
+  /** How many people reacted. Drawn as it is. A count of `0` is not a reaction: do not render one. */
   count: number
-  /** You are one of them: the accent tint and edge, and `aria-pressed`. */
+  /**
+   * You are one of them: the accent tint and edge, and `aria-pressed`. The
+   * caller owns it — a press calls `onClick` and the pill keeps showing this
+   * value until the caller changes it.
+   */
   pressed?: boolean
   /**
    * Names the control. **Required** — the emoji is decorative and the count is
@@ -53,11 +60,13 @@ export interface ReactionProps extends Omit<ButtonHTMLAttributes<HTMLButtonEleme
   'aria-label': string
 }
 
-export function Reaction({ emoji, count, pressed = false, className, type, ...props }: ReactionProps) {
+export function Reaction({ emoji, count, pressed = false, className, ...props }: ReactionProps) {
   return (
-    <button
-      type={type ?? 'button'}
-      aria-pressed={pressed}
+    <Toggle
+      // Controlled: a reaction is yours when the data says so, not when the
+      // pill was last pressed — a write can fail, and another client can
+      // change it.
+      pressed={pressed}
       className={cn(
         // Chip's pill at a control's height, so a reaction and a status chip
         // read as the same family — 24px matches Button `small`.
@@ -78,16 +87,16 @@ export function Reaction({ emoji, count, pressed = false, className, type, ...pr
     >
       {/* Decorative: the control is named by `aria-label`, and a glyph read
           aloud is noise. 16px so the emoji is legible at chip scale. */}
-      <span aria-hidden="true" className="shrink-0 text-[16px] leading-none">
+      <span aria-hidden="true" className="shrink-0 text-body-1 leading-none">
         {emoji}
       </span>
       {/* `text-chip` stands alone here, so there is nothing to merge it with.
           The old note said it must NEVER be merged; that stopped being true
           when `cn()` was taught the ramp — `chip` is in it, and `cn.test.ts`
           pins that. */}
-      <span className="text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tabular-nums">
+      <span className="text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums">
         {count}
       </span>
-    </button>
+    </Toggle>
   )
 }

package/src/ReactionPicker.tsx

@@ -77,7 +77,7 @@ export function ReactionPicker({ options, onSelect, 'aria-label': ariaLabel = 'R
           /* Peek's geometry, verbatim: a 28px square rather than the
              IconButton's 24, and the emoji at 18px — larger than a `Reaction`
              pill's 16, because here the emoji is the whole control. */
-          className="size-7 text-[18px] leading-none"
+          className="size-7 text-h3 leading-none"
         >
           {/* Decorative, as on `Reaction`: the control is named above. */}
           <span aria-hidden="true">{option.emoji}</span>

package/src/SectionLabel.stories.tsx

@@ -22,7 +22,7 @@ export const HeadingAList: Story = {
         <SectionLabel>Recent</SectionLabel>
       </div>
       {['Quarterly plan', 'Reading list', 'Archive'].map((row) => (
-        <div key={row} className="rounded-lg px-2 py-1.5 text-[14px] leading-[140%] text-text-primary hover:bg-bg-hover">
+        <div key={row} className="rounded-lg px-2 py-1.5 text-body-2 text-text-primary hover:bg-bg-hover">
           {row}
         </div>
       ))}

package/src/SectionLabel.tsx

@@ -18,7 +18,7 @@ export function SectionLabel({ children, className }: { children: ReactNode; cla
   return (
     <span
       className={cn(
-        'text-[12px] leading-[12px] font-medium text-text-primary signal:font-mono signal:text-[10px] signal:uppercase signal:tracking-[0.14em]',
+        'text-h5 leading-3 text-text-primary signal:font-mono signal:text-small signal:uppercase signal:tracking-widest',
         className,
       )}
     >

package/src/Select.tsx

@@ -88,8 +88,8 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
           'hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',
           'focus-visible:border-border-focus aria-expanded:border-border-focus',
           'signal:transition-shadow signal:focus-visible:shadow-focus-ring',
-          size === 'default' && 'px-3 py-2 text-[14px] leading-[1.4] font-normal',
-          size === 'small' && 'h-6 px-2 text-[12px] leading-[1.4] font-normal',
+          size === 'default' && 'px-3 py-2 text-input-value',
+          size === 'small' && 'h-6 px-2 text-caption',
           className,
         )}
       >
@@ -167,7 +167,7 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
               >
                 <span className="flex min-w-0 items-center gap-2">
                   {option.leading && <span className="flex shrink-0 items-center">{option.leading}</span>}
-                  <BaseSelect.ItemText className="truncate text-[14px] leading-[140%] text-text-primary">{option.label}</BaseSelect.ItemText>
+                  <BaseSelect.ItemText className="truncate text-body-2 text-text-primary">{option.label}</BaseSelect.ItemText>
                 </span>
                 <BaseSelect.ItemIndicator
                   render={<IconCheck size={16} stroke={1.5} className="shrink-0 text-text-secondary" />}

package/src/TextInput.mdx

@@ -14,6 +14,10 @@ border in every theme.
 
 - One line of text in a form or dialog — a name, a title, a URL. Label it
   with a **Field**.
+- **`size="small"`** in a dense row beside small **Select**s: 24px tall,
+  12px text, the small Select's padding. Default is 38px.
+
+<Canvas of={TextInputStories.BesideSmallSelects} />
 
 ## When not
 
@@ -39,6 +43,8 @@ import { TextInput } from '@estiva-app/ui'
 - **Outside a `Field`, name it yourself** with `aria-label`: a placeholder
   is not a name.
 - `disabled` gets the disabled surface and text; say why with a tooltip.
+- `size` is this component's (`default` or `small`), not the native attribute
+  that counts characters. Set a width with the layout around it.
 
 ## Props
 

package/src/TextInput.stories.tsx

@@ -1,4 +1,6 @@
+import { useState } from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Select } from './Select'
 import { TextInput } from './TextInput'
 
 const meta = {
@@ -16,3 +18,46 @@ type Story = StoryObj<typeof meta>
 export const Empty: Story = {}
 export const Filled: Story = { args: { defaultValue: 'Q3 launch planning' } }
 export const Disabled: Story = { args: { defaultValue: 'Read only', disabled: true } }
+
+/** 24px and 12px text — the small `Select`'s size, for a dense row. */
+export const Small: Story = { args: { size: 'small', placeholder: 'Label…' } }
+
+function DenseRow() {
+  const [first, setFirst] = useState('one')
+  const [second, setSecond] = useState('a')
+  return (
+    <div className="flex items-center gap-1">
+      <div className="w-28">
+        <Select
+          ariaLabel="First"
+          size="small"
+          value={first}
+          onChange={setFirst}
+          options={[
+            { value: 'one', label: 'Option one' },
+            { value: 'two', label: 'Option two' },
+          ]}
+        />
+      </div>
+      <div className="w-24">
+        <Select
+          ariaLabel="Second"
+          size="small"
+          value={second}
+          onChange={setSecond}
+          options={[
+            { value: 'a', label: 'Item' },
+            { value: 'b', label: 'Other item' },
+          ]}
+        />
+      </div>
+      <TextInput size="small" aria-label="Value" placeholder="Label…" className="min-w-0 flex-1" />
+    </div>
+  )
+}
+
+/** Beside two small selects, in one row: the three are the same height, and the text sits on one line. */
+export const BesideSmallSelects: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <DenseRow />,
+}

package/src/TextInput.test.tsx

@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+/**
+ * What the TextInput page claims, pinned: a native input with a ref, the two
+ * sizes, and the small one drawn with the small Select's classes.
+ */
+import { createRef } from 'react'
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { TextInput } from './TextInput'
+
+afterEach(cleanup)
+
+describe('TextInput', () => {
+  it('is a native text input that forwards its ref and native props', () => {
+    const ref = createRef<HTMLInputElement>()
+    render(<TextInput ref={ref} aria-label="Title" placeholder="Untitled" />)
+    const input = screen.getByRole('textbox', { name: 'Title' })
+    expect(ref.current).toBe(input)
+    expect(input.getAttribute('type')).toBe('text')
+    expect(input.getAttribute('placeholder')).toBe('Untitled')
+  })
+
+  it('default size: 14px text with 12px by 8px padding', () => {
+    render(<TextInput aria-label="Title" />)
+    const classes = screen.getByRole('textbox').className.split(' ')
+    for (const c of ['px-3', 'py-2', 'text-input-value']) expect(classes).toContain(c)
+    expect(classes).not.toContain('h-6')
+  })
+
+  it('small: 24px tall, 12px text, 8px side padding — and no native size attribute', () => {
+    render(<TextInput aria-label="Title" size="small" />)
+    const input = screen.getByRole('textbox')
+    const classes = input.className.split(' ')
+    for (const c of ['h-6', 'px-2', 'text-caption']) expect(classes).toContain(c)
+    for (const c of ['px-3', 'py-2', 'text-input-value']) expect(classes).not.toContain(c)
+    expect(input.hasAttribute('size')).toBe(false)
+  })
+})

package/src/TextInput.tsx

@@ -15,16 +15,28 @@ import { cn } from './cn'
  * context behind it — is gone. Outside a `Field` it behaves as before: the
  * field context has a default, so nothing has to be wrapped.
  */
-export type TextInputProps = InputHTMLAttributes<HTMLInputElement>
+export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /**
+   * `small` is 24px tall with 12px text — the small `Select`'s size, so a
+   * field can share a dense row with small selects (D67, 2026-09-13: Peek's
+   * reference widget hand-built one because this was 38px). Replaces the
+   * native `size` attribute, which counts characters and which no caller
+   * used; set a width with the layout instead.
+   */
+  size?: 'default' | 'small'
+}
 
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput({ className, type = 'text', ...props }, ref) {
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput({ className, type = 'text', size = 'default', ...props }, ref) {
   return (
     <Input
       ref={ref}
       type={type}
       className={cn(
-        'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2',
-        'text-[14px] leading-[1.4] font-normal text-text-primary placeholder:text-text-muted',
+        'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg',
+        // The small size is the small Select's trigger, class for class.
+        size === 'default' && 'px-3 py-2 text-input-value',
+        size === 'small' && 'h-6 px-2 text-caption',
+        'text-text-primary placeholder:text-text-muted',
         'outline-none transition-colors',
         'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',
         'signal:transition-shadow signal:focus:shadow-focus-ring',

package/src/Textarea.tsx

@@ -22,7 +22,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
       render={<textarea />}
       className={cn(
         'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2',
-        'text-[14px] leading-[1.4] font-normal text-text-primary placeholder:text-text-muted',
+        'text-input-value text-text-primary placeholder:text-text-muted',
         'resize-none outline-none transition-colors',
         'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',
         'signal:transition-shadow signal:focus:shadow-focus-ring',

package/src/Toast.mdx

@@ -48,13 +48,37 @@ const { showToast } = useToast()
 showToast({ label: 'Link copied', type: 'success' })
 ```
 
-- **One toast at a time** — a new one replaces the standing one; nothing
-  queues.
-- Auto-dismiss is 5s; `durationMs: 0` keeps one up until replaced or
-  dismissed (`dismissToast`).
+- **Three at once** (D7). The newest stands nearest the corner. A fourth
+  hides the oldest, which comes back when one of the three closes — so a
+  warning kept up with `durationMs: 0` is never lost under newer ones.
+- Auto-dismiss is 5s; `durationMs: 0` keeps one up until it is dismissed.
+  The timers pause while the pointer is over the toasts, while focus is in
+  them, and while the window is in the background.
+- **The action closes its own toast.** Pressing it runs `onAction`, if you
+  gave one, then closes that toast and no other. A Dismiss is just
+  `actionLabel: 'Dismiss'`.
+- `showToast` returns the toast's id. `dismissToast(id)` closes that toast;
+  `dismissToast()` with no id closes **every** toast on screen.
+- A toast can be swiped away towards its corner — left or down.
+- It is Base UI's `Toast`. The stack is a region named "Notifications" that
+  a screen reader announces politely; an `error` toast is announced at once.
+- **Each toast is a `dialog`** (not modal), so it can take focus. A test that
+  waits for "no dialog" after closing one will find the toast: ask for the
+  dialog by its name.
+- Focus on a toast shows the browser's own outline, as the package's buttons
+  do.
 - `useToast` outside a provider throws — mount the provider at the root,
   once.
 
+## Keys
+
+| Key | What happens |
+|---|---|
+| F6 | Moves focus to the toasts, from anywhere on the page |
+| Tab | Walks the toasts and their actions; Shift+Tab from the region goes back to where you were |
+| Enter, Space | On an action: presses it |
+| Escape | On a toast: closes it |
+
 ## Props
 
 <Controls of={ToastStories.Neutral} />

package/src/Toast.stories.tsx

@@ -82,11 +82,22 @@ function ProviderDemo() {
       >
         With an action
       </Button>
+      <Button
+        variant="muted"
+        onClick={() =>
+          showToast({ label: 'Not everything went through', type: 'warning', durationMs: 0, actionLabel: 'Dismiss' })
+        }
+      >
+        Keep one up
+      </Button>
     </div>
   )
 }
 
-/** The provider in motion: bottom-left, gone after 5 s, a new toast replaces the standing one. */
+/**
+ * The provider in motion: bottom-left, gone after 5 s. Press a few times — three stand at once, the newest
+ * nearest the corner, and a fourth hides the oldest until there is room. Hovering the toasts pauses them.
+ */
 export const FromTheProvider: Story = {
   parameters: { controls: { disable: true } },
   render: () => (