@crewlethq/ui 0.76.1 → 0.78.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
@@ -16647,7 +16992,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* DescriptionList-DEZISDLQ.css */
+/* DescriptionList-VF7NIBXA.css */
 /*
  * Metadata pairs on one grid.
  *
@@ -16739,6 +17084,12 @@ svg.crewlet-datetime__chevron {
   margin-bottom: 0;
 }
 
+/* One type size: the terms at the details' size, in the secondary ink. */
+.crewlet-description-list--uniform .crewlet-description-list__term {
+  font-size: inherit;
+  color: var(--color-text-secondary);
+}
+
 
 /* DiffList-3JNPLQ2E.css */
 /* DiffList: one path per row, with its mark, its word and its tint.
@@ -25316,7 +25667,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* ObjectHeader-7BGA56VQ.css */
+/* ObjectHeader-VKQSEJDN.css */
 /*
  * The header of an object: its eyebrow, its head row and its fact line.
  *
@@ -25544,10 +25895,11 @@ a.crewlet-icon-btn {
 }
 
 /* A footnote may not set its column's width: the track does, and the note
-   wraps inside it, balanced so the wrap reads as deliberate. */
+   wraps inside it, balanced so the wrap reads as deliberate. It is set as
+   the label is, so a fact line holds two sizes, the labels' and the values'. */
 .crewlet-fact-line__note,
 .crewlet-fact-line__set-by {
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
   text-wrap: balance;
 }
@@ -37642,7 +37994,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tabs-7ZK2UF75.css */
+/* Tabs-M2ELSU3V.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -38123,6 +38475,74 @@ b.crewlet-switcher__match {
   box-shadow: inset 0 -1px 0 var(--color-border-default);
 }
 
+/*
+ * THE BAR: a row and its actions. The row (or the box holding the row and
+ * "More") takes the room the actions leave and gives way first: it shrinks
+ * before an action does, scrolling or folding its tabs inside that room. An
+ * underline row fills the bar, so its rule and its fold are measured in the
+ * space the actions leave; a pill or chip row keeps its own width while it
+ * fits and scrolls once it does not, so a tab never paints under an action.
+ */
+.crewlet-tabs-host {
+  display: contents;
+}
+
+.crewlet-tabs-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-tabs-bar > .crewlet-tabs {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.crewlet-tabs-bar > .crewlet-tabs--underline,
+.crewlet-tabs-bar > .crewlet-tabs-fold {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* The scroll contract an underline row has on its own, for a pill or chip
+   row that must shrink beside its actions. Its ring is drawn inside the tab,
+   as the underline's is, because the scroller clips an outset one. */
+.crewlet-tabs-bar > .crewlet-tabs--pill,
+.crewlet-tabs-bar > .crewlet-tabs--chip {
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.crewlet-tabs-bar > .crewlet-tabs--pill::-webkit-scrollbar,
+.crewlet-tabs-bar > .crewlet-tabs--chip::-webkit-scrollbar {
+  display: none;
+}
+
+.crewlet-tabs-bar > .crewlet-tabs--pill .crewlet-tabs__tab:focus-visible,
+.crewlet-tabs-bar > .crewlet-tabs--chip .crewlet-tabs__tab:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-tabs__actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-inline-start: auto;
+}
+
+/* The underline's rule runs on under the actions to the bar's edge, painted
+   on the same last pixel row the row's own border sits on. */
+.crewlet-tabs-bar--underline {
+  align-items: stretch;
+  box-shadow: inset 0 -1px 0 var(--color-border-default);
+}
+
+.crewlet-tabs-bar--underline > .crewlet-tabs__actions {
+  align-self: center;
+}
+
 /*
  * The slider ARRIVES rather than travels, and a chip changes without a fade.
  * The indicator still moves; what stops is the animation between the two
@@ -39802,7 +40222,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TileGrid-UYMVVVJK.css */
+/* TileGrid-XOEJ4P52.css */
 /*
  * TileGrid: tiles on a fixed track count that folds by the grid's own width.
  *
@@ -39851,7 +40271,9 @@ b.crewlet-switcher__match {
 }
 
 @container crewlet-tile-grid (width < 28rem) {
-  .crewlet-tile-grid > .crewlet-tile-grid__track {
+  /* As specific as the per-count rules above and after them, so a grid of two
+     or four folds to one here too, not only a grid of three. */
+  .crewlet-tile-grid[data-columns] > .crewlet-tile-grid__track {
     --crewlet-tile-grid-tracks: 1;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.76.1",
+  "version": "0.78.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.1",
-    "@crewlethq/tokens": "0.76.1",
+    "@crewlethq/icons": "0.78.0",
+    "@crewlethq/tokens": "0.78.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-7PJFUQMY.js → chunk-MGWFVAPN.js}

@@ -1,5 +1,5 @@
-import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { Tag } from './chunk-VERJCAJ4.js';
+import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ContrastBadge-CBZPGG3G.css';

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