@crewlethq/ui 0.51.0 → 0.52.0

package/README.md

@@ -204,6 +204,20 @@ 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.52.0
+
+A second polish of the brand setup pieces.
+
+**`LogoSlotGroup` is new**: logo slots side by side, aligned row by row. Each slot is a subgrid of one set of rows, so the names and descriptions, the stages, the notes under them and the action rows each start on one line across the slots whatever their copy; a row no slot uses takes no room. What may be brought is written once under the row (`hint`) and describes every slot's picker, and a slot inside a group draws no caption of its own. The columns are as many as fit at 14rem, then one under another on a phone. A slot's empty note and refusal now share one element (`.crewlet-logo-slot__notes`).
+
+**`LogoSlot` takes `size="sm"`**: a thumbnail for a summary of what is set, at half the stage's height with a tighter inset and smaller words, best read-only.
+
+**`ChoiceButtons` takes `size="sm"`, per-option `media` and `chosen`.** The Inbox's one-press answer option, compact (the small control height, the compact and micro type steps) in a row that wraps, for suggestions beside a field. `media` is a decorative picture before the words (a `ColorChip` on a suggested colour). `chosen` keeps an applied option marked in the selected edge and fill, with every option a toggle button (`aria-pressed`) saying whether it is the one applied; left out, the options send and say nothing of a choice, as in the Inbox. Hover, press and focus are the Inbox's own.
+
+**`ListInput` counts its items, matches its Add to the field and aligns its rows.** With `maxItems` the help line ends in a plain count (`tallyLabel`, "3 of 5"), joined into the group's description, and a full list says "That's the most. Remove one to add another." (`fullMessage`'s new default). The Add button stands at the field's medium height on the box's first line. A row's number sits on the text's first line at its line height, so the two share a baseline however long the item; the row's gap is a step and a half; and an edited item keeps an inset for its ring that a margin takes back, so the words never move when it is focused. What to change: a test that reads the old "The list is full at N" sentence.
+
+**`FormField` takes `tally`**: a count that is not a length, drawn at the end of the help line where a length count would be and joined into the description the same way.
+
 ## Changes in 0.51.0
 
 Polish of the setup wizard pieces, and the parts the brand setup asked for.

package/dist/AgentHandoffPanel/index.js

@@ -1,11 +1,11 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-V7GOOXPK.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-3NXWH5NC.js';
 import '../chunk-AUQPBL4O.js';
 import '../chunk-JQ7IFSF6.js';
 import '../chunk-OGXHZHRX.js';
-import '../chunk-GHY63X4C.js';
+import '../chunk-UJ4VVK7R.js';
 import '../chunk-NBDN5JZV.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';

package/dist/ArrangeList/index.js

@@ -1,8 +1,8 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-H55D66IK.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-SSHDQBHR.js';
 import '../chunk-A722MUNR.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-NCHKKYPQ.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-RQI43UJ7.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/ArtifactCard/index.js

@@ -1,4 +1,4 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-S63QOMXC.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-CUL5XV6O.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
@@ -8,10 +8,10 @@ import '../chunk-PZKHBB7D.js';
 import '../chunk-RV6XB5UV.js';
 import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-NCHKKYPQ.js';
+import '../chunk-RQI43UJ7.js';
 import '../chunk-BGLKLXL3.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/Checkbox/index.js

@@ -1,5 +1,5 @@
-export { Checkbox, CheckboxGroup } from '../chunk-NCHKKYPQ.js';
-import '../chunk-EXRRTKWT.js';
+export { Checkbox, CheckboxGroup } from '../chunk-RQI43UJ7.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/ChoiceButtons/ChoiceButtons.d.ts

@@ -4,7 +4,17 @@ export interface ChoiceButtonOption {
     label: ReactNode;
     /** A line under the label: what choosing it means. */
     detail?: ReactNode;
+    /**
+     * A small picture before the words, decorative (the label names the
+     * option): a `ColorChip` on a suggested colour.
+     */
+    media?: ReactNode;
 }
+/**
+ * `md` is the Inbox's answer, as tall as a touch target, in a column. `sm` is
+ * the same option, compact, in a row that wraps: suggestions beside a field.
+ */
+export type ChoiceButtonsSize = 'md' | 'sm';
 export interface ChoiceButtonsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Names the group: "Answers". */
     label: string;
