@estiva-app/ui 0.40.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.40.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.40.0",
+    "packageVersion": "0.42.0",
     "exports": 90,
     "typeExports": 101,
     "files": null
@@ -792,6 +792,18 @@
           "required": false,
           "note": null
         },
+        {
+          "name": "href",
+          "takes": "text",
+          "required": false,
+          "note": "The chip is a link: a real anchor with the chip's own round shape, so the keyboard ring is round too."
+        },
+        {
+          "name": "onClick",
+          "takes": "MouseEventHandler<HTMLAnchorElement>",
+          "required": false,
+          "note": "With `href`: a router app takes the click here, like `Link`."
+        },
         {
           "name": "className",
           "takes": "text",
@@ -825,13 +837,13 @@
         "bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning",
         "bg-success-muted text-success-default signal:border signal:border-success-outline",
         "bg-error-muted text-error-default signal:border signal:border-error-outline",
+        "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums",
+        "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide",
         "rounded-full bg-accent-muted text-accent-primary signal:border signal:border-accent-outline",
         "rounded-full bg-info-muted text-info-default signal:border signal:border-info-outline",
         "rounded-full bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning",
         "rounded-full bg-success-muted text-success-default signal:border signal:border-success-outline",
-        "rounded-full bg-error-muted text-error-default signal:border signal:border-error-outline",
-        "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums",
-        "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide"
+        "rounded-full bg-error-muted text-error-default signal:border signal:border-error-outline"
       ]
     },
     {
@@ -954,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"
       ]
     },
@@ -2097,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",
@@ -2104,7 +2121,15 @@
           "note": null
         }
       ],
-      "variants": [],
+      "variants": [
+        {
+          "prop": "layout",
+          "values": [
+            "fields",
+            "free"
+          ]
+        }
+      ],
       "ownsBehaviours": [
         {
           "id": "base-ui",
@@ -2749,6 +2774,12 @@
           "required": false,
           "note": "One line, cut with an ellipsis when it does not fit — a title that is a link."
         },
+        {
+          "name": "cover",
+          "takes": "true/false",
+          "required": false,
+          "note": "The link covers the row it sits in: a click anywhere on the row opens it, and the keyboard ring goes round the whole row."
+        },
         {
           "name": "children",
           "takes": "anything",
@@ -2785,8 +2816,13 @@
       "app": null,
       "looks": [
         "text-info-default underline underline-offset-2 hover:opacity-80",
+        "text-info-default underline underline-offset-2 hover:opacity-80 after:rounded-md focus-visible:outline-none",
         "text-info-default underline underline-offset-2 hover:opacity-80 truncate",
-        "underline underline-offset-2 hover:text-text-primary truncate"
+        "text-info-default underline underline-offset-2 hover:opacity-80 truncate after:rounded-md focus-visible:outline-none",
+        "hover:underline truncate after:rounded-md focus-visible:outline-none",
+        "underline underline-offset-2 hover:text-text-primary after:rounded-md focus-visible:outline-none",
+        "underline underline-offset-2 hover:text-text-primary truncate",
+        "underline underline-offset-2 hover:text-text-primary truncate after:rounded-md focus-visible:outline-none"
       ]
     },
     {
@@ -4573,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"
       ]
     },
