@crewlethq/ui 0.75.3 → 0.75.4

package/dist/styles.css

@@ -10103,7 +10103,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* ChoiceButtons-3MJQAHHA.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,33 +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 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;
@@ -10268,15 +10265,10 @@ 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);
 }
 
-/* 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.
@@ -10289,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;
@@ -10299,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.3",
+  "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.3",
-    "@crewlethq/tokens": "0.75.3",
+    "@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",

package/dist/{chunk-DCQ2VTBB.js → chunk-ETSF7SU6.js}

@@ -2,8 +2,8 @@ import { characterCountState, CharacterCount } from './chunk-PGCLHYVP.js';
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
 import { announce } from './chunk-2G355KDJ.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
-import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Input-GEFFMKBS.css';

package/dist/{chunk-BAHLBMCH.js → chunk-HEIOLITO.js}

@@ -2,8 +2,8 @@ import { useListbox } from './chunk-7KHM2FZH.js';
 import { Tag } from './chunk-I5OIKDX2.js';
 import { announce } from './chunk-2G355KDJ.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
-import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-MZXEHKJD.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';

package/dist/{chunk-SWLVR54P.js → chunk-HPI5J6AR.js}

@@ -1,8 +1,8 @@
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-EE3DJMSQ.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { Button } from './chunk-DGXZ635L.js';
-import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DateTimePicker-PM6TIRIX.css';
 import { useMemo, useState, useEffect } from 'react';

package/dist/{chunk-EMCVX5FY.js → chunk-OBPINJNO.js}

@@ -3,8 +3,8 @@ import { Tooltip } from './chunk-I33UIUZD.js';
 import { Kbd } from './chunk-ANTAQAR4.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
-import { returnFocus } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { returnFocus } from './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Canvas-4QJHVLJ4.css';

package/dist/{chunk-KNAHKQD4.js → chunk-OQG4P5KU.js}

@@ -1,8 +1,8 @@
 import { Button } from './chunk-DGXZ635L.js';
 import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { usePopupLayer } from './chunk-H5XTJ7GJ.js';
-import { returnFocus } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { returnFocus } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Menu-I4SNXHOT.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';