@@ -15,6 +25,16 @@ export interface ChoiceButtonsProps extends Omit<HTMLAttributes<HTMLDivElement>,
     recommendedLabel?: string | undefined;
     /** Sends one option. */
     onChoose: (value: string) => void;
+    /** `md` (the Inbox's answer) by default, or `sm`, compact and in a wrapping row. */
+    size?: ChoiceButtonsSize | undefined;
+    /**
+     * The option already applied, for options that stay on screen after a
+     * press (a suggestion that updated a field). Given, every option is a
+     * toggle button that says whether it is the one applied, and that one is
+     * drawn chosen: the selected edge and fill, never the accent. `null` when
+     * none is; left out, the options send and say nothing of a choice.
+     */
+    chosen?: string | null | undefined;
     /**
      * The option being sent. It is announced as busy, and every option holds
      * still until the answer lands, so a second press cannot send a second
@@ -40,4 +60,4 @@ export interface ChoiceButtonsProps extends Omit<HTMLAttributes<HTMLDivElement>,
  * the control the reader just pressed and drops it on the page body.
  * `aria-disabled` and `aria-busy` say the same and leave focus where it was.
  */
-export declare function ChoiceButtons({ label, options, recommended, recommendedLabel, onChoose, pending, disabledReason, className, ...rest }: ChoiceButtonsProps): import("react").JSX.Element;
+export declare function ChoiceButtons({ label, options, recommended, recommendedLabel, onChoose, pending, disabledReason, size, chosen, className, ...rest }: ChoiceButtonsProps): import("react").JSX.Element;

package/dist/ChoiceButtons/index.d.ts

@@ -1,3 +1,3 @@
 import './ChoiceButtons.css';
 export { ChoiceButtons } from './ChoiceButtons.js';
-export type { ChoiceButtonOption, ChoiceButtonsProps } from './ChoiceButtons.js';
+export type { ChoiceButtonOption, ChoiceButtonsProps, ChoiceButtonsSize } from './ChoiceButtons.js';

package/dist/ChoiceButtons/index.js

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

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

@@ -55,6 +55,17 @@
   background: var(--color-surface-pressed);
 }
 
