@crewlethq/ui 0.53.0 → 0.54.1

package/dist/{Editor-RAUVEXLG.js → Editor-FEKMRFBK.js}

@@ -1,17 +1,17 @@
-import { schema, readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
 import { richEditorLabels } from './chunk-CSQTDGTS.js';
+import { schema, readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
 import { safeHref, MARKDOWN_CALLOUT_TONES } from './chunk-BAKPMH3S.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { Menu } from './chunk-3JIZ2A6K.js';
-import { placePopup, viewportBounds } from './chunk-OMV5W53A.js';
-import { FormField, Input } from './chunk-TN22R6LW.js';
+import { FormField, Input } from './chunk-LJHH4WWB.js';
 import './chunk-XCUUI7E7.js';
+import './chunk-PQADV6P6.js';
+import './chunk-RSAQOKH3.js';
+import { Menu } from './chunk-TMM32U7D.js';
+import { placePopup, viewportBounds } from './chunk-OMV5W53A.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { usePopupLayer } from './chunk-H5XTJ7GJ.js';
-import './chunk-NUZHC6MM.js';
-import './chunk-PQADV6P6.js';
 import { IconButton } from './chunk-LACA4JGC.js';
-import './chunk-RSAQOKH3.js';
+import './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { forwardRef, useMemo, useRef, useState, useId, useSyncExternalStore, useCallback, useLayoutEffect, useEffect, useImperativeHandle } from 'react';

package/dist/HuePicker/index.js

@@ -1,17 +1,17 @@
 import '../chunk-FFMCMSJB.js';
-export { HuePicker, HueSwatch } from '../chunk-BIRR4RKZ.js';
+export { HuePicker, HueSwatch } from '../chunk-34RMTXDZ.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-5FB6DGGC.js';
-import '../chunk-I4Q6PACO.js';
+import '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-3JIZ2A6K.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
-import '../chunk-BHHIIK3M.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/InlineEditor/index.js

@@ -2,8 +2,8 @@ export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-6RMZH7P7.js';
 import '../chunk-EJWPYEG4.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';

package/dist/Input/index.js

@@ -1,9 +1,9 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks } from '../chunk-TN22R6LW.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks } from '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-LACA4JGC.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/LinkInterstitial/index.js

@@ -1,12 +1,12 @@
-export { LinkInterstitial, openExternal } from '../chunk-4QW6K7RK.js';
-import '../chunk-SFG7TS4Q.js';
+export { LinkInterstitial, openExternal } from '../chunk-U3LNU4B2.js';
+import '../chunk-YCC2S7DF.js';
 import '../chunk-5CLW2CXT.js';
 import '../chunk-BPCY7ZID.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ListInput/index.js

@@ -1,14 +1,14 @@
-export { ListInput, withDraft } from '../chunk-ROXAHDMA.js';
+export { ListInput, withDraft } from '../chunk-CQEYF3UW.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-OMV5W53A.js';
-import '../chunk-TN22R6LW.js';
-import '../chunk-XCUUI7E7.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-LJHH4WWB.js';
+import '../chunk-XCUUI7E7.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-LACA4JGC.js';
-import '../chunk-RSAQOKH3.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/MarkdownEditor/index.js

@@ -1,17 +1,17 @@
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-Z2SK4MPL.js';
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-SS4XCUUJ.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-OOC7Q67K.js';
-import '../chunk-5FB6DGGC.js';
-import '../chunk-I4Q6PACO.js';
+import '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-3JIZ2A6K.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
-import '../chunk-BHHIIK3M.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,8 +1,8 @@
-export { Menu } from '../chunk-3JIZ2A6K.js';
+export { Menu } from '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/MergeConflicts/index.js

@@ -1,16 +1,16 @@
-export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-JV4G7LH3.js';
+export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-XS2FJVMT.js';
 import '../chunk-OOC7Q67K.js';
-import '../chunk-5FB6DGGC.js';
-import '../chunk-I4Q6PACO.js';
+import '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-3JIZ2A6K.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
-import '../chunk-BHHIIK3M.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/index.js

@@ -1,9 +1,9 @@
-export { ConfirmModal, Modal } from '../chunk-SFG7TS4Q.js';
+export { ConfirmModal, Modal } from '../chunk-YCC2S7DF.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -5,10 +5,10 @@ import '../chunk-ONQKKHON.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-TROLVEZY.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PeopleRail/index.js

@@ -1,11 +1,11 @@
-export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-DEBVNLFJ.js';
+export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-3RCHEFIL.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PresenterView/index.js

@@ -5,7 +5,7 @@ import '../chunk-RK4XPHVG.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PrincipalPicker/index.js

@@ -1,16 +1,16 @@
-export { PrincipalPicker } from '../chunk-ATRRLHLU.js';
-import '../chunk-WO4W5FTB.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-2YTOOH3A.js';
-import '../chunk-TN22R6LW.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-LACA4JGC.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ReviewList/ReviewList.d.ts

@@ -0,0 +1,58 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** The tones a part's state is said in: done, leaning on defaults, needing a look, or holding the finish. */
+export type ReviewListTone = 'success' | 'neutral' | 'warning' | 'danger';
+/** A part's state, as its pill says it: "Complete", "Uses defaults", "Missing required". */
+export interface ReviewListStatus {
+    label: string;
+    tone: ReviewListTone;
+}
+export interface ReviewListProps extends Omit<HTMLAttributes<HTMLUListElement>, 'children'> {
+    /** What the list reviews, for assistive technology: "Brand summary". */
+    label: string;
+    /** The parts: `ReviewList.Item` elements, in the order the setup walks them. */
+    children?: ReactNode;
+}
+export interface ReviewListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title' | 'children'> {
+    /** The part's glyph, drawn on a tile at the start of its row. Decorative: the title names the part. */
+    icon?: ReactNode;
+    /** The part's name, as a heading one level under where the list sits: "Logos". */
+    title: ReactNode;
+    /** The part's state, as a pill beside its title. */
+    status?: ReviewListStatus | undefined;
+    /** What changes the part, at the end of its row: an Edit button that names the part. */
+    action?: ReactNode;
+    /**
+     * What keeps the part from being finished, in one sentence, said under its
+     * values in the danger ink: "Add the primary logo to adopt." It is an alert,
+     * so it is read as it appears; show it once a finish was tried, not before.
+     */
+    error?: ReactNode;
+    /** The part's values, SHOWN rather than described: the logos, the swatches, the faces. */
+    children?: ReactNode;
+}
+/**
+ * A review of a setup's parts before it is finished: one row a part, each with
+ * its glyph, its name, its state and the way back to it, over the values it
+ * holds.
+ *
+ * ONE BOX, ONE ROW A PART. The parts share one bordered box with a hairline
+ * between them, so five parts read as one summary and every row starts its
+ * title, its state and its values on the same lines, whatever each holds. A
+ * card a part, laid out in a grid, gave every card the height of its own
+ * values: a tall row of logos beside a one-line name left holes in the grid
+ * and a summary that read as five scattered objects.
+ *
+ * THE VALUES UNDER THE TITLE, at the title's start, so the row's glyph stands
+ * alone in its column and the eye runs down the titles. Under 28rem of the
+ * list's own width the values take the whole row, as a phone needs.
+ *
+ * A HEADING A PART, one level under where the list sits, so a screen reader
+ * moves part to part by heading; the state and the action follow the heading
+ * in reading order, and the error closes the row it is about.
+ */
+export declare function ReviewList({ label, className, children, ...rest }: ReviewListProps): import("react").JSX.Element;
+export declare namespace ReviewList {
+    var Item: typeof ReviewListItem;
+}
+declare function ReviewListItem({ icon, title, status, action, error, className, children, ...rest }: ReviewListItemProps): import("react").JSX.Element;
+export {};

