gridsmith-ui 0.15.0 → 0.16.0

package/dist/index.js

@@ -1,25 +1,25 @@
-import { useAppShell, ControlSizeContext, Button, Spinner, OverlayCloseCtx, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, useDirtyGuard, DiscardConfirm, defaultMaxWidth } from './chunk-ATONRIEB.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell } from './chunk-ATONRIEB.js';
-import { Skeleton } from './chunk-M3AARGLI.js';
-export { Skeleton } from './chunk-M3AARGLI.js';
-import { usePopupFocus, focusInitial, focusAfterRemoval, useOverlayLayer, rovingTabStop, useGridKeyboard, OVERLAY_CLOSE_ATTR, useNonModalDialog, useFocusTrap, useFocusBeforeOpen, rememberFocus, useReturnFocus } from './chunk-VFAKME7Q.js';
-import { Link } from './chunk-LU3YRNES.js';
-export { CodeBlock, Divider, Link } from './chunk-LU3YRNES.js';
-import { Badge } from './chunk-XCSTU6IJ.js';
-export { Badge } from './chunk-XCSTU6IJ.js';
+import { useAppShell, ControlSizeContext, Button, useDirtyGuard, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-2U2X6E2X.js';
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-2U2X6E2X.js';
+import { Skeleton } from './chunk-Z63OSN64.js';
+export { Skeleton } from './chunk-Z63OSN64.js';
+import { FOCUSABLE, usePopupFocus, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, focusAfterRemoval, rovingTabStop, useGridKeyboard, useNonModalDialog, usePressMarks, useReturnFocus, useCloseOnFocusOut } from './chunk-5XOJZQIP.js';
+import { Link } from './chunk-XGSQOMEY.js';
+export { CodeBlock, Divider, Link } from './chunk-XGSQOMEY.js';
+import { Badge } from './chunk-PVTGMCVR.js';
+export { Badge } from './chunk-PVTGMCVR.js';
 import { inferColumnKinds, CardValue } from './chunk-OENJCGTJ.js';
 import { SplitPaneCtx, useShellPreferences, TableCardCtx, PREFERENCE_HOUSE_DEFAULTS, preferenceActionKey } from './chunk-TKVTZWBN.js';
 export { PreferencesContext, preferenceActionKey, usePreferences } from './chunk-TKVTZWBN.js';
-import { useBreakpoint } from './chunk-CRQ6KCRD.js';
+import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
 import { useTextOverflow, Tooltip, usePosition } from './chunk-EMCSARQO.js';
 export { Tooltip, useTextOverflow } from './chunk-EMCSARQO.js';
 import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
-import { Icon } from './chunk-X4CNZFWC.js';
-import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY } from './chunk-4KVFH5KC.js';
-import { createContext, forwardRef, useState, useContext, memo, useEffect, useRef, useCallback, useLayoutEffect, Children, useMemo, useId, isValidElement, cloneElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
-import { createPortal } from 'react-dom';
+import { Icon } from './chunk-4LDYR7QP.js';
+import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING } from './chunk-4KVFH5KC.js';
+import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, useId, memo, useEffect, Children, isValidElement, cloneElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
+import { createPortal, flushSync } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function isDivider(entry) {
@@ -44,10 +44,10 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
   useEffect(() => {
     if (!open) return;
     const onKeyDown = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onClick = (e) => {
       const target = e.target;
@@ -523,7 +523,7 @@ function Dropdown({
       const els = optionButtons();
       const current = els.findIndex((el) => el === document.activeElement);
       if (e.key === "Escape") {
-        if (!isTopLayer()) return;
+        if (e.defaultPrevented || !isTopLayer()) return;
         e.preventDefault();
         returnFocus();
         setOpen(false);
@@ -585,14 +585,14 @@ function Dropdown({
   };
   const chipsRef = useRef(null);
   const pendingChipFocus = useRef(null);
-  const chipCount = selectedValues.length;
   useLayoutEffect(() => {
-    const index = pendingChipFocus.current;
-    if (index === null) return;
+    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, index, triggerRef.current);
-  }, [chipCount]);
+    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: [
@@ -705,7 +705,7 @@ function Dropdown({
               {
                 "data-chip-remove": "",
                 onClick: () => {
-                  pendingChipFocus.current = i;
+                  pendingChipFocus.current = { index: i, value: v };
                   handleSelect(v);
                 },
                 className: "hover:text-[var(--ds-text-primary)] cursor-pointer",
@@ -845,9 +845,14 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
       } else if (e.key === "Enter" && open && filtered[highlightIdx]) {
         e.preventDefault();
         handleSelect(filtered[highlightIdx].value);
-      } else if (e.key === "Tab" && open && moved && filtered[highlightIdx]) {
-        onChange(filtered[highlightIdx].value);
-      } else if (e.key === "Escape") {
+      } else if (e.key === "Tab" && open) {
+        if (moved && filtered[highlightIdx]) onChange(filtered[highlightIdx].value);
+        flushSync(() => {
+          setOpen(false);
+          setQuery("");
+        });
+      } else if (e.key === "Escape" && open) {
+        e.preventDefault();
         setOpen(false);
         setQuery("");
       }
@@ -1362,8 +1367,9 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
     const raf = requestAnimationFrame(() => focusActiveDay.current());
     return () => cancelAnimationFrame(raf);
   }, [open, focusActiveDay]);
-  const closeAndRefocus = () => {
+  const choose = (d) => {
     returnFocus();
+    onChange(d);
     setOpen(false);
   };
   const dayFirst = useMemo(() => localeDayFirst(), []);
@@ -1388,10 +1394,10 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
       setOpen(false);
     };
     const keyHandler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     document.addEventListener("mousedown", handler);
     document.addEventListener("keydown", keyHandler);
@@ -1485,8 +1491,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const selectDay = (day) => {
     const d = new Date(year, month, day);
     if (isDisabledDay(d)) return;
-    onChange(d);
-    closeAndRefocus();
+    choose(d);
   };
   const rangeA = range?.start ?? null;
   const rangeB = range?.end ?? null;
@@ -1676,8 +1681,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
                       onClick: () => {
                         const now = /* @__PURE__ */ new Date();
                         setViewDate(now);
-                        onChange(now);
-                        closeAndRefocus();
+                        choose(now);
                       },
                       children: "Today"
                     }
@@ -1687,10 +1691,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
                     {
                       variant: "ghost",
                       size: "sm",
-                      onClick: () => {
-                        onChange(null);
-                        closeAndRefocus();
-                      },
+                      onClick: () => choose(null),
                       children: "Clear"
                     }
                   )
@@ -1962,6 +1963,10 @@ function DateRangePicker({
     keyOf: dayKey,
     move: (from, e) => moveDay(from, e.key, e.shiftKey, weekStartsOn)
   });
+  const pageMonths = (n) => {
+    setViewDate(addMonths(viewDate, n));
+    setFocusDate(addMonthsClamped(focusDate, n));
+  };
   const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: panelRef, close: () => setOpen(false), tabExits: "edges" });
   const focusActiveDay = useLatest(grid.focusActive);
   useEffect(() => {
@@ -1977,10 +1982,10 @@ function DateRangePicker({
       setOpen(false);
     };
     const onKey = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     document.addEventListener("mousedown", onMouse);
     document.addEventListener("keydown", onKey);
@@ -2071,7 +2076,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: () => setViewDate(addMonths(viewDate, -1)), "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
+                /* @__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__ */ jsxs("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: [
                   MONTHS2[months[0].getMonth()],
                   " ",
@@ -2081,7 +2086,7 @@ function DateRangePicker({
                   " ",
                   months[1].getFullYear()
                 ] }),
-                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => setViewDate(addMonths(viewDate, 1)), "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
+                /* @__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("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)) }),
@@ -2135,6 +2140,96 @@ function DateRangePicker({
     )
   ] });
 }
+
+// ../../showcase/src/lib/file-accept.ts
+var MIME_NAMES = {
+  "text/plain": "TXT",
+  "audio/mpeg": "MP3",
+  "video/quicktime": "MOV",
+  "application/msword": "DOC",
+  "application/vnd.ms-excel": "XLS",
+  "application/vnd.ms-powerpoint": "PPT",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": "PPTX"
+};
+var EXT_NAMES = { jpeg: "JPG", tif: "TIFF", htm: "HTML", yml: "YAML" };
+var FAMILIES = {
+  image: { one: "an image", many: "images" },
+  video: { one: "a video", many: "videos" },
+  audio: { one: "an audio file", many: "audio files" },
+  text: { one: "a text file", many: "text files" }
+};
+var READ_AS_WORD = /* @__PURE__ */ new Set(["FLAC", "HEIC", "HEIF", "LOG", "MIDI", "MOV", "RAR", "RAW"]);
+var extName = (ext) => EXT_NAMES[ext] ?? ext.toUpperCase();
+function mimeName(mime) {
+  if (MIME_NAMES[mime]) return MIME_NAMES[mime];
+  const subtype = mime.slice(mime.indexOf("/") + 1).replace(/\+.*$/, "").replace(/^(?:x-|vnd\.)/, "");
+  return extName(subtype.slice(subtype.lastIndexOf(".") + 1));
+}
+function parseAccept(accept) {
+  return (accept ?? "").split(",").map((t) => t.trim().toLowerCase()).filter(Boolean).map((t) => {
+    if (t === "*" || t === "*/*") return { kind: "any" };
+    if (t.startsWith(".")) return { kind: "format", name: extName(t.slice(1)), suffix: t };
+    if (t.endsWith("/*")) return { kind: "family", family: t.slice(0, -2) };
+    return { kind: "format", name: mimeName(t), mime: t };
+  });
+}
+function fileFormat(file) {
+  const dot = file.name.lastIndexOf(".");
+  return dot > 0 ? extName(file.name.slice(dot + 1).toLowerCase()) : null;
+}
+function matches(file, tokens) {
+  if (tokens.length === 0 || tokens.some((t) => t.kind === "any")) return true;
+  const name = file.name.toLowerCase();
+  const format = fileFormat(file);
+  const type = file.type.toLowerCase();
+  return tokens.some((t) => {
+    if (t.kind === "family") return type === "" || type.startsWith(`${t.family}/`);
+    if (t.kind !== "format") return false;
+    return t.name === format || t.suffix != null && name.endsWith(t.suffix) || t.mime != null && t.mime === type;
+  });
+}
+var joinOr = (items) => items.length < 2 ? items.join("") : `${items.slice(0, -1).join(", ")} or ${items[items.length - 1]}`;
+var article = (name) => {
+  const asWord = name.replace(/[^A-Z]/g, "").length >= 5 || READ_AS_WORD.has(name);
+  return (asWord ? /^[AEIOU]/ : /^[AEFHILMNORSX]/).test(name) ? "an" : "a";
+};
+function typeWords(accept) {
+  const tokens = parseAccept(accept);
+  if (tokens.length === 0 || tokens.some((t) => t.kind === "any" || t.kind === "family" && !FAMILIES[t.family])) return null;
+  const families = [...new Set(tokens.flatMap((t) => t.kind === "family" ? [t.family] : []))].map((f) => FAMILIES[f]);
+  const formats = [...new Set(tokens.flatMap((t) => t.kind === "format" ? [t.name] : []))];
+  const many = `${joinOr([...families.map((f) => f.many), ...formats])}${formats.length ? " files" : ""}`;
+  const one = families.length === 0 ? `${article(formats[0])} ${joinOr(formats)}` : joinOr([...families.map((f) => f.one), ...formats.map((f) => `${article(f)} ${f}`)]);
+  return { one, many };
+}
+function sizeWords(bytes) {
+  const units = [["GB", 1024 ** 3], ["MB", 1024 ** 2], ["KB", 1024]];
+  for (const [unit, size] of units) if (bytes >= size) return `${Math.round(bytes / size * 10) / 10} ${unit}`;
+  return `${bytes} bytes`;
+}
+var capitalise = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+function fileConstraints(accept, maxSize, multiple) {
+  const types = typeWords(accept)?.many;
+  const size = maxSize != null ? `up to ${sizeWords(maxSize)}${multiple ? " each" : ""}` : null;
+  const line = [types, size].filter(Boolean).join(" ");
+  return line ? capitalise(line) : null;
+}
+function checkFiles(files, { accept, maxSize, multiple }) {
+  if (!multiple && files.length > 1) return { accepted: [], message: "You can only select one file" };
+  const tokens = parseAccept(accept);
+  const types = typeWords(accept);
+  const accepted = [];
+  const reasons = [];
+  for (const file of files) {
+    const subject = multiple ? file.name : "The selected file";
+    if (!matches(file, tokens)) reasons.push(types ? `${subject} must be ${types.one}` : `${subject} is not a file type that can be added here`);
+    else if (maxSize != null && file.size > maxSize) reasons.push(`${subject} must be smaller than ${sizeWords(maxSize)}`);
+    else accepted.push(file);
+  }
+  return { accepted, message: reasons.length ? reasons.join("; ") : null };
+}
 var variantFills = {
   default: "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)]",
   success: "bg-[var(--ds-status-success)]",
@@ -2182,6 +2277,66 @@ function Progress({ value, max = 100, variant = "default", size = "md", indeterm
     ] })
   ] });
 }
+function InlineFieldError({ message, id, className }) {
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      id,
+      role: "alert",
+      className: cn(
+        "flex items-center gap-ds-1.5 text-xs text-[var(--ds-status-error)]",
+        "mt-ds-1.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "error", size: 14, className: "shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: message })
+      ]
+    }
+  );
+}
+var FieldContext = createContext(null);
+function useField() {
+  return useContext(FieldContext);
+}
+function Field({ label, children, hint, error, required, labelAction, id: idProp, className }) {
+  const generated = useId();
+  const id = idProp ?? `field-${generated}`;
+  const hintId = `${id}-hint`;
+  const errorId = `${id}-error`;
+  const hasError = typeof error === "string" && error.length > 0;
+  const describedBy = [hint ? hintId : null, hasError ? errorId : null].filter(Boolean).join(" ") || void 0;
+  const labelId = `${id}-label`;
+  const fieldContext = useMemo(() => ({ controlId: id, labelId, describedBy }), [id, labelId, describedBy]);
+  const controlProps = {
+    id,
+    "aria-describedby": describedBy,
+    ...hasError ? { "aria-invalid": true, error: true } : {},
+    ...required ? { "aria-required": true, required: true } : {}
+  };
+  let control;
+  if (typeof children === "function") {
+    control = children(controlProps);
+  } else {
+    const child = Children.only(children);
+    if (!isValidElement(child)) throw new Error("Field expects a single form control as its child");
+    const isNative = typeof child.type === "string";
+    const { error: errorFlag, ...ariaOnly } = controlProps;
+    control = cloneElement(child, isNative ? ariaOnly : { ...ariaOnly, ...errorFlag ? { error: true } : {} });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-1.5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
+      /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: id, children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
+      ] }),
+      labelAction
+    ] }),
+    /* @__PURE__ */ jsx(FieldContext.Provider, { value: fieldContext, children: control }),
+    hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-[var(--ds-text-muted)]", children: hint }),
+    hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: error, className: "mt-0" })
+  ] });
+}
 function TruncFileName({ children, className }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const el = /* @__PURE__ */ jsx("p", { ref, className: cn("truncate", className), children });
@@ -2193,37 +2348,57 @@ function formatSize(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-function FileUpload({ onFiles, accept, multiple = true, maxSize, className, error = false, label }) {
+function FileUpload({ onFiles, accept, multiple = true, maxSize, className, error = false, label, id }) {
   const [files, setFiles] = useState([]);
   const [dragOver, setDragOver] = useState(false);
-  const inputId = useId();
+  const [rejected, setRejected] = useState(null);
   const inputRef = useRef(null);
+  const nextEntryId = useRef(0);
+  const timers = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const running = timers.current;
+    return () => running.forEach(clearInterval);
+  }, []);
+  const field = useField();
+  const ownId = useId();
+  const inputId = id ?? `${ownId}-input`;
+  const constraintsId = `${ownId}-constraints`;
+  const rejectedId = `${ownId}-rejected`;
+  const showLabel = label != null && !field;
+  const constraints = fileConstraints(accept, maxSize, multiple);
+  const invalid = error || rejected != null;
+  const describedBy = [constraints ? constraintsId : null, field?.describedBy, rejected ? rejectedId : null].filter(Boolean).join(" ") || void 0;
+  const stopTimer = (id2) => {
+    clearInterval(timers.current.get(id2));
+    timers.current.delete(id2);
+  };
   const addFiles = useCallback(
     (fileList) => {
-      const arr = Array.from(fileList);
-      const valid = maxSize ? arr.filter((f) => f.size <= maxSize) : arr;
-      const entries = valid.map((f) => ({ file: f, progress: 0, status: "uploading" }));
-      setFiles((prev) => [...prev, ...entries]);
-      onFiles(valid);
-      entries.forEach((_, i) => {
+      const { accepted, message } = checkFiles(Array.from(fileList), { accept, maxSize, multiple });
+      setRejected(message);
+      if (accepted.length === 0) return;
+      const entries = accepted.map((file) => ({ id: nextEntryId.current++, file, progress: 0, status: "uploading" }));
+      if (!multiple) {
+        timers.current.forEach(clearInterval);
+        timers.current.clear();
+      }
+      setFiles((prev) => multiple ? [...prev, ...entries] : entries);
+      onFiles(accepted);
+      for (const { id: id2 } of entries) {
         let progress = 0;
-        const interval = setInterval(() => {
-          progress += Math.random() * 30 + 10;
-          if (progress >= 100) {
-            progress = 100;
-            clearInterval(interval);
-            setFiles(
-              (prev) => prev.map((f, fi) => fi === prev.length - entries.length + i ? { ...f, progress: 100, status: "complete" } : f)
-            );
-          } else {
-            setFiles(
-              (prev) => prev.map((f, fi) => fi === prev.length - entries.length + i ? { ...f, progress } : f)
-            );
+        const timer = setInterval(() => {
+          progress = Math.min(100, progress + Math.random() * 30 + 10);
+          const done = progress >= 100;
+          if (done) {
+            clearInterval(timer);
+            timers.current.delete(id2);
           }
+          setFiles((prev) => prev.map((f) => f.id === id2 ? { ...f, progress, status: done ? "complete" : "uploading" } : f));
         }, 300);
-      });
+        timers.current.set(id2, timer);
+      }
     },
-    [maxSize, onFiles]
+    [accept, maxSize, multiple, onFiles]
   );
   const handleDrop = useCallback(
     (e) => {
@@ -2233,63 +2408,66 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
     },
     [addFiles]
   );
-  const removeFile = (index) => {
-    setFiles((prev) => prev.filter((_, i) => i !== index));
+  const removeFile = (id2) => {
+    stopTimer(id2);
+    setFiles((prev) => prev.filter((f) => f.id !== id2));
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-ds-3", className), children: [
-    label && /* @__PURE__ */ jsx("label", { id: inputId, className: "block text-sm font-medium text-[var(--ds-text-primary)]", children: label }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-labelledby": label ? inputId : void 0,
-        onDragOver: (e) => {
-          e.preventDefault();
-          setDragOver(true);
-        },
-        onDragLeave: () => setDragOver(false),
-        onDrop: handleDrop,
-        onClick: () => inputRef.current?.click(),
-        "aria-invalid": error || void 0,
-        className: cn(
-          "flex flex-col items-center justify-center gap-ds-2 cursor-pointer group",
-          "border-2 border-dashed rounded-[var(--ds-radius-md)]",
-          "transition-colors",
-          // The real file input is visually hidden inside; Tab lands on it and
-          // Enter/Space open the picker natively, so the zone shows its focus.
-          HAS_FOCUS_RING,
-          error ? "border-[var(--ds-status-error)]" : dragOver ? `${ACTIVE_RING} bg-[var(--ds-accent-whisper)]` : "border-[var(--ds-border-default)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-whisper)]"
-        ),
-        style: { padding: "var(--ds-space-8) var(--ds-space-4)" },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: cn(
-            "flex items-center justify-center w-10 h-10 rounded-[var(--ds-radius-full)] transition-colors",
-            "bg-[var(--ds-bg-muted)] group-hover:bg-[var(--ds-accent-subtle)]"
-          ), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 20, className: "text-[var(--ds-text-muted)] group-hover:text-[var(--ds-accent-primary)] transition-colors" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: "Drop files here or click to browse" }),
-            /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--ds-text-muted)] mt-ds-1", children: [
-              accept ? `Accepted: ${accept}` : "Any file type",
-              maxSize && ` \u2022 Max ${formatSize(maxSize)}`
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              type: "file",
-              accept,
-              multiple,
-              className: "sr-only",
-              onChange: (e) => {
-                if (e.target.files?.length) addFiles(e.target.files);
-                e.target.value = "";
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-ds-1.5", children: [
+      showLabel && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: label }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onDragOver: (e) => {
+            e.preventDefault();
+            setDragOver(true);
+          },
+          onDragLeave: () => setDragOver(false),
+          onDrop: handleDrop,
+          onClick: () => inputRef.current?.click(),
+          className: cn(
+            "flex flex-col items-center justify-center gap-ds-2 cursor-pointer group",
+            "border-2 border-dashed rounded-[var(--ds-radius-md)]",
+            "transition-colors",
+            // The real file input is visually hidden inside; Tab lands on it and
+            // Enter/Space open the picker natively, so the zone shows its focus.
+            invalid ? ERROR_HAS_FOCUS_RING : HAS_FOCUS_RING,
+            dragOver ? `${ACTIVE_RING} bg-[var(--ds-accent-whisper)]` : invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-border-default)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-whisper)]"
+          ),
+          style: { padding: "var(--ds-space-8) var(--ds-space-4)" },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: cn(
+              "flex items-center justify-center w-10 h-10 rounded-[var(--ds-radius-full)] transition-colors",
+              "bg-[var(--ds-bg-muted)] group-hover:bg-[var(--ds-accent-subtle)]"
+            ), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 20, className: "text-[var(--ds-text-muted)] group-hover:text-[var(--ds-accent-primary)] transition-colors" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: multiple ? "Drop files here or browse" : "Drop a file here or browse" }),
+              constraints && /* @__PURE__ */ jsx("p", { id: constraintsId, className: "text-xs text-[var(--ds-text-muted)] mt-ds-1", children: constraints })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                id: inputId,
+                type: "file",
+                accept,
+                multiple,
+                className: "sr-only",
+                "aria-labelledby": field ? field.labelId : void 0,
+                "aria-describedby": describedBy,
+                "aria-invalid": invalid || void 0,
+                onChange: (e) => {
+                  if (e.target.files?.length) addFiles(e.target.files);
+                  e.target.value = "";
+                }
               }
