@estiva-app/ui 0.35.2 → 0.36.0

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.35.2",
+    "packageVersion": "0.36.0",
     "exports": 87,
     "typeExports": 96,
     "files": null
@@ -218,7 +218,20 @@
           ]
         }
       ],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
+        },
+        {
+          "id": "tab-stop",
+          "behaviour": "Is reachable with Tab"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "components-attachmentcard--docs",
@@ -728,6 +741,10 @@
         {
           "id": "role",
           "behaviour": "Says what it is to assistive technology"
+        },
+        {
+          "id": "tab-stop",
+          "behaviour": "Is reachable with Tab"
         }
       ],
       "status": "stable",
@@ -902,6 +919,22 @@
           "id": "portal",
           "behaviour": "Floats on top of the page"
         },
+        {
+          "id": "press-outside",
+          "behaviour": "Closes on a press outside"
+        },
+        {
+          "id": "page-keys",
+          "behaviour": "Takes its keys by itself"
+        },
+        {
+          "id": "focus",
+          "behaviour": "Holds focus inside while open, and gives it back"
+        },
+        {
+          "id": "follow",
+          "behaviour": "Stays attached to its anchor on scroll and resize"
+        },
         {
           "id": "walking",
           "behaviour": "Moves through its items with the arrow keys"
@@ -1100,10 +1133,22 @@
           "id": "portal",
           "behaviour": "Floats on top of the page"
         },
+        {
+          "id": "press-outside",
+          "behaviour": "Closes on a press outside"
+        },
+        {
+          "id": "page-keys",
+          "behaviour": "Takes its keys by itself"
+        },
         {
           "id": "focus",
           "behaviour": "Holds focus inside while open, and gives it back"
         },
+        {
+          "id": "scroll-lock",
+          "behaviour": "Stops the page behind it scrolling"
+        },
         {
           "id": "walking",
           "behaviour": "Moves through its items with the arrow keys"
@@ -1316,7 +1361,20 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "portal",
+          "behaviour": "Floats on top of the page"
+        },
+        {
+          "id": "walking",
+          "behaviour": "Moves through its items with the arrow keys"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "overlays-commandpalette--docs",
@@ -1415,6 +1473,22 @@
           "id": "portal",
           "behaviour": "Floats on top of the page"
         },
+        {
+          "id": "press-outside",
+          "behaviour": "Closes on a press outside"
+        },
+        {
+          "id": "page-keys",
+          "behaviour": "Takes its keys by itself"
+        },
+        {
+          "id": "focus",
+          "behaviour": "Holds focus inside while open, and gives it back"
+        },
+        {
+          "id": "scroll-lock",
+          "behaviour": "Stops the page behind it scrolling"
+        },
         {
           "id": "role",
           "behaviour": "Says what it is to assistive technology"
@@ -1710,7 +1784,12 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "inputs-editabletext--docs",
@@ -2483,7 +2562,20 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
+        },
+        {
+          "id": "tab-stop",
+          "behaviour": "Is reachable with Tab"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "inputs-chipinput--docs",
@@ -2568,10 +2660,18 @@
       ],
       "variants": [],
       "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
         {
           "id": "portal",
           "behaviour": "Floats on top of the page"
         },
+        {
+          "id": "press-outside",
+          "behaviour": "Closes on a press outside"
+        },
         {
           "id": "page-keys",
           "behaviour": "Takes its keys by itself"
@@ -2583,6 +2683,10 @@
         {
           "id": "scroll-lock",
           "behaviour": "Stops the page behind it scrolling"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
         }
       ],
       "status": "stable",
@@ -2820,6 +2924,10 @@
           "id": "page-keys",
           "behaviour": "Takes its keys by itself"
         },
+        {
+          "id": "focus",
+          "behaviour": "Holds focus inside while open, and gives it back"
+        },
         {
           "id": "follow",
           "behaviour": "Stays attached to its anchor on scroll and resize"
@@ -2926,7 +3034,16 @@
           ]
         }
       ],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "overlays-menuitem--docs",
@@ -3024,7 +3141,16 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "overlays-menu--docs",
@@ -3093,7 +3219,16 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "overlays-menu--docs",
@@ -3265,7 +3400,20 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
+        },
+        {
+          "id": "tab-stop",
+          "behaviour": "Is reachable with Tab"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "components-persontrigger--docs",
@@ -3399,6 +3547,10 @@
           "id": "page-keys",
           "behaviour": "Takes its keys by itself"
         },
