@crewlethq/ui 0.75.3 → 0.76.0

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,20 @@ 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.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-5JPID3YI.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-57AKYFML.js';
 import '../chunk-4MJN2KN6.js';
 import '../chunk-WFCWPXJN.js';
-import '../chunk-OXEWUAND.js';
+import '../chunk-E35HYQMK.js';
 import '../chunk-222VILSP.js';
 import '../chunk-FFGEJUAP.js';
 import '../chunk-CLJGFOTV.js';
 import '../chunk-ANTAQAR4.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-FB3TCNQP.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-IVTQWOXV.js';
 import '../chunk-MLDTLZAO.js';
@@ -18,7 +18,7 @@ import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AppShell/index.js

@@ -1,13 +1,13 @@
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-HDLUG3MA.js';
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-UY3FWQWG.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-KNAHKQD4.js';
+import '../chunk-OQG4P5KU.js';
 export { RESIZE_HANDLE_LARGE_STEP, RESIZE_HANDLE_STEP, ResizeHandle, clampSize, useAppShellAside, useAppShellPeek } from '../chunk-PIYJNCN7.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArrangeList/index.js

@@ -1,13 +1,13 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-GAUBP247.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-TKUAGWNR.js';
 import '../chunk-3XDT5ZWL.js';
 import '../chunk-MPVMB2DV.js';
-import '../chunk-EAR2F5OA.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-LMQG3VPG.js';
+import '../chunk-FB3TCNQP.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactBar/index.js

@@ -1,21 +1,21 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-5NFYTQK2.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-IPBSCJIZ.js';
 import '../chunk-25AZQ3GZ.js';
 import '../chunk-I33UIUZD.js';
-import '../chunk-PYJLHHYF.js';
-import '../chunk-ZD52GKKS.js';
+import '../chunk-BKXUZCZX.js';
+import '../chunk-6THG44LI.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-AVL52EME.js';
+import '../chunk-CYQBDZ6M.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-ANTAQAR4.js';
 import '../chunk-MLDTLZAO.js';
-import '../chunk-KNAHKQD4.js';
+import '../chunk-OQG4P5KU.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactCard/index.js

@@ -1,4 +1,4 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-7OFVR7X4.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-ZKLEAK7M.js';
 import '../chunk-BRLZXYPA.js';
 import '../chunk-N2BF272H.js';
 import '../chunk-EJNJMHQG.js';
@@ -8,16 +8,16 @@ import '../chunk-AV2DXAEL.js';
 import '../chunk-BT3GB7HC.js';
 import '../chunk-KTIQSSME.js';
 import '../chunk-NHLNHH4J.js';
-import '../chunk-EAR2F5OA.js';
+import '../chunk-LMQG3VPG.js';
 import '../chunk-DOY3KC6I.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-FB3TCNQP.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactPanel/index.js

@@ -5,7 +5,7 @@ import '../chunk-PIYJNCN7.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.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,21 +1,21 @@
-export { AvatarPicker } from '../chunk-352FPJ2Q.js';
-import '../chunk-SRDZVY5M.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-PYJLHHYF.js';
-import '../chunk-ZD52GKKS.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-KNAHKQD4.js';
+import '../chunk-OQG4P5KU.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.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/Canvas/index.js

@@ -1,4 +1,4 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-EMCVX5FY.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-OBPINJNO.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ANTAQAR4.js';
@@ -6,7 +6,7 @@ import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasBoard/index.js

@@ -1,8 +1,8 @@
-export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-ODAZIKZF.js';
+export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-FQI62PIZ.js';
 import '../chunk-5SZGKSGL.js';
-import '../chunk-SQ7GYC4K.js';
+import '../chunk-KL6A7JGH.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-EMCVX5FY.js';
+import '../chunk-OBPINJNO.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ANTAQAR4.js';
@@ -10,7 +10,7 @@ import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasToolbar/index.js

@@ -1,6 +1,6 @@
-export { CanvasToolbar, toolForKey } from '../chunk-SQ7GYC4K.js';
+export { CanvasToolbar, toolForKey } from '../chunk-KL6A7JGH.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-EMCVX5FY.js';
+import '../chunk-OBPINJNO.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ANTAQAR4.js';
@@ -8,7 +8,7 @@ import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.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,10 +1,10 @@
-export { Checkbox, CheckboxGroup } from '../chunk-EAR2F5OA.js';
-import '../chunk-DCQ2VTBB.js';
+export { Checkbox, CheckboxGroup } from '../chunk-LMQG3VPG.js';
+import '../chunk-FB3TCNQP.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChoiceButtons/ChoiceButtons.d.ts

