@estiva-app/ui 0.19.0 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.19.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/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' } }

package/src/IconButton.tsx

@@ -14,11 +14,21 @@ import { TooltipTrigger } from './Tooltip'
  * `disabledReason` disables it, keeps it reachable by keyboard, and shows
  * the reason in place of the tooltip — see Button.
  */
-export type IconButtonVariant = 'muted' | 'outlined' | 'primary'
+export type IconButtonVariant = 'muted' | 'outlined' | 'primary' | 'current' | 'resolve'
 
 /** `ComponentPropsWithRef` so a `ref` reaches the element — see Button. */
 export interface IconButtonProps extends ComponentPropsWithRef<'button'> {
+  /**
+   * `current` takes the colour of what it sits in — the ✕ on a `Banner` wears
+   * the banner's tone. `resolve` is `muted` that turns green when pointed at in
+   * Signal, Peek's Resolve (UIG-9, 17 September; before, each app passed these
+   * as classes).
+   */
   variant?: IconButtonVariant
+  /** On, like a Bold button while the selection is bold: the active fill, and `aria-pressed`. */
+  pressed?: boolean
+  /** A glow in Signal — the send arrow while there is something to send. */
+  glow?: boolean
   tooltip?: string
   /** A key hint drawn as the `Kbd` chip inside the tooltip — for a button
    *  whose only other affordance is a keyboard shortcut. */
@@ -33,6 +43,8 @@ export interface IconButtonProps extends ComponentPropsWithRef<'button'> {
 
 export function IconButton({
   variant = 'muted',
+  pressed,
+  glow = false,
   className,
   children,
   disabled,
@@ -65,11 +77,17 @@ export function IconButton({
           // stretched and carries no `self-center` — see the note there.
           'flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 self-center cursor-pointer',
           !state.disabled && variant === 'primary' && 'bg-accent-primary hover:bg-accent-hover text-text-inverse',
-          !state.disabled && variant === 'muted' && 'text-text-secondary hover:bg-bg-hover hover:text-text-primary',
+          !state.disabled && (variant === 'muted' || variant === 'resolve') && 'text-text-secondary hover:bg-bg-hover hover:text-text-primary',
           !state.disabled && variant === 'outlined' && 'border border-border-default hover:bg-bg-hover text-text-secondary',
+          !state.disabled && variant === 'current' && 'hover:bg-bg-hover',
           state.disabled && variant === 'primary' && 'bg-bg-disabled text-text-disabled',
-          state.disabled && variant === 'muted' && 'text-text-disabled',
+          state.disabled && (variant === 'muted' || variant === 'resolve') && 'text-text-disabled',
           state.disabled && variant === 'outlined' && 'border border-border-default text-text-disabled',
+          // Always, disabled too: the colour of where it sits, and Resolve's green.
+          variant === 'current' && 'text-current',
+          variant === 'resolve' && 'signal:hover:bg-success-muted signal:hover:text-success-default',
+          pressed && 'bg-bg-active text-text-primary',
+          glow && 'signal:shadow-glow-accent',
           // `pointer-events-none` only where the button is truly out of reach:
           // with a `disabledReason` the button IS the tooltip's trigger, and a
           // trigger the pointer cannot land on never opens one. Base UI already
@@ -79,6 +97,7 @@ export function IconButton({
           className,
         )
       }
+      aria-pressed={pressed}
       {...props}
     >
       {children}

package/src/IdentityMenu.tsx

@@ -95,7 +95,10 @@ export function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSign
     <>
       <MenuSection label={signedIn ? 'Signed in as' : 'Acting as'}>
         <MenuRow>
-          <Person name={me.name} picture={me.picture} fallback="Anonymous" size={28} className="text-body-2-strong" />
+          {/* A name takes the size of where it sits (UIG-9). */}
+          <div className="flex min-w-0 text-body-2-strong">
+            <Person name={me.name} picture={me.picture} fallback="Anonymous" size={28} />
+          </div>
         </MenuRow>
         <Note>
           {signedIn

package/src/Link.mdx

@@ -54,6 +54,12 @@ import { Link } from '@estiva-app/ui'
   draw the border, the fill and the hover.
 - If your router also exports a `Link`, rename one of them on import.
 
+- `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.
+- `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` (UIG-9).
+
 ## Props
 
 <Controls of={LinkStories.Text} />

package/src/Link.stories.tsx

@@ -100,3 +100,15 @@ export const AllVariants: Story = {
     </div>
   ),
 }
+
+/** `truncate`: a title that is a link, on one line. Its size and colour come from the box around it. */
+export const Truncate: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-[200px] text-body-2 text-text-primary">
+      <Link href="#" variant="quiet" truncate className="block">
+        Assignee avatar and full name is missing in the files panel
+      </Link>
+    </div>
+  ),
+}

package/src/Link.tsx

@@ -41,15 +41,20 @@ export interface LinkProps extends ComponentPropsWithRef<'a'> {
    * noreferrer` so the page it opens cannot reach back into this one.
    */
   external?: boolean
+  /**
+   * One line, cut with an ellipsis when it does not fit — a title that is a link.
+   * Its size and colour still come from the text around it (UIG-9, 17 September).
+   */
+  truncate?: boolean
   children: ReactNode
 }
 
-export function Link({ href, variant = 'text', external = false, className, children, ...props }: LinkProps) {
+export function Link({ href, variant = 'text', external = false, truncate = false, className, children, ...props }: LinkProps) {
   return (
     <a
       href={href}
       {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-      className={cn(VARIANT_CLASSES[variant], className)}
+      className={cn(VARIANT_CLASSES[variant], truncate && 'truncate', className)}
       {...props}
     >
       {children}

package/src/Menu.stories.tsx

@@ -73,7 +73,7 @@ export const WithARow: Story = {
     <MenuPanel className="w-64">
       <MenuRow>
         <span className="min-w-0 flex-1 truncate text-body-2 text-text-primary">Item one</span>
-        <SectionLabel className="text-text-secondary">Label</SectionLabel>
+        <SectionLabel tone="secondary">Label</SectionLabel>
       </MenuRow>
       <Divider className="my-1" />
       <MenuItem label="An action" onClick={() => {}} />

package/src/Menu.test.tsx

@@ -339,8 +339,8 @@ describe('Menu, padding', () => {
     )
     await userEvent.click(screen.getByRole('button', { name: 'Open' }))
     const row = await screen.findByRole('menuitem', { name: 'Item one' })
-    // The scrolling content is the box that carries the separator rule.
-    const content = row.closest('[class*="role=separator"]') as HTMLElement
+    // The scrolling content is the box the rows sit in directly.
+    const content = row.parentElement as HTMLElement
     const classes = content.className.split(/\s+/)
     expect(classes).toContain('p-1')
     expect(classes).not.toContain('p-2')

package/src/Menu.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, type ComponentPropsWithRef, type ReactElemen
 import { IconChevronRight } from '@tabler/icons-react'
 import { Menu as BaseMenu } from '@base-ui/react/menu'
 import { cn } from './cn'
+import { DividerInPanel } from './Divider'
 import { triggerDisabled } from './triggerDisabled'
 import { ScrollArea } from './ScrollArea'
 import { Kbd } from './Kbd'
@@ -241,8 +242,10 @@ export function Menu({ trigger, align = 'left', openOnHover = false, open, onOpe
              * sentence was written at 0.12.6 and the prop was not: a `p-1` on
              * `className` added 4px to these 8px instead of replacing them
              * (PLAN Finding 60). The prop exists now. */}
-            <ScrollArea viewportClassName="max-h-[var(--available-height)]" contentClassName={cn('flex flex-col p-2 [&>[role=separator]]:mx-0', contentClassName)}>
-              <MenuContext.Provider value={{ openOnHover }}>{children}</MenuContext.Provider>
+            <ScrollArea viewportClassName="max-h-[var(--available-height)]" contentClassName={cn('flex flex-col p-2', contentClassName)}>
+              <MenuContext.Provider value={{ openOnHover }}>
+                <DividerInPanel.Provider value={true}>{children}</DividerInPanel.Provider>
+              </MenuContext.Provider>
             </ScrollArea>
           </BaseMenu.Popup>
         </BaseMenu.Positioner>
@@ -561,7 +564,7 @@ export function MenuSection({ label, children, className }: { label: string; chi
   const inMenu = useContext(MenuContext) !== null
   const heading = (
     <div className={cn('flex h-8 items-center px-2', className)}>
-      <SectionLabel className="text-text-secondary">{label}</SectionLabel>
+      <SectionLabel tone="secondary">{label}</SectionLabel>
     </div>
   )
   if (!inMenu) {

package/src/Person.stories.tsx

@@ -26,15 +26,15 @@ export const OwnFallback: Story = {
   parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
 }
 
-/** The text size is the caller's, so face and words are set together. */
+/** The text size is where it sits: the box around it sets the words, `size` sets the face. */
 export const Sizes: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex flex-col items-start gap-3">
-      <Person name="Ana Duarte" size={16} className="text-caption" />
-      <Person name="Ana Duarte" size={20} className="text-body-2" />
-      <Person name="Ravi Mehta" size={22} className="text-body-2" />
-      <Person name="Ravi Mehta" size={28} className="text-body-1" />
+      <div className="flex text-caption"><Person name="Ana Duarte" size={16} /></div>
+      <div className="flex text-body-2"><Person name="Ana Duarte" size={20} /></div>
+      <div className="flex text-body-2"><Person name="Ravi Mehta" size={22} /></div>
+      <div className="flex text-body-1"><Person name="Ravi Mehta" size={28} /></div>
     </div>
   ),
 }

package/src/Popover.test.tsx

@@ -233,8 +233,8 @@ describe('Popover, centred on its anchor', () => {
  * as on 0.12.5.
  */
 describe('Popover, padding', () => {
-  // The scrolling content is the box that carries the separator rule.
-  const contentOf = (child: HTMLElement) => child.closest('[class*="role=separator"]') as HTMLElement
+  // The scrolling content is the box the children sit in directly.
+  const contentOf = (child: HTMLElement) => child.parentElement as HTMLElement
 
   it('pads its content 8px by default', async () => {
     render(

package/src/Popover.tsx

@@ -1,6 +1,7 @@
 import { useMemo, type ReactElement, type ReactNode, type RefObject } from 'react'
 import { Popover as BasePopover } from '@base-ui/react/popover'
 import { cn } from './cn'
+import { DividerInPanel } from './Divider'
 import { triggerDisabled } from './triggerDisabled'
 import { ScrollArea } from './ScrollArea'
 import { MenuPanel } from './Menu'
@@ -200,9 +201,9 @@ export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open
                 — see the props. */}
             <ScrollArea
               viewportClassName={maxHeight ?? 'max-h-[var(--available-height)]'}
-              contentClassName={cn('flex flex-col p-2 [&>[role=separator]]:mx-0', contentClassName)}
+              contentClassName={cn('flex flex-col p-2', contentClassName)}
             >
-              {children}
+              <DividerInPanel.Provider value={true}>{children}</DividerInPanel.Provider>
             </ScrollArea>
           </BasePopover.Popup>
         </BasePopover.Positioner>

package/src/PreviewCard.tsx

@@ -83,7 +83,7 @@ export function PreviewCard({ content, children, side = 'right', delay = OPEN_DE
             className={cn('w-[360px] p-3 outline-none', className)}
             render={<MenuPanel />}
           >
-            <ScrollArea viewportClassName="max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]" contentClassName="flex flex-col gap-3 [&>*]:shrink-0">
+            <ScrollArea viewportClassName="max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]" contentClassName="flex flex-col gap-3">
               {content}
             </ScrollArea>
           </BasePreviewCard.Popup>