gridsmith-ui 0.20.0 → 0.22.0

package/dist/index.js

@@ -1,27 +1,28 @@
-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 { useAppShell, REACT_VERSION_PROBLEM, useOverlayMark, useDirtyGuard, OverlayMarkScope, OverlayCloseCtx, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-AAYCQXZQ.js';
+export { AppShell, Drawer, Sheet, SkipLink, useAppShell, useUnsavedChanges } from './chunk-AAYCQXZQ.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-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 { Link } from './chunk-EYMGLK4M.js';
+export { CodeBlock, Divider, Link } from './chunk-EYMGLK4M.js';
+import { Badge } from './chunk-SBTBMAIU.js';
+export { Badge } from './chunk-SBTBMAIU.js';
+import { inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, CardValue } from './chunk-IVCVNAXG.js';
+import { useWholeListCheck, pagerPart, Pagination, Dropdown, useFieldControl, useField, warnOnce, Label, InlineFieldError, AddAnotherRowCtx, Input, Field } from './chunk-2RV23OBK.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-2RV23OBK.js';
+import { SplitPaneCtx, TableCardCtx } from './chunk-RG4KUCRS.js';
+import { Button, ControlSizeContext, triggerType, Spinner, useShellPreferences, preferenceActionKey } from './chunk-7TOJ4G7S.js';
+export { Button, ButtonSizeContext, ControlSizeContext, PreferencesContext, Spinner, preferenceActionKey, usePreferences } from './chunk-7TOJ4G7S.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
-import { useTextOverflow, Tooltip, usePosition } from './chunk-ILIODA7W.js';
-export { Tooltip, useTextOverflow } from './chunk-ILIODA7W.js';
+import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, FormChangeCtx, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, useReportedChange, rovingTabStop, useGridKeyboard, useOptionalFormContext, focusAfterRemoval, FormCtx, useNonModalDialog, useReturnFocus, useCloseOnFocusOut } from './chunk-RT7RYGC3.js';
+export { useFormContext, useGridKeyboard } from './chunk-RT7RYGC3.js';
+import { useTextOverflow, Tooltip, usePosition } from './chunk-CXMV7SXJ.js';
+export { Tooltip, useTextOverflow } from './chunk-CXMV7SXJ.js';
 import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
 import { Icon } from './chunk-4LDYR7QP.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 { cn, GLASS_SURFACE, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ACTIVE_RING, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, FOCUS_WITHIN_RING } from './chunk-M2QRNBDQ.js';
+import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, isValidElement, useId, memo, useEffect, useImperativeHandle, Children, Fragment as Fragment$1, cloneElement, useSyncExternalStore } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -84,6 +85,9 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
     /* @__PURE__ */ jsx(
       Slot,
       {
+        ...triggerType(trigger),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
         ref: triggerRef,
         onClick: () => {
           setOpen(!open);
@@ -180,13 +184,14 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
         isMobile ? /* @__PURE__ */ jsx(
           DropdownMenu,
           {
-            trigger: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "more-vertical", size: 14 }), children: "Actions" }),
+            trigger: /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "more-vertical", size: 14 }), children: "Actions" }),
             items: dropdownItems,
             align: "start"
           }
         ) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2", children: actions.map((action, i) => /* @__PURE__ */ jsx(
           Button,
           {
+            type: "button",
             variant: "secondary",
             size: "sm",
             onClick: action.onClick,
@@ -208,732 +213,6 @@ 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)]",
-  lg: "h-[var(--ds-control-height-lg)]"
-};
-var INPUT_TEXT = {
-  sm: "px-ds-2 py-ds-1 text-xs",
-  md: "px-ds-3 py-ds-2 text-sm",
-  lg: "px-ds-4 py-ds-3 text-base"
-};
-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) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex items-center w-full",
-          INPUT_HEIGHT[size],
-          "bg-[var(--ds-input-bg)]",
-          "border-[length:var(--ds-border-width)]",
-          borderColor,
-          "rounded-[var(--ds-radius-md)]",
-          "shadow-[var(--ds-input-shadow)]",
-          hoverBorder,
-          error ? ERROR_HAS_FOCUS_RING : HAS_FOCUS_RING,
-          "transition-colors duration-[var(--ds-transition-speed)]",
-          props.disabled && "cursor-not-allowed opacity-disabled",
-          props.readOnly && "bg-[var(--ds-bg-muted)] cursor-default",
-          className
-        ),
-        children: [
-          prefix && /* @__PURE__ */ jsx("span", { className: "shrink-0 pl-ds-3 text-[var(--ds-text-muted)] flex items-center", children: prefix }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              "aria-invalid": error || void 0,
-              className: cn(
-                "flex-1 min-w-0 bg-transparent outline-none",
-                INPUT_TEXT[size],
-                "text-[var(--ds-text-primary)]",
-                "placeholder:text-[var(--ds-text-muted)]",
-                "disabled:cursor-not-allowed",
-                "read-only:text-[var(--ds-text-secondary)] read-only:cursor-default"
-              ),
-              ...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 })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      "aria-invalid": error || void 0,
-      className: cn(
-        "flex w-full",
-        INPUT_TEXT[size],
-        INPUT_HEIGHT[size],
-        "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
-        "border-[length:var(--ds-border-width)]",
-        borderColor,
-        "rounded-[var(--ds-radius-md)]",
-        "shadow-[var(--ds-input-shadow)]",
-        "placeholder:text-[var(--ds-text-muted)]",
-        hoverBorder,
-        error ? ERROR_FOCUS_RING : FOCUS_RING,
-        "disabled:cursor-not-allowed disabled:opacity-disabled",
-        "read-only:bg-[var(--ds-bg-muted)] read-only:text-[var(--ds-text-secondary)] read-only:cursor-default",
-        "transition-colors duration-[var(--ds-transition-speed)]",
-        className
-      ),
-      ...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(() => {
-    const el = textareaRef.current;
-    if (!el || !autoResize) return;
-    el.style.height = "auto";
-    let target = el.scrollHeight;
-    if (maxRows) {
-      const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 20;
-      const maxHeight = lineHeight * maxRows + parseFloat(getComputedStyle(el).paddingTop) + parseFloat(getComputedStyle(el).paddingBottom);
-      target = Math.min(target, maxHeight);
-    }
-    el.style.height = `${target}px`;
-  }, [autoResize, maxRows, textareaRef]);
-  useEffect(() => {
-    resize();
-  }, [resize, props.value, props.defaultValue]);
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      ref: textareaRef,
-      "aria-invalid": error || void 0,
-      className: cn(
-        "flex min-h-[var(--ds-control-height-md)] w-full px-ds-3 py-ds-2 text-sm",
-        "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)] hover:border-[var(--ds-input-border-hover)]",
-        "rounded-[var(--ds-radius-md)]",
-        "shadow-[var(--ds-input-shadow)]",
-        "placeholder:text-[var(--ds-text-muted)]",
-        error ? ERROR_FOCUS_RING : FOCUS_RING,
-        "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
-        "read-only:bg-[var(--ds-bg-muted)] read-only:text-[var(--ds-text-secondary)] read-only:cursor-default read-only:hover:border-[var(--ds-input-border)]",
-        "transition-colors duration-[var(--ds-transition-speed)]",
-        autoResize && "resize-none overflow-hidden",
-        className
-      ),
-      onInput: autoResize ? resize : void 0,
-      ...props,
-      onChange: props.onChange || props.value === void 0 ? onChange : void 0
-    }
-  );
-}
-function Label({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "label",
-    {
-      className: cn(
-        "text-sm font-medium leading-none text-[var(--ds-text-secondary)]",
-        "peer-disabled:cursor-not-allowed peer-disabled:opacity-disabled",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}
-var TOGGLE_SIZES = {
-  sm: { w: 32, h: 18, thumb: 12 },
-  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 && change(!checked),
-      ...rest,
-      className: cn(
-        "relative inline-flex shrink-0 items-center overflow-hidden",
-        "border-[length:var(--ds-border-width)]",
-        "rounded-[var(--ds-radius-full)]",
-        "transition-colors duration-[var(--ds-transition-speed)]",
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        disabled ? "cursor-not-allowed" : "cursor-pointer",
-        checked ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-muted)]",
-        error ? "border-[var(--ds-status-error)]" : checked ? "border-transparent" : "border-[var(--ds-border-default)]"
-      ),
-      style: { width: dims.w, height: dims.h },
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "pointer-events-none inline-block shrink-0",
-            "bg-[var(--ds-bg-surface)]",
-            "border-[length:var(--ds-border-width)] border-transparent",
-            "rounded-[var(--ds-radius-full)]",
-            "transition-transform"
-          ),
-          style: {
-            width: dims.thumb,
-            height: dims.thumb,
-            transform: checked ? `translateX(calc(${travel}px - var(--ds-border-width)))` : "translateX(calc(1px + var(--ds-border-width)))"
-          }
-        }
-      )
-    }
-  );
-  if (!label) {
-    return /* @__PURE__ */ jsx("div", { className: cn(disabled && "opacity-disabled"), children: switchButton });
-  }
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: cn(
-        layout === "full" ? "flex items-center justify-between gap-ds-4" : "inline-flex items-center gap-ds-3",
-        disabled ? "cursor-not-allowed opacity-disabled" : "cursor-pointer"
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: label }),
-        switchButton
-      ]
-    }
-  );
-}
-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)]",
-  lg: "px-ds-4 py-ds-3 text-base h-[var(--ds-control-height-lg)]"
-};
-function Dropdown({
-  options,
-  value,
-  onChange: onChangeProp,
-  label,
-  disabled,
-  placeholder = "Select...",
-  multiple,
-  searchable,
-  size: sizeProp,
-  className,
-  ref,
-  container,
-  error = false,
-  showChips = true,
-  "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("");
-  const [positioned, setPositioned] = useState(false);
-  const triggerRef = useRef(null);
-  const menuRef = useRef(null);
-  const searchRef = useRef(null);
-  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
-  const selectedValues = Array.isArray(value) ? value : [value].filter(Boolean);
-  const updatePos = useCallback(() => {
-    if (!triggerRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    let top = rect.bottom + 4;
-    let left = rect.left;
-    const width = rect.width;
-    if (menuRef.current) {
-      const menuRect = menuRef.current.getBoundingClientRect();
-      const vw = window.innerWidth;
-      const vh = window.innerHeight;
-      if (left + menuRect.width > vw) left = Math.max(0, vw - menuRect.width - 8);
-      if (top + menuRect.height > vh) {
-        const above = rect.top - 4 - menuRect.height;
-        if (above >= 0) top = above;
-        else top = Math.max(0, vh - menuRect.height - 8);
-      }
-    }
-    setPos({ top, left, width });
-  }, []);
-  const [prevOpen, setPrevOpen] = useState(open);
-  if (open !== prevOpen) {
-    setPrevOpen(open);
-    if (open) setSearch("");
-    else setPositioned(false);
-  }
-  useEffect(() => {
-    if (!open) return;
-    updatePos();
-    const raf = requestAnimationFrame(() => {
-      updatePos();
-      setPositioned(true);
-    });
-    const onScroll = () => updatePos();
-    window.addEventListener("scroll", onScroll, true);
-    window.addEventListener("resize", updatePos);
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("resize", updatePos);
-    };
-  }, [open, updatePos]);
-  const moved = useRef(false);
-  useLayoutEffect(() => {
-    if (!open || !positioned) return;
-    moved.current = false;
-    if (searchRef.current) {
-      searchRef.current.focus();
-      return;
-    }
-    const els = Array.from(menuRef.current?.querySelectorAll('[role="option"]') ?? []);
-    (els.find((el) => el.getAttribute("aria-selected") === "true") ?? els[0])?.focus();
-  }, [open, positioned]);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      const target = e.target;
-      if (triggerRef.current?.contains(target) || menuRef.current?.contains(target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-  const commitMoved = () => {
-    if (multiple || !moved.current) return;
-    const el = document.activeElement;
-    const id = el instanceof HTMLElement && menuRef.current?.contains(el) ? el.getAttribute("data-option-id") : null;
-    if (id) onChange(id);
-  };
-  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: menuRef, close: () => setOpen(false), tabExits: "any", onTabOut: commitMoved });
-  const typeahead = useRef({ buffer: "", at: 0 });
-  useEffect(() => {
-    if (!open) return;
-    const optionButtons = () => Array.from(menuRef.current?.querySelectorAll('[role="option"]') ?? []);
-    const focusOption = (idx) => {
-      const els = optionButtons();
-      if (els.length === 0) return;
-      els[(idx % els.length + els.length) % els.length].focus();
-      moved.current = true;
-    };
-    const onKey = (e) => {
-      const inMenu = menuRef.current?.contains(document.activeElement) || triggerRef.current === document.activeElement;
-      if (!inMenu) return;
-      const els = optionButtons();
-      const current = els.findIndex((el) => el === document.activeElement);
-      if (e.key === "Escape") {
-        if (e.defaultPrevented || !isTopLayer()) return;
-        e.preventDefault();
-        returnFocus();
-        setOpen(false);
-        return;
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        focusOption(current < 0 ? 0 : current + 1);
-        return;
-      }
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        focusOption(current < 0 ? els.length - 1 : current - 1);
-        return;
-      }
-      const inSearch = document.activeElement === searchRef.current;
-      if (e.key === "Home" && !inSearch) {
-        e.preventDefault();
-        focusOption(0);
-        return;
-      }
-      if (e.key === "End" && !inSearch) {
-        e.preventDefault();
-        focusOption(els.length - 1);
-        return;
-      }
-      if (!searchable && e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
-        const now = Date.now();
-        typeahead.current.buffer = now - typeahead.current.at > 700 ? e.key : typeahead.current.buffer + e.key;
-        typeahead.current.at = now;
-        const q = typeahead.current.buffer.toLowerCase();
-        const hit = els.findIndex((el) => (el.textContent ?? "").trim().toLowerCase().startsWith(q));
-        if (hit >= 0) {
-          e.preventDefault();
-          focusOption(hit);
-        }
-      }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open, searchable, isTopLayer, returnFocus]);
-  const filtered = searchable && search ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) : options;
-  const groups = /* @__PURE__ */ new Map();
-  for (const opt of filtered) {
-    const g = opt.group ?? "";
-    if (!groups.has(g)) groups.set(g, []);
-    groups.get(g).push(opt);
-  }
-  const hasGroups = Array.from(groups.keys()).some((k) => k !== "");
-  const handleSelect = (id) => {
-    if (multiple) {
-      const arr = selectedValues.includes(id) ? selectedValues.filter((v) => v !== id) : [...selectedValues, id];
-      onChange(arr);
-    } else {
-      returnFocus();
-      onChange(id);
-      setOpen(false);
-    }
-  };
-  const chipsRef = useRef(null);
-  const pendingChipFocus = useRef(null);
-  useLayoutEffect(() => {
-    const pending = pendingChipFocus.current;
-    if (pending === null) return;
-    pendingChipFocus.current = null;
-    if (selectedValues.includes(pending.value)) return;
-    const chips = Array.from(chipsRef.current?.querySelectorAll("[data-chip-remove]") ?? []);
-    focusAfterRemoval(chips, pending.index, triggerRef.current);
-  });
-  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", { 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) => {
-          if (disabled || open) return;
-          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-            e.preventDefault();
-            setOpen(true);
-          }
-        },
-        disabled,
-        "aria-invalid": invalid || void 0,
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        "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)]",
-          invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
-          "rounded-[var(--ds-radius-md)]",
-          "shadow-[var(--ds-input-shadow)]",
-          "transition-colors",
-          !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)]"
-        ),
-        children: [
-          isTruncated ? /* @__PURE__ */ jsx(Tooltip, { content: displayLabel, children: /* @__PURE__ */ jsx("span", { ref: overflowRef, className: "truncate", children: displayLabel }) }) : /* @__PURE__ */ jsx("span", { ref: overflowRef, className: "truncate", children: displayLabel }),
-          /* @__PURE__ */ jsx("span", { className: cn("transition-transform", open && "rotate-180"), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-90" }) })
-        ]
-      }
-    ),
-    open && createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: menuRef,
-          tabIndex: -1,
-          onClick: (e) => e.stopPropagation(),
-          className: cn(
-            "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)]",
-            "rounded-[var(--ds-radius-md)] overflow-hidden",
-            "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]"
-          ),
-          style: { top: pos.top, left: pos.left, minWidth: pos.width, width: "max-content", maxWidth: "calc(100vw - 16px)", visibility: positioned ? "visible" : "hidden" },
-          children: [
-            searchable && /* @__PURE__ */ jsx("div", { className: "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", style: { padding: "var(--ds-space-2)" }, children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: searchRef,
-                type: "text",
-                value: search,
-                onChange: (e) => setSearch(e.target.value),
-                placeholder: "Search\u2026",
-                className: cn("w-full bg-transparent text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)] outline-none", size === "sm" ? "text-xs" : "text-sm")
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { role: "listbox", className: "overflow-y-auto", style: { padding: "var(--ds-space-1)", maxHeight: "var(--ds-dropdown-max-height)" }, children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: cn("text-[var(--ds-text-muted)] text-center py-ds-4", size === "sm" ? "text-xs" : "text-sm"), children: "No options found" }) : hasGroups ? Array.from(groups.entries()).map(([group, opts]) => /* @__PURE__ */ jsxs("div", { children: [
-              group && /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium uppercase tracking-wider text-[var(--ds-text-muted)] px-ds-2 pt-ds-2 pb-ds-1", children: group }),
-              opts.map((opt) => /* @__PURE__ */ jsx(
-                OptionButton,
-                {
-                  opt,
-                  isSelected: selectedValues.includes(opt.id),
-                  multiple,
-                  onSelect: handleSelect,
-                  size
-                },
-                opt.id
-              ))
-            ] }, group)) : filtered.map((opt) => /* @__PURE__ */ jsx(
-              OptionButton,
-              {
-                opt,
-                isSelected: selectedValues.includes(opt.id),
-                multiple,
-                onSelect: handleSelect,
-                size
-              },
-              opt.id
-            )) })
-          ]
-        }
-      ),
-      container ?? document.body
-    ),
-    multiple && showChips && selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { ref: chipsRef, className: "flex flex-wrap gap-ds-1 mt-ds-1.5", children: selectedValues.map((v, i) => {
-      const opt = options.find((o) => o.id === v);
-      return opt ? /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: "inline-flex items-center gap-ds-1 text-xs rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)] px-ds-1.5 py-ds-0.5",
-          children: [
-            opt.label,
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "data-chip-remove": "",
-                onClick: () => {
-                  pendingChipFocus.current = { index: i, value: v };
-                  handleSelect(v);
-                },
-                className: "hover:text-[var(--ds-text-primary)] cursor-pointer",
-                "aria-label": `Remove ${opt.label}`,
-                children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 10 })
-              }
-            )
-          ]
-        },
-        v
-      ) : null;
-    }) })
-  ] });
-}
-function OptionButton({
-  opt,
-  isSelected,
-  multiple,
-  onSelect,
-  size = "md"
-}) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      role: "option",
-      "data-option-id": opt.id,
-      "aria-selected": isSelected,
-      tabIndex: -1,
-      onClick: () => onSelect(opt.id),
-      className: cn(
-        "w-full text-left cursor-pointer rounded-[var(--ds-radius-sm)]",
-        "transition-colors flex items-center gap-ds-2",
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        size === "sm" ? "px-ds-2 py-ds-1 text-xs" : "px-ds-2 py-ds-1.5 text-sm",
-        isSelected && !multiple ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)]"
-      ),
-      children: [
-        multiple && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "w-[var(--ds-icon-size-sm)] h-[var(--ds-icon-size-sm)] rounded-[var(--ds-radius-sm)] border-[length:var(--ds-border-width)] shrink-0 flex items-center justify-center",
-              isSelected ? "bg-[var(--ds-accent-primary)] border-[var(--ds-accent-primary)]" : "border-[var(--ds-border-default)]"
-            ),
-            children: isSelected && /* @__PURE__ */ jsx(Icon, { name: "check", size: 10, className: "text-[var(--ds-text-on-primary)]" })
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children: opt.label }),
-        isSelected && !multiple && /* @__PURE__ */ jsx(Icon, { name: "check", size: size === "sm" ? 12 : 14 })
-      ]
-    }
-  );
-}
 var CONTROL_HEIGHT = {
   sm: "h-[var(--ds-control-height-sm)]",
   md: "h-[var(--ds-control-height-md)]",
@@ -1175,10 +454,11 @@ var CHECKBOX_SIZES = {
   sm: { box: "h-[16px] w-[16px]", glyph: 10, label: "text-xs" },
   md: { box: "h-[18px] w-[18px]", glyph: 12, label: "text-sm" }
 };
-function Checkbox({ checked, onChange: onChangeProp, label, size = "md", disabled = false, indeterminate = false, className, ref }) {
+function Checkbox({ checked, onChange: onChangeProp, label, size = "md", disabled = false, indeterminate = false, className, ref, ...wiring }) {
   const onChange = useReportedChange(onChangeProp, checked);
   const internalRef = useRef(null);
   const dims = CHECKBOX_SIZES[size];
+  const control = useFieldControl(wiring);
   const mergedRef = useCallback(
     (node) => {
       internalRef.current = node;
@@ -1206,6 +486,11 @@ function Checkbox({ checked, onChange: onChangeProp, label, size = "md", disable
           {
             ref: mergedRef,
             type: "checkbox",
+            id: control.id,
+            "aria-labelledby": wiring["aria-labelledby"],
+            "aria-describedby": control.describedBy,
+            "aria-invalid": control.invalid || void 0,
+            required: control.required || void 0,
             checked,
             disabled,
             onChange: (e) => onChange(e.target.checked),
@@ -1268,10 +553,11 @@ function CheckboxGroupItem({ value, label, disabled, groupValue, onGroupChange }
     }
   );
 }
-function RadioGroup({ value, onChange: onChangeProp, options, orientation = "vertical", className, label }) {
+function RadioGroup({ value, onChange: onChangeProp, options, orientation = "vertical", className, label, ...wiring }) {
   const onChange = useReportedChange(onChangeProp, value);
   const groupRef = useRef(null);
   const groupId = useId();
+  const control = useFieldControl(wiring);
   const enabledOptions = options.filter((o) => !o.disabled);
   const tabStop = rovingTabStop(options, (o) => o.value === value, (o) => !!o.disabled);
   function handleKeyDown(e) {
@@ -1301,7 +587,11 @@ function RadioGroup({ value, onChange: onChangeProp, options, orientation = "ver
       {
         ref: groupRef,
         role: "radiogroup",
-        "aria-labelledby": label ? groupId : void 0,
+        id: control.id,
+        "aria-labelledby": label ? groupId : control.labelId,
+        "aria-describedby": control.describedBy,
+        "aria-invalid": control.invalid || void 0,
+        "aria-required": control.required || void 0,
         className: cn(
           "flex",
           orientation === "vertical" ? "flex-col gap-ds-2" : "flex-row flex-wrap gap-ds-3"
@@ -1796,13 +1086,13 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
                 className: "flex items-center justify-between bg-[var(--ds-bg-muted)] rounded-t-[var(--ds-radius-md)]",
                 style: { padding: "var(--ds-space-2) var(--ds-space-3)" },
                 children: [
-                  /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: prevMonth, "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
+                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: prevMonth, "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
                   /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: [
                     MONTHS[month],
                     " ",
                     year
                   ] }),
-                  /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: nextMonth, "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
+                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: nextMonth, "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
                 ]
               }
             ),
@@ -1865,6 +1155,7 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
                   /* @__PURE__ */ jsx(
                     Button,
                     {
+                      type: "button",
                       variant: "ghost",
                       size: "sm",
                       onClick: () => {
@@ -1878,6 +1169,7 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
                   value && /* @__PURE__ */ jsx(
                     Button,
                     {
+                      type: "button",
                       variant: "ghost",
                       size: "sm",
                       onClick: () => choose(null),
@@ -2264,7 +1556,7 @@ function DateRangePicker({
           ),
           style: { top: pos.top, left: pos.left },
           children: [
-            presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-ds-0.5 p-ds-2 border-r-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] min-w-[140px]", children: presets.map((p) => /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "justify-start", onClick: () => {
+            presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-ds-0.5 p-ds-2 border-r-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] min-w-[140px]", children: presets.map((p) => /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "justify-start", onClick: () => {
               const r = p.range();
               returnFocus();
               onChange(r);
@@ -2273,7 +1565,7 @@ function DateRangePicker({
             }, children: p.label }, p.label)) }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between bg-[var(--ds-bg-muted)] rounded-tr-[var(--ds-radius-md)] px-ds-3 py-ds-2", children: [
-                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => pageMonths(-1), "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
+                /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => pageMonths(-1), "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
                 /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: [
                   MONTHS2[months[0].getMonth()],
                   " ",
@@ -2283,7 +1575,7 @@ function DateRangePicker({
                   " ",
                   months[1].getFullYear()
                 ] }),
-                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => pageMonths(1), "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
+                /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => pageMonths(1), "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
               ] }),
               /* @__PURE__ */ jsx("div", { ref: gridRef, onKeyDown: grid.onKeyDown, className: "flex gap-ds-4 px-ds-3 py-ds-2", onMouseLeave: () => setHover(null), children: months.map((m) => /* @__PURE__ */ jsxs("div", { role: "grid", "aria-label": `${MONTHS2[m.getMonth()]} ${m.getFullYear()}`, className: "w-[224px] flex flex-col gap-ds-0.5", children: [
                 /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5 mb-ds-0.5", children: dayNames.map((d) => /* @__PURE__ */ jsx("div", { role: "columnheader", className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, d)) }),
@@ -2324,7 +1616,7 @@ function DateRangePicker({
               ] }, `${m.getFullYear()}-${m.getMonth()}`)) }),
               /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center bg-[var(--ds-bg-muted)] border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-br-[var(--ds-radius-md)] px-ds-3 py-ds-2", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)]", children: value.start && !value.end ? "Now pick an end date" : summary ?? "Pick a start date" }),
-                (value.start || value.end) && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                (value.start || value.end) && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
                   onChange({ start: null, end: null });
                   setHover(null);
                 }, children: "Clear" })
@@ -2488,6 +1780,8 @@ function formatSize(bytes) {
 }
 var running = (item) => item.status === "queued" || item.status === "uploading";
 var failureOf = (err) => err instanceof Error && err.message ? err.message : "The upload didn't work.";
+var percentOf = (value) => typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0;
+var STILL_UPLOADING = "Wait for your files to finish uploading";
 function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accept, multiple = true, maxSize, className, error = false, label, id }) {
   const controlled = files !== void 0;
   const [own, setOwn] = useState([]);
@@ -2508,8 +1802,6 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
   const rejectedId = `${ownId}-rejected`;
   const showLabel = label != null && !field;
   const constraints = fileConstraints(accept, maxSize, multiple);
-  const invalid = error || rejected != null;
-  const describedBy = [constraints ? constraintsId : null, field?.describedBy, rejected ? rejectedId : null].filter(Boolean).join(" ") || void 0;
   const patch = (itemId, change) => setOwn((prev) => prev.map((i) => i.id === itemId ? { ...i, ...change } : i));
   const stop = (itemId) => {
     controllers.current.get(itemId)?.abort();
@@ -2531,7 +1823,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
       attempt = Promise.resolve(run(item.file, {
         signal: controller.signal,
         onProgress: (percent) => {
-          if (!controller.signal.aborted) patch(item.id, { progress: Math.max(0, Math.min(100, percent)) });
+          if (!controller.signal.aborted) patch(item.id, { progress: percentOf(percent) });
         }
       }));
     } catch (err) {
@@ -2539,6 +1831,11 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
     }
     attempt.then(() => settle({ status: "done", progress: 100 }), (err) => settle({ status: "error", error: failureOf(err) }));
   };
+  const [hadUpload, setHadUpload] = useState(!!upload);
+  if (!controlled && !!upload !== hadUpload) {
+    setHadUpload(!!upload);
+    setOwn((prev) => prev.map((i) => upload ? i.status === "added" && i.file ? { ...i, status: "queued" } : i : i.status === "queued" ? { ...i, status: "error", error: "The upload couldn't start." } : i));
+  }
   useEffect(() => {
     if (controlled || !upload) return;
     let active = own.filter((i) => i.status === "uploading" && controllers.current.has(i.id)).length;
@@ -2564,31 +1861,67 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
   useEffect(() => {
     if (!overlayOpen && !controlled) stopAll();
   }, [overlayOpen, controlled, stopAll]);
-  const busy = shown.some(running);
+  const busy = shown.some((i) => i.status === "uploading" || i.status === "queued" && (controlled || !!upload));
   useEffect(() => {
     if (!busy || !overlayMark) return;
     return overlayMark.hold();
   }, [busy, overlayMark]);
-  const [heard, setHeard] = useState("");
-  const [seen, setSeen] = useState(() => new Map(shown.map((i) => [i.id, i.status])));
-  if (shown.length !== seen.size || shown.some((i) => seen.get(i.id) !== i.status)) {
+  const form = useOptionalFormContext();
+  const waitingKey = `${inputId}-uploads`;
+  const waitingId = `${ownId}-waiting`;
+  const busyRef = useLatest(busy);
+  const registerCheck = form?.register;
+  useEffect(() => registerCheck?.(waitingKey, () => busyRef.current ? STILL_UPLOADING : void 0), [registerCheck, waitingKey, busyRef]);
+  const waiting = form?.errors[waitingKey];
+  const clearWaiting = form?.setError;
+  useEffect(() => {
+    if (!busy && waiting) clearWaiting?.(waitingKey, void 0);
+  }, [busy, waiting, clearWaiting, waitingKey]);
+  useEffect(() => {
+    const owner = inputRef.current?.form;
+    if (!owner) return;
+    const clear = () => setRejected(null);
+    owner.addEventListener("submit", clear);
+    return () => owner.removeEventListener("submit", clear);
+  }, []);
+  const invalid = error || rejected != null || !!waiting;
+  const describedBy = [constraints ? constraintsId : null, field?.describedBy, rejected ? rejectedId : null, waiting ? waitingId : null].filter(Boolean).join(" ") || void 0;
+  useEffect(() => {
+    if (controlled && !onFiles) warnOnce("FileUpload", "`files` without `onFiles`: the page's list never gets the files the user picks. Add them in onFiles.");
+    if (controlled && upload) warnOnce("FileUpload", "pass `files` or `upload`, not both: with `files` the page runs the uploads and FileUpload shows them.");
+    if (!onRemove) warnOnce("FileUpload", "no `onRemove`: Remove shows only on a failed file, since the page would still have a file the user removed.");
+    const ids = shown.map((i) => i.id);
+    if (new Set(ids).size !== ids.length) warnOnce("FileUpload", "two files in the list share an id: give each file its own (the same file picked twice is two files).");
+  }, [controlled, onFiles, upload, onRemove, shown]);
+  const [heard, setHeard] = useState({ text: "", n: 0 });
+  const signature = shown.map((i) => `${i.id}\0${i.status}`).join("
");
+  const [seen, setSeen] = useState(() => ({ signature, statuses: new Map(shown.map((i) => [i.id, i.status])) }));
+  if (signature !== seen.signature) {
     const said = [];
     for (const item of shown) {
-      const before = seen.get(item.id);
+      const before = seen.statuses.get(item.id);
       if (!before || before === item.status) continue;
       if (item.status === "done") said.push(`${item.name} uploaded`);
       else if (item.status === "error") said.push(`${item.name} didn't upload: ${item.error ?? "the upload failed"}`);
     }
-    setSeen(new Map(shown.map((i) => [i.id, i.status])));
-    if (said.length) setHeard(said.join(". "));
+    setSeen({ signature, statuses: new Map(shown.map((i) => [i.id, i.status])) });
+    if (said.length) setHeard((h) => ({ text: said.join(". "), n: h.n + 1 }));
   }
   const pendingFocus = useRef(null);
+  const lastAction = useRef(null);
   useEffect(() => {
-    const index = pendingFocus.current;
-    if (index === null) return;
-    pendingFocus.current = null;
-    const rows = Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).map((row) => row.querySelector("button")).filter((b) => !!b);
-    focusAfterRemoval(rows, index, inputRef.current);
+    const gone = pendingFocus.current;
+    if (gone && !shown.some((i) => i.id === gone.id)) {
+      pendingFocus.current = null;
+      const rows = Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).map((row2) => row2.querySelector("button")).filter((b) => !!b);
+      focusAfterRemoval(rows, gone.index, inputRef.current);
+      return;
+    }
+    const last = lastAction.current;
+    const active = document.activeElement;
+    if (!last || last.el.isConnected || active && active !== document.body) return;
+    const row = Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).find((li) => li.dataset.uploadId === last.id);
+    row?.querySelector("button")?.focus();
   }, [shown]);
   const addFiles = useCallback(
     (fileList) => {
@@ -2615,7 +1948,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
   );
   const indexOf = (item) => shown.findIndex((i) => i.id === item.id);
   const cancel = (item) => {
-    pendingFocus.current = indexOf(item);
+    pendingFocus.current = { id: item.id, index: indexOf(item) };
     if (!controlled) {
       stop(item.id);
       setOwn((prev) => prev.filter((i) => i.id !== item.id));
@@ -2627,7 +1960,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
     onRetry?.(item);
   };
   const remove = (item) => {
-    pendingFocus.current = indexOf(item);
+    pendingFocus.current = { id: item.id, index: indexOf(item) };
     reportChange?.();
     if (!controlled) {
       stop(item.id);
@@ -2637,7 +1970,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
   };
   const canCancel = !controlled || !!onCancel;
   const canRetry = !controlled || !!onRetry;
-  const canRemove = !controlled || !!onRemove;
+  const canRemove = (item) => !!onRemove || !controlled && item.status === "error";
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-ds-3", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-ds-1.5", children: [
       showLabel && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: label }),
@@ -2691,14 +2024,20 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
           ]
         }
       ),
-      rejected && /* @__PURE__ */ jsx(InlineFieldError, { id: rejectedId, message: rejected, className: "mt-0" })
+      rejected && /* @__PURE__ */ jsx(InlineFieldError, { id: rejectedId, message: rejected, className: "mt-0" }),
+      waiting && /* @__PURE__ */ jsx(InlineFieldError, { id: waitingId, message: waiting, className: "mt-0" })
     ] }),
     shown.length > 0 && /* @__PURE__ */ jsx("ul", { ref: listRef, className: "space-y-ds-2", children: shown.map((item) => {
-      const words = item.status === "queued" ? "Waiting" : item.status === "uploading" ? `${Math.round(item.progress ?? 0)}%` : item.status === "done" ? "Uploaded" : item.status === "error" ? "Failed" : null;
+      const progress = percentOf(item.progress);
+      const words = item.status === "queued" ? "Waiting" : item.status === "uploading" ? `${Math.round(progress)}%` : item.status === "done" ? "Uploaded" : item.status === "error" ? "Failed" : null;
       return /* @__PURE__ */ jsxs(
         "li",
         {
+          "data-upload-id": item.id,
           "data-upload-status": item.status,
+          onFocus: (e) => {
+            if (e.target instanceof HTMLButtonElement) lastAction.current = { id: item.id, el: e.target };
+          },
           className: cn(
             "flex items-center gap-ds-3 text-sm",
             "border-[length:var(--ds-border-width)]",
@@ -2711,20 +2050,20 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
             /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx(TruncFileName, { className: "text-[var(--ds-text-primary)]", children: item.name }),
               (item.size != null || words) && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)]", children: [item.size != null ? formatSize(item.size) : null, words].filter(Boolean).join(" \xB7 ") }),
-              item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: item.progress ?? 0, size: "sm", label: `Uploading ${item.name}`, className: "mt-ds-1" }),
+              item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: progress, size: "sm", label: `Uploading ${item.name}`, className: "mt-ds-1" }),
               item.status === "error" && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-xs text-[var(--ds-status-error)]", children: item.error ?? "The upload didn't work." })
             ] }),
             item.status === "done" && /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, className: "text-[var(--ds-status-success)] shrink-0", "aria-hidden": "true" }),
             running(item) && canCancel && // the visible word starts the name, which says which file (WCAG 2.5.3)
