@crewlethq/ui 0.2.0 → 0.4.0

package/dist/Card/Card.d.ts

@@ -0,0 +1,164 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+export type CardVariant = 
+/** One step above the page. */
+'default'
+/**
+ * The TILE: the panel's ground with none of its lift, at the tighter inset,
+ * for one of many records in a grid. Its default padding is `tight`.
+ */
+ | 'subtle'
+/** Transparent, with a strong border. */
+ | 'outlined'
+/**
+ * A well INSIDE a card: the inset ground, the tighter radius, no border of
+ * its own. What a record's own sub-block takes.
+ */
+ | 'inset'
+/**
+ * The same ground at the tighter radius, with no elevation. What a nested
+ * card takes so two borders at one radius do not read as a box drawn twice.
+ */
+ | 'quiet'
+/** Lifted off the page. */
+ | 'elevated'
+/**
+ * A dashed boundary: something that is not quite a record yet. A seat held
+ * by a person rather than an agent, a slot waiting to be filled.
+ */
+ | 'dashed';
+/**
+ * `tight` is 12px on every edge, the inset a tile in a grid takes. `sm` is
+ * VERTICAL ONLY, because a card has one left edge and its header sets it:
+ * reducing the horizontal inset too puts content on a different vertical line
+ * from the title above it, and pushes a code block against the card's right
+ * edge with nowhere for its scrollbar to sit. What it is for is content whose
+ * rows carry their own vertical rhythm, which is a claim about height rather
+ * than about the edge.
+ */
+export type CardPadding = 'none' | 'tight' | 'sm' | 'md' | 'lg';
+/**
+ * A section's own padding, on the SAME five steps as the card's own, so one
+ * word names one inset wherever it is said. They were two scales sharing two
+ * words: `tight` meant 12px on every edge on the card and a vertical-only step
+ * on a section, and `md` meant 16px on a card and on a body but 8px over 16px
+ * on a footer. A caller who read the card's steps and wrote one on a body got
+ * a different inset than the one documented, with nothing to say so.
+ */
+export type CardSectionPadding = CardPadding;
+/**
+ * A rail down the card's leading edge, carrying a STATE. The three states a
+ * record can be in that a reader scans a grid for, and nothing else: identity
+ * (whose seat, which unit, which vendor) is carried by name, glyph and
+ * position, never by colour.
+ */
+export type CardRail = 'info' | 'warning' | 'danger';
+export type CardElement = 'div' | 'section' | 'article' | 'li';
+interface CardLook {
+    variant?: CardVariant | undefined;
+    /**
+     * The inset the card's own content takes. `none` lets a table sit flush.
+     *
+     * WHERE IT IS APPLIED depends on the recipe. A card given raw children takes
+     * it on its own surface. A card built from `Card.Header`, `Card.Body` or
+     * `Card.Footer` is FLUSH and never carries padding itself, because its slots
+     * carry theirs and have to reach its edges: there it is the inset of
+     * whatever the card holds BESIDE those slots, which the card draws in a body
+     * of its own. Left unset it is `md`, or `tight` for a `subtle` tile.
+     */
+    padding?: CardPadding | undefined;
+    /** Hover, pointer and focus states. Implied by `href` and `asChild`. */
+    interactive?: boolean | undefined;
+    rail?: CardRail | undefined;
+    /** This card is the one the reader has chosen. */
+    selected?: boolean | undefined;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+export interface CardProps extends HTMLAttributes<HTMLElement>, CardLook {
+    /**
+     * The element to draw. `section` and `article` are named by `Card.Title`
+     * when there is one, so a screen reader listing a page's regions finds the
+     * card by its own heading.
+     */
+    as?: CardElement | undefined;
+    /**
+     * The whole card goes somewhere. It draws a REAL anchor: a card that
+     * navigates from a click handler cannot be opened in a tab, copied, or
+     * announced as a link.
+     */
+    href?: string | undefined;
+    /** Render the single child element as the card, for a router's own Link. */
+    asChild?: boolean | undefined;
+}
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The hairline under the header. ON by default: the header is a bar with a
+     * rule under it, which is the shape a reader meets on every screen. Turn it
+     * off for a card whose body is one paragraph, where a rule separates a title
+     * from the sentence that finishes it.
+     */
+    divided?: boolean | undefined;
+    /** A glyph before the title. Decoration: the title carries the meaning. */
+    icon?: ReactNode;
+    /** How many of something the card is about. */
+    count?: number | string | undefined;
+    /** A second line under the title. It truncates; a title does not. */
+    subtitle?: ReactNode;
+    /** The card's own controls, at the end of the header row. */
+    actions?: ReactNode;
+}
+export interface CardSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * This section's own padding. It is APPLIED, rather than declared and passed
+     * to the DOM: the prop used to fall through into the rest spread and render
+     * as a `padding="md"` attribute on a div, where it did nothing at all.
+     */
+    padding?: CardSectionPadding | undefined;
+}
+export type CardFooterVariant = 
+/** Buttons, at the end of the row. */
+'actions'
+/** A quiet strip of facts: a count, a timestamp, a source. */
+ | 'meta';
+export interface CardFooterProps extends CardSectionProps {
+    variant?: CardFooterVariant | undefined;
+}
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Overrides the heading element. By default the title takes the level the
+     * surrounding surface declares, so the same card is an `h3` under a section
+     * heading and an `h2` at the top of a page.
+     */
+    as?: `h${HeadingLevel}` | undefined;
+    /**
+     * A title with nowhere left to go ENDS in an ellipsis rather than being cut.
+     *
+     * The head is one line and the name block clips, so a title longer than the
+     * row is stopped at the header's edge — mid-word, with nothing to say a word
+     * was lost. `text-overflow` is the answer to that and it applies to a BLOCK
+     * container only, never to a flex one, and the title is flex: the text
+     * inside it is an anonymous flex item that no rule in this stylesheet can
+     * reach. So the ellipsis is a change of the title's own display, which is a
+     * change to what a caller's own children do inside it, which is why it is
+     * asked for rather than assumed.
+     *
+     * OFF BY DEFAULT, because it is not free: a truncating title lays its
+     * children out as one line of inline content instead of as centred,
+     * gap-separated flex items, so a caller who put a glyph or a tag inside the
+     * title gets it on the text baseline with no gap. `Card.Header`'s own `icon`
+     * slot is where a glyph belongs, and it is outside the title and unaffected.
+     * A title of plain text — which is every title in this package and every one
+     * in the engine dashboard — reads identically either way, and is exactly the
+     * case that was being cut.
+     */
+    truncate?: boolean | undefined;
+}
+export declare const Card: (({ variant, padding, interactive, rail, selected, as, href, asChild, className, children, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element) & {
+    Header: ({ divided, icon, count, subtitle, actions, className, children, ...rest }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ padding, className, children, ...rest }: CardSectionProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ variant, padding, className, children, ...rest }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ as, truncate, className, children, ...rest }: CardTitleProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ className, children, ...rest }: HTMLAttributes<HTMLParagraphElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/Card/headerSlot.d.ts

