@crewlethq/ui 0.50.0 → 0.52.0

package/dist/ContrastHelp-MZCAW5WQ.css

@@ -0,0 +1,43 @@
+/*
+ * ContrastHelp: what the contrast levels mean, in a short panel opened from an
+ * info button (ContrastHelp.tsx).
+ */
+.crewlet-contrast-help {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-contrast-help__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-contrast-help__intro {
+  margin: 0;
+  color: var(--color-text-secondary);
+}
+
+/* Each level's word as the badge draws it, beside what it means. */
+.crewlet-contrast-help__levels {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: var(--spacing-2) var(--spacing-3);
+  margin: 0;
+}
+
+.crewlet-contrast-help__levels dt,
+.crewlet-contrast-help__levels dd {
+  margin: 0;
+}
+
+.crewlet-contrast-help__levels dd {
+  color: var(--color-text-secondary);
+}

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,7 +1,7 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-NAWUXCBC.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-5O72FSOK.js';
 import '../chunk-ZFM5L7M4.js';
-import '../chunk-WQ7S7CKZ.js';
 import '../chunk-YCC2S7DF.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-STJ7QBC3.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/EditingStatus/EditingStatus.d.ts

@@ -4,13 +4,11 @@ export interface EditingStatusLabels {
     editing: string;
     unsaved: string;
     saving: string;
-    /** Shown once the last save landed, with how long ago: "Saved 2 min ago". */
-    saved: (ago: string) => string;
     /**
-     * Said in its place: the time is shown and not announced, so a screen
-     * reader hears "Saved" when the save lands rather than every minute after.
+     * The state once the last save landed, followed by how long ago: "Saved",
+     * drawn "Saved 2m ago". The word is announced; the time is not.
      */
-    savedSpoken: string;
+    saved: string;
 }
 export interface EditingStatusProps {
     /** Whether anything differs from what was opened. */

package/dist/EditingStatus/index.js

@@ -1,4 +1,4 @@
-export { EditingStatus } from '../chunk-MMOXWAUG.js';
+export { EditingStatus } from '../chunk-EJWPYEG4.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{EditingStatus-NNA2CKIL.css → EditingStatus-YU7EGM6Y.css}

@@ -26,20 +26,32 @@
   background: var(--color-brand-accent);
 }
 
+/*
+ * THE WORDS RUN AS TEXT, not as flex items, so the space between the label
+ * and the state (which the ear needs) and the space before the time are real
+ * spaces, and the row is cut with an ellipsis rather than squeezed.
+ */
+.crewlet-editing-status__text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .crewlet-editing-status__label {
   color: var(--color-text-primary);
   font-weight: var(--font-weight-medium);
 }
 
-.crewlet-editing-status__state {
-  overflow: hidden;
+.crewlet-editing-status__state,
+.crewlet-editing-status__ago {
   color: var(--color-text-tertiary);
-  text-overflow: ellipsis;
 }
 
+/* The dot between the label and the state: drawn, never read. The space
+   before it in the text gives it the step on its left. */
 .crewlet-editing-status__state::before {
   content: '\00b7';
-  margin-right: var(--spacing-2);
+  margin-inline: var(--spacing-1) var(--spacing-2);
 }
 
 /*
@@ -53,7 +65,8 @@
  * "Editing" folds too, and Cancel and Save beside the dot say an edit is open.
  */
 @media (width < 480px) {
-  .crewlet-editing-status__state {
+  .crewlet-editing-status__state,
+  .crewlet-editing-status__ago {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -64,7 +77,8 @@
 }
 
 @container crewlet-artifact-bar (width < 900px) {
-  .crewlet-editing-status__state {
+  .crewlet-editing-status__state,
+  .crewlet-editing-status__ago {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -76,7 +90,8 @@
 
 @container crewlet-artifact-bar (width < 640px) {
   .crewlet-editing-status__label,
-  .crewlet-editing-status__state {
+  .crewlet-editing-status__state,
+  .crewlet-editing-status__ago {
     position: absolute;
     width: 1px;
     height: 1px;

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/FolderTile/index.js

@@ -1,4 +1,4 @@
-export { FolderTile, describeFolderContents } from '../chunk-M4QM477B.js';
+export { FolderTile, describeFolderContents } from '../chunk-FXHWOXGD.js';
 import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';

package/dist/{FolderTile-FDT5Y63Z.css → FolderTile-MIUEB7SO.css}

@@ -27,8 +27,17 @@
   --crewlet-folder-tile-floor: auto;
   --crewlet-folder-tile-glyph: 40px;
   --crewlet-folder-tile-glyph-radius: var(--radius-md);
+  /*
+   * THE WORDS ARE SET AS THE CARDS BESIDE THEM: a tile's name at a gallery
+   * card's title step and weight, its facts at the card's facts step, one
+   * line height for both and the card's step between them. The row (and a
+   * tile on a phone, which is the row) keeps the same two steps, since the
+   * cards it stands above keep theirs there too, with a tighter step between
+   * the lines so it stays one compact row.
+   */
   --crewlet-folder-tile-name: var(--font-size-md);
   --crewlet-folder-tile-facts: var(--font-size-sm);
+  --crewlet-folder-tile-words-gap: var(--spacing-1);
   --crewlet-folder-tile-actions-inset: var(--spacing-3);
   /*
    * A TILE STACKS: the glyph on top with the More menu level with it in the
@@ -61,8 +70,7 @@
   --crewlet-folder-tile-floor: var(--size-control-lg);
   --crewlet-folder-tile-glyph: 28px;
   --crewlet-folder-tile-glyph-radius: var(--radius-sm);
-  --crewlet-folder-tile-name: var(--font-size-sm);
-  --crewlet-folder-tile-facts: var(--font-size-xs);
+  --crewlet-folder-tile-words-gap: 2px;
   --crewlet-folder-tile-actions-inset: var(--spacing-2);
   --crewlet-folder-tile-direction: row;
   --crewlet-folder-tile-align: center;
@@ -82,8 +90,7 @@
     --crewlet-folder-tile-floor: var(--size-control-lg);
     --crewlet-folder-tile-glyph: 28px;
     --crewlet-folder-tile-glyph-radius: var(--radius-sm);
-    --crewlet-folder-tile-name: var(--font-size-sm);
-    --crewlet-folder-tile-facts: var(--font-size-xs);
+    --crewlet-folder-tile-words-gap: 2px;
     --crewlet-folder-tile-actions-inset: var(--spacing-2);
     --crewlet-folder-tile-direction: row;
     --crewlet-folder-tile-align: center;
@@ -151,7 +158,7 @@
 .crewlet-folder-tile__body {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--crewlet-folder-tile-words-gap);
   min-width: 0;
   max-width: 100%;
 }

package/dist/FollowBanner/index.js

@@ -1,5 +1,5 @@
-export { FollowBanner } from '../chunk-4A4QG6UC.js';
-import '../chunk-SZZRIHGT.js';
+export { FollowBanner } from '../chunk-34C7NYIQ.js';
+import '../chunk-BPCY7ZID.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/InlineEditor/index.js

@@ -1,5 +1,5 @@
-export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-QGRA2RHC.js';
-import '../chunk-MMOXWAUG.js';
+export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-6RMZH7P7.js';
+import '../chunk-EJWPYEG4.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-SMBKXWML.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/LinkInterstitial/index.js

@@ -1,7 +1,7 @@
-export { LinkInterstitial, openExternal } from '../chunk-GP4YWZFO.js';
+export { LinkInterstitial, openExternal } from '../chunk-U3LNU4B2.js';
 import '../chunk-YCC2S7DF.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-SZZRIHGT.js';
+import '../chunk-BPCY7ZID.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';

package/dist/ListInput/ListInput.d.ts

@@ -109,8 +109,12 @@ 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;
-    /** The name of the control beside the legend that appends what the box holds. */
+    /** 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". */
+    addText?: string | undefined;
     itemLabel?: ((name: string, position: string) => string) | undefined;
     newItemLabel?: ((itemName: string) => string) | undefined;
     moveUpLabel?: ((itemName: string, position: string) => string) | undefined;

package/dist/ListInput/index.js

@@ -1,7 +1,7 @@
-export { ListInput, withDraft } from '../chunk-PGR2PKH6.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-WUP2YITQ.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 @@
   }
 }
 
-/* With a hidden legend the add control stands at the end of the box's row. */
+/*
+ * 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,8 +1,8 @@
-export { LogoSlot } from '../chunk-BEAXJARF.js';
+export { LogoSlot, LogoSlotGroup } from '../chunk-UKE7LTFZ.js';
 import '../chunk-THDGBD6Y.js';
-import '../chunk-NSSOWQCJ.js';
+import '../chunk-WW7TU6HE.js';
 import '../chunk-KYIAFNU7.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{LogoSlot-T2UFOJXU.css → LogoSlot-ETD74ELF.css}

@@ -124,6 +124,13 @@
   opacity: 0.5;
 }
 
+.crewlet-logo-slot__notes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
 .crewlet-logo-slot__empty {
   margin: 0;
   color: var(--color-text-tertiary);
@@ -157,3 +164,94 @@
   color: var(--color-text-tertiary);
   font-size: var(--font-size-xs);
 }
+
+/*
+ * A GROUP OF SLOTS, aligned row by row (LogoSlotGroup.tsx). Each slot is a
+ * subgrid spanning the group's four rows: its name and description, its
+ * stage, what is said under it, and its actions. A row holds the tallest of
+ * its parts across the slots, so every stage, note and action row starts on
+ * one line. The steps between the parts are margins rather than the grid's
+ * gap, so a row no slot uses (no notes anywhere) takes no room at all.
+ */
+.crewlet-logo-slot-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-logo-slot-group__slots {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
+  column-gap: var(--spacing-5);
+  row-gap: var(--spacing-6);
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot {
+  display: grid;
+  grid-row: span 4;
+  grid-template-rows: subgrid;
+  row-gap: 0;
+  align-content: start;
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > .crewlet-logo-slot__head {
+  grid-row: 1;
+  margin-block-end: var(--spacing-2);
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > :is(.crewlet-logo-slot__stage, .crewlet-file-drop) {
+  grid-row: 2;
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > .crewlet-logo-slot__notes {
+  grid-row: 3;
+  margin-block-start: var(--spacing-2);
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > .crewlet-logo-slot__foot {
+  grid-row: 4;
+  margin-block-start: var(--spacing-2);
+}
+
+.crewlet-logo-slot-group__hint {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+/*
+ * SMALL: a thumbnail of the slot for a summary of what is set. The stage
+ * keeps its ground, its edge and the space the logo keeps, at half the height
+ * with a tighter inset, and the words step down to the summary's sizes.
+ */
+.crewlet-logo-slot--sm {
+  --crewlet-logo-slot-height: calc(var(--size-row-lg) * 1.5);
+  --crewlet-logo-slot-padding: var(--spacing-2);
+  --crewlet-logo-slot-clear: var(--spacing-1);
+
+  gap: var(--spacing-1);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__label {
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__description,
+.crewlet-logo-slot--sm .crewlet-logo-slot__empty {
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__stage {
+  border-radius: var(--radius-md);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__placeholder {
+  width: calc(var(--size-row-lg) * 1.5);
+  height: var(--size-row-sm);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__stage--square .crewlet-logo-slot__placeholder {
+  width: var(--size-row-sm);
+}

package/dist/PrincipalPicker/index.js

@@ -1,10 +1,10 @@
-export { PrincipalPicker } from '../chunk-KHZYAEGZ.js';
-import '../chunk-P5JBDHWC.js';
+export { PrincipalPicker } from '../chunk-G5SUSCWL.js';
+import '../chunk-C6Z3MLSA.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';