hlmnhkl-ui 0.27.0 → 0.32.0

package/README.md

@@ -1,6 +1,6 @@
 # hlmnhkl/ui
 
-React components, measured down to the part you never see: the 44px tap area, the 2px focus ring, the timing of every move. Black, white and grey, and copied into your app so the code is yours.
+React components, measured down to the part you never see: the 44px tap area, the 2px focus ring, the timing of every move. Black, white and grey with one blue accent, and copied into your app so the code is yours.
 
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/hilmanhaikal/hlmnhkl-ui/main/.github/assets/home-dark.png">
@@ -74,7 +74,7 @@ Setup for other tools: [MCP server](https://ui.hlmnhkl.my/mcp).
 
 ## Pro
 
-71 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).
+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).
 
 ## Licence
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hlmnhkl-ui",
-  "version": "0.27.0",
-  "description": "React components in a monochrome style. Copy them into your app with npx hlmnhkl-ui add <name>.",
+  "version": "0.32.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",
   "repository": {

package/scripts/pro-components.json

@@ -22,6 +22,7 @@
   "Drawer",
   "EmojiPicker",
   "FileUpload",
+  "GlassLens",
   "HoverCard",
   "IcInput",
   "Image",

package/src/components/Button/Button.module.css

@@ -74,7 +74,7 @@
   box-shadow: var(--hl-shadow-1);
 }
 @media (hover: hover) {
-  .primary:hover:not([aria-disabled="true"]) { background: var(--hl-color-inverse-hover); }
+  .primary:hover:not([aria-disabled="true"]) { background: var(--hl-color-accent-hover); }
 }
 
 .secondary {

package/src/components/Dialog/Dialog.module.css

@@ -27,9 +27,11 @@
   max-height: calc(100dvh - var(--hl-space-5) * 2);
   display: flex;
   flex-direction: column;
-  border: var(--hl-line) solid var(--hl-color-border);
+  border: var(--hl-line) solid var(--hl-glass-edge, var(--hl-color-border));
   border-radius: var(--hl-radius-panel);
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-4);
   outline: none;
   pointer-events: auto;

package/src/components/DropdownMenu/DropdownMenu.module.css

@@ -6,9 +6,11 @@
   max-height: calc(100dvh - 2 * var(--hl-space-5));
   overflow-y: auto;
   padding: var(--hl-space-2);
-  border: var(--hl-line) solid var(--hl-color-border);
+  border: var(--hl-line) solid var(--hl-glass-edge, var(--hl-color-border));
   border-radius: var(--hl-radius-md);
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-3);
   outline: none;
   transform-origin: top left;
@@ -22,6 +24,12 @@
   pointer-events: none;
 }
 
+/* Liquid (internal/liquid.ts) grows the menu out of its button instead; the fade stands down. */
+.menu[data-liquid],
+.menu[data-liquid][data-state="closed"] {
+  animation: none;
+}
+
 .item {
   display: flex;
   align-items: center;

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -14,6 +14,7 @@ import {
   type Ref,
 } from 'react'
 import { useDismiss } from '../../internal/layers'
+import { useLiquid } from '../../internal/liquid'
 import { mergeRefs } from '../../internal/mergeRefs'
 import { Portal } from '../../internal/Portal'
 import { useFloating, type Align } from '../../internal/useFloating'
@@ -61,6 +62,8 @@ export function DropdownMenu({ trigger, items, label, align = 'start' }: Dropdow
   const typeahead = useRef({ text: '', at: 0 })
   const { mounted, state } = usePresence(open, 'fast')
   const floating = useFloating(anchorRef, menuRef, { open: mounted, side: 'bottom', align, offset: 6 })
+  // The menu grows out of its button and folds back into it.
+  useLiquid(menuRef, anchorRef, state, mounted && floating.ready)
 
   const close = (focusTrigger = true) => {
     setOpen(false)

package/src/components/Fab/Fab.module.css

@@ -45,7 +45,7 @@
 }
 
 @media (hover: hover) {
-  .fab:hover { background: var(--hl-color-inverse-hover); }
+  .fab:hover { background: var(--hl-color-accent-hover); }
 }
 
 .fab:active { scale: var(--hl-press-scale); }
@@ -142,7 +142,9 @@
 .actionLabel {
   padding: var(--hl-space-2) var(--hl-space-4);
   border-radius: var(--hl-radius-full);
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-2);
   font-size: var(--hl-text-sm);
   font-weight: var(--hl-weight-medium);
@@ -157,7 +159,9 @@
   height: var(--hl-hit-min);
   margin-inline-end: calc((var(--hl-fab-size) - var(--hl-hit-min)) / 2);
   border-radius: var(--hl-radius-full);
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-2);
 }
 

package/src/components/IconButton/IconButton.module.css

@@ -74,5 +74,5 @@
 }
 .primary { background: var(--hl-color-accent); color: var(--hl-color-accent-fg); }
 @media (hover: hover) {
-  .primary:hover:not(:disabled) { background: var(--hl-color-inverse-hover); }
+  .primary:hover:not(:disabled) { background: var(--hl-color-accent-hover); }
 }

package/src/components/Popover/Popover.module.css

@@ -4,9 +4,11 @@
   width: max-content;
   max-width: min(var(--hl-panel-w-sm), calc(100vw - var(--hl-space-5) * 2));
   padding: var(--hl-space-5);
-  border: var(--hl-line) solid var(--hl-color-border);
+  border: var(--hl-line) solid var(--hl-glass-edge, var(--hl-color-border));
   border-radius: var(--hl-radius-panel);
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-3);
   outline: none;
   transform-origin: top left;
@@ -20,6 +22,12 @@
   pointer-events: none;
 }
 
