@crewlethq/ui 0.50.0 → 0.51.0

package/README.md

@@ -204,6 +204,26 @@ 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.51.0
+
+Polish of the setup wizard pieces, and the parts the brand setup asked for.
+
+**`ColorField` draws its `#` and reads more than six digits.** The `#` is drawn at the start of the field, so a person types the six hex digits alone, and a pasted `#rrggbb` loses its own `#` to it. When the reader leaves the field (Enter or Tab), `rrggbb`, the three digit shorthand and `rgb(r, g, b)` or `rgb(r g b)` are normalised to lowercase `#rrggbb`; anything else is refused with one sentence. Six digits are still reported as they are typed, and `onChange` still receives only a colour, or `''` for an emptied optional field. What to change: a test that reads the text field's value reads the six digits without the `#`. The default `labels.invalid` and `labels.placeholder` changed, and `labels.prefix` is new.
+
+**`ContrastHelp` is new**: a small info button beside a contrast heading that opens a short panel saying what AA, AAA and Low or Fails mean, each drawn as `ContrastBadge` draws it. It is a `Popover` the button toggles, so it opens by touch and from the keyboard, and closes on Escape with focus handed back. Place it beside the heading, not inside it. `ContrastLevelTag` is the one drawing of a level, shared by the badge and the panel.
+
+**`ColorChip` is new**: a colour as a small decorative chip (12px `xs` or 16px `sm`, round or square) with an edge of its own and the hatch of no colour, for the mark on a button that applies a suggested colour.
+
+**`SetupWizard` takes `footerStart` and `wide`.** `footerStart` stands at the start of the footer row (the way out), with `footer`, the step's actions, held at its end. `wide` lets a step that lays out columns of its own take the whole width beside the rail. A wizard with no `aside` no longer holds an empty 320px column from 70rem.
+
+**`Callout`'s actions stand one step apart.** The action slot is a wrapping row with the kit's step between, so two actions never draw touching.
+
+**`EditingStatus` reads cleanly.** Its text is "Draft Saved 24s ago", drawn "Draft · Saved 24s ago": no hidden comma and no second "Saved". The live region holds only the label and the state, and the time follows it in a `time` element outside the region, so it is shown and never announced. What to change: `labels.saved` is now the word alone (`'Saved'`), and `labels.savedSpoken` is gone. A test that reads `getByRole('status')` reads the label and the state only.
+
+**`ListInput` ends its new-item row with an Add button.** The add control no longer floats beside the legend as a `+` square: it is a text button at the end of the box's own row, with or without a shown legend, beside Enter. It shows `addText` ("Add") and is named by `addLabel` ("Add policy").
+
+**Folder tiles are set on the artifact card's type scale.** A `FolderTile`'s name and facts take a gallery card's title and facts steps at every width, on one 1.35 line height with the card's step between; a row, and a tile on a phone, no longer drop to smaller steps beside cards that keep theirs. `ArtifactCard`'s gallery facts take the title's line height. `ArtifactNameCell` is unchanged: a folder's row in the list is set as every artifact's row there.
+
 ## Changes in 0.50.0
 
 The pieces of a setup a person walks step by step, first used by the brand setup.

package/dist/ArtifactCard/index.js

@@ -1,4 +1,4 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-Q44X36QC.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-S63QOMXC.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';

package/dist/{ArtifactCard-SOB63NV5.css → ArtifactCard-F7IVRL3A.css}

