@crewlethq/ui 0.75.3 → 0.76.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (171) hide show
  1. package/README.md +15 -1
  2. package/dist/AgentHandoffPanel/index.js +4 -4
  3. package/dist/AppShell/index.js +3 -3
  4. package/dist/ArrangeList/index.js +4 -4
  5. package/dist/ArtifactBar/index.js +6 -6
  6. package/dist/ArtifactCard/index.js +4 -4
  7. package/dist/ArtifactPanel/index.js +1 -1
  8. package/dist/AttachmentChip/index.js +3 -3
  9. package/dist/AvatarPicker/index.js +7 -7
  10. package/dist/BriefCard/index.js +4 -4
  11. package/dist/Canvas/index.js +2 -2
  12. package/dist/CanvasBoard/index.js +4 -4
  13. package/dist/CanvasToolbar/index.js +3 -3
  14. package/dist/ChangeList/index.js +3 -3
  15. package/dist/Checkbox/index.js +3 -3
  16. package/dist/ChoiceButtons/ChoiceButtons.d.ts +10 -3
  17. package/dist/ChoiceButtons/index.js +1 -1
  18. package/dist/{ChoiceButtons-3MJQAHHA.css → ChoiceButtons-T3GG6VLG.css} +44 -48
  19. package/dist/ChoiceCards/ChoiceCards.d.ts +80 -0
  20. package/dist/ChoiceCards/index.d.ts +3 -0
  21. package/dist/ChoiceCards/index.js +3 -0
  22. package/dist/ChoiceCards-HAGJMK6Q.css +318 -0
  23. package/dist/ChoiceList/ChoiceList.d.ts +10 -1
  24. package/dist/ChoiceList/index.js +1 -1
  25. package/dist/{ChoiceList-Q772QLFX.css → ChoiceList-JN4PPNFW.css} +22 -1
  26. package/dist/ColorField/index.js +3 -3
  27. package/dist/Combobox/index.js +3 -3
  28. package/dist/CommandPalette/index.js +3 -3
  29. package/dist/CommentThread/index.js +5 -5
  30. package/dist/Composer/index.js +3 -3
  31. package/dist/ConfirmField/index.js +3 -3
  32. package/dist/ContrastBadge/index.js +3 -3
  33. package/dist/ContrastHelp/index.js +5 -5
  34. package/dist/DataGrid/index.js +4 -4
  35. package/dist/DataTable/index.js +5 -5
  36. package/dist/DataView/index.js +8 -8
  37. package/dist/DatasetSource/index.js +3 -3
  38. package/dist/DateTimePicker/index.js +2 -2
  39. package/dist/DeepWorkCard/index.js +5 -5
  40. package/dist/DocTabsEditor/index.js +4 -4
  41. package/dist/EditingStatus/index.js +2 -2
  42. package/dist/{Editor-OLFAUSUA.js → Editor-BXOWAV46.js} +3 -3
  43. package/dist/EntityList/index.js +4 -4
  44. package/dist/HuePicker/index.js +6 -6
  45. package/dist/InlineEditor/index.js +3 -3
  46. package/dist/Input/index.js +2 -2
  47. package/dist/{Input-GEFFMKBS.css → Input-WSMB7JG2.css} +6 -1
  48. package/dist/LinkInterstitial/index.js +1 -1
  49. package/dist/ListInput/index.js +3 -3
  50. package/dist/LogoSlot/index.js +4 -4
  51. package/dist/MarkdownEditor/index.js +6 -6
  52. package/dist/Menu/index.js +2 -2
  53. package/dist/MergeConflicts/index.js +6 -6
  54. package/dist/Modal/index.js +1 -1
  55. package/dist/OpenInAppCard/index.js +5 -5
  56. package/dist/OrgTable/index.js +1 -1
  57. package/dist/PresenterView/index.js +1 -1
  58. package/dist/PricingCard/index.js +3 -3
  59. package/dist/PrincipalPicker/index.js +4 -4
  60. package/dist/ProposalCard/index.js +8 -8
  61. package/dist/RefusalCard/index.js +4 -4
  62. package/dist/ResultTableCard/index.js +4 -4
  63. package/dist/ReviewList/index.js +3 -3
  64. package/dist/RichEditor/index.js +1 -1
  65. package/dist/RunChip/index.js +3 -3
  66. package/dist/SegmentedControl/index.js +5 -5
  67. package/dist/SettingsTable/index.js +2 -2
  68. package/dist/SetupWizard/SetupWizard.d.ts +25 -7
  69. package/dist/SetupWizard/index.js +3 -3
  70. package/dist/{SetupWizard-WDOFFNIM.css → SetupWizard-2SUMQEWU.css} +126 -4
  71. package/dist/ShareDialog/index.js +2 -2
  72. package/dist/SheetColumnEditor/index.js +9 -9
  73. package/dist/SheetGrid/index.js +5 -5
  74. package/dist/SidePanel/index.js +1 -1
  75. package/dist/SlideFilmstrip/index.js +3 -3
  76. package/dist/StatusCard/index.js +3 -3
  77. package/dist/StatusDot/StatusDot.d.ts +7 -0
  78. package/dist/StatusDot/index.js +1 -1
  79. package/dist/{StatusDot-7OMCQCZF.css → StatusDot-FJND3CZY.css} +9 -2
  80. package/dist/Stepper/index.js +2 -2
  81. package/dist/{Stepper-32INSYF7.css → Stepper-YQBNYCIS.css} +31 -8
  82. package/dist/Switcher/index.js +3 -3
  83. package/dist/TableCells/index.js +3 -3
  84. package/dist/Tabs/index.js +4 -4
  85. package/dist/Tag/index.js +2 -2
  86. package/dist/TagsInput/index.js +4 -4
  87. package/dist/ThemeGallery/index.js +3 -3
  88. package/dist/ThemeSwitcher/index.js +6 -6
  89. package/dist/TimeRangePicker/index.js +7 -7
  90. package/dist/TimeWindowPicker/index.js +3 -3
  91. package/dist/TreeCanvas/index.js +3 -3
  92. package/dist/TreeGrid/index.js +1 -1
  93. package/dist/ValueField/index.js +4 -4
  94. package/dist/VersionCompare/index.js +6 -6
  95. package/dist/{chunk-3N36CYTU.js → chunk-2PIH6JHJ.js} +1 -1
  96. package/dist/{chunk-HDF4OGVD.js → chunk-2STOSJT3.js} +3 -3
  97. package/dist/{chunk-P64MIA7C.js → chunk-3JXX5S3Z.js} +2 -2
  98. package/dist/{chunk-UHW7EXWQ.js → chunk-45M73G5A.js} +1 -1
  99. package/dist/{chunk-5JPID3YI.js → chunk-57AKYFML.js} +1 -1
  100. package/dist/{chunk-4KSCGXLJ.js → chunk-5BOFC5OP.js} +2 -2
  101. package/dist/{chunk-SAUIIBNA.js → chunk-5CEQ3HLH.js} +1 -1
  102. package/dist/{chunk-VLGGLLKH.js → chunk-624X3RVA.js} +1 -1
  103. package/dist/{chunk-LWFOX3PB.js → chunk-63GBSOLU.js} +1 -1
  104. package/dist/{chunk-IQQSMK4E.js → chunk-6EWNMSS4.js} +1 -1
  105. package/dist/{chunk-7IW3P6FH.js → chunk-6G6WHTC7.js} +1 -1
  106. package/dist/{chunk-JXJNX7QQ.js → chunk-6LXS3X7A.js} +1 -1
  107. package/dist/{chunk-NQABJAUY.js → chunk-6RW2MUTY.js} +15 -8
  108. package/dist/{chunk-ZD52GKKS.js → chunk-6THG44LI.js} +2 -2
  109. package/dist/{chunk-KWLH45YC.js → chunk-7PJFUQMY.js} +1 -1
  110. package/dist/{chunk-5M64E3HV.js → chunk-ADGNISEI.js} +2 -2
  111. package/dist/{chunk-WQRSZMN4.js → chunk-BBD7PTBG.js} +1 -1
  112. package/dist/{chunk-PYJLHHYF.js → chunk-BKXUZCZX.js} +1 -1
  113. package/dist/{chunk-6RTYHTT7.js → chunk-CFTBESST.js} +1 -1
  114. package/dist/{chunk-WIATRXEJ.js → chunk-CYQBDZ6M.js} +1 -1
  115. package/dist/{chunk-ZKIEOWR6.js → chunk-D7G2QGET.js} +1 -1
  116. package/dist/{chunk-K2RJO72E.js → chunk-DSMQTED5.js} +3 -3
  117. package/dist/{chunk-OXEWUAND.js → chunk-E35HYQMK.js} +1 -1
  118. package/dist/{chunk-DCQ2VTBB.js → chunk-FB3TCNQP.js} +2 -2
  119. package/dist/{chunk-ODAZIKZF.js → chunk-FQI62PIZ.js} +2 -2
  120. package/dist/{chunk-IU5J6BY5.js → chunk-GHQG4VZA.js} +3 -3
  121. package/dist/{chunk-PIAGTZY3.js → chunk-GPFYITOF.js} +1 -1
  122. package/dist/{chunk-R6K62EXV.js → chunk-H22SR76M.js} +1 -1
  123. package/dist/{chunk-IO374IX6.js → chunk-HQOEAUDJ.js} +1 -1
  124. package/dist/{chunk-HKSQ7QHF.js → chunk-HWPP22XG.js} +4 -4
  125. package/dist/{chunk-ILF6KVNK.js → chunk-HZDI2CCS.js} +2 -2
  126. package/dist/{chunk-ZSRRCXUD.js → chunk-I3G5FJ54.js} +1 -1
  127. package/dist/{chunk-5NFYTQK2.js → chunk-IPBSCJIZ.js} +3 -3
  128. package/dist/{chunk-GAT75MN4.js → chunk-IQMWMT4V.js} +2 -2
  129. package/dist/{chunk-GT2OG2XM.js → chunk-JMTBK55P.js} +2 -2
  130. package/dist/{chunk-VDIKDCNE.js → chunk-JQEXAH7G.js} +1 -1
  131. package/dist/{chunk-SQ7GYC4K.js → chunk-KL6A7JGH.js} +1 -1
  132. package/dist/{chunk-TQCSQRKQ.js → chunk-LCZULGMB.js} +1 -1
  133. package/dist/{chunk-EAR2F5OA.js → chunk-LMQG3VPG.js} +1 -1
  134. package/dist/chunk-MKFEVHSR.js +83 -0
  135. package/dist/{chunk-W7OJKHVR.js → chunk-MP7DGKB6.js} +1 -1
  136. package/dist/{chunk-DO4J4TBZ.js → chunk-NKBKQEKS.js} +1 -1
  137. package/dist/{chunk-USO73ZJM.js → chunk-OCGIQGYJ.js} +2 -2
  138. package/dist/{chunk-5U2CYMFU.js → chunk-OOLMTUCO.js} +1 -1
  139. package/dist/{chunk-YUHKRRWO.js → chunk-OWHETZIU.js} +1 -1
  140. package/dist/{chunk-4OX2WVXO.js → chunk-PMBJMNBX.js} +1 -1
  141. package/dist/{chunk-OXB45TG2.js → chunk-RIAPCEB5.js} +2 -2
  142. package/dist/{chunk-HJBHP66O.js → chunk-RJWO2PC5.js} +2 -2
  143. package/dist/{chunk-NTQPJJAN.js → chunk-RTMNULTL.js} +1 -1
  144. package/dist/{chunk-C3SCONKY.js → chunk-RVSNBUIU.js} +4 -2
  145. package/dist/{chunk-SRDZVY5M.js → chunk-SK5SLGZH.js} +1 -1
  146. package/dist/{chunk-CMTLQOJY.js → chunk-T24HBEU6.js} +1 -1
  147. package/dist/{chunk-EEVATVP5.js → chunk-TJIBTHWJ.js} +2 -2
  148. package/dist/{chunk-GAUBP247.js → chunk-TKUAGWNR.js} +1 -1
  149. package/dist/{chunk-HMOGLAXY.js → chunk-TPCBPGSB.js} +1 -1
  150. package/dist/{chunk-CFXDWGQI.js → chunk-TPIMOGOZ.js} +1 -1
  151. package/dist/{chunk-HDLUG3MA.js → chunk-UY3FWQWG.js} +2 -2
  152. package/dist/{chunk-RQHN4J5P.js → chunk-UYF2B2TH.js} +1 -1
  153. package/dist/{chunk-I5OIKDX2.js → chunk-VERJCAJ4.js} +1 -1
  154. package/dist/{chunk-PKVWCKS2.js → chunk-VG3SIJ3M.js} +1 -1
  155. package/dist/{chunk-BAHLBMCH.js → chunk-WK4FQPYW.js} +2 -2
  156. package/dist/{chunk-4RKTZSEW.js → chunk-WL4TC4YZ.js} +1 -1
  157. package/dist/{chunk-SBHAKX2T.js → chunk-X5FKORDM.js} +72 -9
  158. package/dist/{chunk-4DL2BQJE.js → chunk-YL7AR6PR.js} +1 -1
  159. package/dist/{chunk-TF74KS36.js → chunk-YQDRJZ5J.js} +1 -1
  160. package/dist/{chunk-7OFVR7X4.js → chunk-ZKLEAK7M.js} +1 -1
  161. package/dist/{chunk-OUUHIA3B.js → chunk-ZMIVQGAB.js} +4 -4
  162. package/dist/{chunk-352FPJ2Q.js → chunk-ZW5SRQ5M.js} +1 -1
  163. package/dist/generated/index.d.ts +1 -0
  164. package/dist/generated/index.js +94 -93
  165. package/dist/index.js +94 -93
  166. package/dist/styles.css +565 -70
  167. package/package.json +3 -3
  168. package/dist/{chunk-SWLVR54P.js → chunk-HPI5J6AR.js} +1 -1
  169. package/dist/{chunk-EMCVX5FY.js → chunk-OBPINJNO.js} +1 -1
  170. package/dist/{chunk-KNAHKQD4.js → chunk-OQG4P5KU.js} +1 -1
  171. /package/dist/{chunk-TWM6G2I2.js → chunk-PCBPDMNU.js} +0 -0
