@crewlethq/ui 0.38.0 → 0.40.0

package/dist/SectionFrame-M62UUVFQ.css

@@ -0,0 +1,164 @@
+/*
+ * SectionFrame: a column of sections beside the screen, and the one-row
+ * picker it folds to.
+ */
+
+/* THE FRAME TAKES THE CONTENT COLUMN'S PADDING BACK and gives it to the body,
+   so the column is flush with the sheet and the section keeps the inset. */
+.crewlet-app-shell__content:has(> .crewlet-section-frame) {
+  min-height: 100%;
+  padding: 0;
+}
+
+.crewlet-section-frame {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: var(--crewlet-section-frame-column) minmax(0, 1fr);
+  min-height: 100%;
+}
+
+/*
+ * AS TALL AS THE VIEW, NEVER AS THE GRID. A sticky box moves only inside its
+ * grid area, which the section beside it makes as tall as its content; sized
+ * against that area the column was exactly as tall as the section, had
+ * nowhere to stick, and a wheel over a long section carried the list off the
+ * top. At the view's height (`100cqb`: the shell's scroller is a size
+ * container) it sticks for the whole scroll and a long list scrolls in itself.
+ *
+ * IT KEEPS THE WHEEL AT ITS ENDS. A box whose bottom is below the fold traps
+ * the wheel; this one is exactly the view and always all on screen, so what
+ * chaining would do is move the section beside it at the list's end, which
+ * is not what the pointer is over.
+ */
+.crewlet-section-frame__nav {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  height: 100cqb;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--spacing-4) 0;
+  border-right: 1px solid var(--color-border-default);
+}
+
+.crewlet-section-frame__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-5);
+  min-width: 0;
+  padding: var(--spacing-5) var(--spacing-5) var(--spacing-10);
+}
+
+/* BESIDE THE SECTION there is room for the whole list: no toggle, and the
+   list is always drawn. */
+.crewlet-section-frame__toggle {
+  display: none;
+}
+
+/*
+ * FOLDED: one pane, the picker above the section. The picker's row is its
+ * own height and the section takes the rest: two `auto` rows split a short
+ * section's spare height and opened a band of nothing between the picker
+ * and the section it names.
+ */
+.crewlet-section-frame[data-folded] {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
+}
+
+/* IN THE FLOW, as tall as it is, on the section's own gutter: the list it
+   unfolds is part of the page rather than a pane of its own. */
+.crewlet-section-frame[data-folded] > .crewlet-section-frame__nav {
+  position: static;
+  height: auto;
+  overflow-y: visible;
+  padding: var(--spacing-2) var(--spacing-5);
+  border-right: none;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+/* ONE ROW NAMING WHERE THE READER IS, which unfolds the list. Its glyph and
+   name stand over the glyphs and names of the rows: the rows' own inset,
+   less the toggle's border. */
+.crewlet-section-frame[data-folded] .crewlet-section-frame__toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  width: 100%;
+  min-height: var(--size-target-min);
+  padding: 0 calc(var(--size-nav-row-pad) - 1px);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  text-align: left;
+  cursor: pointer;
+}
+
+.crewlet-section-frame[data-folded] .crewlet-section-frame__toggle:hover {
+  background: var(--color-surface-hover);
+}
+
+/* INSIDE ITS OWN EDGE, as every control that draws one rings. */
+.crewlet-section-frame__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-section-frame__toggle-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-section-frame__toggle-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* "Section ·" BEFORE THE NAME, in the quiet ink, so the row reads as a
+   control holding the other sections rather than as the page's title. */
+.crewlet-section-frame__toggle-prefix {
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-section-frame__chevron {
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-section-frame__nav[data-open] .crewlet-section-frame__chevron {
+  transform: rotate(180deg);
+}
+
+.crewlet-section-frame[data-folded] .crewlet-section-frame__nav:not([data-open]) .crewlet-section-frame__list {
+  display: none;
+}
+
+.crewlet-section-frame[data-folded] .crewlet-section-frame__nav[data-open] .crewlet-section-frame__list {
+  padding-top: var(--spacing-2);
+}
+
+/* THE LIST TAKES NO GUTTER OF ITS OWN inside the folded picker, which is
+   inset already: with the rail's gutter on top, its glyphs sat 11px right of
+   the toggle's. */
+.crewlet-section-frame[data-folded] .crewlet-section-frame__list > .crewlet-sidebar-nav {
+  padding-inline: 0;
+}
+
+/* A PHONE'S ONE GUTTER: the section and the picker start where every other
+   screen's content does. */
+@media (width < 640px) {
+  .crewlet-section-frame__body {
+    padding: var(--spacing-4) var(--spacing-4) var(--spacing-9);
+  }
+
+  .crewlet-section-frame[data-folded] > .crewlet-section-frame__nav {
+    padding-inline: var(--spacing-4);
+  }
+}

package/dist/SegmentedControl/index.js

@@ -1,8 +1,15 @@
-import '../chunk-4ISUIS6F.js';
-export { SegmentedControl } from '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+import '../chunk-OOC7Q67K.js';
+export { SegmentedControl } from '../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/SettingsTable/SettingsTable.d.ts

@@ -0,0 +1,66 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** The words the three columns are named by, for assistive technology and the optional header row. */
+export interface SettingsTableColumns {
+    setting?: string | undefined;
+    value?: string | undefined;
+    source?: string | undefined;
+}
+export interface SettingsTableProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Draws the column names as a header row. Off by default: a page that
+     * stacks one table per group (a card each) would repeat the same three
+     * words over every card. The names are always exposed to assistive
+     * technology, drawn or not.
+     */
+    header?: boolean | undefined;
+    /** The column names. Defaults to Setting, Value and Source. */
+    columns?: SettingsTableColumns | undefined;
+    children?: ReactNode;
+}
+/**
+ * A read-only table of settings: what each is called, the value in force and
+ * where that value comes from.
+ *
+ * ONE COLUMN GRID FOR EVERY TABLE ON A PAGE. The tracks are fractions of the
+ * table's own width (`--crewlet-settings-table-columns`), never the width of
+ * the longest label, so a page that stacks a table per group in cards of one
+ * width puts every value and every source on one vertical line down the page.
+ * A term column sized to its own longest term started the values at a
+ * different place in every card, and a fixed one left them floating a third
+ * of the way across a wide card with the rest of the row empty.
+ *
+ * THE SOURCE IS QUIET UNLESS IT IS NEWS. A value that is the default says so
+ * in the tertiary ink, as a word rather than a tag: a tag on every row is
+ * noise that teaches a reader to skip the column. A value that differs from
+ * its default (`changed`) carries a mark before its source, which is the one
+ * row in the table a reader scanning it came to find.
+ *
+ * A TABLE, BECAUSE IT IS ONE. Every row carries the same three fields, so it
+ * is announced as a table with its column names, and each setting's name is
+ * the row's header. The roles are written out rather than taken from table
+ * elements because the row folds into two lines on a narrow table, and a
+ * table element that changes its display loses its semantics in some
+ * browsers.
+ */
+export declare function SettingsTable({ header, columns, className, children, ...rest }: SettingsTableProps): import("react").JSX.Element;
+export declare namespace SettingsTable {
+    var Row: typeof SettingsTableRow;
+}
+export interface SettingsTableRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** What the setting is called, in a reader's words. */
+    label: ReactNode;
+    /**
+     * The setting's address in the document it is written in
+     * (`turn_engine.max_iterations`), drawn quietly under its name in the
+     * monospace face. For the reader who will go and change it there.
+     */
+    settingKey?: string | undefined;
+    /** The value in force, in its own unit. Drawn in tabular figures. */
+    children?: ReactNode;
+    /** Where the value comes from: "Default", "Set in the company document". */
+    source?: ReactNode;
+    /** The value differs from its default: the source carries a mark. */
+    changed?: boolean | undefined;
+}
+/** One setting: its name (and key), its value and its source. */
+export declare function SettingsTableRow({ label, settingKey, source, changed, className, children, ...rest }: SettingsTableRowProps): import("react").JSX.Element;