@@ -215,6 +215,9 @@
 
 .crewlet-artifact-card--card .crewlet-artifact-card__facts {
   font-size: var(--font-size-sm);
+  /* The title's line height, so a card's words and a folder tile's beside it
+     keep one rhythm. */
+  line-height: 1.35;
 }
 
 .crewlet-artifact-card__meta {

package/dist/AvatarPicker/index.js

@@ -1,8 +1,8 @@
-export { AvatarPicker } from '../chunk-3QSKDZR5.js';
+export { AvatarPicker } from '../chunk-EW2N4FOD.js';
 import '../chunk-34RMTXDZ.js';
 import '../chunk-KHJIEPZV.js';
-import '../chunk-AYKXMIOR.js';
 import '../chunk-SNQRGH4A.js';
+import '../chunk-AYKXMIOR.js';
 import '../chunk-6FVGSWLS.js';
 import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';

package/dist/BrandSample/index.js

@@ -1,5 +1,5 @@
-export { BrandSample } from '../chunk-OEEYL2CM.js';
-import '../chunk-P3OIM6OC.js';
+export { BrandSample } from '../chunk-AVMQMY66.js';
+import '../chunk-X7WEE3EK.js';
 import '../chunk-5SGHW42B.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/BrandScope/index.js

@@ -1,4 +1,4 @@
-export { BrandScope, brandScopeInputs } from '../chunk-P3OIM6OC.js';
+export { BrandScope, brandScopeInputs } from '../chunk-X7WEE3EK.js';
 import '../chunk-5SGHW42B.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Callout/index.js

@@ -1,2 +1,2 @@
-export { Callout } from '../chunk-SZZRIHGT.js';
+export { Callout } from '../chunk-BPCY7ZID.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Callout-ZAVG3P66.css → Callout-G3N3IE6M.css}

@@ -77,7 +77,16 @@
   font-weight: var(--font-weight-semibold);
 }
 
