@crewlethq/ui 0.75.4 → 0.76.1

package/README.md

@@ -42,7 +42,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | ---- | ---------- |
 | Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `DownloadButton`, `Kbd` |
 | Content and text | `Text` (the eight registers and `inherit`), `Prose`, `Statement`, `Document`, `DocumentTitle` and `DocumentTitleField`, the Markdown grammar (`parseMarkdown`, `parseMarkdownSpans`, `markdownInline`, `safeHref` and the line readers, with no React in it), `Highlight`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime`, `Note`, `Divider` |
-| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `CheckboxGroup`, `ConfirmField`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `TimeRangePicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `Composer`, `MarkdownEditor`, `RichEditor` (with `preloadRichEditor`, and the round trip `roundTripMarkdown` and `canonicalMarkdown` from `@crewlethq/ui/RichEditorMarkdown`) |
+| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `CheckboxGroup`, `ConfirmField`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `TimeRangePicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `ChoiceCards`, `Composer`, `MarkdownEditor`, `RichEditor` (with `preloadRichEditor`, and the round trip `roundTripMarkdown` and `canonicalMarkdown` from `@crewlethq/ui/RichEditorMarkdown`) |
 | Data display | `DataGrid` (with `useDataGridDriving`, `useAnyDataGridDriving` and `countDataGridRows`), `DataTable`, `CopyableCell`, `Table`, the read-only table cells (`TableKeyCell`, `TableNumberCell`, `TableDateCell`, `TableEntityCell`, `TableStatusCell`, `TableTagsCell`, `TableTextCell`), `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `QrCode`, `ObjectHeader`, `FactLine`, `SetByLine`, `Skeleton`, `Eyebrow`, `StatGroup`, `PinTile`, `IconTile`, `SettingsTable` (with `SettingsTable.Row`), `CatalogTile` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, `FilterPill`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
 | Feedback and overlays | `Callout`, `ConflictNote`, `EditingStatus`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
@@ -205,6 +205,26 @@ 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.76.1
+
+**`SetupWizard`'s row of steps on a phone has a name of its own.** While the row hides steps it takes the keyboard to scroll, as a group named by the new `labels.stepsRow` ("All steps, scrolls sideways"), rather than by `stepsLabel` again, which already names the navigation around it and the list inside it.
+
+**The row's edge fade never dims a focus ring.** The row's ring is drawn by a frame around it (`crewlet-setup-wizard__steps-frame`), which the fade does not reach, and a step that takes focus is scrolled clear of the faded edges, by the fade's width (the row's `scroll-padding-inline`), in either direction.
+
+## Changes in 0.76.0
+
+**`ChoiceCards`, choices a person compares.** One answer from a few, each a card of the same lines: a picture (`media`), the choice's name (`label`) and its `tag`; one line of `description`; and a few `facts`, one to a line, each a name and a value, with an optional `tone` drawn as a `StatusDot` beside words that say the state. Cards side by side share every line on a CSS subgrid, so their facts stand level; where subgrid is not supported each card is a plain column. A description row is held only when some card has one, and a card without one keeps it empty. `minCardWidth` is the narrowest a card stands (`md`, 20rem, the default, or `lg`, 24rem), which decides how many share a row. The radios are native, so the arrow keys move the choice; each is named by its choice and tag alone and described by the rest of the card. A card that cannot be chosen (`disabled`) stands on the page's ground with a quiet radio and a muted picture, and says why in `disabledReason`, on its last line or, with `disabledReasonAt`, in place of a fact's value, read with the fact's name. A chosen card lays the selected tint over its raised surface inside an edge in the accent's ink. Under forced colours the radio is the platform's own, the chosen card's edge the system's selection colour and an unavailable card the system's disabled ink. The types are `ChoiceCardsProps`, `ChoiceCardOption`, `ChoiceCardFact` and `ChoiceCardsMinWidth`.
+
+**`ChoiceList` lets one choice be unavailable.** An option takes `disabled` and `disabledReason`: the choice is skipped by the arrows, keeps its words at full contrast, and gives its reason on its detail line in the warning ink, read once, as its radio's description. Element ids now follow each option's position rather than its `value`, so a value holding a space no longer breaks its radio's name.
+
+**`SetupWizard` takes `primaryAction`, and fills its screen.** `primaryAction` is the step's primary action, last in the footer row: its box keeps one width on every step (at least 8rem), so "Create" on the last step moves nothing beside it, and on a phone it takes the whole width of the footer's second row. `footer` is now optional and holds the step's other actions. In a flex column as tall as the view (an `AppShell`'s content) the wizard grows into the room and the footer rests at the bottom on every step, a phone included. On a phone the row of steps is one row that scrolls sideways, with the current step brought to its middle (in either writing direction), an edge that hides steps faded out, and the row reachable by the keyboard and named while it overflows; a thin bar under the position line says how far along. What to change: on a phone the whole-width row now follows `primaryAction` by name rather than whichever action came last, so move the primary action from `footer` to `primaryAction`.
+
+**`Stepper`'s pickable pill is pressed through the 24px target floor**: an invisible band of `--size-target-min` centred on the 20px pill, so the pill does not grow. The pill's height is declared once as `--crewlet-stepper-pill-height`, a supported read-only property for a layout that sizes around a pill.
+
+**`StatusDot`'s size is `--crewlet-status-dot-size`**, declared once, a supported read-only property for a layout that centres the dot on a wrapped line by the same measure.
+
+**A `FormField`'s `labelAction` keeps its own case and letter spacing**, rather than the label's capitals and wide tracking.
+
 ## Changes in 0.73.0
 
 **`RecordChip`, a record named inside a sentence.** A button at the text's own size on its baseline, exactly one line of the text it sits in tall (`line-height: calc(1lh - 2px)` with its hairline, standing at the line's top so a key's mono text never moves the line), drawing the record's key in mono (`code`) or its name (`label`), with an optional kind glyph. It opens a **peek**: a `Popover` dialog named after the record (its key, then its name), with one line of context (`meta`), a body for its facts or rows (`children`) and a foot for the host's own link and downloads (`actions`). Focus moves into the peek; Escape, Tab out or a control that closes it returns focus to the chip, and a press outside closes it. A `code` chip's accessible name is the key and then the record's name ("GOP-11, Android 12 crash ..."); a `label` chip is named by its label alone, and carries its whole text as its `title`, so a pointer reader can read one cut at the line's end.

