@crewlethq/ui 0.12.0 → 0.14.0

package/README.md

@@ -41,17 +41,17 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Area | Components |
 | ---- | ---------- |
 | Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `Kbd` |
-| Content and text | `Text` (the eight registers), `Prose`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime` |
-| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `Composer` |
+| Content and text | `Text` (the eight registers), `Prose`, `Document` and `DocumentTitle`, `Highlight`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime` |
+| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `Composer`, `MarkdownEditor` |
 | Data display | `DataTable`, `CopyableCell`, `Table`, `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `Skeleton`, `Eyebrow` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
 | Feedback and overlays | `Callout`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
 | Charts | `Legend`, `BarList`, `StackedBar`, `StackedColumns`, `ActivityStrip`, `TimeSeries`, `Sparkline`, the reading layer they share (`ChartTooltip`, `useChartHover`), and the ramp (`DATA_COLORS`, `DATA_COLOR_OTHER`, `dataColor`) |
 | Marks | `Count`, `StatusDot`, `EmptyValue`, `VisuallyHidden` |
-| Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useClipboard`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
-| Layout | `Container`, `Section`, `Card`, `Tabs`, `Accordion`, `Disclosure` |
+| Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
+| Layout | `Container`, `Section`, `Card`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
 | Application shell | `AppShell` with `AppShell.Rail`, `AppShell.Topbar` and `useAppShell`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen` |
-| Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences` |
+| Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences` |
 
 Storybook stories live under `apps/storybook/src/stories`.
 
@@ -74,6 +74,13 @@ land at once.
   `storageKey` shows one value; an application that owns the preference holds
   it with one `useThemePreference` and passes `value` and `onChange` to each
   control, which then writes nothing of its own.
+- **Named themes.** Import `@crewlethq/tokens/css/themes/all` after
+  `css/themes` and set `data-palette` on `<html>` to a theme's id; removing it
+  paints the default. A theme is a pair of palettes, so `data-theme` keeps
+  choosing light or dark for every theme alike: the interface calls that
+  choice Mode and the palette Theme. `ThemeGallery` offers the themes and
+  `ThemeSwatch` draws one, both from the registry `@crewlethq/tokens`
+  exports, so a thumbnail shows a theme that is not the one on screen.
 - **Density.** Import `@crewlethq/tokens/css/density` and set
   `data-density="compact"` or `"comfortable"` on `<html>`. Every spacing and
   size token scales with it, and the small control and row steps floor at 24px
@@ -191,6 +198,76 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.14.0
+
+0.14.0 draws toasts as the first release did and quiets the pickers.
+
+**Toasts are the first release's strip again**: a dark strip on `--color-surface-background` with the large shadow and the rim light, a 12px corner, a 20px mark, a slide in from the right, and the countdown as a wash behind the words that drains from the right. A variant spends its hue on its mark (the feedback ink step) and its wash (the feedback soft step) only, so a failure is a rose mark on a faint rose wash with a rose action, never red words on a red edge. Reduced motion keeps the strip still and draws no wash.
+
+**A picker's boundary is a button's.** `Select`, `DateTimePicker` and `TimeWindowPicker` draw their trigger on `--color-border-strong`, as the secondary button does, and step to `--color-border-strong-hover` under the pointer. Text boxes, checkboxes and switches keep `--color-border-control` at 3:1, as do the typed boxes inside the pickers' panels.
+
+**A `Select` list that leads with marks ends its rows with the tick**, so a swatch, an avatar or a glyph starts at the panel's edge. A list of words keeps the tick's column first.
+
+**`--crewlet-select-menu-max-height` is the list's height.** The shared listbox cap of min(360px, 60vh) no longer overrides a taller panel; the panel keeps the 60vh cap on the window.
+
+`@crewlethq/tokens`: Origin's dark `--color-border-default` is #2e2e30, and the comfortable density is 1.16 (it was 1.14), a shade larger at every gap, pad, row and control.
+
+What to change: a test that reads a failure toast's red edge or red words, or a picker's control boundary, reads the new ones. Everything else is unchanged.
+
+## Changes in 0.13.0
+
+0.13.0 adds the parts the engine console's themes, project switcher, inbox and knowledge base are built with, and calls the light and dark choice Mode.
+
+**`ThemeSwatch`** draws a theme from its registry entry in `@crewlethq/tokens` (its `swatch`): `size="chip"` is a mark beside a name, `"card"` a picker's thumbnail and `"pane"` a preview large enough to read as a screen. Both palettes are drawn by default, dark beside light, and `mode` draws one. It is decoration unless given a `label`.
+
+**`ThemeGallery`** is the choice of a theme: every theme as a card under its group, in one radio group whose arrows choose as they move. The chosen card is its own border in the accent. `onPreview` is told the card the pointer comes to rest on, and `null` when it leaves, for a pane beside the gallery. It reads `themeRegistry` and `themeGroups` by default; `themes`, `groups` and `columns` adapt it.
+
+**`Select` options take `leading` and `hint`.** `leading` is drawn before the label, in the list and on the trigger while the option is chosen; `hint` is a quieter word at the end of the label's line. `onHighlight` is told where the highlight comes to rest: at once for a key, once the pointer has rested on a row for `HIGHLIGHT_REST_MS` (120 ms), and `null` when the list closes or the pointer leaves it.
+
+**`CommandPalette` takes a `step`.** `{ label, onBack, startAt? }` draws a chip naming the step at the field's start, and the chip, Escape and Backspace in an empty field go back rather than closing. The step opens on the row `startAt` names (the choice in effect), or on its first row, and going back puts the highlight on the row that led in. A row whose `onSelect` returns `false` keeps the surface open, which is how a row leads into a step. `onHighlight` reports the resting highlight with the same timing as `Select`'s.
+
+**`SegmentedControl` takes `fill`**: the row fills the width it is given and every option takes an equal share, so rows stacked in one panel draw one box. `ThemeSwitcher` and `DensitySwitcher` pass it through.
+
+**`useHighlightRest`** is the timing `Select` and `CommandPalette` share, for a list of your own that previews its highlight.
+
+**The light and dark choice is called Mode.** `ThemeSwitcher`'s row is named "Mode", and `ThemeToggle` says "Switch to light mode" and "Switch to dark mode": "Theme" now names the palette. Code keeps `data-theme`.
+
+**Labels on the danger fill and the scrim read their own tokens.** `ImageUpload`'s remove button and a danger toast's action read `--color-text-on-danger`, and the upload scrim, its spinner and a seeded `Avatar` read `--color-text-on-scrim`, so they stay white on a theme whose accent carries a dark label.
+
+**`Switcher`** is a page's subject drawn as a button, and the panel that switches it: a search band, a list that scrolls, and a footer that does not. It opens under its button, centred when it has none (a panel opened by a key), and as a sheet from the bottom edge below 640px. Focus stays in the field while the arrows walk `pinned`, a `message`'s actions, `groups` and `footer` as one listbox. A row with an `href` is a link, so a middle click, a Command click and Command+Enter open it in a new tab; a `held` row keeps its reason and is passed over, and a `keepsOpen` row (Try again) is taken without closing the panel. `loading`, `note` and `announcement` cover the rest, and the caller searches and ranks.
+
+**`Breadcrumb`** moves into the kit from the engine dashboard: ancestors that lead back out, the page's own `h1` last, a floor measured from what the trail holds, and a tab stop only while it overflows. `current` draws a control, such as a `Switcher`, as the heading's words. Below 640px an ancestor with a glyph is drawn as its glyph alone, its word kept for a screen reader.
+
+**`KeyChip`** draws a project's key as the small mono chip, with a search's letters in bold (`highlight`). `SidebarNav` now draws an item's `lead` with it.
+
+**`Tabs` take `variant="chip"`**: compact chips whose selected one is outlined by its own accent hairline, with no fill and no underline, for an object's lenses beside its name.
+
+**`Popover`** takes `alignOffset` (a shift along the anchor, or a function that measures one), `sideOffset` (its distance from the anchor) and `initialFocus`.
+
+**`Modal` takes `placement="bottom"`**: a dialog pinned to the bottom edge at the window's width, rounded on its top corners, rising from that edge.
+
+**`InboxList`** is an inbox's column: `InboxGroup` labels a run of rows, and each `InboxRow` is one control (a button, or a link with `href`) naming who it is from, a `qualifier` and a `meta` time, with its words in up to three lines and an `excerpt` in the quiet ink. `aside` sits under the control as a control of its own, for the task the row is about. `selected` takes the neutral pressed fill and `aria-current`; `unread`, `actionable` and `done` set the ink, and `unread` and `done` are read out. `InboxMore` and `InboxToggle` are the quiet toggles at the end of the list.
+
+**`ChoiceButtons`** sends one answer with one press: a group of buttons as tall as a touch target, the `recommended` option first, filled and marked. `pending` and `disabledReason` hold every option still without taking its focus.
+
+**`ReadingPane`** reads one item in a single column named by its title: `ReadingPaneByline`, `ReadingPaneTitle`, `ReadingPaneLead`, `ReadingPaneQuote` (`verbatim` for a machine's words), `ReadingPaneReasoning`, `ReadingPaneOutcome` (a status line) and `ReadingPaneSection`.
+
+**`Link`** adds `variant="quiet"`, a reference among other words in `--color-text-link-quiet` that never underlines and steps up to the accent ink on hover, and `size="inherit"`.
+
+**`Document`** sets rendered markdown as a document: headings, paragraphs, lists and task lists, quotes, code, tables, rules, links and images, every size a step on the type ramp. It styles the plain elements a renderer emits rather than parsing anything itself, so the application keeps its own parser and its own rules about what a body may contain. A task item is recognised by the checkbox it starts with and a wide table by the element it scrolls in; that element takes `tabIndex={0}`, a `region` role and a name. `size="sm"` sets it for a comment or a side pane, and `DocumentTitle` is the page's title above it.
+
+**`Outline`** is "On this page": the headings of the document beside it, as buttons rather than anchors, because a hash router keeps its own route in the fragment. The entry for the section in view takes the accent edge and `aria-current="location"`. `useActiveHeading(ids, { root, offset })` says which heading that is, measured on a frame, and the last one once the scroller can go no further; `scrollToHeading(id)` brings a heading into view and moves focus to it.
+
+**`MarkdownEditor`** writes markdown: a formatting bar that writes it at the caret (headings, bold, italic, code, the three lists and a table), the source in a monospace field, and Write and Preview as a tab list whose panel is the field or the preview. Every control is a toggle, Command or Control with B and I are bold and italic, and with Enter the caller's `onSubmit`. `renderPreview` draws the preview with the application's renderer, `actions` adds the caller's own controls to the bar (they are handed the editor, so a "Link a page" picker inserts at the caret) and `footer` holds a count. The rules are pure functions a caller can use alone: `formatMarkdown`, `insertMarkdown` and `markdownWords`.
+
+**`Highlight`** marks the words a search matched in a line of text, in `mark` elements on a ground behind the text's own ink. `highlightTerms(query)` turns a query into its terms and `highlightRanges(text, terms)` says where they start a word, never inside one.
+
+**`TreeGrid` reads a hierarchy one level at a time.** `defaultExpanded="none"` opens no row until somebody opens it, so a level that has just been read arrives closed and asks for nothing on its own; `expanded` and `onExpandedChange` let the caller hold the open rows, to keep them across a visit or to read a level the moment it opens. `useTreeState` takes the same options (`TreeStateOptions`, `TreeDefaultExpanded`). `headless` keeps the column names for a screen reader and draws no header band, for an outline whose cells say what they are. A text field in a cell keeps the keys that move its caret (Left, Right, Home and End, and Up and Down in a field of several lines), so a name typed in place can be corrected; from a single line, Up and Down still walk the rows.
+
+`@crewlethq/icons` adds `Heading2Glyph`, `Heading3Glyph`, `BoldGlyph`, `ItalicGlyph`, `ListOrderedGlyph` and `ListChecksGlyph`, which `MarkdownEditor` draws, and `PaletteGlyph` (Lucide's `palette`).
+
+What to change: a test or a query that finds the theme row by the name "Theme", or the toggle by "Switch to the light theme" or "Switch to the dark theme", uses the new names. A `CommandPalette` row whose `onSelect` returns `false` by accident now keeps the surface open; return nothing to close it. A `TreeGrid` given none of the new props opens every row as it did. Everything else is new.
+
 ## Changes in 0.12.0
 
 0.12.0 adds the parts a question is answered in place with.

package/dist/AppShell/index.js

@@ -1,4 +1,5 @@
-export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-7LD6P32I.js';
+export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-L3CTFFLZ.js';
+import '../chunk-IG75YMUN.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';

package/dist/Avatar/index.js

@@ -1,3 +1,3 @@
-export { AvatarStack, avatarStackLabel } from '../chunk-3UK4VFSK.js';
+export { AvatarStack, avatarStackLabel } from '../chunk-6NIZCQUM.js';
 export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials } from '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Avatar-QHYOFID3.css → Avatar-BPJ36QZR.css}

@@ -142,7 +142,7 @@
 }
 
 .crewlet-avatar--seeded {
-  color: var(--color-text-on-accent);
+  color: var(--color-text-on-scrim);
 }
 
 .crewlet-avatar--tint-0 { background: var(--color-avatar-tint-0); }

package/dist/AvatarPicker/index.js

@@ -1,9 +1,9 @@
-export { AvatarPicker } from '../chunk-HV6IZFBK.js';
-import '../chunk-K5Q2DK3P.js';
+export { AvatarPicker } from '../chunk-4FFHJBEN.js';
+import '../chunk-NXDEPUVG.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-EBBAAQDY.js';
-import '../chunk-JHQUT4WJ.js';
-import '../chunk-PDUZO35I.js';
+import '../chunk-26PEPONN.js';
+import '../chunk-4LDTQWS7.js';
+import '../chunk-O2ZDZZS7.js';
 import '../chunk-YXMCUKFI.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,68 @@
+/**
+ * The trail in a top bar: where the reader is, and the way back out.
+ *
+ * THE LAST CRUMB IS THE PAGE'S HEADING. The bar is the page's banner and sits
+ * outside `main`, and the name of the place the reader is at is what a reader
+ * navigating by heading lands on first, so the last crumb is the `h1` and every
+ * screen's own headings start at level 2 under it. It carries no link: a trail
+ * whose final crumb links to the page it is on teaches a reader that the
+ * control does nothing.
+ *
+ * A PAGE WHOSE SUBJECT CAN BE SWITCHED draws its control as that heading's
+ * words (`current`): a switcher's button names the project the page is about
+ * and opens the list of the others, so the reader changes the subject where
+ * the subject is named rather than in a second control beside it.
+ *
+ * THE TRAIL IS A SCROLLPORT, AND WHILE IT OVERFLOWS IT IS A TAB STOP. It
+ * scrolls sideways past its floor rather than clipping the ancestry as a box,
+ * and its scrollbar is not drawn, because on a bar this short it would sit on
+ * the baseline the trail is written on. A pointer can drag a hidden scrollport
+ * and a trackpad can swipe it, but a keyboard reaches a scroll container's
+ * arrow keys only once it can be focused, and a deep trail overflows on its
+ * ancestor spans, which are not links and take no focus of their own. A trail
+ * that fits has nowhere for the arrows to go, so the stop is there only while
+ * `scrollWidth` exceeds `clientWidth`.
+ *
+ * ITS FLOOR IS THE WAY BACK OUT (`--crewlet-breadcrumb-floor`): the ancestors
+ * at their width and the last crumb at its stub, measured. The bar around it
+ * breaks a line when that floor cannot sit beside its controls, so a trail
+ * that cannot show its ancestry takes a line of its own, and it scrolls only
+ * when its ancestry alone is wider than the whole bar.
+ *
+ * Ported from the engine dashboard's `app/header/PageHeader.tsx`.
+ */
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface BreadcrumbCrumb {
+    /** The crumb's words, and what a screen reader calls it. */
+    label: string;
+    /**
+     * Where the crumb leads. Left out on the last crumb, which is the page
+     * itself, and on an ancestor with no page of its own.
+     */
+    href?: string | undefined;
+    /** A glyph before the label: the workspace's mark on the first crumb. Decorative. */
+    icon?: ReactNode;
+    /**
+     * A project's key, drawn as a `KeyChip` before a NAMED label, the way every
+     * row and rail draws a project. Only where the label is a name: a crumb
+     * still showing the raw key would say it twice.
+     */
+    keyChip?: string | undefined;
+    /** A badge before the label: a seat's avatar on its own crumb. Decorative. */
+    badge?: ReactNode;
+    /** Draws the label in the mono face: an identifier still waiting for its name. */
+    mono?: boolean | undefined;
+}
+export interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    crumbs: readonly BreadcrumbCrumb[];
+    /**
+     * A control drawn as the last crumb's words, inside the page's heading: a
+     * switcher's button where the page's subject is one of several the reader
+     * can move between. The control carries its own words; the last crumb is
+     * still what the trail is measured by.
+     */
+    current?: ReactNode;
+    /** Names the navigation landmark. */
+    label?: string | undefined;
+}
+export declare function Breadcrumb({ crumbs, current, label, className, style, ...rest }: BreadcrumbProps): import("react").JSX.Element;

package/dist/Breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+import './Breadcrumb.css';
+export { Breadcrumb } from './Breadcrumb.js';
+export type { BreadcrumbCrumb, BreadcrumbProps } from './Breadcrumb.js';

package/dist/Breadcrumb/index.js

@@ -0,0 +1,3 @@
+export { Breadcrumb } from '../chunk-VWNC2L6W.js';
+import '../chunk-FYTIJM2T.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Breadcrumb-YMWVM3SV.css

@@ -0,0 +1,193 @@
+/*
+ * The trail in a top bar.
+ *
+ * IT IS WHAT GIVES WAY, AND WHAT TAKES THE SLACK. `flex-grow: 1` is the spacer
+ * a bar would otherwise need: the trail absorbs the free space, so the
+ * controls after it stay in the bar's far corner. Its BASIS is 0, which is
+ * what lets a wrapping bar break by what it holds rather than at a width, and
+ * `flex-shrink: 100` puts it ahead of anything else on the bar that can give.
+ *
+ * ITS FLOOR IS THE WAY BACK OUT, measured by the component
+ * (`--crewlet-breadcrumb-floor`): the ancestors at their width and the last
+ * crumb's stub, at least 20ch, and never more than the whole bar. A fixed 20ch
+ * alone let a seat's trail share a phone's line with its one button and cut
+ * "Engineering · Co" mid-letter under it; measured, a trail that cannot show
+ * its ancestry beside the controls makes the bar break a line instead.
+ *
+ * Past the whole bar the trail SCROLLS rather than clipping as a box: the
+ * ancestors never shrink, so once they alone are wider than the bar there is
+ * nothing left to ellipsise, and a clip lands wherever the pixels ran out.
+ */
+.crewlet-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1 100 0;
+  min-width: min(100%, max(20ch, var(--crewlet-breadcrumb-floor, 0px)));
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-breadcrumb::-webkit-scrollbar {
+  display: none;
+}
+
+/* A trail that overflows is a tab stop (see Breadcrumb.tsx), and shows it. */
+.crewlet-breadcrumb:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-breadcrumb__part {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+
+/*
+ * THE OBJECT'S OWN NAME TAKES THE CUT, never the way back out. The reader
+ * knows which object they are on, because the page below says so; what they
+ * cannot reconstruct is the links out of it. So the ancestors keep their width
+ * and the last part is the one that ellipsises.
+ */
+.crewlet-breadcrumb__part:not(:last-child) {
+  flex: 0 0 auto;
+}
+
+svg.crewlet-breadcrumb__separator {
+  flex: none;
+  margin: 0 var(--spacing-1);
+  color: var(--color-text-muted);
+}
+
+.crewlet-breadcrumb__crumb,
+.crewlet-breadcrumb__here {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) * 1.5);
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*
+ * The ancestors in the quiet ink: a link lifts to the primary ink under the
+ * pointer, and one with nothing to press stays where it is. NO UNDERLINE: a
+ * crumb is a piece of chrome, not a word in a sentence, and the step between
+ * two measured text rungs is its hover in both themes.
+ */
+.crewlet-breadcrumb__crumb {
+  border-radius: var(--radius-xs);
+  color: var(--color-text-tertiary);
+  text-decoration: none;
+  transition: color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+a.crewlet-breadcrumb__crumb:hover {
+  color: var(--color-text-primary);
+  text-decoration: none;
+}
+
+a.crewlet-breadcrumb__crumb:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* FORCED COLOURS paints a link LinkText hovered or not, so the ink step cannot
+   be seen there: the rule under the words is the hover in that mode. */
+@media (forced-colors: active) {
+  a.crewlet-breadcrumb__crumb:hover {
+    text-decoration: underline;
+  }
+}
+
+/* A glyph sits a step further from its word than a chip does from its name. */
+.crewlet-breadcrumb__icon {
+  display: inline-flex;
+  flex: none;
+  margin-right: calc(var(--spacing-1) / 2);
+}
+
+.crewlet-breadcrumb__badge,
+.crewlet-breadcrumb__key {
+  flex: none;
+}
+
+/*
+ * THE LABEL IS THE BOX THAT ELLIPSISES. The crumb around it is a flex
+ * container, and `text-overflow` never reaches the anonymous item text inside
+ * one makes; a span is a real flex item, and its `min-width: 0` is what lets
+ * it shrink below its text at all.
+ */
+.crewlet-breadcrumb__text {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* THE LAST CRUMB IS THE PAGE'S `h1`, so the heading's own margins and size are
+   the bar's, not the document's. */
+.crewlet-breadcrumb__here {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: inherit;
+  font-weight: var(--font-weight-medium);
+  line-height: inherit;
+}
+
+/*
+ * AND IT NEVER COLLAPSES TO NOTHING: a floor of a few characters keeps an
+ * ellipsised stub, which is what tells a reader the trail has a last part at
+ * all. The floor is the last part's alone; an ancestor never shrinks.
+ */
+.crewlet-breadcrumb__part:last-child > .crewlet-breadcrumb__here {
+  min-width: 5ch;
+}
+
+/*
+ * A CONTROL AS THE HEADING'S WORDS draws its own edges: its hover fill and its
+ * focus ring run to its own box, so the heading around it clips nothing.
+ */
+.crewlet-breadcrumb__here--control {
+  overflow: visible;
+}
+
+/* An identifier still waiting for its name, in the mono face a step down. */
+.crewlet-breadcrumb__crumb.is-mono,
+.crewlet-breadcrumb__here.is-mono {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+}
+
+/*
+ * ON A PHONE AN ANCESTOR WITH A GLYPH IS ITS GLYPH. The workspace's mark is
+ * the one sign of where the reader is that survives a sidebar folded into a
+ * drawer, and the line it shares with the drawer toggle and the page's primary
+ * action has no room for its word as well. The word stays, out of sight, so
+ * the crumb is still named.
+ */
+@media (width < 640px) {
+  .crewlet-breadcrumb__part:not(:last-child) > .crewlet-breadcrumb__crumb:has(> .crewlet-breadcrumb__icon) > .crewlet-breadcrumb__text {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-breadcrumb__crumb {
+    transition: none;
+  }
+}

package/dist/ChoiceButtons/ChoiceButtons.d.ts

@@ -0,0 +1,43 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface ChoiceButtonOption {
+    value: string;
+    label: ReactNode;
+    /** A line under the label: what choosing it means. */
+    detail?: ReactNode;
+}
+export interface ChoiceButtonsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Names the group: "Answers". */
+    label: string;
+    options: readonly ChoiceButtonOption[];
+    /** The option the asker recommends: drawn first, filled, and marked. */
+    recommended?: string | null | undefined;
+    /** The mark on the recommended option, read as part of its name. */
+    recommendedLabel?: string | undefined;
+    /** Sends one option. */
+    onChoose: (value: string) => void;
+    /**
+     * The option being sent. It is announced as busy, and every option holds
+     * still until the answer lands, so a second press cannot send a second
+     * answer. What landed is the caller's to say, where the options were.
+     */
+    pending?: string | null | undefined;
+    /**
+     * Why nothing can be chosen now. Every option keeps its focus and reads the
+     * reason after its name, as a disabled `Button` does.
+     */
+    disabledReason?: string | undefined;
+}
+/**
+ * One answer from a short list, sent with ONE PRESS: each option is a button
+ * as tall as a touch target, the recommended one first and filled.
+ *
+ * WHEN IT IS RIGHT. Where the question is the whole screen and the options are
+ * the answer, a reader should not have to select and then submit. Where an
+ * answer is chosen among other edits, or needs a field of its own under it,
+ * `ChoiceList` is the part: a radio group with a footer that sends.
+ *
+ * NOT THE NATIVE `disabled`, for the reason `Button` gives: it takes focus off
+ * the control the reader just pressed and drops it on the page body.
+ * `aria-disabled` and `aria-busy` say the same and leave focus where it was.
+ */
+export declare function ChoiceButtons({ label, options, recommended, recommendedLabel, onChoose, pending, disabledReason, className, ...rest }: ChoiceButtonsProps): import("react").JSX.Element;

package/dist/ChoiceButtons/index.d.ts

@@ -0,0 +1,3 @@
+import './ChoiceButtons.css';
+export { ChoiceButtons } from './ChoiceButtons.js';
+export type { ChoiceButtonOption, ChoiceButtonsProps } from './ChoiceButtons.js';

package/dist/ChoiceButtons/index.js

@@ -0,0 +1,3 @@
+export { ChoiceButtons } from '../chunk-YSJC7AZC.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ChoiceButtons-DJ5EOGUA.css

@@ -0,0 +1,127 @@
+/*
+ * One answer, sent with one press: a column of buttons as tall as a touch
+ * target, the recommended one first and filled with the accent.
+ *
+ * The plain option is the secondary button's recipe (the card's own ground
+ * inside the strong hairline), and the recommended one the primary's, so the
+ * pair reads as the screen's one primary action and its alternatives.
+ */
+
+.crewlet-choice-buttons {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--spacing-2);
+}
+
+.crewlet-choice-buttons__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  min-width: 0;
+  min-height: var(--size-control-lg);
+  padding: calc(var(--spacing-2) + var(--spacing-1) / 2) calc(var(--spacing-3) + var(--spacing-1) / 2);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-primary);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-snug);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-choice-buttons__option:hover:not([aria-disabled='true']) {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border-strong-hover);
+}
+
+.crewlet-choice-buttons__option:active:not([aria-disabled='true']) {
+  background: var(--color-surface-pressed);
+}
+
+/*
+ * The plain option draws the strong hairline, so its ring is drawn over that
+ * edge rather than a gap away from it, which would read as a second outline.
+ */
+.crewlet-choice-buttons__option:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-choice-buttons__option[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+/* The option on its way: still this option, mid-action. */
+.crewlet-choice-buttons__option[aria-busy='true'] {
+  cursor: progress;
+}
+
+.crewlet-choice-buttons__option--recommended {
+  background: var(--color-brand-accent);
+  border-color: transparent;
+  color: var(--color-text-on-accent);
+}
+
+.crewlet-choice-buttons__option--recommended:hover:not([aria-disabled='true']) {
+  background: var(--color-brand-accent-hover);
+  border-color: transparent;
+}
+
+.crewlet-choice-buttons__option--recommended:active:not([aria-disabled='true']) {
+  background: var(--color-brand-accent-active);
+}
+
+/*
+ * The accent fill draws no edge, and an inset ring on it would be drawn in
+ * nearly the fill's own colour, so its ring stands off it as a primary
+ * button's does.
+ */
+.crewlet-choice-buttons__option--recommended:focus-visible {
+  outline-offset: 2px;
+}
+
+.crewlet-choice-buttons__text {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-choice-buttons__detail {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * On the accent fill the detail takes the label's own ink. The tertiary step
+ * is measured on the surfaces, not on the accent, where it does not clear.
+ */
+.crewlet-choice-buttons__option--recommended .crewlet-choice-buttons__detail {
+  color: var(--color-text-on-accent);
+}
+
+/*
+ * The mark, in the micro-label register. Full ink rather than a faded one:
+ * eleven pixels of white on the accent clears 4.5:1 only at full strength.
+ */
+.crewlet-choice-buttons__note {
+  flex: none;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-choice-buttons__option {
+    transition: none;
+  }
+}

package/dist/Combobox/index.js

@@ -1,5 +1,5 @@
-export { Combobox } from '../chunk-GXYNEDNA.js';
-import '../chunk-6MU7HNB4.js';
+export { Combobox } from '../chunk-4Y7WKXAW.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-FTEJPHBI.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';