@crewlethq/ui 0.2.0 → 0.3.0

package/dist/StatGroup-TGB6AEKM.css

@@ -0,0 +1,80 @@
+/*
+ * A row of stat tiles.
+ *
+ * ITS COLUMN COUNT NEVER MOVES with its contents. A grid that reflowed as
+ * tiles appeared and vanished moved every number on the page for a reason that
+ * had nothing to do with the numbers, which is exactly what a reader watching
+ * a live board is trying not to have happen.
+ */
+
+.crewlet-stat-group {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-stat-group-cols, 4), minmax(0, 1fr));
+  /* The flush-panel recipe: the surface, the hairline, the 12px corner and
+     `overflow: hidden`, which is what lets the tiles inside sit against the
+     corners without their own hairlines escaping past them. The engine puts
+     its stat row inside exactly this. */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xs), var(--shadow-hairline);
+  overflow: hidden;
+}
+
+/*
+ * A tile inside the row brings no surface of its own, whether or not its
+ * caller remembered `flush`. The group draws one card and the hairlines
+ * inside it, so a tile that kept its own border and radius is a card inside
+ * a card: a box inside a box, which is what the reader sees.
+ *
+ * TWO CLASSES, NOT :where(). Written as `> :where(.crewlet-statcard)` this
+ * weighed exactly what the tile's own `.crewlet-statcard` rule weighs, so
+ * which one painted was settled by whichever stylesheet the bundler put
+ * last. It put the tile's last, and every tile in every group drew its own
+ * border, its own 12px corner and its own surface inside the group's.
+ * Naming both classes settles it by weight, which no import order can undo.
+ */
+.crewlet-stat-group > .crewlet-statcard {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+  box-shadow: none;
+}
+
+/*
+ * A hairline between columns, drawn on the tile that follows one.
+ *
+ * NAMED TWICE, ON PURPOSE. The rule above clears the tile's own border and
+ * weighs two classes, so a one-class selector here loses to it and the row
+ * of numbers runs together with nothing between the columns. The first
+ * selector matches whatever a caller puts in the row; the second weighs the
+ * same as the rule it has to beat, and sits after it.
+ */
+.crewlet-stat-group > * + *,
+.crewlet-stat-group > .crewlet-statcard + .crewlet-statcard {
+  border-left: 1px solid var(--color-border-default);
+}
+
+/*
+ * Two columns under the shell breakpoint, which is where the engine drops its
+ * own stat row: 900px is a 280px rail plus a 620px content column, so it is
+ * the width at which a four-up row of numbers stops having a column each. The
+ * rules are written for the general case rather than per column count: the
+ * first tile of each pair loses its left hairline, and everything on the
+ * second row and below gains a top one.
+ */
+@media (max-width: 900px) {
+  .crewlet-stat-group {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .crewlet-stat-group > *:nth-child(odd),
+  .crewlet-stat-group > .crewlet-statcard:nth-child(odd) {
+    border-left: 0;
+  }
+
+  .crewlet-stat-group > *:nth-child(n + 3),
+  .crewlet-stat-group > .crewlet-statcard:nth-child(n + 3) {
+    border-top: 1px solid var(--color-border-default);
+  }
+}

package/dist/StatusDot/StatusDot.d.ts

@@ -0,0 +1,25 @@
+import type { PhaseTone, Tone } from '../utils/tone.js';
+export interface StatusDotProps {
+    /** Which state, or which phase. Neutral says "nothing in particular". */
+    tone?: Tone | PhaseTone | undefined;
+    /**
+     * A slow pulse, for a state that is still happening. Held still under a
+     * reduced-motion preference, where the mark still reads as its tone.
+     */
+    pulse?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * The shape half of a status.
+ *
+ * COLOUR IS NEVER THE ONLY CARRIER. Every dot sits beside its own word, and
+ * the dot is `aria-hidden` for exactly that reason: a screen reader that read
+ * both would say the state twice, and one that read only the dot would say
+ * nothing at all. If a dot has no word beside it, the dot is the wrong
+ * component and a Tag is the right one.
+ *
+ * Its fill is the tone's own fill step, which clears 3:1 against every surface
+ * it can sit on, because a mark is read the way a glyph is rather than the way
+ * text is.
+ */
+export declare function StatusDot({ tone, pulse, className }: StatusDotProps): import("react/jsx-runtime").JSX.Element;

package/dist/StatusDot/index.d.ts

@@ -0,0 +1,3 @@
+import './StatusDot.css';
+export { StatusDot } from './StatusDot.js';
+export type { StatusDotProps } from './StatusDot.js';

package/dist/StatusDot/index.js

@@ -0,0 +1,2 @@
+export { StatusDot } from '../chunk-PZSWF74H.js';
+import '../chunk-ODEQTPFM.js';

package/dist/StatusDot-HA2L2FSX.css

@@ -0,0 +1,84 @@
+/*
+ * The status dot: a 6px mark in its tone's fill, beside the word it belongs
+ * to. See the component doc for why it is hidden from assistive technology.
+ */
+
+.crewlet-status-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-circle);
+  /*
+   * The quiet state is still a mark, so it takes the tertiary step rather than
+   * the decoration one the engine spends here: a 6px dot has to clear 3:1 to
+   * be seen at all, and --color-text-muted measures 2.33:1 on a light page and
+   * 2.25:1 on a dark one at their worst grounds. The tertiary step measures
+   * 4.87:1 and 4.65:1 on the same pair, and is the nearest step that holds.
+   */
+  background: var(--color-text-tertiary);
+  flex: none;
+}
+
+.crewlet-status-dot--info {
+  background: var(--color-feedback-info);
+}
+
+.crewlet-status-dot--success {
+  background: var(--color-feedback-success);
+}
+
+.crewlet-status-dot--warning {
+  background: var(--color-feedback-warning);
+}
+
+.crewlet-status-dot--danger {
+  background: var(--color-feedback-danger);
+}
+
+.crewlet-status-dot--brand {
+  background: var(--color-brand-accent);
+}
+
+.crewlet-status-dot--phase-onboarding {
+  background: var(--color-phase-onboarding);
+}
+
+.crewlet-status-dot--phase-execute {
+  background: var(--color-phase-execute);
+}
+
+.crewlet-status-dot--phase-review {
+  background: var(--color-phase-review);
+}
+
+/*
+ * Still happening. Three things are deliberate: the pulse never goes to
+ * nothing, because a mark that disappears reads as a fault rather than as work
+ * in progress; it alternates rather than sawtooths, so the mark comes back the
+ * way it went; and the round trip is 1.8s, which is the engine's own breath
+ * and is 0.55 flashes a second, well clear of the three that are a seizure
+ * risk. Three of the slow step each way makes that round trip.
+ */
+.crewlet-status-dot.is-pulsing {
+  animation: crewlet-status-dot-pulse calc(var(--motion-duration-slow) * 3) var(--motion-easing-default) infinite
+    alternate;
+}
+
+@keyframes crewlet-status-dot-pulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.35;
+  }
+}
+
+/*
+ * A mark that cannot move should not pretend to. The dot still reads as its
+ * tone, and the word beside it still says what is happening.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-status-dot.is-pulsing {
+    animation: none;
+  }
+}

package/dist/Switch/Switch.d.ts

@@ -0,0 +1,38 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** What the setting is, and the switch's NAME. */
+    label: ReactNode;
+    /** What turning it on does, when the label alone does not say. */
+    description?: ReactNode;
+    /** The bordered row a settings list uses for a decision that stands on its own. */
+    framed?: boolean;
+    /** The new state, for a caller that does not want to read it off an event. */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * A setting that is on or off, and takes effect as it is switched.
+ *
+ * NOT A CHECKBOX, and the difference is not decoration. A checkbox is an
+ * answer to a question the form asks and is read when the form is saved; a
+ * switch IS the change, applied the moment it moves. A screen reader says
+ * "on" and "off" for one and "ticked" and "unticked" for the other, and a
+ * reader told a webhook is "unticked" has to work out what that means for a
+ * delivery. This is what the two vendor screens were drawing as an On and Off
+ * select, which is a third spelling of the same thing.
+ *
+ * IT IS A REAL CHECKBOX INPUT wearing `role="switch"`, so Space toggles it,
+ * a form submits it and a label points at it without any of that being
+ * rebuilt. What the role changes is what it is called out loud.
+ *
+ * AND ITS STATE IS THE INPUT'S OWN, with no `aria-checked` attribute beside
+ * it. The role maps the element's checkedness to `aria-checked` already, and
+ * a second copy written as an attribute is one a browser does not update:
+ * left uncontrolled, or toggled by a reader before the caller's state lands,
+ * the attribute says one thing while the control shows another, and a screen
+ * reader reads the attribute.
+ *
+ * THE TRACK CARRIES A 3:1 BOUNDARY IN BOTH STATES. Drawn as two fills alone,
+ * off is a grey pill on a grey panel: the control most likely to be missed
+ * entirely is the one that says whether a thing is running.
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Switch/index.d.ts

