gridsmith-ui 0.18.0 → 0.20.0

package/dist/index.js

@@ -1,24 +1,26 @@
-import { Button, useAppShell, REACT_VERSION_PROBLEM, ControlSizeContext, useDirtyGuard, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-CIVSNXFG.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-CIVSNXFG.js';
-import { Skeleton } from './chunk-Z63OSN64.js';
-export { Skeleton } from './chunk-Z63OSN64.js';
+import { Button, useAppShell, REACT_VERSION_PROBLEM, ControlSizeContext, useOverlayMark, useDirtyGuard, OverlayMarkCtx, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-6MXHGH3D.js';
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-6MXHGH3D.js';
+import { Skeleton, TITLE_TEXT } from './chunk-NCIZQYXQ.js';
+export { Skeleton } from './chunk-NCIZQYXQ.js';
+import { useReportedChange, useOptionalFormContext, FormChangeCtx, FormCtx } from './chunk-XVB55M3N.js';
+export { useFormContext } from './chunk-XVB55M3N.js';
 import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, focusAfterRemoval, rovingTabStop, useGridKeyboard, useNonModalDialog, usePressMarks, useReturnFocus, useCloseOnFocusOut } from './chunk-JXANCXK6.js';
 export { useGridKeyboard } from './chunk-JXANCXK6.js';
-import { Link } from './chunk-XGSQOMEY.js';
-export { CodeBlock, Divider, Link } from './chunk-XGSQOMEY.js';
-import { Badge } from './chunk-PVTGMCVR.js';
-export { Badge } from './chunk-PVTGMCVR.js';
-import { inferColumnKinds, CardValue } from './chunk-OENJCGTJ.js';
+import { Link } from './chunk-EQDR57AM.js';
+export { CodeBlock, Divider, Link } from './chunk-EQDR57AM.js';
+import { Badge } from './chunk-XYDIBW3J.js';
+export { Badge } from './chunk-XYDIBW3J.js';
+import { inferColumnKinds, CardValue } from './chunk-JN37OVTP.js';
 import { SplitPaneCtx, useShellPreferences, TableCardCtx, PREFERENCE_HOUSE_DEFAULTS, preferenceActionKey } from './chunk-TKVTZWBN.js';
 export { PreferencesContext, preferenceActionKey, usePreferences } from './chunk-TKVTZWBN.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
-import { useTextOverflow, Tooltip, usePosition } from './chunk-EMCSARQO.js';
-export { Tooltip, useTextOverflow } from './chunk-EMCSARQO.js';
+import { useTextOverflow, Tooltip, usePosition } from './chunk-ILIODA7W.js';
+export { Tooltip, useTextOverflow } from './chunk-ILIODA7W.js';
 import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
 import { Icon } from './chunk-4LDYR7QP.js';
-import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING } from './chunk-4KVFH5KC.js';
+import { cn, GLASS_SURFACE, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING } from './chunk-M2QRNBDQ.js';
 import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, Children, isValidElement, useId, memo, useEffect, useImperativeHandle, Fragment as Fragment$1, cloneElement, useSyncExternalStore } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -115,6 +117,7 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
             return /* @__PURE__ */ jsxs(
               "button",
               {
+                type: "button",
                 "data-index": i,
                 role: "menuitem",
                 disabled: item.disabled,
@@ -184,7 +187,7 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
         ) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2", children: actions.map((action, i) => /* @__PURE__ */ jsx(
           Button,
           {
-            variant: action.variant === "destructive" ? "destructive" : "secondary",
+            variant: "secondary",
             size: "sm",
             onClick: action.onClick,
             children: action.label
@@ -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,11 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
     }
   );
 }
