@crewlethq/ui 0.4.4 → 0.5.1

package/dist/Avatar/AvatarStack.d.ts

@@ -0,0 +1,76 @@
+import type { HTMLAttributes } from 'react';
+import { type AvatarKind, type AvatarRing, type AvatarSizeStep } from './Avatar.js';
+/** One badge in a stack. */
+export interface AvatarStackMember {
+    /** Who: the initials, and a word of the stack's accessible name. */
+    name: string;
+    /** An agent (the default) is a squircle; a human is a circle. */
+    kind?: AvatarKind | undefined;
+    src?: string | undefined;
+    /** A state ring on this badge, as `Avatar` draws it. */
+    ring?: AvatarRing | undefined;
+    /**
+     * What tells two members apart when their names do not (a seat's handle, a
+     * person's id), unique within the stack. The name is used when it is absent.
+     */
+    id?: string | undefined;
+}
+export interface AvatarStackProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Everybody in the stack, in the order they are drawn. */
+    members: readonly AvatarStackMember[];
+    /**
+     * How many badges are drawn before the rest are counted in a chip.
+     *
+     * FOUR BY DEFAULT, because that is the most any stack in the approved design
+     * draws, and a stack is a glance at WHO rather than a roster: past four the
+     * overlapped monograms stop being read at all. A whole number of at least 1.
+     */
+    max?: number | undefined;
+    /**
+     * The badges' step, `sm` by default.
+     *
+     * NOT THE NEAREST STEP TO THE DESIGN'S 22px, which is `xs`, because the
+     * design draws its stacks' initials at 9px and this kit's smallest type is
+     * 11px. Behind the next badge's 6px and its 2px cut-out, a badge shows its
+     * box less 8px: at `xs` that leaves 9 of the 14px two mono initials take,
+     * 64% of them, the second letter gone to a stem. The design's own stack
+     * shows 77% of its initials, and `sm` is the smallest step that shows as
+     * much, at 85%.
+     */
+    size?: AvatarSizeStep | undefined;
+    /**
+     * The accessible name, where the derived one ("3 agents: SWE, CTO, PM") is
+     * not what the stack means where it stands ("Watching: …").
+     */
+    label?: string | undefined;
+    /**
+     * The names are already printed beside the stack, so it says nothing
+     * itself: "read by 3 agents today" beside a stack that read out the same
+     * three names would say them twice.
+     */
+    decorative?: boolean | undefined;
+}
+/**
+ * What a stack says to somebody who cannot see it: how many of each kind, and
+ * every name, the ones counted in the chip included.
+ *
+ * THE KINDS ARE COUNTED, NOT ASSUMED. A stack of watchers holds people and
+ * agents together, and "3 agents: Jane Founder, CTO, SWE" would call a person
+ * an agent to the one reader who cannot see the circle that says otherwise.
+ */
+export declare function avatarStackLabel(members: readonly AvatarStackMember[]): string;
+/**
+ * Several badges drawn as one mark: who is on something, at a glance.
+ *
+ * EACH BADGE OVERLAPS THE ONE BEFORE IT BY 6PX and is cut out of it by a 2px
+ * ring in the colour of the ground the stack stands on, which is the design's
+ * own stack. The ground is `--crewlet-avatar-stack-ground`, the sheet by
+ * default, which is where the design draws every stack; a stack standing on a
+ * card or on any other surface sets it on the stack. Past `max` the rest are
+ * counted in a chip, which is a PILL rather than either kind's outline: it is
+ * a number, not somebody.
+ *
+ * ONE IMAGE TO A SCREEN READER, named by `avatarStackLabel`, so a row reads
+ * "3 agents: SWE, CTO, PM" once rather than three badge names and a "+2".
+ */
+export declare function AvatarStack({ members, max, size, label, decorative, className, style, ...rest }: AvatarStackProps): import("react").JSX.Element | null;

package/dist/Avatar/index.d.ts

@@ -1,3 +1,6 @@
 import './Avatar.css';
