@crewlethq/ui 0.76.1 → 0.78.0

package/README.md

@@ -205,6 +205,24 @@ 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.78.0
+
+**`Tabs` take `actions`, controls at the row's far end in a tab list too.** A screen's own buttons ("Check now", "New") stand beside its tabs, in one bar with them, and never inside the tab list: the actions are the row's next sibling, so a screen reader meets a tab list of tabs alone and then the buttons, and the keyboard reaches the tabs (one stop, the arrows inside) and then each action. In router mode they stand outside the `nav` for the same reason. The actions keep their width at every size and the row gives way first: it takes the room left beside them, and scrolls (`overflow="scroll"`) or folds into "More" (`overflow="menu"`) inside that room, where the slider and the fold are measured. A pill or chip row keeps its width while it fits and scrolls inside the bar once it does not, so no tab paints under an action. An underline row's rule runs on under the actions to the bar's edge. With `actions`, `className` lands on the bar, the outermost element (`.crewlet-tabs-bar`, the actions in `.crewlet-tabs__actions`). Actions that arrive after the row is drawn, or go, never re-parent it: every row now sits in one wrapper element, `display: contents` while there are no actions, so the focused tab keeps focus and the slider and fold measure the live row. Without actions `className` stays on the row. `trailing` is unchanged: router mode only, inside the `nav`.
+
+**`DescriptionList` takes `uniform`**: the terms at the details' own size, told apart by the secondary ink alone, for a list inside a table row where a second, smaller size reads as a caption rather than as part of the row.
+
+**A `FactLine` holds two sizes.** A fact's note and by-line are set at the label's size and ink rather than a step under it, so a line of facts reads in the labels' size and the values' size and nothing else.
+
+**A `TileGrid` of two or four folds to one track on a phone.** The one-column fold below 28rem was less specific than the per-count rules, so only a grid of three ever reached one track. It now matches every count.
+
+## 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';
@@ -14,11 +14,11 @@ import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-PIYJNCN7.js';
 import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.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/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-XSPCITPN.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';
-import '../chunk-25AZQ3GZ.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-QEVYTXCY.js';
+import '../chunk-36WK24AI.js';
 import '../chunk-I33UIUZD.js';
-import '../chunk-BKXUZCZX.js';
-import '../chunk-6THG44LI.js';
+import '../chunk-PQDQTK64.js';
+import '../chunk-LPN3RHMA.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-XSPCITPN.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,23 +1,23 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-ZKLEAK7M.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-HZHFXKVP.js';
 import '../chunk-BRLZXYPA.js';
 import '../chunk-N2BF272H.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-4AUTALJA.js';
-import '../chunk-AV2DXAEL.js';
 import '../chunk-BT3GB7HC.js';
 import '../chunk-KTIQSSME.js';
 import '../chunk-NHLNHH4J.js';
-import '../chunk-LMQG3VPG.js';
+import '../chunk-4AUTALJA.js';
+import '../chunk-AV2DXAEL.js';
 import '../chunk-DOY3KC6I.js';
+import '../chunk-GKWZTTFV.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-PP5E3FGY.js';
+import '../chunk-LE6K34SN.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-I22MUEG7.js';
-import '../chunk-BKXUZCZX.js';
-import '../chunk-6THG44LI.js';
+import '../chunk-PQDQTK64.js';
+import '../chunk-LPN3RHMA.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-XSPCITPN.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,12 +1,12 @@
-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';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
+import '../chunk-OMV5W53A.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,16 +1,16 @@
-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';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
+import '../chunk-OMV5W53A.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,14 +1,14 @@
-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';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
+import '../chunk-OMV5W53A.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';