hlmnhkl-ui 0.19.0 → 0.20.0

package/README.md

@@ -1,10 +1,10 @@
 # hlmnhkl/ui
 
-React components that move with meaning. Black, white and grey, accessible, 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, 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">
-  <img alt="The hlmnhkl/ui homepage: the logo and name, the install command, and live components below." src="https://raw.githubusercontent.com/hilmanhaikal/hlmnhkl-ui/main/.github/assets/home-light.png">
+  <img alt="The hlmnhkl/ui homepage: a real Switch drawn large, with thin lines reading its live tap area, focus ring and timing, under the line 'Measured down to the part you never see.'" src="https://raw.githubusercontent.com/hilmanhaikal/hlmnhkl-ui/main/.github/assets/home-light.png">
 </picture>
 
 **[Docs](https://ui.hlmnhkl.my)** · [Installation](https://ui.hlmnhkl.my/installation) · [Components](https://ui.hlmnhkl.my/button) · [What's new](https://ui.hlmnhkl.my/changelog)
@@ -58,7 +58,7 @@ Every copied file starts with one line naming hlmnhkl/ui and the MIT licence, so
 - **50 free components**, from Button, Dialog, Select and Table to Toast and Retime, one speed setting for every animation. See [COMPONENTS.md](COMPONENTS.md).
 - **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, 44px touch targets, screen reader labels, and reduced motion.
+- **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.
 - **Small.** React 19 and CSS Modules. No other runtime packages: no animation library, no icon package.
 - **Works in** Vite, Next.js (App Router) and React Router.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hlmnhkl-ui",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "React components in a monochrome style. Copy them into your app with npx hlmnhkl-ui add <name>.",
   "license": "MIT",
   "homepage": "https://ui.hlmnhkl.my",

package/src/components/Accordion/Accordion.module.css

@@ -45,6 +45,11 @@
   box-shadow: inset 0 0 0 var(--hl-line-focus) var(--hl-color-fg);
 }
 