@@ -19,7 +19,12 @@ export interface ChoiceButtonsProps extends Omit<HTMLAttributes<HTMLDivElement>,
     /** Names the group: "Answers". */
     label: string;
     options: readonly ChoiceButtonOption[];
-    /** The option the asker recommends: drawn first, filled, and marked. */
+    /**
+     * The option the asker recommends: drawn first and marked, and filled with
+     * the accent while the options send rather than toggle (`chosen` left out).
+     * As toggles it is drawn plain with its mark kept, so the chosen option is
+     * always the most prominent one.
+     */
     recommended?: string | null | undefined;
     /** The mark on the recommended option, read as part of its name. */
     recommendedLabel?: string | undefined;
@@ -31,8 +36,10 @@ export interface ChoiceButtonsProps extends Omit<HTMLAttributes<HTMLDivElement>,
      * The option already applied, for options that stay on screen after a
      * press (a suggestion that updated a field). Given, every option is a
      * toggle button that says whether it is the one applied, and that one is
-     * drawn chosen: the selected edge and fill, never the accent. `null` when
-     * none is; left out, the options send and say nothing of a choice.
+     * drawn chosen: the selected fill inside an edge in the accent's ink, with a
+     * check mark. The recommended option leaves the accent fill and keeps its
+     * mark. `null` when none is; left out, the options send and say nothing of
+     * a choice.
      */
     chosen?: string | null | undefined;
     /**

package/dist/ChoiceButtons/index.js

@@ -1,3 +1,3 @@
-export { ChoiceButtons } from '../chunk-C3SCONKY.js';
+export { ChoiceButtons } from '../chunk-RVSNBUIU.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChoiceButtons-3MJQAHHA.css → ChoiceButtons-T3GG6VLG.css}

@@ -5,6 +5,11 @@
  * 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.
+ *
+ * AS TOGGLES (`chosen` given, so every option carries `aria-pressed`) the
+ * accent is the chosen option's alone: the recommended one is drawn plain with
+ * its mark kept, so an answer that went against the recommendation never shows
+ * the option NOT chosen as the loudest one on the screen.
  */
 
 .crewlet-choice-buttons {
@@ -20,7 +25,6 @@
 
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--spacing-3);
   min-width: 0;
   min-height: var(--size-control-lg);
@@ -65,13 +69,21 @@
 }
 
 /*
- * THE OPTION APPLIED is drawn as every chosen option in the package is: the
- * selected edge over the soft selected fill, calm beside the focus ring, and
- * held under the pointer so a hover never makes it look unchosen.
+ * THE OPTION APPLIED stands on the soft selected fill inside an edge in the
+ * accent's ink, with a check mark in the same ink, held under the pointer and
+ * the press so neither makes it look unchosen.
+ *
+ * The edge is the accent's INK, not the selected edge the package's other
+ * chosen options draw. That edge is a tint, as low as 1.65:1 against this fill
+ * (dark, on the raised rung), and here the edge is what tells a pressed toggle
+ * from the others, which WCAG 1.4.11 holds to 3:1. The ink clears 4.71:1 at
+ * its tightest (light, on the frame), and the check mark makes the state more
+ * than a colour.
  */
 .crewlet-choice-buttons__option.is-chosen,
-.crewlet-choice-buttons__option.is-chosen:hover {
-  border-color: var(--color-border-selected);
+.crewlet-choice-buttons__option.is-chosen:hover,
+.crewlet-choice-buttons__option.is-chosen:active {
+  border-color: var(--color-brand-accent-ink);
   background: var(--color-surface-selected);
 }
 
@@ -93,7 +105,7 @@
   cursor: progress;
 }
 