@@ -0,0 +1,318 @@
1
+ /*
2
+ * Choices a person compares, as cards in a grid that wraps. The chosen card
3
+ * takes the selected fill and the strong boundary, as a chosen ChoiceList row
4
+ * does; the radio stays the mark, drawn in the card's corner; and no card is
5
+ * ringed in the accent except by the focus ring itself.
6
+ *
7
+ * ONE LINE A ROW, THE SAME ROWS IN EVERY CARD: the picture, the name and its
8
+ * tag on the first; the description on the second; then each fact on a line
9
+ * of its own, its name and its value; and a reason line where any card has
10
+ * one. Every card spans the same rows of the group's grid and lays its lines
11
+ * on them as a subgrid, so cards side by side share each row: a description
12
+ * that wraps in one card moves the facts of all of them, and Runs stays level
13
+ * with Runs. Facts run together as one line of meta wrapped differently in
14
+ * each card, and three cards read as three different shapes.
15
+ *
16
+ * A card is at least 20rem (24rem at `lg`), the width a fact's name and a
17
+ * short value keep to one line in: a form's column holds one to a row, and a
18
+ * wider surface two or three, aligned.
19
+ */
20
+ .crewlet-choice-cards {
21
+ --crewlet-choice-cards-min: 20rem;
22
+ --crewlet-choice-cards-radio: 16px;
23
+ /* How many rows a card spans, set from the options: the name, the description, the most facts, a reason. */
24
+ --crewlet-choice-cards-rows: 3;
25
+ display: grid;
26
+ grid-template-columns: repeat(
27
+ auto-fit,
28
+ minmax(min(100%, var(--crewlet-choice-cards-min)), 1fr)
29
+ );
30
+ grid-auto-rows: auto;
31
+ column-gap: var(--spacing-3);
32
+ row-gap: 0;
33
+ }
34
+
35
+ .crewlet-choice-cards--lg {
36
+ --crewlet-choice-cards-min: 24rem;
37
+ }
38
+
39
+ /*
40
+ * THE CARD is a column of its lines. The space under a card is its margin,
41
+ * the gap between one row of cards and the next; the lines inside a card keep
42
+ * their own, smaller gap.
43
+ *
44
+ * Its first line is as tall as the largest picture a card set draws (a
45
+ * product's mark), so the radio and every name sit on one line whatever
46
+ * picture each card has.
47
+ */
48
+ .crewlet-choice-cards__card {
49
+ --crewlet-choice-cards-title: var(--size-control-sm);
50
+
51
+ position: relative;
52
+ display: flex;
53
+ flex-direction: column;
54
+ gap: var(--spacing-1);
55
+ min-width: 0;
56
+ margin-block-end: var(--spacing-3);
57
+ padding: var(--spacing-3);
58
+ border: 1px solid var(--color-border-default);
59
+ border-radius: var(--radius-md);
60
+ background: var(--color-surface-elevated);
61
+ cursor: pointer;
62
+ transition:
63
+ background-color var(--motion-duration-fast) var(--motion-easing-default),
64
+ border-color var(--motion-duration-fast) var(--motion-easing-default);
65
+ }
66
+
67
+ .crewlet-choice-cards__card:hover {
68
+ background: var(--color-surface-hover);
69
+ }
70
+
71
+ /*
72
+ * THE CHOSEN CARD wears the soft selected tint laid OVER the raised surface,
73
+ * inside an edge in the accent's ink, as a chosen ChoiceButtons option does.
74
+ * The tint is translucent: laid on its own it let the page's ground through,
75
+ * darker than the raised cards beside it in dark, and the chosen card looked
76
+ * recessed. The edge is the accent's ink rather than the strong border,
77
+ * because the edge is what tells the chosen card from the others at 3:1.
78
+ */
79
+ .crewlet-choice-cards__card.is-checked {
80
+ border-color: var(--color-brand-accent-ink);
81
+ background-color: var(--color-surface-elevated);
82
+ background-image: linear-gradient(var(--color-surface-selected), var(--color-surface-selected));
83
+ }
84
+
85
+ /*
86
+ * A CARD THAT CANNOT BE CHOSEN stands on the page's own ground and takes no
87
+ * hover: the subtle surface it took is brighter than the raised one in light,
88
+ * so the card that could not be chosen read as the most inviting. Its radio is
89
+ * drawn quiet, as ChoiceList's disabled radio is, and its picture muted; its
90
+ * words stay at full contrast, and its reason says why.
91
+ */
92
+ .crewlet-choice-cards__card.is-disabled {
93
+ cursor: not-allowed;
94
+ background: transparent;
95
+ }
96
+
97
+ .crewlet-choice-cards__card.is-disabled:hover {
98
+ background: transparent;
99
+ }
100
+
101
+ .crewlet-choice-cards__card.is-disabled .crewlet-choice-cards__radio {
102
+ border-color: var(--color-border-default);
103
+ background: var(--color-surface-subtle);
104
+ }
105
+
106
+ .crewlet-choice-cards__card.is-disabled .crewlet-choice-cards__media {
107
+ color: var(--color-text-tertiary);
108
+ filter: grayscale(1);
109
+ }
110
+
111
+ /* The ring sits inside the card's own box, over its border, rather than a second line beside it. */
112
+ .crewlet-choice-cards__card:has(.crewlet-choice-cards__radio:focus-visible) {
113
+ outline: 2px solid var(--color-focus);
114
+ outline-offset: var(--size-focus-ring-inset-offset);
115
+ }
116
+
117
+ /* 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. */
118
+ .crewlet-choice-cards__radio {
119
+ appearance: none;
120
+ position: absolute;
121
+ inset-block-start: calc(var(--spacing-3) + (var(--crewlet-choice-cards-title) - var(--crewlet-choice-cards-radio)) / 2);
122
+ inset-inline-end: var(--spacing-3);
123
+ display: inline-grid;
124
+ place-content: center;
125
+ width: var(--crewlet-choice-cards-radio);
126
+ height: var(--crewlet-choice-cards-radio);
127
+ margin: 0;
128
+ border: 1px solid var(--color-border-control);
129
+ border-radius: var(--radius-circle);
130
+ background: var(--color-surface-elevated);
131
+ }
132
+
133
+ .crewlet-choice-cards__radio:checked {
134
+ border-color: var(--color-brand-accent);
135
+ }
136
+
137
+ .crewlet-choice-cards__radio:checked::after {
138
+ content: "";
139
+ width: 8px;
140
+ height: 8px;
141
+ border-radius: var(--radius-circle);
142
+ background: var(--color-brand-accent);
143
+ }
144
+
145
+ /*
146
+ * THE CARD DRAWS THE RING (above), so the radio's own is transparent rather
147
+ * than off: invisible beside the card's, and still a ring where forced-colors
148
+ * mode repaints every outline in the system's colour.
149
+ */
150
+ .crewlet-choice-cards__radio:focus-visible {
151
+ outline: 2px solid transparent;
152
+ }
153
+
154
+ /* The first line: the picture, the name and its tag, stopping short of the radio. */
155
+ .crewlet-choice-cards__title {
156
+ display: flex;
157
+ align-items: center;
158
+ gap: var(--spacing-2);
159
+ grid-row: 1;
160
+ min-width: 0;
161
+ min-height: var(--crewlet-choice-cards-title);
162
+ padding-inline-end: calc(var(--spacing-2) + var(--crewlet-choice-cards-radio));
163
+ }
164
+
165
+ .crewlet-choice-cards__media {
166
+ display: inline-flex;
167
+ flex: none;
168
+ color: var(--color-text-secondary);
169
+ }
170
+
171
+ .crewlet-choice-cards__tag {
172
+ padding: 0 var(--spacing-2);
173
+ border: 1px solid var(--color-border-default);
174
+ border-radius: var(--radius-pill);
175
+ color: var(--color-text-secondary);
176
+ font-size: var(--font-size-xs);
177
+ white-space: nowrap;
178
+ }
179
+
180
+ /* On the chosen card's tint the default edge all but vanishes in light, so the tag takes the strong one. */
181
+ .crewlet-choice-cards__card.is-checked .crewlet-choice-cards__tag {
182
+ border-color: var(--color-border-strong);
183
+ }
184
+
185
+ .crewlet-choice-cards__label {
186
+ min-width: 0;
187
+ color: var(--color-text-primary);
188
+ font-weight: var(--font-weight-medium);
189
+ }
190
+
191
+ /*
192
+ * The second row is the description's in every card once any card has one: a
193
+ * card without one keeps an empty cell there, so its facts stay level with
194
+ * the facts beside them.
195
+ */
196
+ .crewlet-choice-cards__description {
197
+ grid-row: 2;
198
+ color: var(--color-text-secondary);
199
+ font-size: var(--font-size-sm);
200
+ }
201
+
202
+ /* The facts give each of their lines to the card's grid, one row a fact. */
203
+ .crewlet-choice-cards__facts {
204
+ display: contents;
205
+ }
206
+
207
+ /*
208
+ * A fact: its name in the quiet ink, then its value, on one line while there
209
+ * is room. Its two parts share one size and line height and align to the top,
210
+ * so a fact with a dot is no taller than one without: aligned on a baseline,
211
+ * the dot (a box with no text) gave the line a baseline of its own and the
212
+ * Needs line stood a pixel taller than Runs.
213
+ */
214
+ .crewlet-choice-cards__fact {
215
+ display: flex;
216
+ align-items: flex-start;
217
+ gap: var(--spacing-2);
218
+ min-width: 0;
219
+ font-size: var(--font-size-xs);
220
+ }
221
+
222
+ .crewlet-choice-cards__fact-label {
223
+ flex: none;
224
+ color: var(--color-text-tertiary);
225
+ }
226
+
227
+ .crewlet-choice-cards__fact-value {
228
+ min-width: 0;
229
+ color: var(--color-text-secondary);
230
+ }
231
+
232
+ /*
233
+ * A FACT WRAPS RATHER THAN CLIPS. A StatusDot is one line and its word gives
234
+ * way with an ellipsis, which is right in a table cell and wrong here: a
235
+ * fact is read to choose between the cards, and a narrow card cut "Docker
236
+ * 24.0.7 found" to "Docker 24.0..." with nothing to reveal the rest. The word
237
+ * wraps under itself, and the dot stays on the first line's centre, where it
238
+ * sat while the fact was one line.
239
+ */
240
+ .crewlet-choice-cards__fact-value > .crewlet-status {
241
+ display: flex;
242
+ align-items: flex-start;
243
+ }
244
+
245
+ .crewlet-choice-cards__fact-value > .crewlet-status > .crewlet-status-dot {
246
+ margin-block-start: calc((1lh - var(--crewlet-status-dot-size)) / 2);
247
+ }
248
+
249
+ .crewlet-choice-cards__fact-value > .crewlet-status > .crewlet-status__label {
250
+ overflow: visible;
251
+ white-space: normal;
252
+ overflow-wrap: anywhere;
253
+ }
254
+
255
+ /* A reason given on a fact's line (`disabledReasonAt`) takes that line's value, in the same ink. */
256
+ .crewlet-choice-cards__fact.is-reason .crewlet-choice-cards__fact-value {
257
+ color: var(--color-feedback-warning-ink);
258
+ }
259
+
260
+ /* The reason a disabled card cannot be chosen: the card's last row, in the warning ink. */
261
+ .crewlet-choice-cards__reason {
262
+ grid-row: -2;
263
+ color: var(--color-feedback-warning-ink);
264
+ font-size: var(--font-size-xs);
265
+ }
266
+
267
+
268
+ /*
269
+ * WHERE SUBGRID IS SUPPORTED, every card spans the same rows of the group and
270
+ * takes them from it, so a row is as tall as its tallest line across the cards
271
+ * beside it and their facts stand level. Elsewhere each card stays the plain
272
+ * column above: its lines still read in order, only not level with the next
273
+ * card's.
274
+ */
275
+ @supports (grid-template-rows: subgrid) {
276
+ .crewlet-choice-cards__card {
277
+ display: grid;
278
+ grid-row: span var(--crewlet-choice-cards-rows);
279
+ grid-template-rows: subgrid;
280
+ grid-template-columns: minmax(0, 1fr);
281
+ row-gap: var(--spacing-1);
282
+ align-content: start;
283
+ }
284
+ }
285
+
286
+ /*
287
+ * UNDER FORCED COLOURS the system repaints every colour above, so the drawn
288
+ * radio's dot and the tint vanish together: the radio becomes the platform's
289
+ * own, which marks itself; the chosen card's edge takes the system's
290
+ * selection colour, twice as wide; and a card that cannot be chosen takes the
291
+ * system's disabled ink, edge and words, rather than reading as one that can.
292
+ */
293
+ @media (forced-colors: active) {
294
+ .crewlet-choice-cards__radio {
295
+ appearance: auto;
296
+ }
297
+
298
+ .crewlet-choice-cards__card.is-checked {
299
+ border-width: 2px;
300
+ border-color: Highlight;
301
+ }
302
+
303
+ .crewlet-choice-cards__card.is-disabled {
304
+ border-color: GrayText;
305
+ color: GrayText;
306
+ }
307
+
308
+ .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) {
309
+ color: GrayText;
310
+ }
311
+ }
312
+
313
+ /* The border's ease into its hover and checked inks is held for a reader who asked for no motion. */
314
+ @media (prefers-reduced-motion: reduce) {
315
+ .crewlet-choice-cards__card {
316
+ transition: none;
317
+ }
318
+ }
@@ -24,6 +24,14 @@ export interface ChoiceListOption {
24
24
  * "Something else" choice opens.
25
25
  */
26
26
  panel?: ReactNode;
27
+ /** This choice cannot be made now; the rest of the list can. */
28
+ disabled?: boolean | undefined;
29
+ /**
30
+ * Why not, and what fixes it, on the choice's detail line while it is
31
+ * disabled, and read with the radio as its description. A choice greyed out
32
+ * with no reason is a dead end.
33
+ */
34
+ disabledReason?: ReactNode;
27
35
  }
