@estiva-app/ui 0.41.0 → 0.42.0

package/dist/looks.d.ts

@@ -10,12 +10,14 @@
  * Only looks — colour, text, border, corner, shadow. Where a part sits and how
  * much room it takes stay in the part.
  */
-/** A field's box: TextInput and Textarea. The hairline strengthens on hover; focus comes after it, so a focused field keeps its colour under the pointer. */
-export declare const FIELD_BOX_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg";
+/**
+ * A field's box: TextInput and Textarea. The hairline strengthens on hover — of the box, or of anywhere in the `Field` around it, label included, so the field is one thing under the pointer (Katerina, 28 September) — and not while switched off: a label passes its hover to its box, switched off or not (FIELD_DISABLED_CLASSES holds it back). Focus outranks it, so a focused field keeps its colour under the pointer.
+ */
+export declare const FIELD_BOX_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong focus:border-border-focus group-hover/field:focus:border-border-focus rounded-lg";
 /** What a field's words look like, typed or waiting: TextInput, Textarea and Select. */
 export declare const FIELD_TEXT_CLASSES = "text-text-primary placeholder:text-text-muted";
 /** A field that cannot be used: TextInput, Textarea and Select. */
-export declare const FIELD_DISABLED_CLASSES = "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled";
+export declare const FIELD_DISABLED_CLASSES = "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field group-hover/field:disabled:border-border-field";
 /** The ring a focused field wears in Signal: TextInput and Textarea. */
 export declare const FIELD_FOCUS_RING_CLASSES = "signal:transition-shadow signal:focus:shadow-focus-ring";
 /** A field's two sizes, its padding and its words: TextInput, Textarea (default only) and Select. The small one is the small Select's trigger. */
@@ -24,7 +26,7 @@ export declare const FIELD_SIZE_CLASSES: {
     readonly small: "h-6 min-h-6 px-2 text-caption";
 };
 /** The box around an input that sits inside it, before its focus look: SearchInput and ChipInput. */
-export declare const FIELD_SHELL_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors";
+export declare const FIELD_SHELL_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong rounded-lg transition-colors";
 /** A panel that floats over the page: Menu's panel and Tooltip. */
 export declare const FLOATING_SURFACE_CLASSES = "rounded-lg border border-border-default bg-bg-elevated shadow-lg";
 /** A chip's words: Chip's label and Reaction's count. */

package/dist/looks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"looks.d.ts","sourceRoot":"","sources":["../src/looks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,6JAA6J;AAC7J,eAAO,MAAM,iBAAiB,wHAAwH,CAAA;AAEtJ,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,kDAAkD,CAAA;AAEjF,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,qFAAqF,CAAA;AAExH,wEAAwE;AACxE,eAAO,MAAM,wBAAwB,4DAA4D,CAAA;AAEjG,kJAAkJ;AAClJ,eAAO,MAAM,kBAAkB;;;CAGrB,CAAA;AAEV,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,gHAAgH,CAAA;AAEhJ,mEAAmE;AACnE,eAAO,MAAM,wBAAwB,qEAAqE,CAAA;AAE1G,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,0FAA0F,CAAA;AAExH,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,8EAA8E,CAAA"}
+{"version":3,"file":"looks.d.ts","sourceRoot":"","sources":["../src/looks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB,2MAA2M,CAAA;AAEzO,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,kDAAkD,CAAA;AAEjF,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,iKAAiK,CAAA;AAEpM,wEAAwE;AACxE,eAAO,MAAM,wBAAwB,4DAA4D,CAAA;AAEjG,kJAAkJ;AAClJ,eAAO,MAAM,kBAAkB;;;CAGrB,CAAA;AAEV,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,uJAAuJ,CAAA;AAEvL,mEAAmE;AACnE,eAAO,MAAM,wBAAwB,qEAAqE,CAAA;AAE1G,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,0FAA0F,CAAA;AAExH,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,8EAA8E,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.41.0",
+    "packageVersion": "0.42.0",
     "exports": 90,
     "typeExports": 101,
     "files": null
@@ -966,7 +966,6 @@
       "looks": [
         "bg-bg-elevated border border-border-subtle rounded-md",
         "bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors focus-within:border-border-focus focus-within:hover:border-border-focus cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring",
-        "focus-within:border-border-focus focus-within:hover:border-border-focus cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring",
         "text-body-2 border-none bg-transparent text-text-primary placeholder:text-text-muted outline-none"
       ]
     },
@@ -2109,6 +2108,12 @@
           "required": false,
           "note": "Whether Enter in a one-line field sends."
         },
