@estiva-app/ui 0.24.0 → 0.25.0

package/src/ListColumn.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react'
+import { cn } from './cn'
+import { ContainerHeader } from './ContainerHeader'
+import { ErrorBoundary } from './ErrorBoundary'
+import { ScrollArea } from './ScrollArea'
+
+/**
+ * The list column of a page: the column beside the page's main area that lists
+ * what it can open — 290px wide, a line on its right, its name in a
+ * `ContainerHeader`, and a list under it that scrolls.
+ *
+ * Moved in from Peek as it looks (UIG-14, N9), where five pages drew it by
+ * hand and each carried the same numbers: the frame's 290px and its line, and
+ * the list's steps — 16px under the header, 12px above the bottom, rows 12px
+ * in from each side and 2px apart. The numbers live here now, once. One
+ * spacing for every list (Katerina, D5): a list of groups heads each with a
+ * `CollapsibleSection` or a `SectionHeader`.
+ *
+ * It scrolls its rows itself. A list column that did not was the first of the
+ * eight mistakes on the page that led to UIG-15: the frame's card clips, so a
+ * list that grew past the fold was simply cut off, with nothing to scroll.
+ *
+ * It keeps a crash inside itself (D1, D3): if its rows, its actions or the row
+ * above break, the column keeps its title and shows `ErrorBoundary`'s message
+ * in the middle of the room the list had, and the rest of the page keeps working.
+ *
+ * `collapsed` closes it with the rail, as Peek's did: it narrows to nothing
+ * and fades, in 300ms. What opens and closes the rail stays the app's.
+ */
+export interface ListColumnProps {
+  /** The column's name, in its header. A node for a title that is more than words. */
+  title: ReactNode
+  /** A chevron after the title, as `ContainerHeader` draws it. */
+  chevron?: boolean
+  /** The column's own actions, at the header's right — a `Toolbar` of `ToolbarButton`s, or one `IconButton`. */
+  actions?: ReactNode
+  /** A row between the header and the list that stays put while the list scrolls — a field that adds to the list. */
+  above?: ReactNode
+  /** Closes the column with the rail: it narrows to nothing and fades. */
+  collapsed?: boolean
+  /** The rows, 2px apart. Groups are headed by a `CollapsibleSection` or a `SectionHeader`. */
+  children: ReactNode
+  /** Placement only. */
+  className?: string
+}
+
+function Column({ title, chevron = false, actions, above, collapsed = false, children, className, broken = false }: ListColumnProps & { broken?: boolean }) {
+  return (
+    <div
+      className={cn(
+        // `shrink-0`: the column keeps its 290px beside a main area that grows.
+        'flex shrink-0 flex-col overflow-hidden border-r border-border-subtle transition-[width,opacity] duration-300 ease-in-out',
+        collapsed ? 'w-0 border-r-0 opacity-0' : 'w-[290px] opacity-100',
+        className,
+      )}
+      data-collapsed={collapsed || undefined}
+    >
+      <ContainerHeader title={title} chevron={chevron} actions={actions} />
+      {above}
+      {broken ? (
+        // The message takes the room the list had and centres itself in it (Katerina, 19 September).
+        <div className="flex min-h-0 flex-1 flex-col px-3">{children}</div>
+      ) : (
+        <ScrollArea className="flex-1" contentClassName="flex flex-col gap-0.5 px-3 pt-4 pb-3">
+          {children}
+        </ScrollArea>
+      )}
+    </div>
+  )
+}
+
+export function ListColumn(props: ListColumnProps) {
+  return (
+    <ErrorBoundary
+      label="list panel"
+      frame={(message) => (
+        // Only the name comes back with the message: the actions and the row above may be what threw.
+        <Column title={props.title} chevron={props.chevron} collapsed={props.collapsed} className={props.className} broken>
+          {message}
+        </Column>
+      )}
+    >
+      <Column {...props} />
+    </ErrorBoundary>
+  )
+}

package/src/Menu.mdx