@@ -0,0 +1,65 @@
+/**
+ * The seam a card's header offers the panel inside it: a place on the header
+ * row for that panel's OWN controls.
+ *
+ * WHY A SEAM RATHER THAN A PROP THE CALLER WIRES. A table's pager and its
+ * settings cog are the table's: their state is inside it, they move with its
+ * pages and they open its frame. A card's header is the card's. Drawing the
+ * first inside the second is therefore something neither component can do
+ * alone, and every way of faking it puts the join in the CALLER: the screen
+ * lifts the table's page into its own state so it can hand a pager to
+ * `Card.Header`'s `actions`, or it leaves the table's own bar where it is and
+ * pulls it up with a stylesheet of its own. The first makes every panel
+ * restate what the table already knows; the second is a rule about class names
+ * that no test holds and no reader of the card can see.
+ *
+ * So the card publishes a slot and the panel draws into it, through the React
+ * tree the two already share. The caller composes what it always composed:
+ * a card, a header, a table.
+ *
+ * THE SLOT IS TAKEN BY ONE PANEL. A card holding two tables would otherwise
+ * put two pagers and two cogs on one header row, each belonging to rows the
+ * reader cannot tell apart. The first to ask holds it; anybody else is told no
+ * and keeps its own bar, which is the shape it has outside a card anyway.
+ */
+/** What the card offers, as its header sees it. Internal to [Card]. */
+export interface CardHeaderSlot {
+    /**
+     * This card draws a header, so there IS a row to sit in. Read from the
+     * card's own children at render time rather than reported by the header
+     * from an effect: a panel has to know where its controls go on the first
+     * frame, and a header that announced itself one commit later would have
+     * every table draw a bar and then take it away again.
+     */
+    hasHeader: boolean;
+    /** The node to draw into. Null until the header has rendered one. */
+    node: HTMLElement | null;
+    /** Takes the row. True to the one holder; false to everybody after it. */
+    claim: (claimant: object) => boolean;
+    /** Gives it back, so a panel that unmounts does not hold an empty header. */
+    release: (claimant: object) => void;
+}
+export declare const CardHeaderSlotContext: import("react").Context<CardHeaderSlot | null>;
+/** Where a panel's own controls are drawn, once it has asked for a header. */
+export interface CardHeaderChrome {
+    /**
+     * A card's header is drawing them, so the panel draws no bar of its own.
+     * True from the FIRST render inside a card that has a header, before
+     * [CardHeaderChrome.node] exists, so nothing is ever drawn in two places.
+     */
+    hosted: boolean;
+    /** The node to render into, or null while there is nowhere yet. */
+    node: HTMLElement | null;
+}
+/**
+ * Asks the card above for its header row.
+ *
+ * `wanted` is whether this panel has controls to put there at all: a table
+ * with no pager and no cog asks for nothing, so the card's header stays free
+ * for a second table that does have them.
+ *
+ * The answer is a value rather than a rendered node, so the caller keeps its
+ * own controls and decides where to put them; what it gets back is the two
+ * facts it cannot work out for itself.
+ */
+export declare function useCardHeaderSlot(wanted: boolean): CardHeaderChrome;

