@crewlethq/ui 0.4.3 → 0.5.0

package/dist/Stepper/Stepper.d.ts

@@ -0,0 +1,78 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { Tone } from '../utils/tone.js';
+/**
+ * The state the CURRENT step is in, drawn as its chip's soft tint under its
+ * ink. `info` is the default: work under way, the design's working step. A
+ * run parked on a question is `warning`, one that stopped at this step is
+ * `danger`, and `brand` is where the reader is, for a sequence the reader is
+ * walking themselves.
+ *
+ * NOT `neutral`. The quiet chip is what every step that is not current already
+ * is, so a neutral current step would be told from its neighbours by nothing
+ * but `aria-current`, which nobody sees.
+ */
+export type StepperTone = Exclude<Tone, 'neutral'>;
+/** One step of the sequence. */
+export interface StepperStep {
+    /** What tells two steps apart, unique within the stepper: `execute`, `review`. */
+    id: string;
+    /**
+     * The step's words, and anything the step carries beside them: "Execute ·
+     * round 7 of 25", "Context 0.8s".
+     */
+    label: ReactNode;
+}
+export interface StepperProps extends Omit<HTMLAttributes<HTMLOListElement>, 'children'> {
+    /** Every step, in order. */
+    steps: readonly StepperStep[];
+    /**
+     * The step under way, by its id. Every step before it is done and every
+     * step after it is still to come. `null` once EVERY step is done, which is
+     * how a finished run is drawn: a turn's history in a task's timeline reads
+     * "Execute ✓ — Review ✓" with nothing current.
+     */
+    current: string | null;
+    /**
+     * What the sequence is, for a screen reader: "Turn progress". REQUIRED,
+     * because a list of four short words with nothing to say what they are the
+     * steps OF is a riddle to somebody who cannot see the row it stands in.
+     */
+    label: string;
+    /** The current step's state. `info` by default. */
+    tone?: StepperTone | undefined;
+    /**
+     * The current step's dot breathes, for a step still under way: the approved
+     * design pulses a working turn's. It is `StatusDot`'s own pulse, so it
+     * never fades the dot, never touches it, and is held still under a reduced
+     * motion preference.
+     */
+    pulse?: boolean | undefined;
+    /**
+     * Said before a finished step's words, where the check glyph stands for a
+     * reader who sees it: "Done Context".
+     */
+    doneLabel?: string | undefined;
+}
+/**
+ * Where a sequence has got to: the phases of a turn, the stages of a run.
+ *
+ * AN ORDERED LIST, because the order IS the information: a step's position
+ * says whether it is behind the current one or ahead of it, and a list says
+ * how many there are before a reader has heard any of them. The step under
+ * way carries `aria-current="step"`, the one value ARIA gives this exact
+ * meaning, and it is on exactly one step while the sequence is running and on
+ * none once it has finished.
+ *
+ * THREE STATES, EACH DRAWN TWO WAYS, so colour is never the only carrier. A
+ * finished step is the secondary ink with a check, and says "Done" before its
+ * words to a screen reader, where the check stands for a reader who sees it.
+ * The current step is its tone's soft tint under the tone's ink with the
+ * tone's dot, and is `aria-current`. A step still to come is the tertiary ink
+ * and nothing else. The hairline round the chips, and the short rule between
+ * two of them, are the design's quiet furniture.
+ *
+ * THE TONE IS DRAWN, NEVER SPOKEN: a reader hears which step is current, not
+ * that it is in the warning hue. A current step whose state is anything but
+ * ordinary work says so in its own words ("Review · sent back").
+ */
+export declare function Stepper({ steps, current, label, tone, pulse, doneLabel, className, ...rest }: StepperProps): import("react").JSX.Element | null;

package/dist/Stepper/index.d.ts

@@ -0,0 +1,3 @@
+import './Stepper.css';
+export { Stepper } from './Stepper.js';
+export type { StepperProps, StepperStep, StepperTone } from './Stepper.js';

package/dist/Stepper/index.js

@@ -0,0 +1,4 @@
+export { Stepper } from '../chunk-5QWIJSQM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

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/Table/index.js

