@crewlethq/ui 0.76.1 → 0.77.0

package/README.md

@@ -205,6 +205,14 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.77.0
+
+**`CheckGrid`, checkboxes where rows meet columns**: which seats run which jobs, which people hold which access. Each box is a native checkbox named by its row and its column ("Backend Engineer Coding"), each row a group named by its row, and a box can be on, off or partly on (`mixed`). Where every column fits, a header names the columns once and the boxes stand under them; where they do not (a phone, a narrow column), each row stacks with its column's name beside every box, so no column is cut off behind a sideways scroll. Which applies is the grid's own width, by a container query, and a grid of more than six columns always stacks. A column can refuse new ticks with `disabledReason`, drawn once under the grid and read with each refused box; a box already on stays free to take off. The types are `CheckGridProps`, `CheckGridRow`, `CheckGridColumn` and `CheckGridState`.
+
+**`ChoiceCards` stands three across a form's wide column.** `minCardWidth` takes `sm`, 15rem, beside `md` (20rem, still the default) and `lg` (24rem). The new `density` prop takes `compact` (the default stays `comfortable`): the card's padding and the gap between cards step down from `--spacing-3` to `--spacing-2`, a picture is capped at 1.25rem (the icons package's `lg` glyph step, `GLYPH_SIZES.lg`) whatever size the caller drew it at, and the description takes the facts' size. Every line stays: the description, each fact and a disabled card's whole reason wrap in full, and nothing is clamped or dropped. The radios, their names and descriptions, the subgrid rows and the forced-colours treatment are unchanged. The new type is `ChoiceCardsDensity`.
+
+**A `ChoiceCards` name stays whole beside its tag.** Where the name and its `tag` do not fit on one line, the tag moves to a line of its own rather than breaking the name mid-phrase, and the title's lines stand at the top of their row, so a name stays level with its radio when a card beside it takes two. The name is at least the title step tall, its words centred in it, so its line is centred on the radio at both densities whether or not the tag wraps.
+
 ## Changes in 0.76.1
 
 **`SetupWizard`'s row of steps on a phone has a name of its own.** While the row hides steps it takes the keyboard to scroll, as a group named by the new `labels.stepsRow` ("All steps, scrolls sideways"), rather than by `stepsLabel` again, which already names the navigation around it and the list inside it.

package/dist/AgentHandoffPanel/index.js

@@ -1,12 +1,12 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-57AKYFML.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-A6NUAQFW.js';
 import '../chunk-4MJN2KN6.js';
 import '../chunk-WFCWPXJN.js';
-import '../chunk-E35HYQMK.js';
+import '../chunk-CZUIPICC.js';
 import '../chunk-222VILSP.js';
 import '../chunk-FFGEJUAP.js';
 import '../chunk-CLJGFOTV.js';
 import '../chunk-ANTAQAR4.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-6Q7RW2JJ.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-IVTQWOXV.js';
 import '../chunk-MLDTLZAO.js';
@@ -18,7 +18,7 @@ import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AppShell/index.js

@@ -1,13 +1,13 @@
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-UY3FWQWG.js';
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-HDLUG3MA.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-KNAHKQD4.js';
 export { RESIZE_HANDLE_LARGE_STEP, RESIZE_HANDLE_STEP, ResizeHandle, clampSize, useAppShellAside, useAppShellPeek } from '../chunk-PIYJNCN7.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArrangeList/index.js

@@ -1,13 +1,13 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-TKUAGWNR.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-2GBG7KPK.js';
 import '../chunk-3XDT5ZWL.js';
 import '../chunk-MPVMB2DV.js';
-import '../chunk-LMQG3VPG.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-GKWZTTFV.js';
+import '../chunk-6Q7RW2JJ.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactBar/index.js

@@ -1,21 +1,21 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-IPBSCJIZ.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-2LIGIIE2.js';
 import '../chunk-25AZQ3GZ.js';
 import '../chunk-I33UIUZD.js';
-import '../chunk-BKXUZCZX.js';
-import '../chunk-6THG44LI.js';
+import '../chunk-WOTGQVHZ.js';
+import '../chunk-KQQWGWCC.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-AVL52EME.js';
 import '../chunk-CYQBDZ6M.js';
+import '../chunk-AVL52EME.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-ANTAQAR4.js';
 import '../chunk-MLDTLZAO.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-KNAHKQD4.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactCard/index.js

@@ -1,4 +1,4 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-ZKLEAK7M.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-XL2RXAPT.js';
 import '../chunk-BRLZXYPA.js';
 import '../chunk-N2BF272H.js';
 import '../chunk-EJNJMHQG.js';
@@ -8,16 +8,16 @@ import '../chunk-AV2DXAEL.js';
 import '../chunk-BT3GB7HC.js';
 import '../chunk-KTIQSSME.js';
 import '../chunk-NHLNHH4J.js';
-import '../chunk-LMQG3VPG.js';
+import '../chunk-GKWZTTFV.js';
 import '../chunk-DOY3KC6I.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-6Q7RW2JJ.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactPanel/index.js

@@ -5,7 +5,7 @@ import '../chunk-PIYJNCN7.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AvatarPicker/index.js

@@ -1,21 +1,21 @@
-export { AvatarPicker } from '../chunk-ZW5SRQ5M.js';
-import '../chunk-SK5SLGZH.js';
+export { AvatarPicker } from '../chunk-A5HENOP2.js';
+import '../chunk-4HO3NX3B.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-I22MUEG7.js';
-import '../chunk-BKXUZCZX.js';
-import '../chunk-6THG44LI.js';
+import '../chunk-WOTGQVHZ.js';
+import '../chunk-KQQWGWCC.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-KTIQSSME.js';
 import '../chunk-MLDTLZAO.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-KNAHKQD4.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Canvas/index.js

@@ -1,4 +1,4 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-OBPINJNO.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-EMCVX5FY.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ANTAQAR4.js';
@@ -6,7 +6,7 @@ import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasBoard/index.js

@@ -1,8 +1,8 @@
-export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-FQI62PIZ.js';
+export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-ODAZIKZF.js';
 import '../chunk-5SZGKSGL.js';
-import '../chunk-KL6A7JGH.js';
+import '../chunk-SQ7GYC4K.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-OBPINJNO.js';
+import '../chunk-EMCVX5FY.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ANTAQAR4.js';
@@ -10,7 +10,7 @@ import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasToolbar/index.js

@@ -1,6 +1,6 @@
-export { CanvasToolbar, toolForKey } from '../chunk-KL6A7JGH.js';
+export { CanvasToolbar, toolForKey } from '../chunk-SQ7GYC4K.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-OBPINJNO.js';
+import '../chunk-EMCVX5FY.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ANTAQAR4.js';
@@ -8,7 +8,7 @@ import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CheckGrid/CheckGrid.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from 'react';
+/** A row of the grid: who or what the boxes on it are about. */
+export interface CheckGridRow {
+    value: string;
+    /** The row's name, drawn at its start and read as the first half of each box's name. */
+    label: string;
+    /** A picture before the name: an avatar, a glyph. Decorative; the name says it. */
+    media?: ReactNode;
+}
+/** A column of the grid: what a box in it switches on. */
+export interface CheckGridColumn {
+    value: string;
+    /** The column's name, drawn over it (beside each box where the grid stacks) and read as the second half of each box's name. */
+    label: string;
+    /** A picture before the column's name in its header. Decorative; the name says it. */
+    media?: ReactNode;
+    /**
+     * Why a box in this column cannot be ticked, where it cannot. A box left
+     * unticked in it is disabled and described by this reason, which the grid
+     * draws once under itself; a box already ticked (or partly) stays enabled,
+     * so what is on can always be taken off.
+     */
+    disabledReason?: string | undefined;
+}
+/** What one box shows: on, off, or partly on (some of what it stands for). */
+export type CheckGridState = 'checked' | 'unchecked' | 'mixed';
+export interface CheckGridProps {
+    /** Names the whole grid for a screen reader: "Jobs per seat". */
+    label: string;
+    rows: readonly CheckGridRow[];
+    columns: readonly CheckGridColumn[];
+    /** The state of the box where `row` meets `column`. */
+    stateOf: (row: string, column: string) => CheckGridState;
+    /** A box pressed: `checked` is what it asks for. */
+    onChange: (row: string, column: string, checked: boolean) => void;
+    className?: string | undefined;
+}
+/**
+ * Checkboxes where rows meet columns: which seats run which jobs, which
+ * people hold which access.
+ *
+ * ONE MARKUP FOR EVERY WIDTH, laid out by the grid's own width (a container
+ * query), never the window's. Where every column fits, a header row names the
+ * columns and each row's boxes stand under them. Where they do not, each row
+ * stacks: its name, then its boxes, each with its column's name beside it. No
+ * column is ever cut off behind a scroll the reader cannot see.
+ *
+ * A TABLE TO ASSISTIVE TECHNOLOGY, by ARIA roles on the grid's own boxes: a
+ * `table` named by `label`, a `row` for the header and each row, a
+ * `columnheader` per column and a `rowheader` per row's name, and a `cell`
+ * round each box, so a screen reader moves down a column and hears where it
+ * is. Roles rather than table elements, because the stacked layout changes
+ * every box's `display`, which takes a native table's semantics away in some
+ * browsers.
+ *
+ * EVERY BOX IS NAMED BY ITS ROW AND ITS COLUMN ("Backend Engineer Coding"),
+ * read from the two labels drawn, so the name holds the words a reader sees
+ * whichever layout stands, the stacked one included, where the header row is
+ * gone. The boxes are native checkboxes in reading order: Tab moves row by
+ * row, Space ticks.
+ */
+export declare function CheckGrid({ label, rows, columns, stateOf, onChange, className }: CheckGridProps): import("react").JSX.Element;

package/dist/CheckGrid/index.d.ts

@@ -0,0 +1,3 @@
+import './CheckGrid.css';
+export { CheckGrid } from './CheckGrid.js';
+export type { CheckGridColumn, CheckGridProps, CheckGridRow, CheckGridState } from './CheckGrid.js';

package/dist/CheckGrid/index.js

@@ -0,0 +1,11 @@
+export { CheckGrid } from '../chunk-HUIYSNBS.js';
+import '../chunk-GKWZTTFV.js';
+import '../chunk-6Q7RW2JJ.js';
+import '../chunk-PGCLHYVP.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-UAUP6XGK.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/CheckGrid-B3SRTHOJ.css

@@ -0,0 +1,287 @@
+/*
+ * 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;
+}

package/dist/Checkbox/index.js

@@ -1,10 +1,10 @@
-export { Checkbox, CheckboxGroup } from '../chunk-LMQG3VPG.js';
-import '../chunk-FB3TCNQP.js';
+export { Checkbox, CheckboxGroup } from '../chunk-GKWZTTFV.js';
+import '../chunk-6Q7RW2JJ.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChoiceCards/ChoiceCards.d.ts

@@ -38,8 +38,14 @@ export interface ChoiceCardOption {
      */
     disabledReasonAt?: number | undefined;
 }
