@crewlethq/ui 0.75.2 → 0.75.4

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-FXMYDXCI.js';
+export { ChoiceButtons } from '../chunk-RVSNBUIU.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChoiceButtons-G7XHZKDP.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,12 +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 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__text {
   display: grid;
+  flex: 1 1 auto;
   gap: 2px;
   min-width: 0;
   overflow-wrap: anywhere;
@@ -141,7 +159,7 @@
  * 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);
 }
 
@@ -157,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;
@@ -167,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/DataView/index.js

@@ -4,9 +4,9 @@ import '../chunk-K4LZXSKZ.js';
 import '../chunk-BWFJB5JD.js';
 import '../chunk-HPI5J6AR.js';
 import '../chunk-C667GCU7.js';
-import '../chunk-7KHM2FZH.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-7KHM2FZH.js';
 import '../chunk-EE3DJMSQ.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-KHJIEPZV.js';

package/dist/ShareDialog/index.js

@@ -1,10 +1,10 @@
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-Q2T4L6ML.js';
 import '../chunk-VK45YJLH.js';
 import '../chunk-C667GCU7.js';
-import '../chunk-7KHM2FZH.js';
 import '../chunk-T5GBTXNC.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-7KHM2FZH.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-N2BF272H.js';
 import '../chunk-BT3GB7HC.js';

package/dist/{chunk-FXMYDXCI.js → chunk-RVSNBUIU.js}

@@ -1,7 +1,8 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ChoiceButtons-G7XHZKDP.css';
+import './ChoiceButtons-T3GG6VLG.css';
 import { useId } from 'react';
+import { CheckGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function ChoiceButtons({
@@ -65,7 +66,8 @@ function ChoiceButtons({
                 isRecommended ? /* @__PURE__ */ jsxs(Fragment, { children: [
                   " ",
                   /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__note", children: recommendedLabel })
-                ] }) : null
+                ] }) : null,
+                isChosen ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CheckGlyph, {}) }) : null
               ]
             },
             option.value

package/dist/generated/index.js

@@ -3,8 +3,8 @@ export { WidgetFrame } from '../chunk-S5QJZOPL.js';
 export { ElementToPngError, elementToPng, parseCsv, serializeElement, toCsv } from '../chunk-FEJANUZK.js';
 export { TreeCanvas } from '../chunk-JQEXAH7G.js';
 export { TypeSpecimen } from '../chunk-JKAFEFFC.js';
-export { REFERENCE_NAME_PATTERN, ValueField, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf } from '../chunk-BWAUL5MB.js';
 export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-EOXI3CRG.js';
+export { REFERENCE_NAME_PATTERN, ValueField, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf } from '../chunk-BWAUL5MB.js';
 export { VersionTimeline } from '../chunk-53J2YNQA.js';
 export { ThemeToggle } from '../chunk-IPMJGK2Q.js';
 export { ThinkingIndicator } from '../chunk-M73MMEZY.js';
@@ -40,10 +40,10 @@ export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } f
 export { Select } from '../chunk-VK45YJLH.js';
 export { RichEditor, preloadRichEditor } from '../chunk-JPQSVECQ.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-2DMTW2Y3.js';
-export { canonicalMarkdown, roundTripMarkdown } from '../chunk-GBASM5EV.js';
-import '../chunk-7CSTEH5I.js';
-export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-DGSK4LLS.js';
 export { RUN_STATES, RunChip } from '../chunk-PIAGTZY3.js';
+export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-DGSK4LLS.js';
+export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from '../chunk-JXJNX7QQ.js';
+export { Table } from '../chunk-75NQV4R4.js';
 export { SearchTrigger } from '../chunk-ERNT3UTB.js';
 export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-G4CGDUCP.js';
 export { NavGroup, NavItem, SidebarNav } from '../chunk-WCDPFTJZ.js';
@@ -52,8 +52,8 @@ export { REFUSAL_CARD_LABELS, RefusalCard } from '../chunk-RQHN4J5P.js';
 export { RelatedRow } from '../chunk-CNEHFH2A.js';
 export { Text } from '../chunk-QP2P6GDQ.js';
 export { ReviewList } from '../chunk-DO4J4TBZ.js';