-            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => cancel(item), "aria-label": `Cancel ${item.name}`, children: "Cancel" }),
-            item.status === "error" && canRetry && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => retry(item), "aria-label": `Retry ${item.name}`, children: "Retry" }),
-            !running(item) && canRemove && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => remove(item), "aria-label": `Remove ${item.name}`, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => cancel(item), "aria-label": `Cancel ${item.name}`, children: "Cancel" }),
+            item.status === "error" && canRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => retry(item), "aria-label": `Retry ${item.name}`, children: "Retry" }),
+            !running(item) && canRemove(item) && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => remove(item), "aria-label": `Remove ${item.name}`, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
           ]
         },
         item.id
       );
     }) }),
-    /* @__PURE__ */ jsx("p", { role: "status", className: "sr-only", children: heard })
+    /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: /* @__PURE__ */ jsx("span", { children: heard.text }, heard.n) })
   ] });
 }
 function SliderRange({
@@ -3334,222 +2673,6 @@ function TimePicker({
     )
   ] });
 }
-var sizes = {
-  sm: { box: "h-[var(--ds-control-height-sm)]", input: "text-xs self-stretch", btn: "w-7 text-xs" },
-  md: { box: "h-[var(--ds-control-height-md)]", input: "text-sm self-stretch", btn: "w-9 text-sm" },
-  lg: { box: "h-[var(--ds-control-height-lg)]", input: "text-base self-stretch", btn: "w-10 text-base" }
-};
-function NumberInput({
-  value,
-  onChange: onChangeProp,
-  min = -Infinity,
-  max = Infinity,
-  step = 1,
-  disabled = false,
-  placeholder = "0",
-  prefix,
-  suffix,
-  size: sizeProp,
-  className,
-  error = false,
-  allowDecimals,
-  id
-}) {
-  const onChange = useReportedChange(onChangeProp, value);
-  const contextSize = useContext(ControlSizeContext);
-  const size = sizeProp ?? contextSize ?? "md";
-  const intervalRef = useRef(void 0);
-  const timeoutRef = useRef(void 0);
-  const inputRef = useRef(null);
-  const [focused, setFocused] = useState(false);
-  const [draft, setDraft] = useState(String(value));
-  const decimals = allowDecimals ?? step % 1 !== 0;
-  const [prevSync, setPrevSync] = useState({ value, focused });
-  if (value !== prevSync.value || focused !== prevSync.focused) {
-    setPrevSync({ value, focused });
-    if (!focused) setDraft(String(value));
-  }
-  const clamp = useCallback(
-    (v) => Math.min(max, Math.max(min, v)),
-    [min, max]
-  );
-  const valueRef = useLatest(value);
-  const commitValue = useCallback((v, own = false) => {
-    const clamped = clamp(v);
-    valueRef.current = clamped;
-    setDraft(String(clamped));
-    (own ? onChangeProp : onChange)(clamped);
-    return clamped;
-  }, [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(
-    (fn) => {
-      fn();
-      timeoutRef.current = setTimeout(() => {
-        intervalRef.current = setInterval(fn, 75);
-      }, 400);
-    },
-    []
-  );
-  const stopRepeat = useCallback(() => {
-    clearTimeout(timeoutRef.current);
-    clearInterval(intervalRef.current);
-  }, []);
-  const handleInput = useCallback(
-    (e) => {
-      const raw = e.target.value;
-      if (raw === "" || raw === "-") {
-        setDraft(raw);
-        return;
-      }
-      if (!decimals && raw.includes(".")) return;
-      const validPattern = decimals ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
-      if (!validPattern.test(raw)) return;
-      setDraft(raw);
-      const parsed = parseFloat(raw);
-      if (!isNaN(parsed) && isFinite(parsed)) {
-        onChange(clamp(parsed));
-      }
-    },
-    [onChange, clamp, decimals]
-  );
-  const handleBlur = useCallback(() => {
-    setFocused(false);
-    const parsed = parseFloat(draft);
-    if (!isNaN(parsed) && isFinite(parsed)) {
-      const committed = commitValue(parsed);
-      setDraft(String(committed));
-    } else {
-      const fallback = isFinite(min) ? min : 0;
-      const committed = commitValue(value !== void 0 ? value : fallback, true);
-      setDraft(String(committed));
-    }
-  }, [draft, commitValue, min, value]);
-  const handleFocus = useCallback(() => {
-    setFocused(true);
-  }, []);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        increment();
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        decrement();
-      }
-    },
-    [increment, decrement]
-  );
-  const s = sizes[size];
-  const atMin = value <= min;
-  const atMax = value >= max;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center w-full",
-        s.box,
-        "border-[length:var(--ds-border-width)]",
-        error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
-        "rounded-[var(--ds-radius-md)]",
-        "shadow-[var(--ds-input-shadow)]",
-        "bg-[var(--ds-input-bg)]",
-        "transition-colors duration-[var(--ds-transition-speed)]",
-        !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
-        error ? ERROR_FOCUS_WITHIN_RING : cn(FOCUS_WITHIN_RING, "focus-within:hover:border-[var(--ds-border-focus)]"),
-        disabled && "opacity-disabled cursor-not-allowed",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            tabIndex: -1,
-            disabled: disabled || atMin,
-            onMouseDown: (e) => {
-              e.preventDefault();
-              inputRef.current?.focus();
-              if (!disabled && !atMin) startRepeat(decrement);
-            },
-            onMouseUp: stopRepeat,
-            onMouseLeave: stopRepeat,
-            className: cn(
-              "inline-flex items-center justify-center shrink-0",
-              "border-r-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-              "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
-              "transition-colors cursor-pointer",
-              "rounded-l-[var(--ds-radius-md)]",
-              s.btn,
-              s.input,
-              (disabled || atMin) && "opacity-disabled cursor-not-allowed hover:bg-transparent hover:text-[var(--ds-text-muted)]"
-            ),
-            "aria-label": "Decrease",
-            children: "\u2212"
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center flex-1 min-w-0 px-ds-2 gap-ds-1", s.input), children: [
-          prefix && /* @__PURE__ */ jsx("span", { className: "text-[var(--ds-text-muted)] shrink-0 text-xs", children: prefix }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              id,
-              type: "text",
-              inputMode: decimals ? "decimal" : "numeric",
-              "aria-invalid": error || void 0,
-              value: focused ? draft : String(value),
-              onChange: handleInput,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              onKeyDown: handleKeyDown,
-              disabled,
-              placeholder,
-              className: cn(
-                "w-full min-w-0 bg-transparent text-center outline-none",
-                "text-[var(--ds-text-primary)]",
-                "placeholder:text-[var(--ds-text-muted)]",
-                "font-[family-name:var(--ds-font-mono)]",
-                s.input,
-                disabled && "cursor-not-allowed"
-              )
-            }
-          ),
-          suffix && /* @__PURE__ */ jsx("span", { className: "text-[var(--ds-text-muted)] shrink-0 text-xs", children: suffix })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            tabIndex: -1,
-            disabled: disabled || atMax,
-            onMouseDown: (e) => {
-              e.preventDefault();
-              inputRef.current?.focus();
-              if (!disabled && !atMax) startRepeat(increment);
-            },
-            onMouseUp: stopRepeat,
-            onMouseLeave: stopRepeat,
-            className: cn(
-              "inline-flex items-center justify-center shrink-0",
-              "border-l-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-              "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
-              "transition-colors cursor-pointer",
-              "rounded-r-[var(--ds-radius-md)]",
-              s.btn,
-              s.input,
-              (disabled || atMax) && "opacity-disabled cursor-not-allowed hover:bg-transparent hover:text-[var(--ds-text-muted)]"
-            ),
-            "aria-label": "Increase",
-            children: "+"
-          }
-        )
-      ]
-    }
-  );
-}
 var variantStyles = {
   default: "bg-[var(--ds-bg-emphasis)] text-[var(--ds-text-primary)]",
   subtle: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]",
