gridsmith-ui 0.20.0 → 0.21.0

package/dist/index.js

@@ -1,11 +1,9 @@
-import { Button, useAppShell, REACT_VERSION_PROBLEM, ControlSizeContext, useOverlayMark, useDirtyGuard, OverlayMarkCtx, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-6MXHGH3D.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-6MXHGH3D.js';
+import { Button, useAppShell, REACT_VERSION_PROBLEM, ControlSizeContext, triggerType, useOverlayMark, useDirtyGuard, OverlayMarkScope, OverlayCloseCtx, DiscardConfirm, OVERLAY_ROOT_ATTR, Spinner, OverlayMarkCtx, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-GGVASDXT.js';
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-GGVASDXT.js';
 import { Skeleton, TITLE_TEXT } from './chunk-NCIZQYXQ.js';
 export { Skeleton } from './chunk-NCIZQYXQ.js';
-import { useReportedChange, useOptionalFormContext, FormChangeCtx, FormCtx } from './chunk-XVB55M3N.js';
-export { useFormContext } from './chunk-XVB55M3N.js';
-import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, focusAfterRemoval, rovingTabStop, useGridKeyboard, useNonModalDialog, usePressMarks, useReturnFocus, useCloseOnFocusOut } from './chunk-JXANCXK6.js';
-export { useGridKeyboard } from './chunk-JXANCXK6.js';
+import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, FormChangeCtx, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, useReportedChange, focusAfterRemoval, useOptionalFormContext, rovingTabStop, useGridKeyboard, FormCtx, useNonModalDialog, usePressMarks, useReturnFocus, useCloseOnFocusOut } from './chunk-RT7RYGC3.js';
+export { useFormContext, useGridKeyboard } from './chunk-RT7RYGC3.js';
 import { Link } from './chunk-EQDR57AM.js';
 export { CodeBlock, Divider, Link } from './chunk-EQDR57AM.js';
 import { Badge } from './chunk-XYDIBW3J.js';
@@ -84,6 +82,7 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
     /* @__PURE__ */ jsx(
       Slot,
       {
+        ...triggerType(trigger),
         ref: triggerRef,
         onClick: () => {
           setOpen(!open);
@@ -180,13 +179,14 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
         isMobile ? /* @__PURE__ */ jsx(
           DropdownMenu,
           {
-            trigger: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "more-vertical", size: 14 }), children: "Actions" }),
+            trigger: /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "more-vertical", size: 14 }), children: "Actions" }),
             items: dropdownItems,
             align: "start"
           }
         ) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2", children: actions.map((action, i) => /* @__PURE__ */ jsx(
           Button,
           {
+            type: "button",
             variant: "secondary",
             size: "sm",
             onClick: action.onClick,
@@ -208,6 +208,7 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
     }
   );
 }
