hlmnhkl-ui 0.34.0 → 0.35.0

package/README.md

@@ -65,7 +65,8 @@ Setup for other tools: [MCP server](https://ui.hlmnhkl.my/mcp).
 ## What you get
 
 - **The source, not a package.** The command copies plain files into your app. Change anything; there is no update to wait for.
-- **68 free components**, from Button, Dialog, Select and Table to Toast and Retime, one speed setting for every animation. See [COMPONENTS.md](COMPONENTS.md).
+- **71 free components**, from Button, Dialog, Select and Table to Toast and Retime, one speed setting for every animation. See [COMPONENTS.md](COMPONENTS.md).
+- **Controls that feel made by hand.** Dial, RulerScrubber and PickerWheel are drawn onto their marks like a magnet, glide after a flick without flying past, and settle without a bounce. Sheet rests at set heights, HoldToConfirm burns a line round its edge, SwipeDeck throws its cards and SplitFlap flips like a station board.
 - **One look, set by tokens.** Every colour, size and timing comes from one file, `tokens.css`. Colour appears only to mean something: good, caution or bad.
 - **Light and dark.** Dark follows the system, or set `data-theme="dark"` on `<html>`.
 - **Accessible.** Keyboard support per the WAI-ARIA patterns, visible focus, screen reader labels, and reduced motion. On touch screens every control gives at least a 44px target, even the small sizes; only the six PIN boxes and the seven calendar days get narrower when the row has no room, about 36px wide on a 320px phone. CalendarHeatmap's days are small by design, since a year must fit on screen; its month table gives the same numbers at full size.
@@ -74,7 +75,7 @@ Setup for other tools: [MCP server](https://ui.hlmnhkl.my/mcp).
 
 ## Pro
 
-72 more components (such as DataGrid, Calendar, Chart, KanbanBoard and Combobox), page blocks, full templates and brand themes are coming as hlmnhkl/ui Pro. You can see them on the [docs site](https://ui.hlmnhkl.my).
+76 more components (such as DataGrid, Calendar, Chart, KanbanBoard, Combobox and WeekSchedule), page blocks, full templates and brand themes are coming as hlmnhkl/ui Pro. You can see them on the [docs site](https://ui.hlmnhkl.my).
 
 ## Licence
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hlmnhkl-ui",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "React components in black, white and grey with one blue accent. Copy them into your app with npx hlmnhkl-ui add <name>.",
   "license": "MIT",
   "homepage": "https://ui.hlmnhkl.my",

package/src/components/LivePill/LivePill.module.css

@@ -0,0 +1,191 @@
+.root {
+  /* The row is the pill plus the card's inner padding, so the label keeps its pixels as the card grows round it. */
+  --pill-pad: calc(var(--hl-space-6) - (var(--hl-hit-min) - var(--hl-text-sm) * var(--hl-leading-normal)) / 2);
+  position: relative;
+  inline-size: 100%;
+  max-inline-size: var(--hl-panel-w-sm);
+  block-size: var(--pill-row, calc(var(--hl-hit-min) + var(--pill-pad)));
+  /* Only the pill takes taps; the clear row either side of it lets them through to the page. */
+  pointer-events: none;
+}
+
+.root[data-fixed] {
+  position: fixed;
+  z-index: var(--hl-z-sticky);
+  inset-inline: var(--hl-space-5);
+  inline-size: auto;
+  margin-inline: auto;
+}
+
+.root[data-fixed][data-placement='bottom'] {
+  bottom: calc(var(--hl-space-5) + env(safe-area-inset-bottom));
+}
+
+.root[data-fixed][data-placement='top'] {
+  top: calc(var(--hl-space-5) + env(safe-area-inset-top));
+}
+
+.shell {
+  --pill-bg: var(--hl-color-surface-sunken);
+  --pill-fg: var(--hl-color-fg);
+  --pill-muted: var(--hl-color-fg-muted);
+  --pill-line: var(--hl-color-border);
+  --pill-key: var(--hl-color-border-strong);
+  --pill-fill: var(--hl-color-inverse);
+  --pill-fill-fg: var(--hl-color-inverse-fg);
+  position: absolute;
+  inset-inline: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--hl-radius-sheet);
+  background: var(--pill-bg);
+  color: var(--pill-fg);
+  box-shadow: inset 0 0 0 var(--hl-line) var(--pill-key);
+  pointer-events: auto;
+  clip-path: var(--pill-shut);
+}
+
+.shell[data-tone='ink'] {
+  --pill-bg: var(--hl-color-inverse);
+  --pill-fg: var(--hl-color-inverse-fg);
+  --pill-muted: color-mix(in srgb, var(--pill-fg) 62%, var(--pill-bg));
+  --pill-line: color-mix(in srgb, var(--pill-fg) 18%, var(--pill-bg));
+  --pill-key: transparent;
+  --pill-fill: var(--hl-color-surface);
+  --pill-fill-fg: var(--hl-color-fg);
+}
+
+/* Shut, it closes fast and falls away. Open, the surface pours out of the pill on the liquid curve. */
+.shell[data-measured] {
+  transition: clip-path var(--hl-motion-fast) var(--hl-ease-in);
+}
+
+.shell[data-open] {
+  z-index: 1;
+  clip-path: inset(0 0 0 0 round var(--hl-radius-sheet));
+  transition: clip-path var(--hl-motion-liquid) var(--hl-ease-liquid);
+}
+
+/* Before it is measured (the first paint of a server page), only the pill's words show. */
+.shell:not([data-measured]):not([data-open]) {
+  visibility: hidden;
+}
+
+.shell:not([data-measured]):not([data-open]) .button {
+  visibility: visible;
+}
+
+.root[data-placement='bottom'] .shell {
+  bottom: 0;
+  flex-direction: column-reverse;
+}
+
+.root[data-placement='top'] .shell {
+  top: 0;
+}
+
+.row {
+  display: flex;
+  justify-content: center;
+}
+
+.root[data-placement='bottom'] .row {
+  padding-block-end: var(--pill-pad);
+}
+
+.root[data-placement='top'] .row {
+  padding-block-start: var(--pill-pad);
+}
+
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-block-size: var(--hl-hit-min);
+  max-inline-size: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: var(--hl-radius-full);
+  background: transparent;
+  color: inherit;
+  box-shadow: inset 0 0 0 var(--hl-line) var(--pill-key);
+  font: inherit;
+  font-size: var(--hl-text-sm);
+  font-weight: var(--hl-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: clip;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: box-shadow var(--hl-motion-fast) var(--hl-ease-out);
+}
+
+.button:focus-visible {
+  outline: var(--hl-line-focus) solid var(--hl-color-accent);
+  outline-offset: calc(var(--hl-line-focus) * -2);
+}
+
+/* Open, the pill stops being a chip: its outline goes, and its words read as the card's last row. */
+.shell[data-open] .button {
+  box-shadow: inset 0 0 0 var(--hl-line) transparent;
+}
+
+.stack {
+  display: grid;
+}
+
+.face {
+  grid-area: 1 / 1;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hl-space-3);
+  block-size: var(--hl-hit-min);
+  padding-inline: var(--hl-space-5);
+}
+
+.face svg {
+  flex: none;
+  font-size: var(--hl-icon-md);
+}
+
+/* The pill as its own progress bar: words under the fill turn to the fill's own ink. */
+.over {
+  background: var(--pill-fill);
+  color: var(--pill-fill-fg);
+  clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0);
+  transition:
+    clip-path var(--hl-motion-slow) var(--hl-ease-out),
+    opacity var(--hl-motion-fast) var(--hl-ease-out);
+}
+
+.over:dir(rtl) {
+  clip-path: inset(0 0 0 calc(100% - var(--p) * 100%));
+}
+
+.shell[data-open] .over {
+  opacity: 0;
+}
+
+.body {
+  padding: var(--hl-space-2) var(--hl-space-6) var(--hl-space-6);
+  opacity: 0;
+  transition: opacity var(--hl-motion-instant) var(--hl-ease-in);
+}
+
+.root[data-placement='bottom'] .body {
+  padding: var(--hl-space-6) var(--hl-space-6) var(--hl-space-2);
+}
+
+.shell[data-open] .body {
+  opacity: 1;
+  transition: opacity var(--hl-motion-base) var(--hl-ease-out) var(--hl-motion-fast);
+}
+
+.sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/src/components/LivePill/LivePill.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import { useEffect, useLayoutEffect, useRef, useState, type ComponentPropsWithRef, type CSSProperties, type ReactNode } from 'react'
+import { cx } from '../../internal/cx'
+import { motionMs } from '../../internal/motion'
+import { useControllable } from '../../internal/useControllable'
+import styles from './LivePill.module.css'
+
+export type LivePillProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'title'> & {
+  /** Screen reader name of the pill, the whole state in words, such as "Map download, 63%". */
+  label: string
+  /** What the small pill shows, such as an icon, a word and a number. It stays on its spot when the pill opens. */
+  compact: ReactNode
+  /** What the open card shows above (or below) the pill's own row. */
+  children: ReactNode
+  /** Whether it is open, when you control it. */
+  open?: boolean
+  /** Starting open state when you do not control it. */
+  defaultOpen?: boolean
+  /** Called with the new open state. */
+  onOpenChange?: (open: boolean) => void
+  /** Where it sits. At the bottom it is in thumb reach and grows up; at the top it grows down. */
+  placement?: 'bottom' | 'top'
+  /** Pins it to the screen edge, clear of the safe area. Leave off to place it yourself. */
+  fixed?: boolean
+  /** From 0 to 1: the pill fills from its start like a progress bar, and its words change ink under the fill. */
+  progress?: number
+  /** "paper" is a light pill with an outline; "ink" is a solid dark one. */
+  tone?: 'paper' | 'ink'
+  /** News for screen readers, said once each time it changes, such as "Download paused". Never a ticking number. */
+  news?: string
+  /** News that opens the pill by itself, such as "Rider is at your door". Said once, and the pill shrinks back after alertMs. */
+  alert?: string
+  /** How long an alert keeps it open, in ms. A hand or focus on the pill holds it open. */
+  alertMs?: number
+}
+
+// What the pill can hand focus to when it closes from a tap outside, so a tap on another control keeps it.
+const TAKES_FOCUS = 'a[href], button, input, select, textarea, label, [tabindex]:not([tabindex="-1"])'
+
+export function LivePill({
+  label,
+  compact,
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  placement = 'bottom',
+  fixed = false,
+  progress,
+  tone = 'paper',
+  news,
+  alert,
+  alertMs = 5000,
+  className,
+  style,
+  ...rest
+}: LivePillProps) {
+  const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange)
+  const shell = useRef<HTMLDivElement>(null)
+  const button = useRef<HTMLButtonElement>(null)
+  const [shut, setShut] = useState<string>()
+  const [rowH, setRowH] = useState<number>()
+  const [byAlert, setByAlert] = useState(false)
+  const [held, setHeld] = useState(false)
+  const [said, setSaid] = useState('')
+  const lastNews = useRef(news)
+  const lastAlert = useRef(alert)
+
+  // Shut, the card is cut back to the button's own box, so the pill grows out of its own spot.
+  useLayoutEffect(() => {
+    const sh = shell.current
+    const b = button.current
+    if (!sh || !b) return
+    const measure = () => {
+      const right = sh.offsetWidth - b.offsetLeft - b.offsetWidth
+      const bottom = sh.offsetHeight - b.offsetTop - b.offsetHeight
+      setShut(`inset(${b.offsetTop}px ${right}px ${bottom}px ${b.offsetLeft}px round ${b.offsetHeight / 2}px)`)
+      const row = b.parentElement as HTMLElement
+      setRowH(row.offsetHeight)
+    }
+    measure()
+    const ro = new ResizeObserver(measure)
+    ro.observe(sh)
+    ro.observe(b)
+    return () => ro.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (news === lastNews.current) return
+    lastNews.current = news
+    if (news) setSaid(news)
+  }, [news])
+
+  useEffect(() => {
+    if (alert === lastAlert.current) return
+    lastAlert.current = alert
+    if (!alert) return
+    setSaid(alert)
+    // Only a card the alert opened shrinks back by itself; one the person opened stays.
+    if (open) return
+    setByAlert(true)
+    setOpen(true)
+  }, [alert, setOpen])
+
+  const close = (refocus: boolean) => {
+    setByAlert(false)
+    setOpen(false)
+    if (refocus) button.current?.focus({ preventScroll: true })
+  }
+  const focusInside = () => !!shell.current?.contains(document.activeElement) && document.activeElement !== button.current
+
+  useEffect(() => {
+    if (!open) {
+      setByAlert(false)
+      return
+    }
+    const outside = (e: PointerEvent) => {
+      const target = e.target instanceof Element ? e.target : null
+      if (!target || shell.current?.contains(target)) return
+      const inside = focusInside()
+      close(false)
+      if (inside && !target.closest(TAKES_FOCUS)) window.setTimeout(() => button.current?.focus({ preventScroll: true }))
+    }
+    document.addEventListener('pointerdown', outside)
+    return () => document.removeEventListener('pointerdown', outside)
+  }, [open])
+
+  useEffect(() => {
+    if (!open || !byAlert || held) return
+    const t = window.setTimeout(() => close(focusInside()), Math.max(alertMs, motionMs('liquid')))
+    return () => window.clearTimeout(t)
+  }, [open, byAlert, held, alertMs])
+
+  const p = progress === undefined ? undefined : Math.min(1, Math.max(0, progress))
+  const vars = { '--pill-shut': shut, '--pill-row': rowH === undefined ? undefined : `${rowH}px`, '--p': p, ...style } as CSSProperties
+
+  return (
+    <div className={cx(styles.root, className)} data-placement={placement} data-fixed={fixed || undefined} style={vars} {...rest}>
+      <div
+        ref={shell}
+        className={styles.shell}
+        data-open={open || undefined}
+        data-measured={shut ? '' : undefined}
+        data-tone={tone}
+        onKeyDown={(e) => {
+          if (e.key !== 'Escape' || !open) return
+          e.stopPropagation()
+          close(true)
+        }}
+        onPointerEnter={() => setHeld(true)}
+        onPointerLeave={() => setHeld(false)}
+        onFocus={() => setHeld(true)}
+        onBlur={(e) => {
+          if (!e.currentTarget.contains(e.relatedTarget as Node)) setHeld(false)
+        }}
+      >
+        <div className={styles.row}>
+          <button ref={button} type="button" className={styles.button} data-fill={p === undefined ? undefined : ''} aria-expanded={open} aria-label={label} onClick={() => (open ? close(false) : setOpen(true))}>
+            {p === undefined ? (
+              <span className={styles.face}>{compact}</span>
+            ) : (
+              <span className={styles.stack}>
+                <span className={styles.face}>{compact}</span>
+                <span className={cx(styles.face, styles.over)} aria-hidden="true">
+                  {compact}
+                </span>
+              </span>
+            )}
+          </button>
+        </div>
+        <div className={styles.body} inert={!open} aria-hidden={!open || undefined}>
+          {children}
+        </div>
+      </div>
+      <span className={styles.sr} role="status" aria-live="polite" aria-atomic="true">
+        {said}
+      </span>
+    </div>
+  )
+}

