@crewlethq/ui 0.76.0 → 0.77.0

package/dist/styles.css

@@ -9908,6 +9908,296 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
+/* CheckGrid-B3SRTHOJ.css */
+/*
+ * CheckGrid: checkboxes where rows meet columns.
+ *
+ * WIDE, every column stands side by side under a header row: the row names'
+ * track (at least 10rem) and one equal track per column (7.5rem), so the
+ * columns of every row line up without a subgrid. A column's name beside each
+ * box is said and not drawn, since the header draws it once.
+ *
+ * NARROW, each row stacks: its name on a line of its own, then its boxes
+ * wrapping, each with its column's name drawn beside it; the header row is
+ * gone. No column is cut off behind a sideways scroll. WHERE IS NARROW is the
+ * grid's own width, by a container query, so a narrow column on a wide screen
+ * stacks too: under the width every column needs, the name's track plus each
+ * column's track and gap. A container query cannot read a custom property in
+ * its condition, so that width is written once per column count below, up to
+ * the six the grid stands side by side for (`MOST_COLUMNS`); a grid of more
+ * always stacks.
+ */
+.crewlet-check-grid {
+  --crewlet-check-grid-name: 10rem;
+  --crewlet-check-grid-column: 7.5rem;
+  container: crewlet-check-grid / inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-check-grid__table {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.crewlet-check-grid__head,
+.crewlet-check-grid__row {
+  display: grid;
+  grid-template-columns:
+    minmax(var(--crewlet-check-grid-name), 1fr)
+    repeat(var(--crewlet-check-grid-columns, 3), var(--crewlet-check-grid-column));
+  column-gap: var(--spacing-3);
+  align-items: center;
+}
+
+/* A column's name over its boxes: its glyph and its word, wrapping inside its track. */
+.crewlet-check-grid__column {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  text-align: center;
+}
+
+/* A row's name: its picture and its words, at the start. */
+.crewlet-check-grid__name {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-check-grid__media {
+  display: inline-flex;
+  flex: none;
+}
+
+/* Each box's cell stands centred under its column's name. */
+.crewlet-check-grid__row > .crewlet-check-grid__cell {
+  display: inline-flex;
+  justify-self: center;
+}
+
+/* WIDE: the column's name beside a box is said (it names the box) and not drawn. */
+.crewlet-check-grid__box .crewlet-checkbox__text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* Why a column refuses a box, once, under the grid. */
+.crewlet-check-grid__notes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  list-style: none;
+}
+
+/* NARROW, by column count: under the name's track plus each column's track and gap. */
+@container crewlet-check-grid (width < 18.25rem) {
+  .crewlet-check-grid--1 .crewlet-check-grid__head {
+    display: none;
+  }
+
+  .crewlet-check-grid--1 .crewlet-check-grid__row {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--spacing-3);
+    padding-block: var(--spacing-1);
+  }
+
+  .crewlet-check-grid--1 .crewlet-check-grid__name {
+    flex-basis: 100%;
+  }
+
+  .crewlet-check-grid--1 .crewlet-check-grid__box .crewlet-checkbox__text {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+}
+
+@container crewlet-check-grid (width < 26.5rem) {
+  .crewlet-check-grid--2 .crewlet-check-grid__head {
+    display: none;
+  }
+
+  .crewlet-check-grid--2 .crewlet-check-grid__row {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--spacing-3);
+    padding-block: var(--spacing-1);
+  }
+
+  .crewlet-check-grid--2 .crewlet-check-grid__name {
+    flex-basis: 100%;
+  }
+
+  .crewlet-check-grid--2 .crewlet-check-grid__box .crewlet-checkbox__text {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+}
+
+@container crewlet-check-grid (width < 34.75rem) {
+  .crewlet-check-grid--3 .crewlet-check-grid__head {
+    display: none;
+  }
+
+  .crewlet-check-grid--3 .crewlet-check-grid__row {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--spacing-3);
+    padding-block: var(--spacing-1);
+  }
+
+  .crewlet-check-grid--3 .crewlet-check-grid__name {
+    flex-basis: 100%;
+  }
+
+  .crewlet-check-grid--3 .crewlet-check-grid__box .crewlet-checkbox__text {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+}
+
+@container crewlet-check-grid (width < 43rem) {
+  .crewlet-check-grid--4 .crewlet-check-grid__head {
+    display: none;
+  }
+
+  .crewlet-check-grid--4 .crewlet-check-grid__row {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--spacing-3);
+    padding-block: var(--spacing-1);
+  }
+
+  .crewlet-check-grid--4 .crewlet-check-grid__name {
+    flex-basis: 100%;
+  }
+
+  .crewlet-check-grid--4 .crewlet-check-grid__box .crewlet-checkbox__text {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+}
+
+@container crewlet-check-grid (width < 51.25rem) {
+  .crewlet-check-grid--5 .crewlet-check-grid__head {
+    display: none;
+  }
+
+  .crewlet-check-grid--5 .crewlet-check-grid__row {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--spacing-3);
+    padding-block: var(--spacing-1);
+  }
+
+  .crewlet-check-grid--5 .crewlet-check-grid__name {
+    flex-basis: 100%;
+  }
+
+  .crewlet-check-grid--5 .crewlet-check-grid__box .crewlet-checkbox__text {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+}
+
+@container crewlet-check-grid (width < 59.5rem) {
+  .crewlet-check-grid--6 .crewlet-check-grid__head {
+    display: none;
+  }
+
+  .crewlet-check-grid--6 .crewlet-check-grid__row {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--spacing-3);
+    padding-block: var(--spacing-1);
+  }
+
+  .crewlet-check-grid--6 .crewlet-check-grid__name {
+    flex-basis: 100%;
+  }
+
+  .crewlet-check-grid--6 .crewlet-check-grid__box .crewlet-checkbox__text {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+}
+
+/* More columns than the grid stands side by side for: always stacked. */
+.crewlet-check-grid--many .crewlet-check-grid__head {
+  display: none;
+}
+
+.crewlet-check-grid--many .crewlet-check-grid__row {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--spacing-3);
+  padding-block: var(--spacing-1);
+}
+
+.crewlet-check-grid--many .crewlet-check-grid__name {
+  flex-basis: 100%;
+}
+
+.crewlet-check-grid--many .crewlet-check-grid__box .crewlet-checkbox__text {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip-path: none;
+  white-space: normal;
+}
+
+
 /* Checkbox-GAMV2XD7.css */
 /*
  * Checkbox: a box, its label and its consequence as one target.
@@ -10353,7 +10643,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* ChoiceCards-HAGJMK6Q.css */
+/* ChoiceCards-TVMBO3HZ.css */
 /*
  * Choices a person compares, as cards in a grid that wraps. The chosen card
  * takes the selected fill and the strong boundary, as a chosen ChoiceList row
@@ -10369,9 +10659,9 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
  * with Runs. Facts run together as one line of meta wrapped differently in
  * each card, and three cards read as three different shapes.
  *
- * A card is at least 20rem (24rem at `lg`), the width a fact's name and a
- * short value keep to one line in: a form's column holds one to a row, and a
- * wider surface two or three, aligned.
+ * A card is at least 20rem (15rem at `sm`, 24rem at `lg`), the width a fact's
+ * name and a short value keep to one line in: a form's column holds one to a
+ * row, and a wider surface two or three, aligned.
  */
 .crewlet-choice-cards {
   --crewlet-choice-cards-min: 20rem;
@@ -10388,6 +10678,10 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   row-gap: 0;
 }
 
+.crewlet-choice-cards--sm {
+  --crewlet-choice-cards-min: 15rem;
+}
+
 .crewlet-choice-cards--lg {
   --crewlet-choice-cards-min: 24rem;
 }
@@ -10507,11 +10801,19 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   outline: 2px solid transparent;
 }
 
