@tensor_1/react 2.47.0 → 2.49.0

package/dist/components/MotionList.d.ts

@@ -0,0 +1,303 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactElement, TransitionEvent } from 'react';
+
+type Key = string | number;
+interface MotionListProps<T> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** The items in the order to show them. */
+    items: readonly T[];
+    /** A stable key per item. */
+    getKey: (item: T) => Key;
+    /**
+     * One element per item: an `<li>` for `ul`/`ol`, a `Tr` for `tbody`. It must pass unknown
+     * props through to its DOM element (the list sets `data-uix-key` and, while an item leaves,
+     * `data-uix-exiting` and `aria-hidden`; `inert` is set on the element directly).
+     */
+    renderItem: (item: T, state: {
+        exiting: boolean;
+    }) => ReactElement;
+    /** The list element (default `ul`). */
+    as?: 'ul' | 'ol' | 'div' | 'tbody';
+}
+/**
+ * A list whose items arrive, leave and move visibly (HAR-2586, motion standard §2.5):
+ *
+ * - A new item fades in and rises 8 px into place; never on the first render.
+ * - A removed item stays for a moment, fades out, and only then leaves; the items after it
+ *   glide up into the gap instead of jumping.
+ * - A reordered item glides from its old place to its new one (FLIP: transform only).
+ * - Focus stays put: on an item that moved, and on the next item when the focused one leaves.
+ *   Focus outside the list is never pulled in.
+ *
+ * Reduced motion keeps the fades and drops every glide and rise. For a list that re-sorts
+ * itself (live data), hold the order while the person is pointing at it: `useDeferredReorder`.
+ */
+declare function MotionList<T>({ items, getKey, renderItem, as, className, ...props }: MotionListProps<T>): react.DetailedReactHTMLElement<{
+    ref: react.RefObject<HTMLElement>;
+    className: string;
+    onTransitionEnd: (event: TransitionEvent<HTMLElement>) => void;
+    color?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    id?: string | undefined | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
+    style?: react.CSSProperties | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
+    tabIndex?: number | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    role?: react.AriaRole | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "false" | "true") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "false" | "true") | undefined;
+    "aria-multiline"?: (boolean | "false" | "true") | undefined;
+    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCopyCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCut?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCutCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onPaste?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onPasteCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCompositionEnd?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionEndCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStart?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStartCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdate?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onFocus?: react.FocusEventHandler<HTMLElement> | undefined;
+    onFocusCapture?: react.FocusEventHandler<HTMLElement> | undefined;
+    onBlur?: react.FocusEventHandler<HTMLElement> | undefined;
+    onBlurCapture?: react.FocusEventHandler<HTMLElement> | undefined;
+    onChange?: react.FormEventHandler<HTMLElement> | undefined;
+    onChangeCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onBeforeInput?: react.InputEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onInput?: react.FormEventHandler<HTMLElement> | undefined;
+    onInputCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onReset?: react.FormEventHandler<HTMLElement> | undefined;
+    onResetCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onSubmit?: react.FormEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onInvalid?: react.FormEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onLoad?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onError?: react.ReactEventHandler<HTMLElement> | undefined;
+    onErrorCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onKeyDown?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyDownCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPress?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPressCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUp?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUpCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onAbort?: react.ReactEventHandler<HTMLElement> | undefined;
+    onAbortCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlay?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThrough?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThroughCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChange?: react.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEmptied?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEmptiedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEncrypted?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEncryptedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEnded?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEndedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedData?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedDataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadata?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStart?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStartCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPause?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPauseCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlay?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlaying?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlayingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onProgress?: react.ReactEventHandler<HTMLElement> | undefined;
+    onProgressCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onRateChange?: react.ReactEventHandler<HTMLElement> | undefined;
+    onRateChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeeked?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeekedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeeking?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeekingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onStalled?: react.ReactEventHandler<HTMLElement> | undefined;
+    onStalledCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSuspend?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSuspendCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdate?: react.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdateCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChange?: react.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onWaiting?: react.ReactEventHandler<HTMLElement> | undefined;
+    onWaitingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onAuxClick?: react.MouseEventHandler<HTMLElement> | undefined;
+    onAuxClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onClick?: react.MouseEventHandler<HTMLElement> | undefined;
+    onClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenu?: react.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenuCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClick?: react.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onDrag?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEnd?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEndCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEnter?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEnterCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragExit?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragExitCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragLeave?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragLeaveCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragOver?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragOverCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragStart?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragStartCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDrop?: react.DragEventHandler<HTMLElement> | undefined;
+    onDropCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onMouseDown?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseDownCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseEnter?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseLeave?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMove?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMoveCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOut?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOutCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOver?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOverCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUp?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUpCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onSelect?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSelectCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onTouchCancel?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchCancelCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEnd?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEndCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMove?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMoveCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStart?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStartCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onPointerDown?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerDownCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMove?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMoveCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUp?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUpCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancel?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancelCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnter?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeave?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOver?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOverCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOut?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOutCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onScroll?: react.UIEventHandler<HTMLElement> | undefined;
+    onScrollCapture?: react.UIEventHandler<HTMLElement> | undefined;
+    onWheel?: react.WheelEventHandler<HTMLElement> | undefined;
+    onWheelCapture?: react.WheelEventHandler<HTMLElement> | undefined;
+    onAnimationStart?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationStartCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEnd?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEndCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIteration?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIterationCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onTransitionEndCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
+}, HTMLElement>;
+
+export { MotionList, type MotionListProps };

