@crewlethq/ui 0.2.0 → 0.4.0

package/dist/Toaster/Toaster.d.ts

@@ -0,0 +1,108 @@
+import { type ReactNode } from 'react';
+/** The four the component knows. Any other string is a variant of the caller's own. */
+export type ToastVariant = 'info' | 'success' | 'warning' | 'danger';
+export interface ToastAction {
+    label: ReactNode;
+    onClick?: () => void;
+    href?: string;
+    /** Open an external href in a new tab. */
+    external?: boolean;
+}
+export interface Toast<TVariant extends string = string> {
+    /** Stable id, which the consumer maps a dismissal back to. */
+    id: string | number;
+    /**
+     * What happened, and how loudly. `info`, `success`, `warning` and `danger`
+     * come with a glyph and a default title; any other string, `'quota'`
+     * included, has neither, so pass `icon` and `title`, or `renderBody`.
+     */
+    variant?: TVariant;
+    title?: ReactNode;
+    message?: ReactNode;
+    /**
+     * Milliseconds before it goes. 0 is sticky. Left unset, it is the variant's
+     * own default: 4s for a success or an item of information, and sticky for a
+     * warning or a failure.
+     */
+    duration?: number;
+    /** Bump on a dedup-replace to start the countdown again. */
+    version?: number;
+    /** An inline action. A full ReactNode is accepted for anything the shape does not cover. */
+    action?: ToastAction | ReactNode;
+    /** A glyph replacing the variant's own. A component, not a name. */
+    icon?: ReactNode;
+    /** Replace the body, for a shape the standard layout does not cover. */
+    renderBody?: (ctx: {
+        onDismiss: () => void;
+        toast: Toast<TVariant>;
+    }) => ReactNode;
+}
+export interface ToasterProps<TVariant extends string = string> {
+    toasts: Toast<TVariant>[];
+    onDismiss: (id: string | number) => void;
+    /** Render an action with an `href` through a router-aware link. */
+    renderAction?: ((action: ToastAction, ctx: {
+        onDismiss: () => void;
+    }) => ReactNode) | undefined;
+    position?: 'bottom-right' | 'top-right' | 'bottom-left' | 'top-left' | undefined;
+    /** Names the polite region for a reader browsing landmarks. */
+    politeLabel?: string | undefined;
+    /** Names the assertive region. */
+    assertiveLabel?: string | undefined;
+    dismissLabel?: string | undefined;
+    /** Replaces the lead-in a variant falls back to. See [ToastTitles]. */
+    titles?: ToastTitles | undefined;
+    className?: string | undefined;
+}
+/**
+ * The lead-in each known variant falls back to when a toast brings no title
+ * and no message.
+ *
+ * `info` has none on purpose: "Information" above a sentence says nothing the
+ * sentence does not. They are replaceable per Toaster, because every string a
+ * component renders on its own is a prop in this package, and these three are
+ * the only English it writes into a screen by itself.
+ */
+export type ToastTitles = Partial<Record<ToastVariant, string | null>>;
+export declare function Toaster<TVariant extends string = string>({ toasts, onDismiss, renderAction, position, politeLabel, assertiveLabel, dismissLabel, titles, className, }: ToasterProps<TVariant>): import("react").ReactPortal | null;
+export interface ToastOptions {
+    title?: ReactNode;
+    /** Milliseconds, or 0 for sticky. Unset takes the variant's own default. */
+    duration?: number;
+    action?: ToastAction | ReactNode;
+    icon?: ReactNode;
+    id?: string | number;
+}
+/** What a toast is asked for with, before the provider gives it an id. */
+export type ToastRequest = Omit<Toast, 'id'> & {
+    id?: string | number;
+};
+export interface ToastApi {
+    /** A write landed. Goes by itself. */
+    ok: (message: ReactNode, options?: ToastOptions) => string | number;
+    /** A write was refused. Stays until it is dismissed. */
+    failed: (message: ReactNode, options?: ToastOptions) => string | number;
+    /** Anything else: another variant, a custom body, an action. */
+    show: (toast: ToastRequest) => string | number;
+    /** Take one back, for a condition the application itself has cleared. */
+    dismiss: (id: string | number) => void;
+}
+/** The hook every writing screen uses. Safe with no provider mounted. */
+export declare function useToast(): ToastApi;
+export interface ToastProviderProps {
+    children?: ReactNode;
+    position?: ToasterProps['position'];
+    renderAction?: ToasterProps['renderAction'];
+    /** How many to keep on screen. The oldest goes when the next arrives. */
+    max?: number | undefined;
+}
+/**
+ * Holds the stack, and draws it.
+ *
+ * PROVIDERS NEST. A surface that goes fullscreen renders only its own subtree,
+ * so a toast portalled to the document body while a builder canvas is
+ * fullscreen is simply invisible: the reader presses Save and nothing happens.
+ * That surface mounts a provider of its own inside its `LayerHost`, and
+ * `useToast` inside it finds the nearest one.
+ */
+export declare function ToastProvider({ children, position, renderAction, max }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/Toaster/index.d.ts

@@ -0,0 +1,3 @@
+import './Toaster.css';
+export { ToastProvider, Toaster, useToast } from './Toaster.js';
+export type { Toast, ToastAction, ToastApi, ToastOptions, ToastProviderProps, ToastRequest, ToastTitles, ToastVariant, ToasterProps, } from './Toaster.js';

package/dist/Toaster/index.js

@@ -0,0 +1,5 @@
+export { ToastProvider, Toaster, useToast } from '../chunk-NPZY6YYL.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-ITHXJHBB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Toaster-NVDCEIP5.css

@@ -0,0 +1,306 @@
+/*
+ * The toast stack.
+ *
+ * ITS SURFACE IS A THEME TOKEN. 0.2.0 mixed the subtle surface 60 percent with
+ * black, which is a dark strip whatever palette is painting: on a light page
+ * the toast's own text measured 1.56:1 against it.
+ *
+ * THE DRAIN IS A RULE ALONG THE FOOT, not a wash behind the words. A tinted
+ * layer under the message is a composite nothing measured, and it moves while
+ * the message is being read; a 2px bar at the edge says the same thing and
+ * touches no text at all. It is decoration either way: the dismissal is a
+ * timer now, so a reader who asks for reduced motion still gets the toast
+ * taken away.
+ */
+
+.crewlet-toaster {
+  position: fixed;
+  z-index: var(--z-index-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  /* The engine's 420px, held under the viewport at the width a phone has.
+     The strip is one or two lines of 13px text and an action; at 380 the
+     commonest failure message wrapped onto a third. */
+  width: min(420px, calc(100vw - var(--spacing-9)));
+  /* The stack itself takes no presses, so the screen under it stays live
+     while nothing is up; each toast takes them back for its own strip. */
+  pointer-events: none;
+}
+
+.crewlet-toaster--bottom-right {
+  bottom: var(--spacing-4);
+  right: var(--spacing-4);
+}
+
+.crewlet-toaster--top-right {
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+}
+
+.crewlet-toaster--bottom-left {
+  bottom: var(--spacing-4);
+  left: var(--spacing-4);
+}
+
+.crewlet-toaster--top-left {
+  top: var(--spacing-4);
+  left: var(--spacing-4);
+}
+
+.crewlet-toast {
+  --crewlet-toast-mark: var(--color-text-secondary);
+  /*
+   * The boundary and the two inks are variables so a tone can spend them. Only
+   * one does: a failure, which is the engine's one toned strip.
+   */
+  --crewlet-toast-line: var(--color-border-default);
+  --crewlet-toast-ink: var(--color-text-primary);
+  --crewlet-toast-ink-quiet: var(--color-text-secondary);
+
+  pointer-events: auto;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  /* The panel's own gap and padding, and the panel's own surface: the engine
+     draws a toast as a small panel that happens to float, so it sits on the
+     same ground, the same hairline and the same corner as everything the
+     screen behind it is made of. */
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-8) var(--spacing-2) var(--spacing-3);
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--crewlet-toast-line);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  color: var(--crewlet-toast-ink);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  letter-spacing: var(--font-letter-spacing-snug);
+  overflow: hidden;
+  animation: crewlet-toast-in var(--motion-duration-base) var(--motion-easing-emphasized);
+}
+
+@keyframes crewlet-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.crewlet-toast__icon {
+  display: inline-flex;
+  flex: none;
+  margin-top: 1px;
+  color: var(--crewlet-toast-mark);
+}
+
+/* The mark is the tone's FILL step, which is measured at 3:1 as a mark. The
+   words beside it stay in the primary ink: a coloured sentence on a coloured
+   strip is the pair that has to be measured, and this one does not exist. */
+.crewlet-toast--success {
+  --crewlet-toast-mark: var(--color-feedback-success);
+}
+
+.crewlet-toast--warning {
+  --crewlet-toast-mark: var(--color-feedback-warning);
+}
+
+/*
+ * A FAILURE IS THE ONE TONED STRIP. It is the outcome that is news rather than
+ * confirmation and the one that does not take itself away, so the engine gives
+ * it the hue twice: the fill step on the edge, where 3:1 is the floor a
+ * boundary has to clear, and the INK step on every word, which is the measured
+ * text pair on this surface. Never the fill behind a word: that is the swap
+ * the whole soft-and-ink split exists to stop.
+ */
+.crewlet-toast--danger {
+  --crewlet-toast-mark: var(--color-feedback-danger);
+  --crewlet-toast-line: var(--color-feedback-danger);
+  --crewlet-toast-ink: var(--color-feedback-danger-ink);
+  --crewlet-toast-ink-quiet: var(--color-feedback-danger-ink);
+}
+
+.crewlet-toast--info {
+  --crewlet-toast-mark: var(--color-feedback-info);
+}
+
+/* A usage limit notice is the application's own variant: it paints the glyph
+   the caller passes with the accent and brings its own title. */
+.crewlet-toast--quota {
+  --crewlet-toast-mark: var(--color-brand-accent);
+}
+
+.crewlet-toast__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.crewlet-toast__title {
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-toast__message {
+  color: var(--crewlet-toast-ink-quiet);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-toast__actions {
+  margin-top: var(--spacing-2);
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+.crewlet-toast__action-btn,
+.crewlet-toast__action-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--size-control-sm);
+  padding: 0 var(--spacing-3);
+  border: 1px solid var(--color-brand-accent);
+  border-radius: var(--radius-md);
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+  font-family: inherit;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-toast__action-btn:hover,
+.crewlet-toast__action-link:hover {
+  background: var(--color-brand-accent-hover);
+  border-color: var(--color-brand-accent-hover);
+}
+
+.crewlet-toast--danger .crewlet-toast__action-btn,
+.crewlet-toast--danger .crewlet-toast__action-link {
+  background: var(--color-feedback-danger);
+  border-color: var(--color-feedback-danger);
+}
+
+.crewlet-toast--danger .crewlet-toast__action-btn:hover,
+.crewlet-toast--danger .crewlet-toast__action-link:hover {
+  background: var(--color-feedback-danger-hover);
+  border-color: var(--color-feedback-danger-hover);
+}
+
+.crewlet-toast__action-btn:focus-visible,
+.crewlet-toast__action-link:focus-visible,
+.crewlet-toast__dismiss:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/* The dismiss sits absolute in the corner so a multi-line message flows
+   under it rather than around it. 24px square: the smallest target
+   WCAG 2.2 accepts. */
+.crewlet-toast__dismiss {
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  /* The strip's own quiet ink rather than the neutral tertiary step, so the
+     close on a failure is part of the failure rather than the one grey thing
+     inside it. */
+  color: var(--crewlet-toast-ink-quiet);
+  cursor: pointer;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-toast__dismiss:hover {
+  background: var(--color-surface-hover);
+  color: var(--crewlet-toast-ink);
+}
+
+.crewlet-toast__progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  transform-origin: left center;
+  background: var(--crewlet-toast-mark);
+  pointer-events: none;
+  animation-name: crewlet-toast-drain;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+/* Paused by the class rather than by :hover, so the bar and the timer that
+   actually dismisses are stopped by the same event. */
+.crewlet-toast__progress.is-paused {
+  animation-play-state: paused;
+}
+
+@keyframes crewlet-toast-drain {
+  from {
+    transform: scaleX(1);
+  }
+
+  to {
+    transform: scaleX(0);
+  }
+}
+
+@media (max-width: 480px) {
+  .crewlet-toaster {
+    left: var(--spacing-3);
+    right: var(--spacing-3);
+    width: auto;
+  }
+
+  .crewlet-toaster--bottom-right,
+  .crewlet-toaster--bottom-left {
+    bottom: var(--spacing-3);
+  }
+
+  .crewlet-toaster--top-right,
+  .crewlet-toaster--top-left {
+    top: var(--spacing-3);
+  }
+}
+
+/*
+ * The strip still arrives and still goes; it just does not slide, and the
+ * countdown bar holds still. The timer is untouched: a reader who asked for
+ * less motion did not ask to be left with a toast that never leaves.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-toast {
+    animation: none;
+  }
+
+  .crewlet-toast__progress {
+    display: none;
+  }
+
+  .crewlet-toast__action-btn,
+  .crewlet-toast__action-link,
+  .crewlet-toast__dismiss {
+    transition: none;
+  }
+}

package/dist/Toolbar/Toolbar.d.ts

@@ -0,0 +1,62 @@
+/**
+ * A row of controls that is ONE stop in the page's tab order.
+ *
+ * WHY. `role="toolbar"` is a promise about the keyboard: a reader Tabs to the
+ * toolbar once, walks it with the arrows, and Tabs out of it to the next thing
+ * on the page. The organization builder declared the role and kept every
+ * control a separate tab stop, so reaching the content under a twelve-control
+ * toolbar cost twelve presses, and the promise the role makes was false.
+ *
+ * WHAT A COMPOSITE CHILD KEEPS. A segmented group, a tab list or a listbox
+ * inside the toolbar is ONE stop, and the arrows walk its own options first:
+ * only at its last option does ArrowRight carry on to the next control, and
+ * only at its first does ArrowLeft go back. That is what lets a reader walk
+ * the whole row without ever being stranded inside a group, and it is why the
+ * stops are computed from the DOM rather than from the children React was
+ * handed: the group manages its own `tabindex`, and the two would disagree.
+ *
+ * WHAT A FIELD KEEPS. A text field takes the arrows, Home and End for its own
+ * caret, always, and there is no boundary at which it gives them back. A
+ * toolbar holding one is usually a filter bar rather than a toolbar, which is
+ * what `mode="group"` is for: every control keeps its own tab stop and nothing
+ * takes the arrows.
+ */
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ToolbarMode = 'toolbar' | 'group';
+export interface ToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    /**
+     * Names the row. REQUIRED: a toolbar is announced by its name, and a page
+     * with a filter bar and a builder toolbar needs to say which is which.
+     */
+    label: string;
+    /**
+     * `toolbar` is one tab stop with arrow keys. `group` is a labelled row where
+     * every control keeps its own tab stop, which is what a filter bar holding a
+     * text field wants.
+     */
+    mode?: ToolbarMode | undefined;
+    /** Sticks under the top of the scroller, so filters stay reachable in a long list. */
+    sticky?: boolean | undefined;
+    children?: ReactNode;
+}
+export declare function Toolbar({ label, mode, sticky, className, children, ...rest }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Toolbar {
+    var Wide: typeof ToolbarWide;
+    var Overflow: typeof ToolbarOverflow;
+}
+export interface ToolbarSlotProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/**
+ * The controls that fold away on a narrow screen. They are drawn above the
+ * shell breakpoint and gone below it, where `Toolbar.Overflow` takes over.
+ */
+export declare function ToolbarWide({ className, children, ...rest }: ToolbarSlotProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * What stands in for them: a Menu holding the same actions, drawn only below
+ * the breakpoint. Two elements rather than one that measures itself, because a
+ * row whose contents change as it is measured is a row that can oscillate, and
+ * the only width that decides anything here is the one the stylesheet already
+ * switches the shell at.
+ */
+export declare function ToolbarOverflow({ className, children, ...rest }: ToolbarSlotProps): import("react/jsx-runtime").JSX.Element;

package/dist/Toolbar/index.d.ts

@@ -0,0 +1,3 @@
+import './Toolbar.css';
+export { Toolbar, ToolbarOverflow, ToolbarWide } from './Toolbar.js';
+export type { ToolbarMode, ToolbarProps, ToolbarSlotProps } from './Toolbar.js';

package/dist/Toolbar/index.js

@@ -0,0 +1,4 @@
+export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-5EKIWVOR.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-ITHXJHBB.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Toolbar-IP6LXN45.css

@@ -0,0 +1,48 @@
+/*
+ * The toolbar row.
+ *
+ * It WRAPS rather than scrolling sideways: the controls in it are named, and a
+ * row that scrolls hides half of them behind a gesture nobody discovers. What
+ * it does not do is reflow from the data, which is why the wide and overflow
+ * slots switch at the shell breakpoint and nowhere else.
+ */
+
+.crewlet-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+  min-width: 0;
+  padding: var(--spacing-2) 0;
+}
+
+/* Under the top of the scroller, on the sticky step, over the page's own
+   ground so rows do not show through it. */
+.crewlet-toolbar--sticky {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-index-sticky);
+  background: var(--color-surface-background);
+}
+
+.crewlet-toolbar__wide,
+.crewlet-toolbar__overflow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-toolbar__overflow {
+  display: none;
+}
+
+@media (max-width: 900px) {
+  .crewlet-toolbar__wide {
+    display: none;
+  }
+
+  .crewlet-toolbar__overflow {
+    display: flex;
+  }
+}

package/dist/Tooltip/Tooltip.d.ts

@@ -0,0 +1,51 @@
+import { type ReactElement, type ReactNode } from 'react';
+export type TooltipPlacement = 'top' | 'bottom';
+export interface TooltipProps {
+    /** One short line. A tooltip is not a place to put a list or a paragraph. */
+    content: ReactNode;
+    /** The preferred side. It flips when there is not room and there is more room the other way. */
+    placement?: TooltipPlacement | undefined;
+    /** Nothing opens: for a trigger whose tip is only worth showing sometimes. */
+    disabled?: boolean | undefined;
+    /** Milliseconds a pointer rests on the trigger before the panel appears. Focus never waits. */
+    openDelay?: number | undefined;
+    /**
+     * Milliseconds the panel survives the pointer leaving, which is what makes it
+     * HOVERABLE: the pointer has to cross the gap between the trigger and the
+     * panel, and a panel that closed the instant the pointer left the trigger
+     * could never be reached.
+     */
+    closeDelay?: number | undefined;
+    className?: string | undefined;
+    /** Exactly one element: the control the tip belongs to. */
+    children: ReactElement;
+}
+/**
+ * Tooltip: one short line about the control under the pointer.
+ *
+ * IT IS NEVER THE ONLY CARRIER OF ANYTHING A READER NEEDS. A tooltip is not
+ * reachable by touch, it is not read by a screen reader until the control it
+ * belongs to is focused, and it is gone the moment the pointer moves. Anything
+ * a reader must have is on the page. This is a hint about a control that
+ * already has a name.
+ *
+ * IT IS ONE LINE. A list of paths, a table of values or a paragraph belongs in
+ * a `Popover` with `role="dialog"` or in a `Disclosure`, both of which a reader
+ * can keep open and scroll.
+ *
+ * THE THREE RULES OF WCAG 2.2's 1.4.13, and this component exists because all
+ * three are easy to miss:
+ *
+ * - DISMISSABLE. Escape closes it without moving focus, through the layer
+ *   stack, so it closes before the dialog it sits in.
+ * - HOVERABLE. The pointer may travel from the trigger onto the panel without
+ *   the panel closing, which is what `closeDelay` buys.
+ * - PERSISTENT. It stays until the pointer and focus have both left or Escape
+ *   is pressed. NOTHING HIDES IT ON A TIMER: a reader who needs longer than
+ *   somebody else's idea of long enough is exactly the reader this is for.
+ *
+ * It is linked by `aria-describedby` rather than `aria-labelledby`: the
+ * control has a name already, and replacing it with the hint is how a Close
+ * button came to be announced as "Closing is unavailable until this finishes".
+ */
+export declare function Tooltip({ content, placement, disabled, openDelay, closeDelay, className, children, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/Tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import './Tooltip.css';
+export { Tooltip } from './Tooltip.js';
+export type { TooltipPlacement, TooltipProps } from './Tooltip.js';

package/dist/Tooltip/index.js

@@ -0,0 +1,4 @@
+export { Tooltip } from '../chunk-XV6WRMBC.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-ITHXJHBB.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Tooltip-LKQF7CE4.css

@@ -0,0 +1,71 @@
+/*
+ * The tooltip panel.
+ *
+ * It is placed by arithmetic (see Tooltip.tsx), so this owns what the panel
+ * looks like and how it arrives.
+ *
+ * TWO THINGS ARE DELIBERATE AND LOOK LIKE OVERSIGHTS.
+ *
+ * It TAKES THE POINTER (`pointer-events: auto`, which the layer host's own
+ * children already have). A panel a pointer cannot land on cannot be hovered,
+ * and WCAG 2.2's 1.4.13 asks that it can be, so the reader can travel onto it
+ * and read the line at their own pace.
+ *
+ * It is OPAQUE and it is SMALL, but it is not quiet: the ink is the primary
+ * step on the panel surface, not a muted one. A hint drawn in a decoration
+ * ink is a hint nobody with low vision can read, and the whole point of it is
+ * to be read.
+ *
+ * IT IS DRAWN AS THE SMALLEST MEMBER OF THE OVERLAY FAMILY, on the same panel
+ * step as a menu, a popover and a dialog, with the same corner the other small
+ * floating objects take. A tooltip is the one surface a reader meets by
+ * accident, and a surface that arrives looking like nothing else in the
+ * product is one they have to work out before they can read it.
+ */
+
+.crewlet-tooltip {
+  position: fixed;
+  max-width: 260px;
+  padding: var(--spacing-1) var(--spacing-2);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  /* One short line, wrapped rather than cut: a hint that ends in an ellipsis
+     is a hint that failed. */
+  overflow-wrap: break-word;
+  animation: crewlet-tooltip-in var(--motion-duration-base) var(--motion-easing-emphasized);
+}
+
+/* Inside a LayerHost the panel is absolute in that host's own box. */
+.crewlet-tooltip--in-host {
+  position: absolute;
+}
+
+/*
+ * The side the tip was placed on is left on the element for anything that has
+ * to know which way it went, and it draws nothing: the entrance is a rise
+ * rather than a scale now, and a transform-origin under a translate is a
+ * declaration that reads as a decision and is not one.
+ */
+
+/*
+ * The same entrance every floating surface here has, at the smallest step: a
+ * short rise. A scale was its own gesture for no reason, and next to a menu
+ * opening beside it the two read as two different products.
+ */
+@keyframes crewlet-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--spacing-1));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-tooltip {
+    animation: none;
+  }
+}