package/dist/Card/index.d.ts

@@ -0,0 +1,5 @@
+import './Card.css';
+export { Card } from './Card.js';
+export { useCardHeaderSlot } from './headerSlot.js';
+export type { CardHeaderChrome } from './headerSlot.js';
+export type { CardProps, CardHeaderProps, CardSectionProps, CardFooterProps, CardFooterVariant, CardTitleProps, CardVariant, CardPadding, CardSectionPadding, CardRail, CardElement, } from './Card.js';

package/dist/Card/index.js

@@ -0,0 +1,6 @@
+export { Card } from '../chunk-NDCATSW7.js';
+export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Card-RLR254LD.css

@@ -0,0 +1,450 @@
+/*
+ * Card, THE surface. Everything on a screen is a card, a row inside one, or a
+ * control.
+ *
+ * TWO RECIPES, and the engine dashboard's panel is the second. A card given
+ * raw children is a padded block that lifts off the page. A card built from
+ * Header, Body and Footer is FLUSH: it carries no padding of its own, its
+ * slots carry theirs, and it clips them to its own radius, so the header's
+ * hairline and a table's first row reach the card's edges instead of stopping
+ * short of them. The component picks the recipe from what it was given.
+ *
+ * A flush card's own content, where it holds any beside its slots, is drawn in
+ * a body: see Card.tsx. Without that the header sits at the card's inset and
+ * the sentence under it against the border, which is the shape this file's
+ * `p-none` used to leave behind.
+ */
+
+.crewlet-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background-color: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  color: var(--color-text-primary);
+}
+
+/*
+ * TWO GROUNDS, TWO DEVICES. On light the shadow is the elevation; on dark a
+ * shadow over a dark page is nearly invisible, so the hairline along the top
+ * edge does the job instead.
+ *
+ * THE HAIRLINE IS ON ITS OWN ELEMENT, and that is the whole reason the rule is
+ * two rules. `--shadow-hairline` is `none` in the light theme, and `none` is a
+ * value a shadow list may not carry: `box-shadow: <shadow>, none` is invalid at
+ * computed-value time, so the declaration is dropped and the light card loses
+ * the elevation the list was built around. Alone on a pseudo element the same
+ * token is valid in both themes, and it composes with the selection ring
+ * rather than replacing whichever was declared last, exactly as the rail does.
+ */
+.crewlet-card--default:not(.crewlet-card--flush) {
+  box-shadow: var(--shadow-xs);
+}
+
+.crewlet-card--default:not(.crewlet-card--flush)::after,
+.crewlet-card--elevated::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: var(--shadow-hairline);
+}
+
+.crewlet-card--default {
+  background-color: var(--color-surface-subtle);
+}
+
+/*
+ * THE TILE: the panel's ground with none of its lift. One of many in a grid,
+ * where a shadow under every card turns a list of records into a relief map.
+ *
+ * It used to take the PAGE's ground, which is a card drawn in the colour of
+ * the thing behind it: on the light palette a white tile on a white page, held
+ * together by its hairline alone, and on dark the same trick one step darker
+ * than the panel beside it. The ground here is the one every other card
+ * already stands on, so every ink measured against a card is measured against
+ * this too.
+ */
+.crewlet-card--subtle {
+  background-color: var(--color-surface-subtle);
+}
+
+.crewlet-card--outlined {
+  background-color: transparent;
+  border-color: var(--color-border-strong);
+}
+
+/*
+ * A well rather than a panel: the inset ground, and the tighter radius that
+ * says it is a block INSIDE a card rather than a card of its own.
+ */
+.crewlet-card--inset {
+  background-color: var(--color-surface-inset);
+  border-color: transparent;
+  border-radius: var(--radius-md);
+}
+
+/*
+ * A card that is not the page's main surface: the same ground, the tighter
+ * radius, and no elevation at all. It is what a nested block takes so two
+ * borders at the same radius do not read as one box drawn twice.
+ */
+.crewlet-card--quiet {
+  background-color: var(--color-surface-subtle);
+  border-radius: var(--radius-md);
+}
+
+.crewlet-card--elevated {
+  background-color: var(--color-surface-elevated);
+  box-shadow: var(--shadow-md);
+}
+
+/*
+ * Not a record yet. A dashed boundary says "this slot is defined and empty"
+ * where a solid one would claim there is something in it.
+ */
+.crewlet-card--dashed {
+  background-color: transparent;
+  border-style: dashed;
+}
+
+/*
+ * THE FLUSH RECIPE. The slots reach the card's edges, and the clip is what
+ * makes the header's hairline and a table's own corners follow the radius
+ * instead of crossing it. The selection ring survives the clip because it is
+ * an INSET shadow; an outset one would be cut off here.
+ */
+.crewlet-card--flush {
+  overflow: hidden;
+}
+
+/* ---- The inset scale ---------------------------------------------------- */
+
+/*
+ * ONE WORD, ONE INSET, wherever it is said. A card's own padding, a body's and
+ * a footer's are the same five steps, because they are one decision asked at
+ * three levels. They used to be two scales that shared two words: `tight` was
+ * 12px on every edge on the card and a vertical-only step in a section, and
+ * `md` was 16px on every edge on the card and on a body and 8px over 16px on a
+ * footer. A caller who read the card's steps and wrote one on a body got a
+ * different inset, with nothing to say so.
+ *
+ * TIGHT IS THE TILE'S INSET, on every edge: one of many records in a grid,
+ * where at the panel's own step each tile spends a third of its height on air
+ * and the grid reads as a page of panels rather than as a list.
+ *
+ * SM IS VERTICAL ONLY, because a card has ONE left edge and its header sets
+ * it. Reducing the horizontal inset too puts content on a different vertical
+ * line from the title above it, and pushes a code block against the card's
+ * right edge with nowhere for its scrollbar to sit. What it is for is content
+ * whose rows carry their own vertical rhythm, which is a claim about height
+ * rather than about the edge.
+ *
+ * The step is the ONLY place any of these three declares a padding, so no base
+ * rule ties with a step on specificity and wins on source order instead.
+ */
+.crewlet-card--p-none,
+.crewlet-card__body--p-none,
+.crewlet-card__footer--p-none {
+  padding: 0;
+}
+
+.crewlet-card--p-tight,
+.crewlet-card__body--p-tight,
+.crewlet-card__footer--p-tight {
+  padding: var(--spacing-3);
+}
+
+.crewlet-card--p-sm,
+.crewlet-card__body--p-sm,
+.crewlet-card__footer--p-sm {
+  padding: var(--spacing-2) var(--spacing-4);
+}
+
+.crewlet-card--p-md,
+.crewlet-card__body--p-md,
+.crewlet-card__footer--p-md {
+  padding: var(--spacing-4);
+}
+
+.crewlet-card--p-lg,
+.crewlet-card__body--p-lg,
+.crewlet-card__footer--p-lg {
+  padding: var(--spacing-5) var(--spacing-6);
+}
+
+/* ---- Interaction ------------------------------------------------------- */
+
+.crewlet-card.is-interactive {
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    border-color var(--motion-duration-base) var(--motion-easing-default),
+    box-shadow var(--motion-duration-base) var(--motion-easing-default);
+}
+
+.crewlet-card.is-interactive:hover {
+  border-color: var(--color-border-hover);
+  box-shadow: var(--shadow-md);
+}
+
+.crewlet-card.is-interactive:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/*
+ * Chosen. A ring rather than a tint, because a card carries its own surface
+ * and a tint under it would change the ground every value on it was measured
+ * against.
+ */
+.crewlet-card.is-selected {
+  box-shadow: var(--shadow-selection);
+  border-color: var(--color-brand-accent);
+}
+
+/* ---- Rails ------------------------------------------------------------- */
+
+/*
+ * A state down the leading edge. Drawn as a pseudo element rather than a
+ * border or an inset shadow, so it composes with the elevated shadow and the
+ * selection ring instead of replacing whichever one was declared last.
+ */
+.crewlet-card--rail-info::before,
+.crewlet-card--rail-warning::before,
+.crewlet-card--rail-danger::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 3px;
+  border-start-start-radius: var(--radius-lg);
+  border-end-start-radius: var(--radius-lg);
+}
+
+.crewlet-card--rail-info::before {
+  background: var(--color-feedback-info);
+}
+
+.crewlet-card--rail-warning::before {
+  background: var(--color-feedback-warning);
+}
+
+.crewlet-card--rail-danger::before {
+  background: var(--color-feedback-danger);
+}
+
+/* ---- Slots ------------------------------------------------------------- */
+
+/*
+ * The panel head: ONE LINE, at the card's own inset, with the rule under it
+ * reaching both edges. `--size-row-lg` is the floor, so a row of nothing but a
+ * title stands as tall as the rows on every other card; a control taller than
+ * what is left of it after the inset raises the row, which is what a head with
+ * a button in it draws.
+ */
+.crewlet-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-3) var(--spacing-4);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+/*
+ * A head with nothing under it to separate from: a card whose body is prose
+ * rather than rows. It keeps the inset and gives up the rule.
+ */
+.crewlet-card__header--plain {
+  border-bottom: none;
+}
+
+/*
+ * The name block. It CLIPS, because the head is one line: a title with nowhere
+ * left to go is cut at the row's end rather than allowed to spill across the
+ * controls beside it.
+ */
+.crewlet-card__header-main {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.crewlet-card__header-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * The actions take the end of the row, and the auto margin is the spacer
+ * between them and the title block. Not `justify-content: space-between`: the
+ * subtitle is a third child, and space-between would push it into the middle
+ * of the line rather than leaving it beside the name it belongs to.
+ */
+.crewlet-card__header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex: none;
+  margin-inline-start: auto;
+}
+
+/*
+ * The panel's own controls: a table's pager and its settings cog, drawn on
+ * this row rather than in a bar of their own under it. See Card/headerSlot.ts
+ * for how they get here.
+ *
+ * NO BOX WHEN THERE IS NOTHING IN IT. Every header inside a card renders this
+ * node, because the panel that might fill it is below the header in the tree.
+ * An empty one that still laid out would open the row's gap on every card in
+ * the product for a control nobody drew.
+ */
+.crewlet-card__header-chrome {
+  display: flex;
+  align-items: center;
+  flex: none;
+  margin-inline-start: auto;
+}
+
+.crewlet-card__header-chrome:empty {
+  display: none;
+}
+
+/*
+ * The card's own actions take the end of the row and the panel's controls
+ * close onto them, so the cog stays the last thing on the line. Without this
+ * both carry the auto margin, and two auto margins SPLIT the free space: the
+ * card's actions would drift into the middle of its own header.
+ */
+.crewlet-card__header-actions ~ .crewlet-card__header-chrome {
+  margin-inline-start: 0;
+}
+
+/*
+ * The panel body. Its inset is a step of the scale above, and a card's own
+ * children are drawn in one of these whenever its slots have made it flush:
+ * see Card.tsx.
+ */
+.crewlet-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+/*
+ * The panel foot: a quiet strip at the card's inset, in the caption register.
+ * A row of buttons carries its own ink, so the tertiary step here is what the
+ * facts beside them take.
+ */
+.crewlet-card__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  border-top: 1px solid var(--color-border-default);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-card__footer--actions {
+  justify-content: flex-end;
+}
+
+.crewlet-card__footer--meta {
+  justify-content: flex-start;
+}
+
+/* A footer with no inset has no rule either: there is no strip left to draw. */
+.crewlet-card__footer--p-none {
+  border-top: none;
+}
+
+/*
+ * The page's leading rather than the baseline's heading leading. The title is
+ * a heading element, and it shares one row with a subtitle, a count and the
+ * card's own controls: at the tight step it is the one thing in the header on
+ * a different rhythm from everything beside it, which is what made a head with
+ * a button in it a pixel taller than one without.
+ */
+.crewlet-card__title {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  /*
+   * ONE LINE, which is the head's own rule. Left to wrap, a title one pixel
+   * wider than the space the subtitle beside it had left broke over two lines
+   * and took the whole head from 48px to 67px: at 1100px wide, "By model" was
+   * drawn as "By" over "model" while the subtitle beside it still had a tail
+   * to give up. Which is what the subtitle does first; see below.
+   */
+  white-space: nowrap;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-normal);
+  letter-spacing: var(--font-letter-spacing-tight);
+  color: var(--color-text-primary);
+}
+
+/*
+ * A TITLE THAT ENDS RATHER THAN STOPS, where a caller has asked for it.
+ *
+ * The name block clips, which is what keeps the head one line, so a title
+ * wider than the row is cut at the header's edge — mid-word, with nothing to
+ * say a word was lost. `text-overflow` is the rule that says it, and it
+ * applies to a BLOCK container only: on the flex title above it does nothing
+ * at all, and the text it would act on is an anonymous flex item that no
+ * selector here can reach. So the modifier makes the title a block. Its
+ * children are then one line of inline content rather than centred flex items
+ * with a gap between them, which is the whole of what a caller opts into, and
+ * why this is a modifier rather than the base rule.
+ *
+ * `white-space: nowrap` is already the title's own, and `min-width: 0` is what
+ * lets the block shrink below its content inside the name block; both stand.
+ */
+.crewlet-card__title--truncate {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*
+ * The subtitle gives up its tail and the title does not: a title is the
+ * record's identity and has to be read in full, while a subtitle is context.
+ *
+ * WHICH IS WHAT THE SHRINK FACTOR SAYS. Two flex items that both may shrink
+ * give up space in proportion to their widths, so a head one pixel too narrow
+ * took that pixel off the title as well, and the title has nowhere to put it
+ * but a second line. At a hundred to the title's one the subtitle absorbs
+ * effectively all of it, down to nothing, before the title gives up a pixel.
+ */
+.crewlet-card__subtitle {
+  flex-shrink: 100;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.crewlet-card__description {
+  margin: 0;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-secondary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-card.is-interactive {
+    transition: none;
+  }
+}