+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 +226,7 @@ var INPUT_TEXT = {
 function Input({ className, size: sizeProp, error = false, prefix, suffix, ...props }) {
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
+  const onChange = useReportedChange(props.onChange, props.value, valueOf);
   const 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 +262,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 +292,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, valueOf);
   const internalRef = useRef(null);
   const textareaRef = ref ?? internalRef;
   const resize = useCallback(() => {
@@ -324,7 +337,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 +361,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,6 +423,149 @@ function Toggle({ checked, onChange, label, disabled, error = false, layout = "f
     }
   );
 }
+function InlineFieldError({ message, id, className }) {
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      id,
+      role: "alert",
+      className: cn(
+        "flex items-center gap-ds-1.5 text-xs text-[var(--ds-status-error)]",
+        "mt-ds-1.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "error", size: 14, className: "shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: message })
+      ]
+    }
+  );
+}
+var FieldContext = createContext(null);
+function useField() {
+  return useContext(FieldContext);
+}
+function useFieldControl(own, options = {}) {
+  const field = useField();
+  const id = own.id ?? field?.controlId;
+  const invalid = !!own.error || own["aria-invalid"] === true || own["aria-invalid"] === "true" || !!field?.invalid;
+  const required = !!own.required || own["aria-required"] === true || own["aria-required"] === "true" || !!field?.required;
+  const noteId = options.requiredInDescription && required && id ? `${id}-required` : void 0;
+  const ids = [own["aria-describedby"], field?.describedBy, noteId].filter(Boolean).join(" ").split(/\s+/).filter(Boolean);
+  return {
+    id,
+    labelId: own["aria-labelledby"] ?? field?.labelId,
+    describedBy: [...new Set(ids)].join(" ") || void 0,
+    invalid,
+    required,
+    requiredNote: noteId ? /* @__PURE__ */ jsx("span", { id: noteId, hidden: true, children: "Required" }) : null
+  };
+}
+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`;
+  const errorId = `${id}-error`;
+  const form = useOptionalFormContext();
+  const mode = form?.validationMode ?? "onBlur";
+  const [localError, setLocalError] = useState(void 0);
+  const [left, setLeft] = useState(false);
+  const checkError = validate ? form ? form.errors[id] : localError : void 0;
+  const child = typeof children === "function" ? null : Children.only(children);
+  const childProps = child && isValidElement(child) ? child.props : null;
+  const latest = useLatest({ validate, childProps, id, mode, left, showing: !!checkError, form });
+  const check = useCallback(() => {
+    const { validate: fn, childProps: props, id: controlId } = latest.current;
+    if (!fn) return void 0;
+    const value = props && "value" in props ? props.value : props && "checked" in props ? props.checked : document.getElementById(controlId)?.value;
+    const message = fn(value);
+    return typeof message === "string" && message.length > 0 ? message : void 0;
+  }, [latest]);
+  const show = useCallback((message) => {
+    const { form: f, id: controlId } = latest.current;
+    if (f) f.setError(controlId, message);
+    else setLocalError(message);
+  }, [latest]);
+  const register = form?.register;
+  const checks = !!validate;
+  useEffect(() => register && checks ? register(id, check) : void 0, [register, checks, id, check]);
+  const leaving = useRef(null);
+  useEffect(() => () => {
+    if (leaving.current) clearTimeout(leaving.current);
+  }, []);
+  const onFocusCapture = () => {
+    if (leaving.current) {
+      clearTimeout(leaving.current);
+      leaving.current = null;
+    }
+  };
+  const onBlurCapture = () => {
+    if (!validate) return;
+    if (leaving.current) clearTimeout(leaving.current);
+    leaving.current = setTimeout(() => {
+      leaving.current = null;
+      setLeft(true);
+      if (latest.current.mode !== "onSubmit" || latest.current.showing) show(check());
+    }, 0);
+  };
+  const recheck = () => {
+    if (!validate) return;
+    setTimeout(() => {
+      const { mode: m, left: wasLeft, showing } = latest.current;
+      if (m === "onChange" && wasLeft || showing) show(check());
+    }, 0);
+  };
+  const shownError = typeof error === "string" && error.length > 0 ? error : checkError;
+  const hasError = typeof shownError === "string" && shownError.length > 0;
+  const describedBy = [hint ? hintId : null, hasError ? errorId : null].filter(Boolean).join(" ") || void 0;
+  const labelId = `${id}-label`;
+  const fieldContext = useMemo(() => ({ controlId: id, labelId, describedBy, invalid: hasError, required: !!required }), [id, labelId, describedBy, hasError, required]);
+  const controlProps = {
+    id,
+    "aria-describedby": describedBy,
+    ...hasError ? { "aria-invalid": true, error: true } : {},
+    ...required ? { "aria-required": true, required: true } : {}
+  };
+  let control;
+  if (typeof children === "function") {
+    control = children(controlProps);
+  } else {
+    if (!child || !isValidElement(child)) throw new Error("Field expects a single form control as its child");
+    const isNative = typeof child.type === "string";
+    const { error: errorFlag, ...ariaOnly } = controlProps;
+    const ownOnChange = childProps?.onChange;
+    const onChange = validate && !isNative ? { onChange: (...args) => {
+      ownOnChange?.(...args);
+      recheck();
+    } } : {};
+    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(
+      "div",
+      {
+        className: cn("flex flex-col gap-ds-1.5 max-w-[var(--ds-form-max,none)]", className),
+        ...validate ? { onFocusCapture, onBlurCapture, onInputCapture: recheck } : {},
+        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 }),
+          hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-[var(--ds-text-muted)]", children: hint }),
+          hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: shownError, className: "mt-0" })
+        ]
+      }
+    )
+  );
+}
 var DROPDOWN_HEIGHT = {
   sm: "px-ds-2 py-ds-1 text-xs h-[var(--ds-control-height-sm)]",
   md: "px-ds-3 py-ds-2 text-sm h-[var(--ds-control-height-md)]",
@@ -415,7 +574,7 @@ var DROPDOWN_HEIGHT = {
 function Dropdown({
   options,
   value,
-  onChange,
+  onChange: onChangeProp,
   label,
   disabled,
   placeholder = "Select...",
@@ -427,9 +586,17 @@ function Dropdown({
   container,
   error = false,
   showChips = true,
-  "aria-label": ariaLabel
+  "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 });
+  const triggerId = control.id ?? generatedId;
+  const labelSpanId = `${triggerId}-label`;
+  const labelledBy = control.labelId ? `${control.labelId} ${triggerId}` : label && !ariaLabel ? `${labelSpanId} ${triggerId}` : void 0;
+  const invalid = control.invalid;
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -597,11 +764,13 @@ function Dropdown({
   const displayLabel = multiple ? selectedValues.length > 0 ? `${selectedValues.length} selected` : placeholder : options.find((o) => o.id === selectedValues[0])?.label ?? placeholder;
   const { ref: overflowRef, isTruncated } = useTextOverflow({ lines: 1, content: displayLabel });
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative", className), children: [
-    label && /* @__PURE__ */ jsx("span", { className: "block mb-ds-1.5 text-sm font-medium text-[var(--ds-text-secondary)]", children: label }),
+    label && /* @__PURE__ */ jsx("span", { id: labelSpanId, className: "block mb-ds-1.5 text-sm font-medium text-[var(--ds-text-secondary)]", children: label }),
+    control.requiredNote,
     /* @__PURE__ */ jsxs(
       "button",
       {
         ref: triggerRef,
+        id: triggerId,
         type: "button",
         onClick: () => !disabled && setOpen(!open),
         onKeyDown: (e) => {
@@ -612,22 +781,24 @@ function Dropdown({
           }
         },
         disabled,
-        "aria-invalid": error || void 0,
+        "aria-invalid": invalid || void 0,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
-        "aria-label": ariaLabel,
+        "aria-label": labelledBy ? void 0 : ariaLabel,
+        "aria-labelledby": labelledBy,
+        "aria-describedby": control.describedBy,
         className: cn(
           "w-full flex items-center justify-between gap-ds-2",
           DROPDOWN_HEIGHT[size],
           "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
           "border-[length:var(--ds-border-width)]",
-          error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors",
-          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
-          open && (error ? ERROR_ACTIVE_RING : ACTIVE_RING),
-          error ? ERROR_FOCUS_RING : FOCUS_RING,
+          !invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
+          open && (invalid ? ERROR_ACTIVE_RING : ACTIVE_RING),
+          invalid ? ERROR_FOCUS_RING : FOCUS_RING,
           "cursor-pointer disabled:cursor-not-allowed disabled:opacity-disabled",
           !selectedValues.length && "text-[var(--ds-text-muted)]"
         ),
@@ -642,9 +813,10 @@ function Dropdown({
         "div",
         {
           ref: menuRef,
+          tabIndex: -1,
           onClick: (e) => e.stopPropagation(),
           className: cn(
-            "fixed z-[var(--ds-z-popover)]",
+            "fixed z-[var(--ds-z-popover)] outline-none",
             "bg-[var(--ds-bg-surface-elevated)]",
             "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -704,6 +876,7 @@ function Dropdown({
             /* @__PURE__ */ jsx(
               "button",
               {
+                type: "button",
                 "data-chip-remove": "",
                 onClick: () => {
                   pendingChipFocus.current = { index: i, value: v };
@@ -771,8 +944,10 @@ 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 }) {
+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";
   const [open, setOpen] = useState(false);
   useOverlayLayer(open);
@@ -883,12 +1058,12 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
           "flex items-center",
           CONTROL_HEIGHT[size],
           "border-[length:var(--ds-border-width)]",
-          error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          control.invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors duration-[var(--ds-transition-speed)]",
-          !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
-          error ? ERROR_HAS_FOCUS_RING : HAS_FOCUS_RING,
+          !control.invalid && !disabled && "hover:border-[var(--ds-input-border-hover)]",
+          control.invalid ? ERROR_HAS_FOCUS_RING : HAS_FOCUS_RING,
           disabled && "opacity-disabled pointer-events-none"
         ),
         children: [
@@ -898,8 +1073,12 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
             {
               ref: mergeInputRefs,
               type: "text",
+              id: control.id,
               role: "combobox",
-              "aria-invalid": error || void 0,
+              "aria-labelledby": wiring["aria-labelledby"],
+              "aria-describedby": control.describedBy,
+              "aria-invalid": control.invalid || void 0,
+              "aria-required": control.required || void 0,
               "aria-expanded": open,
               "aria-controls": listboxId,
               "aria-autocomplete": "list",
@@ -964,6 +1143,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,
@@ -995,7 +1175,8 @@ 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 }) {
+  const onChange = useReportedChange(onChangeProp, checked);
   const internalRef = useRef(null);
   const dims = CHECKBOX_SIZES[size];
   const mergedRef = useCallback(
@@ -1087,7 +1268,8 @@ 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 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const groupRef = useRef(null);
   const groupId = useId();
   const enabledOptions = options.filter((o) => !o.disabled);
@@ -1312,7 +1494,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 }) {
+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);
@@ -1323,7 +1506,8 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const panelRef = useRef(null);
   const gridRef = useRef(null);
   const generatedId = useId();
-  const inputId = id ?? generatedId;
+  const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
+  const inputId = control.id ?? generatedId;
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const year = viewDate.getFullYear();
   const month = viewDate.getMonth();
@@ -1508,6 +1692,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
     label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-[var(--ds-text-primary)] mb-ds-1", children: label }),
+    control.requiredNote,
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1515,9 +1700,11 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
         "data-date-field": "",
         role: "group",
         id: inputId,
-        "aria-label": label ?? "Date",
+        "aria-label": control.labelId ? void 0 : label ?? "Date",
+        "aria-labelledby": control.labelId,
+        "aria-describedby": control.describedBy,
         "aria-description": !value ? placeholder : void 0,
-        "aria-invalid": error || typedInvalid || void 0,
+        "aria-invalid": control.invalid || typedInvalid || void 0,
         onPaste: (e) => {
           const text = e.clipboardData.getData("text");
           if (text) {
@@ -1530,12 +1717,12 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
           CONTROL_HEIGHT2[size],
           TEXT_SIZE2[size],
           "border-[length:var(--ds-border-width)]",
-          error || typedInvalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          control.invalid || typedInvalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors",
           "px-ds-3 py-ds-2",
-          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)] focus-within:border-[var(--ds-input-border-hover)]",
+          !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)] focus-within:border-[var(--ds-input-border-hover)]",
           open && ACTIVE_RING,
           disabled && "opacity-disabled cursor-not-allowed",
           "text-[var(--ds-text-primary)]"
@@ -1592,8 +1779,9 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
           ref: panelRef,
           role: "dialog",
           "aria-label": "Choose a date",
+          tabIndex: -1,
           className: cn(
-            "fixed z-[var(--ds-z-popover)] w-[280px]",
+            "fixed z-[var(--ds-z-popover)] w-[280px] outline-none",
             "bg-[var(--ds-bg-surface-elevated)]",
             "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -1912,7 +2100,7 @@ var DEFAULT_DATE_RANGE_PRESETS = [
 ];
 function DateRangePicker({
   value,
-  onChange,
+  onChange: onChangeProp,
   placeholder = "Pick a date range",
   disabled,
   error = false,
@@ -1925,8 +2113,10 @@ function DateRangePicker({
   max,
   presets = DEFAULT_DATE_RANGE_PRESETS,
   weekStartsOn = 0,
-  size: sizeProp
+  size: sizeProp,
+  ...wiring
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
@@ -1935,7 +2125,9 @@ function DateRangePicker({
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
   const generatedId = useId();
-  const triggerId = id ?? generatedId;
+  const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
+  const triggerId = control.id ?? generatedId;
+  const labelledBy = control.labelId ? `${control.labelId} ${triggerId}` : void 0;
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const today = useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
   const dayNames = getOrderedDayNamesShort(weekStartsOn);
@@ -2018,6 +2210,7 @@ function DateRangePicker({
   const summary = value.start && value.end ? `${fmt(value.start)} \u2013 ${fmt(value.end)}` : value.start ? `${fmt(value.start)} \u2013 \u2026` : null;
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
     label && /* @__PURE__ */ jsx("label", { htmlFor: triggerId, className: "block text-sm font-medium text-[var(--ds-text-primary)] mb-ds-1", children: label }),
+    control.requiredNote,
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -2026,7 +2219,9 @@ function DateRangePicker({
         type: "button",
         onClick: () => !disabled && setOpen((o) => !o),
         disabled,
-        "aria-invalid": error || void 0,
+        "aria-labelledby": labelledBy,
+        "aria-describedby": control.describedBy,
+        "aria-invalid": control.invalid || void 0,
         "aria-haspopup": "dialog",
         "aria-expanded": open,
         className: cn(
@@ -2034,14 +2229,14 @@ function DateRangePicker({
           CONTROL_HEIGHT3[size],
           TEXT_SIZE3[size],
           "border-[length:var(--ds-border-width)]",
-          error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          control.invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors cursor-pointer",
           "px-ds-3 py-ds-2",
-          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
-          open && (error ? ERROR_ACTIVE_RING : ACTIVE_RING),
-          error ? ERROR_FOCUS_RING : FOCUS_RING,
+          !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
+          open && (control.invalid ? ERROR_ACTIVE_RING : ACTIVE_RING),
+          control.invalid ? ERROR_FOCUS_RING : FOCUS_RING,
           disabled && "opacity-disabled cursor-not-allowed",
           summary ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
         ),
@@ -2058,8 +2253,9 @@ function DateRangePicker({
           ref: panelRef,
           role: "dialog",
           "aria-label": "Choose a date range",
+          tabIndex: -1,
           className: cn(
-            "fixed z-[var(--ds-z-popover)] flex",
+            "fixed z-[var(--ds-z-popover)] flex outline-none",
             "bg-[var(--ds-bg-surface-elevated)]",
             "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -2264,7 +2460,7 @@ function Progress({ value, max = 100, variant = "default", size = "md", indeterm
           {
             className: cn(
               "h-full rounded-[var(--ds-radius-full)]",
-              indeterminate ? "animate-[indeterminate_1.5s_ease-in-out_infinite] w-1/3" : "transition-all",
+              indeterminate ? "animate-[gs-indeterminate_1.5s_ease-in-out_infinite] w-1/3" : "transition-all",
               variantFills[variant]
             ),
             style: indeterminate ? void 0 : { width: `${pct}%` }
@@ -2278,91 +2474,33 @@ function Progress({ value, max = 100, variant = "default", size = "md", indeterm
     ] })
   ] });
 }
-function InlineFieldError({ message, id, className }) {
-  return /* @__PURE__ */ jsxs(
-    "p",
-    {
-      id,
-      role: "alert",
-      className: cn(
-        "flex items-center gap-ds-1.5 text-xs text-[var(--ds-status-error)]",
-        "mt-ds-1.5",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: "error", size: 14, className: "shrink-0" }),
-        /* @__PURE__ */ jsx("span", { children: message })
-      ]
-    }
-  );
-}
-var FieldContext = createContext(null);
-function useField() {
-  return useContext(FieldContext);
-}
-function Field({ label, children, hint, error, required, labelAction, id: idProp, className }) {
-  const generated = useId();
-  const id = idProp ?? `field-${generated}`;
-  const hintId = `${id}-hint`;
-  const errorId = `${id}-error`;
-  const hasError = typeof error === "string" && error.length > 0;
-  const describedBy = [hint ? hintId : null, hasError ? errorId : null].filter(Boolean).join(" ") || void 0;
-  const labelId = `${id}-label`;
-  const fieldContext = useMemo(() => ({ controlId: id, labelId, describedBy }), [id, labelId, describedBy]);
-  const controlProps = {
-    id,
-    "aria-describedby": describedBy,
-    ...hasError ? { "aria-invalid": true, error: true } : {},
-    ...required ? { "aria-required": true, required: true } : {}
-  };
-  let control;
-  if (typeof children === "function") {
-    control = children(controlProps);
-  } else {
-    const child = Children.only(children);
-    if (!isValidElement(child)) throw new Error("Field expects a single form control as its child");
-    const isNative = typeof child.type === "string";
-    const { error: errorFlag, ...ariaOnly } = controlProps;
-    control = cloneElement(child, isNative ? ariaOnly : { ...ariaOnly, ...errorFlag ? { error: true } : {} });
-  }
-  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("div", { className: cn("flex flex-col gap-ds-1.5 max-w-[var(--ds-form-max,none)]", className), 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: "*" })
-        ] }),
-        labelAction
-      ] }),
-      /* @__PURE__ */ jsx(FieldContext.Provider, { value: fieldContext, children: control }),
-      hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-[var(--ds-text-muted)]", children: hint }),
-      hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: error, className: "mt-0" })
-    ] })
-  );
-}
 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.";
+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`;
@@ -2372,37 +2510,100 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
   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: Math.max(0, Math.min(100, percent)) });
