@estiva-app/ui 0.18.0 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.18.0",
+  "version": "0.20.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/src/AttachmentCard.tsx

@@ -186,6 +186,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)
       <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)}
@@ -233,6 +234,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 download = onDownload ? (
+    // @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)
     <IconButton
       variant="muted"
       tooltip="Download"
@@ -251,6 +253,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)
       <Card role="status" fill="inset" aria-busy="true" aria-label={`Loading ${name}`} className={cn('w-[180px] h-28 animate-pulse', className)} {...props}>
         {null}
       </Card>
@@ -259,6 +262,7 @@ export function AttachmentCard({
 
   if (state === '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)
       <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} />
@@ -274,7 +278,7 @@ export function AttachmentCard({
   if (image && src) {
     const picture = <img src={src} alt={name} className="w-full h-28 object-cover" />
     return (
-      <Card fill="inset" hover="hairline" className={cn('group relative flex flex-col w-[180px] overflow-hidden', className)} {...props}>
+      <Card fill="inset" hover="hairline" clip className={cn('group relative flex flex-col w-[180px]', className)} {...props}>
         {onOpen ? (
           <BaseButton
             type="button"
@@ -310,9 +314,10 @@ 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)
     <Card fill="inset" hover={href ? 'hairline' : 'none'} className={cn('group flex items-center gap-2 w-[240px] p-1.5 pr-1', !href && 'opacity-70', className)} {...props}>
       {href ? (
-        <Link href={href} external variant="plain" className="flex items-center gap-2 min-w-0 flex-1 cursor-pointer" onClick={(event) => event.stopPropagation()}>
+        <Link href={href} external variant="plain" className="flex items-center gap-2 min-w-0 flex-1" onClick={(event) => event.stopPropagation()}>
           {body}
         </Link>
       ) : (

package/src/Banner.tsx

@@ -57,9 +57,9 @@ export function Banner({ tone, children, onDismiss, dismissLabel = 'Dismiss', cl
   return (
     <div role={role} className={cn('flex items-center gap-3 px-4 py-2 text-body-2', TONE_STYLES[tone], className)}>
       <span className="min-w-0 flex-1">{children}</span>
-      {/* `text-current` so the ✕ takes the tone's colour rather than the
+      {/* `current` so the ✕ takes the tone's colour rather than the
           muted grey an IconButton wears on a neutral surface. */}
-      <IconButton aria-label={dismissLabel} onClick={onDismiss} className="-mr-1 shrink-0 text-current hover:text-current">
+      <IconButton variant="current" aria-label={dismissLabel} onClick={onDismiss} className="-mr-1 shrink-0">
         <IconX size={16} stroke={1.5} />
       </IconButton>
     </div>

package/src/Breadcrumb.tsx

@@ -91,10 +91,15 @@ export function Breadcrumb({ items, className }: BreadcrumbProps) {
         const crumb = item.href ? (
           // `plain` adds no look of its own: a crumb keeps the trail's size and
           // tone, and brightens on hover. The package's own Link, so a trail
-          // follows whatever a link learns to do (UIG-5).
-          <Link ref={setLabelRef} variant="plain" href={item.href} onClick={item.onClick} className={cn(text, 'hover:text-text-primary')}>
-            {item.label}
-          </Link>
+          // follows whatever a link learns to do (UIG-5). The size and tone are
+          // on a box around it, which the link takes them from, rather than
+          // pushed into it (UIG-9); the link is still the one element that
+          // truncates and is measured.
+          <span className={cn('flex min-w-0', item.mono && 'shrink-0 font-mono text-caption', tone, 'hover:text-text-primary')}>
+            <Link ref={setLabelRef} variant="plain" truncate href={item.href} onClick={item.onClick}>
+              {item.label}
+            </Link>
+          </span>
         ) : (
           <span ref={setLabelRef} className={text} aria-current={last ? 'page' : undefined}>
             {item.label}

package/src/Button.mdx

@@ -61,6 +61,13 @@ import { IconPlus } from '@tabler/icons-react'
   wrapper — what a caller gets is the `<button>`, and a `Menu.Trigger` or
   a `Dialog.Close` can be it.
 
+- `variant="resolve"` is `primary` in every theme but Signal, where it is
+  outlined at rest and green when pointed at — the Resolve button. `IconButton`
+  has the same look.
+- **Placed from outside, never restyled.** `className` takes space, size,
+  flex and grid, and position; a colour, a text size, a border, a corner or a
+  shadow is refused by the lint (`estiva/no-restyled-part`, UIG-9).
+
 ## Keys
 
 | Key | Does |

package/src/Button.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
   component: Button,
   args: { children: 'Button', variant: 'muted', size: 'default', disabled: false },
   argTypes: {
-    variant: { control: 'inline-radio', options: ['primary', 'outlined', 'muted', 'destructive'] },
+    variant: { control: 'inline-radio', options: ['primary', 'outlined', 'muted', 'destructive', 'resolve'] },
     size: { control: 'inline-radio', options: ['default', 'small'] },
     leadingIcon: { control: false },
   },
@@ -83,3 +83,6 @@ export const AllVariants: Story = {
     </div>
   ),
 }
+
+/** `resolve`: primary, and in Signal outlined at rest and green when pointed at — Resolve. */
+export const Resolve: Story = { args: { variant: 'resolve', children: 'Resolve' } }

package/src/Button.tsx

@@ -24,7 +24,12 @@ import { TooltipTrigger } from './Tooltip'
  * (Base UI's `focusableWhenDisabled`), and shows the reason as a tooltip on
  * hover. Ship wrote that wrapper by hand six times.
  */
-export type ButtonVariant = 'primary' | 'outlined' | 'muted' | 'destructive'
+/**
+ * `resolve` is `primary` in every theme but Signal, where it is outlined at rest
+ * and green when pointed at — Peek's Resolve (UIG-9, 17 September; Peek passed
+ * it as classes before). `IconButton` has the same look.
+ */
+export type ButtonVariant = 'primary' | 'outlined' | 'muted' | 'destructive' | 'resolve'
 export type ButtonSize = 'default' | 'small'
 
 /**
@@ -86,7 +91,7 @@ export function Button({
           // Extra right padding beside a leading icon, for optical balance.
           size === 'default' && (hasLeadingIcon ? 'pl-2 pr-3' : 'px-2'),
           size === 'small' && (hasLeadingIcon ? 'pl-1.5 pr-2' : 'px-1.5'),
-          !state.disabled && variant === 'primary' && 'bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold',
+          !state.disabled && (variant === 'primary' || variant === 'resolve') && 'bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold',
           !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',
@@ -98,6 +103,9 @@ export function Button({
           // and a prevented `onClick`), so nothing else needs it.
           state.disabled && !disabledReason && 'pointer-events-none',
           state.disabled && variant === 'outlined' && 'border border-border-default',
+          // Disabled too, as it always drew.
+          variant === 'resolve' &&
+            'signal:bg-transparent signal:border signal:border-border-default signal:text-text-primary signal:shadow-none signal:hover:bg-success-muted signal:hover:border-success-outline signal:hover:text-success-default signal:transition-colors',
           className,
         )
       }

package/src/Card.mdx

@@ -69,6 +69,13 @@ import { Card } from '@estiva-app/ui'
   state: set it when the pointer enters, and clear it when the pointer leaves
   and nothing of the card's is open.
 
+- `clip` cuts what is inside to the card's rounded corners — a strip or a
+  picture that runs edge to edge. Without it their square corners show.
+- **Placed from outside, never restyled.** `className` takes space, size,
+  flex and grid, and position; a colour, a text size, a border, a corner or a
+  shadow is refused by the lint (`estiva/no-restyled-part`, UIG-9). What is inside the card is yours: its padding and its words go on
+  your own element inside.
+
 ## Props
 
 <Controls of={CardStories.Surface} />

package/src/Card.stories.tsx

@@ -110,3 +110,14 @@ export const AllFills: Story = {
     </div>
   ),
 }
+
+/** `clip`: a strip that runs edge to edge is cut to the card's rounded corners. */
+export const Clip: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Card clip className="flex w-[240px] flex-col">
+      <div className="flex h-6 items-center bg-bg-inset px-2 text-caption text-text-primary">Huddle</div>
+      <div className="p-3 text-body-2 text-text-primary">What the card is about.</div>
+    </Card>
+  ),
+}

package/src/Card.tsx

@@ -80,6 +80,11 @@ export interface CardProps extends ComponentPropsWithRef<'div'> {
   attention?: CardAttention
   /** It stands for something that could not be read: the hairline is dashed. */
   unreadable?: boolean
+  /**
+   * What is inside is cut to the card's rounded corners: a strip or a picture that
+   * runs edge to edge (UIG-9, 17 September; the apps passed `overflow-hidden`).
+   */
+  clip?: boolean
   children: ReactNode
 }
 
@@ -93,6 +98,7 @@ export function Card({
   active = false,
   attention,
   unreadable = false,
+  clip = false,
   className,
   children,
   ...props
@@ -114,12 +120,14 @@ export function Card({
     active && 'bg-bg-selected border-accent-primary',
     !active && attention && ATTENTION_CLASSES[attention],
     unreadable && 'border-dashed',
+    clip && 'overflow-hidden',
     href && 'block',
     className,
   )
   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
       <Link href={href} variant="plain" ref={ref} className={classes} {...anchorProps}>
         {children}
       </Link>

package/src/Checkbox.mdx

@@ -27,9 +27,18 @@ the parent owns the state.
 
 <Canvas of={CheckboxStories.WithLabel} />
 
+- A list you tick several from, where the whole row is the target: pass
+  **`row`**, with `label` and, if the row has one, a `leading` picture. The
+  box sits at the end, and the row fills on hover and while checked.
+
+<Canvas of={CheckboxStories.Row} />
+
 ## When not
 
 - One choice out of several → **Select** (a value) or **Tabs** (a view).
+- A row drawn by hand with `role="option"` and a Checkbox picture inside it: it
+  tells a screen reader "an option in a list" where there is no list. That is
+  `row`.
 - Inside a **Menu** — a checkbox inside a `menuitem` is invalid HTML;
   a checkable list lives in a DialogShell.
 
@@ -56,6 +65,16 @@ import { Checkbox } from '@estiva-app/ui'
   the box. When disabled, only the box shows it; the words keep their colour
   and lose the pointer. It is a field of its own, so it does not go inside a
   **Field**.
+- With `row` it is the same `Field`, its `Field.Label` the whole row:
+  `leading`, 12px, the words in `body-2` (cut off with an ellipsis when too
+  long), the box at the end; 40px tall, 12px in from each side, 8px corners.
+  It needs `onChange`: without one, `row` is ignored. Put the rows in a
+  column with `gap-0.5`.
+
+```tsx
+<Checkbox row leading={<IconSquareRounded size={16} stroke={1.5} />} label="Item one" checked={on} onChange={setOn} />
+```
+
 - Inside a busy **Form** it is disabled, and looks it.
 - It does not move when it toggles: the tick is always in the box, hidden
   when unchecked, so both states hang on a line of text the same way.
@@ -64,7 +83,7 @@ import { Checkbox } from '@estiva-app/ui'
 
 | Key | Does |
 |---|---|
-| Tab | Onto the box. |
+| Tab | Onto the box (in a row too: the row is not a Tab stop of its own). |
 | Space | Toggles it. |
 | Enter | Nothing. As on a native checkbox, Enter is the form's key. |
 

package/src/Checkbox.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { fn } from 'storybook/test'
 import { useState } from 'react'
+import { IconSquareRounded } from '@tabler/icons-react'
 import { Checkbox } from './Checkbox'
 
 const meta = {
@@ -32,6 +33,49 @@ export const WithLabel: Story = {
 /** Disabled with words: only the box shows it; the words keep their colour. */
 export const WithLabelDisabled: Story = { args: { label: 'Label', 'aria-label': undefined, disabled: true } }
 
+/**
+ * A list you tick several from: each row is the target — a picture, the words,
+ * the box at the end — and fills on hover and while checked.
+ */
+export const Row: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [ticked, setTicked] = useState(new Set(['Item two']))
+    const toggle = (item: string) =>
+      setTicked((prev) => {
+        const next = new Set(prev)
+        if (next.has(item)) next.delete(item)
+        else next.add(item)
+        return next
+      })
+    return (
+      <div className="flex w-80 flex-col gap-0.5">
+        {['Item one', 'Item two', 'Item three'].map((item) => (
+          <Checkbox
+            key={item}
+            row
+            leading={<IconSquareRounded size={16} stroke={1.5} />}
+            label={item}
+            checked={ticked.has(item)}
+            onChange={() => toggle(item)}
+          />
+        ))}
+      </div>
+    )
+  },
+}
+
+/** A row that cannot be changed: the box shows it, and the row neither fills nor points. */
+export const RowDisabled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-80 flex-col gap-0.5">
+      <Checkbox row disabled leading={<IconSquareRounded size={16} stroke={1.5} />} label="Item one" checked onChange={() => {}} />
+      <Checkbox row disabled leading={<IconSquareRounded size={16} stroke={1.5} />} label="Item two" checked={false} onChange={() => {}} />
+    </div>
+  ),
+}
+
 /** Controlled, as always — the parent owns the state. */
 export const Toggles: Story = {
   parameters: { controls: { disable: true } },

package/src/Checkbox.test.tsx

@@ -124,4 +124,67 @@ describe('Checkbox', () => {
       expect(screen.getByText('Label')).not.toBeNull()
     })
   })
+
+  describe('with row', () => {
+    const picture = <svg data-testid="picture" />
+
+    it('is named by its words, and a click anywhere on the row toggles it once', async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<Checkbox row leading={picture} checked={false} onChange={onChange} label="Item one" />)
+      const box = screen.getByRole('checkbox', { name: 'Item one' })
+      await user.click(screen.getByText('Item one'))
+      await user.click(screen.getByTestId('picture'))
+      await user.click(box)
+      expect(onChange).toHaveBeenCalledTimes(3)
+      expect(onChange).toHaveBeenNthCalledWith(1, true)
+    })
+
+    it('draws the picture, the words, then the box, in one row', () => {
+      const { container } = render(<Checkbox row leading={picture} checked={false} onChange={() => {}} label="Item one" />)
+      const children = [...(container.querySelector('label')?.children ?? [])]
+      expect(children[0]?.getAttribute('data-testid')).toBe('picture')
+      expect(children[1]?.textContent).toBe('Item one')
+      expect(children[2]?.getAttribute('role')).toBe('checkbox')
+      expect(container.querySelector('label')?.className).toContain('h-10')
+    })
+
+    it('fills while checked, and on hover', () => {
+      const { container, rerender } = render(<Checkbox row checked={false} onChange={() => {}} label="Item one" />)
+      const row = () => container.querySelector('label')?.className ?? ''
+      expect(row()).not.toContain('bg-bg-selected')
+      expect(row()).toContain('hover:bg-bg-hover')
+      rerender(<Checkbox row checked onChange={() => {}} label="Item one" />)
+      expect(row()).toContain('bg-bg-selected')
+    })
+
+    it('does nothing when disabled, and neither fills under the pointer nor points', async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      const { container } = render(<Checkbox row disabled checked={false} onChange={onChange} label="Item one" />)
+      await user.click(screen.getByText('Item one'))
+      expect(onChange).not.toHaveBeenCalled()
+      const className = container.querySelector('label')?.className ?? ''
+      expect(className).not.toContain('cursor-pointer')
+      expect(className).not.toContain('hover:bg-bg-hover')
+    })
+
+    it('keeps Space on the box, and adds no Tab stop of its own', async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<Checkbox row checked={false} onChange={onChange} label="Item one" />)
+      await user.tab()
+      expect(document.activeElement).toBe(screen.getByRole('checkbox', { name: 'Item one' }))
+      await user.keyboard(' ')
+      expect(onChange).toHaveBeenCalledWith(true)
+      await user.tab()
+      expect(document.activeElement).toBe(document.body)
+    })
+
+    it('is ignored with no onChange', () => {
+      const { container } = render(<Checkbox row checked label="Item one" />)
+      expect(container.querySelector('label')).toBeNull()
+      expect(screen.queryByRole('checkbox')).toBeNull()
+    })
+  })
 })

package/src/Checkbox.tsx

@@ -1,6 +1,7 @@
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox'
 import { Field as BaseField } from '@base-ui/react/field'
 import { IconCheck } from '@tabler/icons-react'
+import type { ReactNode } from 'react'
 import { cn } from './cn'
 import { useFormBusy } from './formBusy'
 
@@ -33,6 +34,12 @@ import { useFormBusy } from './formBusy'
  * Read state panel's, where it was written by hand (UIG-7, 16 September). The
  * words keep their colour when the box is disabled (Katerina: "no need").
  *
+ * With `row`, the whole row is the target: an optional `leading` picture, the
+ * words, the box at the end, and the row fills on hover and while checked — a
+ * list you tick several from. The class list is Peek's "Add to Open work" rows,
+ * which drew it by hand as a `role="option"` in a list that was not one (UIG-8,
+ * Katerina's pick B, 16 September: the same pixels, on the package part).
+ *
  * Inside a busy `Form` it is disabled, and looks it (`formBusy.ts`).
  */
 export interface CheckboxProps {
@@ -44,6 +51,14 @@ export interface CheckboxProps {
    * they name it, so no `aria-label` is needed. `className` stays on the box.
    */
   label?: string
+  /**
+   * The whole row is the target: `leading`, then the words, then the box at
+   * the end; the row fills on hover and while checked. For a list you tick
+   * several from. Needs `label` and `onChange`; without `onChange` it is ignored.
+   */
+  row?: boolean
+  /** In a `row`, a picture before the words: an icon, a status. */
+  leading?: ReactNode
   'aria-label'?: string
   /** Set by a `Field` with `required`; a caller inside one owes nothing. */
   'aria-required'?: boolean | 'true' | 'false'
@@ -65,7 +80,9 @@ const tickClasses = (checked: boolean) => cn('flex', !checked && 'invisible')
 
 const WORDS_CLASSES = 'text-body-2 text-text-primary'
 
-export function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, className, ...aria }: CheckboxProps) {
+const ROW_CLASSES = 'flex shrink-0 items-center gap-3 h-10 px-3 rounded-lg transition-colors'
+
+export function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, row, leading, className, ...aria }: CheckboxProps) {
   const formBusy = useFormBusy()
   const disabled = ownDisabled || formBusy
   if (!onChange) {
@@ -101,6 +118,18 @@ export function Checkbox({ checked, onChange, disabled: ownDisabled = false, lab
     </BaseCheckbox.Root>
   )
   if (label === undefined) return box
+  if (row) {
+    return (
+      <BaseField.Root disabled={disabled}>
+        {/* No fill under the pointer, and no pointer, over a row that toggles nothing. */}
+        <BaseField.Label className={cn(ROW_CLASSES, checked && 'bg-bg-selected', !disabled && 'cursor-pointer hover:bg-bg-hover')}>
+          {leading}
+          <span className={cn('flex-1 min-w-0 truncate', WORDS_CLASSES)}>{label}</span>
+          {box}
+        </BaseField.Label>
+      </BaseField.Root>
+    )
+  }
   return (
     <BaseField.Root disabled={disabled}>
       {/* No pointer over words that toggle nothing. */}

package/src/CommandPalette.tsx

@@ -395,7 +395,7 @@ export function CommandPaletteSearch({ query, onQueryChange, placeholder, groups
               {/* A heading labels the rows, it is not one of them: read
                   secondary, as in a menu (MenuSection). */}
               <Autocomplete.GroupLabel className="flex h-7 shrink-0 items-center px-3">
-                <SectionLabel className="text-text-secondary">{group.value}</SectionLabel>
+                <SectionLabel tone="secondary">{group.value}</SectionLabel>
               </Autocomplete.GroupLabel>
               <Autocomplete.Collection>
                 {(row: CommandPaletteRow) => (

package/src/ConfirmDialog.tsx

@@ -43,7 +43,6 @@ export function ConfirmDialog({ title, children, confirmLabel, destructive = fal
       alert
       title={title}
       onClose={onClose}
-      bodyClassName="flex flex-col gap-3 text-body-2 text-text-primary"
       footer={
         <>
           <Button variant="muted" onClick={onClose} disabled={busy}>
@@ -55,7 +54,8 @@ export function ConfirmDialog({ title, children, confirmLabel, destructive = fal
         </>
       }
     >
-      {children}
+      {/* The words' look on a box of the dialog's own, not pushed into DialogShell's body (UIG-9). */}
+      <div className="flex flex-col gap-3 text-body-2 text-text-primary">{children}</div>
     </DialogShell>
   )
 }

package/src/DialogShell.tsx

@@ -147,13 +147,12 @@ export function DialogShell({ title, onClose, headerContent, footer, children, b
                 the caller's layout go on the content, so the bar is drawn over
                 the padding rather than beside it. */}
             {bodyMaxHeight ? (
-              <ScrollArea
-                className={cn(footer != null && 'border-b border-border-subtle')}
-                viewportClassName={bodyMaxHeight}
-                contentClassName={cn('pl-5 pr-4 py-4', bodyClassName)}
-              >
-                {children}
-              </ScrollArea>
+              // The line above the footer on a box of the shell's own, not pushed into ScrollArea (UIG-9).
+              <div className={cn(footer != null && 'border-b border-border-subtle')}>
+                <ScrollArea viewportClassName={bodyMaxHeight} contentClassName={cn('pl-5 pr-4 py-4', bodyClassName)}>
+                  {children}
+                </ScrollArea>
+              </div>
             ) : (
               <div className={cn('pl-5 pr-4 py-4', footer != null && 'border-b border-border-subtle', bodyClassName)}>{children}</div>
             )}

package/src/Divider.mdx

@@ -46,6 +46,9 @@ import { Divider } from '@estiva-app/ui'
 <Divider label="New since you last read this" tone="warning" />
 ```
 
+- **Inside a `Menu` or a `Popover` it has no inset**: the hairline runs the
+  width of the rows. The panel tells it so; nothing is passed in.
+
 ## Props
 
 <Controls of={DividerStories.Default} />

package/src/Divider.tsx

@@ -1,6 +1,15 @@
+import { createContext, useContext } from 'react'
 import { Separator } from '@base-ui/react/separator'
 import { cn } from './cn'
 
+/**
+ * Inside a `Menu` or a `Popover` a hairline runs edge to edge of the rows,
+ * with no inset of its own. The two panels used to reach in for it
+ * (`[&>[role=separator]]:mx-0`); they say so through this instead (UIG-9,
+ * 17 September). Not exported: only those two panels set it.
+ */
+export const DividerInPanel = createContext(false)
+
 /**
  * Peek's Divider (2026-08-28): a hairline in `border-subtle`, inset 12px each
  * side. Plus what Ship added: `orientation="vertical"` — the same hairline
@@ -30,13 +39,14 @@ export interface DividerProps {
 }
 
 export function Divider({ orientation = 'horizontal', label, tone = 'default', className }: DividerProps) {
+  const inset = useContext(DividerInPanel) ? 'mx-0' : 'mx-3'
   if (label && orientation === 'horizontal') {
     const line = tone === 'warning' ? 'bg-warning-muted' : 'bg-border-subtle'
     return (
       <Separator
         orientation="horizontal"
         aria-label={label}
-        className={cn('flex shrink-0 items-center gap-2 mx-3', className)}
+        className={cn('flex shrink-0 items-center gap-2', inset, className)}
       >
         <span aria-hidden="true" className={cn('h-px flex-1', line)} />
         <span className={cn('shrink-0 text-caption', tone === 'warning' ? 'text-warning-default' : 'text-text-muted')}>{label}</span>
@@ -51,7 +61,7 @@ export function Divider({ orientation = 'horizontal', label, tone = 'default', c
       // column shrinks to nothing, and a hairline that renders 0px tall is a
       // hairline nobody can see — Peek's `/` menu had been drawing two of
       // them, measured 0px, since it was built (2026-09-05).
-      className={cn('shrink-0 bg-border-subtle', orientation === 'horizontal' ? 'h-px mx-3' : 'w-px self-stretch', className)}
+      className={cn('shrink-0 bg-border-subtle', orientation === 'horizontal' ? cn('h-px', inset) : 'w-px self-stretch', className)}
     />
   )
 }

package/src/EditableText.mdx

@@ -50,6 +50,11 @@ import { EditableText } from '@estiva-app/ui'
   raw references, rendered richer when read) without losing the original
   on commit.
 
+- **Its text size is where it sits**, like `Person`'s: put `text-h2` on your own
+  element around it, and the text and the field both take it (a field inherits
+  the page's font). `className` places it — `-mx-2` to line its text up with
+  a header's inset — and a size passed there is refused by the lint (UIG-9).
+
 ## Keys
 
 | Input | What happens |

package/src/IconButton.mdx

@@ -40,6 +40,15 @@ import { IconPencil } from '@tabler/icons-react'
   control. The `tooltip` shows sighted hover users the same word; it does
   not replace the label.
 - The icon is 16px at stroke 1.5.
+- `variant="current"` takes the colour of what it sits in — the ✕ on a
+  `Banner` wears the banner's tone. `variant="resolve"` is `muted` that turns
+  green when pointed at in Signal: Resolve, wherever it appears.
+- `pressed` is a toggle that is on — Bold while the selection is bold: the
+  active fill, and `aria-pressed`. A `ToolbarButton` takes it too.
+- `glow` lights it in Signal — the send arrow while there is something to send.
+- **Placed from outside, never restyled.** `className` takes space, size,
+  flex and grid, and position; a colour, a text size, a border, a corner or a
+  shadow is refused by the lint (`estiva/no-restyled-part`, UIG-9).
 - `type` defaults to `"button"`; it is a native `<button>` on Base UI's
   Button, and every native prop passes through.
 - `disabledReason="Read only"` disables it, keeps it reachable by Tab,

package/src/IconButton.stories.tsx

@@ -8,7 +8,7 @@ const meta = {
   // An icon-only button owes its name; axe's button-name rule fails without it.
   args: { variant: 'muted', disabled: false, 'aria-label': 'Settings', children: <IconSettings className="size-4" stroke={1.5} /> },
   argTypes: {
-    variant: { control: 'inline-radio', options: ['muted', 'outlined', 'primary'] },
+    variant: { control: 'inline-radio', options: ['muted', 'outlined', 'primary', 'current', 'resolve'] },
     tooltipPlacement: { control: 'inline-radio', options: ['top', 'bottom'] },
     children: { control: false },
   },
@@ -63,3 +63,12 @@ export const InATallRow: Story = {
     </div>
   ),
 }
+
+/** `resolve`: muted, and green when pointed at in Signal — Resolve. (`current` takes the colour it sits in: see Banner's ✕.) */
+export const Resolve: Story = { args: { variant: 'resolve', 'aria-label': 'Resolve', tooltip: 'Resolve' } }
+
+/** `pressed`: on — the active fill and `aria-pressed`, like Bold while the selection is bold. */
+export const Pressed: Story = { args: { pressed: true, 'aria-label': 'Bold' } }
+
+/** `glow`: Signal's glow, on the send arrow while there is something to send. */
+export const Glow: Story = { args: { variant: 'primary', glow: true, 'aria-label': 'Send' } }