@tensor_1/react 2.47.0 → 2.49.0

package/dist/components/TimePicker.d.ts

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import { AriaAttributes, CSSProperties } from 'react';
+import { Placement } from '../overlay-position.js';
+
+/** Every word `TimePicker` renders or announces. */
+interface TimePickerLabels {
+    /** The list button's name while no time is set. */
+    open: string;
+    /** The list button's name with a time set; `{time}` is the time as the field shows it. */
+    openSelected: string;
+    /** The list of times (the popover's and the listbox's name). */
+    list: string;
+    /** Shown when the typed text is not a time; `{example}` is a time in the field's own shape. */
+    invalidTime: string;
+    /** Shown when the typed time is before `min`; `{min}`. */
+    tooEarly: string;
+    /** Shown when the typed time is after `max`; `{max}`. */
+    tooLate: string;
+    /** Shown when the typed time is outside an overnight range (`min` after `max`); `{min}`, `{max}`. */
+    outside: string;
+}
+declare const DEFAULT_TIME_PICKER_LABELS: TimePickerLabels;
+/** Why typed text was refused: not a time, or a time before `min` / after `max`. */
+type TimeInputProblem = 'format' | 'early' | 'late' | 'outside';
+interface TimePickerProps {
+    /** The time as `HH:mm` (24-hour), or `null` for none. */
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+    /** Minutes the arrow keys step the minutes by, and between the times in the list. Default 15. */
+    minuteStep?: number;
+    /**
+     * First and last time that can be chosen (`HH:mm`, inclusive). A `min` after `max` (22:00 to
+     * 06:00) is an overnight range: it wraps round midnight, in the keys, the list and the check.
+     */
+    min?: string;
+    max?: string;
+    /**
+     * The locale that writes the time: 14:30 in `de`, 2:30 PM in `en-US`. Default: `UixLabelsProvider`
+     * `dateFormat.locale`, then the viewer's.
+     */
+    locale?: string;
+    /** `true` writes 2:30 PM, `false` 14:30, whatever the locale. */
+    hour12?: boolean;
+    placeholder?: string;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    /** Submits the `HH:mm` value under this name (a hidden input), whatever the field shows. */
+    name?: string;
+    /** Lands on the text input, so a `<label htmlFor>` or `<Field>` names it. */
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    'aria-required'?: AriaAttributes['aria-required'];
+    /** Where the list opens. Default `'bottom-start'`; it flips and shifts to stay on screen. */
+    placement?: Placement;
+    /** Told when typed text is refused, and `null` once the field is fine again. */
+    onInputProblem?: (problem: TimeInputProblem | null) => void;
+    onOpenChange?: (open: boolean) => void;
+    /** Translatable words; English defaults in {@link DEFAULT_TIME_PICKER_LABELS}. */
+    labels?: Partial<TimePickerLabels>;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A time of day as a form field (HAR-1835), beside `DatePicker`: a text input that shows the time
+ * in the locale's shape (14:30 in German, 2:30 PM in en-US) and reads a typed one (`1430`, `9`,
+ * `2:30 pm`) on Enter and when focus leaves it; a clock button opens the times at `minuteStep` in a
+ * list. ArrowUp / ArrowDown step the part the caret is in (the hour, or the minutes by
+ * `minuteStep`), PageUp / PageDown step the hour, Alt+ArrowDown opens the list. Text that is not a
+ * time, or a time outside `min` / `max`, marks the field invalid, says why and leaves `value` alone.
+ * The value is `HH:mm`, what `<input type="time">` holds.
+ */
+declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+export { DEFAULT_TIME_PICKER_LABELS, type TimeInputProblem, TimePicker, type TimePickerLabels, type TimePickerProps };

package/dist/components/TimePicker.js

