@estiva-app/ui 0.16.0 → 0.17.0

package/src/Form.mdx

@@ -0,0 +1,68 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as FormStories from './Form.stories'
+
+<Meta of={FormStories} />
+
+# Form
+
+The fields and the button that sends them. Enter in a field, or a submit
+button, sends it; the page never reloads; while it sends, everything inside
+is switched off at once.
+
+<Canvas of={FormStories.WhileSending} />
+
+## When
+
+- Any set of fields that is sent: a dialog's fields, a one-line field with
+  its button, a composer.
+- **`busy`** while the sending is waited on.
+
+## When not
+
+- One field that saves itself as you leave it → **EditableText**.
+- A field that filters a list as you type → **SearchInput**; nothing is sent.
+
+## How
+
+```tsx
+import { Button, Field, Form, TextInput } from '@estiva-app/ui'
+
+<Form onSubmit={send} busy={sending} className="flex flex-col gap-6">
+  <Field label="Title" required error={titleError}>
+    <TextInput value={title} onChange={(e) => { setTitle(e.target.value); setTitleError(undefined) }} />
+  </Field>
+  <Button variant="primary" type="submit">Send</Button>
+</Form>
+```
+
+- **`onSubmit` takes nothing.** The page's own submit is already prevented;
+  there is no event to stop.
+- **`busy` switches off every field and button inside**, so they do not
+  each need `disabled={busy}`. A button outside the form that sends it —
+  a dialog's footer, with `form="<id>"` and the form's `id` — is outside,
+  and keeps its own `disabled`.
+- **Focus waits on the form while it is busy.** A browser drops focus to the
+  page the moment the focused field is switched off; the form holds it
+  instead. When `busy` ends, focus goes to the first field showing an error,
+  else back to what sent the form, else to the first control. If focus was
+  moved somewhere else while it waited, it stays there.
+- **A field showing its `error` stops the form from sending**, and Enter moves
+  focus to that field instead (Base UI checks every field before it sends).
+  Clear the error when the field changes, as in the example; an error left
+  standing keeps the form from ever sending.
+- The browser's own validation bubbles are off (`noValidate`). `Field`'s
+  `required` marks a field; it does not block sending by itself.
+- `className` places the fields: the form draws no box, and neither does the
+  `<fieldset>` inside it.
+
+## Keys
+
+| Key | Does |
+|---|---|
+| Enter, in a one-line field | Sends the form. |
+| Enter, in a Textarea | A new line; it does not send. |
+| Tab, while busy | Nothing inside takes focus. |
+
+## Props
+
+<Controls of={FormStories.Default} />

package/src/Form.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { fn } from 'storybook/test'
+import { Button } from './Button'
+import { Field } from './Field'
+import { Form } from './Form'
+import { TextInput } from './TextInput'
+import { Textarea } from './Textarea'
+
+const meta = {
+  title: 'Inputs/Form',
+  component: Form,
+  parameters: { layout: 'padded' },
+  args: { onSubmit: fn(), busy: false, className: 'flex flex-col gap-6', 'aria-label': 'Example', children: null },
+  argTypes: { children: { control: false }, onSubmit: { control: false } },
+  decorators: [(Story) => <div className="w-96"><Story /></div>],
+} satisfies Meta<typeof Form>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const fields = (error?: string) => (
+  <>
+    <Field label="Label" required>
+      <TextInput placeholder="Placeholder" />
+    </Field>
+    <Field label="Label" error={error}>
+      <Textarea placeholder="Placeholder" className="h-20" />
+    </Field>
+    <div className="flex justify-end">
+      <Button variant="primary" type="submit">
+        Send
+      </Button>
+    </div>
+  </>
+)
+
+export const Default: Story = { render: (args) => <Form {...args}>{fields()}</Form> }
+
+/** Sending: every field and button inside is switched off at once. */
+export const Busy: Story = { args: { busy: true }, render: (args) => <Form {...args}>{fields()}</Form> }
+
+/** A field showing its error. The form does not send while it shows. */
+export const WithError: Story = { render: (args) => <Form {...args}>{fields('That is not a valid value.')}</Form> }
+
+/**
+ * Live. Press Enter in the first field, or Send: the form is busy for a
+ * second and a half, and focus comes back to where it was.
+ */
+export const WhileSending: Story = {
+  parameters: { controls: { disable: true } },
+  render: (args) => {
+    const [busy, setBusy] = useState(false)
+    return (
+      <Form
+        {...args}
+        busy={busy}
+        onSubmit={async () => {
+          setBusy(true)
+          await new Promise((resolve) => setTimeout(resolve, 1500))
+          setBusy(false)
+        }}
+      >
+        {fields()}
+      </Form>
+    )
+  },
+}