@@ -3791,7 +2914,7 @@ function TagInput({
     }
   );
 }
-var sizes2 = {
+var sizes = {
   sm: "w-[var(--ds-control-height-sm)] h-[var(--ds-control-height-sm)] text-sm",
   md: "w-[var(--ds-control-height-md)] h-[var(--ds-control-height-md)] text-base",
   lg: "w-[var(--ds-control-height-lg)] h-[var(--ds-control-height-lg)] text-lg"
@@ -3895,7 +3018,7 @@ function PinInput({
             !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
             error ? ERROR_FOCUS_RING : FOCUS_RING,
             "placeholder:text-[var(--ds-text-muted)]",
-            sizes2[size],
+            sizes[size],
             disabled && "opacity-disabled cursor-not-allowed"
           )
         },
@@ -3949,11 +3072,13 @@ function Rating({
   readOnly = false,
   size = "md",
   className,
-  error = false
+  error = false,
+  ...wiring
 }) {
   const onChange = useReportedChange(onChangeProp, value);
   const [hoverValue, setHoverValue] = useState(null);
   const displayValue = hoverValue ?? value;
+  const control = useFieldControl({ ...wiring, error: error || void 0 });
   const handleClick = useCallback(
     (starIdx, isLeftHalf) => {
       if (readOnly || !onChangeProp) return;
@@ -4020,8 +3145,12 @@ function Rating({
     "div",
     {
       role: readOnly ? "img" : "radiogroup",
-      "aria-label": `Rating: ${value} out of ${max}`,
-      "aria-invalid": error || void 0,
+      id: control.id,
+      "aria-label": readOnly || !control.labelId ? `Rating: ${value} out of ${max}` : void 0,
+      "aria-labelledby": readOnly ? void 0 : control.labelId,
+      "aria-describedby": control.describedBy,
+      "aria-invalid": readOnly ? void 0 : control.invalid || void 0,
+      "aria-required": readOnly ? void 0 : control.required || void 0,
       onKeyDown: readOnly ? void 0 : handleKeyDown,
       className: cn(
         "inline-flex items-center gap-ds-0.5",
@@ -4431,11 +3560,6 @@ var Alert = forwardRef(function Alert2({
     }
   );
 });
-function controlsOf(form) {
-  if (!form) return "";
-  const controls = form.querySelectorAll("input, select, textarea, [role='combobox'], [role='radiogroup'], [role='checkbox'], [role='switch'], [role='slider'], [role='spinbutton'], [contenteditable='true']");
-  return Array.from(controls).map((el) => el.id || el.getAttribute("name") || el.getAttribute("role") || el.tagName).join("|");
-}
 var isThenable = (value) => !!value && typeof value.then === "function";
 function stampFormId(node, formId) {
   return Children.map(node, (child) => {
@@ -4494,29 +3618,18 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
   const pendingFocus = useRef(false);
   const onSubmitRef = useLatest(onSubmit);
   const overlayMark = useContext(OverlayMarkCtx);
-  const reportChange = overlayMark ? overlayMark.report : null;
-  const [savedCheck, setSavedCheck] = useState(null);
-  useEffect(() => {
-    if (!savedCheck) return;
-    const form = formRef.current;
-    if (form && !form.querySelector("[aria-invalid='true']") && controlsOf(form) === savedCheck.controls) overlayMark?.clear();
-  }, [savedCheck, overlayMark]);
+  const reportChange = useMemo(() => overlayMark ? () => overlayMark.report(formId) : null, [overlayMark, formId]);
+  useEffect(() => overlayMark?.attach(formId), [overlayMark, formId]);
   useEffect(() => {
     if (pendingSubmit.current && submitted) {
       pendingSubmit.current = false;
-      const form = formRef.current;
-      const passed = Object.keys(errorsRef.current).length === 0 && !form?.querySelector("[aria-invalid='true']");
-      const controls = controlsOf(form);
+      const answer = overlayMark?.submit(formId, { element: () => formRef.current, failing: () => Object.keys(errorsRef.current).length > 0 });
       const result = onSubmitRef.current(errorsRef.current);
-      if (!passed || !overlayMark) return;
-      if (isThenable(result)) {
-        result.then(() => overlayMark.clear(), () => {
-        });
-      } else {
-        setSavedCheck({ controls });
-      }
+      if (!answer) return;
+      if (isThenable(result)) void result.then(() => answer.settle("resolved"));
+      else answer.settle("returned");
     }
-  }, [submitted, submitCount, errors, errorsRef, onSubmitRef, overlayMark]);
+  }, [submitted, submitCount, errors, errorsRef, onSubmitRef, overlayMark, formId]);
   const submittedRef = useLatest(submitted);
   const errorSummaryRef = useLatest(errorSummary);
   const summaryRef = useRef(null);
@@ -4601,7 +3714,9 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
   }, []);
   const handleSubmit = useCallback(
     (e) => {
+      if (e.target !== e.currentTarget) return;
       e.preventDefault();
+      e.stopPropagation();
       if (checks.current.size > 0) {
         const found = /* @__PURE__ */ new Map();
         for (const [field, check] of checks.current) found.set(field, check());
@@ -4645,16 +3760,26 @@ var FOCUSABLE2 = "input:not([disabled]):not([type='hidden']), select:not([disabl
 function AddAnother({ items, getId, itemName, columns, renderRow, onAdd, onRemove, addLabel = "Add another", label, minItems = 1, maxItems, className }) {
   const listRef = useRef(null);
   const addRef = useRef(null);
+  const reportChange = useContext(FormChangeCtx);
+  const getIdRef = useLatest(getId);
   const pending = useRef(null);
-  const firstFields = () => Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).map((row) => row.querySelector(FOCUSABLE2)).filter((el) => !!el);
   useEffect(() => {
     const next = pending.current;
     if (!next) return;
+    const rows = () => Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []);
+    const firstFields = () => rows().map((row) => row.querySelector(FOCUSABLE2)).filter((el) => !!el);
+    const ids = items.map((item) => getIdRef.current(item));
+    if (next.kind === "remove") {
+      if (ids.includes(next.id)) return;
+      pending.current = null;
+      focusAfterRemoval(firstFields(), next.index, addRef.current);
+      return;
+    }
+    const added = ids.findIndex((id) => !next.before.has(id));
+    if (added === -1) return;
     pending.current = null;
-    const fields = firstFields();
-    if (next.kind === "add") fields[fields.length - 1]?.focus();
-    else focusAfterRemoval(fields, next.index, addRef.current);
-  }, [items]);
+    rows()[added]?.querySelector(FOCUSABLE2)?.focus();
+  }, [items, getIdRef]);
   const canRemove = items.length > minItems;
   const canAdd = maxItems === void 0 || items.length < maxItems;
   const grid = { "--gs-add-another-cols": `repeat(${columns.length}, minmax(0, 1fr)) max-content` };
@@ -4669,13 +3794,15 @@ function AddAnother({ items, getId, itemName, columns, renderRow, onAdd, onRemov
         /* @__PURE__ */ jsx(AddAnotherRowCtx.Provider, { value: true, children: renderRow(item, index, (column) => `${column}, ${itemName(index)}`) }),
         canRemove && // the visible "Remove" starts its name, which says whose row it removes (WCAG 2.5.3 label in name)
         /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `Remove ${itemName(index)}`, className: "justify-self-start @min-[30rem]:mt-[calc((var(--ds-control-height-md)-var(--ds-control-height-sm))/2)]", onClick: () => {
-          pending.current = { kind: "remove", index };
+          pending.current = { kind: "remove", id, index };
+          reportChange?.();
           onRemove(id);
         }, children: "Remove" })
       ] }, id);
     }) }),
     canAdd && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { ref: addRef, type: "button", variant: "secondary", onClick: () => {
-      pending.current = { kind: "add" };
+      pending.current = { kind: "add", before: new Set(items.map(getId)) };
+      reportChange?.();
       onAdd();
     }, children: addLabel }) })
   ] });
@@ -4695,7 +3822,7 @@ function TransferList({
   className,
   ref
 }) {
-  const onChange = useReportedChange(onChangeProp, selected);
+  const onChange = useReportedChange(onChangeProp, selected, (_available, chosen) => chosen);
   const [checkedAvailable, setCheckedAvailable] = useState(/* @__PURE__ */ new Set());
   const [checkedSelected, setCheckedSelected] = useState(/* @__PURE__ */ new Set());
   const [searchLeft, setSearchLeft] = useState("");
@@ -5225,50 +4352,25 @@ function MentionInput({
               ]
             },
             s.id
-          ))
-        }
-      ),
-      document.body
-    )
-  ] });
-}
-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 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;
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
 }
-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));
+var CardRowCtx = createContext(null);
+var TITLE_LINE = "h-[calc(var(--ds-font-size-lg)*var(--ds-line-height-lg))]";
+var HeaderRowCtx = createContext(false);
+function holdsHeader(children) {
+  let found = false;
+  Children.forEach(children, (child) => {
+    if (found || !isValidElement(child)) return;
+    if (child.type === Fragment$1) found = holdsHeader(child.props.children);
+    else if (child.type === CardHeader) found = true;
+  });
+  return found;
 }
-var CardCtx = createContext(false);
 var CardActionCtx = createContext(null);
 var CARD_ACTION_ATTR = "data-card-action";
 var CardSurfaceCtx = createContext(false);
@@ -5419,7 +4521,7 @@ var Card = forwardRef(function Card2({
   const handleKeyDown = isSelectable && !disabled ? (e) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      onSelectedChange?.(!selected);
+      if (!e.repeat) onSelectedChange?.(!selected);
     }
   } : isAction && !disabled ? (e) => {
     if (e.target !== e.currentTarget) return;
@@ -5436,13 +4538,84 @@ var Card = forwardRef(function Card2({
   } : void 0;
   const handleCheckableClick = (e) => {
     e.stopPropagation();
-    onSelectedChange?.(!selected);
+    if (!disabled) onSelectedChange?.(!selected);
   };
   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 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;
+  const defaultCheckBadge = !hasSelectType && !checkable && selected && !loading ? /* @__PURE__ */ jsx("span", { "data-card-check": "", className: "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;
+  const checkboxes = useRef(/* @__PURE__ */ new Set());
+  const checkboxFocused = useRef(false);
+  const checkboxRef = useCallback((node) => {
+    if (!node) return;
+    checkboxes.current.add(node);
+    return () => {
+      checkboxes.current.delete(node);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!checkboxFocused.current) return;
+    const active = document.activeElement;
+    if (active && active !== document.body) return;
+    for (const node of checkboxes.current) {
+      if (node.isConnected) {
+        node.focus({ preventScroll: true });
+        return;
+      }
+    }
+  });
+  const checkbox = checkable ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: checkboxRef,
+      "data-card-checkbox": "",
+      className: cn(
+        "rounded-[calc(var(--ds-radius-sm)*0.6)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer"
+      ),
+      onClick: handleCheckableClick,
+      role: "checkbox",
+      "aria-checked": !!selected,
+      "aria-disabled": disabled || void 0,
+      ...inner.titleId ? { "aria-labelledby": inner.titleId } : { "aria-label": "Select" },
+      tabIndex: 0,
+      onFocus: () => {
+        checkboxFocused.current = true;
+      },
+      onBlur: (e) => {
+        const node = e.currentTarget;
+        queueMicrotask(() => {
+          if (node.isConnected) checkboxFocused.current = false;
+        });
+      },
+      onKeyDown: (e) => {
+        if (e.key !== " ") return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (!e.repeat && !disabled) onSelectedChange?.(!selected);
+      },
+      children: /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected, disabled })
+    }
+  ) : null;
+  const check = indicator ?? defaultCheckBadge;
+  const headers = useRef([]);
+  const [owner, setOwner] = useState(null);
+  const [guess, setGuess] = useState(() => holdsHeader(children));
+  const register = useCallback((header) => {
+    headers.current = [...headers.current, header];
+    setOwner(headers.current[0]);
+    return () => {
+      headers.current = headers.current.filter((h) => h !== header);
+      setOwner(headers.current[0] ?? null);
+      setGuess(false);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (headers.current.length === 0) setGuess(false);
+  }, []);
+  const hasHeader = owner !== null || guess;
+  const rowParts = { checkbox, check, owner, register };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5473,32 +4646,22 @@ var Card = forwardRef(function Card2({
       ...ariaAttr,
       ...props,
       children: [
-        defaultCheckBadge,
-        indicator && /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 z-[1]", children: indicator }),
-        checkable && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute top-ds-3 left-ds-3 z-[1] cursor-pointer",
-            onClick: handleCheckableClick,
-            role: "checkbox",
-            "aria-checked": !!selected,
-            ...inner.titleId ? { "aria-labelledby": inner.titleId } : { "aria-label": "Select" },
-            tabIndex: 0,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                e.stopPropagation();
-                onSelectedChange?.(!selected);
-              }
-            },
-            children: /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected })
-          }
-        ),
-        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardActionCtx, { value: action, children: /* @__PURE__ */ jsx(CardCtx, { value: checkable, children: loading ? (
+        !loading && !hasHeader && checkbox && /* @__PURE__ */ jsxs("div", { "data-card-header-row": "", className: "flex items-center gap-ds-2 px-ds-5 pt-ds-4", children: [
+          checkbox,
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "grow" }),
+          check && /* @__PURE__ */ jsx("span", { "data-card-selection": "", className: "shrink-0 flex", children: check })
+        ] }),
+        !loading && !hasHeader && !checkbox && check && /* @__PURE__ */ jsx("div", { "data-card-selection": "", className: "absolute top-ds-3 right-ds-3 z-[1] flex", children: check }),
+        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardActionCtx, { value: action, children: /* @__PURE__ */ jsx(CardRowCtx, { value: rowParts, children: loading ? (
           // Round 15 (the owner's 52.1): a placeholder stands where the content will stand — inside the card's
           // content inset (CardContent's padding), a title-height line then two body lines — never flush against the border.
-          /* @__PURE__ */ jsx("div", { "data-card-loading": "", "aria-busy": "true", className: cn("pr-ds-5 py-ds-4", checkable ? "pl-ds-10" : "pl-ds-5"), children: /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
-            /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-5 w-1/3" }),
+          // Its header holds a badge-sized block (A2), so a grid of item cards keeps its columns when they load.
+          /* @__PURE__ */ jsx("div", { "data-card-loading": "", "aria-busy": "true", className: "px-ds-5 py-ds-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
+            /* @__PURE__ */ jsxs("div", { "data-card-header-row": "", className: "flex items-center gap-ds-2", children: [
+              checkbox,
+              /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-5 w-1/3" }),
+              /* @__PURE__ */ jsx("div", { "data-header-actions": "", className: "contents", children: /* @__PURE__ */ jsx("div", { "data-gs-badge": "", className: "shrink-0", children: /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-5 w-14 rounded-[var(--ds-radius-full)]" }) }) })
+            ] }),
             /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-full" }),
             /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-2/3" })
           ] }) })
@@ -5507,60 +4670,95 @@ var Card = forwardRef(function Card2({
     }
   );
 });
-var CardHeader = forwardRef(function CardHeader2({ className, children, actions, icon, menuItems, ...props }, ref) {
-  const isCheckable = useContext(CardCtx);
-  const hasActions = actions || menuItems;
-  const pl = isCheckable ? "pl-ds-10" : "pl-ds-5";
-  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.actions, children: [
-    actions,
-    menuItems && /* @__PURE__ */ jsx(
-      DropdownMenu,
-      {
-        trigger: /* @__PURE__ */ jsx(
-          "button",
+function partsOf(children) {
+  const parts = [];
+  const open = (node) => Children.toArray(node).forEach((child) => {
+    if (isValidElement(child) && child.type === Fragment$1) open(child.props.children);
+    else if (child !== "") parts.push(child);
+  });
+  open(children);
+  return parts;
+}
+function splitTitle(children) {
+  const parts = partsOf(children);
+  const at = parts.findIndex((p) => isValidElement(p) && p.type === CardTitle);
+  if (at < 0) return { lead: [], title: parts[0] ?? null, rest: parts.slice(1) };
+  return { lead: parts.slice(0, at), title: parts[at], rest: parts.slice(at + 1) };
+}
+var TITLE_FLOOR = "basis-[calc(var(--ds-font-size-lg)*4.5)]";
+var TITLE_ROW = cn(
+  "flex flex-wrap items-start justify-end gap-x-ds-2 gap-y-ds-2 min-w-0 grow basis-0",
+  "[&>[data-header-actions]>*]:order-5",
+  "[&>[data-header-actions]>:has([data-gs-badge]):not(:has(a,button,input,select,textarea,[role=button],[tabindex]:not([tabindex='-1'])))]:order-2",
+  "[&>[data-header-actions]>:has([aria-haspopup])]:order-6"
+);
+var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
+  const { className, children, actions, icon, menuItems, ...props } = allProps;
+  const row = useContext(CardRowCtx);
+  const [self] = useState(() => ({}));
+  const register = row?.register;
+  useLayoutEffect(() => register?.(self), [register, self]);
+  const owns = !!row && row.owner === self;
+  const iconBlock = icon ? (
+    // the icon stays where it was, a tile above the title (28 of 66 headers with actions have one)
+    /* @__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", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20, className: "text-[var(--ds-text-secondary)]" }) })
+  ) : null;
+  const menu = menuItems ? /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      trigger: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "More actions",
+          className: cn(
+            "inline-flex items-center justify-center h-8 w-8 rounded-[var(--ds-radius-md)]",
+            "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
+            "transition-colors duration-[var(--ds-transition-speed)]"
+          ),
+          onClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 16 })
+        }
+      ),
+      items: menuItems
+    }
+  ) : null;
+  const band = (order) => cn("shrink-0 self-start flex items-center", TITLE_LINE, order);
+  const checkbox = owns && row.checkbox ? /* @__PURE__ */ jsx("span", { className: band("order-0"), children: row.checkbox }) : null;
+  const check = owns && row.check ? /* @__PURE__ */ jsx("span", { "data-card-selection": "", className: band("order-4"), children: row.check }) : null;
+  const menuPart = menu ? /* @__PURE__ */ jsx("span", { className: band("order-6"), children: menu }) : null;
+  const { lead, title, rest } = splitTitle(children);
+  const leadBlock = lead.length > 0 ? /* @__PURE__ */ jsx("div", { "data-card-lead": "", className: "flex flex-col space-y-ds-1.5 min-w-0 grow", children: lead }) : null;
+  const topLine = iconBlock ?? leadBlock;
+  const ownBlock = title !== null && !(isValidElement(title) && title.type === CardTitle);
+  const actionsSlot = "actions" in allProps ? /* @__PURE__ */ jsx("div", { "data-header-actions": "", className: "contents", children: partsOf(actions).map((item, i) => /* @__PURE__ */ jsx("span", { className: cn("flex items-center shrink-0", TITLE_LINE), children: item }, isValidElement(item) && item.key !== null ? item.key : i)) }) : null;
+  return /* @__PURE__ */ jsxs("div", { ref, "data-card-header": "", className: cn("flex flex-col px-ds-5 pt-ds-4 last:pb-ds-4 min-w-0", className), ...props, children: [
+    topLine && /* @__PURE__ */ jsxs("div", { "data-card-icon-row": iconBlock ? "" : void 0, "data-card-lead-row": iconBlock ? void 0 : "", className: cn("flex items-start gap-ds-2", iconBlock ? "mb-ds-2.5" : "mb-ds-1.5"), children: [
+      checkbox,
+      topLine,
+      iconBlock && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "grow -ml-ds-2" }),
+      check,
+      menuPart
+    ] }),
+    iconBlock && leadBlock && /* @__PURE__ */ jsx("div", { className: "flex mb-ds-1.5", children: leadBlock }),
+    /* @__PURE__ */ jsxs("div", { "data-card-header-row": "", className: "flex items-start gap-ds-2 min-w-0", children: [
+      !topLine && checkbox,
+      /* @__PURE__ */ jsxs("div", { "data-card-title-line": "", className: TITLE_ROW, children: [
+        title && /* @__PURE__ */ jsx(
+          "div",
           {
-            type: "button",
-            "aria-label": "More actions",
-            className: cn(
-              "inline-flex items-center justify-center h-8 w-8 rounded-[var(--ds-radius-md)]",
-              "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
-              "transition-colors duration-[var(--ds-transition-speed)]"
-            ),
-            onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 16 })
+            "data-card-title-row": "",
+            className: cn("order-1 min-w-0 me-auto", TITLE_FLOOR, ownBlock ? "grow" : "grow-[999] max-w-max"),
+            children: /* @__PURE__ */ jsx(HeaderRowCtx, { value: true, children: title })
           }
         ),
-        items: menuItems
-      }
-    )
-  ] }) : 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) {
-    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", { 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 })
-      ] });
-    }
-    return /* @__PURE__ */ jsx("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__ */ jsxs("div", { className: HEADER_LAYOUT.block, children: [
-        iconBlock,
-        children
+        actionsSlot,
+        !ownBlock && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "order-3 grow basis-0 -ml-ds-2" })
       ] }),
-      actionsBlock
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col space-y-ds-1.5 pr-ds-5 pt-ds-4 last:pb-ds-4", pl, className), ...props, children: [
-    iconBlock,
-    children
+      !topLine && check,
+      !topLine && menuPart
+    ] }),
+    rest.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-ds-1.5 break-words mt-ds-1.5 min-w-0", children: rest })
   ] });
 });
 var cardLineClampClasses = {
@@ -5571,7 +4769,10 @@ var cardLineClampClasses = {
   5: "line-clamp-5",
   6: "line-clamp-6"
 };
-var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2, id, ...props }, forwardedRef) {
+var WHOLE_ON_KEYBOARD = "[[data-card]:has(:focus-visible)_&]:whitespace-normal [[data-card]:has(:focus-visible)_&]:line-clamp-none";
+var CardTitle = forwardRef(function CardTitle2({ className, children, lines: linesProp, id, ...props }, forwardedRef) {
+  const inHeaderRow = useContext(HeaderRowCtx);
+  const lines = linesProp ?? (inHeaderRow ? 1 : 2);
   const action = useContext(CardActionCtx);
   const generatedId = useId();
   const { ref: overflowRef, isTruncated } = useTextOverflow({ lines, disabled: lines === 0 });
@@ -5587,7 +4788,7 @@ var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2,
       id: id ?? generatedId,
       "data-card-title": "",
       ...lines === 1 ? { "data-title-one-line": "" } : {},
-      className: cn(TITLE_TEXT, !action && lines > 0 && lineClampClass, action && lines === 1 && "text-ellipsis", className),
+      className: cn(TITLE_TEXT, !action && lines > 0 && [lineClampClass, WHOLE_ON_KEYBOARD], 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
@@ -5604,14 +4805,13 @@ var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2,
               "block w-full text-left cursor-pointer [text-overflow:inherit] focus-visible:outline-none disabled:cursor-not-allowed",
               "after:absolute after:inset-0 after:rounded-[var(--ds-radius-md)] after:pointer-events-none focus-visible:after:shadow-[var(--ds-shadow-focus)]"
             ),
-            children: /* @__PURE__ */ jsx("span", { ref: (node) => overflowRef(lines > 0 ? node : null), className: cn("block [text-overflow:inherit]", lines > 0 && lineClampClass), children })
+            children: /* @__PURE__ */ jsx("span", { ref: (node) => overflowRef(lines > 0 ? node : null), className: cn("block [text-overflow:inherit]", lines > 0 && [lineClampClass, WHOLE_ON_KEYBOARD]), children })
           }
         )
       ) : children
     }
   );