package/dist/ReviewList/index.d.ts

@@ -0,0 +1,3 @@
+import './ReviewList.css';
+export { ReviewList } from './ReviewList.js';
+export type { ReviewListItemProps, ReviewListProps, ReviewListStatus, ReviewListTone } from './ReviewList.js';

package/dist/ReviewList/index.js

@@ -0,0 +1,6 @@
+export { ReviewList } from '../chunk-OBUQVGEG.js';
+import '../chunk-IXJHTFXG.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ReviewList-TIN6C2JN.css

@@ -0,0 +1,116 @@
+/*
+ * ReviewList: a setup's parts in one bordered box, a row each, before the
+ * setup is finished (ReviewList.tsx).
+ *
+ * A ROW IS A GRID OF THREE COLUMNS: the glyph's tile, the part (its title and
+ * state over its values), and the action. The values sit under the title, at
+ * its start, and reach the row's end under the action, so a row of logos or
+ * swatches has the whole width and the titles still run down one line.
+ */
+.crewlet-review-list {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-surface-subtle);
+  list-style: none;
+}
+
+.crewlet-review-list__item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    'icon head action'
+    '.    body body'
+    '.    error error';
+  align-items: center;
+  column-gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-4) var(--spacing-5);
+}
+
+.crewlet-review-list__item + .crewlet-review-list__item {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-review-list__icon {
+  grid-area: icon;
+}
+
+.crewlet-review-list__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  grid-area: head;
+  min-width: 0;
+}
+
+.crewlet-review-list__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+}
+
+.crewlet-review-list__action {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  grid-area: action;
+}
+
+.crewlet-review-list__body {
+  grid-area: body;
+  min-width: 0;
+  margin-top: var(--spacing-3);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-body);
+}
+
+/* WHAT HOLDS THE FINISH, in the danger ink with its glyph, so it never rests on the hue alone. */
+.crewlet-review-list__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  grid-area: error;
+  margin: var(--spacing-2) 0 0;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-review-list__error > svg {
+  flex: none;
+  margin-top: 1px;
+}
+
+/* WITHOUT A GLYPH the part starts at the row's start, with no empty column before it. */
+.crewlet-review-list__item--plain {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'head action'
+    'body body'
+    'error error';
+}
+
+/* A NARROW LIST gives the values the whole row: an indent of a tile and a gap is a fifth of a phone. */
+@container (width < 28rem) {
+  .crewlet-review-list__item {
+    padding: var(--spacing-3) var(--spacing-4);
+  }
+
+  .crewlet-review-list__item:not(.crewlet-review-list__item--plain) {
+    grid-template-areas:
+      'icon head action'
+      'body body body'
+      'error error error';
+  }
+}

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-VYVW24VC.js';
+export { RichEditor, preloadRichEditor } from '../chunk-VVOPDWLX.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
 import '../chunk-BAKPMH3S.js';
 import '../chunk-BPCY7ZID.js';