-export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from '../chunk-JXJNX7QQ.js';
-export { Table } from '../chunk-75NQV4R4.js';
+export { canonicalMarkdown, roundTripMarkdown } from '../chunk-GBASM5EV.js';
+import '../chunk-7CSTEH5I.js';
 export { PricingCard } from '../chunk-ZKIEOWR6.js';
 export { PrincipalPicker } from '../chunk-NU5RUT7Y.js';
 export { PropertyList } from '../chunk-HIWPPWNY.js';
@@ -78,22 +78,22 @@ export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, lay
 export { OrgLabel } from '../chunk-LM6VYJTV.js';
 export { Outline, scrollToHeading, useActiveHeading } from '../chunk-A5YKNRG6.js';
 export { PageNote } from '../chunk-CV4NES3P.js';
-export { MessageBubble } from '../chunk-KAQ2L74F.js';
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-3WN5HUAK.js';
+export { MessageBubble } from '../chunk-KAQ2L74F.js';
 export { NewItemsNotice } from '../chunk-463DNZXI.js';
-export { ListInput, withDraft } from '../chunk-H32JW6CZ.js';
+export { ListDetail } from '../chunk-YBC2CYPD.js';
 export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from '../chunk-DPNVKWJX.js';
 export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MARGIN, LIVE_PREVIEW_MAX, LIVE_PREVIEW_MAX_FRAMES, LIVE_PREVIEW_RENDER_MS, LIVE_PREVIEW_STILLS_KEPT, LivePreview, LivePreviewBudgetProvider, PREVIEW_FILL_MAX_CUT, PreviewScale, createLivePreviewBudget, createLivePreviewStills, immediately, perFrame, useLivePreview } from '../chunk-CQFQGAZI.js';
 export { LockedLabel } from '../chunk-TEV5REGB.js';
-import '../chunk-KOJPDCGQ.js';
 export { LogoSlot, LogoSlotGroup } from '../chunk-YUHKRRWO.js';
+import '../chunk-KOJPDCGQ.js';
 export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-ERFXYGRF.js';
 export { LAYERS_LIST_LABELS, LayersList } from '../chunk-VUYNNILP.js';
 export { AutoGrid, Inline, Spacer, Stack } from '../chunk-ZAC7SKUN.js';
 export { Link } from '../chunk-QF5UNP4T.js';
 export { LinkInterstitial, openExternal } from '../chunk-JD7P2GJP.js';
 export { List, ListItem } from '../chunk-PS5ZYIA6.js';
-export { ListDetail } from '../chunk-YBC2CYPD.js';
+export { ListInput, withDraft } from '../chunk-H32JW6CZ.js';
 export { ImageUpload } from '../chunk-ZQEJSEPS.js';
 export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-QPHD4UUG.js';
 export { IndicatorAnchor } from '../chunk-27MJPU7G.js';
@@ -139,26 +139,26 @@ export { FILTER_PILL_LABELS, FILTER_PILL_WORDS_CLASS, FilterPill, filterPillSent
 export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-BWFJB5JD.js';
 export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-R6K62EXV.js';
 export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-HPI5J6AR.js';
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-AB6F5YXX.js';
 export { CommandPalette } from '../chunk-NXNLAZPK.js';
 export { ConfirmModal, Modal } from '../chunk-C667GCU7.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-AB6F5YXX.js';
 export { ConfirmField, confirmMatches } from '../chunk-JVII5264.js';
 export { InlineCode } from '../chunk-PLL7ZJHY.js';
 export { CONFLICT_NOTE_LABELS, ConflictNote } from '../chunk-B3PK2LND.js';
 export { Container } from '../chunk-HJO4WCH6.js';
 export { ContrastHelp } from '../chunk-IO374IX6.js';
 export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-KWLH45YC.js';
-export { ChoiceButtons } from '../chunk-FXMYDXCI.js';
+export { ChoiceButtons } from '../chunk-RVSNBUIU.js';
 export { ChoiceList } from '../chunk-NQABJAUY.js';
 export { CodeBlock } from '../chunk-QSWQJX27.js';
-export { ColorField } from '../chunk-7LSSYHOT.js';
 export { ColorChip } from '../chunk-C6T4VBEY.js';
-export { Combobox } from '../chunk-ZUBFVK6B.js';
-export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, useOptionKeys } from '../chunk-7KHM2FZH.js';
+export { ColorField } from '../chunk-7LSSYHOT.js';
 export { ColorSwatch } from '../chunk-6FBPFG3C.js';
 export { CopyButton, Copyable } from '../chunk-T5GBTXNC.js';
 export { useClipboard, writeClipboard } from '../chunk-STJ7QBC3.js';
 export { useOutcome } from '../chunk-DTIW4CHZ.js';