+.title {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .chevron {
   flex: none;
   width: var(--hl-icon-md);

package/src/components/Accordion/Accordion.tsx

@@ -105,7 +105,7 @@ export function AccordionItem({ value, title, disabled, children }: AccordionIte
           disabled={disabled}
           onClick={() => ctx.toggle(value)}
         >
-          <span>{title}</span>
+          <span className={styles.title}>{title}</span>
           <ChevronDownIcon className={styles.chevron} />
         </button>
       </Heading>

package/src/components/Alert/Alert.module.css

@@ -29,18 +29,32 @@
 .error .title { font-weight: var(--hl-weight-semibold); }
 
 .banner {
+  --strip: var(--hl-color-inverse);
+  --strip-fg: var(--hl-color-inverse-fg);
   border-radius: 0;
   border-width: 0 0 var(--hl-line);
-  background: var(--hl-color-inverse);
-  color: var(--hl-color-inverse-fg);
+  background: var(--strip);
+  color: var(--strip-fg);
   align-items: center;
   padding-block: var(--hl-space-3);
 }
 
-.banner .body { color: inherit; opacity: 0.8; }
-.banner .close { color: inherit; }
-@media (hover: hover) {
-  .banner .close:hover { background: var(--hl-color-inverse-hover); }
+/* Swapped on the children, not the strip, so the strip still reads the page's own values. Links and buttons in the action stay visible. */
+.banner > * {
+  --hl-color-bg: var(--strip);
+  --hl-color-surface: var(--strip);
+  --hl-color-surface-hover: color-mix(in srgb, var(--strip-fg) 14%, var(--strip));
+  --hl-color-surface-active: color-mix(in srgb, var(--strip-fg) 20%, var(--strip));
+  --hl-color-fg: var(--strip-fg);
+  --hl-color-fg-muted: color-mix(in srgb, var(--strip-fg) 80%, var(--strip));
+  --hl-color-border: color-mix(in srgb, var(--strip-fg) 24%, var(--strip));
+  --hl-color-border-strong: color-mix(in srgb, var(--strip-fg) 55%, var(--strip));
+  --hl-color-inverse: var(--strip-fg);
+  --hl-color-inverse-fg: var(--strip);
+  --hl-color-inverse-hover: color-mix(in srgb, var(--strip-fg) 82%, var(--strip));
+  --hl-color-accent: var(--strip-fg);
+  --hl-color-accent-fg: var(--strip);
+  --hl-focus-ring: 0 0 0 var(--hl-line-focus) var(--strip), 0 0 0 calc(var(--hl-line-focus) * 2) var(--strip-fg);
 }
 
 .icon {

package/src/components/Badge/Badge.module.css

@@ -2,6 +2,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--hl-space-2);
+  max-width: 100%;
   height: var(--hl-badge-h);
   padding: 0 var(--hl-space-3);
   border: var(--hl-line) solid transparent;
@@ -26,13 +27,18 @@
 .outline[data-tone] { border-color: var(--tone); color: var(--tone); }
 .subtle[data-tone] { background: var(--tone-soft); color: var(--tone); }
 
+/* Clip only the x axis: line-height is 1, so hiding y would cut descenders. */
 .text {
   display: inline-block;
+  min-width: 0;
+  overflow-x: clip;
+  text-overflow: ellipsis;
   animation: pop var(--hl-motion-slow) var(--hl-ease-spring);
 }
 
 .dot {
   position: relative;
+  flex: none;
   width: var(--hl-dot);
   height: var(--hl-dot);
   border-radius: var(--hl-radius-full);

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -17,7 +17,7 @@ export type BreadcrumbItem = {
 export type BreadcrumbProps = {
   /** Path from the top level down. The last item is the current page. */
   items: BreadcrumbItem[]
-  /** Above this many items, the middle collapses into a "…" button. */
+  /** Above this many items, the middle collapses into a "…" button. With 2 or less, only "…" and the current page show. */
   maxItems?: number
   /** Name of the nav landmark. */
   label?: string
@@ -31,14 +31,16 @@ export function Breadcrumb({ items, maxItems = 4, label = 'Breadcrumb', expandLa
   const [expanded, setExpanded] = useState(false)
   const listRef = useRef<HTMLOListElement>(null)
   const collapse = !expanded && items.length > maxItems
-  const tail = Math.max(1, maxItems - 2)
-  const visible = collapse ? [items[0], null, ...items.slice(-tail)] : items
+  // Under 3 there is no room for the first item, so only "…" and the current page stay.
+  const head = maxItems < 3 ? 0 : 1
+  const tail = Math.max(1, maxItems - head - 1)
+  const visible = collapse ? [...items.slice(0, head), null, ...items.slice(-tail)] : items
 
   // The "…" button is gone after expanding, so focus moves to the first link it revealed.
   useLayoutEffect(() => {
     if (!expanded) return
-    listRef.current?.querySelector<HTMLElement>(':scope > li:nth-child(2) > :is(a, button)')?.focus()
-  }, [expanded])
+    listRef.current?.querySelector<HTMLElement>(`:scope > li:nth-child(${head + 1}) > :is(a, button)`)?.focus()
+  }, [expanded, head])
 
   return (
     <nav aria-label={label} className={cx(styles.root, className)}>

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

@@ -2,7 +2,9 @@
   --h: var(--hl-control-h-md);
   position: relative;
   display: inline-grid;
+  grid-template-columns: minmax(0, auto);
   place-items: center;
+  max-width: 100%;
   min-height: var(--h);
   padding: 0 var(--hl-space-6);
   border: var(--hl-line) solid transparent;
@@ -31,6 +33,14 @@
   inset-inline: 0;
 }
 
+@media (pointer: coarse) {
+  .sm::after { inset-inline: min(0px, calc((100% - var(--hl-hit-min)) / 2)); }
+}
+
+/* Beside another button, the hit area sinks below every box in the row, so it only fills the empty gap. */
+:has(> button + .root, > .root + button) { isolation: isolate; }
+:has(> button + .root, > .root + button) > .root::after { z-index: -1; }
+
 .root:focus-visible {
   outline: none;
   box-shadow: var(--hl-focus-ring);
@@ -105,11 +115,30 @@
     filter var(--hl-motion-base) var(--hl-ease-out);
 }
 
+.content { max-width: 100%; }
+
+/* Clip only the x axis: line-height is 1, so hiding y would cut descenders. */
+.label {
+  min-width: 0;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+}
+
 .icon {
   display: inline-flex;
+  flex: none;
   font-size: var(--hl-icon-md);
 }
 
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 /* The spinner shares the label's grid cell, so the width never changes. */
 .spinner {
   opacity: 0;

package/src/components/Button/Button.tsx

@@ -66,8 +66,12 @@ export function Button({
         <span className={styles.label}>{children}</span>
         {trailingIcon && <span className={styles.icon}>{trailingIcon}</span>}
       </span>
-      <span className={styles.spinner} aria-hidden={!loading}>
-        {loading && <Spinner size="sm" label={loadingLabel} />}
+      <span className={styles.spinner} aria-hidden="true">
+        {loading && <Spinner size="sm" label={null} />}
+      </span>
+      {/* Stays mounted, because screen readers skip a live region that appears with its text. */}
+      <span className={styles.srOnly} role="status">
+        {loading ? loadingLabel : null}
       </span>
     </>
   )

package/src/components/Collapsible/Collapsible.module.css

@@ -8,6 +8,7 @@
   display: inline-flex;
   align-items: center;
   align-self: flex-start;
+  max-width: 100%;
   gap: var(--hl-space-3);
   min-height: var(--hl-hit-min);
   padding: 0 var(--hl-space-4);
@@ -31,7 +32,14 @@
 .trigger:disabled { opacity: 0.45; cursor: not-allowed; }
 .trigger:focus-visible { outline: none; box-shadow: var(--hl-focus-ring); }
 
+.label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  text-align: start;
+}
+
 .chevron {
+  flex: none;
   width: var(--hl-icon-md);
   height: var(--hl-icon-md);
   color: var(--hl-color-fg-muted);

package/src/components/Collapsible/Collapsible.tsx

@@ -40,6 +40,8 @@ export function Collapsible({ label, trigger, open: openProp, defaultOpen = fals
         cloneElement(trigger, {
           'aria-expanded': open,
           'aria-controls': `${id}-panel`,
+          // Only set when disabled, so a trigger's own disabled prop is kept otherwise.
+          ...(disabled ? { disabled: true, 'aria-disabled': true } : null),
           onClick: (e: MouseEvent<HTMLElement>) => {
             trigger.props.onClick?.(e)
             toggle()
@@ -54,7 +56,7 @@ export function Collapsible({ label, trigger, open: openProp, defaultOpen = fals
           disabled={disabled}
           onClick={toggle}
         >
-          <span>{label}</span>
+          <span className={styles.label}>{label}</span>
           <ChevronDownIcon className={styles.chevron} />
         </button>
       )}

package/src/components/CopyButton/CopyButton.module.css

@@ -36,6 +36,7 @@
 .root:active { transform: scale(var(--hl-press-scale-strong)); transition-duration: var(--hl-motion-instant); }
 .root:focus-visible { outline: none; box-shadow: var(--hl-focus-ring); }
 .root[data-copied] { border-color: var(--hl-color-fg); }
+.root[data-failed] { border-color: var(--hl-color-danger); color: var(--hl-color-danger); }
 
 .icons {
   display: grid;
@@ -44,13 +45,15 @@
 }
 
 .copy,
-.check {
+.check,
+.fail {
   grid-area: 1 / 1;
   width: 100%;
   height: 100%;
 }
 
-.copy {
+.copy,
+.fail {
   transition:
     opacity var(--hl-motion-fast) var(--hl-ease-out),
     transform var(--hl-motion-slow) var(--hl-ease-spring);
@@ -68,7 +71,11 @@
   transition: stroke-dashoffset var(--hl-motion-base) var(--hl-ease-in);
 }
 
-.root[data-copied] .copy { opacity: 0; transform: scale(0.4) rotate(-45deg); }
+.fail { opacity: 0; transform: scale(0.4); }
+
+.root[data-copied] .copy,
+.root[data-failed] .copy { opacity: 0; transform: scale(0.4) rotate(-45deg); }
+.root[data-failed] .fail { opacity: 1; transform: none; }
 
 .root[data-copied] .check {
   stroke-dashoffset: 0;
@@ -81,7 +88,8 @@
 }
 
 .labelIdle,
-.labelDone {
+.labelDone,
+.labelFailed {
   grid-area: 1 / 1;
   transition:
     transform var(--hl-motion-slow) var(--hl-ease-spring),
@@ -89,8 +97,13 @@
 }
 
 .labelDone { transform: translateY(100%); opacity: 0; }
-.root[data-copied] .labelIdle { transform: translateY(-100%); opacity: 0; }
-.root[data-copied] .labelDone { transform: none; opacity: 1; }
+/* Out of the layout until a copy fails, so the longer words do not widen every button. */
+.labelFailed { display: none; }
+.root[data-failed] .labelFailed { display: block; }
+.root[data-copied] .labelIdle,
+.root[data-failed] .labelIdle { transform: translateY(-100%); opacity: 0; }
+.root[data-copied] .labelDone,
+.root[data-failed] .labelFailed { transform: none; opacity: 1; }
 
 .srOnly {
   position: absolute;

package/src/components/CopyButton/CopyButton.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { cx } from '../../internal/cx'
-import { CopyIcon } from '../../internal/icons'
+import { CopyIcon, XIcon } from '../../internal/icons'
 import styles from './CopyButton.module.css'
 
 export type CopyButtonProps = {
@@ -12,11 +12,13 @@ export type CopyButtonProps = {
   label?: string
   /** Shown and spoken after a successful copy. */
   copiedLabel?: string
+  /** Shown and spoken when the browser blocks the copy. */
+  failedLabel?: string
   /** Shows the label as text next to the icon. */
   showLabel?: boolean
   /** Size of the button. */
   size?: 'sm' | 'md'
-  /** How long the check stays, in ms. */
+  /** How long the check or the failed state stays, in ms. */
   resetAfter?: number
   /** Called after the text is copied, with the copied text. Not called if copying fails. */
   onCopy?: (value: string) => void
@@ -49,29 +51,31 @@ export function CopyButton({
   value,
   label = 'Copy',
   copiedLabel = 'Copied',
+  failedLabel = 'Could not copy',
   showLabel = false,
   size = 'md',
   resetAfter = 1800,
   onCopy,
   className,
 }: CopyButtonProps) {
-  const [copied, setCopied] = useState(false)
+  const [status, setStatus] = useState<'idle' | 'copied' | 'failed'>('idle')
   const timer = useRef<number | undefined>(undefined)
   useEffect(() => () => window.clearTimeout(timer.current), [])
 
   const copy = async () => {
-    if (!(await writeText(value))) return
-    setCopied(true)
-    onCopy?.(value)
+    const ok = await writeText(value)
+    setStatus(ok ? 'copied' : 'failed')
+    if (ok) onCopy?.(value)
     window.clearTimeout(timer.current)
-    timer.current = window.setTimeout(() => setCopied(false), resetAfter)
+    timer.current = window.setTimeout(() => setStatus('idle'), resetAfter)
   }
 
   return (
     <button
       type="button"
       className={cx(styles.root, styles[size], showLabel && styles.withLabel, className)}
-      data-copied={copied || undefined}
+      data-copied={status === 'copied' || undefined}
+      data-failed={status === 'failed' || undefined}
       aria-label={showLabel ? undefined : label}
       onClick={copy}
     >
@@ -80,14 +84,16 @@ export function CopyButton({
         <svg viewBox="0 0 24 24" className={styles.check}>
           <path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1" />
         </svg>
+        <XIcon className={styles.fail} />
       </span>
       {showLabel && (
         <span className={styles.labels}>
           <span className={styles.labelIdle}>{label}</span>
           <span className={styles.labelDone} aria-hidden="true">{copiedLabel}</span>
+          <span className={styles.labelFailed} aria-hidden="true">{failedLabel}</span>
         </span>
       )}
-      <span className={styles.srOnly} aria-live="polite">{copied ? copiedLabel : ''}</span>
+      <span className={styles.srOnly} aria-live="polite">{status === 'copied' ? copiedLabel : status === 'failed' ? failedLabel : ''}</span>
     </button>
   )
 }

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

@@ -36,7 +36,9 @@
   animation: panelIn var(--hl-motion-slow) var(--hl-ease-spring);
 }
 
-.panel[data-state="closed"] { animation: panelOut var(--hl-motion-base) var(--hl-ease-in) forwards; }
+/* A closing panel takes no clicks, so a double click cannot run a footer action twice.
+   The overlay still catches them, so they never reach the page behind. */
+.panel[data-state="closed"] { animation: panelOut var(--hl-motion-base) var(--hl-ease-in) forwards; pointer-events: none; }
 
 .sm { max-width: var(--hl-panel-w-sm); }
 .lg { max-width: var(--hl-panel-w-lg); }

package/src/components/EmptyState/EmptyState.module.css

@@ -32,6 +32,7 @@
   font-size: var(--hl-text-lg);
   font-weight: var(--hl-weight-semibold);
   letter-spacing: var(--hl-tracking-tight);
+  overflow-wrap: anywhere;
 }
 
 h1.title { font-size: var(--hl-text-2xl); }

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

@@ -23,7 +23,23 @@
 .root::after {
   content: "";
   position: absolute;
-  inset: min(0px, calc((100% - var(--hl-hit-min)) / 2));
+  inset-block: min(0px, calc((100% - var(--hl-hit-min)) / 2));
+  inset-inline: 0;
+}
+
+/* Wider only for touch, as in Button: a mouse does not need it, and dense desktop rows have no gap to spare. */
+@media (pointer: coarse) {
+  .root::after { inset-inline: min(0px, calc((100% - var(--hl-hit-min)) / 2)); }
+}
+
+/* Beside another button, the hit area sinks below every box in the row, so it only fills the empty gap.
+   Links are left out: a card link with this button laid over it must not swallow the hit area. */
+:has(> button + .root, > .root + button) { isolation: isolate; }
+:has(> button + .root, > .root + button) > .root::after { z-index: -1; }
+
+/* A narrow gap leaves no room to share, so a ghost button beside another one takes the full width as its own box. */
+@media (pointer: coarse) {
+  .ghost:is(.root + .root, :has(+ .root)) { min-inline-size: var(--hl-hit-min); }
 }
 
 .sm { --s: var(--hl-control-h-sm); }

package/src/components/Input/Input.module.css

@@ -38,6 +38,13 @@
 .lg { --h: var(--hl-control-h-lg); }
 .floating { --h: var(--hl-field-h-floating); }
 
+/* On touch the input reaches over the field border, so the whole 44px box is the input's own target. */
+@media (pointer: coarse) {
+  .field { min-height: max(var(--h), var(--hl-hit-min)); }
+  .control { margin-block: calc(var(--hl-line) * -1); }
+  .field[data-invalid] .control { margin-block: calc(var(--hl-line-thick) * -1); }
+}
+
 @media (hover: hover) {
   .field:hover { border-color: var(--hl-color-fg-muted); }
 }

package/src/components/Input/Input.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useId, useState, type ComponentPropsWithRef, type ReactNode } from 'react'
+import { useEffect, useId, useRef, useState, type ComponentPropsWithRef, type ReactNode } from 'react'
 import { cx } from '../../internal/cx'
 import { FieldMessage } from '../../internal/FieldMessage'
+import { mergeRefs } from '../../internal/mergeRefs'
 import styles from './Input.module.css'
 
 export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
@@ -49,6 +50,7 @@ export function Input({
   defaultValue,
   onChange,
   labels: labelsProp,
+  ref,
   'aria-describedby': describedByProp,
   ...rest
 }: InputProps) {
@@ -60,6 +62,22 @@ export function Input({
   const [innerFilled, setInnerFilled] = useState(() => String(defaultValue ?? '') !== '')
   const filled = value !== undefined ? String(value) !== '' : innerFilled
   const floating = labelPlacement === 'floating'
+  const inner = useRef<HTMLInputElement>(null)
+
+  // A native form reset changes the value without an onChange
+  useEffect(() => {
+    const form = inner.current?.form
+    if (!form) return
+    let frame = 0
+    const onReset = () => {
+      frame = requestAnimationFrame(() => setInnerFilled(inner.current?.value !== ''))
+    }
+    form.addEventListener('reset', onReset)
+    return () => {
+      form.removeEventListener('reset', onReset)
+      cancelAnimationFrame(frame)
+    }
+  }, [])
   // The caller's ids join ours, so help and error stay linked.
   const describedBy = [help && !error ? helpId : null, error ? errorId : null, describedByProp]
     .filter(Boolean)
@@ -89,6 +107,7 @@ export function Input({
           )}
           <input
             id={inputId}
+            ref={mergeRefs(inner, ref)}
             className={styles.input}
             value={value}
             defaultValue={defaultValue}

package/src/components/Link/Link.module.css

@@ -1,12 +1,13 @@
+/* Inline, not inline-flex, so a long link wraps with the sentence and each line keeps its underline. */
 .root {
   position: relative;
-  display: inline-flex;
-  align-items: baseline;
-  gap: var(--hl-space-1);
+  display: inline;
   color: var(--hl-color-fg);
   font-weight: var(--hl-weight-medium);
   text-decoration: none;
   border-radius: var(--hl-radius-xs);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -32,12 +33,14 @@
 }
 
 .standalone {
-  min-height: var(--hl-hit-min);
+  display: inline-flex;
   align-items: center;
+  min-height: var(--hl-hit-min);
 }
 
 .arrow {
-  align-self: center;
+  margin-inline-start: var(--hl-space-1);
+  vertical-align: middle;
   width: 0.85em;
   height: 0.85em;
   transition: transform var(--hl-motion-base) var(--hl-ease-spring);

package/src/components/NumberInput/NumberInput.tsx

@@ -109,6 +109,9 @@ export function NumberInput({
   const [text, setText] = useState('')
   const valueRef = useRef(value)
   valueRef.current = value
+  // The hold timer keeps calling the bump from its first render, so it reads the typed text from a ref
+  const typed = useRef<string | null>(null)
+  typed.current = editing ? text : null
   const hold = useRef<{ timer?: number; count: number }>({ count: 0 })
   const decimals = (String(step).split('.')[1] ?? '').length
   const fmt = useMemo(() => new Intl.NumberFormat(locale, format), [locale, format])
@@ -121,11 +124,16 @@ export function NumberInput({
       valueRef.current = next
       setValue(next)
     }
-    if (editing) setText(next === null ? '' : plain.format(next))
+    if (editing) {
+      const shown = next === null ? '' : plain.format(next)
+      typed.current = shown
+      setText(shown)
+    }
   }
   const bump = (dir: 1 | -1, size = step) => {
-    const base = valueRef.current ?? (min > -Infinity ? min : 0)
-    commit(valueRef.current === null ? base : base + dir * size)
+    const current = (typed.current === null ? null : parseNumber(typed.current, locale)) ?? valueRef.current
+    const base = current ?? (min > -Infinity ? min : 0)
+    commit(current === null ? base : base + dir * size)
   }
 
   const stopHold = () => {
@@ -133,7 +141,8 @@ export function NumberInput({
     hold.current.count = 0
   }
   const startHold = (dir: 1 | -1) => (e: PointerEvent<HTMLButtonElement>) => {
-    if (e.button !== 0) return
+    // Chromium still sends pointer events to a disabled button
+    if (e.button !== 0 || e.currentTarget.disabled) return
     e.preventDefault()
     bump(dir)
     // A disabled button gets no pointerup, so listen on the window

package/src/components/Pagination/Pagination.module.css

@@ -68,7 +68,7 @@
 @media (hover: hover) {
   .btn:hover:not(:disabled):not([aria-current]) { background: var(--hl-color-surface-hover); }
 }
-.btn:active:not(:disabled) { transform: scale(0.92); }
+.btn:active:not(:disabled) { transform: scale(var(--hl-press-scale-strong)); }
 .btn[aria-current="page"] { color: var(--hl-color-accent-fg); }
 .btn:disabled { opacity: 0.35; cursor: not-allowed; }
 .btn:focus-visible { outline: none; box-shadow: var(--hl-focus-ring); }

package/src/components/Pagination/Pagination.tsx

@@ -29,17 +29,18 @@ export type PaginationProps = {
   className?: string
 }
 
+const span = (from: number, to: number) => Array.from({ length: to - from + 1 }, (_, i) => from + i)
+
+// Always the same number of slots, so the row keeps its width. A gap hides at least two pages.
 function range(page: number, count: number, siblings: number): Array<number | 'gap'> {
   const total = siblings * 2 + 5
-  if (count <= total) return Array.from({ length: count }, (_, i) => i + 1)
-  const left = Math.max(page - siblings, 2)
-  const right = Math.min(page + siblings, count - 1)
-  const out: Array<number | 'gap'> = [1]
-  if (left > 2) out.push('gap')
-  for (let p = left; p <= right; p++) out.push(p)
-  if (right < count - 1) out.push('gap')
-  out.push(count)
-  return out
+  if (count <= total) return span(1, count)
+  const side = total - 2
+  const leftGap = page - siblings > 3
+  const rightGap = page + siblings < count - 2
+  if (!leftGap) return [...span(1, side), 'gap', count]
+  if (!rightGap) return [1, 'gap', ...span(count - side + 1, count)]
+  return [1, 'gap', ...span(page - siblings, page + siblings), 'gap', count]
 }
 
 export function Pagination({
@@ -54,7 +55,9 @@ export function Pagination({
   pageLabel = (p) => `Page ${p}`,
   className,
 }: PaginationProps) {
-  const [page, setPage] = useControllable(pageProp, defaultPage, onPageChange)
+  const [rawPage, setPage] = useControllable(pageProp, defaultPage, onPageChange)
+  // A stored page can sit past the end after pageCount drops.
+  const page = Math.min(Math.max(rawPage, 1), Math.max(pageCount, 1))
   const listRef = useRef<HTMLUListElement>(null)
   const [pill, setPill] = useState<{ x: number; w: number } | null>(null)
   const [ready, setReady] = useState(false)

package/src/components/ProgressBar/ProgressBar.tsx

@@ -37,7 +37,7 @@ export function ProgressBar({ label, value, max = 100, showValue = true, hideLab
         aria-labelledby={id}
         aria-valuemin={determinate ? 0 : undefined}
         aria-valuemax={determinate ? max : undefined}
-        aria-valuenow={determinate ? value : undefined}
+        aria-valuenow={determinate ? Math.min(Math.max(value, 0), max) : undefined}
         className={cx(styles.track, styles[size])}
         data-indeterminate={!determinate || undefined}
       >

package/src/components/ScrollArea/ScrollArea.tsx

@@ -90,13 +90,17 @@ export function ScrollArea({ label, maxHeight, orientation = 'vertical', classNa
     e.preventDefault()
     e.stopPropagation()
     const track = e.currentTarget.parentElement as HTMLElement
+    const size = axis === 'y' ? vp.clientHeight : vp.clientWidth
     const full = axis === 'y' ? vp.scrollHeight : vp.scrollWidth
-    const trackLen = axis === 'y' ? track.clientHeight : track.clientWidth
+    const pad = parseFloat(getComputedStyle(track).paddingTop) || 0
+    const trackLen = (axis === 'y' ? track.clientHeight : track.clientWidth) - pad * 2
+    const thumbLen = axis === 'y' ? e.currentTarget.offsetHeight : e.currentTarget.offsetWidth
+    // The thumb travels the track minus its own length, which is all the scroll there is.
     drag.current = {
       axis,
       start: axis === 'y' ? e.clientY : e.clientX,
       scroll: axis === 'y' ? vp.scrollTop : vp.scrollLeft,
-      ratio: full / trackLen,
+      ratio: (full - size) / Math.max(1, trackLen - thumbLen),
       pointer: e.pointerId,
     }
     e.currentTarget.setPointerCapture(e.pointerId)

package/src/components/SearchInput/SearchInput.module.css

@@ -45,7 +45,7 @@
 }
 
 @keyframes popIn {
-  from { opacity: 0; transform: scale(0.4) rotate(-90deg); }
+  from { opacity: 0; transform: scale(var(--hl-check-scale)) rotate(-90deg); }
 }
 
 @keyframes fadeIn {

package/src/components/SearchInput/SearchInput.tsx

@@ -42,11 +42,14 @@ export function SearchInput({
   const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange)
   const inputRef = useRef<HTMLInputElement>(null)
 
-  // Ignored while another field has focus, so it never steals typed text
+  // Ignored while another field has focus, so it never steals typed text, and while a modal
+  // this field is not in is open, so focus never leaves the modal.
   useEffect(() => {
     if (!shortcut) return
     const onKey = (e: KeyboardEvent) => {
       if (e.key !== shortcut || e.metaKey || e.ctrlKey || e.altKey || isTyping(document.activeElement)) return
+      const modals = document.querySelectorAll('[aria-modal="true"]')
+      if (modals.length && !modals[modals.length - 1].contains(inputRef.current)) return
       e.preventDefault()
       inputRef.current?.focus()
       inputRef.current?.select()

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

@@ -36,8 +36,9 @@
   align-items: center;
   justify-content: center;
   gap: var(--hl-space-3);
+  --pad: var(--hl-space-5);
   min-height: calc(var(--hl-control-h-md) - var(--hl-space-1) * 2);
-  padding: 0 var(--hl-space-5);
+  padding: 0 var(--pad);
   border: 0;
   border-radius: var(--hl-radius-control);
   background: transparent;
@@ -60,8 +61,8 @@
 }
 
 .sm .item {
+  --pad: var(--hl-space-4);
   min-height: calc(var(--hl-control-h-sm) - var(--hl-space-1) * 2);
-  padding: 0 var(--hl-space-4);
   font-size: var(--hl-text-xs);
 }
 
@@ -79,5 +80,31 @@
 
 .icon {
   display: inline-flex;
+  flex: none;
   font-size: var(--hl-icon-md);
 }
+
+/* Too wide for its box (a narrow phone): less padding first, then long labels end in an ellipsis */
+.root[data-tight] .item {
+  flex: 1 1 auto;
+  min-width: 0;
+  --pad: var(--hl-space-3);
+}
+
+.text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 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) {
+  .text,
+  .icon:only-child {
+    min-width: calc(var(--hl-hit-min) - var(--pad) * 2);
+    justify-content: center;
+    text-align: center;
+  }
+  .root[data-tight] .item { min-width: var(--hl-hit-min); }
+}

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -47,6 +47,12 @@ export function SegmentedControl({
 
   useLayoutEffect(() => {
     const measure = () => {
+      // Tight mode only when the segments overflow at their normal size, so a wide screen keeps the normal look
+      const root = rootRef.current
+      if (root) {
+        root.removeAttribute('data-tight')
+        if (root.scrollWidth > root.clientWidth) root.setAttribute('data-tight', '')
+      }
       const el = refs.current[index]
       if (el) setPill({ x: el.offsetLeft, w: el.offsetWidth })
     }
@@ -119,7 +125,7 @@ export function SegmentedControl({
             onClick={() => setValue(o.value)}
           >
             {o.icon && <span className={styles.icon}>{o.icon}</span>}
-            {o.label}
+            {o.label && <span className={styles.text}>{o.label}</span>}
           </button>
         )
       })}

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

@@ -54,7 +54,7 @@
 
 .trigger:focus-visible { box-shadow: var(--hl-focus-ring); }
 .trigger[data-invalid] { border-color: var(--hl-color-danger); border-width: var(--hl-line-thick); }
-.trigger:disabled { opacity: 0.5; cursor: not-allowed; background: var(--hl-color-surface-sunken); }
+.trigger:disabled { opacity: var(--hl-disabled-opacity); cursor: not-allowed; background: var(--hl-color-surface-sunken); }
 
 .value {
   min-width: 0;
@@ -149,7 +149,7 @@
   width: var(--hl-icon-md);
   height: var(--hl-icon-md);
   opacity: 0;
-  transform: scale(0.4);
+  transform: scale(var(--hl-check-scale));
   transition:
     opacity var(--hl-motion-fast) var(--hl-ease-out),
     transform var(--hl-motion-slow) var(--hl-ease-spring);

package/src/components/Select/Select.tsx

@@ -127,7 +127,7 @@ export function Select({
       } else if (k === 'ArrowUp') {
         e.preventDefault()
         openList(enabled(selectedIndex) ? selectedIndex : last())
-      } else if (k.length === 1) {
+      } else if (k.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
         openList()
         runTypeahead(k)
       }

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

@@ -35,6 +35,7 @@
 /* No "from" frame: the close starts where a drag left the sheet */
 .sheet[data-state="closed"] {
   animation: sheetOut var(--hl-motion-slow) var(--hl-ease-in-out) forwards;
+  pointer-events: none;
 }
 
 .grab {

package/src/components/Spinner/Spinner.tsx

@@ -1,3 +1,6 @@
+'use client'
+
+import { useEffect, useState } from 'react'
 import { cx } from '../../internal/cx'
 import styles from './Spinner.module.css'
 
@@ -11,13 +14,16 @@ export type SpinnerProps = {
 }
 
 export function Spinner({ size = 'md', label = 'Loading', className }: SpinnerProps) {
+  // The label lands after the empty live region is mounted, so screen readers hear it.
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
   return (
     <span className={cx(styles.root, styles[size], className)} role={label ? 'status' : undefined}>
       <svg className={styles.svg} viewBox="0 0 24 24" aria-hidden="true" focusable="false">
         <circle className={styles.track} cx="12" cy="12" r="9.5" />
         <circle className={styles.arc} cx="12" cy="12" r="9.5" pathLength="100" />
       </svg>
-      {label && <span className={styles.srOnly}>{label}</span>}
+      {label && <span className={styles.srOnly}>{mounted ? label : null}</span>}
     </span>
   )
 }

package/src/components/Switch/Switch.tsx

@@ -18,6 +18,8 @@ export type SwitchProps = Omit<ComponentPropsWithRef<'button'>, 'onChange' | 'va
   onCheckedChange?: (checked: boolean) => void
   /** Puts the label before the switch, like a settings row. */
   labelPosition?: 'start' | 'end'
+  /** Form field name. The form gets "on" while the switch is on, and nothing while it is off. */
+  name?: string
 }
 
 export function Switch({
@@ -31,6 +33,7 @@ export function Switch({
   className,
   disabled,
   onClick,
+  name,
   'aria-describedby': describedByProp,
   ...rest
 }: SwitchProps) {
@@ -61,6 +64,8 @@ export function Switch({
         <label htmlFor={switchId} className={styles.label}>{label}</label>
         {description && <span id={`${switchId}-desc`} className={styles.description}>{description}</span>}
       </span>
+      {/* Submits like a checkbox: "on" when on, nothing when off */}
+      {name && checked && <input type="hidden" name={name} value="on" />}
     </div>
   )
 }

package/src/components/Tag/Tag.module.css

@@ -1,6 +1,7 @@
 .root {
   display: inline-flex;
   align-items: center;
+  max-width: 100%;
   height: var(--hl-control-h-sm);
   border: var(--hl-line) solid var(--hl-color-border-strong);
   border-radius: var(--hl-radius-control);
@@ -26,6 +27,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--hl-space-2);
+  min-width: 0;
   height: 100%;
   padding: 0 var(--hl-space-4);
 }
@@ -85,6 +87,7 @@
   position: relative;
   display: grid;
   place-items: center;
+  flex: none;
   width: var(--hl-mini-button);
   height: var(--hl-mini-button);
   margin-right: var(--hl-space-1);

package/src/components/Tag/Tag.tsx

@@ -2,6 +2,7 @@
 
 import { useRef, useState, type ReactNode } from 'react'
 import { cx } from '../../internal/cx'
+import { focusables } from '../../internal/focus'
 import { CheckIcon, XIcon } from '../../internal/icons'
 import { easing, motionMs } from '../../internal/motion'
 import styles from './Tag.module.css'
@@ -43,16 +44,25 @@ export function Tag({ children, onRemove, removeLabel, selected, onSelectedChang
   const [leaving, setLeaving] = useState(false)
   const selectable = selected !== undefined
 
+  // The remove button is about to unmount, so focus moves to the next control (or the one before) instead of the body.
+  const finish = () => {
+    const el = ref.current
+    if (el?.contains(document.activeElement)) {
+      const others = focusables(document.body).filter((n) => !el.contains(n))
+      const next = others.find((n) => el.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING)
+      const prev = [...others].reverse().find((n) => el.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_PRECEDING)
+      ;(next ?? prev)?.focus({ preventScroll: true })
+    }
+    onRemove?.()
+  }
+
   // Collapse first so neighbours slide in, then tell the parent
   const remove = () => {
     const el = ref.current
     if (!el || leaving) return
     setLeaving(true)
     const ms = motionMs('base')
-    if (ms === 0 || !el.animate) {
-      onRemove?.()
-      return
-    }
+    if (ms === 0 || !el.animate) return finish()
     const w = el.offsetWidth
     const anim = el.animate(
       [
@@ -61,7 +71,7 @@ export function Tag({ children, onRemove, removeLabel, selected, onSelectedChang
       ],
       { duration: ms, easing: easing('in-out'), fill: 'forwards' },
     )
-    anim.onfinish = () => onRemove?.()
+    anim.onfinish = finish
   }
 
   const label = typeof children === 'string' ? children : labels.item
@@ -88,7 +98,7 @@ export function Tag({ children, onRemove, removeLabel, selected, onSelectedChang
         <span className={styles.static}>{content}</span>
       )}
       {onRemove && (
-        <button type="button" className={styles.remove} aria-label={removeLabel ?? labels.remove(label)} onClick={remove} disabled={leaving}>
+        <button type="button" className={styles.remove} aria-label={removeLabel ?? labels.remove(label)} onClick={remove}>
           <XIcon />
         </button>
       )}

package/src/components/Textarea/Textarea.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useId, useLayoutEffect, useRef, type ComponentPropsWithRef, type ReactNode } from 'react'
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, type ComponentPropsWithRef, type ReactNode } from 'react'
 import { cx } from '../../internal/cx'
 import { FieldMessage } from '../../internal/FieldMessage'
 import { mergeRefs } from '../../internal/mergeRefs'
@@ -74,6 +74,21 @@ export function Textarea({
 
   useLayoutEffect(resize, [resize, value])
 
+  // A native form reset changes the value without an onChange
+  useEffect(() => {
+    const form = inner.current?.form
+    if (!form) return
+    let frame = 0
+    const onReset = () => {
+      frame = requestAnimationFrame(resize)
+    }
+    form.addEventListener('reset', onReset)
+    return () => {
+      form.removeEventListener('reset', onReset)
+      cancelAnimationFrame(frame)
+    }
+  }, [resize])
+
   const describedBy = [help && !error ? helpId : null, error ? errorId : null, showCount && maxLength ? countId : null, describedByProp]
     .filter(Boolean)
     .join(' ')

package/src/components/Toast/Toast.tsx

@@ -76,8 +76,10 @@ export function ToastProvider({ children, visible = 3, label = 'Notifications',
 
   const say = (opts: Partial<ToastOptions>, variant?: ToastVariant) => {
     const text = `${opts.title}${opts.description ? `. ${opts.description}` : ''}`
-    if (variant === 'error') setUrgent(text)
-    else setAnnounce(text)
+    // The same text twice is not read again, so a trailing space makes it change.
+    const fresh = (prev: string) => (prev === text ? `${text} ` : text)
+    if (variant === 'error') setUrgent(fresh)
+    else setAnnounce(fresh)
   }
 
   const remove = useCallback((id: number, dir: Item['leaving'] = 'down') => {

package/src/tokens.css

@@ -187,6 +187,12 @@
   /* Small controls (icon buttons, checkboxes, steppers) press deeper so the tap is felt. */
   --hl-press-scale-strong: 0.9;
   --hl-pop-scale: 0.96;
+  /* A check mark or small icon grows in from this size, and a ticked box bumps up to the peak. */
+  --hl-check-scale: 0.4;
+  --hl-check-peak-scale: 1.12;
+
+  /* One look for every disabled control */
+  --hl-disabled-opacity: 0.5;
 
   /* Layers */
   --hl-z-sticky: 10;
@@ -299,6 +305,8 @@
     --hl-press-scale: 1;
     --hl-press-scale-strong: 1;
     --hl-pop-scale: 1;
+    --hl-check-scale: 1;
+    --hl-check-peak-scale: 1;
   }
 }