@crewlethq/ui 0.4.3 → 0.5.0

package/dist/StatCard/StatCard.d.ts

@@ -13,15 +13,54 @@ import type { HTMLAttributes, ReactNode } from 'react';
  * number is never that.
  */
 export type StatCardTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+/**
+ * Whether a change is the one the reader wanted.
+ *
+ * NOT the direction. The sign in the value already says which way the number
+ * moved, and whether up is good is a property of what is counted rather than
+ * of the arithmetic: twelve percent more work completed is good news and
+ * twelve percent more tokens spent may not be. So the caller, who knows what
+ * the tile counts, says which it is, and `neutral` is a change that is neither
+ * (four more tasks in progress is not a verdict, it is a fact).
+ */
+export type StatCardDeltaPolarity = 'good' | 'bad' | 'neutral';
+/** A change against an earlier reading, drawn at the head of the second line. */
+export interface StatCardDelta {
+    /** The change, already formatted by the caller and carrying its own sign: "+12%", "−3", "+4". */
+    value: ReactNode;
+    /** Whether it is the change the reader wanted. See the type. */
+    polarity: StatCardDeltaPolarity;
+}
 export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
-    /** What is being counted, for example "Total tokens". */
+    /** What is being counted, in sentence case: "Tasks in progress". */
     label: ReactNode;
     /** The headline value, already formatted by the caller. */
     value: ReactNode;
-    /** A unit after the value, at a quieter weight: "ms", "/ 20K", "per turn". */
+    /** A unit after the value, at a quieter weight: "ms", "/ 7", "per turn". */
     unit?: ReactNode;
-    /** A second line under the label: "3 working, 4 idle". Its line is reserved either way. */
+    /** The second line: "vs last week · 2 blocked". Its line is reserved either way. */
     sub?: ReactNode;
+    /**
+     * The STATE the second line reports, when it reports one: "Oldest waiting
+     * 2h 10m" is a person being kept waiting, so it is `warning`. Paints the
+     * line in that tone's ink, the step measured as text on every rung. The
+     * same rule as `tone`: most second lines are a fact, not a state, and stay
+     * in the quiet ink. A `delta` keeps the ink of its own polarity.
+     */
+    subTone?: StatCardTone;
+    /**
+     * A change against an earlier reading, drawn first on the second line in
+     * the ink of its polarity, with `sub` after it: "+12% vs previous 7 days".
+     */
+    delta?: StatCardDelta | undefined;
+    /**
+     * A small figure at the end of the value's line, such as a `Sparkline`, a
+     * `Meter` or a `SegmentedMeter`, or a small control that acts on the
+     * number. A figure fills the slot's width and a control keeps its own. The
+     * slot is `--crewlet-statcard-trend-width` wide, 96px unless a stylesheet
+     * says otherwise.
+     */
+    trend?: ReactNode;
     /** A glyph before the label. A component, not a name. */
     icon?: ReactNode;
     /** Colours the VALUE's ink. See the type for when that is right. */
@@ -39,18 +78,26 @@ export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * One number, with what it counts.
  *
- * THE LABEL SITS ABOVE THE VALUE, in the micro-caps register, which is the
- * engine's order and the one a board is actually read in: the labels are what
- * a reader scans to find the tile they want, and the number is the answer
- * underneath it. It is also the order a screen reader reads correctly, "live
- * nodes, four, holding an unexpired lease" rather than "four, live nodes".
- * The numbers still sit on one line across the row, because the label register
- * is one line at every tile and the value box is a fixed step.
+ * THE LABEL SITS ABOVE THE VALUE, in sentence case at the caption step, which
+ * is the approved design's tile and the order a board is actually read in:
+ * the labels are what a reader scans to find the tile they want, and the
+ * number is the answer underneath it. It is also the order a screen reader
+ * reads correctly, "tasks in progress, 18, +4 vs last week" rather than "18,
+ * tasks in progress". The label is set as it is written: the uppercased,
+ * tracked-open register is a table's column head, and five of them over five
+ * numbers shouted a heading at every tile.
+ *
+ * THE VALUE IS THE SCREEN'S ONE DISPLAY NUMBER, at `--font-size-display` with
+ * tabular figures, so a number that ticks up moves nothing beside it. A
+ * figure showing where it has been going sits at the END of the same line
+ * (`trend`), and a change against an earlier reading heads the line under it
+ * (`delta`), in the ink of whether it was the change the reader wanted.
  *
  * WHILE IT IS LOADING IT SAYS SO. It used to draw a literal `--`, which a
  * screen reader reads aloud as "dash dash" and which looks exactly like a
  * measured value of nothing. A placeholder line plus `aria-busy` on the tile
  * says the number has not arrived, which is a different fact from the number