+var UNCONTROLLED = /* @__PURE__ */ Symbol("uncontrolled");
 var valueOf = (e) => {
   const t = e.target;
   if (!t) return void 0;
@@ -226,7 +227,7 @@ var INPUT_TEXT = {
 function Input({ className, size: sizeProp, error = false, prefix, suffix, ...props }) {
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
-  const onChange = useReportedChange(props.onChange, props.value, valueOf);
+  const onChange = useReportedChange(props.onChange, props.value === void 0 ? UNCONTROLLED : props.value, valueOf);
   const borderColor = error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]";
   const hoverBorder = !error && !props.disabled && !props.readOnly ? "hover:border-[var(--ds-input-border-hover)]" : "";
   if (prefix || suffix) {
@@ -298,7 +299,7 @@ function Input({ className, size: sizeProp, error = false, prefix, suffix, ...pr
   );
 }
 function Textarea({ className, autoResize, maxRows, error = false, ref, ...props }) {
-  const onChange = useReportedChange(props.onChange, props.value, valueOf);
+  const onChange = useReportedChange(props.onChange, props.value === void 0 ? UNCONTROLLED : props.value, valueOf);
   const internalRef = useRef(null);
   const textareaRef = ref ?? internalRef;
   const resize = useCallback(() => {
@@ -1175,10 +1176,11 @@ var CHECKBOX_SIZES = {
   sm: { box: "h-[16px] w-[16px]", glyph: 10, label: "text-xs" },
   md: { box: "h-[18px] w-[18px]", glyph: 12, label: "text-sm" }
 };
-function Checkbox({ checked, onChange: onChangeProp, label, size = "md", disabled = false, indeterminate = false, className, ref }) {
+function Checkbox({ checked, onChange: onChangeProp, label, size = "md", disabled = false, indeterminate = false, className, ref, ...wiring }) {
   const onChange = useReportedChange(onChangeProp, checked);
   const internalRef = useRef(null);
   const dims = CHECKBOX_SIZES[size];
+  const control = useFieldControl(wiring);
   const mergedRef = useCallback(
     (node) => {
       internalRef.current = node;
@@ -1206,6 +1208,11 @@ function Checkbox({ checked, onChange: onChangeProp, label, size = "md", disable
           {
             ref: mergedRef,
             type: "checkbox",
+            id: control.id,
+            "aria-labelledby": wiring["aria-labelledby"],
+            "aria-describedby": control.describedBy,
+            "aria-invalid": control.invalid || void 0,
+            required: control.required || void 0,
             checked,
             disabled,
             onChange: (e) => onChange(e.target.checked),
@@ -1268,10 +1275,11 @@ function CheckboxGroupItem({ value, label, disabled, groupValue, onGroupChange }
     }
   );
 }
-function RadioGroup({ value, onChange: onChangeProp, options, orientation = "vertical", className, label }) {
+function RadioGroup({ value, onChange: onChangeProp, options, orientation = "vertical", className, label, ...wiring }) {
   const onChange = useReportedChange(onChangeProp, value);
   const groupRef = useRef(null);
   const groupId = useId();
+  const control = useFieldControl(wiring);
   const enabledOptions = options.filter((o) => !o.disabled);
   const tabStop = rovingTabStop(options, (o) => o.value === value, (o) => !!o.disabled);
   function handleKeyDown(e) {
@@ -1301,7 +1309,11 @@ function RadioGroup({ value, onChange: onChangeProp, options, orientation = "ver
       {
         ref: groupRef,
         role: "radiogroup",
-        "aria-labelledby": label ? groupId : void 0,
+        id: control.id,
+        "aria-labelledby": label ? groupId : control.labelId,
+        "aria-describedby": control.describedBy,
+        "aria-invalid": control.invalid || void 0,
+        "aria-required": control.required || void 0,
         className: cn(
           "flex",
           orientation === "vertical" ? "flex-col gap-ds-2" : "flex-row flex-wrap gap-ds-3"
@@ -1796,13 +1808,13 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
                 className: "flex items-center justify-between bg-[var(--ds-bg-muted)] rounded-t-[var(--ds-radius-md)]",
                 style: { padding: "var(--ds-space-2) var(--ds-space-3)" },
                 children: [
-                  /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: prevMonth, "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
+                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: prevMonth, "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
                   /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: [
                     MONTHS[month],
                     " ",
                     year
                   ] }),
-                  /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: nextMonth, "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
+                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: nextMonth, "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
                 ]
               }
             ),
@@ -1865,6 +1877,7 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
                   /* @__PURE__ */ jsx(
                     Button,
                     {
+                      type: "button",
                       variant: "ghost",
                       size: "sm",
                       onClick: () => {
@@ -1878,6 +1891,7 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
                   value && /* @__PURE__ */ jsx(
                     Button,
                     {
+                      type: "button",
                       variant: "ghost",
                       size: "sm",
                       onClick: () => choose(null),
@@ -2264,7 +2278,7 @@ function DateRangePicker({
           ),
           style: { top: pos.top, left: pos.left },
           children: [
-            presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-ds-0.5 p-ds-2 border-r-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] min-w-[140px]", children: presets.map((p) => /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "justify-start", onClick: () => {
+            presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-ds-0.5 p-ds-2 border-r-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] min-w-[140px]", children: presets.map((p) => /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "justify-start", onClick: () => {
               const r = p.range();
               returnFocus();
               onChange(r);
@@ -2273,7 +2287,7 @@ function DateRangePicker({
             }, children: p.label }, p.label)) }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between bg-[var(--ds-bg-muted)] rounded-tr-[var(--ds-radius-md)] px-ds-3 py-ds-2", children: [
-                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => pageMonths(-1), "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
+                /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => pageMonths(-1), "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
                 /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: [
                   MONTHS2[months[0].getMonth()],
                   " ",
@@ -2283,7 +2297,7 @@ function DateRangePicker({
                   " ",
                   months[1].getFullYear()
                 ] }),
-                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => pageMonths(1), "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
+                /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => pageMonths(1), "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
               ] }),
               /* @__PURE__ */ jsx("div", { ref: gridRef, onKeyDown: grid.onKeyDown, className: "flex gap-ds-4 px-ds-3 py-ds-2", onMouseLeave: () => setHover(null), children: months.map((m) => /* @__PURE__ */ jsxs("div", { role: "grid", "aria-label": `${MONTHS2[m.getMonth()]} ${m.getFullYear()}`, className: "w-[224px] flex flex-col gap-ds-0.5", children: [
                 /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5 mb-ds-0.5", children: dayNames.map((d) => /* @__PURE__ */ jsx("div", { role: "columnheader", className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, d)) }),
@@ -2324,7 +2338,7 @@ function DateRangePicker({
               ] }, `${m.getFullYear()}-${m.getMonth()}`)) }),
               /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center bg-[var(--ds-bg-muted)] border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-br-[var(--ds-radius-md)] px-ds-3 py-ds-2", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)]", children: value.start && !value.end ? "Now pick an end date" : summary ?? "Pick a start date" }),
-                (value.start || value.end) && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                (value.start || value.end) && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
                   onChange({ start: null, end: null });
                   setHover(null);
                 }, children: "Clear" })
@@ -2474,6 +2488,21 @@ function Progress({ value, max = 100, variant = "default", size = "md", indeterm
     ] })
   ] });
 }
+
+// ../../showcase/src/lib/dev-warn.ts
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(component, message) {
+  let dev = false;
+  try {
+    dev = process.env.NODE_ENV !== "production";
+  } catch {
+    dev = false;
+  }
+  const text = `${component}: ${message}`;
+  if (!dev || warned.has(text)) return;
+  warned.add(text);
+  console.warn(text);
+}
 function TruncFileName({ children, className }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const el = /* @__PURE__ */ jsx("p", { ref, className: cn("truncate", className), children });
@@ -2488,6 +2517,8 @@ function formatSize(bytes) {
 }
 var running = (item) => item.status === "queued" || item.status === "uploading";
 var failureOf = (err) => err instanceof Error && err.message ? err.message : "The upload didn't work.";
+var percentOf = (value) => typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0;
+var STILL_UPLOADING = "Wait for your files to finish uploading";
 function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accept, multiple = true, maxSize, className, error = false, label, id }) {
   const controlled = files !== void 0;
   const [own, setOwn] = useState([]);
@@ -2508,8 +2539,6 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
   const rejectedId = `${ownId}-rejected`;
   const showLabel = label != null && !field;
   const constraints = fileConstraints(accept, maxSize, multiple);
-  const invalid = error || rejected != null;
-  const describedBy = [constraints ? constraintsId : null, field?.describedBy, rejected ? rejectedId : null].filter(Boolean).join(" ") || void 0;
   const patch = (itemId, change) => setOwn((prev) => prev.map((i) => i.id === itemId ? { ...i, ...change } : i));
   const stop = (itemId) => {
     controllers.current.get(itemId)?.abort();
@@ -2531,7 +2560,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
       attempt = Promise.resolve(run(item.file, {
         signal: controller.signal,
         onProgress: (percent) => {
-          if (!controller.signal.aborted) patch(item.id, { progress: Math.max(0, Math.min(100, percent)) });
+          if (!controller.signal.aborted) patch(item.id, { progress: percentOf(percent) });
         }
       }));
     } catch (err) {
@@ -2539,6 +2568,11 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
     }
     attempt.then(() => settle({ status: "done", progress: 100 }), (err) => settle({ status: "error", error: failureOf(err) }));
   };
+  const [hadUpload, setHadUpload] = useState(!!upload);
+  if (!controlled && !!upload !== hadUpload) {
+    setHadUpload(!!upload);
+    setOwn((prev) => prev.map((i) => upload ? i.status === "added" && i.file ? { ...i, status: "queued" } : i : i.status === "queued" ? { ...i, status: "error", error: "The upload couldn't start." } : i));
+  }
   useEffect(() => {
     if (controlled || !upload) return;
     let active = own.filter((i) => i.status === "uploading" && controllers.current.has(i.id)).length;
@@ -2564,31 +2598,67 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
   useEffect(() => {
     if (!overlayOpen && !controlled) stopAll();
   }, [overlayOpen, controlled, stopAll]);
-  const busy = shown.some(running);
+  const busy = shown.some((i) => i.status === "uploading" || i.status === "queued" && (controlled || !!upload));
   useEffect(() => {
     if (!busy || !overlayMark) return;
     return overlayMark.hold();
   }, [busy, overlayMark]);
-  const [heard, setHeard] = useState("");
-  const [seen, setSeen] = useState(() => new Map(shown.map((i) => [i.id, i.status])));
-  if (shown.length !== seen.size || shown.some((i) => seen.get(i.id) !== i.status)) {
+  const form = useOptionalFormContext();
+  const waitingKey = `${inputId}-uploads`;
+  const waitingId = `${ownId}-waiting`;
+  const busyRef = useLatest(busy);
+  const registerCheck = form?.register;
+  useEffect(() => registerCheck?.(waitingKey, () => busyRef.current ? STILL_UPLOADING : void 0), [registerCheck, waitingKey, busyRef]);
+  const waiting = form?.errors[waitingKey];
+  const clearWaiting = form?.setError;
+  useEffect(() => {
+    if (!busy && waiting) clearWaiting?.(waitingKey, void 0);
+  }, [busy, waiting, clearWaiting, waitingKey]);
+  useEffect(() => {
+    const owner = inputRef.current?.form;
+    if (!owner) return;
+    const clear = () => setRejected(null);
+    owner.addEventListener("submit", clear);
+    return () => owner.removeEventListener("submit", clear);
+  }, []);
+  const invalid = error || rejected != null || !!waiting;
+  const describedBy = [constraints ? constraintsId : null, field?.describedBy, rejected ? rejectedId : null, waiting ? waitingId : null].filter(Boolean).join(" ") || void 0;
+  useEffect(() => {
+    if (controlled && !onFiles) warnOnce("FileUpload", "`files` without `onFiles`: the page's list never gets the files the user picks. Add them in onFiles.");
+    if (controlled && upload) warnOnce("FileUpload", "pass `files` or `upload`, not both: with `files` the page runs the uploads and FileUpload shows them.");
+    if (!onRemove) warnOnce("FileUpload", "no `onRemove`: Remove shows only on a failed file, since the page would still have a file the user removed.");
+    const ids = shown.map((i) => i.id);
+    if (new Set(ids).size !== ids.length) warnOnce("FileUpload", "two files in the list share an id: give each file its own (the same file picked twice is two files).");
+  }, [controlled, onFiles, upload, onRemove, shown]);
+  const [heard, setHeard] = useState({ text: "", n: 0 });
+  const signature2 = shown.map((i) => `${i.id}\0${i.status}`).join("
");
+  const [seen, setSeen] = useState(() => ({ signature: signature2, statuses: new Map(shown.map((i) => [i.id, i.status])) }));
+  if (signature2 !== seen.signature) {
     const said = [];
     for (const item of shown) {
-      const before = seen.get(item.id);
+      const before = seen.statuses.get(item.id);
       if (!before || before === item.status) continue;
       if (item.status === "done") said.push(`${item.name} uploaded`);
       else if (item.status === "error") said.push(`${item.name} didn't upload: ${item.error ?? "the upload failed"}`);
     }
-    setSeen(new Map(shown.map((i) => [i.id, i.status])));
-    if (said.length) setHeard(said.join(". "));
+    setSeen({ signature: signature2, statuses: new Map(shown.map((i) => [i.id, i.status])) });
+    if (said.length) setHeard((h) => ({ text: said.join(". "), n: h.n + 1 }));
   }
   const pendingFocus = useRef(null);
+  const lastAction = useRef(null);
   useEffect(() => {
-    const index = pendingFocus.current;
-    if (index === null) return;
-    pendingFocus.current = null;
-    const rows = Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).map((row) => row.querySelector("button")).filter((b) => !!b);
-    focusAfterRemoval(rows, index, inputRef.current);
+    const gone = pendingFocus.current;
+    if (gone && !shown.some((i) => i.id === gone.id)) {
+      pendingFocus.current = null;
+      const rows = Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).map((row2) => row2.querySelector("button")).filter((b) => !!b);
+      focusAfterRemoval(rows, gone.index, inputRef.current);
+      return;
+    }
+    const last = lastAction.current;
+    const active = document.activeElement;
+    if (!last || last.el.isConnected || active && active !== document.body) return;
+    const row = Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).find((li) => li.dataset.uploadId === last.id);
+    row?.querySelector("button")?.focus();
   }, [shown]);
   const addFiles = useCallback(
     (fileList) => {
@@ -2615,7 +2685,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
   );
   const indexOf = (item) => shown.findIndex((i) => i.id === item.id);
   const cancel = (item) => {
-    pendingFocus.current = indexOf(item);
+    pendingFocus.current = { id: item.id, index: indexOf(item) };
     if (!controlled) {
       stop(item.id);
       setOwn((prev) => prev.filter((i) => i.id !== item.id));
@@ -2627,7 +2697,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
     onRetry?.(item);
   };
   const remove = (item) => {
-    pendingFocus.current = indexOf(item);
+    pendingFocus.current = { id: item.id, index: indexOf(item) };
     reportChange?.();
     if (!controlled) {
       stop(item.id);
@@ -2637,7 +2707,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
   };
   const canCancel = !controlled || !!onCancel;
   const canRetry = !controlled || !!onRetry;
-  const canRemove = !controlled || !!onRemove;
+  const canRemove = (item) => !!onRemove || !controlled && item.status === "error";
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-ds-3", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-ds-1.5", children: [
       showLabel && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: label }),
@@ -2691,14 +2761,20 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
           ]
         }
       ),
-      rejected && /* @__PURE__ */ jsx(InlineFieldError, { id: rejectedId, message: rejected, className: "mt-0" })
+      rejected && /* @__PURE__ */ jsx(InlineFieldError, { id: rejectedId, message: rejected, className: "mt-0" }),
+      waiting && /* @__PURE__ */ jsx(InlineFieldError, { id: waitingId, message: waiting, className: "mt-0" })
     ] }),
     shown.length > 0 && /* @__PURE__ */ jsx("ul", { ref: listRef, className: "space-y-ds-2", children: shown.map((item) => {
-      const words = item.status === "queued" ? "Waiting" : item.status === "uploading" ? `${Math.round(item.progress ?? 0)}%` : item.status === "done" ? "Uploaded" : item.status === "error" ? "Failed" : null;
+      const progress = percentOf(item.progress);
+      const words = item.status === "queued" ? "Waiting" : item.status === "uploading" ? `${Math.round(progress)}%` : item.status === "done" ? "Uploaded" : item.status === "error" ? "Failed" : null;
       return /* @__PURE__ */ jsxs(
         "li",
         {
+          "data-upload-id": item.id,
           "data-upload-status": item.status,
+          onFocus: (e) => {
+            if (e.target instanceof HTMLButtonElement) lastAction.current = { id: item.id, el: e.target };
+          },
           className: cn(
             "flex items-center gap-ds-3 text-sm",
             "border-[length:var(--ds-border-width)]",
@@ -2711,20 +2787,20 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
             /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx(TruncFileName, { className: "text-[var(--ds-text-primary)]", children: item.name }),
               (item.size != null || words) && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)]", children: [item.size != null ? formatSize(item.size) : null, words].filter(Boolean).join(" \xB7 ") }),
-              item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: item.progress ?? 0, size: "sm", label: `Uploading ${item.name}`, className: "mt-ds-1" }),
+              item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: progress, size: "sm", label: `Uploading ${item.name}`, className: "mt-ds-1" }),
               item.status === "error" && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-xs text-[var(--ds-status-error)]", children: item.error ?? "The upload didn't work." })
             ] }),
             item.status === "done" && /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, className: "text-[var(--ds-status-success)] shrink-0", "aria-hidden": "true" }),
             running(item) && canCancel && // the visible word starts the name, which says which file (WCAG 2.5.3)