-  if (!isTruncated || lines === 0) return heading;
-  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: heading });
+  return /* @__PURE__ */ jsx(Tooltip, { content: children, disabled: !isTruncated, children: heading });
 });
 var CardDescription = forwardRef(function CardDescription2({ className, children, lines = 2, ...props }, forwardedRef) {
   const { ref: overflowRef, isTruncated } = useTextOverflow({ lines, disabled: lines === 0 });
@@ -5629,18 +4829,15 @@ var CardDescription = forwardRef(function CardDescription2({ className, children
       children
     }
   );
-  if (!isTruncated || lines === 0) return el;
-  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
+  return /* @__PURE__ */ jsx(Tooltip, { content: children, disabled: !isTruncated, children: el });
 });
 var CardContent = forwardRef(function CardContent2({ className, children, ...props }, ref) {
-  const isCheckable = useContext(CardCtx);
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 pr-ds-5 py-ds-4", isCheckable ? "pl-ds-10" : "pl-ds-5", className), ...props, children });
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 px-ds-5 py-ds-4", className), ...props, children });
 });
 var CardFooter = forwardRef(function CardFooter2({ className, children, ...props }, ref) {
-  const isCheckable = useContext(CardCtx);
   return (
     // a footer that holds only buttons puts them at the end (round 11: a lone Save sat on the left); text keeps the start
-    /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-ds-2 pr-ds-5 pb-ds-4 pt-ds-2 mt-auto min-w-0 [&:not(:has(>:not(button)))]:justify-end", isCheckable ? "pl-ds-10" : "pl-ds-5", className), ...props, children })
+    /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-ds-2 px-ds-5 pb-ds-4 pt-ds-2 mt-auto min-w-0 [&:not(:has(>:not(button)))]:justify-end", className), ...props, children })
   );
 });
 function TruncLabel({ children }) {
@@ -5756,6 +4953,9 @@ function DataList({ items, columns = 1, className }) {
   );
 }
 var COUNT_FROM_PAGE = [
+  // one card counts too: a lone card fell back to React's count, which counts components that draw nothing, and a grid
+  // with one card inside another took the outer grid's count (the review of 30 September)
+  "[&:has(>:only-child)]:[--gs-cards:1]",
   "[&: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]",
@@ -5768,6 +4968,7 @@ var COUNT_FROM_PAGE = [
   "[&:has(>:nth-child(11):last-child)]:[--gs-cards:11]",
   "[&:has(>:nth-child(12))]:[--gs-cards:12]"
 ].join(" ");
+var MIN_FROM_HEADERS = "[--gs-card-min:14rem] has-[[data-header-actions]]:[--gs-card-min:20rem]";
 function countCards(children) {
   let n = 0;
   Children.forEach(children, (child) => {
@@ -5776,14 +4977,18 @@ function countCards(children) {
   });
   return n;
 }
-function CardGrid({ minWidth = "14rem", maxColumns = 4, compare = false, gap = "var(--ds-space-4)", className, style, children, ref, ...props }) {
+function CardGrid({ minWidth, maxColumns = 4, compare = false, gap = "var(--ds-space-4)", fill: fill2 = true, 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 drawn = "var(--gs-cards, var(--gs-cards-counted))";
+  const min = "var(--gs-card-min)";
+  const shareOf = (n) => `calc((100% - (${n} - 1) * var(--gs-card-gap)) / ${n})`;
+  const collection = `max(min(${min}, 100%), ${shareOf(String(most))})`;
+  const column = compare ? `max(${shareOf(drawn)}, min(100%, calc((${drawn} * ${min} + (${drawn} - 1) * var(--gs-card-gap) - 100%) * 999)))` : fill2 ? `max(${shareOf(`max(${drawn}, 2)`)}, ${collection})` : collection;
   const template = {
     "--gs-card-gap": gap,
-    ...compare ? { "--gs-cards-counted": Math.max(1, countCards(children)) } : {},
+    // A2: a width passed wins; a comparison keeps 14rem; a collection's comes from its headers (MIN_FROM_HEADERS)
+    ...minWidth ? { "--gs-card-min": minWidth } : compare ? { "--gs-card-min": "14rem" } : {},
+    ...compare || fill2 ? { "--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
@@ -5796,7 +5001,8 @@ function CardGrid({ minWidth = "14rem", maxColumns = 4, compare = false, gap = "
       "data-card-grid": compare ? "compare" : "",
       className: cn(
         "grid",
-        compare && COUNT_FROM_PAGE,
+        !minWidth && !compare && MIN_FROM_HEADERS,
+        (compare || fill2) && 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
@@ -6084,7 +5290,7 @@ var EDGE_FADE = 24;
 var NONE = { left: false, right: false, vertical: false, gutterRight: 0, gutterBottom: 0 };
 var same = (a, b) => a.left === b.left && a.right === b.right && a.vertical === b.vertical && a.gutterRight === b.gutterRight && a.gutterBottom === b.gutterBottom;
 function useScrollEdges(options = {}) {
-  const { enabled = true, fade = EDGE_FADE } = options;
+  const { enabled = true, fade = EDGE_FADE, noFade } = options;
   const elRef = useRef(null);
   const observer = useRef(null);
   const borders = useRef({ x: 0, y: 0 });
@@ -6116,9 +5322,11 @@ function useScrollEdges(options = {}) {
     for (const child of Array.from(el.children)) o.observe(child);
     observer.current = o;
   }, [enabled, measure]);
-  const shown = enabled && (state.left || state.right);
+  const fadeLeft = state.left && !noFade?.left;
+  const fadeRight = state.right && !noFade?.right;
+  const shown = enabled && (fadeLeft || fadeRight);
   const { gutterRight: gr, gutterBottom: gb } = state;
-  const fadeLayer = `linear-gradient(to right, ${state.left ? `transparent 0, black ${fade}px` : "black 0"}, ${state.right ? `black calc(100% - ${gr + fade}px), transparent calc(100% - ${gr}px)` : "black 100%"})`;
+  const fadeLayer = `linear-gradient(to right, ${fadeLeft ? `transparent 0, black ${fade}px` : "black 0"}, ${fadeRight ? `black calc(100% - ${gr + fade}px), transparent calc(100% - ${gr}px)` : "black 100%"})`;
   const gutters = [gb > 0 && { size: `100% ${gb}px`, position: "0 100%" }, gr > 0 && { size: `${gr}px 100%`, position: "100% 0" }].filter(Boolean);
   const mask = shown ? {
     image: [fadeLayer, ...gutters.map(() => "linear-gradient(black, black)")].join(", "),
@@ -6131,18 +5339,54 @@ function useScrollEdges(options = {}) {
     /** The scroller itself, for code that moves it. */
     elRef,
     measure,
-    /** Content hides past a side edge: the scroller moves sideways, and its edges fade. */
-    overflowing: shown,
+    /** Content hides past a side edge: the scroller moves sideways, and its edges fade (but those in `noFade`). */
+    overflowing: enabled && (state.left || state.right),
     /** It scrolls either way, sideways or up and down: a keyboard needs to reach it. */
     scrollable: enabled && (state.left || state.right || state.vertical),
     edges: { left: state.left, right: state.right },
     /** For the scroller: `data-fade` names the faded edges ("left", "right" or "left right"), the style masks them. */
     fadeProps: {
-      "data-fade": shown ? [state.left && "left", state.right && "right"].filter(Boolean).join(" ") : void 0,
+      "data-fade": shown ? [fadeLeft && "left", fadeRight && "right"].filter(Boolean).join(" ") : void 0,
       style: mask ? { maskImage: mask.image, WebkitMaskImage: mask.image, maskSize: mask.size, WebkitMaskSize: mask.size, maskPosition: mask.position, WebkitMaskPosition: mask.position, maskRepeat: "no-repeat", WebkitMaskRepeat: "no-repeat" } : void 0
     }
   };
 }
+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 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));
+}
 function TruncCell({ children, lines }) {
   const { ref, isTruncated } = useTextOverflow({ lines });
   const clampClass = lines === 1 ? "truncate" : `line-clamp-${lines}`;
@@ -6157,6 +5401,95 @@ var FRAME_CLASSES = cn(
   GLASS_SURFACE,
   "bg-[var(--ds-bg-surface)]"
 );
+var PINNED_BACKGROUND = "linear-gradient(var(--gs-row-tint, transparent), var(--gs-row-tint, transparent)), linear-gradient(var(--gs-pinned-surface), var(--gs-pinned-surface)), var(--gs-pinned-canvas)";
+var PINNED_LAYERS = cn(
+  "[--gs-pinned-surface:var(--ds-bg-surface)] [--gs-pinned-canvas:var(--ds-bg-canvas)]",
+  "supports-[color:oklch(from_red_l_c_h)]:[--gs-pinned-surface:oklch(from_var(--ds-bg-surface)_l_c_h_/_max(alpha,min(1,alpha*1000)))]",
+  "supports-[color:oklch(from_red_l_c_h)]:[--gs-pinned-canvas:oklch(from_var(--ds-bg-canvas)_l_c_h_/_1)]"
+);
+var PIN_SHADOW = "oklch(0 0 0 / 0.18)";
+var ROW_CONTROL = `${FOCUSABLE}, label, [role="button"], [role="checkbox"], [role="switch"], [role="menuitem"], [role="link"]`;
+function clickIsRows(e) {
+  const target = e.target;
+  if (!(target instanceof Element) || !e.currentTarget.contains(target)) return false;
+  const selection = typeof window !== "undefined" ? window.getSelection() : null;
+  if (selection && !selection.isCollapsed && selection.anchorNode && e.currentTarget.contains(selection.anchorNode)) return false;
+  const control = target.closest(ROW_CONTROL);
+  return !control || control === e.currentTarget || !e.currentTarget.contains(control);
+}
+function sortableValue(v) {
+  if (v === null || v === void 0 || v === "") return void 0;
+  if (v instanceof Date) return v.getTime();
+  if (typeof v === "string" || typeof v === "number") return v;
+  if (typeof v === "boolean") return v ? 1 : 0;
+  return isValidElement(v) || typeof v === "object" ? null : String(v);
+}
+var COLLATOR = new Intl.Collator(void 0, { numeric: true });
+function compareValues(a, b) {
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return COLLATOR.compare(String(a), String(b));
+}
+var UNIT_SCALE = {
+  "": 1,
+  "%": 1,
+  b: 1,
+  byte: 1,
+  bytes: 1,
+  kb: 1e3,
+  kib: 1024,
+  mb: 1e6,
+  mib: 1024 ** 2,
+  gb: 1e9,
+  gib: 1024 ** 3,
+  tb: 1e12,
+  tib: 1024 ** 4,
+  pb: 1e15,
+  pib: 1024 ** 5,
+  ms: 1,
+  s: 1e3,
+  sec: 1e3,
+  min: 6e4,
+  h: 36e5,
+  hr: 36e5,
+  hrs: 36e5,
+  g: 1,
+  kg: 1e3,
+  m: 1,
+  km: 1e3,
+  "\xB0c": 1,
+  "\xB0f": 1
+};
+function numberOf(text) {
+  const m = /^\s*([-\u2212])?\s*[$€£¥]?\s*([-\u2212])?\s*(\d[\d,]*\.?\d*|\.\d+)\s*(%|°[CF]|[a-z]*)\s*$/i.exec(text);
+  const scale = m ? UNIT_SCALE[m[4].toLowerCase()] : void 0;
+  if (!m || scale === void 0) return void 0;
+  const n = parseFloat(m[3].replace(/,/g, ""));
+  return Number.isFinite(n) ? (m[1] || m[2] ? -1 : 1) * n * scale : void 0;
+}
+function timeOf(text) {
+  const t = Date.parse(text);
+  return Number.isNaN(t) ? void 0 : t;
+}
+function rowIdsOf(data, field) {
+  const seen = /* @__PURE__ */ new Set();
+  let repeated = null;
+  const ids = data.map((row, index) => {
+    const v = row[field];
+    if (typeof v !== "string" && typeof v !== "number") return index;
+    if (!seen.has(String(v))) {
+      seen.add(String(v));
+      return v;
+    }
+    repeated ??= String(v);
+    return `${v}~${index}`;
+  });
+  return { ids, repeated };
+}
+function rowMarks(row, index, field, id) {
+  const v = row[field];
+  return typeof v === "string" || typeof v === "number" ? { "data-row-key": String(id) } : { "data-row-index": String(index) };
+}
+var idPart = (id) => String(id).replace(/\s+/g, "_");
 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;
@@ -6178,8 +5511,10 @@ function TableHeading({ title, description, actions, titleId, descriptionId, ins
     descriptionText(HEADER_LAYOUT.below)
   ] }) });
 }
+var NO_PINS = { start: [], end: [], nameFits: false, frame: 0 };
+var samePins = (a, b) => a.nameFits === b.nameFits && a.frame === b.frame && a.start.join() === b.start.join() && a.end.join() === b.end.join();
 function Table({
-  columns,
+  columns: columnsProp,
   data,
   className,
   sortable,
@@ -6191,6 +5526,10 @@ function Table({
   onSelectionChange,
   expandable,
   renderExpanded,
+  rowKey = "id",
+  expandedRows: expandedRowsProp,
+  defaultExpandedRows,
+  onExpandedChange,
   density = "default",
   stickyHeader = false,
   striped = false,
@@ -6198,6 +5537,8 @@ function Table({
   emptyState,
   onRowClick,
   mobileBreakpoint: mobileBreakpointProp,
+  cardsBelow = CARDS_BELOW,
+  pager,
   title,
   description,
   actions,
@@ -6209,7 +5550,10 @@ function Table({
   const descriptionId = `${headingId}-description`;
   const [internalSortKey, setInternalSortKey] = useState(null);
   const [internalSortDir, setInternalSortDir] = useState(null);
-  const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
+  const columns = useMemo(
+    () => [...columnsProp.filter((c) => c.pin === "start"), ...columnsProp.filter((c) => !c.pin), ...columnsProp.filter((c) => c.pin === "end")],
+    [columnsProp]
+  );
   const isControlled = controlledSortKey !== void 0;
   const sortKey = isControlled ? controlledSortKey : internalSortKey;
   const sortDir = isControlled ? controlledSortDir ?? null : internalSortDir;
@@ -6229,6 +5573,7 @@ function Table({
         nextKey = key;
         nextDir = "asc";
       }
+      pager?.setPage(1);
       if (onSortChange) {
         onSortChange(nextKey, nextDir);
       } else {
@@ -6236,139 +5581,348 @@ function Table({
         setInternalSortDir(nextDir);
       }
     },
-    [sortKey, sortDir, onSortChange]
+    [sortKey, sortDir, onSortChange, pager]
+  );
+  const columnKeys = useMemo(() => columns.map((c) => c.key), [columns]);
+  const inferredKinds = useMemo(() => inferColumnKinds(data, columnKeys), [data, columnKeys]);
+  const kindOf = useCallback(
+    (col) => col.kind ?? inferredKinds.get(col.key),
+    [inferredKinds]
+  );
+  const sortColumn = sortKey ? columns.find((c) => c.key === sortKey) : void 0;
+  const sortKind = sortColumn ? kindOf(sortColumn) : void 0;
+  const { sortedAll, unsortable } = useMemo(() => {
+    const indexed = data.map((row, i) => ({ row, originalIdx: i }));
+    if (!sortKey || !sortDir) return { sortedAll: indexed, unsortable: null };
+    const read = (row) => {
+      if (sortColumn?.sortValue) return sortableValue(sortColumn.sortValue(row));
+      const v = sortableValue(row[sortKey]);
+      if (typeof v !== "string") return v;
+      return (sortKind === "number" ? numberOf(v) : sortKind === "date" ? timeOf(v) : void 0) ?? v;
+    };
+    const valued = indexed.map((entry) => ({ ...entry, value: read(entry.row) }));
+    const elements = valued.some((v) => v.value === null);
+    const sorted = elements ? indexed : valued.sort((a, b) => {
+      if (a.value === void 0 || b.value === void 0) return a.value === b.value ? 0 : a.value === void 0 ? 1 : -1;
+      const cmp = compareValues(a.value, b.value);
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+    return { sortedAll: sorted, unsortable: elements ? sortKey : null };
+  }, [data, sortKey, sortDir, sortColumn, sortKind]);
+  const canSort = useMemo(() => {
+    const can = /* @__PURE__ */ new Set();
+    for (const col of columns) if (col.sortValue || data.every((row) => sortableValue(row[col.key]) !== null)) can.add(col.key);
+    return can;
+  }, [columns, data]);
+  useEffect(() => {
+    if (unsortable) warnOnce("Table", `the column "${unsortable}" is sortable, but its cells are elements, which can't be compared: give it a sortValue, (row) => the name, number or date it shows (data_display#1).`);
+  }, [unsortable]);
+  useEffect(() => {
+    if (pager && data.length !== pager.totalItems) warnOnce("Table", `the pager counts ${pager.totalItems} rows but data holds ${data.length}: give the table and usePagination the same rows, every row of the list, and the table draws the pager's part (Sprint 25.13 A3).`);
+  }, [pager, data.length]);
+  const rangeStart = pager ? pager.range[0] : null;
+  const rangeEnd2 = pager ? pager.range[1] : null;
+  const drawn = useMemo(
+    () => rangeStart === null ? sortedAll : rangeStart === 0 ? [] : sortedAll.slice(rangeStart - 1, rangeEnd2 ?? void 0),
+    [sortedAll, rangeStart, rangeEnd2]
   );
-  const sortedWithIndices = sortKey && sortDir ? data.map((row, i) => ({ row, originalIdx: i })).sort((a, b) => {
-    const aVal = a.row[sortKey];
-    const bVal = b.row[sortKey];
-    if (aVal == null || bVal == null) return 0;
-    const cmp = String(aVal).localeCompare(String(bVal), void 0, { numeric: true });
-    return sortDir === "asc" ? cmp : -cmp;
-  }) : data.map((row, i) => ({ row, originalIdx: i }));
+  const drawnStart = rangeStart ? rangeStart - 1 : 0;
   const selectedSet = new Set(selectedRows);
-  const allSelected = data.length > 0 && selectedRows.length === data.length;
-  const someSelected = selectedRows.length > 0 && !allSelected;
+  const drawnIdx = drawn.map((d) => d.originalIdx);
+  const allSelected = drawnIdx.length > 0 && drawnIdx.every((i) => selectedSet.has(i));
+  const someSelected = !allSelected && drawnIdx.some((i) => selectedSet.has(i));
   const toggleAll = () => {
-    if (allSelected) onSelectionChange?.([]);
-    else onSelectionChange?.(data.map((_, i) => i));
+    const shown = new Set(drawnIdx);
+    if (allSelected) onSelectionChange?.(selectedRows.filter((r) => !shown.has(r)));
+    else onSelectionChange?.([...selectedRows.filter((r) => !shown.has(r)), ...drawnIdx]);
   };
   const toggleRow = (idx) => {
     if (selectedSet.has(idx)) onSelectionChange?.(selectedRows.filter((r) => r !== idx));
     else onSelectionChange?.([...selectedRows, idx]);
   };
-  const toggleExpand = (idx) => {
-    setExpandedRows((prev) => {
-      const next = new Set(prev);
-      if (next.has(idx)) next.delete(idx);
-      else next.add(idx);
-      return next;
-    });
+  const expandControlled = expandedRowsProp !== void 0;
+  const [ownExpanded, setOwnExpanded] = useState(defaultExpandedRows ?? []);
+  const expanded = expandControlled ? expandedRowsProp : ownExpanded;
+  const expandedSet = new Set(expanded.map(String));
+  const { ids: rowIds, repeated } = useMemo(() => rowIdsOf(data, rowKey), [data, rowKey]);
+  useEffect(() => {
+    if (repeated !== null) warnOnce("Table", `two rows share the ${rowKey} "${repeated}": give each row its own, or name a field that is one (rowKey), so an opened row and focus stay on their row.`);
+  }, [repeated, rowKey]);
+  const idOf = (_row, index) => rowIds[index] ?? index;
+  const marksOf = (row, index) => rowMarks(row, index, rowKey, idOf(row, index));
+  const openedHere = useRef(null);
+  const toggleExpand = (id) => {
+    const opening = !expandedSet.has(String(id));
+    const next = opening ? [...expanded, id] : expanded.filter((x) => String(x) !== String(id));
+    openedHere.current = opening ? String(id) : null;
+    if (!expandControlled) setOwnExpanded(next);
+    onExpandedChange?.(next);
   };
-  const columnKeys = useMemo(() => columns.map((c) => c.key), [columns]);
-  const inferredKinds = useMemo(() => inferColumnKinds(data, columnKeys), [data, columnKeys]);
-  const kindOf = useCallback(
-    (col) => col.kind ?? inferredKinds.get(col.key),
-    [inferredKinds]
-  );
+  const canOpenByClick = !!expandable && !!renderExpanded && !onRowClick;
   const preferences = useShellPreferences();
   const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
-  const isMobile = useBreakpoint(mobileBreakpoint);
-  const { ref: scrollRef, measure: measureScroll, scrollable, fadeProps } = useScrollEdges({ enabled: !isMobile });
+  const narrowScreen = useBreakpoint(mobileBreakpoint);
+  const { cards: isMobile, rootRef } = useCardsSwitch(narrowScreen, cardsBelow, title);
+  const setRoot = useCallback((node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref, rootRef]);
+  const tableRef = useRef(null);
+  const [pins, setPins] = useState(NO_PINS);
+  const lead = (selectable ? 1 : 0) + (expandable ? 1 : 0);
+  const endCount = columns.filter((c) => c.pin === "end").length;
+  const nameIndex = columns.length > endCount ? lead : -1;
+  const { ref: scrollRef, elRef: scrollEl, measure: measureScroll, scrollable, edges, fadeProps } = useScrollEdges({
+    enabled: !isMobile,
+    noFade: { left: lead + (pins.nameFits ? 1 : 0) > 0, right: endCount > 0 }
+  });
   const [regionFocused, setRegionFocused] = useState(false);
+  useLayoutEffect(() => {
+    const table2 = tableRef.current;
+    const scroller = scrollEl.current;
+    if (!table2 || !scroller || isMobile) return;
+    const measure = () => {
+      const cells = Array.from(table2.querySelectorAll(":scope > thead > tr > th"));
+      if (!cells.length) return;
+      const widths = cells.map((c) => c.getBoundingClientRect().width);
+      const start = [];
+      let at = 0;
+      for (let i = 0; i < lead; i++) {
+        start.push(at);
+        at += widths[i] ?? 0;
+      }
+      const nameWidth = nameIndex >= 0 ? widths[nameIndex] ?? 0 : 0;
+      const end = [];
+      let fromRight = 0;
+      for (let i = cells.length - 1; i >= cells.length - endCount; i--) {
+        end.unshift(fromRight);
+        fromRight += widths[i] ?? 0;
+      }
+      const frame = scroller.clientWidth;
+      const nameFits = nameIndex >= 0 && frame > 0 && at + nameWidth + fromRight <= frame / 2;
+      if (nameFits) start.push(at);
+      const next = { start, end, nameFits, frame };
+      setPins((prev) => samePins(prev, next) ? prev : next);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(table2);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, [isMobile, lead, endCount, nameIndex, scrollEl, columns, drawn.length]);
+  const pinnedStart = lead + (pins.nameFits ? 1 : 0);
+  const pinStyle = (position, total) => {
+    if (position < pinnedStart && pins.start[position] !== void 0) {
+      const inner = position === pinnedStart - 1;
+      return { position: "sticky", left: pins.start[position], zIndex: 1, background: PINNED_BACKGROUND, boxShadow: inner && edges.left ? `6px 0 6px -6px ${PIN_SHADOW}` : void 0 };
+    }
+    const fromEnd = total - 1 - position;
+    if (fromEnd < endCount && pins.end[endCount - 1 - fromEnd] !== void 0) {
+      const inner = fromEnd === endCount - 1;
+      return { position: "sticky", right: pins.end[endCount - 1 - fromEnd], zIndex: 1, background: PINNED_BACKGROUND, boxShadow: inner && edges.right ? `-6px 0 6px -6px ${PIN_SHADOW}` : void 0 };
+    }
+    return void 0;
+  };
+  const fade = fadeProps;
+  const [renderedKinds, setRenderedKinds] = useState(() => /* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    const table2 = tableRef.current;
+    if (!table2 || isMobile) return;
+    const next = /* @__PURE__ */ new Map();
+    for (const col of columns) {
+      if (kindOf(col)) continue;
+      const texts = Array.from(table2.querySelectorAll(`:scope > tbody > tr > td[data-col="${CSS.escape(col.key)}"]`)).slice(0, 50).map((td) => td.textContent ?? "");
+      const kind = texts.length ? kindOfRenderedText(texts) : void 0;
+      if (kind) next.set(col.key, kind);
+    }
+    setRenderedKinds((prev) => prev.size === next.size && [...next].every(([k, v]) => prev.get(k) === v) ? prev : next);
+  }, [columns, kindOf, drawn, isMobile]);
+  const expandedKey = expanded.map(String).join("
");
+  const shownBefore = useRef(/* @__PURE__ */ new Set());
+  const pendingScroll = useRef(null);
+  const scrollToRow = useCallback((key) => {
+    const row = rootRef.current?.querySelector(`[data-row-key="${CSS.escape(key)}"], [data-row-index="${CSS.escape(key)}"]`);
+    if (row && typeof row.scrollIntoView === "function") row.scrollIntoView({ block: "nearest" });
+  }, [rootRef]);
+  useEffect(() => {
+    const now = new Set(expanded.map(String));
+    const added = [...now].filter((k) => !shownBefore.current.has(k) && k !== openedHere.current);
+    shownBefore.current = now;
+    openedHere.current = null;
+    if (!expandControlled) return;
+    const key = added[added.length - 1];
+    if (key === void 0) return;
+    if (pager) {
+      const position = sortedAll.findIndex((r) => String(idOf(r.row, r.originalIdx)) === key);
+      if (position >= 0 && (position < drawnStart || position >= drawnStart + drawn.length)) {
+        pendingScroll.current = key;
+        pager.setPage(Math.floor(position / pager.pageSize) + 1);
+        return;
+      }
+    }
+    scrollToRow(key);
+  }, [expandedKey]);
+  useEffect(() => {
+    const key = pendingScroll.current;
+    if (!key || !drawn.some((r) => String(idOf(r.row, r.originalIdx)) === key)) return;
+    pendingScroll.current = null;
+    scrollToRow(key);
+  }, [drawnStart, drawn.length, scrollToRow]);
   const cardHeading = title ? /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: false }) : null;
-  const titledCards = (body) => /* @__PURE__ */ jsxs("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("flex flex-col", className), children: [
+  const titledCards = (body) => /* @__PURE__ */ jsxs("div", { ref: listRoot, "data-ds-list": "", "data-gs": "table", className: cn("flex flex-col", listClass), onFocus: noteFocus, onBlur: forgetFocus, children: [
     cardHeading,
     body
   ] });
+  const control = pager && !loading && data.length > 0 ? /* @__PURE__ */ jsx(Pagination, { ...pager.props }) : null;
+  const listRoot = control ? void 0 : setRoot;
+  const listClass = control ? void 0 : className;
+  const withControl = (list) => control ? /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-gs-paged": "", className: cn("flex flex-col min-w-0", className), children: [
+    list,
+    control
+  ] }) : list;
+  const focusWas = useRef(null);
+  const noteFocus = (e) => {
+    const target = e.target;
+    const row = target.closest("[data-row-key], [data-row-index]");
+    if (!row) {
+      focusWas.current = null;
+      return;
+    }
+    const control2 = target === row ? null : target.getAttribute("aria-labelledby") ?? target.getAttribute("aria-label") ?? target.textContent;
+    focusWas.current = { row: row.hasAttribute("data-row-key") ? `[data-row-key="${CSS.escape(row.getAttribute("data-row-key"))}"]` : `[data-row-index="${CSS.escape(row.getAttribute("data-row-index"))}"]`, control: control2 };
+  };
+  const forgetFocus = (e) => {
+    const node = e.target;
+    queueMicrotask(() => {
+      if (node.isConnected && !rootRef.current?.contains(document.activeElement)) focusWas.current = null;
+    });
+  };
+  useLayoutEffect(() => {
+    const was = focusWas.current;
+    const active = document.activeElement;
+    if (!was || active && active !== document.body) return;
+    const row = rootRef.current?.querySelector(was.row);
+    if (!row) return;
+    const controls = Array.from(row.querySelectorAll(FOCUSABLE));
+    const same2 = was.control === null ? null : controls.find((el) => (el.getAttribute("aria-labelledby") ?? el.getAttribute("aria-label") ?? el.textContent) === was.control);
+    (same2 ?? (row.tabIndex >= 0 ? row : controls[0]))?.focus({ preventScroll: true });
+  }, [isMobile, rootRef]);
   if (isMobile) {
     if (loading) {
       if (title) return titledCards(/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-ds-10", children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) }));
-      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("flex items-center justify-center py-ds-10", className), children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) });
+      return /* @__PURE__ */ jsx("div", { ref: setRoot, "data-ds-list": "", "data-gs": "table", className: cn("flex items-center justify-center py-ds-10", className), children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) });
     }
     if (data.length === 0 && emptyState) {
       if (title) return titledCards(/* @__PURE__ */ jsx("div", { className: "py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", children: emptyState }));
-      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
+      return /* @__PURE__ */ jsx("div", { ref: setRoot, "data-ds-list": "", "data-gs": "table", className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
     }
-    const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx("div", { ref: title ? void 0 : ref, "data-ds-list": title ? void 0 : "", "data-gs": title ? void 0 : "table", className: cn("flex flex-col gap-ds-3 overflow-y-auto", title ? "min-h-0" : className), children: sortedWithIndices.map(({ row, originalIdx }, i) => {
-      const isSelected = selectedSet.has(originalIdx);
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-row": "",
-          className: cn(
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-            "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]",
-            "p-ds-4 space-y-ds-3",
-            isSelected && ACTIVE_RING,
-            onRowClick && "cursor-pointer hover:bg-[var(--ds-bg-muted)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
-          ),
-          onClick: onRowClick ? () => onRowClick(row, originalIdx) : void 0,
-          tabIndex: onRowClick ? 0 : void 0,
-          onKeyDown: onRowClick ? (e) => {
-            if (e.target !== e.currentTarget) return;
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              onRowClick(row, originalIdx);
-            }
-          } : void 0,
-          children: [
-            selectable && /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx), label: "Select" }),
-            columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-ds-2 text-sm", children: [
-              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider", children: col.header }),
-              /* @__PURE__ */ jsx(CardValue, { value: row[col.key] })
-            ] }, col.key)),
-            expandable && renderExpanded && /* @__PURE__ */ jsx("div", { className: "pt-ds-2 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-sm text-[var(--ds-text-secondary)]", children: renderExpanded(row, i) })
-          ]
-        },
-        i
-      );
-    }) }) });
-    return title ? titledCards(cards) : cards;
+    const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsxs("div", { ref: title ? void 0 : listRoot, "data-ds-list": title ? void 0 : "", "data-gs": title ? void 0 : "table", className: cn("flex flex-col gap-ds-3 overflow-y-auto", title ? "min-h-0" : listClass), onFocus: title ? void 0 : noteFocus, onBlur: title ? void 0 : forgetFocus, children: [
+      selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select`, children: "Select" }),
+      drawn.map(({ row, originalIdx }) => {
+        const isSelected = selectedSet.has(originalIdx);
+        const id = idOf(row, originalIdx);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-row": "",
+            ...marksOf(row, originalIdx),
+            className: cn(
+              "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+              "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]",
+              "p-ds-4 space-y-ds-3",
+              isSelected && ACTIVE_RING,
+              onRowClick && "cursor-pointer hover:bg-[var(--ds-bg-muted)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+            ),
+            onClick: onRowClick ? (e) => {
+              if (clickIsRows(e)) onRowClick(row, originalIdx);
+            } : void 0,
+            tabIndex: onRowClick ? 0 : void 0,
+            onKeyDown: onRowClick ? (e) => {
+              if (e.target !== e.currentTarget) return;
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onRowClick(row, originalIdx);
+              }
+            } : void 0,
+            children: [
+              selectable && // "Select" and the row's name, as in the table (T15)
+              /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-card-name-${idPart(id)}` : `${headingId}-select` }),
+              columns.map((col, c) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-ds-2 text-sm", children: [
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider", children: col.header }),
+                /* @__PURE__ */ jsx(CardValue, { value: row[col.key], id: lead + c === nameIndex ? `${headingId}-card-name-${idPart(id)}` : void 0 })
+              ] }, col.key)),
+              expandable && renderExpanded && /* @__PURE__ */ jsx("div", { className: "pt-ds-2 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-sm text-[var(--ds-text-secondary)]", children: renderExpanded(row, originalIdx) })
+            ]
+          },
+          String(id)
+        );
+      })
+    ] }) });
+    return withControl(title ? titledCards(cards) : cards);
   }