package/dist/AgentHandoffPanel/index.js

@@ -1,12 +1,12 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-6C6YK75K.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-57AKYFML.js';
 import '../chunk-4MJN2KN6.js';
 import '../chunk-WFCWPXJN.js';
-import '../chunk-5OFRDX66.js';
+import '../chunk-E35HYQMK.js';
 import '../chunk-222VILSP.js';
 import '../chunk-FFGEJUAP.js';
 import '../chunk-CLJGFOTV.js';
 import '../chunk-ANTAQAR4.js';
-import '../chunk-ETSF7SU6.js';
+import '../chunk-FB3TCNQP.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-IVTQWOXV.js';
 import '../chunk-MLDTLZAO.js';

package/dist/ArrangeList/index.js

@@ -1,8 +1,8 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-TWJERLT3.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-TKUAGWNR.js';
 import '../chunk-3XDT5ZWL.js';
 import '../chunk-MPVMB2DV.js';
-import '../chunk-PBCNINMB.js';
-import '../chunk-ETSF7SU6.js';
+import '../chunk-LMQG3VPG.js';
+import '../chunk-FB3TCNQP.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';

package/dist/ArtifactBar/index.js

@@ -1,11 +1,11 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-TKBFRGUV.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-IPBSCJIZ.js';
 import '../chunk-25AZQ3GZ.js';
 import '../chunk-I33UIUZD.js';
-import '../chunk-TYIHFDMP.js';
-import '../chunk-IPUEVTRJ.js';
+import '../chunk-BKXUZCZX.js';
+import '../chunk-6THG44LI.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-AVL52EME.js';
-import '../chunk-WIATRXEJ.js';
+import '../chunk-CYQBDZ6M.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-ANTAQAR4.js';
 import '../chunk-MLDTLZAO.js';

package/dist/ArtifactCard/index.js

@@ -1,4 +1,4 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OOPOQKZZ.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-ZKLEAK7M.js';
 import '../chunk-BRLZXYPA.js';
 import '../chunk-N2BF272H.js';
 import '../chunk-EJNJMHQG.js';
