@crewlethq/ui 0.38.0 → 0.40.0

package/dist/DataGrid-AQKPJD7W.css

@@ -0,0 +1,482 @@
+/*
+ * DataGrid: a list as columns, one track list on the grid.
+ *
+ * THE GRID MAKES NO SCROLLPORT OF ITS OWN. `overflow: clip` rounds the rows off
+ * at the corner exactly as `hidden` would, and it is the difference between a
+ * sticky head that works and one that cannot: `hidden` makes a scroll
+ * container, a sticky box is confined to its nearest scrollport, and this one
+ * grows to its rows, so its offset is always 0. The head sticks against the
+ * page's own scroller; an application whose scroller carries a sticky bar of
+ * its own sets `--crewlet-data-grid-sticky-top` to that bar's height.
+ *
+ * THE COLUMNS BELONG TO THE GRID, NOT TO A ROW. The tracks are declared once,
+ * on the grid (its inline `grid-template-columns`), and the head, the body,
+ * the bands and the rows are `subgrid` passthroughs, so a head cell and a cell
+ * twenty rows down size the same track. Everything that is not a row of cells
+ * spans the whole width.
+ */
+
+.crewlet-data-grid {
+  display: grid;
+  min-width: 0;
+  border: 1px solid var(--color-border-hover);
+  border-radius: var(--radius-md);
+  overflow: clip;
+  background: var(--color-surface-subtle);
+}
+
+/*
+ * A CARD'S BODY (`flush`, and every grid straight in a Card or its body, told
+ * or not): the card is the frame, so the grid draws none of its own and one
+ * rule parts it from the card's head. Under the card's header, the header's
+ * own rule is that one.
+ */
+.crewlet-data-grid[data-flush],
+.crewlet-card > .crewlet-data-grid,
+.crewlet-card__body > .crewlet-data-grid {
+  border: 0;
+  border-top: 1px solid var(--color-border-default);
+  border-radius: var(--radius-none);
+  background: transparent;
+}
+
+.crewlet-card__header + .crewlet-data-grid {
+  border-top: 0;
+}
+
+/* A full-width band by default: the head, the body, the foot, the reset and
+   the empty state, which is the one child when the grid carries no tracks. */
+.crewlet-data-grid > * {
+  grid-column: 1 / -1;
+}
+
+.crewlet-data-grid__head,
+.crewlet-data-grid__body,
+.crewlet-data-grid__band,
+.crewlet-data-grid__row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+}
+
+.crewlet-data-grid__band-head,
+.crewlet-data-grid__band-foot {
+  grid-column: 1 / -1;
+}
+
+/*
+ * The head: a floor at the row height (density shrinks the padding, not the
+ * label), on the raised ground, sticky at the application's offset.
+ */
+.crewlet-data-grid__head {
+  align-items: center;
+  min-height: var(--size-row-md);
+  border-bottom: 1px solid var(--color-border-hover);
+  background: var(--color-surface-elevated);
+  position: sticky;
+  top: var(--crewlet-data-grid-sticky-top, var(--spacing-0));
+  z-index: var(--z-index-sticky);
+}
+
+/*
+ * THE LIST TABLE'S HEAD: the micro-label register every table takes, 11/500
+ * uppercase. A sortable head is a button with its chrome reset; the reset
+ * takes the focus ring with it, so the ring is restated below.
+ */
+.crewlet-data-grid__th {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--font-letter-spacing-wide);
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  min-width: 0;
+  transition: color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-data-grid__th--plain {
+  cursor: default;
+}
+
+/* A sortable head's control fills the head: the whole cell is the target. */
+.crewlet-data-grid__sort {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: calc(-1 * var(--spacing-2)) calc(-1 * var(--spacing-3));
+  padding: var(--spacing-2) var(--spacing-3);
+  cursor: pointer;
+}
+
+.crewlet-data-grid__th--right .crewlet-data-grid__sort {
+  justify-content: flex-end;
+}
+
+.crewlet-data-grid__th:not(.crewlet-data-grid__th--plain):hover,
+.crewlet-data-grid__th--sorted {
+  color: var(--color-text-primary);
+}
+
+.crewlet-data-grid__th--right {
+  justify-content: flex-end;
+}
+
+.crewlet-data-grid__sort:focus-visible,
+.crewlet-data-grid__cols-reset:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-data-grid__body {
+  min-width: 0;
+}
+
+.crewlet-data-grid__row {
+  align-items: center;
+  min-height: var(--size-row-md);
+  border-bottom: 1px solid var(--color-border-default);
+  color: inherit;
+  cursor: pointer;
+  /* The containing block for the row's link. */
+  position: relative;
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* THE ROW'S OWN LINK, STRETCHED OVER IT, out of flow so it takes no track. */
+.crewlet-data-grid__row-link {
+  position: absolute;
+  inset: 0;
+}
+
+/* A button overlay (a row that acts and has no address) gives up the chrome a
+   button brings, and draws the focus ring inside the row. */
+button.crewlet-data-grid__row-link {
+  all: unset;
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
+
+.crewlet-data-grid__row-link:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/*
+ * AND THE CELLS' OWN CONTROLS SIT ABOVE IT: positioned and later in the
+ * document than the overlay, they win the hit test in the same stacking
+ * context, with no z-index to reason about against the sticky head. A cell's
+ * element that is not a link or a button but must take its own clicks (a
+ * refusal sentence a reader selects) carries `data-above-row`.
+ */
+.crewlet-data-grid__row a:not(.crewlet-data-grid__row-link),
+.crewlet-data-grid__row button:not(.crewlet-data-grid__row-link),
+.crewlet-data-grid__row [data-above-row] {
+  position: relative;
+}
+
+.crewlet-data-grid__row:last-child {
+  border-bottom: none;
+}
+
+.crewlet-data-grid__row:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-data-grid__row--selected,
+.crewlet-data-grid__row--selected:hover {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-data-grid__row--cursor {
+  box-shadow: inset 2px 0 0 var(--color-brand-accent);
+}
+
+/* A FAILED ROW IS MARKED ON ITS EDGE, not tinted: the status column already
+   says so, and two signals for one fact teach a reader to trust neither. */
+.crewlet-data-grid__row--failed {
+  box-shadow: inset 2px 0 0 var(--color-feedback-danger-ink);
+}
+
+.crewlet-data-grid__cell {
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-compact);
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/*
+ * A SHRINK COLUMN does not wrap inside its capped track, and does not paint
+ * outside it: a nowrap cell narrower than its content would spill over the
+ * column beside it. `clip`, since a scrollport here would cut the sticky head.
+ */
+.crewlet-data-grid__th--shrink,
+.crewlet-data-grid__cell--shrink {
+  white-space: nowrap;
+  overflow: clip;
+}
+
+.crewlet-data-grid__cell--right {
+  justify-content: flex-end;
+}
+
+.crewlet-data-grid__truncate {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-data-grid__band + .crewlet-data-grid__band {
+  border-top: 1px solid var(--color-border-hover);
+}
+
+.crewlet-data-grid__band-head,
+.crewlet-data-grid__band-foot {
+  display: flex;
+}
+
+/* The band row's one cell lays its parts out on the row's own flex line. */
+.crewlet-data-grid__band-cell {
+  display: contents;
+}
+
+.crewlet-data-grid__band-head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  background: var(--color-surface-elevated);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  position: sticky;
+  /* Under the column heads, which are a row tall and parked at the offset;
+     confined to its own band, so it leaves with the band. Above the rows
+     (positioned for the row link) and below the heads. */
+  top: calc(var(--crewlet-data-grid-sticky-top, var(--spacing-0)) + var(--size-row-md));
+  z-index: var(--z-index-raised);
+}
+
+/* A SECOND AXIS IS A BAND INSIDE A BAND, inset and quieter, so it does not
+   read as its parent's sibling; and it draws no rule above itself. */
+.crewlet-data-grid__band .crewlet-data-grid__band > .crewlet-data-grid__band-head {
+  padding-left: calc(var(--spacing-3) + var(--spacing-4));
+  background: var(--color-surface-subtle);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-data-grid__band .crewlet-data-grid__band + .crewlet-data-grid__band {
+  border-top: none;
+}
+
+.crewlet-data-grid__band-count {
+  margin-left: auto;
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-data-grid__band-foot {
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-data-grid__band-foot a {
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-data-grid__band-foot a:hover {
+  color: var(--color-text-primary);
+}
+
+.crewlet-data-grid__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-top: 1px solid var(--color-border-hover);
+  background: var(--color-surface-elevated);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-data-grid__foot-spacer {
+  flex: 1 1 auto;
+}
+
+.crewlet-data-grid__note {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-data-grid__cols-reset {
+  all: unset;
+  /* After the reset, which takes `grid-column` too. */
+  grid-column: 1 / -1;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-2xs);
+  color: var(--color-brand-accent-ink);
+  cursor: pointer;
+  text-align: left;
+}
+
+/* ---- The column chooser ------------------------------------------------ */
+
+.crewlet-column-chooser__label {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+/* TWO COLUMNS: a single file of short words makes a menu as tall as the grid
+   has columns. */
+.crewlet-column-chooser__choices {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-1) var(--spacing-3);
+}
+
+/* The pointer target is the row, not the 13px box. */
+.crewlet-column-chooser__choice {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-target-min);
+  font-size: var(--font-size-compact);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-data-grid__th,
+  .crewlet-data-grid__row {
+    transition: none;
+  }
+}
+
+/* ---- A ROW IS A CARD ON A PHONE -----------------------------------------
+   A GRID IS COLUMNS, AND A PHONE DOES NOT HAVE THEM: the grid clips (for its
+   sticky head), so the columns past the edge were cut off with nothing to
+   scroll to, and a sideways scroller resolves every flexible track to zero. So
+   the head goes and each cell draws its own name beside its value
+   (`data-label`); the subgrid chain is unwound to blocks and each cell is a
+   flex line, label then value. A cell with nothing in it is no line
+   (`:empty`), and a cell that draws a marked absence has content and stays.
+   The sort is in the application's state, so a sorted list still arrives
+   sorted. */
+@media (width < 640px) {
+  .crewlet-data-grid {
+    display: block;
+  }
+
+  .crewlet-data-grid__head {
+    display: none;
+  }
+
+  .crewlet-data-grid__body,
+  .crewlet-data-grid__band {
+    display: block;
+  }
+
+  .crewlet-data-grid__row {
+    display: block;
+    padding: var(--spacing-2) var(--spacing-3);
+    min-height: 0;
+  }
+
+  /* A FIXED BASIS lines the names up without a track, and the name wraps
+     inside it rather than pushing its value past every other card line. */
+  .crewlet-data-grid__cell {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-3);
+    padding: 1px 0;
+    min-width: 0;
+  }
+
+  .crewlet-data-grid__cell:empty {
+    display: none;
+  }
+
+  .crewlet-data-grid__cell[data-label]::before {
+    content: attr(data-label);
+    flex: 0 0 7rem;
+    overflow-wrap: anywhere;
+    font-size: var(--font-size-2xs);
+    text-transform: uppercase;
+    letter-spacing: var(--font-letter-spacing-wide);
+    color: var(--color-text-tertiary);
+  }
+
+  /* `shrink` and `right` are column shapes, and there are no columns here. */
+  .crewlet-data-grid__cell--shrink,
+  .crewlet-data-grid__cell--right {
+    white-space: normal;
+    justify-content: flex-start;
+  }
+
+  .crewlet-data-grid__cell .crewlet-data-grid__truncate {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    overflow-wrap: anywhere;
+  }
+
+  /* ---- THE COMPACT ROW (`phoneRows="compact"`) ---------------------------
+     TWO LINES, NO LABELS: what the row is, then its marks. One flex run that
+     breaks once: the lead cells first, a zero-height full-width `::after`
+     between them and the rest, then every other cell in column order. */
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-1) var(--spacing-2);
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__row::after {
+    content: '';
+    order: 1;
+    flex-basis: 100%;
+    height: 0;
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell {
+    order: 2;
+    padding: 0;
+    align-items: center;
+    gap: var(--spacing-1);
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-lead] {
+    order: 0;
+  }
+
+  /* The title takes the rest of the first line, beside the key. */
+  .crewlet-data-grid[data-phone-rows='compact']
+    .crewlet-data-grid__cell[data-lead]:not(.crewlet-data-grid__cell--shrink) {
+    flex: 1 1 0;
+    min-width: 0;
+    font-weight: var(--font-weight-medium);
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-label]::before {
+    content: none;
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-phone-omit] {
+    display: none;
+  }
+}

package/dist/DataTable/index.js

@@ -1,7 +1,7 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-A23KDROH.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-FXBGEANQ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-SVGARBDY.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-AXS6MBNH.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';

package/dist/DataView/index.js

@@ -1,10 +1,10 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-YQG4PZGC.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-QRKT4XTT.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-A23KDROH.js';
 import '../chunk-UB6MLXUL.js';
+import '../chunk-FXBGEANQ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-SVGARBDY.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-GXQ3B46I.js';
@@ -13,8 +13,8 @@ import '../chunk-AXS6MBNH.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-TYONQSOK.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-D6FEHY5G.js';

package/dist/DatasetSource/DatasetSource.d.ts

@@ -26,7 +26,13 @@ export interface DatasetSourceLabels {
 export interface DatasetSourceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'onSelect'> {
     /** The dataset's title, which every figure drawn from it cites. */
     title: string;
-    kind: DatasetSourceKind;
+    /**
+     * Where the dataset reads from, drawn as a tag beside the title. Left out
+     * where every entry of a list reads from one place (a picker of the
+     * engine's own sources, grouped under headings of their own), since the
+     * same tag on every row is a column a reader learns to skip.
+     */
+    kind?: DatasetSourceKind | undefined;
     /** What the dataset reads, in the author's terms: "tracker.items, scope mine". */
     definition: ReactNode;
     /** How it is kept current, in words: "Live", "Every 2 min", "On change". */

package/dist/DatasetSource/index.js

@@ -1,4 +1,4 @@
-export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-IPWU6ERC.js';
+export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-HQJ24WPM.js';
 import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';

package/dist/HuePicker/index.js

@@ -1,10 +1,17 @@
 import '../chunk-FFMCMSJB.js';
-export { HuePicker, HueSwatch } from '../chunk-F4LPQA4E.js';
+export { HuePicker, HueSwatch } from '../chunk-BA32AVKS.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+import '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-D6FEHY5G.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/LayersList/index.js

@@ -1,3 +1,3 @@
-export { LAYERS_LIST_LABELS, LayersList } from '../chunk-46RL3E54.js';
-import '../chunk-RKKO7QHH.js';
+export { LAYERS_LIST_LABELS, LayersList } from '../chunk-M6NQ4XGK.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-ODEQTPFM.js';

package/dist/LinkInterstitial/index.js

@@ -1,5 +1,5 @@
-export { LinkInterstitial, openExternal } from '../chunk-NRBAXRWE.js';
-import '../chunk-SVGARBDY.js';
+export { LinkInterstitial, openExternal } from '../chunk-N3TFYBN3.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-5CLW2CXT.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-PQADV6P6.js';

package/dist/List/List.d.ts

@@ -9,6 +9,14 @@ export type ListVariant =
  | 'bulleted'
 /** A number per row: an order somebody follows. */
  | 'numbered'
+/**
+ * A number per row in a column of its own, with a hairline between rows:
+ * statements a reader counts and cites by number (a company's standing
+ * policies), each of which may run to several lines. The numbers are the
+ * list's own (an `ol`), drawn in tabular figures so a tenth row's number
+ * stands where the first one's does.
+ */
+ | 'numbered-divided'
 /**
  * A hairline between rows: a feed, a set of results, a conversation. THE
  * DEFAULT, because it is the list every screen in the product draws: rows a

package/dist/List/index.js

@@ -1,3 +1,3 @@
-export { List, ListItem } from '../chunk-DS2C73RJ.js';
+export { List, ListItem } from '../chunk-NZWX27J7.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{List-MYJIV6MP.css → List-YHLIZFK4.css}

@@ -120,6 +120,52 @@
   padding-inline: 0;
 }
 
+/*
+ * NUMBERED AND DIVIDED: the divided list's hairlines, with the number in a
+ * column of its own rather than in the margin, so a statement that runs to a
+ * second line wraps under its own first word and not under its number. The
+ * row grows with its text (no row height), at the body's leading, and the
+ * number stands on the first line's baseline.
+ *
+ * The number is the list's counter, drawn by the row. The `ol` already
+ * announces each item's position, so the drawn figure is given empty
+ * alternative text and is not read a second time.
+ */
+.crewlet-list--numbered-divided {
+  counter-reset: crewlet-list-item;
+}
+
+.crewlet-list--numbered-divided .crewlet-list__item {
+  counter-increment: crewlet-list-item;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-list--numbered-divided .crewlet-list__item:last-child {
+  border-bottom: none;
+}
+
+.crewlet-list--numbered-divided .crewlet-list__row {
+  align-items: baseline;
+  min-height: 0;
+  /* At a card's own inset, since a card is where these stand: the numbers
+     line up under the card head's glyph rather than 4px left of it. */
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: 0;
+  line-height: var(--font-line-height-body);
+}
+
+.crewlet-list--numbered-divided .crewlet-list__row::before {
+  content: counter(crewlet-list-item);
+  content: counter(crewlet-list-item) / '';
+  flex: none;
+  min-width: 2ch;
+  text-align: end;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
 /* ---- States ------------------------------------------------------------ */
 
 /*

package/dist/ListInput/ListInput.d.ts

@@ -21,6 +21,14 @@ export interface ListInputProps {
     optional?: boolean | undefined;
     /** Draws the Enter keycap inside the new-item box, which is what adds one. */
     enterHint?: boolean | undefined;
+    /**
+     * Puts the focus in the new-item box when the list mounts, for a form
+     * opened to change THIS list ("Edit policies"): the reader lands where the
+     * next item is written rather than on the form's first field. It is taken
+     * during mount, so a dialog the list opens in keeps it rather than moving
+     * focus to its own first control. Named as `TagsInput`'s is.
+     */
+    focusOnMount?: boolean | undefined;
     /** The name of the control beside the legend that appends what the box holds. */
     addLabel?: ((itemName: string) => string) | undefined;
     itemLabel?: ((name: string, position: string) => string) | undefined;
@@ -67,4 +75,4 @@ export interface ListInputProps {
  *
  * Ported from the engine dashboard's `ui/ListField.tsx`.
  */
-export declare function ListInput({ label, itemName, value, onChange, multiline, helper, helperOnFocus, error, placeholder, disabled, optional, enterHint, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;
+export declare function ListInput({ label, itemName, value, onChange, multiline, helper, helperOnFocus, error, placeholder, disabled, optional, enterHint, focusOnMount, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;

package/dist/ListInput/index.js

@@ -1,6 +1,6 @@
-export { ListInput } from '../chunk-3ZUINC7C.js';
-import '../chunk-SMBKXWML.js';
+export { ListInput } from '../chunk-WYYCPV46.js';
 import '../chunk-TYONQSOK.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';