-            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => cancel(item), "aria-label": `Cancel ${item.name}`, children: "Cancel" }),
-            item.status === "error" && canRetry && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => retry(item), "aria-label": `Retry ${item.name}`, children: "Retry" }),
-            !running(item) && canRemove && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => remove(item), "aria-label": `Remove ${item.name}`, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => cancel(item), "aria-label": `Cancel ${item.name}`, children: "Cancel" }),
+            item.status === "error" && canRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => retry(item), "aria-label": `Retry ${item.name}`, children: "Retry" }),
+            !running(item) && canRemove(item) && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => remove(item), "aria-label": `Remove ${item.name}`, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
           ]
         },
         item.id
       );
     }) }),
-    /* @__PURE__ */ jsx("p", { role: "status", className: "sr-only", children: heard })
+    /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: /* @__PURE__ */ jsx("span", { children: heard.text }, heard.n) })
   ] });
 }
 function SliderRange({
@@ -3418,7 +3494,7 @@ function NumberInput({
     setFocused(false);
     const parsed = parseFloat(draft);
     if (!isNaN(parsed) && isFinite(parsed)) {
-      const committed = commitValue(parsed);
+      const committed = commitValue(parsed, draft === String(value));
       setDraft(String(committed));
     } else {
       const fallback = isFinite(min) ? min : 0;
@@ -3949,11 +4025,13 @@ function Rating({
   readOnly = false,
   size = "md",
   className,
-  error = false
+  error = false,
+  ...wiring
 }) {
   const onChange = useReportedChange(onChangeProp, value);
   const [hoverValue, setHoverValue] = useState(null);
   const displayValue = hoverValue ?? value;
+  const control = useFieldControl({ ...wiring, error: error || void 0 });
   const handleClick = useCallback(
     (starIdx, isLeftHalf) => {
       if (readOnly || !onChangeProp) return;
@@ -4020,8 +4098,12 @@ function Rating({
     "div",
     {
       role: readOnly ? "img" : "radiogroup",
-      "aria-label": `Rating: ${value} out of ${max}`,
-      "aria-invalid": error || void 0,
+      id: control.id,
+      "aria-label": readOnly || !control.labelId ? `Rating: ${value} out of ${max}` : void 0,
+      "aria-labelledby": readOnly ? void 0 : control.labelId,
+      "aria-describedby": control.describedBy,
+      "aria-invalid": readOnly ? void 0 : control.invalid || void 0,
+      "aria-required": readOnly ? void 0 : control.required || void 0,
       onKeyDown: readOnly ? void 0 : handleKeyDown,
       className: cn(
         "inline-flex items-center gap-ds-0.5",
@@ -4431,11 +4513,6 @@ var Alert = forwardRef(function Alert2({
     }
   );
 });
-function controlsOf(form) {
-  if (!form) return "";
-  const controls = form.querySelectorAll("input, select, textarea, [role='combobox'], [role='radiogroup'], [role='checkbox'], [role='switch'], [role='slider'], [role='spinbutton'], [contenteditable='true']");
-  return Array.from(controls).map((el) => el.id || el.getAttribute("name") || el.getAttribute("role") || el.tagName).join("|");
-}
 var isThenable = (value) => !!value && typeof value.then === "function";
 function stampFormId(node, formId) {
   return Children.map(node, (child) => {
@@ -4494,29 +4571,18 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
   const pendingFocus = useRef(false);
   const onSubmitRef = useLatest(onSubmit);
   const overlayMark = useContext(OverlayMarkCtx);
-  const reportChange = overlayMark ? overlayMark.report : null;
-  const [savedCheck, setSavedCheck] = useState(null);
-  useEffect(() => {
-    if (!savedCheck) return;
-    const form = formRef.current;
-    if (form && !form.querySelector("[aria-invalid='true']") && controlsOf(form) === savedCheck.controls) overlayMark?.clear();
-  }, [savedCheck, overlayMark]);
+  const reportChange = useMemo(() => overlayMark ? () => overlayMark.report(formId) : null, [overlayMark, formId]);
+  useEffect(() => overlayMark?.attach(formId), [overlayMark, formId]);
   useEffect(() => {
     if (pendingSubmit.current && submitted) {
       pendingSubmit.current = false;
-      const form = formRef.current;
-      const passed = Object.keys(errorsRef.current).length === 0 && !form?.querySelector("[aria-invalid='true']");
-      const controls = controlsOf(form);
+      const answer = overlayMark?.submit(formId, { element: () => formRef.current, failing: () => Object.keys(errorsRef.current).length > 0 });
       const result = onSubmitRef.current(errorsRef.current);
-      if (!passed || !overlayMark) return;
-      if (isThenable(result)) {
-        result.then(() => overlayMark.clear(), () => {
-        });
-      } else {
-        setSavedCheck({ controls });
-      }
+      if (!answer) return;
+      if (isThenable(result)) void result.then(() => answer.settle("resolved"));
+      else answer.settle("returned");
     }
-  }, [submitted, submitCount, errors, errorsRef, onSubmitRef, overlayMark]);
+  }, [submitted, submitCount, errors, errorsRef, onSubmitRef, overlayMark, formId]);
   const submittedRef = useLatest(submitted);
   const errorSummaryRef = useLatest(errorSummary);
   const summaryRef = useRef(null);
@@ -4601,7 +4667,9 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
   }, []);
   const handleSubmit = useCallback(
     (e) => {
+      if (e.target !== e.currentTarget) return;
       e.preventDefault();
+      e.stopPropagation();
       if (checks.current.size > 0) {
         const found = /* @__PURE__ */ new Map();
         for (const [field, check] of checks.current) found.set(field, check());
@@ -4645,16 +4713,26 @@ var FOCUSABLE2 = "input:not([disabled]):not([type='hidden']), select:not([disabl
 function AddAnother({ items, getId, itemName, columns, renderRow, onAdd, onRemove, addLabel = "Add another", label, minItems = 1, maxItems, className }) {
   const listRef = useRef(null);
   const addRef = useRef(null);
+  const reportChange = useContext(FormChangeCtx);
+  const getIdRef = useLatest(getId);
   const pending = useRef(null);
-  const firstFields = () => Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).map((row) => row.querySelector(FOCUSABLE2)).filter((el) => !!el);
   useEffect(() => {
     const next = pending.current;
     if (!next) return;
+    const rows = () => Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []);
+    const firstFields = () => rows().map((row) => row.querySelector(FOCUSABLE2)).filter((el) => !!el);
+    const ids = items.map((item) => getIdRef.current(item));
+    if (next.kind === "remove") {
+      if (ids.includes(next.id)) return;
+      pending.current = null;
+      focusAfterRemoval(firstFields(), next.index, addRef.current);
+      return;
+    }
+    const added = ids.findIndex((id) => !next.before.has(id));
+    if (added === -1) return;
     pending.current = null;
-    const fields = firstFields();
-    if (next.kind === "add") fields[fields.length - 1]?.focus();
-    else focusAfterRemoval(fields, next.index, addRef.current);
-  }, [items]);
+    rows()[added]?.querySelector(FOCUSABLE2)?.focus();
+  }, [items, getIdRef]);
   const canRemove = items.length > minItems;
   const canAdd = maxItems === void 0 || items.length < maxItems;
   const grid = { "--gs-add-another-cols": `repeat(${columns.length}, minmax(0, 1fr)) max-content` };
@@ -4669,13 +4747,15 @@ function AddAnother({ items, getId, itemName, columns, renderRow, onAdd, onRemov
         /* @__PURE__ */ jsx(AddAnotherRowCtx.Provider, { value: true, children: renderRow(item, index, (column) => `${column}, ${itemName(index)}`) }),
         canRemove && // the visible "Remove" starts its name, which says whose row it removes (WCAG 2.5.3 label in name)
         /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `Remove ${itemName(index)}`, className: "justify-self-start @min-[30rem]:mt-[calc((var(--ds-control-height-md)-var(--ds-control-height-sm))/2)]", onClick: () => {
-          pending.current = { kind: "remove", index };
+          pending.current = { kind: "remove", id, index };
+          reportChange?.();
           onRemove(id);
         }, children: "Remove" })
       ] }, id);
     }) }),
     canAdd && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { ref: addRef, type: "button", variant: "secondary", onClick: () => {
-      pending.current = { kind: "add" };
+      pending.current = { kind: "add", before: new Set(items.map(getId)) };
+      reportChange?.();
       onAdd();
     }, children: addLabel }) })
   ] });