@@ -0,0 +1,347 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { ClockIcon } from "../icons/components.js";
+import { useUixLabels } from "../labels-context.js";
+import {
+  formatTimeKey,
+  isOvernightRange,
+  isTimeOutOfRange,
+  isValidTimeKey,
+  parseTimeInput,
+  stepTime,
+  timePartEnds,
+  timeSlots,
+  timeToMinutes
+} from "../time-field-model.js";
+import { useFieldPopover } from "./DateFieldParts.js";
+import { Popover } from "./Popover.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const DEFAULT_TIME_PICKER_LABELS = {
+  open: "Choose time",
+  openSelected: "Change time, {time}",
+  list: "Times",
+  invalidTime: "Enter a time like {example}.",
+  tooEarly: "Choose {min} or later.",
+  tooLate: "Choose {max} or earlier.",
+  outside: "Choose a time from {min} to {max}."
+};
+const TimePicker = forwardRef(function TimePicker2({
+  value,
+  onValueChange,
+  minuteStep = 15,
+  min,
+  max,
+  locale: localeProp,
+  hour12,
+  placeholder,
+  size = "md",
+  disabled,
+  readOnly,
+  required,
+  invalid,
+  name,
+  id: idProp,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  placement = "bottom-start",
+  onInputProblem,
+  onOpenChange,
+  labels: labelOverrides,
+  className,
+  style
+}, forwardedRef) {
+  const uid = useId();
+  const id = idProp ?? `${uid}-input`;
+  const popoverId = `${uid}-times`;
+  const listId = `${uid}-list`;
+  const errorId = `${uid}-error`;
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_TIME_PICKER_LABELS, ...uixLabels.timePicker, ...labelOverrides };
+  const locale = localeProp ?? uixLabels.dateFormat?.locale;
+  const anchorRef = useRef(null);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => inputRef.current);
+  const step = Math.max(1, Math.round(minuteStep));
+  const current = isValidTimeKey(value) ? value : null;
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const shownLocale = locale ?? (mounted ? void 0 : "en-GB");
+  const shownHour12 = hour12 ?? (locale || mounted ? void 0 : false);
+  const format = (time) => formatTimeKey(time, shownLocale, shownHour12);
+  const [text, setText] = useState(() => current ? format(current) : "");
+  const [problem, setProblemState] = useState(null);
+  const reported = useRef(null);
+  const setProblem = (next) => {
+    if (next !== reported.current) {
+      reported.current = next;
+      onInputProblem?.(next);
+    }
+    setProblemState(next);
+  };
+  useEffect(() => {
+    setText(current ? format(current) : "");
+    setProblem(null);
+  }, [current, locale, hour12, mounted]);
+  const { open, show, hide, triggerProps } = useFieldPopover(popoverId, () => inputRef.current?.focus({ preventScroll: true }), onOpenChange);
+  const locked = !!disabled || !!readOnly;
+  const commit = () => {
+    const typed = text.trim();
+    if (!typed) {
+      setProblem(null);
+      if (text) setText("");
+      if (value !== null) onValueChange(null);
+      return true;
+    }
+    if (current && typed === format(current)) {
+      setProblem(null);
+      return true;
+    }
+    const parsed = parseTimeInput(typed, locale);
+    if (!parsed) {
+      setProblem("format");
+      return false;
+    }
+    if (isTimeOutOfRange(parsed, min, max)) {
+      setProblem(isOvernightRange(min, max) ? "outside" : min && isValidTimeKey(min) && parsed < min ? "early" : "late");
+      return false;
+    }
+    setProblem(null);
+    setText(format(parsed));
+    if (parsed !== value) onValueChange(parsed);
+    return true;
+  };
+  const choose = (time) => {
+    setProblem(null);
+    setText(format(time));
+    if (time !== value) onValueChange(time);
+  };
+  const onInputKeyDown = (event) => {
+    if (locked || event.nativeEvent.isComposing || event.keyCode === 229) return;
+    const { key, altKey } = event;
+    if (key === "ArrowDown" && altKey) {
+      event.preventDefault();
+      show();
+      return;
+    }
+    if (key === "ArrowUp" || key === "ArrowDown" || key === "PageUp" || key === "PageDown") {
+      event.preventDefault();
+      const base = parseTimeInput(text, locale) ?? current;
+      const input = event.currentTarget;
+      const caret = input.selectionStart ?? 0;
+      const ends = base && input.value === format(base) ? timePartEnds(base, shownLocale, shownHour12) : null;
+      const hourEnd = ends?.hour ?? /^\s*\d{1,2}/.exec(input.value)?.[0].length ?? 0;
+      const onHour = key === "PageUp" || key === "PageDown" || !!base && caret <= hourEnd;
+      const sign = key === "ArrowUp" || key === "PageUp" ? 1 : -1;
+      let next;
+      if (!base) next = stepTime(null, 0, min, max);
+      else if (onHour) next = stepTime(base, sign * 60, min, max);
+      else {
+        const minutes = timeToMinutes(base);
+        const snapped = sign > 0 ? Math.floor(minutes / step) * step + step : Math.ceil(minutes / step) * step - step;
+        next = stepTime(base, snapped - minutes, min, max);
+      }
+      choose(next);
+      requestAnimationFrame(() => {
+        const el = inputRef.current;
+        if (!el || el.ownerDocument.activeElement !== el) return;
+        const moved = timePartEnds(next, shownLocale, shownHour12);
+        const at = moved ? onHour ? moved.hour : moved.minute : el.value.length;
+        try {
+          el.setSelectionRange(at, at);
+        } catch {
+        }
+      });
+      return;
+    }
+    if (key === "Enter" && text.trim() !== (current ? format(current) : "")) {
+      event.preventDefault();
+      commit();
+    }
+  };
+  const pick = (time) => {
+    choose(time);
+    hide(false);
+    inputRef.current?.focus({ preventScroll: true });
+  };
+  const describedBy = [ariaDescribedBy, problem ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+  const isInvalid = !!invalid || !!problem || ariaInvalid === true || ariaInvalid === "true";
+  const example = format(min && isValidTimeKey(min) && min > "14:30" ? min : "14:30");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: anchorRef,
+      className: cx("uix-date-picker", "uix-time-picker", size === "sm" && "uix-date-picker--sm", className),
+      style,
+      onKeyDown: (event) => {
+        if (event.key !== "Escape" || !open) return;
+        event.stopPropagation();
+        event.preventDefault();
+        hide(false);
+        inputRef.current?.focus({ preventScroll: true });
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "uix-date-picker__control", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id,
+              type: "text",
+              autoComplete: "off",
+              spellCheck: false,
+              className: cx("uix-input", size === "sm" && "uix-input--sm", "uix-date-picker__input", "uix-time-picker__input"),
+              value: text,
+              placeholder: placeholder ?? example,
+              disabled,
+              readOnly,
+              required,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-describedby": describedBy,
+              "aria-invalid": isInvalid || void 0,
+              "aria-required": ariaRequired,
+              onChange: (event) => {
+                setText(event.target.value);
+                if (problem) setProblem(null);
+              },
+              onBlur: () => {
+                if (!locked) commit();
+              },
+              onKeyDown: onInputKeyDown
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "uix-date-picker__toggle",
+              disabled: locked,
+              "aria-label": current ? fillLabel(labels.openSelected, { time: format(current) }) : labels.open,
+              ...triggerProps,
+              children: /* @__PURE__ */ jsx(ClockIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current ?? "", disabled }),
+        problem && /* @__PURE__ */ jsx("span", { id: errorId, className: "uix-field__error uix-date-picker__error", role: "alert", children: problem === "format" ? fillLabel(labels.invalidTime, { example }) : problem === "outside" ? fillLabel(labels.outside, { min: format(min ?? ""), max: format(max ?? "") }) : problem === "early" ? fillLabel(labels.tooEarly, { min: format(min ?? "") }) : fillLabel(labels.tooLate, { max: format(max ?? "") }) }),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            id: popoverId,
+            anchor: anchorRef,
+            placement,
+            className: "uix-time-picker__popover",
+            role: "dialog",
+            "aria-label": labels.list,
+            capHeight: true,
+            closeWhenAnchorHidden: true,
+            children: open && /* @__PURE__ */ jsx(
+              TimeList,
+              {
+                ref: listRef,
+                id: listId,
+                value: current,
+                step,
+                min,
+                max,
+                label: labels.list,
+                format,
+                onPick: pick
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+TimePicker.displayName = "TimePicker";
+const TimeList = forwardRef(function TimeList2({ id, value, step, min, max, label, format, onPick }, ref) {
+  const slots = useMemo(() => timeSlots(step, min, max), [step, min, max]);
+  const nearest = () => {
+    if (!slots.length) return -1;
+    if (!value) return 0;
+    const exact = slots.indexOf(value);
+    if (exact >= 0) return exact;
+    const at = slots.findIndex((slot) => slot > value);
+    return at < 0 ? slots.length - 1 : Math.max(0, at - 1);
+  };
+  const [active, setActive] = useState(nearest);
+  const listRef = useRef(null);
+  useImperativeHandle(ref, () => listRef.current);
+  const optionId = (index) => `${id}-${index}`;
+  useEffect(() => {
+    listRef.current?.focus({ preventScroll: true });
+  }, []);
+  const placed = useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    const list = listRef.current;
+    const el = list?.ownerDocument.getElementById(optionId(active));
+    if (!list || !el) return;
+    const top = el.offsetTop;
+    const bottom = top + el.offsetHeight;
+    if (!placed.current) {
+      placed.current = true;
+      list.scrollTop = top - (list.clientHeight - el.offsetHeight) / 2;
+      return;
+    }
+    if (top < list.scrollTop) list.scrollTop = top;
+    else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+  }, [active]);
+  const perHour = Math.max(1, Math.round(60 / step));
+  const onKeyDown = (event) => {
+    const last = slots.length - 1;
+    const moves = { ArrowDown: 1, ArrowUp: -1, PageDown: perHour, PageUp: -perHour };
+    if (event.key in moves) {
+      event.preventDefault();
+      setActive((index) => Math.max(0, Math.min(last, index + moves[event.key])));
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      setActive(event.key === "Home" ? 0 : last);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const slot = slots[active];
+      if (slot) onPick(slot);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      id,
+      role: "listbox",
+      tabIndex: 0,
+      "aria-label": label,
+      className: "uix-listbox uix-time-picker__list",
+      "aria-activedescendant": active >= 0 ? optionId(active) : void 0,
+      onKeyDown,
+      children: slots.map((slot, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: optionId(index),
+          role: "option",
+          className: "uix-listbox__option",
+          "aria-selected": slot === value,
+          "data-active": index === active || void 0,
+          onPointerMove: () => {
+            if (index !== active) setActive(index);
+          },
+          onClick: () => onPick(slot),
+          children: /* @__PURE__ */ jsx("span", { className: "uix-listbox__label", children: format(slot) })
+        },
+        slot
+      ))
+    }
+  );
+});
+export {
+  DEFAULT_TIME_PICKER_LABELS,
+  TimePicker
+};