@@ -8,10 +8,10 @@ import '../chunk-AV2DXAEL.js';
 import '../chunk-BT3GB7HC.js';
 import '../chunk-KTIQSSME.js';
 import '../chunk-NHLNHH4J.js';
-import '../chunk-PBCNINMB.js';
+import '../chunk-LMQG3VPG.js';
 import '../chunk-DOY3KC6I.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
-import '../chunk-ETSF7SU6.js';
+import '../chunk-FB3TCNQP.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';

package/dist/AttachmentChip/index.js

@@ -1,6 +1,6 @@
-export { ATTACHMENT_CHIP_LABELS, AttachmentChip } from '../chunk-3N36CYTU.js';
-import '../chunk-I5OIKDX2.js';
-import '../chunk-WIATRXEJ.js';
+export { ATTACHMENT_CHIP_LABELS, AttachmentChip } from '../chunk-2PIH6JHJ.js';
+import '../chunk-VERJCAJ4.js';
+import '../chunk-CYQBDZ6M.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AvatarPicker/index.js

@@ -1,12 +1,12 @@
-export { AvatarPicker } from '../chunk-OXEOC64K.js';
-import '../chunk-AQIFKLXY.js';
+export { AvatarPicker } from '../chunk-ZW5SRQ5M.js';
+import '../chunk-SK5SLGZH.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-I22MUEG7.js';
-import '../chunk-TYIHFDMP.js';
-import '../chunk-IPUEVTRJ.js';
+import '../chunk-BKXUZCZX.js';
+import '../chunk-6THG44LI.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-WIATRXEJ.js';
+import '../chunk-CYQBDZ6M.js';
 import '../chunk-KTIQSSME.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-OQG4P5KU.js';

package/dist/BriefCard/index.js

@@ -1,8 +1,8 @@
-export { BRIEF_CARD_LABELS, BRIEF_CARD_MAX_FOLLOW_UPS, BRIEF_CARD_MAX_NEEDS, BriefCard } from '../chunk-4KSCGXLJ.js';
+export { BRIEF_CARD_LABELS, BRIEF_CARD_MAX_FOLLOW_UPS, BRIEF_CARD_MAX_NEEDS, BriefCard } from '../chunk-5BOFC5OP.js';
 import '../chunk-Y7PVLEZJ.js';
-import '../chunk-NTQPJJAN.js';
-import '../chunk-I5OIKDX2.js';
-import '../chunk-WIATRXEJ.js';
+import '../chunk-RTMNULTL.js';
+import '../chunk-VERJCAJ4.js';
+import '../chunk-CYQBDZ6M.js';
 import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-MLDTLZAO.js';

package/dist/ChangeList/index.js

@@ -1,7 +1,7 @@
-export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from '../chunk-WQRSZMN4.js';
+export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from '../chunk-BBD7PTBG.js';
 import '../chunk-LR4IWUWQ.js';
-import '../chunk-I5OIKDX2.js';
-import '../chunk-WIATRXEJ.js';
+import '../chunk-VERJCAJ4.js';
+import '../chunk-CYQBDZ6M.js';
 import '../chunk-222VILSP.js';
 import '../chunk-IVTQWOXV.js';
 import '../chunk-MLDTLZAO.js';

package/dist/Checkbox/index.js

@@ -1,5 +1,5 @@
-export { Checkbox, CheckboxGroup } from '../chunk-PBCNINMB.js';
-import '../chunk-ETSF7SU6.js';
+export { Checkbox, CheckboxGroup } from '../chunk-LMQG3VPG.js';
+import '../chunk-FB3TCNQP.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';

package/dist/ChoiceCards/ChoiceCards.d.ts