+/*
+ * THE ACTIONS ARE A ROW one step apart, wrapping when there is no room, so a
+ * callout with two (Continue setting up, Review and adopt) never draws them
+ * touching, whatever the host wraps them in.
+ */
 .crewlet-callout__action {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
   grid-column: 3;
   grid-row: 1;
   align-self: center;

package/dist/ColorChip/ColorChip.d.ts

@@ -0,0 +1,26 @@
+/** `xs` is 12px, a mark inside a small button; `sm` is 16px, beside a word in a row. */
+export type ColorChipSize = 'xs' | 'sm';
+export type ColorChipShape = 'round' | 'square';
+export interface ColorChipProps {
+    /**
+     * The colour, as `#rrggbb`. Anything else draws the hatch of no colour and
+     * is never put into a style.
+     */
+    value: string | null | undefined;
+    size?: ColorChipSize | undefined;
+    shape?: ColorChipShape | undefined;
+    className?: string | undefined;
+}
+/**
+ * A colour as a small chip and nothing else: the mark on a button that
+ * applies it ("Use #007f7f"), or beside a value in a row.
+ *
+ * DECORATION, hidden from a screen reader: the words beside it say what the
+ * colour is. Where a colour has to be named, read and copied, that is
+ * `ColorSwatch`.
+ *
+ * THE VALUE PASSES THE SAME GATE AS EVERY BRAND PART (`#rrggbb`, lowercased)
+ * before it reaches a style, and the chip draws an edge of its own, so a
+ * colour that matches the ground it sits on is still a chip.
+ */
+export declare function ColorChip({ value, size, shape, className }: ColorChipProps): import("react").JSX.Element;

package/dist/ColorChip/index.d.ts

@@ -0,0 +1,3 @@
+import './ColorChip.css';
+export { ColorChip } from './ColorChip.js';
+export type { ColorChipProps, ColorChipShape, ColorChipSize } from './ColorChip.js';

package/dist/ColorChip/index.js

@@ -0,0 +1,3 @@
+export { ColorChip } from '../chunk-6GTTRJWJ.js';
+import '../chunk-7W3LYIOC.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ColorChip-A5XHTH3J.css

@@ -0,0 +1,46 @@
+/*
+ * A colour as a small chip (ColorChip.tsx). Its fill is the one value that is
+ * not a token, and it arrives through `--crewlet-color-chip-value` only after
+ * it has passed `#rrggbb`.
+ */
+.crewlet-color-chip {
+  display: inline-block;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  background: var(--crewlet-color-chip-value, var(--color-surface-inset));
+  /* An edge of its own, so a colour that matches its ground is still a chip. */
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+  vertical-align: middle;
+}
+
+.crewlet-color-chip--sm {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
+
+.crewlet-color-chip--round {
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-color-chip--square {
+  border-radius: var(--radius-xs);
+}
+
+/* The hatch of no colour, as every swatch in the package draws it. */
+.crewlet-color-chip.is-empty {
+  background: repeating-linear-gradient(-45deg, var(--color-border-hatch) 0 1px, transparent 1px var(--spacing-1));
+}
+
+/*
+ * FORCED COLORS drops backgrounds, which is all a chip is, so the mode keeps
+ * this one: the colour is the information, and the edge is drawn in the
+ * system's text colour so the chip still has a boundary.
+ */
+@media (forced-colors: active) {
+  .crewlet-color-chip {
+    forced-color-adjust: none;
+    box-shadow: inset 0 0 0 1px CanvasText;
+  }
+}

package/dist/ColorField/ColorField.d.ts

@@ -7,10 +7,12 @@ export interface ColorFieldLabels {
     /** Names the colour picker beside the field: "Pick the Primary colour". */
     picker: (label: string) => string;
     /**
-     * What the empty field shows: the shape a value takes, never a colour, which
-     * an empty field would seem to hold.
+     * What the empty field shows after its `#`: the shape a value takes, never
+     * a colour, which an empty field would seem to hold.
      */
     placeholder: string;
+    /** Said for the `#` drawn at the start of the field, which is not part of what is typed. */
+    prefix: string;
 }
 export interface ColorFieldProps {
     /** The colour's role, which is the field's name: "Primary". */
@@ -48,12 +50,18 @@ export interface ColorFieldProps {
  * A colour a person chooses: a hex field, a swatch that opens the platform's
  * colour picker, and the reason a value was refused.
  *
- * THE VALUE IS `#` AND SIX HEX DIGITS, and nothing else is ever reported: the
- * field holds what is being typed, and a value reaches `onChange` only once it
- * reads as a colour, lowercased, the one spelling the engine stores. A value
- * that does not read is refused when the reader leaves the field (Enter or
- * Tab), never while they are still typing it, with a sentence saying what
- * right looks like.
+ * THE `#` IS THE FIELD'S, drawn at its start, so a person types the six hex
+ * digits alone; a pasted `#rrggbb` loses its own `#` to it. When the reader
+ * leaves the field (Enter or Tab) what they wrote is read as a colour:
+ * `rrggbb`, the three digit shorthand, or `rgb(r, g, b)` (commas or spaces),
+ * each normalised to the one spelling the engine stores, lowercase
+ * `#rrggbb`. Anything else is refused then, never while they are still
+ * typing, with a sentence saying what right looks like.
+ *
+ * ONLY A COLOUR IS EVER REPORTED. Six hex digits reach `onChange` as they are
+ * typed, so a preview follows the field; the shorthand and `rgb()` reach it
+ * when the reader leaves, since `abc` on its way to `abcdef` is not the colour
+ * they mean. An optional field emptied reports `''`.
  *
  * THE SWATCH IS THE PICKER. It is the platform's own colour input, drawn as
  * the chip of the colour the field holds and named for it, so it is a real,

package/dist/ColorField/index.js

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

package/dist/ColorSwatch/index.js

@@ -1,8 +1,8 @@
-export { ColorSwatch } from '../chunk-WLSEAIVC.js';
+export { ColorSwatch } from '../chunk-RHPBTE3F.js';
 import '../chunk-7SHAFLEX.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ContrastBadge/ContrastBadge.d.ts

@@ -44,6 +44,19 @@ export interface ContrastBadgeLabels {
 export type ContrastBadgeLabelsInput = Partial<Omit<ContrastBadgeLabels, 'levels'>> & {
     levels?: Partial<Record<ContrastBadgeLevel, string>> | undefined;
 };
+export interface ContrastLevelTagProps {
+    /** The level drawn. */
+    level: ContrastBadgeLevel;
+    /** Its word: "AA", "Low". */
+    children: string;
+}
+/**
+ * A contrast level as the badge draws it: its word in its tone with its
+ * glyph (a check for AA and AAA, the warning triangle for large text only and
+ * Low, the alert circle for Fails). The one drawing of a level, so the badge
+ * and the explanation of the levels (`ContrastHelp`) never disagree.
+ */
+export declare function ContrastLevelTag({ level, children }: ContrastLevelTagProps): import("react").JSX.Element;
 export interface ContrastBadgeProps {
     /** The colour read: text, a logo, an accent. `#rrggbb`. */
     foreground: string;

package/dist/ContrastBadge/index.d.ts

@@ -1,3 +1,3 @@
 import './ContrastBadge.css';
-export { ContrastBadge, contrastLevel, contrastRatio, formatContrastRatio } from './ContrastBadge.js';
-export type { ContrastBadgeLabels, ContrastBadgeLabelsInput, ContrastBadgeLevel, ContrastBadgeProps, ContrastLevel, ContrastScale, } from './ContrastBadge.js';
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from './ContrastBadge.js';
+export type { ContrastBadgeLabels, ContrastBadgeLabelsInput, ContrastBadgeLevel, ContrastBadgeProps, ContrastLevelTagProps, ContrastLevel, ContrastScale, } from './ContrastBadge.js';

package/dist/ContrastBadge/index.js

@@ -1,6 +1,6 @@
-export { ContrastBadge, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-NSSOWQCJ.js';
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-WW7TU6HE.js';
 import '../chunk-KYIAFNU7.js';
-import '../chunk-UZMNR366.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastHelp/ContrastHelp.d.ts

@@ -0,0 +1,40 @@
+import { type PopoverAlign } from '../Popover/index.js';
+export interface ContrastHelpLabels {
+    /** The button's name: "About contrast levels". */
+    trigger: string;
+    /** The panel's name: "Contrast levels". */
+    title: string;
+    /** What contrast is. */
+    intro: string;
+    /** The levels, each its word as the badge draws it and what it means. */
+    aa: {
+        term: string;
+        meaning: string;
+    };
+    aaa: {
+        term: string;
+        meaning: string;
+    };
+    low: {
+        term: string;
+        meaning: string;
+    };
+}
+export interface ContrastHelpProps {
+    /** Which edge of the button the panel lines up with. `start` by default. */
+    align?: PopoverAlign | undefined;
+    className?: string | undefined;
+    labels?: Partial<ContrastHelpLabels> | undefined;
+}
+/**
+ * What the contrast levels mean, a press away: a small info button beside a
+ * contrast heading that opens a short panel with AA, AAA and Low or Fails,
+ * each drawn as `ContrastBadge` draws it.
+ *
+ * A PRESS, NOT A HOVER. The panel is a `Popover` the button toggles, so it
+ * opens on a phone, where there is no hover, and from the keyboard (Enter or
+ * Space), and closes on Escape or a press outside, handing focus back to the
+ * button. A tooltip would hold this on hover alone and drop it the moment the
+ * pointer moved to read it. The panel is a dialog named by its title.
+ */
+export declare function ContrastHelp({ align, className, labels }: ContrastHelpProps): import("react").JSX.Element;

package/dist/ContrastHelp/index.d.ts

@@ -0,0 +1,3 @@
+import './ContrastHelp.css';
+export { ContrastHelp } from './ContrastHelp.js';
+export type { ContrastHelpLabels, ContrastHelpProps } from './ContrastHelp.js';

package/dist/ContrastHelp/index.js

@@ -0,0 +1,12 @@
+export { ContrastHelp } from '../chunk-KIRQZG3G.js';
+import '../chunk-WW7TU6HE.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-KHJIEPZV.js';
+import '../chunk-7W3LYIOC.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

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/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-WX6IJJ4U.js';
 import '../chunk-DKB73KZI.js';
-import '../chunk-ZFM5L7M4.js';
 import '../chunk-WQ7S7CKZ.js';
+import '../chunk-ZFM5L7M4.js';
 import '../chunk-YCC2S7DF.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-STJ7QBC3.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/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/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,10 @@ 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. */
+    /** 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,4 +1,4 @@
-export { ListInput, withDraft } from '../chunk-PGR2PKH6.js';
+export { ListInput, withDraft } from '../chunk-UUTEWGO6.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-EXRRTKWT.js';

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

@@ -257,7 +257,7 @@
   }
 }
 
-/* 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. */
 .crewlet-list-input__add-control {
   display: inline-flex;
   flex: none;

package/dist/LogoSlot/index.js

@@ -1,8 +1,8 @@
-export { LogoSlot } from '../chunk-BEAXJARF.js';
+export { LogoSlot } from '../chunk-2UFUP2ZH.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/RichEditor/index.js

@@ -1,7 +1,7 @@
-export { RichEditor, preloadRichEditor } from '../chunk-JWNYI7UD.js';
+export { RichEditor, preloadRichEditor } from '../chunk-KHP7TJF7.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
 import '../chunk-BAKPMH3S.js';
-import '../chunk-SZZRIHGT.js';
+import '../chunk-BPCY7ZID.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';