@@ -4695,7 +4775,7 @@ function TransferList({
   className,
   ref
 }) {
-  const onChange = useReportedChange(onChangeProp, selected);
+  const onChange = useReportedChange(onChangeProp, selected, (_available, chosen) => chosen);
   const [checkedAvailable, setCheckedAvailable] = useState(/* @__PURE__ */ new Set());
   const [checkedSelected, setCheckedSelected] = useState(/* @__PURE__ */ new Set());
   const [searchLeft, setSearchLeft] = useState("");
@@ -8433,66 +8513,70 @@ function TableToolbar({
   const paged = total !== void 0 && !!pagination && pagination.pageSize > 0 && total > pagination.pageSize;
   const countText = total === void 0 ? null : grows ? shown < total ? `Showing ${shown} of ${total} ${noun(total)}` : resultCount !== void 0 ? `${total} ${noun(total)}` : null : paged ? `Showing ${Math.min((pagination.page - 1) * pagination.pageSize + 1, total)}\u2013${Math.min(pagination.page * pagination.pageSize, total)} of ${total} ${noun(total)}` : resultCount !== void 0 ? `${total} ${noun(total)}` : null;
   if (!hasControls && countText === null && !hasChips) return null;
-  return /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-3 min-w-0 mb-ds-3 last:mb-0", className), "data-table-toolbar": "", children: [
-    hasControls && /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "flex items-center gap-ds-2 flex-wrap", children: [
-      search && /* @__PURE__ */ jsx(
-        Input,
-        {
-          "aria-label": search.label,
-          placeholder: search.placeholder ?? search.label,
-          value: search.value,
-          size,
-          onChange: (e) => search.onChange(e.target.value),
-          className: cn("flex-1 min-w-[160px]", !searchFills && "max-w-[280px]")
-        }
-      ),
-      primaryFilter && (compact ? /* @__PURE__ */ jsx(
-        Dropdown,
-        {
-          "aria-label": primaryFilter.label,
-          options: primaryFilter.options.map((o) => ({ id: o.value, label: o.label })),
-          value: primaryFilter.value,
-          onChange: (v) => primaryFilter.onChange(v),
-          size,
-          className: "w-[150px]"
-        }
-      ) : /* @__PURE__ */ jsx(
-        SegmentedControl,
-        {
-          "aria-label": primaryFilter.label,
-          options: primaryFilter.options,
-          value: primaryFilter.value,
-          size,
-          onChange: primaryFilter.onChange
-        }
-      )),
-      (filters || actions) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-ds-2 justify-end", inPane ? "flex-none" : "flex-1"), children: [
-        filters && /* @__PURE__ */ jsxs(
-          Button,
+  return (
+    // a list's search and filters are how it's viewed, not a form's data: they never mark an overlay's form (0.21.0)
+    /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-3 min-w-0 mb-ds-3 last:mb-0", className), "data-table-toolbar": "", children: [
+      hasControls && /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "flex items-center gap-ds-2 flex-wrap", children: [
+        search && /* @__PURE__ */ jsx(
+          Input,
           {
-            variant: open ? "secondary" : "outline",
+            "aria-label": search.label,
+            placeholder: search.placeholder ?? search.label,
+            value: search.value,
             size,
-            iconLeft: /* @__PURE__ */ jsx(Icon, { name: "filter", size: iconSize }),
-            onClick: () => setOpen(!open),
-            "aria-expanded": open,
-            "aria-controls": filterRowId,
-            className: "mr-auto",
-            children: [
-              "Filters",
-              count > 0 && !open && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "xs", className: "ml-ds-1", children: count })
-            ]
+            onChange: (e) => search.onChange(e.target.value),
+            className: cn("flex-1 min-w-[160px]", !searchFills && "max-w-[280px]")
           }
         ),
-        actions
+        primaryFilter && (compact ? /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            "aria-label": primaryFilter.label,
+            options: primaryFilter.options.map((o) => ({ id: o.value, label: o.label })),
+            value: primaryFilter.value,
+            onChange: (v) => primaryFilter.onChange(v),
+            size,
+            className: "w-[150px]"
+          }
+        ) : /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            "aria-label": primaryFilter.label,
+            options: primaryFilter.options,
+            value: primaryFilter.value,
+            size,
+            onChange: primaryFilter.onChange
+          }
+        )),
+        (filters || actions) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-ds-2 justify-end", inPane ? "flex-none" : "flex-1"), children: [
+          filters && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: open ? "secondary" : "outline",
+              size,
+              iconLeft: /* @__PURE__ */ jsx(Icon, { name: "filter", size: iconSize }),
+              onClick: () => setOpen(!open),
+              "aria-expanded": open,
+              "aria-controls": filterRowId,
+              className: "mr-auto",
+              children: [
+                "Filters",
+                count > 0 && !open && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "xs", className: "ml-ds-1", children: count })
+              ]
+            }
+          ),
+          actions
+        ] })
+      ] }),
+      filters && open && /* @__PURE__ */ jsx("div", { id: filterRowId, className: "flex items-center gap-ds-3 flex-wrap", children: filters }),
+      (countText !== null || hasChips) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-wrap", children: [
+        countText !== null && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)]", "aria-live": "polite", "data-result-count": "", children: countText }),
+        activeFilters?.map((f) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "subtle", onRemove: f.onRemove, children: f.label }, f.id)),
+        hasChips && onClearAll && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })
       ] })