package/src/components/LivePill/index.ts

@@ -0,0 +1 @@
+export * from './LivePill'

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -109,6 +109,10 @@
 /* Segments touch, so the box itself is the 44px target. The floor sits on the content, so the
    overflow check still sees the natural width, and tight mode shrinks no further than 44px. */
 @media (pointer: coarse) {
+  .item,
+  .sm .item {
+    min-height: var(--hl-hit-min);
+  }
   .text,
   .icon:only-child {
     min-width: calc(var(--hl-hit-min) - var(--pad) * 2);

package/src/components/SplitFlap/SplitFlap.module.css

@@ -0,0 +1,107 @@
+.root {
+  display: inline-flex;
+  vertical-align: middle;
+  font-size: var(--hl-text-xl);
+  font-weight: var(--hl-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.root[data-size='sm'] {
+  font-size: var(--hl-text-md);
+}
+
+.root[data-size='lg'] {
+  font-size: var(--hl-text-4xl);
+}
+
+.sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.board {
+  display: inline-flex;
+  gap: var(--hl-space-1);
+  border-radius: var(--hl-radius-xs);
+}
+
+.root[data-size='lg'] .board {
+  gap: var(--hl-space-2);
+}
+
+.cell {
+  position: relative;
+  display: block;
+  inline-size: var(--hl-flap-w);
+  block-size: var(--hl-flap-h);
+  perspective: calc(var(--hl-flap-h) * 3);
+  color: var(--hl-color-fg);
+}
+
+/* Two halves with a hairline seam between them, where the page shows through. */
+.top,
+.bottom,
+.front,
+.back {
+  position: absolute;
+  inset-inline: 0;
+  block-size: calc(50% - var(--hl-line) / 2);
+  overflow: hidden;
+}
+
+.top,
+.front {
+  top: 0;
+  border-radius: var(--hl-radius-xs) var(--hl-radius-xs) 0 0;
+  background: var(--hl-flap-top);
+}
+
+.bottom,
+.back {
+  bottom: 0;
+  border-radius: 0 0 var(--hl-radius-xs) var(--hl-radius-xs);
+  background: var(--hl-flap-bottom);
+}
+
+.glyph {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  block-size: var(--hl-flap-h);
+  line-height: var(--hl-flap-h);
+  text-align: center;
+}
+
+.bottom .glyph,
+.back .glyph {
+  top: auto;
+  bottom: 0;
+}
+
+/* The falling flap turns on the seam, so after half a turn its back lies over the bottom half. */
+.flap {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  z-index: 1;
+  block-size: calc(50% - var(--hl-line) / 2);
+  transform-origin: 50% calc(100% + var(--hl-line) / 2);
+  transform-style: preserve-3d;
+}
+
+.front,
+.back {
+  block-size: 100%;
+  backface-visibility: hidden;
+}
+
+.back {
+  top: 0;
+  bottom: auto;
+  transform: rotateX(180deg);
+}

package/src/components/SplitFlap/SplitFlap.tsx

@@ -0,0 +1,224 @@
+'use client'
+
+import { useEffect, useRef, useState, type ComponentPropsWithRef } from 'react'
+import { cx } from '../../internal/cx'
+import { easing, readMotionMs } from '../../internal/motion'
+import styles from './SplitFlap.module.css'
+
+export type SplitFlapProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {
+  /** The text the board shows. A change flips each cell forward through the drum to its new letter. */
+  value: string
+  /** At least this many cells: shorter text is padded with blank ones, so a column keeps its width. */
+  length?: number
+  /** Text size of the cells. */
+  size?: 'sm' | 'md' | 'lg'
+  /** The drum's letters, in the order a cell passes them. A letter that is not on it flips straight in. */
+  chars?: string
+  /** Says the new text to screen readers once, when the board has landed. Turn off when one message covers several boards. */
+  announce?: boolean
+  /** Called once with the text when every cell has landed. */
+  onSettle?: (value: string) => void
+}
+
+/** The drum of a real board: a blank, letters, digits and a few marks. */
+export const SPLIT_FLAP_CHARS = ' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789:.,-+%/'
+
+// A fold of about 90ms, fast steps of 40ms, and the last three slow down. A cell passes 8 letters at
+// most, and the cells start one after another within 350ms, so a whole change ends inside a second.
+const FOLD = 90
+const FAST = 40
+const TAIL = [70, 100, 140]
+const MAX_STEPS = 8
+const STAGGER = 35
+const CASCADE_CAP = 350
+// The fast motion token at its base, so Retime scales the board with everything else.
+const FAST_TOKEN = 140
+
+type Cell = { root: HTMLSpanElement; top: HTMLSpanElement; bottom: HTMLSpanElement; shown: string }
+
+/** The letters a cell passes on its way from `from` to `to`, at most MAX_STEPS, ending on `to`. */
+function route(from: string, to: string, drum: string) {
+  const a = drum.indexOf(from)
+  const b = drum.indexOf(to)
+  if (a < 0 || b < 0) return from === to ? [] : [to]
+  const n = Math.min((b - a + drum.length) % drum.length, MAX_STEPS)
+  return Array.from({ length: n }, (_, i) => drum[(b - n + 1 + i + drum.length) % drum.length])
+}
+
+/** The wait before each step: fast in the middle, slow for the last three. */
+const gaps = (n: number) => Array.from({ length: n }, (_, i) => (n - 1 - i < TAIL.length ? TAIL[TAIL.length - n + i] : FAST))
+
+const NBSP = ' '
+const shownChar = (ch: string) => (ch === ' ' ? NBSP : ch)
+const escape = (ch: string) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[ch] ?? ch
+
+const halfHtml = (cls: string, ch: string) => `<span class="${cls}"><span class="${styles.glyph}">${escape(shownChar(ch))}</span></span>`
+const cellHtml = (ch: string) => `<span class="${styles.cell}">${halfHtml(styles.top, ch)}${halfHtml(styles.bottom, ch)}</span>`
+
+const fromHtml = (html: string) => {
+  const t = document.createElement('template')
+  t.innerHTML = html
+  return t.content.firstElementChild as HTMLSpanElement
+}
+
+const makeCell = (ch: string): Cell => {
+  const root = fromHtml(cellHtml(ch))
+  return { root, top: root.children[0] as HTMLSpanElement, bottom: root.children[1] as HTMLSpanElement, shown: ch }
+}
+
+const setHalf = (h: Element, ch: string) => {
+  ;(h.firstElementChild as HTMLElement).textContent = shownChar(ch)
+}
+
+export function SplitFlap({ value, length = 0, size = 'md', chars = SPLIT_FLAP_CHARS, announce = true, onSettle, className, ...rest }: SplitFlapProps) {
+  const target = value.padEnd(length, ' ')
+  // The first cells come with the markup, so a server page shows the board before any script runs.
+  const [first] = useState(() => ({ __html: [...target].map(cellHtml).join('') }))
+  const [said, setSaid] = useState(value)
+  const board = useRef<HTMLSpanElement>(null)
+  const cells = useRef<Cell[] | null>(null)
+  const timers = useRef<number[]>([])
+  const anims = useRef(new Set<Animation>())
+  const run = useRef(0)
+  const shrinkEnd = useRef<(() => void) | null>(null)
+  const settle = useRef(onSettle)
+  settle.current = onSettle
+
+  const stopAll = () => {
+    timers.current.forEach(clearTimeout)
+    timers.current = []
+    anims.current.forEach((a) => a.finish())
+    anims.current.clear()
+    shrinkEnd.current?.()
+    // Caught mid-run, each cell carries on from the letter it was showing.
+    for (const c of cells.current ?? []) setHalf(c.bottom, c.shown)
+  }
+
+  useEffect(() => {
+    const b = board.current
+    if (!b) return
+    if (!cells.current) {
+      cells.current = [...b.children].map((root, i) => ({ root: root as HTMLSpanElement, top: root.children[0] as HTMLSpanElement, bottom: root.children[1] as HTMLSpanElement, shown: [...target][i] ?? ' ' }))
+      return
+    }
+    const id = ++run.current
+    const live = () => id === run.current
+    const running = timers.current.length > 0 || anims.current.size > 0
+    stopAll()
+    const done = () => {
+      if (!live()) return
+      timers.current = []
+      setSaid(value)
+      settle.current?.(value)
+    }
+    const list = cells.current
+    if (list.map((c) => c.shown).join('') === target) {
+      if (running) done()
+      return
+    }
+
+    const scale = readMotionMs('fast') / FAST_TOKEN
+    // Reduced motion: the new text at once, with no flips and no morph.
+    if (!scale) {
+      cells.current = [...target].map(makeCell)
+      b.replaceChildren(...cells.current.map((c) => c.root))
+      done()
+      return
+    }
+
+    const n0 = list.length
+    const n1 = target.length
+    const radius = getComputedStyle(b).borderRadius || '0px'
+    const liquid = { duration: readMotionMs('liquid'), easing: easing('liquid') }
+    let left = 0
+    const landed = () => {
+      if (--left === 0) done()
+    }
+
+    // Longer: the new cells are laid out at once, and the board's edge grows over them.
+    if (n1 > n0) {
+      const before = b.offsetWidth
+      for (let i = n0; i < n1; i++) {
+        const c = makeCell(' ')
+        list.push(c)
+        b.append(c.root)
+      }
+      const grow = b.offsetWidth - before
+      const a = b.animate({ clipPath: [`inset(0 ${grow}px 0 0 round ${radius})`, `inset(0 0 0 0 round ${radius})`] }, liquid)
+      anims.current.add(a)
+      a.finished.then(() => anims.current.delete(a), () => {})
+    }
+
+    // Shorter: the board's edge folds over the extra cells while the rest flip, then they go.
+    if (n1 < n0) {
+      const keep = list.slice(0, n1)
+      const box = b.getBoundingClientRect()
+      const edge = keep.length ? keep[keep.length - 1].root.getBoundingClientRect().right : box.left
+      const a = b.animate({ clipPath: [`inset(0 0 0 0 round ${radius})`, `inset(0 ${box.right - edge}px 0 0 round ${radius})`] }, { ...liquid, fill: 'forwards' })
+      left++
+      const end = () => {
+        shrinkEnd.current = null
+        list.slice(n1).forEach((c) => c.root.remove())
+        cells.current = keep
+        a.cancel()
+        if (live()) landed()
+      }
+      shrinkEnd.current = end
+      a.finished.then(() => shrinkEnd.current === end && end(), () => {})
+    }
+
+    const goal = [...target]
+    const changed = goal.map((ch, i) => (list[i].shown !== ch ? i : -1)).filter((i) => i >= 0)
+    const stagger = Math.min(STAGGER, CASCADE_CAP / Math.max(1, changed.length))
+    left += changed.length
+    if (!left) return done()
+
+    const flip = (cell: Cell, next: string, last: boolean, fold: number) => {
+      const prev = cell.shown
+      cell.shown = next
+      setHalf(cell.top, next)
+      // The falling flap: the old letter's top half in front, the new letter's bottom half behind.
+      const flap = fromHtml(`<span class="${styles.flap}">${halfHtml(styles.front, prev)}${halfHtml(styles.back, next)}</span>`)
+      cell.root.append(flap)
+      const a = flap.animate([{ transform: 'rotateX(0deg)' }, { transform: 'rotateX(-180deg)' }], { duration: fold, easing: easing('in') })
+      anims.current.add(a)
+      const end = () => {
+        anims.current.delete(a)
+        setHalf(cell.bottom, next)
+        flap.remove()
+        if (last && live()) landed()
+      }
+      a.finished.then(end, end)
+    }
+
+    changed.forEach((i, order) => {
+      const cell = list[i]
+      const path = route(cell.shown, goal[i], chars)
+      const wait = gaps(path.length)
+      let t = order * stagger
+      path.forEach((next, k) => {
+        timers.current.push(window.setTimeout(() => flip(cell, next, k === path.length - 1, Math.max(FOLD, wait[k]) * scale), t * scale))
+        t += wait[k]
+      })
+    })
+  }, [target])
+
+  useEffect(
+    () => () => {
+      // Gone: the run is over, so a cancelled flip ends without calling onSettle.
+      run.current++
+      timers.current.forEach(clearTimeout)
+      anims.current.forEach((a) => a.cancel())
+    },
+    [],
+  )
+
+  return (
+    <span className={cx(styles.root, className)} data-size={size} {...rest}>
+      <span className={styles.sr} aria-live={announce ? 'polite' : undefined} aria-atomic="true">
+        {said}
+      </span>
+      <span ref={board} className={styles.board} aria-hidden="true" dangerouslySetInnerHTML={first} />
+    </span>
+  )
+}

package/src/components/SplitFlap/index.ts

@@ -0,0 +1 @@
+export * from './SplitFlap'

package/src/components/SwipeDeck/SwipeDeck.module.css

@@ -0,0 +1,238 @@
+.root {
+  display: grid;
+  gap: var(--hl-space-5);
+  inline-size: 100%;
+  /* Clipped sideways only, at the deck's own outer edge (the screen edge on a phone), so a thrown card
+     never makes the page scroll sideways and a tilted one keeps its corners. */
+  overflow-x: clip;
+}
+
+/* Room above for the corner of a tilted card. */
+.stage {
+  padding-block: var(--hl-space-7) var(--hl-space-6);
+}
+
+.deck {
+  --rise: 0;
+  position: relative;
+  display: grid;
+  max-inline-size: var(--hl-deck-w);
+  margin-inline: auto;
+  border-radius: var(--hl-radius-panel);
+  outline: none;
+}
+
+.deck:focus-visible {
+  box-shadow: var(--hl-focus-ring);
+}
+
+.card {
+  position: relative;
+  z-index: 3;
+  grid-area: 1 / 1;
+  display: grid;
+  min-block-size: var(--hl-deck-card-h);
+  border: var(--hl-line) solid var(--hl-color-border);
+  border-radius: var(--hl-radius-panel);
+  background: var(--hl-color-surface-raised);
+  box-shadow: var(--hl-shadow-2);
+  transform-origin: 50% 100%;
+  /* A sideways drag throws the card; up and down still scrolls the page. */
+  touch-action: pan-y;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: grab;
+}
+
+.deck[data-dragging] .card[data-depth='0'] {
+  cursor: grabbing;
+  box-shadow: var(--hl-shadow-3);
+}
+
+/* The cards behind rise with the pull: one step up as the top card nears its mark. */
+.card[data-depth='1'] {
+  z-index: 2;
+  transform: translateY(calc((1 - var(--rise)) * var(--hl-space-3))) scale(calc(0.94 + 0.06 * var(--rise)));
+  box-shadow: var(--hl-shadow-1);
+  cursor: default;
+}
+
+.card[data-depth='2'] {
+  z-index: 1;
+  transform: translateY(calc(var(--hl-space-5) - var(--rise) * var(--hl-space-3))) scale(calc(0.88 + 0.06 * var(--rise)));
+  box-shadow: none;
+  cursor: default;
+}
+
+.deck:not([data-dragging]) .card[data-depth='1'],
+.deck:not([data-dragging]) .card[data-depth='2'] {
+  transition: transform var(--hl-motion-base) var(--hl-ease-out);
+}
+
+.empty {
+  grid-area: 1 / 1;
+  display: grid;
+  place-content: center;
+  min-block-size: var(--hl-deck-card-h);
+  padding: var(--hl-space-6);
+  border: var(--hl-line) dashed var(--hl-color-border-strong);
+  border-radius: var(--hl-radius-panel);
+  color: var(--hl-color-fg-muted);
+  text-align: center;
+}
+
+/* The ruler under the card: a knob follows it, and the two throw marks pull it in. */
+.ruler {
+  position: relative;
+  inline-size: 100%;
+  max-inline-size: var(--hl-deck-w);
+  block-size: var(--hl-space-6);
+  margin-inline: auto;
+  background: linear-gradient(var(--hl-color-border), var(--hl-color-border)) center / 100% var(--hl-line) no-repeat;
+}
+
+.mark,
+.centre {
+  position: absolute;
+  top: 50%;
+  inline-size: var(--hl-line-thick);
+  block-size: var(--hl-space-5);
+  background: var(--hl-color-border-strong);
+  translate: -50% -50%;
+  transition:
+    background-color var(--hl-motion-fast) var(--hl-ease-out),
+    inline-size var(--hl-motion-fast) var(--hl-ease-out);
+}
+
+.centre {
+  left: 50%;
+  block-size: var(--hl-space-3);
+}
+
+.mark[data-side='left'] {
+  left: calc(50% - var(--hl-deck-throw) * 100%);
+}
+
+.mark[data-side='right'] {
+  left: calc(50% + var(--hl-deck-throw) * 100%);
+}
+
+.mark[data-armed] {
+  inline-size: calc(var(--hl-line-thick) * 2);
+  background: var(--hl-color-accent);
+}
+
+.knob {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  inline-size: var(--hl-space-4);
+  block-size: var(--hl-space-4);
+  margin: calc(var(--hl-space-4) / -2);
+  border-radius: var(--hl-radius-full);
+  background: var(--hl-color-fg);
+}
+
+.knob[data-armed] {
+  background: var(--hl-color-accent);
+}
+
+.bar {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: var(--hl-space-4);
+  align-items: center;
+  max-inline-size: var(--hl-deck-w);
+  inline-size: 100%;
+  margin-inline: auto;
+}
+
+.choice {
+  --fill: 0;
+  position: relative;
+  display: grid;
+  min-block-size: var(--hl-control-h-lg);
+  padding: 0;
+  border: var(--hl-line) solid var(--hl-color-border-strong);
+  border-radius: var(--hl-radius-full);
+  background: var(--hl-color-surface);
+  color: var(--hl-color-fg);
+  font: inherit;
+  font-weight: var(--hl-weight-semibold);
+  overflow: clip;
+  transform: scale(calc(1 + var(--fill) * 0.08));
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.word {
+  display: grid;
+  place-items: center;
+  padding-inline: var(--hl-space-5);
+  white-space: nowrap;
+}
+
+/* The fill pours in from the button's inner edge toward the side the card goes, and the word under it turns to its ink. */
+.fill {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  background: var(--hl-color-inverse);
+  color: var(--hl-color-inverse-fg);
+  clip-path: inset(0 0 0 calc((1 - var(--fill)) * 100%));
+}
+
+.choice[data-side='end'] .fill,
+.choice[data-side='start']:dir(rtl) .fill {
+  clip-path: inset(0 calc((1 - var(--fill)) * 100%) 0 0);
+}
+
+.choice[data-side='end']:dir(rtl) .fill {
+  clip-path: inset(0 0 0 calc((1 - var(--fill)) * 100%));
+}
+
+.choice[aria-disabled] {
+  border-color: var(--hl-color-border);
+  color: var(--hl-color-fg-disabled);
+  cursor: not-allowed;
+}
+
+@media (hover: hover) {
+  .choice:not([aria-disabled]):hover {
+    background: var(--hl-color-surface-hover);
+  }
+}
+
+.choice:focus-visible,
+.undo:focus-visible {
+  outline: none;
+  box-shadow: var(--hl-focus-ring);
+}
+
+.undo {
+  display: grid;
+  place-items: center;
+  inline-size: var(--hl-control-h-lg);
+  block-size: var(--hl-control-h-lg);
+  padding: 0;
+  border: 0;
+  border-radius: var(--hl-radius-full);
+  background: var(--hl-color-surface-sunken);
+  color: var(--hl-color-fg);
+  font-size: var(--hl-icon-lg);
+  cursor: pointer;
+}
+
+.undo[aria-disabled] {
+  color: var(--hl-color-fg-disabled);
+  cursor: not-allowed;
+}
+
+.sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/src/components/SwipeDeck/SwipeDeck.tsx

@@ -0,0 +1,349 @@
+'use client'
+
+import { useEffect, useLayoutEffect, useRef, useState, type ComponentPropsWithRef, type KeyboardEvent, type PointerEvent, type ReactNode } from 'react'
+import { cx } from '../../internal/cx'
+import { clamp, magnetTo, pull, speedTracker, springTo } from '../../internal/feel'
+import { UndoIcon } from '../../internal/icons'
+import { easing, readMotionMs } from '../../internal/motion'
+import { tokenNumber } from '../../internal/useScrub'
+import styles from './SwipeDeck.module.css'
+
+export type SwipeDeckSide = 'start' | 'end'
+
+export type SwipeDeckProps<T> = Omit<ComponentPropsWithRef<'div'>, 'children' | 'onChange'> & {
+  /** The cards, top card first. The top card is the first whose key is not decided yet, so you may remove decided ones. */
+  items: T[]
+  /** A key that stays the same for each item. */
+  getKey: (item: T) => string
+  /** A short name for an item, said by screen readers after each decision. */
+  getName: (item: T) => string
+  /** Draws one card. */
+  renderCard: (item: T) => ReactNode
+  /** Screen reader name of the deck, such as "Flats to rent". */
+  label: string
+  /** The two button words, for the start side then the end side. */
+  actions?: [string, string]
+  /** What screen readers say was done, start then end, such as "Passed" and "Saved". */
+  decided?: [string, string]
+  /** Called once for each card, when it has been thrown or a button or key decided it. */
+  onDecide?: (item: T, side: SwipeDeckSide) => void
+  /** Called when Undo brings a card back. If you removed it from items, put it back here. */
+  onUndo?: (item: T) => void
+  /** Screen reader name of the undo button. */
+  undoLabel?: string
+  /** Shown when every card has been decided. */
+  empty?: ReactNode
+}
+
+type Side = -1 | 1
+type Done<T> = { item: T; side: Side; dir: SwipeDeckSide }
+
+// A press is a drag only once it moves this far sideways, so a tap on a card's own button stays a tap.
+const SLOP = 8
+// The throw rule: past --hl-deck-throw of the card's width, or a flick this fast that has moved at least FLICK_MIN.
+const FLICK = 600
+const FLICK_MIN = 40
+const TILT = 0.06
+const TILT_MAX = 14
+// How far round each throw mark it draws the card in, as a share of the distance to the mark.
+const MARK_REACH = 0.3
+// The speed a card leaves at, or comes back at on undo, when no hand threw it.
+const THROW_SPEED = 1800
+
+export function SwipeDeck<T>({
+  items,
+  getKey,
+  getName,
+  renderCard,
+  label,
+  actions = ['Pass', 'Save'],
+  decided = ['Passed', 'Saved'],
+  onDecide,
+  onUndo,
+  undoLabel = 'Undo the last decision',
+  empty = 'That was the last card.',
+  className,
+  ...rest
+}: SwipeDeckProps<T>) {
+  const [done, setDone] = useState<Done<T>[]>([])
+  const [news, setNews] = useState('')
+  const [armed, setArmed] = useState<Side | 0>(0)
+  const root = useRef<HTMLDivElement>(null)
+  const deck = useRef<HTMLDivElement>(null)
+  const top = useRef<HTMLDivElement>(null)
+  const knob = useRef<HTMLSpanElement>(null)
+  const buttons = useRef<Record<Side, HTMLButtonElement | null>>({ [-1]: null, [1]: null })
+  const at = useRef(0)
+  const stop = useRef(() => {})
+  const busy = useRef(false)
+  const queued = useRef<Side | null>(null)
+  const moved = useRef(false)
+  const undoing = useRef<Side | null>(null)
+  const drag = useRef<{ x: number; y: number; base: number; id: number; sideways: boolean; speed: ReturnType<typeof speedTracker> } | null>(null)
+  // The top card is the first one not yet decided, found by key, so the app may trim or replace items.
+  const gone = new Set(done.map((d) => getKey(d.item)))
+  const left = items.filter((item) => !gone.has(getKey(item)))
+  const latest = useRef({ left, count: done.length, onDecide, getName, decided })
+  latest.current = { left, count: done.length, onDecide, getName, decided }
+
+  const rtl = () => !!root.current && getComputedStyle(root.current).direction === 'rtl'
+  // Right is the end side, or the start side in a right-to-left page.
+  const named = (side: Side): SwipeDeckSide => ((side > 0) !== rtl() ? 'end' : 'start')
+  const physical = (dir: SwipeDeckSide): Side => ((dir === 'end') !== rtl() ? 1 : -1)
+  const widthOf = () => top.current?.offsetWidth || deck.current?.offsetWidth || 300
+  const share = useRef(0.35)
+  const line = () => widthOf() * share.current
+  const reduced = () => readMotionMs('fling') === 0
+
+  const paint = (x: number) => {
+    at.current = x
+    const el = top.current
+    if (el) {
+      el.style.transform = x ? `translate3d(${x.toFixed(1)}px, 0, 0) rotate(${clamp(x * TILT, -TILT_MAX, TILT_MAX).toFixed(2)}deg)` : ''
+      // Past a card's width away it fades as it goes, so it leaves before any edge cuts it.
+      const w = widthOf()
+      const fade = clamp(1 - (Math.abs(x) - w) / (w * 0.8), 0, 1)
+      el.style.opacity = fade < 1 ? fade.toFixed(3) : ''
+    }
+    const T = line()
+    const near = pull(T - Math.min(Math.abs(x), T), T)
+    deck.current?.style.setProperty('--rise', near.toFixed(3))
+    const side: Side | 0 = x > 0 ? 1 : x < 0 ? -1 : 0
+    for (const dir of ['start', 'end'] as SwipeDeckSide[]) {
+      const btn = buttons.current[dir === 'start' ? -1 : 1]
+      if (btn) btn.style.setProperty('--fill', side === physical(dir) ? near.toFixed(3) : '0')
+    }
+    setArmed(Math.abs(x) >= T - 0.5 ? side : 0)
+    if (knob.current) knob.current.style.transform = `translateX(${clamp(x, -widthOf() / 2, widthOf() / 2).toFixed(1)}px)`
+  }
+
+  const offStage = (side: Side) => side * ((root.current?.offsetWidth ?? 400) / 2 + widthOf() * 1.2)
+
+  const commit = (side: Side) => {
+    const { left, count, onDecide, getName, decided } = latest.current
+    const [item, next] = left
+    if (!item) return void (busy.current = false)
+    const dir = named(side)
+    setDone((d) => [...d, { item, side, dir }])
+    latest.current = { ...latest.current, left: left.slice(1), count: count + 1 }
+    const said = `${decided[dir === 'start' ? 0 : 1]}: ${getName(item)}.`
+    setNews(next ? `${said} Card ${count + 2} of ${count + left.length}: ${getName(next)}.` : `${said} No more cards.`)
+    onDecide?.(item, dir)
+  }
+
+  const finish = (side: Side) => {
+    stop.current = () => {}
+    paint(0)
+    commit(side)
+  }
+
+  const fly = (side: Side, velocity: number) => {
+    const el = top.current
+    if (!el || !latest.current.left.length) return
+    if (busy.current) {
+      queued.current = side
+      return
+    }
+    busy.current = true
+    stop.current()
+    if (reduced()) {
+      const anim = el.animate({ opacity: [1, 0] }, { duration: readMotionMs('base'), easing: easing('out'), fill: 'forwards' })
+      let ended = false
+      const end = () => {
+        if (ended) return
+        ended = true
+        anim.cancel()
+        finish(side)
+      }
+      anim.finished.then(end, end)
+      // Stopped (the deck went away mid-fade): the fade ends and nothing is decided.
+      stop.current = () => {
+        ended = true
+        anim.cancel()
+      }
+      return
+    }
+    const speed = side * Math.max(Math.abs(velocity), THROW_SPEED)
+    stop.current = springTo({ from: at.current, to: offStage(side), velocity: speed, period: readMotionMs('fling'), rest: 2, onFrame: paint, onDone: () => finish(side) })
+  }
+
+  const back = (velocity = 0) => {
+    stop.current()
+    stop.current = springTo({ from: at.current, to: 0, velocity, period: readMotionMs('fling'), damping: 1, rest: 0.5, onFrame: paint })
+  }
+
+  const undo = () => {
+    if (!done.length) return
+    if (busy.current) return
+    const last = done[done.length - 1]
+    busy.current = true
+    queued.current = null
+    undoing.current = last.side
+    setDone((d) => d.slice(0, -1))
+    const count = done.length - 1
+    setNews(`Brought back: ${getName(last.item)}. Card ${count + 1} of ${count + left.length + 1}.`)
+    onUndo?.(last.item)
+  }
+
+  // A key pressed mid-move plays once, when the move has ended.
+  const playQueue = () => {
+    busy.current = false
+    const q = queued.current
+    queued.current = null
+    if (q !== null) fly(q, 0)
+  }
+
+  // Undo plays the throw backwards: the card comes in from where it left.
+  useLayoutEffect(() => {
+    const side = undoing.current
+    const el = top.current
+    if (side === null) return playQueue()
+    undoing.current = null
+    if (!el) return playQueue()
+    if (reduced()) {
+      const anim = el.animate({ opacity: [0, 1] }, { duration: readMotionMs('base'), easing: easing('out') })
+      let ended = false
+      anim.finished.then(
+        () => !ended && playQueue(),
+        () => !ended && playQueue(),
+      )
+      stop.current = () => {
+        ended = true
+        anim.cancel()
+      }
+      return
+    }
+    paint(offStage(side))
+    stop.current = springTo({ from: offStage(side), to: 0, velocity: -side * THROW_SPEED, period: readMotionMs('fling'), damping: 1, rest: 0.5, onFrame: paint, onDone: playQueue })
+  }, [done.length])
+
+  useLayoutEffect(() => {
+    share.current = tokenNumber(root.current, '--hl-deck-throw') || share.current
+  }, [])
+  useEffect(() => () => stop.current(), [])
+
+  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {
+    if ((e.pointerType === 'mouse' && e.button !== 0) || busy.current) return
+    moved.current = false
+    drag.current = { x: e.clientX, y: e.clientY, base: at.current, id: e.pointerId, sideways: false, speed: speedTracker() }
+  }
+
+  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {
+    const d = drag.current
+    if (!d || d.id !== e.pointerId) return
+    const dx = e.clientX - d.x
+    const dy = e.clientY - d.y
+    if (!d.sideways) {
+      // Up or down first means the page scrolls, and the card lets go.
+      if (Math.abs(dy) > SLOP && Math.abs(dy) > Math.abs(dx)) return void (drag.current = null)
+      if (Math.abs(dx) < SLOP) return
+      d.sideways = true
+      moved.current = true
+      stop.current()
+      d.base = at.current - dx
+      try {
+        e.currentTarget.setPointerCapture(e.pointerId)
+      } catch {
+        // A pointer the browser no longer knows cannot be captured, and needs no capture.
+      }
+      deck.current?.setAttribute('data-dragging', '')
+    }
+    const raw = d.base + dx
+    d.speed.add(raw, e.timeStamp)
+    const T = line()
+    paint(magnetTo(raw, [-T, T], T * MARK_REACH))
+  }
+
+  const letGo = (e: PointerEvent<HTMLDivElement>, cancelled: boolean) => {
+    const d = drag.current
+    if (!d || d.id !== e.pointerId) return
+    drag.current = null
+    if (!d.sideways) return
+    deck.current?.removeAttribute('data-dragging')
+    if (cancelled) return back()
+    const x = at.current
+    const v = d.speed.speed(e.timeStamp)
+    if (Math.abs(x) >= line()) return fly(x > 0 ? 1 : -1, v)
+    if (Math.abs(v) > FLICK && Math.abs(x) >= FLICK_MIN && Math.sign(v) === Math.sign(x)) return fly(v > 0 ? 1 : -1, v)
+    back(v)
+  }
+
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.target !== e.currentTarget || e.altKey || e.ctrlKey || e.metaKey) return
+    if (e.key === 'ArrowLeft') fly(-1, 0)
+    else if (e.key === 'ArrowRight') fly(1, 0)
+    else if (e.key === 'Backspace') undo()
+    else return
+    e.preventDefault()
+  }
+
+  const shown = left.slice(0, 3)
+  const over = !left.length
+  const armedDir = armed ? named(armed) : undefined
+  const choice = (dir: SwipeDeckSide) => (
+    <button
+      ref={(b) => void (buttons.current[dir === 'start' ? -1 : 1] = b)}
+      type="button"
+      className={styles.choice}
+      data-side={dir}
+      aria-disabled={over || undefined}
+      onClick={() => !over && fly(physical(dir), 0)}
+    >
+      <span className={styles.word}>{actions[dir === 'start' ? 0 : 1]}</span>
+      <span className={styles.fill} aria-hidden="true">
+        <span className={styles.word}>{actions[dir === 'start' ? 0 : 1]}</span>
+      </span>
+    </button>
+  )
+
+  return (
+    <div ref={root} className={cx(styles.root, className)} data-armed={armedDir} {...rest}>
+      <div className={styles.stage}>
+        <div ref={deck} className={styles.deck} role="group" aria-roledescription="card deck" aria-label={label} aria-keyshortcuts="ArrowLeft ArrowRight Backspace" tabIndex={0} onKeyDown={onKeyDown}>
+          {over && <div className={styles.empty}>{empty}</div>}
+          {shown
+            .map((item, depth) => (
+              <div
+                key={getKey(item)}
+                ref={depth === 0 ? top : undefined}
+                className={styles.card}
+                data-depth={depth}
+                inert={depth > 0}
+                aria-hidden={depth > 0 || undefined}
+                onPointerDown={depth === 0 ? onPointerDown : undefined}
+                onPointerMove={depth === 0 ? onPointerMove : undefined}
+                onPointerUp={depth === 0 ? (e) => letGo(e, false) : undefined}
+                onPointerCancel={depth === 0 ? (e) => letGo(e, true) : undefined}
+                onClickCapture={(e) => {
+                  if (!moved.current) return
+                  moved.current = false
+                  e.preventDefault()
+                  e.stopPropagation()
+                }}
+                onDragStart={(e) => e.preventDefault()}
+              >
+                {renderCard(item)}
+              </div>
+            ))
+            .reverse()}
+        </div>
+      </div>
+      <div className={styles.ruler} aria-hidden="true">
+        <span className={styles.mark} data-side="left" data-armed={armed === -1 || undefined} />
+        <span className={styles.centre} />
+        <span className={styles.mark} data-side="right" data-armed={armed === 1 || undefined} />
+        <span ref={knob} className={styles.knob} data-armed={armed !== 0 || undefined} />
+      </div>
+      <div className={styles.bar}>
+        {choice('start')}
+        <button type="button" className={styles.undo} aria-label={undoLabel} aria-disabled={!done.length || undefined} onClick={undo}>
+          <UndoIcon />
+        </button>
+        {choice('end')}
+      </div>
+      <span className={styles.sr} role="status" aria-live="polite" aria-atomic="true">
+        {news}
+      </span>
+    </div>
+  )
+}

package/src/components/SwipeDeck/index.ts

@@ -0,0 +1 @@
+export * from './SwipeDeck'

package/src/tokens.css

@@ -598,6 +598,29 @@
   /* RulerScrubber: the space between two ticks, and its height (the speed arc's too) */
   --hl-ruler-tick-gap: 12px;
   --hl-ruler-h: 120px;
+  /* SwipeDeck: the card's width and least height, and the share of its width a drag must pass to throw it */
+  --hl-deck-w: 332px;
+  --hl-deck-card-h: 404px;
+  --hl-deck-throw: 0.35;
+  /* SplitFlap: one cell's width and height, as a share of its letter size, and its two halves */
+  --hl-flap-w: 0.92em;
+  --hl-flap-h: 1.36em;
+  --hl-flap-top: var(--hl-color-surface-sunken);
+  --hl-flap-bottom: var(--hl-color-surface-hover);
+}
+
+/* In the dark the top half is the lighter one, as on a lit board. Both are set again here, so a dark
+   part inside a light page takes its own greys. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --hl-flap-top: var(--hl-color-surface-active);
+    --hl-flap-bottom: var(--hl-color-surface-hover);
+  }
+}
+
+[data-theme="dark"] {
+  --hl-flap-top: var(--hl-color-surface-active);
+  --hl-flap-bottom: var(--hl-color-surface-hover);
 }
 
 :root,