@@ -1,3 +1,3 @@
-export { Table } from '../chunk-FEFTGVMF.js';
+export { Table } from '../chunk-V2N3BMOT.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Table-MDOLVUAW.css → Table-TGCS4C3F.css}

@@ -29,10 +29,20 @@
 .crewlet-table__container {
   /* The overflow is a safety net for a cell that cannot wrap (a long token, a
      hash); the fixed layout below is what keeps a table inside the width it is
-     given. A `maxHeight` turns this into the vertical scroller the sticky
-     header needs, which is the only way a long table keeps its column names. */
-  overflow-x: auto;
-  overflow-y: var(--crewlet-table-overflow-y, visible);
+     given. A `maxHeight` gives it something to scroll vertically, which is
+     what the sticky header needs and the only way a long table keeps its
+     column names.
+
+     BOTH AXES, STATED. This was `overflow-y: var(--crewlet-table-overflow-y,
+     visible)`, and the fallback was unreachable: per CSS Overflow, when one
+     axis is not `visible` the other computes to `auto`, so the unconditional
+     `overflow-x: auto` beside it made this box a scrollport in both
+     directions in every state. The variable had exactly one reachable value —
+     the `auto` Table.tsx wrote beside the max-height — so it read as a knob
+     with a default nothing could ever select. Without a max-height there is
+     simply nothing to scroll to, which is what made the difference invisible
+     rather than what made it absent. */
+  overflow: auto;
   max-height: var(--crewlet-table-max-height, none);
   overscroll-behavior-x: contain;
   flex: 1;

package/dist/Tabs/index.js

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

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

@@ -50,7 +50,21 @@
    */
   content: '';
   position: absolute;
-  bottom: -1px;
+  /*
+   * ON THE PADDING EDGE, NOT BELOW IT. This is an absolutely positioned child
+   * of the row, and the row is a scroll container: `overflow-x: auto` makes
+   * `overflow-y` compute to `auto` as well, so there is no axis on which it
+   * does not clip. Clipping is to the PADDING edge and the row's own 1px
+   * `border-bottom` lies outside it, so at `bottom: -1px` a 2px bar was cut in
+   * half — and the half removed was the lower one, the half meant to sit on
+   * the baseline rule and replace it. `scrollbar-width: none` above then hid
+   * the 1px vertical scrollbar that would have given the game away.
+   *
+   * `overflow: visible` is not the way out: the horizontal scrolling is the
+   * row's whole contract. The bar sits at 0 instead and paints over the row's
+   * last two pixels, which is where a reader sees it anyway.
+   */
+  bottom: 0;
   /*
    * Under the LABEL, not under the tab's box: the measurement is the button,
    * which carries the small side pad an inset focus ring needs, and a bar
@@ -70,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;
 }
@@ -108,6 +130,24 @@
   align-items: center;
   justify-content: center;
   gap: var(--spacing-1);
+  /*
+   * A TAB IS NEVER SQUEEZED, which is what makes the row above it SCROLL.
+   *
+   * `.crewlet-tabs--underline` is a `width: 100%` flex row with
+   * `overflow-x: auto`, and its own comment states the contract: the row
+   * scrolls rather than overflowing the page. That behaviour came entirely
+   * from each tab's automatic minimum resolving to its `nowrap` label, which
+   * is what makes the line unable to fit — and the explicit `min-width` below
+   * REPLACES that automatic minimum with a flat 24px for every item, not just
+   * the narrow ones the floor is for. With the default `flex-shrink: 1` the
+   * tabs were squeezed toward 24px until the line fitted, the strip stopped
+   * scrolling, and the labels — `nowrap`, with `min-width: 0` and no clip —
+   * spilled out of their buttons over their neighbours.
+   *
+   * `flex: none` is what the comment above already claims: "a tab whose label
+   * is wider than the floor is untouched".
+   */
+  flex: none;
   /* Never under the 24px target floor, at any density. */
   min-height: var(--size-control-sm);
   min-width: var(--size-target-min);
@@ -154,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
@@ -180,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);
 }
 
@@ -189,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));
@@ -221,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';