+/*
+ * THE OPTION APPLIED is drawn as every chosen option in the package is: the
+ * selected edge over the soft selected fill, calm beside the focus ring, and
+ * held under the pointer so a hover never makes it look unchosen.
+ */
+.crewlet-choice-buttons__option.is-chosen,
+.crewlet-choice-buttons__option.is-chosen:hover {
+  border-color: var(--color-border-selected);
+  background: var(--color-surface-selected);
+}
+
 /*
  * The plain option draws the strong hairline, so its ring is drawn over that
  * edge rather than a gap away from it, which would read as a second outline.
@@ -130,6 +141,55 @@
   text-transform: uppercase;
 }
 
+/* The picture before the words, centred on the label's line. */
+.crewlet-choice-buttons__media {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  align-self: center;
+}
+
+/* Before the words, not at the far end with the recommended mark. */
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) {
+  justify-content: flex-start;
+}
+
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) .crewlet-choice-buttons__note {
+  margin-inline-start: auto;
+}
+
+/*
+ * SMALL: the same option, compact, in a row that wraps. A step and a half
+ * inside, the field's small height, the label at the compact step and its
+ * detail at the micro step, so three suggestions sit under a field without
+ * outweighing it. Every state (hover, press, focus, chosen) is the Inbox's.
+ */
+.crewlet-choice-buttons--sm {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__option {
+  gap: var(--spacing-2);
+  min-height: var(--size-control-sm);
+  padding: var(--spacing-1) calc(var(--spacing-2) + var(--spacing-1) / 2);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-tight);
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) {
+  align-items: center;
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__text {
+  gap: 1px;
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__detail {
+  font-size: var(--font-size-2xs);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-choice-buttons__option {
     transition: none;

package/dist/ColorField/index.js

@@ -1,6 +1,6 @@
-export { ColorField } from '../chunk-73WHPLWQ.js';
+export { ColorField } from '../chunk-5WYPSVRX.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/Combobox/index.js

@@ -1,6 +1,6 @@
-export { Combobox } from '../chunk-P5JBDHWC.js';
+export { Combobox } from '../chunk-C6Z3MLSA.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/CommandPalette/index.js

@@ -1,8 +1,8 @@
-export { CommandPalette } from '../chunk-MIEBOO7Y.js';
+export { CommandPalette } from '../chunk-NMR7AJSB.js';
 import '../chunk-YCC2S7DF.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/CommentThread/index.js

@@ -1,13 +1,13 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-H7NMJ5AI.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-EZ43L6T7.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-PWG3VHRQ.js';
-import '../chunk-GHY63X4C.js';
+import '../chunk-UJ4VVK7R.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/Composer/index.js

@@ -1,6 +1,6 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-GHY63X4C.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-UJ4VVK7R.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/ConfirmField/index.js

@@ -1,6 +1,6 @@
-export { ConfirmField, confirmMatches } from '../chunk-ZCIL5IHU.js';
+export { ConfirmField, confirmMatches } from '../chunk-2GIWL7IS.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/DataGrid/index.js

@@ -1,7 +1,7 @@
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from '../chunk-FB5CFQTG.js';
-import '../chunk-NCHKKYPQ.js';
+export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from '../chunk-7PE56HHD.js';
+import '../chunk-RQI43UJ7.js';
 import '../chunk-PPUR46MK.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/DataTable/index.js

@@ -1,11 +1,11 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-WQ7S7CKZ.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-5O72FSOK.js';
 import '../chunk-YCC2S7DF.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-NCHKKYPQ.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-RQI43UJ7.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/DataView/index.js

@@ -1,6 +1,6 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-WX6IJJ4U.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-GRKGLZFM.js';
 import '../chunk-DKB73KZI.js';
-import '../chunk-WQ7S7CKZ.js';
+import '../chunk-5O72FSOK.js';
 import '../chunk-ZFM5L7M4.js';
 import '../chunk-YCC2S7DF.js';
 import '../chunk-7KHM2FZH.js';
@@ -12,9 +12,9 @@ import '../chunk-KHJIEPZV.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-NCHKKYPQ.js';
+import '../chunk-RQI43UJ7.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/DocTabsEditor/index.js

@@ -1,6 +1,6 @@
-export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-627KFRON.js';
+export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-FNPZ3LLQ.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/{Editor-MLGK3KOG.js → Editor-SZFWVDAU.js}

@@ -1,8 +1,8 @@
-import { richEditorLabels } from './chunk-CSQTDGTS.js';
 import { schema, readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
+import { richEditorLabels } from './chunk-CSQTDGTS.js';
 import { safeHref, MARKDOWN_CALLOUT_TONES } from './chunk-BAKPMH3S.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { FormField, Input } from './chunk-EXRRTKWT.js';
+import { FormField, Input } from './chunk-LJHH4WWB.js';
 import './chunk-XCUUI7E7.js';
 import './chunk-PQADV6P6.js';
 import './chunk-RSAQOKH3.js';

package/dist/Input/FormField.d.ts

@@ -45,6 +45,12 @@ export interface FormFieldProps extends Omit<HTMLAttributes<HTMLElement>, 'child
      * much it is over. See `CharacterCount`.
      */
     limit?: FormFieldLimit | undefined;
+    /**
+     * A count that is not a length, drawn where a length count would be (at the
+     * end of the help line) and joined into the description the same way: how
+     * many items a list holds of the most it may, "3 of 5".
+     */
+    tally?: ReactNode;
     /** A control rendered beside the label, such as an Add button. */
     labelAction?: ReactNode;
     /**
@@ -91,4 +97,4 @@ export interface FormFieldProps extends Omit<HTMLAttributes<HTMLElement>, 'child
  * instant, the only line that said what right looks like disappeared. Both
  * lines are joined into `aria-describedby` in reading order, help first.
  */
-export declare const FormField: ({ label, required, optional, requiredNews, helper, helperOnFocus, error, limit, labelAction, hideLabel, as, describedBy, htmlFor, className, children, ...rest }: FormFieldProps) => import("react").JSX.Element;
+export declare const FormField: ({ label, required, optional, requiredNews, helper, helperOnFocus, error, limit, tally, labelAction, hideLabel, as, describedBy, htmlFor, className, children, ...rest }: FormFieldProps) => import("react").JSX.Element;

package/dist/Input/index.js

@@ -1,4 +1,4 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks } from '../chunk-EXRRTKWT.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks } from '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/{Input-VDSV7VWJ.css → Input-GMOWHZRG.css}

@@ -580,6 +580,15 @@
   min-width: 0;
 }
 
+/* A count that is not a length ("3 of 5"), in the help line's own quiet ink. */
+.crewlet-form-field__tally {
+  flex: none;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--font-line-height-normal);
+}
+
 /* SHOWN ONLY WHILE THE FIELD HAS FOCUS (`helperOnFocus`): a dense form reads as
    labels and values at rest, and the sentence appears under the field the
    reader is in. Still described, so a screen reader hears it on entry. */

package/dist/ListInput/ListInput.d.ts

@@ -109,6 +109,8 @@ export interface ListInputProps {
     itemError?: ((index: number, value: string) => ReactNode) | undefined;
     /** What the list says in place of the new-item box once it is full. */
     fullMessage?: ((max: number) => string) | undefined;
+    /** How many items the list holds of the most it may, at the end of the help line: "3 of 5". Drawn only with `maxItems`. */
+    tallyLabel?: ((count: number, max: number) => string) | undefined;
     /** The name of the button at the end of the box's row that appends what the box holds: "Add policy". */
     addLabel?: ((itemName: string) => string) | undefined;
     /** The word that button shows, which its name begins with: "Add". */

package/dist/ListInput/index.js

@@ -1,7 +1,7 @@
-export { ListInput, withDraft } from '../chunk-UUTEWGO6.js';
+export { ListInput, withDraft } from '../chunk-CQEYF3UW.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/{ListInput-P2ECUQJ2.css → ListInput-RLQND5QK.css}

@@ -61,7 +61,9 @@
 .crewlet-list-input__item {
   display: flex;
   align-items: center;
-  gap: var(--spacing-2);
+  /* A step and the control's own inset: the ring an edited item draws stands
+     a step clear of its number. */
+  gap: var(--spacing-3);
   padding: var(--spacing-1) var(--spacing-3);
   border-block-end-width: 1px;
   border-block-end-style: solid;
@@ -169,11 +171,28 @@
 .crewlet-list-input__item .crewlet-input__control,
 .crewlet-list-input__item .crewlet-textarea {
   padding-block: var(--spacing-1);
-  padding-inline: 0;
+  /*
+   * EDITING NEVER MOVES THE WORDS. The control keeps an inset of its own, so
+   * the boundary that hover and focus draw stands clear of the text rather
+   * than touching its first letter, and a negative margin of the same step
+   * takes it back, so the words sit exactly where they sat at rest and the
+   * caret lands on them without a jump.
+   */
+  padding-inline: var(--spacing-2);
+  margin-inline: calc(var(--spacing-2) * -1);
 }
 
 .crewlet-list-input__index {
   flex: none;
+  /*
+   * ON THE TEXT'S FIRST LINE, never centred on a wrapped item: it starts where
+   * the words start (the control's edge and its block inset below the row's
+   * own padding) and takes their line's height, so the number and the words
+   * share a baseline however many lines the item runs to.
+   */
+  align-self: flex-start;
+  padding-block-start: calc(1px + var(--spacing-1));
+  line-height: calc(var(--font-size-compact) * var(--font-line-height-normal));
   min-width: var(--spacing-4);
   text-align: center;
   font-size: var(--font-size-xs);
@@ -257,11 +276,16 @@
   }
 }
 
-/* The Add button ends the box's row: the field and its Add read as one control. */
+/*
+ * The Add button ends the box's row: the field and its Add read as one
+ * control. It is the field's height (the medium control step a one-line box
+ * stands at) and sits on the box's first line, so the two share one line and
+ * the button stays put as a long item grows the box under it.
+ */
 .crewlet-list-input__add-control {
   display: inline-flex;
   flex: none;
-  align-self: center;
+  align-self: flex-start;
 }
 
 /*
@@ -279,11 +303,11 @@
   }
 
   .crewlet-list-input__item > .crewlet-list-input__field {
-    flex-basis: calc(100% - var(--spacing-4) - var(--spacing-2));
+    flex-basis: calc(100% - var(--spacing-4) - var(--spacing-3));
   }
 
   .crewlet-list-input__item--draggable > .crewlet-list-input__field {
-    flex-basis: calc(100% - var(--spacing-4) * 2 - var(--spacing-2) * 2);
+    flex-basis: calc(100% - var(--spacing-4) * 2 - var(--spacing-3) * 2);
   }
 
   .crewlet-list-input__item > .crewlet-list-input__actions {

package/dist/LogoSlot/LogoSlot.d.ts

@@ -3,6 +3,12 @@ import { type ReactNode } from 'react';
 export type LogoSlotGround = 'light' | 'dark';
 /** A wide logo (a wordmark, a lockup) or a square mark. */
 export type LogoSlotShape = 'wide' | 'square';
+/**
+ * `md` is the slot a logo is chosen in. `sm` is a thumbnail of it, for a
+ * summary that shows what is set (a review of the brand): a third of the
+ * stage's height with a tighter inset and smaller words, best read-only.
+ */
+export type LogoSlotSize = 'md' | 'sm';
 export interface LogoSlotLabels {
     /** The picker's label while the slot is empty. */
     choose: string;
@@ -31,6 +37,8 @@ export interface LogoSlotProps {
      */
     groundColor?: string | undefined;
     shape?: LogoSlotShape | undefined;
+    /** `md` (the default), or `sm`, a thumbnail for a summary. */
+    size?: LogoSlotSize | undefined;
     /**
      * The logo, as an address the host has already validated (the engine's file
      * route, through the dashboard's checked blob path). Empty, the slot shows
@@ -81,4 +89,4 @@ export interface LogoSlotProps {
  * The engine checks every file; a refusal comes back as `error`, drawn under
  * the slot and announced, saying what to change.
  */
-export declare function LogoSlot({ label, description, ground, groundColor, shape, src, alt, guide, uploading, error, editable, onFile, onRemove, accept, download, emptyNote, className, labels, }: LogoSlotProps): import("react").JSX.Element;
+export declare function LogoSlot({ label, description, ground, groundColor, shape, size, src, alt, guide, uploading, error, editable, onFile, onRemove, accept, download, emptyNote, className, labels, }: LogoSlotProps): import("react").JSX.Element;

package/dist/LogoSlot/LogoSlotGroup.d.ts

@@ -0,0 +1,38 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** What a slot inside a group needs: the shared caption it is described by. */
+interface LogoSlotGroupContextValue {
+    hintId: string | undefined;
+}
+/** The group a slot stands in, or null for a slot on its own. */
+export declare function useLogoSlotGroup(): LogoSlotGroupContextValue | null;
+export interface LogoSlotGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The slots, side by side: `LogoSlot`s. */
+    children: ReactNode;
+    /** Names the group for a screen reader: "Logos". */
+    label?: string | undefined;
+    /**
+     * What may be brought, written once under the row rather than under every
+     * slot: "SVG up to 512 KB; PNG or WebP up to 2 MB and 4096 px." Every slot's
+     * picker is described by it. Left out, no caption is drawn.
+     */
+    hint?: ReactNode;
+}
+/**
+ * Logo slots side by side, aligned row by row.
+ *
+ * ONE ROW PER PART ACROSS THE SLOTS. Each slot is a subgrid of the group's
+ * rows, so the names and their descriptions, the stages, the notes under them
+ * and the action rows each start on one line across every slot, whatever the
+ * copy in each: a description that wraps to two lines moves every stage down
+ * together rather than its own. The stages are one height, so the previews
+ * are one size.
+ *
+ * THE CAPTION IS WRITTEN ONCE. What may be brought is the same for every
+ * slot, so it is drawn once under the row (`hint`) and each picker is
+ * described by it, rather than repeated three times.
+ *
+ * THE COLUMNS FOLLOW THE ROOM: as many as fit at 14rem each, then one under
+ * another on a phone, each still aligned within itself.
+ */
+export declare function LogoSlotGroup({ children, label, hint, className, ...rest }: LogoSlotGroupProps): import("react").JSX.Element;
+export {};

package/dist/LogoSlot/index.d.ts

@@ -1,3 +1,5 @@
 import './LogoSlot.css';
 export { LogoSlot } from './LogoSlot.js';
-export type { LogoSlotGround, LogoSlotLabels, LogoSlotProps, LogoSlotShape } from './LogoSlot.js';
+export { LogoSlotGroup } from './LogoSlotGroup.js';
+export type { LogoSlotGround, LogoSlotLabels, LogoSlotProps, LogoSlotShape, LogoSlotSize } from './LogoSlot.js';
+export type { LogoSlotGroupProps } from './LogoSlotGroup.js';

package/dist/LogoSlot/index.js

@@ -1,4 +1,4 @@
-export { LogoSlot } from '../chunk-2UFUP2ZH.js';
+export { LogoSlot, LogoSlotGroup } from '../chunk-UKE7LTFZ.js';
 import '../chunk-THDGBD6Y.js';
 import '../chunk-WW7TU6HE.js';
 import '../chunk-KYIAFNU7.js';