@estiva-app/ui 0.40.0 → 0.42.0

package/src/Link.mdx

@@ -24,6 +24,11 @@ the app decides how it navigates.
   what it wraps draws itself.
 - `external` — another site or app: it opens in a new tab, with
   `noopener noreferrer`.
+- **`cover`** — a row that opens one thing wherever you click it: an item in a
+  list, a row of a table. The link covers the row, and the keyboard ring goes
+  round the whole row.
+
+<Canvas of={LinkStories.Cover} />
 
 ## When not
 
@@ -33,6 +38,13 @@ the app decides how it navigates.
 - A link that looks like an icon button → **IconButton** with `href`.
 - A word standing for a person or a thing, drawn in a small box → **InlineChip**
   with `href`.
+- A box that is one link → **Card** with `href`. `cover` is for a row that has
+  no frame of its own.
+- `cover` on a row whose parts each open something different, or a row with
+  nothing to open. A row with only a second link inside it (a chip, say) is
+  fine: see How.
+- Stretching a link over its row by hand (`after:absolute`): the lint refuses
+  it. Use `cover`.
 
 ## How
 
@@ -59,6 +71,26 @@ import { Link } from '@estiva-app/ui'
 
 - `truncate` keeps a title that is a link on one line, cut with an ellipsis.
   Its size and colour still come from the text around it.
+
+- `cover` covers the nearest box that is `relative`: give the row `relative`.
+  The row keeps its own size, fill and hover; the link only adds the layer
+  and the ring. Pointing anywhere on the row counts as pointing at the link,
+  so `quiet` underlines the title while the row is hovered.
+- A second link inside the row comes **after** the covering link and is
+  `relative` itself, so it sits above the layer. A **Chip** with `href` already
+  is.
+
+```tsx
+<div className="relative flex h-9 items-center gap-3 px-3 hover:bg-bg-hover">
+  <Link href={itemUrl} variant="plain" cover onClick={navigate}>Item one</Link>
+  <Chip href={groupUrl} label="Group" onClick={navigate} />
+</div>
+
+<tr className="relative">
+  <td><Link href={itemUrl} variant="quiet" cover>Item one</Link></td>
+  <td>…</td>
+</tr>
+```
 - `quiet`, `underlined` and `plain` take their size and colour from where they
   sit, so put those on your own element around the link, not on the link —
   the lint refuses a look passed in `className`.

package/src/Link.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Link } from './Link'
 import { Card } from './Card'
+import { Chip } from './Chip'
 
 const meta = {
   title: 'Navigation/Link',
@@ -70,6 +71,54 @@ export const External: Story = {
   ),
 }
 