-    ] }),
-    filters && open && /* @__PURE__ */ jsx("div", { id: filterRowId, className: "flex items-center gap-ds-3 flex-wrap", children: filters }),
-    (countText !== null || hasChips) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-wrap", children: [
-      countText !== null && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)]", "aria-live": "polite", "data-result-count": "", children: countText }),
-      activeFilters?.map((f) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "subtle", onRemove: f.onRemove, children: f.label }, f.id)),
-      hasChips && onClearAll && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })
-    ] })
-  ] }) });
+    ] }) }) })
+  );
 }
 var ICON_TEXT_OFFSET = "calc((2rem - 1.25rem) / 2)";
 function Marker({ item, vertical }) {
@@ -8657,6 +8741,8 @@ function CollapsibleTrigger({ children, className }) {
   if (isValidElement(children)) {
     const child = children;
     return cloneElement(child, {
+      // a Button trigger in a form toggles; it never submits the form (0.21.0)
+      ...triggerType(child),
       "aria-expanded": isOpen,
       className: cn(child.props.className, className),
       onClick: (e) => {
@@ -9206,7 +9292,7 @@ function ActionsRow({ message, onAction }) {
       ),
       children: message.actions.map((a) => {
         const { id, label, icon } = resolveAction(a);
-        return /* @__PURE__ */ jsx(Tooltip, { content: label, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": label, onClick: () => run(id), children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 14 }) }) }, id);
+        return /* @__PURE__ */ jsx(Tooltip, { content: label, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": label, onClick: () => run(id), children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 14 }) }) }, id);
       })
     }
   );
@@ -9343,12 +9429,13 @@ function ChatInputBar({ onSend, busy, onStop, onAttach, onVoice, placeholder })
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-ds-2 pb-ds-1.5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-0.5", children: [
-            onAttach && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Add attachment", onClick: onAttach, className: compact, children: /* @__PURE__ */ jsx(Icon, { name: "paperclip", size: glyph }) }),
-            onVoice && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Voice message", onClick: onVoice, className: compact, children: /* @__PURE__ */ jsx(Icon, { name: "mic", size: glyph }) })
+            onAttach && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Add attachment", onClick: onAttach, className: compact, children: /* @__PURE__ */ jsx(Icon, { name: "paperclip", size: glyph }) }),
+            onVoice && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Voice message", onClick: onVoice, className: compact, children: /* @__PURE__ */ jsx(Icon, { name: "mic", size: glyph }) })
           ] }),
-          busy ? /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "icon-sm", "aria-label": "Stop generating", onClick: onStop, className: compact, children: /* @__PURE__ */ jsx(Icon, { name: "square", size: glyph }) }) : /* @__PURE__ */ jsx(
+          busy ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "tertiary", size: "icon-sm", "aria-label": "Stop generating", onClick: onStop, className: compact, children: /* @__PURE__ */ jsx(Icon, { name: "square", size: glyph }) }) : /* @__PURE__ */ jsx(
             Button,
             {
+              type: "button",
               variant: text.trim() ? "default" : "ghost",
               size: "icon-sm",
               "aria-label": "Send message",
@@ -9462,7 +9549,7 @@ function ChatMessageList({
         }),
         typingUser && /* @__PURE__ */ jsx(TypingIndicator, { name: typingUser })
       ] }) }),
-      showJump && !empty && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-ds-2 flex justify-center", children: /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "xs", className: "pointer-events-auto rounded-[var(--ds-radius-full)]", onClick: scrollToBottom, children: [
+      showJump && !empty && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-ds-2 flex justify-center", children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "secondary", size: "xs", className: "pointer-events-auto rounded-[var(--ds-radius-full)]", onClick: scrollToBottom, children: [
         /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 14 }),
         "Jump to latest"
       ] }) })
@@ -9517,10 +9604,11 @@ function ChatPanel({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-ds-1", children: [
             actions,
-            onNewConversation && /* @__PURE__ */ jsx(Tooltip, { content: "New conversation", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "New conversation", onClick: onNewConversation, children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 16 }) }) }),
+            onNewConversation && /* @__PURE__ */ jsx(Tooltip, { content: "New conversation", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "New conversation", onClick: onNewConversation, children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 16 }) }) }),
             onExpandedChange && /* @__PURE__ */ jsx(Tooltip, { content: expanded ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
               Button,
               {
+                type: "button",
                 variant: "ghost",
                 size: "icon-sm",
                 "aria-label": expanded ? "Collapse" : "Expand",
@@ -9529,7 +9617,7 @@ function ChatPanel({
                 children: /* @__PURE__ */ jsx(Icon, { name: expanded ? "minimize-2" : "maximize-2", size: 16 })
               }
             ) }),
-            /* @__PURE__ */ jsx(Tooltip, { content: "Close", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Close", onClick: onClose, ...{ [OVERLAY_CLOSE_ATTR]: "" }, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }) }) })
+            /* @__PURE__ */ jsx(Tooltip, { content: "Close", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Close", onClick: onClose, ...{ [OVERLAY_CLOSE_ATTR]: "" }, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }) }) })
           ] })
         ]
       }
@@ -10766,15 +10854,15 @@ var TimeViewport = forwardRef(function TimeViewport2({
   const hasHeader = headerNode != null || labelHeader != null;
   const bar = toolbar === false ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 flex-wrap items-center gap-ds-1 px-ds-2 py-ds-1.5 border-b-[length:var(--ds-border-width)]", border), children: [
     onZoomChange && levels.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom out", "aria-disabled": !canZoomOut || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(1), children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: 14 }) }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Zoom out", "aria-disabled": !canZoomOut || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(1), children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: 14 }) }),
       /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "min-w-[4.5rem] text-center text-xs text-[var(--ds-text-secondary)]", children: ZOOM_NAMES[scale.zoom] }),
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom in", "aria-disabled": !canZoomIn || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(-1), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14 }) })
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Zoom in", "aria-disabled": !canZoomIn || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(-1), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14 }) })
     ] }),
-    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Previous period", onClick: () => api.page(-1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }) }),
-    /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", disabled: todayAtX === null, onClick: () => {
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Previous period", onClick: () => api.page(-1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }) }),
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", disabled: todayAtX === null, onClick: () => {
       if (todayAtX !== null) setLeft(todayAtX - visibleWidth / 2);
     }, children: "Today" }),
