@estiva-app/ui 0.33.0 → 0.35.0

package/src/AttachmentCard.tsx

@@ -89,6 +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
 const NAME_CLASSES = 'text-caption font-medium text-text-primary truncate'
 const NOTE_CLASSES = 'text-small tracking-wide leading-tight truncate'
 
@@ -389,6 +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
           <BaseButton
             type="button"
             aria-label={`Remove ${name}`}

package/src/Button.tsx

@@ -92,6 +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
           !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.stories.tsx

@@ -30,10 +30,10 @@ export const Surface: Story = {}
 export const Elevated: Story = {
   args: { fill: 'elevated', className: 'p-2' },
   render: (args) => (
-    <div className="flex w-[300px] flex-col gap-2 rounded-lg border border-border-default bg-bg-surface p-2">
+    <Card className="flex w-[300px] flex-col gap-2 p-2">
       <Card {...args} />
       <Card {...args} children={<Body title="Item two" />} />
-    </div>
+    </Card>
   ),
 }
 

package/src/Card.tsx

@@ -134,6 +134,7 @@ export function Card({
     )
   }
   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
     <div className={classes} {...props}>
       {children}
     </div>

package/src/Chip.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { cn } from './cn'
+import { CHIP_TEXT_CLASSES } from './looks'
 
 /**
  * Peek's Chip (2026-08-28), verbatim: a 20px pill in one of six colour
@@ -44,7 +45,7 @@ export function Chip({ type = 'neutral', label, leadingIcon, trailingIcon, class
         // the screenshot diff caught every descender cut off. `clip` is the
         // one overflow that leaves the other axis visible. A chip with no cap
         // draws exactly as before.
-        <span className="min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap text-chip signal:font-mono signal:text-small signal:font-semibold signal:tracking-wide signal:tabular-nums">{label}</span>
+        <span className={cn('min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide', CHIP_TEXT_CLASSES)}>{label}</span>
       )}
       {trailingIcon && <span className="flex size-3 shrink-0 items-center justify-center">{trailingIcon}</span>}
     </div>

package/src/ChipInput.tsx

@@ -5,6 +5,7 @@ import { IconX } from '@tabler/icons-react'
 import { cn } from './cn'
 import { MenuItem, MenuPanel } from './Menu'
 import { ScrollArea } from './ScrollArea'
+import { BARE_INPUT_CLASSES, FIELD_SHELL_CLASSES } from './looks'
 
 /* The chip's own look, written once: `InputChip` draws it for a caller who
    wants a chip on its own, and `ChipInput` gives the same classes to Base UI's
@@ -61,6 +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 */}
       <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
@@ -244,7 +246,7 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
     >
       {/* The box the chips and the input share. `Combobox.Chips` is what makes
           the two one control for the keyboard; the look is what it always was. */}
