@estiva-app/ui 0.13.0 → 0.14.0

package/src/EmptyState.test.tsx

@@ -31,6 +31,21 @@ describe('EmptyState', () => {
     expect(line.className).not.toContain('text-center')
   })
 
+  it('a section is the quiet line: caption size, muted colour (Katerina, 2026-09-15)', () => {
+    render(<EmptyState scope="section" message="Nothing here yet." />)
+    const classes = screen.getByText('Nothing here yet.').className.split(' ')
+    expect(classes).toContain('text-caption')
+    expect(classes).toContain('text-text-muted')
+    expect(classes).not.toContain('text-body-2')
+    expect(classes).not.toContain('text-text-secondary')
+  })
+
+  it('a caller’s placement class does not take the quiet look away', () => {
+    render(<EmptyState scope="section" className="py-8" message="Nothing here yet." />)
+    const classes = screen.getByText('Nothing here yet.').className.split(' ')
+    expect(classes).toEqual(expect.arrayContaining(['text-caption', 'text-text-muted', 'py-8']))
+  })
+
   it('a section carries no space of its own, so the box it sits in decides where it starts', () => {
     // Katerina, 2026-09-14: the box is written once and holds the rows or the empty
     // state; the empty state is never padded. So it may carry no padding or margin.

package/src/EmptyState.tsx

@@ -15,6 +15,9 @@ import { cn } from './cn'
  * - `section` — one section of a page is empty, and the page has other
  *   things on it: the line alone, left-aligned, no icon. A section's
  *   emptiness is a line among the page's content, not a stage of its own.
+ *   It is the quiet line — caption size in the muted colour, as a Field's
+ *   helper line is — so beside rows it reads as "nothing here", not as one
+ *   more row (Katerina, 2026-09-15: "not that intense", "smaller font").
  *
  * The message is the caller's — a shared component has no words of its own
  * for what is missing.
@@ -30,7 +33,7 @@ export interface EmptyStateProps {
 
 export function EmptyState({ icon, message, scope = 'page', className }: EmptyStateProps) {
   if (scope === 'section') {
-    return <p className={cn('text-body-2 text-text-secondary', className)}>{message}</p>
+    return <p className={cn('text-caption text-text-muted', className)}>{message}</p>
   }
   return (
     <div className={cn('flex flex-1 flex-col items-center justify-center gap-2', className)}>

package/src/IconButton.stories.tsx

@@ -41,7 +41,7 @@ export const AllVariants: Story = {
           <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>
+          <span className="text-caption text-text-muted">{variant}</span>
         </div>
       ))}
     </div>

package/src/Kbd.tsx

@@ -30,9 +30,9 @@ export function Kbd({ children, className }: KbdProps) {
   return (
     <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-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]',
+        '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-caption text-text-secondary',
+        'signal:border-b-2 signal:pt-[2px] signal:pb-px signal:bg-bg-wash signal:font-mono signal:text-small',
+        'ship:border-b-2 ship:pt-[2px] ship:pb-px ship:bg-bg-wash ship:font-mono ship:text-small',
         className,
       )}
     >

package/src/Menu.stories.tsx

@@ -72,7 +72,7 @@ export const WithARow: Story = {
   render: () => (
     <MenuPanel className="w-64">
       <MenuRow>
-        <span className="min-w-0 flex-1 truncate text-[14px] leading-[140%] text-text-primary">Item one</span>
+        <span className="min-w-0 flex-1 truncate text-body-2 text-text-primary">Item one</span>
         <SectionLabel className="text-text-secondary">Label</SectionLabel>
       </MenuRow>
       <Divider className="my-1" />
@@ -134,7 +134,7 @@ export const OnACard: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex w-[420px] items-start gap-3 rounded-lg border border-border-default p-3">
-      <span className="min-w-0 flex-1 text-[14px] leading-[140%] text-text-primary">
+      <span className="min-w-0 flex-1 text-body-2 text-text-primary">
         A card. Press the control at the end of the row, then walk down the rows and out to the submenu.
       </span>
       <Menu

package/src/Menu.tsx

@@ -426,10 +426,10 @@ function MenuItemBody({ label, children, size = 'default', description, leading,
           colour. Ship's copy said `text-sm`, which was never the ramp. */}
       {children ?? (
         <span className={cn('flex min-w-0 flex-1 flex-col', size === 'tall' && 'gap-[2px]')}>
-          <span className={cn('truncate text-[14px] leading-[140%]', destructive ? 'text-error-default' : 'text-text-primary')}>
+          <span className={cn('truncate text-body-2', destructive ? 'text-error-default' : 'text-text-primary')}>
             {label}
           </span>
-          {description && <span className="truncate text-[12px] leading-[120%] text-text-secondary">{description}</span>}
+          {description && <span className="truncate text-caption text-text-secondary">{description}</span>}
         </span>
       )}
       {(edge || hint) && (
@@ -538,7 +538,7 @@ export function EnterHint({ target }: { target?: string }) {
     <span className="flex shrink-0 items-center gap-1.5 text-text-muted">
       <Kbd>↩ Enter</Kbd>
       {target && (
-        <span className="text-[9px] font-medium leading-[115%] signal:font-mono signal:text-[9.5px] signal:tracking-[0.04em]">{target}</span>
+        <span className="text-menu signal:font-mono signal:text-small signal:tracking-wider">{target}</span>
       )}
     </span>
   )

package/src/Popover.stories.tsx

@@ -167,7 +167,7 @@ export const FromASelection: Story = {
             can, which is the real case; `-1` gives this one the same property
             without adding a Tab stop. Without it focus is left on the document
             body when the panel closes — measured. */}
-        <p ref={body} tabIndex={-1} onMouseUp={read} onKeyUp={readOnKey} className="text-[14px] leading-[1.6] text-text-primary outline-none">
+        <p ref={body} tabIndex={-1} onMouseUp={read} onKeyUp={readOnKey} className="text-body-2 text-text-primary outline-none">
           Select any part of this sentence with the pointer, and a panel appears
           above the selection rather than beside a button — because a selection
           is not a control and there is no trigger to hang from.

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 />,
+}