@@ -0,0 +1,3 @@
+import './Switch.css';
+export { Switch } from './Switch.js';
+export type { SwitchProps } from './Switch.js';

package/dist/Switch/index.js

@@ -0,0 +1,2 @@
+export { Switch } from '../chunk-EV6IMYJ6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Switch-U4OWK4CL.css

@@ -0,0 +1,169 @@
+/*
+ * Switch: a setting that takes effect as it moves.
+ *
+ * The native checkbox is still the control. It is drawn over the track at
+ * full size and zero opacity rather than hidden, so the pointer hits the real
+ * input and nothing here has to rebuild Space, the label association or form
+ * submission.
+ *
+ * What zero opacity costs is the one thing the control cannot do: be seen. Its
+ * ring is drawn on the TRACK, keyed on the control's own focus, because an
+ * outline on an element at zero alpha is an outline nobody is shown. See the
+ * rule at the bottom of this file.
+ */
+
+.crewlet-switch {
+  --crewlet-switch-width: 36px;
+  --crewlet-switch-height: 20px;
+  --crewlet-switch-thumb: 14px;
+  --crewlet-switch-inset: 3px;
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  min-height: var(--size-row-sm);
+  /*
+   * The label's size, on the row, because the track below is placed against
+   * the label's first LINE in `em` and `em` on the track is the size it
+   * inherits. Left off, the sum was computed against whatever body size an
+   * application happened to set.
+   */
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+
+.crewlet-switch__track {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  width: var(--crewlet-switch-width);
+  height: var(--crewlet-switch-height);
+  /*
+   * Centred on the label's first LINE, the same sum a Checkbox's box takes,
+   * so a form holding both does not draw two rows whose controls sit at two
+   * heights. The literal it replaces put a 20px track 2px below a 19.6px
+   * line, which is a track hanging under its own sentence.
+   */
+  margin-top: calc((var(--font-line-height-snug) * 1em - var(--crewlet-switch-height)) / 2);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-inset);
+  /*
+   * A REAL BOUNDARY IN BOTH STATES. Two fills alone leave "off" as a grey
+   * pill on a grey panel, and the control most likely to be missed is the one
+   * saying whether something is running.
+   */
+  border: 1px solid var(--color-border-control);
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-switch__control {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.crewlet-switch__thumb {
+  position: absolute;
+  top: var(--crewlet-switch-inset);
+  left: var(--crewlet-switch-inset);
+  width: var(--crewlet-switch-thumb);
+  height: var(--crewlet-switch-thumb);
+  border-radius: var(--radius-circle);
+  background: var(--color-text-on-accent);
+  box-shadow: var(--shadow-xs);
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* Off, the thumb rides the neutral track and needs its own contrast. */
+.crewlet-switch__control:not(:checked) ~ .crewlet-switch__thumb {
+  background: var(--color-text-secondary);
+}
+
+.crewlet-switch__control:checked ~ .crewlet-switch__thumb {
+  transform: translateX(
+    calc(var(--crewlet-switch-width) - var(--crewlet-switch-thumb) - var(--crewlet-switch-inset) * 2 - 2px)
+  );
+}
+
+.crewlet-switch__track:has(.crewlet-switch__control:checked) {
+  background: var(--color-brand-accent);
+  border-color: var(--color-brand-accent);
+}
+
+/*
+ * THE RING IS DRAWN ON THE TRACK, NOT ON THE CONTROL.
+ *
+ * The control is still what takes focus, and the rule this replaces put the
+ * ring on it for exactly that reason. It painted nothing: the control carries
+ * `opacity: 0`, and opacity applies to the WHOLE of an element's rendering,
+ * its outline included. A keyboard reader tabbing onto a switch was shown no
+ * indicator at all, measured on a screenshot of the focused control. It is the
+ * one failure a focus rule can have that reading the computed style does not
+ * reveal: `outline: solid 2px rgb(84, 105, 212)` was there the whole time, at
+ * zero alpha.
+ *
+ * So it moves to the track, which is what a reader sees, keyed on the
+ * control's own :focus-visible. The track is the same box: the control is
+ * `inset: 0` over it.
+ *
+ * OUTSET, like a Checkbox's and unlike a text field's. A 20px pill has no
+ * room to draw a ring inside itself, and there is no boundary to cover out
+ * there either: the track's own border goes the accent colour of its fill
+ * when the switch is on, so the ring is the only edge in that space.
+ */
+.crewlet-switch__track:has(.crewlet-switch__control:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-switch__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  user-select: none;
+  min-width: 0;
+}
+
+.crewlet-switch__label {
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+}
+
+.crewlet-switch__description {
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-tertiary);
+}
+
+/* The same frame a Checkbox's row draws, because it is the same row: a
+   boundary on the dialog's own body, and no surface of its own. */
+.crewlet-switch--framed {
+  gap: var(--spacing-3);
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+}
+
+.crewlet-switch.is-disabled,
+.crewlet-switch.is-disabled .crewlet-switch__control {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/*
+ * The thumb ARRIVES rather than slides. The state still changes and the track
+ * still recolours; what stops is the travel, which is the part that makes a
+ * reader with a vestibular disorder look away from the control they are using.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-switch__track,
+  .crewlet-switch__thumb {
+    transition: none;
+  }
+}

package/dist/Table/Table.d.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+/**
+ * A small table of rows and columns, given as arrays.
+ *
+ * IT IS A REAL TABLE NOW. It used to be a grid of divs and spans, which reads
+ * to a screen reader as a pile of text: no columns, no header association, and
+ * no way to ask what column a cell is in. A reader arriving at "3" in the
+ * fourth row learned nothing about which of four figures it was. The look is
+ * unchanged, because the look was never the problem.
+ *
+ * WHEN TO USE IT, and when not to. This is the table you build from arrays you
+ * already have: a comparison, a summary, a handful of rows inside a dialog.
+ * Anything with sorting, pagination, column choices, row actions or live rows
+ * is a DataTable, which has all of those and a column type to describe them
+ * with.
+ *
+ * Cells are nodes, so a cell may hold a Tag, a link or a glyph. A caption
+ * names the table for anybody who cannot see the heading above it; keep it if
+ * the surrounding text does not already say what the rows are.
+ */
+export interface TableActionButton {
+    label: ReactNode;
+    onClick: () => void;
+}
+export interface TableProps {
+    headers: ReactNode[];
+    /** One array per row, in the header's own order. Cells may be any node. */
+    data: ReactNode[][];
+    /**
+     * What the table is about, rendered as its `<caption>`.
+     *
+     * `captionHidden` keeps it in the accessibility tree and takes it off the
+     * screen, for a table whose heading is already visible right above it: a
+     * name a screen reader can use, without saying the same words twice.
+     */
+    caption?: ReactNode;
+    captionHidden?: boolean;
+    emptyMessage?: ReactNode;
+    actionButton?: TableActionButton;
+    /**
+     * How tall the rows may get before they scroll, as a CSS length.
+     *
+     * A table given one becomes its own vertical scroller and its header sticks,
+     * so the column names stay on screen while the rows move under them. Without
+     * it the table is as tall as its rows and the page is what scrolls, which is
+     * the right answer for the handful of rows this component is for.
+     */
+    maxHeight?: string;
+    className?: string;
+}
+export declare const Table: ({ headers, data, caption, captionHidden, emptyMessage, actionButton, maxHeight, className, }: TableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/index.d.ts

@@ -0,0 +1,3 @@
+import './Table.css';
+export { Table } from './Table.js';
+export type { TableProps, TableActionButton } from './Table.js';

package/dist/Table/index.js

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

package/dist/Table-MDOLVUAW.css

@@ -0,0 +1,159 @@
+/*
+ * Table: the operator's table, on the elements a table is made of.
+ *
+ * ONE TABLE REGISTER FOR THE WHOLE PRODUCT, and this is it: a micro-label
+ * header on the panel's own ground, hairline rows, cells at the compact step,
+ * and a row as tall as the row token every other list in the system uses. The
+ * DataTable below carries the same values; the two differ in what they DO
+ * (sorting, columns, pagination), never in what a row looks like.
+ */
+.crewlet-table {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  /*
+   * THE FRAME IS THE TABLE'S, NOT THE SCROLLER'S. The boundary and the radius
+   * used to sit on the scroller inside, which put the action row underneath
+   * the frame as a loose word on the page, and let a sideways scroll carry the
+   * table's own edge out of view. Here the frame clips a header band that runs
+   * to the edge and a foot that is fenced from the rows above it, which is the
+   * flush panel every table on the dashboard sits in.
+   */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.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);
+  max-height: var(--crewlet-table-max-height, none);
+  overscroll-behavior-x: contain;
+  flex: 1;
+  min-width: 0;
+}
+
+.crewlet-table__table {
+  width: 100%;
+  border-collapse: collapse;
+  /* The compact step is the table's own: a cell is scanned down a column
+     rather than read as a sentence, and 13px is where a row of them still
+     lines up against the 36px row token. */
+  font-size: var(--font-size-compact);
+  /* Fixed layout is the equal-width columns the grid drew, and it also stops
+     one long cell dragging the whole table sideways. */
+  table-layout: fixed;
+}
+
+.crewlet-table__caption {
+  padding: var(--spacing-3) var(--spacing-3) 0;
+  text-align: left;
+  font-size: var(--font-size-compact);
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * THE HEADER IS A MICRO-LABEL, NOT A ROW OF WORDS. A column name is read once,
+ * at a glance, to find the column; drawn at the body step in the row's own ink
+ * it competed with the values under it for the same attention. The uppercase
+ * step at the tertiary ink is the register every other label of its kind in
+ * the system takes, and it is measured on the panel ground it is painted on.
+ *
+ * Sticky, so a table given a height keeps its column names while its rows
+ * scroll past. It costs nothing when there is no vertical scroller, and it is
+ * the difference between a long table that can be read and one that cannot.
+ */
+.crewlet-table__table th {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-index-sticky);
+  padding: var(--spacing-2) var(--spacing-3);
+  text-align: left;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  background: var(--color-surface-subtle);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-table__table td {
+  padding: var(--spacing-2) var(--spacing-3);
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border-default);
+  vertical-align: middle;
+  /* The row token, so a table lines up with every other list in a product and
+     a cell holding one word is as tall as a cell holding an avatar. */
+  height: var(--size-row-md);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-table__table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/*
+ * NO HOVER ON A ROW THAT DOES NOTHING. Every row used to light up under the
+ * pointer, which is an affordance: it says the row can be pressed, and in this
+ * table no row can. A tint that promises a press nothing answers is worse than
+ * no tint at all. DataTable carries the hover, because there a row really is
+ * a control.
+ */
+
+.crewlet-table__empty {
+  padding: var(--spacing-7) var(--spacing-3);
+  text-align: center;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+}
+
+/*
+ * THE FOOT IS INSIDE THE FRAME, fenced by its own rule: it is a row of the
+ * panel rather than a word floating under it. It sits outside the scroller, so
+ * a table scrolled sideways does not carry its own footer off the screen.
+ */
+.crewlet-table__action-btn {
+  width: 100%;
+  padding: var(--spacing-2) var(--spacing-3);
+  background: none;
+  border: none;
+  border-top: 1px solid var(--color-border-default);
+  color: var(--color-brand-accent-ink);
+  font-family: inherit;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  text-align: center;
+}
+
+.crewlet-table__action-text {
+  display: inline-block;
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-sm);
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-table__action-btn:hover .crewlet-table__action-text {
+  background: var(--color-surface-hover);
+}
+
+/* Inset, because the foot sits on the frame's own clipped bottom edge and an
+   outset ring is cut away by it. */
+.crewlet-table__action-btn:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-table__action-text {
+    transition: none;
+  }
+}