package/dist/components/MotionList.js

@@ -0,0 +1,175 @@
+"use client";
+import { Children, cloneElement, createElement, isValidElement, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { prefersReducedMotion } from "../hooks/useReducedMotion.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const EXIT_FALLBACK_MS = 1e3;
+const FOCUSABLE = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
+function MotionList({ items, getKey, renderItem, as = "ul", className, ...props }) {
+  const containerRef = useRef(null);
+  const [state, setState] = useState(() => ({
+    items,
+    entries: items.map((item) => ({ key: getKey(item), item, exiting: false })),
+    exiting: /* @__PURE__ */ new Map()
+  }));
+  let { entries } = state;
+  if (state.items !== items && !sameItems(state.items, items)) {
+    const now = new Set(items.map(getKey));
+    const exitingNow = new Map(state.exiting);
+    for (const e of state.entries) if (!e.exiting && !now.has(e.key)) exitingNow.set(e.key, e.item);
+    for (const key of now) exitingNow.delete(key);
+    entries = merge(items, getKey, state.entries, exitingNow);
+    setState({ items, entries, exiting: exitingNow });
+  }
+  const previous = useRef(null);
+  const drop = (keys) => setState((current) => {
+    const gone = keys.filter((key) => current.exiting.has(key));
+    if (!gone.length) return current;
+    const exitingNow = new Map(current.exiting);
+    for (const key of gone) exitingNow.delete(key);
+    const goneSet = new Set(gone);
+    return { ...current, exiting: exitingNow, entries: current.entries.filter((e) => !(e.exiting && goneSet.has(e.key))) };
+  });
+  const boxes = useRef(/* @__PURE__ */ new Map());
+  const focusedKey = useRef(null);
+  const measuredFor = useRef(null);
+  if (measuredFor.current !== entries && containerRef.current) {
+    measuredFor.current = entries;
+    boxes.current = measure(containerRef.current);
+    let holder = typeof document !== "undefined" ? document.activeElement : null;
+    while (holder && holder.parentElement !== containerRef.current) holder = holder.parentElement;
+    focusedKey.current = holder?.getAttribute("data-uix-key") ?? null;
+  }
+  useIsomorphicLayoutEffect(() => {
+    const container = containerRef.current;
+    const before = previous.current;
+    previous.current = entries;
+    if (!container) return;
+    const byKey = new Map(entries.map((e) => [String(e.key), e]));
+    const elements = Array.from(container.querySelectorAll(":scope > [data-uix-key]"));
+    for (const el of elements) if (byKey.get(el.getAttribute("data-uix-key"))?.exiting) el.setAttribute("inert", "");
+    const had = focusedKey.current;
+    focusedKey.current = null;
+    const active = document.activeElement;
+    const lost = active === document.body || active === null || !active.isConnected || !!active.closest("[data-uix-exiting], [inert]");
+    if (had !== null && lost) {
+      const index = elements.findIndex((el) => el.getAttribute("data-uix-key") === had);
+      const stays = (el) => el && !el.hasAttribute("data-uix-exiting");
+      const own = stays(elements[index]) ? elements[index] : void 0;
+      const target = own ?? elements.slice(index + 1).find(stays) ?? elements.slice(0, Math.max(index, 0)).reverse().find(stays);
+      const focusable = target?.matches(FOCUSABLE) ? target : target?.querySelector(FOCUSABLE);
+      focusable?.focus({ preventScroll: true });
+    }
+    if (!before) return;
+    const reduced = prefersReducedMotion();
+    const was = new Set(before.map((e) => String(e.key)));
+    const moves = [];
+    if (!reduced) {
+      for (const el of elements) el.removeAttribute("data-uix-moving");
+      const origin = container.getBoundingClientRect();
+      for (const el of elements) {
+        const key = el.getAttribute("data-uix-key");
+        const entry = byKey.get(key);
+        if (!entry || entry.exiting || !was.has(key)) continue;
+        const from = boxes.current.get(key);
+        if (!from) continue;
+        const r = el.getBoundingClientRect();
+        const dx = from.x - (r.left - origin.left);
+        const dy = from.y - (r.top - origin.top);
+        if (dx || dy) moves.push({ el, dx, dy });
+      }
+      for (const { el, dx, dy } of moves) el.style.transform = `translate(${dx}px, ${dy}px)`;
+      if (moves.length) void container.offsetWidth;
+      for (const { el } of moves) {
+        el.setAttribute("data-uix-moving", "");
+        el.style.transform = "";
+      }
+    }
+    for (const el of elements) {
+      const key = el.getAttribute("data-uix-key");
+      if (!was.has(key) && !byKey.get(key)?.exiting) replay(el, "data-uix-entering");
+    }
+  }, [entries]);
+  const deadlines = useRef(/* @__PURE__ */ new Map());
+  const exitingKeys = entries.filter((e) => e.exiting).map((e) => e.key);
+  const exitingSignature = exitingKeys.join("\n");
+  useEffect(() => {
+    const container = containerRef.current;
+    const now = Date.now();
+    for (const key of Array.from(deadlines.current.keys())) if (!exitingKeys.includes(key)) deadlines.current.delete(key);
+    for (const key of exitingKeys) if (!deadlines.current.has(key)) deadlines.current.set(key, now + EXIT_FALLBACK_MS);
+    if (!container || !exitingKeys.length) return void 0;
+    const onEnd = (event) => {
+      const el = event.target;
+      if (!el.hasAttribute("data-uix-exiting") || el.parentElement !== container) return;
+      const key = exitingKeys.find((k) => String(k) === el.getAttribute("data-uix-key"));
+      if (key !== void 0) drop([key]);
+    };
+    container.addEventListener("animationend", onEnd);
+    const next = Math.min(...deadlines.current.values());
+    const timer = setTimeout(() => {
+      const due = Date.now();
+      drop([...deadlines.current].filter(([, at]) => at <= due).map(([key]) => key));
+    }, Math.max(0, next - now));
+    return () => {
+      container.removeEventListener("animationend", onEnd);
+      clearTimeout(timer);
+    };
+  }, [exitingSignature]);
+  const children = entries.map(({ key, item, exiting: leaving }) => {
+    const element = renderItem(item, { exiting: leaving });
+    if (!isValidElement(element)) return element;
+    const extra = { key, "data-uix-key": String(key) };
+    if (leaving) Object.assign(extra, { "data-uix-exiting": "", "aria-hidden": true });
+    return cloneElement(element, extra);
+  });
+  const onTransitionEnd = (event) => {
+    const el = event.target;
+    if (event.propertyName === "transform" && el.parentElement === containerRef.current) el.removeAttribute("data-uix-moving");
+  };
+  return createElement(as, { ...props, ref: containerRef, className: cx("uix-motion-list", className), onTransitionEnd }, Children.toArray(children));
+}
+function sameItems(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) if (a[i] !== b[i]) return false;
+  return true;
+}
+function merge(items, getKey, before, exiting) {
+  const list = items.map((item) => ({ key: getKey(item), item, exiting: false }));
+  before.forEach((e, i) => {
+    if (!exiting.has(e.key)) return;
+    let at = -1;
+    for (let j = i - 1; j >= 0 && at < 0; j -= 1) {
+      const k = before[j].key;
+      at = list.findIndex((x) => x.key === k);
+    }
+    list.splice(at + 1, 0, { key: e.key, item: exiting.get(e.key), exiting: true });
+  });
+  return list;
+}
+function measure(container) {
+  const map = /* @__PURE__ */ new Map();
+  const origin = container.getBoundingClientRect();
+  for (const el of Array.from(container.querySelectorAll(":scope > [data-uix-key]"))) {
+    if (el.hasAttribute("data-uix-exiting")) continue;
+    const r = el.getBoundingClientRect();
+    map.set(el.getAttribute("data-uix-key"), { x: r.left - origin.left, y: r.top - origin.top });
+  }
+  return map;
+}
+function replay(el, attribute) {
+  if (el.hasAttribute(attribute)) {
+    el.removeAttribute(attribute);
+    void el.offsetWidth;
+  }
+  el.setAttribute(attribute, "");
+  const done = (event) => {
+    if (event.target !== el) return;
+    el.removeAttribute(attribute);
+    el.removeEventListener("animationend", done);
+  };
+  el.addEventListener("animationend", done);
+}
+export {
+  MotionList
+};