+        {
+          "id": "focus",
+          "behaviour": "Holds focus inside while open, and gives it back"
+        },
         {
           "id": "follow",
           "behaviour": "Stays attached to its anchor on scroll and resize"
@@ -3494,6 +3646,10 @@
           "id": "press-outside",
           "behaviour": "Closes on a press outside"
         },
+        {
+          "id": "page-keys",
+          "behaviour": "Takes its keys by itself"
+        },
         {
           "id": "follow",
           "behaviour": "Stays attached to its anchor on scroll and resize"
@@ -3757,6 +3913,10 @@
         {
           "id": "base-ui",
           "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "tab-stop",
+          "behaviour": "Is reachable with Tab"
         }
       ],
       "status": "stable",
@@ -3814,7 +3974,12 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "page-keys",
+          "behaviour": "Takes its keys by itself"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "components-reactionpicker--docs",
@@ -3890,6 +4055,10 @@
           "id": "base-ui",
           "behaviour": "Is built on Base UI"
         },
+        {
+          "id": "tab-stop",
+          "behaviour": "Is reachable with Tab"
+        },
         {
           "id": "scroll",
           "behaviour": "Scrolls with our scrollbar"
@@ -4201,6 +4370,10 @@
           "id": "page-keys",
           "behaviour": "Takes its keys by itself"
         },
+        {
+          "id": "focus",
+          "behaviour": "Holds focus inside while open, and gives it back"
+        },
         {
           "id": "follow",
           "behaviour": "Stays attached to its anchor on scroll and resize"
@@ -4437,6 +4610,10 @@
         {
           "id": "role",
           "behaviour": "Says what it is to assistive technology"
+        },
+        {
+          "id": "tab-stop",
+          "behaviour": "Is reachable with Tab"
         }
       ],
       "status": "stable",
@@ -4459,7 +4636,12 @@
       "purposeFrom": "page",
       "props": [],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "inputs-textarea--docs",
@@ -4615,7 +4797,24 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "portal",
+          "behaviour": "Floats on top of the page"
+        },
+        {
+          "id": "page-keys",
+          "behaviour": "Takes its keys by itself"
+        },
+        {
+          "id": "follow",
+          "behaviour": "Stays attached to its anchor on scroll and resize"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "feedback-toast--docs",
@@ -4701,6 +4900,10 @@
         {
           "id": "role",
           "behaviour": "Says what it is to assistive technology"
+        },
+        {
+          "id": "tab-stop",
+          "behaviour": "Is reachable with Tab"
         }
       ],
       "status": "stable",
@@ -4800,7 +5003,16 @@
           ]
         }
       ],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "primitives-toolbar--docs",
@@ -4834,7 +5046,16 @@
           ]
         }
       ],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "primitives-toolbar--docs",
@@ -4920,7 +5141,16 @@
           ]
         }
       ],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "primitives-toolbar--docs",
@@ -4946,7 +5176,16 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "primitives-toolbar--docs",
@@ -5041,7 +5280,28 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "portal",
+          "behaviour": "Floats on top of the page"
+        },
+        {
+          "id": "press-outside",
+          "behaviour": "Closes on a press outside"
+        },
+        {
+          "id": "page-keys",
+          "behaviour": "Takes its keys by itself"
+        },
+        {
+          "id": "follow",
+          "behaviour": "Stays attached to its anchor on scroll and resize"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "primitives-tooltip--docs",
@@ -5193,6 +5453,22 @@
           "id": "base-ui",
           "behaviour": "Is built on Base UI"
         },