-            }
-          )
-        ]
-      }
-    ),
-    files.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-ds-2", children: files.map((entry, i) => /* @__PURE__ */ jsxs(
+            )
+          ]
+        }
+      ),
+      rejected && /* @__PURE__ */ jsx(InlineFieldError, { id: rejectedId, message: rejected, className: "mt-0" })
+    ] }),
+    files.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-ds-2", children: files.map((entry) => /* @__PURE__ */ jsxs(
       "li",
       {
         className: cn(
@@ -2306,10 +2484,10 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
             entry.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: entry.progress, size: "sm", className: "mt-ds-1" })
           ] }),
           entry.status === "complete" && /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, className: "text-[var(--ds-status-success)] shrink-0" }),
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => removeFile(i), "aria-label": "Remove file", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => removeFile(entry.id), "aria-label": "Remove file", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
         ]
       },
-      `${entry.file.name}-${i}`
+      entry.id
     )) })
   ] });
 }
@@ -2324,9 +2502,17 @@ function SliderRange({
   className,
   ref,
   error = false,
-  label = "Value",
+  label,
+  "aria-label": ariaLabel,
+  "aria-describedby": describedByProp,
   trackStyle
 }) {
+  const field = useField();
+  const ownId = useId();
+  const showLabel = label != null && !field;
+  const nameId = field ? field.labelId : showLabel ? `${ownId}-label` : void 0;
+  const describedBy = [...new Set([describedByProp, field?.describedBy].join(" ").split(" ").filter(Boolean))].join(" ") || void 0;
+  const thumbName = (part) => nameId ? { "aria-labelledby": part ? `${nameId} ${ownId}-${part}` : nameId } : { "aria-label": ariaLabel ? part ? `${ariaLabel} ${part}` : ariaLabel : void 0 };
   const isRange = Array.isArray(value);
   const low = isRange ? value[0] : value;
   const high = isRange ? value[1] : value;
@@ -2382,7 +2568,14 @@ function SliderRange({
     [disabled, min, max, handleChange]
   );
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-ds-1", disabled && "opacity-disabled", className), children: [
-    showValue && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-mono tabular-nums text-[var(--ds-text-muted)]", children: isRange ? `${low} \u2013 ${high}` : low }) }),
+    (showLabel || showValue) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-ds-2", showLabel ? "justify-between" : "justify-end"), children: [
+      showLabel && /* @__PURE__ */ jsx("span", { id: `${ownId}-label`, className: "text-sm font-medium leading-none text-[var(--ds-text-secondary)]", children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-xs font-mono tabular-nums text-[var(--ds-text-muted)]", children: isRange ? `${low} \u2013 ${high}` : low })
+    ] }),
+    isRange && nameId && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { id: `${ownId}-minimum`, hidden: true, children: "minimum" }),
+      /* @__PURE__ */ jsx("span", { id: `${ownId}-maximum`, hidden: true, children: "maximum" })
+    ] }),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -2405,7 +2598,8 @@ function SliderRange({
             {
               role: "slider",
               tabIndex: disabled ? -1 : 0,
-              "aria-label": `${label} minimum`,
+              ...thumbName("minimum"),
+              "aria-describedby": describedBy,
               "aria-valuemin": min,
               "aria-valuemax": high,
               "aria-valuenow": low,
@@ -2429,7 +2623,8 @@ function SliderRange({
             {
               role: "slider",
               tabIndex: disabled ? -1 : 0,
-              "aria-label": isRange ? `${label} maximum` : label,
+              ...thumbName(isRange ? "maximum" : void 0),
+              "aria-describedby": describedBy,
               "aria-valuemin": isRange ? low : min,
               "aria-valuemax": max,
               "aria-valuenow": high,
@@ -2605,10 +2800,10 @@ function TimePicker({
       setOpen(false);
     };
     const keyHandler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     document.addEventListener("mousedown", handler);
     document.addEventListener("keydown", keyHandler);
@@ -3246,14 +3441,14 @@ function TagInput({
   );
   const containerRef = useRef(null);
   const pendingFocus = useRef(null);
-  const tagCount = value.length;
   useLayoutEffect(() => {
-    const index = pendingFocus.current;
-    if (index === null) return;
+    const pending = pendingFocus.current;
+    if (pending === null) return;
     pendingFocus.current = null;
+    if (value.includes(pending.tag)) return;
     const buttons = Array.from(containerRef.current?.querySelectorAll("[data-tag-remove]") ?? []);
-    focusAfterRemoval(buttons, index, inputRef.current);
-  }, [tagCount]);
+    focusAfterRemoval(buttons, pending.index, inputRef.current);
+  });
   const handleKeyDown = useCallback(
     (e) => {
       if ((e.key === "Enter" || e.key === ",") && input.trim()) {
@@ -3308,7 +3503,7 @@ function TagInput({
           Tag,
           {
             onRemove: disabled ? void 0 : () => {
-              pendingFocus.current = i;
+              pendingFocus.current = { index: i, tag };
               removeTag(tag);
             },
             disabled,
@@ -3837,60 +4032,6 @@ function ColorPicker({
     }
   );
 }
-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 })
-      ]
-    }
-  );
-}
-function Field({ label, children, hint, error, required, labelAction, id: idProp, className }) {
-  const generated = useId();
-  const id = idProp ?? `field-${generated}`;
-  const hintId = `${id}-hint`;
-  const errorId = `${id}-error`;
-  const hasError = typeof error === "string" && error.length > 0;
-  const describedBy = [hint ? hintId : null, hasError ? errorId : null].filter(Boolean).join(" ") || void 0;
-  const controlProps = {
-    id,
-    "aria-describedby": describedBy,
-    ...hasError ? { "aria-invalid": true, error: true } : {},
-    ...required ? { "aria-required": true, required: true } : {}
-  };
-  let control;
-  if (typeof children === "function") {
-    control = children(controlProps);
-  } else {
-    const child = Children.only(children);
-    if (!isValidElement(child)) throw new Error("Field expects a single form control as its child");
-    const isNative = typeof child.type === "string";
-    const { error: errorFlag, ...ariaOnly } = controlProps;
-    control = cloneElement(child, isNative ? ariaOnly : { ...ariaOnly, ...errorFlag ? { error: true } : {} });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-1.5", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
-      /* @__PURE__ */ jsxs(Label, { htmlFor: id, children: [
-        label,
-        required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
-      ] }),
-      labelAction
-    ] }),
-    control,
-    hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-[var(--ds-text-muted)]", children: hint }),
-    hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: error, className: "mt-0" })
-  ] });
-}
 var variantStyles2 = {
   info: "border-[var(--ds-accent-primary)] bg-[var(--ds-accent-subtle)]",
   success: "border-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
@@ -4566,7 +4707,6 @@ function MentionInput({
   const value = controlledValue ?? internalValue;
   const [query, setQuery] = useState("");
   const [showPopup, setShowPopup] = useState(false);
-  useOverlayLayer(showPopup);
   const [activeIndex, setActiveIndex] = useState(0);
   const [triggerStart, setTriggerStart] = useState(-1);
   const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
@@ -4576,6 +4716,7 @@ function MentionInput({
   const filtered = suggestions.filter(
     (s) => s.label.toLowerCase().includes(query.toLowerCase()) || s.description?.toLowerCase().includes(query.toLowerCase())
   );
+  useOverlayLayer(showPopup && filtered.length > 0);
   const updateValue = useCallback(
     (v) => {
       if (controlledValue === void 0) setInternalValue(v);
@@ -4654,6 +4795,7 @@ function MentionInput({
       e.preventDefault();
       insertMention(filtered[activeIndex]);
     } else if (e.key === "Escape") {
+      e.preventDefault();
       setShowPopup(false);
     }
   };
@@ -4757,6 +4899,8 @@ function MentionInput({
   ] });
 }
 var CardCtx = createContext(false);
+var CardActionCtx = createContext(null);
+var CARD_ACTION_ATTR = "data-card-action";
 var CardSurfaceCtx = createContext(false);
 var variantStyles3 = {
   default: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] ${GLASS_SURFACE}`,
@@ -4876,11 +5020,33 @@ var Card = forwardRef(function Card2({
   const isSelectable = selectable || !!selectType;
   const isToggle = selectType === "toggle";
   const hasSelectType = !!selectType;
+  const isAction = !isSelectable && variant === "interactive" && !!onClick;
+  const rootRef = useRef(null);
+  const setRoot = useCallback((node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  const [inner, setInner] = useState({ controls: false, titleId: null });
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root || !isAction && !checkable) return;
+    const controls = Array.from(root.querySelectorAll(FOCUSABLE)).some((el) => !el.hasAttribute(CARD_ACTION_ATTR));
+    const titleId = root.querySelector("[data-card-title]")?.id || null;
+    setInner((cur) => cur.controls === controls && cur.titleId === titleId ? cur : { controls, titleId });
+  }, [isAction, checkable, loading, children]);
+  const holdsControls = isAction && inner.controls;
+  const action = useMemo(() => holdsControls ? { activate: () => rootRef.current?.click(), disabled } : null, [holdsControls, disabled]);
   const handleClick = isSelectable && !disabled ? (e) => {
     onSelectedChange?.(!selected);
     onClick?.(e);
-  } : onClick;
-  const isAction = !isSelectable && variant === "interactive" && !!onClick;
+  } : isAction && disabled ? void 0 : onClick;
+  const handleCardClick = (e) => {
+    if (disabled || !(e.target instanceof Element) || !e.currentTarget.contains(e.target)) return;
+    const control = e.target.closest(FOCUSABLE);
+    if (control && control !== e.currentTarget && e.currentTarget.contains(control)) return;
+    onClick?.(e);
+  };
   const handleKeyDown = isSelectable && !disabled ? (e) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
@@ -4903,7 +5069,8 @@ var Card = forwardRef(function Card2({
     e.stopPropagation();
     onSelectedChange?.(!selected);
   };
-  const role = selectType === "radio" ? "radio" : selectType === "checkbox" ? "checkbox" : selectType === "toggle" ? "switch" : isSelectable || isAction ? "button" : void 0;
+  const isButton = isSelectable || isAction && !holdsControls;
+  const role = selectType === "radio" ? "radio" : selectType === "checkbox" ? "checkbox" : selectType === "toggle" ? "switch" : isButton ? "button" : void 0;
   const ariaAttr = selectType === "radio" || selectType === "checkbox" || selectType === "toggle" ? { "aria-checked": !!selected } : isSelectable ? { "aria-pressed": !!selected } : {};
   const showRing = isSelectable && !isToggle && !hasSelectType && selected;
   const indicator = selectType === "radio" ? /* @__PURE__ */ jsx(RadioIndicator, { checked: !!selected, disabled }) : selectType === "checkbox" ? /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected, indeterminate, disabled }) : selectType === "toggle" ? /* @__PURE__ */ jsx(ToggleIndicator, { checked: !!selected, disabled }) : null;
@@ -4911,11 +5078,11 @@ var Card = forwardRef(function Card2({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref,
+      ref: setRoot,
       "data-card": "",
       role,
-      tabIndex: isSelectable || isAction && !disabled ? 0 : void 0,
-      "aria-disabled": (isSelectable || isAction) && disabled ? true : void 0,
+      tabIndex: isSelectable || isButton && !disabled ? 0 : void 0,
+      "aria-disabled": isButton && disabled ? true : void 0,
       ...name && selectType === "radio" ? { "data-radio-group": name } : {},
       style: variant === "interactive" ? { ...INTERACTIVE_SCALE_CAP, ...style } : style,
       className: cn(
@@ -4923,15 +5090,15 @@ var Card = forwardRef(function Card2({
         variantStyles3[variant],
         isSelectable && !disabled && "cursor-pointer select-none transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
         isSelectable && !disabled && !selected && "hover:border-[var(--ds-accent-primary)]",
-        (isSelectable || isAction) && "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        isButton && "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
         (showRing || hasSelectType && selected) && ACTIVE_RING,
         hasSelectType && selected && "bg-[var(--ds-accent-subtle)]",
         disabled && "opacity-disabled cursor-not-allowed",
         className
       ),
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
+      onClick: holdsControls ? handleCardClick : handleClick,
+      onKeyDown: holdsControls ? void 0 : handleKeyDown,
+      onKeyUp: holdsControls ? void 0 : handleKeyUp,
       ...ariaAttr,
       ...props,
       children: [
@@ -4944,6 +5111,7 @@ var Card = forwardRef(function Card2({
             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 === " ") {
@@ -4955,7 +5123,7 @@ var Card = forwardRef(function Card2({
             children: /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected })
           }
         ),
-        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardCtx, { value: checkable, children: loading ? (
+        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardActionCtx, { value: action, children: /* @__PURE__ */ jsx(CardCtx, { value: checkable, 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: [
@@ -4963,7 +5131,7 @@ var Card = forwardRef(function Card2({
             /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-full" }),
             /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-2/3" })
           ] }) })
-        ) : children }) })
+        ) : children }) }) })
       ]
     }
   );
@@ -4981,6 +5149,7 @@ var CardHeader = forwardRef(function CardHeader2({ className, children, actions,
           "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)]",
@@ -5017,20 +5186,42 @@ var cardLineClampClasses = {
   5: "line-clamp-5",
   6: "line-clamp-6"
 };
-var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2, ...props }, forwardedRef) {
+var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2, id, ...props }, forwardedRef) {
+  const action = useContext(CardActionCtx);
+  const generatedId = useId();
   const { ref: overflowRef, isTruncated } = useTextOverflow({ lines, disabled: lines === 0 });
   const lineClampClass = lines > 0 ? cardLineClampClasses[lines] || `line-clamp-[${lines}]` : "";
   const heading = /* @__PURE__ */ jsx(
     "h3",
     {
       ref: (node) => {
-        overflowRef(lines > 0 ? node : null);
+        if (!action) overflowRef(lines > 0 ? node : null);
         if (typeof forwardedRef === "function") forwardedRef(node);
         else if (forwardedRef) forwardedRef.current = node;
       },
-      className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", lines > 0 && lineClampClass, className),
+      id: id ?? generatedId,
+      "data-card-title": "",
+      className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", !action && lines > 0 && lineClampClass, className),
       ...props,
-      children
+      children: action ? (
+        // The card's action when the card holds controls of its own (Sprint 25.7): a real button, which a click
+        // elsewhere on the card also runs. Its ::after spans the card to draw the card's focus ring, taking no clicks.
+        // The clamp moves inside, since a button lays out its own lines.
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ...{ [CARD_ACTION_ATTR]: "" },
+            disabled: action.disabled,
+            onClick: action.activate,
+            className: cn(
+              "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
     }
   );
   if (!isTruncated || lines === 0) return heading;
@@ -6047,10 +6238,10 @@ function OverflowPopover({
     if (!open) return;
     const raf = requestAnimationFrame(() => focusInitial(floatingRef.current));
     const onKey = (e) => {
-      if (e.key === "Escape" && isTop()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onDown = (e) => {
       if (!triggerRef.current?.contains(e.target)) setOpen(false);
@@ -6705,6 +6896,9 @@ function CompactDayCell({
   const today = isCurrentMonth && isToday(day);
   const selected = isCurrentMonth && selectedDate && isSameDay2(day, selectedDate);
   const hasEvents = dayEvents.length > 0;
+  const shown = open && hasEvents;
+  const isTop = useOverlayLayer(shown);
+  useCloseOnFocusOut(shown, cellRef, floatingRef, () => setOpen(false), isTop);
   const eventColors = dayEvents.slice(0, 3).map((e) => categories[e.category ?? ""]?.color ?? "var(--ds-accent-primary)");
   const handleMouseEnter = () => {
     if (!hasEvents) return;
@@ -6723,7 +6917,9 @@ function CompactDayCell({
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
-      if (e.key === "Escape") setOpen(false);
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      setOpen(false);
     };
     const onClick = (e) => {
       const t = e.target;
@@ -6736,7 +6932,7 @@ function CompactDayCell({
       document.removeEventListener("keydown", onKey);
       document.removeEventListener("mousedown", onClick);
     };
-  }, [open]);
+  }, [open, isTop]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -6908,10 +7104,10 @@ function MonthDropdown({
       (panel?.querySelector("[data-current]") ?? panel?.querySelector("button"))?.focus();
     });
     const onKey = (e) => {
-      if (e.key === "Escape" && isTop()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onClick = (e) => {
       const t = e.target;
@@ -7042,10 +7238,10 @@ function YearDropdown({
       (panel?.querySelector("[data-current]") ?? panel?.querySelector("button"))?.focus();
     });
     const onKey = (e) => {
-      if (e.key === "Escape" && isTop()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onClick = (e) => {
       const t = e.target;
@@ -9877,10 +10073,10 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
       setDropdownOpen(false);
     };
     const onKeyDown = (e) => {
-      if (e.key === "Escape" && isTop()) {
-        returnFocus();
-        setDropdownOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setDropdownOpen(false);
     };
     document.addEventListener("mousedown", handler);
     document.addEventListener("keydown", onKeyDown);
@@ -10080,27 +10276,31 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
     setTriggerWidth(node?.offsetWidth);
   }, []);
   const pos = usePosition(triggerRef, floatingRef, open, { side, align, offset: 8, flip: true });
-  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: floatingRef, close: () => onOpenChange(false), tabExits: "edges" });
+  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" && isTopLayer()) {
-        returnFocus();
-        onOpenChange(false);
-      }
-    };
-    const onClick = (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 (triggerRef.current?.contains(target) || floatingRef.current?.contains(target)) return;
-      onOpenChange(false);
+      if (marked(e) || triggerRef.current?.contains(target) || floatingRef.current?.contains(target)) return;
+      onOpenChangeRef.current(false);
     };
     document.addEventListener("keydown", onKeyDown);
-    document.addEventListener("mousedown", onClick);
+    document.addEventListener("mousedown", onPress);
     return () => {
       document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("mousedown", onPress);
     };
-  }, [open, onOpenChange, isTopLayer, returnFocus]);
+  }, [open, onOpenChangeRef, isTopLayer, returnFocus, marked]);
   useEffect(() => {
     if (open) focusInitial(floatingRef.current);
   }, [open]);
@@ -10122,6 +10322,7 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
         {
           ref: floatingRef,
           "data-gs": "popover",
+          ...pressMarks,
           onClick: (e) => e.stopPropagation(),
           className: cn(
             "fixed z-[var(--ds-z-popover)]",
@@ -10337,10 +10538,87 @@ function EllipsisJumper({ totalPages, onPageChange }) {
     }
   );
 }
+var HeaderTabRowContext = createContext(null);
+function useHeaderTabRow() {
+  return useContext(HeaderTabRowContext);
+}
+function useNarrowRow(row) {
+  const [narrow, setNarrow] = useState(false);
+  useLayoutEffect(() => {
+    if (!row) return;
+    const limit = readBreakpointPx("sm");
+    const measure = () => setNarrow(row.clientWidth < limit);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(row);
+    return () => ro.disconnect();
+  }, [row]);
+  return narrow;
+}
 function Stepper({ steps, currentStep, onStepChange, orientation = "horizontal", className }) {
   const isHorizontal = orientation === "horizontal";
+  const tabRow = useHeaderTabRow();
+  const narrow = useNarrowRow(tabRow?.row ?? null);
+  const inHeader = isHorizontal && tabRow != null;
+  if (inHeader && narrow) {
+    const current = steps[currentStep];
+    const where = `Step ${Math.min(currentStep + 1, steps.length)} of ${steps.length}`;
+    return /* @__PURE__ */ jsxs("nav", { "data-gs": "stepper", "aria-label": "Progress", className: cn("mx-ds-1", className), children: [
+      /* @__PURE__ */ jsxs("p", { className: cn("mb-ds-2 text-sm font-medium text-[var(--ds-text-secondary)]", tabRow.hasCaption && "sr-only"), children: [
+        where,
+        current ? /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          ": ",
+          current.label
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "flex gap-ds-1", children: steps.map((step, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-1.5 flex-1 rounded-[var(--ds-radius-full)] transition-colors",
+            step.status === "error" ? "bg-[var(--ds-status-error)]" : i <= currentStep ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-border-subtle)]"
+          )
+        },
+        i
+      )) })
+    ] });
+  }
+  if (inHeader) {
+    return /* @__PURE__ */ jsx("nav", { "data-gs": "stepper", "aria-label": "Progress", className: cn("flex items-start mx-ds-1", className), children: steps.map((step, i) => {
+      const status = step.status ?? (i < currentStep ? "complete" : i === currentStep ? "current" : "upcoming");
+      const isLast = i === steps.length - 1;
+      return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start min-w-0", isLast ? "flex-none" : "flex-1"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
+          /* @__PURE__ */ jsx(StepCircle, { status, index: i, onClick: onStepChange ? () => onStepChange(i) : void 0, clickable: !!onStepChange }),
+          !isLast && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex-1 h-0.5 mx-ds-2 transition-colors",
+                i < currentStep ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-border-subtle)]"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-ds-2 pr-ds-2", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-xs font-medium",
+                status === "current" ? "text-[var(--ds-accent-primary)]" : "text-[var(--ds-text-primary)]"
+              ),
+              children: step.label
+            }
+          ),
+          step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)] mt-ds-0.5", children: step.description })
+        ] })
+      ] }, i);
+    }) });
+  }
   if (!isHorizontal) {
-    return /* @__PURE__ */ jsx("nav", { "aria-label": "Progress", className: cn("flex flex-col", className), children: steps.map((step, i) => {
+    return /* @__PURE__ */ jsx("nav", { "data-gs": "stepper", "aria-label": "Progress", className: cn("flex flex-col", className), children: steps.map((step, i) => {
       const status = step.status ?? (i < currentStep ? "complete" : i === currentStep ? "current" : "upcoming");
       const isLast = i === steps.length - 1;
       return /* @__PURE__ */ jsxs("div", { className: "flex gap-ds-3", children: [
@@ -10375,6 +10653,7 @@ function Stepper({ steps, currentStep, onStepChange, orientation = "horizontal",
   return /* @__PURE__ */ jsx(
     "nav",
     {
+      "data-gs": "stepper",
       "aria-label": "Progress",
       className: cn("flex items-start", className),
       children: steps.map((step, i) => {
@@ -10795,6 +11074,7 @@ function computeCompactFlyoutPos(anchorEl, itemsLength) {
   return { top: Math.max(8, top), left: rect.right - (FLYOUT_BRIDGE_PX - 4) };
 }
 function CompactFlyout({
+  id,
   parentLabel,
   items,
   anchorEl,
@@ -10808,22 +11088,23 @@ function CompactFlyout({
   const pos = useMemo(() => computeCompactFlyoutPos(anchorEl, items.length), [anchorEl, items.length]);
   const anchorRef = useRef(anchorEl);
   const panelRef = useRef(null);
+  const headingId = useId();
   const { isTop: isTopLayer, returnFocus } = usePopupFocus(true, { trigger: anchorRef, panel: panelRef, close: onClose, tabExits: "edges" });
   useEffect(() => {
     if (!focusIn) return;
-    const raf = requestAnimationFrame(() => panelRef.current?.querySelector('[role="menuitem"]')?.focus());
+    const raf = requestAnimationFrame(() => panelRef.current?.querySelector("a[href]")?.focus());
     return () => cancelAnimationFrame(raf);
   }, [focusIn]);
   useEffect(() => {
     function handler(e) {
-      if (!isTopLayer()) return;
+      if (e.defaultPrevented || !isTopLayer()) return;
       const inside = !!panelRef.current?.contains(document.activeElement);
       if (e.key === "Escape" || e.key === "ArrowLeft" && inside) {
         e.preventDefault();
         if (inside) returnFocus();
         onClose();
       } else if (inside && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-        const links = Array.from(panelRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
+        const links = Array.from(panelRef.current?.querySelectorAll("a[href]") ?? []);
         const at = links.indexOf(document.activeElement);
         const next = links[(at + (e.key === "ArrowDown" ? 1 : -1) + links.length) % links.length];
         if (next) {
@@ -10846,8 +11127,7 @@ function CompactFlyout({
         "div",
         {
           ref: panelRef,
-          role: "menu",
-          "aria-label": parentLabel,
+          id,
           className: cn(
             "min-w-[160px] py-ds-1",
             "bg-[var(--ds-sidebar-bg)] rounded-[var(--ds-radius-md)]",
@@ -10855,12 +11135,11 @@ function CompactFlyout({
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
           ),
           children: [
-            /* @__PURE__ */ jsx("p", { className: "px-ds-2 pt-ds-1 pb-ds-1.5 text-2xs font-semibold uppercase tracking-wider text-[var(--ds-sidebar-text-muted)]", children: parentLabel }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col px-ds-1", style: { gap: "var(--ds-space-0\\.5)" }, children: items.map((child, i) => /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("p", { id: headingId, className: "px-ds-2 pt-ds-1 pb-ds-1.5 text-2xs font-semibold uppercase tracking-wider text-[var(--ds-sidebar-text-muted)]", children: parentLabel }),
+            /* @__PURE__ */ jsx("ul", { "aria-labelledby": headingId, className: "flex flex-col px-ds-1", style: { gap: "var(--ds-space-0\\.5)" }, children: items.map((child, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
               "a",
               {
                 href: child.href ?? "#",
-                role: "menuitem",
                 onClick: (e) => {
                   e.preventDefault();
                   onItemClick?.(child, i);
@@ -10875,9 +11154,8 @@ function CompactFlyout({
                   /* @__PURE__ */ jsx(TruncLabel3, { children: child.label }),
                   child.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: child.badge })
                 ]
-              },
-              child.label
-            )) })
+              }
+            ) }, child.label)) })
           ]
         }
       )
@@ -11224,6 +11502,7 @@ function CompactNavItem({
   onToggleExpand
 }) {
   const [triggerEl, setTriggerEl] = useState(null);
+  const flyoutId = useId();
   const [keyboardOpen, setKeyboardOpen] = useState(false);
   if (!isOpen && keyboardOpen) setKeyboardOpen(false);
   const handleMouseEnter = useCallback(() => {
@@ -11255,8 +11534,8 @@ function CompactNavItem({
           setKeyboardOpen(true);
           onOpen(flyoutKey);
         } : void 0,
-        "aria-haspopup": !mobile && hasChildren ? "menu" : void 0,
         "aria-expanded": hasChildren ? mobile ? expanded : isOpen : void 0,
+        "aria-controls": !mobile && hasChildren && isOpen ? flyoutId : void 0,
         className: cn(
           "relative flex flex-col items-center justify-center gap-[3px] w-full py-ds-3 px-ds-1 rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
           // Compact tiles have no edge to stroke: they read the fill and text
@@ -11291,6 +11570,7 @@ function CompactNavItem({
     !mobile && isOpen && hasChildren && item.children && triggerEl && /* @__PURE__ */ jsx(
       CompactFlyout,
       {
+        id: flyoutId,
         parentLabel: item.label,
         items: item.children,
         anchorEl: triggerEl,
@@ -11766,6 +12046,35 @@ function BackButton({ onLight, onClick }) {
     }
   );
 }
+function BackLink({ onClick, onLight }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "inline-flex items-center gap-ds-1 mb-ds-3 text-sm underline underline-offset-4 cursor-pointer",
+        "rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        onLight ? "text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)] hover:text-[var(--ds-accent-primary)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }),
+        "Back"
+      ]
+    }
+  );
+}
+function Caption({ children, onLight, onTint }) {
+  return /* @__PURE__ */ jsx("p", { className: cn(
+    "mb-ds-1 text-sm font-medium",
+    onLight ? "text-[var(--ds-text-on-primary)]/80" : onTint ? "text-[var(--ds-text-muted-on-tint)]" : "text-[var(--ds-text-secondary)]"
+  ), children });
+}
+function TabRow({ children, hasCaption, className, onBand }) {
+  const [row, setRow] = useState(null);
+  const value = useMemo(() => ({ row, hasCaption }), [row, hasCaption]);
+  return /* @__PURE__ */ jsx("div", { ref: setRow, className: cn(className, onBand && "mx-0 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)] px-ds-3 py-ds-2"), children: /* @__PURE__ */ jsx(HeaderTabRowContext.Provider, { value, children }) });
+}
 var FLOATING_HEADER = cn(
   "rounded-[var(--ds-radius-md)]",
   "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -11783,9 +12092,10 @@ function computeFloatingPadding(navbarFloating, sidebarFloating, overlapActive,
 var PageHeader = forwardRef(function PageHeader2({
   title,
   description,
+  caption,
   badge,
   breadcrumbs,
-  onBack,
+  onBack: onBackProp,
   actions,
   avatar,
   filters,
@@ -11844,12 +12154,16 @@ var PageHeader = forwardRef(function PageHeader2({
   const containedBreadcrumbs = containedBreadcrumbsProp ?? (container?.breadcrumbsInsideHeader && breadcrumbs?.length ? /* @__PURE__ */ jsx(Breadcrumbs, { variant: "contained", itemVariant: r.breadcrumbStyle, bleed: true, contentMaxWidth: gutterWidth, separator: bcSep, items: [...breadcrumbs, { label: title }] }) : void 0);
   const noBottomMargin = noBottomMarginProp ?? container?.noBottomMargin;
   const overlapActive = container?.overlap ?? false;
+  const focusBack = shell?.focus ? onBackProp : void 0;
+  const onBack = focusBack ? void 0 : onBackProp;
   if (behavior === "snapping") {
     return /* @__PURE__ */ jsx(
       SnappingHeader,
       {
         title,
         description,
+        caption,
+        focusBack,
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
@@ -11881,13 +12195,15 @@ var PageHeader = forwardRef(function PageHeader2({
   }
   let header;
   if (variant === "minimal") {
-    header = /* @__PURE__ */ jsx(MinimalHeader, { title, badge, breadcrumbs: inlineBreadcrumbs, actions, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: floating ? void 0 : ref, isFloating: floating, contentMaxWidth: gutterWidth });
+    header = /* @__PURE__ */ jsx(MinimalHeader, { title, caption, focusBack, badge, breadcrumbs: inlineBreadcrumbs, actions, tabs, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: floating ? void 0 : ref, isFloating: floating, contentMaxWidth: gutterWidth });
   } else if (variant === "tabs-integrated") {
     header = /* @__PURE__ */ jsx(
       TabsIntegratedHeader,
       {
         title,
         description,
+        caption,
+        focusBack,
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
@@ -11910,6 +12226,9 @@ var PageHeader = forwardRef(function PageHeader2({
         gutter: !insidePaddedColumn,
         title,
         description,
+        caption,
+        focusBack,
+        tabs,
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
@@ -11935,6 +12254,9 @@ var PageHeader = forwardRef(function PageHeader2({
       {
         title,
         description,
+        caption,
+        focusBack,
+        tabs,
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
@@ -11975,6 +12297,9 @@ function floatingContentProps(isFloating, contentMaxWidth, extraClassName) {
 function DefaultHeader({
   title,
   description,
+  caption,
+  focusBack,
+  tabs,
   badge,
   breadcrumbs,
   onBack,
@@ -11997,6 +12322,7 @@ function DefaultHeader({
   return /* @__PURE__ */ jsxs(
     "header",
     {
+      "data-gs": "page-header",
       ref: headerRef,
       className: cn(
         !hasBanner && (hasBreadcrumbs ? "pt-ds-3 pb-ds-6" : "py-ds-6"),
@@ -12015,6 +12341,7 @@ function DefaultHeader({
       children: [
         hasBanner && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[var(--ds-bg-canvas)]/85" }),
         /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
+          focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
           hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
           /* @__PURE__ */ jsxs("div", { className: cn(
             "flex flex-col @sm:flex-row @sm:items-center justify-between gap-ds-4",
@@ -12024,6 +12351,7 @@ function DefaultHeader({
               onBack && /* @__PURE__ */ jsx(BackButton, { onClick: onBack }),
               avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
                   /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
                   badge
@@ -12033,7 +12361,8 @@ function DefaultHeader({
             ] }),
             actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
           ] }),
-          filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) })
+          filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
+          tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", children: tabs })
         ] })
       ]
     }
@@ -12041,9 +12370,12 @@ function DefaultHeader({
 }
 function MinimalHeader({
   title,
+  caption,
+  focusBack,
   badge,
   breadcrumbs,
   actions,
+  tabs,
   breadcrumbPill,
   breadcrumbSeparator,
   as: Heading = "h1",
@@ -12054,20 +12386,26 @@ function MinimalHeader({
 }) {
   const hasBreadcrumbs = !!(breadcrumbs && breadcrumbs.length > 0);
   const inner = floatingContentProps(isFloating, contentMaxWidth);
-  return /* @__PURE__ */ jsx("header", { ref: headerRef, className: cn("py-ds-2", hasBreadcrumbs && "pt-ds-1", isFloating && FLOATING_HEADER, className), children: /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
+  return /* @__PURE__ */ jsx("header", { "data-gs": "page-header", ref: headerRef, className: cn("py-ds-2", hasBreadcrumbs && "pt-ds-1", tabs && "pb-ds-4", isFloating && FLOATING_HEADER, className), children: /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
+    focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
     hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
+    caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
     /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-ds-4", hasBreadcrumbs && "mt-ds-0.5"), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 min-w-0", children: [
         /* @__PURE__ */ jsx(TruncHeading, { as: Heading, lines: 1, className: "font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
         badge
       ] }),
       actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
-    ] })
+    ] }),
+    tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-3 -mx-ds-1", children: tabs })
   ] }) });
 }
 function ColourfulHeader({
   title,
   description,
+  caption,
+  focusBack,
+  tabs,
   badge,
   breadcrumbs,
   onBack,
@@ -12092,6 +12430,7 @@ function ColourfulHeader({
   return /* @__PURE__ */ jsxs(
     "header",
     {
+      "data-gs": "page-header",
       ref: headerRef,
       className: cn(
         "relative overflow-hidden w-full",
@@ -12135,6 +12474,7 @@ function ColourfulHeader({
               ...overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px))` } : {}
             },
             children: [
+              focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack, onLight: isBold }),
               hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, onLight: isBold, onTint: !isBold, pill: breadcrumbPill, separator: breadcrumbSeparator }),
               /* @__PURE__ */ jsxs("div", { className: cn(
                 "flex flex-col @sm:flex-row @sm:items-center justify-between gap-ds-4",
@@ -12144,6 +12484,7 @@ function ColourfulHeader({
                   onBack && /* @__PURE__ */ jsx(BackButton, { onClick: onBack, onLight: isBold }),
                   avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
                   /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    caption && /* @__PURE__ */ jsx(Caption, { onLight: isBold, onTint: !isBold, children: caption }),
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
                       /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: cn(
                         "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)]",
@@ -12159,7 +12500,8 @@ function ColourfulHeader({
                 ] }),
                 actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
               ] }),
-              filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) })
+              filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
+              tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", onBand: isBold, children: tabs })
             ]
           }
         )