package/dist/SettingsTable/index.d.ts

@@ -0,0 +1,3 @@
+import './SettingsTable.css';
+export { SettingsTable, SettingsTableRow } from './SettingsTable.js';
+export type { SettingsTableColumns, SettingsTableProps, SettingsTableRowProps } from './SettingsTable.js';

package/dist/SettingsTable/index.js

@@ -0,0 +1,3 @@
+export { SettingsTable, SettingsTableRow } from '../chunk-4RKTZSEW.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SettingsTable-6DUFAFXG.css

@@ -0,0 +1,160 @@
+/*
+ * SettingsTable: a read-only table of settings, one row each, on one grid.
+ *
+ * THE TRACKS ARE FRACTIONS OF THE TABLE, so every table of one width shares
+ * them: a page that stacks a table per group puts each column on one line
+ * down the page with nothing to coordinate. `--crewlet-settings-table-columns`
+ * is inherited, so a page that wants other proportions sets it once.
+ *
+ * Each row is its own grid on those tracks rather than a subgrid of the
+ * table's, because the tracks are fractions: one row's long label can never
+ * move another row's value, which is what a content-sized track would do.
+ */
+
+.crewlet-settings-table {
+  container: crewlet-settings-table / inline-size;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  font-size: var(--font-size-compact);
+  /* The flush-panel recipe, standing on its own: the card's surface, its
+     hairline and its corner. Inside a card it gives them up (below). */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/*
+ * A TABLE THAT IS A CARD'S CONTENT IS THAT CARD'S TABLE. It draws no edge or
+ * corner of its own inside one, so a card never holds a box inside a box; its
+ * rows' hairlines run to the card's edges under the card's own head rule.
+ */
+.crewlet-card > .crewlet-settings-table,
+.crewlet-card__body > .crewlet-settings-table {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+}
+
+.crewlet-settings-table__row {
+  display: grid;
+  grid-template-columns: var(
+    --crewlet-settings-table-columns,
+    minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr)
+  );
+  column-gap: var(--spacing-6);
+  /* ONE BASELINE PER ROW: the name, the value and the source sit on the
+     first line's baseline, whatever the name's key adds under it. */
+  align-items: baseline;
+  min-height: var(--size-row-md);
+  padding: var(--spacing-3) var(--spacing-4);
+}
+
+.crewlet-settings-table__body > .crewlet-settings-table__row + .crewlet-settings-table__row {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/*
+ * The column names, in the micro-label register a table's header takes
+ * across the system, on the panel's own ground. Hidden by default (see the
+ * component): still the table's column headers for assistive technology.
+ */
+.crewlet-settings-table__head .crewlet-settings-table__row {
+  min-height: 0;
+  padding-block: var(--spacing-2);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-settings-table__name {
+  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);
+  white-space: nowrap;
+}
+
+.crewlet-settings-table__head--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.crewlet-settings-table__setting {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-settings-table__label {
+  color: var(--color-text-primary);
+  line-height: var(--font-line-height-snug);
+}
+
+/*
+ * THE KEY IS FOR THE READER WHO WILL GO AND CHANGE IT, so it is there and
+ * quiet: the monospace face at the smallest step, in the tertiary ink, and
+ * free to break anywhere, since a dotted path is one word to a line breaker.
+ */
+.crewlet-settings-table__key {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+}
+
+/* Tabular figures, so a column of numbers reads down its digits. */
+.crewlet-settings-table__value {
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-settings-table__source {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* A value that differs from its default is the row a reader came to find. */
+.crewlet-settings-table__source--changed {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-settings-table__source--changed .crewlet-status-dot {
+  align-self: center;
+}
+
+/*
+ * NARROW: the name takes the row's first line, and the value and its source
+ * share the second. Three columns at this width leave a name column a word
+ * wide, which wraps every name into a stack of single words.
+ */
+@container crewlet-settings-table (width < 32rem) {
+  .crewlet-settings-table__row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    row-gap: var(--spacing-1);
+  }
+
+  .crewlet-settings-table__setting {
+    grid-column: 1 / -1;
+  }
+
+  .crewlet-settings-table__source {
+    justify-self: end;
+  }
+}

package/dist/ShareDialog/index.js

@@ -1,9 +1,9 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-UWRBD2YO.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-KNHUBHFX.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-W46LPU4R.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-SVGARBDY.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-CI3VPIJN.js';

package/dist/SheetColumnEditor/index.js

@@ -1,17 +1,18 @@
-export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-4L2BWSHR.js';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-GFYQKMQZ.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-FFMCMSJB.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-F4LPQA4E.js';
+import '../chunk-BA32AVKS.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
 import '../chunk-AXS6MBNH.js';
-import '../chunk-SMBKXWML.js';
+import '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-TYONQSOK.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-D6FEHY5G.js';

package/dist/SheetGrid/index.js

@@ -1,15 +1,15 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-JZPK4IXR.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-3PR65I3H.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-3BYIWOTV.js';
 import '../chunk-I6POAB4V.js';
-import '../chunk-KYIAFNU7.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-66X5WDKE.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';

package/dist/SidebarNav/SidebarNav.d.ts

@@ -69,6 +69,17 @@ export interface NavGroupProps {
      * first row.
      */
     action?: NavGroupAction | undefined;
+    /**
+     * Every row in the group is closed to this reader, for this reason
+     * ("Needs Admin access"). The key is drawn ONCE, after the group's label,
+     * which names the reason for a screen reader and as its title; the rows
+     * stay links, in the quiet ink, without a key each, so a reader who holds
+     * none of a column's access meets one mark per group rather than a wall of
+     * keys. A row still says its own reason (its `locked`) as its title and
+     * after its name. Only for a NAMED group: a run with no label has no
+     * heading to carry the key, so its rows keep theirs.
+     */
+    locked?: string | undefined;
     className?: string | undefined;
     children?: ReactNode;
 }
@@ -79,6 +90,11 @@ export interface NavLinkProps {
     href?: string | undefined;
     'aria-current'?: 'page' | undefined;
     onClick?: MouseEventHandler<HTMLElement> | undefined;
+    /** The row's hint, as the pointer's title. */
+    title?: string | undefined;
+    /** The row's `onPrefetch`, on the pointer reaching it and on focus. */
+    onPointerEnter?: (() => void) | undefined;
+    onFocus?: (() => void) | undefined;
 }
 /**
  * A figure at the end of a row, and what it counts.
@@ -145,6 +161,23 @@ export interface NavItemProps {
      * read after its name.
      */
     disabledReason?: string | undefined;
+    /**
+     * Closed to this reader, and why, as a sentence: "Needs Admin access". The
+     * row stays and stays a link (a place that vanished is one the reader
+     * cannot ask for); its words carry the key after them, the pointer's title
+     * says why, and a screen reader hears the reason after the name. See
+     * `LockedLabel`. Unlike `disabledReason`, the destination is reachable: it
+     * is the page that says the reader may not read it.
+     */
+    locked?: string | undefined;
+    /** The row's hint, as the pointer's title: what the destination answers. */
+    title?: string | undefined;
+    /**
+     * Called when the pointer reaches the row and when it takes focus: the
+     * reader deciding, which is the moment to start fetching where it leads,
+     * so the destination is usually in by the time the press lands.
+     */
+    onPrefetch?: (() => void) | undefined;
     /** Draws the row's element, for a router that owns navigation. */
     renderLink?: ((props: NavLinkProps) => ReactNode) | undefined;
     onClick?: MouseEventHandler<HTMLElement> | undefined;
@@ -172,6 +205,6 @@ export declare namespace SidebarNav {
  * `<div>` here still carries the label's own padding, which put sixteen blank
  * pixels at the top of the rail and named a group nothing could read.
  */
-export declare function NavGroup({ label, action, className, children }: NavGroupProps): import("react").JSX.Element;
+export declare function NavGroup({ label, action, locked, className, children }: NavGroupProps): import("react").JSX.Element;
 /** One row: a glyph, a label, an optional badge, and optionally rows beneath. */
-export declare function NavItem({ label, icon, lead, count, badge, href, current, disabledReason, renderLink, onClick, children, expanded, defaultExpanded, onExpandedChange, expandLabel, className, }: NavItemProps): import("react").JSX.Element;
+export declare function NavItem({ label, icon, lead, count, badge, href, current, disabledReason, locked, title, onPrefetch, renderLink, onClick, children, expanded, defaultExpanded, onExpandedChange, expandLabel, className, }: NavItemProps): import("react").JSX.Element;

package/dist/SidebarNav/index.js

@@ -1,4 +1,5 @@
-export { NavGroup, NavItem, SidebarNav } from '../chunk-W7PAIVAP.js';
+export { NavGroup, NavItem, SidebarNav } from '../chunk-E7QLG3PG.js';
+import '../chunk-OHGH7O6T.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{SidebarNav-7SGUZYKK.css → SidebarNav-YI74SPDC.css}

@@ -426,3 +426,13 @@
     transition: none;
   }
 }
+
+/*
+ * A GROUP THE READER HOLDS NONE OF: the key once, after its label (see
+ * `NavGroup`'s `locked`), and its resting rows in the quiet ink, so a closed
+ * column reads as closed at a glance without a key on every row. A pointed
+ * row and the reader's own still lift to the primary step, as every row does.
+ */
+.crewlet-nav-group--locked .crewlet-nav-item__row:not([aria-current]):not(:hover) {
+  color: var(--color-text-tertiary);
+}

package/dist/StatCard/index.js

@@ -1,3 +1,3 @@
-export { StatCard } from '../chunk-XO7PUL4F.js';
+export { StatCard } from '../chunk-YPTTSJPM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{StatCard-4T7TMWMN.css → StatCard-HAA3F5GX.css}

@@ -186,6 +186,12 @@
  * tiles where only some carry one still stands at one height: its leading is
  * set here and the reserve is exactly one line of it, where a reserve in `em`
  * was a line shorter than the one a sub actually draws.
+ *
+ * IT WRAPS, balanced, rather than ending in an ellipsis. The line qualifies
+ * the number, so its end is the half that says what the number means, and
+ * `nowrap` cut it: "6 seats idle and waiting for ..." on a phone, a caption
+ * mid-clause at 1440. A grid of tiles (a StatGroup, or a caller's own) gives
+ * every tile in a row one height, so a second line costs no alignment.
  */
 .crewlet-statcard__sub {
   min-height: calc(1em * var(--font-line-height-body));
@@ -194,9 +200,8 @@
   /* The quiet step, with the label. The line qualifies the number rather than
      being a second one. */
   color: var(--color-text-tertiary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  text-wrap: balance;
 }
 
 /*

package/dist/StatGroup/index.js

@@ -1,2 +1,2 @@
-export { StatGroup } from '../chunk-BT5H2THK.js';
+export { StatGroup } from '../chunk-OUD75UB2.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{StatGroup-DOFHX5QJ.css → StatGroup-ZMW7VQWP.css}

@@ -75,6 +75,33 @@
   border-radius: var(--radius-none);
 }
 
+/*
+ * A ROW OF TILES SHARES ITS LINES. A tile stacks its label, its number and its
+ * sub in a column of its own, so a label that wrapped pushed its own number
+ * down and no other: beside a node's peek at 1440, "Behind on config" broke
+ * over two lines and its figure sat 18px below the other three. Inside a row
+ * each tile is a SUBGRID over the row's lines, one per line the tile renders
+ * (StatCard always renders three, an absent sub included), so a line is as
+ * tall as the tallest of it across the row and every figure starts together.
+ *
+ * A LABEL SITS ON ITS NUMBER: where one label in the row takes two lines, the
+ * others end at the foot of the label row, one gap above their figure, rather
+ * than floating at its top a line away from what they name.
+ *
+ * These were the engine dashboard's own rules over this component, held there
+ * with a note that the kit should carry them; they are the kit's now, with the
+ * sub's wrap (see StatCard), which the engine applied to every tile.
+ */
+.crewlet-stat-group > .crewlet-statcard {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 3;
+}
+
+.crewlet-stat-group > .crewlet-statcard > .crewlet-statcard__label {
+  align-self: end;
+}
+
 /*
  * Each tile spans its share of the twelve tracks: the row's `columns`, set on
  * it as `--crewlet-stat-group-cols`, a row.

package/dist/Switcher/index.js

@@ -1,5 +1,5 @@
-export { Switcher } from '../chunk-6NNY5WBF.js';
-import '../chunk-SVGARBDY.js';
+export { Switcher } from '../chunk-JKAGN4V4.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-FYTIJM2T.js';