+export { Combobox } from '../chunk-ZUBFVK6B.js';
+export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, useOptionKeys } from '../chunk-7KHM2FZH.js';
 export { CatalogTile } from '../chunk-QE4OIE3Q.js';
 export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from '../chunk-WQRSZMN4.js';
 export { DIFF_LIST_LABELS, DiffList } from '../chunk-LR4IWUWQ.js';
@@ -231,7 +231,6 @@ export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
 export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-QTMUKRTN.js';
 export { EmptyState } from '../chunk-PPUR46MK.js';
 export { Accordion, AccordionItem } from '../chunk-5NJMSYDZ.js';
-export { ADD_PILL_MS, AddPill } from '../chunk-CVKANYHD.js';
 export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-6C6YK75K.js';
 export { Timeline, TimelineItem } from '../chunk-4MJN2KN6.js';
 export { Section } from '../chunk-WFCWPXJN.js';
@@ -245,6 +244,7 @@ export { CHARACTER_COUNT_LABELS, CHARACTER_COUNT_NEAR, CharacterCount, character
 export { DisclosureAnatomy } from '../chunk-IVTQWOXV.js';
 export { Count } from '../chunk-MLDTLZAO.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
+export { ADD_PILL_MS, AddPill } from '../chunk-CVKANYHD.js';
 export { Announcer, announce, useAnnouncer } from '../chunk-2G355KDJ.js';
 export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-UY3FWQWG.js';
 export { useMediaMatch } from '../chunk-RTPQDNW3.js';

package/dist/index.js

@@ -3,8 +3,8 @@ export { WidgetFrame } from './chunk-S5QJZOPL.js';
 export { ElementToPngError, elementToPng, parseCsv, serializeElement, toCsv } from './chunk-FEJANUZK.js';
 export { TreeCanvas } from './chunk-JQEXAH7G.js';
 export { TypeSpecimen } from './chunk-JKAFEFFC.js';
-export { REFERENCE_NAME_PATTERN, ValueField, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf } from './chunk-BWAUL5MB.js';
 export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from './chunk-EOXI3CRG.js';
+export { REFERENCE_NAME_PATTERN, ValueField, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf } from './chunk-BWAUL5MB.js';
 export { VersionTimeline } from './chunk-53J2YNQA.js';
 export { ThemeToggle } from './chunk-IPMJGK2Q.js';
 export { ThinkingIndicator } from './chunk-M73MMEZY.js';
@@ -40,10 +40,10 @@ export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } f
 export { Select } from './chunk-VK45YJLH.js';
 export { RichEditor, preloadRichEditor } from './chunk-JPQSVECQ.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from './chunk-2DMTW2Y3.js';
-export { canonicalMarkdown, roundTripMarkdown } from './chunk-GBASM5EV.js';
-import './chunk-7CSTEH5I.js';
-export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from './chunk-DGSK4LLS.js';
 export { RUN_STATES, RunChip } from './chunk-PIAGTZY3.js';