+const ROWS = [
+  { key: 'A-1', title: 'Item one', group: 'Group', time: '2h' },
+  { key: 'A-2', title: 'Item two', group: 'Group', time: '1d' },
+  { key: 'A-3', title: 'Item three', time: '3d' },
+]
+
+/**
+ * A row that is one link: click anywhere on it, or Tab to it and the ring goes
+ * round the whole row. The chip is a second link, and opens something else.
+ */
+export const Cover: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-full max-w-xl flex-col">
+      {ROWS.map((row) => (
+        <div key={row.key} className="relative flex h-9 items-center gap-3 rounded-md px-3 transition-colors hover:bg-bg-hover">
+          <Link href="#" variant="plain" cover className="flex min-w-0 flex-1 items-center gap-3">
+            <span className="w-10 shrink-0 font-mono text-caption text-text-muted">{row.key}</span>
+            <span className="min-w-0 flex-1 truncate text-body-2 text-text-primary">{row.title}</span>
+          </Link>
+          {row.group && <Chip href="#" label={row.group} />}
+          <span className="w-8 shrink-0 text-right text-caption text-text-muted">{row.time}</span>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+/** The same in a table: the row is `relative`, the title a `quiet` link that covers it. */
+export const CoverInTable: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <table className="w-full max-w-xl text-body-2">
+      <tbody>
+        {ROWS.map((row) => (
+          <tr key={row.key} className="relative border-b border-border-subtle last:border-b-0 hover:bg-bg-hover">
+            <td className="w-14 px-3 py-2 font-mono text-caption text-text-muted">{row.key}</td>
+            <td className="px-3 py-2 text-text-primary">
+              <Link href="#" variant="quiet" cover>{row.title}</Link>
+            </td>
+            <td className="w-16 px-3 py-2 text-right text-caption text-text-muted">{row.time}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+}
+
 /** The four looks, each where it belongs. */
 export const AllVariants: Story = {
   parameters: { controls: { disable: true } },

package/src/Link.test.tsx

@@ -88,6 +88,21 @@ describe('Link', () => {
     expect(classesOf(screen.getByRole('link'))).toEqual([])
   })
 
+  it('cover lays a layer over the row and moves the ring onto it; without it, nothing of the kind', () => {
+    render(
+      <>
+        <Link href="#" variant="plain" cover>
+          Row
+        </Link>
+        <Link href="#" variant="plain">
+          Words
+        </Link>
+      </>,
+    )
+    expect(classesOf(screen.getByRole('link', { name: 'Row' }))).toEqual(['after:absolute', 'after:inset-0', 'after:rounded-md', 'focus-visible:outline-none', 'focus-visible:after:[outline-style:auto]'])
+    expect(classesOf(screen.getByRole('link', { name: 'Words' }))).toEqual([])
+  })
+
   it('a ref reaches the anchor', () => {
     const ref = createRef<HTMLAnchorElement>()
     render(

package/src/Link.tsx

@@ -18,6 +18,15 @@ import { cn } from './cn'
  *   and a solid version became this one, solid (her ruling, 13 September).
  * - `plain` — no look at all: a card or a row that is a link draws itself.
  *
+ * **`cover`: a row that is one link** (UIG-33, Katerina 28 September). The link
+ * stretches an invisible layer over the nearest box the app has given
+ * `relative` (a row, a table row), so a click anywhere on it opens the link, and
+ * the keyboard ring goes round that whole box rather than round the words. The
+ * row stays the app's own: its size, its fill, its hover. A second link inside
+ * the row stays clickable when it comes after the covering link and is
+ * `relative` itself, which a `Chip` with an `href` already is. Both apps
+ * stretched a link by hand before this, each under a written exception.
+ *
  * **Navigation is the app's.** The package cannot know a router, so like
  * `NavItem` it renders a real anchor and passes every anchor prop through: a
  * router app hands in `onClick`, prevents the default and navigates, and the
@@ -25,6 +34,13 @@ import { cn } from './cn'
  */
 export type LinkVariant = 'text' | 'quiet' | 'underlined' | 'plain'
 
+/**
+ * The covering layer, and the ring moved onto it: `outline-none` takes the ring
+ * off the words, and `outline-style: auto` draws the browser's own ring round the
+ * layer, the same ring every other control shows, only the size of the row.
+ */
+const COVER_CLASSES = 'after:absolute after:inset-0 after:rounded-md focus-visible:outline-none focus-visible:after:[outline-style:auto]'
+
 const VARIANT_CLASSES: Record<LinkVariant, string> = {
   text: 'text-info-default underline underline-offset-2 hover:opacity-80',
   quiet: 'hover:underline',
@@ -46,15 +62,20 @@ export interface LinkProps extends ComponentPropsWithRef<'a'> {
    * Its size and colour still come from the text around it (UIG-9, 17 September).
    */
   truncate?: boolean
+  /**
+   * 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. Give the row `relative`.
+   */
+  cover?: boolean
   children: ReactNode
 }
 
-export function Link({ href, variant = 'text', external = false, truncate = false, className, children, ...props }: LinkProps) {
+export function Link({ href, variant = 'text', external = false, truncate = false, cover = false, className, children, ...props }: LinkProps) {
   return (
     <a
       href={href}
       {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-      className={cn(VARIANT_CLASSES[variant], truncate && 'truncate', className)}
+      className={cn(VARIANT_CLASSES[variant], truncate && 'truncate', cover && COVER_CLASSES, className)}
       {...props}
     >
       {children}

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/index.test.ts

@@ -139,7 +139,7 @@ describe('an app lint with configs.recommended', () => {
       [
         'estiva/no-restyled-part',
         2,
-        '`text-h2` on `Link` changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled: only space, size, flex and grid, and position pass in. Use its `variant` or `truncate`. A look for what is around it goes on your own element around it.',
+        '`text-h2` on `Link` changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled: only space, size, flex and grid, and position pass in. Use its `variant`, `truncate` or `cover`. A look for what is around it goes on your own element around it.',
       ],
     ])
   })

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
@@ -115,7 +118,7 @@ tester.run('no-restyled-part', noRestyledPart, {
       name: 'a look behind a variant, and an extra layer',
       filename: app,
       code: ui('Link', '    <Link href="/x" className="signal:hover:bg-success-muted after:absolute [&>*]:shrink-0">x</Link>'),
-      errors: [{ message: restyled('`signal:hover:bg-success-muted` `after:absolute` `[&>*]:shrink-0`', '`Link`', ' Use its `variant` or `truncate`.') }],
+      errors: [{ message: restyled('`signal:hover:bg-success-muted` `after:absolute` `[&>*]:shrink-0`', '`Link`', ' Use its `variant`, `truncate` or `cover`.') }],
     },
     {
       name: 'an inner box’s class prop',
@@ -184,7 +187,19 @@ tester.run('no-restyled-part', noRestyledPart, {
       name: 'a wrapper declared in the same file',
       filename: app,
       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` or `truncate`.') }],
+      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',
@@ -196,19 +211,19 @@ tester.run('no-restyled-part', noRestyledPart, {
       name: 'an escape with no reason is reported, and so is the class',
       filename: app,
       code: ui('Link', '    // @estiva-escape(no-restyled-part):\n    <Link href="/x" className="text-h2">x</Link>'),
-      errors: [{ messageId: 'escapeWithoutReason' }, { message: restyled('`text-h2`', '`Link`', ' Use its `variant` or `truncate`.') }],
+      errors: [{ messageId: 'escapeWithoutReason' }, { message: restyled('`text-h2`', '`Link`', ' Use its `variant`, `truncate` or `cover`.') }],
     },
     {
       name: 'inside the package: a part imported from a sibling',
       filename: pkg,
       code: local('Link', './Link', '    <Link href="/x" className="rounded-lg border">x</Link>'),
-      errors: [{ message: restyled('`rounded-lg` `border`', '`Link`', ' Use its `variant` or `truncate`.') }],
+      errors: [{ message: restyled('`rounded-lg` `border`', '`Link`', ' Use its `variant`, `truncate` or `cover`.') }],
     },
     {
       name: 'inside the package: a part used in the file that declares it',
       filename: pkg,
       code: 'export function Link() {\n  return null\n}\nexport function Probe() {\n  return <Link className="text-caption" />\n}\n',
-      errors: [{ message: restyled('`text-caption`', '`Link`', ' Use its `variant` or `truncate`.') }],
+      errors: [{ message: restyled('`text-caption`', '`Link`', ' Use its `variant`, `truncate` or `cover`.') }],
     },
   ],
 })
@@ -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)
@@ -119,7 +131,7 @@ export const PART_LOOK_PROPS: Record<string, string[]> = {
   IconButton: ['variant', 'pressed', 'glow'],
   InputChip: ['truncate'],
   Kbd: ['tone'],
-  Link: ['variant', 'truncate'],
+  Link: ['variant', 'truncate', 'cover'],
   MenuItem: ['size', 'selected', 'destructive'],
   MenuSub: ['selected'],
   NavItem: ['active'],
@@ -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/gates/app-checks.ts

@@ -264,6 +264,20 @@ export function appChecks(h: GateHelpers, { app = '.', page, chain = { ref: 'UIG
         return own.length ? h.FAIL(`draws the text tree itself (${own.join(', ')}): pass the tree to RichText`) : h.PASS('formatted text is drawn by RichText only')
       } },
     ]),
+    // UIG-33, Katerina's picks of 28 September: a row that is one link is `Link` with `cover`, and a
+    // chip that is a link is `Chip` with `href`. Before, both apps stretched a link over its row by
+    // hand (`after:absolute`) and rounded a Link round a chip, each under an escape.
+    ticket('UIG-33', [
+      { what: 'the installed package has Link cover and Chip href', run: all(h, [
+        () => h.contains(at('node_modules/@estiva-app/ui/dist/Link.d.ts'), /\bcover\?: boolean/, 'the installed Link takes cover'),
+        () => h.contains(at('node_modules/@estiva-app/ui/dist/Chip.d.ts'), /\bhref\?: string/, 'the installed Chip takes href'),
+      ], 'the installed Link takes cover and Chip takes href') },
+      { what: 'no link is stretched over its row by hand', run: () => {
+        const sources = h.listFiles(at('src'), (n) => /\.tsx$/.test(n) && !/\.(test|stories)\.tsx$/.test(n))
+        const own = sources.filter((f) => /<(?:Link|a)\b[^>]*\bafter:(?:absolute|inset-0)\b/.test(h.read(f)))
+        return own.length ? h.FAIL(`stretches a link by hand (${own.join(', ')}): give the Link cover`) : h.PASS('every whole-row link is Link with cover')
+      } },
+    ]),
     // Katerina's ruling of 17 September (docs/GATES.md §23): one copy, in the package. An app made
     // by create-estiva-app passes this from its first commit; Peek and Ship do once UIG-32 lands.
     ticket('UIG-32', [

package/src/gates/create-app.test.ts

@@ -194,8 +194,13 @@ describe('a made app, under the checks every app runs', () => {
     const real = helpers(dir)
     // "The installed package exports Link" reads its declarations, which CI's
     // test step does not build (`pretest` bundles only): the same exports are read
-    // from their source when the declarations are not there.
-    const exportsFrom = (rel: string) => (rel.endsWith('dist/index.d.ts') && !real.exists(rel) ? join(process.cwd(), 'src', 'index.ts') : rel)
+    // from their source when the declarations are not there. A part's own props
+    // (UIG-33: `Link.d.ts`) are read from its source file the same way.
+    const exportsFrom = (rel: string) => {
+      const declared = rel.replace(/\\/g, '/').match(/dist\/(\w+)\.d\.ts$/)
+      if (!declared || real.exists(rel)) return rel
+      return declared[1] === 'index' ? join(process.cwd(), 'src', 'index.ts') : join(process.cwd(), 'src', `${declared[1]}.tsx`)
+    }
     const h: GateHelpers = {
       ...real,
       contains: (rel, needle, label) => real.contains(exportsFrom(rel), needle, label),

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'