- * being zero.
+ * being zero. The trend and the delta wait with it: both are readings of the
+ * number that has not arrived.
  */
-export declare const StatCard: ({ label, value, unit, sub, icon, tone, loading, loadingLabel, flush, className, ...rest }: StatCardProps) => import("react").JSX.Element;
+export declare const StatCard: ({ label, value, unit, sub, subTone, delta, trend, icon, tone, loading, loadingLabel, flush, className, ...rest }: StatCardProps) => import("react").JSX.Element;

package/dist/StatCard/index.d.ts

@@ -1,3 +1,3 @@
 import './StatCard.css';
 export { StatCard } from './StatCard.js';
-export type { StatCardProps, StatCardTone } from './StatCard.js';
+export type { StatCardDelta, StatCardDeltaPolarity, StatCardProps, StatCardTone } from './StatCard.js';

package/dist/StatCard/index.js

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

package/dist/StatCard-KPAFD4E2.css

@@ -0,0 +1,204 @@
+/*
+ * The stat tile.
+ *
+ * THE TONE PAINTS THE VALUE, which is what the props always said and what the
+ * stylesheet never did: 0.2.0 tinted the ICON, so a caller who passed a tone
+ * and no icon got a tile identical to a neutral one. Ink only, and never a
+ * fill: a tinted block behind a 28px number reads as a button.
+ */
+
+.crewlet-statcard {
+  /*
+   * The width of the figure at the end of the value's line. 96px is the
+   * approved design's sparkline, and its meters and state bars stand within
+   * four pixels of it: wide enough that a fortnight of points reads as a
+   * shape, narrow enough that five tiles in a row still leave the number its
+   * room.
+   */
+  --crewlet-statcard-trend-width: 96px;
+
+  display: flex;
+  flex-direction: column;
+  /* The design's 10px between the three lines, and its 16px inset with 14px
+     under the last line: half a scale step each, derived from the steps so
+     they follow the density with everything else. */
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  padding: var(--spacing-4) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-1) / 2);
+  /*
+   * The card recipe: the card's surface, its hairline and its 12px corner,
+   * FLAT, as every card is, so a lone tile is the same object as the panel
+   * beside it rather than a raised cousin of it.
+   */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  min-width: 0;
+}
+
+/* Inside a StatGroup the row is one card and the tiles are its columns, so a
+   tile brings no surface of its own. */
+.crewlet-statcard--flush {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+}
+
+/*
+ * The label: SENTENCE CASE at the caption step, as the design sets it and as
+ * the caller wrote it. The uppercased, tracked-open micro-caps it used to wear
+ * are a table's column head: five of them over five numbers put a heading on
+ * every tile, and uppercasing is a transform a caller's own words should not
+ * have to survive.
+ */
+.crewlet-statcard__label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--font-letter-spacing-normal);
+  color: var(--color-text-tertiary);
+  min-width: 0;
+}
+
+.crewlet-statcard__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+/*
+ * The value's line: the number at its start, the figure at its end, both on
+ * the line's FOOT, so a 28px number and a 28px sparkline share a baseline
+ * rather than centring on each other.
+ */
+.crewlet-statcard__reading {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  min-width: 0;
+}
+
+/*
+ * THE SCREEN'S ONE DISPLAY NUMBER. The display step, semibold, on the tight
+ * track, with tabular figures so a number that ticks up moves nothing beside
+ * it.
+ *
+ * ITS LINE IS THE GLYPH'S OWN HEIGHT (a leading of 1). The value is one line
+ * that never wraps, and any leading over it is air under the digits that
+ * opens between the number and the line below it and stands the number
+ * higher than the figure it shares a foot with.
+ *
+ * A BLOCK, NOT A FLEX ROW, because it is one line of text that has to END
+ * rather than stop: `text-overflow` acts on a block container only, and as a
+ * flex row the number and its unit were anonymous flex items no rule could
+ * reach, so a value too long for its tile was cut mid-digit with nothing to
+ * say a digit was lost. The unit sits on the same line as inline text, on
+ * the number's baseline.
+ */
+.crewlet-statcard__value {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--font-size-display);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The unit, "/ 7" after the 4: the quiet ink at a text step, medium, so it
+   reads as part of the figure rather than as a second one. */
+.crewlet-statcard__unit {
+  margin-inline-start: var(--spacing-1);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-normal);
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * The figure at the end of the line. A figure (a sparkline, a meter, a state
+ * bar) FILLS the slot, because none of them has a width of its own to offer.
+ * A control keeps its own and stands at the slot's end: "Review" is a small
+ * button beside the number it acts on, not a bar the width of a sparkline.
+ */
+.crewlet-statcard__trend {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  flex: none;
+  width: var(--crewlet-statcard-trend-width);
+  min-width: 0;
+}
+
+.crewlet-statcard__trend > :where(button, a) {
+  align-self: flex-end;
+}
+
+/*
+ * The placeholder is a line, not a pair of dashes. `--` is read aloud as
+ * "dash dash" and looks exactly like a measured value of nothing; the tile
+ * carries aria-busy instead, and the line says the number is on its way.
+ */
+.crewlet-statcard__placeholder {
+  display: inline-block;
+  width: 3ch;
+  height: 0.7em;
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-inset);
+}
+
+/*
+ * The second line keeps its space whether or not there is one, so a row of
+ * 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.
+ */
+.crewlet-statcard__sub {
+  min-height: calc(1em * var(--font-line-height-body));
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-body);
+  /* 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;
+}
+
+/*
+ * A CHANGE IS COLOURED BY WHETHER IT WAS WANTED, not by its direction: the
+ * sign already says which way the number moved. Good news takes the success
+ * ink and bad news the danger ink, the steps measured as TEXT on every rung;
+ * a change that is neither takes the secondary ink, a step up from the words
+ * after it, so the figure still leads the sentence.
+ */
+.crewlet-statcard__delta {
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-statcard__delta--good { color: var(--color-feedback-success-ink); }
+.crewlet-statcard__delta--bad { color: var(--color-feedback-danger-ink); }
+.crewlet-statcard__delta--neutral { color: var(--color-text-secondary); }
+
+/*
+ * A SECOND LINE THAT REPORTS A STATE takes that state's ink ("Oldest waiting
+ * 2h 10m" is a person kept waiting: warning), the step measured as text on
+ * every rung, as the value's tone does. The delta inside the line keeps its
+ * own ink, which is a class on the delta and outranks this one on the line.
+ */
+.crewlet-statcard__sub--success { color: var(--color-feedback-success-ink); }
+.crewlet-statcard__sub--warning { color: var(--color-feedback-warning-ink); }
+.crewlet-statcard__sub--danger { color: var(--color-feedback-danger-ink); }
+.crewlet-statcard__sub--info { color: var(--color-feedback-info-ink); }
+
+.crewlet-statcard--success .crewlet-statcard__value { color: var(--color-feedback-success-ink); }
+.crewlet-statcard--warning .crewlet-statcard__value { color: var(--color-feedback-warning-ink); }
+.crewlet-statcard--danger .crewlet-statcard__value { color: var(--color-feedback-danger-ink); }
+.crewlet-statcard--info .crewlet-statcard__value { color: var(--color-feedback-info-ink); }

package/dist/StatGroup/index.js

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

package/dist/{StatGroup-TGB6AEKM.css → StatGroup-HVG6O62W.css}

@@ -10,14 +10,13 @@
 .crewlet-stat-group {
   display: grid;
   grid-template-columns: repeat(var(--crewlet-stat-group-cols, 4), minmax(0, 1fr));
-  /* The flush-panel recipe: the surface, the hairline, the 12px corner and
-     `overflow: hidden`, which is what lets the tiles inside sit against the
-     corners without their own hairlines escaping past them. The engine puts
-     its stat row inside exactly this. */
+  /* The flush-panel recipe: the card's surface, its hairline and its 12px
+     corner, flat as every card is, and `overflow: hidden`, which is what lets
+     the tiles inside sit against the corners without their own hairlines
+     escaping past them. */
   background: var(--color-surface-subtle);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xs), var(--shadow-hairline);
   overflow: hidden;
 }
 