-/* The first line: the picture, the name and its tag, stopping short of the radio. */
+/*
+ * The first line: the picture, the name and its tag, stopping short of the
+ * radio. Where the name and the tag do not fit side by side, the tag moves to
+ * a line of its own rather than breaking the name mid-phrase. The lines stand
+ * at the row's top, so where a card beside it takes two, the name stays level
+ * with its radio.
+ */
 .crewlet-choice-cards__title {
   display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
   align-items: center;
-  gap: var(--spacing-2);
+  gap: var(--spacing-1) var(--spacing-2);
   grid-row: 1;
   min-width: 0;
   min-height: var(--crewlet-choice-cards-title);
@@ -10538,7 +10840,17 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   border-color: var(--color-border-strong);
 }
 
+/*
+ * THE NAME IS THE TITLE LINE'S STRUT: at least the title step tall, its words
+ * centred in it. The title wraps (a tag that does not fit takes a line of its
+ * own) and its lines stand at the row's top, so a line is only as tall as what
+ * is on it; without the strut a name in the document's 18.85px line sat 3.5px
+ * above the radio, which is centred on the title step.
+ */
 .crewlet-choice-cards__label {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--crewlet-choice-cards-title);
   min-width: 0;
   color: var(--color-text-primary);
   font-weight: var(--font-weight-medium);
@@ -10620,6 +10932,39 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   font-size: var(--font-size-xs);
 }
 
