@crewlethq/ui 0.35.0 → 0.36.0

package/dist/ArtifactMakeRow/ArtifactMakeRow.d.ts

@@ -0,0 +1,39 @@
+import { type ArtifactKind } from '../ArtifactKindGlyph/index.js';
+/** One kind a reader can start from the row. */
+export interface ArtifactMakeRowItem {
+    kind: ArtifactKind;
+    /** The kind's name, as what one makes: "Docs". */
+    label: string;
+    /** What the kind is for, in a few words under its name: "Live company figures". */
+    detail?: string | undefined;
+    /** Where starting one goes. Left out with `disabledReason`, the item starts nothing. */
+    href?: string | undefined;
+    /** Why this reader cannot start one. The item stays focusable and says so. */
+    disabledReason?: string | undefined;
+}
+export interface ArtifactMakeRowProps {
+    /** The kinds, in the order they are offered. */
+    items: readonly ArtifactMakeRowItem[];
+    /** What the row is called for assistive technology, when no heading names it. */
+    'aria-label'?: string | undefined;
+    /** The id of the heading that names the row. */
+    'aria-labelledby'?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * The kinds a reader can start, as one quiet tray above their work: each
+ * kind's glyph on its own tint, its name and what it is for, the whole item
+ * one link. A toolbar for making things rather than a hero: one line high on
+ * a wide page, the details dropped before a name is cut, and three across on
+ * a phone.
+ *
+ * THE TRAY IS A WORKBENCH, Crewlet's dotted field under the kinds the way the
+ * org chart's canvas sits under its seats, and an item lifts off it as a card
+ * under the pointer. The glyph is the one coloured thing in each item, so six
+ * hues read as six kinds and never as six coloured boxes.
+ *
+ * AN ITEM THAT CANNOT START is still a stop, so a reader moving through the
+ * row by keyboard hears why (`disabledReason`) rather than finding a kind
+ * missing.
+ */
+export declare function ArtifactMakeRow({ items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, }: ArtifactMakeRowProps): import("react").JSX.Element;

package/dist/ArtifactMakeRow/index.d.ts

@@ -0,0 +1,4 @@
+import '../ArtifactKindIllustration/ArtifactKinds.css';
+import './ArtifactMakeRow.css';
+export { ArtifactMakeRow } from './ArtifactMakeRow.js';
+export type { ArtifactMakeRowItem, ArtifactMakeRowProps } from './ArtifactMakeRow.js';

package/dist/ArtifactMakeRow/index.js

@@ -0,0 +1,4 @@
+export { ArtifactMakeRow } from '../chunk-66ADEPFB.js';
+import '../chunk-CE2THTQR.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArtifactMakeRow-RWUTS5MC.css

@@ -0,0 +1,167 @@
+/*
+ * The Make something new tray.
+ *
+ * Every colour is a token: the tray's ground, its dots and its hairlines are
+ * the surface and border steps, and each kind's mark reads the kind's own
+ * Fill, Line and Ink (`ArtifactKinds.css`), so the tray repaints with the
+ * theme and holds no colour of its own.
+ *
+ * THE TRAY SIZES ITSELF BY ITS OWN WIDTH, never the window's: it sits in a
+ * page column a sidebar narrows, so three steps are container queries on the
+ * tray. Under 560px three across in two lines; from 560px the six in one
+ * line, each its mark over its name, so a long name is never cut; from 920px
+ * the mark beside the name and what the kind is for under it.
+ */
+
+.crewlet-make-row {
+  container-type: inline-size;
+  /* A WORKBENCH: the canvas's dotted field on the sheet itself, one step
+     quieter than a canvas that pans, inside a hairline ring. */
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-surface-background);
+  background-image: radial-gradient(var(--color-border-default) 1px, transparent 1.2px);
+  background-size: var(--spacing-4) var(--spacing-4);
+  background-position: calc(var(--spacing-4) / 2) calc(var(--spacing-4) / 2);
+}
+
+.crewlet-make-row__list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: var(--spacing-1);
+  list-style: none;
+}
+
+.crewlet-make-row__cell {
+  display: flex;
+  min-width: 0;
+}
+
+.crewlet-make-row__item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  box-sizing: border-box;
+  padding: var(--spacing-3) var(--spacing-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  outline: none;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-out),
+    border-color var(--motion-duration-fast) var(--motion-easing-out),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+/* THE GLYPH ON ITS KIND'S TINT, the one coloured thing in the item. */
+.crewlet-make-row__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  background: var(--crewlet-kind-fill);
+  box-shadow: inset 0 0 0 1px var(--crewlet-kind-line);
+  color: var(--crewlet-kind-ink);
+}
+
+.crewlet-make-row__words {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-make-row__name,
+.crewlet-make-row__detail {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-make-row__name {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.3;
+}
+
+/* WHAT IT IS FOR is the widest step's: on a narrower tray the name alone
+   says it, and the details are kept as the item's description. */
+.crewlet-make-row__detail {
+  display: none;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: 1.35;
+}
+
+@container (width >= 560px) {
+  .crewlet-make-row__list {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .crewlet-make-row__item {
+    padding: var(--spacing-2) var(--spacing-1);
+  }
+}
+
+@container (width >= 920px) {
+  .crewlet-make-row__item {
+    flex-direction: row;
+    gap: var(--spacing-3);
+    padding: var(--spacing-2);
+  }
+
+  .crewlet-make-row__words {
+    align-items: flex-start;
+  }
+
+  .crewlet-make-row__detail {
+    display: block;
+  }
+}
+
+/* AN ITEM LIFTS OFF THE BENCH under the pointer as a card: the card's
+   ground, the hairline a card is found by and the lightest shadow, and
+   nothing inside it moves. */
+a.crewlet-make-row__item:hover {
+  border-color: var(--color-border-default);
+  background-color: var(--color-surface-subtle);
+  box-shadow: var(--shadow-xs);
+}
+
+a.crewlet-make-row__item:active {
+  background-color: var(--color-surface-pressed);
+  box-shadow: none;
+}
+
+/* ON ITS OWN EDGE: an item draws a hairline once lifted, so the ring sits on
+   it rather than standing off it with a gap between two edges. */
+.crewlet-make-row__item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-make-row__item--disabled {
+  cursor: not-allowed;
+}
+
+.crewlet-make-row__item--disabled .crewlet-make-row__mark,
+.crewlet-make-row__item--disabled .crewlet-make-row__words {
+  opacity: 0.55;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-make-row__item {
+    transition: none;
+  }
+}

package/dist/ArtifactPanel/ArtifactPanel.d.ts

@@ -26,6 +26,13 @@ export interface ArtifactPanelProps {
     onExpandedChange?: ((expanded: boolean) => void) | undefined;
     /** Controls in the head, before expand and close. */
     actions?: ReactNode;
+    /**
+     * What stays under the body however far it scrolls: the panel's own
+     * commit, such as a hand-off's Send. Drawn on a hairline at the panel's
+     * foot, never inside the scrolling body, so it is in reach while the
+     * reader is at the top of a long form.
+     */
+    footer?: ReactNode;
     /**
      * Whether focus moves to the panel's heading when it opens. True when the
      * reader opened it; false for a panel a link opened on arrival, which must
@@ -56,7 +63,7 @@ export interface ArtifactPanelProps {
  * portalled out of it, and the press that closes one of them never reaches
  * this.
  */
-export declare function ArtifactPanel({ title, icon, onClose, size, expanded, onExpandedChange, actions, focusOnOpen, labels, className, children, }: ArtifactPanelProps): import("react").JSX.Element;
+export declare function ArtifactPanel({ title, icon, onClose, size, expanded, onExpandedChange, actions, footer, focusOnOpen, labels, className, children, }: ArtifactPanelProps): import("react").JSX.Element;
 export interface ArtifactWorkspaceProps {
     /** The open panel, if any: an [ArtifactPanel]. */
     panel?: ReactNode;

package/dist/ArtifactPanel/index.js

@@ -1,4 +1,4 @@
-export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-HUVG2FFT.js';
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-Y5BD4MTE.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{ArtifactPanel-HW3SU7CP.css → ArtifactPanel-KKUUIPEU.css}

@@ -117,6 +117,15 @@
   overscroll-behavior: contain;
 }
 
+/* THE FOOT holds the panel's own commit, outside the scrolling body, so it
+   stays in reach at every scroll. Its inset is the body's. */
+.crewlet-artifact-panel__foot {
+  flex: none;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
 /* NOT ROOM FOR TWO COLUMNS: the panel slides over the artifact's end edge,
    raised off it, rather than squeezing the artifact under a useful width. */
 @container crewlet-artifact-workspace (width < 960px) {

package/dist/AuthLayout/index.js

@@ -1,6 +1,6 @@
-export { AuthLayout } from '../chunk-VDPJGP4Q.js';
+export { AuthLayout } from '../chunk-WX2NIG4G.js';
 import '../chunk-7KBNFFM3.js';
-import '../chunk-ACA27MZH.js';
+import '../chunk-5QXRI35B.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/AvatarPicker/index.js

@@ -1,8 +1,8 @@
-export { AvatarPicker } from '../chunk-FJJHD73S.js';
+export { AvatarPicker } from '../chunk-GYBDPCRC.js';
 import '../chunk-SUXP4OBT.js';
 import '../chunk-K3IJQNB7.js';
-import '../chunk-YEVG2X5R.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-YEVG2X5R.js';
 import '../chunk-CCAXYHQS.js';
 import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';

package/dist/Canvas/index.js

@@ -1,7 +1,7 @@
-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-3P4Y5RX6.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-4BYHAOHH.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-6ZJ3N7QI.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/CanvasBoard/CanvasBoard.d.ts

@@ -48,9 +48,10 @@
  * are counter-scaled by the zoom, so a board's label is readable, its edge is
  * a hairline and its handle is a full pointer target whatever the zoom, while
  * the board itself scales with the canvas. What a board says is held to the
- * room it is drawn in (`boardRoom`): a name too narrow to read is not drawn,
+ * room it is drawn in: a name with too little room is shortened to a few
+ * letters, then to the board's number, and only then left out (`boardName`),
  * and a placeholder drops the lines it has no room for rather than spill them
- * over the boards beside it.
+ * over the boards beside it (`boardRoom`).
  */
 import { type ReactNode, type Ref } from 'react';
 import { type CanvasHandle, type CanvasLabels, type CanvasPoint } from '../Canvas/index.js';
@@ -215,19 +216,32 @@ export interface CanvasBoardProps {
     className?: string | undefined;
 }
 /**
- * WHAT A BOARD HAS ROOM TO SAY, from its size on screen.
- *
- * `title` is whether its name is drawn above it: a name narrower than a few
- * letters reads as a stray mark, so a board drawn narrower than
- * [BOARD_TITLE_MIN_WIDTH] goes unnamed until it is zoomed into. `lines` is how
- * many of a placeholder's two lines (its size, then why it is not running) fit
- * inside it at the chrome's own type, so the lines it has no room for are left
- * out rather than clipped at both ends.
+ * WHAT A BOARD'S PLACEHOLDER HAS ROOM TO SAY, from its size on screen: how
+ * many of its two lines (its size, then why it is not running) fit inside it
+ * at the chrome's own type, so the lines it has no room for are left out
+ * rather than clipped at both ends.
  */
 export declare function boardRoom(width: number, height: number): {
-    title: boolean;
     lines: 0 | 1 | 2;
 };
-/** The narrowest a board is drawn, in screen pixels, with its name above it. */
-export declare const BOARD_TITLE_MIN_WIDTH = 40;
+/**
+ * WHAT A BOARD IS CALLED ABOVE IT, from the room its name row has on screen
+ * (`room`, in screen pixels: the board's width, less what the row's other
+ * controls take).
+ *
+ * Its name, while at least [BOARD_NAME_MIN_CHARS] letters and an ellipsis
+ * fit, so a shortened name still says which board it is ("Hom..." rather than
+ * "H..." or a lone ellipsis); `whole` is false once the name may be shortened,
+ * so the full name can be offered as a tooltip. Narrower than that, its place
+ * in the design ("3"), which a reader can count to and which stays legible
+ * down to a single digit's width. Narrower still, nothing: a mark that narrow
+ * reads as a stray scratch. The name row is counter-scaled, so the type is the
+ * same size at every zoom and only the room changes.
+ */
+export declare function boardName(title: string, position: number, room: number): {
+    text: string;
+    whole: boolean;
+} | null;
+/** The fewest letters a shortened board name keeps before its ellipsis. */
+export declare const BOARD_NAME_MIN_CHARS = 3;
 export declare function CanvasBoard({ label, boards, notes, renderBoard, maxLive, minLiveWidth, editable, minSide, maxSide, onBoardChange, onNoteChange, onNoteRemove, onNoteCreate, onBoardCreate, onBoardRemove, onOpen, onActivate, selected: heldSelection, onSelectedChange, controlsExtra, toolbar, labels, canvasLabels, canvasRef, className, }: CanvasBoardProps): import("react").JSX.Element;

package/dist/CanvasBoard/index.d.ts

@@ -1,5 +1,5 @@
 import './CanvasBoard.css';
-export { BOARD_TITLE_MIN_WIDTH, CanvasBoard, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, TITLE_GLYPH_EM, boardRoom, titleSize, } from './CanvasBoard.js';
+export { BOARD_NAME_MIN_CHARS, CanvasBoard, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, TITLE_GLYPH_EM, boardName, boardRoom, titleSize, } from './CanvasBoard.js';
 export type { CanvasBoardItem, CanvasBoardLabels, CanvasBoardNote, CanvasBoardProps, CanvasBoardRect, CanvasBoardSelection, CanvasBoardTool, CanvasNoteColor, } from './CanvasBoard.js';
 export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, liveBoards } from './budget.js';
 export type { BoardFrame } from './budget.js';

package/dist/CanvasBoard/index.js

@@ -1,11 +1,11 @@
-export { BOARD_TITLE_MIN_WIDTH, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardRoom, liveBoards, titleSize } from '../chunk-E35CMI5D.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-FHHYXZSP.js';
 import '../chunk-5SZGKSGL.js';
-import '../chunk-3Y56GQPM.js';
+import '../chunk-7VAUGG6B.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-3P4Y5RX6.js';
+import '../chunk-4BYHAOHH.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-6ZJ3N7QI.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/{CanvasBoard-5NNSKY6A.css → CanvasBoard-TS4P356F.css}

@@ -82,19 +82,26 @@
 }
 
 /*
- * HOVER, then SELECTION, in the accent: one screen pixel and then two, over
- * the hairline. Hovering a board's name is hovering its board, which is how a
- * reader finds the board a name belongs to on a crowded canvas.
+ * HOVER, then SELECTION: one screen pixel each, over the hairline. Hover is
+ * the selected edge, the accent mixed toward the canvas, so pointing at a
+ * board previews the pick without claiming it; selection is the full accent,
+ * crisp, with its four corners drawn, which are what say "this one" on a
+ * canvas where a board's own content can be any colour. It was two pixels,
+ * the focus ring's weight in the focus ring's hue, so a picked board and the
+ * board the keyboard was on read alike; the 2px ring is the live board's now
+ * alone ([data-active], below), which takes the pointer like a focused frame.
+ * Hovering a board's name is hovering its board, which is how a reader finds
+ * the board a name belongs to on a crowded canvas.
  */
 .crewlet-canvas-board__board:hover .crewlet-canvas-board__body,
 .crewlet-canvas-board__note:hover {
-  outline: calc(1px * var(--crewlet-canvas-board-unzoom)) solid var(--color-brand-accent);
+  outline: calc(1px * var(--crewlet-canvas-board-unzoom)) solid var(--color-border-selected);
   outline-offset: 0;
 }
 
 .crewlet-canvas-board__board[data-selected] .crewlet-canvas-board__body,
 .crewlet-canvas-board__note[data-selected] {
-  outline: calc(2px * var(--crewlet-canvas-board-unzoom)) solid var(--color-brand-accent);
+  outline: calc(1px * var(--crewlet-canvas-board-unzoom)) solid var(--color-brand-accent);
   outline-offset: 0;
 }
 
@@ -202,7 +209,7 @@
   transform-origin: bottom left;
 }
 
-/* A board drawn too narrow to name goes unnamed (`boardRoom`). */
+/* A board drawn too narrow for even its number goes unnamed (`boardName`). */
 .crewlet-canvas-board__board[data-untitled] > .crewlet-canvas-board__chrome {
   display: none;
 }

package/dist/CanvasToolbar/index.js

@@ -1,9 +1,9 @@
-export { CanvasToolbar, toolForKey } from '../chunk-3Y56GQPM.js';
+export { CanvasToolbar, toolForKey } from '../chunk-7VAUGG6B.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-3P4Y5RX6.js';
+import '../chunk-4BYHAOHH.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-6ZJ3N7QI.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/Card/index.js

@@ -1,4 +1,4 @@
-export { Card } from '../chunk-ACA27MZH.js';
+export { Card } from '../chunk-5QXRI35B.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/{Card-KJOYHDTJ.css → Card-QOVASQNU.css}

@@ -42,7 +42,7 @@
  * `box-shadow: <shadow>, none` is invalid at computed-value time, so the
  * declaration is dropped and the light card loses the elevation the list was
  * built around. Alone on a pseudo element the same token is valid in both
- * themes, and it composes with the selection ring rather than replacing
+ * themes, and it composes with a chosen card's edge rather than replacing
  * whichever was declared last, exactly as the rail does.
  */
 .crewlet-card--elevated::after {
@@ -116,8 +116,8 @@
 /*
  * THE FLUSH RECIPE. The slots reach the card's edges, and the clip is what
  * makes the header's hairline and a table's own corners follow the radius
- * instead of crossing it. The selection ring survives the clip because it is
- * an INSET shadow; an outset one would be cut off here.
+ * instead of crossing it. A chosen card's edge and fill survive the clip
+ * because they are its own border and background.
  */
 .crewlet-card--flush {
   overflow: hidden;
@@ -200,29 +200,34 @@
 
 /* One ring, over the card's own boundary rather than 2px off it, which is two
    edges with a gap between them: the rule every field keeps (see Input.css).
-   A chosen card keeps an accent line inside the ring, since the selection
-   ring below is two pixels deep and the focus ring covers one of them. */
+   On a chosen card it covers the selected edge, and the selected fill inside
+   it still says the card is chosen. */
 .crewlet-card.is-interactive:focus-visible {
   outline: 2px solid var(--color-focus);
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 /*
- * Chosen. A ring rather than a tint, because a card carries its own surface
- * and a tint under it would change the ground every value on it was measured
- * against.
+ * Chosen, as every chosen option in the package is drawn: the selected edge
+ * (the accent mixed toward the card) over the selected fill. It was the full
+ * accent border under --shadow-selection, a second accent ring two pixels
+ * deep, which is the focus ring's weight in the focus ring's hue, so a grid
+ * of cards showed the pick and the keyboard's place alike. The fill is laid
+ * as an IMAGE over the card's own surface rather than in place of it, so the
+ * card keeps its ground and the tint composites over it, as it does over a
+ * row.
  */
 .crewlet-card.is-selected {
-  box-shadow: var(--shadow-selection);
-  border-color: var(--color-brand-accent);
+  border-color: var(--color-border-selected);
+  background-image: linear-gradient(var(--color-surface-selected), var(--color-surface-selected));
 }
 
 /* ---- Rails ------------------------------------------------------------- */
 
 /*
  * A state down the leading edge. Drawn as a pseudo element rather than a
- * border or an inset shadow, so it composes with the elevated shadow and the
- * selection ring instead of replacing whichever one was declared last.
+ * border or an inset shadow, so it composes with the elevated shadow and a
+ * chosen card's edge instead of replacing whichever one was declared last.
  */
 .crewlet-card--rail-info::before,
 .crewlet-card--rail-warning::before,

package/dist/ChangeMark/index.js

@@ -1,5 +1,5 @@
-export { ChangeMark } from '../chunk-HAKTRTRP.js';
-import '../chunk-OOMXLJ3S.js';
+export { ChangeMark } from '../chunk-47JQAGRV.js';
+import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-6ZJ3N7QI.js';

package/dist/Checkbox/index.js

@@ -1,5 +1,6 @@
-export { Checkbox, CheckboxGroup } from '../chunk-CPEPST4S.js';
-import '../chunk-6QFAK2WV.js';
+export { Checkbox, CheckboxGroup } from '../chunk-PJIPUEJ3.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ChoiceButtons/index.js

@@ -1,3 +1,3 @@
-export { ChoiceButtons } from '../chunk-YSJC7AZC.js';
+export { ChoiceButtons } from '../chunk-BWOIUOO3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChoiceButtons-DJ5EOGUA.css → ChoiceButtons-FLIFXFFS.css}

@@ -36,6 +36,16 @@
     border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/*
+ * AN OPTION WITH A DETAIL STARTS AT ITS TOP. Laid out as tiles (a host's grid
+ * of columns), the options in one row stretch to the tallest, and centred
+ * text put a one-line detail's label lower than its neighbour's two-line
+ * one. A column of options is unchanged: each is as tall as its own text.
+ */
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) {
+  align-items: flex-start;
+}
+
 .crewlet-choice-buttons__option:hover:not([aria-disabled='true']) {
   background: var(--color-surface-elevated);
   border-color: var(--color-border-strong-hover);

package/dist/ChoiceList/index.js

@@ -1,2 +1,2 @@
-export { ChoiceList } from '../chunk-ZU3DUXD2.js';
+export { ChoiceList } from '../chunk-WZGYIVYH.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChoiceList-RBL7FNQL.css → ChoiceList-EA2W6MOS.css}

@@ -1,7 +1,9 @@
 /*
  * A short list of answers in one bordered box: a radio, the label with a line
  * of detail under it, and a tag at the row's end. The selected row takes the
- * accent's soft fill, so the answer reads at a glance without the radio.
+ * selected fill (the accent's soft tint), so the answer reads at a glance; the
+ * radio is the mark that clears 3:1, and no row is ever ringed in the accent,
+ * which is the focus ring's colour.
  */
 .crewlet-choice-list {
   /* The platform's radio, sized here so a panel can line up with the text beside it. */
@@ -66,21 +68,47 @@
 }
 
 .crewlet-choice-list__row.is-checked {
-  background: var(--color-brand-accent-soft);
+  background: var(--color-surface-selected);
 }
 
 .crewlet-choice-list.is-disabled .crewlet-choice-list__row {
   cursor: not-allowed;
 }
 
+/*
+ * THE RADIO IS DRAWN, not the platform's. In a dark palette the platform's
+ * own radio fills an unchosen answer with a grey disc, which beside the one
+ * chosen read as a second, muted choice. Drawn here, an unchosen answer is an
+ * empty ring on the control boundary (3:1 on every ground) and the chosen one
+ * the accent ring round an accent dot. Forced colours hand it back to the
+ * platform, which draws it in the system's own colours.
+ */
 .crewlet-choice-list__radio {
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex: none;
+  box-sizing: border-box;
   width: var(--crewlet-choice-list-radio-size);
   height: var(--crewlet-choice-list-radio-size);
   margin: 3px 0 0;
-  accent-color: var(--color-brand-accent);
+  border: 1px solid var(--color-border-control);
+  border-radius: 50%;
+  background: transparent;
   cursor: inherit;
 }
 
+.crewlet-choice-list__radio:checked {
+  border-color: var(--color-brand-accent);
+  background: radial-gradient(circle, var(--color-brand-accent) 0 3px, transparent 3.5px);
+}
+
+@media (forced-colors: active) {
+  .crewlet-choice-list__radio {
+    appearance: auto;
+  }
+}
+
 /* A radio draws its own edge, so the ring sits on it, as a checkbox's does. */
 .crewlet-choice-list__radio:focus-visible {
   outline: 2px solid var(--color-focus);
@@ -105,13 +133,16 @@
   overflow-wrap: anywhere;
 }
 
+/* A tag says something ABOUT an answer ("Suggested"), so it is set in the
+   tertiary ink: in the accent ink it was a second accent mark on the chosen
+   row, beside the radio and the fill that already say which one is chosen. */
 .crewlet-choice-list__tag {
   padding-top: 2px;
   font-size: var(--font-size-2xs);
   font-weight: 500;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: var(--color-brand-accent-ink);
+  color: var(--color-text-tertiary);
   white-space: nowrap;
 }
 
@@ -131,7 +162,7 @@
   padding: var(--spacing-1) var(--spacing-2) var(--spacing-3) calc(var(--spacing-2) + var(--crewlet-choice-list-radio-size) + var(--spacing-3));
   border-end-start-radius: var(--radius-sm);
   border-end-end-radius: var(--radius-sm);
-  background: var(--color-brand-accent-soft);
+  background: var(--color-surface-selected);
 }
 
 .crewlet-choice-list__footer {