@@ -0,0 +1,80 @@
+import { type ReactNode } from 'react';
+import type { Tone } from '../utils/tone.js';
+/** One short fact on a card: what it needs, how ready that is, how it behaves. */
+export interface ChoiceCardFact {
+    /** The fact's name, a word or two: "Needs", "Isolation". */
+    label: ReactNode;
+    /** The fact: "Docker 24.0.7 found". */
+    value: ReactNode;
+    /** A state the fact reports, drawn as a dot beside it; none for a plain fact. */
+    tone?: Tone | undefined;
+}
+/** One choice in [ChoiceCards]. */
+export interface ChoiceCardOption {
+    /** Stable identity, and what `onChange` is called with. */
+    value: string;
+    /** What the choice is, in a few words: its radio's name, with the tag. */
+    label: ReactNode;
+    /** A picture of the choice before its name: a product's mark, a glyph. Decorative; the label names it. */
+    media?: ReactNode;
+    /** A short word beside the choice's name, read as part of its name: "Company default". */
+    tag?: ReactNode;
+    /** One plain line saying what choosing it means. */
+    description?: ReactNode;
+    /** A few short facts, one to a line under the description, each its name and its value. */
+    facts?: readonly ChoiceCardFact[] | undefined;
+    /** The choice cannot be made now. */
+    disabled?: boolean | undefined;
+    /**
+     * Why not, and what fixes it ("Add E2B_API_KEY to use it"), in the warning
+     * ink and read with its radio: the one way a card gives its reason. It is
+     * the card's last line, or, with `disabledReasonAt`, the value of a fact.
+     */
+    disabledReason?: ReactNode;
+    /**
+     * The index of the fact whose value the reason takes the place of ("Needs:
+     * E2B key not set. Add E2B_API_KEY"), so a card that cannot be chosen keeps
+     * the same lines as the cards beside it rather than growing one.
+     */
+    disabledReasonAt?: number | undefined;
+}
+/** The narrowest a card stands: `md` 20rem, `lg` 24rem. */
+export type ChoiceCardsMinWidth = 'md' | 'lg';
+export interface ChoiceCardsProps {
+    /** Names the group for a screen reader. */
+    label: string;
+    options: readonly ChoiceCardOption[];
+    /** The selected choice's `value`, or null when none is. */
+    value: string | null;
+    onChange: (value: string) => void;
+    /**
+     * The narrowest a card stands, which decides how many share a row: `md`
+     * (20rem) for a short name and facts, `lg` (24rem) for choices with more to
+     * say. A form's column holds one to a row; a wider surface two or three.
+     */
+    minCardWidth?: ChoiceCardsMinWidth | undefined;
+    className?: string | undefined;
+}
+/**
+ * One answer from a few, each a card of the same lines: a picture, the
+ * choice's name and its tag; one line of description; and a few facts, one to
+ * a line. Cards side by side share every line (a subgrid), so the facts of
+ * every card stand level, in a grid that wraps.
+ *
+ * FOR CHOICES A PERSON COMPARES rather than reads down: a product to run, a
+ * place to run it, what a new thing is for. Where each answer is a line of
+ * words, [ChoiceList] is the lighter control.
+ *
+ * NATIVE RADIOS, so the arrow keys move the choice and Tab leaves the group as
+ * the platform does, and each card is its radio's label, so the whole card
+ * takes the pointer. The radio is NAMED by the choice's name and tag alone
+ * and DESCRIBED by the rest (the description, the facts, the reason): named by
+ * the whole card, it was read as some twenty-five words on every arrow press,
+ * a link's words among them. A disabled card is skipped by the arrows, keeps
+ * its words at full contrast, and says why it is unavailable and what fixes
+ * it, because a choice greyed out with no reason is a dead end.
+ *
+ * A FACT'S STATE IS NEVER ONLY A COLOUR: the dot sits beside words that say
+ * it ("Docker 24.0.7 found", "E2B key not set").
+ */
+export declare function ChoiceCards({ label, options, value, onChange, minCardWidth, className }: ChoiceCardsProps): import("react").JSX.Element;

package/dist/ChoiceCards/index.d.ts

@@ -0,0 +1,3 @@
+import './ChoiceCards.css';
+export { ChoiceCards } from './ChoiceCards.js';
+export type { ChoiceCardFact, ChoiceCardOption, ChoiceCardsMinWidth, ChoiceCardsProps } from './ChoiceCards.js';

package/dist/ChoiceCards/index.js

@@ -0,0 +1,3 @@
+export { ChoiceCards } from '../chunk-MKFEVHSR.js';
+import '../chunk-CYQBDZ6M.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ChoiceCards-HAGJMK6Q.css