package/dist/SegmentedControl/index.js

@@ -1,15 +1,15 @@
 import '../chunk-OOC7Q67K.js';
-export { SegmentedControl } from '../chunk-5FB6DGGC.js';
-import '../chunk-I4Q6PACO.js';
+export { SegmentedControl } from '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-3JIZ2A6K.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
-import '../chunk-BHHIIK3M.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SelectionBar/index.js

@@ -1,9 +1,9 @@
-export { SelectionBar } from '../chunk-F6CKQX5D.js';
+export { SelectionBar } from '../chunk-OCRVY42T.js';
 import '../chunk-NR4CPM4T.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SetupWizard/SetupWizard.d.ts

@@ -47,9 +47,10 @@ export interface SetupWizardProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     /** What stands at the start of the footer row, apart from the step's actions: Exit. */
     footerStart?: ReactNode;
     /**
-     * The content takes the whole width beside the rail rather than one 640px
-     * column, for a step that lays out columns of its own (a review of every
-     * step beside a preview). Meant for a step with no `aside`.
+     * The content takes the content's and the aside's columns together (1000px
+     * at most) rather than one 640px column, for a step that lays out columns
+     * of its own (a review of every step beside a preview). Its footer ends
+     * where every other step's does. Meant for a step with no `aside`.
      */
     wide?: boolean | undefined;
     labels?: Partial<SetupWizardLabels> | undefined;
@@ -66,17 +67,22 @@ export interface SetupWizardProps extends Omit<HTMLAttributes<HTMLDivElement>, '
  * most 640px. The aside is a complementary landmark named by `asideLabel`,
  * held in view beside the content. The footer holds the step's actions at the
  * end of its row (and `footerStart`, the way out, at its start) at the bottom
- * of the view, above the device's safe area. A step that lays out columns of
- * its own takes the whole width beside the rail with `wide`.
+ * of the view, above the device's safe area, and at the end of a scroll rests
+ * on the scroller's bottom edge rather than above the shell's room under the
+ * content (`--crewlet-app-shell-content-end`). A step that lays out columns
+ * of its own takes the content's and the aside's columns with `wide`.
  *
  * THREE SHAPES. On a wide page the rail, the content and the aside stand side
- * by side (240px, the content, 320px). Where the wizard has under 70rem of its
- * own width, which is a 1024px window beside the application's rail, the aside
- * moves under the content and the rail stays: a container query, because the
- * room is the page's and not the window's, as in `AsideLayout`. Under the
+ * by side (240px, the content up to 640px, 320px), the aside right beside the
+ * content however wide the window, and the header and the footer ending where
+ * the parts do. Where the wizard has under 70rem of its own width, which is a
+ * 1024px window beside the application's rail, the aside moves under the
+ * content and the rail stays: a container query, because the room is the
+ * page's and not the window's, as in `AsideLayout`. Under the
  * phone breakpoint the rail becomes a row of steps above the content, under a
- * line that says "Step 3 of 6 · Colours", and the aside folds into a
- * disclosure, so the fields come first. Which element a phone draws is decided
+ * line that says "Step 3 of 6 · Colours", the aside folds into a
+ * disclosure, so the fields come first, and the footer's actions share two
+ * rows with the last of them, the primary, the whole width. Which element a phone draws is decided
  * in `useMediaMatch`, the one subscription for that question; how it is laid
  * out is decided in the stylesheet, at the same breakpoint token.
  *

package/dist/SetupWizard/index.js

@@ -1,11 +1,11 @@
-export { SetupWizard } from '../chunk-4C5CZT4D.js';
+export { SetupWizard } from '../chunk-WXWMHYKW.js';
 import '../chunk-LDGQIDIZ.js';
 import '../chunk-DKB73KZI.js';
-import '../chunk-RTPQDNW3.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-OGXHZHRX.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RTPQDNW3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';