@crewlethq/ui 0.2.0 → 0.3.0

package/dist/FilterChip/FilterChip.d.ts

@@ -0,0 +1,68 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+/**
+ * How a row of chips behaves: several on at once, or exactly one.
+ *
+ * The two are different CONTROLS, not two looks. A toggle group is a set of
+ * independent switches, each a button with a pressed state that Tab reaches;
+ * a radio group is one choice, where the arrows move inside it and Tab steps
+ * past the whole thing. A screen reader is told which of the two it is looking
+ * at, so this is a prop rather than a styling flag.
+ */
+export type FilterChipSemantics = 'toggle' | 'radio';
+/** The attribute the group finds its own chips by, without a registry to keep. */
+export declare const FILTER_CHIP_ATTRIBUTE = "data-crewlet-filter-chip";
+export interface FilterChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'value' | 'onChange'> {
+    /** Whether this filter is on. Inside a radio group it comes from the group. */
+    pressed?: boolean | undefined;
+    /** Called with what the state would become. */
+    onPressedChange?: ((pressed: boolean) => void) | undefined;
+    /** How many rows this filter leaves. Drawn after the label, in the chip's ink. */
+    count?: number | string | undefined;
+    /** What this chip stands for inside a radio group. */
+    value?: string | undefined;
+    children: ReactNode;
+}
+/**
+ * A filter that is off, or on.
+ *
+ * NEUTRAL UNTIL IT IS ON, and then it takes the accent. The accent is the one
+ * colour that means "where the reader is", and the thing currently narrowing
+ * the list is exactly that: the reader's own position in the data. A row of
+ * chips accented at rest would spend the colour on controls none of which is
+ * doing anything.
+ *
+ * It is a real `<button type="button">`. The chip this replaces declared no
+ * type, so every one of them inside a form submitted it.
+ */
+export declare function FilterChip({ pressed, onPressedChange, count, value, className, onClick, children, ...rest }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
+export interface FilterChipGroupProps {
+    /**
+     * What the row filters, read before the chips themselves: "Event kind",
+     * "Seat". REQUIRED, because a row of chips with no name is a row of words a
+     * screen reader reads with nothing to hang them on.
+     */
+    label: string;
+    semantics?: FilterChipSemantics | undefined;
+    /** The chosen value in radio mode. `null` is a deliberate none. */
+    value?: string | null | undefined;
+    onValueChange?: ((value: string | null) => void) | undefined;
+    /**
+     * Whether a second press on the chosen chip clears it. Off by default: a
+     * choice that can empty itself leaves a reader in a state with no answer,
+     * and most rows carry an explicit "All" chip instead.
+     */
+    allowNone?: boolean | undefined;
+    /** Hide the label visually. It stays in the accessibility tree. */
+    hideLabel?: boolean | undefined;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+/**
+ * A named row of filters.
+ *
+ * In radio mode the arrows move AND choose, which is what the platform's own
+ * radio group does: a reader arrowing through a set of choices is choosing,
+ * and a group where focus and selection come apart makes them press Space
+ * after every move for a reason they could not name.
+ */
+export declare function FilterChipGroup({ label, semantics, value, onValueChange, allowNone, hideLabel, className, children, }: FilterChipGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/FilterChip/index.d.ts

@@ -0,0 +1,3 @@
+import './FilterChip.css';
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './FilterChip.js';
+export type { FilterChipGroupProps, FilterChipProps, FilterChipSemantics } from './FilterChip.js';

package/dist/FilterChip/index.js

@@ -0,0 +1,3 @@
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-EPOOQZYA.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/FilterChip-GTGLLOXE.css

@@ -0,0 +1,107 @@
+/*
+ * The filter chip: neutral until it is on, and then the accent.
+ *
+ * WHY THE ACCENT HERE AND NOWHERE ELSE IN A ROW OF CONTROLS. The accent means
+ * "where the reader is". The filter currently narrowing a list is exactly
+ * that, so it is the one control in a toolbar entitled to the colour; a chip
+ * that carried it at rest would spend it on a row where nothing is happening.
+ *
+ * The pressed ground is the accent SOFT tint under the accent INK, the same
+ * measured pair a Tag uses, never the accent fill with a label on it: the fill
+ * step is measured as a mark at 3:1 and would put its own label under 4.5:1.
+ */
+
+.crewlet-filter-chip-group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/* The micro register: the same label step a Text `label` and a stat draw. */
+.crewlet-filter-chip-group__label {
+  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);
+}
+
+.crewlet-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  height: var(--size-control-sm);
+  /* The engine's own padding, and a full step tighter than 0.2.0 drew: a
+     Filter menu puts six of these in one row under a list, and the extra 4px
+     on each side was what pushed the sixth onto a second line. */
+  padding: 0 var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  background: transparent;
+  /*
+   * The QUIET step at rest. A chip that is off is an option a reader has not
+   * taken and the row of them is scanned rather than read; the one that is on
+   * is the only thing in the row entitled to say so, and it says it in the
+   * accent.
+   */
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  /* Regular, which is what the engine's chip inherits from the document. The
+     row is a set of equal options and a medium weight on every one of them
+     made a toolbar of six read as six headings. */
+  font-weight: var(--font-weight-regular);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-filter-chip:hover {
+  border-color: var(--color-border-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-filter-chip:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-filter-chip:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.crewlet-filter-chip[aria-pressed='true'],
+.crewlet-filter-chip[aria-checked='true'] {
+  background: var(--color-brand-accent-soft);
+  border-color: var(--color-brand-accent-soft-strong);
+  color: var(--color-brand-accent-ink);
+}
+
+/*
+ * The count takes the chip's own ink, in both states.
+ *
+ * The engine draws it in the DECORATION step, which measures 2.25:1 at its
+ * worst and is the one step this package refuses to put a word on: a number
+ * that says how far a filter narrows a list is a fact a reader acts on, not a
+ * hairline. It was already one step quieter than the label here, and the label
+ * has since come down to meet it, so inheriting is what the engine's two-tone
+ * pill now looks like anyway, one measured step higher.
+ */
+.crewlet-filter-chip__count {
+  font-variant-numeric: tabular-nums;
+  color: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-filter-chip {
+    transition: none;
+  }
+}

package/dist/Fullscreen/index.d.ts

@@ -0,0 +1,2 @@
+export { useFullscreen } from './useFullscreen.js';
+export type { Fullscreen } from './useFullscreen.js';

package/dist/Fullscreen/index.js

@@ -0,0 +1 @@
+export { useFullscreen } from '../chunk-XDTYBF2F.js';

package/dist/Fullscreen/useFullscreen.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The browser's fullscreen, for one element.
+ *
+ * WHAT IT IS FOR. A canvas, a chart or a diagram is the one thing on a screen
+ * that genuinely wants the whole window, and it is drawn from ONE element's
+ * subtree: a fullscreen element renders only what is inside it, so the surface
+ * that goes fullscreen has to be the one holding its own toolbar, its dialogs
+ * and its overlays. That is also why an overlay portals into the nearest
+ * `LayerHost` rather than into the body (see the Layer module): portalled to
+ * the body it would be outside the fullscreen element and simply not painted.
+ *
+ * NOT DRAWN WHERE THE API IS MISSING. iPhone Safari offers no element
+ * fullscreen at all, and a control that is drawn and then fails is worse than
+ * one that was never there, so `supported` is what a caller renders on.
+ *
+ * `supported` ASKS THE DOCUMENT, NOT THE ELEMENT. The engine's version read
+ * the element's own `requestFullscreen` in an effect, which answers false for
+ * as long as the ref is empty: a control inside a panel that mounts later was
+ * never drawn at all, on browsers that support it perfectly well.
+ */
+import { type RefObject } from 'react';
+export interface Fullscreen {
+    /** Whether this browser offers element fullscreen. A control that draws on it. */
+    supported: boolean;
+    /** Whether THIS element is the one the document is showing fullscreen. */
+    active: boolean;
+    enter: () => void;
+    exit: () => void;
+    toggle: () => void;
+}
+/** Drives fullscreen for `ref`, and reports whether it is the element showing. */
+export declare function useFullscreen(ref: RefObject<HTMLElement | null>): Fullscreen;

package/dist/IconButton/IconButton.d.ts

@@ -0,0 +1,45 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export type IconButtonSize = 'sm' | 'md' | 'lg';
+export type IconButtonVariant = 
+/** The bordered square: a secondary Button with no room for a label. */
+'secondary'
+/** Transparent, neutral ink, a surface tint on hover. */
+ | 'ghost'
+/** Transparent, the accent on hover. */
+ | 'ghost-brand'
+/** Transparent, the critical hue on hover. */
+ | 'ghost-danger'
+/** A soft accent square with a matching boundary: the add beside a label. */
+ | 'soft-brand';
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> {
+    /**
+     * What the button does, in words. REQUIRED, and not a convenience: an
+     * icon-only control has no text, so without this it is announced as
+     * "button" and a reader has to press it to find out what it was.
+     */
+    label: string;
+    /** The glyph. A component from @crewlethq/icons/glyphs, not a name. */
+    icon?: ReactNode;
+    size?: IconButtonSize | undefined;
+    variant?: IconButtonVariant | undefined;
+    /** Sets `aria-pressed`: a toggle that is on. */
+    pressed?: boolean | undefined;
+    /** Unavailable, and why. See Button's own prop for why it is not `disabled`. */
+    disabledReason?: string | undefined;
+    /** Render the single child element with these classes instead of a button. */
+    asChild?: boolean | undefined;
+    children?: ReactNode;
+}
+/**
+ * A square icon-only control: a row action, a copy, a drag handle, the close
+ * in a dialog's corner.
+ *
+ * ITS SMALLEST STEP IS 24px, not the 22 it was. A pointer target under 24px
+ * fails WCAG 2.2, and at compact density a 22px square was 18: this size, like
+ * every control step, is `--size-control-*`, which floors at 24 for that
+ * reason.
+ *
+ * Distinct from Button, which has a label slot and a text size. Anything with
+ * a word beside the glyph is a Button.
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/IconButton/index.d.ts

@@ -0,0 +1,3 @@
+import './IconButton.css';
+export { IconButton } from './IconButton.js';
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton.js';

package/dist/IconButton/index.js

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

package/dist/IconButton-VQGNMJDI.css

@@ -0,0 +1,158 @@
+/*
+ * IconButton: a square icon-only control.
+ *
+ * Three square steps, each a --size-control-* token, so an icon button sits
+ * exactly as tall as the button, select or input beside it at every density,
+ * and the smallest cannot fall under the 24px a pointer target needs.
+ *
+ * THE CORNER IS THE BUTTON'S. An icon-only control is the square case of the
+ * same control, so it takes --radius-md: a toolbar of six-pixel squares
+ * beside an eight-pixel button reads as two families of control.
+ */
+
+.crewlet-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  line-height: 1;
+  flex-shrink: 0;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* An outline, never a shadow alone: forced-colors mode keeps one and drops
+   the other. */
+.crewlet-icon-btn:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-icon-btn:disabled,
+.crewlet-icon-btn[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.crewlet-icon-btn:disabled {
+  pointer-events: none;
+}
+
+.crewlet-icon-btn--sm {
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+}
+
+.crewlet-icon-btn--md {
+  width: var(--size-control-md);
+  height: var(--size-control-md);
+}
+
+.crewlet-icon-btn--lg {
+  width: var(--size-control-lg);
+  height: var(--size-control-lg);
+}
+
+/*
+ * The glyph inside follows the button's step, at the ratio a label sets: a
+ * medium button draws its leading glyph at its own 13px text, so a square one
+ * drawing a 16px glyph put a heavier mark in the same toolbar row.
+ */
+.crewlet-icon-btn--sm .crewlet-glyph {
+  width: var(--font-size-xs);
+  height: var(--font-size-xs);
+}
+
+.crewlet-icon-btn--md .crewlet-glyph {
+  width: var(--font-size-sm);
+  height: var(--font-size-sm);
+}
+
+.crewlet-icon-btn--lg .crewlet-glyph {
+  width: var(--font-size-xl);
+  height: var(--font-size-xl);
+}
+
+/*
+ * secondary: the bordered square. The same surface, boundary and states as a
+ * secondary Button, for an icon-only control that has to read as a control
+ * with nothing around it to say so: a step in a toolbar, a month's back and
+ * forward, an add beside a field. Without it a call site drew a Button with
+ * no label and squared it off with a stylesheet of its own.
+ */
+.crewlet-icon-btn--secondary {
+  background: var(--color-surface-subtle);
+  border-color: var(--color-border-default);
+  color: var(--color-text-primary);
+}
+
+.crewlet-icon-btn--secondary:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border-hover);
+}
+
+.crewlet-icon-btn--secondary:active:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-surface-pressed);
+}
+
+/* ghost: transparent, neutral ink, a mild tint on hover. */
+.crewlet-icon-btn--ghost {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-icon-btn--ghost:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* ghost-brand: transparent, the accent on hover. */
+.crewlet-icon-btn--ghost-brand {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-icon-btn--ghost-brand:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-brand-accent-soft);
+  border-color: var(--color-brand-accent-soft-strong);
+  color: var(--color-brand-accent-ink);
+}
+
+/* ghost-danger: transparent, the critical hue on hover, from the token rather
+   than the rose literal it used to carry. */
+.crewlet-icon-btn--ghost-danger {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-icon-btn--ghost-danger:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+}
+
+/* soft-brand: a tinted square with a matching boundary. */
+.crewlet-icon-btn--soft-brand {
+  background: var(--color-brand-accent-soft);
+  border-color: var(--color-brand-accent-soft-strong);
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-icon-btn--soft-brand:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-brand-accent-soft-strong);
+  border-color: var(--color-brand-accent);
+}
+
+/* A toggle that is on, drawn from the state a screen reader is already told. */
+.crewlet-icon-btn[aria-pressed='true'] {
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-icon-btn {
+    transition: none;
+  }
+}

