@wtfalch/design 0.3.2 → 0.5.0

package/dist/tf.css

@@ -2604,6 +2604,61 @@ input[type='radio']:active:not(:disabled) {
    the package shipped a `tone="bad"` prop that changed nothing. */
 .dialog-bad { border-color: color-mix(in oklab, var(--bad) 45%, var(--border)); }
 
+/* The sheet: the same window, anchored to an edge.
+   
+   Only placement and entry differ. The trap, the restore, the scrim and the
+   header/body/footer are the modal's, which is the point of it being a prop
+   rather than a second component. */
+.backdrop.sheeted { padding: 0; }
+.backdrop.sheeted.from-right { justify-content: flex-end; align-items: stretch; }
+.backdrop.sheeted.from-left { justify-content: flex-start; align-items: stretch; }
+.backdrop.sheeted.from-bottom { align-items: flex-end; justify-content: stretch; }
+
+.modal.sheet {
+  max-height: 100%;
+  border-radius: 0;
+  box-shadow: var(--shadow-3);
+}
+
+.modal.sheet.from-right,
+.modal.sheet.from-left {
+  height: 100%;
+  /* A default that is a panel rather than a window. `width` overrides it. */
+  width: min(26rem, 100vw);
+  max-width: 100vw;
+}
+
+.modal.sheet.from-right { border-left: var(--border-width) solid var(--border); }
+.modal.sheet.from-left { border-right: var(--border-width) solid var(--border); }
+
+.modal.sheet.from-bottom {
+  width: 100%;
+  max-width: 100%;
+  max-height: 85vh;
+  border-top: var(--border-width) solid var(--border);
+  /* Rounded at the top only: the bottom edge is the screen's. */
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+
+/* It comes from the edge it is anchored to. A sheet that fades in place is a
+   modal wearing a sheet's shape -- the movement is what says which way it
+   goes and where it will go back to. */
+.modal.sheet.from-right[data-entering] { animation: sheet-right var(--dur-md) var(--ease-out); }
+.modal.sheet.from-right[data-exiting] { animation: sheet-right var(--dur-fast) var(--ease) reverse; }
+.modal.sheet.from-left[data-entering] { animation: sheet-left var(--dur-md) var(--ease-out); }
+.modal.sheet.from-left[data-exiting] { animation: sheet-left var(--dur-fast) var(--ease) reverse; }
+.modal.sheet.from-bottom[data-entering] { animation: sheet-bottom var(--dur-md) var(--ease-out); }
+.modal.sheet.from-bottom[data-exiting] { animation: sheet-bottom var(--dur-fast) var(--ease) reverse; }
+
+@keyframes sheet-right { from { transform: translateX(100%); } to { transform: none; } }
+@keyframes sheet-left { from { transform: translateX(-100%); } to { transform: none; } }
+@keyframes sheet-bottom { from { transform: translateY(100%); } to { transform: none; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .modal.sheet[data-entering],
+  .modal.sheet[data-exiting] { animation: none; }
+}
+
 /* ---- ./slider.css ---- */
 /* slider ----------------------------------------------------------------- */
 /* A number from a range -- `Slider.tsx` says when one is the right control.
@@ -3357,6 +3412,743 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .tour-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
 
 .tour-count { color: var(--muted); font-size: var(--text-xs); }
+
+/* The mail and forum shell, added in 0.4.0. After the rest, because the
+   anchored surfaces (`.pop`, `.menu-sheet`, `.cmd`) sit over everything and a
+   rule of equal specificity that came earlier would lose to whatever the
+   sheets they cover happen to set. */
+/* ---- ./scrollarea.css ---- */
+/* A box that scrolls, with its edges drawn.
+   
+   The fades are `::before`/`::after` on the scroller itself, pinned with
+   `position: sticky` rather than `absolute`: an absolutely positioned overlay
+   inside a scrolling box scrolls with the content, so the gradient slides off
+   the top the moment anybody moves. Sticky keeps it against the padding edge
+   while the content runs underneath. */
+.scroller {
+  position: relative;
+  min-height: 0;
+  min-width: 0;
+  /* A scroll that reaches the end and carries on into the page behind it is
+     how a pane scrolls the whole app away. */
+  overscroll-behavior: contain;
+  scrollbar-color: var(--border-strong) transparent;
+  scrollbar-width: thin;
+}
+
+/* A labelled scroller is focusable, so it owes a visible focus indicator --
+   the same obligation the pager's buttons have. `--focus-ring` is a
+   box-shadow value, not an outline shorthand. */
+.scroller:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+
+.scroller.axis-y { overflow-y: auto; overflow-x: hidden; }
+.scroller.axis-x { overflow-x: auto; overflow-y: hidden; }
+.scroller.axis-both { overflow: auto; }
+
+.scroller::-webkit-scrollbar { width: var(--space-3); height: var(--space-3); }
+.scroller::-webkit-scrollbar-track { background: transparent; }
+.scroller::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  /* Inset by a transparent border rather than by width, so the thumb is thin
+     while the grab target stays the full `--space-3`. A bar drawn at the
+     thumb's width looks right and cannot be hit. */
+  border: var(--space-1) solid transparent;
+  background-clip: padding-box;
+  border-radius: var(--radius-pill);
+}
+.scroller::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
+.scroller::-webkit-scrollbar-corner { background: transparent; }
+
+.scroller.barless { scrollbar-width: none; }
+.scroller.barless::-webkit-scrollbar { width: 0; height: 0; }
+
+/* The fades.
+   
+   Vertical only, and that is the whole point rather than a shortcut: the
+   misreading this exists to prevent is "the list ended", which is a claim
+   about the bottom edge. Content cut off at the right edge of a box already
+   reads as cut off -- a word sliced in half is its own affordance -- so a
+   horizontal scroller gets the scrollbar and nothing else.
+
+   `--panel` because that is what a scroller is nearly always sitting on;
+   `fade={false}` is the escape for when it is not. */
+.scroller.faded::before,
+.scroller.faded::after {
+  content: '';
+  position: sticky;
+  left: 0;
+  display: block;
+  height: var(--space-5);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--dur-fast) var(--ease);
+  z-index: 1;
+}
+
+/* Negative margins on the far side, so neither strip takes a row of height
+   from the content it is drawn over. */
+.scroller.faded::before {
+  top: 0;
+  margin-bottom: calc(var(--space-5) * -1);
+  background: linear-gradient(to bottom, var(--panel), transparent);
+}
+
+.scroller.faded::after {
+  bottom: 0;
+  margin-top: calc(var(--space-5) * -1);
+  background: linear-gradient(to top, var(--panel), transparent);
+}
+
+.scroller.faded[data-top='true']::before { opacity: 1; }
+.scroller.faded[data-bottom='true']::after { opacity: 1; }
+
+/* A scroller that only goes sideways has no vertical edge to mark. */
+.scroller.faded.axis-x::before,
+.scroller.faded.axis-x::after { content: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .scroller.faded::before,
+  .scroller.faded::after { transition: none; }
+}
+
+/* ---- ./splitpane.css ---- */
+/* Two panes and the handle between them. */
+.split {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.split.dir-row { flex-direction: row; }
+.split.dir-column { flex-direction: column; }
+
+/* `min-width: 0` is the whole reason this file exists.
+   
+   A flex child will not shrink below the intrinsic width of its content, and
+   the intrinsic width of a mail list is the longest unbroken subject line in
+   it. Without this the handle stops partway across and nothing on screen says
+   why -- it just refuses, differently for every mailbox. */
+.split-pane {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.split-first { flex: 0 0 var(--split); }
+.split-second { flex: 1 1 0; }
+
+/* The handle is wider than it looks: a hairline is a correct-looking divider
+   and an impossible pointer target. The grip is the line, drawn at
+   `--border-width` down the middle of a `--space-3` strip, and the strip is
+   the thing the pointer has to hit. */
+.split-handle {
+  flex: none;
+  position: relative;
+  background: transparent;
+  border: none;
+  padding: 0;
+  touch-action: none;
+}
+
+.split.dir-row > .split-handle {
+  width: var(--space-3);
+  margin: 0 calc(var(--space-3) / -2);
+  cursor: col-resize;
+  z-index: 1;
+}
+
+.split.dir-column > .split-handle {
+  height: var(--space-3);
+  margin: calc(var(--space-3) / -2) 0;
+  cursor: row-resize;
+  z-index: 1;
+}
+
+/* The line itself, drawn in the middle of the target. */
+.split-grip {
+  position: absolute;
+  background: var(--border);
+  transition: background var(--dur-fast) var(--ease);
+}
+
+.split.dir-row .split-grip {
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: var(--border-width);
+  transform: translateX(-50%);
+}
+
+.split.dir-column .split-grip {
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: var(--border-width);
+  transform: translateY(-50%);
+}
+
+.split-handle:hover .split-grip,
+.split-handle:active .split-grip { background: var(--accent); }
+
+/* Focus is on the grip rather than the padded target: a ring around a 12px
+   transparent strip reads as a ring around nothing. */
+.split-handle:focus-visible { outline: none; }
+.split-handle:focus-visible .split-grip {
+  background: var(--accent);
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* While dragging. On the body, because the pointer crosses both panes and the
+   text in them would otherwise flip the cursor to an I-beam the whole way. */
+body.splitting { cursor: col-resize; user-select: none; }
+body.splitting * { cursor: inherit !important; }
+
+@media (prefers-reduced-motion: reduce) {
+  .split-grip { transition: none; }
+}
+
+/* ---- ./popover.css ---- */
+/* A small surface anchored to what opened it. Same sheet as the select's list,
+   because they are the same object -- something that appeared over the page,
+   attached to a control. */
+.pop {
+  background: var(--panel);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-2);
+  max-width: min(22rem, calc(100vw - var(--space-6)));
+  /* React Aria writes `max-height` inline, to the space left in the viewport.
+     A surface that runs to the bottom of the screen is not a popover any more,
+     so the sheet caps it and scrolls instead. Same argument as the select
+     list's 280px cap, and the same number is not required -- a popover holds
+     controls rather than a list, and stops being one sooner. */
+  max-height: 24rem;
+  overflow: auto;
+  overscroll-behavior: contain;
+  /* React Aria positions this element inline; nothing here may set `position`,
+     `top` or `left` or it fights the measurement and lands in the corner. */
+  z-index: 60;
+}
+
+.pop-body {
+  padding: var(--space-3);
+  outline: none;
+  color: var(--text);
+  font-size: var(--text-sm);
+}
+
+/* Entry, and the direction it comes from. `data-placement` is React Aria's,
+   set to where the surface actually went rather than where it was asked to go,
+   so the movement agrees with the flip. */
+.pop[data-entering] { animation: pop-in var(--dur-fast) var(--ease-out); }
+.pop[data-exiting] { animation: pop-in var(--dur-fast) var(--ease) reverse; }
+
+@keyframes pop-in {
+  from { opacity: 0; transform: translateY(calc(var(--nudge) * -1)); }
+  to { opacity: 1; transform: none; }
+}
+
+.pop[data-placement='top'][data-entering],
+.pop[data-placement='top left'][data-entering],
+.pop[data-placement='top right'][data-entering] { animation-name: pop-in-up; }
+
+@keyframes pop-in-up {
+  from { opacity: 0; transform: translateY(var(--nudge)); }
+  to { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pop[data-entering],
+  .pop[data-exiting] { animation: none; }
+}
+
+/* ---- ./menu.css ---- */
+/* A list of verbs, on the same sheet as every other anchored surface. */
+.menu-sheet {
+  background: var(--panel);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-2);
+  min-width: 12rem;
+  max-width: min(20rem, calc(100vw - var(--space-6)));
+  max-height: 24rem;
+  overflow: auto;
+  overscroll-behavior: contain;
+  z-index: 60;
+}
+
+.menu-list {
+  padding: var(--space-1);
+  outline: none;
+  display: grid;
+  gap: var(--border-width);
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  color: var(--text);
+  cursor: default;
+  outline: none;
+}
+
+/* One highlight for pointer and keyboard.
+   
+   React Aria sets `data-focused` for whichever is driving, so the row under
+   the cursor and the row the arrows are on are the same row drawn the same
+   way. Two separate treatments -- `:hover` plus a `.active` class -- is how a
+   menu ends up showing two highlighted rows at once, which is the state where
+   pressing Enter does something other than what it looks like it will do. */
+.menu-item[data-focused] { background: var(--panel-2); }
+.menu-item[data-disabled] { color: var(--muted); opacity: 0.6; }
+
+.menu-icon { flex: none; width: var(--space-4); height: var(--space-4); color: var(--muted); }
+.menu-item[data-focused] .menu-icon { color: var(--text); }
+
+.menu-text { flex: 1 1 auto; min-width: 0; display: grid; }
+.menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.menu-desc {
+  font-size: var(--text-xs);
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The binding, set in the mono face at the size of the small print. Right of
+   the row and never the reason the row is wide: `flex: none` with the label
+   taking the slack. */
+.menu-key {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  color: var(--muted);
+  letter-spacing: var(--tracking);
+}
+
+.menu-more { flex: none; color: var(--muted); }
+
+.menu-rule {
+  height: var(--border-width);
+  background: var(--border);
+  border: none;
+  margin: var(--space-1) 0;
+}
+
+.menu-section-title {
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font-size: var(--text-2xs);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking);
+  color: var(--muted);
+}
+
+/* Destructive.
+   
+   Tinted into `--panel` at 10%, the same mix `Pill` uses, and for the same
+   measured reason: mixing a mid tone into the darker surface drags the
+   background towards the text and drops the row's contrast on a light theme.
+   Colour is never the only signal -- the row is also last, also below a rule. */
+.menu-item.danger { color: var(--bad); }
+.menu-item.danger .menu-icon { color: var(--bad); }
+.menu-item.danger[data-focused] { background: color-mix(in srgb, var(--bad) 10%, var(--panel)); }
+
+.menu-sheet[data-entering] { animation: pop-in var(--dur-fast) var(--ease-out); }
+.menu-sheet[data-exiting] { animation: pop-in var(--dur-fast) var(--ease) reverse; }
+
+@media (prefers-reduced-motion: reduce) {
+  .menu-sheet[data-entering],
+  .menu-sheet[data-exiting] { animation: none; }
+}
+
+/* ---- ./command.css ---- */
+/* The command palette: a field over the app and a list under it. */
+.cmd-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  background: var(--scrim);
+  display: flex;
+  justify-content: center;
+  /* Near the top rather than centred. The list grows downwards as you type,
+     and a centred palette moves its own first row every keystroke -- which is
+     the row you are aiming at. */
+  align-items: flex-start;
+  padding: 10vh var(--space-4) var(--space-4);
+}
+
+.cmd {
+  width: min(34rem, 100%);
+  background: var(--panel);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-3);
+  overflow: hidden;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.cmd-body { outline: none; display: flex; flex-direction: column; min-height: 0; }
+
+.cmd-field {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--border-width) solid var(--border);
+}
+
+.cmd-mark { flex: none; width: var(--space-4); height: var(--space-4); color: var(--muted); }
+
+/* No border, no focus ring on the input itself: the whole surface is the
+   field, focus is already in it when it opens, and a ring around a box that
+   fills the top of the palette is a ring around the palette. */
+.cmd-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  color: var(--text);
+  font: inherit;
+  font-size: var(--text-md);
+}
+
+.cmd-input::placeholder { color: var(--muted); }
+
+.cmd-list {
+  padding: var(--space-2);
+  overflow: auto;
+  overscroll-behavior: contain;
+  outline: none;
+  min-height: 0;
+}
+
+.cmd-group-title {
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font-size: var(--text-2xs);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking);
+  color: var(--muted);
+}
+
+.cmd-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  color: var(--text);
+  cursor: default;
+  outline: none;
+}
+
+/* Two pointers into the list, and they can disagree.
+   
+   React Aria's `Menu` unifies these -- hovering a row moves the keyboard's
+   focus to it -- but `ListBox` in 1.21 has no `shouldFocusOnHover` to turn
+   that on, so a hover sets `data-hovered` and the arrows set `data-focused`
+   independently. Styling only `data-focused`, which is what this did first,
+   means the pointer gets no feedback at all until somebody presses an arrow
+   key.
+   
+   Both are drawn, and the keyboard's row is marked as well, because when both
+   are showing they are two different answers to "what does Enter run" -- and
+   it is the focused one. The bar is the tell. */
+.cmd-item[data-hovered],
+.cmd-item[data-focused] { background: var(--panel-2); }
+
+.cmd-item[data-focused] {
+  box-shadow: inset calc(var(--border-width) * 2) 0 0 var(--accent);
+}
+.cmd-item[data-disabled] { color: var(--muted); opacity: 0.6; }
+
+.cmd-icon { flex: none; width: var(--space-4); height: var(--space-4); color: var(--muted); }
+.cmd-item[data-focused] .cmd-icon { color: var(--text); }
+
+.cmd-text { flex: 1 1 auto; min-width: 0; display: grid; }
+.cmd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cmd-desc {
+  font-size: var(--text-xs);
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cmd-key {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  color: var(--muted);
+  letter-spacing: var(--tracking);
+}
+
+.cmd-empty {
+  margin: 0;
+  padding: var(--space-6) var(--space-4);
+  text-align: center;
+  color: var(--muted);
+  font-size: var(--text-sm);
+}
+
+.cmd-empty strong { color: var(--text); font-weight: var(--weight-strong); }
+
+.cmd-scrim[data-entering] { animation: cmd-scrim-in var(--dur-fast) var(--ease-out); }
+.cmd-scrim[data-exiting] { animation: cmd-scrim-in var(--dur-fast) var(--ease) reverse; }
+.cmd[data-entering] { animation: cmd-in var(--dur-md) var(--ease-out); }
+
+@keyframes cmd-scrim-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes cmd-in {
+  from { opacity: 0; transform: translateY(calc(var(--nudge) * -1)) scale(0.98); }
+  to { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cmd-scrim[data-entering],
+  .cmd-scrim[data-exiting],
+  .cmd[data-entering] { animation: none; }
+}
+
+/* ---- ./pagination.css ---- */
+/* Moving through a list that does not fit, and saying how far in you are. */
+.pager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+  padding: var(--space-2) 0;
+  font-size: var(--text-xs);
+  color: var(--muted);
+}
+
+.pager-count { margin: 0; }
+.pager-count strong { color: var(--text); font-weight: var(--weight-strong); }
+
+.pager-controls { display: flex; align-items: center; gap: var(--space-1); }
+
+.pager-step,
+.pager-page {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Square, and 32px rather than the text's height: these are hit repeatedly
+     and in sequence, and a target the size of its glyph is a target that gets
+     missed on the fourth press. */
+  min-width: var(--space-8);
+  height: var(--space-8);
+  padding: 0 var(--space-2);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+
+.pager-step:hover:not(:disabled),
+.pager-page:hover:not(.on) { background: var(--panel-2); color: var(--text); }
+
+/* `--focus-ring` is a box-shadow value (`0 0 0 2px var(--accent)`), not an
+   outline shorthand — `outline: var(--focus-ring)` is invalid and drops
+   silently, which is how these shipped with no visible focus at all. Every
+   other stylesheet in the package uses `box-shadow`. */
+.pager-step:focus-visible,
+.pager-page:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+
+/* Disabled rather than hidden. An arrow that disappears at the first page
+   moves every other control one step left, so the button under your cursor
+   changes identity between clicks. */
+.pager-step:disabled { opacity: 0.35; cursor: default; }
+
+.pager-pages {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* The current page. Border as well as tint, because tint alone is a colour
+   doing the work on its own -- and `aria-current` says it to a reader that
+   sees neither. */
+.pager-page.on {
+  color: var(--text);
+  background: var(--panel-2);
+  border-color: var(--border-strong);
+  font-weight: var(--weight-strong);
+}
+
+/* The gap is a field, drawn as a ghost.
+   
+   At rest it is the elision it replaces: no border, no background, the `…` as
+   its placeholder, sized and aligned like the page buttons beside it. Touch it
+   and it becomes a control. That order matters -- a visible "go to page" box
+   in a pager is a control almost nobody uses taking permanent space beside the
+   ones everybody does, and a control that looks like punctuation is one nobody
+   presses. This is punctuation until you press it.
+   
+   The width comes from how many digits the largest page has, set by the
+   component, so the row does not change size when the field is typed into --
+   the same reason `pageWindow` holds seven slots at the ends. */
+.pager-jump {
+  width: max(var(--space-8), calc(var(--digits, 2) * 0.62em + var(--space-5)));
+  height: var(--space-8);
+  padding: 0 var(--space-1);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+
+/* Full strength, so the `…` is as legible as the numbers it sits between. */
+.pager-jump::placeholder { color: var(--muted); opacity: 1; }
+
+.pager-jump:hover { background: var(--panel-2); color: var(--text); }
+
+/* Typed into: it stops being an elision and becomes the control it always was.
+   The placeholder goes because the field now has a value to show. */
+.pager-jump:focus {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  background: var(--control);
+  border-color: var(--border-strong);
+  color: var(--text);
+  cursor: text;
+}
+
+/* The spinners are two 10px targets stacked inside a 32px box, and pressing
+   one by accident moves the page. The arrow keys still step the value. */
+.pager-jump { appearance: textfield; -moz-appearance: textfield; }
+.pager-jump::-webkit-outer-spin-button,
+.pager-jump::-webkit-inner-spin-button { appearance: none; margin: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .pager-step,
+  .pager-page,
+  .pager-jump { transition: none; }
+}
+
+/* ---- ./identity.css ---- */
+/* A person, said in one line: initials, name, sometimes the address. */
+.ident {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  font-size: var(--text-sm);
+  color: var(--text);
+}
+
+/* The disc.
+   
+   `--ident-hue` comes from the address and is the only thing the component
+   sets inline; everything that decides how saturated and how light it is
+   lives here, so the discs stay in the theme rather than staying the same
+   colour on every theme. Mixed towards `--panel` for the same measured reason
+   `Pill` mixes: a full-strength hue behind text drops the contrast on the
+   light themes, and these carry two letters that have to be legible. */
+.ident-disc {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-8);
+  height: var(--space-8);
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, hsl(var(--ident-hue) 60% 50%) 22%, var(--panel));
+  border: var(--border-width) solid color-mix(in srgb, hsl(var(--ident-hue) 60% 50%) 45%, transparent);
+  color: var(--text);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-strong);
+  letter-spacing: normal;
+  text-transform: uppercase;
+  user-select: none;
+}
+
+.ident.size-sm .ident-disc {
+  width: var(--space-6);
+  height: var(--space-6);
+  font-size: var(--text-2xs);
+}
+
+.ident-text { display: grid; min-width: 0; }
+
+.ident-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: var(--weight);
+}
+
+.ident-address {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-xs);
+  color: var(--muted);
+}
+
+.ident-aside { flex: none; color: var(--muted); font-size: var(--text-xs); }
+
+/* A chip in a composer's To field: boxed, tighter, removable. */
+.ident.kind-chip {
+  gap: var(--space-1);
+  padding: var(--space-1);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-pill);
+  background: var(--panel-2);
+  font-size: var(--text-xs);
+  max-width: 100%;
+}
+
+.ident.kind-chip .ident-disc {
+  width: var(--space-5);
+  height: var(--space-5);
+  font-size: var(--text-2xs);
+}
+
+.ident-remove {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* `--space-5` of button around a `--space-3` glyph. The cross is the
+     smallest thing on a composer and it sits next to text somebody is typing,
+     so it needs the target even though it does not look like it does. */
+  width: var(--space-5);
+  height: var(--space-5);
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.ident-remove:hover { background: var(--panel); color: var(--text); }
+.ident-remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 /* ---- tf: the themes ---- */
 :root[data-theme='night']{--bg:#0f1115;--panel:#161a21;--panel-2:#1c222b;--border:#262d38;--text:#e6e9ef;--muted:#8b94a4;--accent:#5b9dff;--accent-dim:#2a4877;--app-bg:#0f1115;color-scheme:dark}
 :root[data-theme='paper']{--bg:#f6f7f9;--panel:#ffffff;--panel-2:#f0f2f5;--border:#e4e8ec;--border-strong:#8792a1;--text:#191d23;--muted:#5d6773;--accent:#0e7872;--accent-dim:#7fbdb8;--on-accent:#ffffff;--good:#1c7a4a;--warn:#8a6216;--bad:#b3312c;--info:#216bc9;--shadow-1:0 4px 14px rgba(16, 24, 40, 0.08);--shadow-2:0 8px 24px rgba(16, 24, 40, 0.10);--shadow-3:0 12px 32px rgba(16, 24, 40, 0.12);--scrim:rgba(16, 24, 40, 0.32);color-scheme:light}