@@ -12170,6 +12512,8 @@ function ColourfulHeader({
 function SnappingHeader({
   title,
   description,
+  caption,
+  focusBack,
   badge,
   breadcrumbs,
   onBack,
@@ -12293,6 +12637,7 @@ function SnappingHeader({
   const headerEl = /* @__PURE__ */ jsxs(
     "header",
     {
+      "data-gs": "page-header",
       ref: !isFloating ? mergedRef : void 0,
       className: cn(
         "transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
@@ -12329,8 +12674,10 @@ function SnappingHeader({
         onTint && !backgroundImage && /* @__PURE__ */ jsx(TintWash, {}),
         (() => {
           const hasBreadcrumbs = !!(breadcrumbs && breadcrumbs.length > 0);
-          const innerContent = isMinimal && !collapsed ? /* @__PURE__ */ jsxs("div", { className: cn("py-ds-2", hasBreadcrumbs && !hideExpandedBreadcrumbs && "pt-ds-1"), children: [
+          const innerContent = isMinimal && !collapsed ? /* @__PURE__ */ jsxs("div", { className: cn("py-ds-2", hasBreadcrumbs && !hideExpandedBreadcrumbs && "pt-ds-1", tabs && "pb-ds-4"), children: [
+            focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
             hasBreadcrumbs && !hideExpandedBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
+            caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
             /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-ds-4", hasBreadcrumbs && !hideExpandedBreadcrumbs && "mt-ds-0.5"), children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 min-w-0", children: [
                 /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: "font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
@@ -12340,7 +12687,7 @@ function SnappingHeader({
             ] }),
             filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-3", children: filters }) }),
             expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-3", children: expandedContent }),
-            tabs && /* @__PURE__ */ jsx("div", { className: "mt-ds-3 -mx-ds-1", children: tabs })
+            tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-3 -mx-ds-1", children: tabs })
           ] }) : /* @__PURE__ */ jsxs(
             "div",
             {
@@ -12354,6 +12701,7 @@ function SnappingHeader({
               ),
               style: !collapsed && isColourful && overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px))` } : void 0,
               children: [
+                !collapsed && focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack, onLight }),
                 !collapsed && hasBreadcrumbs && !hideExpandedBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, onLight, onTint, pill: breadcrumbPill, separator: breadcrumbSeparator }),
                 /* @__PURE__ */ jsxs("div", { className: cn(
                   "flex justify-between gap-ds-4",
@@ -12365,6 +12713,7 @@ function SnappingHeader({
                     onBack && !collapsed && /* @__PURE__ */ jsx(BackButton, { onClick: onBack, onLight }),
                     avatar && !collapsed && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
                     /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      !collapsed && caption && /* @__PURE__ */ jsx(Caption, { onLight, onTint, children: caption }),
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
                         collapsed && hasBreadcrumbs && (() => {
                           const lastCrumb = breadcrumbs[breadcrumbs.length - 1];
@@ -12407,7 +12756,7 @@ function SnappingHeader({
                 ] }),
                 !collapsed && filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
                 !collapsed && expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: expandedContent }),
-                !collapsed && tabs && /* @__PURE__ */ jsx("div", { className: "mt-ds-4 -mx-ds-1", children: tabs })
+                !collapsed && tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", onBand: isBoldColourful, children: tabs })
               ]
             }
           );
@@ -12455,6 +12804,8 @@ function SnappingHeader({
 function TabsIntegratedHeader({
   title,
   description,
+  caption,
+  focusBack,
   badge,
   breadcrumbs,
   onBack,
@@ -12471,7 +12822,8 @@ function TabsIntegratedHeader({
 }) {
   const hasBreadcrumbs = !!(breadcrumbs && breadcrumbs.length > 0);
   const inner = floatingContentProps(isFloating, contentMaxWidth);
-  return /* @__PURE__ */ jsx("header", { ref: headerRef, className: cn(hasBreadcrumbs ? "pt-ds-3" : "pt-ds-6", "pb-ds-4", isFloating && cn(FLOATING_HEADER, "overflow-hidden"), className), children: /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
+  return /* @__PURE__ */ jsx("header", { "data-gs": "page-header", ref: headerRef, className: cn(hasBreadcrumbs ? "pt-ds-3" : "pt-ds-6", "pb-ds-4", isFloating && cn(FLOATING_HEADER, "overflow-hidden"), className), children: /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
+    focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
     hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
     /* @__PURE__ */ jsxs("div", { className: cn(
       "flex flex-col @sm:flex-row @sm:items-center justify-between gap-ds-4",
@@ -12481,6 +12833,7 @@ function TabsIntegratedHeader({
         onBack && /* @__PURE__ */ jsx(BackButton, { onClick: onBack }),
         avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
             /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
             badge
@@ -12490,7 +12843,7 @@ function TabsIntegratedHeader({
       ] }),
       actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
     ] }),
-    tabs && /* @__PURE__ */ jsx("div", { className: "mt-ds-4 -mx-ds-1", children: tabs })
+    tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", children: tabs })
   ] }) });
 }
 var DEFAULT_BASE = 48;
@@ -12655,6 +13008,7 @@ function NavMenu({
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
+  const panelId = useId();
   const [pos, setPos] = useState({ top: 0, left: 0, minWidth: 0 });
   const close = useCallback(() => setOpen(false), []);
   const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: panelRef, close, tabExits: "edges" });
@@ -12680,10 +13034,10 @@ function NavMenu({
       }
     }
     function handleKey(e) {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        close();
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      close();
     }
     document.addEventListener("mousedown", handleClick);
     document.addEventListener("keydown", handleKey);
@@ -12725,7 +13079,7 @@ function NavMenu({
         ref: triggerRef,
         onClick: () => setOpen(!open),
         "aria-expanded": open,
-        "aria-haspopup": "true",
+        "aria-controls": open ? panelId : void 0,
         className: triggerClasses,
         children: [
           label,
@@ -12745,7 +13099,7 @@ function NavMenu({
         "div",
         {
           ref: panelRef,
-          role: "menu",
+          id: panelId,
           "data-gs": "menu",
           className: cn(
             "fixed z-[var(--ds-z-popover)] py-ds-1.5",
@@ -12754,7 +13108,7 @@ function NavMenu({
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
           ),
           style: { top: pos.top, left: pos.left, minWidth: pos.minWidth },
-          children: items.map((item, i) => {
+          children: /* @__PURE__ */ jsx("ul", { children: items.map((item, i) => {
             if (item.children?.length) {
               return /* @__PURE__ */ jsx(
                 NavMenuGroup,
@@ -12780,7 +13134,7 @@ function NavMenu({
               },
               item.label
             );
-          })
+          }) })
         }
       ),
       document.body
@@ -12791,11 +13145,10 @@ function NavMenuItemRow({
   item,
   onClick
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
     "a",
     {
       href: item.href ?? "#",
-      role: "menuitem",
       onClick: (e) => {
         e.preventDefault();
         onClick();
@@ -12821,14 +13174,15 @@ function NavMenuItemRow({
         ] })
       ]
     }
-  );
+  ) });
 }
 function NavMenuGroup({
   group,
   isFirst,
   onItemClick
 }) {
-  return /* @__PURE__ */ jsxs("div", { children: [
+  const headingId = useId();
+  return /* @__PURE__ */ jsxs("li", { children: [
     !isFirst && /* @__PURE__ */ jsx(
       "div",
       {
@@ -12836,15 +13190,15 @@ function NavMenuGroup({
         style: { height: "var(--ds-divider-width, 1px)", marginTop: "var(--ds-space-1)", marginBottom: "var(--ds-space-1)" }
       }
     ),
-    /* @__PURE__ */ jsx("p", { className: "px-ds-3 pt-ds-1.5 pb-ds-1 text-2xs font-semibold uppercase tracking-wider text-[var(--ds-text-muted)]", children: group.label }),
-    group.children.map((child) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("p", { id: headingId, className: "px-ds-3 pt-ds-1.5 pb-ds-1 text-2xs font-semibold uppercase tracking-wider text-[var(--ds-text-muted)]", children: group.label }),
+    /* @__PURE__ */ jsx("ul", { "aria-labelledby": headingId, children: group.children.map((child) => /* @__PURE__ */ jsx(
       NavMenuItemRow,
       {
         item: child,
         onClick: () => onItemClick(child)
       },
       child.label
-    ))
+    )) })
   ] });
 }
 function resolveNavItemType(type) {
@@ -12908,6 +13262,174 @@ function getTypeClasses(type, active) {
       );
   }
 }
+var DEFAULT_BUTTON_ATTR = "data-dialog-default-button";
+var sizeClasses = {
+  // round 16 (the owner's item 5): the small dialog is 448 px, not 384 — a delete confirmation with a typed field was cramped
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-[calc(100vw-2rem)]"
+};
+function Dialog({ open, onClose: onCloseProp, title, description, children, footer, variant = "default", size = "md", alert = false, container, onSubmit, dirty, onDiscard }) {
+  const guard = useDirtyGuard(dirty, onCloseProp, onDiscard);
+  const onClose = guard.requestClose;
+  const titleId = useId();
+  const descriptionId = useId();
+  const isMobile = useBreakpoint("sm");
+  const overlayRef = useRef(null);
+  const dialogRef = useRef(null);
+  const opener = useRef(null);
+  const defaultButtonRef = useRef(null);
+  const onCloseRef = useLatest(onClose);
+  const onSubmitRef = useLatest(onSubmit);
+  const isTopLayer = useOverlayLayer(open);
+  useFocusTrap(dialogRef, open, isTopLayer);
+  const before = useFocusBeforeOpen(open);
+  useEffect(() => {
+    if (!open) return;
+    const active = before.current;
+    opener.current = active instanceof HTMLElement && active !== document.body && active.isConnected ? rememberFocus(active) : null;
+  }, [open, before]);
+  useEffect(() => {
+    if (!open) return;
+    requestAnimationFrame(() => {
+      focusInitial(dialogRef.current, { destructive: variant === "destructive" });
+    });
+  }, [open, variant]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      onCloseRef.current();
+    };
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler);
+    };
+  }, [open, onCloseRef, isTopLayer]);
+  useEffect(() => {
+    if (!open) return;
+    lockBodyScroll();
+    return () => {
+      unlockBodyScroll();
+      const r = opener.current;
+      opener.current = null;
+      const active = document.activeElement;
+      if (!active || active === document.body || !active.isConnected) r?.restore();
+    };
+  }, [open]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: overlayRef,
+        className: "fixed inset-0 z-[var(--ds-z-modal)] flex items-center justify-center p-ds-4",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "fixed inset-0 bg-black/50 [backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))] [-webkit-backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))]",
+              onClick: alert ? void 0 : onClose,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "form",
+            {
+              onSubmit: (e) => {
+                e.preventDefault();
+                if (variant === "destructive") return;
+                const submitter = e.nativeEvent.submitter;
+                const implicit = !submitter || submitter === defaultButtonRef.current;
+                if (!implicit && submitter.getAttribute("type") !== "submit") return;
+                if (implicit) {
+                  const explicit = e.currentTarget.querySelector(`button[type="submit"]:not([${DEFAULT_BUTTON_ATTR}])`);
+                  if (explicit?.disabled) return;
+                }
+                onSubmitRef.current?.();
+              },
+              className: "contents",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: defaultButtonRef,
+                    type: "submit",
+                    tabIndex: -1,
+                    "aria-hidden": "true",
+                    className: "sr-only",
+                    ...{ [DEFAULT_BUTTON_ATTR]: "" }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ref: dialogRef,
+                    role: alert ? "alertdialog" : "dialog",
+                    "aria-modal": "true",
+                    "data-gs": "dialog",
+                    "aria-labelledby": titleId,
+                    "aria-describedby": description ? descriptionId : void 0,
+                    style: { containerType: "inline-size" },
+                    className: cn(
+                      "relative z-10 w-full",
+                      isMobile ? "max-w-none h-full" : sizeClasses[size],
+                      "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+                      GLASS_OVERLAY,
+                      "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+                      isMobile ? "rounded-none" : "rounded-[var(--ds-radius-xl)]",
+                      "overflow-hidden",
+                      "animate-in fade-in-0 zoom-in-95"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onClose,
+                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
+                          className: "absolute right-4 top-4 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                          "aria-label": "Close",
+                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { className: "p-ds-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-ds-3", children: [
+                        variant === "destructive" && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center shrink-0 w-10 h-10 rounded-[var(--ds-radius-full)] bg-[var(--ds-status-error-bg)]", children: /* @__PURE__ */ jsx(Icon, { name: "warning", size: 20, className: "text-[var(--ds-status-error)]" }) }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ jsx(
+                            "h2",
+                            {
+                              id: titleId,
+                              className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] leading-none tracking-tight",
+                              children: title
+                            }
+                          ),
+                          description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
+                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) })
+                        ] })
+                      ] }) }),
+                      /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
+                      footer && /* @__PURE__ */ jsx("div", { className: cn(
+                        "flex justify-end gap-ds-2 p-ds-4",
+                        "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                        "bg-[var(--ds-bg-muted)]",
+                        "rounded-b-[var(--ds-radius-xl)]"
+                      ), children: footer })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    container ?? document.body
+  );
+}
 function HamburgerButton({ onClick, open, className: cls }) {
   return /* @__PURE__ */ jsx(
     "button",
@@ -12963,9 +13485,11 @@ var Navbar = forwardRef(function Navbar2({
   const [visibleCount, setVisibleCount] = useState(null);
   const links = useMemo(() => flattenLinks(navLinks), [navLinks]);
   const mobileHidesLinks = !!appShell?.isMobile && (appShell.hasMobileMenu || appShell.hasMobileNav);
+  const focus = appShell?.focus ?? null;
+  const [confirmExit, setConfirmExit] = useState(false);
   useEffect(() => {
     const header = headerRef.current;
-    if (!header || mobileHidesLinks || links.length === 0 || typeof ResizeObserver === "undefined") return;
+    if (!header || mobileHidesLinks || focus || links.length === 0 || typeof ResizeObserver === "undefined") return;
     const measure = () => {
       const nav = navRef.current;
       if (!nav) return;
@@ -13002,7 +13526,7 @@ var Navbar = forwardRef(function Navbar2({
     const ro = new ResizeObserver(measure);
     ro.observe(header);
     return () => ro.disconnect();
-  }, [mobileHidesLinks, links]);
+  }, [mobileHidesLinks, focus, links]);
   const [topInset, setTopInset] = useState(null);
   const shellEl = appShell?.container ?? null;
   useLayoutEffect(() => {
@@ -13034,7 +13558,40 @@ var Navbar = forwardRef(function Navbar2({
   }, [visibleCount, links]);
   const showHamburger = appShell?.isMobile && appShell.hasMobileMenu && !(isSmallPhone && appShell.hasMobileNav) || !!onMenuClick;
   const handleHamburger = () => onMenuClick ? onMenuClick() : appShell?.setSidebarOpen(!appShell.sidebarOpen);
-  const hideNavLinks = mobileHidesLinks;
+  const hideNavLinks = mobileHidesLinks || !!focus;
+  const shownSearch = focus ? null : search;
+  const requestExit = () => {
+    if (!focus) return;
+    if (focus.kind === "in-app" && appShell?.hasUnsavedChanges) {
+      setConfirmExit(true);
+      return;
+    }
+    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 shownUserMenu = focus?.kind === "before-app" ? null : userMenu;
+  const asking = confirmExit && focus?.kind === "in-app" && !!appShell?.hasUnsavedChanges;
+  if (confirmExit && !asking) setConfirmExit(false);
+  const exitDialog = focus?.kind === "in-app" ? /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: asking,
+      onClose: () => setConfirmExit(false),
+      title: "You have unsaved changes",
+      description: "Exit now and your changes are lost.",
+      variant: "destructive",
+      size: "sm",
+      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: () => {
+          setConfirmExit(false);
+          focus.onExit?.();
+        }, children: "Discard changes" })
+      ] })
+    }
+  ) : null;
   const type = resolveNavItemType(typeProp);
   const isMinimal = type === "minimal";
   const isFloating = position === "floating";
@@ -13100,9 +13657,10 @@ var Navbar = forwardRef(function Navbar2({
           ] }),
           navLinks && !hideNavLinks ? /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { ref: navRef, className: "flex items-center gap-ds-2 min-w-0 overflow-x-clip justify-center", "data-navbar-type": type, children: linkRow }) }) : /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4 justify-end", children: [
-            search && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: search }),
+            shownSearch && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: shownSearch }),
             actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }),
-            userMenu && /* @__PURE__ */ jsx("div", { className: cn("flex items-center", resolvedSize === "sm" ? "min-w-0 max-w-[180px]" : "shrink-0"), children: userMenu })
+            exitControl && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: exitControl }),
+            shownUserMenu && /* @__PURE__ */ jsx("div", { className: cn("flex items-center", resolvedSize === "sm" ? "min-w-0 max-w-[180px]" : "shrink-0"), children: shownUserMenu })
           ] })
         ]
       }
@@ -13127,15 +13685,16 @@ var Navbar = forwardRef(function Navbar2({
           align === "right" && /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "", className: "flex-1" }),
           navLinks && !hideNavLinks && /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { ref: navRef, className: cn("flex items-center gap-ds-2 min-w-0 overflow-x-clip", align === "left" && "flex-1"), "data-navbar-type": type, children: linkRow }) }),
           (!navLinks || hideNavLinks) && /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "", className: "flex-1" }),
-          search && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: search }),
+          shownSearch && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: shownSearch }),
           actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }),
-          userMenu && /* @__PURE__ */ jsx("div", { className: cn("flex items-center", resolvedSize === "sm" ? "min-w-0 max-w-[180px]" : "shrink-0"), children: userMenu })
+          exitControl && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: exitControl }),
+          shownUserMenu && /* @__PURE__ */ jsx("div", { className: cn("flex items-center", resolvedSize === "sm" ? "min-w-0 max-w-[180px]" : "shrink-0"), children: shownUserMenu })
         ]
       }
     );
   }
   if (isFloating) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
@@ -13145,11 +13704,17 @@ var Navbar = forwardRef(function Navbar2({
           className
         ),
         style: { padding: "var(--ds-space-3)" },
-        children: headerEl
+        children: [
+          headerEl,
+          exitDialog
+        ]
       }
     );
   }
-  return headerEl;
+  return exitDialog ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    headerEl,
+    exitDialog
+  ] }) : headerEl;
 });
 function MobileHeaderMenu({ items, type = "tint", onItemClick, className }) {
   return /* @__PURE__ */ jsx("nav", { className: cn("flex flex-col", className), style: { padding: "var(--ds-space-4)" }, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", style: { gap: type === "underline" ? 0 : "var(--ds-space-1)" }, children: items.map((item, i) => /* @__PURE__ */ jsx(
@@ -13241,172 +13806,6 @@ function MobileMenuItem({
     }
   );
 }
-var DEFAULT_BUTTON_ATTR = "data-dialog-default-button";
-var sizeClasses = {
-  // round 16 (the owner's item 5): the small dialog is 448 px, not 384 — a delete confirmation with a typed field was cramped
-  sm: "max-w-md",
-  md: "max-w-lg",
-  lg: "max-w-2xl",
-  xl: "max-w-4xl",
-  full: "max-w-[calc(100vw-2rem)]"
-};
-function Dialog({ open, onClose: onCloseProp, title, description, children, footer, variant = "default", size = "md", alert = false, container, onSubmit, dirty, onDiscard }) {
-  const guard = useDirtyGuard(dirty, onCloseProp, onDiscard);
-  const onClose = guard.requestClose;
-  const titleId = useId();
-  const descriptionId = useId();
-  const isMobile = useBreakpoint("sm");
-  const overlayRef = useRef(null);
-  const dialogRef = useRef(null);
-  const opener = useRef(null);
-  const defaultButtonRef = useRef(null);
-  const onCloseRef = useLatest(onClose);
-  const onSubmitRef = useLatest(onSubmit);
-  const isTopLayer = useOverlayLayer(open);
-  useFocusTrap(dialogRef, open, isTopLayer);
-  const before = useFocusBeforeOpen(open);
-  useEffect(() => {
-    if (!open) return;
-    const active = before.current;
-    opener.current = active instanceof HTMLElement && active !== document.body && active.isConnected ? rememberFocus(active) : null;
-  }, [open, before]);
-  useEffect(() => {
-    if (!open) return;
-    requestAnimationFrame(() => {
-      focusInitial(dialogRef.current, { destructive: variant === "destructive" });
-    });
-  }, [open, variant]);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (e.key === "Escape" && !alert && isTopLayer()) onCloseRef.current();
-    };
-    document.addEventListener("keydown", handler);
-    return () => {
-      document.removeEventListener("keydown", handler);
-    };
-  }, [open, alert, onCloseRef, isTopLayer]);
-  useEffect(() => {
-    if (!open) return;
-    lockBodyScroll();
-    return () => {
-      unlockBodyScroll();
-      const r = opener.current;
-      opener.current = null;
-      const active = document.activeElement;
-      if (!active || active === document.body || !active.isConnected) r?.restore();
-    };
-  }, [open]);
-  if (!open) return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: overlayRef,
-        className: "fixed inset-0 z-[var(--ds-z-modal)] flex items-center justify-center p-ds-4",
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "fixed inset-0 bg-black/50 [backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))] [-webkit-backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))]",
-              onClick: alert ? void 0 : onClose,
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "form",
-            {
-              onSubmit: (e) => {
-                e.preventDefault();
-                if (variant === "destructive") return;
-                const submitter = e.nativeEvent.submitter;
-                const implicit = !submitter || submitter === defaultButtonRef.current;
-                if (!implicit && submitter.getAttribute("type") !== "submit") return;
-                if (implicit) {
-                  const explicit = e.currentTarget.querySelector(`button[type="submit"]:not([${DEFAULT_BUTTON_ATTR}])`);
-                  if (explicit?.disabled) return;
-                }
-                onSubmitRef.current?.();
-              },
-              className: "contents",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    ref: defaultButtonRef,
-                    type: "submit",
-                    tabIndex: -1,
-                    "aria-hidden": "true",
-                    className: "sr-only",
-                    ...{ [DEFAULT_BUTTON_ATTR]: "" }
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    ref: dialogRef,
-                    role: alert ? "alertdialog" : "dialog",
-                    "aria-modal": "true",
-                    "data-gs": "dialog",
-                    "aria-labelledby": titleId,
-                    "aria-describedby": description ? descriptionId : void 0,
-                    style: { containerType: "inline-size" },
-                    className: cn(
-                      "relative z-10 w-full",
-                      isMobile ? "max-w-none h-full" : sizeClasses[size],
-                      "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
-                      GLASS_OVERLAY,
-                      "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-                      isMobile ? "rounded-none" : "rounded-[var(--ds-radius-xl)]",
-                      "overflow-hidden",
-                      "animate-in fade-in-0 zoom-in-95"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: onClose,
-                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
-                          className: "absolute right-4 top-4 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
-                          "aria-label": "Close",
-                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("div", { className: "p-ds-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-ds-3", children: [
-                        variant === "destructive" && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center shrink-0 w-10 h-10 rounded-[var(--ds-radius-full)] bg-[var(--ds-status-error-bg)]", children: /* @__PURE__ */ jsx(Icon, { name: "warning", size: 20, className: "text-[var(--ds-status-error)]" }) }),
-                        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                          /* @__PURE__ */ jsx(
-                            "h2",
-                            {
-                              id: titleId,
-                              className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] leading-none tracking-tight",
-                              children: title
-                            }
-                          ),
-                          description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
-                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) })
-                        ] })
-                      ] }) }),
-                      /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
-                      footer && /* @__PURE__ */ jsx("div", { className: cn(
-                        "flex justify-end gap-ds-2 p-ds-4",
-                        "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                        "bg-[var(--ds-bg-muted)]",
-                        "rounded-b-[var(--ds-radius-xl)]"
-                      ), children: footer })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    container ?? document.body
-  );
-}
 function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a command\u2026", loading = false, container }) {
   const [query, setQuery] = useState("");
   const [selectedIdx, setSelectedIdx] = useState(0);
@@ -13443,14 +13842,17 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
   const isTopLayer = useOverlayLayer(open);
   useFocusTrap(dialogRef, open, isTopLayer);
   const returnFocus = useReturnFocus(open, dialogRef);
+  const onOpenChangeRef = useLatest(onOpenChange);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) onOpenChange(false);
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      onOpenChangeRef.current(false);
     };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [open, onOpenChange, isTopLayer]);
+  }, [open, onOpenChangeRef, isTopLayer]);
   const handleSelect = useCallback(
     (cmd) => {
       returnFocus();
@@ -13664,7 +14066,9 @@ function ContextMenu({ items, children, className, ref, container }) {
     };
     const keyHandler = (e) => {
       if (e.key === "Escape") {
-        if (isTopLayer()) setOpen(false);
+        if (e.defaultPrevented || !isTopLayer()) return;
+        e.preventDefault();
+        setOpen(false);
         return;
       }
       const actionable = items.filter((it) => !it.separator && !it.disabled);
@@ -13801,10 +14205,11 @@ function NotificationCenter({
   const [internalFilter, setInternalFilter] = useState("all");
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
+  const onOpenChangeRef = useLatest(onOpenChange);
   const setOpen = useCallback((v) => {
-    if (isControlled) onOpenChange?.(v);
+    if (isControlled) onOpenChangeRef.current?.(v);
     else setInternalOpen(v);
-  }, [isControlled, onOpenChange]);
+  }, [isControlled, onOpenChangeRef]);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "end", offset: 8, flip: true });
@@ -13821,10 +14226,10 @@ function NotificationCenter({
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onClick = (e) => {
       const target = e.target;
@@ -13946,6 +14351,8 @@ function NotificationCenter({
         ref: triggerRef,
         onClick: () => setOpen(!open),
         "aria-label": `Notifications${unreadCount ? ` (${unreadCount} unread)` : ""}`,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
         className: cn(
           "relative flex items-center justify-center w-9 h-9",
           "rounded-[var(--ds-radius-md)]",
@@ -13964,6 +14371,8 @@ function NotificationCenter({
         "div",
         {
           ref: panelRef,
+          role: "dialog",
+          "aria-label": "Notifications",
           className: cn(
             "fixed z-[var(--ds-z-popover)] w-[360px] max-h-[480px] flex flex-col",
             "bg-[var(--ds-bg-surface-elevated)]",
@@ -14119,17 +14528,21 @@ function Tour({ steps, open, onClose, onComplete, container }) {
     const raf = requestAnimationFrame(() => nextRef.current?.focus());
     return () => cancelAnimationFrame(raf);
   }, [open, current]);
+  const onCloseRef = useLatest(onClose);
+  const handleNextRef = useLatest(handleNext);
+  const handlePrevRef = useLatest(handlePrev);
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
-      if (!isTopLayer()) return;
-      if (e.key === "Escape") onClose();
-      else if (e.key === "ArrowRight") handleNext();
-      else if (e.key === "ArrowLeft") handlePrev();
+      if (e.defaultPrevented || !isTopLayer()) return;
+      const act = e.key === "Escape" ? onCloseRef.current : e.key === "ArrowRight" ? handleNextRef.current : e.key === "ArrowLeft" ? handlePrevRef.current : null;
+      if (!act) return;
+      e.preventDefault();
+      act();
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [open, onClose, handleNext, handlePrev, isTopLayer]);
+  }, [open, isTopLayer, onCloseRef, handleNextRef, handlePrevRef]);
   if (!open || !step) return null;
   const padding = 8;
   const spotlightRadius = 8;
@@ -14593,7 +15006,7 @@ function useDestructiveAction(options) {
     }
     setOpen(true);
   };
-  const matches = !typedRequired || typed.trim().toLowerCase() === typedText.trim().toLowerCase();
+  const matches2 = !typedRequired || typed.trim().toLowerCase() === typedText.trim().toLowerCase();
   const element = open ? /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -14604,7 +15017,7 @@ function useDestructiveAction(options) {
       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: !matches || busy, loading: busy, children: label })
+        /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => void confirm(), disabled: !matches2 || busy, loading: busy, children: label })
       ] }),
       children: typedRequired && /* @__PURE__ */ jsx(Field, { label: /* @__PURE__ */ jsxs(Fragment, { children: [
         "Type ",