-.crewlet-choice-buttons__option--recommended {
+.crewlet-choice-buttons__option--recommended:not([aria-pressed]) {
   background: var(--color-brand-accent);
   border-color: transparent;
   color: var(--color-text-on-accent);
@@ -106,12 +118,12 @@
   --crewlet-inline-ref-mark-ink: currentColor;
 }
 
-.crewlet-choice-buttons__option--recommended:hover:not([aria-disabled='true']) {
+.crewlet-choice-buttons__option--recommended:not([aria-pressed]):hover:not([aria-disabled='true']) {
   background: var(--color-brand-accent-hover);
   border-color: transparent;
 }
 
-.crewlet-choice-buttons__option--recommended:active:not([aria-disabled='true']) {
+.crewlet-choice-buttons__option--recommended:not([aria-pressed]):active:not([aria-disabled='true']) {
   background: var(--color-brand-accent-active);
 }
 
@@ -120,33 +132,18 @@
  * 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 {
+.crewlet-choice-buttons__option--recommended:not([aria-pressed]):focus-visible {
   outline-offset: 2px;
 }
 
 /*
- * THE RECOMMENDED OPTION, CHOSEN, is drawn as every chosen option is: the
- * selected edge over the soft selected fill, in the primary ink, its mark kept
- * so a reader still sees which option was recommended. The chosen rule swapped
- * the accent fill for the soft one and left the accent's own ink behind, white
- * on a pale tint, under 1.5:1 in the light theme. Held under the pointer and
- * the press too, which otherwise bring the accent back.
+ * The words take the room the option has to spare, so the recommended mark and
+ * the check mark after them sit together at the far end, and a picture before
+ * them keeps its place at the start.
  */
-.crewlet-choice-buttons__option--recommended.is-chosen,
-.crewlet-choice-buttons__option--recommended.is-chosen:hover:not([aria-disabled='true']),
-.crewlet-choice-buttons__option--recommended.is-chosen:active:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  background: var(--color-surface-selected);
-  color: var(--color-text-primary);
-}
-
-/* Off the accent, the ring is drawn over the selected edge again. */
-.crewlet-choice-buttons__option--recommended.is-chosen:focus-visible {
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
 .crewlet-choice-buttons__text {
   display: grid;
+  flex: 1 1 auto;
   gap: 2px;
   min-width: 0;
   overflow-wrap: anywhere;
@@ -162,15 +159,10 @@
  * 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 {
+.crewlet-choice-buttons__option--recommended:not([aria-pressed]) .crewlet-choice-buttons__detail {
   color: var(--color-text-on-accent);
 }
 
-/* Chosen, it is off the accent, and the detail takes its tertiary step again. */
-.crewlet-choice-buttons__option--recommended.is-chosen .crewlet-choice-buttons__detail {
-  color: var(--color-text-tertiary);
-}
-
 /*
  * 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.
@@ -183,8 +175,12 @@
   text-transform: uppercase;
 }
 
-/* The picture before the words, centred on the label's line. */
-.crewlet-choice-buttons__media {
+/*
+ * The picture before the words and the check mark at the far end, each
+ * centred on the label's line.
+ */
+.crewlet-choice-buttons__media,
+.crewlet-choice-buttons__check {
   display: inline-flex;
   flex: none;
   align-items: center;
@@ -193,22 +189,22 @@
 
 /*
  * With a detail under it the label's line is the FIRST line, not the
- * option's middle, so the picture stands on a box one line tall at the top.
- * Centred on the label and its detail together, a suggestion's swatch sat
- * 7px under the value it shows.
+ * option's middle, so the picture and the check mark stand on a box one line
+ * tall at the top. Centred on the label and its detail together, a
+ * suggestion's swatch sat 7px under the value it shows.
  */
-.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) .crewlet-choice-buttons__media {
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) .crewlet-choice-buttons__media,
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) .crewlet-choice-buttons__check {
   align-self: flex-start;
   min-height: calc(var(--crewlet-choice-buttons-leading) * 1em);
 }
 
-/* Before the words, not at the far end with the recommended mark. */
-.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) {
-  justify-content: flex-start;
-}
-
-.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) .crewlet-choice-buttons__note {
-  margin-inline-start: auto;
+/*
+ * The chosen option's check mark, at the label's size and in the edge's ink,
+ * which clears the 3:1 a mark has to on the selected fill in every theme.
+ */
+.crewlet-choice-buttons__check {
+  color: var(--color-brand-accent-ink);
 }
 
 /*

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';