+/*
+ * COMPACT: the same lines in less room, for three cards side by side in a
+ * form's wide column. The padding and the gaps between cards step down one
+ * (a card's own lines already keep the smallest), the picture is capped at
+ * the `lg` glyph step, and the description takes the facts' size. Every line
+ * stays: a description and a disabled card's reason wrap in full, since a
+ * reason cut short is a dead end with no way to read why.
+ */
+.crewlet-choice-cards--compact {
+  /* The largest picture a compact card draws: the icons package's `lg` glyph step (GLYPH_SIZES.lg, 20px). */
+  --crewlet-choice-cards-compact-media: 1.25rem;
+  column-gap: var(--spacing-2);
+}
+
+.crewlet-choice-cards--compact .crewlet-choice-cards__card {
+  margin-block-end: var(--spacing-2);
+  padding: var(--spacing-2);
+}
+
+.crewlet-choice-cards--compact .crewlet-choice-cards__radio {
+  inset-block-start: calc(var(--spacing-2) + (var(--crewlet-choice-cards-title) - var(--crewlet-choice-cards-radio)) / 2);
+  inset-inline-end: var(--spacing-2);
+}
+
+/* The picture at most the `lg` glyph step, whatever size the caller drew it at, a wrapped mark included. */
+.crewlet-choice-cards--compact .crewlet-choice-cards__media svg {
+  inline-size: var(--crewlet-choice-cards-compact-media);
+  block-size: var(--crewlet-choice-cards-compact-media);
+}
+
+.crewlet-choice-cards--compact .crewlet-choice-cards__description {
+  font-size: var(--font-size-xs);
+}
 
 /*
  * WHERE SUBGRID IS SUPPORTED, every card spans the same rows of the group and
@@ -31431,7 +31776,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SetupWizard-2SUMQEWU.css */
+/* SetupWizard-Y2PFPBCZ.css */
 /*
  * SetupWizard: a setup walked step by step on a page of its own
  * (SetupWizard.tsx).
@@ -31743,14 +32088,27 @@ svg.crewlet-select__chevron {
    * THE SCROLLER SAYS IT SCROLLS: with its bar hidden, an edge that hides
    * steps fades out, at whichever side has steps beyond it, so a row cut at
    * the screen's edge reads as more to come rather than as the last step.
+   *
+   * THE FADE NEVER DIMS A FOCUS RING. A mask fades everything the element
+   * paints, its own outline included, so the scroller's ring is drawn by the
+   * frame around it, which is not masked. And a pill that takes focus is
+   * scrolled clear of the faded edges, so its ring is never in the fade
+   * either: `scroll-padding-inline` is the fade's own width, which the wizard
+   * reads to place it (SetupWizard.tsx, `clearOfFade`).
    */
-  .crewlet-setup-wizard__steps {
+  .crewlet-setup-wizard__steps-frame {
     --crewlet-setup-wizard-fade: var(--spacing-6);
+
+    min-width: 0;
+  }
+
+  .crewlet-setup-wizard__steps {
     --crewlet-setup-wizard-fade-left: 0px;
     --crewlet-setup-wizard-fade-right: 0px;
 
     min-width: 0;
     overflow-x: auto;
+    scroll-padding-inline: var(--crewlet-setup-wizard-fade);
     overscroll-behavior-x: contain;
     scrollbar-width: none;
     -webkit-mask-image: linear-gradient(
@@ -31781,8 +32139,20 @@ svg.crewlet-select__chevron {
     --crewlet-setup-wizard-fade-right: var(--crewlet-setup-wizard-fade);
   }
 
-  /* A row that overflows takes the keyboard, so it can be scrolled without a pointer; it draws no edge, so the ring sits inside it. */
+  /*
+   * A row that overflows takes the keyboard, so it can be scrolled without a
+   * pointer. Its ring is the frame's, unmasked, inside the frame's edge, and
+   * the frame's ring is the one that carries the focus in a forced-colours
+   * mode too. The scroller's own outline is transparent only to turn off the
+   * browser's default ring, which would sit under the mask, dimmed, beside
+   * the frame's (transparent rather than none, as the kit's focus check asks
+   * of every focus style).
+   */
   .crewlet-setup-wizard__steps:focus-visible {
+    outline: 2px solid transparent;
+  }
+
+  .crewlet-setup-wizard__steps-frame:has(> .crewlet-setup-wizard__steps:focus-visible) {
     outline: 2px solid var(--color-focus);
     outline-offset: var(--size-focus-ring-inset-offset);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.76.0",
+  "version": "0.77.0",
   "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.76.0",
-    "@crewlethq/tokens": "0.76.0",
+    "@crewlethq/icons": "0.77.0",
+    "@crewlethq/tokens": "0.77.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/{chunk-FB3TCNQP.js → chunk-6Q7RW2JJ.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 { IconButton } from './chunk-UAUP6XGK.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Input-WSMB7JG2.css';

package/dist/{chunk-OBPINJNO.js → chunk-EMCVX5FY.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 { IconButton } from './chunk-UAUP6XGK.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Canvas-4QJHVLJ4.css';

package/dist/{chunk-OQG4P5KU.js → chunk-KNAHKQD4.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 { IconButton } from './chunk-UAUP6XGK.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Menu-I4SNXHOT.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';

package/dist/{chunk-HPI5J6AR.js → chunk-SWLVR54P.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 { IconButton } from './chunk-UAUP6XGK.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DateTimePicker-PM6TIRIX.css';
 import { useMemo, useState, useEffect } from 'react';

package/dist/{chunk-WK4FQPYW.js → chunk-TD6LHL7M.js}

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