@@ -76,6 +76,8 @@ the trigger as "close" rather than as a press outside.
 
 <Canvas of={MenuStories.OnACard} />
 
+- **Planned:** one part for the pop-up lists while typing in an editor (UIG-31).
+
 ## What it owns
 
 It does these by itself. Write none of them around it.
@@ -138,8 +140,11 @@ Four surfaces used to claim menu items of nothing.
 
 A menu whose rows are `px-3` (tall picker rows) aligns its headings by passing
 `className="px-3"` to `MenuSection` — the heading row is `px-2` by default,
-matching the default rows. A `Divider` inside a menu needs nothing: the panel
-already runs it the width of the rows it separates.
+matching the default rows.
+
+**Between groups, a `MenuSeparator`**: the line, the width of the rows it
+separates, with its own 4px above and below. Not a `Divider`, whose room is
+its caller's.
 
 ## Props
 

package/src/Menu.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconCopy, IconDots, IconPencil, IconSquareRounded, IconTrash } from '@tabler/icons-react'
 import { Button } from './Button'
-import { Divider } from './Divider'
 import { IconButton } from './IconButton'
-import { Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSub } from './Menu'
+import { Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSeparator, MenuSub } from './Menu'
 import { SectionLabel } from './SectionLabel'
 
 /**
@@ -41,7 +40,7 @@ export const Items: Story = {
     <MenuPanel className="min-w-[180px]">
       <MenuItem label="Rename" leading={icon(IconPencil)} onClick={() => {}} />
       <MenuItem label="Duplicate" leading={icon(IconCopy)} shortcut="Ctrl+D" onClick={() => {}} />
-      <Divider className="my-1" />
+      <MenuSeparator />
       <MenuItem label="Delete" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={() => {}} />
     </MenuPanel>
   ),
@@ -57,7 +56,7 @@ export const Sections: Story = {
         <MenuItem label="Item one" selected onClick={() => {}} />
         <MenuItem label="Item two" onClick={() => {}} />
       </MenuSection>
-      <Divider className="my-1" />
+      <MenuSeparator />
       <MenuSection label="Another section">
         <MenuItem label="Option one" onClick={() => {}} />
         <MenuItem label="Option two" onClick={() => {}} />
@@ -75,7 +74,7 @@ export const WithARow: Story = {
         <span className="min-w-0 flex-1 truncate text-body-2 text-text-primary">Item one</span>
         <SectionLabel tone="secondary">Label</SectionLabel>
       </MenuRow>
-      <Divider className="my-1" />
+      <MenuSeparator />
       <MenuItem label="An action" onClick={() => {}} />
     </MenuPanel>
   ),
@@ -99,7 +98,7 @@ export const FromATrigger: Story = {
         <MenuItem label="Item two" onClick={() => {}} />
         <MenuItem label="Item three" onClick={() => {}} />
       </MenuSub>
-      <Divider className="my-1" />
+      <MenuSeparator />
       <MenuItem label="Delete" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={() => {}} />
     </Menu>
   ),
@@ -149,7 +148,7 @@ export const OnACard: Story = {
             <MenuItem label="Item two" onClick={() => {}} />
           </MenuSub>
         </MenuSection>
-        <Divider className="my-1" />
+        <MenuSeparator />
         <MenuItem label="Delete" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={() => {}} />
       </Menu>
     </div>

package/src/Menu.test.tsx

@@ -11,7 +11,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Button } from './Button'
-import { Menu, MenuItem, MenuPanel, MenuSection, MenuSub } from './Menu'
+import { Menu, MenuItem, MenuPanel, MenuSection, MenuSeparator, MenuSub } from './Menu'
 
 afterEach(cleanup)
 
@@ -269,6 +269,24 @@ describe('Menu', () => {
  * plugin already owns the keyboard — so `MenuItem` and `MenuSection` have to
  * work with no `Menu` above them.
  */