+export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from './chunk-DGSK4LLS.js';
+export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from './chunk-JXJNX7QQ.js';
+export { Table } from './chunk-75NQV4R4.js';
 export { SearchTrigger } from './chunk-ERNT3UTB.js';
 export { SectionFrame, SectionFrameBody, SectionFrameNav } from './chunk-G4CGDUCP.js';
 export { NavGroup, NavItem, SidebarNav } from './chunk-WCDPFTJZ.js';
@@ -52,8 +52,8 @@ export { REFUSAL_CARD_LABELS, RefusalCard } from './chunk-RQHN4J5P.js';
 export { RelatedRow } from './chunk-CNEHFH2A.js';
 export { Text } from './chunk-QP2P6GDQ.js';
 export { ReviewList } from './chunk-DO4J4TBZ.js';
-export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from './chunk-JXJNX7QQ.js';
-export { Table } from './chunk-75NQV4R4.js';
+export { canonicalMarkdown, roundTripMarkdown } from './chunk-GBASM5EV.js';
+import './chunk-7CSTEH5I.js';
 export { PricingCard } from './chunk-ZKIEOWR6.js';
 export { PrincipalPicker } from './chunk-NU5RUT7Y.js';
 export { PropertyList } from './chunk-HIWPPWNY.js';
@@ -78,22 +78,22 @@ export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, lay
 export { OrgLabel } from './chunk-LM6VYJTV.js';
 export { Outline, scrollToHeading, useActiveHeading } from './chunk-A5YKNRG6.js';
 export { PageNote } from './chunk-CV4NES3P.js';
-export { MessageBubble } from './chunk-KAQ2L74F.js';
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from './chunk-3WN5HUAK.js';
+export { MessageBubble } from './chunk-KAQ2L74F.js';
 export { NewItemsNotice } from './chunk-463DNZXI.js';
-export { ListInput, withDraft } from './chunk-H32JW6CZ.js';
+export { ListDetail } from './chunk-YBC2CYPD.js';
 export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from './chunk-DPNVKWJX.js';
 export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MARGIN, LIVE_PREVIEW_MAX, LIVE_PREVIEW_MAX_FRAMES, LIVE_PREVIEW_RENDER_MS, LIVE_PREVIEW_STILLS_KEPT, LivePreview, LivePreviewBudgetProvider, PREVIEW_FILL_MAX_CUT, PreviewScale, createLivePreviewBudget, createLivePreviewStills, immediately, perFrame, useLivePreview } from './chunk-CQFQGAZI.js';
 export { LockedLabel } from './chunk-TEV5REGB.js';
-import './chunk-KOJPDCGQ.js';
 export { LogoSlot, LogoSlotGroup } from './chunk-YUHKRRWO.js';
+import './chunk-KOJPDCGQ.js';
 export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from './chunk-ERFXYGRF.js';
 export { LAYERS_LIST_LABELS, LayersList } from './chunk-VUYNNILP.js';
 export { AutoGrid, Inline, Spacer, Stack } from './chunk-ZAC7SKUN.js';
 export { Link } from './chunk-QF5UNP4T.js';
 export { LinkInterstitial, openExternal } from './chunk-JD7P2GJP.js';
 export { List, ListItem } from './chunk-PS5ZYIA6.js';
-export { ListDetail } from './chunk-YBC2CYPD.js';
+export { ListInput, withDraft } from './chunk-H32JW6CZ.js';
 export { ImageUpload } from './chunk-ZQEJSEPS.js';
 export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from './chunk-QPHD4UUG.js';
 export { IndicatorAnchor } from './chunk-27MJPU7G.js';