@@ -4828,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"
       ]
     },
     {
@@ -4869,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/Chip.mdx

@@ -20,8 +20,8 @@ muted tints; the label is the `chip` type token, 11px / 500.
 
 ## When not
 
-- Something clickable → **Button** (small) or **MenuItem** — a Chip is not
-  a control.
+- Something that does an action → **Button** (small) or **MenuItem**. A Chip
+  is not a control. It can only be a link, with `href`.
 - A removable token in a multi-select → **InputChip** (see ChipInput).
 - A count beside a tab label → **Tabs** draws its own mono number, not a
   Chip.
@@ -37,6 +37,17 @@ import { Chip } from '@estiva-app/ui'
 - `leadingIcon` / `trailingIcon` take a 12px icon; the slots centre it, so
   it never rides the text baseline.
 - A count alone works too — `label="3"`, no icon.
+- `href` makes the chip a link to the thing it names: a real anchor with the
+  chip's round shape, so the keyboard ring is round too. A router app passes
+  `onClick`, as with **Link**. Inside a row whose **Link** has `cover`, it
+  stays clickable on its own: the row opens one thing, the chip another.
+
+```tsx
+<div className="relative flex items-center gap-3">
+  <Link href={itemUrl} variant="plain" cover>Item one</Link>
+  <Chip href={groupUrl} label="Group" />
+</div>
+```
 
 ## What it owns
 

package/src/Chip.stories.tsx

@@ -27,6 +27,8 @@ export const WithLeadingIcon: Story = { args: { type: 'info', label: 'Replies',
 export const WithTrailingIcon: Story = { args: { type: 'success', label: 'Sorted', trailingIcon: <IconArrowUp className="size-3" stroke={1.5} /> } }
 /** A count alone. */
 export const CountOnly: Story = { args: { type: 'neutral', label: '2' } }
+/** A link to the thing it names. Tab to it: the ring is round, like the chip. */
+export const AsLink: Story = { args: { type: 'neutral', label: 'Group', href: '#' } }
 
 /** All six colour types. */
 export const AllTypes: Story = {

package/src/Chip.test.tsx

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+/**
+ * What the Chip page claims about `href`, pinned: without it the chip is not a
+ * link; with it the chip is a real anchor named by its label, keeps its round
+ * shape, sits above a covering link (`relative`), and hands the click to a
+ * router app through `onClick`.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Chip } from './Chip'
+
+afterEach(cleanup)
+
+describe('Chip', () => {
+  it('is not a link without href', () => {
+    render(<Chip label="Group" />)
+    expect(screen.queryByRole('link')).toBeNull()
+    expect(screen.getByText('Group').parentElement?.tagName).toBe('DIV')
+  })
+
+  it('with href is an anchor named by its label, round, and lifted above a covering link', () => {
+    render(<Chip label="Group" href="/groups/one" />)
+    const link = screen.getByRole('link', { name: 'Group' })
+    expect(link.getAttribute('href')).toBe('/groups/one')
+    expect(link.classList.contains('rounded-full')).toBe(true)
+    expect(link.classList.contains('relative')).toBe(true)
+  })
+
+  it('a router app takes the click through onClick', async () => {
+    const onClick = vi.fn((event: { preventDefault: () => void }) => event.preventDefault())
+    render(<Chip label="Group" href="/groups/one" onClick={onClick} />)
+    await userEvent.click(screen.getByRole('link', { name: 'Group' }))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

package/src/Chip.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { MouseEventHandler, ReactNode } from 'react'
 import { cn } from './cn'
 import { CHIP_TEXT_CLASSES } from './looks'
 
@@ -20,6 +20,14 @@ export interface ChipProps {
   label?: string
   leadingIcon?: ReactNode
   trailingIcon?: ReactNode
+  /**
+   * The chip is a link: a real anchor with the chip's own round shape, so the
+   * keyboard ring is round too. It sits above a row's covering `Link`, so the
+   * row opens one thing and the chip another (UIG-33, Katerina 28 September).
+   */
+  href?: string
+  /** With `href`: a router app takes the click here, like `Link`. */
+  onClick?: MouseEventHandler<HTMLAnchorElement>
   className?: string
 }
 
@@ -32,9 +40,10 @@ const typeStyles: Record<ChipType, string> = {
   error: 'bg-error-muted text-error-default signal:border signal:border-error-outline',
 }
 
-export function Chip({ type = 'neutral', label, leadingIcon, trailingIcon, className }: ChipProps) {
-  return (
-    <div className={cn('inline-flex min-w-0 items-center justify-center gap-1.5 rounded-full max-h-[20px] px-2 py-1', typeStyles[type], className)}>
+export function Chip({ type = 'neutral', label, leadingIcon, trailingIcon, href, onClick, className }: ChipProps) {
+  const classes = cn('inline-flex min-w-0 items-center justify-center gap-1.5 rounded-full max-h-[20px] px-2 py-1', typeStyles[type], className)
+  const inside = (
+    <>
       {leadingIcon && <span className="flex size-3 shrink-0 items-center justify-center">{leadingIcon}</span>}
       {label && (
         // A chip given a `max-w-*` cuts a long label with an ellipsis instead
@@ -48,6 +57,9 @@ export function Chip({ type = 'neutral', label, leadingIcon, trailingIcon, class
         <span className={cn('min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide', CHIP_TEXT_CLASSES)}>{label}</span>
       )}
       {trailingIcon && <span className="flex size-3 shrink-0 items-center justify-center">{trailingIcon}</span>}
-    </div>
+    </>
   )
+  // `relative` lifts a linked chip above a covering link that comes before it.
+  if (href) return <a href={href} onClick={onClick} className={cn('relative', classes)}>{inside}</a>
+  return <div className={classes}>{inside}</div>
 }

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)