+        {
+          "name": "layout",
+          "takes": "fields | free",
+          "required": false,
+          "note": "`fields`, the default: everything inside stacks 24px apart."
+        },
         {
           "name": "children",
           "takes": "anything",
@@ -2116,7 +2121,15 @@
           "note": null
         }
       ],
-      "variants": [],
+      "variants": [
+        {
+          "prop": "layout",
+          "values": [
+            "fields",
+            "free"
+          ]
+        }
+      ],
       "ownsBehaviours": [
         {
           "id": "base-ui",
@@ -4596,14 +4609,14 @@
       "docPage": "src/Select.mdx",
       "app": null,
       "looks": [
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted 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 text-input-value",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted 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 text-caption",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted 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 text-input-value",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted 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 text-caption",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted 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 cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted 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 cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted 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 disabled:border-border-field focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted 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 disabled:border-border-field focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted 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 disabled:border-border-field cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted 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 disabled:border-border-field cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
         "rounded-lg border bg-bg-field shadow-field text-left"
       ]
     },
@@ -4851,7 +4864,7 @@
       "docPage": "src/Textarea.mdx",
       "app": null,
       "looks": [
-        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg 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"
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg 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 disabled:border-border-field signal:transition-shadow signal:focus:shadow-focus-ring"
       ]
     },
     {
@@ -4892,8 +4905,8 @@
       "docPage": "src/TextInput.mdx",
       "app": null,
       "looks": [
-        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg text-input-value 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",
-        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg 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"
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg text-input-value text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field signal:transition-shadow signal:focus:shadow-focus-ring",
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg 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 disabled:border-border-field signal:transition-shadow signal:focus:shadow-focus-ring"
       ]
     },
     {

package/src/ChipInput.tsx

@@ -246,7 +246,7 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
     >
       {/* The box the chips and the input share. `Combobox.Chips` is what makes
           the two one control for the keyboard; the look is what it always was. */}
-      <Combobox.Chips ref={setBox} className={cn(FIELD_SHELL_CLASSES, 'focus-within:border-border-focus focus-within:hover:border-border-focus px-3 py-1.5 flex flex-wrap items-center gap-1.5 min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring')}>
+      <Combobox.Chips ref={setBox} className={cn(FIELD_SHELL_CLASSES, 'focus-within:border-border-focus focus-within:hover:border-border-focus group-hover/field:focus-within:border-border-focus px-3 py-1.5 flex flex-wrap items-center gap-1.5 min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring')}>
         {value.map((option) => (
           <Combobox.Chip key={option.id} className={cn(CHIP_BOX, chipPadding(!!chipLeading, true))}>
             {chipLeading && <span className="flex shrink-0 items-center">{chipLeading(option)}</span>}

package/src/CommandPalette.tsx

@@ -19,7 +19,7 @@ import { Button } from './Button'
 import { InputChip } from './ChipInput'
 import { EmptyState } from './EmptyState'
 import { FieldLine } from './Field'
-import { Form } from './Form'
+import { FIELDS_CLASSES, Form } from './Form'
 import { Kbd } from './Kbd'
 import { EnterHint, MenuItemBody, menuItemClassName } from './Menu'
 import { ScrollArea } from './ScrollArea'
@@ -563,10 +563,12 @@ export function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWa
       {/* The package Form, from the fields to the button (UIG-7). The chip row
           stays outside it, so its ✕ still goes back while the form works; the
           button row is inside it, so focus that was on the button is held.
-          The fields are found through data-command-palette-fields. */}
-      <Form data-command-palette-fields="" busy={busy} enterSends={false} onSubmit={submit} className="flex min-h-0 flex-col">
+          The fields are found through data-command-palette-fields. The form is
+          `free`, a scrolling body over a button row; the fields inside stack as
+          every form's do, 24px apart (Katerina, 28 September: they were 16). */}
+      <Form data-command-palette-fields="" busy={busy} enterSends={false} onSubmit={submit} layout="free" className="flex min-h-0 flex-col">
         <ScrollArea viewportClassName="max-h-[420px]" contentClassName="flex flex-col px-5 py-4">
-          <div className="flex flex-col gap-4">{children}</div>
+          <div className={FIELDS_CLASSES}>{children}</div>
         </ScrollArea>
         <div className="flex shrink-0 items-center gap-3 px-5 pb-4">
           <div className="min-w-0 flex-1">

package/src/DialogShell.stories.tsx

@@ -6,6 +6,7 @@ import { Chip } from './Chip'
 import { DialogShell } from './DialogShell'
 import { IconButton } from './IconButton'
 import { Field } from './Field'
+import { Form } from './Form'
 import { TextInput } from './TextInput'
 import { Textarea } from './Textarea'
 
@@ -32,22 +33,22 @@ type Story = StoryObj<typeof meta>
  */
 export const Default: Story = {
   args: {
-    bodyClassName: 'flex flex-col gap-6',
     footer: (
       <>
         <Button variant="muted">Cancel</Button>
         <Button variant="primary">Confirm</Button>
       </>
     ),
+    // In a Form, as a dialog's fields always are: it places them 24px apart.
     children: (
-      <>
+      <Form onSubmit={() => {}} aria-label="Example">
         <Field label="Title" required>
           <TextInput placeholder="What is this about?" />
         </Field>
         <Field label="Notes">
           <Textarea placeholder="Optional notes…" className="h-[80px]" />
         </Field>
-      </>
+      </Form>
     ),
   },
 }

package/src/Field.mdx

@@ -53,6 +53,10 @@ import { Field, TextInput } from '@estiva-app/ui'
   `Field` has no `required` of its own, so the Field puts it there. A control
   that says so already is left alone, and a `children` of several elements
   keeps the asterisk and owes its own.
+- **The whole field is one thing under the pointer** (Katerina, 28
+  September): the label, the space under it, the box and the line under the
+  box. Anywhere on it strengthens the box's border, as hovering the box does;
+  a focused box keeps its focus colour, and a switched-off one stays as it is.
 
 ## What it owns
 
@@ -62,6 +66,7 @@ It does these by itself. Write none of them around it.
 |---|---|---|
 | Ties the label, the description and the error to the control inside it | `aria-label`, an `id` / `htmlFor` pair, or `aria-describedby` |  |
 | Marks the control invalid when it has an `error`, and announces it | `aria-invalid` |  |
+| Strengthens the box's border while the pointer is anywhere on the field | a hover of your own on the label or around the box |  |
 
 ## Props
 

package/src/Field.tsx

@@ -83,7 +83,10 @@ export function Field({ label, required = false, helper, error, children }: Fiel
         })
       : children
   return (
-    <BaseField.Root invalid={!!error} className="flex flex-col gap-2">
+    // `group/field`: the label, the box and the line under it are one thing under the pointer —
+    // anywhere in it strengthens the box's border, as hovering the box does (Katerina, 28 September).
+    // Before, the 8px between the label and the box was a gap where the border went out again.
+    <BaseField.Root invalid={!!error} className="group/field flex flex-col gap-2">
       {/* `cn`, like everywhere else. It was a template literal, with a comment
           saying the type token must never be merged — which stopped being true
           when `cn()` was taught the ramp: `input-label` is in it, and

package/src/Form.mdx

@@ -27,7 +27,7 @@ is switched off at once.
 ```tsx
 import { Button, Field, Form, TextInput } from '@estiva-app/ui'
 
-<Form onSubmit={send} busy={sending} className="flex flex-col gap-6">
+<Form onSubmit={send} busy={sending}>
   <Field label="Title" required error={titleError}>
     <TextInput value={title} onChange={(e) => { setTitle(e.target.value); setTitleError(undefined) }} />
   </Field>
@@ -55,8 +55,13 @@ import { Button, Field, Form, TextInput } from '@estiva-app/ui'
   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.
+- **The form places its fields: one column, 24px apart** (Katerina, 28
+  September), so every form reads the same. Pass no layout of your own: the
+  gate lint refuses a gap, a direction or a grid on a `Form`. `className`
+  still places the form itself: its space around, its size.
+- **`layout="free"`** is for a form that is not a list of fields: a field and
+  its button, a composer. It places nothing, and `className` lays it out.
+- The form draws no box, and neither does the `<fieldset>` inside it.
 
 ## What it owns
 
@@ -67,6 +72,7 @@ It does these by itself. Write none of them around it.
 | Sends on Enter in a one-line field, and on Ctrl+Enter anywhere inside | a key handler that submits |  |
 | Leaves Enter alone where it means something else: a Textarea, a list, a people picker | exceptions of your own |  |
 | Does nothing while it is sending: no second send, and nothing inside takes focus | a busy flag on every control |  |
+| Stacks its fields in one column, 24px apart | a gap, a direction or a grid on the form | `no-restyled-part` |
 
 ## Keys
 

package/src/Form.stories.tsx

@@ -11,7 +11,7 @@ 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 },
+  args: { onSubmit: fn(), busy: false, 'aria-label': 'Example', children: null },
   argTypes: { children: { control: false }, onSubmit: { control: false } },
   decorators: [(Story) => <div className="w-96"><Story /></div>],
 } satisfies Meta<typeof Form>
@@ -35,6 +35,7 @@ const fields = (error?: string) => (
   </>
 )
 
+/** A list of fields: the form stacks them 24px apart itself. */
 export const Default: Story = { render: (args) => <Form {...args}>{fields()}</Form> }
 
 /** Sending: every field and button inside is switched off at once. */
@@ -43,6 +44,22 @@ export const Busy: Story = { args: { busy: true }, render: (args) => <Form {...a
 /** 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> }
 
+/**
+ * **`layout="free"`**: a form that is not a list of fields, here a field and
+ * its button, places nothing, and lays itself out through `className`.
+ */
+export const Free: Story = {
+  args: { layout: 'free', className: 'flex items-center gap-2' },
+  render: (args) => (
+    <Form {...args}>
+      <TextInput placeholder="Add a name" aria-label="Name" className="min-w-0 flex-1" />
+      <Button variant="primary" type="submit">
+        Add
+      </Button>
+    </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.

package/src/Form.test.tsx

@@ -26,7 +26,7 @@ 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">
+    <Form onSubmit={onSubmit} busy={busy} aria-label="Probe" id="probe">
       <Field label="First">
         <TextInput />
       </Field>
@@ -213,13 +213,27 @@ describe('Form', () => {
     expect(fireEvent.submit(form)).toBe(false)
   })
 
-  it('is a form with no browser validation bubbles, and passes id and className on', () => {
+  it('is a form with no browser validation bubbles, and passes id 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('stacks its fields 24px apart itself, and a free form places nothing', () => {
+    render(
+      <>
+        <Form onSubmit={() => {}} aria-label="Fields" className="px-5">x</Form>
+        <Form onSubmit={() => {}} aria-label="Free" layout="free" className="flex items-center gap-2">x</Form>
+      </>,
+    )
+    const fields = screen.getByRole('form', { name: 'Fields' }).className.split(' ')
+    expect(fields).toEqual(expect.arrayContaining(['flex', 'flex-col', 'gap-6', 'px-5']))
+    const free = screen.getByRole('form', { name: 'Free' }).className.split(' ')
+    expect(free).not.toContain('flex-col')
+    expect(free).not.toContain('gap-6')
+    expect(free).toEqual(expect.arrayContaining(['flex', 'items-center', 'gap-2']))
   })
 
   it('draws no box of its own around the fields', () => {

package/src/Form.tsx

@@ -37,6 +37,15 @@ import { FormBusyContext, useFormBusy } from './formBusy'
  * from sending, for a form where only Ctrl+Enter may send (`CommandPalette`).
  * Every way of sending goes through the form's submit, so Base UI's field
  * check runs for each.
+ *
+ * **The form places its fields** (Katerina, 28 September). It drew no box and
+ * left the space between fields to every caller, and they chose three: Peek's
+ * dialogs 8px — the label's own distance from its box, so a label sat as close
+ * to the field above it as to its own — Ship's 24px, and the package's own
+ * launcher 16px. Everything inside now stacks 24px apart, and the gate lint
+ * refuses a layout passed in (`no-restyled-part`). A form that is not a list
+ * of fields — a field and its button, a composer — says `layout="free"` and
+ * lays itself out.
  */
 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. */
@@ -48,9 +57,18 @@ export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'on
    * Ctrl+Enter may send — a form inside `CommandPalette`. Ctrl+Enter sends either way.
    */
   enterSends?: boolean
+  /**
+   * `fields`, the default: everything inside stacks 24px apart. `free`: the
+   * form places nothing, for a form that is not a list of fields — a field and
+   * its button, a composer — which lays itself out through `className`.
+   */
+  layout?: 'fields' | 'free'
   children: ReactNode
 }
 
+/** A list of fields: one column, 24px apart. `CommandPalette` stacks its fields with it too. */
+export const FIELDS_CLASSES = 'flex flex-col gap-6'
+
 const CONTROL = 'input:not([type="hidden"]), textarea, select, button, [role="checkbox"], [role="combobox"], [tabindex]:not([tabindex="-1"])'
 
 /** The inputs a person types one line into; a picker's input (`role="combobox"`) is not one. */
@@ -70,7 +88,7 @@ function firstInvalid(form: HTMLElement): HTMLElement | undefined {
   return undefined
 }
 
-export function Form({ onSubmit, busy: ownBusy = false, enterSends = true, className, children, ...props }: FormProps) {
+export function Form({ onSubmit, busy: ownBusy = false, enterSends = true, layout = 'fields', className, children, ...props }: FormProps) {
   // A form inside a busy form is busy too.
   const outerBusy = useFormBusy()
   const busy = ownBusy || outerBusy
@@ -148,7 +166,7 @@ export function Form({ onSubmit, busy: ownBusy = false, enterSends = true, class
       // 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)}
+      className={cn('outline-none', layout === 'fields' && FIELDS_CLASSES, className)}
       onFocus={(event) => {
         if (event.target !== form.current) lastInside.current = event.target
         props.onFocus?.(event)

package/src/ListColumn.stories.tsx

@@ -97,7 +97,7 @@ export const WithARowAbove: Story = {
       <ListColumn
         title="Items"
         above={
-          <Form onSubmit={() => setName('')} className="flex items-center gap-2 px-3 pt-3 pb-1">
+          <Form onSubmit={() => setName('')} layout="free" className="flex items-center gap-2 px-3 pt-3 pb-1">
             <TextInput className="min-w-0 flex-1" value={name} onChange={(e) => setName(e.target.value)} placeholder="New item name" aria-label="New item name" />
             <Button className="shrink-0" type="submit" disabled={!name.trim()}>
               Create

package/src/Select.tsx

@@ -94,7 +94,10 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
           // The focused border survives a hover: hover alone strengthens the
           // hairline, but hover while focused must not grey the focus colour —
           // the stacked variant outranks plain hover by specificity.
+          // Anywhere in the `Field` around it counts as over it (Katerina, 28 September).
           !held && 'hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus',
+          // Left out while focused or open, so their colour stays under the pointer.
+          !held && 'group-hover/field:border-border-strong group-hover/field:focus-visible:border-border-focus group-hover/field:aria-expanded:border-border-focus',
           FIELD_DISABLED_CLASSES,
           held && 'cursor-not-allowed bg-bg-disabled text-text-disabled',
           'focus-visible:border-border-focus aria-expanded:border-border-focus',

package/src/eslint/no-restyled-part.test.ts

@@ -74,6 +74,9 @@ tester.run('no-restyled-part', noRestyledPart, {
     { name: 'style the code works out while it runs passes', filename: app, code: ui('Card', '    <Card style={props.style} />') },
     { name: 'style on a component that hands on only its className is not read', filename: app, code: local('ConversationCard', './components/ConversationCard', '    <ConversationCard title="x" style={{ opacity: 0.5 }} />') },
     { name: 'EmptyState placed', filename: app, code: ui('EmptyState', '    <EmptyState className="mt-2 flex-1" message="Nothing yet" />') },
+    { name: 'Form placed, its fields its own', filename: app, code: ui('Form', '    <Form onSubmit={send} className="min-h-0 flex-1 px-5">x</Form>') },
+    { name: 'a free Form lays itself out', filename: app, code: ui('Form', '    <Form onSubmit={send} layout="free" className="flex items-center gap-2">x</Form>') },
+    { name: 'a Form whose layout the rule cannot read passes', filename: app, code: ui('Form', '    <Form onSubmit={send} layout={how} className="flex gap-2">x</Form>') },
     // escapes
     { name: 'escaped, with its reason', filename: app, code: ui('Link', '    // @estiva-escape(no-restyled-part): the whole row is the link, and no part does that yet\n    <Link href="/x" className="after:absolute after:inset-0">x</Link>') },
     // the package itself
@@ -186,6 +189,18 @@ tester.run('no-restyled-part', noRestyledPart, {
       code: "import { Link, type LinkProps } from '@estiva-app/ui'\nfunction RouterLink({ href, ...props }: LinkProps) {\n  return <Link href={href} {...props} />\n}\nexport function Probe() {\n  return <RouterLink href=\"/x\" className=\"text-h5\">x</RouterLink>\n}\n",
       errors: [{ message: restyled('`text-h5`', '`RouterLink` (it hands its props to `Link`)', ' Use its `variant`, `truncate` or `cover`.') }],
     },
+    {
+      name: 'a Form laid out by hand',
+      filename: app,
+      code: ui('Form', '    <Form onSubmit={send} className="flex flex-col gap-2 sm:gap-4 mt-2">x</Form>'),
+      errors: [{ message: '`flex` `flex-col` `gap-2` `sm:gap-4` lays out the fields of `Form`. A Form places its own fields, 24px apart (Katerina, 28 September), so every form reads the same: remove it. A form that is not a list of fields (a field and its button, a composer) says `layout="free"` and lays itself out.' }],
+    },
+    {
+      name: 'a Form that says fields is laid out by the Form',
+      filename: app,
+      code: ui('Form', '    <Form onSubmit={send} layout="fields" className="space-y-3">x</Form>'),
+      errors: [{ message: '`space-y-3` lays out the fields of `Form`. A Form places its own fields, 24px apart (Katerina, 28 September), so every form reads the same: remove it. A form that is not a list of fields (a field and its button, a composer) says `layout="free"` and lays itself out.' }],
+    },
     {
       name: 'EmptyState padded directly',
       filename: app,
@@ -307,7 +322,8 @@ describe('the look props the message names are the package’s own', () => {
   })
 
   /** Named like a look, and not one: AttachmentCard's `size` is the file's, in bytes. */
-  const NOT_A_LOOK: Record<string, string[]> = { AttachmentCard: ['size'] }
+  // Form's `layout` says whether it places its fields at all, not how anything looks.
+  const NOT_A_LOOK: Record<string, string[]> = { AttachmentCard: ['size'], Form: ['layout'] }
 
   it('every look prop a part has is named', () => {
     for (const part of PARTS) {

package/src/eslint/no-restyled-part.ts

@@ -36,6 +36,10 @@ import { ESCAPE_MESSAGES, isEscaped } from './escape'
  *
  * `EmptyState` takes no padding either (Katerina's ruling 6 of 14 September):
  * its room comes from the box its rows live in.
+ *
+ * `Form` takes no layout for its fields (Katerina, 28 September): it stacks
+ * them 24px apart itself, so every form reads the same. A form that is not a
+ * list of fields says `layout="free"`, and then lays itself out.
  */
 
 // ---------------------------------------------------------------- the classes
@@ -93,6 +97,14 @@ export function isPlacement(token: string): boolean {
   return PLACEMENT.some(({ pattern }) => pattern.test(utility))
 }
 
+/** How a form's fields are laid out: its display, direction, gaps and alignment. */
+const FIELDS_LAYOUT = /^(?:block|flex|grid|inline-flex|inline-grid|contents|flow-root)$|^(?:gap|gap-x|gap-y|space-x|space-y|grid-cols|grid-rows|grid-flow|auto-cols|auto-rows|items|justify|justify-items|place-content|place-items)-|^flex-(?:row|col|wrap|nowrap)|^content-(?!\[)/
+
+const isFieldsLayout = (token: string) => {
+  const { variants, utility } = splitClass(token)
+  return !variants.some((variant) => REACHING_VARIANT.test(variant)) && FIELDS_LAYOUT.test(utility)
+}
+
 const isPadding = (token: string) => {
   const { variants, utility } = splitClass(token)
   return !variants.some((variant) => REACHING_VARIANT.test(variant)) && /^p[xytrblse]?-/.test(utility)
@@ -608,6 +620,8 @@ export const noRestyledPart: Rule.RuleModule = {
         '{{keys}} in the `style` of {{where}} changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled, by class or by style: only space, size, flex and grid, and position pass in.{{use}} A look for what is around it goes on your own element around it.',
       emptyStatePadding:
         '{{classes}} pads {{where}}. EmptyState takes no padding (Katerina, 14 September): its room comes from the box its rows live in, so put the padding on that box.',
+      formLayout:
+        '{{classes}} lays out the fields of {{where}}. A Form places its own fields, 24px apart (Katerina, 28 September), so every form reads the same: remove it. A form that is not a list of fields (a field and its button, a composer) says `layout="free"` and lays itself out.',
       ...ESCAPE_MESSAGES,
     },
   },
@@ -623,6 +637,15 @@ export const noRestyledPart: Rule.RuleModule = {
       return escapes.get(anchor) === true
     }
 
+    /** A `Form` lays out its own fields unless it says `layout="free"`; a layout the rule cannot read passes. */
+    const placesItsFields = (element: Node) =>
+      !children(element, 'attributes').some((attribute) => {
+        if (attribute?.type !== 'JSXAttribute' || nameOf(child(attribute, 'name')) !== 'layout') return false
+        const value = child(attribute, 'value')
+        const literal = value?.type === 'JSXExpressionContainer' ? child(value, 'expression') : value
+        return !(literal?.type === 'Literal' && literal.value === 'fields')
+      })
+
     const check = (element: Node, binding: PartBinding, prop: string, value: Node | null | undefined, at: Node) => {
       const partProp = binding.props === 'all' ? prop : binding.props[prop]
       if (!partProp || !value) return
@@ -632,7 +655,8 @@ export const noRestyledPart: Rule.RuleModule = {
       const where = `${via}${partProp === 'className' ? '' : `'s \`${partProp}\``}`
       const restyled = [...new Set(classes.filter((token) => !isPlacement(token)))]
       const padding = binding.part === 'EmptyState' && binding.props === 'all' ? [...new Set(classes.filter(isPadding))] : []
-      if (!restyled.length && !padding.length) return
+      const layout = binding.part === 'Form' && partProp === 'className' && placesItsFields(element) ? [...new Set(classes.filter(isFieldsLayout))] : []
+      if (!restyled.length && !padding.length && !layout.length) return
       if (escaped(element)) return
       if (restyled.length) {
         const props = PART_LOOK_PROPS[binding.part]
@@ -640,6 +664,7 @@ export const noRestyledPart: Rule.RuleModule = {
         context.report({ loc: at.loc as NonNullable<Rule.Node['loc']>, messageId: 'restyled', data: { classes: code(restyled), where, use } })
       }
       if (padding.length) context.report({ loc: at.loc as NonNullable<Rule.Node['loc']>, messageId: 'emptyStatePadding', data: { classes: code(padding), where } })
+      if (layout.length) context.report({ loc: at.loc as NonNullable<Rule.Node['loc']>, messageId: 'formLayout', data: { classes: code(layout), where } })
     }
 
     /** `style` on a part: every key it can read must be placement (B6). */

package/src/looks.ts

@@ -11,14 +11,16 @@
  * much room it takes stay in the part.
  */
 
-/** A field's box: TextInput and Textarea. The hairline strengthens on hover; focus comes after it, so a focused field keeps its colour under the pointer. */
-export const FIELD_BOX_CLASSES = 'bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg'
+/**
+ * A field's box: TextInput and Textarea. The hairline strengthens on hover — of the box, or of anywhere in the `Field` around it, label included, so the field is one thing under the pointer (Katerina, 28 September) — and not while switched off: a label passes its hover to its box, switched off or not (FIELD_DISABLED_CLASSES holds it back). Focus outranks it, so a focused field keeps its colour under the pointer.
+ */
+export const FIELD_BOX_CLASSES = 'bg-bg-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong focus:border-border-focus group-hover/field:focus:border-border-focus rounded-lg'
 
 /** What a field's words look like, typed or waiting: TextInput, Textarea and Select. */
 export const FIELD_TEXT_CLASSES = 'text-text-primary placeholder:text-text-muted'
 
 /** A field that cannot be used: TextInput, Textarea and Select. */
-export const FIELD_DISABLED_CLASSES = 'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled'
+export const FIELD_DISABLED_CLASSES = 'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field group-hover/field:disabled:border-border-field'
 
 /** The ring a focused field wears in Signal: TextInput and Textarea. */
 export const FIELD_FOCUS_RING_CLASSES = 'signal:transition-shadow signal:focus:shadow-focus-ring'
@@ -30,7 +32,7 @@ export const FIELD_SIZE_CLASSES = {
 } as const
 
 /** The box around an input that sits inside it, before its focus look: SearchInput and ChipInput. */
-export const FIELD_SHELL_CLASSES = 'bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors'
+export const FIELD_SHELL_CLASSES = 'bg-bg-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong rounded-lg transition-colors'
 
 /** A panel that floats over the page: Menu's panel and Tooltip. */
 export const FLOATING_SURFACE_CLASSES = 'rounded-lg border border-border-default bg-bg-elevated shadow-lg'