+/* Liquid (internal/liquid.ts) grows the panel out of its trigger instead; the pop stands down. */
+.panel[data-liquid],
+.panel[data-liquid][data-state="closed"] {
+  animation: none;
+}
+
 .head {
   display: flex;
   align-items: center;

package/src/components/Popover/Popover.tsx

@@ -14,6 +14,7 @@ import { cx } from '../../internal/cx'
 import { useFocusTrap } from '../../internal/focus'
 import { XIcon } from '../../internal/icons'
 import { useDismiss } from '../../internal/layers'
+import { useLiquid } from '../../internal/liquid'
 import { mergeRefs } from '../../internal/mergeRefs'
 import { Portal } from '../../internal/Portal'
 import { useControllable } from '../../internal/useControllable'
@@ -67,6 +68,8 @@ export function Popover({
   const panelRef = useRef<HTMLDivElement>(null)
   const { mounted, state } = usePresence(open, 'fast')
   const floating = useFloating(anchorRef, panelRef, { open: mounted, side, align, offset: 8 })
+  // The panel grows out of its trigger and folds back into it.
+  useLiquid(panelRef, anchorRef, state, mounted && floating.ready)
 
   useDismiss(open, [anchorRef, panelRef], () => setOpen(false))
   useFocusTrap(panelRef, open && mounted)

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

@@ -25,13 +25,18 @@
   box-shadow: var(--hl-shadow-2), 0 0 0 var(--hl-line) var(--hl-color-border);
 }
 
-/* No spring on the pill: it is pressed often, and an overshoot on every press feels wobbly. */
+/* A resize slides the pill plainly; a new choice stretches it (internal/liquid.ts), which only goes
+   2% past and settles, so a pill pressed often still never wobbles. */
 .pill[data-ready] {
   transition:
     transform var(--hl-motion-slow) var(--hl-ease-out),
     width var(--hl-motion-slow) var(--hl-ease-out);
 }
 
+.pill[data-liquid] {
+  transition: none;
+}
+
 /* Options share any room the track has beyond its own width, so a stretched track never ends in an empty gap. */
 .item {
   flex: 1 0 auto;

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -2,6 +2,7 @@
 
 import { useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
 import { cx } from '../../internal/cx'
+import { useStretch } from '../../internal/liquid'
 import { useControllable } from '../../internal/useControllable'
 import styles from './SegmentedControl.module.css'
 
@@ -41,6 +42,7 @@ export function SegmentedControl({
   const refs = useRef<Array<HTMLButtonElement | null>>([])
   const [pill, setPill] = useState<{ x: number; w: number } | null>(null)
   const [ready, setReady] = useState(false)
+  const pillRef = useRef<HTMLSpanElement>(null)
   const index = options.findIndex((o) => o.value === value)
   // With no match, the first enabled segment takes the tab stop
   const tabStop = index >= 0 && !options[index].disabled ? index : options.findIndex((o) => !o.disabled)
@@ -69,6 +71,9 @@ export function SegmentedControl({
     }
   }, [pill, ready])
 
+  // The pill stretches toward the new choice and settles there.
+  useStretch(pillRef, pill, index, ready, (b) => `translateX(${b.x}px)`)
+
   const move = (from: number, dir: 1 | -1) => {
     let i = from
     for (let n = 0; n < options.length; n++) {
@@ -100,6 +105,7 @@ export function SegmentedControl({
     >
       {pill && (
         <span
+          ref={pillRef}
           className={styles.pill}
           data-ready={ready || undefined}
           style={{ transform: `translateX(${pill.x}px)`, width: pill.w }}

package/src/components/Select/Select.module.css

@@ -103,6 +103,12 @@
   pointer-events: none;
 }
 
+/* Liquid (internal/liquid.ts) grows the list out of the field instead; the fade stands down. */
+.list[data-liquid],
+.list[data-liquid][data-state="closed"] {
+  animation: none;
+}
+
 .highlight {
   position: absolute;
   top: 0;

package/src/components/Select/Select.tsx

@@ -4,6 +4,7 @@ import { useEffect, useId, useLayoutEffect, useRef, useState, type KeyboardEvent
 import { cx } from '../../internal/cx'
 import { CheckIcon, ChevronDownIcon } from '../../internal/icons'
 import { useDismiss } from '../../internal/layers'
+import { useLiquid } from '../../internal/liquid'
 import { Portal } from '../../internal/Portal'
 import { useControllable } from '../../internal/useControllable'
 import { useFloating } from '../../internal/useFloating'
@@ -72,7 +73,9 @@ export function Select({
   const optionRefs = useRef<Array<HTMLDivElement | null>>([])
   const typeahead = useRef({ text: '', at: 0 })
   const { mounted, state } = usePresence(open, 'fast')
-  const { style, side } = useFloating(triggerRef, listRef, { open: mounted, side: 'bottom', align: 'start', offset: 6, matchWidth: true })
+  const { style, side, ready } = useFloating(triggerRef, listRef, { open: mounted, side: 'bottom', align: 'start', offset: 6, matchWidth: true })
+  // The list grows out of the field and folds back into it.
+  useLiquid(listRef, triggerRef, state, mounted && ready)
   const [hl, setHl] = useState<{ top: number; height: number } | null>(null)
 
   const selectedIndex = options.findIndex((o) => o.value === value)

package/src/components/Sheet/Sheet.module.css

@@ -19,10 +19,12 @@
   display: flex;
   flex-direction: column;
   margin-left: calc(min(100%, var(--hl-panel-w-lg)) / -2);
-  border: var(--hl-line) solid var(--hl-color-border);
+  border: var(--hl-line) solid var(--hl-glass-edge, var(--hl-color-border));
   border-bottom: 0;
   border-radius: var(--hl-radius-sheet) var(--hl-radius-sheet) 0 0;
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-4);
   outline: none;
   padding-bottom: env(safe-area-inset-bottom);
@@ -30,7 +32,11 @@
   transition: transform var(--hl-motion-slow) var(--hl-ease-spring);
 }
 
-.sheet[data-dragging] { transition: none; }
+.sheet[data-dragging],
+.sheet[data-fluid] { transition: none; }
+
+/* A spring is carrying it from the hand, so the CSS close must not start over from the top. */
+.sheet[data-fluid][data-state="closed"] { animation: none; }
 
 /* No "from" frame: the close starts where a drag left the sheet */
 .sheet[data-state="closed"] {

package/src/components/Sheet/Sheet.tsx

@@ -2,6 +2,7 @@
 
 import { useId, useRef, type PointerEvent, type ReactNode, type RefObject } from 'react'
 import { cx } from '../../internal/cx'
+import { rubber, speedTracker, useFling } from '../../internal/spring'
 import { useFocusTrap } from '../../internal/focus'
 import { XIcon } from '../../internal/icons'
 import { useDismiss, useScrollLock } from '../../internal/layers'
@@ -31,15 +32,17 @@ export type SheetProps = {
 }
 
 const CLOSE_RATIO = 0.3
-const CLOSE_VELOCITY = 0.5
+// px per second: a flick down this fast closes the sheet from anywhere.
+const CLOSE_SPEED = 500
 
 export function Sheet({ open, onOpenChange, title, description, children, footer, closeLabel = 'Close', initialFocus, className }: SheetProps) {
   const id = useId()
   const panelRef = useRef<HTMLDivElement>(null)
-  const drag = useRef<{ y: number; t: number; dy: number; pointer: number } | null>(null)
+  const drag = useRef<{ y: number; dy: number; pointer: number; speed: ReturnType<typeof speedTracker> } | null>(null)
   const { mounted, state } = usePresence(open, 'slow')
   const openRef = useRef(open)
   openRef.current = open
+  const { at, paint, fling, stop } = useFling(panelRef, open, 'y')
 
   useScrollLock(open)
   useDismiss(open, [panelRef], () => onOpenChange(false))
@@ -48,7 +51,10 @@ export function Sheet({ open, onOpenChange, title, description, children, footer
   const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {
     if ((e.target as HTMLElement).closest('button')) return
     if (e.pointerType === 'mouse' && e.button !== 0) return
-    drag.current = { y: e.clientY, t: performance.now(), dy: 0, pointer: e.pointerId }
+    stop()
+    // Caught mid-spring, it carries on from where it is.
+    drag.current = { y: e.clientY - at.current, dy: at.current, pointer: e.pointerId, speed: speedTracker() }
+    drag.current.speed.add(at.current)
     e.currentTarget.setPointerCapture(e.pointerId)
     panelRef.current?.setAttribute('data-dragging', '')
   }
@@ -58,8 +64,9 @@ export function Sheet({ open, onOpenChange, title, description, children, footer
     const panel = panelRef.current
     if (!d || !panel || d.pointer !== e.pointerId) return
     const raw = e.clientY - d.y
-    d.dy = raw > 0 ? raw : raw * 0.15
-    panel.style.transform = `translateY(${d.dy}px)`
+    d.dy = raw >= 0 ? raw : rubber(raw, panel.offsetHeight)
+    d.speed.add(d.dy)
+    paint(d.dy)
   }
 
   const onPointerUp = (e: PointerEvent<HTMLDivElement>) => {
@@ -69,16 +76,17 @@ export function Sheet({ open, onOpenChange, title, description, children, footer
     if (!d || !panel) return
     e.currentTarget.releasePointerCapture(d.pointer)
     panel.removeAttribute('data-dragging')
-    const velocity = d.dy / Math.max(1, performance.now() - d.t)
-    if (d.dy > panel.offsetHeight * CLOSE_RATIO || (velocity > CLOSE_VELOCITY && d.dy > 24)) {
+    const cancelled = e.type === 'pointercancel'
+    const speed = cancelled ? 0 : d.speed.speed()
+    const h = panel.offsetHeight
+    if (!cancelled && (d.dy > h * CLOSE_RATIO || (speed > CLOSE_SPEED && d.dy > 24))) {
+      fling(h, speed)
       onOpenChange(false)
-      // The close animation starts from the dragged spot. If the parent keeps it open, spring back.
+      // If the parent keeps it open, it springs back.
       requestAnimationFrame(() => {
-        if (openRef.current) panel.style.transform = ''
+        if (openRef.current) fling(0, 0)
       })
-    } else {
-      panel.style.transform = ''
-    }
+    } else fling(0, speed)
   }
 
   if (!mounted) return null

package/src/components/Slider/Slider.module.css

@@ -116,13 +116,40 @@
   pointer-events: none;
   opacity: 0;
   transform: translate(-50%, var(--hl-shift-sm)) scale(0.8);
+  /* It stays a beat after a click or a let-go, so the value can be read before it fades. */
   transition:
-    opacity var(--hl-motion-fast) var(--hl-ease-out),
-    transform var(--hl-motion-base) var(--hl-ease-spring);
+    opacity var(--hl-motion-fast) var(--hl-ease-out) var(--hl-motion-base),
+    transform var(--hl-motion-base) var(--hl-ease-spring) var(--hl-motion-base);
 }
 
 .input:active:not(:disabled) + .bubble,
-.input:focus-visible + .bubble {
+.input:focus-visible + .bubble,
+.trackWrap[data-gliding] .bubble {
   opacity: 1;
   transform: translate(-50%, 0) scale(1);
+  transition-delay: 0s;
+}
+
+/* Marks: dots on the track where the thumb's centre lands for each value. They never take a press, and
+   the one under the chosen value hides, so a dot never sits on the thumb at rest. */
+.marks {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.mark {
+  position: absolute;
+  top: 50%;
+  left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--m));
+  width: var(--hl-space-2);
+  height: var(--hl-space-2);
+  border-radius: var(--hl-radius-full);
+  background: var(--hl-color-border-strong);
+  translate: -50% -50%;
+  transition: opacity var(--hl-motion-fast) var(--hl-ease-out);
+}
+
+.mark[data-on] {
+  opacity: 0;
 }

package/src/components/Slider/Slider.tsx

@@ -1,7 +1,9 @@
 'use client'
 
-import { useId, type ComponentPropsWithRef } from 'react'
+import { useEffect, useId, useRef, useState, type ComponentPropsWithRef, type KeyboardEvent, type PointerEvent } from 'react'
 import { cx } from '../../internal/cx'
+import { magnetTo, nearestMark } from '../../internal/magnet'
+import { motionMs, prefersReducedMotion } from '../../internal/motion'
 import { useControllable } from '../../internal/useControllable'
 import styles from './Slider.module.css'
 
@@ -24,6 +26,8 @@ export type SliderProps = Omit<ComponentPropsWithRef<'input'>, 'type' | 'value'
   showValue?: boolean
   /** Turns the number into the text shown and read by screen readers. */
   formatValue?: (value: number) => string
+  /** Values the thumb is drawn to as it passes, shown as dots on the track. Let go near one and it lands on it; Page Up and Page Down jump between them. */
+  marks?: number[]
 }
 
 export function Slider({
@@ -36,16 +40,81 @@ export function Slider({
   step = 1,
   showValue = true,
   formatValue = String,
+  marks,
   id,
   className,
   disabled,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  onKeyDown,
+  onBlur,
   ...rest
 }: SliderProps) {
   const auto = useId()
   const inputId = id ?? auto
   const [value, setValue] = useControllable(valueProp, defaultValue ?? min, onValueChange)
-  const pct = max === min ? 0 : ((value - min) / (max - min)) * 100
+  // Where the thumb is drawn while it glides to a click or settles on a mark; the value is set already.
+  const [shown, setShown] = useState<number | null>(null)
+  // `grab` is how far from the thumb's centre it was picked up, so the thumb does not jump to the pointer.
+  const press = useRef<{ x: number; lastX: number; moved: boolean; grab: number } | null>(null)
+  const glide = useRef(0)
+  const latest = useRef(value)
+  latest.current = value
+  const at = shown ?? value
+  const pct = max === min ? 0 : ((at - min) / (max - min)) * 100
   const text = formatValue(value)
+  // How near a mark the pull starts: 6% of the track.
+  const reach = (max - min) * 0.06
+  const decimals = (String(step).split('.')[1] ?? '').length
+  const toStep = (v: number) => Math.min(max, Math.max(min, Number((Math.round((v - min) / step) * step + min).toFixed(decimals))))
+
+  useEffect(() => () => cancelAnimationFrame(glide.current), [])
+
+  // The thumb travels from where it is drawn to `to`, easing out. A click and a landing both use it.
+  function glideTo(from: number, to: number) {
+    cancelAnimationFrame(glide.current)
+    const ms = motionMs('base')
+    if (!ms || from === to || prefersReducedMotion()) return setShown(null)
+    const t0 = performance.now()
+    const tick = (now: number) => {
+      const p = Math.min(1, (now - t0) / ms)
+      setShown(p < 1 ? from + (to - from) * (1 - Math.pow(1 - p, 3)) : null)
+      if (p < 1) glide.current = requestAnimationFrame(tick)
+    }
+    glide.current = requestAnimationFrame(tick)
+  }
+
+  // The value under the pointer, before any step, from the input's own geometry: the thumb's centre
+  // runs from half a thumb in at each end.
+  function track(input: HTMLInputElement) {
+    const r = input.getBoundingClientRect()
+    const thumb = parseFloat(getComputedStyle(input).getPropertyValue('--thumb')) || 0
+    return { left: r.left + thumb / 2, width: Math.max(1, r.width - thumb), thumb }
+  }
+
+  function fromPointer(input: HTMLInputElement, x: number) {
+    const t = track(input)
+    return min + Math.min(1, Math.max(0, (x - t.left) / t.width)) * (max - min)
+  }
+
+  function change(input: HTMLInputElement, native: number) {
+    const p = press.current
+    const next = p && marks?.length ? toStep(magnetTo(fromPointer(input, p.lastX - p.grab), marks, reach)) : native
+    // A press that has not moved is a click: the value jumps, the thumb glides there. Once it moves, the hand leads.
+    if (p && !p.moved) glideTo(at, next)
+    else if (shown !== null) {
+      cancelAnimationFrame(glide.current)
+      setShown(null)
+    }
+    latest.current = next
+    setValue(next)
+  }
+
+  const endPress = () => {
+    press.current = null
+  }
 
   return (
     <div className={cx(styles.root, className)} data-disabled={disabled || undefined}>
@@ -53,23 +122,77 @@ export function Slider({
         <label htmlFor={inputId} className={styles.label}>{label}</label>
         {showValue && <output htmlFor={inputId} className={styles.value} aria-hidden="true">{text}</output>}
       </div>
-      <div className={styles.trackWrap} style={{ ['--pct' as string]: `${pct}%`, ['--p' as string]: pct / 100 }}>
+      <div className={styles.trackWrap} data-gliding={shown !== null || undefined} style={{ ['--pct' as string]: `${pct}%`, ['--p' as string]: pct / 100 }}>
         <input
           id={inputId}
           type="range"
           className={styles.input}
           min={min}
           max={max}
-          step={step}
-          value={value}
+          step={shown === null ? step : 'any'}
+          value={at}
           disabled={disabled}
+          aria-valuenow={value}
           aria-valuetext={formatValue === String ? undefined : text}
-          onChange={(e) => setValue(Number(e.target.value))}
+          // Only "input": the browser's "change" on release carries the thumb's mid-glide place, not the value.
+          onChange={(e) => e.nativeEvent.type === 'input' && change(e.currentTarget, Number(e.target.value))}
+          onPointerDown={(e: PointerEvent<HTMLInputElement>) => {
+            const t = track(e.currentTarget)
+            const centre = t.left + ((value - min) / (max - min || 1)) * t.width
+            const grab = marks?.length && Math.abs(e.clientX - centre) <= t.thumb / 2 ? e.clientX - centre : 0
+            press.current = { x: e.clientX, lastX: e.clientX, moved: false, grab }
+            onPointerDown?.(e)
+          }}
+          onPointerMove={(e: PointerEvent<HTMLInputElement>) => {
+            const p = press.current
+            if (p) {
+              p.lastX = e.clientX
+              if (Math.abs(e.clientX - p.x) > 3) p.moved = true
+            }
+            onPointerMove?.(e)
+          }}
+          onPointerUp={(e: PointerEvent<HTMLInputElement>) => {
+            endPress()
+            // Let go near a mark: it lands on the mark.
+            const now = latest.current
+            const mark = marks?.length ? nearestMark(now, marks) : null
+            if (mark !== null && mark !== now && Math.abs(mark - now) < reach / 2) {
+              glideTo(at, mark)
+              setValue(mark)
+            }
+            onPointerUp?.(e)
+          }}
+          onPointerCancel={(e: PointerEvent<HTMLInputElement>) => {
+            endPress()
+            onPointerCancel?.(e)
+          }}
+          onLostPointerCapture={endPress}
+          onBlur={(e) => {
+            endPress()
+            onBlur?.(e)
+          }}
+          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+            endPress()
+            onKeyDown?.(e)
+            if (e.defaultPrevented || !marks?.length || (e.key !== 'PageUp' && e.key !== 'PageDown')) return
+            const sorted = [...marks].sort((a, b) => a - b)
+            const next = e.key === 'PageUp' ? (sorted.find((m) => m > value) ?? max) : ([...sorted].reverse().find((m) => m < value) ?? min)
+            e.preventDefault()
+            setValue(next)
+          }}
           {...rest}
         />
         {showValue && (
           <span className={styles.bubble} aria-hidden="true">{text}</span>
         )}
+        {/* After the bubble, which CSS shows from the input just before it. */}
+        {marks?.length ? (
+          <span className={styles.marks} aria-hidden="true">
+            {marks.map((m) => (
+              <span key={m} className={styles.mark} data-on={m === value || undefined} style={{ ['--m' as string]: (m - min) / (max - min || 1) }} />
+            ))}
+          </span>
+        ) : null}
       </div>
     </div>
   )

package/src/components/Tabs/Tabs.module.css

@@ -69,6 +69,11 @@
     width var(--hl-motion-slow) var(--hl-ease-out);
 }
 
+/* A new tab stretches the underline instead (internal/liquid.ts). */
+.indicator[data-liquid] {
+  transition: none;
+}
+
 .panel {
   padding-top: var(--hl-space-6);
   border-radius: var(--hl-radius-sm);

package/src/components/Tabs/Tabs.tsx

@@ -12,6 +12,7 @@ import {
 } from 'react'
 import { prefersReducedMotion } from '../../internal/motion'
 import { cx } from '../../internal/cx'
+import { useStretch } from '../../internal/liquid'
 import { useControllable } from '../../internal/useControllable'
 import styles from './Tabs.module.css'
 
@@ -91,6 +92,10 @@ export function TabList({ label, className, children }: TabListProps) {
     }
   }, [bar, ready])
 
+  // The underline stretches toward the new tab and settles under it.
+  const barRef = useRef<HTMLSpanElement>(null)
+  useStretch(barRef, bar, value, ready, (b) => `translateX(${b.x}px)`)
+
   // Automatic activation, per the WAI-ARIA tabs pattern
   const onKeyDown = (e: KeyboardEvent) => {
     const tabs = Array.from(listRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]:not(:disabled)') ?? [])
@@ -113,6 +118,7 @@ export function TabList({ label, className, children }: TabListProps) {
         {children}
         {bar && (
           <span
+            ref={barRef}
             className={styles.indicator}
             data-ready={ready || undefined}
             style={{ transform: `translateX(${bar.x}px)`, width: bar.w }}

package/src/components/Toast/Toast.module.css

@@ -38,6 +38,7 @@
 
 /* All toasts sit at the bottom; --y, --s and --dx move each into place */
 .toast {
+  --dx: 0px;
   position: absolute;
   left: 0;
   right: 0;
@@ -46,9 +47,11 @@
   align-items: flex-start;
   gap: var(--hl-space-4);
   padding: var(--hl-space-5) var(--hl-space-2) var(--hl-space-5) var(--hl-space-5);
-  border: var(--hl-line) solid var(--hl-color-border);
+  border: var(--hl-line) solid var(--hl-glass-edge, var(--hl-color-border));
   border-radius: var(--hl-radius-md);
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-3);
   pointer-events: auto;
   touch-action: pan-y;
@@ -62,6 +65,8 @@
 }
 
 .toast[data-dragging] { transition: none; }
+/* A spring is moving it from the hand: only the fade stays with CSS. */
+.toast[data-fluid] { transition: opacity var(--hl-motion-base) var(--hl-ease-out); }
 .toast[data-hidden] { opacity: 0; pointer-events: none; }
 
 .toast[data-behind] {
@@ -79,6 +84,8 @@
 .toast[data-leaving="down"] { animation: toastOutDown var(--hl-motion-slow) var(--hl-ease-in-out) forwards; }
 .toast[data-leaving="left"] { animation: toastOutLeft var(--hl-motion-slow) var(--hl-ease-out) forwards; }
 .toast[data-leaving="right"] { animation: toastOutRight var(--hl-motion-slow) var(--hl-ease-out) forwards; }
+/* Thrown away: the spring carries it off at the hand's speed, so it only fades. */
+.toast[data-fluid][data-leaving] { animation: toastFade var(--hl-motion-slow) var(--hl-ease-out) forwards; }
 
 .icon {
   display: inline-flex;
@@ -174,3 +181,7 @@
 @keyframes toastOutRight {
   to { opacity: 0; transform: translate(110%, var(--y)); }
 }
+
+@keyframes toastFade {
+  to { opacity: 0; }
+}

package/src/components/Toast/Toast.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react'
 import { CheckCircleIcon, ErrorIcon, InfoIcon, XIcon } from '../../internal/icons'
 import { motionMs } from '../../internal/motion'
+import { speedTracker, spring } from '../../internal/spring'
 import { Spinner } from '../Spinner'
 import styles from './Toast.module.css'
 
@@ -58,6 +59,8 @@ export type ToastProviderProps = {
 let nextId = 1
 const GAP = 8
 const PEEK = 10
+// px per second: a toast thrown sideways this fast goes, however short the throw.
+const THROW_SPEED = 600
 
 export function ToastProvider({ children, visible = 3, label = 'Notifications', dismissLabel = 'Dismiss' }: ToastProviderProps) {
   const [items, setItems] = useState<Item[]>([])
@@ -179,9 +182,25 @@ const icons: Record<ToastVariant, ReactNode> = {
 
 function ToastItem({ item, index, y, expanded, hidden, onHeight, onDismiss, dismissLabel }: ItemProps) {
   const ref = useRef<HTMLLIElement>(null)
-  const swipe = useRef<{ x: number; t: number; dx: number } | null>(null)
-  const [dx, setDx] = useState(0)
+  const swipe = useRef<{ x: number; dx: number; speed: ReturnType<typeof speedTracker> } | null>(null)
+  const [dragging, setDragging] = useState(false)
   const [hover, setHover] = useState(false)
+  // Where the toast is drawn sideways, set straight on --dx so a spring does not render every frame.
+  const at = useRef(0)
+  const stop = useRef(() => {})
+  useEffect(() => () => stop.current(), [])
+  const paint = (v: number) => {
+    at.current = v
+    ref.current?.style.setProperty('--dx', `${v}px`)
+  }
+  const fling = (to: number, speed: number) => {
+    const el = ref.current
+    stop.current()
+    el?.setAttribute('data-fluid', '')
+    stop.current = spring(at.current, to, speed, paint, () => {
+      if (to === 0) el?.removeAttribute('data-fluid')
+    })
+  }
 
   useLayoutEffect(() => {
     const el = ref.current
@@ -194,7 +213,7 @@ function ToastItem({ item, index, y, expanded, hidden, onHeight, onDismiss, dism
     return () => ro.disconnect()
   }, [])
 
-  const paused = expanded || hover || swipe.current !== null || item.leaving !== false
+  const paused = expanded || hover || dragging || item.leaving !== false
   const remaining = useRef(item.duration ?? 5000)
   useEffect(() => {
     remaining.current = item.duration ?? 5000
@@ -221,22 +240,34 @@ function ToastItem({ item, index, y, expanded, hidden, onHeight, onDismiss, dism
   }, [paused, item.variant, item.duration])
 
   const onPointerDown = (e: PointerEvent<HTMLLIElement>) => {
-    if ((e.target as HTMLElement).closest('button')) return
-    swipe.current = { x: e.clientX, t: performance.now(), dx: 0 }
+    if ((e.target as HTMLElement).closest('button') || item.leaving) return
+    stop.current()
+    // Caught mid-spring, it carries on from where it is.
+    swipe.current = { x: e.clientX - at.current, dx: at.current, speed: speedTracker() }
+    swipe.current.speed.add(at.current)
     e.currentTarget.setPointerCapture(e.pointerId)
+    setDragging(true)
   }
   const onPointerMove = (e: PointerEvent<HTMLLIElement>) => {
-    if (!swipe.current) return
-    swipe.current.dx = e.clientX - swipe.current.x
-    setDx(swipe.current.dx)
+    const s = swipe.current
+    if (!s) return
+    s.dx = e.clientX - s.x
+    s.speed.add(s.dx)
+    paint(s.dx)
   }
-  const onPointerUp = () => {
+  const onPointerUp = (e: PointerEvent<HTMLLIElement>) => {
     const s = swipe.current
     swipe.current = null
+    setDragging(false)
     if (!s) return
-    const v = Math.abs(s.dx) / Math.max(1, performance.now() - s.t)
-    if (Math.abs(s.dx) > 80 || (v > 0.6 && Math.abs(s.dx) > 20)) onDismiss(s.dx < 0 ? 'left' : 'right')
-    else setDx(0)
+    const speed = e.type === 'pointercancel' ? 0 : s.speed.speed()
+    const thrown = Math.abs(speed) > THROW_SPEED && Math.abs(s.dx) > 20
+    if (e.type !== 'pointercancel' && (Math.abs(s.dx) > 80 || thrown)) {
+      // It leaves the way it was thrown, or the way it was pulled when let go slowly.
+      const way = Math.sign(thrown ? speed : s.dx)
+      fling(way * (ref.current?.offsetWidth ?? 0) * 1.1, speed)
+      onDismiss(way < 0 ? 'left' : 'right')
+    } else fling(0, speed)
   }
 
   const stackedY = expanded ? -y : -Math.min(index, 3) * PEEK
@@ -247,13 +278,12 @@ function ToastItem({ item, index, y, expanded, hidden, onHeight, onDismiss, dism
       ref={ref}
       className={styles.toast}
       data-leaving={item.leaving || undefined}
-      data-dragging={swipe.current ? true : undefined}
+      data-dragging={dragging || undefined}
       data-hidden={hidden || undefined}
       data-behind={(!expanded && index > 0) || undefined}
       style={{
         ['--y' as string]: `${stackedY}px`,
         ['--s' as string]: scale,
-        ['--dx' as string]: `${dx}px`,
         zIndex: 100 - Math.max(index, 0),
       }}
       aria-hidden={hidden || undefined}

package/src/components/Toggle/Toggle.module.css

@@ -59,7 +59,7 @@
 
 @media (hover: hover) {
   .root:hover:not(:disabled):not([data-on]) { background: var(--hl-color-surface-hover); }
-  .root[data-on]:hover:not(:disabled) { background: var(--hl-color-inverse-hover); }
+  .root[data-on]:hover:not(:disabled) { background: var(--hl-color-accent-hover); }
 }
 
 .root:focus-visible {

package/src/internal/liquid.ts

@@ -0,0 +1,137 @@
+import { useLayoutEffect, useRef, type RefObject } from 'react'
+import { easing, motionMs, prefersReducedMotion } from './motion'
+
+// Liquid: a panel grows out of what opened it. It starts as the opener's own shape (its width and its
+// corners) at the panel's edge nearest the opener, then fills out to the whole panel; on close it
+// folds back. Only a clip changes, so nothing inside the panel is stretched and text stays sharp.
+// Where the browser cannot clip or animate this way, or with reduced motion, the part's own CSS fade
+// runs instead.
+
+/** What the panel grows from: the opener element, or a rectangle (such as the point of a right click). */
+export type LiquidOrigin = RefObject<HTMLElement | null> | (() => DOMRect | null)
+
+const able = () =>
+  typeof CSS !== 'undefined' &&
+  CSS.supports('clip-path', 'inset(0px round 1px)') &&
+  CSS.supports('animation-timing-function', 'linear(0, 1)') &&
+  typeof Element !== 'undefined' &&
+  typeof Element.prototype.animate === 'function'
+
+const clamp = (v: number, max: number) => Math.max(0, Math.min(max, v))
+
+// How far the panel's shadow reaches past its box, so the clip can end there and the shadow grows in
+// with the panel instead of appearing all at once when the clip is removed.
+function shadowReach(el: HTMLElement) {
+  let reach = 0
+  for (const shadow of getComputedStyle(el).boxShadow.split(/,(?![^(]*\))/)) {
+    if (shadow.includes('inset')) continue
+    const [x = 0, y = 0, blur = 0, spread = 0] = (shadow.replace(/rgba?\([^)]*\)|#[\da-f]+/gi, '').match(/-?[\d.]+px/g) ?? []).map(parseFloat)
+    reach = Math.max(reach, Math.abs(x) + blur + spread, Math.abs(y) + blur + spread)
+  }
+  return Math.ceil(reach)
+}
+
+// The opener's footprint on the panel, as an inset from each edge. An opener above or below the panel
+// lands as a strip on the nearest edge; one beside it, on the nearest side; one inside it (a click
+// point), where it is.
+export function startShape(panel: DOMRect, from: DOMRect, radius: string) {
+  const w = panel.width
+  const h = panel.height
+  let top = clamp(from.top - panel.top, h)
+  let bottom = clamp(panel.bottom - from.bottom, h)
+  let left = clamp(from.left - panel.left, w)
+  let right = clamp(panel.right - from.right, w)
+  const fh = Math.min(from.height, h)
+  const fw = Math.min(from.width, w)
+  if (from.bottom <= panel.top + 1) [top, bottom] = [0, h - fh]
+  else if (from.top >= panel.bottom - 1) [top, bottom] = [h - fh, 0]
+  else if (from.right <= panel.left + 1) [left, right] = [0, w - fw]
+  else if (from.left >= panel.right - 1) [left, right] = [w - fw, 0]
+  // Never less than a sliver, so the shape always has somewhere to grow from.
+  if (w - left - right < 2) right = Math.max(0, w - left - 2)
+  if (h - top - bottom < 2) bottom = Math.max(0, h - top - 2)
+  return `inset(${top}px ${right}px ${bottom}px ${left}px round ${radius})`
+}
+
+/**
+ * Plays the growth when `state` turns open (once `ready`, that is, once the panel is in its place) and
+ * the fold when it turns closed. Marks the panel with data-liquid while it runs, so the part's CSS can
+ * stand its own enter and exit animation down.
+ */
+export function useLiquid(panel: RefObject<HTMLElement | null>, origin: LiquidOrigin, state: 'open' | 'closed', ready: boolean) {
+  useLayoutEffect(() => {
+    const p = panel.current
+    if (!p || !ready || prefersReducedMotion() || !able()) return
+    const opener = typeof origin === 'function' ? null : origin.current
+    const from = typeof origin === 'function' ? origin() : (opener?.getBoundingClientRect() ?? null)
+    if (!from) return
+    // Never rounder than half the opener's height: a pill's 999px corner would keep a tall panel a
+    // capsule for most of the growth.
+    const cap = Math.min(from.width, from.height) / 2
+    const radius = `${Math.min(cap, opener ? parseFloat(getComputedStyle(opener).borderRadius) || 0 : cap)}px`
+    const start = startShape(p.getBoundingClientRect(), from, radius)
+    const room = shadowReach(p)
+    const end = `inset(${-room}px round calc(${getComputedStyle(p).borderRadius || '0px'} + ${room}px))`
+    // Stays set while the panel is open: taking it off would restart the part's CSS enter animation.
+    p.dataset.liquid = ''
+    const run =
+      state === 'open'
+        ? p.animate({ clipPath: [start, end] }, { duration: motionMs('liquid'), easing: easing('liquid') })
+        : p.animate({ clipPath: [end, start] }, { duration: motionMs('fast'), easing: easing('in'), fill: 'forwards' })
+    return () => run.cancel()
+    // Plays once per open and once per close; the origin is read fresh each time.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state, ready])
+}
+
+/** A highlight's place in its row: its left edge, width, and (for rows that wrap) its top. */
+export type StretchBox = { x: number; w: number; y?: number }
+
+/**
+ * Liquid highlight: when the choice changes, the edge nearest the new choice leaves first and the far
+ * edge follows, so the highlight stretches toward the choice, then settles there like a drop. Runs
+ * only on a change of choice, never when the row is resized, and only along one row. `place` turns a
+ * box into the highlight's transform, as the part draws it.
+ */
+export function useStretch(el: RefObject<HTMLElement | null>, box: StretchBox | null, choice: unknown, ready: boolean, place: (b: StretchBox) => string) {
+  const last = useRef<{ box: StretchBox; choice: unknown } | null>(null)
+  const current = useRef<Animation | null>(null)
+  useLayoutEffect(() => {
+    const node = el.current
+    const prev = last.current
+    // A part often renders the new choice before it has measured its new place, so only a moved box
+    // counts; it then stretches if the choice behind it changed, and simply follows a resize.
+    // No highlight (nothing chosen): forget the old place, so the next one appears rather than stretching from it.
+    if (!box) {
+      last.current = null
+      return
+    }
+    if (prev && prev.box.x === box.x && prev.box.w === box.w && prev.box.y === box.y) return
+    last.current = { box, choice }
+    if (!node || !prev || !ready || prev.choice === choice || prefersReducedMotion() || !able()) return
+    const from = prev.box
+    if ((from.y ?? 0) !== (box.y ?? 0)) return
+    const right = box.x > from.x
+    const lead = right ? box.x + box.w : box.x
+    const trail = right ? from.x + (box.x - from.x) * 0.2 : from.x + from.w - (from.x + from.w - (box.x + box.w)) * 0.2
+    const mid = right ? { x: trail, w: lead - trail, y: box.y } : { x: lead, w: trail - lead, y: box.y }
+    node.dataset.liquid = ''
+    const run = node.animate(
+      [
+        { transform: place(from), width: `${from.w}px`, easing: easing('out') },
+        { transform: place(mid), width: `${mid.w}px`, offset: 0.3, easing: easing('liquid') },
+        { transform: place(box), width: `${box.w}px` },
+      ],
+      { duration: motionMs('liquid') },
+    )
+    current.current = run
+    // Only the latest stretch takes the mark off: a cancelled one settles later, mid-way through the next.
+    const done = () => {
+      if (current.current === run) delete node.dataset.liquid
+    }
+    run.finished.then(done, done)
+    return () => run.cancel()
+    // Keyed on the choice and the box; `place` is a pure formatter.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [choice, box?.x, box?.w, box?.y, ready])
+}

package/src/internal/magnet.ts

@@ -0,0 +1,19 @@
+// Magnetic: the right place pulls. Near a mark a dragged value is drawn onto it, strongly close in and
+// not at all at the edge of its reach, so nothing jumps and you can still stop between marks.
+
+/** The mark nearest to `value`, or null when there are none. */
+export function nearestMark(value: number, marks: number[]): number | null {
+  let best: number | null = null
+  for (const m of marks) if (best === null || Math.abs(m - value) < Math.abs(best - value)) best = m
+  return best
+}
+
+/** `raw` drawn toward the nearest mark within `reach`: sticky close to the mark, free at the edge. */
+export function magnetTo(raw: number, marks: number[], reach: number): number {
+  const mark = nearestMark(raw, marks)
+  if (mark === null || reach <= 0) return raw
+  const d = raw - mark
+  if (Math.abs(d) >= reach) return raw
+  const t = Math.abs(d) / reach
+  return mark + Math.sign(d) * reach * t * t
+}

package/src/internal/motion.ts

@@ -1,4 +1,4 @@
-export type MotionToken = 'instant' | 'fast' | 'base' | 'slow' | 'slower' | 'delay-tooltip'
+export type MotionToken = 'instant' | 'fast' | 'base' | 'slow' | 'slower' | 'liquid' | 'fling' | 'delay-tooltip'
 
 // Reads a duration token at run time, so reduced motion (0ms) and Retime's speed are honoured by JS
 // timers too.
@@ -19,7 +19,7 @@ export function motionMs(token: MotionToken): number {
   return readMotionMs(token)
 }
 
-export function easing(name: 'out' | 'in' | 'in-out' | 'spring' | 'bounce'): string {
+export function easing(name: 'out' | 'in' | 'in-out' | 'spring' | 'bounce' | 'liquid'): string {
   if (typeof window === 'undefined') return 'ease'
   return getComputedStyle(document.documentElement).getPropertyValue(`--hl-ease-${name}`).trim() || 'ease'
 }

package/src/internal/spring.ts

@@ -0,0 +1,107 @@
+import { useEffect, useRef, type RefObject } from 'react'
+import { readMotionMs } from './motion'
+
+/**
+ * Runs from `from` to `to`, starting at `velocity` (units per second), so a let-go carries on at the
+ * hand's speed. One swing lasts --hl-motion-fling: Retime slows it, reduced motion (0ms) jumps.
+ * Returns a stop function.
+ */
+export function spring(from: number, to: number, velocity: number, onFrame: (value: number) => void, onDone?: () => void, damping = 0.88) {
+  const period = readMotionMs('fling') / 1000
+  if (!period) {
+    onFrame(to)
+    onDone?.()
+    return () => {}
+  }
+  const w = (2 * Math.PI) / period
+  let x = from
+  let v = velocity
+  let last = performance.now()
+  let raf = requestAnimationFrame(function step(now) {
+    // Fixed small slices, so a slow frame does not throw the spring off.
+    let dt = Math.min(0.064, (now - last) / 1000)
+    last = now
+    while (dt > 0) {
+      const h = Math.min(dt, 1 / 240)
+      v += (-w * w * (x - to) - 2 * damping * w * v) * h
+      x += v * h
+      dt -= h
+    }
+    if (Math.abs(x - to) < 0.3 && Math.abs(v) < 4) {
+      onFrame(to)
+      onDone?.()
+      return
+    }
+    onFrame(x)
+    raf = requestAnimationFrame(step)
+  })
+  return () => cancelAnimationFrame(raf)
+}
+
+/** Past an edge a drag still moves, less the further it goes, and never more than `size`. */
+export function rubber(over: number, size: number) {
+  if (size <= 0) return 0
+  return Math.sign(over) * (1 - 1 / ((Math.abs(over) * 0.55) / size + 1)) * size
+}
+
+/** The hand's speed when it lets go, in px per second, from the last tenth of a second of moves. */
+export function speedTracker() {
+  let samples: { t: number; x: number }[] = []
+  return {
+    add(x: number, t = performance.now()) {
+      samples = [...samples.filter((s) => t - s.t <= 100), { t, x }]
+    },
+    speed(t = performance.now()) {
+      const recent = samples.filter((s) => t - s.t <= 100)
+      if (recent.length < 2) return 0
+      const a = recent[0]
+      const b = recent[recent.length - 1]
+      return b.t > a.t ? ((b.x - a.x) / (b.t - a.t)) * 1000 : 0
+    },
+  }
+}
+
+/**
+ * A dialog panel that the hand drags along one axis and lets go of. `fling` springs it to a place at
+ * the hand's speed. While it runs, data-fluid on the panel turns its CSS motion off; once the parent
+ * closes it on the way out, the CSS close keyframes stay off too, so they do not start over.
+ */
+export function useFling(ref: RefObject<HTMLElement | null>, open: boolean, axis: 'x' | 'y') {
+  const at = useRef(0)
+  const target = useRef(0)
+  const stop = useRef(() => {})
+
+  const paint = (v: number) => {
+    at.current = v
+    if (ref.current) ref.current.style.transform = v ? `translate${axis === 'x' ? 'X' : 'Y'}(${v}px)` : ''
+  }
+
+  const fling = (to: number, speed: number) => {
+    const el = ref.current
+    if (!el) return
+    stop.current()
+    target.current = to
+    el.setAttribute('data-fluid', '')
+    stop.current = spring(at.current, to, speed, paint, () => {
+      if (to === 0) el.removeAttribute('data-fluid')
+    })
+  }
+
+  useEffect(() => () => stop.current(), [])
+  useEffect(() => {
+    // Opened again, even mid-close on the same panel: it starts at rest, not where the old spring was going.
+    if (open) {
+      stop.current()
+      target.current = 0
+      paint(0)
+      ref.current?.removeAttribute('data-fluid')
+      return
+    }
+    // Closed by Esc or a tap while springing back: the CSS close takes over from where it is.
+    if (target.current !== 0) return
+    stop.current()
+    ref.current?.removeAttribute('data-fluid')
+  }, [open])
+
+  return { at, paint, fling, stop: () => stop.current() }
+}

package/src/internal/useFloating.ts

@@ -20,6 +20,8 @@ export function useFloating(
   { open, side = 'bottom', align = 'center', offset = 8, matchWidth = false }: Options,
 ) {
   const [pos, setPos] = useState<{ top: number; left: number; side: Side; width?: number } | null>(null)
+  // Measured since this open began.
+  const [fresh, setFresh] = useState(false)
 
   const update = useCallback(() => {
     const a = anchorRef.current
@@ -50,10 +52,16 @@ export function useFloating(
     left = Math.min(Math.max(MARGIN, left), Math.max(MARGIN, vw - fw - MARGIN))
     top = Math.min(Math.max(MARGIN, top), Math.max(MARGIN, vh - fh - MARGIN))
     setPos({ top, left, side: s, width })
+    setFresh(true)
   }, [anchorRef, floatingRef, side, align, offset, matchWidth])
 
   useLayoutEffect(() => {
-    if (!open) return
+    // Closed: the next open is not ready until it has been measured again, so nothing reads a stale
+    // place. The place itself stays, so a layer that stays on screen never flashes.
+    if (!open) {
+      setFresh(false)
+      return
+    }
     update()
     const f = floatingRef.current
     const ro = new ResizeObserver(update)
@@ -72,5 +80,6 @@ export function useFloating(
     ? { position: 'fixed', top: pos.top, left: pos.left, width: pos.width }
     : { position: 'fixed', top: 0, left: 0, opacity: 0, pointerEvents: 'none' }
 
-  return { style, side: pos?.side ?? side, update }
+  // ready: the layer is in its place, so a part can measure it there (for its opening animation).
+  return { style, side: pos?.side ?? side, update, ready: pos !== null && fresh }
 }

package/src/tokens.css

@@ -36,9 +36,13 @@
   --hl-color-inverse-fg: var(--hl-gray-0);
   --hl-color-inverse-hover: var(--hl-gray-700);
   --hl-color-shimmer: rgb(255 255 255 / 0.7);
-  /* Accent: the foreground by default, so the library stays monochrome */
-  --hl-color-accent: var(--hl-color-inverse);
-  --hl-color-accent-fg: var(--hl-color-inverse-fg);
+  /* Accent: marking blue, the layout dye a machinist wipes on a part to check its fit, for what is chosen
+     or on: primary buttons, checked and selected states, the current tab, progress. Blue because most
+     apps use it for the main action, so it reads at once. Everything else stays black, white and grey.
+     White on it is 6.8:1. */
+  --hl-color-accent: #1f5aa6;
+  --hl-color-accent-fg: #ffffff;
+  --hl-color-accent-hover: #194a8a;
 
   /* Status: always paired with an icon or word */
   --hl-color-success: #12733a;
@@ -170,6 +174,10 @@
   --hl-motion-slower: calc(600ms * var(--hl-motion-scale));
   /* Navbar dock: the trip to and from the bottom of the screen, long enough to read as liquid */
   --hl-motion-pour: calc(760ms * var(--hl-motion-scale));
+  /* Liquid: a shape growing into another (a button into its menu), the length of --hl-ease-liquid */
+  --hl-motion-liquid: calc(520ms * var(--hl-motion-scale));
+  /* Fluid: the swing of the spring that carries a let-go sheet, row or photo on at the hand's speed */
+  --hl-motion-fling: calc(280ms * var(--hl-motion-scale));
   --hl-motion-stagger: calc(30ms * var(--hl-motion-scale));
   --hl-motion-delay-tooltip: 400ms;
   --hl-motion-shimmer: 1400ms;
@@ -182,6 +190,9 @@
      for small pops like a badge). A bigger overshoot reads as wobbly once it is on every control. */
   --hl-ease-spring: cubic-bezier(0.3, 1.2, 0.5, 1);
   --hl-ease-bounce: cubic-bezier(0.3, 1.3, 0.5, 1);
+  /* A real spring (stiffness 300, damping 26), sampled every 25ms: it carries momentum, goes 2% past
+     and settles. Most of the move is done in the first 200ms. */
+  --hl-ease-liquid: linear(0, 0.09, 0.264, 0.455, 0.628, 0.768, 0.871, 0.941, 0.984, 1.008, 1.019, 1.022, 1.02, 1.017, 1.012, 1.009, 1.005, 1.003, 1.001, 1, 1, 1);
   --hl-ease-linear: linear;
 
   /* Movement distances */
@@ -235,6 +246,9 @@
     --hl-color-inverse: #ececec;
     --hl-color-inverse-fg: #0a0a0a;
     --hl-color-inverse-hover: var(--hl-gray-300);
+    --hl-color-accent: #7fa8e6;
+    --hl-color-accent-fg: #0a0a0a;
+    --hl-color-accent-hover: #9bbcec;
     --hl-color-shimmer: rgb(255 255 255 / 0.06);
     --hl-color-success: #4cc97a;
     --hl-color-warning: #f2b33d;
@@ -273,6 +287,9 @@
   --hl-color-inverse: #ececec;
   --hl-color-inverse-fg: #0a0a0a;
   --hl-color-inverse-hover: var(--hl-gray-300);
+  --hl-color-accent: #7fa8e6;
+  --hl-color-accent-fg: #0a0a0a;
+  --hl-color-accent-hover: #9bbcec;
   --hl-color-shimmer: rgb(255 255 255 / 0.06);
   --hl-color-success: #4cc97a;
   --hl-color-warning: #f2b33d;
@@ -301,6 +318,8 @@
     --hl-motion-slow: 0ms;
     --hl-motion-slower: 0ms;
     --hl-motion-pour: 0ms;
+    --hl-motion-liquid: 0ms;
+    --hl-motion-fling: 0ms;
     --hl-motion-stagger: 0ms;
     --hl-motion-shimmer: 0ms;
     --hl-motion-spin: 1600ms;
@@ -411,15 +430,18 @@
   /* A cell's widest, so long text wraps and a sideways-scrolling table stays readable. */
   --hl-table-cell-max: 320px;
 
-  /* Charts: series differ by shade, dash and marker, never colour alone */
+  /* Charts: series differ by colour, dash and marker, never colour alone. The colours are a survey map's
+     own code, in a fixed order: navy (the accent's family), contour brown, survey green, revision purple,
+     chart ochre. Checked for colour-blind separation (8.0 or more for adjacent pairs) and 3:1 against the surface, in both
+     themes. A sixth series folds into "Other" or a second chart; it never gets a made-up colour. */
   --hl-chart-h: 260px;
   --hl-chart-donut: 220px;
   --hl-chart-area-opacity: 0.14;
-  --hl-chart-1: var(--hl-gray-950);
-  --hl-chart-2: var(--hl-gray-600);
-  --hl-chart-3: #8a8a8a;
-  --hl-chart-4: var(--hl-gray-800);
-  --hl-chart-5: var(--hl-gray-500);
+  --hl-chart-1: #2f64b4;
+  --hl-chart-2: #b36324;
+  --hl-chart-3: #2f9a6e;
+  --hl-chart-4: #8a52c2;
+  --hl-chart-5: #a8861a;
   --hl-chart-dash-1: none;
   --hl-chart-dash-2: 6 4;
   --hl-chart-dash-3: 1.5 3.5;
@@ -434,22 +456,23 @@
   --hl-editor-min-h: 160px;
 }
 
+/* The same five colours, a step lighter for the dark surface, checked there on their own. */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --hl-chart-1: var(--hl-gray-50);
-    --hl-chart-2: var(--hl-gray-400);
-    --hl-chart-3: #707070;
-    --hl-chart-4: var(--hl-gray-200);
-    --hl-chart-5: var(--hl-gray-500);
+    --hl-chart-1: #638fdb;
+    --hl-chart-2: #c97638;
+    --hl-chart-3: #3ea97a;
+    --hl-chart-4: #a873d6;
+    --hl-chart-5: #b0902a;
   }
 }
 
 [data-theme="dark"] {
-  --hl-chart-1: var(--hl-gray-50);
-  --hl-chart-2: var(--hl-gray-400);
-  --hl-chart-3: #707070;
-  --hl-chart-4: var(--hl-gray-200);
-  --hl-chart-5: var(--hl-gray-500);
+  --hl-chart-1: #638fdb;
+  --hl-chart-2: #c97638;
+  --hl-chart-3: #3ea97a;
+  --hl-chart-4: #a873d6;
+  --hl-chart-5: #b0902a;
 }
 
 @media (prefers-reduced-motion: reduce) {