@estiva-app/ui 0.13.1 → 0.14.0

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',
 ]
 
 /**

package/stories/Choosing.mdx

@@ -34,6 +34,7 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | You need | Reach for |
 |---|---|
 | One line | **TextInput** |
+| One line in a dense row, beside small selects | **TextInput** `size="small"` — 24px, the small Select's height |
 | Several lines | **Textarea** |
 | Typing that filters a list | **SearchInput** |
 | A title edited in place | **EditableText** |

package/stories/TokensPage.tsx

@@ -134,6 +134,7 @@ const TYPE_GROUPS: { label: string; blurb: string; tokens: TypeToken[] }[] = [
   { label: 'Headings', blurb: 'h1 is a page title, h2 a section, h3 a card or dialog title, h4 a row title, h5 a small label.', tokens: ['h1', 'h2', 'h3', 'h4', 'h5'].map((k) => ({ key: k, cls: `text-${k}` })) },
   { label: 'Body', blurb: 'body-1 for reading, body-2 for the interface, caption for what sits beside it.', tokens: ['body-1', 'body-2', 'body-2-strong', 'caption'].map((k) => ({ key: k, cls: `text-${k}` })) },
   { label: 'Controls', blurb: 'The sizes controls are set in, so a button, a field and a chip read the same everywhere.', tokens: ['btn-default', 'btn-small', 'input-label', 'input-value', 'input-helper', 'chip', 'menu'].map((k) => ({ key: k, cls: `text-${k}` })) },
+  { label: 'A theme\'s smaller label', blurb: 'small is a size and nothing else. Under signal: or ship: it shrinks the token beside it to 10px and keeps that token\'s line height and weight. Spacing, where a label wants some, is tracking-wide or tracking-widest.', tokens: [{ key: 'small', cls: 'text-small' }] },
 ]
 
 const RADII = [
@@ -152,7 +153,7 @@ const RADII = [
 function Section({ label, blurb, children }: { label: string; blurb: string; children: ReactNode }) {
   return (
     <section className="mt-10 first:mt-0">
-      <h2 className="text-h5 uppercase tracking-[0.08em] text-text-secondary">{label}</h2>
+      <h2 className="text-h5 uppercase tracking-widest text-text-secondary">{label}</h2>
       <p className="mt-1.5 max-w-[640px] text-body-2 text-text-secondary">{blurb}</p>
       <div className="mt-3">{children}</div>
     </section>
@@ -171,6 +172,9 @@ function Users({ names }: { names: string[] }) {
 function SwatchBox({ token }: { token: Token }) {
   const v = `var(${token.cssVar})`
   const base = 'h-6 w-10 shrink-0 rounded-md'
+  /* eslint-disable no-restricted-syntax -- this page draws every token from its CSS
+     variable, so a swatch shows the value the theme holds, including a token no
+     class spells yet. */
   switch (token.swatch) {
     case 'fill':
       return <div className={`${base} border border-border-subtle`} style={{ background: v }} />
@@ -190,6 +194,7 @@ function SwatchBox({ token }: { token: Token }) {
     case 'drop-shadow':
       return <div className="my-1 h-8 w-12 shrink-0 rounded-md bg-bg-surface" style={{ filter: `drop-shadow(${v})` }} />
   }
+  /* eslint-enable no-restricted-syntax */
 }
 
 function TokenRow({ token, utilities }: { token: Token; utilities: string }) {

package/tailwind-preset.js

@@ -100,6 +100,13 @@ export default {
         'input-value':  ['14px', { lineHeight: '140%', letterSpacing: '0', fontWeight: '400' }],
         'input-helper': ['12px', { lineHeight: '120%', letterSpacing: '0', fontWeight: '400' }],
         'chip':         ['11px', { lineHeight: '110%', letterSpacing: '0', fontWeight: '500' }],
+        // A size and nothing else (Katerina, 2026-09-15, UIG-28): a theme's
+        // smaller label. Under `signal:` or `ship:` it shrinks the token beside
+        // it to 10px and keeps that token's line height and weight
+        // (`text-caption signal:text-small`). Letter spacing, where a label
+        // wants some, is Tailwind's own step: `tracking-wide`, `tracking-widest`.
+        // Alone, it takes its line height and weight from the parent.
+        'small':        ['10px'],
       },
       borderRadius: {
         none: '0px',