@estiva-app/ui 0.13.1 → 0.15.0

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: () => (

package/src/Toast.test.tsx

@@ -0,0 +1,137 @@
+// @vitest-environment jsdom
+/**
+ * What the Toast page claims, pinned: three at once with the newest nearest
+ * the corner, an announced region, the action closing its own toast, the
+ * timers, and the keys.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ToastProvider, useToast, type ToastOptions } from './Toast'
+
+afterEach(() => {
+  cleanup()
+  vi.useRealTimers()
+})
+
+type Api = ReturnType<typeof useToast>
+let api: Api
+function Grab() {
+  api = useToast()
+  return null
+}
+
+const mount = () => render(<ToastProvider><Grab /></ToastProvider>)
+const show = (opts: ToastOptions) => {
+  let id = ''
+  act(() => {
+    id = api.showToast(opts)
+  })
+  return id
+}
+const region = () => screen.getByRole('region', { name: 'Notifications' })
+/** The toasts a reader can see: Base UI keeps a limited one in the DOM, hidden. */
+const visible = () =>
+  within(region())
+    .queryAllByRole('dialog')
+    .filter((el) => !el.hasAttribute('data-limited'))
+    .map((el) => el.textContent)
+
+describe('ToastProvider', () => {
+  it('draws the toast in a region a screen reader announces', () => {
+    mount()
+    show({ label: 'Changes saved' })
+    expect(region().getAttribute('aria-live')).toBe('polite')
+    expect(within(region()).getByRole('dialog', { name: 'Changes saved' })).toBeTruthy()
+  })
+
+  it('a failure is announced at once', () => {
+    mount()
+    show({ label: 'That did not go through', type: 'error' })
+    expect(screen.getByRole('alert').textContent).toContain('That did not go through')
+  })
+
+  it('shows three at once, and a fourth hides the oldest until there is room (D7)', () => {
+    mount()
+    const first = show({ label: 'One', durationMs: 0 })
+    show({ label: 'Two', durationMs: 0 })
+    show({ label: 'Three', durationMs: 0 })
+    expect(visible()).toEqual(['Three', 'Two', 'One'])
+    const fourth = show({ label: 'Four', durationMs: 0 })
+    expect(visible()).toEqual(['Four', 'Three', 'Two'])
+    const oldest = within(region()).getByRole('dialog', { name: 'One', hidden: true })
+    expect(oldest.hasAttribute('data-limited')).toBe(true)
+    expect(oldest.className).toContain('data-[limited]:hidden')
+    act(() => api.dismissToast(fourth))
+    expect(visible()).toEqual(['Three', 'Two', 'One'])
+    act(() => api.dismissToast(first))
+    expect(visible()).toEqual(['Three', 'Two'])
+  })
+
+  it('the newest stands nearest the corner: first in the list, and the stack is reversed', () => {
+    mount()
+    show({ label: 'Older' })
+    show({ label: 'Newer' })
+    expect(visible()).toEqual(['Newer', 'Older'])
+    expect(region().className).toContain('flex-col-reverse')
+    expect(region().className).toContain('bottom-4')
+    expect(region().className).toContain('left-4')
+  })
+
+  it('the action runs onAction and closes its own toast, and no other', async () => {
+    mount()
+    const onAction = vi.fn()
+    show({ label: 'Standing', durationMs: 0 })
+    show({ label: 'Item removed', actionLabel: 'Undo', onAction, durationMs: 0 })
+    await userEvent.click(screen.getByRole('button', { name: 'Undo' }))
+    expect(onAction).toHaveBeenCalledTimes(1)
+    expect(visible()).toEqual(['Standing'])
+  })
+
+  it('an action with a label and no handler is a Dismiss', async () => {
+    mount()
+    show({ label: 'Something needs knowing', type: 'warning', durationMs: 0, actionLabel: 'Dismiss' })
+    await userEvent.click(screen.getByRole('button', { name: 'Dismiss' }))
+    expect(visible()).toEqual([])
+  })
+
+  it('closes after 5 seconds by default; durationMs: 0 stays up', () => {
+    vi.useFakeTimers()
+    mount()
+    show({ label: 'Fades' })
+    show({ label: 'Stays', durationMs: 0 })
+    act(() => vi.advanceTimersByTime(4999))
+    expect(visible()).toEqual(['Stays', 'Fades'])
+    act(() => vi.advanceTimersByTime(1))
+    expect(visible()).toEqual(['Stays'])
+  })
+
+  it('dismissToast with an id closes that toast; with none, every toast', () => {
+    mount()
+    const a = show({ label: 'A', durationMs: 0 })
+    show({ label: 'B', durationMs: 0 })
+    act(() => api.dismissToast(a))
+    expect(visible()).toEqual(['B'])
+    show({ label: 'C', durationMs: 0 })
+    act(() => api.dismissToast())
+    expect(visible()).toEqual([])
+  })
+
+  it('F6 moves focus into the toasts; Escape closes the focused one', async () => {
+    mount()
+    show({ label: 'Changes saved', durationMs: 0 })
+    await userEvent.keyboard('{F6}')
+    expect(region().contains(document.activeElement)).toBe(true)
+    await userEvent.tab()
+    const toast = screen.getByRole('dialog', { name: 'Changes saved' })
+    expect(document.activeElement).toBe(toast)
+    await userEvent.keyboard('{Escape}')
+    expect(visible()).toEqual([])
+  })
+
+  it('useToast outside a provider throws', () => {
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    expect(() => render(<Grab />)).toThrow('useToast must be used within ToastProvider')
+    spy.mockRestore()
+  })
+})

package/src/Toast.tsx

@@ -1,5 +1,5 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
+import { createContext, useContext, useMemo, type ReactNode } from 'react'
+import { Toast as BaseToast } from '@base-ui/react/toast'
 import { IconAlertCircle, IconCircleCheck, IconCircleX } from '@tabler/icons-react'
 import { cn } from './cn'
 
@@ -12,9 +12,12 @@ import { cn } from './cn'
  * the same dark overlay pill; the type lives in the icon's colour and glow,
  * not the surface.
  *
- * The provider owns positioning (bottom-left), the portal, and auto-dismiss
- * (5 s; pass `durationMs: 0` to keep one up). One toast at a time — a new
- * one replaces the standing one, it does not queue.
+ * The provider sits on Base UI's `Toast` since stage 6 of the migration
+ * (2026-09-14). Base UI owns the portal, the timers, the stack and what a
+ * screen reader hears; this file owns how a toast looks and where the stack
+ * stands (bottom-left). **Up to three show at once** (D7): the newest nearest
+ * the corner, a fourth hides the oldest until one of the three closes. Before
+ * stage 6 a new toast replaced the standing one, and nothing announced either.
  */
 export type ToastType = 'success' | 'brand' | 'neutral' | 'warning' | 'error'
 
@@ -42,11 +45,11 @@ export interface ToastProps {
 // Signal: every toast is the same dark overlay pill (v3) — the type lives in
 // the icon color + glow, not the surface.
 const SURFACE_STYLES: Record<ToastType, string> = {
-  success: 'bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
-  brand: 'bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
-  neutral: 'bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
-  warning: 'bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
-  error: 'bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
+  success: 'bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md',
+  brand: 'bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md',
+  neutral: 'bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md',
+  warning: 'bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md',
+  error: 'bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md',
 }
 
 /**
@@ -83,35 +86,48 @@ const ACTION_BORDER_STYLES: Record<ToastType, string> = {
   error: 'signal:border signal:border-border-default signal:hover:border-border-strong',
 }
 
+const LABEL_CLASSES = 'text-body-2 text-text-primary whitespace-nowrap'
+
+const pillClassName = (type: ToastType, hasAction: boolean, className?: string) =>
+  cn(
+    'inline-flex items-center min-h-[32px] pl-2 py-1 rounded-lg shadow-lg',
+    // Without an action the label needs real right padding; the action
+    // button brings its own edge, so the tight pr-1 only applies there.
+    hasAction ? 'pr-1 gap-[46px]' : 'pr-3',
+    SURFACE_STYLES[type],
+    className,
+  )
+
+const actionClassName = (type: ToastType) =>
+  cn(
+    'h-6 flex items-center justify-center gap-1 px-1 py-1 rounded-md shrink-0 transition-colors',
+    ACTION_BORDER_STYLES[type],
+    type === 'neutral' ? 'hover:border-border-strong' : 'hover:opacity-80',
+  )
+
+function LeadingIcon({ type }: { type: ToastType }) {
+  const Icon = ICONS[type]
+  return <Icon size={16} stroke={1.5} className={cn('text-text-primary shrink-0', ICON_STYLES[type])} />
+}
+
+const ACTION_LABEL_CLASSES = 'text-btn-small text-text-primary whitespace-nowrap'
+
+/**
+ * One toast, drawn in place. What the provider shows is this pill; draw it
+ * yourself only where a page needs a toast's look without its timing — a
+ * story, a picture of the set.
+ */
 export function Toast({ label, type = 'neutral', leadingIcon = true, actionLabel, onAction, className }: ToastProps) {
   const hasAction = !!(actionLabel && onAction)
-  const LeadingIcon = ICONS[type]
   return (
-    <div
-      className={cn(
-        'inline-flex items-center min-h-[32px] pl-2 py-1 rounded-lg shadow-lg',
-        // Without an action the label needs real right padding; the action
-        // button brings its own edge, so the tight pr-1 only applies there.
-        hasAction ? 'pr-1 gap-[46px]' : 'pr-3',
-        SURFACE_STYLES[type],
-        className,
-      )}
-    >
+    <div className={pillClassName(type, hasAction, className)}>
       <div className="flex items-center gap-2 shrink-0">
-        {leadingIcon && <LeadingIcon size={16} stroke={1.5} className={cn('text-text-primary shrink-0', ICON_STYLES[type])} />}
-        <span className="font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap">{label}</span>
+        {leadingIcon && <LeadingIcon type={type} />}
+        <span className={LABEL_CLASSES}>{label}</span>
       </div>
       {hasAction && (
-        <button
-          type="button"
-          onClick={onAction}
-          className={cn(
-            'h-6 flex items-center justify-center gap-1 px-1 py-1 rounded-md shrink-0 transition-colors',
-            ACTION_BORDER_STYLES[type],
-            type === 'neutral' ? 'hover:border-border-strong' : 'hover:opacity-80',
-          )}
-        >
-          <span className="font-medium text-[12px] leading-[12px] text-text-primary whitespace-nowrap">{actionLabel}</span>
+        <button type="button" onClick={onAction} className={actionClassName(type)}>
+          <span className={ACTION_LABEL_CLASSES}>{actionLabel}</span>
         </button>
       )}
     </div>
@@ -122,7 +138,10 @@ export interface ToastOptions {
   label: string
   /** Which of the five this is — it decides the surface and the leading icon. Defaults to 'neutral'. */
   type?: ToastType
-  /** When set, renders a clickable action on the right side. */
+  /**
+   * Renders an action on the right side. Pressing it runs `onAction`, if
+   * given, and closes this toast — so a Dismiss needs only its label.
+   */
   actionLabel?: string
   onAction?: () => void
   /** Show the leading icon — a check, a `!` or an `×`, per `type`. Defaults to true. */
@@ -131,70 +150,95 @@ export interface ToastOptions {
   durationMs?: number
 }
 
-interface ActiveToast extends ToastOptions {
-  id: number
+interface ToastValue {
+  /** Shows a toast and returns its id, for `dismissToast`. */
+  showToast: (opts: ToastOptions) => string
+  /** Closes the toast with this id; with no id, closes every toast on screen. */
+  dismissToast: (id?: string) => void
 }
 
-interface ToastValue {
-  showToast: (opts: ToastOptions) => void
-  dismissToast: () => void
+/** What a toast carries beyond Base UI's own fields. */
+interface ToastData {
+  leadingIcon: boolean
+  actionLabel?: string
+  onAction?: () => void
 }
 
 const ToastContext = createContext<ToastValue | null>(null)
 
-let toastSeq = 0
+/** D7: three on screen at once. */
+const VISIBLE_TOASTS = 3
 
 export function ToastProvider({ children }: { children: ReactNode }) {
-  const [toast, setToast] = useState<ActiveToast | null>(null)
-
-  const showToast = useCallback((opts: ToastOptions) => {
-    setToast({ ...opts, id: ++toastSeq })
-  }, [])
-
-  const dismissToast = useCallback(() => {
-    setToast(null)
-  }, [])
-
-  useEffect(() => {
-    if (!toast) return
-    const duration = toast.durationMs ?? 5000
-    if (duration <= 0) return
-    const timer = setTimeout(() => {
-      setToast((current) => (current?.id === toast.id ? null : current))
-    }, duration)
-    return () => clearTimeout(timer)
-  }, [toast])
-
-  const value = useMemo<ToastValue>(() => ({ showToast, dismissToast }), [showToast, dismissToast])
+  // One manager per provider, so `useToast` can add and close without
+  // re-rendering every caller each time the list changes.
+  const manager = useMemo(() => BaseToast.createToastManager<ToastData>(), [])
+  const value = useMemo<ToastValue>(
+    () => ({
+      showToast: ({ label, type = 'neutral', leadingIcon = true, actionLabel, onAction, durationMs = 5000 }) =>
+        manager.add({
+          title: label,
+          type,
+          timeout: durationMs,
+          // A failure interrupts; everything else waits for a pause.
+          priority: type === 'error' ? 'high' : 'low',
+          data: { leadingIcon, actionLabel, onAction },
+        }),
+      dismissToast: (id) => manager.close(id),
+    }),
+    [manager],
+  )
 
   return (
     <ToastContext.Provider value={value}>
-      {children}
-      {toast &&
-        createPortal(
-          <div className="fixed bottom-4 left-4 z-[100] pointer-events-none">
-            <Toast
-              className="pointer-events-auto"
-              label={toast.label}
-              type={toast.type ?? 'neutral'}
-              leadingIcon={toast.leadingIcon ?? true}
-              actionLabel={toast.actionLabel}
-              onAction={
-                toast.onAction
-                  ? () => {
-                      toast.onAction?.()
-                      dismissToast()
-                    }
-                  : undefined
-              }
-            />
-          </div>,
-          document.body,
-        )}
+      <BaseToast.Provider toastManager={manager} limit={VISIBLE_TOASTS}>
+        {children}
+        <BaseToast.Portal>
+          <BaseToast.Viewport className="fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none">
+            <ToastList />
+          </BaseToast.Viewport>
+        </BaseToast.Portal>
+      </BaseToast.Provider>
     </ToastContext.Provider>
   )
 }
 
+function ToastList() {
+  const { toasts, close } = BaseToast.useToastManager<ToastData>()
+  // Base UI lists the newest first; the viewport is `flex-col-reverse`, so
+  // the newest stands nearest the corner.
+  return toasts.map((toast) => {
+    const type = (toast.type ?? 'neutral') as ToastType
+    const { leadingIcon = true, actionLabel, onAction } = toast.data ?? {}
+    return (
+      <BaseToast.Root
+        key={toast.id}
+        toast={toast}
+        // Towards the corner it stands in.
+        swipeDirection={['left', 'down']}
+        // A fourth toast hides the oldest (`data-limited`) until there is room.
+        className={pillClassName(type, !!actionLabel, 'pointer-events-auto data-[limited]:hidden')}
+      >
+        <div className="flex items-center gap-2 shrink-0">
+          {leadingIcon && <LeadingIcon type={type} />}
+          <BaseToast.Title render={<span />} className={LABEL_CLASSES} />
+        </div>
+        {actionLabel && (
+          <BaseToast.Action
+            onClick={() => {
+              onAction?.()
+              close(toast.id)
+            }}
+            className={actionClassName(type)}
+          >
+            <span className={ACTION_LABEL_CLASSES}>{actionLabel}</span>
+          </BaseToast.Action>
+        )}
+      </BaseToast.Root>
+    )
+  })
+}
+
 export function useToast(): ToastValue {
   const ctx = useContext(ToastContext)
   if (!ctx) throw new Error('useToast must be used within ToastProvider')

package/src/Toolbar.tsx

@@ -137,8 +137,10 @@ export function ToolbarButton({ ref, disabled, disabledReason, ...props }: Toolb
  */
 export type ToolbarInputProps = TextInputProps
 
-export function ToolbarInput(props: ToolbarInputProps) {
-  return <BaseToolbar.Input render={<TextInput />} {...props} />
+export function ToolbarInput({ size, ...props }: ToolbarInputProps) {
+  // `size` is TextInput's own (default or small), not the native attribute
+  // Base UI's part would take, so it goes to the field it draws.
+  return <BaseToolbar.Input render={<TextInput size={size} />} {...props} />
 }
 
 /**

package/src/cn.ts

@@ -18,7 +18,7 @@ import { extendTailwindMerge } from 'tailwind-merge'
 const FONT_SIZE_TOKENS = [
   'h1', 'h2', 'h3', 'h4', 'h5',
   'body-1', 'body-2', 'body-2-strong', 'caption', 'menu',
-  'btn-default', 'btn-small', 'input-label', 'input-value', 'input-helper', 'chip',
+  'btn-default', 'btn-small', 'input-label', 'input-value', 'input-helper', 'chip', 'small',
 ]
 
 /**