-    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next period", onClick: () => api.page(1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) }),
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Next period", onClick: () => api.page(1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) }),
     toolbar
   ] });
   return (
@@ -11031,16 +11119,16 @@ var SELECTED = "outline-solid outline-2 outline-offset-2 outline-[var(--ds-text-
 var UNDATED_INSET = 16;
 var NO_GROUPS = [];
 var NO_STATUSES = {};
-var warned = /* @__PURE__ */ new Set();
-function warnOnce(message) {
+var warned2 = /* @__PURE__ */ new Set();
+function warnOnce2(message) {
   let dev = false;
   try {
     dev = process.env.NODE_ENV !== "production";
   } catch {
     dev = false;
   }
-  if (!dev || warned.has(message)) return;
-  warned.add(message);
+  if (!dev || warned2.has(message)) return;
+  warned2.add(message);
   console.warn(`Gantt: ${message}`);
 }
 function GanttArrows({ arrows, width, height }) {
@@ -11122,7 +11210,7 @@ function Gantt({
   const selected = isControlled ? selectedId ?? null : selectedState;
   useEffect(() => {
     if (overridden !== null) {
-      warnOnce("selectedId was given a value after the Gantt had kept a selection of its own. To control the selection, pass selectedId from the first render (null for none); to let the Gantt keep it, leave selectedId out.");
+      warnOnce2("selectedId was given a value after the Gantt had kept a selection of its own. To control the selection, pass selectedId from the first render (null for none); to let the Gantt keep it, leave selectedId out.");
     }
   }, [overridden]);
   const select = (item) => {
@@ -11134,8 +11222,8 @@ function Gantt({
   const phases = useMemo(() => uniqueById(groups), [groups]);
   useEffect(() => {
     const quoted = (ids) => ids.map((id) => `"${id}"`).join(", ");
-    if (plan.repeated.length) warnOnce(`more than one item has the id ${quoted(plan.repeated)}; only the first of each is shown.`);
-    if (phases.repeated.length) warnOnce(`more than one group has the id ${quoted(phases.repeated)}; only the first of each is shown.`);
+    if (plan.repeated.length) warnOnce2(`more than one item has the id ${quoted(plan.repeated)}; only the first of each is shown.`);
+    if (phases.repeated.length) warnOnce2(`more than one group has the id ${quoted(phases.repeated)}; only the first of each is shown.`);
   }, [plan, phases]);
   const tasks = plan.unique;
   const extent = useMemo(() => itemsExtent(tasks), [tasks]);
@@ -12032,14 +12120,17 @@ function TabsRoot(props) {
     const { tabs, mobile = "scroll" } = props;
     const collapseToDropdown = isMobile && (orientation === "responsive" || mobile === "dropdown");
     if (collapseToDropdown) {
-      return /* @__PURE__ */ jsx(
-        Dropdown,
-        {
-          options: tabs.filter((t) => !t.disabled).map((t) => ({ id: t.id, label: t.label, group: t.group })),
-          value: activeTab,
-          onChange: (v) => onTabChange(v),
-          className
-        }
+      return (
+        // choosing a tab is navigation, never a change to a form around it (0.21.0)
+        /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            options: tabs.filter((t) => !t.disabled).map((t) => ({ id: t.id, label: t.label, group: t.group })),
+            value: activeTab,
+            onChange: (v) => onTabChange(v),
+            className
+          }
+        ) })
       );
     }
     if (effectiveOrientation === "vertical") {
@@ -12141,7 +12232,7 @@ function SettingsLayout({
     return (
       // gap-x-ds-8 is the rail's gap, unused in one column: the threshold reads the same gap as the row (useColumnGap)
       /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "sidebar", "data-collapsed": "true", className: cn("flex flex-col gap-y-ds-6 gap-x-ds-8", className), children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(
           Dropdown,
           {
             "aria-label": ariaLabel,
@@ -12149,7 +12240,7 @@ function SettingsLayout({
             value,
             onChange: (v) => onChange(v)
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: PANEL_CLASSES, style: PANEL_STYLE, children })
       ] })
     );
@@ -12435,6 +12526,7 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
     /* @__PURE__ */ jsx(
       Slot,
       {
+        ...triggerType(trigger),
         ref: setTriggerNode,
         onClick: () => {
           setTriggerWidth(triggerRef.current?.offsetWidth);
@@ -12507,7 +12599,7 @@ function LoadMore({ hasMore, onLoadMore, loadMoreLabel, currentPage, scroll, cla
   if (!hasMore) return null;
   return /* @__PURE__ */ jsxs("div", { "data-ds-pager": "", "data-pagination-mode": scroll ? "infinite-scroll" : "load-more", className: cn("flex flex-col items-center", className), children: [
     scroll && /* @__PURE__ */ jsx("div", { ref: marker, "data-load-more-trigger": "", "aria-hidden": "true", className: "h-px w-full" }),
-    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onLoadMore, children: loadMoreLabel ?? "Load more" })
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: onLoadMore, children: loadMoreLabel ?? "Load more" })
   ] });
 }
 function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, className }) {
@@ -12517,7 +12609,7 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
   return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", "data-ds-pager": "", className: cn("flex flex-wrap items-center gap-ds-3", className), children: [
     pageSizeOptions && pageSize != null && onPageSizeChange && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
       /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ds-text-muted)] whitespace-nowrap", children: "Rows per page" }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(
         Dropdown,
         {
           options: pageSizeOptions.map((n) => ({ id: String(n), label: String(n) })),
@@ -12526,7 +12618,7 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
           size: "sm",
           className: "w-[4.5rem]"
         }
-      )
+      ) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1", children: [
       /* @__PURE__ */ jsx(
@@ -13898,6 +13990,16 @@ function useToastOptional() {
 }
 var toastSeq = 0;
 var heardSeq = 0;
+var HEARD_MS = 7e3;
+var RUN_END_MS = 20;
+var isThenable2 = (value) => !!value && typeof value.then === "function";
+function textOf(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (typeof node === "object" && "props" in node) return textOf(node.props.children);
+  return "";
+}
 var mergeable = (e) => !e.action && e.variant !== "error";
 function fill(entries, slots) {
   let shown = entries.filter((e) => e.shown).length;
@@ -13917,14 +14019,18 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
   const [list, setList] = useState([]);
   const entries = useRef([]);
   const isMobile = useBreakpoint("sm");
-  const createdIds = useRef([]);
+  const shownDuringRuns = useRef([]);
+  const showSeq = useRef(0);
+  const runs = useRef(/* @__PURE__ */ new Map());
+  const runSeq = useRef(0);
   const [heard, setHeard] = useState([]);
   const [hovered, setHovered] = useState(false);
   const [focusInside, setFocusInside] = useState(false);
   const paused = pauseOnHover && hovered || focusInside;
   const stackRef = useRef(null);
   const returnTo = useRef(null);
-  const answering = useRef([]);
+  const pressed = useRef(/* @__PURE__ */ new Set());
+  const pointerAt = useRef(0);
   const viaKey = useRef(false);
   const refocus = useRef(false);
   const pendingHeard = useRef(/* @__PURE__ */ new Map());
@@ -13943,58 +14049,75 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
     entries.current = fill(next, slots);
     setList(entries.current);
   }, [slots]);
-  const [slotsSeen, setSlotsSeen] = useState(slots);
-  if (slots !== slotsSeen) {
-    setSlotsSeen(slots);
+  useEffect(() => {
     let kept = 0;
-    setList(fill(list.map((e) => e.shown && ++kept > slots ? { ...e, shown: false } : e), slots));
+    const reslotted = entries.current.map((e) => e.shown && ++kept > slots ? { ...e, shown: false } : e);
+    const next = fill(reslotted, slots);
+    if (next.length === entries.current.length && next.every((e, i) => e === entries.current[i])) return;
+    commit(next);
+  }, [slots, commit]);
+  if (list.every((t) => !t.shown) && (hovered || focusInside)) {
+    setHovered(false);
+    setFocusInside(false);
   }
-  useEffect(() => {
-    entries.current = list;
-  }, [list]);
+  const clearTimers = useRef(/* @__PURE__ */ new Set());
   const announce = useCallback((entry) => {
     pendingHeard.current.set(entry.id, entry);
     if (heardTimer.current) return;
     heardTimer.current = setTimeout(() => {
       heardTimer.current = void 0;
-      const batch = [...pendingHeard.current.values()];
+      const batch = [...pendingHeard.current.values()].map((e) => {
+        const words = textOf(e.message).trim();
+        const sentence = !words || /[.!?…]$/.test(words) ? words : `${words}.`;
+        return { id: `heard-${++heardSeq}`, assertive: e.variant === "error", text: e.action ? `${sentence} Press F8 to reach ${e.action.label}.`.trim() : sentence };
+      }).filter((h) => h.text);
       pendingHeard.current.clear();
-      setHeard((list2) => [...list2, ...batch.map((e) => ({
-        id: `heard-${++heardSeq}`,
-        assertive: e.variant === "error",
-        node: /* @__PURE__ */ jsxs(Fragment, { children: [
-          e.message,
-          e.action ? ` Press F8 to reach ${e.action.label}.` : ""
-        ] })
-      }))].slice(-5));
+      if (!batch.length) return;
+      setHeard((list2) => [...list2, ...batch].slice(-5));
+      const ids = new Set(batch.map((h) => h.id));
+      const timer = setTimeout(() => {
+        clearTimers.current.delete(timer);
+        setHeard((list2) => list2.filter((h) => !ids.has(h.id)));
+      }, HEARD_MS);
+      clearTimers.current.add(timer);
     }, 0);
   }, []);
   useEffect(() => () => {
     if (heardTimer.current) clearTimeout(heardTimer.current);
+    heardTimer.current = void 0;
+    clearTimers.current.forEach(clearTimeout);
+    clearTimers.current.clear();
   }, []);
-  const leaving = useCallback(() => {
-    if (!stackRef.current?.contains(document.activeElement)) return;
+  const leaving = useCallback((id) => {
+    const stack = stackRef.current;
+    const holder = id === void 0 ? stack : [...stack?.querySelectorAll("[data-toast-id]") ?? []].find((n) => n.getAttribute("data-toast-id") === id);
+    if (!holder?.contains(document.activeElement)) return;
     refocus.current = true;
     setFocusInside(false);
   }, []);
   const remove = useCallback((id) => {
-    leaving();
+    leaving(id);
     commit(entries.current.filter((t) => t.id !== id));
   }, [commit, leaving]);
   const dismissAll = useCallback(() => {
     leaving();
     commit([]);
   }, [commit, leaving]);
+  const noteShown = useCallback((id, variant, action, fresh) => {
+    if (runs.current.size) shownDuringRuns.current.push({ seq: ++showSeq.current, at: Date.now(), id, variant, action, fresh });
+  }, []);
   const update = useCallback((id, message, options = {}) => {
     const list2 = entries.current;
     const at = list2.findIndex((t2) => t2.id === id);
     if (at === -1) return;
+    pressed.current.delete(id);
     const t = list2[at];
     const next = [...list2];
     next[at] = { ...t, message, variant: options.variant ?? t.variant, duration: options.duration ?? t.duration, action: options.action ?? t.action, actionWindow: options.actionWindow ?? t.actionWindow, key: options.key ?? t.key, version: t.version + 1 };
     commit(next);
     announce(next[at]);
-  }, [commit, announce]);
+    noteShown(id, next[at].variant, !!next[at].action, false);
+  }, [commit, announce, noteShown]);
   const toast = useCallback((message, options = {}) => {
     const list2 = entries.current;
     const base = { message, variant: options.variant ?? "default", duration: options.duration ?? duration, action: options.action, actionWindow: options.actionWindow, key: options.key };
@@ -14003,41 +14126,31 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
       if (at !== -1) {
         const next = [...list2];
         next[at] = { ...list2[at], ...base, version: list2[at].version + 1 };
-        createdIds.current.push(options.id);
+        pressed.current.delete(options.id);
         commit(next);
         announce(next[at]);
+        noteShown(options.id, base.variant, !!base.action, false);
         return options.id;
       }
     }
-    while (answering.current.length) {
-      const answered = answering.current.shift();
-      const at = list2.findIndex((t) => t.id === answered);
-      if (at === -1) continue;
-      const next = [...list2];
-      next[at] = { ...list2[at], ...base, version: list2[at].version + 1 };
-      createdIds.current.push(answered);
-      commit(next);
-      announce(next[at]);
-      return answered;
-    }
     if (coalesce && base.key && mergeable(base)) {
       const at = list2.findIndex((t) => t.key === base.key && mergeable(t));
       if (at !== -1) {
         const next = [...list2];
         next[at] = { ...list2[at], ...base, version: list2[at].version + 1 };
-        createdIds.current.push(list2[at].id);
         commit(next);
         announce(next[at]);
+        noteShown(list2[at].id, base.variant, !!base.action, false);
         return list2[at].id;
       }
     }
     const id = options.id ?? `toast-${++toastSeq}`;
     const entry = { id, ...base, shown: false, version: 0 };
-    createdIds.current.push(id);
     commit([...list2, entry]);
     announce(entry);
+    noteShown(id, base.variant, !!base.action, true);
     return id;
-  }, [duration, coalesce, commit, announce]);
+  }, [duration, coalesce, commit, announce, noteShown]);
   const api = useMemo(() => ({
     toast,
     success: (m, o) => toast(m, { ...o, variant: "success" }),
@@ -14059,34 +14172,53 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
     }
   }), [toast, update, remove, dismissAll, duration]);
   const ledger = useMemo(() => ({
-    created: () => createdIds.current.length,
-    latestSince: (count) => {
-      if (createdIds.current.length <= count) return void 0;
-      const id = createdIds.current[createdIds.current.length - 1];
-      const entry = entries.current.find((t) => t.id === id);
-      return entry ? { id, message: entry.message } : void 0;
-    }
+    begin: () => {
+      const run = ++runSeq.current;
+      const overlapped = runs.current.size > 0;
+      if (overlapped) runs.current.forEach((r) => {
+        r.overlapped = true;
+      });
+      runs.current.set(run, { from: showSeq.current, overlapped });
+      return run;
+    },
+    end: (run) => {
+      const watched = runs.current.get(run);
+      runs.current.delete(run);
+      if (!watched) return { problem: false };
+      const during = shownDuringRuns.current.filter((s) => s.seq > watched.from);
+      const oldest = Math.min(...[...runs.current.values()].map((r) => r.from));
+      shownDuringRuns.current = runs.current.size ? shownDuringRuns.current.filter((s) => s.seq > oldest) : [];
+      const problem = during.some((s) => s.variant === "error" || s.variant === "warning");
+      const endedAt = Date.now();
+      const confirmations = during.filter((s) => s.fresh && !s.action && (s.variant === "success" || s.variant === "default"));
+      if (watched.overlapped || confirmations.length !== 1 || endedAt - confirmations[0].at > RUN_END_MS) return { problem };
+      const entry = entries.current.find((t) => t.id === confirmations[0].id);
+      return { problem, own: entry && !entry.action ? { id: entry.id, message: entry.message, variant: entry.variant } : void 0 };
+    },
+    has: (id) => entries.current.some((t) => t.id === id)
   }), []);
   const pressAction = useCallback((id) => {
     const entry = entries.current.find((t) => t.id === id);
     if (!entry?.action) return;
     const run = entry.action.onClick;
-    leaving();
+    leaving(id);
     commit(entries.current.map((t) => t.id === id ? { ...t, action: void 0, actionWindow: void 0, version: t.version + 1 } : t));
-    answering.current.push(id);
+    pressed.current.add(id);
     const done = () => {
-      const waiting2 = answering.current.indexOf(id);
-      if (waiting2 === -1) return;
-      answering.current.splice(waiting2, 1);
-      remove(id);
+      if (pressed.current.delete(id)) remove(id);
+    };
+    const failed = (err) => {
+      done();
+      console.error(err);
     };
     let result;
     try {
       result = run();
-    } catch {
-      result = void 0;
+    } catch (err) {
+      failed(err);
+      return;
     }
-    if (result && typeof result.then === "function") result.then(done, done);
+    if (isThenable2(result)) result.then(done, failed);
     else done();
   }, [commit, leaving, remove]);
   const lapse = useCallback((id) => {
@@ -14120,8 +14252,11 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
     const back = returnTo.current;
     const next = stackRef.current?.querySelector("button");
     const main = document.querySelector("main");
+    const byPointer = Date.now() - pointerAt.current < 1e3;
     if (back?.isConnected) back.focus();
-    else if (next) next.focus();
+    else if (byPointer) {
+      if (stackRef.current?.contains(document.activeElement)) document.activeElement.blur();
+    } else if (next) next.focus();
     else if (main) {
       if (!main.hasAttribute("tabindex")) {
         main.setAttribute("tabindex", "-1");
@@ -14136,8 +14271,8 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
   const hasBottomNav = isMobile && bottomNavs > 0;
   return /* @__PURE__ */ jsx(ToastContext.Provider, { value: api, children: /* @__PURE__ */ jsxs(ToastLedgerCtx.Provider, { value: ledger, children: [
     /* @__PURE__ */ jsx(BottomNavPresenceCtx.Provider, { value: registerBottomNav, children }),
-    /* @__PURE__ */ jsx("div", { className: "sr-only", role: "status", "aria-live": "polite", "data-toast-announcer": "polite", children: heard.filter((h) => !h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.node }, h.id)) }),
-    /* @__PURE__ */ jsx("div", { className: "sr-only", role: "alert", "aria-live": "assertive", "data-toast-announcer": "assertive", children: heard.filter((h) => h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.node }, h.id)) }),
+    /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "polite", "data-toast-announcer": "polite", children: heard.filter((h) => !h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.text }, h.id)) }),
+    /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "assertive", "data-toast-announcer": "assertive", children: heard.filter((h) => h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.text }, h.id)) }),
     shown.length > 0 && createPortal(
       /* @__PURE__ */ jsxs(
         "div",
@@ -14150,6 +14285,9 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
           "data-toast-stack": "",
           onMouseEnter: () => setHovered(true),
           onMouseLeave: () => setHovered(false),
+          onPointerDownCapture: () => {
+            pointerAt.current = Date.now();
+          },
           onFocusCapture: (e) => {
             setFocusInside(true);
             const from = e.relatedTarget;
@@ -14166,7 +14304,7 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
           ),
           style: hasBottomNav ? { bottom: "calc(var(--ds-space-12) + var(--ds-space-2) + var(--ds-space-4) + env(safe-area-inset-bottom))" } : void 0,
           children: [
-            shown.map((t) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
+            shown.map((t) => /* @__PURE__ */ jsx("div", { "data-toast-id": t.id, className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
               Toast,
               {
                 inline: true,
@@ -15963,7 +16101,9 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
             "form",
             {
               onSubmit: (e) => {
+                if (e.target !== e.currentTarget) return;
                 e.preventDefault();
+                e.stopPropagation();
                 if (variant === "destructive") return;
                 const submitter = e.nativeEvent.submitter;
                 const implicit = !submitter || submitter === defaultButtonRef.current;
@@ -15992,6 +16132,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                   {
                     ref: dialogRef,
                     role: alert ? "alertdialog" : "dialog",
+                    ...{ [OVERLAY_ROOT_ATTR]: "" },
                     "aria-modal": "true",
                     "data-gs": "dialog",
                     "aria-labelledby": titleId,
@@ -16032,7 +16173,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                             }
                           ),
                           description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
-                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayMarkCtx, { value: mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) }) })
+                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayMarkScope, { mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) }) })
                         ] })
                       ] }) }),
                       /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