-  const table = /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : ariaLabel ? { "aria-label": ariaLabel } : {}, children: [
-    /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
-      selectable && /* @__PURE__ */ jsx("th", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(
+  const cellCount = columns.length + lead;
+  const table = /* @__PURE__ */ jsxs("table", { ref: tableRef, className: cn("w-full text-sm", PINNED_LAYERS), ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : ariaLabel ? { "aria-label": ariaLabel } : {}, children: [
+    /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] [--gs-row-tint:var(--ds-bg-muted)]", children: [
+      selectable && /* @__PURE__ */ jsx("th", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), style: pinStyle(0, cellCount), children: /* @__PURE__ */ jsx(
         Checkbox,
         {
           checked: allSelected,
           indeterminate: someSelected,
-          onChange: toggleAll
+          onChange: toggleAll,
+          "aria-labelledby": `${headingId}-select-all`
         }
       ) }),
-      expandable && /* @__PURE__ */ jsx("th", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3") }),
-      columns.map((col) => {
-        const isSortable = sortable || col.sortable;
-        const isActiveSort = sortKey === col.key;
+      expandable && /* @__PURE__ */ jsx("th", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), style: pinStyle(selectable ? 1 : 0, cellCount) }),
+      columns.map((col, c) => {
+        const isSortable = col.header.trim() !== "" && (col.sortable ?? (!!sortable && canSort.has(col.key)));
+        const isActiveSort = sortKey === col.key && !!sortDir && unsortable !== col.key;
         const headerKind = kindOf(col);
         const headerAlign = col.align ?? (headerKind === "number" ? "right" : "left");
         const shrink = (headerKind === "number" || headerKind === "date") && !col.maxWidth;
+        const style = { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth, ...pinStyle(lead + c, cellCount) };
         return /* @__PURE__ */ jsx(
           "th",
           {
+            "aria-sort": isSortable && isActiveSort ? sortDir === "asc" ? "ascending" : "descending" : void 0,
             className: cn(
               density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
               shrink && "w-px whitespace-nowrap",
               "font-[var(--ds-weight-heading)] text-[var(--ds-text-secondary)]",
               "text-xs uppercase tracking-wider",
-              headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left",
-              isSortable && "cursor-pointer select-none hover:text-[var(--ds-text-primary)]"
+              headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left"
             ),
-            style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
-            onClick: isSortable ? () => handleSort(col.key) : void 0,
-            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-ds-1", children: [
-              col.header,
-              isSortable && isActiveSort && /* @__PURE__ */ jsx(
-                Icon,
+            style,
+            children: isSortable ? (
+              // A47: a button with the column's name, reached with Tab and pressed with Enter or Space
+              /* @__PURE__ */ jsxs(
+                "button",
                 {
-                  name: "chevron-right",
-                  size: 12,
+                  type: "button",
+                  onClick: () => handleSort(col.key),
                   className: cn(
-                    "transition-transform",
-                    sortDir === "asc" ? "-rotate-90" : "rotate-90"
-                  )
+                    "inline-flex items-center gap-ds-1 uppercase tracking-wider cursor-pointer select-none",
+                    "[font:inherit] text-inherit hover:text-[var(--ds-text-primary)]",
+                    "rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+                  ),
+                  children: [
+                    col.header,
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: "chevron-right",
+                        size: 12,
+                        className: cn(
+                          "transition-transform",
+                          !isActiveSort ? "invisible" : sortDir === "asc" ? "-rotate-90" : "rotate-90"
+                        )
+                      }
+                    )
+                  ]
                 }
               )
-            ] })
+            ) : /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-ds-1", children: col.header })
           },
           col.key
         );
@@ -6377,31 +5931,44 @@ function Table({
     /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
       "td",
       {
-        colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
+        colSpan: cellCount,
         className: "px-ds-4 py-ds-10 text-center",
         children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" })
       }
     ) }) : data.length === 0 && emptyState ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
       "td",
       {
-        colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
+        colSpan: cellCount,
         className: "px-ds-4 py-ds-10 text-center text-sm text-[var(--ds-text-muted)]",
         children: emptyState
       }
-    ) }) : sortedWithIndices.map(({ row, originalIdx }, i) => {
+    ) }) : drawn.map(({ row, originalIdx }, i) => {
       const isSelected = selectedSet.has(originalIdx);
-      const isExpanded = expandedRows.has(i);
+      const id = idOf(row, originalIdx);
+      const isExpanded = expandedSet.has(String(id));
+      const clickable = !!onRowClick || canOpenByClick;
       return /* @__PURE__ */ jsxs(Fragment$1, { children: [
         /* @__PURE__ */ jsxs(
           "tr",
           {
+            ...marksOf(row, originalIdx),
             className: cn(
               "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
-              "transition-colors",
-              isSelected ? "bg-[var(--ds-accent-subtle)]" : striped && i % 2 === 1 ? "bg-[var(--ds-bg-muted)]/50" : "hover:bg-[var(--ds-bg-muted)]",
-              onRowClick && "cursor-pointer focus-visible:outline-none focus-visible:shadow-[inset_var(--ds-shadow-focus)]"
+              // the row's background and its tint change together, so its pinned cells and the rest fade as one
+              // (roots.css registers --gs-row-tint as a colour so it can)
+              "transition-[background-color,--gs-row-tint]",
+              // the row's tint, as a variable too, so its pinned cells draw it over their solid ground (A35)
+              isSelected ? "bg-[var(--ds-accent-subtle)] [--gs-row-tint:var(--ds-accent-subtle)]" : striped && i % 2 === 1 ? "bg-[var(--ds-bg-muted)]/50 [--gs-row-tint:color-mix(in_oklab,var(--ds-bg-muted)_50%,transparent)]" : "hover:bg-[var(--ds-bg-muted)] hover:[--gs-row-tint:var(--ds-bg-muted)]",
+              clickable && "cursor-pointer",
+              // an outline inside the row: it shows over the pinned cells, whose solid ground hid the inset
+              // shadow the row drew before (the review of 30 September)
+              onRowClick && "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--ds-border-focus)]"
             ),
-            onClick: onRowClick ? () => onRowClick(row, originalIdx) : void 0,
+            onClick: clickable ? (e) => {
+              if (!clickIsRows(e)) return;
+              if (onRowClick) onRowClick(row, originalIdx);
+              else toggleExpand(id);
+            } : void 0,
             tabIndex: onRowClick ? 0 : void 0,
             onKeyDown: onRowClick ? (e) => {
               if (e.target !== e.currentTarget) return;
@@ -6411,15 +5978,15 @@ function Table({
               }
             } : void 0,
             children: [
-              selectable && /* @__PURE__ */ jsx("td", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx) }) }),
-              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(
+              selectable && /* @__PURE__ */ jsx("td", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), style: pinStyle(0, cellCount), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-name-${idPart(id)}` : `${headingId}-select` }) }),
+              expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), style: pinStyle(selectable ? 1 : 0, cellCount), children: /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: () => toggleExpand(i),
+                  onClick: () => toggleExpand(id),
                   className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] cursor-pointer",
                   "aria-expanded": isExpanded,
-                  "aria-label": "Expand row",
+                  ...nameIndex >= 0 ? { "aria-labelledby": `${headingId}-details ${headingId}-name-${idPart(id)}` } : { "aria-label": "Details" },
                   children: /* @__PURE__ */ jsx(
                     Icon,
                     {
@@ -6430,12 +5997,13 @@ function Table({
                   )
                 }
               ) }),
-              columns.map((col) => {
+              columns.map((col, c) => {
                 const truncLines = col.truncate === true ? 1 : col.truncate ? col.truncate.lines : 0;
                 const kind = kindOf(col);
                 const alignClass = col.align ? col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left" : kind === "number" ? "text-right" : "text-left";
                 const cellContent = row[col.key];
                 const shrink = (kind === "number" || kind === "date") && !col.maxWidth;
+                const whole = !kind && renderedKinds.has(col.key);
                 let inner;
                 if (truncLines > 0) {
                   inner = /* @__PURE__ */ jsx(TruncCell, { lines: truncLines, children: cellContent });
@@ -6451,13 +6019,17 @@ function Table({
                 return /* @__PURE__ */ jsx(
                   "td",
                   {
+                    id: lead > 0 && lead + c === nameIndex ? `${headingId}-name-${idPart(id)}` : void 0,
+                    "data-col": col.key,
                     className: cn(
                       density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
                       "text-[var(--ds-text-primary)]",
                       alignClass,
-                      shrink && "w-px whitespace-nowrap"
+                      shrink && "w-px whitespace-nowrap",
+                      whole && "whitespace-nowrap",
+                      kind === "identifier" && "[overflow-wrap:anywhere]"
                     ),
-                    style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
+                    style: col.maxWidth || col.width || col.minWidth || c + lead < pinnedStart || c >= columns.length - endCount ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth, ...pinStyle(lead + c, cellCount) } : void 0,
                     children: inner
                   },
                   col.key
@@ -6469,50 +6041,57 @@ function Table({
         expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
           "td",
           {
-            colSpan: columns.length + (selectable ? 1 : 0) + 1,
+            colSpan: cellCount,
             className: "bg-[var(--ds-bg-muted)] px-ds-6 py-ds-4 text-sm text-[var(--ds-text-primary)]",
-            children: renderExpanded(row, i)
-          }
-        ) })
-      ] }, i);
-    }) })
-  ] });
-  const region = scrollable || regionFocused ? { tabIndex: 0, role: "region", ...title ? { "aria-labelledby": titleId } : { "aria-label": ariaLabel ?? "Table" } } : {};
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      "data-ds-list": "",
-      "data-gs": "table",
-      className: cn("w-full min-w-0 flex flex-col", FRAME_CLASSES, "has-[>[data-table-scroll]:focus-visible]:shadow-[var(--ds-shadow-focus)]", className),
-      children: [
-        title && /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: true }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: scrollRef,
-            "data-table-scroll": "",
-            onScroll: measureScroll,
-            onFocus: (e) => {
-              if (e.target === e.currentTarget) setRegionFocused(true);
-            },
-            onBlur: (e) => {
-              if (e.target === e.currentTarget) setRegionFocused(false);
-            },
-            ...fadeProps,
-            ...region,
-            className: cn("min-h-0 overflow-x-auto focus-visible:outline-none", title ? "rounded-b-[inherit]" : "rounded-[inherit]"),
-            children: table
-          }
-        )
-      ]
-    }
+            children: /* @__PURE__ */ jsx("div", { "data-row-panel": "", className: "sticky left-ds-6", style: pins.frame ? { maxWidth: `calc(${pins.frame}px - 2 * var(--ds-space-6))` } : void 0, children: renderExpanded(row, originalIdx) })
+          }
+        ) })
+      ] }, String(id));
+    }) })
+  ] });
+  const region = scrollable || regionFocused ? { tabIndex: 0, role: "region", ...title ? { "aria-labelledby": titleId } : { "aria-label": ariaLabel ?? "Table" } } : {};
+  return withControl(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: listRoot,
+        "data-ds-list": "",
+        "data-gs": "table",
+        className: cn("w-full min-w-0 flex flex-col", FRAME_CLASSES, "has-[>[data-table-scroll]:focus-visible]:shadow-[var(--ds-shadow-focus)]", control && "min-h-0", listClass),
+        onFocus: noteFocus,
+        onBlur: forgetFocus,
+        children: [
+          title && /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: true }),
+          selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select-all`, children: "Select all rows shown" }),
+          selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select`, children: "Select" }),
+          expandable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-details`, children: "Details" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: scrollRef,
+              "data-table-scroll": "",
+              onScroll: measureScroll,
+              onFocus: (e) => {
+                if (e.target === e.currentTarget) setRegionFocused(true);
+              },
+              onBlur: (e) => {
+                if (e.target === e.currentTarget) setRegionFocused(false);
+              },
+              ...fade,
+              ...region,
+              className: cn("min-h-0 overflow-x-auto focus-visible:outline-none", title ? "rounded-b-[inherit]" : "rounded-[inherit]"),
+              children: table
+            }
+          )
+        ]
+      }
+    )
   );
 }
 function optionsKeyForFit(options) {
   return options.map((o) => `${o.value}:${o.label}`).join("|");
 }
