@crewlethq/ui 0.4.4 → 0.5.1

package/dist/Stepper-HW4JM3YH.css

@@ -0,0 +1,176 @@
+/*
+ * The stepper: where a sequence has got to (Stepper.tsx).
+ *
+ * THE APPROVED DESIGN'S STEP ROW. Each step is a 20px pill inside the default
+ * hairline, the 11px step at the medium weight, 8px inside each end and 5px
+ * between a mark and the word; two pills are joined by a 10px rule in the
+ * strong hairline's colour with 6px either side of it. A finished step is the
+ * secondary ink behind a check, the current step its tone's soft tint under
+ * its ink behind its dot, and a step still to come the tertiary ink.
+ *
+ * EVERY INK IS A MEASURED PAIR. The secondary and tertiary steps are held to
+ * 4.5:1 on every opaque rung, and each tone's ink to 4.5:1 on its own soft
+ * tint over every rung, by the palette suite in @crewlethq/tokens; the pill
+ * draws nothing else. The current pill is the design's `work-soft` under
+ * `work-ink` in the default tone, and a Tag's colours in every tone, which is
+ * what a chip naming a state is in this kit.
+ */
+
+.crewlet-stepper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  /* The design's 6px between a pill and the rule beside it: a step and a half. */
+  gap: calc(var(--spacing-1) * 1.5);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-stepper__step {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) * 1.5);
+  min-width: 0;
+}
+
+/*
+ * THE RULE BETWEEN TWO STEPS is drawn by the second of them, so a sequence of
+ * one draws none and nothing trails the last. A pseudo-element, because it is
+ * furniture: it carries nothing a reader has to be told, and the list already
+ * says the steps are in order. 10px by a hairline, the measure of this one
+ * mark, and fixed at every density as a hairline is.
+ */
+.crewlet-stepper__step + .crewlet-stepper__step::before {
+  content: '';
+  flex: none;
+  width: 10px;
+  height: 1px;
+  background: var(--color-border-strong);
+}
+
+.crewlet-stepper__chip {
+  display: inline-flex;
+  align-items: center;
+  /* The design's 5px between the check or the dot and the word. */
+  gap: calc(var(--spacing-1) * 1.25);
+  box-sizing: border-box;
+  /* The design's 20px pill, which follows the density with every other step
+     height in the kit. It labels and takes no press, so the 24px target floor
+     is not its to clear. */
+  height: calc(20px * var(--density, 1));
+  max-width: 100%;
+  padding: 0 var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.crewlet-stepper__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.crewlet-stepper__check {
+  flex: none;
+}
+
+.crewlet-stepper__step--done > .crewlet-stepper__chip {
+  color: var(--color-text-secondary);
+}
+
+/*
+ * THE CURRENT STEP, in its tone. The hairline goes transparent rather than
+ * away, so the pill keeps its box and the row does not move by a pixel as the
+ * current step advances along it, and so forced-colors mode, which draws a
+ * transparent border in the system's own colour, still outlines it.
+ */
+.crewlet-stepper--info .crewlet-stepper__step--current > .crewlet-stepper__chip {
+  border-color: transparent;
+  background: var(--color-feedback-info-soft);
+  color: var(--color-feedback-info-ink);
+}
+
+.crewlet-stepper--success .crewlet-stepper__step--current > .crewlet-stepper__chip {
+  border-color: transparent;
+  background: var(--color-feedback-success-soft);
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-stepper--warning .crewlet-stepper__step--current > .crewlet-stepper__chip {
+  border-color: transparent;
+  background: var(--color-feedback-warning-soft);
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-stepper--danger .crewlet-stepper__step--current > .crewlet-stepper__chip {
+  border-color: transparent;
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-stepper--brand .crewlet-stepper__step--current > .crewlet-stepper__chip {
+  border-color: transparent;
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+/*
+ * INSIDE THE PILL THE DOT IS THE PILL'S OWN INK, as a Tag's is, and for the
+ * Tag's reason: StatusDot paints the fill step, measured as a mark on the
+ * opaque rungs, and here it stands on the tone's soft tint instead, where
+ * nothing measures it. The ink is the step that IS measured on that tint, at
+ * 4.5:1, and the colour of the word beside it. A pulsing dot keeps
+ * StatusDot's halo, the same soft step drawn once more over the pill, which
+ * stands dE 3.92 off it at the least (the light warning pill on the frame).
+ *
+ * Two classes deep, so it beats StatusDot's own tone rule whichever order the
+ * bundle writes the two files in.
+ */
+.crewlet-stepper .crewlet-stepper__dot {
+  background: currentColor;
+}
+
+/*
+ * FORCED COLORS repaints every background to Canvas, which takes the current
+ * step's tint and its dot, so the one step the row is about would read like
+ * any other. The current pill is drawn as the system draws a selection,
+ * HighlightText on Highlight, with its dot in the same ink, and the rule
+ * between two steps in GrayText; the chips' hairlines are borders, which the
+ * mode keeps in its own colour.
+ *
+ * THE CURRENT PILL OPTS OUT OF THE ADJUSTMENT, which is safe only because
+ * every colour it draws in that mode is a system colour. Left to it, Chromium
+ * paints a Canvas backplate behind every run of text, and HighlightText is
+ * written for Highlight, not for Canvas: in a dark high-contrast theme the
+ * step's words drew black on black (measured in Chromium 153 with the mode
+ * emulated). Opting out also keeps shadows, so the pulsing dot's halo, which
+ * is the tone's soft tint and no system colour, is held still inside it.
+ */
+@media (forced-colors: active) {
+  .crewlet-stepper .crewlet-stepper__step--current > .crewlet-stepper__chip {
+    forced-color-adjust: none;
+    border-color: Highlight;
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  .crewlet-stepper .crewlet-stepper__dot {
+    background: HighlightText;
+  }
+
+  .crewlet-stepper .crewlet-stepper__dot.is-pulsing::after {
+    animation: none;
+  }
+
+  .crewlet-stepper__step + .crewlet-stepper__step::before {
+    background: GrayText;
+  }
+}

package/dist/Tabs/index.js

@@ -1,4 +1,4 @@
-export { TabPanel, Tabs, tabId } from '../chunk-Q3B66TJM.js';
+export { TabPanel, Tabs, tabId } from '../chunk-QY7UU5ZB.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Tabs-MJ2E3VPK.css → Tabs-XCNPHA7B.css}

@@ -84,21 +84,29 @@
 
 /* ─── Pill (segmented control) ────────────────────────────────── */
 /*
- * A WELL WITH CHIPS IN IT, not a panel with buttons in it. The container is
- * the inset surface and carries no boundary of its own: the chip that is on
- * is what the reader looks for, and it is found by being the one thing lifted
- * off the well rather than by a border around the whole set.
+ * A WELL WITH CHIPS IN IT, not a panel with buttons in it: the approved
+ * design's segmented control. The well is the RAISED rung inside the default
+ * hairline, and the chip that is on is the CARD's own ground, lifted by a
+ * hairline and a small shadow, so it is found by being the one thing that
+ * matches the panel the row sits on.
+ *
+ * A RUNG AND A HAIRLINE, NOT A TRANSLUCENT WELL. The inset overlay it used to
+ * be stands almost nowhere off a card, so the well had no extent and the
+ * chips floated; the raised rung is held a visible step above the card by the
+ * palette suite, and the hairline finds it on any other ground.
  *
  * The inset is 2px, which is smaller than the scale's first step on purpose:
- * it is the gap a chip needs to read as sitting IN the well, and a 4px one
- * makes the row a control step taller than the button beside it.
+ * it is the gap a chip needs to read as sitting IN the well. With the 1px
+ * boundary it is three pixels a side, and a 24px chip makes a 30px row: the
+ * medium control step, the height of the button beside it.
  */
 .crewlet-tabs--pill {
   --crewlet-tabs-pill-inset: 2px;
 
   gap: var(--crewlet-tabs-pill-inset);
   padding: var(--crewlet-tabs-pill-inset);
-  background: var(--color-surface-inset);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
   width: fit-content;
 }
@@ -186,19 +194,22 @@
 
 /*
  * A CHIP STANDS SHORTER THAN THE CONTROL IT SITS BESIDE, and it is the row
- * that has to match: the well adds its inset above and below every chip, so a
- * chip at a full control step makes the whole segmented row taller than the
- * button next to it. Six pixels off the md step and four off the sm one is
- * what the engine's own segmented row has always drawn.
+ * that has to match: the well adds its boundary and its inset above and below
+ * every chip, so a chip at a full control step makes the whole segmented row
+ * taller than the button next to it. Six pixels off the md step is exactly
+ * that boundary and inset, and it leaves the design's 24px chip in a 30px row.
  *
- * AND THE FLOOR IS TAKEN AGAIN AFTER THE SUBTRACTION. --size-control-sm
- * carries a 24px floor of its own, but subtracting from a step subtracts from
- * its floor too: at compact density `calc(var(--size-control-sm) - 4px)` is
- * 20px, under the target a finger can hit. max() against --size-target-min
- * leaves the value exactly 24px at density 1 and reachable at every other.
+ * AND THE FLOOR IS TAKEN AGAIN AFTER THE SUBTRACTION. Subtracting from a step
+ * subtracts from its floor too: at compact density
+ * `calc(var(--size-control-md) - 6px)` is 18.6px, under the target a finger
+ * can hit. max() against --size-target-min holds every density at 24px or
+ * more, and at density 1 the two agree.
  *
- * The corner is one hairline tighter than the well around it rather than a
- * step of its own, which is what reads as a chip sitting IN the well.
+ * The corner is the small radius, the design's: the well's 8px less its 1px
+ * boundary and 2px inset is 5px, and a chip a pixel rounder than that
+ * concentric curve is what reads as a chip sitting IN the well rather than a
+ * second well inside it. The side pad is the design's 10px, two steps and a
+ * half.
  *
  * AND THE CONTENT IS CENTRED IN THE CHIP. It was aligned to the start, for a
  * chip stretched on a grid track, which is a case the pill chrome's own
@@ -212,8 +223,9 @@
  */
 .crewlet-tabs--pill .crewlet-tabs__tab {
   min-height: max(var(--size-target-min), calc(var(--size-control-md) - 6px));
-  padding: 0 var(--spacing-3);
-  border-radius: var(--radius-chip);
+  padding: 0 calc(var(--spacing-2) + var(--spacing-1) / 2);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-secondary);
   font-size: var(--font-size-xs);
 }
 
@@ -221,12 +233,12 @@
  * THE SMALL CHIP IS THE QUIET ONE. It is the register the rail's foot wears,
  * where a theme row and a density row sit beside a status pill and are read
  * past rather than read, so its side pad is the scale's first step rather
- * than its second and its glyph is the step under the label register's.
+ * than two and a half and its glyph is the step under the label register's.
  *
- * The height does not follow: at the reader's default density this chip is
- * already exactly --size-target-min, so a shorter one would be a target a
- * finger misses. The whole reduction comes out of the width, where the pad is
- * spent, and the floor above catches what is left.
+ * The height does not follow: the medium chip is already exactly
+ * --size-target-min at the reader's default density, so a shorter one would be
+ * a target a finger misses. The whole reduction comes out of the width, where
+ * the pad is spent, and the floor catches what the subtraction leaves.
  */
 .crewlet-tabs--pill.crewlet-tabs--sm .crewlet-tabs__tab {
   min-height: max(var(--size-target-min), calc(var(--size-control-sm) - 4px));
@@ -253,9 +265,17 @@
   color: var(--color-text-primary);
 }
 
+/*
+ * The chip that is on: the CARD's ground and the primary ink, lifted by the
+ * default hairline drawn round it and the smallest shadow under it, the
+ * design's chip. The hairline is the half that finds it: on a dark palette a
+ * shadow over a dark well is nearly invisible. Both are one shadow list, and
+ * neither token in it is ever `none`, which would drop the whole list.
+ */
 .crewlet-tabs--pill .crewlet-tabs__tab.is-active {
   background: var(--color-surface-subtle);
-  box-shadow: var(--shadow-xs);
+  color: var(--color-text-primary);
+  box-shadow: var(--shadow-xs), 0 0 0 1px var(--color-border-default);
 }
 
 /*

package/dist/Tag/Tag.d.ts

@@ -1,17 +1,20 @@
 import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';
-import type { PhaseTone, Tone } from '../utils/tone.js';
+import type { Tone } from '../utils/tone.js';
 /**
- * Which vocabulary a tag speaks: a state, or a phase. Both, because the same
- * pill draws "failed" on the Model screen and "execute" on the turn beside it,
- * and a second component for the second vocabulary would be one recipe spelled
- * twice.
+ * What a tag's colour says: a state, the accent, or nothing at all.
+ *
+ * The same pill draws "failed" on the Model screen and "execute" on the turn
+ * beside it, and only the first is a state. The second is a CATEGORY, a phase,
+ * and a category is the neutral tag with its word: a hue per phase was a second
+ * colour vocabulary that said nothing the word did not, spent from the hues the
+ * states are held apart in.
  */
-export type TagVariant = Tone | PhaseTone;
+export type TagVariant = Tone;
 /**
- * How much room the pill takes. The engine draws ONE badge and spends its
- * variation on tone, so these are three heights of that badge rather than
- * three different marks: `sm` is the engine's own geometry and the default,
- * `xs` a denser mark for a packed row, `md` a small control's height for a
+ * How much room the pill takes. The design draws ONE pill and spends its
+ * variation on tone, so these are three heights of that pill rather than
+ * three different marks: `sm` is the design's 22px pill and the default, `xs`
+ * the 18px count pill for a packed row, `md` a small control's height for a
  * toolbar.
  */
 export type TagSize = 'xs' | 'sm' | 'md';
@@ -26,7 +29,7 @@ export type TagSize = 'xs' | 'sm' | 'md';
 export type InteractiveTagSize = Exclude<TagSize, 'xs'>;
 export type TagAppearance = 'soft' | 'outline';
 interface TagLook {
-    /** The state or the phase this tag names. Neutral by default. */
+    /** The state this tag names. Neutral by default, which is what a category such as a phase takes. */
     variant?: TagVariant | undefined;
     /** A tinted fill, or a boundary over the surface beneath. */
     appearance?: TagAppearance | undefined;
@@ -79,7 +82,7 @@ export interface InteractiveTagProps extends TagLook, Omit<HTMLAttributes<HTMLEl
 }
 export type TagProps = StaticTagProps | InteractiveTagProps;
 /**
- * A small pill that names a state, a phase or a value.
+ * A small pill that names a state, a category or a value.
  *
  * COLOUR IS NEVER THE ONLY CARRIER. Every tag renders its label, in every
  * variant, so a reader who cannot separate the warning hue from the danger one
@@ -90,18 +93,22 @@ export type TagProps = StaticTagProps | InteractiveTagProps;
  * under the tone's `ink`, never the solid fill with a label on it: the fill
  * step is measured as a MARK, at 3:1, and putting text on it would put that
  * text under the 4.5:1 it has to clear. 0.2.0 spelled five dark-theme literals
- * here instead, which measured between 1.14:1 and 1.58:1 on a light page.
+ * here instead, which measured between 1.14:1 and 1.58:1 on a light page. The
+ * neutral tag, which names no state, is the raised rung under the secondary
+ * ink, inside the strong hairline: its fill is a surface, and on a raised
+ * ground a borderless one would draw nothing.
  *
- * ITS LINE BOX IS FIXED. The height comes from the size step rather than from
- * the content, so a cell that holds a tag on one row and nothing on the next
- * is the same height on both and a table does not ripple as states arrive.
+ * IT IS A PILL, the approved design's: 22px with round ends at the caption
+ * step. Its line box is fixed. The height comes from the size step rather
+ * than from the content, so a cell that holds a tag on one row and nothing on
+ * the next is the same height on both and a table does not ripple as states
+ * arrive.
  *
- * A TAG THAT ACTS IS FOUR PIXELS TALLER THAN ONE THAT LABELS, and that is the
- * one place this pill departs from the engine's badge. The engine draws its
- * actionable badge at the inert one's 20px, which is a pointer target under
- * the 24px WCAG 2.2 accepts; everything else about the two, the tint, the ink,
- * the radius, the type and the padding, is identical, so a row still reads as
- * one set.
+ * A TAG THAT ACTS IS TWO PIXELS TALLER THAN ONE THAT LABELS, and that is the
+ * one place this pill departs from the design. The design draws its pill at
+ * 22px whatever it does, which is a pointer target under the 24px WCAG 2.2
+ * accepts; everything else about the two, the tint, the ink, the radius, the
+ * type and the padding, is identical, so a row still reads as one set.
  */
 export declare function Tag(props: TagProps): import("react").JSX.Element;
 export {};

package/dist/Tag/index.js

@@ -1,3 +1,3 @@
-export { Tag } from '../chunk-S2XHHEW4.js';
-import '../chunk-PZSWF74H.js';
+export { Tag } from '../chunk-74KMX7YH.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Tag-VNZEYLB6.css → Tag-GBE7LQJP.css}

@@ -1,5 +1,5 @@
 /*
- * The tag: a small pill naming a state, a phase or a value.
+ * The tag: a small pill naming a state, a category or a value.
  *
  * THREE VARIABLES CARRY EVERY VARIANT. A tag is its tone's `soft` tint under
  * its tone's `ink`, with the `line` step as the boundary it grows when it can
@@ -19,39 +19,49 @@
 
 .crewlet-tag {
   /*
-   * THE ENGINE'S BADGE. Its line box is 11px at the document's 1.5 leading
-   * plus a pixel of padding and a pixel of border on each side, which lands on
-   * 20.5px; the step below is the whole pixel that renders, and it scales with
-   * density the way every size token does.
+   * THE APPROVED DESIGN'S PILL: 22px tall with fully round ends, the caption
+   * step at the medium weight, and 9px of room inside each end, which is the
+   * step a rounded end eats before the first letter clears it.
    *
    * The height is a STEP and the floor is separate, because the two answer
-   * different questions. A tag that only labels takes the engine's geometry
-   * exactly. A tag that ACTS is a pointer target, and 20px fails WCAG 2.2, so
-   * it takes the 24px floor as well: the engine draws its actionable badge at
-   * the inert one's height, which is the one place its look and the target
-   * rule disagree. Nothing else about the pill changes, so a row of tags still
-   * reads as one set.
+   * different questions. A tag that only labels takes the design's geometry
+   * exactly. A tag that ACTS is a pointer target, and 22px fails WCAG 2.2, so
+   * it takes the 24px floor as well. Nothing else about the pill changes, so a
+   * row of tags still reads as one set.
+   *
+   * THE NEUTRAL PILL IS THE RAISED RUNG under the secondary ink, the design's
+   * quiet pill: a category, a count, a word that is not a state. Every other
+   * variant below is its tone's soft tint under its ink.
+   *
+   * The boundary at rest is `--crewlet-tag-edge`: transparent for a tinted
+   * pill, whose hue already separates it from any neutral ground, and the
+   * strong border step for the neutral one (see its rule below).
    */
-  --crewlet-tag-height: calc(20px * var(--density, 1));
+  --crewlet-tag-height: calc(22px * var(--density, 1));
   --crewlet-tag-floor: 0px;
-  --crewlet-tag-fill: var(--color-surface-inset);
+  /* The design's 9px inside each round end: two steps and a quarter, so it
+     follows the density with every other gap. The remove control and the
+     press half of a split pill read it too, to reach the pill's own ends. */
+  --crewlet-tag-pad: calc(var(--spacing-2) + var(--spacing-1) / 4);
+  --crewlet-tag-fill: var(--color-surface-elevated);
   --crewlet-tag-ink: var(--color-text-secondary);
   --crewlet-tag-line: var(--color-border-hover);
+  --crewlet-tag-edge: transparent;
 
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-1);
+  /* The design's 6px between a dot or a glyph and the word: a step and a
+     half. */
+  gap: calc(var(--spacing-1) * 1.5);
   height: max(var(--crewlet-tag-height), var(--crewlet-tag-floor));
-  padding: 0 var(--spacing-2);
-  border: 1px solid transparent;
-  border-radius: var(--radius-xs);
+  padding: 0 var(--crewlet-tag-pad);
+  border: 1px solid var(--crewlet-tag-edge);
+  border-radius: var(--radius-pill);
   background: var(--crewlet-tag-fill);
   color: var(--crewlet-tag-ink);
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
-  /* The engine tracks the badge a hundredth of an em open, which is the
-     normal step at this size: a hundredth of 11px is a tenth of a pixel. */
   letter-spacing: var(--font-letter-spacing-normal);
   line-height: 1;
   /* A tag is an atomic token: its label never breaks across lines inside the
@@ -104,53 +114,54 @@
 /* ── sizes ─────────────────────────────────────────────────────────────── */
 
 /*
- * THREE HEIGHTS OF ONE BADGE. The engine draws a single pill and spends its
+ * THREE HEIGHTS OF ONE PILL. The design draws a single pill and spends its
  * variation on tone rather than on size, so the steps here differ by how much
- * room the pill takes and not by what it is: the type, the radius, the weight
- * and the tracking are the engine's at every one of them.
+ * room the pill takes and not by what it is: the radius, the weight and the
+ * tracking are the design's at every one of them.
  *
- * xs is an 18px pill and is NON-INTERACTIVE for that reason: it is under the
- * 24px target floor, and the component refuses a press at this step. It is for
- * a mark inside a dense row, where the label is still the carrier.
+ * xs is the design's 18px count pill, the one a rail row carries, and is
+ * NON-INTERACTIVE for that reason: it is under the 24px target floor, and the
+ * component refuses a press at this step. It is for a mark inside a dense
+ * row, where the label is still the carrier, and it takes the micro step, the
+ * design's 10.5px at the scale's floor.
  *
  * EVERY STEP SCALES WITH DENSITY, which is not decoration: written as a flat
- * 18px, this one stayed put while the badge above it came down to
- * 20 x 0.82 = 16.4px, so the dense mark rendered TALLER than the badge it is
- * meant to sit inside a row of. A step that does not move with the rest of the
- * scale is a step that overtakes one of its neighbours at some density.
+ * 18px, this one stayed put while the pill above it came down with the
+ * density, so the dense mark rendered TALLER than the pill it is meant to sit
+ * inside a row of. A step that does not move with the rest of the scale is a
+ * step that overtakes one of its neighbours at some density.
  */
 .crewlet-tag--xs {
   --crewlet-tag-height: calc(18px * var(--density, 1));
-  padding: 0 var(--spacing-1);
-  gap: 3px;
+  --crewlet-tag-pad: calc(var(--spacing-1) * 1.5);
+  gap: var(--spacing-1);
+  font-size: var(--font-size-2xs);
 }
 
-/* The engine's badge, and the default. */
+/* The design's pill, and the default. */
 .crewlet-tag--sm {
-  --crewlet-tag-height: calc(20px * var(--density, 1));
+  --crewlet-tag-height: calc(22px * var(--density, 1));
 }
 
 /* The md step is a small control's own height, so a tag and a small button in
-   one toolbar sit on the same baseline. One type step up with it: 11px inside
-   a 28px pill reads as a label that lost its box. */
+   one toolbar sit on the same line. */
 .crewlet-tag--md {
   --crewlet-tag-height: var(--size-control-sm);
-  font-size: var(--font-size-xs);
 }
 
 /*
  * A TAG THAT ACTS CLEARS 24px, at every density and every step. Last among the
  * steps so it is the floor whichever one is drawn, and a floor rather than a
- * height so the md step keeps its 28px.
+ * height so the md step keeps its 26px.
  */
 .crewlet-tag--acts {
   --crewlet-tag-floor: max(24px, calc(24px * var(--density, 1)));
 }
 
-/* One step down from the sans, where there is a step to take: a mono face
-   draws larger than the sans at the same size, and a machine value beside a
-   word has to read as the same line. At the two smaller steps the sans is
-   already at the bottom of the scale and the mono stays beside it. */
+/* One step down from the sans: a mono face draws larger than the sans at the
+   same size, and a machine value beside a word has to read as the same line.
+   At xs the sans is already at the bottom of the scale and the mono stays
+   beside it. */
 .crewlet-tag--monospace .crewlet-tag__label {
   font-family: var(--font-family-mono);
   font-size: var(--font-size-2xs);
@@ -188,43 +199,6 @@
   --crewlet-tag-line: var(--color-brand-accent-soft-strong);
 }
 
-/*
- * The phase family has a soft step and no line step, because nothing else in
- * the system needed a phase boundary. The ink is the boundary here: it is the
- * same hue at a strength a 1px rule can be seen at, and a border is not text,
- * so the rule that an ink step is never a BACKGROUND is untouched.
- *
- * A PHASE IS SET IN THE MICRO-LABEL REGISTER, uppercase and tracked open,
- * where a state is set in the badge's own. Phase is the one categorical
- * identity the product spends colour on outside a chart, and it is what a
- * reader follows across four screens; the second register is what separates it
- * at a glance from the state badge sitting beside it on the same row.
- */
-.crewlet-tag--phase-onboarding,
-.crewlet-tag--phase-execute,
-.crewlet-tag--phase-review {
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
-}
-
-.crewlet-tag--phase-onboarding {
-  --crewlet-tag-fill: var(--color-phase-onboarding-soft);
-  --crewlet-tag-ink: var(--color-phase-onboarding-ink);
-  --crewlet-tag-line: var(--color-phase-onboarding-ink);
-}
-
-.crewlet-tag--phase-execute {
-  --crewlet-tag-fill: var(--color-phase-execute-soft);
-  --crewlet-tag-ink: var(--color-phase-execute-ink);
-  --crewlet-tag-line: var(--color-phase-execute-ink);
-}
-
-.crewlet-tag--phase-review {
-  --crewlet-tag-fill: var(--color-phase-review-soft);
-  --crewlet-tag-ink: var(--color-phase-review-ink);
-  --crewlet-tag-line: var(--color-phase-review-ink);
-}
-
 /* ── appearance ────────────────────────────────────────────────────────── */
 
 /*
@@ -237,6 +211,31 @@
   border-color: var(--crewlet-tag-line);
 }
 
+/*
+ * THE NEUTRAL PILL CARRIES A BOUNDARY, because its fill IS a surface. The
+ * raised rung is also the ground of a palette's lead block, a raised card and
+ * the rail's current row, and on any of them a raised pill with a transparent
+ * boundary was the colour of what it stood on: the pill vanished and its words
+ * read as loose text with odd gaps between them.
+ *
+ * THE STRONG STEP, NOT THE DEFAULT ONE. The design's own chip is found by 1px
+ * of its line step (`.chip`), which is the default border here, and that
+ * measured under the hairline dE of 3 on five grounds a pill lands on: 2.76 on
+ * the light frame, 2.86 on a pressed row over a light card, 2.77 and 2.71 on an
+ * inset well inside a raised surface, and 2.08 on a hovered row over the dark
+ * sheet. The strong step is the design's line-2, the boundary it draws round a
+ * key cap (`.kbd`), and it clears 3 on every rung and every overlay in both
+ * themes. The suite measures all of them.
+ *
+ * The hover takes the strong step once more, because the press line a tinted
+ * pill moves to on hover IS the strong step in both themes, and a hover that
+ * lands on the resting boundary draws no hover at all.
+ */
+.crewlet-tag--neutral.crewlet-tag--soft {
+  --crewlet-tag-edge: var(--color-border-strong);
+  --crewlet-tag-line: var(--color-border-strong-hover);
+}
+
 /* The neutral outline is the engine's `.badge.outline`: the hairline step as
    the boundary, and the tertiary ink, which is a quieter register than the
    tinted outlines keep. It is the appearance for a value that is not a state
@@ -295,9 +294,9 @@
   align-self: stretch;
   gap: inherit;
   min-width: 0;
-  padding: 0 var(--spacing-2);
+  padding: 0 var(--crewlet-tag-pad);
   border: 0;
-  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
+  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
   background: transparent;
   /* A button inherits none of these. */
   color: inherit;
@@ -354,10 +353,10 @@
   min-width: 24px;
   margin-block-start: -1px;
   margin-block-end: -1px;
-  margin-right: calc(var(--spacing-2) * -1);
+  margin-right: calc(var(--crewlet-tag-pad) * -1);
   padding: 0 var(--spacing-1);
   border: 0;
-  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
+  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
   background: transparent;
   color: inherit;
   cursor: pointer;