@@ -0,0 +1,318 @@
+/*
+ * Choices a person compares, as cards in a grid that wraps. The chosen card
+ * takes the selected fill and the strong boundary, as a chosen ChoiceList row
+ * does; the radio stays the mark, drawn in the card's corner; and no card is
+ * ringed in the accent except by the focus ring itself.
+ *
+ * ONE LINE A ROW, THE SAME ROWS IN EVERY CARD: the picture, the name and its
+ * tag on the first; the description on the second; then each fact on a line
+ * of its own, its name and its value; and a reason line where any card has
+ * one. Every card spans the same rows of the group's grid and lays its lines
+ * on them as a subgrid, so cards side by side share each row: a description
+ * that wraps in one card moves the facts of all of them, and Runs stays level
+ * with Runs. Facts run together as one line of meta wrapped differently in
+ * each card, and three cards read as three different shapes.
+ *
+ * A card is at least 20rem (24rem at `lg`), the width a fact's name and a
+ * short value keep to one line in: a form's column holds one to a row, and a
+ * wider surface two or three, aligned.
+ */
+.crewlet-choice-cards {
+  --crewlet-choice-cards-min: 20rem;
+  --crewlet-choice-cards-radio: 16px;
+  /* How many rows a card spans, set from the options: the name, the description, the most facts, a reason. */
+  --crewlet-choice-cards-rows: 3;
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, var(--crewlet-choice-cards-min)), 1fr)
+  );
+  grid-auto-rows: auto;
+  column-gap: var(--spacing-3);
+  row-gap: 0;
+}
+
+.crewlet-choice-cards--lg {
+  --crewlet-choice-cards-min: 24rem;
+}
+
+/*
+ * THE CARD is a column of its lines. The space under a card is its margin,
+ * the gap between one row of cards and the next; the lines inside a card keep
+ * their own, smaller gap.
+ *
+ * Its first line is as tall as the largest picture a card set draws (a
+ * product's mark), so the radio and every name sit on one line whatever
+ * picture each card has.
+ */
+.crewlet-choice-cards__card {
+  --crewlet-choice-cards-title: var(--size-control-sm);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  margin-block-end: var(--spacing-3);
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  cursor: pointer;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-choice-cards__card:hover {
+  background: var(--color-surface-hover);
+}
+
+/*
+ * THE CHOSEN CARD wears the soft selected tint laid OVER the raised surface,
+ * inside an edge in the accent's ink, as a chosen ChoiceButtons option does.
+ * The tint is translucent: laid on its own it let the page's ground through,
+ * darker than the raised cards beside it in dark, and the chosen card looked
+ * recessed. The edge is the accent's ink rather than the strong border,
+ * because the edge is what tells the chosen card from the others at 3:1.
+ */
+.crewlet-choice-cards__card.is-checked {
+  border-color: var(--color-brand-accent-ink);
+  background-color: var(--color-surface-elevated);
+  background-image: linear-gradient(var(--color-surface-selected), var(--color-surface-selected));
+}
+
+/*
+ * A CARD THAT CANNOT BE CHOSEN stands on the page's own ground and takes no
+ * hover: the subtle surface it took is brighter than the raised one in light,
+ * so the card that could not be chosen read as the most inviting. Its radio is
+ * drawn quiet, as ChoiceList's disabled radio is, and its picture muted; its
+ * words stay at full contrast, and its reason says why.
+ */
+.crewlet-choice-cards__card.is-disabled {
+  cursor: not-allowed;
+  background: transparent;
+}
+
+.crewlet-choice-cards__card.is-disabled:hover {
+  background: transparent;
+}
+
+.crewlet-choice-cards__card.is-disabled .crewlet-choice-cards__radio {
+  border-color: var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-choice-cards__card.is-disabled .crewlet-choice-cards__media {
+  color: var(--color-text-tertiary);
+  filter: grayscale(1);
+}
+
+/* The ring sits inside the card's own box, over its border, rather than a second line beside it. */
+.crewlet-choice-cards__card:has(.crewlet-choice-cards__radio:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The radio, drawn in the card's top end and centred on the first line: an empty ring, or the accent ring round an accent dot. */
+.crewlet-choice-cards__radio {
+  appearance: none;
+  position: absolute;
+  inset-block-start: calc(var(--spacing-3) + (var(--crewlet-choice-cards-title) - var(--crewlet-choice-cards-radio)) / 2);
+  inset-inline-end: var(--spacing-3);
+  display: inline-grid;
+  place-content: center;
+  width: var(--crewlet-choice-cards-radio);
+  height: var(--crewlet-choice-cards-radio);
+  margin: 0;
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-circle);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-choice-cards__radio:checked {
+  border-color: var(--color-brand-accent);
+}
+
+.crewlet-choice-cards__radio:checked::after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-circle);
+  background: var(--color-brand-accent);
+}
+
+/*
+ * THE CARD DRAWS THE RING (above), so the radio's own is transparent rather
+ * than off: invisible beside the card's, and still a ring where forced-colors
+ * mode repaints every outline in the system's colour.
+ */
+.crewlet-choice-cards__radio:focus-visible {
+  outline: 2px solid transparent;
+}
+
+/* The first line: the picture, the name and its tag, stopping short of the radio. */
+.crewlet-choice-cards__title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  grid-row: 1;
+  min-width: 0;
+  min-height: var(--crewlet-choice-cards-title);
+  padding-inline-end: calc(var(--spacing-2) + var(--crewlet-choice-cards-radio));
+}
+
+.crewlet-choice-cards__media {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-choice-cards__tag {
+  padding: 0 var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+/* On the chosen card's tint the default edge all but vanishes in light, so the tag takes the strong one. */
+.crewlet-choice-cards__card.is-checked .crewlet-choice-cards__tag {
+  border-color: var(--color-border-strong);
+}
+
+.crewlet-choice-cards__label {
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+/*
+ * The second row is the description's in every card once any card has one: a
+ * card without one keeps an empty cell there, so its facts stay level with
+ * the facts beside them.
+ */
+.crewlet-choice-cards__description {
+  grid-row: 2;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+/* The facts give each of their lines to the card's grid, one row a fact. */
+.crewlet-choice-cards__facts {
+  display: contents;
+}
+
+/*
+ * A fact: its name in the quiet ink, then its value, on one line while there
+ * is room. Its two parts share one size and line height and align to the top,
+ * so a fact with a dot is no taller than one without: aligned on a baseline,
+ * the dot (a box with no text) gave the line a baseline of its own and the
+ * Needs line stood a pixel taller than Runs.
+ */
+.crewlet-choice-cards__fact {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-choice-cards__fact-label {
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-choice-cards__fact-value {
+  min-width: 0;
+  color: var(--color-text-secondary);
+}
+
+/*
+ * A FACT WRAPS RATHER THAN CLIPS. A StatusDot is one line and its word gives
+ * way with an ellipsis, which is right in a table cell and wrong here: a
+ * fact is read to choose between the cards, and a narrow card cut "Docker
+ * 24.0.7 found" to "Docker 24.0..." with nothing to reveal the rest. The word
+ * wraps under itself, and the dot stays on the first line's centre, where it
+ * sat while the fact was one line.
+ */
+.crewlet-choice-cards__fact-value > .crewlet-status {
+  display: flex;
+  align-items: flex-start;
+}
+
+.crewlet-choice-cards__fact-value > .crewlet-status > .crewlet-status-dot {
+  margin-block-start: calc((1lh - var(--crewlet-status-dot-size)) / 2);
+}
+
+.crewlet-choice-cards__fact-value > .crewlet-status > .crewlet-status__label {
+  overflow: visible;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+/* A reason given on a fact's line (`disabledReasonAt`) takes that line's value, in the same ink. */
+.crewlet-choice-cards__fact.is-reason .crewlet-choice-cards__fact-value {
+  color: var(--color-feedback-warning-ink);
+}
+
+/* The reason a disabled card cannot be chosen: the card's last row, in the warning ink. */
+.crewlet-choice-cards__reason {
+  grid-row: -2;
+  color: var(--color-feedback-warning-ink);
+  font-size: var(--font-size-xs);
+}
+
+
+/*
+ * WHERE SUBGRID IS SUPPORTED, every card spans the same rows of the group and
+ * takes them from it, so a row is as tall as its tallest line across the cards
+ * beside it and their facts stand level. Elsewhere each card stays the plain
+ * column above: its lines still read in order, only not level with the next
+ * card's.
+ */
+@supports (grid-template-rows: subgrid) {
+  .crewlet-choice-cards__card {
+    display: grid;
+    grid-row: span var(--crewlet-choice-cards-rows);
+    grid-template-rows: subgrid;
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--spacing-1);
+    align-content: start;
+  }
+}
+
+/*
+ * UNDER FORCED COLOURS the system repaints every colour above, so the drawn
+ * radio's dot and the tint vanish together: the radio becomes the platform's
+ * own, which marks itself; the chosen card's edge takes the system's
+ * selection colour, twice as wide; and a card that cannot be chosen takes the
+ * system's disabled ink, edge and words, rather than reading as one that can.
+ */
+@media (forced-colors: active) {
+  .crewlet-choice-cards__radio {
+    appearance: auto;
+  }
+
+  .crewlet-choice-cards__card.is-checked {
+    border-width: 2px;
+    border-color: Highlight;
+  }
+
+  .crewlet-choice-cards__card.is-disabled {
+    border-color: GrayText;
+    color: GrayText;
+  }
+
+  .crewlet-choice-cards__card.is-disabled :is(.crewlet-choice-cards__label, .crewlet-choice-cards__description, .crewlet-choice-cards__fact-label, .crewlet-choice-cards__fact-value) {
+    color: GrayText;
+  }
+}
+
+/* The border's ease into its hover and checked inks is held for a reader who asked for no motion. */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-choice-cards__card {
+    transition: none;
+  }
+}

package/dist/ChoiceList/ChoiceList.d.ts

@@ -24,6 +24,14 @@ export interface ChoiceListOption {
      * "Something else" choice opens.
      */
     panel?: ReactNode;
+    /** This choice cannot be made now; the rest of the list can. */
+    disabled?: boolean | undefined;
+    /**
+     * Why not, and what fixes it, on the choice's detail line while it is
+     * disabled, and read with the radio as its description. A choice greyed out
+     * with no reason is a dead end.
+     */
+    disabledReason?: ReactNode;
 }
 export interface ChoiceListProps {
     options: readonly ChoiceListOption[];
@@ -44,7 +52,8 @@ export interface ChoiceListProps {
  *
  * NATIVE RADIOS, so the arrow keys move the choice and Tab leaves the group as
  * the platform does, and every row is its radio's label, so the whole row
- * takes the pointer. A choice's `panel` is drawn under it only while it is
+ * takes the pointer. A disabled choice is skipped by the arrows, keeps its
+ * words at full contrast, and says why on its detail line. A choice's `panel` is drawn under it only while it is
  * selected, which is how a list ends in "Something else" with a field of its
  * own without a second control beside the list.
  */

package/dist/ChoiceList/index.js

@@ -1,3 +1,3 @@
-export { ChoiceList } from '../chunk-NQABJAUY.js';
+export { ChoiceList } from '../chunk-6RW2MUTY.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChoiceList-Q772QLFX.css → ChoiceList-JN4PPNFW.css}

@@ -101,10 +101,22 @@
   background: var(--color-surface-selected);
 }
 
-.crewlet-choice-list.is-disabled .crewlet-choice-list__row {
+.crewlet-choice-list.is-disabled .crewlet-choice-list__row,
+.crewlet-choice-list__row.is-disabled {
   cursor: not-allowed;
 }
 
+/* A choice that cannot be made takes no hover: the ground would offer it. */
+.crewlet-choice-list__row.is-disabled:hover {
+  background: none;
+}
+
+/* Its ring is drawn on the quiet boundary and ground; its words stay at full contrast. */
+.crewlet-choice-list__row.is-disabled .crewlet-choice-list__radio {
+  border-color: var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
 /*
  * THE RADIO IS DRAWN, not the platform's. In a dark palette the platform's
  * own radio fills an unchosen answer with a grey disc, which beside the one
@@ -163,6 +175,15 @@
   overflow-wrap: anywhere;
 }
 
+/* Why a disabled choice cannot be made, after its detail on the same line, in the warning ink. */
+.crewlet-choice-list__reason {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-choice-list__detail > .crewlet-choice-list__reason:not(:first-child) {
+  margin-inline-start: var(--spacing-2);
+}
+
 /* A tag says something ABOUT an answer ("Suggested"), so it is set in the
    tertiary ink: in the accent ink it was a second accent mark on the chosen
    row, beside the radio and the fill that already say which one is chosen. */