-var sizes3 = {
+var sizes2 = {
   xs: "text-xs px-ds-2",
   sm: "text-xs px-ds-3",
   md: "text-sm px-ds-3",
@@ -6714,7 +6293,7 @@ function SegmentedControl({
               "rounded-[var(--ds-radius-md)]",
               "transition-colors cursor-pointer",
               "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-              sizes3[size],
+              sizes2[size],
               opt.value === value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]",
               opt.disabled && "opacity-disabled cursor-not-allowed"
             ),
@@ -8433,66 +8012,70 @@ function TableToolbar({
   const paged = total !== void 0 && !!pagination && pagination.pageSize > 0 && total > pagination.pageSize;
   const countText = total === void 0 ? null : grows ? shown < total ? `Showing ${shown} of ${total} ${noun(total)}` : resultCount !== void 0 ? `${total} ${noun(total)}` : null : paged ? `Showing ${Math.min((pagination.page - 1) * pagination.pageSize + 1, total)}\u2013${Math.min(pagination.page * pagination.pageSize, total)} of ${total} ${noun(total)}` : resultCount !== void 0 ? `${total} ${noun(total)}` : null;
   if (!hasControls && countText === null && !hasChips) return null;
-  return /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-3 min-w-0 mb-ds-3 last:mb-0", className), "data-table-toolbar": "", children: [
-    hasControls && /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "flex items-center gap-ds-2 flex-wrap", children: [
-      search && /* @__PURE__ */ jsx(
-        Input,
-        {
-          "aria-label": search.label,
-          placeholder: search.placeholder ?? search.label,
-          value: search.value,
-          size,
-          onChange: (e) => search.onChange(e.target.value),
-          className: cn("flex-1 min-w-[160px]", !searchFills && "max-w-[280px]")
-        }
-      ),
-      primaryFilter && (compact ? /* @__PURE__ */ jsx(
-        Dropdown,
-        {
-          "aria-label": primaryFilter.label,
-          options: primaryFilter.options.map((o) => ({ id: o.value, label: o.label })),
-          value: primaryFilter.value,
-          onChange: (v) => primaryFilter.onChange(v),
-          size,
-          className: "w-[150px]"
-        }
-      ) : /* @__PURE__ */ jsx(
-        SegmentedControl,
-        {
-          "aria-label": primaryFilter.label,
-          options: primaryFilter.options,
-          value: primaryFilter.value,
-          size,
-          onChange: primaryFilter.onChange
-        }
-      )),
-      (filters || actions) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-ds-2 justify-end", inPane ? "flex-none" : "flex-1"), children: [
-        filters && /* @__PURE__ */ jsxs(
-          Button,
+  return (
+    // a list's search and filters are how it's viewed, not a form's data: they never mark an overlay's form (0.21.0)
+    /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-3 min-w-0 mb-ds-3 last:mb-0", className), "data-table-toolbar": "", children: [
+      hasControls && /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "flex items-center gap-ds-2 flex-wrap", children: [
+        search && /* @__PURE__ */ jsx(
+          Input,
           {
-            variant: open ? "secondary" : "outline",
+            "aria-label": search.label,
+            placeholder: search.placeholder ?? search.label,
+            value: search.value,
             size,
-            iconLeft: /* @__PURE__ */ jsx(Icon, { name: "filter", size: iconSize }),
-            onClick: () => setOpen(!open),
-            "aria-expanded": open,
-            "aria-controls": filterRowId,
-            className: "mr-auto",
-            children: [
-              "Filters",
-              count > 0 && !open && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "xs", className: "ml-ds-1", children: count })
-            ]
+            onChange: (e) => search.onChange(e.target.value),
+            className: cn("flex-1 min-w-[160px]", !searchFills && "max-w-[280px]")
           }
         ),
-        actions
+        primaryFilter && (compact ? /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            "aria-label": primaryFilter.label,
+            options: primaryFilter.options.map((o) => ({ id: o.value, label: o.label })),
+            value: primaryFilter.value,
+            onChange: (v) => primaryFilter.onChange(v),
+            size,
+            className: "w-[150px]"
+          }
+        ) : /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            "aria-label": primaryFilter.label,
+            options: primaryFilter.options,
+            value: primaryFilter.value,
+            size,
+            onChange: primaryFilter.onChange
+          }
+        )),
+        (filters || actions) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-ds-2 justify-end", inPane ? "flex-none" : "flex-1"), children: [
+          filters && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: open ? "secondary" : "outline",
+              size,
+              iconLeft: /* @__PURE__ */ jsx(Icon, { name: "filter", size: iconSize }),
+              onClick: () => setOpen(!open),
+              "aria-expanded": open,
+              "aria-controls": filterRowId,
+              className: "mr-auto",
+              children: [
+                "Filters",
+                count > 0 && !open && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "xs", className: "ml-ds-1", children: count })
+              ]
+            }
+          ),
+          actions
+        ] })
+      ] }),
+      filters && open && /* @__PURE__ */ jsx("div", { id: filterRowId, className: "flex items-center gap-ds-3 flex-wrap", children: filters }),
+      (countText !== null || hasChips) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-wrap", children: [
+        countText !== null && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)]", "aria-live": "polite", "data-result-count": "", children: countText }),
+        activeFilters?.map((f) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "subtle", onRemove: f.onRemove, children: f.label }, f.id)),
+        hasChips && onClearAll && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })
       ] })
-    ] }),
-    filters && open && /* @__PURE__ */ jsx("div", { id: filterRowId, className: "flex items-center gap-ds-3 flex-wrap", children: filters }),
-    (countText !== null || hasChips) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-wrap", children: [
-      countText !== null && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)]", "aria-live": "polite", "data-result-count": "", children: countText }),
-      activeFilters?.map((f) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "subtle", onRemove: f.onRemove, children: f.label }, f.id)),
-      hasChips && onClearAll && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })
-    ] })
-  ] }) });
+    ] }) }) })
+  );
 }
 var ICON_TEXT_OFFSET = "calc((2rem - 1.25rem) / 2)";
 function Marker({ item, vertical }) {
@@ -8617,7 +8200,9 @@ function VerticalLayout({ items, className }) {
     ] })
   ] }, i)) });
 }
-function Timeline({ items, orientation = "vertical", minItemWidth = 200, className, ref }) {
+function Timeline({ items: allItems, orientation = "vertical", minItemWidth = 200, className, ref, pager }) {
+  useWholeListCheck("Timeline", allItems.length, pager);
+  const items = pagerPart(allItems, pager);
   const measureRef = useRef(null);
   const width = useElementWidth(measureRef);
   const setRefs = useCallback((node) => {
@@ -8627,7 +8212,12 @@ function Timeline({ items, orientation = "vertical", minItemWidth = 200, classNa
   }, [ref]);
   const fits = width === 0 || width >= items.length * minItemWidth;
   const horizontal = orientation === "horizontal" || orientation === "responsive" && fits;
-  return /* @__PURE__ */ jsx("div", { ref: setRefs, "data-ds-list": "", "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) });
+  const list = /* @__PURE__ */ jsx("div", { ref: setRefs, "data-ds-list": "", "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className: pager ? void 0 : className, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) });
+  if (!pager) return list;
+  return /* @__PURE__ */ jsxs("div", { "data-gs-paged": "", className: cn("flex flex-col min-w-0", className), children: [
+    list,
+    allItems.length > 0 && /* @__PURE__ */ jsx(Pagination, { ...pager.props })
+  ] });
 }
 var CollapsibleContext = createContext(null);
 function useCollapsible() {
@@ -8657,6 +8247,8 @@ function CollapsibleTrigger({ children, className }) {
   if (isValidElement(children)) {
     const child = children;
     return cloneElement(child, {
+      // a Button trigger in a form toggles; it never submits the form (0.21.0)
+      ...triggerType(child),
       "aria-expanded": isOpen,
       className: cn(child.props.className, className),
       onClick: (e) => {
@@ -9206,7 +8798,7 @@ function ActionsRow({ message, onAction }) {
       ),
       children: message.actions.map((a) => {
         const { id, label, icon } = resolveAction(a);
-        return /* @__PURE__ */ jsx(Tooltip, { content: label, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": label, onClick: () => run(id), children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 14 }) }) }, id);
+        return /* @__PURE__ */ jsx(Tooltip, { content: label, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": label, onClick: () => run(id), children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 14 }) }) }, id);
       })
     }
   );
@@ -9343,12 +8935,13 @@ function ChatInputBar({ onSend, busy, onStop, onAttach, onVoice, placeholder })
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-ds-2 pb-ds-1.5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-0.5", children: [
-            onAttach && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Add attachment", onClick: onAttach, className: compact, children: /* @__PURE__ */ jsx(Icon, { name: "paperclip", size: glyph }) }),
-            onVoice && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Voice message", onClick: onVoice, className: compact, children: /* @__PURE__ */ jsx(Icon, { name: "mic", size: glyph }) })
+            onAttach && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Add attachment", onClick: onAttach, className: compact, children: /* @__PURE__ */ jsx(Icon, { name: "paperclip", size: glyph }) }),
+            onVoice && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Voice message", onClick: onVoice, className: compact, children: /* @__PURE__ */ jsx(Icon, { name: "mic", size: glyph }) })
           ] }),
-          busy ? /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "icon-sm", "aria-label": "Stop generating", onClick: onStop, className: compact, children: /* @__PURE__ */ jsx(Icon, { name: "square", size: glyph }) }) : /* @__PURE__ */ jsx(
+          busy ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "tertiary", size: "icon-sm", "aria-label": "Stop generating", onClick: onStop, className: compact, children: /* @__PURE__ */ jsx(Icon, { name: "square", size: glyph }) }) : /* @__PURE__ */ jsx(
             Button,
             {
+              type: "button",
               variant: text.trim() ? "default" : "ghost",
               size: "icon-sm",
               "aria-label": "Send message",
@@ -9462,7 +9055,7 @@ function ChatMessageList({
         }),
         typingUser && /* @__PURE__ */ jsx(TypingIndicator, { name: typingUser })
       ] }) }),
-      showJump && !empty && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-ds-2 flex justify-center", children: /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "xs", className: "pointer-events-auto rounded-[var(--ds-radius-full)]", onClick: scrollToBottom, children: [
+      showJump && !empty && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-ds-2 flex justify-center", children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "secondary", size: "xs", className: "pointer-events-auto rounded-[var(--ds-radius-full)]", onClick: scrollToBottom, children: [
         /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 14 }),
         "Jump to latest"
       ] }) })