-/** The narrowest a card stands: `md` 20rem, `lg` 24rem. */
-export type ChoiceCardsMinWidth = 'md' | 'lg';
+/** The narrowest a card stands: `sm` 15rem, `md` 20rem, `lg` 24rem. */
+export type ChoiceCardsMinWidth = 'sm' | 'md' | 'lg';
+/**
+ * How much room a card's lines take: `comfortable`, the default, or
+ * `compact`, tighter padding and gaps and a smaller picture, for a set of
+ * three that has to stand side by side in a form's wide column.
+ */
+export type ChoiceCardsDensity = 'comfortable' | 'compact';
 export interface ChoiceCardsProps {
     /** Names the group for a screen reader. */
     label: string;
@@ -48,11 +54,19 @@ export interface ChoiceCardsProps {
     value: string | null;
     onChange: (value: string) => void;
     /**
-     * The narrowest a card stands, which decides how many share a row: `md`
-     * (20rem) for a short name and facts, `lg` (24rem) for choices with more to
-     * say. A form's column holds one to a row; a wider surface two or three.
+     * The narrowest a card stands, which decides how many share a row: `sm`
+     * (15rem) for three compact cards across a form's wide column, `md` (20rem)
+     * for a short name and facts, `lg` (24rem) for choices with more to say. A
+     * form's column holds one to a row; a wider surface two or three. Under any
+     * of them a phone's width stacks the cards, one to a row.
      */
     minCardWidth?: ChoiceCardsMinWidth | undefined;
+    /**
+     * How much room each card's lines take. `compact` keeps every line (the
+     * description, each fact, a disabled card's whole reason) and only takes
+     * less room around them; nothing is clamped or dropped.
+     */
+    density?: ChoiceCardsDensity | undefined;
     className?: string | undefined;
 }
 /**
@@ -77,4 +91,4 @@ export interface ChoiceCardsProps {
  * A FACT'S STATE IS NEVER ONLY A COLOUR: the dot sits beside words that say
  * it ("Docker 24.0.7 found", "E2B key not set").
  */
-export declare function ChoiceCards({ label, options, value, onChange, minCardWidth, className }: ChoiceCardsProps): import("react").JSX.Element;
+export declare function ChoiceCards({ label, options, value, onChange, minCardWidth, density, className, }: ChoiceCardsProps): import("react").JSX.Element;

package/dist/ChoiceCards/index.d.ts

@@ -1,3 +1,3 @@
 import './ChoiceCards.css';
 export { ChoiceCards } from './ChoiceCards.js';
-export type { ChoiceCardFact, ChoiceCardOption, ChoiceCardsMinWidth, ChoiceCardsProps } from './ChoiceCards.js';
+export type { ChoiceCardFact, ChoiceCardOption, ChoiceCardsDensity, ChoiceCardsMinWidth, ChoiceCardsProps } from './ChoiceCards.js';