@@ -139,26 +139,26 @@ export { FILTER_PILL_LABELS, FILTER_PILL_WORDS_CLASS, FilterPill, filterPillSent
 export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-BWFJB5JD.js';
 export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from './chunk-R6K62EXV.js';
 export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-HPI5J6AR.js';
-export { COMMENT_THREAD_LABELS, CommentThread } from './chunk-AB6F5YXX.js';
 export { CommandPalette } from './chunk-NXNLAZPK.js';
 export { ConfirmModal, Modal } from './chunk-C667GCU7.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from './chunk-AB6F5YXX.js';
 export { ConfirmField, confirmMatches } from './chunk-JVII5264.js';
 export { InlineCode } from './chunk-PLL7ZJHY.js';
 export { CONFLICT_NOTE_LABELS, ConflictNote } from './chunk-B3PK2LND.js';
 export { Container } from './chunk-HJO4WCH6.js';
 export { ContrastHelp } from './chunk-IO374IX6.js';
 export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from './chunk-KWLH45YC.js';
-export { ChoiceButtons } from './chunk-FXMYDXCI.js';
+export { ChoiceButtons } from './chunk-RVSNBUIU.js';
 export { ChoiceList } from './chunk-NQABJAUY.js';
 export { CodeBlock } from './chunk-QSWQJX27.js';
-export { ColorField } from './chunk-7LSSYHOT.js';
 export { ColorChip } from './chunk-C6T4VBEY.js';
-export { Combobox } from './chunk-ZUBFVK6B.js';
-export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
+export { ColorField } from './chunk-7LSSYHOT.js';
 export { ColorSwatch } from './chunk-6FBPFG3C.js';
 export { CopyButton, Copyable } from './chunk-T5GBTXNC.js';
 export { useClipboard, writeClipboard } from './chunk-STJ7QBC3.js';
 export { useOutcome } from './chunk-DTIW4CHZ.js';
+export { Combobox } from './chunk-ZUBFVK6B.js';
+export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 export { CatalogTile } from './chunk-QE4OIE3Q.js';
 export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from './chunk-WQRSZMN4.js';
 export { DIFF_LIST_LABELS, DiffList } from './chunk-LR4IWUWQ.js';
@@ -231,7 +231,6 @@ export { ARTIFACT_KINDS, ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 export { ACCESS_DENIED_REASONS, AccessDeniedCard } from './chunk-QTMUKRTN.js';
 export { EmptyState } from './chunk-PPUR46MK.js';
 export { Accordion, AccordionItem } from './chunk-5NJMSYDZ.js';
-export { ADD_PILL_MS, AddPill } from './chunk-CVKANYHD.js';
 export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from './chunk-6C6YK75K.js';
 export { Timeline, TimelineItem } from './chunk-4MJN2KN6.js';
 export { Section } from './chunk-WFCWPXJN.js';
@@ -245,6 +244,7 @@ export { CHARACTER_COUNT_LABELS, CHARACTER_COUNT_NEAR, CharacterCount, character
 export { DisclosureAnatomy } from './chunk-IVTQWOXV.js';
 export { Count } from './chunk-MLDTLZAO.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './chunk-PQADV6P6.js';
+export { ADD_PILL_MS, AddPill } from './chunk-CVKANYHD.js';
 export { Announcer, announce, useAnnouncer } from './chunk-2G355KDJ.js';
 export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from './chunk-UY3FWQWG.js';
 export { useMediaMatch } from './chunk-RTPQDNW3.js';

package/dist/styles.css

@@ -10103,7 +10103,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* ChoiceButtons-G7XHZKDP.css */
+/* ChoiceButtons-T3GG6VLG.css */
 /*
  * 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.
@@ -10111,6 +10111,11 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
  * 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 {
@@ -10126,7 +10131,6 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--spacing-3);
   min-width: 0;
   min-height: var(--size-control-lg);
@@ -10171,13 +10175,21 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 /*
- * 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);
 }
 
@@ -10199,7 +10211,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   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);
@@ -10212,12 +10224,12 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   --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);
 }
 
@@ -10226,12 +10238,18 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
  * 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 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__text {
   display: grid;
+  flex: 1 1 auto;
   gap: 2px;
   min-width: 0;
   overflow-wrap: anywhere;
@@ -10247,7 +10265,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
  * 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);
 }
 
@@ -10263,8 +10281,12 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   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;
@@ -10273,22 +10295,22 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 
 /*
  * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.75.2",
+  "version": "0.75.4",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.75.2",
-    "@crewlethq/tokens": "0.75.2",
+    "@crewlethq/icons": "0.75.4",
+    "@crewlethq/tokens": "0.75.4",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",