@@ -16193,7 +16334,7 @@ var Navbar = forwardRef(function Navbar2({
     }
     focus.onExit?.();
   };
-  const exitControl = focus ? /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: requestExit, children: focus.exitLabel ?? (focus.kind === "before-app" ? "Save and log out" : "Exit") }) : null;
+  const exitControl = focus ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: requestExit, children: focus.exitLabel ?? (focus.kind === "before-app" ? "Save and log out" : "Exit") }) : null;
   const shownUserMenu = focus?.kind === "before-app" ? null : userMenu;
   const asking = confirmExit && focus?.kind === "in-app" && !!appShell?.hasUnsavedChanges;
   if (confirmExit && !asking) setConfirmExit(false);
@@ -16209,8 +16350,8 @@ var Navbar = forwardRef(function Navbar2({
       alert: true,
       container: shellEl ?? void 0,
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setConfirmExit(false), children: "Keep editing" }),
-        /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => {
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: () => setConfirmExit(false), children: "Keep editing" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "destructive", onClick: () => {
           setConfirmExit(false);
           focus.onExit?.();
         }, children: "Discard changes" })
@@ -17410,42 +17551,65 @@ function useDestructiveAction(options) {
   };
   const failureMessage = (err) => err instanceof Error && err.message ? err.message : `${title.replace(/\?$/, "")} failed. Try again.`;
   const done = doneMessage ?? undoMessage ?? pastTenseOf(label);