package/dist/components/Toast.d.ts

@@ -15,7 +15,7 @@ interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     onClose?: () => void;
     leaving?: boolean;
 }
-declare function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }: ToastProps): react.JSX.Element;
+declare function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }: ToastProps): react.JSX.Element;
 interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
     regionLabel?: string;

package/dist/components/Toast.js

@@ -1,11 +1,91 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
+import { prefersReducedMotion } from "../hooks/useReducedMotion.js";
+import { tokenMs } from "../motion.js";
+import { XIcon } from "../icons/components.js";
 import { toast as defaultToast } from "../toast-store.js";
 const ToasterContext = createContext(null);
-function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }) {
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const SWIPE_VELOCITY = 0.11;
+const SWIPE_SLOP = 6;
+const SWIPE_WINDOW = 100;
+function releaseVelocity(samples, x, t) {
+  const recent = samples.filter((s) => t - s.t <= SWIPE_WINDOW);
+  if (recent.length === 0) return 0;
+  return (x - recent[0].x) / Math.max(1, t - recent[0].t);
+}
+function useSwipeToDismiss(onClose, own) {
+  const drag = useRef(null);
+  const end = (e) => {
+    const d = drag.current;
+    drag.current = null;
+    if (!d?.active || !onClose) return;
+    const el = e.currentTarget;
+    el.removeAttribute("data-swiping");
+    const v = releaseVelocity(d.samples, e.clientX, e.timeStamp);
+    const fling = Math.abs(v) > SWIPE_VELOCITY && Math.sign(v) === Math.sign(d.dx);
+    if (e.type === "pointerup" && (fling || Math.abs(d.dx) > el.offsetWidth / 3)) {
+      if (!prefersReducedMotion()) el.style.translate = `${Math.sign(d.dx) * (el.offsetWidth + 32)}px 0`;
+      onClose();
+    } else {
+      el.style.translate = "";
+    }
+  };
+  return {
+    onPointerDown: (e) => {
+      own.onPointerDown?.(e);
+      if (!onClose || e.defaultPrevented || e.button !== 0) return;
+      if (e.target.closest('button, a, input, textarea, select, [role="button"]')) return;
+      drag.current = { id: e.pointerId, x0: e.clientX, y0: e.clientY, dx: 0, samples: [{ x: e.clientX, t: e.timeStamp }], active: false };
+    },
+    onPointerMove: (e) => {
+      own.onPointerMove?.(e);
+      const d = drag.current;
+      if (!d || d.id !== e.pointerId) return;
+      const dx = e.clientX - d.x0;
+      if (!d.active) {
+        if (Math.abs(dx) < SWIPE_SLOP) return;
+        if (Math.abs(e.clientY - d.y0) > Math.abs(dx)) {
+          drag.current = null;
+          return;
+        }
+        d.active = true;
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+        e.currentTarget.setAttribute("data-swiping", "");
+      }
+      d.samples = [...d.samples.filter((s) => e.timeStamp - s.t <= SWIPE_WINDOW), { x: e.clientX, t: e.timeStamp }];
+      d.dx = dx;
+      e.currentTarget.style.translate = `${dx}px 0`;
+    },
+    onPointerUp: (e) => {
+      own.onPointerUp?.(e);
+      end(e);
+    },
+    onPointerCancel: (e) => {
+      own.onPointerCancel?.(e);
+      end(e);
+    }
+  };
+}
+function Toast({
+  title,
+  message,
+  tone,
+  icon,
+  action,
+  onClose,
+  leaving,
+  dismissLabel: dismissLabelProp,
+  className,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  ...props
+}) {
   const uixLabels = useUixLabels();
   const dismissLabel = dismissLabelProp ?? uixLabels.toast?.dismiss ?? "Dismiss";
   const assertive = tone === "danger";
@@ -28,6 +108,7 @@ function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLa
     }
     onClose?.();
   };