package/src/Form.test.tsx

@@ -0,0 +1,282 @@
+// @vitest-environment jsdom
+/**
+ * What the Form page claims, pinned: Enter and a submit button send it, the
+ * page's own submit is prevented, `busy` switches off everything inside and
+ * holds focus, and focus comes back in the page's order.
+ *
+ * jsdom does not move focus off a field that becomes disabled; Chrome drops it
+ * to `<body>`. So "focus is held" is checked as "focus is on the form, and not
+ * on a disabled element" — without the form taking focus, that fails here too
+ * (UIG-29 measured it). The browser check is in the PR.
+ */
+import { useState } from 'react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Button } from './Button'
+import { Checkbox } from './Checkbox'
+import { IconButton } from './IconButton'
+import { Field } from './Field'
+import { Form } from './Form'
+import { TextInput } from './TextInput'
+import { Textarea } from './Textarea'
+
+afterEach(cleanup)
+
+function Harness({ onSubmit = vi.fn(), error, busy = false }: { onSubmit?: () => void; error?: string; busy?: boolean }) {
+  return (
+    <Form onSubmit={onSubmit} busy={busy} aria-label="Probe" className="flex flex-col gap-6" id="probe">
+      <Field label="First">
+        <TextInput />
+      </Field>
+      <Field label="Second" error={error}>
+        <TextInput />
+      </Field>
+      <Button type="submit">Send</Button>
+    </Form>
+  )
+}
+
+describe('Form', () => {
+  it('sends on Enter in a field', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn()
+    render(<Harness onSubmit={onSubmit} />)
+    await user.type(screen.getByRole('textbox', { name: 'First' }), 'x{Enter}')
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+
+  it('sends from its submit button', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn()
+    render(<Harness onSubmit={onSubmit} />)
+    await user.click(screen.getByRole('button', { name: 'Send' }))
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not send while a field shows its error', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn()
+    render(<Harness onSubmit={onSubmit} error="Not like that." />)
+    await user.type(screen.getByRole('textbox', { name: 'First' }), 'x{Enter}')
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  it('sends on Enter in a one-line field, and not in a textarea', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn()
+    render(
+      <Form onSubmit={onSubmit} aria-label="Probe">
+        <Field label="Words">
+          <Textarea />
+        </Field>
+      </Form>,
+    )
+    await user.type(screen.getByRole('textbox', { name: 'Words' }), 'one{Enter}two')
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect((screen.getByRole('textbox', { name: 'Words' }) as HTMLTextAreaElement).value).toBe('one\ntwo')
+  })
+
+  it("prevents the page's own submit, so nothing reloads", () => {
+    render(<Harness />)
+    const form = screen.getByRole('form', { name: 'Probe' })
+    // dispatchEvent answers false when the event's default was prevented.
+    expect(fireEvent.submit(form)).toBe(false)
+  })
+
+  it('is a form with no browser validation bubbles, and passes id and className on', () => {
+    render(<Harness />)
+    const form = screen.getByRole('form', { name: 'Probe' }) as HTMLFormElement
+    expect(form.tagName).toBe('FORM')
+    expect(form.noValidate).toBe(true)
+    expect(form.id).toBe('probe')
+    expect(form.className).toContain('flex-col')
+  })
+
+  it('draws no box of its own around the fields', () => {
+    const { container } = render(<Harness />)
+    expect(container.querySelector('fieldset')?.className).toBe('contents')
+  })
+
+  it('switches off every field and button inside while busy, and back on after', () => {
+    const { rerender } = render(<Harness />)
+    const controls = () => [...screen.getAllByRole('textbox'), screen.getByRole('button', { name: 'Send' })]
+    expect(controls().every((c) => !c.matches(':disabled'))).toBe(true)
+    rerender(<Harness busy />)
+    expect(controls().every((c) => c.matches(':disabled'))).toBe(true)
+    rerender(<Harness />)
+    expect(controls().every((c) => !c.matches(':disabled'))).toBe(true)
+  })
+
+  it("switches the package's own parts off in their own look, not only the browser's way", async () => {
+    // A disabled part has pointer-events: none; the click is tried anyway, as a person would.
+    const user = userEvent.setup({ pointerEventsCheck: 0 })
+    const onTick = vi.fn()
+    const parts = (busy: boolean) => (
+      <Form onSubmit={() => {}} busy={busy} aria-label="Probe">
+        <Button type="submit">Send</Button>
+        <IconButton aria-label="Icon">x</IconButton>
+        <Checkbox checked={false} onChange={onTick} aria-label="Bare" />
+        <Checkbox checked={false} onChange={onTick} label="Words" />
+      </Form>
+    )
+    const { rerender, getByRole, getByText } = render(parts(false))
+    const drawnOff = () => ['Send', 'Icon'].map((name) => getByRole('button', { name }).hasAttribute('data-disabled'))
+    expect(drawnOff()).toEqual([false, false])
+    rerender(parts(true))
+    // Button and IconButton take their switched-off classes from Base UI's state, which data-disabled shows.
+    expect(drawnOff()).toEqual([true, true])
+    expect(getByRole('checkbox', { name: 'Bare' }).getAttribute('aria-disabled')).toBe('true')
+    // A checkbox is a span: the fieldset alone never stopped a click on it.
+    await user.click(getByRole('checkbox', { name: 'Bare' }))
+    await user.click(getByText('Words'))
+    expect(onTick).not.toHaveBeenCalled()
+    rerender(parts(false))
+    expect(drawnOff()).toEqual([false, false])
+  })
+
+  it('holds focus on the form while busy, never on a disabled field', () => {
+    const { rerender } = render(<Harness />)
+    const field = screen.getByRole('textbox', { name: 'Second' })
+    act(() => field.focus())
+    rerender(<Harness busy />)
+    expect(document.activeElement).toBe(screen.getByRole('form', { name: 'Probe' }))
+    expect(document.activeElement?.matches(':disabled')).toBe(false)
+  })
+
+  it('holds focus even when the browser already dropped it to the page, as Chrome does', () => {
+    const { rerender } = render(<Harness />)
+    const field = screen.getByRole('textbox', { name: 'Second' })
+    act(() => field.focus())
+    // Chrome blurs a field the moment it is disabled, before any effect runs;
+    // jsdom never does, so the test does it by hand.
+    act(() => field.blur())
+    rerender(<Harness busy />)
+    expect(document.activeElement).toBe(screen.getByRole('form', { name: 'Probe' }))
+    rerender(<Harness />)
+    expect(document.activeElement).toBe(field)
+  })
+
+  it('does not take focus when it was last somewhere outside the form', () => {
+    const { rerender } = render(
+      <>
+        <Harness />
+        <button type="button">Elsewhere</button>
+      </>,
+    )
+    act(() => screen.getByRole('textbox', { name: 'First' }).focus())
+    act(() => screen.getByRole('button', { name: 'Elsewhere' }).focus())
+    act(() => screen.getByRole('button', { name: 'Elsewhere' }).blur())
+    rerender(
+      <>
+        <Harness busy />
+        <button type="button">Elsewhere</button>
+      </>,
+    )
+    expect(document.activeElement).toBe(document.body)
+  })
+
+  it('takes focus only while busy: the rest of the time it is not a Tab stop or a click target', () => {
+    const { rerender } = render(<Harness />)
+    const form = screen.getByRole('form', { name: 'Probe' })
+    expect(form.hasAttribute('tabindex')).toBe(false)
+    act(() => screen.getByRole('textbox', { name: 'First' }).focus())
+    rerender(<Harness busy />)
+    expect(form.getAttribute('tabindex')).toBe('-1')
+    rerender(<Harness />)
+    expect(form.hasAttribute('tabindex')).toBe(false)
+  })
+
+  describe('when busy ends, focus goes', () => {
+    it('to the first invalid field', () => {
+      const { rerender } = render(<Harness />)
+      act(() => screen.getByRole('textbox', { name: 'First' }).focus())
+      rerender(<Harness busy />)
+      rerender(<Harness error="Not like that." />)
+      expect(document.activeElement).toBe(screen.getByRole('textbox', { name: 'Second' }))
+    })
+
+    it('else back to what sent the form', () => {
+      const { rerender } = render(<Harness />)
+      act(() => screen.getByRole('button', { name: 'Send' }).focus())
+      rerender(<Harness busy />)
+      rerender(<Harness />)
+      expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Send' }))
+    })
+
+    it('else to the first control, when what sent it is gone', () => {
+      function Vanishing({ busy, sent }: { busy: boolean; sent: boolean }) {
+        return (
+          <Form onSubmit={() => {}} busy={busy} aria-label="Probe">
+            <Field label="First">
+              <TextInput />
+            </Field>
+            {!sent && <Button type="submit">Send</Button>}
+          </Form>
+        )
+      }
+      const { rerender } = render(<Vanishing busy={false} sent={false} />)
+      act(() => screen.getByRole('button', { name: 'Send' }).focus())
+      rerender(<Vanishing busy sent={false} />)
+      // Gone while the form waits, as a row that sent itself can be.
+      rerender(<Vanishing busy sent />)
+      rerender(<Vanishing busy={false} sent />)
+      expect(document.activeElement).toBe(screen.getByRole('textbox', { name: 'First' }))
+    })
+
+    it('nowhere, when someone moved focus on while waiting', () => {
+      const { rerender } = render(
+        <>
+          <Harness />
+          <button type="button">Elsewhere</button>
+        </>,
+      )
+      act(() => screen.getByRole('textbox', { name: 'First' }).focus())
+      rerender(
+        <>
+          <Harness busy />
+          <button type="button">Elsewhere</button>
+        </>,
+      )
+      act(() => screen.getByRole('button', { name: 'Elsewhere' }).focus())
+      rerender(
+        <>
+          <Harness />
+          <button type="button">Elsewhere</button>
+        </>,
+      )
+      expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Elsewhere' }))
+    })
+  })
+
+  it('a caller that waits: busy while sending, then back', async () => {
+    const user = userEvent.setup()
+    let finish: () => void = () => {}
+    function Sending() {
+      const [busy, setBusy] = useState(false)
+      return (
+        <Form
+          aria-label="Probe"
+          busy={busy}
+          onSubmit={async () => {
+            setBusy(true)
+            await new Promise<void>((resolve) => (finish = resolve))
+            setBusy(false)
+          }}
+        >
+          <Field label="First">
+            <TextInput />
+          </Field>
+        </Form>
+      )
+    }
+    render(<Sending />)
+    const field = screen.getByRole('textbox', { name: 'First' })
+    await user.type(field, 'x{Enter}')
+    expect(field.matches(':disabled')).toBe(true)
+    expect(document.activeElement).toBe(screen.getByRole('form', { name: 'Probe' }))
+    await act(async () => finish())
+    expect(field.matches(':disabled')).toBe(false)
+    expect(document.activeElement).toBe(field)
+  })
+})

package/src/Form.tsx

@@ -0,0 +1,113 @@
+import { useLayoutEffect, useRef, type FormHTMLAttributes, type ReactNode } from 'react'
+import { Fieldset } from '@base-ui/react/fieldset'
+import { Form as BaseForm } from '@base-ui/react/form'
+import { cn } from './cn'
+import { FormBusyContext, useFormBusy } from './formBusy'
+
+/**
+ * A form: Enter in a field, or a submit button, sends it, and the page never
+ * reloads. On Base UI's `Form` (UIG-7, 16 September), which the apps' five
+ * forms had each written around a plain `<form>`: `preventDefault`, a busy
+ * flag, and `disabled={busy}` on every field one by one.
+ *
+ * Base UI's part, as it renders it: a `<form noValidate>` — the browser's own
+ * validation bubbles are off, which no field in either app used — that, on
+ * submit, checks every `Field` inside and moves focus to the first one that is
+ * invalid instead of sending. `Field`'s `error` is still how an error shows.
+ *
+ * `busy` is ours. While it is on, the children sit in a disabled
+ * `<fieldset>` (Base UI's `Fieldset`, with no box of its own), so every field
+ * and button inside is switched off at once — the package's Button,
+ * IconButton and Checkbox wearing their own switched-off look, which a
+ * fieldset alone does not give them (`formBusy.ts`) — and focus waits on the form
+ * rather than falling to the page. Chrome drops focus to `<body>` the moment
+ * the focused field is disabled, before any effect runs, and jsdom does not —
+ * so the form remembers the last element inside it that had focus, and takes
+ * focus back from the page on its behalf (measured in Chrome, 16 September).
+ * When `busy` ends, focus goes to the first invalid field, else to what sent
+ * the form, else to the first control. That is `CommandPalette`'s order
+ * too, so the two read the same (UIG-29).
+ */
+export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'children' | 'noValidate'> {
+  /** Enter in a field, or a submit button. The page's own submit is already prevented. */
+  onSubmit: () => void | Promise<void>
+  /** While sending: every field and button inside is switched off, and focus waits on the form. */
+  busy?: boolean
+  children: ReactNode
+}
+
+const CONTROL = 'input:not([type="hidden"]), textarea, select, button, [role="checkbox"], [role="combobox"], [tabindex]:not([tabindex="-1"])'
+
+function usable(element: Element | null): element is HTMLElement {
+  return element instanceof HTMLElement && element.isConnected && element.matches(CONTROL) && !element.matches(':disabled') && element.getAttribute('aria-disabled') !== 'true'
+}
+
+export function Form({ onSubmit, busy: ownBusy = false, className, children, ...props }: FormProps) {
+  // A form inside a busy form is busy too.
+  const outerBusy = useFormBusy()
+  const busy = ownBusy || outerBusy
+  const form = useRef<HTMLFormElement>(null)
+  // What had focus when the form went busy, and whether the form took focus from it.
+  const sender = useRef<Element | null>(null)
+  const holding = useRef(false)
+  // The last element inside the form that had focus, until focus moves to something outside it.
+  const lastInside = useRef<Element | null>(null)
+
+  useLayoutEffect(() => {
+    const element = form.current
+    if (!element) return
+    if (busy) {
+      const active = document.activeElement
+      // Focus is still inside (jsdom, or a field that stayed enabled), or the
+      // browser has already dropped it to the page from a field inside (Chrome).
+      const from =
+        active && active !== element && element.contains(active)
+          ? active
+          : !active || active === document.body
+            ? lastInside.current
+            : null
+      if (from?.isConnected) {
+        sender.current = from
+        holding.current = true
+        element.focus()
+      }
+      return
+    }
+    if (!holding.current) return
+    holding.current = false
+    // Someone who moved focus on while waiting keeps it where they put it.
+    if (document.activeElement !== element && document.activeElement !== document.body) return
+    const invalid = Array.from(element.querySelectorAll('[data-invalid]')).find(usable)
+    const target = invalid ?? (usable(sender.current) ? sender.current : Array.from(element.querySelectorAll(CONTROL)).find(usable))
+    sender.current = null
+    target?.focus()
+  }, [busy])
+
+  return (
+    <BaseForm
+      ref={form}
+      {...props}
+      // Focus waits here only while busy; the rest of the time a click between two fields must not land on the form.
+      tabIndex={busy ? -1 : props.tabIndex}
+      // A form that holds focus for a moment must not draw a focus ring.
+      className={cn('outline-none', className)}
+      onFocus={(event) => {
+        if (event.target !== form.current) lastInside.current = event.target
+        props.onFocus?.(event)
+      }}
+      onBlur={(event) => {
+        const next = event.relatedTarget
+        if (next && !form.current?.contains(next)) lastInside.current = null
+        props.onBlur?.(event)
+      }}
+      onSubmit={(event) => {
+        event.preventDefault()
+        void onSubmit()
+      }}
+    >
+      <Fieldset.Root disabled={busy} className="contents">
+        <FormBusyContext.Provider value={busy}>{children}</FormBusyContext.Provider>
+      </Fieldset.Root>
+    </BaseForm>
+  )
+}

package/src/IconButton.tsx

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react'
 import { Button as BaseButton } from '@base-ui/react/button'
 import { cn } from './cn'
+import { useFormBusy } from './formBusy'
 import { TooltipTrigger } from './Tooltip'
 
 /**
@@ -42,10 +43,12 @@ export function IconButton({
   type = 'button',
   ...props
 }: IconButtonProps) {
+  // Inside a busy Form: switched off, and looking it (formBusy.ts).
+  const formBusy = useFormBusy()
   const button = (
     <BaseButton
       type={type}
-      disabled={disabled || !!disabledReason}
+      disabled={disabled || !!disabledReason || formBusy}
       focusableWhenDisabled={!!disabledReason}
       className={(state) =>
         cn(

package/src/SearchInput.mdx

@@ -5,8 +5,8 @@ import * as SearchInputStories from './SearchInput.stories'
 
 # SearchInput
 
-An inset field with a hairline border that strengthens on focus, and an
-optional keyboard hint at the right edge.
+An inset field with a hairline border that strengthens on hover and on
+focus, and an optional keyboard hint at the right edge.
 
 <Canvas of={SearchInputStories.WithShortcut} />
 

package/src/SearchInput.tsx

@@ -33,7 +33,9 @@ export function SearchInput({ shortcut, className, placeholder = 'Search…', ..
       className={cn(
         'flex gap-2 items-center px-3 py-2 rounded-lg',
         'bg-bg-inset border border-border-default',
-        'focus-within:border-border-strong transition-colors',
+        // Hover strengthens the border as it does on every other field (16 September). Here that
+        // is also the focus look, which was the stronger border before hover existed.
+        'hover:border-border-strong focus-within:border-border-strong transition-colors',
         className,
       )}
     >

package/src/TextInput.mdx

@@ -5,8 +5,8 @@ import * as TextInputStories from './TextInput.stories'
 
 # TextInput
 
-The single-line field: inset surface, 8px radius, 14px text, the focus
-border in every theme.
+The single-line field: inset surface, 8px radius, 14px text, a stronger
+border on hover, the focus border in every theme.
 
 <Canvas of={TextInputStories.Filled} />
 

package/src/TextInput.test.tsx

@@ -35,4 +35,11 @@ describe('TextInput', () => {
     for (const c of ['px-3', 'py-2', 'text-input-value']) expect(classes).not.toContain(c)
     expect(input.hasAttribute('size')).toBe(false)
   })
+
+  it("a stronger border on hover, as Select's, and the focus border still wins while focused", () => {
+    render(<TextInput aria-label="Title" />)
+    const classes = screen.getByRole('textbox').className.split(' ')
+    // Both survive cn(); Tailwind emits focus after hover, so the order in CSS decides, not here.
+    for (const c of ['border-border-default', 'hover:border-border-strong', 'focus:border-border-focus']) expect(classes).toContain(c)
+  })
 })

package/src/TextInput.tsx

@@ -32,7 +32,10 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
       ref={ref}
       type={type}
       className={cn(
-        'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg',
+        // The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
+        // "aren't there hover states in text input and text area?"). Focus comes after hover in
+        // Tailwind's order, so a focused field keeps the focus border under the pointer.
+        'bg-bg-inset border border-border-default hover:border-border-strong 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',

package/src/Textarea.tsx

@@ -21,7 +21,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
       ref={ref as React.Ref<HTMLElement>}
       render={<textarea />}
       className={cn(
-        'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2',
+        // The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
+        // "aren't there hover states in text input and text area?"). Focus comes after hover in
+        // Tailwind's order, so a focused field keeps the focus border under the pointer.
+        'bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg px-3 py-2',
         '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',