gridsmith-ui 0.19.0 → 0.21.0

package/dist/index.js

@@ -1,9 +1,9 @@
-import { Button, useAppShell, REACT_VERSION_PROBLEM, ControlSizeContext, useDirtyGuard, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-5PDTHKW3.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-5PDTHKW3.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 { 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';
@@ -82,6 +82,7 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
     /* @__PURE__ */ jsx(
       Slot,
       {
+        ...triggerType(trigger),
         ref: triggerRef,
         onClick: () => {
           setOpen(!open);
@@ -115,6 +116,7 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
             return /* @__PURE__ */ jsxs(
               "button",
               {
+                type: "button",
                 "data-index": i,
                 role: "menuitem",
                 disabled: item.disabled,
@@ -177,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,
@@ -194,6 +197,7 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: onClearSelection,
             className: "ml-auto text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
             "aria-label": "Clear selection",
@@ -204,6 +208,12 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
     }
   );
 }
+var UNCONTROLLED = /* @__PURE__ */ Symbol("uncontrolled");
+var valueOf = (e) => {
+  const t = e.target;
+  if (!t) return void 0;
+  return t instanceof HTMLInputElement && (t.type === "checkbox" || t.type === "radio") ? t.checked : t.value;
+};
 var INPUT_HEIGHT = {
   sm: "h-[var(--ds-control-height-sm)]",
   md: "h-[var(--ds-control-height-md)]",
@@ -217,6 +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 === 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) {
@@ -252,7 +263,8 @@ function Input({ className, size: sizeProp, error = false, prefix, suffix, ...pr
                 "disabled:cursor-not-allowed",
                 "read-only:text-[var(--ds-text-secondary)] read-only:cursor-default"
               ),
-              ...props
+              ...props,
+              onChange: props.onChange || props.value === void 0 ? onChange : void 0
             }
           ),
           suffix && /* @__PURE__ */ jsx("span", { className: "shrink-0 pr-ds-3 text-[var(--ds-text-muted)] flex items-center", children: suffix })
@@ -281,11 +293,13 @@ function Input({ className, size: sizeProp, error = false, prefix, suffix, ...pr
         "transition-colors duration-[var(--ds-transition-speed)]",
         className
       ),
-      ...props
+      ...props,
+      onChange: props.onChange || props.value === void 0 ? onChange : void 0
     }
   );
 }
 function Textarea({ className, autoResize, maxRows, error = false, ref, ...props }) {
+  const onChange = useReportedChange(props.onChange, props.value === void 0 ? UNCONTROLLED : props.value, valueOf);
   const internalRef = useRef(null);
   const textareaRef = ref ?? internalRef;
   const resize = useCallback(() => {
@@ -324,7 +338,8 @@ function Textarea({ className, autoResize, maxRows, error = false, ref, ...props
         className
       ),
       onInput: autoResize ? resize : void 0,
-      ...props
+      ...props,
+      onChange: props.onChange || props.value === void 0 ? onChange : void 0
     }
   );
 }
@@ -347,18 +362,20 @@ var TOGGLE_SIZES = {
   md: { w: 44, h: 24, thumb: 16 }
 };
 function Toggle({ checked, onChange, label, disabled, error = false, layout = "full", size = "md", "aria-labelledby": ariaLabelledBy, ...rest }) {
+  const change = useReportedChange(onChange, checked);
   const dims = TOGGLE_SIZES[size];
   const travel = dims.w - dims.thumb - 3;
   const switchButton = /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       role: "switch",
       "aria-checked": checked,
       "aria-label": !label && !ariaLabelledBy ? "Toggle" : void 0,
       "aria-labelledby": ariaLabelledBy,
       "aria-invalid": error || void 0,
       disabled,
-      onClick: () => !disabled && onChange(!checked),
+      onClick: () => !disabled && change(!checked),
       ...rest,
       className: cn(
         "relative inline-flex shrink-0 items-center overflow-hidden",
@@ -407,15 +424,6 @@ function Toggle({ checked, onChange, label, disabled, error = false, layout = "f
     }
   );
 }
-var FormCtx = createContext(null);
-function useFormContext() {
-  const ctx = useContext(FormCtx);
-  if (!ctx) throw new Error("useFormContext must be used within FormWrapper");
-  return ctx;
-}
-function useOptionalFormContext() {
-  return useContext(FormCtx);
-}
 function InlineFieldError({ message, id, className }) {
   return /* @__PURE__ */ jsxs(
     "p",
@@ -454,7 +462,9 @@ function useFieldControl(own, options = {}) {
     requiredNote: noteId ? /* @__PURE__ */ jsx("span", { id: noteId, hidden: true, children: "Required" }) : null
   };
 }
-function Field({ label, children, hint, error, required, labelAction, id: idProp, validate, className }) {
+var AddAnotherRowCtx = createContext(false);
+function Field({ label, children, hint, error, required, labelAction, hideLabel = false, id: idProp, validate, className }) {
+  const inGroupRow = useContext(AddAnotherRowCtx);
   const generated = useId();
   const id = idProp ?? `field-${generated}`;
   const hintId = `${id}-hint`;
@@ -533,6 +543,10 @@ function Field({ label, children, hint, error, required, labelAction, id: idProp
     } } : {};
     control = cloneElement(child, isNative ? ariaOnly : { ...ariaOnly, ...errorFlag ? { error: true } : {}, ...onChange });
   }
+  const labelNode = /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: id, className: cn(hideLabel && "sr-only", hideLabel && inGroupRow && "@max-[30rem]:not-sr-only"), children: [
+    label,
+    required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
+  ] });
   return (
     // In a settings panel a field keeps the narrow reading width however wide the page is (--ds-form-max, Sprint 25.9 A4)
     /* @__PURE__ */ jsxs(
@@ -541,11 +555,8 @@ function Field({ label, children, hint, error, required, labelAction, id: idProp
         className: cn("flex flex-col gap-ds-1.5 max-w-[var(--ds-form-max,none)]", className),
         ...validate ? { onFocusCapture, onBlurCapture, onInputCapture: recheck } : {},
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
-            /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: id, children: [
-              label,
-              required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
-            ] }),
+          hideLabel && !labelAction ? labelNode : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
+            labelNode,
             labelAction
           ] }),
           /* @__PURE__ */ jsx(FieldContext.Provider, { value: fieldContext, children: control }),
@@ -564,7 +575,7 @@ var DROPDOWN_HEIGHT = {
 function Dropdown({
   options,
   value,
-  onChange,
+  onChange: onChangeProp,
   label,
   disabled,
   placeholder = "Select...",
@@ -579,6 +590,7 @@ function Dropdown({
   "aria-label": ariaLabel,
   ...wiring
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const generatedId = useId();
   const control = useFieldControl({ ...wiring, error: error || void 0 }, { requiredInDescription: true });
@@ -865,6 +877,7 @@ function Dropdown({
             /* @__PURE__ */ jsx(
               "button",
               {
+                type: "button",
                 "data-chip-remove": "",
                 onClick: () => {
                   pendingChipFocus.current = { index: i, value: v };
@@ -932,7 +945,8 @@ var TEXT_SIZE = {
   md: "text-sm",
   lg: "text-base"
 };
-function Combobox({ value, onChange, options, placeholder = "Search\u2026", disabled, loading = false, className, ref, container, error = false, size: sizeProp, ...wiring }) {
+function Combobox({ value, onChange: onChangeProp, options, placeholder = "Search\u2026", disabled, loading = false, className, ref, container, error = false, size: sizeProp, ...wiring }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const control = useFieldControl({ ...wiring, error: error || void 0 });
   const size = sizeProp ?? contextSize ?? "md";
@@ -1130,6 +1144,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
           children: /* @__PURE__ */ jsx("div", { style: { padding: "var(--ds-space-1)" }, children: loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-ds-4", children: /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "Loading options" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-ds-2 py-ds-3 text-sm text-[var(--ds-text-muted)] text-center", children: "No results" }) : filtered.map((opt, i) => /* @__PURE__ */ jsxs(
             "button",
             {
+              type: "button",
               id: `${listboxId}-opt-${i}`,
               role: "option",
               tabIndex: -1,
@@ -1161,9 +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, 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;
@@ -1191,6 +1208,11 @@ function Checkbox({ checked, onChange, label, size = "md", disabled = false, ind
           {
             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),
@@ -1253,9 +1275,11 @@ function CheckboxGroupItem({ value, label, disabled, groupValue, onGroupChange }
     }
   );
 }
-function RadioGroup({ value, onChange, 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) {
@@ -1285,7 +1309,11 @@ function RadioGroup({ value, onChange, options, orientation = "vertical", classN
       {
         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"
@@ -1478,7 +1506,8 @@ function parseTypedDate(text, dayFirst = localeDayFirst()) {
   }
   return null;
 }
-function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id, size: sizeProp, min, max, range: range2, ...wiring }) {
+function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id, size: sizeProp, min, max, range: range2, ...wiring }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
@@ -1779,13 +1808,13 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
                 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 }) })
                 ]
               }
             ),
@@ -1848,6 +1877,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
                   /* @__PURE__ */ jsx(
                     Button,
                     {
+                      type: "button",
                       variant: "ghost",
                       size: "sm",
                       onClick: () => {
@@ -1861,6 +1891,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
                   value && /* @__PURE__ */ jsx(
                     Button,
                     {
+                      type: "button",
                       variant: "ghost",
                       size: "sm",
                       onClick: () => choose(null),
@@ -2083,7 +2114,7 @@ var DEFAULT_DATE_RANGE_PRESETS = [
 ];
 function DateRangePicker({
   value,
-  onChange,
+  onChange: onChangeProp,
   placeholder = "Pick a date range",
   disabled,
   error = false,
@@ -2099,6 +2130,7 @@ function DateRangePicker({
   size: sizeProp,
   ...wiring
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
@@ -2246,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);
@@ -2255,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()],
                   " ",
@@ -2265,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)) }),
@@ -2306,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" })
@@ -2456,28 +2488,50 @@ 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 });
   if (!isTruncated) return el;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
 }
+var PARALLEL = 3;
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-function FileUpload({ onFiles, accept, multiple = true, maxSize, className, error = false, label, id }) {
-  const [files, setFiles] = useState([]);
+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([]);
+  const shown = controlled ? files : own;
   const [dragOver, setDragOver] = useState(false);
   const [rejected, setRejected] = useState(null);
   const inputRef = useRef(null);
+  const listRef = useRef(null);
   const nextEntryId = useRef(0);
-  const timers = useRef(/* @__PURE__ */ new Map());
-  useEffect(() => {
-    const running = timers.current;
-    return () => running.forEach(clearInterval);
-  }, []);
+  const controllers = useRef(/* @__PURE__ */ new Map());
+  const uploadRef = useLatest(upload);
+  const overlayMark = useContext(OverlayMarkCtx);
+  const reportChange = useContext(FormChangeCtx);
   const field = useField();
   const ownId = useId();
   const inputId = id ?? `${ownId}-input`;
@@ -2485,39 +2539,141 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
   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 stopTimer = (id2) => {
-    clearInterval(timers.current.get(id2));
-    timers.current.delete(id2);
+  const patch = (itemId, change) => setOwn((prev) => prev.map((i) => i.id === itemId ? { ...i, ...change } : i));
+  const stop = (itemId) => {
+    controllers.current.get(itemId)?.abort();
+    controllers.current.delete(itemId);
+  };
+  const start = (item) => {
+    const run = uploadRef.current;
+    if (!run || !item.file) return;
+    const controller = new AbortController();
+    controllers.current.set(item.id, controller);
+    patch(item.id, { status: "uploading", progress: 0, error: void 0 });
+    const settle = (change) => {
+      if (controller.signal.aborted) return;
+      controllers.current.delete(item.id);
+      patch(item.id, change);
+    };
+    let attempt;
+    try {
+      attempt = Promise.resolve(run(item.file, {
+        signal: controller.signal,
+        onProgress: (percent) => {
+          if (!controller.signal.aborted) patch(item.id, { progress: percentOf(percent) });
+        }
+      }));
+    } catch (err) {
+      attempt = Promise.reject(err);
+    }
+    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;
+    for (const item of own) {
+      if (active >= PARALLEL) break;
+      if (item.status === "queued" || item.status === "uploading" && !controllers.current.has(item.id)) {
+        start(item);
+        active++;
+      }
+    }
+  }, [own, controlled, upload]);
+  const stopAll = useCallback(() => {
+    controllers.current.forEach((c) => c.abort());
+    controllers.current.clear();
+  }, []);
+  useEffect(() => stopAll, [stopAll]);
+  const overlayOpen = overlayMark?.open ?? true;
+  const [wasOpen, setWasOpen] = useState(overlayOpen);
+  if (overlayOpen !== wasOpen) {
+    setWasOpen(overlayOpen);
+    if (!overlayOpen && !controlled) setOwn((prev) => prev.filter((i) => !running(i)));
+  }
+  useEffect(() => {
+    if (!overlayOpen && !controlled) stopAll();
+  }, [overlayOpen, controlled, stopAll]);
+  const busy = shown.some((i) => i.status === "uploading" || i.status === "queued" && (controlled || !!upload));
+  useEffect(() => {
+    if (!busy || !overlayMark) return;
+    return overlayMark.hold();
+  }, [busy, overlayMark]);
+  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.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({ 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 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) => {
       const { accepted, message } = checkFiles(Array.from(fileList), { accept, maxSize, multiple });
       setRejected(message);
       if (accepted.length === 0) return;
-      const entries = accepted.map((file) => ({ id: nextEntryId.current++, file, progress: 0, status: "uploading" }));
-      if (!multiple) {
-        timers.current.forEach(clearInterval);
-        timers.current.clear();
-      }
-      setFiles((prev) => multiple ? [...prev, ...entries] : entries);
-      onFiles(accepted);
-      for (const { id: id2 } of entries) {
-        let progress = 0;
-        const timer = setInterval(() => {
-          progress = Math.min(100, progress + Math.random() * 30 + 10);
-          const done = progress >= 100;
-          if (done) {
-            clearInterval(timer);
-            timers.current.delete(id2);
-          }
-          setFiles((prev) => prev.map((f) => f.id === id2 ? { ...f, progress, status: done ? "complete" : "uploading" } : f));
-        }, 300);
-        timers.current.set(id2, timer);
-      }
+      reportChange?.();
+      onFiles?.(accepted);
+      if (controlled) return;
+      const status = uploadRef.current ? "queued" : "added";
+      const entries = accepted.map((file) => ({ id: `${ownId}-file-${nextEntryId.current++}`, name: file.name, size: file.size, status, file }));
+      if (!multiple) stopAll();
+      setOwn((prev) => multiple ? [...prev, ...entries] : entries);
     },
-    [accept, maxSize, multiple, onFiles]
+    [accept, maxSize, multiple, onFiles, controlled, ownId, reportChange, stopAll, uploadRef]
   );
   const handleDrop = useCallback(
     (e) => {
@@ -2527,10 +2683,31 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
     },
     [addFiles]
   );
-  const removeFile = (id2) => {
-    stopTimer(id2);
-    setFiles((prev) => prev.filter((f) => f.id !== id2));
+  const indexOf = (item) => shown.findIndex((i) => i.id === item.id);
+  const cancel = (item) => {
+    pendingFocus.current = { id: item.id, index: indexOf(item) };
+    if (!controlled) {
+      stop(item.id);
+      setOwn((prev) => prev.filter((i) => i.id !== item.id));
+    }
+    onCancel?.(item);
   };
+  const retry = (item) => {
+    if (!controlled) patch(item.id, { status: "queued", progress: 0, error: void 0 });
+    onRetry?.(item);
+  };
+  const remove = (item) => {
+    pendingFocus.current = { id: item.id, index: indexOf(item) };
+    reportChange?.();
+    if (!controlled) {
+      stop(item.id);
+      setOwn((prev) => prev.filter((i) => i.id !== item.id));
+    }
+    onRemove?.(item);
+  };
+  const canCancel = !controlled || !!onCancel;
+  const canRetry = !controlled || !!onRetry;
+  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 }),
@@ -2584,35 +2761,51 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
           ]
         }
       ),
-      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" })
     ] }),
-    files.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-ds-2", children: files.map((entry) => /* @__PURE__ */ jsxs(
-      "li",
-      {
-        className: cn(
-          "flex items-center gap-ds-3 text-sm",
-          "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-          "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]"
-        ),
-        style: { padding: "var(--ds-space-3)" },
-        children: [
-          /* @__PURE__ */ jsx(Icon, { name: "folder", size: 16, className: "text-[var(--ds-text-muted)] shrink-0" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx(TruncFileName, { className: "text-[var(--ds-text-primary)]", children: entry.file.name }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)]", children: formatSize(entry.file.size) }),
-            entry.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: entry.progress, size: "sm", className: "mt-ds-1" })
-          ] }),
-          entry.status === "complete" && /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, className: "text-[var(--ds-status-success)] shrink-0" }),
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => removeFile(entry.id), "aria-label": "Remove file", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
-        ]
-      },
-      entry.id
-    )) })
+    shown.length > 0 && /* @__PURE__ */ jsx("ul", { ref: listRef, className: "space-y-ds-2", children: shown.map((item) => {
+      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)]",
+            item.status === "error" ? "border-[var(--ds-status-error)]" : "border-[var(--ds-border-subtle)]",
+            "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]"
+          ),
+          style: { padding: "var(--ds-space-3)" },
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "folder", size: 16, className: "text-[var(--ds-text-muted)] shrink-0" }),
+            /* @__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: 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, { 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("div", { role: "status", className: "sr-only", children: /* @__PURE__ */ jsx("span", { children: heard.text }, heard.n) })
   ] });
 }
 function SliderRange({
   value,
-  onChange,
+  onChange: onChangeProp,
   min = 0,
   max = 100,
   step = 1,
@@ -2627,6 +2820,7 @@ function SliderRange({
   trackStyle,
   formatValue
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const field = useField();
   const ownId = useId();
   const showLabel = label != null && !field;
@@ -2832,7 +3026,7 @@ function parseTime(value) {
 }
 function TimePicker({
   value,
-  onChange,
+  onChange: onChangeProp,
   use24Hour = false,
   minuteStep = 15,
   disabled,
@@ -2844,6 +3038,7 @@ function TimePicker({
   size: sizeProp,
   ...wiring
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
   const size = sizeProp ?? contextSize ?? "md";
@@ -3222,7 +3417,7 @@ var sizes = {
 };
 function NumberInput({
   value,
-  onChange,
+  onChange: onChangeProp,
   min = -Infinity,
   max = Infinity,
   step = 1,
@@ -3236,6 +3431,7 @@ function NumberInput({
   allowDecimals,
   id
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const intervalRef = useRef(void 0);
@@ -3254,13 +3450,13 @@ function NumberInput({
     [min, max]
   );
   const valueRef = useLatest(value);
-  const commitValue = useCallback((v) => {
+  const commitValue = useCallback((v, own = false) => {
     const clamped = clamp(v);
     valueRef.current = clamped;
     setDraft(String(clamped));
-    onChange(clamped);
+    (own ? onChangeProp : onChange)(clamped);
     return clamped;
-  }, [onChange, clamp, valueRef]);
+  }, [onChange, onChangeProp, clamp, valueRef]);
   const increment = useCallback(() => commitValue(valueRef.current + step), [commitValue, step, valueRef]);
   const decrement = useCallback(() => commitValue(valueRef.current - step), [commitValue, step, valueRef]);
   const startRepeat = useCallback(
@@ -3298,11 +3494,11 @@ 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;
-      const committed = commitValue(value !== void 0 ? value : fallback);
+      const committed = commitValue(value !== void 0 ? value : fallback, true);
       setDraft(String(committed));
     }
   }, [draft, commitValue, min, value]);
@@ -3543,7 +3739,7 @@ var Tag = forwardRef(function Tag2({
 });
 function TagInput({
   value,
-  onChange,
+  onChange: onChangeProp,
   placeholder = "Add a tag...",
   maxTags = Infinity,
   disabled = false,
@@ -3552,6 +3748,7 @@ function TagInput({
   id,
   "aria-label": ariaLabel
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const [input, setInput] = useState("");
   const inputRef = useRef(null);
   const addTag = useCallback(
@@ -3677,7 +3874,7 @@ var sizes2 = {
 };
 function PinInput({
   value,
-  onChange,
+  onChange: onChangeProp,
   length = 6,
   mask = false,
   disabled = false,
@@ -3686,6 +3883,7 @@ function PinInput({
   error = false,
   id
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const inputsRef = useRef([]);
@@ -3821,23 +4019,26 @@ function StarIcon({ filled, half, size }) {
 }
 function Rating({
   value,
-  onChange,
+  onChange: onChangeProp,
   max = 5,
   allowHalf = false,
   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 || !onChange) return;
+      if (readOnly || !onChangeProp) return;
       const newValue = allowHalf && isLeftHalf ? starIdx + 0.5 : starIdx + 1;
       onChange(newValue === value ? 0 : newValue);
     },
-    [readOnly, onChange, allowHalf, value]
+    [readOnly, onChangeProp, onChange, allowHalf, value]
   );
   const handleMouseMove = useCallback(
     (starIdx, e) => {
@@ -3851,7 +4052,7 @@ function Rating({
   const iconSize = iconSizes[size];
   const step = allowHalf ? 0.5 : 1;
   const handleKeyDown = (e) => {
-    if (readOnly || !onChange) return;
+    if (readOnly || !onChangeProp) return;
     let next = null;
     if (e.key === "ArrowRight" || e.key === "ArrowUp") next = Math.min(max, value + step);
     else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = Math.max(0, value - step);
@@ -3897,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",
@@ -3975,13 +4180,14 @@ var DEFAULT_SWATCHES = [
 ];
 function ColorPicker({
   value,
-  onChange,
+  onChange: onChangeProp,
   showAlpha = false,
   swatches = DEFAULT_SWATCHES,
   disabled = false,
   className,
   error = false
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const [hsl, setHsl] = useState(() => hexToHsl(value));
   const [hexInput, setHexInput] = useState(value);
   const satLightRef = useRef(null);
@@ -4222,6 +4428,7 @@ var Alert = forwardRef(function Alert2({
                 trigger: /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     className: cn(
                       "shrink-0 text-xs font-medium px-ds-2.5 py-ds-1 rounded-[var(--ds-radius-sm)]",
                       "transition-colors cursor-pointer",
@@ -4246,6 +4453,7 @@ var Alert = forwardRef(function Alert2({
               return /* @__PURE__ */ jsxs(
                 "button",
                 {
+                  type: "button",
                   onClick: a.onClick,
                   className: cn(
                     "shrink-0 text-xs font-medium px-ds-2.5 py-ds-1 rounded-[var(--ds-radius-sm)]",
@@ -4266,6 +4474,7 @@ var Alert = forwardRef(function Alert2({
             /* @__PURE__ */ jsxs(
               "button",
               {
+                type: "button",
                 onClick: () => setDetailsExpanded(!detailsExpanded),
                 "aria-expanded": detailsExpanded,
                 className: cn(
@@ -4293,6 +4502,7 @@ var Alert = forwardRef(function Alert2({
         dismissible && /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: onDismiss,
             className: "shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
             "aria-label": "Dismiss",
@@ -4303,6 +4513,7 @@ var Alert = forwardRef(function Alert2({
     }
   );
 });
+var isThenable = (value) => !!value && typeof value.then === "function";
 function stampFormId(node, formId) {
   return Children.map(node, (child) => {
     if (!isValidElement(child)) return child;
@@ -4359,12 +4570,19 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
   const pendingSubmit = useRef(false);
   const pendingFocus = useRef(false);
   const onSubmitRef = useLatest(onSubmit);
+  const overlayMark = useContext(OverlayMarkCtx);
+  const reportChange = useMemo(() => overlayMark ? () => overlayMark.report(formId) : null, [overlayMark, formId]);
+  useEffect(() => overlayMark?.attach(formId), [overlayMark, formId]);
   useEffect(() => {
     if (pendingSubmit.current && submitted) {
       pendingSubmit.current = false;
-      onSubmitRef.current(errorsRef.current);
+      const answer = overlayMark?.submit(formId, { element: () => formRef.current, failing: () => Object.keys(errorsRef.current).length > 0 });
+      const result = onSubmitRef.current(errorsRef.current);
+      if (!answer) return;
+      if (isThenable(result)) void result.then(() => answer.settle("resolved"));
+      else answer.settle("returned");
     }
-  }, [submitted, submitCount, errors, errorsRef, onSubmitRef]);
+  }, [submitted, submitCount, errors, errorsRef, onSubmitRef, overlayMark, formId]);
   const submittedRef = useLatest(submitted);
   const errorSummaryRef = useLatest(errorSummary);
   const summaryRef = useRef(null);
@@ -4418,7 +4636,15 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     pendingFocus.current = false;
   }, []);
   const setError = useCallback((field, message) => {
-    setErrors((prev) => prev[field] === message ? prev : { ...prev, [field]: message });
+    setErrors((prev) => {
+      if (!message) {
+        if (!(field in prev)) return prev;
+        const next = { ...prev };
+        delete next[field];
+        return next;
+      }
+      return prev[field] === message ? prev : { ...prev, [field]: message };
+    });
   }, []);
   const checks = useRef(/* @__PURE__ */ new Map());
   const register = useCallback((field, check) => {
@@ -4441,11 +4667,20 @@ 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 = {};
-        for (const [field, check] of checks.current) found[field] = check();
-        setErrors((prev) => ({ ...prev, ...found }));
+        const found = /* @__PURE__ */ new Map();
+        for (const [field, check] of checks.current) found.set(field, check());
+        setErrors((prev) => {
+          const next = { ...prev };
+          for (const [field, message] of found) {
+            if (message) next[field] = message;
+            else delete next[field];
+          }
+          return next;
+        });
       }
       pendingSubmit.current = true;
       pendingFocus.current = focusFirstError;
@@ -4468,22 +4703,79 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     f.message
   ] }, f.id || f.label)) }) }) : null;
   const actionsNode = actions && !drawerFooter ? /* @__PURE__ */ jsx("div", { "data-form-actions": "", className: cn("flex flex-wrap items-center gap-ds-2 pt-ds-2", actionsAlign === "end" ? "justify-end" : "justify-start"), children: actions }) : null;
-  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted, register }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5 max-w-[var(--ds-form-max,none)]", className), noValidate: true, children: [
+  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted, register }, children: /* @__PURE__ */ jsx(FormChangeCtx.Provider, { value: reportChange, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5 max-w-[var(--ds-form-max,none)]", className), noValidate: true, children: [
     summaryNode && /* @__PURE__ */ jsx("div", { ref: summaryRef, "data-form-error-summary": "", tabIndex: -1, className: "rounded-[var(--ds-radius-md)] outline-none focus-visible:shadow-[var(--ds-shadow-focus)]", children: summaryNode }),
     children,
     actionsNode
-  ] }) });
+  ] }) }) });
+}
+var FOCUSABLE2 = "input:not([disabled]):not([type='hidden']), select:not([disabled]), textarea:not([disabled]), [role='combobox'], [role='switch'], [role='radio'], [tabindex]:not([tabindex='-1'])";
+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);
+  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;
+    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` };
+  const body = /* @__PURE__ */ jsxs("div", { "data-add-another": "", className: cn("@container flex flex-col gap-ds-3", className), style: grid, children: [
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "hidden gap-ds-3 text-sm font-medium text-[var(--ds-text-secondary)] @min-[30rem]:grid @min-[30rem]:grid-cols-[var(--gs-add-another-cols)]", children: [
+      columns.map((column) => /* @__PURE__ */ jsx("span", { children: column }, column)),
+      canRemove && /* @__PURE__ */ jsx("span", { className: "invisible inline-flex items-center whitespace-nowrap px-ds-4 text-xs font-medium", children: "Remove" })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { ref: listRef, className: "flex flex-col gap-ds-4 @min-[30rem]:gap-ds-3", children: items.map((item, index) => {
+      const id = getId(item);
+      return /* @__PURE__ */ jsxs("li", { "data-add-another-row": "", className: "grid grid-cols-1 items-start gap-ds-3 @min-[30rem]:grid-cols-[var(--gs-add-another-cols)]", children: [
+        /* @__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", 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", before: new Set(items.map(getId)) };
+      reportChange?.();
+      onAdd();
+    }, children: addLabel }) })
+  ] });
+  if (!label) return body;
+  return /* @__PURE__ */ jsxs("fieldset", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsx("legend", { className: "mb-ds-2 text-sm font-medium text-[var(--ds-text-primary)]", children: label }),
+    body
+  ] });
 }
 function TransferList({
   available,
   selected,
-  onChange,
+  onChange: onChangeProp,
   availableTitle = "Available",
   selectedTitle = "Selected",
   searchable = true,
   className,
   ref
 }) {
+  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("");
@@ -4565,6 +4857,7 @@ function TransferList({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: moveAllRight,
           disabled: !available.filter((i) => !i.disabled).length,
           "aria-label": isStacked ? "Move all down" : "Move all right",
@@ -4575,6 +4868,7 @@ function TransferList({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: moveRight,
           disabled: !checkedAvailable.size,
           "aria-label": isStacked ? "Move selected down" : "Move selected right",
@@ -4585,6 +4879,7 @@ function TransferList({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: moveLeft,
           disabled: !checkedSelected.size,
           "aria-label": isStacked ? "Move selected up" : "Move selected left",
@@ -4595,6 +4890,7 @@ function TransferList({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: moveAllLeft,
           disabled: !selected.filter((i) => !i.disabled).length,
           "aria-label": isStacked ? "Move all up" : "Move all left",
@@ -4726,62 +5022,6 @@ function toInitials(value) {
   if (!/\s/.test(s) && Array.from(s).length <= 3) return s;
   return initialsOf(s);
 }
-var variantColors = {
-  success: "bg-[var(--ds-status-success)]",
-  warning: "bg-[var(--ds-status-warning)]",
-  error: "bg-[var(--ds-status-error)]",
-  info: "bg-[var(--ds-accent-primary)]",
-  neutral: "bg-[var(--ds-text-muted)]",
-  offline: "bg-[var(--ds-text-muted)] opacity-disabled"
-};
-var pulseRingColors = {
-  success: "bg-[color-mix(in_oklch,var(--ds-status-success)_30%,transparent)]",
-  warning: "bg-[color-mix(in_oklch,var(--ds-status-warning)_30%,transparent)]",
-  error: "bg-[color-mix(in_oklch,var(--ds-status-error)_30%,transparent)]",
-  info: "bg-[var(--ds-accent-soft)]",
-  neutral: "bg-[color-mix(in_oklch,var(--ds-text-muted)_20%,transparent)]",
-  offline: "bg-[color-mix(in_oklch,var(--ds-text-muted)_10%,transparent)]"
-};
-var StatusDot = forwardRef(function StatusDot2({
-  variant = "neutral",
-  label,
-  pulse = false,
-  className
-}, ref) {
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ref,
-      className: cn("inline-flex items-center gap-ds-1.5", className),
-      role: "status",
-      "aria-label": label ?? variant,
-      children: [
-        /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "rounded-[var(--ds-radius-full)] h-2.5 w-2.5",
-                variantColors[variant]
-              )
-            }
-          ),
-          pulse && variant !== "offline" && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "absolute inset-0 rounded-[var(--ds-radius-full)]",
-                "animate-ping motion-reduce:animate-none",
-                pulseRingColors[variant]
-              )
-            }
-          )
-        ] }),
-        label && /* @__PURE__ */ jsx("span", { className: "font-normal text-[var(--ds-text-primary)] text-[length:var(--ds-font-size-xs)]", children: label })
-      ]
-    }
-  );
-});
 var sizeStyles2 = {
   sm: "h-8 w-8 text-xs",
   md: "h-10 w-10 text-sm",
@@ -4804,13 +5044,23 @@ function colorStyles(color, seed) {
   if (color === "neutral") return "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]";
   return paletteStyles[color === "auto" ? paletteFor(seed) : color];
 }
-var statusVariantMap = {
-  online: "success",
-  away: "warning",
-  busy: "error",
-  offline: "offline"
-};
+function PresenceMark({ status }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 10 10", width: "10", height: "10", "aria-hidden": "true", focusable: "false", "data-presence": status, className: "block", children: [
+    status === "online" && /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "5", className: "fill-[var(--ds-status-success)]" }),
+    status === "away" && /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "4", fill: "none", strokeWidth: "2", className: "stroke-[var(--ds-status-warning)]" }),
+    status === "busy" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "5", className: "fill-[var(--ds-status-error)]" }),
+      /* @__PURE__ */ jsx("rect", { x: "2.5", y: "4.1", width: "5", height: "1.8", rx: "0.9", className: "fill-[var(--ds-bg-canvas)]" })
+    ] }),
+    status === "offline" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "4", fill: "none", strokeWidth: "2", className: "stroke-[var(--ds-text-muted)]" }),
+      /* @__PURE__ */ jsx("line", { x1: "3.1", y1: "6.9", x2: "6.9", y2: "3.1", strokeWidth: "1.5", strokeLinecap: "round", className: "stroke-[var(--ds-text-muted)]" })
+    ] })
+  ] });
+}
 function Avatar({ initials, src, alt, size = "md", status, color = "auto", className }) {
+  const who = alt ?? initials ?? "";
+  const named = status ? [who, status].filter(Boolean).join(", ") : void 0;
   const base = cn(
     "inline-flex items-center justify-center font-medium shrink-0",
     "rounded-[var(--ds-radius-full)]",
@@ -4822,13 +5072,15 @@ function Avatar({ initials, src, alt, size = "md", status, color = "auto", class
     {
       "data-avatar": "",
       src,
-      alt: alt ?? initials ?? "",
+      alt: named ?? alt ?? initials ?? "",
       className: cn(base, "object-cover")
     }
   ) : /* @__PURE__ */ jsx(
     "div",
     {
       "data-avatar": "",
+      role: named ? "img" : void 0,
+      "aria-label": named,
       className: cn(
         base,
         colorStyles(color, alt ?? initials ?? ""),
@@ -4850,20 +5102,14 @@ function Avatar({ initials, src, alt, size = "md", status, color = "auto", class
           size === "lg" && "bottom-[0px] right-[0px]"
         ),
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx(
-          StatusDot,
-          {
-            variant: statusVariantMap[status],
-            className: "rounded-[var(--ds-radius-full)] shadow-[0_0_0_2px_var(--ds-bg-canvas)]"
-          }
-        )
+        children: /* @__PURE__ */ jsx("span", { className: "block rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-canvas)] shadow-[0_0_0_2px_var(--ds-bg-canvas)]", children: /* @__PURE__ */ jsx(PresenceMark, { status }) })
       }
     )
   ] });
 }
 function MentionInput({
   value: controlledValue,
-  onChange,
+  onChange: onChangeProp,
   suggestions,
   trigger = "@",
   placeholder,
@@ -4872,6 +5118,7 @@ function MentionInput({
 }) {
   const [internalValue, setInternalValue] = useState("");
   const value = controlledValue ?? internalValue;
+  const onChange = useReportedChange(onChangeProp, value);
   const [query, setQuery] = useState("");
   const [showPopup, setShowPopup] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
@@ -5777,6 +6024,57 @@ var DescriptionList = forwardRef(function DescriptionList2({
     }
   );
 });
+var variantColors = {
+  success: "bg-[var(--ds-status-success)]",
+  warning: "bg-[var(--ds-status-warning)]",
+  error: "bg-[var(--ds-status-error)]",
+  info: "bg-[var(--ds-accent-primary)]",
+  neutral: "bg-[var(--ds-text-muted)]",
+  offline: "bg-[var(--ds-text-muted)] opacity-disabled"
+};
+var pulseRingColors = {
+  success: "bg-[color-mix(in_oklch,var(--ds-status-success)_30%,transparent)]",
+  warning: "bg-[color-mix(in_oklch,var(--ds-status-warning)_30%,transparent)]",
+  error: "bg-[color-mix(in_oklch,var(--ds-status-error)_30%,transparent)]",
+  info: "bg-[var(--ds-accent-soft)]",
+  neutral: "bg-[color-mix(in_oklch,var(--ds-text-muted)_20%,transparent)]",
+  offline: "bg-[color-mix(in_oklch,var(--ds-text-muted)_10%,transparent)]"
+};
+var StatusDot = forwardRef(function StatusDot2({
+  variant = "neutral",
+  label,
+  pulse = false,
+  className
+}, ref) {
+  return (
+    // No live region (A48): the dot is read as its words where it sits; telling the user about a change as it happens
+    // is the toasts' job (WCAG 4.1.3). The dot itself is hidden from assistive technology.
+    /* @__PURE__ */ jsxs("span", { ref, "data-status-dot": variant, className: cn("inline-flex items-center gap-ds-1.5", className), children: [
+      /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "relative inline-flex shrink-0", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "rounded-[var(--ds-radius-full)] h-2.5 w-2.5",
+              variantColors[variant]
+            )
+          }
+        ),
+        pulse && variant !== "offline" && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "absolute inset-0 rounded-[var(--ds-radius-full)]",
+              "animate-ping motion-reduce:animate-none",
+              pulseRingColors[variant]
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "font-normal text-[var(--ds-text-primary)] text-[length:var(--ds-font-size-xs)]", children: label })
+    ] })
+  );
+});
 function Accordion({ items, type = "single", defaultOpen = [], open: controlledOpen, onOpenChange, className }) {
   const [internalOpen, setInternalOpen] = useState(new Set(defaultOpen));
   const baseId = useId();
@@ -5811,6 +6109,7 @@ function Accordion({ items, type = "single", defaultOpen = [], open: controlledO
       /* @__PURE__ */ jsxs(
         "button",
         {
+          type: "button",
           id: triggerId,
           "aria-expanded": isOpen,
           "aria-controls": panelId,
@@ -6196,6 +6495,7 @@ function Table({
               expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), children: /* @__PURE__ */ jsx(
                 "button",
                 {
+                  type: "button",
                   onClick: () => toggleExpand(i),
                   className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] cursor-pointer",
                   "aria-expanded": isExpanded,
@@ -6312,7 +6612,7 @@ var indicatorInset = {
 };
 function SegmentedControl({
   value,
-  onChange,
+  onChange: onChangeProp,
   options,
   size: sizeProp,
   variant = "default",
@@ -6323,6 +6623,7 @@ function SegmentedControl({
   maxOptions = 6,
   ...wiring
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const control = useFieldControl(wiring);
   const named = !ariaLabel && control.labelId ? { "aria-labelledby": control.labelId } : {};
@@ -8212,74 +8513,78 @@ 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
-      ] })
-    ] }),
-    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 }) {
-  if (item.icon) {
-    return /* @__PURE__ */ jsx("div", { "data-timeline-icon": "", className: "shrink-0 w-8 h-8 flex items-center justify-center *:max-w-8 *:max-h-8", children: item.icon });
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
+        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" })
+      ] })
+    ] }) }) })
+  );
+}
+var ICON_TEXT_OFFSET = "calc((2rem - 1.25rem) / 2)";
+function Marker({ item, vertical }) {
+  if (item.icon) {
+    return /* @__PURE__ */ jsx("div", { "data-timeline-icon": "", className: "shrink-0 w-8 h-8 flex items-center justify-center *:max-w-8 *:max-h-8", children: item.icon });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
     {
       className: cn(
         "shrink-0 w-3 h-3 rounded-[var(--ds-radius-full)]",
@@ -8436,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) => {
@@ -8864,6 +9171,7 @@ function Carousel({
           /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               onClick: prev,
               disabled: !canPrev,
               "aria-label": "Previous slide",
@@ -8883,6 +9191,7 @@ function Carousel({
           /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               onClick: next,
               disabled: !canNext,
               "aria-label": "Next slide",
@@ -8903,6 +9212,7 @@ function Carousel({
         showIndicators && count > 1 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-ds-3 left-1/2 -translate-x-1/2 flex gap-ds-1.5 z-10", children: children.map((_, i) => /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: () => goTo(i),
             "aria-label": `Go to slide ${i + 1}`,
             className: cn(
@@ -8982,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);
       })
     }
   );
@@ -9119,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",
@@ -9238,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"
       ] }) })
@@ -9293,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",
@@ -9305,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 }) }) })
           ] })
         ]
       }
@@ -10542,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 (
@@ -10807,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 }) {
@@ -10898,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) => {
@@ -10910,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]);
@@ -11651,6 +11963,7 @@ function TabButton({
     const btn2 = /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         id: tabId,
         role: "tab",
         "aria-selected": isActive,
@@ -11686,6 +11999,7 @@ function TabButton({
   const btn = /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       id: tabId,
       role: "tab",
       "aria-selected": isActive,
@@ -11806,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") {
@@ -11915,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,
@@ -11923,7 +12240,7 @@ function SettingsLayout({
             value,
             onChange: (v) => onChange(v)
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: PANEL_CLASSES, style: PANEL_STYLE, children })
       ] })
     );
@@ -12059,6 +12376,7 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             ref: ellipsisBtnRef,
             onClick: () => {
               if (!dropdownOpen) setActiveIdx(0);
@@ -12109,6 +12427,7 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
         children: collapsedItems.map((ci, idx) => /* @__PURE__ */ jsxs(
           "button",
           {
+            type: "button",
             "data-index": idx,
             role: "menuitem",
             tabIndex: idx === activeIdx ? 0 : -1,
@@ -12207,6 +12526,7 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
     /* @__PURE__ */ jsx(
       Slot,
       {
+        ...triggerType(trigger),
         ref: setTriggerNode,
         onClick: () => {
           setTriggerWidth(triggerRef.current?.offsetWidth);
@@ -12279,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 }) {
@@ -12289,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) })),
@@ -12298,12 +12618,13 @@ 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(
         "button",
         {
+          type: "button",
           onClick: () => onPageChange(currentPage - 1),
           disabled: currentPage <= 1,
           "aria-label": "Previous page",
@@ -12323,6 +12644,7 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
         (p, i) => p === "..." ? /* @__PURE__ */ jsx(EllipsisJumper, { totalPages, onPageChange }, `ellipsis-${i}`) : /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: () => onPageChange(p),
             "aria-current": p === currentPage ? "page" : void 0,
             className: cn(
@@ -12340,6 +12662,7 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: () => onPageChange(currentPage + 1),
           disabled: currentPage >= totalPages,
           "aria-label": "Next page",
@@ -12602,6 +12925,7 @@ function StepCircle({ status, index, onClick, clickable }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       onClick,
       disabled: !clickable,
       "aria-current": status === "current" ? "step" : void 0,
@@ -12796,7 +13120,7 @@ var Sidebar = forwardRef(function Sidebar2({
   position = "flush",
   navbarFloating: navbarFloatingProp,
   navSize = "md",
-  fill = false,
+  fill: fill2 = false,
   className
 }, ref) {
   const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed ?? false);
@@ -12806,10 +13130,10 @@ var Sidebar = forwardRef(function Sidebar2({
   const appShell = useAppShell();
   const navbarFloating = navbarFloatingProp ?? appShell?.navbarFloating;
   useLayoutEffect(() => {
-    if (fill || !appShell) return;
+    if (fill2 || !appShell) return;
     return appShell.registerChrome("sidebar", position);
-  }, [appShell?.registerChrome, fill, position]);
-  const usesShellState = appShell !== null && !isControlled && defaultCollapsed === void 0 && !fill && type === "traditional";
+  }, [appShell?.registerChrome, fill2, position]);
+  const usesShellState = appShell !== null && !isControlled && defaultCollapsed === void 0 && !fill2 && type === "traditional";
   const uncontrolledCollapsed = usesShellState ? appShell.sidebarCollapsed : internalCollapsed;
   const collapsed = mini || (isControlled ? controlledCollapsed : uncontrolledCollapsed);
   const handleCollapsedChange = (value) => {
@@ -12828,11 +13152,11 @@ var Sidebar = forwardRef(function Sidebar2({
     effectiveDarkMode = false;
   }
   const isDark = effectiveDarkMode ?? variant === "dark";
-  const showCollapse = type === "traditional" && !mini && !fill;
+  const showCollapse = type === "traditional" && !mini && !fill2;
   const isMinimal = type === "minimal";
   const isCompact = type === "compact";
-  const isFloating = position === "floating" && !fill;
-  const sidebarWidth = fill ? "100%" : isCompact ? "var(--ds-sidebar-compact-width)" : collapsed ? "var(--ds-sidebar-collapsed-width)" : "var(--ds-sidebar-width)";
+  const isFloating = position === "floating" && !fill2;
+  const sidebarWidth = fill2 ? "100%" : isCompact ? "var(--ds-sidebar-compact-width)" : collapsed ? "var(--ds-sidebar-collapsed-width)" : "var(--ds-sidebar-width)";
   const aside = /* @__PURE__ */ jsxs(
     "aside",
     {
@@ -12870,6 +13194,7 @@ var Sidebar = forwardRef(function Sidebar2({
           const collapseButton = /* @__PURE__ */ jsxs(
             "button",
             {
+              type: "button",
               onClick: () => handleCollapsedChange(!collapsed),
               "aria-expanded": !collapsed,
               "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
@@ -13222,6 +13547,7 @@ function SidebarNav({
       /* @__PURE__ */ jsxs(
         "button",
         {
+          type: "button",
           onClick: () => {
             toggleExpand(key);
             onItemClick?.(item, index);
@@ -13356,6 +13682,7 @@ function SidebarNav({
         collapsible && /* @__PURE__ */ jsxs(
           "button",
           {
+            type: "button",
             onClick: () => onCollapsedChange(!collapsed),
             title: collapsed ? "Expand sidebar" : "Collapse sidebar",
             className: cn(
@@ -13422,6 +13749,7 @@ function CompactNavItem({
     /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         ref: setTriggerEl,
         onMouseEnter: !mobile && hasChildren ? handleMouseEnter : void 0,
         onMouseLeave: !mobile && hasChildren && isOpen ? handleMouseLeave : void 0,
@@ -13484,6 +13812,7 @@ function CompactNavItem({
     mobile && expanded && hasChildren && item.children && /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col gap-ds-1 pb-ds-1", children: item.children.map((child, ci) => /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         onClick: () => onItemClick?.(child, ci),
         className: cn(
           "flex items-center gap-ds-2 px-ds-3 py-ds-1.5 text-[length:var(--ds-font-size-xs)] rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer w-full",
@@ -13498,7 +13827,519 @@ function CompactNavItem({
     )) })
   ] });
 }
+var variantStyles4 = {
+  default: "border-[var(--ds-border-default)] bg-[var(--ds-bg-surface)]",
+  success: "border-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
+  warning: "border-[var(--ds-status-warning)] bg-[var(--ds-status-warning-bg)]",
+  error: "border-[var(--ds-status-error)] bg-[var(--ds-status-error-bg)]"
+};
+var variantIcons = {
+  default: { name: "info", className: "text-[var(--ds-text-muted)]" },
+  success: { name: "check", className: "text-[var(--ds-status-success)]" },
+  warning: { name: "warning", className: "text-[var(--ds-status-warning)]" },
+  error: { name: "error", className: "text-[var(--ds-status-error)]" }
+};
+var TOAST_POSITION_CLASSES = {
+  "top-right": "top-[var(--ds-toast-inset-top)] right-[var(--ds-toast-inset-right)]",
+  "top-left": "top-[var(--ds-toast-inset-top)] left-[var(--ds-toast-inset-left)]",
+  "bottom-right": "bottom-[var(--ds-toast-inset-bottom-right)] right-[var(--ds-toast-inset-right)]",
+  "bottom-left": "bottom-[var(--ds-toast-inset-bottom-left)] left-[var(--ds-toast-inset-left)]",
+  "top-center": "top-[var(--ds-toast-inset-top)] left-1/2 -translate-x-1/2",
+  "bottom-center": "bottom-ds-4 left-1/2 -translate-x-1/2"
+};
+var finite = (ms) => typeof ms === "number" && Number.isFinite(ms) && ms > 0;
+function Toast({ variant = "default", message, visible, onDismiss, duration = 5e3, pauseOnHover = false, action, actionWindow, position = "bottom-right", mode, container, inline = false, paused = false, onActionLapse, onAction, restartKey = 0 }) {
+  const isMobile = useBreakpoint("sm");
+  const isCentered = position === "top-center" || position === "bottom-center";
+  const [hovered, setHovered] = useState(false);
+  const onDismissRef = useLatest(onDismiss);
+  const onLapseRef = useLatest(onActionLapse);
+  const actionUsed = useRef(false);
+  const phase = action ? finite(actionWindow) ? "window" : "none" : finite(duration) ? "plain" : "none";
+  const total = phase === "window" ? actionWindow : phase === "plain" ? duration : 0;
+  const timer = useRef(void 0);
+  const remaining = useRef(total);
+  const startedAt = useRef(0);
+  const isPaused = paused || !inline && pauseOnHover && hovered;
+  const stop = useCallback(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = void 0;
+      remaining.current -= Date.now() - startedAt.current;
+    }
+  }, []);
+  const start = useCallback(() => {
+    if (phase === "none" || timer.current) return;
+    startedAt.current = Date.now();
+    const expire = phase === "window" ? () => {
+      timer.current = void 0;
+      if (onLapseRef.current) onLapseRef.current();
+      else onDismissRef.current();
+    } : () => {
+      timer.current = void 0;
+      onDismissRef.current();
+    };
+    timer.current = setTimeout(expire, Math.max(0, remaining.current));
+  }, [phase, onDismissRef, onLapseRef]);
+  useEffect(() => {
+    if (!visible) return;
+    remaining.current = total;
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = void 0;
+    }
+    if (!isPaused) start();
+    return () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+        timer.current = void 0;
+      }
+    };
+  }, [visible, phase, total, restartKey]);
+  useEffect(() => {
+    if (!visible) return;
+    if (isPaused) stop();
+    else start();
+  }, [isPaused, visible, start, stop]);
+  useEffect(() => {
+    actionUsed.current = false;
+  }, [restartKey]);
+  if (!visible) return null;
+  const icon = variantIcons[variant];
+  const pressAction = () => {
+    if (!action || actionUsed.current) return;
+    actionUsed.current = true;
+    if (onAction) onAction();
+    else {
+      void action.onClick();
+      onDismissRef.current();
+    }
+  };
+  const card = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-toast": "",
+      "data-variant": variant,
+      role: inline ? void 0 : variant === "error" ? "alert" : "status",
+      "aria-live": inline ? void 0 : variant === "error" ? "assertive" : "polite",
+      "data-mode": inline ? mode : void 0,
+      className: cn(
+        "flex items-center gap-ds-3 px-ds-4 py-ds-3",
+        isCentered ? "min-w-[360px] max-w-[560px]" : "min-w-[280px] max-w-[420px]",
+        "border-[length:var(--ds-border-width)]",
+        GLASS_DROPDOWN,
+        "rounded-[var(--ds-radius-md)]",
+        "text-sm text-[var(--ds-text-primary)]",
+        variantStyles4[variant]
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon.name, size: 18, className: cn("shrink-0", icon.className) }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: message }),
+        action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: pressAction,
+            className: "shrink-0 text-xs font-semibold text-[var(--ds-accent-primary)] hover:underline cursor-pointer",
+            children: action.label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            "aria-label": "Dismiss notification",
+            className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer shrink-0",
+            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
+          }
+        )
+      ]
+    }
+  );
+  if (inline) return card;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-mode": mode,
+        onMouseEnter: pauseOnHover ? () => setHovered(true) : void 0,
+        onMouseLeave: pauseOnHover ? () => setHovered(false) : void 0,
+        className: cn(
+          "fixed z-[var(--ds-z-toast)]",
+          isMobile ? "bottom-ds-4 left-ds-4 right-ds-4" : TOAST_POSITION_CLASSES[position]
+        ),
+        children: card
+      }
+    ),
+    container ?? document.body
+  );
+}
+var ToastContext = createContext(null);
+var ToastLedgerCtx = createContext(null);
+var BottomNavPresenceCtx = createContext(null);
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within <ToastProvider>: the app shell's (get_app_shell writes it around AppShell). A page outside the shell (sign-in, a public page) shows its messages inline instead: an Alert above the form, and each field's error below the field.");
+  }
+  return ctx;
+}
+function useToastOptional() {
+  return useContext(ToastContext);
+}
+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;
+  if (shown >= slots || shown === entries.length) return entries;
+  const next = [...entries];
+  while (shown < slots) {
+    const urgent = next.findIndex((e) => !e.shown && !mergeable(e));
+    const at = urgent !== -1 ? urgent : next.findIndex((e) => !e.shown);
+    if (at === -1) break;
+    next[at] = { ...next[at], shown: true };
+    shown++;
+  }
+  return next;
+}
+function ToastProvider({ children, maxVisible = 3, position = "bottom-right", duration = 5e3, mode, pauseOnHover = true, coalesce = true }) {
+  const slots = Math.max(1, Math.floor(Number.isFinite(maxVisible) ? maxVisible : 1));
+  const [list, setList] = useState([]);
+  const entries = useRef([]);
+  const isMobile = useBreakpoint("sm");
+  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 pressed = useRef(/* @__PURE__ */ new Set());
+  const pointerAt = useRef(0);
+  const viaKey = useRef(false);
+  const refocus = useRef(false);
+  const pendingHeard = useRef(/* @__PURE__ */ new Map());
+  const heardTimer = useRef(void 0);
+  const [bottomNavs, setBottomNavs] = useState(0);
+  const registerBottomNav = useCallback(() => {
+    setBottomNavs((n) => n + 1);
+    let gone = false;
+    return () => {
+      if (gone) return;
+      gone = true;
+      setBottomNavs((n) => n - 1);
+    };
+  }, []);
+  const commit = useCallback((next) => {
+    entries.current = fill(next, slots);
+    setList(entries.current);
+  }, [slots]);
+  useEffect(() => {
+    let kept = 0;
+    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);
+  }
+  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()].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();
+      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((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(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]);
+    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 };
+    if (options.id) {
+      const at = list2.findIndex((t) => t.id === options.id);
+      if (at !== -1) {
+        const next = [...list2];
+        next[at] = { ...list2[at], ...base, version: list2[at].version + 1 };
+        pressed.current.delete(options.id);
+        commit(next);
+        announce(next[at]);
+        noteShown(options.id, base.variant, !!base.action, false);
+        return options.id;
+      }
+    }
+    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 };
+        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 };
+    commit([...list2, entry]);
+    announce(entry);
+    noteShown(id, base.variant, !!base.action, true);
+    return id;
+  }, [duration, coalesce, commit, announce, noteShown]);
+  const api = useMemo(() => ({
+    toast,
+    success: (m, o) => toast(m, { ...o, variant: "success" }),
+    warning: (m, o) => toast(m, { ...o, variant: "warning" }),
+    error: (m, o) => toast(m, { ...o, variant: "error" }),
+    update,
+    dismiss: remove,
+    dismissAll,
+    promise: async (promise, messages, options = {}) => {
+      const id = toast(messages.loading, { ...options, variant: "default", duration: Infinity });
+      try {
+        const value = await promise;
+        update(id, typeof messages.success === "function" ? messages.success(value) : messages.success, { variant: "success", duration });
+        return value;
+      } catch (err) {
+        update(id, typeof messages.error === "function" ? messages.error(err) : messages.error, { variant: "error", duration });
+        throw err;
+      }
+    }
+  }), [toast, update, remove, dismissAll, duration]);
+  const ledger = useMemo(() => ({
+    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(id);
+    commit(entries.current.map((t) => t.id === id ? { ...t, action: void 0, actionWindow: void 0, version: t.version + 1 } : t));
+    pressed.current.add(id);
+    const done = () => {
+      if (pressed.current.delete(id)) remove(id);
+    };
+    const failed = (err) => {
+      done();
+      console.error(err);
+    };
+    let result;
+    try {
+      result = run();
+    } catch (err) {
+      failed(err);
+      return;
+    }
+    if (isThenable2(result)) result.then(done, failed);
+    else done();
+  }, [commit, leaving, remove]);
+  const lapse = useCallback((id) => {
+    const list2 = entries.current;
+    const at = list2.findIndex((t) => t.id === id);
+    if (at === -1) return;
+    const next = [...list2];
+    next[at] = { ...list2[at], action: void 0, actionWindow: void 0, version: list2[at].version + 1 };
+    commit(next);
+  }, [commit]);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key !== "F8" || e.defaultPrevented) return;
+      const stack = stackRef.current;
+      if (!stack) return;
+      e.preventDefault();
+      const active = document.activeElement;
+      if (!stack.contains(active)) {
+        returnTo.current = active instanceof HTMLElement && active !== document.body ? active : null;
+        viaKey.current = true;
+      }
+      (stack.querySelector("button") ?? stack).focus();
+      viaKey.current = false;
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+  useEffect(() => {
+    if (!refocus.current) return;
+    refocus.current = false;
+    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 (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");
+        main.addEventListener("blur", () => main.removeAttribute("tabindex"), { once: true });
+      }
+      main.focus();
+    }
+  }, [list]);
+  const shown = list.filter((t) => t.shown);
+  const waiting = list.length - shown.length;
+  const isTop = position.startsWith("top");
+  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", "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",
+        {
+          ref: stackRef,
+          role: "region",
+          "aria-label": "Notifications",
+          tabIndex: -1,
+          "data-mode": mode,
+          "data-toast-stack": "",
+          onMouseEnter: () => setHovered(true),
+          onMouseLeave: () => setHovered(false),
+          onPointerDownCapture: () => {
+            pointerAt.current = Date.now();
+          },
+          onFocusCapture: (e) => {
+            setFocusInside(true);
+            const from = e.relatedTarget;
+            if (viaKey.current || from instanceof Node && e.currentTarget.contains(from)) return;
+            returnTo.current = from instanceof HTMLElement ? from : null;
+          },
+          onBlurCapture: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) setFocusInside(false);
+          },
+          className: cn(
+            "fixed z-[var(--ds-z-toast)] flex gap-ds-2 pointer-events-none outline-none",
+            isTop ? "flex-col" : "flex-col-reverse",
+            isMobile ? cn("left-ds-4 right-ds-4", !hasBottomNav && "bottom-ds-4") : TOAST_POSITION_CLASSES[position]
+          ),
+          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", { "data-toast-id": t.id, className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
+              Toast,
+              {
+                inline: true,
+                visible: true,
+                variant: t.variant,
+                message: t.message,
+                duration: t.duration,
+                action: t.action,
+                actionWindow: t.actionWindow,
+                mode,
+                paused,
+                restartKey: t.version,
+                onAction: () => pressAction(t.id),
+                onActionLapse: () => lapse(t.id),
+                onDismiss: () => remove(t.id)
+              }
+            ) }, t.id)),
+            (waiting > 0 || shown.length >= 2) && /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto flex items-center justify-end gap-ds-2 text-xs", "data-toast-overflow": "", children: [
+              waiting > 0 && /* @__PURE__ */ jsxs("span", { className: "rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-muted)] px-ds-2 py-ds-0.5 font-medium text-[var(--ds-text-secondary)]", children: [
+                "+",
+                waiting,
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: " more waiting" })
+              ] }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: dismissAll, className: "font-medium text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:underline cursor-pointer", children: "Clear all" })
+            ] })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] }) });
+}
 function BottomNav({ items, onItemClick, maxVisible = 5, className, ref }) {
+  const registerWithToasts = useContext(BottomNavPresenceCtx);
+  useEffect(() => registerWithToasts?.(), [registerWithToasts]);
   const needsOverflow = items.length > maxVisible;
   const visibleItems = needsOverflow ? items.slice(0, maxVisible - 1) : items;
   const overflowItems = needsOverflow ? items.slice(maxVisible - 1) : [];
@@ -13533,6 +14374,7 @@ function BottomNav({ items, onItemClick, maxVisible = 5, className, ref }) {
           /* @__PURE__ */ jsxs(
             "button",
             {
+              type: "button",
               onClick: () => setOverflowOpen(!overflowOpen),
               "aria-expanded": overflowOpen,
               "aria-haspopup": "true",
@@ -13560,6 +14402,7 @@ function BottomNav({ items, onItemClick, maxVisible = 5, className, ref }) {
               children: overflowItems.map((item, i) => /* @__PURE__ */ jsxs(
                 "button",
                 {
+                  type: "button",
                   role: "menuitem",
                   onClick: () => {
                     onItemClick?.(item, maxVisible - 1 + i);
@@ -13589,6 +14432,7 @@ function NavButton({ item, onClick }) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
+      type: "button",
       onClick,
       className: cn(
         "flex flex-col items-center justify-center gap-ds-0.5 flex-1 h-full",
@@ -14991,6 +15835,7 @@ function NavMenu({
     /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         ref: triggerRef,
         onClick: () => setOpen(!open),
         "aria-expanded": open,
@@ -15187,7 +16032,8 @@ var sizeClasses = {
   full: "max-w-[calc(100vw-2rem)]"
 };
 function Dialog({ open, onClose: onCloseProp, title, description, children, footer, variant = "default", size = "md", alert = false, container, onSubmit, dirty, onDiscard }) {
-  const guard = useDirtyGuard(dirty, onCloseProp, onDiscard);
+  const { marked, mark } = useOverlayMark(open);
+  const guard = useDirtyGuard(dirty ?? marked, onCloseProp, onDiscard);
   const onClose = guard.requestClose;
   const titleId = useId();
   const descriptionId = useId();
@@ -15255,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;
@@ -15284,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,
@@ -15324,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(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 }),
@@ -15350,6 +16199,7 @@ function HamburgerButton({ onClick, open, className: cls }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       onClick,
       "aria-label": open ? "Close navigation menu" : "Open navigation menu",
       "aria-expanded": open ?? void 0,
@@ -15484,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);
@@ -15500,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" })
@@ -15652,6 +16502,7 @@ function MobileMenuItem({
     return /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         onClick,
         className: cn(
           "flex items-center gap-ds-3 px-ds-3 py-ds-3 text-sm relative cursor-pointer w-full text-left",
@@ -15676,6 +16527,7 @@ function MobileMenuItem({
     return /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         onClick,
         className: cn(
           "flex items-center gap-ds-3 px-ds-3 py-ds-2.5 text-sm cursor-pointer w-full text-left",
@@ -15693,6 +16545,7 @@ function MobileMenuItem({
     return /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         onClick,
         className: cn(
           "flex items-center gap-ds-3 px-ds-3 py-ds-2.5 text-sm rounded-[var(--ds-radius-md)] cursor-pointer w-full text-left",
@@ -15709,6 +16562,7 @@ function MobileMenuItem({
   return /* @__PURE__ */ jsxs(
     "button",
     {
+      type: "button",
       onClick,
       className: cn(
         "flex items-center gap-ds-3 px-ds-3 py-ds-2.5 text-sm rounded-[var(--ds-radius-md)] cursor-pointer w-full text-left",
@@ -15870,6 +16724,7 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
                     return /* @__PURE__ */ jsxs(
                       "button",
                       {
+                        type: "button",
                         id: `${listboxId}-opt-${myIdx}`,
                         role: "option",
                         tabIndex: -1,
@@ -16058,6 +16913,7 @@ function ContextMenu({ items, children, className, ref, container }) {
                 return /* @__PURE__ */ jsxs(
                   "button",
                   {
+                    type: "button",
                     role: "menuitem",
                     disabled: item.disabled,
                     onClick: () => {
@@ -16168,6 +17024,7 @@ function NotificationCenter({
         /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-3", children: unreadCount > 0 && /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: onMarkAllRead,
             className: "text-sm text-[var(--ds-accent-primary)] hover:underline cursor-pointer",
             children: "Mark all read"
@@ -16178,6 +17035,7 @@ function NotificationCenter({
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: () => setFilter("all"),
             className: cn(
               "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
@@ -16189,6 +17047,7 @@ function NotificationCenter({
         /* @__PURE__ */ jsxs(
           "button",
           {
+            type: "button",
             onClick: () => setFilter("unread"),
             className: cn(
               "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
@@ -16238,6 +17097,7 @@ function NotificationCenter({
                 !n.read && onMarkRead && /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     onClick: () => onMarkRead(n.id),
                     "aria-label": "Mark as read",
                     className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5",
@@ -16247,6 +17107,7 @@ function NotificationCenter({
                 onDismiss && /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     onClick: () => onDismiss(n.id),
                     "aria-label": "Dismiss",
                     className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5",
@@ -16265,6 +17126,7 @@ function NotificationCenter({
     /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         ref: triggerRef,
         onClick: () => setOpen(!open),
         "aria-label": `Notifications${unreadCount ? ` (${unreadCount} unread)` : ""}`,
@@ -16304,6 +17166,7 @@ function NotificationCenter({
               unreadCount > 0 && /* @__PURE__ */ jsx(
                 "button",
                 {
+                  type: "button",
                   onClick: onMarkAllRead,
                   className: "text-xs text-[var(--ds-accent-primary)] hover:underline cursor-pointer",
                   children: "Mark all read"
@@ -16348,6 +17211,7 @@ function NotificationCenter({
                         !n.read && onMarkRead && /* @__PURE__ */ jsx(
                           "button",
                           {
+                            type: "button",
                             onClick: () => onMarkRead(n.id),
                             "aria-label": "Mark as read",
                             className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5",
@@ -16357,6 +17221,7 @@ function NotificationCenter({
                         onDismiss && /* @__PURE__ */ jsx(
                           "button",
                           {
+                            type: "button",
                             onClick: () => onDismiss(n.id),
                             "aria-label": "Dismiss",
                             className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5",
@@ -16520,6 +17385,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
                 /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     onClick: onClose,
                     className: "shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer -mt-ds-0.5",
                     "aria-label": "Close tour",
@@ -16539,6 +17405,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
                 current > 0 && /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     onClick: handlePrev,
                     className: cn(
                       "px-ds-3 py-ds-1.5 text-xs font-medium rounded-[var(--ds-radius-sm)]",
@@ -16552,6 +17419,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
                 /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     ref: nextRef,
                     onClick: handleNext,
                     className: cn(
@@ -16600,223 +17468,6 @@ function getPopoverPosition(rect, placement, padding) {
   top = Math.max(8, Math.min(top, window.innerHeight - popH - 8));
   return { top, left };
 }
-var variantStyles4 = {
-  default: "border-[var(--ds-border-default)] bg-[var(--ds-bg-surface)]",
-  success: "border-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
-  warning: "border-[var(--ds-status-warning)] bg-[var(--ds-status-warning-bg)]",
-  error: "border-[var(--ds-status-error)] bg-[var(--ds-status-error-bg)]"
-};
-var variantIcons = {
-  default: { name: "info", className: "text-[var(--ds-text-muted)]" },
-  success: { name: "check", className: "text-[var(--ds-status-success)]" },
-  warning: { name: "warning", className: "text-[var(--ds-status-warning)]" },
-  error: { name: "error", className: "text-[var(--ds-status-error)]" }
-};
-var TOAST_POSITION_CLASSES = {
-  "top-right": "top-[var(--ds-toast-inset-top)] right-[var(--ds-toast-inset-right)]",
-  "top-left": "top-[var(--ds-toast-inset-top)] left-[var(--ds-toast-inset-left)]",
-  "bottom-right": "bottom-[var(--ds-toast-inset-bottom-right)] right-[var(--ds-toast-inset-right)]",
-  "bottom-left": "bottom-[var(--ds-toast-inset-bottom-left)] left-[var(--ds-toast-inset-left)]",
-  "top-center": "top-[var(--ds-toast-inset-top)] left-1/2 -translate-x-1/2",
-  "bottom-center": "bottom-ds-4 left-1/2 -translate-x-1/2"
-};
-function Toast({ variant = "default", message, visible, onDismiss, duration = 5e3, pauseOnHover = false, action, position = "bottom-right", mode, container, inline = false }) {
-  const isMobile = useBreakpoint("sm");
-  const isCentered = position === "top-center" || position === "bottom-center";
-  const timerRef = useRef(void 0);
-  const startedAtRef = useRef(0);
-  const remainingRef = useRef(duration);
-  const onDismissRef = useLatest(onDismiss);
-  const startTimer = useCallback((ms) => {
-    const delay = ms ?? remainingRef.current;
-    remainingRef.current = delay;
-    startedAtRef.current = Date.now();
-    if (!Number.isFinite(delay) || delay <= 0) return;
-    timerRef.current = setTimeout(() => onDismissRef.current(), delay);
-  }, [onDismissRef]);
-  const clearTimer = useCallback(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      remainingRef.current -= Date.now() - startedAtRef.current;
-    }
-  }, []);
-  useEffect(() => {
-    if (!visible) return;
-    remainingRef.current = duration;
-    startTimer(duration);
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [visible, duration, startTimer]);
-  const handleMouseEnter = pauseOnHover ? () => {
-    clearTimer();
-  } : void 0;
-  const handleMouseLeave = pauseOnHover ? () => {
-    startTimer();
-  } : void 0;
-  if (!visible) return null;
-  const icon = variantIcons[variant];
-  const card = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: variant === "error" ? "alert" : "status",
-      "aria-live": variant === "error" ? "assertive" : "polite",
-      "data-mode": inline ? mode : void 0,
-      onMouseEnter: inline ? handleMouseEnter : void 0,
-      onMouseLeave: inline ? handleMouseLeave : void 0,
-      className: cn(
-        "flex items-center gap-ds-3 px-ds-4 py-ds-3",
-        isCentered ? "min-w-[360px] max-w-[560px]" : "min-w-[280px] max-w-[420px]",
-        "border-[length:var(--ds-border-width)]",
-        GLASS_DROPDOWN,
-        "rounded-[var(--ds-radius-md)]",
-        "text-sm text-[var(--ds-text-primary)]",
-        variantStyles4[variant]
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: icon.name, size: 18, className: cn("shrink-0", icon.className) }),
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children: message }),
-        action && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: action.onClick,
-            className: "shrink-0 text-xs font-semibold text-[var(--ds-accent-primary)] hover:underline cursor-pointer",
-            children: action.label
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onDismiss,
-            "aria-label": "Dismiss notification",
-            className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer shrink-0",
-            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
-          }
-        )
-      ]
-    }
-  );
-  if (inline) return card;
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-mode": mode,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        className: cn(
-          "fixed z-[var(--ds-z-toast)]",
-          isMobile ? "bottom-ds-4 left-ds-4 right-ds-4" : TOAST_POSITION_CLASSES[position]
-        ),
-        children: card
-      }
-    ),
-    container ?? document.body
-  );
-}
-var ToastContext = createContext(null);
-function useToast() {
-  const ctx = useContext(ToastContext);
-  if (!ctx) {
-    throw new Error("useToast must be used within <ToastProvider>: the app shell's (get_app_shell writes it around AppShell). A page outside the shell (sign-in, a public page) shows its messages inline instead: an Alert above the form, and each field's error below the field.");
-  }
-  return ctx;
-}
-function useToastOptional() {
-  return useContext(ToastContext);
-}
-var toastSeq = 0;
-function ToastProvider({ children, maxVisible = 1, position = "bottom-right", duration = 5e3, mode, pauseOnHover = true, coalesce = true }) {
-  const [queue, setQueue] = useState([]);
-  const isMobile = useBreakpoint("sm");
-  const dismiss = useCallback((id) => {
-    setQueue((q) => q.filter((t) => t.id !== id));
-  }, []);
-  const dismissAll = useCallback(() => setQueue([]), []);
-  const update = useCallback((id, message, options = {}) => {
-    setQueue((q) => q.map((t) => t.id === id ? { ...t, message, variant: options.variant ?? t.variant, duration: options.duration ?? t.duration, action: options.action ?? t.action } : t));
-  }, []);
-  const toast = useCallback((message, options = {}) => {
-    const id = options.id ?? `toast-${++toastSeq}`;
-    const entry = {
-      id,
-      message,
-      variant: options.variant ?? "default",
-      duration: options.duration ?? duration,
-      action: options.action,
-      key: options.key ?? options.variant ?? "default"
-    };
-    const slots = Math.max(1, maxVisible);
-    setQueue((q) => {
-      if (q.some((t) => t.id === id)) return q.map((t) => t.id === id ? entry : t);
-      if (coalesce && q.length >= slots) {
-        const waiting = q.findIndex((t, i) => i >= slots && t.key === entry.key);
-        if (waiting >= 0) {
-          const next = [...q];
-          next[waiting] = entry;
-          return next;
-        }
-      }
-      return [...q, entry];
-    });
-    return id;
-  }, [duration, maxVisible, coalesce]);
-  const api = useMemo(() => ({
-    toast,
-    success: (m, o) => toast(m, { ...o, variant: "success" }),
-    warning: (m, o) => toast(m, { ...o, variant: "warning" }),
-    error: (m, o) => toast(m, { ...o, variant: "error" }),
-    update,
-    dismiss,
-    dismissAll,
-    promise: async (promise, messages, options = {}) => {
-      const id = toast(messages.loading, { ...options, variant: "default", duration: Infinity });
-      try {
-        const value = await promise;
-        update(id, typeof messages.success === "function" ? messages.success(value) : messages.success, { variant: "success", duration });
-        return value;
-      } catch (err) {
-        update(id, typeof messages.error === "function" ? messages.error(err) : messages.error, { variant: "error", duration });
-        throw err;
-      }
-    }
-  }), [toast, update, dismiss, dismissAll, duration]);
-  const visible = queue.slice(0, Math.max(1, maxVisible));
-  const isTop = position.startsWith("top");
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: api, children: [
-    children,
-    visible.length > 0 && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-mode": mode,
-          className: cn(
-            "fixed z-[var(--ds-z-toast)] flex gap-ds-2 pointer-events-none",
-            isTop ? "flex-col" : "flex-col-reverse",
-            isMobile ? "bottom-ds-4 left-ds-4 right-ds-4" : TOAST_POSITION_CLASSES[position]
-          ),
-          children: visible.map((t) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
-            Toast,
-            {
-              inline: true,
-              visible: true,
-              variant: t.variant,
-              message: t.message,
-              duration: t.duration,
-              pauseOnHover,
-              action: t.action,
-              mode,
-              onDismiss: () => dismiss(t.id)
-            }
-          ) }, t.id))
-        }
-      ),
-      document.body
-    )
-  ] });
-}
 function firstKey(item) {
   if (item !== null && typeof item === "object") return "id" in item ? item.id : void 0;
   return item;
@@ -16879,9 +17530,10 @@ function usePagination(list, options = {}) {
   };
 }
 function useDestructiveAction(options) {
-  const { action, title, description, confirmLabel, typeToConfirm, onConfirm, onUndo, undoMessage, severity } = options;
+  const { action, title, description, confirmLabel, typeToConfirm, onConfirm, onUndo, doneMessage, undoMessage, restoredMessage, severity } = options;
   const preferences = useShellPreferences();
   const toast = useToastOptional();
+  const ledger = useContext(ToastLedgerCtx);
   const [open, setOpen] = useState(false);
   const [typed, setTyped] = useState("");
   const [busy, setBusy] = useState(false);
@@ -16898,28 +17550,66 @@ function useDestructiveAction(options) {
     setTyped("");
   };
   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);
     try {
-      await onConfirm();
+      const seen = await watch(onConfirm);
       close();
+      if (toast && !seen.problem && !seen.own) toast.success(done);
     } catch (err) {
       toast?.error(failureMessage(err));
     } finally {
       setBusy(false);
     }
   };
+  const undo = async (id) => {
+    const here = () => !!toast && (ledger?.has(id) ?? false);
+    try {
+      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) {
+      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 () => {
+        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;
-        toast.success(undoMessage ?? `${title.replace(/\?$/, "")} done`, { duration: seconds * 1e3, action: { label: "Undo", onClick: onUndo } });
+        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;
     }
@@ -16935,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 ",
@@ -16947,6 +17637,61 @@ function useDestructiveAction(options) {
   ) : null;
   return { run, element, open };
 }
+var PAST_TENSE = {
+  delete: "Deleted",
+  remove: "Removed",
+  archive: "Archived",
+  leave: "Left",
+  revoke: "Revoked",
+  disconnect: "Disconnected",
+  cancel: "Cancelled",
+  reset: "Reset",
+  clear: "Cleared",
+  discard: "Discarded",
+  unpublish: "Unpublished",
+  deactivate: "Deactivated",
+  disable: "Disabled",
+  uninstall: "Uninstalled",
+  unsubscribe: "Unsubscribed",
+  block: "Blocked",
+  ban: "Banned",
+  suspend: "Suspended",
+  close: "Closed",
+  end: "Ended",
+  stop: "Stopped",
+  "sign out": "Signed out",
+  "log out": "Logged out",
+  transfer: "Transferred",
+  merge: "Merged",
+  overwrite: "Overwritten",
+  replace: "Replaced",
+  erase: "Erased",
+  purge: "Purged",
+  wipe: "Wiped",
+  drop: "Dropped",
+  detach: "Detached",
+  unlink: "Unlinked",
+  expire: "Expired",
+  reject: "Rejected",
+  decline: "Declined"
+};
+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] ?? ""];
+  if (found) return found;
+  let dev = false;
+  try {
+    dev = process.env.NODE_ENV !== "production";
+  } catch {
+    dev = false;
+  }
+  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";
+}
 var SectionHeading = forwardRef(function SectionHeading2({
   title,
   description,
@@ -17087,6 +17832,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-export { Accordion, ActionPanel, ActionPanelGroup, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, Gantt, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useContentWidth, useDestructiveAction, useFittedLabels, useFormContext, usePagination, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, Gantt, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useContentWidth, useDestructiveAction, useFittedLabels, usePagination, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map