28
36
  export interface ChoiceListProps {
29
37
  options: readonly ChoiceListOption[];
@@ -44,7 +52,8 @@ export interface ChoiceListProps {
44
52
  *
45
53
  * NATIVE RADIOS, so the arrow keys move the choice and Tab leaves the group as
46
54
  * the platform does, and every row is its radio's label, so the whole row
47
- * takes the pointer. A choice's `panel` is drawn under it only while it is
55
+ * takes the pointer. A disabled choice is skipped by the arrows, keeps its
56
+ * words at full contrast, and says why on its detail line. A choice's `panel` is drawn under it only while it is
48
57
  * selected, which is how a list ends in "Something else" with a field of its
49
58
  * own without a second control beside the list.
50
59
  */
@@ -1,3 +1,3 @@
1
- export { ChoiceList } from '../chunk-NQABJAUY.js';
1
+ export { ChoiceList } from '../chunk-6RW2MUTY.js';
2
2
  import '../chunk-2YTOOH3A.js';
3
3
  import '../chunk-ODEQTPFM.js';
@@ -101,10 +101,22 @@
101
101
  background: var(--color-surface-selected);
102
102
  }
103
103
 
104
- .crewlet-choice-list.is-disabled .crewlet-choice-list__row {
104
+ .crewlet-choice-list.is-disabled .crewlet-choice-list__row,
105
+ .crewlet-choice-list__row.is-disabled {
105
106
  cursor: not-allowed;
106
107
  }
107
108
 
109
+ /* A choice that cannot be made takes no hover: the ground would offer it. */
110
+ .crewlet-choice-list__row.is-disabled:hover {
111
+ background: none;
112
+ }
113
+
114
+ /* Its ring is drawn on the quiet boundary and ground; its words stay at full contrast. */
115
+ .crewlet-choice-list__row.is-disabled .crewlet-choice-list__radio {
116
+ border-color: var(--color-border-default);
117
+ background: var(--color-surface-subtle);
118
+ }
119
+
108
120
  /*
109
121
  * THE RADIO IS DRAWN, not the platform's. In a dark palette the platform's
110
122
  * own radio fills an unchosen answer with a grey disc, which beside the one
@@ -163,6 +175,15 @@
163
175
  overflow-wrap: anywhere;
164
176
  }
165
177
 
178
+ /* Why a disabled choice cannot be made, after its detail on the same line, in the warning ink. */
179
+ .crewlet-choice-list__reason {
180
+ color: var(--color-feedback-warning-ink);
181
+ }
182
+
183
+ .crewlet-choice-list__detail > .crewlet-choice-list__reason:not(:first-child) {
184
+ margin-inline-start: var(--spacing-2);
185
+ }
186
+
166
187
  /* A tag says something ABOUT an answer ("Suggested"), so it is set in the
167
188
  tertiary ink: in the accent ink it was a second accent mark on the chosen
168
189
  row, beside the radio and the fill that already say which one is chosen. */
@@ -1,11 +1,11 @@
1
- export { ColorField } from '../chunk-CMTLQOJY.js';
1
+ export { ColorField } from '../chunk-T24HBEU6.js';
2
2
  import '../chunk-7W3LYIOC.js';
3
- import '../chunk-DCQ2VTBB.js';
3
+ import '../chunk-FB3TCNQP.js';
4
4
  import '../chunk-PGCLHYVP.js';
5
5
  import '../chunk-PQADV6P6.js';
6
6
  import '../chunk-2G355KDJ.js';
7
7
  import '../chunk-H5XTJ7GJ.js';
8
- import '../chunk-NUZHC6MM.js';
9
8
  import '../chunk-UAUP6XGK.js';
9
+ import '../chunk-NUZHC6MM.js';
10
10
  import '../chunk-UT6CW3C7.js';
11
11
  import '../chunk-ODEQTPFM.js';
@@ -1,12 +1,12 @@
1
- export { Combobox } from '../chunk-IQQSMK4E.js';
1
+ export { Combobox } from '../chunk-6EWNMSS4.js';
2
2
  import '../chunk-7KHM2FZH.js';
3
- import '../chunk-DCQ2VTBB.js';
3
+ import '../chunk-FB3TCNQP.js';
4
4
  import '../chunk-PGCLHYVP.js';
5
5
  import '../chunk-PQADV6P6.js';
6
6
  import '../chunk-2G355KDJ.js';
7
7
  import '../chunk-2YTOOH3A.js';
8
8
  import '../chunk-H5XTJ7GJ.js';
9
- import '../chunk-NUZHC6MM.js';
10
9
  import '../chunk-UAUP6XGK.js';
10
+ import '../chunk-NUZHC6MM.js';
11
11
  import '../chunk-UT6CW3C7.js';
12
12
  import '../chunk-ODEQTPFM.js';
@@ -1,8 +1,8 @@
1
- export { CommandPalette } from '../chunk-SAUIIBNA.js';
1
+ export { CommandPalette } from '../chunk-5CEQ3HLH.js';
2
2
  import '../chunk-C667GCU7.js';
3
3
  import '../chunk-7KHM2FZH.js';
4
4
  import '../chunk-ANTAQAR4.js';
5
- import '../chunk-DCQ2VTBB.js';
5
+ import '../chunk-FB3TCNQP.js';
6
6
  import '../chunk-PGCLHYVP.js';
7
7
  import '../chunk-MLDTLZAO.js';
8
8
  import '../chunk-PQADV6P6.js';
@@ -12,7 +12,7 @@ import '../chunk-OMV5W53A.js';
12
12
  import '../chunk-2YTOOH3A.js';
13
13
  import '../chunk-XSPCITPN.js';
14
14
  import '../chunk-H5XTJ7GJ.js';
15
- import '../chunk-NUZHC6MM.js';
16
15
  import '../chunk-UAUP6XGK.js';
16
+ import '../chunk-NUZHC6MM.js';
17
17
  import '../chunk-UT6CW3C7.js';
18
18
  import '../chunk-ODEQTPFM.js';
@@ -1,13 +1,13 @@
1
- export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-5M64E3HV.js';
2
- import '../chunk-BXCL6P5Z.js';
1
+ export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-ADGNISEI.js';
3
2
  import '../chunk-N2BF272H.js';
4
3
  import '../chunk-EJNJMHQG.js';
5
4
  import '../chunk-RE3FBGQQ.js';
6
5
  import '../chunk-BT3GB7HC.js';
7
6
  import '../chunk-KTIQSSME.js';
8
- import '../chunk-OXEWUAND.js';
7
+ import '../chunk-BXCL6P5Z.js';
8
+ import '../chunk-E35HYQMK.js';
9
9
  import '../chunk-ANTAQAR4.js';
10
- import '../chunk-DCQ2VTBB.js';
10
+ import '../chunk-FB3TCNQP.js';
11
11
  import '../chunk-PGCLHYVP.js';
12
12
  import '../chunk-MLDTLZAO.js';
13
13
  import '../chunk-PQADV6P6.js';
@@ -16,7 +16,7 @@ import '../chunk-DGXZ635L.js';
16
16
  import '../chunk-OMV5W53A.js';
17
17
  import '../chunk-XSPCITPN.js';
18
18
  import '../chunk-H5XTJ7GJ.js';
19
- import '../chunk-NUZHC6MM.js';
20
19
  import '../chunk-UAUP6XGK.js';
20
+ import '../chunk-NUZHC6MM.js';
21
21
  import '../chunk-UT6CW3C7.js';
22
22
  import '../chunk-ODEQTPFM.js';
@@ -1,12 +1,12 @@
1
- export { COMPOSER_COUNTER_AT, Composer } from '../chunk-OXEWUAND.js';
1
+ export { COMPOSER_COUNTER_AT, Composer } from '../chunk-E35HYQMK.js';
2
2
  import '../chunk-ANTAQAR4.js';
3
- import '../chunk-DCQ2VTBB.js';
3
+ import '../chunk-FB3TCNQP.js';
4
4
  import '../chunk-PGCLHYVP.js';
5
5
  import '../chunk-PQADV6P6.js';
6
6
  import '../chunk-2G355KDJ.js';
7
7
  import '../chunk-OMV5W53A.js';
8
8
  import '../chunk-H5XTJ7GJ.js';
9
- import '../chunk-NUZHC6MM.js';
10
9
  import '../chunk-UAUP6XGK.js';
10
+ import '../chunk-NUZHC6MM.js';
11
11
  import '../chunk-UT6CW3C7.js';
12
12
  import '../chunk-ODEQTPFM.js';
@@ -1,11 +1,11 @@
1
- export { ConfirmField, confirmMatches } from '../chunk-CFXDWGQI.js';
1
+ export { ConfirmField, confirmMatches } from '../chunk-TPIMOGOZ.js';
2
2
  import '../chunk-PLL7ZJHY.js';
3
- import '../chunk-DCQ2VTBB.js';
3
+ import '../chunk-FB3TCNQP.js';
4
4
  import '../chunk-PGCLHYVP.js';
5
5
  import '../chunk-PQADV6P6.js';
6
6
  import '../chunk-2G355KDJ.js';
7
7
  import '../chunk-H5XTJ7GJ.js';
8
- import '../chunk-NUZHC6MM.js';
9
8
  import '../chunk-UAUP6XGK.js';
9
+ import '../chunk-NUZHC6MM.js';
10
10
  import '../chunk-UT6CW3C7.js';
11
11
  import '../chunk-ODEQTPFM.js';
@@ -1,6 +1,6 @@
1
- export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-KWLH45YC.js';
1
+ export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-7PJFUQMY.js';
2
2
  import '../chunk-7W3LYIOC.js';
3
- import '../chunk-I5OIKDX2.js';
4
- import '../chunk-WIATRXEJ.js';
3
+ import '../chunk-VERJCAJ4.js';
4
+ import '../chunk-CYQBDZ6M.js';
5
5
  import '../chunk-UT6CW3C7.js';
6
6
  import '../chunk-ODEQTPFM.js';
@@ -1,12 +1,12 @@
1
- export { ContrastHelp } from '../chunk-IO374IX6.js';
2
- import '../chunk-KWLH45YC.js';
1
+ export { ContrastHelp } from '../chunk-HQOEAUDJ.js';
2
+ import '../chunk-7PJFUQMY.js';
3
3
  import '../chunk-KHJIEPZV.js';
4
4
  import '../chunk-7W3LYIOC.js';
5
- import '../chunk-I5OIKDX2.js';
6
- import '../chunk-WIATRXEJ.js';
5
+ import '../chunk-VERJCAJ4.js';
6
+ import '../chunk-CYQBDZ6M.js';
7
7
  import '../chunk-OMV5W53A.js';
8
8
  import '../chunk-H5XTJ7GJ.js';
9
- import '../chunk-NUZHC6MM.js';
10
9
  import '../chunk-UAUP6XGK.js';
10
+ import '../chunk-NUZHC6MM.js';
11
11
  import '../chunk-UT6CW3C7.js';
12
12
  import '../chunk-ODEQTPFM.js';
@@ -1,7 +1,7 @@
1
- export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, nextGridSort, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-TQCSQRKQ.js';
2
- import '../chunk-EAR2F5OA.js';
1
+ export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, nextGridSort, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-LCZULGMB.js';
2
+ import '../chunk-LMQG3VPG.js';
3
3
  import '../chunk-PPUR46MK.js';
4
- import '../chunk-DCQ2VTBB.js';
4
+ import '../chunk-FB3TCNQP.js';
5
5
  import '../chunk-PGCLHYVP.js';
6
6
  import '../chunk-PQADV6P6.js';
7
7
  import '../chunk-2G355KDJ.js';
@@ -9,7 +9,7 @@ import '../chunk-RTPQDNW3.js';
9
9
  import '../chunk-DGXZ635L.js';
10
10
  import '../chunk-XSPCITPN.js';
11
11
  import '../chunk-H5XTJ7GJ.js';
12
- import '../chunk-NUZHC6MM.js';
13
12
  import '../chunk-UAUP6XGK.js';
13
+ import '../chunk-NUZHC6MM.js';
14
14
  import '../chunk-UT6CW3C7.js';
15
15
  import '../chunk-ODEQTPFM.js';
@@ -1,20 +1,20 @@
1
- export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-ILF6KVNK.js';
1
+ export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-HZDI2CCS.js';
2
2
  import '../chunk-C667GCU7.js';
3
3
  import '../chunk-STJ7QBC3.js';
4
4
  import '../chunk-DTIW4CHZ.js';
5
5
  import '../chunk-RE3FBGQQ.js';
6
6
  import '../chunk-AV2DXAEL.js';
7
- import '../chunk-EAR2F5OA.js';
8
- import '../chunk-DCQ2VTBB.js';
7
+ import '../chunk-LMQG3VPG.js';
8
+ import '../chunk-FB3TCNQP.js';
9
9
  import '../chunk-PGCLHYVP.js';
10
10
  import '../chunk-PQADV6P6.js';
11
11
  import '../chunk-2G355KDJ.js';
12
- import '../chunk-KNAHKQD4.js';
12
+ import '../chunk-OQG4P5KU.js';
13
13
  import '../chunk-DGXZ635L.js';
14
14
  import '../chunk-OMV5W53A.js';
15
15
  import '../chunk-XSPCITPN.js';
16
16
  import '../chunk-H5XTJ7GJ.js';
17
- import '../chunk-NUZHC6MM.js';
18
17
  import '../chunk-UAUP6XGK.js';
18
+ import '../chunk-NUZHC6MM.js';
19
19
  import '../chunk-UT6CW3C7.js';
20
20
  import '../chunk-ODEQTPFM.js';
@@ -1,31 +1,31 @@
1
- export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-HKSQ7QHF.js';
1
+ export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-HWPP22XG.js';
2
2
  import '../chunk-FPDIHEM4.js';
3
3
  import '../chunk-K4LZXSKZ.js';
4
- import '../chunk-ILF6KVNK.js';
5
- import '../chunk-SWLVR54P.js';
4
+ import '../chunk-HPI5J6AR.js';
5
+ import '../chunk-HZDI2CCS.js';
6
6
  import '../chunk-C667GCU7.js';
7
+ import '../chunk-7KHM2FZH.js';
7
8
  import '../chunk-STJ7QBC3.js';
8
9
  import '../chunk-DTIW4CHZ.js';
9
- import '../chunk-7KHM2FZH.js';
10
10
  import '../chunk-EE3DJMSQ.js';
11
11
  import '../chunk-NR4CPM4T.js';
12
12
  import '../chunk-KHJIEPZV.js';
13
13
  import '../chunk-EJNJMHQG.js';
14
14
  import '../chunk-RE3FBGQQ.js';
15
15
  import '../chunk-AV2DXAEL.js';
16
- import '../chunk-EAR2F5OA.js';
16
+ import '../chunk-LMQG3VPG.js';
17
17
  import '../chunk-ANTAQAR4.js';
18
- import '../chunk-DCQ2VTBB.js';
18
+ import '../chunk-FB3TCNQP.js';
19
19
  import '../chunk-PGCLHYVP.js';
20
20
  import '../chunk-MLDTLZAO.js';
21
21
  import '../chunk-PQADV6P6.js';
22
22
  import '../chunk-2G355KDJ.js';
23
- import '../chunk-KNAHKQD4.js';
23
+ import '../chunk-OQG4P5KU.js';
24
24
  import '../chunk-DGXZ635L.js';
25
25
  import '../chunk-OMV5W53A.js';
26
26
  import '../chunk-XSPCITPN.js';
27
27
  import '../chunk-H5XTJ7GJ.js';
28
- import '../chunk-NUZHC6MM.js';
29
28
  import '../chunk-UAUP6XGK.js';
29
+ import '../chunk-NUZHC6MM.js';
30
30
  import '../chunk-UT6CW3C7.js';
31
31
  import '../chunk-ODEQTPFM.js';
@@ -1,6 +1,6 @@
1
- export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-R6K62EXV.js';
2
- import '../chunk-I5OIKDX2.js';
3
- import '../chunk-WIATRXEJ.js';
1
+ export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-H22SR76M.js';
2
+ import '../chunk-VERJCAJ4.js';
3
+ import '../chunk-CYQBDZ6M.js';
4
4
  import '../chunk-EJNJMHQG.js';
5
5
  import '../chunk-RE3FBGQQ.js';
6
6
  import '../chunk-2YTOOH3A.js';
@@ -1,11 +1,11 @@
1
- export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-SWLVR54P.js';
1
+ export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-HPI5J6AR.js';
2
2
  import '../chunk-EE3DJMSQ.js';
3
3
  import '../chunk-KHJIEPZV.js';
4
4
  import '../chunk-DGXZ635L.js';
5
5
  import '../chunk-OMV5W53A.js';
6
6
  import '../chunk-XSPCITPN.js';
7
7
  import '../chunk-H5XTJ7GJ.js';
8
- import '../chunk-NUZHC6MM.js';
9
8
  import '../chunk-UAUP6XGK.js';
9
+ import '../chunk-NUZHC6MM.js';
10
10
  import '../chunk-UT6CW3C7.js';
11
11
  import '../chunk-ODEQTPFM.js';
@@ -1,10 +1,10 @@
1
- export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-P64MIA7C.js';
2
- import '../chunk-HJBHP66O.js';
1
+ export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-3JXX5S3Z.js';
2
+ import '../chunk-RJWO2PC5.js';
3
3
  import '../chunk-ZWCK4N4L.js';
4
4
  import '../chunk-RQFRRPV6.js';
5
- import '../chunk-NTQPJJAN.js';
6
- import '../chunk-I5OIKDX2.js';
7
- import '../chunk-WIATRXEJ.js';
5
+ import '../chunk-RTMNULTL.js';
6
+ import '../chunk-VERJCAJ4.js';
7
+ import '../chunk-CYQBDZ6M.js';
8
8
  import '../chunk-4AUTALJA.js';
9
9
  import '../chunk-AV2DXAEL.js';
10
10
  import '../chunk-222VILSP.js';