+  const watch = async (step) => {
+    const run2 = ledger?.begin();
+    try {
+      await step();
+    } catch (err) {
+      if (run2 !== void 0) ledger.end(run2);
+      throw err;
+    }
+    return run2 !== void 0 ? ledger.end(run2) : { problem: false };
+  };
   const confirm = async () => {
     setBusy(true);
-    const before = ledger?.created() ?? 0;
     try {
-      await onConfirm();
+      const seen = await watch(onConfirm);
       close();
-      if (toast && (ledger?.created() ?? 0) === before) toast.success(done);
+      if (toast && !seen.problem && !seen.own) toast.success(done);
     } catch (err) {
       toast?.error(failureMessage(err));
     } finally {
       setBusy(false);
     }
   };
-  const undo = async () => {
+  const undo = async (id) => {
+    const here = () => !!toast && (ledger?.has(id) ?? false);
     try {
-      await onUndo();
-      toast?.success(restoredMessage ?? "Restored");
+      const seen = await watch(onUndo);
+      if (seen.problem) {
+        if (here()) toast.dismiss(id);
+      } else if (seen.own) {
+        if (here()) {
+          toast.update(id, seen.own.message, { variant: seen.own.variant });
+          toast.dismiss(seen.own.id);
+        }
+      } else if (here()) toast.update(id, restoredMessage ?? "Restored", { variant: "success" });
+      else toast?.success(restoredMessage ?? "Restored");
     } catch (err) {
-      toast?.error(err instanceof Error && err.message ? err.message : "Undo didn't work. Try again.");
+      const message = err instanceof Error && err.message ? err.message : "Undo didn't work. Try again.";
+      if (here()) toast.update(id, message, { variant: "error" });
+      else toast?.error(message);
     }
   };
   const run = () => {
     if (undoable) {
       void (async () => {
-        const before = ledger?.created() ?? 0;
+        let seen;
         try {
-          await onConfirm();
+          seen = await watch(onConfirm);
         } catch (err) {
           toast.error(failureMessage(err));
           return;
         }
+        if (seen.problem) return;
         const seconds = preferences.undoWindowSeconds ?? 5;
-        const undoAction = { label: "Undo", onClick: () => undo() };
-        const pages = (ledger?.created() ?? 0) > before ? ledger?.latestSince(before) : void 0;
-        if (pages) toast.update(pages.id, pages.message, { variant: "success", action: undoAction, actionWindow: seconds * 1e3 });
-        else toast.success(done, { action: undoAction, actionWindow: seconds * 1e3 });
+        let id = "";
+        const undoAction = { label: "Undo", onClick: () => undo(id) };
+        if (seen.own) {
+          id = seen.own.id;
+          toast.update(id, seen.own.message, { action: undoAction, actionWindow: seconds * 1e3 });
+        } else id = toast.success(done, { action: undoAction, actionWindow: seconds * 1e3 });
       })();
       return;
     }
@@ -17461,8 +17625,8 @@ function useDestructiveAction(options) {
       description,
       variant: "destructive",
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: close, disabled: busy, children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => void confirm(), disabled: !matches2 || busy, loading: busy, children: label })
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: close, disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "destructive", onClick: () => void confirm(), disabled: !matches2 || busy, loading: busy, children: label })
       ] }),
       children: typedRequired && /* @__PURE__ */ jsx(Field, { label: /* @__PURE__ */ jsxs(Fragment, { children: [
         "Type ",
@@ -17511,7 +17675,7 @@ var PAST_TENSE = {
   reject: "Rejected",
   decline: "Declined"
 };
-var warned2 = /* @__PURE__ */ new Set();
+var warned3 = /* @__PURE__ */ new Set();
 function pastTenseOf(label) {
   const words = label.trim().toLowerCase().split(/\s+/);
   const found = PAST_TENSE[words.slice(0, 2).join(" ")] ?? PAST_TENSE[words[0] ?? ""];
@@ -17522,8 +17686,8 @@ function pastTenseOf(label) {
   } catch {
     dev = false;
   }
-  if (dev && !warned2.has(label)) {
-    warned2.add(label);
+  if (dev && !warned3.has(label)) {
+    warned3.add(label);
     console.warn(`useDestructiveAction: "${label}" isn't a verb the hook knows; pass doneMessage so the confirmation says what happened.`);
   }
   return "Done";