+  const swipe = useSwipeToDismiss(onClose, { onPointerDown, onPointerMove, onPointerUp, onPointerCancel });
   const ownLiveRegion = assertive || !toaster;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -37,6 +118,7 @@ function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLa
       role: ownLiveRegion ? assertive ? "alert" : "status" : void 0,
       "aria-live": ownLiveRegion ? assertive ? "assertive" : "polite" : void 0,
       ...props,
+      ...swipe,
       children: [
         icon && /* @__PURE__ */ jsx("div", { className: "uix-toast__icon", "aria-hidden": "true", children: icon }),
         /* @__PURE__ */ jsxs("div", { className: "uix-toast__body", ref: bodyRef, children: [
@@ -44,7 +126,7 @@ function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLa
           message && /* @__PURE__ */ jsx("div", { className: "uix-toast__msg", children: message })
         ] }),
         action != null && /* @__PURE__ */ jsx("div", { className: "uix-toast__action-slot", children: action }),
-        onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-toast__close", onClick: handleClose, "aria-label": dismissLabel, children: "\xD7" })
+        onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-toast__close", onClick: handleClose, "aria-label": dismissLabel, children: /* @__PURE__ */ jsx(XIcon, {}) })
       ]
     }
   );
@@ -124,7 +206,7 @@ function useToastTimers(store, visible, paused) {
         timer = { version: record.version, remaining: record.duration, start: now };
         map.set(record.id, timer);
       }