+describe('MenuSeparator', () => {
+  // UIG-14: the line between groups brings its own 4px above and below; a plain
+  // Divider left that to each caller, and Peek's main menus had none.
+  it('is a separator with its own room, the width of the rows', async () => {
+    render(
+      <Menu open trigger={<Button>More</Button>}>
+        <MenuItem label="One" />
+        <MenuSeparator />
+        <MenuItem label="Two" />
+      </Menu>,
+    )
+    const line = await screen.findByRole('separator')
+    const classes = (line.getAttribute('class') ?? '').split(' ')
+    expect(classes).toContain('my-1')
+    expect(classes).toContain('mx-0')
+  })
+})
+
 describe('rows on a bare MenuPanel', () => {
   /**
    * It is a button, and it does NOT claim to be a menu item. ARIA requires a

package/src/Menu.tsx

@@ -2,7 +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 { Divider, DividerInPanel } from './Divider'
 import { triggerDisabled } from './triggerDisabled'
 import { ScrollArea } from './ScrollArea'
 import { Kbd } from './Kbd'
@@ -590,6 +590,16 @@ export function MenuSection({ label, children, className }: { label: string; chi
   )
 }
 
+/**
+ * The line between two groups of a menu, with its own 4px above and below
+ * (UIG-14, Katerina 19 September). A plain `Divider` left that room to each
+ * caller, and Peek's menus drew it three ways — none, 4px, 4px and inset — so
+ * the lines in its main menus touched the rows.
+ */
+export function MenuSeparator() {
+  return <Divider className="my-1" />
+}
+
 /** A non-interactive row inside a menu, at the item's own geometry. */
 export function MenuRow({ children, className }: { children: ReactNode; className?: string }) {
   return <div className={cn('flex items-center gap-2 px-2 py-1.5', className)}>{children}</div>

package/src/MenuItem.mdx

@@ -51,6 +51,8 @@ import { IconPencil } from '@tabler/icons-react'
 - A destructive row's `leading` icon takes the error colour itself
   (`text-error-default`) — the row colours only its label.
 
+- **Planned:** one part for the pop-up lists while typing in an editor (UIG-31).
+
 ## What it owns
 
 It does these by itself. Write none of them around it.
@@ -59,6 +61,7 @@ It does these by itself. Write none of them around it.
 |---|---|---|
 | Is a row of its Menu: the Menu highlights it, walks to it with the arrow keys, and closes when it is chosen | a highlight or a key handler on the row |  |
 | Opens its `submenu` with → and closes it with ← | a submenu of your own |  |
+| Keeps its row's height in a scrolling column | `shrink-0` |  |
 
 ## Props
 

package/src/NavItem.mdx

@@ -48,6 +48,9 @@ import { NavItem } from '@estiva-app/ui'
   anchor prop passes through.
 - The label truncates; the count never gives up its width.
 
+- A row is 32px tall, 8px in on each side, 8px between the icon and the label,
+  the label 14px regular, 6px corners.
+
 ## What it owns
 
 It does these by itself. Write none of them around it.
@@ -55,6 +58,7 @@ It does these by itself. Write none of them around it.
 | It does | So you never write | Refused when written by hand |
 |---|---|---|
 | Marks the current place for assistive technology when `active` | `aria-current` |  |
+| Keeps its 32px in a scrolling column | `shrink-0` |  |
 
 ## Props
 

package/src/Person.mdx

@@ -12,6 +12,7 @@ and name is one rule, 8px, wherever a person appears.
 
 ## When
 
+- **The name takes the size of the text around it**; `size` sets the face.
 - A person named inline: an assignee, an author, a participant, a value in
   a property row.
 - Someone with no published name shows the `fallback` — an em dash by
@@ -39,6 +40,8 @@ import { Person } from '@estiva-app/ui'
   and words are always set together (the Sizes story shows the pairings).
 - The name truncates; give the container `min-w-0` room to let it.
 
+- **Planned:** a Byline part — face · name · time — in migration stage 7.
+
 ## What it owns
 
 Nothing. It only draws. Clicks and keys are yours.

package/src/PersonTrigger.mdx

@@ -47,7 +47,7 @@ import { Menu, PersonTrigger } from '@estiva-app/ui'
 - **The accessible name comes from the person, in both shapes.** The row is
   named by its visible name, and the `compact` face — which has no visible
   text — takes the same name through an `aria-label` of its own, so nothing
-  is owed. Until 2026-09-08 that face announced **"AD"**: the initials, read
+  is owed. Without it that face would announce **"AD"**: the initials, read
   as text. Pass an `aria-label` only to name what it *opens* rather than who
   it shows; `IdentityMenu`'s compact shape says "Account menu".
 - It is a native `<button>` on Base UI's Button: it takes a `ref` and every
@@ -61,6 +61,7 @@ It does these by itself. Write none of them around it.
 |---|---|---|
 | Is a button: Tab reaches it, Enter and Space call your `onClick` | a clickable `<div>` |  |
 | Names itself from the person's name, and says whether what it opens is open (`open`) | `aria-label` or `aria-expanded` |  |
+| Keeps its 32px in a scrolling column | `shrink-0` |  |
 
 ## Keys
 

package/src/PersonTrigger.tsx

@@ -65,7 +65,7 @@ export function PersonTrigger({ name, picture, fallback, size, open = false, com
       aria-haspopup="menu"
       aria-expanded={open}
       className={cn(
-        'flex h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-body-2 text-text-primary transition-colors hover:bg-bg-hover',
+        'flex h-8 min-h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-body-2 text-text-primary transition-colors hover:bg-bg-hover',
         open && 'bg-bg-hover',
         // Under a `Menu` the open state is Base UI's, not a prop: the trigger
         // carries `data-popup-open` while its menu is up, and sets its own

package/src/Popover.mdx

@@ -124,6 +124,8 @@ something belongs on a `trigger`.
 
 <Canvas of={PopoverStories.FlippedForRoom} />
 
+- **Planned:** one part for the pop-up lists while typing in an editor (UIG-31).
+
 ## What it owns
 
 It does these by itself. Write none of them around it.

package/src/Rail.mdx

@@ -52,6 +52,9 @@ import { Rail, RailItem } from '@estiva-app/ui'
 
 <Canvas of={RailStories.OneItem} />
 
+- The column is 64px wide, 12px from the top and bottom, 8px at the sides,
+  8px between tiles.
+
 ## What it owns
 
 It does these by itself. Write none of them around it.

package/src/RailItem.mdx

@@ -45,6 +45,9 @@ import { Rail, RailItem } from '@estiva-app/ui'
   click, navigate.
 - Icons are 16px at stroke 1.5.
 
+- A tile is 64px wide and 48px tall: the 16px icon in its 32px square, over its
+  9px label.
+
 ## What it owns
 
 It does these by itself. Write none of them around it.
@@ -52,6 +55,7 @@ It does these by itself. Write none of them around it.
 | It does | So you never write | Refused when written by hand |
 |---|---|---|
 | Marks the current place for assistive technology when `active` | `aria-current` |  |
+| Keeps its 48px in a scrolling column | `shrink-0` |  |
 
 ## Props
 

package/src/RailItem.tsx

@@ -27,7 +27,7 @@ export function RailItem({ href, icon, label, active = false, className, ...prop
     <a
       href={href}
       aria-current={active ? 'page' : undefined}
-      className={cn('group flex w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5', className)}
+      className={cn('group flex h-12 w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5', className)}
       {...props}
     >
       <div

package/src/Reaction.mdx

@@ -58,6 +58,7 @@ It does these by itself. Write none of them around it.
 |---|---|---|
 | Is a toggle: pressed or not, and says so to assistive technology | `aria-pressed` |  |
 | Presses on Enter and Space; Tab skips it while disabled | a key handler |  |
+| Keeps its 24px in a scrolling column | `shrink-0` |  |
 
 ## Keys
 

package/src/Reaction.tsx

@@ -70,7 +70,7 @@ export function Reaction({ emoji, count, pressed = false, className, ...props }:
       className={cn(
         // Chip's pill at a control's height, so a reaction and a status chip
         // read as the same family — 24px matches Button `small`.
-        'inline-flex h-6 items-center justify-center gap-1.5 rounded-full px-2',
+        'inline-flex h-6 min-h-6 items-center justify-center gap-1.5 rounded-full px-2',
         'border transition-colors',
         'disabled:cursor-not-allowed disabled:opacity-50',
         pressed

package/src/ScrollArea.mdx

@@ -55,6 +55,9 @@ import { ScrollArea } from '@estiva-app/ui'
   Chrome: wheel down over a sideways region inside a page, the page moves
   and the region does not; a sideways swipe, the other way round.
 
+- Text inside can look a touch lighter than outside: that is Chrome drawing a
+  scrolling layer, not a colour. Nothing to fix.
+
 ## What it owns
 
 It does these by itself. Write none of them around it.

package/src/SectionHeader.mdx

@@ -16,6 +16,9 @@ title the toggle — that is where a section folds.
 
 - A sidebar or panel section that carries its own actions — add, sort,
   filter.
+- **A heading over a group of rows, even with nothing to act on**: no
+  `actions`, and `hover="none"` so the row stays still under the pointer.
+  Never a row drawn by hand with a SectionLabel in it.
 - `showActions="always"` keeps the actions visible — for touch, or for a
   section whose actions are the point.
 
@@ -25,7 +28,8 @@ title the toggle — that is where a section folds.
 
 - A section that opens and closes → **CollapsibleSection**: the header,
   the rows, the slide, and a `storageKey` that remembers.
-- A title with no chevron and no actions → **SectionLabel** alone.
+- A label inside a row of another shape — a dialog's section, a panel's
+  title, a card's line → **SectionLabel**.
 - A heading inside a menu → **MenuSection**.
 - Page-level headings → the `h*` type tokens.
 
@@ -39,7 +43,7 @@ import { IconPlus } from '@tabler/icons-react'
 ```
 
 - `chevron`, `isExpanded` and `onToggle` are CollapsibleSection's to set
-  (decided 2026-09-09: one component folds, and it is that one). With
+  (one component folds, and it is that one). With
   them, the title is a button that fills the row up to the actions — the
   whole row is the hit target, the keyboard can toggle it, and it says its
   state (`aria-expanded`).
@@ -57,6 +61,9 @@ import { IconPlus } from '@tabler/icons-react'
   actions are always shown (`showActions="always"`), where the buttons light up
   on their own. The default, `fill`, lights a row that toggles or has actions.
 
+- The row is 32px tall, 8px in on each side, 4px between the title and the
+  actions, with 8px corners.
+
 ## What it owns
 
 It does these by itself. Write none of them around it.
@@ -65,6 +72,7 @@ It does these by itself. Write none of them around it.
 |---|---|---|
 | With `chevron`, its title is a button that calls `onToggle` on a click, Enter or Space, and says whether it is open | a button of your own, or `aria-expanded` |  |
 | Shows its actions while one of them has focus | a focus style of your own |  |
+| Keeps its 32px in a scrolling column | `shrink-0` |  |
 
 ## Keys
 

package/src/SectionHeader.tsx

@@ -99,7 +99,7 @@ export function SectionHeader({ title, chevron = false, isExpanded = true, onTog
   return (
     <div
       className={cn(
-        'group flex h-[32px] items-center gap-1 rounded-lg px-2 transition-colors',
+        'group flex h-[32px] shrink-0 items-center gap-1 rounded-lg px-2 transition-colors',
         // The fill says "this does something": a row with a toggle or actions
         // lights up, a fixed heading over rows does not (2026-09-09, the
         // Sidebar's fixed group).

package/src/SectionLabel.mdx

@@ -14,13 +14,16 @@ how).
 
 ## When
 
-- Titling a group of rows in a sidebar, a panel, a rail.
+- **It is a bare label**: the row it sits in, and the room around it, are yours.
+- A label inside a row of another shape: a dialog's section, a panel's
+  title, a card's line.
 - Inside a menu it arrives via **MenuSection** — don't place it there by
   hand.
 
 ## When not
 
-- A heading that also collapses or carries actions → **SectionHeader**.
+- A heading over a group of rows → **SectionHeader**, even with nothing to
+  act on; a group that folds → **CollapsibleSection**.
 - The label above a stacked control → **Property** `stacked` — a field
   label is a different voice, at a different size, on purpose.
 - Page-level headings → the `h*` type tokens.
@@ -35,8 +38,11 @@ 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 (Katerina, 2026-09-01). A colour
-passed in `className` is refused by the lint (UIG-9).
+headings and the command palette's groups do. 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.
 
 ## What it owns
 

package/src/Select.mdx

@@ -55,8 +55,7 @@ import { Select } from '@estiva-app/ui'
 - **The list hangs under the trigger**, 4px below it, and flips above when
   the room below is worse. Base UI would rather lay it *over* the trigger
   with the chosen option covering the trigger's own text, the way macOS
-  does; that is off (Katerina, D24) because every Select in both apps opens
-  below one today.
+  does; that is off, so every Select opens below its trigger.
 - It caps at 288px, or at the room the screen actually has, whichever is
   smaller — and scrolls inside that. Measured in a bottom-right corner:
   the list flips above the trigger, slides left to stay on screen, and
@@ -64,6 +63,7 @@ import { Select } from '@estiva-app/ui'
 - **`disabledReason="Read only"`** holds it shut and keeps it reachable by Tab,
   showing the reason on hover and on keyboard focus — as `Button` does. Plain
   `disabled` is a native disabled control: Tab skips it, so it cannot say why.
+  Given both, the reason wins, as on `Button`.
 - **The trigger is a `combobox`, not a `button`.** That is the ARIA pattern
   for this control and Base UI's doing; a test looking for it by role has
   to ask for `combobox`.
@@ -81,6 +81,7 @@ It does these by itself. Write none of them around it.
 | Moves through its items with the arrow keys, and jumps to an option by its first letters | an arrow-key handler | ✓ |
 | Says what it is to assistive technology: a list of options | `role="listbox"` or `role="option"` | ✓ |
 | Keeps the highlighted option in view, and gives focus back to the trigger | scroll or focus code |  |
+| Keeps its height in a scrolling column | `shrink-0` |  |
 
 ## Keys
 

package/src/Select.test.tsx

@@ -74,6 +74,18 @@ describe('Select', () => {
     expect((await screen.findByRole('tooltip')).textContent).toBe('Read only: you are a guest')
   })
 
+  // F2: as on Button, a reason wins over plain `disabled` — or the reason is never seen.
+  it('disabled with a reason: the reason wins', async () => {
+    const user = userEvent.setup()
+    render(<Select value="todo" onChange={vi.fn()} options={STATUSES} ariaLabel="Status" disabled disabledReason="Read only: you are a guest" />)
+    const trigger = screen.getByRole('combobox', { name: 'Status' })
+    expect(trigger.getAttribute('aria-disabled')).toBe('true')
+    expect(trigger.hasAttribute('disabled')).toBe(false)
+    await user.tab()
+    expect(document.activeElement).toBe(trigger)
+    expect((await screen.findByRole('tooltip')).textContent).toBe('Read only: you are a guest')
+  })
+
   it('shows the placeholder when nothing matches', () => {
     render(<Controlled initial="" placeholder="Choose" />)
     expect(screen.getByRole('combobox', { name: 'Status' }).textContent).toContain('Choose')

package/src/Select.tsx

@@ -56,6 +56,7 @@ export interface SelectProps {
    * looks disabled and will not open, but Tab still reaches it, and the reason
    * shows as its tooltip — a native disabled button cannot be focused, so it
    * could never say why. Takes the place of wrapping it in `WithTooltip`.
+   * Given with `disabled`, the reason wins, as on `Button`.
    */
   disabledReason?: string
   className?: string
@@ -70,7 +71,7 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
   const selected = options.find((o) => o.value === value)
   // With a reason it is held shut rather than disabled: a disabled trigger is
   // a native `disabled` button, which Tab skips and a tooltip cannot open on.
-  const held = Boolean(disabledReason) && !disabled
+  const held = Boolean(disabledReason)
   const trigger = (
       <BaseSelect.Trigger
         aria-label={ariaLabel}
@@ -96,7 +97,7 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
           '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 px-2 text-caption',
+          size === 'small' && 'h-6 min-h-6 px-2 text-caption',
           className,
         )}
       >
@@ -116,7 +117,7 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
         if (!held) onChange(next as string)
       }}
       {...(held ? { open: false, onOpenChange: () => {} } : {})}
-      disabled={disabled}
+      disabled={disabled && !held}
       // Non-modal, as it has always been: the page behind stays scrollable and
       // keeps its scrollbar, so opening a select never shifts the layout.
       modal={false}

package/src/Skeleton.mdx

@@ -40,4 +40,8 @@ import { SkeletonList, SkeletonBar } from '@estiva-app/ui'
 
 ## What it owns
 
-Nothing. It only draws. Clicks and keys are yours.
+It does these by itself. Write none of them around it.
+
+| It does | So you never write | Refused when written by hand |
+|---|---|---|
+| Keeps each row's 32px in a scrolling column | `shrink-0` |  |

package/src/Skeleton.tsx

@@ -21,7 +21,7 @@ const ROW_BAR_WIDTHS = [150, 100, 170, 120, 90, 140, 110, 160]
 /** A 32px row: a 16px square and a bar, like a row with a face and a name. */
 export function SkeletonRow({ barWidth = 130 }: { barWidth?: number }) {
   return (
-    <div className="flex items-center gap-2 px-2 h-[32px] rounded-lg">
+    <div className="flex shrink-0 items-center gap-2 px-2 h-[32px] rounded-lg">
       <SkeletonBar className="w-4 h-4 shrink-0" />
       <SkeletonBar className="h-3.5" style={{ width: barWidth }} />
     </div>

package/src/TextInput.mdx

@@ -53,6 +53,7 @@ It does these by itself. Write none of them around it.
 | It does | So you never write | Refused when written by hand |
 |---|---|---|
 | Inside a `Field`, takes its name from the Field's label, and its error state | an `id` / `htmlFor` pair, or `aria-invalid` |  |
+| Keeps its height in a scrolling column | `shrink-0` |  |
 
 ## Props
 

package/src/TextInput.tsx

@@ -38,7 +38,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
         'bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg',
         // 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 px-2 text-caption',
+        size === 'small' && 'h-6 min-h-6 px-2 text-caption',
         'text-text-primary placeholder:text-text-muted',
         'outline-none transition-colors',
         'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',

package/src/Toolbar.mdx

@@ -69,8 +69,8 @@ import { Toolbar, ToolbarButton, ToolbarSeparator } from '@estiva-app/ui'
 A toolbar floats over what it acts on — a card, a paragraph, an image — so it
 draws the elevated surface that separates it from that: **the same `MenuPanel`
 a `Menu` draws**, because a floating strip and a floating list are the same
-box. Peek had built this twice and the two had already drifted: one
-`rounded-sm` with `shadow-sm`, the other `rounded-lg` with `shadow-lg`.
+box. Built twice by hand, the two drift: one `rounded-sm` with `shadow-sm`,
+the other `rounded-lg` with `shadow-lg`.
 
 `surface={false}` for a strip inside something that draws that box already — a
 `Popover`, a dialog, a card's own panel.
@@ -82,6 +82,13 @@ why the placement is its job and not arithmetic of ours.
 
 <Canvas of={ToolbarStories.OnAnExistingSurface} />
 
+**A control that goes somewhere is a `ToolbarLink`** with an `href`: the
+strip's look, in the same walk, with a real address, so a Ctrl+click opens a
+new tab. A `ToolbarButton` cannot be a link. A place you cannot go is left out
+of the strip rather than disabled.
+
+<Canvas of={ToolbarStories.WithALink} />
+
 ## What it owns
 
 It does these by itself. Write none of them around it.