+        {
+          "id": "portal",
+          "behaviour": "Floats on top of the page"
+        },
+        {
+          "id": "press-outside",
+          "behaviour": "Closes on a press outside"
+        },
+        {
+          "id": "page-keys",
+          "behaviour": "Takes its keys by itself"
+        },
+        {
+          "id": "follow",
+          "behaviour": "Stays attached to its anchor on scroll and resize"
+        },
         {
           "id": "role",
           "behaviour": "Says what it is to assistive technology"

package/skill/estiva-ui.md

@@ -32,7 +32,8 @@ and when not to. Most of what gets asked for already exists somewhere.
    refuses a raw element, a rebuilt behaviour or a restyled part, and its error
    names the part to use.
 5. **An exception** carries its reason on the line above it. For the gate:
-   `// @estiva-escape: <reason>`, never `eslint-disable`. For the token lint:
+   `// @estiva-escape(<rule>): <reason>`, naming the one rule it keeps off,
+   never `eslint-disable`. For the token lint:
    `// eslint-disable-next-line <rule> -- @estiva-escape: <reason>`.
 
 ## Gotchas

package/src/AppShell.mdx

@@ -32,7 +32,8 @@ Layout only: no data, no routes.
 ## When not
 
 - Panels *inside* the content — lists beside conversations, side rails —
-  are layout components, not the shell's business.
+  are layout components, not the shell's business. A list beside the
+  content is **ListColumn**.
 - Mixing the pairs (a rail in the solid frame, a sidebar in the floating
   one) is possible but is a new design, not a port — take it to the
   designer first.

package/src/AttachmentCard.tsx

@@ -89,7 +89,7 @@ const formatBytes = (bytes: number) => {
 const typeLabelOf = (name: string) => extensionOf(name).toUpperCase() || 'FILE'
 
 const TILE_CLASSES = 'size-9 rounded-md bg-bg-active flex items-center justify-center shrink-0 text-text-secondary'
-// @estiva-escape: A6 (Katerina, 24 September: record only): a 12px medium name, the text style InputChip's label also uses, not a copy of a part
+// @estiva-escape(no-copied-look): A6 (Katerina, 24 September: record only): a 12px medium name, the text style InputChip's label also uses, not a copy of a part
 const NAME_CLASSES = 'text-caption font-medium text-text-primary truncate'
 const NOTE_CLASSES = 'text-small tracking-wide leading-tight truncate'
 
@@ -359,7 +359,7 @@ export function AttachmentCard({
     const failed = state === 'failed'
     const warning = state === 'warning'
     return (
-      // @estiva-escape: a failed or warning file's strong hairline is AttachmentCard's own state; Card's attention hairlines are the soft ones (UIG-9, Katerina 17 September)
+      // @estiva-escape(no-restyled-part): a failed or warning file's strong hairline is AttachmentCard's own state; Card's attention hairlines are the soft ones (UIG-9, Katerina 17 September)
       <Card
         fill="elevated"
         className={cn('group relative flex items-center gap-2 w-[200px] p-1.5 pr-3', failed ? 'border-error-default' : warning && 'border-warning-default', className)}
@@ -390,7 +390,7 @@ export function AttachmentCard({
         {/* On Base UI's Button, as InputChip's ✕ is (Katerina, 2026-09-14): IconButton is a 24px square
             that fills on hover, and this is Peek's 20px round badge on the card's corner. */}
         {onRemove && (
-          // @estiva-escape: N4 (Katerina, 24 September: record only): the small round button Lightbox's close also draws; a part if a third appears
+          // @estiva-escape(no-copied-look): N4 (Katerina, 24 September: record only): the small round button Lightbox's close also draws; a part if a third appears
           <BaseButton
             type="button"
             aria-label={`Remove ${name}`}
@@ -411,7 +411,7 @@ export function AttachmentCard({
 
   // Fades in with the card's hover or keyboard focus, and keeps its slot when hidden, so revealing it never shifts the row.
   const downloadControl = saving ? (
-    // @estiva-escape: Download shows when its card is pointed at or focused, AttachmentCard's own action; IconButton has no reveal on its card's hover (UIG-9, Katerina 17 September)
+    // @estiva-escape(no-restyled-part): Download shows when its card is pointed at or focused, AttachmentCard's own action; IconButton has no reveal on its card's hover (UIG-9, Katerina 17 September)
     <IconButton
       variant="muted"
       tooltip="Download"
@@ -430,7 +430,7 @@ export function AttachmentCard({
     return (
       // `role="status"`: a plain box may not carry a name (axe, aria-prohibited-attr), and a
       // status says what it is doing — loading — to a reader that cannot see the pulse.
-      // @estiva-escape: the loading pulse is AttachmentCard's own state; Card has no loading state (UIG-9, Katerina 17 September)
+      // @estiva-escape(no-restyled-part): the loading pulse is AttachmentCard's own state; Card has no loading state (UIG-9, Katerina 17 September)
       <Card role="status" fill="inset" aria-busy="true" aria-label={`Loading ${name}`} className={cn('w-[180px] h-28 animate-pulse', className)} {...props}>
         {null}
       </Card>
@@ -439,7 +439,7 @@ export function AttachmentCard({
 
   if (drawnState === 'unreadable') {
     return (
-      // @estiva-escape: a file that could not be read is faded as well as dashed, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
+      // @estiva-escape(no-restyled-part): a file that could not be read is faded as well as dashed, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
       <Card fill="inset" unreadable className={cn('flex items-center gap-2 w-[240px] p-1.5 opacity-70', className)} {...props}>
         <div className={TILE_CLASSES}>
           <TypeIcon name={name} />
@@ -494,7 +494,7 @@ export function AttachmentCard({
     </>
   )
   return (
-    // @estiva-escape: a file that cannot be opened is faded, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
+    // @estiva-escape(no-restyled-part): a file that cannot be opened is faded, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
     <Card fill="inset" hover={address ? 'hairline' : 'none'} className={cn('group flex items-center gap-2 w-[240px] p-1.5 pr-1', !address && 'opacity-70', className)} {...props}>
       {address ? (
         <Link href={address} external variant="plain" className="flex items-center gap-2 min-w-0 flex-1" onClick={(event) => event.stopPropagation()}>

package/src/Button.tsx

@@ -92,7 +92,7 @@ export function Button({
           size === 'default' && (hasLeadingIcon ? 'pl-2 pr-3' : 'px-2'),
           size === 'small' && (hasLeadingIcon ? 'pl-1.5 pr-2' : 'px-1.5'),
           !state.disabled && (variant === 'primary' || variant === 'resolve') && 'bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold',
-          // @estiva-escape: W2 (Katerina, 24 September: leave alone): an outlined button shares four words with Reaction's pill by coincidence
+          // @estiva-escape(no-copied-look): W2 (Katerina, 24 September: leave alone): an outlined button shares four words with Reaction's pill by coincidence
           !state.disabled && variant === 'outlined' && 'border border-border-default hover:bg-bg-hover text-text-primary cursor-pointer',
           !state.disabled && variant === 'muted' && 'hover:bg-bg-hover text-text-primary cursor-pointer',
           !state.disabled && variant === 'destructive' && 'hover:bg-error-muted text-error-default cursor-pointer',

package/src/Card.tsx

@@ -127,14 +127,14 @@ export function Card({
   if (href !== undefined) {
     const { ref, ...anchorProps } = props as ComponentPropsWithRef<'a'>
     return (
-      // @estiva-escape: a card that leads somewhere is drawn on Link's anchor (UIG-27 ruling 1), so this frame is Card's own look, not Link restyled
+      // @estiva-escape(no-copied-look, no-restyled-part): a card that leads somewhere is drawn on Link's anchor (UIG-27 ruling 1), so this frame is Card's own look, not Link restyled
       <Link href={href} variant="plain" ref={ref} className={classes} {...anchorProps}>
         {children}
       </Link>
     )
   }
   return (
-    // @estiva-escape: N6 (Katerina, 24 September: leave alone): a card that cuts its content to its corners shares four words with the palette's window by coincidence
+    // @estiva-escape(no-copied-look): N6 (Katerina, 24 September: leave alone): a card that cuts its content to its corners shares four words with the palette's window by coincidence
     <div className={classes} {...props}>
       {children}
     </div>

package/src/ChipInput.mdx

@@ -32,6 +32,8 @@ leading slots.
 ```tsx
 import { ChipInput } from '@estiva-app/ui'
 
+const directory: { id: string; label: string; picture?: string }[] = people
+
 <ChipInput
   value={chosen}
   onChange={setChosen}

package/src/ChipInput.tsx

@@ -62,7 +62,7 @@ export function InputChip({ label, leading, onRemove, removeLabel, truncate, cla
   return (
     <div className={cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className)}>
       {leading && <span className="flex shrink-0 items-center">{leading}</span>}
-      {/* @estiva-escape: A6 (Katerina, 24 September: record only): a 12px medium label, the text style AttachmentCard's name also uses, not a copy of a part */}
+      {/* @estiva-escape(no-copied-look): A6 (Katerina, 24 September: record only): a 12px medium label, the text style AttachmentCard's name also uses, not a copy of a part */}
       <span className={cn(CHIP_LABEL, truncate && 'min-w-0 truncate')}>{label}</span>
       {/* Base UI's `Button`, as every button in the package is (D6). Base UI
           has no chip of its own — its only chips are `Combobox.Chip` and