@@ -9517,10 +9110,11 @@ function ChatPanel({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-ds-1", children: [
             actions,
-            onNewConversation && /* @__PURE__ */ jsx(Tooltip, { content: "New conversation", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "New conversation", onClick: onNewConversation, children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 16 }) }) }),
+            onNewConversation && /* @__PURE__ */ jsx(Tooltip, { content: "New conversation", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "New conversation", onClick: onNewConversation, children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 16 }) }) }),
             onExpandedChange && /* @__PURE__ */ jsx(Tooltip, { content: expanded ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
               Button,
               {
+                type: "button",
                 variant: "ghost",
                 size: "icon-sm",
                 "aria-label": expanded ? "Collapse" : "Expand",
@@ -9529,7 +9123,7 @@ function ChatPanel({
                 children: /* @__PURE__ */ jsx(Icon, { name: expanded ? "minimize-2" : "maximize-2", size: 16 })
               }
             ) }),
-            /* @__PURE__ */ jsx(Tooltip, { content: "Close", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Close", onClick: onClose, ...{ [OVERLAY_CLOSE_ATTR]: "" }, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }) }) })
+            /* @__PURE__ */ jsx(Tooltip, { content: "Close", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Close", onClick: onClose, ...{ [OVERLAY_CLOSE_ATTR]: "" }, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }) }) })
           ] })
         ]
       }
@@ -9878,7 +9472,8 @@ var StackedList = forwardRef(function StackedList2({
   selectedId,
   className,
   flush,
-  hover
+  hover,
+  pager
 }, ref) {
   const isPhone = useBreakpoint("sm");
   const inCard = useContext(CardSurfaceCtx);
@@ -9891,20 +9486,22 @@ var StackedList = forwardRef(function StackedList2({
     console.warn('StackedList: `flush` and `hover` are deprecated \u2014 pass variant="articles" for an article list; the default variant takes its inset from the pane or card it sits in.');
   }, [legacy]);
   const articles = variant === "articles";
+  useWholeListCheck("StackedList", items.length, pager);
+  const shown = pagerPart(items, pager);
   const stackMeta = isPhone && articles;
   const selectable = selectedId !== void 0 || items.some((i) => i.selected !== void 0);
   const inset = articles ? inCard ? "px-ds-5" : "px-0" : inCard ? "px-ds-5" : inPane ? "pl-ds-3 pr-ds-4" : selectable ? "pl-ds-3 pr-0" : "px-0";
-  return /* @__PURE__ */ jsx(
+  const list = /* @__PURE__ */ jsx(
     "ul",
     {
       ref,
       "data-ds-list": "",
       className: cn(
         divided && "divide-y-[length:var(--ds-border-width)] divide-[var(--ds-border-subtle)]",
-        className
+        !pager && className
       ),
       role: "list",
-      children: items.map((item) => {
+      children: shown.map((item) => {
         const isSelected = item.selected ?? (selectedId !== void 0 && item.id === selectedId);
         const interactive = !!item.onClick;
         const hasEmphasis = item.unread !== void 0;
@@ -9996,6 +9593,11 @@ var StackedList = forwardRef(function StackedList2({
       })
     }
   );
+  if (!pager) return list;
+  return /* @__PURE__ */ jsxs("div", { "data-gs-paged": "", className: cn("flex flex-col min-w-0", className), children: [
+    list,
+    items.length > 0 && /* @__PURE__ */ jsx(Pagination, { ...pager.props })
+  ] });
 });
 var TIME_ZOOMS = ["day", "week", "month", "quarter"];
 var DAY_MS = 864e5;
@@ -10766,15 +10368,15 @@ var TimeViewport = forwardRef(function TimeViewport2({
   const hasHeader = headerNode != null || labelHeader != null;
   const bar = toolbar === false ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 flex-wrap items-center gap-ds-1 px-ds-2 py-ds-1.5 border-b-[length:var(--ds-border-width)]", border), children: [
     onZoomChange && levels.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom out", "aria-disabled": !canZoomOut || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(1), children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: 14 }) }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Zoom out", "aria-disabled": !canZoomOut || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(1), children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: 14 }) }),
       /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "min-w-[4.5rem] text-center text-xs text-[var(--ds-text-secondary)]", children: ZOOM_NAMES[scale.zoom] }),
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom in", "aria-disabled": !canZoomIn || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(-1), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14 }) })
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Zoom in", "aria-disabled": !canZoomIn || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(-1), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14 }) })
     ] }),
-    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Previous period", onClick: () => api.page(-1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }) }),
-    /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", disabled: todayAtX === null, onClick: () => {
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Previous period", onClick: () => api.page(-1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }) }),
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", disabled: todayAtX === null, onClick: () => {
       if (todayAtX !== null) setLeft(todayAtX - visibleWidth / 2);
     }, children: "Today" }),
-    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next period", onClick: () => api.page(1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) }),
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Next period", onClick: () => api.page(1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) }),
     toolbar
   ] });
   return (
@@ -11032,7 +10634,7 @@ var UNDATED_INSET = 16;
 var NO_GROUPS = [];
 var NO_STATUSES = {};
 var warned = /* @__PURE__ */ new Set();
-function warnOnce(message) {
+function warnOnce2(message) {
   let dev = false;
   try {
     dev = process.env.NODE_ENV !== "production";
@@ -11122,7 +10724,7 @@ function Gantt({
   const selected = isControlled ? selectedId ?? null : selectedState;
   useEffect(() => {
     if (overridden !== null) {
-      warnOnce("selectedId was given a value after the Gantt had kept a selection of its own. To control the selection, pass selectedId from the first render (null for none); to let the Gantt keep it, leave selectedId out.");
+      warnOnce2("selectedId was given a value after the Gantt had kept a selection of its own. To control the selection, pass selectedId from the first render (null for none); to let the Gantt keep it, leave selectedId out.");
     }
   }, [overridden]);
   const select = (item) => {
@@ -11134,8 +10736,8 @@ function Gantt({
   const phases = useMemo(() => uniqueById(groups), [groups]);
   useEffect(() => {
     const quoted = (ids) => ids.map((id) => `"${id}"`).join(", ");
-    if (plan.repeated.length) warnOnce(`more than one item has the id ${quoted(plan.repeated)}; only the first of each is shown.`);
-    if (phases.repeated.length) warnOnce(`more than one group has the id ${quoted(phases.repeated)}; only the first of each is shown.`);
+    if (plan.repeated.length) warnOnce2(`more than one item has the id ${quoted(plan.repeated)}; only the first of each is shown.`);
+    if (phases.repeated.length) warnOnce2(`more than one group has the id ${quoted(phases.repeated)}; only the first of each is shown.`);
   }, [plan, phases]);
   const tasks = plan.unique;
   const extent = useMemo(() => itemsExtent(tasks), [tasks]);
@@ -12032,14 +11634,17 @@ function TabsRoot(props) {
     const { tabs, mobile = "scroll" } = props;
     const collapseToDropdown = isMobile && (orientation === "responsive" || mobile === "dropdown");
     if (collapseToDropdown) {
-      return /* @__PURE__ */ jsx(
-        Dropdown,
-        {
-          options: tabs.filter((t) => !t.disabled).map((t) => ({ id: t.id, label: t.label, group: t.group })),
-          value: activeTab,
-          onChange: (v) => onTabChange(v),
-          className
-        }
+      return (
+        // choosing a tab is navigation, never a change to a form around it (0.21.0)
+        /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            options: tabs.filter((t) => !t.disabled).map((t) => ({ id: t.id, label: t.label, group: t.group })),
+            value: activeTab,
+            onChange: (v) => onTabChange(v),
+            className
+          }
+        ) })
       );
     }
     if (effectiveOrientation === "vertical") {
@@ -12141,7 +11746,7 @@ function SettingsLayout({
     return (
       // gap-x-ds-8 is the rail's gap, unused in one column: the threshold reads the same gap as the row (useColumnGap)
       /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "sidebar", "data-collapsed": "true", className: cn("flex flex-col gap-y-ds-6 gap-x-ds-8", className), children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(
           Dropdown,
           {
             "aria-label": ariaLabel,
@@ -12149,7 +11754,7 @@ function SettingsLayout({
             value,
             onChange: (v) => onChange(v)
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: PANEL_CLASSES, style: PANEL_STYLE, children })
       ] })
     );
@@ -12394,280 +11999,6 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
     dropdown
   ] });
 });
-function Popover({ open, onOpenChange, trigger, children, side = "bottom", align = "center", width, className, container }) {
-  const triggerRef = useRef(null);
-  const floatingRef = useRef(null);
-  const [triggerWidth, setTriggerWidth] = useState(void 0);
-  const setTriggerNode = useCallback((node) => {
-    triggerRef.current = node;
-    setTriggerWidth(node?.offsetWidth);
-  }, []);
-  const pos = usePosition(triggerRef, floatingRef, open, { side, align, offset: 8, flip: true });
-  const onOpenChangeRef = useLatest(onOpenChange);
-  const { props: pressMarks, marked } = usePressMarks();
-  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: floatingRef, close: () => onOpenChangeRef.current(false), tabExits: "edges", marked });
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e) => {
-      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
-      const active = document.activeElement;
-      if (active && active !== document.body && !triggerRef.current?.contains(active) && !floatingRef.current?.contains(active)) return;
-      e.preventDefault();
-      returnFocus();
-      onOpenChangeRef.current(false);
-    };
-    const onPress = (e) => {
-      const target = e.target;
-      if (marked(e) || triggerRef.current?.contains(target) || floatingRef.current?.contains(target)) return;
-      onOpenChangeRef.current(false);
-    };
-    document.addEventListener("keydown", onKeyDown);
-    document.addEventListener("mousedown", onPress);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener("mousedown", onPress);
-    };
-  }, [open, onOpenChangeRef, isTopLayer, returnFocus, marked]);
-  useEffect(() => {
-    if (open) focusInitial(floatingRef.current);
-  }, [open]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Slot,
-      {
-        ref: setTriggerNode,
-        onClick: () => {
-          setTriggerWidth(triggerRef.current?.offsetWidth);
-          onOpenChange(!open);
-        },
-        children: trigger
-      }
-    ),
-    open && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: floatingRef,
-          "data-gs": "popover",
-          ...pressMarks,
-          onClick: (e) => e.stopPropagation(),
-          className: cn(
-            "fixed z-[var(--ds-z-popover)]",
-            "bg-[var(--ds-bg-surface-elevated)]",
-            GLASS_DROPDOWN,
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "rounded-[var(--ds-radius-md)]",
-            className
-          ),
-          style: {
-            top: pos.top,
-            left: pos.left,
-            width: width === "trigger" ? triggerWidth : width === "auto" ? void 0 : width
-          },
-          children
-        }
-      ),
-      container ?? document.body
-    )
-  ] });
-}
-function Pagination(props) {
-  if ((props.mode === "load-more" || props.mode === "infinite-scroll") && props.onLoadMore) return /* @__PURE__ */ jsx(LoadMore, { ...props, onLoadMore: props.onLoadMore, scroll: props.mode === "infinite-scroll" });
-  return /* @__PURE__ */ jsx(PageNumbers, { ...props });
-}
-function contentTop(el) {
-  let top = el.getBoundingClientRect().top + window.scrollY;
-  for (let n = el.parentElement; n && n !== document.documentElement; n = n.parentElement) top += n.scrollTop;
-  return top;
-}
-function LoadMore({ hasMore, onLoadMore, loadMoreLabel, currentPage, scroll, className }) {
-  const marker = useRef(null);
-  const load = useLatest(onLoadMore);
-  const loadedAt = useRef(null);
-  useEffect(() => {
-    const el = marker.current;
-    if (!scroll || !hasMore || !el || typeof IntersectionObserver === "undefined") return;
-    const observer = new IntersectionObserver((entries) => {
-      if (!entries.some((e) => e.isIntersecting)) return;
-      const at = contentTop(el);
-      if (loadedAt.current !== null && Math.abs(at - loadedAt.current) < 1) return;
-      loadedAt.current = at;
-      load.current();
-    }, { rootMargin: "200px 0px" });
-    observer.observe(el);
-    const rearm = () => {
-      loadedAt.current = null;
-    };
-    window.addEventListener("scroll", rearm, { capture: true, passive: true });
-    return () => {
-      observer.disconnect();
-      window.removeEventListener("scroll", rearm, { capture: true });
-    };
-  }, [scroll, hasMore, currentPage, load]);
-  if (!hasMore) return null;
-  return /* @__PURE__ */ jsxs("div", { "data-ds-pager": "", "data-pagination-mode": scroll ? "infinite-scroll" : "load-more", className: cn("flex flex-col items-center", className), children: [
-    scroll && /* @__PURE__ */ jsx("div", { ref: marker, "data-load-more-trigger": "", "aria-hidden": "true", className: "h-px w-full" }),
-    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onLoadMore, children: loadMoreLabel ?? "Load more" })
-  ] });
-}
-function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, className }) {
-  const pages = buildPageRange(currentPage, totalPages);
-  const preferences = useShellPreferences();
-  const pageSize = pageSizeProp ?? preferences.itemsPerPage;
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", "data-ds-pager": "", className: cn("flex flex-wrap items-center gap-ds-3", className), children: [
-    pageSizeOptions && pageSize != null && onPageSizeChange && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ds-text-muted)] whitespace-nowrap", children: "Rows per page" }),
-      /* @__PURE__ */ jsx(
-        Dropdown,
-        {
-          options: pageSizeOptions.map((n) => ({ id: String(n), label: String(n) })),
-          value: String(pageSize),
-          onChange: (v) => onPageSizeChange(Number(v)),
-          size: "sm",
-          className: "w-[4.5rem]"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => onPageChange(currentPage - 1),
-          disabled: currentPage <= 1,
-          "aria-label": "Previous page",
-          className: cn(
-            "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-sm cursor-pointer",
-            "rounded-[var(--ds-radius-md)]",
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)]",
-            "transition-colors duration-[var(--ds-transition-speed)]",
-            "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]",
-            "disabled:opacity-disabled disabled:cursor-not-allowed"
-          ),
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16, className: "rotate-180" })
-        }
-      ),
-      pages.map(
-        (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(
-              "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-sm font-medium cursor-pointer",
-              "rounded-[var(--ds-radius-md)]",
-              "border-[length:var(--ds-border-width)]",
-              "transition-colors duration-[var(--ds-transition-speed)]",
-              p === currentPage ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] border-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
-            ),
-            children: p
-          },
-          p
-        )
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => onPageChange(currentPage + 1),
-          disabled: currentPage >= totalPages,
-          "aria-label": "Next page",
-          className: cn(
-            "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-sm cursor-pointer",
-            "rounded-[var(--ds-radius-md)]",
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)]",
-            "transition-colors duration-[var(--ds-transition-speed)]",
-            "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]",
-            "disabled:opacity-disabled disabled:cursor-not-allowed"
-          ),
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
-        }
-      )
-    ] })
-  ] });
-}
-function buildPageRange(current, total) {
-  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
-  const pages = [1];
-  if (current > 3) pages.push("...");
-  const start = Math.max(2, current - 1);
-  const end = Math.min(total - 1, current + 1);
-  for (let i = start; i <= end; i++) pages.push(i);
-  if (current < total - 2) pages.push("...");
-  pages.push(total);
-  return pages;
-}
-function EllipsisJumper({ totalPages, onPageChange }) {
-  const [open, setOpen] = useState(false);
-  const [jumpPage, setJumpPage] = useState(1);
-  const handleOpenChange = (next) => {
-    if (next) setJumpPage(1);
-    setOpen(next);
-  };
-  const handleGo = () => {
-    const clamped = Math.min(totalPages, Math.max(1, jumpPage));
-    onPageChange(clamped);
-    setOpen(false);
-  };
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      open,
-      onOpenChange: handleOpenChange,
-      trigger: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Go to page",
-          onClick: () => handleOpenChange(true),
-          className: cn(
-            "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-sm cursor-pointer",
-            "rounded-[var(--ds-radius-md)]",
-            "text-[var(--ds-text-muted)]",
-            "transition-colors duration-[var(--ds-transition-speed)]",
-            "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
-          ),
-          children: "\u2026"
-        }
-      ),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-ds-2 p-ds-3", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-[var(--ds-text-secondary)]", children: "Go to page" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-          /* @__PURE__ */ jsx(
-            NumberInput,
-            {
-              value: jumpPage,
-              onChange: setJumpPage,
-              min: 1,
-              max: totalPages,
-              step: 1,
-              size: "sm",
-              className: "w-[5rem]"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleGo,
-              className: cn(
-                "px-ds-2.5 h-[var(--ds-control-height-sm)] text-xs font-medium cursor-pointer",
-                "rounded-[var(--ds-radius-md)]",
-                "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
-                "transition-colors duration-[var(--ds-transition-speed)]",
-                "hover:opacity-90"
-              ),
-              children: "Go"
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
 var HeaderTabRowContext = createContext(null);
 function useHeaderTabRow() {
   return useContext(HeaderTabRowContext);
@@ -13898,6 +13229,16 @@ function useToastOptional() {
 }
 var toastSeq = 0;
 var heardSeq = 0;
+var HEARD_MS = 7e3;
+var RUN_END_MS = 20;
+var isThenable2 = (value) => !!value && typeof value.then === "function";
+function textOf(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (typeof node === "object" && "props" in node) return textOf(node.props.children);
+  return "";
+}
 var mergeable = (e) => !e.action && e.variant !== "error";
 function fill(entries, slots) {
   let shown = entries.filter((e) => e.shown).length;
@@ -13917,14 +13258,18 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
   const [list, setList] = useState([]);
   const entries = useRef([]);
   const isMobile = useBreakpoint("sm");
-  const createdIds = useRef([]);
+  const shownDuringRuns = useRef([]);
+  const showSeq = useRef(0);
+  const runs = useRef(/* @__PURE__ */ new Map());
+  const runSeq = useRef(0);
   const [heard, setHeard] = useState([]);
   const [hovered, setHovered] = useState(false);
   const [focusInside, setFocusInside] = useState(false);
   const paused = pauseOnHover && hovered || focusInside;
   const stackRef = useRef(null);
   const returnTo = useRef(null);
-  const answering = useRef([]);
+  const pressed = useRef(/* @__PURE__ */ new Set());
+  const pointerAt = useRef(0);
   const viaKey = useRef(false);
   const refocus = useRef(false);
   const pendingHeard = useRef(/* @__PURE__ */ new Map());
@@ -13943,58 +13288,75 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
     entries.current = fill(next, slots);
     setList(entries.current);
   }, [slots]);
-  const [slotsSeen, setSlotsSeen] = useState(slots);
-  if (slots !== slotsSeen) {
-    setSlotsSeen(slots);
+  useEffect(() => {
     let kept = 0;
-    setList(fill(list.map((e) => e.shown && ++kept > slots ? { ...e, shown: false } : e), slots));
+    const reslotted = entries.current.map((e) => e.shown && ++kept > slots ? { ...e, shown: false } : e);
+    const next = fill(reslotted, slots);
+    if (next.length === entries.current.length && next.every((e, i) => e === entries.current[i])) return;
+    commit(next);
+  }, [slots, commit]);
+  if (list.every((t) => !t.shown) && (hovered || focusInside)) {
+    setHovered(false);
+    setFocusInside(false);
   }
-  useEffect(() => {
-    entries.current = list;
-  }, [list]);
+  const clearTimers = useRef(/* @__PURE__ */ new Set());
   const announce = useCallback((entry) => {
     pendingHeard.current.set(entry.id, entry);
     if (heardTimer.current) return;
     heardTimer.current = setTimeout(() => {
       heardTimer.current = void 0;
-      const batch = [...pendingHeard.current.values()];
+      const batch = [...pendingHeard.current.values()].map((e) => {
+        const words = textOf(e.message).trim();
+        const sentence = !words || /[.!?…]$/.test(words) ? words : `${words}.`;
+        return { id: `heard-${++heardSeq}`, assertive: e.variant === "error", text: e.action ? `${sentence} Press F8 to reach ${e.action.label}.`.trim() : sentence };
+      }).filter((h) => h.text);
       pendingHeard.current.clear();
-      setHeard((list2) => [...list2, ...batch.map((e) => ({
-        id: `heard-${++heardSeq}`,
-        assertive: e.variant === "error",
-        node: /* @__PURE__ */ jsxs(Fragment, { children: [
-          e.message,
-          e.action ? ` Press F8 to reach ${e.action.label}.` : ""
-        ] })
-      }))].slice(-5));
+      if (!batch.length) return;
+      setHeard((list2) => [...list2, ...batch].slice(-5));
+      const ids = new Set(batch.map((h) => h.id));
+      const timer = setTimeout(() => {
+        clearTimers.current.delete(timer);
+        setHeard((list2) => list2.filter((h) => !ids.has(h.id)));
+      }, HEARD_MS);
+      clearTimers.current.add(timer);
     }, 0);
   }, []);
   useEffect(() => () => {
     if (heardTimer.current) clearTimeout(heardTimer.current);
+    heardTimer.current = void 0;
+    clearTimers.current.forEach(clearTimeout);
+    clearTimers.current.clear();
   }, []);
-  const leaving = useCallback(() => {
-    if (!stackRef.current?.contains(document.activeElement)) return;
+  const leaving = useCallback((id) => {
+    const stack = stackRef.current;
+    const holder = id === void 0 ? stack : [...stack?.querySelectorAll("[data-toast-id]") ?? []].find((n) => n.getAttribute("data-toast-id") === id);
+    if (!holder?.contains(document.activeElement)) return;
     refocus.current = true;
     setFocusInside(false);
   }, []);
   const remove = useCallback((id) => {
-    leaving();
+    leaving(id);
     commit(entries.current.filter((t) => t.id !== id));
   }, [commit, leaving]);
   const dismissAll = useCallback(() => {
     leaving();
     commit([]);
   }, [commit, leaving]);
+  const noteShown = useCallback((id, variant, action, fresh) => {
+    if (runs.current.size) shownDuringRuns.current.push({ seq: ++showSeq.current, at: Date.now(), id, variant, action, fresh });
+  }, []);
   const update = useCallback((id, message, options = {}) => {
     const list2 = entries.current;
     const at = list2.findIndex((t2) => t2.id === id);
     if (at === -1) return;
+    pressed.current.delete(id);
     const t = list2[at];
     const next = [...list2];
     next[at] = { ...t, message, variant: options.variant ?? t.variant, duration: options.duration ?? t.duration, action: options.action ?? t.action, actionWindow: options.actionWindow ?? t.actionWindow, key: options.key ?? t.key, version: t.version + 1 };
     commit(next);
     announce(next[at]);
-  }, [commit, announce]);
+    noteShown(id, next[at].variant, !!next[at].action, false);
+  }, [commit, announce, noteShown]);
   const toast = useCallback((message, options = {}) => {
     const list2 = entries.current;
     const base = { message, variant: options.variant ?? "default", duration: options.duration ?? duration, action: options.action, actionWindow: options.actionWindow, key: options.key };
@@ -14003,41 +13365,31 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
       if (at !== -1) {
         const next = [...list2];
         next[at] = { ...list2[at], ...base, version: list2[at].version + 1 };
-        createdIds.current.push(options.id);
+        pressed.current.delete(options.id);
         commit(next);
         announce(next[at]);
+        noteShown(options.id, base.variant, !!base.action, false);
         return options.id;
       }
     }
-    while (answering.current.length) {
-      const answered = answering.current.shift();
-      const at = list2.findIndex((t) => t.id === answered);
-      if (at === -1) continue;
-      const next = [...list2];
-      next[at] = { ...list2[at], ...base, version: list2[at].version + 1 };
-      createdIds.current.push(answered);
-      commit(next);
-      announce(next[at]);
-      return answered;
-    }
     if (coalesce && base.key && mergeable(base)) {
       const at = list2.findIndex((t) => t.key === base.key && mergeable(t));
       if (at !== -1) {
         const next = [...list2];
         next[at] = { ...list2[at], ...base, version: list2[at].version + 1 };
-        createdIds.current.push(list2[at].id);
         commit(next);
         announce(next[at]);
+        noteShown(list2[at].id, base.variant, !!base.action, false);
         return list2[at].id;
       }
     }
     const id = options.id ?? `toast-${++toastSeq}`;
     const entry = { id, ...base, shown: false, version: 0 };
-    createdIds.current.push(id);
     commit([...list2, entry]);
     announce(entry);
+    noteShown(id, base.variant, !!base.action, true);
     return id;
-  }, [duration, coalesce, commit, announce]);
+  }, [duration, coalesce, commit, announce, noteShown]);
   const api = useMemo(() => ({
     toast,
     success: (m, o) => toast(m, { ...o, variant: "success" }),
@@ -14059,34 +13411,53 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
     }
   }), [toast, update, remove, dismissAll, duration]);
   const ledger = useMemo(() => ({
-    created: () => createdIds.current.length,
-    latestSince: (count) => {
-      if (createdIds.current.length <= count) return void 0;
-      const id = createdIds.current[createdIds.current.length - 1];
-      const entry = entries.current.find((t) => t.id === id);
-      return entry ? { id, message: entry.message } : void 0;
-    }
+    begin: () => {
+      const run = ++runSeq.current;
+      const overlapped = runs.current.size > 0;
+      if (overlapped) runs.current.forEach((r) => {
+        r.overlapped = true;
+      });
+      runs.current.set(run, { from: showSeq.current, overlapped });
+      return run;
+    },
+    end: (run) => {
+      const watched = runs.current.get(run);
+      runs.current.delete(run);
+      if (!watched) return { problem: false };
+      const during = shownDuringRuns.current.filter((s) => s.seq > watched.from);
+      const oldest = Math.min(...[...runs.current.values()].map((r) => r.from));
+      shownDuringRuns.current = runs.current.size ? shownDuringRuns.current.filter((s) => s.seq > oldest) : [];
+      const problem = during.some((s) => s.variant === "error" || s.variant === "warning");
+      const endedAt = Date.now();
+      const confirmations = during.filter((s) => s.fresh && !s.action && (s.variant === "success" || s.variant === "default"));
+      if (watched.overlapped || confirmations.length !== 1 || endedAt - confirmations[0].at > RUN_END_MS) return { problem };
+      const entry = entries.current.find((t) => t.id === confirmations[0].id);
+      return { problem, own: entry && !entry.action ? { id: entry.id, message: entry.message, variant: entry.variant } : void 0 };
+    },
+    has: (id) => entries.current.some((t) => t.id === id)
   }), []);
   const pressAction = useCallback((id) => {
     const entry = entries.current.find((t) => t.id === id);
     if (!entry?.action) return;
     const run = entry.action.onClick;
-    leaving();
+    leaving(id);
     commit(entries.current.map((t) => t.id === id ? { ...t, action: void 0, actionWindow: void 0, version: t.version + 1 } : t));
-    answering.current.push(id);
+    pressed.current.add(id);
     const done = () => {
-      const waiting2 = answering.current.indexOf(id);
-      if (waiting2 === -1) return;
-      answering.current.splice(waiting2, 1);
-      remove(id);
+      if (pressed.current.delete(id)) remove(id);
+    };
+    const failed = (err) => {
+      done();
+      console.error(err);
     };
     let result;
     try {
       result = run();
-    } catch {
-      result = void 0;
+    } catch (err) {
+      failed(err);
+      return;
     }
-    if (result && typeof result.then === "function") result.then(done, done);
+    if (isThenable2(result)) result.then(done, failed);
     else done();
   }, [commit, leaving, remove]);
   const lapse = useCallback((id) => {
@@ -14120,8 +13491,11 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
     const back = returnTo.current;
     const next = stackRef.current?.querySelector("button");
     const main = document.querySelector("main");
+    const byPointer = Date.now() - pointerAt.current < 1e3;
     if (back?.isConnected) back.focus();
-    else if (next) next.focus();
+    else if (byPointer) {
+      if (stackRef.current?.contains(document.activeElement)) document.activeElement.blur();
+    } else if (next) next.focus();
     else if (main) {
       if (!main.hasAttribute("tabindex")) {
         main.setAttribute("tabindex", "-1");
@@ -14136,8 +13510,8 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
   const hasBottomNav = isMobile && bottomNavs > 0;
   return /* @__PURE__ */ jsx(ToastContext.Provider, { value: api, children: /* @__PURE__ */ jsxs(ToastLedgerCtx.Provider, { value: ledger, children: [
     /* @__PURE__ */ jsx(BottomNavPresenceCtx.Provider, { value: registerBottomNav, children }),
-    /* @__PURE__ */ jsx("div", { className: "sr-only", role: "status", "aria-live": "polite", "data-toast-announcer": "polite", children: heard.filter((h) => !h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.node }, h.id)) }),
-    /* @__PURE__ */ jsx("div", { className: "sr-only", role: "alert", "aria-live": "assertive", "data-toast-announcer": "assertive", children: heard.filter((h) => h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.node }, h.id)) }),
+    /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "polite", "data-toast-announcer": "polite", children: heard.filter((h) => !h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.text }, h.id)) }),
+    /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "assertive", "data-toast-announcer": "assertive", children: heard.filter((h) => h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.text }, h.id)) }),
     shown.length > 0 && createPortal(
       /* @__PURE__ */ jsxs(
         "div",
@@ -14150,6 +13524,9 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
           "data-toast-stack": "",
           onMouseEnter: () => setHovered(true),
           onMouseLeave: () => setHovered(false),
+          onPointerDownCapture: () => {
+            pointerAt.current = Date.now();
+          },
           onFocusCapture: (e) => {
             setFocusInside(true);
             const from = e.relatedTarget;
@@ -14166,7 +13543,7 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
           ),
           style: hasBottomNav ? { bottom: "calc(var(--ds-space-12) + var(--ds-space-2) + var(--ds-space-4) + env(safe-area-inset-bottom))" } : void 0,
           children: [
-            shown.map((t) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
+            shown.map((t) => /* @__PURE__ */ jsx("div", { "data-toast-id": t.id, className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
               Toast,
               {
                 inline: true,
@@ -15963,7 +15340,9 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
             "form",
             {
               onSubmit: (e) => {
+                if (e.target !== e.currentTarget) return;
                 e.preventDefault();
+                e.stopPropagation();
                 if (variant === "destructive") return;
                 const submitter = e.nativeEvent.submitter;
                 const implicit = !submitter || submitter === defaultButtonRef.current;
@@ -15992,6 +15371,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                   {
                     ref: dialogRef,
                     role: alert ? "alertdialog" : "dialog",
+                    ...{ [OVERLAY_ROOT_ATTR]: "" },
                     "aria-modal": "true",
                     "data-gs": "dialog",
                     "aria-labelledby": titleId,
@@ -16032,7 +15412,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                             }
                           ),
                           description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
-                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayMarkCtx, { value: mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) }) })
+                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayMarkScope, { mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) }) })
                         ] })
                       ] }) }),
                       /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