-      if (paused) {
+      if (paused && record.pauseOnHover !== false) {
         if (timer.handle != null) {
           clearTimeout(timer.handle);
           timer.handle = void 0;
@@ -168,6 +250,28 @@ function Toaster({ children, regionLabel: regionLabelProp, store = defaultToast.
     return () => document.removeEventListener("visibilitychange", sync);
   }, []);
   useToastTimers(store, visible, hovered || focused || hidden);
+  const regionRef = useRef(null);
+  const tops = useRef(/* @__PURE__ */ new Map());
+  useIsomorphicLayoutEffect(() => {
+    const region = regionRef.current;
+    if (!region) return;
+    const base = region.getBoundingClientRect().top;
+    const next = /* @__PURE__ */ new Map();
+    const glide = !prefersReducedMotion();
+    for (const el of Array.from(region.querySelectorAll(":scope > [data-toast-id]"))) {
+      const id = el.dataset.toastId;
+      const top = base + el.offsetTop;
+      next.set(id, top);
+      const before = tops.current.get(id);
+      if (!glide || before === void 0 || Math.abs(before - top) < 1 || typeof el.animate !== "function") continue;
+      el.animate([{ transform: `translateY(${before - top}px)` }, { transform: "translateY(0)" }], {
+        duration: tokenMs("--uix-dur", 160, el),
+        easing: getComputedStyle(el).getPropertyValue("--uix-ease-out").trim() || "ease-out",
+        composite: "add"
+      });
+    }
+    tops.current = next;
+  });
   const handleKeyDown = (event) => {
     onKeyDown?.(event);
     if (event.defaultPrevented || event.key !== "Escape") return;
@@ -180,6 +284,7 @@ function Toaster({ children, regionLabel: regionLabelProp, store = defaultToast.
   return /* @__PURE__ */ jsx(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: regionRef,
       className: cx("uix-toaster", className),
       role: "region",
       "aria-label": regionLabel,

package/dist/components/Tooltip.d.ts

@@ -16,10 +16,11 @@ interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'>
     placement?: Placement;
     /**
      * The trigger's keyboard shortcut, in `KbdCombo` key names, e.g. `['Mod', 'K']` (HAR-2031):
-     * shown with `Kbd` after the text, and set as the trigger's `aria-keyshortcuts` for the
-     * viewer's platform. Default: the `shortcut` of a `Button` child, so a Tooltip around a Button
-     * with a shortcut shows one bubble with the label and the keys. The kit only shows it: the
-     * product binds the key.
+     * shown with `Kbd` after the text. Screen readers hear it once, in the trigger's description
+     * after the text ("Keyboard shortcuts, Shift+?"), the same rule as a `Button` with `shortcut`
+     * (HAR-2416). Default: the `shortcut` of a `Button` child, so a Tooltip around a Button with a
+     * shortcut shows one bubble with the label and the keys. The kit only shows it: the product
+     * binds the key.
      */
     shortcut?: KeyShortcut;
     children?: ReactNode;
@@ -31,6 +32,9 @@ interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'>
  * (flip/shift), shown on hover and keyboard focus, dismissed on blur or Escape
  * (document-level, per WCAG 1.4.13), and hoverable: the bubble stays open while
  * the pointer is over it (UIX-A11Y-1).
+ *
+ * While the bubble is open it takes the first Escape (HAR-2415), also on a combobox-style trigger
+ * whose list is open (a Select, a date field): one Escape closes the bubble, the next one the list.
  */
 declare function Tooltip({ label, content, placement, shortcut, className, children, ...props }: TooltipProps): react.JSX.Element;