@@ -38,7 +37,6 @@
   background: transparent;
   border: 0;
   border-radius: var(--radius-none);
-  box-shadow: none;
 }
 
 /*
@@ -57,13 +55,14 @@
 
 /*
  * Two columns under the shell breakpoint, which is where the engine drops its
- * own stat row: 900px is a 280px rail plus a 620px content column, so it is
- * the width at which a four-up row of numbers stops having a column each. The
+ * own stat row, and strictly under it, as the shell switches. The step is
+ * 1024px, a 236px rail, the 8px inset and a 780px floor for the sheet, and it
+ * is the width at which the shell stops holding the page beside the rail. The
  * rules are written for the general case rather than per column count: the
  * first tile of each pair loses its left hairline, and everything on the
  * second row and below gains a top one.
  */
-@media (max-width: 900px) {
+@media (width < 1024px) {
   .crewlet-stat-group {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }

package/dist/StatusDot/StatusDot.d.ts

@@ -1,12 +1,30 @@
-import type { PhaseTone, Tone } from '../utils/tone.js';
+import type { ReactNode } from 'react';
+import type { Tone } from '../utils/tone.js';
 export interface StatusDotProps {
-    /** Which state, or which phase. Neutral says "nothing in particular". */
-    tone?: Tone | PhaseTone | undefined;
     /**
-     * A slow pulse, for a state that is still happening. Held still under a
-     * reduced-motion preference, where the mark still reads as its tone.
+     * Which state. Neutral says "nothing in particular", and it is also the dot
+     * beside a category's word, such as a phase's: a category has no hue.
+     */
+    tone?: Tone | undefined;
+    /**
+     * A halo that breathes out round the dot and back, in the tone's soft step,
+     * for a state that is still happening: the approved design pulses the
+     * `info` dot, which is working. One round is `--motion-duration-breath`. The
+     * dot itself never fades, and the halo never touches it: it is cast from a
+     * ring 2px out, so the dot always stands on the surface its fill clears 3:1
+     * against. Held still under a reduced-motion preference, where the dot rests
+     * at its fill with no halo and the word beside it still says the work is
+     * under way. The ring is drawn on the dot's `::after`, and a `position` of
+     * your own on the dot still wins over the one the ring needs.
      */
     pulse?: boolean | undefined;
+    /**
+     * The word the dot belongs to: "Reviewing !231". Given one, the dot and the
+     * word are drawn as one line, `.crewlet-status`, with the room between them
+     * the kit decides rather than the caller (see the stylesheet), and
+     * `className` goes on that line. The word is read; the dot still is not.
+     */
+    children?: ReactNode;
     className?: string | undefined;
 }
 /**
@@ -22,4 +40,4 @@ export interface StatusDotProps {
  * it can sit on, because a mark is read the way a glyph is rather than the way
  * text is.
  */
-export declare function StatusDot({ tone, pulse, className }: StatusDotProps): import("react").JSX.Element;
+export declare function StatusDot({ tone, pulse, children, className }: StatusDotProps): import("react").JSX.Element;

package/dist/StatusDot/index.js

@@ -1,2 +1,2 @@
-export { StatusDot } from '../chunk-PZSWF74H.js';
+export { StatusDot } from '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/StatusDot-7OMCQCZF.css

@@ -0,0 +1,186 @@
+/*
+ * The status dot: a 7px mark in its tone's fill, beside the word it belongs
+ * to. See the component doc for why it is hidden from assistive technology.
+ *
+ * 7px is the approved design's dot. The size is written out rather than
+ * taken from a scale because it is the measure of one mark, not a step
+ * anything else shares, and it is fixed at every density: a mark read the
+ * way a glyph is does not shrink with the gaps around it.
+ *
+ * TWO VALUES PER TONE: the fill the dot is painted in, and the HALO a pulsing
+ * dot breathes out in, which is the same tone's soft step. The halo is held to
+ * being SEEN rather than to a contrast ratio: it never touches the dot (see the
+ * pulse below), so the dot clears 3:1 against the surface it stands on at every
+ * point of the round, and the word beside it says the state. The halo only has
+ * to stand off its ground by the dE 3 the palette suite holds every "can a
+ * reader notice it" difference to. Every soft step does, by 4.48 at the least.
+ */
+
+.crewlet-status-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-circle);
+  /*
+   * The quiet state is still a mark, so it takes the tertiary step rather than
+   * the decoration one the engine spends here: a 7px dot has to clear 3:1 to
+   * be seen at all, and --color-text-muted measures 2.33:1 on a light page and
+   * 2.25:1 on a dark one at their worst grounds. The tertiary step measures
+   * 4.87:1 and 4.65:1 on the same pair, and is the nearest step that holds.
+   */
+  background: var(--color-text-tertiary);
+  /*
+   * The neutral family has no soft step, because it has no hue to tint with,
+   * so its halo is a translucent overlay. Pressed is the one that reads like
+   * the tones' halos: it stands dE 6.09 off its faintest ground (the light
+   * frame) and 8.84 in dark, inside the 4.48 to 8.50 the soft steps span. The
+   * hover overlay stands 3.03, on the floor, and the inset well 1.79, under it.
+   */
+  --crewlet-status-dot-halo: var(--color-surface-pressed);
+  flex: none;
+}
+
+.crewlet-status-dot--info {
+  background: var(--color-feedback-info);
+  --crewlet-status-dot-halo: var(--color-feedback-info-soft);
+}
+
+.crewlet-status-dot--success {
+  background: var(--color-feedback-success);
+  --crewlet-status-dot-halo: var(--color-feedback-success-soft);
+}
+
+.crewlet-status-dot--warning {
+  background: var(--color-feedback-warning);
+  --crewlet-status-dot-halo: var(--color-feedback-warning-soft);
+}
+
+.crewlet-status-dot--danger {
+  background: var(--color-feedback-danger);
+  --crewlet-status-dot-halo: var(--color-feedback-danger-soft);
+}
+
+.crewlet-status-dot--brand {
+  background: var(--color-brand-accent);
+  --crewlet-status-dot-halo: var(--color-brand-accent-soft);
+}
+
+/*
+ * STILL HAPPENING: a halo breathes out round the dot and back in, the approved
+ * design's working pulse. Five things are deliberate.
+ *
+ * THE DOT NEVER FADES. The halo is a box-shadow and it is the only property
+ * the keyframes touch, so the fill stays at the step measured to 3:1 through
+ * the whole round. The pulse this replaced faded the dot itself to 0.35, and
+ * at the bottom of that fade every fill measured 1.35:1 to 2.17:1 against the
+ * surfaces it sits on: for part of every round, a mark under its own floor.
+ *
+ * NOR DOES THE HALO TOUCH IT. The design casts the halo from the dot itself,
+ * and a spread shadow starts at the edge of the box that casts it, so for the
+ * whole round the dot's ground would be its own soft step on the surface
+ * rather than the surface. On that ground the light info, success and warning
+ * fills measure 2.65:1 to 2.95:1 (warning and success on the frame, where they
+ * clear 3.00:1 and 3.01:1 bare): the same fault as the fade, smaller. So the
+ * halo is cast by a RING BOX 2px outside the dot, the offset the Avatar state
+ * ring and the outer focus ring stand at, and an outer shadow is never painted
+ * inside the box that casts it: a band of the real ground always stands
+ * between the dot and its halo, so the dot always stands on the surface its
+ * fill was measured against. The fill does not move. Nothing in this kit
+ * holds a mark to its own soft step, which is also why a Tag draws its dot in
+ * its ink.
+ *
+ * A SHADOW ON A PSEUDO-ELEMENT, not an outline at the same offset, because an
+ * outline's width is snapped to whole device pixels, as a border's is: at 1x
+ * a width breathing to 3px is drawn 1px and then 2px and reaches 3px for an
+ * instant, a flicker between two rings rather than a breath, where a spread
+ * shadow grows smoothly. The ring box is absolutely positioned, so it takes
+ * no room, and the pulsing dot is its containing block through a rule written
+ * in :where(), which weighs nothing, so a position of your own on the dot
+ * still wins, and any position but static keeps the ring on it.
+ *
+ * IT REACHES THE DESIGN'S 5PX, 2 of ground and 3 of halo, painted outside
+ * every box, so it moves nothing beside the dot. Like the 7px it surrounds,
+ * it is the measure of this one mark and is fixed at every density.
+ *
+ * ONE ROUND IS --motion-duration-breath, which is a PERIOD rather than a
+ * transition: out by the half, back by the end, and no `alternate`, which
+ * would play each half as a whole duration and take twice as long. That is
+ * 0.45 rounds a second, far under the three flashes a second that are a
+ * seizure risk, and the in-out ease makes both ends a rest. The halo is read
+ * through the custom property each tone sets above, which the ring box
+ * inherits, so whichever tone pulses breathes in its own soft step.
+ */
+:where(.crewlet-status-dot.is-pulsing) {
+  position: relative;
+}
+
+.crewlet-status-dot.is-pulsing::after {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: var(--radius-circle);
+  /* Paint, never a target: the box reaches 2px past the dot. */
+  pointer-events: none;
+  animation: crewlet-status-dot-pulse var(--motion-duration-breath) var(--motion-easing-in-out) infinite;
+}
+
+/*
+ * The spread moves and nothing else: the rests and the peak are one shadow in
+ * one colour, so the only thing that interpolates is how far it reaches.
+ */
+@keyframes crewlet-status-dot-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 var(--crewlet-status-dot-halo);
+  }
+
+  50% {
+    box-shadow: 0 0 0 3px var(--crewlet-status-dot-halo);
+  }
+}
+
+/*
+ * A DOT WITH ITS WORD: one line, the dot and then the word, the way every
+ * dot in this kit is meant to be read.
+ *
+ * THE GAP CLEARS THE HALO. A pulsing dot's halo reaches 5px past its edge, 2
+ * of ground and 3 of halo, painted outside every box, so it takes no room and
+ * a gap narrower than that puts the halo on the first letter at every peak:
+ * at the 4px an ordinary mark stands off its word, it struck the R of
+ * "Reviewing". 7px is that reach and 2px of ground on the far side of it, the
+ * same band that stands between the dot and its halo, so at the peak the word
+ * stands off the halo exactly as the halo stands off the dot. It is written in
+ * pixels, not a spacing step, because what it clears is fixed at every
+ * density like the dot and the halo themselves, and it is the same for EVERY
+ * tone, pulsing or not, so a column of statuses starts its words on one line
+ * whichever of them is breathing.
+ */
+.crewlet-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* A status is one line, and the word is what gives way: the dot never does. */
+.crewlet-status__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * HELD, not slowed: a mark that loops for as long as the work runs is exactly
+ * what the setting is for. The stop names the selector that starts the pulse
+ * and comes after it, so it wins on source order at the same specificity,
+ * which is the pairing the package's literal check holds every stylesheet to.
+ * The dot rests at its own fill with no halo, and the word beside it still
+ * says the work is under way.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-status-dot.is-pulsing::after {
+    animation: none;
+  }
+}