+        }
+      }));
+    } catch (err) {
+      attempt = Promise.reject(err);
+    }
+    attempt.then(() => settle({ status: "done", progress: 100 }), (err) => settle({ status: "error", error: failureOf(err) }));
   };
+  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(running);
+  useEffect(() => {
+    if (!busy || !overlayMark) return;
+    return overlayMark.hold();
+  }, [busy, overlayMark]);
+  const [heard, setHeard] = useState("");
+  const [seen, setSeen] = useState(() => new Map(shown.map((i) => [i.id, i.status])));
+  if (shown.length !== seen.size || shown.some((i) => seen.get(i.id) !== i.status)) {
+    const said = [];
+    for (const item of shown) {
+      const before = seen.get(item.id);
+      if (!before || before === item.status) continue;
+      if (item.status === "done") said.push(`${item.name} uploaded`);
+      else if (item.status === "error") said.push(`${item.name} didn't upload: ${item.error ?? "the upload failed"}`);
+    }
+    setSeen(new Map(shown.map((i) => [i.id, i.status])));
+    if (said.length) setHeard(said.join(". "));
+  }
+  const pendingFocus = useRef(null);
+  useEffect(() => {
+    const index = pendingFocus.current;
+    if (index === null) return;
+    pendingFocus.current = null;
+    const rows = Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).map((row) => row.querySelector("button")).filter((b) => !!b);
+    focusAfterRemoval(rows, index, inputRef.current);
+  }, [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) => {
@@ -2412,10 +2613,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 = 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 = 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 = !controlled || !!onRemove;
   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 }),