package/dist/ImageUpload/ImageUpload.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from 'react';
+import { type AvatarShape } from '../Avatar/index.js';
+export interface ImageUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Current image source. When set, the control shows the image and the overlay label reads "Change". */
+    src?: string | undefined;
+    /** Display name used for the initials fallback when no image is set. */
+    name?: string | undefined;
+    /** Rendered width and height in pixels. */
+    size?: number | undefined;
+    /**
+     * Outline shape passed through to the preview and fallback. Defaults to
+     * "square", as Avatar does: what this control takes is normally a company
+     * logo, and a wide mark cropped into a circle loses its ends.
+     */
+    shape?: AvatarShape | undefined;
+    /** When true, the control is display only: no overlay, no remove button, no file picker. */
+    readOnly?: boolean | undefined;
+    /** When true, the control shows a spinner and ignores interaction while an upload is in flight. */
+    uploading?: boolean | undefined;
+    /** Accepted file types for the hidden file input. Defaults to "image/*". */
+    accept?: string | undefined;
+    /** Called with the raw selected File. The upload happens over the network, so no client-side encoding is performed. */
+    onSelect: (file: File) => void;
+    /** Called when the remove button is pressed. The button only renders when an image is set and the control is editable. */
+    onRemove?: (() => void) | undefined;
+}
+/**
+ * ImageUpload, a click-to-upload affordance built on top of Avatar. Shows the
+ * current image (or an initials fallback), an overlay with a camera icon and
+ * an "Upload" or "Change" label (shown on hover, or always while no image is
+ * set), a hidden file input, a remove button, and an uploading state. One
+ * primitive covers both square logos and round profile pictures.
+ *
+ * The selection callback hands back the raw File rather than a data URL because
+ * the upload now happens over the network.
+ */
+export declare const ImageUpload: ({ src, name, size, shape, readOnly, uploading, accept, onSelect, onRemove, className, style, ...rest }: ImageUploadProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageUpload/index.d.ts

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

package/dist/ImageUpload/index.js

@@ -0,0 +1,3 @@
+export { ImageUpload } from '../chunk-5WS6L6FA.js';
+import '../chunk-PNFASD6F.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ImageUpload-HKFIZR6D.css

@@ -0,0 +1,193 @@
+/*
+ * ImageUpload, the click-to-upload affordance built on Avatar.
+ *
+ * WHITE ON THE SCRIM, from tokens, in both palettes. The overlay used to spell
+ * its own rgba(0, 0, 0, 0.5) and three shades of white; the scrim and the
+ * on-accent step are the two values the palette already measures for exactly
+ * this, which is a label drawn on something dark whatever is behind it.
+ *
+ * NO LITERAL FALLBACKS INSIDE var(). A fallback is what renders whenever the
+ * token name is misspelt, so it hides the very failure it looks like
+ * insurance against, and the dark value it held rendered on a light page.
+ */
+
+.crewlet-image-upload {
+  /* The default box, which the component overrides per instance from its
+     `size` prop. Declared here rather than carried as a var() fallback at each
+     of the six places that read it: a fallback repeated six times is six
+     places for the default to drift apart. */
+  --crewlet-image-upload-size: 64px;
+  /* The corner that box takes, set per instance beside the size. Declared here
+     for the same reason the size is: a default repeated as a var() fallback at
+     each place that reads it is several places for one default to drift. */
+  --crewlet-image-upload-corner: var(--radius-lg);
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  width: var(--crewlet-image-upload-size);
+  height: var(--crewlet-image-upload-size);
+}
+
+.crewlet-image-upload__trigger {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+/* Shape modifiers keep the trigger, the overlay and the Avatar corners in step. */
+.crewlet-image-upload--circle .crewlet-image-upload__trigger,
+.crewlet-image-upload--circle .crewlet-image-upload__overlay {
+  border-radius: var(--radius-circle);
+}
+
+/* THE SAME CORNER THE PICTURE INSIDE TAKES, which is why it is a variable
+   rather than a step: Avatar moves a square badge's radius with its box, so a
+   trigger pinned to one step is rounder or squarer than the badge under it at
+   every size but one, and the badge's corners show through the overlay. */
+.crewlet-image-upload--square .crewlet-image-upload__trigger,
+.crewlet-image-upload--square .crewlet-image-upload__overlay {
+  border-radius: var(--crewlet-image-upload-corner);
+}
+
+.crewlet-image-upload__trigger:disabled {
+  cursor: default;
+}
+
+.crewlet-image-upload.is-uploading .crewlet-image-upload__trigger {
+  cursor: progress;
+}
+
+.crewlet-image-upload__trigger:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-image-upload__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  background: var(--color-surface-scrim);
+  color: var(--color-text-on-accent);
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-easing-default);
+  pointer-events: none;
+}
+
+/*
+ * With nothing uploaded yet the overlay IS the whole affordance, so it stays
+ * up rather than waiting for a hover: an initials tile on its own does not say
+ * "put your logo here".
+ *
+ * AT FULL STRENGTH, and that is a fix rather than a preference. `opacity`
+ * fades the element, so 0.85 fades the scrim AND the word on it together: the
+ * composite measured 3.47:1 on a light page, where the label on the full scrim
+ * measures 5.74:1. What the fade bought was a hover that still answered, and
+ * the hover has nothing left to answer with here, because the affordance is
+ * already up: the pointer and the focus ring carry it instead.
+ */
+.crewlet-image-upload.is-uploading .crewlet-image-upload__overlay,
+.crewlet-image-upload.is-empty .crewlet-image-upload__overlay {
+  opacity: 1;
+}
+
+.crewlet-image-upload__trigger:hover .crewlet-image-upload__overlay,
+.crewlet-image-upload__trigger:focus-visible .crewlet-image-upload__overlay {
+  opacity: 1;
+}
+
+/* The overlay's glyph is sized against the avatar rather than by a step,
+   because it sits inside the picture. */
+.crewlet-image-upload__overlay .crewlet-glyph {
+  width: calc(var(--crewlet-image-upload-size) * 0.28);
+  height: calc(var(--crewlet-image-upload-size) * 0.28);
+}
+
+.crewlet-image-upload__overlay-text {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-image-upload__spinner {
+  width: calc(var(--crewlet-image-upload-size) * 0.3);
+  height: calc(var(--crewlet-image-upload-size) * 0.3);
+  border-radius: var(--radius-circle);
+  border: 2px solid var(--color-surface-scrim);
+  border-top-color: var(--color-text-on-accent);
+  animation: crewlet-image-upload-spin calc(var(--motion-duration-slow) * 2.5) linear infinite;
+}
+
+@keyframes crewlet-image-upload-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/*
+ * 24px square, which is the smallest target WCAG 2.2 accepts. It was 20, on a
+ * control that is also the only way to take a logo off.
+ *
+ * It needs no z-index of its own: it is positioned and it comes after the
+ * trigger in the markup, so it already paints above it.
+ */
+.crewlet-image-upload__remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-circle);
+  background: var(--color-feedback-danger);
+  border: 2px solid var(--color-surface-background);
+  color: var(--color-text-on-accent);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-image-upload:hover .crewlet-image-upload__remove,
+.crewlet-image-upload__remove:focus-visible {
+  opacity: 1;
+}
+
+.crewlet-image-upload__remove:disabled {
+  cursor: default;
+}
+
+.crewlet-image-upload__remove:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-image-upload__input {
+  display: none;
+}
+
+/*
+ * The ring holds still. The trigger already carries aria-busy, and the control
+ * is disabled while the upload is out, so nothing about the state is carried
+ * by the motion alone.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-image-upload__overlay,
+  .crewlet-image-upload__remove {
+    transition: none;
+  }
+
+  .crewlet-image-upload__spinner {
+    animation: none;
+  }
+}