@crewlethq/ui 0.2.0 → 0.3.0

package/dist/AppShell-NVE6LHNI.css

@@ -0,0 +1,395 @@
+/*
+ * The application frame.
+ *
+ * The rail's width and the bar's height are read from the token layer through
+ * two component variables, so an application with a narrower rail sets ONE
+ * value rather than repeating a number in its own stylesheet, which is what
+ * every consumer of the passive shell had to do.
+ *
+ * The breakpoint is written out because a media query cannot read a custom
+ * property. It is the shell step from @crewlethq/tokens, and the CSS check
+ * compares the literal against the token.
+ */
+
+.crewlet-app-shell {
+  --crewlet-app-shell-rail: var(--size-shell-rail);
+  --crewlet-app-shell-topbar: var(--size-shell-topbar);
+  /* Where the drawer's veil sits while it is open. The shell replaces it with
+     the surface's own place in the layer band; this default only has to clear
+     the page chrome for the moment before that lands. */
+  --crewlet-app-shell-drawer-z: var(--z-index-overlay);
+  display: grid;
+  grid-template-columns: var(--crewlet-app-shell-rail) minmax(0, 1fr);
+  /* THE DOCUMENT DOES NOT SCROLL: exactly the viewport, and nothing may grow
+     past it. A page that can also scroll as a whole carries the rail off the
+     top of the window. */
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--color-surface-background);
+  color: var(--color-text-primary);
+}
+
+/* The skip link, drawn only while it holds focus, over everything. */
+.crewlet-app-shell__skip {
+  position: fixed;
+  top: var(--spacing-2);
+  left: var(--spacing-2);
+  z-index: var(--z-index-toast);
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  text-decoration: none;
+  transform: translateY(calc(-100% - var(--spacing-4)));
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-app-shell__skip:focus-visible {
+  transform: translateY(0);
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-app-shell__rail {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  background: var(--color-surface-topbar);
+  border-right: 1px solid var(--color-border-default);
+}
+
+.crewlet-app-shell__rail-inner {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
+/*
+ * The head sits at the top bar's own height, so the first nav row starts level
+ * with the top of the screen beside it.
+ *
+ * AND IT DRAWS NO LINE OF ITS OWN. It carried a bottom border, which put a
+ * divider across the rail at the same height as the bar's, and the two read as
+ * one rule running the width of the window with the brand and the screen title
+ * sitting above it like a second bar. The rail is one column: the bar's line
+ * belongs to the bar, the rail's right edge is what separates the two, and the
+ * only rule inside the rail is the one over its foot.
+ */
+.crewlet-app-shell__rail-head {
+  display: flex;
+  align-items: center;
+  flex: none;
+  min-height: var(--crewlet-app-shell-topbar);
+}
+
+.crewlet-app-shell__rail-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-color: var(--color-scrollbar) transparent;
+}
+
+/* The same gutter the nav takes, so what the foot says lines up with the rows
+   above it rather than sitting further out. */
+.crewlet-app-shell__rail-foot {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  padding: var(--spacing-2) var(--size-nav-gutter);
+  border-top: 1px solid var(--color-border-default);
+}
+
+/*
+ * A ROW IN THE RAIL LIKE ANY OTHER, for the foot.
+ *
+ * The rail's geometry is in two parts on purpose: the gutter insets the rail,
+ * which is where a row's background begins, and the row pad insets the content
+ * inside the row. A control dropped into the foot brings its own inset and
+ * lands its mark four or five pixels off the line every nav glyph above it
+ * sits on, which is the one thing a reader notices about a rail without being
+ * able to say what it is. This takes both halves, so it cannot.
+ *
+ * AND SO DOES WHATEVER ELSE LANDS THERE. `AppShell.RailRow` is the row this
+ * package draws, but the slot takes a control from anywhere and an application
+ * that already has a status button reaches for that one: the engine drops a
+ * tertiary Button into the foot, which arrived centred in a 263px rail on a
+ * toolbar's inset. The foot claims a direct child instead, which is the same
+ * move the nav's badge slot makes on whatever a caller puts in it, and there
+ * is no second idea of what a row in this rail is.
+ *
+ * THE BLOCK INSET IS A STEP, NOT A HEIGHT. A status line is a word with room
+ * around it rather than a control on the control ladder, so it takes one
+ * spacing step above and below its own line: 8 + 18 + 8 is 34px at the normal
+ * density and follows the density from there. --size-row-sm stays under it as
+ * the floor, because that is the step carrying the 24px a finger can hit, so
+ * compact density cannot take the target under it.
+ *
+ * And the boundary is TRANSPARENT rather than absent, spending one pixel of
+ * that step rather than adding one on top of it. A button carries one at every
+ * variant so that a bordered variant and a borderless one stand the same
+ * height, and the row this package draws carries the same one for the same
+ * reason: without it the two rows in one foot are 34px and 36px, and the
+ * difference is a border nobody can see.
+ */
+.crewlet-app-shell__rail-row,
+.crewlet-app-shell__rail-foot > .crewlet-btn {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-2);
+  width: 100%;
+  min-width: 0;
+  min-height: var(--size-row-sm);
+  padding: calc(var(--spacing-2) - 1px) var(--size-nav-row-pad);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-normal);
+  text-align: left;
+}
+
+.crewlet-app-shell__rail-row--action,
+.crewlet-app-shell__rail-foot > .crewlet-btn {
+  cursor: pointer;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-app-shell__rail-row--action:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* A row in the foot fills the rail, so its label takes whatever the glyph and
+   the trailing slot leave it and truncates rather than pushing them off the
+   end: a status line says what a node is doing, and what it says is as long as
+   the sentence the application wrote. */
+.crewlet-app-shell__rail-foot > .crewlet-btn > .crewlet-btn__label {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * Inside the row's own box, like every row in the rail above it. The shell's
+ * root is `overflow: hidden` at exactly the viewport's height, so an outset
+ * ring on the last row in the foot is cut off at the bottom of the window.
+ */
+.crewlet-app-shell__rail-row--action:focus-visible,
+.crewlet-app-shell__rail-foot > .crewlet-btn:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-app-shell__rail-row-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+
+.crewlet-app-shell__rail-row-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Pushed to the end of the row whatever the label's length. */
+.crewlet-app-shell__rail-row-trailing {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  margin-left: auto;
+}
+
+.crewlet-app-shell__column {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-app-shell__topbar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  flex: none;
+  height: var(--crewlet-app-shell-topbar);
+  padding: 0 var(--spacing-4);
+  border-bottom: 1px solid var(--color-border-default);
+  background: var(--color-surface-topbar);
+}
+
+.crewlet-app-shell__title {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-app-shell__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-left: auto;
+  min-width: 0;
+}
+
+.crewlet-app-shell__banner {
+  flex: none;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+/*
+ * THE one scroll container. Every screen scrolls here, which is what lets a
+ * router restore a position per history entry.
+ *
+ * The gutter is reserved at every height, so navigating between a tall screen
+ * and a short one does not shift every element sideways by the scrollbar's
+ * width, which reads as the page jumping on each move.
+ */
+.crewlet-app-shell__main {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-gutter: stable;
+}
+
+/* No focus rule of its own: `main` takes focus only from the skip link, and a
+   programmatic focus does not match :focus-visible, so neither the browser nor
+   the document baseline draws a ring around the whole screen. */
+
+.crewlet-app-shell__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-5);
+  max-width: var(--size-content-max);
+  margin: 0 auto;
+  padding: var(--spacing-5) var(--spacing-5) var(--spacing-10);
+  min-width: 0;
+}
+
+/* A screen that draws to the bottom of the window: the scroller stops
+   scrolling and the content column takes the height that is left. */
+.crewlet-app-shell--fill .crewlet-app-shell__main {
+  overflow: hidden;
+}
+
+.crewlet-app-shell--fill .crewlet-app-shell__content {
+  height: 100%;
+  padding-bottom: var(--spacing-5);
+}
+
+/* Hidden by default, revealed by the breakpoint below: the wide layout has the
+   rail on screen already, so the control that opens it has nothing to do. */
+.crewlet-app-shell__toggle {
+  display: none;
+}
+
+/*
+ * An open rail paints ONE step above its own veil, at every width: the drawer
+ * is JavaScript state and its shape is a stylesheet's, so a shell that opens
+ * it above the breakpoint (a demonstration, a test) must not draw a scrim over
+ * the rail it just opened.
+ *
+ * Z-INDEX ALONE, AND NO POSITION. The rail is a grid item wide and a fixed
+ * box narrow, and z-index applies to both, so a `position` here would buy
+ * nothing and cost the narrow layout everything: an attribute selector
+ * outranks the plain class the media query below re-declares, so a
+ * `position: relative` written here wins INSIDE that query too, and the open
+ * drawer leaves the fixed layer to become a grid item that takes the whole
+ * column and pushes the application into the next row. The suite holds this
+ * rule over the file rather than over a browser it cannot drive.
+ */
+.crewlet-app-shell__rail[data-open='true'] {
+  z-index: calc(var(--crewlet-app-shell-drawer-z) + 1);
+}
+
+/*
+ * The veil, declared OUTSIDE the breakpoint: a position it takes at one width
+ * only is a layout participant at every other, and as a plain element in the
+ * shell's grid it took the rail's column and pushed the application into the
+ * next row.
+ */
+.crewlet-app-shell__veil {
+  position: fixed;
+  inset: 0;
+  background: var(--color-surface-scrim);
+}
+
+@media (max-width: 900px) {
+  .crewlet-app-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .crewlet-app-shell__rail {
+    position: fixed;
+    inset: 0 auto 0 0;
+    width: var(--crewlet-app-shell-rail);
+    max-width: 100%;
+    transform: translateX(-100%);
+    box-shadow: var(--shadow-xl);
+    /*
+     * HIDDEN, not only moved. A rail translated off screen keeps every link
+     * and control in the tab order and in the accessibility tree, so a
+     * keyboard reader walks through a dozen stops nobody can see.
+     *
+     * Visibility is transitioned rather than switched, which is how the
+     * hiding waits for the slide out: an in-between value of visibility is
+     * `visible` whenever either end of the transition is, so the rail stays
+     * drawn for the whole duration and hides at the end. Going the other way
+     * the same rule shows it at once, which is what lets the drawer take
+     * focus the moment it opens.
+     */
+    visibility: hidden;
+    transition:
+      transform var(--motion-duration-slow) var(--motion-easing-emphasized),
+      visibility var(--motion-duration-slow) linear;
+  }
+
+  .crewlet-app-shell__rail[data-open='true'] {
+    transform: none;
+    visibility: visible;
+    transition: transform var(--motion-duration-slow) var(--motion-easing-emphasized);
+  }
+
+  .crewlet-app-shell__toggle {
+    display: inline-flex;
+  }
+
+  .crewlet-app-shell__content {
+    padding: var(--spacing-4) var(--spacing-3) var(--spacing-9);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-app-shell__skip,
+  .crewlet-app-shell__rail,
+  .crewlet-app-shell__rail[data-open='true'],
+  .crewlet-app-shell__rail-row--action,
+  .crewlet-app-shell__rail-foot > .crewlet-btn {
+    transition: none;
+  }
+}

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,104 @@
+import type { HTMLAttributes } from 'react';
+/**
+ * Round, or a rounded square.
+ *
+ * `square` IS THE DEFAULT. The engine's identity mark is a rounded square, and
+ * it is what a reader sees in every seat chip, every list row and every header
+ * on that product; a design system with two identity marks has two looks.
+ * `circle` stays for a PERSON in a member list, where the round badge is the
+ * platform convention that surface already speaks.
+ */
+export type AvatarShape = 'circle' | 'square';
+/**
+ * How much colour a badge spends on WHO something is.
+ *
+ * `neutral` is the default, and the change from 0.2.0. A hash of a name
+ * carries no information: rename the seat and its colour changes, which is the
+ * proof it never meant anything. Worse, the eight families a hash spreads over
+ * are the same eight the product spends on states and phases, so one amber
+ * meant "the execute phase", "needs a person" and "the Analyst" at once.
+ * Identity is the monogram and the name beside it.
+ *
+ * `brand` is for the one badge that is the reader themselves, and `seeded` for
+ * a roster where a stable per-identity tint genuinely helps a reader scan, a
+ * member list being the case it was built for. Each seeded ground is a token
+ * measured at 4.5:1 under white initials.
+ */
+export type AvatarTone = 'neutral' | 'brand' | 'seeded';
+/**
+ * Filled, or drawn.
+ *
+ * `dashed` is a HUMAN seat: the engine does not run it. That is a structural
+ * fact rather than a status, so it is carried by the edge rather than by a
+ * hue, which is what leaves the status hues meaning only what they mean.
+ */
+export type AvatarVariant = 'solid' | 'dashed';
+/** The four steps, in px. A number is accepted for anything outside them. */
+export declare const AVATAR_SIZES: {
+    readonly xs: 20;
+    readonly sm: 26;
+    readonly md: 32;
+    readonly lg: 40;
+};
+export type AvatarSizeStep = keyof typeof AVATAR_SIZES;
+export type AvatarSize = AvatarSizeStep | number;
+export interface AvatarProps extends HTMLAttributes<HTMLElement> {
+    /** Image source. With one set the badge renders the image; otherwise the initials. */
+    src?: string | undefined;
+    /** The name behind the initials, and the image's alt text. */
+    name?: string | undefined;
+    /** A step, or a number of px. */
+    size?: AvatarSize | undefined;
+    shape?: AvatarShape | undefined;
+    tone?: AvatarTone | undefined;
+    variant?: AvatarVariant | undefined;
+    /**
+     * The name is already printed beside this badge, so the badge itself says
+     * nothing. Without it a row reads "Carlos Diaz avatar, Carlos Diaz".
+     */
+    decorative?: boolean | undefined;
+    /**
+     * What the seeded tint is hashed from, where it is not the name: a stable id
+     * outlives a rename, so the colour does too. Only read with `tone="seeded"`.
+     */
+    colorSeed?: string | undefined;
+}
+/**
+ * Up to two uppercase initials.
+ *
+ * SPLIT ON WHITESPACE, HYPHEN, UNDERSCORE AND DOT, because half the names this
+ * draws are handles rather than names: `backend-engineer` gives BE,
+ * `sre_lead` gives SL and `carlos.diaz` gives CD, where splitting on spaces
+ * alone gives B, S and C and a roster of identical badges.
+ */
+export declare const getInitials: (name?: string) => string;
+/**
+ * Map a seed to one of the fixed tints. A small deterministic hash, so the
+ * same seed always resolves to the same colour and different seeds spread.
+ */
+export declare const avatarTint: (seed: string) => number;
+/** The px a size prop means. */
+export declare function avatarPixels(size: AvatarSize): number;
+/**
+ * The corner a square badge of this many pixels takes.
+ *
+ * THE CORNER MOVES WITH THE BOX, which is the rule the steps are drawn to:
+ * 4px at 20, 8px at 26 and 32, 12px at 40. A numeric size has to obey the same
+ * rule or it contradicts it, and it did: every arbitrary box took the middle
+ * step, so `size={80}` rendered an 8px corner where `size="lg"` at half the
+ * width renders 12px, a bigger badge drawn squarer than a smaller one. The
+ * bands are the steps' own midpoints, so a number lands on the corner of the
+ * step nearest it and the ladder is one ladder rather than two.
+ *
+ * The values are spelled in full rather than composed from the step name: the
+ * package's variable check reads `var(--radius-${name})` as a reference to a
+ * token called `--radius-`, which nothing emits.
+ */
+export declare function avatarSquareCorner(pixels: number): string;
+/**
+ * An identity badge: an image, or the initials behind it.
+ *
+ * If the image fails to load (a stale CDN URL, an expired signature) it
+ * degrades to the initials rather than to a broken-image glyph.
+ */
+export declare const Avatar: ({ src, name, size, shape, tone, variant, decorative, colorSeed, className, style, ...rest }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Avatar/index.d.ts

@@ -0,0 +1,3 @@
+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';

package/dist/Avatar/index.js

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

package/dist/Avatar-P2KRQM2B.css

@@ -0,0 +1,156 @@
+/*
+ * 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 monogram and the name.
+ *
+ * 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-normal);
+  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 circle at every one of them; a numeric size computes its own,
+ * because nothing in the scale can answer for an arbitrary box.
+ */
+.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);
+}
+
+/*
+ * Shapes. THE SQUARE IS THE DEFAULT, which is the change: the engine's
+ * identity mark is a rounded square and it is what a reader sees in every seat
+ * chip, every list row and every header on that product. A circle stays for a
+ * PERSON, where the round badge is the platform convention a member list
+ * already speaks.
+ *
+ * The square's radius moves with the box rather than sitting at one step. The
+ * engine draws 4px at 20, 8px at 26 and 12px at 40, which is a roughly
+ * constant proportion; one radius across the four steps reads as a pill at the
+ * smallest and as a plain box at the largest. A NUMERIC SIZE OBEYS THE SAME
+ * LADDER, from `avatarSquareCorner` in the component, which picks the corner
+ * of the step nearest the box it was given: taking one fixed step there is how
+ * `size={80}` ended up drawn squarer than `size="lg"` at half its width.
+ */
+.crewlet-avatar--circle {
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-avatar--square {
+  border-radius: var(--radius-md);
+}
+
+.crewlet-avatar--square.crewlet-avatar--xs {
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-avatar--square.crewlet-avatar--lg {
+  border-radius: var(--radius-lg);
+}
+
+.crewlet-avatar--image {
+  display: block;
+  object-fit: cover;
+}
+
+/* ── tones ─────────────────────────────────────────────────────────────── */
+
+.crewlet-avatar--fallback {
+  border: 1px solid transparent;
+}
+
+.crewlet-avatar--neutral {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border-default);
+  color: var(--color-text-secondary);
+}
+
+/*
+ * The label on the accent fill is the on-accent step, not the on-brand one.
+ * The themes repaint the brand fill monochrome and leave the accent where it
+ * is, so on-brand is black in the dark palette and black on the accent
+ * measures 4.35:1. On-accent is white in every palette and measures 4.83:1.
+ */
+.crewlet-avatar--brand {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+}
+
+.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); }
+
+/*
+ * A HUMAN SEAT IS DRAWN, NOT TINTED. The engine does not run it, which is a
+ * structural fact rather than a status, so it takes the edge and no fill at
+ * all. Last, so it wins over whichever tone it is paired with.
+ *
+ * The whole border rather than its style alone: the badge is the same person
+ * whether or not they have uploaded a photo, and an image draws no border of
+ * its own for a style to change.
+ */
+.crewlet-avatar--dashed {
+  background: transparent;
+  /* The same hairline the solid neutral badge draws, so the human seat differs
+     by its LINE STYLE and its missing fill rather than by a second grey a
+     reader would have to hold two of in mind. */
+  border: 1px dashed var(--color-border-default);
+  color: var(--color-text-secondary);
+}