-export { AVATAR_SIZES, Avatar, avatarPixels, avatarSquareCorner, avatarTint, getInitials } from './Avatar.js';
-export type { AvatarProps, AvatarShape, AvatarSize, AvatarSizeStep, AvatarTone, AvatarVariant } from './Avatar.js';
+import './AvatarStack.css';
+export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials, } from './Avatar.js';
+export type { AvatarKind, AvatarProps, AvatarRing, AvatarSize, AvatarSizeStep, AvatarTone } from './Avatar.js';
+export { AvatarStack, avatarStackLabel } from './AvatarStack.js';
+export type { AvatarStackMember, AvatarStackProps } from './AvatarStack.js';

package/dist/Avatar/index.js

@@ -1,2 +1,2 @@
-export { AVATAR_SIZES, Avatar, avatarPixels, avatarSquareCorner, avatarTint, getInitials } from '../chunk-PNFASD6F.js';
+export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, AvatarStack, avatarCorner, avatarPixels, avatarStackLabel, avatarTint, getInitials } from '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Avatar-XID7Z74C.css

@@ -0,0 +1,200 @@
+/*
+ * The identity badge.
+ *
+ * IT IS NEUTRAL, and that is the whole rule. The system this replaces coloured
+ * a seat by `PALETTE[hash(name) % 8]`, over the same eight families it also
+ * spent on phases and event categories, so one amber meant "the execute
+ * phase", "the decision category" and "the Analyst" at once. A hash of a name
+ * carries no information: rename the seat and its colour changes, which is the
+ * proof it never meant anything. Identity is the OUTLINE (a squircle for an
+ * agent, a circle for a person), the monogram and the name.
+ *
+ * THE ONE HUE A BADGE CARRIES IS A STATE, as a ring round it, and the ring is
+ * the component's only coloured line.
+ *
+ * The seeded tints stay for the one case that earns them, a roster somebody
+ * scans, and their grounds are TOKENS: measured under white initials and held
+ * at 4.5:1 by the palette suite. Spelled as literals, five of the ten sat
+ * under that floor while the suite measured ten values nothing painted with.
+ */
+
+.crewlet-avatar {
+  --crewlet-avatar-size: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--crewlet-avatar-size);
+  height: var(--crewlet-avatar-size);
+  overflow: hidden;
+  object-fit: cover;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-wide);
+  /* The document's own leading rather than a tight step of the badge's own.
+     The box is a fixed square that centres whatever line it holds, so the ink
+     lands in the same place either way; what the tight step bought was one
+     more number in a component that already sets four. */
+  line-height: var(--font-line-height-body);
+  text-transform: uppercase;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+/*
+ * The four steps. Each pairs its box with a type step, so two initials sit
+ * inside the outline at every one of them. A numeric size sets the same
+ * `--crewlet-avatar-size` inline and computes its own type, because nothing in
+ * the scale can answer for an arbitrary box; everything else it takes from the
+ * rules below exactly as a step does.
+ */
+.crewlet-avatar--xs {
+  --crewlet-avatar-size: 20px;
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-avatar--sm {
+  --crewlet-avatar-size: 26px;
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-avatar--md {
+  --crewlet-avatar-size: 32px;
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-avatar--lg {
+  --crewlet-avatar-size: 40px;
+  font-size: var(--font-size-sm);
+}
+
+/* ── kinds ─────────────────────────────────────────────────────────────── */
+
+/*
+ * AN AGENT IS A SQUIRCLE, set in the mono face: what the engine runs, named
+ * the way a handle is written.
+ *
+ * THE CORNER MOVES WITH THE BOX, at 0.29 of it (`AVATAR_CORNER_RATIO` in the
+ * component, which the suite holds equal to this number): the approved
+ * design's 7px at 24 and 9px at 30, as one proportion. It is computed here from
+ * the size property every step and every numeric size sets, so there is ONE
+ * ladder. There used to be two, a step table here and a numeric table in the
+ * component, and they disagreed: `size={80}` drew a squarer badge than
+ * `size="lg"` at half its width.
+ *
+ * WHERE THE BROWSER DRAWS A SQUIRCLE, IT IS A WHOLE ONE. `corner-shape:
+ * squircle` is a superellipse of exponent 4, which at a given radius reaches
+ * much closer to the box's corner than a circular arc does: at the 45 degree
+ * point it stands 0.159 of the radius in from each edge, against 0.293 for an
+ * arc. Kept at 0.29 of the box, that corner would stand 0.046 of the box in,
+ * half the design's depth and a nearly square badge. At half the box it stands
+ * 0.0795 of the box in, against the design's 0.0849 (0.13px at 24px), with the
+ * continuous curvature a squircle is for. So the corner is the circle token
+ * there, and the fallback above is what every other browser draws.
+ */
+.crewlet-avatar--agent {
+  border-radius: calc(var(--crewlet-avatar-size) * 0.29);
+  font-family: var(--font-family-mono);
+}
+
+@supports (corner-shape: squircle) {
+  .crewlet-avatar--agent {
+    corner-shape: squircle;
+    border-radius: var(--radius-circle);
+  }
+}
+
+/* A PERSON IS A CIRCLE, set in the sans face, the round badge every member list
+   a reader has used already speaks. */
+.crewlet-avatar--human {
+  border-radius: var(--radius-circle);
+  font-family: var(--font-family-sans);
+}
+
+.crewlet-avatar--image {
+  display: block;
+  object-fit: cover;
+}
+
+/* ── tones ─────────────────────────────────────────────────────────────── */
+
+.crewlet-avatar--fallback {
+  border: 1px solid transparent;
+}
+
+/* The design's badge: the raised rung with the strong hairline round it and
+   the secondary ink, so a badge on a card reads as a mark standing on it
+   rather than as a hole in it. */
+.crewlet-avatar--neutral {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border-strong);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-avatar--seeded {
+  color: var(--color-text-on-accent);
+}
+
+.crewlet-avatar--tint-0 { background: var(--color-avatar-tint-0); }
+.crewlet-avatar--tint-1 { background: var(--color-avatar-tint-1); }
+.crewlet-avatar--tint-2 { background: var(--color-avatar-tint-2); }
+.crewlet-avatar--tint-3 { background: var(--color-avatar-tint-3); }
+.crewlet-avatar--tint-4 { background: var(--color-avatar-tint-4); }
+.crewlet-avatar--tint-5 { background: var(--color-avatar-tint-5); }
+.crewlet-avatar--tint-6 { background: var(--color-avatar-tint-6); }
+.crewlet-avatar--tint-7 { background: var(--color-avatar-tint-7); }
+.crewlet-avatar--tint-8 { background: var(--color-avatar-tint-8); }
+.crewlet-avatar--tint-9 { background: var(--color-avatar-tint-9); }
+
+/* ── the state ring ────────────────────────────────────────────────────── */
+
+/*
+ * A 1.5px LINE 2px OUTSIDE THE BADGE, which is the design's ring: it draws a
+ * 3.5px shadow over a 2px one in the card's colour, and 3.5 less 2 is 1.5.
+ *
+ * AN OUTLINE RATHER THAN THAT SHADOW PAIR, for three reasons. The gap is
+ * TRANSPARENT, so the ring reads on whatever the badge stands on, where the
+ * design's gap is the card's own fill and cuts a card-coloured band into any
+ * other ground. An outline follows the corner, the squircle's included, in
+ * every engine this package supports. And forced-colors mode keeps an outline
+ * and drops every shadow, so the ring is still drawn for the readers who most
+ * need a boundary; it is drawn in the system colour there, which is why the
+ * state is always said in words beside the badge as well.
+ *
+ * LONGHANDS, so the tone rules below set the colour alone and cannot reset the
+ * geometry, whichever order they are read in. Each fill is measured at 3:1 as
+ * a mark on every opaque surface by @crewlethq/tokens, which is the floor a
+ * boundary a reader has to see is held to.
+ */
+.crewlet-avatar--ring-info,
+.crewlet-avatar--ring-warning,
+.crewlet-avatar--ring-danger,
+.crewlet-avatar--ring-success,
+.crewlet-avatar--ring-brand {
+  outline-style: solid;
+  outline-width: 1.5px;
+  outline-offset: 2px;
+}
+
+.crewlet-avatar--ring-info {
+  outline-color: var(--color-feedback-info);
+}
+
+.crewlet-avatar--ring-warning {
+  outline-color: var(--color-feedback-warning);
+}
+
+.crewlet-avatar--ring-danger {
+  outline-color: var(--color-feedback-danger);
+}
+
+.crewlet-avatar--ring-success {
+  outline-color: var(--color-feedback-success);
+}
+
+/* SELECTED, in the accent, which is what the accent means: where the reader
+   is. It is the only place a badge spends the accent. */
+.crewlet-avatar--ring-brand {
+  outline-color: var(--color-brand-accent);
+}

package/dist/AvatarStack-GEJBNV7E.css

@@ -0,0 +1,72 @@
+/*
+ * Several badges as one mark (AvatarStack.tsx).
+ *
+ * THE DESIGN'S STACK: each badge overlaps the one before it by 6px and is cut
+ * out of it by a 2px ring in the ground's own colour, so the overlap reads as
+ * badges standing in front of each other rather than as one blot. The ring is
+ * a SHADOW rather than a border, because it has to fall outside the badge
+ * without moving it, and it is decoration: forced-colors mode drops it and the
+ * badges' own hairlines still separate them.
+ *
+ * THE GROUND IS A VARIABLE because a stack stands on whatever it is put on,
+ * and a cut-out in the sheet's colour on a card is a band of the wrong grey
+ * round every badge. It defaults to the SHEET, because that is where the
+ * approved design draws every stack it has: in the top bar of a page, over a
+ * board and over a knowledge page, and in a task's side column, all of them on
+ * the sheet, with the design's own cut-out drawn in the sheet's colour. A stack
+ * that stands on a card, or on anything else, sets it on the stack itself.
+ *
+ * Every rule is two classes deep, so it outweighs the badge's own one-class
+ * rules whichever order the stylesheets are bundled in.
+ */
+
+.crewlet-avatar-stack {
+  --crewlet-avatar-stack-ground: var(--color-surface-background);
+  /* The badges' box, which the component sets from the step it was given; the
+     default is the default step's, sm. The chip reads it, so it stands exactly
+     as tall as the badges beside it. */
+  --crewlet-avatar-stack-size: 26px;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.crewlet-avatar-stack > .crewlet-avatar-stack__member {
+  box-shadow: 0 0 0 2px var(--crewlet-avatar-stack-ground);
+}
+
+/* The design's 6px, a little under a third of its 22px badge: enough that the
+   stack is one mark, little enough that every monogram stays readable. */
+.crewlet-avatar-stack > .crewlet-avatar-stack__member + .crewlet-avatar-stack__member {
+  margin-inline-start: -6px;
+}
+
+/*
+ * THE COUNT OF THE REST. A PILL, where every badge is a squircle or a circle:
+ * it is a number rather than somebody, and drawn in either kind's outline it
+ * would read as one more agent or one more person. Otherwise it is the neutral
+ * badge exactly (the raised rung, the strong hairline, the secondary ink), in
+ * the sans face with tabular figures so "+9" and "+12" sit alike.
+ */
+.crewlet-avatar-stack > .crewlet-avatar-stack__more {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--crewlet-avatar-stack-size);
+  height: var(--crewlet-avatar-stack-size);
+  padding-inline: var(--spacing-1);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--font-line-height-tight);
+  white-space: nowrap;
+  user-select: none;
+}

package/dist/BrandLockup/index.js

@@ -1,2 +1,2 @@
-export { BrandLockup } from '../chunk-WNI2WSJF.js';
+export { BrandLockup } from '../chunk-7KBNFFM3.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{BrandLockup-6ISDEHPJ.css → BrandLockup-JKGXFCZF.css}

@@ -9,12 +9,19 @@
 
 /*
  * IT FITS THE BAR IT IS DRAWN BESIDE. The rail's head is the top bar's own
- * height (64px, a fixed token at every density), so the lockup has to come in
+ * height (52px, a fixed token at every density), so the lockup has to come in
  * under that height with its context line on: mark 24 plus one 11px line at
- * the document's own leading plus twice the block padding is 56.5px at the
- * normal density and 58.7px at comfortable. It was 66.5px, which grew the head
- * past the bar and put a visible kink across the window on every deployment
- * that names a company.
+ * the document's own leading (15.95px) plus twice the block padding is 47.95px
+ * at the normal density and 49.07px at comfortable. It was 66.5px once, which
+ * grew the head past the bar and put a visible kink across the window on every
+ * deployment that names a company.
+ *
+ * THE BLOCK PADDING IS THE SMALL STEP for that reason. It was the 8px step
+ * while the bar was 64px; at 52px the same padding made the lockup 55.95px,
+ * past the bar again, and the mark and the context line cannot give anything
+ * up (the mark is the home link's 24px target, the line is the document's).
+ * The head centres the lockup, so the padding is the least room it keeps at
+ * the top and the bottom rather than the room it is drawn with.
  *
  * NO GAP BETWEEN THE TWO LINES. They are one lockup rather than two stacked
  * labels, and the leading is the space between them: a gap on top of it reads
@@ -33,7 +40,7 @@
      link's target height, so it sits on the 24px floor rather than under it.
      A consumer with a wider mark sets this rather than editing two rules. */
   --crewlet-brand-mark: 24px;
-  padding: var(--spacing-2) calc(var(--size-nav-gutter) + var(--size-nav-row-pad));
+  padding: var(--spacing-1) calc(var(--size-nav-gutter) + var(--size-nav-row-pad));
 }
 
 .crewlet-brand__home {
@@ -72,7 +79,7 @@
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   letter-spacing: var(--font-letter-spacing-tight);
-  line-height: var(--font-line-height-normal);
+  line-height: var(--font-line-height-body);
   color: var(--color-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -82,24 +89,23 @@
 /* Indented to the name above it by the mark's own box, and truncated: a
    company name is as long as somebody registered it.
 
-   THE RAIL'S OWN MICRO-LABEL REGISTER, which is the wide step rather than the
-   wider one an Eyebrow takes: this line and the nav's group labels are the two
-   uppercase runs in the rail, they sit twenty pixels apart, and at the wider
-   step the company's name was visibly broader than the sections under it
-   rather than quieter than them. The suite holds the two together. */
+   THE RAIL'S ONE UPPERCASE RUN, on the wide step rather than the wider one an
+   Eyebrow takes: at the wider step the company's name was visibly broader
+   than the sections under it rather than quieter than them. The nav's group
+   labels twenty pixels below are sentence-case words at the caption step, so
+   the case and the size are what hold the two apart; the suite holds that. */
 .crewlet-brand__context {
   padding-left: calc(var(--crewlet-brand-mark) + var(--spacing-2));
   font-family: var(--font-family-sans);
   font-size: var(--font-size-2xs);
-  /* THE REGULAR WEIGHT, which is the one thing that separates this line from
-     the nav's group labels below it. The two are the only uppercase runs in
-     the rail and they sit twenty pixels apart; drawn at the same size, the
-     same tracking and the same weight they read as two headings of one list
-     rather than as the company's name above the sections in it. A group name
-     is what a reader scans, so the weight stays there and goes from here. */
+  /* THE REGULAR WEIGHT: the company's name is a quiet line under the product
+     name, not a heading. It used to be the one thing separating this line
+     from the nav's group labels, when both were uppercase at this size; the
+     labels are sentence case at the caption step now, and the weight stays
+     here because the line is still meant to be read past. */
   font-weight: var(--font-weight-regular);
   letter-spacing: var(--font-letter-spacing-wide);
-  line-height: var(--font-line-height-normal);
+  line-height: var(--font-line-height-body);
   text-transform: uppercase;
   color: var(--color-text-tertiary);
   overflow: hidden;

package/dist/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ReactNode } from 'react';
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'tertiary' | 'accent' | 'danger';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'accent' | 'danger';
 export type ButtonSize = 'small' | 'medium' | 'large';
 export type ButtonShape = 'square' | 'pill';
 interface ButtonLook {
@@ -7,7 +7,12 @@ interface ButtonLook {
     variant?: ButtonVariant | undefined;
     size?: ButtonSize | undefined;
     shape?: ButtonShape | undefined;
-    /** Drawn before the label. A glyph component, not a name. */
+    /**
+     * Drawn before the label. A glyph component, not a name: a glyph strokes in
+     * `currentColor`, so it takes the label's ink on every variant. A brand
+     * mark such as `CrewletIcon` paints its own accent fill and disappears on
+     * the primary and accent fills, so it does not belong in this slot.
+     */
     leadingIcon?: ReactNode;
     /** Drawn after the label: a chevron, an external mark, a count. */
     trailingIcon?: ReactNode;

package/dist/Button/index.js

@@ -1,3 +1,3 @@
-export { Button, ButtonLink } from '../chunk-BZYDZBAN.js';
+export { Button, ButtonLink } from '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Button-D4J6B4MA.css → Button-X4B2TJAQ.css}

@@ -4,9 +4,9 @@
  * SIX VARIANTS, AND THEY ARE A HIERARCHY RATHER THAN A PALETTE. primary is the
  * one action on the screen and takes the accent fill; secondary is everything
  * else; outline is the branded yes on a page that already has a primary;
- * tertiary is for a dense toolbar; danger is destructive, and the only one
- * that spends the critical hue. accent is primary's own recipe under the name
- * a caller may already have written.
+ * ghost is for a dense toolbar and the quiet second answer beside a primary;
+ * danger is destructive, and the only one that spends the critical hue. accent
+ * is primary's own recipe under the name a caller may already have written.
  *
  * THE ONE ACTION IS THE ACCENT FILL. It reads as the answer a screen is
  * asking for, which is what a filled monochrome button could not do beside a
@@ -16,9 +16,12 @@
  *
  * Every size is a --size-control-* step, so a button, a select and an input in
  * one row are the same height at every density, and none of them can fall
- * under the 24px a finger can hit. The padding ramp is one spacing step per
- * size, so a small button in a toolbar is tight and a large one on a landing
- * page is not.
+ * under the 24px a finger can hit. The steps are the approved design's own
+ * control rhythm, 30px and 26px for the medium and the small button, and they
+ * live in the tokens rather than here because the field and the segmented
+ * row beside a button stand at the same height. The padding ramp is one
+ * spacing step per size, so a small button in a toolbar is tight and a large
+ * one on a landing page is not.
  */
 
 .crewlet-btn {
@@ -136,9 +139,16 @@
  * Primary: the accent fill, and the one action on the screen.
  *
  * `accent` is the same recipe under the other name it is written as. They are
- * one rule rather than two, so the pair cannot drift into two blues, and the
+ * one rule rather than two, so the pair cannot drift into two violets, and the
  * name stays because call sites already spell it.
  *
+ * UNDER THE POINTER AND PRESSED IT DARKENS, a step each, and never brightens.
+ * The label is the on-accent white in both palettes, so a brighter fill is a
+ * step toward it: the approved design's brightness(1.08) hover took the dark
+ * accent's label from 4.53:1 to 4.18:1, under the text floor at the one moment
+ * the reader is about to press. The steps are tokens rather than a filter, so
+ * @crewlethq/tokens can measure them.
+ *
  * THE BORDER IS TRANSPARENT rather than the fill: a filled control needs no
  * boundary, and one drawn in the fill's own colour makes the button a step
  * wider than the secondary beside it in every forced-colors stylesheet that
@@ -163,16 +173,30 @@
   border-color: transparent;
 }
 
-/* Secondary: a surface with a visible boundary. Everything else. */
+/*
+ * Secondary: everything else. The CARD's own ground inside the STRONG
+ * hairline, the approved design's button.
+ *
+ * STRONG, NOT DEFAULT, because a button stands on the very card it is filled
+ * with: every panel's actions sit on a card, and there the fill is no edge at
+ * all and the boundary is the whole of the button. The default hairline is
+ * the one that finds a CARD on the sheet, and a button drawn with it was a
+ * card-shaped outline of the panel's own divider; the strong step is the one
+ * a reader takes for a control's edge.
+ *
+ * Under the pointer it steps up a rung, to the raised ground, which the
+ * palette suite holds a visible step above the card, with the boundary a
+ * step stronger again; pressed, the pressed overlay.
+ */
 .crewlet-btn--secondary {
   background: var(--color-surface-subtle);
   color: var(--color-text-primary);
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-strong);
 }
 
 .crewlet-btn--secondary:hover:not(:disabled):not([aria-disabled='true']) {
   background: var(--color-surface-elevated);
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 .crewlet-btn--secondary:active:not(:disabled):not([aria-disabled='true']) {
@@ -191,19 +215,25 @@
   background: var(--color-brand-accent-soft);
 }
 
-/* Tertiary: borderless, for a dense toolbar. */
-.crewlet-btn--tertiary {
+/*
+ * Ghost: no ground and no boundary, for a dense toolbar and for the quiet
+ * answer beside a primary ("Reassign" next to "Raise budget"). It is the word
+ * IconButton's borderless square uses, so a toolbar holding both is written
+ * in one vocabulary. Under the pointer it takes the hover overlay, the one
+ * every row takes, and its ink steps up to the primary text.
+ */
+.crewlet-btn--ghost {
   background: transparent;
   color: var(--color-text-secondary);
   border-color: transparent;
 }
 
-.crewlet-btn--tertiary:hover:not(:disabled):not([aria-disabled='true']) {
+.crewlet-btn--ghost:hover:not(:disabled):not([aria-disabled='true']) {
   background: var(--color-surface-hover);
   color: var(--color-text-primary);
 }
 
-.crewlet-btn--tertiary:active:not(:disabled):not([aria-disabled='true']) {
+.crewlet-btn--ghost:active:not(:disabled):not([aria-disabled='true']) {
   background: var(--color-surface-pressed);
 }
 
@@ -212,15 +242,16 @@
  *
  * A SECONDARY THAT HAS GONE RED, not a red slab. It sits in the same row as
  * Cancel and it is the button a reader must not press by reflex, so it holds
- * the secondary's own weight until it is pointed at and states itself in its
- * INK, which is the step measured as text; the red fill it used to carry
- * pulled the eye to the destructive answer first on every dialog that had one.
- * The hue arrives on hover, as the tint plus the full fill on the boundary.
+ * the secondary's own weight, the card inside the strong hairline, until it
+ * is pointed at and states itself in its INK, which is the step measured as
+ * text; the red fill it used to carry pulled the eye to the destructive
+ * answer first on every dialog that had one. The hue arrives on hover, as the
+ * tint plus the full fill on the boundary.
  */
 .crewlet-btn--danger {
   background: var(--color-surface-subtle);
   color: var(--color-feedback-danger-ink);
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-strong);
 }
 
 .crewlet-btn--danger:hover:not(:disabled):not([aria-disabled='true']) {

package/dist/Callout/index.js

@@ -1,2 +1,2 @@
-export { Callout } from '../chunk-3ZP55QZE.js';
+export { Callout } from '../chunk-R6FBDTP3.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Canvas/index.js

@@ -1,8 +1,8 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-CMEE37QJ.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-BMYPGGPV.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
-import '../chunk-BZYDZBAN.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';