@@ -16193,7 +15573,7 @@ var Navbar = forwardRef(function Navbar2({
     }
     focus.onExit?.();
   };
-  const exitControl = focus ? /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: requestExit, children: focus.exitLabel ?? (focus.kind === "before-app" ? "Save and log out" : "Exit") }) : null;
+  const exitControl = focus ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: requestExit, children: focus.exitLabel ?? (focus.kind === "before-app" ? "Save and log out" : "Exit") }) : null;
   const shownUserMenu = focus?.kind === "before-app" ? null : userMenu;
   const asking = confirmExit && focus?.kind === "in-app" && !!appShell?.hasUnsavedChanges;
   if (confirmExit && !asking) setConfirmExit(false);
@@ -16209,8 +15589,8 @@ var Navbar = forwardRef(function Navbar2({
       alert: true,
       container: shellEl ?? void 0,
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setConfirmExit(false), children: "Keep editing" }),
-        /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => {
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: () => setConfirmExit(false), children: "Keep editing" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "destructive", onClick: () => {
           setConfirmExit(false);
           focus.onExit?.();
         }, children: "Discard changes" })
@@ -17327,67 +16707,6 @@ function getPopoverPosition(rect, placement, padding) {
   top = Math.max(8, Math.min(top, window.innerHeight - popH - 8));
   return { top, left };
 }
-function firstKey(item) {
-  if (item !== null && typeof item === "object") return "id" in item ? item.id : void 0;
-  return item;
-}
-function signature(list, resetOn) {
-  let reset = "";
-  try {
-    reset = JSON.stringify(resetOn ?? null);
-  } catch {
-    reset = String(resetOn);
-  }
-  let first = "";
-  try {
-    first = JSON.stringify(firstKey(list[0]) ?? null);
-  } catch {
-    first = "";
-  }
-  return `${list.length}|${first}|${reset}`;
-}
-function usePagination(list, options = {}) {
-  const shell = useShellPreferences();
-  const style = options.style ?? shell.paginationStyle ?? PREFERENCE_HOUSE_DEFAULTS.paginationStyle;
-  const [chosenSize, setChosenSize] = useState(null);
-  const pageSize = Math.max(1, Math.floor(chosenSize ?? options.pageSize ?? shell.itemsPerPage ?? PREFERENCE_HOUSE_DEFAULTS.itemsPerPage));
-  const [page, setPageState] = useState(1);
-  const sig = signature(list, options.resetOn);
-  const [seen, setSeen] = useState(sig);
-  if (seen !== sig) {
-    setSeen(sig);
-    if (page !== 1) setPageState(1);
-  }
-  const totalItems = list.length;
-  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
-  const current = Math.min(Math.max(1, seen !== sig ? 1 : page), totalPages);
-  const grows = style !== "pagination";
-  const start = grows ? 0 : (current - 1) * pageSize;
-  const items = list.slice(start, current * pageSize);
-  const range2 = items.length === 0 ? [0, 0] : [start + 1, start + items.length];
-  const hasMore = current < totalPages;
-  const setPage = (next) => setPageState(Math.min(Math.max(1, Math.floor(next)), totalPages));
-  const loadMore = () => setPageState((p) => Math.min(p + 1, totalPages));
-  const setPageSize = (size) => {
-    setChosenSize(Math.max(1, Math.floor(size)));
-    setPageState(1);
-  };
-  return {
-    style,
-    items,
-    page: current,
-    pageSize,
-    totalItems,
-    totalPages,
-    range: range2,
-    shown: items.length,
-    hasMore,
-    loadMore,
-    setPage,
-    setPageSize,
-    props: { currentPage: current, totalPages, onPageChange: setPage, pageSize, onPageSizeChange: setPageSize, mode: style, hasMore, onLoadMore: loadMore }
-  };
-}
 function useDestructiveAction(options) {
   const { action, title, description, confirmLabel, typeToConfirm, onConfirm, onUndo, doneMessage, undoMessage, restoredMessage, severity } = options;
   const preferences = useShellPreferences();
@@ -17410,42 +16729,65 @@ function useDestructiveAction(options) {
   };
   const failureMessage = (err) => err instanceof Error && err.message ? err.message : `${title.replace(/\?$/, "")} failed. Try again.`;
   const done = doneMessage ?? undoMessage ?? pastTenseOf(label);
+  const watch = async (step) => {
+    const run2 = ledger?.begin();
+    try {
+      await step();
+    } catch (err) {
+      if (run2 !== void 0) ledger.end(run2);
+      throw err;
+    }
+    return run2 !== void 0 ? ledger.end(run2) : { problem: false };
+  };
   const confirm = async () => {
     setBusy(true);
-    const before = ledger?.created() ?? 0;
     try {
-      await onConfirm();
+      const seen = await watch(onConfirm);
       close();
-      if (toast && (ledger?.created() ?? 0) === before) toast.success(done);
+      if (toast && !seen.problem && !seen.own) toast.success(done);
     } catch (err) {
       toast?.error(failureMessage(err));
     } finally {
       setBusy(false);
     }
   };
-  const undo = async () => {
+  const undo = async (id) => {
+    const here = () => !!toast && (ledger?.has(id) ?? false);
     try {
-      await onUndo();
-      toast?.success(restoredMessage ?? "Restored");
+      const seen = await watch(onUndo);
+      if (seen.problem) {
+        if (here()) toast.dismiss(id);
+      } else if (seen.own) {
+        if (here()) {
+          toast.update(id, seen.own.message, { variant: seen.own.variant });
+          toast.dismiss(seen.own.id);
+        }
+      } else if (here()) toast.update(id, restoredMessage ?? "Restored", { variant: "success" });
+      else toast?.success(restoredMessage ?? "Restored");
     } catch (err) {
-      toast?.error(err instanceof Error && err.message ? err.message : "Undo didn't work. Try again.");
+      const message = err instanceof Error && err.message ? err.message : "Undo didn't work. Try again.";
+      if (here()) toast.update(id, message, { variant: "error" });
+      else toast?.error(message);
     }
   };
   const run = () => {
     if (undoable) {
       void (async () => {
-        const before = ledger?.created() ?? 0;
+        let seen;
         try {
-          await onConfirm();
+          seen = await watch(onConfirm);
         } catch (err) {
           toast.error(failureMessage(err));
           return;
         }
+        if (seen.problem) return;
         const seconds = preferences.undoWindowSeconds ?? 5;
-        const undoAction = { label: "Undo", onClick: () => undo() };
-        const pages = (ledger?.created() ?? 0) > before ? ledger?.latestSince(before) : void 0;
-        if (pages) toast.update(pages.id, pages.message, { variant: "success", action: undoAction, actionWindow: seconds * 1e3 });
-        else toast.success(done, { action: undoAction, actionWindow: seconds * 1e3 });
+        let id = "";
+        const undoAction = { label: "Undo", onClick: () => undo(id) };
+        if (seen.own) {
+          id = seen.own.id;
+          toast.update(id, seen.own.message, { action: undoAction, actionWindow: seconds * 1e3 });
+        } else id = toast.success(done, { action: undoAction, actionWindow: seconds * 1e3 });
       })();
       return;
     }
@@ -17461,8 +16803,8 @@ function useDestructiveAction(options) {
       description,
       variant: "destructive",
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: close, disabled: busy, children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => void confirm(), disabled: !matches2 || busy, loading: busy, children: label })
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: close, disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "destructive", onClick: () => void confirm(), disabled: !matches2 || busy, loading: busy, children: label })
       ] }),
       children: typedRequired && /* @__PURE__ */ jsx(Field, { label: /* @__PURE__ */ jsxs(Fragment, { children: [
         "Type ",
@@ -17668,6 +17010,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-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 };
+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, DropdownMenu, EmptyState, EntityCell, FileUpload, FormWrapper, Gantt, HoverCard, Kbd, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, PageContainer, PageHeader, PinInput, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, Toast, ToastProvider, Tour, TransferList, TreeView, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useContentWidth, useDestructiveAction, useFittedLabels, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map