-      <Combobox.Chips ref={setBox} className="bg-bg-inset border border-border-default hover:border-border-strong focus-within:border-border-focus focus-within:hover:border-border-focus rounded-lg px-3 py-1.5 flex flex-wrap items-center gap-1.5 transition-colors min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring">
+      <Combobox.Chips ref={setBox} className={cn(FIELD_SHELL_CLASSES, 'focus-within:border-border-focus focus-within:hover:border-border-focus px-3 py-1.5 flex flex-wrap items-center gap-1.5 min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring')}>
         {value.map((option) => (
           <Combobox.Chip key={option.id} className={cn(CHIP_BOX, chipPadding(!!chipLeading, true))}>
             {chipLeading && <span className="flex shrink-0 items-center">{chipLeading(option)}</span>}
@@ -260,7 +262,7 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
           aria-required={aria['aria-required']}
           {...naming}
           onKeyDown={onInputKeyDown}
-          className="flex-1 min-w-[120px] bg-transparent text-body-2 text-text-primary placeholder:text-text-muted outline-none border-none"
+          className={cn('flex-1 min-w-[120px] text-body-2 border-none', BARE_INPUT_CLASSES)}
         />
       </Combobox.Chips>
 

package/src/CommandPalette.tsx

@@ -123,6 +123,7 @@ export function CommandPalette({ open, onOpenChange, label, where, modKey = 'Ctr
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 z-40 bg-scrim" />
         <Dialog.Viewport className="fixed inset-0 z-50 flex items-start justify-center pt-[16vh]">
+          {/* @estiva-escape: A3 (Katerina, 24 September: leave CommandPalette alone): the palette's window keeps its own border */}
           <Dialog.Popup
             ref={popupRef}
             aria-label={label}
@@ -373,6 +374,7 @@ export function CommandPaletteSearch({ query, onQueryChange, placeholder, groups
       <div className="flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5">
         <IconSearch size={16} stroke={1.5} className="shrink-0 text-text-secondary" />
         {chip && <LevelChip chip={chip} onBack={back} />}
+        {/* @estiva-escape: A5 (Katerina, 24 September: leave CommandPalette alone): the palette's search field keeps its own classes */}
         <Autocomplete.Input
           ref={inputRef}
           data-command-palette-field=""

package/src/ContainerHeader.stories.tsx

@@ -2,9 +2,10 @@ import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
 import { IconEdit, IconSortDescending, IconX } from '@tabler/icons-react'
 import { ContainerHeader } from './ContainerHeader'
 import { IconButton } from './IconButton'
+import { Card } from './Card'
 
 // The top of a column: a surface with a hairline, so the bar's own hairline and height can be seen.
-const inColumn: Decorator = (Story) => <div className="w-96 overflow-hidden rounded-lg border border-border-default bg-bg-surface">{Story()}</div>
+const inColumn: Decorator = (Story) => <Card clip className="w-96">{Story()}</Card>
 
 const meta = {
   title: 'Navigation/ContainerHeader',

package/src/DialogShell.tsx

@@ -86,6 +86,7 @@ export function DialogShell({ title, onClose, headerContent, footer, children, b
 
         {/* Dialog */}
         <div className="fixed inset-0 z-50 flex items-center justify-center pointer-events-none">
+          {/* @estiva-escape: A3 (Katerina, 24 September: leave CommandPalette alone): a dialog's window and the palette's are left as they are */}
           <Parts.Popup
             ref={popupRef}
             /*

package/src/Divider.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Divider } from './Divider'
+import { MenuPanel } from './Menu'
+import { Card } from './Card'
 
 /** A hairline in `border-subtle`, inset 12px each side — or standing up between two columns. */
 const meta = {
@@ -13,22 +15,22 @@ type Story = StoryObj<typeof meta>
 /** Between two blocks on the surface. */
 export const Default: Story = {
   render: () => (
-    <div className="w-80 rounded-lg border border-border-default bg-bg-surface py-3">
+    <Card className="w-80 py-3">
       <p className="px-3 pb-2 text-body-2 text-text-primary">Above the divider</p>
       <Divider />
       <p className="px-3 pt-2 text-body-2 text-text-primary">Below the divider</p>
-    </div>
+    </Card>
   ),
 }
 
 /** Inside a menu — on the elevated surface, full width (`mx-0`). */
 export const InAMenu: Story = {
   render: () => (
-    <div className="w-72 rounded-lg border border-border-default bg-bg-elevated p-2 text-body-2 text-text-primary shadow-lg">
-      <div className="px-2 py-1.5">First action</div>
+    <MenuPanel className="w-72">
+      <div className="px-2 py-1.5 text-body-2 text-text-primary">First action</div>
       <Divider className="mx-0 my-2" />
-      <div className="px-2 py-1.5">Second action</div>
-    </div>
+      <div className="px-2 py-1.5 text-body-2 text-text-primary">Second action</div>
+    </MenuPanel>
   ),
 }
 
@@ -49,21 +51,21 @@ export const WithALabel: Story = {
   // the label is muted caption text, 3.78:1 on --bg-surface in signal (AA 4.5:1).
   parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
   render: () => (
-    <div className="w-96 rounded-lg border border-border-default bg-bg-surface py-3 text-body-2 text-text-primary">
+    <Card className="w-96 py-3"><div className="text-body-2 text-text-primary">
       <p className="px-3 pb-2">Yesterday's last message</p>
       <Divider label="Today" />
       <p className="px-3 pt-2">Today's first</p>
-    </div>
+    </div></Card>
   ),
 }
 
 /** Asking for attention: where "new since you last read this" begins. The warning colour, because the accent could not be read on Ship's background. */
 export const Warning: Story = {
   render: () => (
-    <div className="w-96 rounded-lg border border-border-default bg-bg-surface py-3 text-body-2 text-text-primary">
+    <Card className="w-96 py-3"><div className="text-body-2 text-text-primary">
       <p className="px-3 pb-2">Yes — it re-reads the folder union and the archived one lands last.</p>
       <Divider label="New since you last read this" tone="warning" />
       <p className="px-3 pt-2">Same here, from Peek.</p>
-    </div>
+    </div></Card>
   ),
 }

package/src/Lightbox.tsx

@@ -74,6 +74,7 @@ export function Lightbox({ src, alt, onClose, className }: LightboxProps) {
             onClick={(e) => e.stopPropagation()}
             className={cn('max-w-full max-h-full object-contain rounded-lg', className)}
           />
+          {/* @estiva-escape: N4 (Katerina, 24 September: record only): the small round button AttachmentCard's remove also draws; a part if a third appears */}
           <Dialog.Close
             aria-label="Close"
             className="absolute top-4 right-4 size-8 rounded-full bg-bg-elevated border border-border-strong flex items-center justify-center text-text-secondary hover:text-text-primary"

package/src/Link.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Link } from './Link'
+import { Card } from './Card'
 
 const meta = {
   title: 'Navigation/Link',
@@ -52,9 +53,9 @@ export const Plain: Story = {
   args: { variant: 'plain', children: undefined },
   render: (args) => (
     <Link {...args} className="block w-[280px]">
-      <div className="rounded-lg border border-border-default bg-bg-surface p-3 text-body-2 text-text-primary transition-colors hover:border-border-strong">
+      <Card hover="hairline" className="p-3"><div className="text-body-2 text-text-primary">
         Item one
-      </div>
+      </div></Card>
     </Link>
   ),
 }
@@ -92,9 +93,9 @@ export const AllVariants: Story = {
       <div className="flex flex-col gap-1">
         <span className="text-body-2 text-text-secondary">plain —</span>
         <Link href="#" variant="plain" className="block w-[280px]">
-          <div className="rounded-lg border border-border-default bg-bg-surface p-3 text-body-2 text-text-primary transition-colors hover:border-border-strong">
+          <Card hover="hairline" className="p-3"><div className="text-body-2 text-text-primary">
             Item one
-          </div>
+          </div></Card>
         </Link>
       </div>
     </div>

package/src/Menu.tsx

@@ -7,6 +7,7 @@ import { triggerDisabled } from './triggerDisabled'
 import { ScrollArea } from './ScrollArea'
 import { Kbd } from './Kbd'
 import { SectionLabel } from './SectionLabel'
+import { FLOATING_SURFACE_CLASSES } from './looks'
 
 /**
  * THE menu shell (2026-09-01) — extracted once, for every menu in every app.
@@ -94,7 +95,8 @@ export function MenuPanel({ children, className, ...props }: MenuPanelProps) {
   return (
     <div
       className={cn(
-        'flex flex-col rounded-lg border border-border-default bg-bg-elevated p-2 shadow-lg',
+        'flex flex-col p-2',
+        FLOATING_SURFACE_CLASSES,
         /*
          * A divider in a menu runs the width of the rows it separates.
          *

package/src/NavItem.tsx

@@ -28,6 +28,7 @@ export interface NavItemProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'
 
 export function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }: NavItemProps) {
   return (
+    // @estiva-escape: N5 (Katerina, 24 September: record only): a row that fills on hover, as PersonTrigger's row also does
     <a
       href={href}
       aria-current={active ? 'page' : undefined}

package/src/PersonTrigger.tsx

@@ -60,6 +60,7 @@ export function PersonTrigger({ name, picture, fallback, size, open = false, com
     )
   }
   return (
+    // @estiva-escape: N5 (Katerina, 24 September: record only): a row that fills on hover, as NavItem also does
     <BaseButton
       type="button"
       aria-haspopup="menu"

package/src/Reaction.tsx

@@ -1,6 +1,7 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
 import { Toggle } from '@base-ui/react/toggle'
 import { cn } from './cn'
+import { CHIP_TEXT_CLASSES } from './looks'
 
 /**
  * A reaction: an emoji, how many people chose it, and whether you are one of
@@ -62,6 +63,7 @@ export interface ReactionProps extends Omit<ButtonHTMLAttributes<HTMLButtonEleme
 
 export function Reaction({ emoji, count, pressed = false, className, ...props }: ReactionProps) {
   return (
+    // @estiva-escape: W1 (Katerina, 24 September: leave alone): a reaction pill shares four words with a field's box by coincidence
     <Toggle
       // Controlled: a reaction is yours when the data says so, not when the
       // pill was last pressed — a write can fail, and another client can
@@ -94,7 +96,7 @@ export function Reaction({ emoji, count, pressed = false, className, ...props }:
           The old note said it must NEVER be merged; that stopped being true
           when `cn()` was taught the ramp — `chip` is in it, and `cn.test.ts`
           pins that. */}
-      <span className="text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums">
+      <span className={CHIP_TEXT_CLASSES}>
         {count}
       </span>
     </Toggle>

package/src/ReactionPicker.stories.tsx

@@ -6,6 +6,7 @@ import { Reaction } from './Reaction'
 import { ReactionPicker, type ReactionOption } from './ReactionPicker'
 import { Toolbar, ToolbarButton } from './Toolbar'
 import { EmptyState } from './EmptyState'
+import { Card } from './Card'
 
 /**
  * The reactions on offer, to choose one from. **A `Reaction` is the answer;
@@ -52,9 +53,9 @@ export const FromATrigger: Story = {
     const [chosen, setChosen] = useState<string | null>(null)
     return (
       <div className="flex w-[420px] flex-col items-end gap-3">
-        <div className="w-full rounded-lg border border-border-default bg-bg-surface p-3 text-body-2 text-text-primary">
+        <Card className="w-full p-3"><div className="text-body-2 text-text-primary">
           A card. Its actions sit at the corner, and the picker opens above them.
-        </div>
+        </div></Card>
         <Toolbar aria-label="Card actions">
           <ToolbarButton aria-label="Reply" tooltip="Reply">
             <IconMessage2 size={16} stroke={1.5} />

package/src/ScrollArea.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Card } from './Card'
 import { ScrollArea } from './ScrollArea'
 
 /** A region that scrolls without taking width for its scrollbar. */
@@ -17,7 +18,7 @@ const rows = Array.from({ length: 40 }, (_, i) => `Row ${i + 1}`)
 /** A list taller than its box. The bar shows while the pointer is over it or the list is moving. */
 export const Default: Story = {
   render: () => (
-    <div className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <Card className="h-[240px] w-[280px]">
     <ScrollArea className="h-full" contentClassName="p-2">
       <ul className="flex flex-col gap-px">
         {rows.map((row) => (
@@ -27,14 +28,14 @@ export const Default: Story = {
         ))}
       </ul>
     </ScrollArea>
-    </div>
+    </Card>
   ),
 }
 
 /** Rows that stick to the top as the list moves under them. The bar stays above them. */
 export const StickyHeadings: Story = {
   render: () => (
-    <div className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <Card className="h-[240px] w-[280px]">
     <ScrollArea className="h-full">
       {['Group one', 'Group two'].map((group) => (
         <div key={group} className="flex flex-col">
@@ -47,14 +48,14 @@ export const StickyHeadings: Story = {
         </div>
       ))}
     </ScrollArea>
-    </div>
+    </Card>
   ),
 }
 
 /** Nothing to scroll: the region draws exactly as a plain box would, and no bar. */
 export const Fits: Story = {
   render: () => (
-    <div className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <Card className="h-[240px] w-[280px]">
     <ScrollArea className="h-full" contentClassName="p-2">
       <ul className="flex flex-col gap-px">
         {rows.slice(0, 4).map((row) => (
@@ -64,14 +65,14 @@ export const Fits: Story = {
         ))}
       </ul>
     </ScrollArea>
-    </div>
+    </Card>
   ),
 }
 
 /** A row wider than its box — a table, a board. */
 export const Horizontal: Story = {
   render: () => (
-    <div className="w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <Card className="w-[280px]">
     <ScrollArea orientation="horizontal" contentClassName="p-2">
       <div className="flex w-max gap-2">
         {rows.slice(0, 12).map((row) => (
@@ -81,14 +82,14 @@ export const Horizontal: Story = {
         ))}
       </div>
     </ScrollArea>
-    </div>
+    </Card>
   ),
 }
 
 /** Both ways, with the corner where the two bars would meet. */
 export const Both: Story = {
   render: () => (
-    <div className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <Card className="h-[240px] w-[280px]">
     <ScrollArea orientation="both" className="h-full" contentClassName="p-2">
       <div className="flex w-max flex-col gap-px">
         {rows.map((row) => (
@@ -98,14 +99,14 @@ export const Both: Story = {
         ))}
       </div>
     </ScrollArea>
-    </div>
+    </Card>
   ),
 }
 
 /** A sideways region inside a scrolling page — a table in a content column. A wheel down over it moves the page; a swipe sideways moves the region. */
 export const SidewaysInsideAPage: Story = {
   render: () => (
-    <div className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <Card className="h-[240px] w-[280px]">
     <ScrollArea className="h-full" contentClassName="p-2">
       <div className="flex flex-col gap-px">
         {rows.slice(0, 3).map((row) => (
@@ -131,6 +132,6 @@ export const SidewaysInsideAPage: Story = {
         ))}
       </div>
     </ScrollArea>
-    </div>
+    </Card>
   ),
 }

package/src/SearchInput.tsx

@@ -2,6 +2,7 @@ import { type InputHTMLAttributes } from 'react'
 import { Input } from '@base-ui/react/input'
 import { cn } from './cn'
 import { Kbd } from './Kbd'
+import { BARE_INPUT_CLASSES, FIELD_SHELL_CLASSES } from './looks'
 
 /**
  * Peek's SearchInput (2026-09-01), verbatim: an inset field with a hairline
@@ -31,16 +32,16 @@ export function SearchInput({ shortcut, className, placeholder = 'Search…', ..
   return (
     <div
       className={cn(
-        'flex gap-2 items-center px-3 py-2 rounded-lg',
-        'bg-bg-inset border border-border-default',
+        'flex gap-2 items-center px-3 py-2',
+        FIELD_SHELL_CLASSES,
         // Hover strengthens the border as it does on every other field (16 September). Here that
         // is also the focus look, which was the stronger border before hover existed.
-        'hover:border-border-strong focus-within:border-border-strong transition-colors',
+        'focus-within:border-border-strong',
         className,
       )}
     >
       <Input
-        className="flex-1 min-w-0 bg-transparent text-input-value text-text-primary placeholder:text-text-muted outline-none"
+        className={cn('flex-1 min-w-0 text-input-value', BARE_INPUT_CLASSES)}
         placeholder={placeholder}
         {...props}
       />

package/src/SectionLabel.mdx

@@ -38,11 +38,13 @@ import { SectionLabel } from '@estiva-app/ui'
 
 It is a bare span: the caller owns the row it sits in and the spacing
 around it. Read it `tone="secondary"` where it labels rather than leads — menu
-headings and the command palette's groups do. A colour
+headings and the command palette's groups do. `tone="muted"` where it marks a
+place in a list rather than heading it — a date between messages. `truncate`
+cuts a long label short with an ellipsis where its row has no room. A colour
 passed in `className` is refused by the lint.
 
 - Import it — never copy its classes. A copied class list drifts the first time
-  the label changes.
+  the label changes, and the lint warns on one (`estiva/no-copied-look`).
 
 ## What it owns
 

package/src/SectionLabel.stories.tsx

@@ -32,3 +32,16 @@ export const HeadingAList: Story = {
 
 /** `tone="secondary"`: a heading inside a menu or a list of results labels the rows, it is not one of them. */
 export const Secondary: Story = { args: { tone: 'secondary', children: 'Section' } }
+
+/** `tone="muted"`: a label that marks a place in a list rather than heading it, a date between messages. */
+export const Muted: Story = { args: { tone: 'muted', children: 'Yesterday' } }
+
+/** `truncate`: a long label in a narrow row ends in an ellipsis instead of spilling. */
+export const Truncated: Story = {
+  args: { truncate: true, children: 'Promoted to a topic whose title is far longer than its row' },
+  render: (args) => (
+    <div className="flex w-48">
+      <SectionLabel {...args} />
+    </div>
+  ),
+}

package/src/SectionLabel.tsx

@@ -13,17 +13,34 @@ import { cn } from './cn'
  * the rows, it is not one of them (Katerina, 2026-09-01). `MenuSection` and
  * `CommandPalette` passed it as a class before UIG-9 (17 September).
  *
+ * `tone="muted"` is a label that marks a place in a list rather than heading
+ * it: a date between messages (Peek's `DateDivider`, UIG-25). `truncate` cuts a
+ * long label short with an ellipsis where its row has no room, as a date line in
+ * a narrow panel must.
+ *
  * Deliberately NOT the same thing as Property's stacked field label (the
  * 9px `menu`-token one): they were merged for a day and unmerged by
  * Katerina's ruling (2026-09-01) — a section title and a field label are
  * different voices, at different sizes, on purpose.
  */
-export function SectionLabel({ children, tone = 'primary', className }: { children: ReactNode; tone?: 'primary' | 'secondary'; className?: string }) {
+export function SectionLabel({
+  children,
+  tone = 'primary',
+  truncate = false,
+  className,
+}: {
+  children: ReactNode
+  tone?: 'primary' | 'secondary' | 'muted'
+  /** Cut a long label short with an ellipsis instead of letting it wrap or spill. */
+  truncate?: boolean
+  className?: string
+}) {
   return (
     <span
       className={cn(
         'text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest',
-        tone === 'secondary' ? 'text-text-secondary' : 'text-text-primary',
+        tone === 'secondary' ? 'text-text-secondary' : tone === 'muted' ? 'text-text-muted' : 'text-text-primary',
+        truncate && 'min-w-0 truncate',
         className,
       )}
     >

package/src/Select.tsx

@@ -5,6 +5,7 @@ import { cn } from './cn'
 import { ScrollArea } from './ScrollArea'
 import { MenuPanel, menuItemClassName } from './Menu'
 import { TooltipTrigger } from './Tooltip'
+import { FIELD_DISABLED_CLASSES, FIELD_SIZE_CLASSES, FIELD_TEXT_CLASSES } from './looks'
 
 /**
  * Peek's Select (2026-08-28), verbatim, plus what Ship added: an option may
@@ -73,6 +74,7 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
   // a native `disabled` button, which Tab skips and a tooltip cannot open on.
   const held = Boolean(disabledReason)
   const trigger = (
+      // @estiva-escape: N1 (Katerina, 24 September: record only): Select's box drops the hover while held, so it cannot take FIELD_SHELL_CLASSES as it is
       <BaseSelect.Trigger
         aria-label={ariaLabel}
         aria-required={aria['aria-required']}
@@ -87,17 +89,17 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
            * the cap. Full-width callers are unaffected.
            */
           'flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left',
-          'border-border-default text-text-primary outline-none transition-colors',
+          'border-border-default outline-none transition-colors',
+          FIELD_TEXT_CLASSES,
           // 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.
           !held && 'hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus',
-          'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',
+          FIELD_DISABLED_CLASSES,
           held && 'cursor-not-allowed bg-bg-disabled text-text-disabled',
           'focus-visible:border-border-focus aria-expanded:border-border-focus',
           'signal:transition-shadow signal:focus-visible:shadow-focus-ring',
-          size === 'default' && 'px-3 py-2 text-input-value',
-          size === 'small' && 'h-6 min-h-6 px-2 text-caption',
+          FIELD_SIZE_CLASSES[size],
           className,
         )}
       >

package/src/TextInput.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, type InputHTMLAttributes } from 'react'
 import { Input } from '@base-ui/react/input'
 import { cn } from './cn'
+import { FIELD_BOX_CLASSES, FIELD_DISABLED_CLASSES, FIELD_FOCUS_RING_CLASSES, FIELD_SIZE_CLASSES, FIELD_TEXT_CLASSES } from './looks'
 
 /**
  * Peek's TextInput (2026-08-28): the inset field with a 8px radius, 14px
@@ -35,14 +36,13 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
         // The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
         // "aren't there hover states in text input and text area?"). Focus comes after hover in
         // Tailwind's order, so a focused field keeps the focus border under the pointer.
-        'bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg',
+        FIELD_BOX_CLASSES,
         // The small size is the small Select's trigger, class for class.
-        size === 'default' && 'px-3 py-2 text-input-value',
-        size === 'small' && 'h-6 min-h-6 px-2 text-caption',
-        'text-text-primary placeholder:text-text-muted',
+        FIELD_SIZE_CLASSES[size],
+        FIELD_TEXT_CLASSES,
         'outline-none transition-colors',
-        'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',
-        'signal:transition-shadow signal:focus:shadow-focus-ring',
+        FIELD_DISABLED_CLASSES,
+        FIELD_FOCUS_RING_CLASSES,
         className,
       )}
       {...props}

package/src/Textarea.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, type TextareaHTMLAttributes } from 'react'
 import { Field as BaseField } from '@base-ui/react/field'
 import { cn } from './cn'
+import { FIELD_BOX_CLASSES, FIELD_DISABLED_CLASSES, FIELD_FOCUS_RING_CLASSES, FIELD_SIZE_CLASSES, FIELD_TEXT_CLASSES } from './looks'
 
 /**
  * Peek's Textarea (2026-08-28), verbatim: TextInput's look on a textarea
@@ -24,11 +25,12 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
         // The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
         // "aren't there hover states in text input and text area?"). Focus comes after hover in
         // Tailwind's order, so a focused field keeps the focus border under the pointer.
-        'bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg px-3 py-2',
-        'text-input-value text-text-primary placeholder:text-text-muted',
+        FIELD_BOX_CLASSES,
+        FIELD_SIZE_CLASSES.default,
+        FIELD_TEXT_CLASSES,
         'resize-none outline-none transition-colors',
-        'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',
-        'signal:transition-shadow signal:focus:shadow-focus-ring',
+        FIELD_DISABLED_CLASSES,
+        FIELD_FOCUS_RING_CLASSES,
         className,
       )}
       {...(props as object)}