package/dist/components/NavFavourites.d.ts

@@ -20,6 +20,11 @@ interface NavFavouritesLabels {
     readonly remove: string;
     /** Per-row overflow-trigger accessible-name template with `{label}`. Defaults to "{label} favourite options". */
     readonly options?: string;
+    /**
+     * Polite announcement after a move: `{label}`, `{position}`, `{count}`. Defaults to
+     * "{label} moved to position {position} of {count}" (it was English only before HAR-1375).
+     */
+    readonly moved?: string;
 }
 interface NavFavouritesProps {
     /** The already-resolved favourites, in display order. */

package/dist/components/NavFavourites.js

@@ -2,6 +2,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { placeId } from "../reorder.js";
 const ChevronDownIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -91,15 +93,13 @@ function NavFavourites({
     const idx = order.indexOf(id);
     const next = idx + dir;
     if (idx < 0 || next < 0 || next >= order.length) return;
-    const reordered = [...order];
-    const [it] = reordered.splice(idx, 1);
-    if (it === void 0) return;
-    reordered.splice(next, 0, it);
+    const reordered = placeId(order, id, next);
+    if (reordered === order) return;
     focusAfterRef.current = id;
     const moved = items.find((i) => i.id === id);
-    if (moved) setAnnouncement(`${moved.label} moved to position ${next + 1} of ${order.length}`);
-    onReorder(reordered);
-  }, [onReorder, order]);
+    if (moved) setAnnouncement(fillLabel(labels.moved ?? "{label} moved to position {position} of {count}", { label: moved.label, position: next + 1, count: order.length }));
+    onReorder([...reordered]);
+  }, [onReorder, order, items, labels.moved]);
   const remove = useCallback((id) => {
     const idx = order.indexOf(id);
     const neighbour = order[idx + 1] ?? order[idx - 1] ?? null;

package/dist/components/OtpInput.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { InputHTMLAttributes, AriaAttributes, CSSProperties } from 'react';
+
+interface OtpInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'size' | 'maxLength' | 'pattern' | 'inputMode'> {
+    /** How many characters the code has. Default 6. */
+    length?: number;
+    /** Controlled value: the characters typed so far. */
+    value?: string;
+    defaultValue?: string;
+    /** Every change, with the cleaned code (only allowed characters, at most `length`). */
+    onValueChange?: (value: string) => void;
+    /** Called once each time the code reaches `length` characters. */
+    onComplete?: (code: string) => void;
+    /** `numeric` (default): digits, with the phone's number pad. `alphanumeric`: letters and digits, upper-cased. */
+    mode?: 'numeric' | 'alphanumeric';
+    /** Draw a gap after every n cells (3 → "123 456"). Visual only: the value has no separator. */
+    groupSize?: number;
+    invalid?: boolean;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A one-time code (HAR-1376): ONE native input, so screen readers, the phone's code autofill
+ * (`autoComplete="one-time-code"`) and password managers see a single field, drawn as `length`
+ * cells. Pasting "123 456" or "123-456" keeps the characters; typing past the end is ignored;
+ * Backspace deletes the last one. `onComplete(code)` runs when the last character arrives. Put it in
+ * a `Field` for its label, hint and error (the cells turn red with `aria-invalid`). `name` submits
+ * the code. `ref` is the input.
+ */
+declare const OtpInput: react.ForwardRefExoticComponent<OtpInputProps & react.RefAttributes<HTMLInputElement>>;
+
+export { OtpInput, type OtpInputProps };