@@ -2471,33 +2693,43 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
       ),
       rejected && /* @__PURE__ */ jsx(InlineFieldError, { id: rejectedId, message: rejected, 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 words = item.status === "queued" ? "Waiting" : item.status === "uploading" ? `${Math.round(item.progress ?? 0)}%` : item.status === "done" ? "Uploaded" : item.status === "error" ? "Failed" : null;
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "data-upload-status": item.status,
+          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: item.progress ?? 0, size: "sm", label: `Uploading ${item.name}`, className: "mt-ds-1" }),
+              item.status === "error" && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-xs text-[var(--ds-status-error)]", children: item.error ?? "The upload didn't work." })
+            ] }),
+            item.status === "done" && /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, className: "text-[var(--ds-status-success)] shrink-0", "aria-hidden": "true" }),
+            running(item) && canCancel && // the visible word starts the name, which says which file (WCAG 2.5.3)
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => cancel(item), "aria-label": `Cancel ${item.name}`, children: "Cancel" }),
+            item.status === "error" && canRetry && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => retry(item), "aria-label": `Retry ${item.name}`, children: "Retry" }),
+            !running(item) && canRemove && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => remove(item), "aria-label": `Remove ${item.name}`, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
+          ]
+        },
+        item.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx("p", { role: "status", className: "sr-only", children: heard })
   ] });
 }
 function SliderRange({
   value,
-  onChange,
+  onChange: onChangeProp,
   min = 0,
   max = 100,
   step = 1,
@@ -2512,6 +2744,7 @@ function SliderRange({
   trackStyle,
   formatValue
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const field = useField();
   const ownId = useId();
   const showLabel = label != null && !field;
@@ -2717,7 +2950,7 @@ function parseTime(value) {
 }
 function TimePicker({
   value,
-  onChange,
+  onChange: onChangeProp,
   use24Hour = false,
   minuteStep = 15,
   disabled,
@@ -2726,9 +2959,12 @@ function TimePicker({
   container,
   error = false,
   id,
-  size: sizeProp
+  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";
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
@@ -2912,15 +3148,18 @@ function TimePicker({
     return segs[k] === null ? spec.placeholder : pad2(segs[k]);
   };
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
+    control.requiredNote,
     /* @__PURE__ */ jsxs(
       "div",
       {
         ref: triggerRef,
         "data-time-field": "",
         role: "group",
-        id,
-        "aria-label": "Time",
-        "aria-invalid": error || void 0,
+        id: control.id,
+        "aria-label": control.labelId ? void 0 : "Time",
+        "aria-labelledby": control.labelId,
+        "aria-describedby": control.describedBy,
+        "aria-invalid": control.invalid || void 0,
         onPaste: (e) => {
           const text = e.clipboardData.getData("text");
           if (text) {
@@ -2933,12 +3172,12 @@ function TimePicker({
           CONTROL_HEIGHT4[size],
           TEXT_SIZE4[size],
           "border-[length:var(--ds-border-width)]",
-          error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          control.invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors",
           "px-ds-3 py-ds-2",
-          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)] focus-within:border-[var(--ds-input-border-hover)]",
+          !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)] focus-within:border-[var(--ds-input-border-hover)]",
           open && ACTIVE_RING,
           disabled && "opacity-disabled cursor-not-allowed",
           "text-[var(--ds-text-primary)]"
@@ -3019,9 +3258,10 @@ function TimePicker({
           id: listboxId,
           role: "dialog",
           "aria-label": "Choose a time",
+          tabIndex: -1,
           onKeyDown: handlePanelKeyDown,
           className: cn(
-            "fixed z-[var(--ds-z-popover)]",
+            "fixed z-[var(--ds-z-popover)] outline-none",
             "bg-[var(--ds-bg-surface-elevated)]",
             GLASS_DROPDOWN,
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -3101,7 +3341,7 @@ var sizes = {
 };
 function NumberInput({
   value,
-  onChange,
+  onChange: onChangeProp,
   min = -Infinity,
   max = Infinity,
   step = 1,
@@ -3115,6 +3355,7 @@ function NumberInput({
   allowDecimals,
   id
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const intervalRef = useRef(void 0);
@@ -3133,13 +3374,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(
@@ -3181,7 +3422,7 @@ function NumberInput({
       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]);
@@ -3422,7 +3663,7 @@ var Tag = forwardRef(function Tag2({
 });
 function TagInput({
   value,
-  onChange,
+  onChange: onChangeProp,
   placeholder = "Add a tag...",
   maxTags = Infinity,
   disabled = false,
@@ -3431,6 +3672,7 @@ function TagInput({
   id,
   "aria-label": ariaLabel
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const [input, setInput] = useState("");
   const inputRef = useRef(null);
   const addTag = useCallback(
@@ -3556,7 +3798,7 @@ var sizes2 = {
 };
 function PinInput({
   value,
-  onChange,
+  onChange: onChangeProp,
   length = 6,
   mask = false,
   disabled = false,
@@ -3565,6 +3807,7 @@ function PinInput({
   error = false,
   id
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const inputsRef = useRef([]);
@@ -3700,7 +3943,7 @@ function StarIcon({ filled, half, size }) {
 }
 function Rating({
   value,
-  onChange,
+  onChange: onChangeProp,
   max = 5,
   allowHalf = false,
   readOnly = false,
@@ -3708,15 +3951,16 @@ function Rating({
   className,
   error = false
 }) {
+  const onChange = useReportedChange(onChangeProp, value);
   const [hoverValue, setHoverValue] = useState(null);
   const displayValue = hoverValue ?? value;
   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) => {
@@ -3730,7 +3974,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);
@@ -3854,13 +4098,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);
@@ -4101,6 +4346,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",
@@ -4125,6 +4371,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)]",
@@ -4145,6 +4392,7 @@ var Alert = forwardRef(function Alert2({
             /* @__PURE__ */ jsxs(
               "button",
               {
+                type: "button",
                 onClick: () => setDetailsExpanded(!detailsExpanded),
                 "aria-expanded": detailsExpanded,
                 className: cn(
@@ -4172,6 +4420,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",
@@ -4182,6 +4431,12 @@ var Alert = forwardRef(function Alert2({
     }
   );
 });
+function controlsOf(form) {
+  if (!form) return "";
+  const controls = form.querySelectorAll("input, select, textarea, [role='combobox'], [role='radiogroup'], [role='checkbox'], [role='switch'], [role='slider'], [role='spinbutton'], [contenteditable='true']");
+  return Array.from(controls).map((el) => el.id || el.getAttribute("name") || el.getAttribute("role") || el.tagName).join("|");
+}
+var isThenable = (value) => !!value && typeof value.then === "function";
 function stampFormId(node, formId) {
   return Children.map(node, (child) => {
     if (!isValidElement(child)) return child;
@@ -4189,23 +4444,21 @@ function stampFormId(node, formId) {
     return cloneElement(child, { form: formId });
   });
 }
-var FormCtx = createContext(null);
-function useFormContext() {
-  const ctx = useContext(FormCtx);
-  if (!ctx) throw new Error("useFormContext must be used within FormWrapper");
-  return ctx;
-}
 function collectInvalidFields(form) {
   const out = [];
   for (const el of Array.from(form.querySelectorAll("[aria-invalid='true']"))) {
     const id = el.id || "";
     const label = id && form.querySelector(`label[for="${CSS.escape(id)}"]`)?.textContent?.replace(/\*\s*$/, "").trim() || el.getAttribute("aria-label") || el.closest("[data-field]")?.querySelector("label")?.textContent?.trim() || id || "A field";
-    const described = (el.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
-    const message = described.map((d) => document.getElementById(d)?.textContent?.trim()).find((t) => t && /error|invalid|required|must|enter|choose|select|please/i.test(t)) ?? described.map((d) => document.getElementById(d)?.textContent?.trim()).filter(Boolean).pop() ?? "Needs attention";
+    const described = (el.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean).map((d) => document.getElementById(d)).filter((d) => !!d);
+    const message = described.find((d) => d.getAttribute("role") === "alert")?.textContent?.trim() || described.map((d) => d.textContent?.trim()).find((t) => t && t !== "Required" && /error|invalid|required|must|enter|choose|select|please/i.test(t)) || described.map((d) => d.textContent?.trim()).filter(Boolean).pop() || "Needs attention";
     out.push({ id, label, message });
   }
   return out;
 }
+function focusTarget(el) {
+  if (el.tabIndex >= 0 || /^(?:INPUT|SELECT|TEXTAREA|BUTTON)$/.test(el.tagName)) return el;
+  return el.querySelector("[aria-checked='true'], [aria-selected='true']:not([tabindex='-1'])") ?? el.querySelector("input, select, textarea, button, [tabindex]:not([tabindex='-1'])") ?? el;
+}
 function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions: actionsProp, actionsAlign: actionsAlignProp, onCancel, cancelLabel = "Cancel", focusFirstError = true, errorSummary = true, className, ref }) {
   const preferences = useShellPreferences();
   const validationMode = validationModeProp ?? preferences.validationTiming ?? "onSubmit";
@@ -4240,27 +4493,65 @@ 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 = overlayMark ? overlayMark.report : null;
+  const [savedCheck, setSavedCheck] = useState(null);
+  useEffect(() => {
+    if (!savedCheck) return;
+    const form = formRef.current;
+    if (form && !form.querySelector("[aria-invalid='true']") && controlsOf(form) === savedCheck.controls) overlayMark?.clear();
+  }, [savedCheck, overlayMark]);
   useEffect(() => {
     if (pendingSubmit.current && submitted) {
       pendingSubmit.current = false;
-      onSubmitRef.current(errorsRef.current);
+      const form = formRef.current;
+      const passed = Object.keys(errorsRef.current).length === 0 && !form?.querySelector("[aria-invalid='true']");
+      const controls = controlsOf(form);
+      const result = onSubmitRef.current(errorsRef.current);
+      if (!passed || !overlayMark) return;
+      if (isThenable(result)) {
+        result.then(() => overlayMark.clear(), () => {
+        });
+      } else {
+        setSavedCheck({ controls });
+      }
     }
-  }, [submitted, submitCount, errors, errorsRef, onSubmitRef]);
+  }, [submitted, submitCount, errors, errorsRef, onSubmitRef, overlayMark]);
+  const submittedRef = useLatest(submitted);
+  const errorSummaryRef = useLatest(errorSummary);
+  const summaryRef = useRef(null);
+  const pendingSummaryFocus = useRef(false);
+  const focusSummary = useCallback(() => {
+    const el = summaryRef.current;
+    if (!el) return;
+    if (typeof el.scrollIntoView === "function") el.scrollIntoView({ block: "center", behavior: "smooth" });
+    el.focus({ preventScroll: true });
+  }, []);
   const settle = useCallback(() => {
     const form = formRef.current;
     if (!form) return;
     const invalid = collectInvalidFields(form);
-    const next = invalid.length >= 2 ? invalid : [];
+    const next = submittedRef.current && invalid.length >= 2 ? invalid : [];
     setSummary((prev) => prev.length === next.length && prev.every((f, i) => f.id === next[i].id && f.message === next[i].message && f.label === next[i].label) ? prev : next);
     if (pendingFocus.current && invalid.length > 0) {
       pendingFocus.current = false;
+      if (errorSummaryRef.current && next.length >= 2) {
+        if (summaryRef.current) focusSummary();
+        else pendingSummaryFocus.current = true;
+        return;
+      }
       const first = form.querySelector("[aria-invalid='true']");
       if (first) {
         if (typeof first.scrollIntoView === "function") first.scrollIntoView({ block: "center", behavior: "smooth" });
-        first.focus({ preventScroll: true });
+        focusTarget(first).focus({ preventScroll: true });
       }
     }
-  }, []);
+  }, [submittedRef, errorSummaryRef, focusSummary]);
+  useLayoutEffect(() => {
+    if (!pendingSummaryFocus.current || summary.length < 2) return;
+    pendingSummaryFocus.current = false;
+    focusSummary();
+  }, [summary, focusSummary]);
   useLayoutEffect(() => {
     if (!submitted) return;
     settle();
@@ -4279,7 +4570,29 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     pendingFocus.current = false;
   }, []);
   const setError = useCallback((field, message) => {
-    setErrors((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) => {
+    checks.current.set(field, check);
+    return () => {
+      if (checks.current.get(field) !== check) return;
+      checks.current.delete(field);
+      setErrors((prev) => {
+        if (!(field in prev)) return prev;
+        const next = { ...prev };
+        delete next[field];
+        return next;
+      });
+    };
   }, []);
   const clearErrors = useCallback(() => {
     setErrors({});
@@ -4289,6 +4602,18 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
   const handleSubmit = useCallback(
     (e) => {
       e.preventDefault();
+      if (checks.current.size > 0) {
+        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;
       setSubmitted(true);
@@ -4301,7 +4626,7 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     const el = id ? document.getElementById(id) : null;
     if (el) {
       el.scrollIntoView?.({ block: "center" });
-      el.focus();
+      focusTarget(el).focus();
     }
   };
   const summaryNode = errorSummary && summary.length >= 2 ? typeof errorSummary === "function" ? errorSummary(summary) : /* @__PURE__ */ jsx(Alert, { variant: "error", title: `${summary.length} fields need attention`, className: "mb-ds-4", children: /* @__PURE__ */ jsx("ul", { className: "list-disc pl-ds-5 flex flex-col gap-ds-1", children: summary.map((f) => /* @__PURE__ */ jsxs("li", { children: [
@@ -4310,22 +4635,67 @@ 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 }, 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", { "data-form-error-summary": "", children: summaryNode }),
+  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 pending = useRef(null);
+  const firstFields = () => Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).map((row) => row.querySelector(FOCUSABLE2)).filter((el) => !!el);
+  useEffect(() => {
+    const next = pending.current;
+    if (!next) return;
+    pending.current = null;
+    const fields = firstFields();
+    if (next.kind === "add") fields[fields.length - 1]?.focus();
+    else focusAfterRemoval(fields, next.index, addRef.current);
+  }, [items]);
+  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", index };
+          onRemove(id);
+        }, children: "Remove" })
+      ] }, id);
+    }) }),
+    canAdd && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { ref: addRef, type: "button", variant: "secondary", onClick: () => {
+      pending.current = { kind: "add" };
+      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);
   const [checkedAvailable, setCheckedAvailable] = useState(/* @__PURE__ */ new Set());
   const [checkedSelected, setCheckedSelected] = useState(/* @__PURE__ */ new Set());
   const [searchLeft, setSearchLeft] = useState("");
@@ -4407,6 +4777,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",
@@ -4417,6 +4788,7 @@ function TransferList({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: moveRight,
           disabled: !checkedAvailable.size,
           "aria-label": isStacked ? "Move selected down" : "Move selected right",
@@ -4427,6 +4799,7 @@ function TransferList({
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: moveLeft,
           disabled: !checkedSelected.size,
           "aria-label": isStacked ? "Move selected up" : "Move selected left",
@@ -4437,6 +4810,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",
@@ -4568,66 +4942,10 @@ 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",
-  lg: "h-12 w-12 text-base"
+var sizeStyles2 = {
+  sm: "h-8 w-8 text-xs",
+  md: "h-10 w-10 text-sm",
+  lg: "h-12 w-12 text-base"
 };
 var paletteStyles = {
   1: "bg-[var(--ds-palette-1-bg,var(--ds-bg-muted))] text-[var(--ds-palette-1-text,var(--ds-text-secondary))]",
@@ -4646,13 +4964,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)]",
@@ -4664,13 +4992,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 ?? ""),
@@ -4692,20 +5022,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,
@@ -4714,6 +5038,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);
@@ -4909,11 +5234,36 @@ function MentionInput({
 }
 var HEADER_LAYOUT = {
   row: "flex flex-wrap items-start justify-between gap-ds-4",
-  block: "flex flex-col space-y-ds-1.5 grow basis-1/2 [min-width:min-content] break-words",
-  titleLeads: "grow basis-1/2 max-w-max [min-width:min-content] break-words",
+  block: "flex flex-col space-y-ds-1.5 grow basis-1/2 break-words max-w-full has-[[data-title-one-line]]:min-w-0",
+  titleLeads: "grow basis-1/2 max-w-max break-words has-[[data-title-one-line]]:min-w-0",
+  floorOff: "min-w-0",
   actions: "flex items-center gap-ds-2 shrink-0 ml-auto",
   below: "mt-ds-1.5"
 };
+function useTitleFloorFits(rowRef, active) {
+  const [fits, setFits] = useState(true);
+  useLayoutEffect(() => {
+    const row = rowRef.current;
+    if (!active || !row) return;
+    const measure = () => {
+      const title = row.querySelector("h1, h2, h3, h4, h5, h6");
+      if (!title) return;
+      const width = title.style.width;
+      title.style.width = "min-content";
+      const longest = title.getBoundingClientRect().width;
+      title.style.width = width;
+      if (longest === 0) return;
+      const next = longest <= row.clientWidth + 0.5;
+      setFits((was) => was === next ? was : next);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(row);
+    return () => observer.disconnect();
+  }, [rowRef, active]);
+  return fits;
+}
 function actionsAreBadges(actions) {
   const items = Children.toArray(actions);
   return items.length > 0 && items.every((item) => isValidElement(item) && (item.type === Fragment$1 ? actionsAreBadges(item.props.children) : item.type === Badge));
@@ -5038,7 +5388,6 @@ var Card = forwardRef(function Card2({
   ...props
 }, ref) {
   const isSelectable = selectable || !!selectType;
-  const isToggle = selectType === "toggle";
   const hasSelectType = !!selectType;
   const isAction = !isSelectable && variant === "interactive" && !!onClick;
   const rootRef = useRef(null);
@@ -5092,7 +5441,6 @@ var Card = forwardRef(function Card2({
   const isButton = isSelectable || isAction && !holdsControls;
   const role = selectType === "radio" ? "radio" : selectType === "checkbox" ? "checkbox" : selectType === "toggle" ? "switch" : isButton ? "button" : void 0;
   const ariaAttr = selectType === "radio" || selectType === "checkbox" || selectType === "toggle" ? { "aria-checked": !!selected } : isSelectable ? { "aria-pressed": !!selected } : {};
-  const showRing = isSelectable && !isToggle && !hasSelectType && selected;
   const indicator = selectType === "radio" ? /* @__PURE__ */ jsx(RadioIndicator, { checked: !!selected, disabled }) : selectType === "checkbox" ? /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected, indeterminate, disabled }) : selectType === "toggle" ? /* @__PURE__ */ jsx(ToggleIndicator, { checked: !!selected, disabled }) : null;
   const defaultCheckBadge = !hasSelectType && !checkable && selected && !loading ? /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 w-5 h-5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12, className: "text-[var(--ds-text-on-primary)]" }) }) : null;
   return /* @__PURE__ */ jsxs(
@@ -5111,7 +5459,10 @@ var Card = forwardRef(function Card2({
         isSelectable && !disabled && "cursor-pointer select-none transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
         isSelectable && !disabled && !selected && "hover:border-[var(--ds-accent-primary)]",
         isButton && "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        (showRing || hasSelectType && selected) && ACTIVE_RING,
+        // Selected is the accent border, with the accent-subtle fill on a card with a selectType. No ring: a ring round the
+        // whole card is the focus state (focus-visible:shadow-[var(--ds-shadow-focus)] above), and the active halo other
+        // controls take (ACTIVE_RING, since Sprint 20.6) made a selected card look focused (the owner, 27 September 2026).
+        isSelectable && selected && "border-[var(--ds-border-focus)]",
         hasSelectType && selected && "bg-[var(--ds-accent-subtle)]",
         disabled && "opacity-disabled cursor-not-allowed",
         className
@@ -5184,14 +5535,16 @@ var CardHeader = forwardRef(function CardHeader2({ className, children, actions,
     )
   ] }) : null;
   const iconBlock = icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 h-10 w-10 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-muted)] flex items-center justify-center mb-ds-1", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20, className: "text-[var(--ds-text-secondary)]" }) }) : null;
+  const parts = Children.toArray(children);
+  const titleLeads = !!hasActions && !iconBlock && !menuItems && actionsAreBadges(actions) && parts.length > 0 && isValidElement(parts[0]) && parts[0].type === CardTitle;
+  const leadRowRef = useRef(null);
+  const leadFloorFits = useTitleFloorFits(leadRowRef, titleLeads);
   if (hasActions) {
-    const parts = Children.toArray(children);
-    const titleLeads = !iconBlock && !menuItems && actionsAreBadges(actions) && parts.length > 0 && isValidElement(parts[0]) && parts[0].type === CardTitle;
     if (titleLeads) {
       const below = parts.slice(1);
       return /* @__PURE__ */ jsxs("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: [
-        /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
-          /* @__PURE__ */ jsx("div", { "data-card-title-row": "", className: HEADER_LAYOUT.titleLeads, children: parts[0] }),
+        /* @__PURE__ */ jsxs("div", { ref: leadRowRef, className: HEADER_LAYOUT.row, children: [
+          /* @__PURE__ */ jsx("div", { "data-card-title-row": "", className: cn(HEADER_LAYOUT.titleLeads, !leadFloorFits && HEADER_LAYOUT.floorOff), children: parts[0] }),
           actionsBlock
         ] }),
         below.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-ds-1.5 break-words", HEADER_LAYOUT.below), children: below })
@@ -5233,7 +5586,8 @@ var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2,
       },
       id: id ?? generatedId,
       "data-card-title": "",
-      className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", !action && lines > 0 && lineClampClass, className),
+      ...lines === 1 ? { "data-title-one-line": "" } : {},
+      className: cn(TITLE_TEXT, !action && lines > 0 && lineClampClass, action && lines === 1 && "text-ellipsis", className),
       ...props,
       children: action ? (
         // The card's action when the card holds controls of its own (Sprint 25.7): a real button, which a click
@@ -5401,6 +5755,58 @@ function DataList({ items, columns = 1, className }) {
     }
   );
 }
+var COUNT_FROM_PAGE = [
+  "[&:has(>:nth-child(2):last-child)]:[--gs-cards:2]",
+  "[&:has(>:nth-child(3):last-child)]:[--gs-cards:3]",
+  "[&:has(>:nth-child(4):last-child)]:[--gs-cards:4]",
+  "[&:has(>:nth-child(5):last-child)]:[--gs-cards:5]",
+  "[&:has(>:nth-child(6):last-child)]:[--gs-cards:6]",
+  "[&:has(>:nth-child(7):last-child)]:[--gs-cards:7]",
+  "[&:has(>:nth-child(8):last-child)]:[--gs-cards:8]",
+  "[&:has(>:nth-child(9):last-child)]:[--gs-cards:9]",
+  "[&:has(>:nth-child(10):last-child)]:[--gs-cards:10]",
+  "[&:has(>:nth-child(11):last-child)]:[--gs-cards:11]",
+  "[&:has(>:nth-child(12))]:[--gs-cards:12]"
+].join(" ");
+function countCards(children) {
+  let n = 0;
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === Fragment$1) n += countCards(child.props.children);
+    else if (child !== null && child !== void 0 && typeof child !== "boolean" && child !== "") n += 1;
+  });
+  return n;
+}
+function CardGrid({ minWidth = "14rem", maxColumns = 4, compare = false, gap = "var(--ds-space-4)", className, style, children, ref, ...props }) {
+  const most = Math.max(1, Math.floor(maxColumns));
+  const n = compare ? "var(--gs-cards, var(--gs-cards-counted))" : String(most);
+  const share = `calc((100% - (${n} - 1) * var(--gs-card-gap)) / ${n})`;
+  const column = compare ? `max(${share}, min(100%, calc((${n} * ${minWidth} + (${n} - 1) * var(--gs-card-gap) - 100%) * 999)))` : `max(min(${minWidth}, 100%), ${share})`;
+  const template = {
+    "--gs-card-gap": gap,
+    ...compare ? { "--gs-cards-counted": Math.max(1, countCards(children)) } : {},
+    gap: "var(--gs-card-gap)",
+    gridTemplateColumns: `repeat(auto-fill, minmax(${column}, 1fr))`,
+    // a comparison's cards share their rows: the headers, the contents and the footers line up across the row
+    ...compare ? { gridAutoRows: "auto 1fr auto" } : {}
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-card-grid": compare ? "compare" : "",
+      className: cn(
+        "grid",
+        compare && COUNT_FROM_PAGE,
+        // each card spans its three rows and lays its parts in them; anything else just fills them
+        compare && "[&>*]:row-span-3 [&>[data-card]]:grid [&>[data-card]]:grid-rows-subgrid [&>[data-card]]:gap-y-0",
+        className
+      ),
+      style: { ...template, ...style },
+      ...props,
+      children
+    }
+  );
+}
 var sizeStyles3 = {
   sm: { gap: "gap-ds-0.5", label: "text-[length:var(--ds-font-size-xs)]", value: "text-[length:var(--ds-font-size-xs)]", iconSize: 12, py: "py-ds-1.5" },
   md: { gap: "gap-ds-1", label: "text-[length:var(--ds-font-size-sm)]", value: "text-[length:var(--ds-font-size-sm)]", iconSize: 14, py: "py-ds-2.5" },
@@ -5530,7 +5936,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx("dd", { className: cn("font-normal text-[var(--ds-text-primary)] text-right flex-1 min-w-0", s.value), children: item.value })
+            /* @__PURE__ */ jsx("dd", { className: cn("font-normal text-[var(--ds-text-primary)] text-right flex-1 min-w-0 [overflow-wrap:anywhere] [:where(&)>*]:[justify-content:safe_flex-end] [:where(&)>*]:flex-wrap", s.value), children: item.value })
           ]
         },
         i
@@ -5538,6 +5944,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();
@@ -5572,6 +6029,7 @@ function Accordion({ items, type = "single", defaultOpen = [], open: controlledO
       /* @__PURE__ */ jsxs(
         "button",
         {
+          type: "button",
           id: triggerId,
           "aria-expanded": isOpen,
           "aria-controls": panelId,
@@ -5692,7 +6150,7 @@ function TruncCell({ children, lines }) {
   if (!isTruncated) return cell;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: cell });
 }
-var TITLE_CLASSES = "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] break-words";
+var TITLE_CLASSES = TITLE_TEXT;
 var FRAME_CLASSES = cn(
   "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
   "rounded-[var(--ds-radius-md)]",
@@ -5702,16 +6160,19 @@ var FRAME_CLASSES = cn(
 function TableHeading({ title, description, actions, titleId, descriptionId, inset }) {
   const heading = /* @__PURE__ */ jsx("h3", { id: titleId, className: TITLE_CLASSES, children: title });
   const actionsBlock = actions ? /* @__PURE__ */ jsx("div", { className: HEADER_LAYOUT.actions, children: actions }) : null;
+  const titleLeads = !actions || actionsAreBadges(actions);
+  const leadRowRef = useRef(null);
+  const leadFloorFits = useTitleFloorFits(leadRowRef, titleLeads);
   const descriptionText = (className) => description ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: cn(className, "text-sm text-[var(--ds-text-muted)] break-words"), children: description }) : null;
-  return /* @__PURE__ */ jsx("div", { "data-table-heading": "", className: cn(inset ? "px-ds-5 py-ds-4" : "pb-ds-4"), children: actions && !actionsAreBadges(actions) ? /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
+  return /* @__PURE__ */ jsx("div", { "data-table-heading": "", className: cn(inset ? "px-ds-5 py-ds-4" : "pb-ds-4"), children: !titleLeads ? /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
     /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.block, children: [
       heading,
       descriptionText()
     ] }),
     actionsBlock
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
-      /* @__PURE__ */ jsx("div", { className: HEADER_LAYOUT.titleLeads, children: heading }),
+    /* @__PURE__ */ jsxs("div", { ref: leadRowRef, className: HEADER_LAYOUT.row, children: [
+      /* @__PURE__ */ jsx("div", { className: cn(HEADER_LAYOUT.titleLeads, !leadFloorFits && HEADER_LAYOUT.floorOff), children: heading }),
       actionsBlock
     ] }),
     descriptionText(HEADER_LAYOUT.below)
@@ -5954,6 +6415,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,
@@ -6070,7 +6532,7 @@ var indicatorInset = {
 };
 function SegmentedControl({
   value,
-  onChange,
+  onChange: onChangeProp,
   options,
   size: sizeProp,
   variant = "default",
@@ -6078,9 +6540,13 @@ function SegmentedControl({
   onHoverChange,
   className,
   "aria-label": ariaLabel,
-  maxOptions = 6
+  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 } : {};
   const size = sizeProp ?? contextSize ?? "md";
   const containerRef = useRef(null);
   const [indicator, setIndicator] = useState({ left: 0, width: 0 });
@@ -6176,6 +6642,7 @@ function SegmentedControl({
       Dropdown,
       {
         "aria-label": ariaLabel,
+        ...wiring,
         size: size === "md" || size === "lg" ? "md" : "sm",
         options: options.filter((o) => !o.disabled).map((o) => ({ id: o.value, label: o.label })),
         value,
@@ -6189,7 +6656,12 @@ function SegmentedControl({
     {
       ref: containerRef,
       role: "radiogroup",
+      id: control.id,
       "aria-label": ariaLabel,
+      ...named,
+      "aria-describedby": control.describedBy,
+      "aria-invalid": control.invalid || void 0,
+      "aria-required": control.required || void 0,
       onKeyDown: handleKeyDown,
       className: cn(
         "relative items-center",
@@ -6199,6 +6671,7 @@ function SegmentedControl({
         "bg-[var(--ds-bg-muted)]",
         "rounded-[var(--ds-radius-lg)]",
         variant === "default" && "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+        control.invalid && "border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]",
         className
       ),
       children: [
@@ -6709,7 +7182,7 @@ function WeekView({
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "flex flex-col h-full overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
       /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]" }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "grid",
@@ -6749,7 +7222,7 @@ function WeekView({
     ] }),
     hasAllDay && /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)]/30", children: [
       /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-2xs text-[var(--ds-text-muted)] px-ds-1 py-ds-1 text-right", children: "all-day" }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "grid",
@@ -6786,7 +7259,7 @@ function WeekView({
         },
         h
       )) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "relative",
@@ -7799,7 +8272,7 @@ function AvatarGroup({ items, max = 4, size = "sm", ring = "canvas", onOverflowC
   const shown = items.slice(0, Math.max(0, max));
   const hidden = items.slice(shown.length);
   const ringClass = cn(
-    "rounded-[var(--ds-radius-full)] ring-2",
+    "relative rounded-[var(--ds-radius-full)] ring-2",
     ring === "canvas" ? "ring-[var(--ds-bg-canvas)]" : "ring-[var(--ds-bg-surface)]"
   );
   const hiddenNames = hidden.map((i) => i.name ?? i.initials).filter(Boolean).join(", ");
@@ -8099,11 +8572,38 @@ function HorizontalLayout({ items, minItemWidth, className }) {
       /* @__PURE__ */ jsxs("div", { className: "text-center mt-ds-2 px-ds-3", children: [
         /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: item.title }),
         item.description && /* @__PURE__ */ jsx(ExpandableDescription, { className: "text-center", children: item.description }),
-        item.timestamp && /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: item.timestamp })
+        /* @__PURE__ */ jsx(ItemTime, { item })
       ] })
     ] }, i);
   }) });
 }
+var EXACT = new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" });
+var EXACT_DAY = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
+var DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+function exactTime(value) {
+  if (typeof value === "string") {
+    const day = DATE_ONLY.exec(value.trim());
+    if (day) {
+      const [y, m, d] = [Number(day[1]), Number(day[2]) - 1, Number(day[3])];
+      const date2 = new Date(y, m, d);
+      return date2.getFullYear() === y && date2.getMonth() === m && date2.getDate() === d ? { iso: value.trim(), text: EXACT_DAY.format(date2) } : null;
+    }
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : { iso: date.toISOString(), text: EXACT.format(date) };
+}
+function ItemTime({ item }) {
+  const exact = item.dateTime ? exactTime(item.dateTime) : null;
+  if (!item.timestamp && !exact) return null;
+  return /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: exact ? /* @__PURE__ */ jsxs("time", { dateTime: exact.iso, title: exact.text, children: [
+    item.timestamp ?? exact.text,
+    item.timestamp && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+      " (",
+      exact.text,
+      ")"
+    ] })
+  ] }) : item.timestamp });
+}
 function VerticalLayout({ items, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-ds-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
@@ -8113,7 +8613,7 @@ function VerticalLayout({ items, className }) {
     /* @__PURE__ */ jsxs("div", { className: cn("pb-ds-6 min-w-0", i === items.length - 1 && "pb-0"), style: item.icon ? { paddingTop: ICON_TEXT_OFFSET } : void 0, children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: item.title }),
       item.description && /* @__PURE__ */ jsx(ExpandableDescription, { children: item.description }),
-      item.timestamp && /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: item.timestamp })
+      /* @__PURE__ */ jsx(ItemTime, { item })
     ] })
   ] }, i)) });
 }
@@ -8585,6 +9085,7 @@ function Carousel({
           /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               onClick: prev,
               disabled: !canPrev,
               "aria-label": "Previous slide",
@@ -8604,6 +9105,7 @@ function Carousel({
           /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               onClick: next,
               disabled: !canNext,
               "aria-label": "Next slide",
@@ -8624,6 +9126,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(
@@ -9496,7 +9999,7 @@ var StackedList = forwardRef(function StackedList2({
 });
 var TIME_ZOOMS = ["day", "week", "month", "quarter"];
 var DAY_MS = 864e5;
-var DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+var DATE_ONLY2 = /^(\d{4})-(\d{2})-(\d{2})$/;
 var utcDay = (y, m, d) => Math.round(Date.UTC(y, m, d) / DAY_MS);
 function dayOfDate(d) {
   const t = d.getTime();
@@ -9512,7 +10015,7 @@ function dayOf(value) {
   if (typeof value === "number") return Number.isFinite(value) ? value : NaN;
   if (value instanceof Date) return dayOfDate(value);
   if (typeof value !== "string") return NaN;
-  const m = DATE_ONLY.exec(value.trim());
+  const m = DATE_ONLY2.exec(value.trim());
   if (!m) return dayOfDate(new Date(value));
   const [y, mo, d] = [Number(m[1]), Number(m[2]) - 1, Number(m[3])];
   const day = utcDay(y, mo, d);
@@ -9525,7 +10028,7 @@ function dateOfDay(day) {
   return new Date(u.getUTCFullYear(), u.getUTCMonth(), u.getUTCDate(), 0, 0, 0, Math.round((day - whole) * DAY_MS));
 }
 function isWholeDay(value) {
-  return typeof value === "string" ? DATE_ONLY.test(value.trim()) : Number.isInteger(dayOf(value));
+  return typeof value === "string" ? DATE_ONLY2.test(value.trim()) : Number.isInteger(dayOf(value));
 }
 function endDayOf(value) {
   const day = dayOf(value);
@@ -11372,6 +11875,7 @@ function TabButton({
     const btn2 = /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         id: tabId,
         role: "tab",
         "aria-selected": isActive,
@@ -11407,6 +11911,7 @@ function TabButton({
   const btn = /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       id: tabId,
       role: "tab",
       "aria-selected": isActive,
@@ -11780,6 +12285,7 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             ref: ellipsisBtnRef,
             onClick: () => {
               if (!dropdownOpen) setActiveIdx(0);
@@ -11830,6 +12336,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,
@@ -12025,6 +12532,7 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: () => onPageChange(currentPage - 1),
           disabled: currentPage <= 1,
           "aria-label": "Previous page",
@@ -12044,6 +12552,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(
@@ -12061,6 +12570,7 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
       /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: () => onPageChange(currentPage + 1),
           disabled: currentPage >= totalPages,
           "aria-label": "Next page",
@@ -12323,6 +12833,7 @@ function StepCircle({ status, index, onClick, clickable }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       onClick,
       disabled: !clickable,
       "aria-current": status === "current" ? "step" : void 0,
@@ -12517,7 +13028,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);
@@ -12527,10 +13038,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) => {
@@ -12549,11 +13060,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",
     {
@@ -12591,6 +13102,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",
@@ -12943,6 +13455,7 @@ function SidebarNav({
       /* @__PURE__ */ jsxs(
         "button",
         {
+          type: "button",
           onClick: () => {
             toggleExpand(key);
             onItemClick?.(item, index);
@@ -13077,6 +13590,7 @@ function SidebarNav({
         collapsible && /* @__PURE__ */ jsxs(
           "button",
           {
+            type: "button",
             onClick: () => onCollapsedChange(!collapsed),
             title: collapsed ? "Expand sidebar" : "Collapse sidebar",
             className: cn(
@@ -13143,6 +13657,7 @@ function CompactNavItem({
     /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         ref: setTriggerEl,
         onMouseEnter: !mobile && hasChildren ? handleMouseEnter : void 0,
         onMouseLeave: !mobile && hasChildren && isOpen ? handleMouseLeave : void 0,
@@ -13205,6 +13720,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",
@@ -13219,7 +13735,473 @@ 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 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 createdIds = useRef([]);
+  const [heard, setHeard] = useState([]);
+  const [hovered, setHovered] = useState(false);
+  const [focusInside, setFocusInside] = useState(false);
+  const paused = pauseOnHover && hovered || focusInside;
+  const stackRef = useRef(null);
+  const returnTo = useRef(null);
+  const answering = useRef([]);
+  const 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]);
+  const [slotsSeen, setSlotsSeen] = useState(slots);
+  if (slots !== slotsSeen) {
+    setSlotsSeen(slots);
+    let kept = 0;
+    setList(fill(list.map((e) => e.shown && ++kept > slots ? { ...e, shown: false } : e), slots));
+  }
+  useEffect(() => {
+    entries.current = list;
+  }, [list]);
+  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()];
+      pendingHeard.current.clear();
+      setHeard((list2) => [...list2, ...batch.map((e) => ({
+        id: `heard-${++heardSeq}`,
+        assertive: e.variant === "error",
+        node: /* @__PURE__ */ jsxs(Fragment, { children: [
+          e.message,
+          e.action ? ` Press F8 to reach ${e.action.label}.` : ""
+        ] })
+      }))].slice(-5));
+    }, 0);
+  }, []);
+  useEffect(() => () => {
+    if (heardTimer.current) clearTimeout(heardTimer.current);
+  }, []);
+  const leaving = useCallback(() => {
+    if (!stackRef.current?.contains(document.activeElement)) return;
+    refocus.current = true;
+    setFocusInside(false);
+  }, []);
+  const remove = useCallback((id) => {
+    leaving();
+    commit(entries.current.filter((t) => t.id !== id));
+  }, [commit, leaving]);
+  const dismissAll = useCallback(() => {
+    leaving();
+    commit([]);
+  }, [commit, leaving]);
+  const update = useCallback((id, message, options = {}) => {
+    const list2 = entries.current;
+    const at = list2.findIndex((t2) => t2.id === id);
+    if (at === -1) return;
+    const t = list2[at];
+    const next = [...list2];
+    next[at] = { ...t, message, variant: options.variant ?? t.variant, duration: options.duration ?? t.duration, action: options.action ?? t.action, actionWindow: options.actionWindow ?? t.actionWindow, key: options.key ?? t.key, version: t.version + 1 };
+    commit(next);
+    announce(next[at]);
+  }, [commit, announce]);
+  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 };
+        createdIds.current.push(options.id);
+        commit(next);
+        announce(next[at]);
+        return options.id;
+      }
+    }
+    while (answering.current.length) {
+      const answered = answering.current.shift();
+      const at = list2.findIndex((t) => t.id === answered);
+      if (at === -1) continue;
+      const next = [...list2];
+      next[at] = { ...list2[at], ...base, version: list2[at].version + 1 };
+      createdIds.current.push(answered);
+      commit(next);
+      announce(next[at]);
+      return answered;
+    }
+    if (coalesce && base.key && mergeable(base)) {
+      const at = list2.findIndex((t) => t.key === base.key && mergeable(t));
+      if (at !== -1) {
+        const next = [...list2];
+        next[at] = { ...list2[at], ...base, version: list2[at].version + 1 };
+        createdIds.current.push(list2[at].id);
+        commit(next);
+        announce(next[at]);
+        return list2[at].id;
+      }
+    }
+    const id = options.id ?? `toast-${++toastSeq}`;
+    const entry = { id, ...base, shown: false, version: 0 };
+    createdIds.current.push(id);
+    commit([...list2, entry]);
+    announce(entry);
+    return id;
+  }, [duration, coalesce, commit, announce]);
+  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(() => ({
+    created: () => createdIds.current.length,
+    latestSince: (count) => {
+      if (createdIds.current.length <= count) return void 0;
+      const id = createdIds.current[createdIds.current.length - 1];
+      const entry = entries.current.find((t) => t.id === id);
+      return entry ? { id, message: entry.message } : void 0;
+    }
+  }), []);
+  const pressAction = useCallback((id) => {
+    const entry = entries.current.find((t) => t.id === id);
+    if (!entry?.action) return;
+    const run = entry.action.onClick;
+    leaving();
+    commit(entries.current.map((t) => t.id === id ? { ...t, action: void 0, actionWindow: void 0, version: t.version + 1 } : t));
+    answering.current.push(id);
+    const done = () => {
+      const waiting2 = answering.current.indexOf(id);
+      if (waiting2 === -1) return;
+      answering.current.splice(waiting2, 1);
+      remove(id);
+    };
+    let result;
+    try {
+      result = run();
+    } catch {
+      result = void 0;
+    }
+    if (result && typeof result.then === "function") result.then(done, done);
+    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");
+    if (back?.isConnected) back.focus();
+    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", role: "status", "aria-live": "polite", "data-toast-announcer": "polite", children: heard.filter((h) => !h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.node }, h.id)) }),
+    /* @__PURE__ */ jsx("div", { className: "sr-only", role: "alert", "aria-live": "assertive", "data-toast-announcer": "assertive", children: heard.filter((h) => h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.node }, h.id)) }),
+    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),
+          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", { 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) : [];
@@ -13254,6 +14236,7 @@ function BottomNav({ items, onItemClick, maxVisible = 5, className, ref }) {
           /* @__PURE__ */ jsxs(
             "button",
             {
+              type: "button",
               onClick: () => setOverflowOpen(!overflowOpen),
               "aria-expanded": overflowOpen,
               "aria-haspopup": "true",
@@ -13281,6 +14264,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);
@@ -13310,6 +14294,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",
@@ -14712,6 +15697,7 @@ function NavMenu({
     /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         ref: triggerRef,
         onClick: () => setOpen(!open),
         "aria-expanded": open,
@@ -14908,7 +15894,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();
@@ -15013,7 +16000,8 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                     className: cn(
                       "relative z-10 w-full",
                       isMobile ? "max-w-none h-full" : sizeClasses[size],
-                      "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+                      OVERLAY_SURFACE,
+                      "text-[var(--ds-text-primary)]",
                       GLASS_OVERLAY,
                       "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
                       isMobile ? "rounded-none" : "rounded-[var(--ds-radius-xl)]",
@@ -15044,7 +16032,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(OverlayMarkCtx, { value: mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) }) })
                         ] })
                       ] }) }),
                       /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
@@ -15070,6 +16058,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,
@@ -15372,6 +16361,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",
@@ -15396,6 +16386,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",
@@ -15413,6 +16404,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",
@@ -15429,6 +16421,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",
@@ -15532,7 +16525,8 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
           "aria-label": "Command palette",
           className: cn(
             "relative z-10 w-full max-w-lg",
-            "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+            OVERLAY_SURFACE,
+            "text-[var(--ds-text-primary)]",
             "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
             "rounded-[var(--ds-radius-xl)] overflow-hidden",
@@ -15589,6 +16583,7 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
                     return /* @__PURE__ */ jsxs(
                       "button",
                       {
+                        type: "button",
                         id: `${listboxId}-opt-${myIdx}`,
                         role: "option",
                         tabIndex: -1,
@@ -15777,6 +16772,7 @@ function ContextMenu({ items, children, className, ref, container }) {
                 return /* @__PURE__ */ jsxs(
                   "button",
                   {
+                    type: "button",
                     role: "menuitem",
                     disabled: item.disabled,
                     onClick: () => {
@@ -15887,6 +16883,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"
@@ -15897,6 +16894,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",
@@ -15908,6 +16906,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",
@@ -15957,6 +16956,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",
@@ -15966,6 +16966,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",
@@ -15984,6 +16985,7 @@ function NotificationCenter({
     /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         ref: triggerRef,
         onClick: () => setOpen(!open),
         "aria-label": `Notifications${unreadCount ? ` (${unreadCount} unread)` : ""}`,
@@ -16023,6 +17025,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"
@@ -16067,6 +17070,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",
@@ -16076,6 +17080,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",
@@ -16239,6 +17244,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",
@@ -16258,6 +17264,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)]",
@@ -16271,6 +17278,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
                 /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
                     ref: nextRef,
                     onClick: handleNext,
                     className: cn(
@@ -16319,223 +17327,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;
@@ -16598,9 +17389,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);
@@ -16617,20 +17409,32 @@ 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 confirm = async () => {
     setBusy(true);
+    const before = ledger?.created() ?? 0;
     try {
       await onConfirm();
       close();
+      if (toast && (ledger?.created() ?? 0) === before) toast.success(done);
     } catch (err) {
       toast?.error(failureMessage(err));
     } finally {
       setBusy(false);
     }
   };
+  const undo = async () => {
+    try {
+      await onUndo();
+      toast?.success(restoredMessage ?? "Restored");
+    } catch (err) {
+      toast?.error(err instanceof Error && err.message ? err.message : "Undo didn't work. Try again.");
+    }
+  };
   const run = () => {
     if (undoable) {
       void (async () => {
+        const before = ledger?.created() ?? 0;
         try {
           await onConfirm();
         } catch (err) {
@@ -16638,7 +17442,10 @@ function useDestructiveAction(options) {
           return;
         }
         const seconds = preferences.undoWindowSeconds ?? 5;
-        toast.success(undoMessage ?? `${title.replace(/\?$/, "")} done`, { duration: seconds * 1e3, action: { label: "Undo", onClick: onUndo } });
+        const undoAction = { label: "Undo", onClick: () => undo() };
+        const pages = (ledger?.created() ?? 0) > before ? ledger?.latestSince(before) : void 0;
+        if (pages) toast.update(pages.id, pages.message, { variant: "success", action: undoAction, actionWindow: seconds * 1e3 });
+        else toast.success(done, { action: undoAction, actionWindow: seconds * 1e3 });
       })();
       return;
     }
@@ -16666,6 +17473,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 warned2 = /* @__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 && !warned2.has(label)) {
+    warned2.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,
@@ -16806,6 +17668,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, 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