gridsmith-ui 0.14.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-JSQPVRHQ.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell } from './chunk-JSQPVRHQ.js';
-import { Skeleton } from './chunk-M3AARGLI.js';
-export { Skeleton } from './chunk-M3AARGLI.js';
-import { useOverlayLayer, useCloseOnFocusOut, focusInitial, rovingTabStop, OVERLAY_CLOSE_ATTR, useNonModalDialog, useFocusTrap } from './chunk-NHQCMOAN.js';
-import { Link } from './chunk-QJBCZ7BR.js';
-export { CodeBlock, Divider, Link } from './chunk-QJBCZ7BR.js';
-import { Badge } from './chunk-U2JT37GJ.js';
-export { Badge } from './chunk-U2JT37GJ.js';
-import { inferColumnKinds, CardValue } from './chunk-CR2KF73R.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-IYD6ZDM2.js';
-export { Tooltip, useTextOverflow } from './chunk-IYD6ZDM2.js';
-import { mergeRefs, Slot } from './chunk-PKLVP5ZB.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) {
@@ -40,15 +40,14 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
     setPrevOpen(open);
     if (!open) setFocusedIdx(-1);
   }
-  const isTopLayer = useOverlayLayer(open);
-  useCloseOnFocusOut(open, triggerRef, menuRef, () => setOpen(false), isTopLayer);
+  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: menuRef, close: () => setOpen(false), tabExits: "any" });
   useEffect(() => {
     if (!open) return;
     const onKeyDown = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        setOpen(false);
-        triggerRef.current?.focus();
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onClick = (e) => {
       const target = e.target;
@@ -61,11 +60,10 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
       document.removeEventListener("keydown", onKeyDown);
       document.removeEventListener("mousedown", onClick);
     };
-  }, [open, isTopLayer]);
+  }, [open, isTopLayer, returnFocus]);
   useEffect(() => {
     if (open && focusedIdx >= 0) {
-      const buttons = menuRef.current?.querySelectorAll('[role="menuitem"]');
-      buttons?.[focusedIdx]?.focus();
+      menuRef.current?.querySelector(`[data-index="${focusedIdx}"]`)?.focus();
     }
   }, [open, focusedIdx]);
   function handleMenuKeyDown(e) {
@@ -108,6 +106,7 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
             className
           ),
           style: { top: pos.top, left: pos.left },
+          onClick: (e) => e.stopPropagation(),
           children: items.map((item, i) => {
             if (isDivider(item)) {
               return /* @__PURE__ */ jsx("div", { role: "separator", className: "my-ds-1 h-px bg-[var(--ds-border-default)]" }, i);
@@ -115,11 +114,13 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
             return /* @__PURE__ */ jsxs(
               "button",
               {
+                "data-index": i,
                 role: "menuitem",
                 disabled: item.disabled,
                 tabIndex: focusedIdx === i ? 0 : -1,
                 onClick: () => {
                   if (!item.disabled) {
+                    returnFocus();
                     item.onClick();
                     setOpen(false);
                   }
@@ -465,13 +466,7 @@ function Dropdown({
   useEffect(() => {
     if (!open) return;
     updatePos();
-    requestAnimationFrame(() => {
-      if (searchRef.current) {
-        searchRef.current.focus();
-      } else {
-        const els = Array.from(menuRef.current?.querySelectorAll('[role="option"]') ?? []);
-        (els.find((el) => el.getAttribute("aria-selected") === "true") ?? els[0])?.focus();
-      }
+    const raf = requestAnimationFrame(() => {
       updatePos();
       setPositioned(true);
     });
@@ -479,10 +474,22 @@ function Dropdown({
     window.addEventListener("scroll", onScroll, true);
     window.addEventListener("resize", updatePos);
     return () => {
+      cancelAnimationFrame(raf);
       window.removeEventListener("scroll", onScroll, true);
       window.removeEventListener("resize", updatePos);
     };
   }, [open, updatePos]);
+  const moved = useRef(false);
+  useLayoutEffect(() => {
+    if (!open || !positioned) return;
+    moved.current = false;
+    if (searchRef.current) {
+      searchRef.current.focus();
+      return;
+    }
+    const els = Array.from(menuRef.current?.querySelectorAll('[role="option"]') ?? []);
+    (els.find((el) => el.getAttribute("aria-selected") === "true") ?? els[0])?.focus();
+  }, [open, positioned]);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -493,7 +500,13 @@ function Dropdown({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  const isTopLayer = useOverlayLayer(open);
+  const commitMoved = () => {
+    if (multiple || !moved.current) return;
+    const el = document.activeElement;
+    const id = el instanceof HTMLElement && menuRef.current?.contains(el) ? el.getAttribute("data-option-id") : null;
+    if (id) onChange(id);
+  };
+  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: menuRef, close: () => setOpen(false), tabExits: "any", onTabOut: commitMoved });
   const typeahead = useRef({ buffer: "", at: 0 });
   useEffect(() => {
     if (!open) return;
@@ -502,6 +515,7 @@ function Dropdown({
       const els = optionButtons();
       if (els.length === 0) return;
       els[(idx % els.length + els.length) % els.length].focus();
+      moved.current = true;
     };
     const onKey = (e) => {
       const inMenu = menuRef.current?.contains(document.activeElement) || triggerRef.current === document.activeElement;
@@ -509,10 +523,10 @@ 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);
-        triggerRef.current?.focus();
         return;
       }
       if (e.key === "ArrowDown") {
@@ -536,10 +550,6 @@ function Dropdown({
         focusOption(els.length - 1);
         return;
       }
-      if (e.key === "Tab") {
-        setOpen(false);
-        return;
-      }
       if (!searchable && e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
         const now = Date.now();
         typeahead.current.buffer = now - typeahead.current.at > 700 ? e.key : typeahead.current.buffer + e.key;
@@ -554,7 +564,7 @@ function Dropdown({
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [open, searchable, isTopLayer]);
+  }, [open, searchable, isTopLayer, returnFocus]);
   const filtered = searchable && search ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) : options;
   const groups = /* @__PURE__ */ new Map();
   for (const opt of filtered) {
@@ -568,10 +578,21 @@ function Dropdown({
       const arr = selectedValues.includes(id) ? selectedValues.filter((v) => v !== id) : [...selectedValues, id];
       onChange(arr);
     } else {
+      returnFocus();
       onChange(id);
       setOpen(false);
     }
   };
+  const chipsRef = useRef(null);
+  const pendingChipFocus = useRef(null);
+  useLayoutEffect(() => {
+    const pending = pendingChipFocus.current;
+    if (pending === null) return;
+    pendingChipFocus.current = null;
+    if (selectedValues.includes(pending.value)) return;
+    const chips = Array.from(chipsRef.current?.querySelectorAll("[data-chip-remove]") ?? []);
+    focusAfterRemoval(chips, pending.index, triggerRef.current);
+  });
   const displayLabel = multiple ? selectedValues.length > 0 ? `${selectedValues.length} selected` : placeholder : options.find((o) => o.id === selectedValues[0])?.label ?? placeholder;
   const { ref: overflowRef, isTruncated } = useTextOverflow({ lines: 1, content: displayLabel });
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative", className), children: [
@@ -620,6 +641,7 @@ function Dropdown({
         "div",
         {
           ref: menuRef,
+          onClick: (e) => e.stopPropagation(),
           className: cn(
             "fixed z-[var(--ds-z-popover)]",
             "bg-[var(--ds-bg-surface-elevated)]",
@@ -670,7 +692,7 @@ function Dropdown({
       ),
       container ?? document.body
     ),
-    multiple && showChips && selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-ds-1 mt-ds-1.5", children: selectedValues.map((v) => {
+    multiple && showChips && selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { ref: chipsRef, className: "flex flex-wrap gap-ds-1 mt-ds-1.5", children: selectedValues.map((v, i) => {
       const opt = options.find((o) => o.id === v);
       return opt ? /* @__PURE__ */ jsxs(
         "span",
@@ -681,7 +703,11 @@ function Dropdown({
             /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: () => handleSelect(v),
+                "data-chip-remove": "",
+                onClick: () => {
+                  pendingChipFocus.current = { index: i, value: v };
+                  handleSelect(v);
+                },
                 className: "hover:text-[var(--ds-text-primary)] cursor-pointer",
                 "aria-label": `Remove ${opt.label}`,
                 children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 10 })
@@ -706,6 +732,7 @@ function OptionButton({
     {
       type: "button",
       role: "option",
+      "data-option-id": opt.id,
       "aria-selected": isSelected,
       tabIndex: -1,
       onClick: () => onSelect(opt.id),
@@ -750,6 +777,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
   useOverlayLayer(open);
   const [query, setQuery] = useState("");
   const [highlightIdx, setHighlightIdx] = useState(0);
+  const [moved, setMoved] = useState(false);
   const inputRef = useRef(null);
   const triggerRef = useRef(null);
   const [triggerWidth, setTriggerWidth] = useState(void 0);
@@ -766,6 +794,14 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
     setPrevQuery(query);
     setHighlightIdx(0);
   }
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open && query === "") {
+      setHighlightIdx(Math.max(0, filtered.findIndex((o) => o.value === value)));
+      setMoved(false);
+    }
+  }
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -781,7 +817,6 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
       onChange(val);
       setQuery("");
       setOpen(false);
-      inputRef.current?.blur();
     },
     [onChange]
   );
@@ -798,6 +833,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
           return;
         }
         setHighlightIdx((prev) => Math.min(prev + 1, filtered.length - 1));
+        setMoved(true);
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
         if (!open) {
@@ -805,15 +841,23 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
           return;
         }
         setHighlightIdx((prev) => Math.max(prev - 1, 0));
+        setMoved(true);
       } else if (e.key === "Enter" && open && filtered[highlightIdx]) {
         e.preventDefault();
         handleSelect(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("");
       }
     },
-    [open, filtered, highlightIdx, handleSelect, openList]
+    [open, moved, filtered, highlightIdx, handleSelect, openList, onChange]
   );
   const handleBlur = useCallback((e) => {
     const next = e.relatedTarget;
@@ -858,11 +902,13 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
               "aria-expanded": open,
               "aria-controls": listboxId,
               "aria-autocomplete": "list",
+              "aria-activedescendant": open && filtered[highlightIdx] ? `${listboxId}-opt-${highlightIdx}` : void 0,
               value: open ? query : selectedLabel,
               placeholder,
               disabled,
               onChange: (e) => {
                 setQuery(e.target.value);
+                setMoved(true);
                 if (!open) setOpen(true);
               },
               onFocus: (e) => e.currentTarget.select(),
@@ -917,8 +963,10 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
           children: /* @__PURE__ */ jsx("div", { style: { padding: "var(--ds-space-1)" }, children: loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-ds-4", children: /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "Loading options" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-ds-2 py-ds-3 text-sm text-[var(--ds-text-muted)] text-center", children: "No results" }) : filtered.map((opt, i) => /* @__PURE__ */ jsxs(
             "button",
             {
+              id: `${listboxId}-opt-${i}`,
               role: "option",
-              "aria-selected": opt.value === value,
+              tabIndex: -1,
+              "aria-selected": i === highlightIdx,
               onMouseDown: (e) => e.preventDefault(),
               onClick: () => handleSelect(opt.value),
               onMouseEnter: () => setHighlightIdx(i),
@@ -940,10 +988,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
       container ?? document.body
     )
   ] });
-  if (labelTruncated && !open) {
-    return /* @__PURE__ */ jsx(Tooltip, { content: selectedLabel, children: triggerContent });
-  }
-  return triggerContent;
+  return /* @__PURE__ */ jsx(Tooltip, { content: selectedLabel, disabled: !labelTruncated || open, children: triggerContent });
 }
 var CHECKBOX_SIZES = {
   sm: { box: "h-[16px] w-[16px]", glyph: 10, label: "text-xs" },
@@ -1125,6 +1170,42 @@ function RadioGroup({ value, onChange, options, orientation = "vertical", classN
   ] });
 }
 
+// ../../showcase/src/lib/date-grid.ts
+function addDays(d, n) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+}
+function addMonthsClamped(d, n) {
+  const first = new Date(d.getFullYear(), d.getMonth() + n, 1);
+  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
+  return new Date(first.getFullYear(), first.getMonth(), Math.min(d.getDate(), last));
+}
+function dayKey(d) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function moveDay(from, key, shift, weekStartsOn = 0) {
+  const intoWeek = (from.getDay() - weekStartsOn + 7) % 7;
+  switch (key) {
+    case "ArrowLeft":
+      return addDays(from, -1);
+    case "ArrowRight":
+      return addDays(from, 1);
+    case "ArrowUp":
+      return addDays(from, -7);
+    case "ArrowDown":
+      return addDays(from, 7);
+    case "Home":
+      return addDays(from, -intoWeek);
+    case "End":
+      return addDays(from, 6 - intoWeek);
+    case "PageUp":
+      return addMonthsClamped(from, shift ? -12 : -1);
+    case "PageDown":
+      return addMonthsClamped(from, shift ? 12 : 1);
+    default:
+      return null;
+  }
+}
+
 // ../../showcase/src/lib/segments.ts
 function stepValue(spec, current, delta) {
   if (current === null) return delta > 0 ? spec.min : spec.max;
@@ -1165,6 +1246,7 @@ var TEXT_SIZE2 = {
   lg: "text-base"
 };
 var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 var MONTHS = [
   "January",
   "February",
@@ -1236,7 +1318,9 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const [hover, setHover] = useState(null);
   const [viewDate, setViewDate] = useState(() => value ?? range?.start ?? range?.end ?? /* @__PURE__ */ new Date());
   const triggerRef = useRef(null);
+  const buttonRef = useRef(null);
   const panelRef = useRef(null);
+  const gridRef = useRef(null);
   const generatedId = useId();
   const inputId = id ?? generatedId;
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
@@ -1245,18 +1329,48 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const daysInMonth = getDaysInMonth(year, month);
   const firstDay = getFirstDayOfWeek(year, month);
   const today = useMemo(() => /* @__PURE__ */ new Date(), []);
-  const isTopLayer = useOverlayLayer(open);
-  const prevMonth = () => setViewDate(new Date(year, month - 1, 1));
-  const nextMonth = () => setViewDate(new Date(year, month + 1, 1));
   const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
   const isDisabledDay = (d) => !!min && d < startOf(min) || !!max && d > startOf(max);
-  useCloseOnFocusOut(open, triggerRef, panelRef, () => setOpen(false), isTopLayer);
+  const [focusDate, setFocusDate] = useState(() => startOf(value ?? range?.start ?? range?.end ?? /* @__PURE__ */ new Date()));
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) {
+      const start = startOf(value ?? range?.start ?? range?.end ?? today);
+      setFocusDate(start);
+      setViewDate(new Date(start.getFullYear(), start.getMonth(), 1));
+    }
+  }
+  const showDay = (d) => {
+    setFocusDate(d);
+    if (d.getFullYear() !== year || d.getMonth() !== month) setViewDate(new Date(d.getFullYear(), d.getMonth(), 1));
+  };
+  const grid = useGridKeyboard({
+    container: gridRef,
+    active: focusDate,
+    setActive: showDay,
+    keyOf: dayKey,
+    move: (from, e) => moveDay(from, e.key, e.shiftKey, 0)
+  });
+  const prevMonth = () => {
+    setViewDate(new Date(year, month - 1, 1));
+    setFocusDate(addMonthsClamped(focusDate, -1));
+  };
+  const nextMonth = () => {
+    setViewDate(new Date(year, month + 1, 1));
+    setFocusDate(addMonthsClamped(focusDate, 1));
+  };
+  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: buttonRef, panel: panelRef, close: () => setOpen(false), tabExits: "edges" });
+  const focusActiveDay = useLatest(grid.focusActive);
   useEffect(() => {
-    if (open) requestAnimationFrame(() => focusInitial(panelRef.current));
-  }, [open]);
-  const closeAndRefocus = () => {
+    if (!open) return;
+    const raf = requestAnimationFrame(() => focusActiveDay.current());
+    return () => cancelAnimationFrame(raf);
+  }, [open, focusActiveDay]);
+  const choose = (d) => {
+    returnFocus();
+    onChange(d);
     setOpen(false);
-    focusSegment(0);
   };
   const dayFirst = useMemo(() => localeDayFirst(), []);
   const [segs, setSegs] = useState(() => value ? { day: value.getDate(), month: value.getMonth() + 1, year: value.getFullYear() } : { day: null, month: null, year: null });
@@ -1272,7 +1386,6 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const focusSegment = (i) => {
     segmentRefs.current[Math.max(0, Math.min(specs.length - 1, i))]?.focus();
   };
-  const focusSegmentRef = useLatest(focusSegment);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -1281,10 +1394,10 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
       setOpen(false);
     };
     const keyHandler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        setOpen(false);
-        focusSegmentRef.current(0);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     document.addEventListener("mousedown", handler);
     document.addEventListener("keydown", keyHandler);
@@ -1292,7 +1405,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
       document.removeEventListener("mousedown", handler);
       document.removeEventListener("keydown", keyHandler);
     };
-  }, [open, isTopLayer, focusSegmentRef]);
+  }, [open, isTopLayer, returnFocus]);
   const [typedInvalid, setTypedInvalid] = useState(false);
   const commitIfComplete = (next) => {
     if (next.day === null || next.month === null || next.year === null) {
@@ -1378,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;
@@ -1390,6 +1502,9 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const cells = [];
   for (let i = 0; i < firstDay; i++) cells.push(null);
   for (let d = 1; d <= daysInMonth; d++) cells.push(d);
+  while (cells.length % 7) cells.push(null);
+  const weeks = [];
+  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
     label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-[var(--ds-text-primary)] mb-ds-1", children: label }),
     /* @__PURE__ */ jsxs(
@@ -1455,6 +1570,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
           /* @__PURE__ */ jsx(
             "button",
             {
+              ref: buttonRef,
               type: "button",
               "aria-label": "Choose a date",
               "aria-haspopup": "dialog",
@@ -1501,38 +1617,56 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs("div", { style: { padding: "var(--ds-space-2) var(--ds-space-3)" }, children: [
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-ds-0.5 mb-ds-1 tabular-nums", children: DAYS.map((d) => /* @__PURE__ */ jsx("div", { className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, d)) }),
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-ds-0.5 tabular-nums", onMouseLeave: () => setHover(null), children: cells.map((day, i) => {
-                if (day === null) return /* @__PURE__ */ jsx("div", {}, `empty-${i}`);
-                const dateObj = new Date(year, month, day);
-                const isSelected = !!value && isSameDay(dateObj, value);
-                const isOtherEnd = !!otherEnd && isSameDay(dateObj, otherEnd);
-                const isToday2 = isSameDay(dateObj, today);
-                const between = inBand(dateObj);
-                const dis = isDisabledDay(dateObj);
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    disabled: dis,
-                    onClick: () => selectDay(day),
-                    onMouseEnter: () => setHover(dateObj),
-                    "aria-pressed": isSelected,
-                    "aria-label": formatDate(dateObj),
-                    className: cn(
-                      "w-full aspect-square flex items-center justify-center text-xs",
-                      "transition-colors cursor-pointer",
-                      "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-                      isSelected ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold rounded-[var(--ds-radius-sm)]" : isOtherEnd ? "bg-[var(--ds-accent-muted)] text-[var(--ds-accent-subtle-text)] font-semibold rounded-[var(--ds-radius-sm)]" : between ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)] rounded-none" : isToday2 ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-primary)] text-[var(--ds-accent-primary)] font-medium rounded-[var(--ds-radius-sm)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] rounded-[var(--ds-radius-sm)]",
-                      dis && "opacity-disabled cursor-not-allowed hover:bg-transparent"
-                    ),
-                    children: day
-                  },
-                  day
-                );
-              }) })
-            ] }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: gridRef,
+                role: "grid",
+                "aria-label": `${MONTHS[month]} ${year}`,
+                onKeyDown: grid.onKeyDown,
+                className: "flex flex-col gap-ds-0.5 tabular-nums",
+                style: { padding: "var(--ds-space-2) var(--ds-space-3)" },
+                children: [
+                  /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5 mb-ds-0.5", children: DAYS.map((d, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": DAY_NAMES[i], className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, d)) }),
+                  weeks.map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5", onMouseLeave: () => setHover(null), children: week.map((day, i) => {
+                    if (day === null) return /* @__PURE__ */ jsx("div", { role: "gridcell" }, `empty-${i}`);
+                    const dateObj = new Date(year, month, day);
+                    const isSelected = !!value && isSameDay(dateObj, value);
+                    const isOtherEnd = !!otherEnd && isSameDay(dateObj, otherEnd);
+                    const isToday2 = isSameDay(dateObj, today);
+                    const between = inBand(dateObj);
+                    const dis = isDisabledDay(dateObj);
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        role: "gridcell",
+                        "data-grid-key": dayKey(dateObj),
+                        tabIndex: grid.tabIndexOf(dateObj),
+                        "aria-disabled": dis || void 0,
+                        onClick: () => selectDay(day),
+                        onFocus: () => {
+                          if (!isSameDay(dateObj, focusDate)) setFocusDate(dateObj);
+                        },
+                        onMouseEnter: () => setHover(dateObj),
+                        "aria-selected": isSelected,
+                        "aria-current": isToday2 ? "date" : void 0,
+                        "aria-label": formatDate(dateObj),
+                        className: cn(
+                          "w-full aspect-square flex items-center justify-center text-xs",
+                          "transition-colors cursor-pointer",
+                          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                          isSelected ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold rounded-[var(--ds-radius-sm)]" : isOtherEnd ? "bg-[var(--ds-accent-muted)] text-[var(--ds-accent-subtle-text)] font-semibold rounded-[var(--ds-radius-sm)]" : between ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)] rounded-none" : isToday2 ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-primary)] text-[var(--ds-accent-primary)] font-medium rounded-[var(--ds-radius-sm)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] rounded-[var(--ds-radius-sm)]",
+                          dis && "opacity-disabled cursor-not-allowed hover:bg-transparent"
+                        ),
+                        children: day
+                      },
+                      day
+                    );
+                  }) }, w))
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxs(
               "div",
               {
@@ -1547,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"
                     }
@@ -1558,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"
                     }
                   )
@@ -1645,7 +1775,7 @@ function endOfWeek(d, weekStartsOn = 0) {
   end.setHours(23, 59, 59, 999);
   return end;
 }
-function addDays(d, n) {
+function addDays2(d, n) {
   const result = new Date(d);
   result.setDate(result.getDate() + n);
   return result;
@@ -1674,7 +1804,7 @@ function getWeekDays(date, weekStartsOn = 0) {
   const start = startOfWeek(date, weekStartsOn);
   const days = [];
   for (let i = 0; i < 7; i++) {
-    days.push(addDays(start, i));
+    days.push(addDays2(start, i));
   }
   return days;
 }
@@ -1764,11 +1894,11 @@ var DEFAULT_DATE_RANGE_PRESETS = [
   } },
   { label: "Last 7 days", range: () => {
     const t = startOfDay(/* @__PURE__ */ new Date());
-    return { start: addDays(t, -6), end: t };
+    return { start: addDays2(t, -6), end: t };
   } },
   { label: "Last 30 days", range: () => {
     const t = startOfDay(/* @__PURE__ */ new Date());
-    return { start: addDays(t, -29), end: t };
+    return { start: addDays2(t, -29), end: t };
   } },
   { label: "This month", range: () => {
     const t = /* @__PURE__ */ new Date();
@@ -1808,11 +1938,42 @@ function DateRangePicker({
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const today = useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
   const dayNames = getOrderedDayNamesShort(weekStartsOn);
+  const gridRef = useRef(null);
+  const [focusDate, setFocusDate] = useState(() => startOfDay(value.start ?? /* @__PURE__ */ new Date()));
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) {
+      const start = startOfDay(value.start ?? today);
+      setFocusDate(start);
+      setViewDate(new Date(start.getFullYear(), start.getMonth(), 1));
+    }
+  }
+  const showDay = (d) => {
+    setFocusDate(d);
+    const monthIndex = (x) => x.getFullYear() * 12 + x.getMonth();
+    const offset = monthIndex(d) - monthIndex(viewDate);
+    if (offset < 0) setViewDate(new Date(d.getFullYear(), d.getMonth(), 1));
+    else if (offset > 1) setViewDate(new Date(d.getFullYear(), d.getMonth() - 1, 1));
+  };
+  const grid = useGridKeyboard({
+    container: gridRef,
+    active: focusDate,
+    setActive: showDay,
+    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(() => {
-    if (open) requestAnimationFrame(() => focusInitial(panelRef.current));
-  }, [open]);
-  const isTopLayer = useOverlayLayer(open);
-  useCloseOnFocusOut(open, triggerRef, panelRef, () => setOpen(false), isTopLayer);
+    if (!open) return;
+    const raf = requestAnimationFrame(() => focusActiveDay.current());
+    return () => cancelAnimationFrame(raf);
+  }, [open, focusActiveDay]);
   useEffect(() => {
     if (!open) return;
     const onMouse = (e) => {
@@ -1821,10 +1982,10 @@ function DateRangePicker({
       setOpen(false);
     };
     const onKey = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        setOpen(false);
-        triggerRef.current?.focus();
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     document.addEventListener("mousedown", onMouse);
     document.addEventListener("keydown", onKey);
@@ -1832,7 +1993,7 @@ function DateRangePicker({
       document.removeEventListener("mousedown", onMouse);
       document.removeEventListener("keydown", onKey);
     };
-  }, [open, isTopLayer]);
+  }, [open, isTopLayer, returnFocus]);
   const isDisabledDay = (d) => min && d < startOfDay(min) || max && d > startOfDay(max) || false;
   const selectDay = (d) => {
     if (isDisabledDay(d)) return;
@@ -1844,9 +2005,9 @@ function DateRangePicker({
       onChange({ start: d, end: null });
       return;
     }
+    returnFocus();
     onChange({ start: value.start, end: d });
     setOpen(false);
-    triggerRef.current?.focus();
   };
   const previewEnd = value.start && !value.end && hover && hover >= value.start ? hover : null;
   const rangeStart = value.start;
@@ -1908,14 +2069,14 @@ function DateRangePicker({
           children: [
             presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-ds-0.5 p-ds-2 border-r-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] min-w-[140px]", children: presets.map((p) => /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "justify-start", onClick: () => {
               const r = p.range();
+              returnFocus();
               onChange(r);
               setViewDate(r.start ?? /* @__PURE__ */ new Date());
               setOpen(false);
-              triggerRef.current?.focus();
             }, 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()],
                   " ",
@@ -1925,12 +2086,12 @@ 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", { className: "flex gap-ds-4 px-ds-3 py-ds-2", onMouseLeave: () => setHover(null), children: months.map((m) => /* @__PURE__ */ jsxs("div", { className: "w-[224px]", children: [
-                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-ds-0.5 mb-ds-1", children: dayNames.map((d) => /* @__PURE__ */ jsx("div", { className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, d)) }),
-                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-ds-0.5", children: getMonthGrid(m.getFullYear(), m.getMonth(), weekStartsOn).flat().map((d) => {
-                  if (!isSameMonth(d, m)) return /* @__PURE__ */ jsx("div", {}, d.toISOString());
+              /* @__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)) }),
+                getMonthGrid(m.getFullYear(), m.getMonth(), weekStartsOn).map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5", children: week.map((d) => {
+                  if (!isSameMonth(d, m)) return /* @__PURE__ */ jsx("div", { role: "gridcell" }, d.toISOString());
                   const isStart = !!rangeStart && isSameDay2(d, rangeStart);
                   const isEnd = !!rangeEnd && isSameDay2(d, rangeEnd);
                   const between = inRange(d);
@@ -1939,10 +2100,17 @@ function DateRangePicker({
                     "button",
                     {
                       type: "button",
-                      disabled: dis,
+                      role: "gridcell",
+                      "data-grid-key": dayKey(d),
+                      tabIndex: grid.tabIndexOf(d),
+                      "aria-disabled": dis || void 0,
                       onClick: () => selectDay(d),
+                      onFocus: () => {
+                        if (!isSameDay2(d, focusDate)) setFocusDate(d);
+                      },
                       onMouseEnter: () => setHover(d),
-                      "aria-pressed": isStart || isEnd,
+                      "aria-selected": isStart || isEnd || between,
+                      "aria-current": isSameDay2(d, today) ? "date" : void 0,
                       "aria-label": fmt(d),
                       className: cn(
                         "w-full aspect-square flex items-center justify-center text-xs",
@@ -1955,7 +2123,7 @@ function DateRangePicker({
                     },
                     d.toISOString()
                   );
-                }) })
+                }) }, w))
               ] }, `${m.getFullYear()}-${m.getMonth()}`)) }),
               /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center bg-[var(--ds-bg-muted)] border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-br-[var(--ds-radius-md)] px-ds-3 py-ds-2", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)]", children: value.start && !value.end ? "Now pick an end date" : summary ?? "Pick a start date" }),
@@ -1972,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)]",
@@ -2019,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 });
@@ -2030,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) => {
@@ -2070,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(
@@ -2143,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
     )) })
   ] });
 }
@@ -2161,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;
@@ -2219,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",
       {
@@ -2242,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,
@@ -2266,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,
@@ -2365,14 +2723,25 @@ function TimePicker({
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
+  const buttonRef = useRef(null);
   const panelRef = useRef(null);
   const listboxId = useId();
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const parsed = parseTime(value);
   const hours = generateHours(use24Hour);
   const minutes = generateMinutes(minuteStep);
-  const isTopLayer = useOverlayLayer(open);
-  useCloseOnFocusOut(open, triggerRef, panelRef, () => setOpen(false), isTopLayer);
+  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: buttonRef, panel: panelRef, close: () => setOpen(false), tabExits: "edges" });
+  const [columnStop, setColumnStop] = useState({});
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) setColumnStop({});
+  }
+  const stopOf = (column, chosen) => columnStop[column] ?? Math.max(0, chosen);
+  const holdStop = (column, index) => setColumnStop((s) => s[column] === index ? s : { ...s, [column]: index });
+  const chosenHour = hours.findIndex((h) => use24Hour ? h === parseInt(value) : h === parsed.hour);
+  const chosenMinute = minutes.findIndex((m) => m === parsed.minute);
+  const chosenPeriod = parsed.period === "PM" ? 1 : 0;
   useEffect(() => {
     if (!open) return;
     const id2 = requestAnimationFrame(() => {
@@ -2424,7 +2793,6 @@ function TimePicker({
     const el = segmentRefs.current[Math.max(0, Math.min(segmentCount - 1, i))];
     el?.focus();
   };
-  const focusSegmentRef = useLatest(focusSegment);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -2432,10 +2800,10 @@ function TimePicker({
       setOpen(false);
     };
     const keyHandler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        setOpen(false);
-        focusSegmentRef.current(0);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     document.addEventListener("mousedown", handler);
     document.addEventListener("keydown", keyHandler);
@@ -2443,7 +2811,7 @@ function TimePicker({
       document.removeEventListener("mousedown", handler);
       document.removeEventListener("keydown", keyHandler);
     };
-  }, [open, isTopLayer, focusSegmentRef]);
+  }, [open, isTopLayer, returnFocus]);
   const commitIfComplete = (next) => {
     if (next.hour === null || next.minute === null) return;
     let h24 = next.hour;
@@ -2619,6 +2987,7 @@ function TimePicker({
           /* @__PURE__ */ jsx(
             "button",
             {
+              ref: buttonRef,
               type: "button",
               "aria-label": "Choose a time",
               "aria-haspopup": "dialog",
@@ -2651,10 +3020,12 @@ function TimePicker({
           ),
           style: { top: pos.top, left: pos.left },
           children: /* @__PURE__ */ jsxs("div", { className: "inline-flex p-ds-1 gap-ds-1 tabular-nums", children: [
-            /* @__PURE__ */ jsx("div", { "data-column": true, className: "max-h-48 overflow-y-auto w-ds-10", children: hours.map((h) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { "data-column": true, className: "max-h-48 overflow-y-auto w-ds-10", children: hours.map((h, i) => /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
+                tabIndex: i === stopOf("hour", chosenHour) ? 0 : -1,
+                onFocus: () => holdStop("hour", i),
                 "data-selected": use24Hour ? h === parseInt(value) : h === parsed.hour,
                 onMouseDown: (e) => e.preventDefault(),
                 onClick: () => emitChange(h, parsed.minute, parsed.period),
@@ -2668,10 +3039,12 @@ function TimePicker({
               h
             )) }),
             /* @__PURE__ */ jsx("div", { className: "w-px bg-[var(--ds-border-subtle)]" }),
-            /* @__PURE__ */ jsx("div", { "data-column": true, className: "max-h-48 overflow-y-auto w-ds-10", children: minutes.map((m) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { "data-column": true, className: "max-h-48 overflow-y-auto w-ds-10", children: minutes.map((m, i) => /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
+                tabIndex: i === stopOf("minute", chosenMinute) ? 0 : -1,
+                onFocus: () => holdStop("minute", i),
                 "data-selected": m === parsed.minute,
                 onMouseDown: (e) => e.preventDefault(),
                 onClick: () => emitChange(parsed.hour, m, parsed.period),
@@ -2686,10 +3059,12 @@ function TimePicker({
             )) }),
             !use24Hour && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("div", { className: "w-px bg-[var(--ds-border-subtle)]" }),
-              /* @__PURE__ */ jsx("div", { "data-column": true, className: "flex flex-col gap-ds-1 w-ds-10", children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { "data-column": true, className: "flex flex-col gap-ds-1 w-ds-10", children: ["AM", "PM"].map((p, i) => /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
+                  tabIndex: i === stopOf("period", chosenPeriod) ? 0 : -1,
+                  onFocus: () => holdStop("period", i),
                   "data-selected": p === parsed.period,
                   onMouseDown: (e) => e.preventDefault(),
                   onClick: () => emitChange(parsed.hour, parsed.minute, p),
@@ -3016,7 +3391,8 @@ var Tag = forwardRef(function Tag2({
           {
             type: "button",
             onClick: handleRemove,
-            "aria-label": "Remove",
+            "data-tag-remove": "",
+            "aria-label": typeof children === "string" ? `Remove ${children}` : "Remove",
             className: cn(
               "inline-flex items-center justify-center shrink-0",
               "rounded-[var(--ds-radius-sm)]",
@@ -3063,6 +3439,16 @@ function TagInput({
     },
     [value, onChange]
   );
+  const containerRef = useRef(null);
+  const pendingFocus = useRef(null);
+  useLayoutEffect(() => {
+    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, pending.index, inputRef.current);
+  });
   const handleKeyDown = useCallback(
     (e) => {
       if ((e.key === "Enter" || e.key === ",") && input.trim()) {
@@ -3095,7 +3481,10 @@ function TagInput({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      onClick: () => inputRef.current?.focus(),
+      ref: containerRef,
+      onClick: (e) => {
+        if (!(e.target instanceof Element && e.target.closest("button"))) inputRef.current?.focus();
+      },
       className: cn(
         "flex flex-wrap items-center gap-[calc(var(--ds-space-1)*1.5)] min-h-[calc(var(--ds-space-1)*10.5)] px-ds-2 py-[calc(var(--ds-space-1)*1.5)]",
         "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
@@ -3110,10 +3499,13 @@ function TagInput({
         className
       ),
       children: [
-        value.map((tag) => /* @__PURE__ */ jsx(
+        value.map((tag, i) => /* @__PURE__ */ jsx(
           Tag,
           {
-            onRemove: disabled ? void 0 : () => removeTag(tag),
+            onRemove: disabled ? void 0 : () => {
+              pendingFocus.current = { index: i, tag };
+              removeTag(tag);
+            },
             disabled,
             children: tag
           },
@@ -3640,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)]",
@@ -4369,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 });
@@ -4379,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);
@@ -4457,6 +4795,7 @@ function MentionInput({
       e.preventDefault();
       insertMention(filtered[activeIndex]);
     } else if (e.key === "Escape") {
+      e.preventDefault();
       setShowPopup(false);
     }
   };
@@ -4560,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}`,
@@ -4679,21 +5020,57 @@ 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;
+  } : 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();
       onSelectedChange?.(!selected);
     }
+  } : isAction && !disabled ? (e) => {
+    if (e.target !== e.currentTarget) return;
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.currentTarget.click();
+    } else if (e.key === " ") e.preventDefault();
+  } : void 0;
+  const handleKeyUp = isAction && !disabled ? (e) => {
+    if (e.target === e.currentTarget && e.key === " ") {
+      e.preventDefault();
+      e.currentTarget.click();
+    }
   } : void 0;
   const handleCheckableClick = (e) => {
     e.stopPropagation();
     onSelectedChange?.(!selected);
   };
-  const role = selectType === "radio" ? "radio" : selectType === "checkbox" ? "checkbox" : selectType === "toggle" ? "switch" : isSelectable ? "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;
@@ -4701,11 +5078,11 @@ var Card = forwardRef(function Card2({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref,
+      ref: setRoot,
       "data-card": "",
       role,
-      tabIndex: isSelectable ? 0 : void 0,
-      "aria-disabled": isSelectable && 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(
@@ -4713,14 +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 && "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,
+      onClick: holdsControls ? handleCardClick : handleClick,
+      onKeyDown: holdsControls ? void 0 : handleKeyDown,
+      onKeyUp: holdsControls ? void 0 : handleKeyUp,
       ...ariaAttr,
       ...props,
       children: [
@@ -4733,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 === " ") {
@@ -4744,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: [
@@ -4752,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 }) }) })
       ]
     }
   );
@@ -4770,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)]",
@@ -4806,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;
@@ -5278,6 +5680,7 @@ function Table({
       return /* @__PURE__ */ jsxs(
         "div",
         {
+          "data-row": "",
           className: cn(
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
             "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]",
@@ -5830,11 +6233,34 @@ function OverflowPopover({
     offset: 4,
     flip: true
   });
+  const { isTop, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: floatingRef, close: () => setOpen(false), tabExits: "edges" });
+  useEffect(() => {
+    if (!open) return;
+    const raf = requestAnimationFrame(() => focusInitial(floatingRef.current));
+    const onKey = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
+    };
+    const onDown = (e) => {
+      if (!triggerRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onDown);
+    return () => {
+      cancelAnimationFrame(raf);
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onDown);
+    };
+  }, [open, isTop, returnFocus]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         ref: triggerRef,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
         className: "text-2xs text-[var(--ds-accent-primary)] font-medium cursor-pointer hover:underline px-ds-1.5",
         onClick: (e) => {
           e.stopPropagation();
@@ -5852,6 +6278,8 @@ function OverflowPopover({
         "div",
         {
           ref: floatingRef,
+          role: "dialog",
+          "aria-label": date.toLocaleDateString(void 0, { weekday: "long", month: "long", day: "numeric" }),
           className: cn(
             "fixed z-[var(--ds-z-popover)] w-56 max-h-48 overflow-y-auto",
             "bg-[var(--ds-bg-surface-elevated)]",
@@ -6468,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;
@@ -6486,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;
@@ -6499,7 +6932,7 @@ function CompactDayCell({
       document.removeEventListener("keydown", onKey);
       document.removeEventListener("mousedown", onClick);
     };
-  }, [open]);
+  }, [open, isTop]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -6663,10 +7096,18 @@ function MonthDropdown({
     setPrevBrowseSyncKey(browseSyncKey);
     if (open) setBrowseYear(currentDate.getFullYear());
   }
+  const { isTop, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: floatingRef, close: () => setOpen(false), tabExits: "edges" });
   useEffect(() => {
     if (!open) return;
+    const raf = requestAnimationFrame(() => {
+      const panel = floatingRef.current;
+      (panel?.querySelector("[data-current]") ?? panel?.querySelector("button"))?.focus();
+    });
     const onKey = (e) => {
-      if (e.key === "Escape") setOpen(false);
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onClick = (e) => {
       const t = e.target;
@@ -6676,10 +7117,11 @@ function MonthDropdown({
     document.addEventListener("keydown", onKey);
     document.addEventListener("mousedown", onClick);
     return () => {
+      cancelAnimationFrame(raf);
       document.removeEventListener("keydown", onKey);
       document.removeEventListener("mousedown", onClick);
     };
-  }, [open]);
+  }, [open, isTop, returnFocus]);
   const currentMonth = currentDate.getMonth();
   const currentYear = currentDate.getFullYear();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6749,7 +7191,9 @@ function MonthDropdown({
                     "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
                     isActive ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] hover:text-[var(--ds-text-primary)]"
                   ),
+                  "data-current": isActive || void 0,
                   onClick: () => {
+                    returnFocus();
                     onSelect(new Date(browseYear, i, 1));
                     setOpen(false);
                   },
@@ -6786,10 +7230,18 @@ function YearDropdown({
     setPrevRangeSyncKey(rangeSyncKey);
     if (open) setRangeStart(currentYear - 4);
   }
+  const { isTop, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: floatingRef, close: () => setOpen(false), tabExits: "edges" });
   useEffect(() => {
     if (!open) return;
+    const raf = requestAnimationFrame(() => {
+      const panel = floatingRef.current;
+      (panel?.querySelector("[data-current]") ?? panel?.querySelector("button"))?.focus();
+    });
     const onKey = (e) => {
-      if (e.key === "Escape") setOpen(false);
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onClick = (e) => {
       const t = e.target;
@@ -6799,10 +7251,11 @@ function YearDropdown({
     document.addEventListener("keydown", onKey);
     document.addEventListener("mousedown", onClick);
     return () => {
+      cancelAnimationFrame(raf);
       document.removeEventListener("keydown", onKey);
       document.removeEventListener("mousedown", onClick);
     };
-  }, [open]);
+  }, [open, isTop, returnFocus]);
   const years = Array.from({ length: 9 }, (_, i) => rangeStart + i);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
@@ -6871,7 +7324,9 @@ function YearDropdown({
                   "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
                   y === currentYear ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] hover:text-[var(--ds-text-primary)]"
                 ),
+                "data-current": y === currentYear || void 0,
                 onClick: () => {
+                  returnFocus();
                   onSelect(new Date(y, currentDate.getMonth(), 1));
                   setOpen(false);
                 },
@@ -6947,7 +7402,7 @@ function Calendar({
       if (currentView === "month") {
         setCurrentDate(addMonths(currentDate, direction));
       } else if (currentView === "week") {
-        setCurrentDate(addDays(currentDate, direction * 7));
+        setCurrentDate(addDays2(currentDate, direction * 7));
       } else {
         setCurrentDate(new Date(currentDate.getFullYear() + direction, currentDate.getMonth(), 1));
       }
@@ -9600,8 +10055,11 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
   container
 }, ref) {
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [activeIdx, setActiveIdx] = useState(0);
   const ellipsisBtnRef = useRef(null);
   const dropdownRef = useRef(null);
+  const closeDropdown = useCallback(() => setDropdownOpen(false), []);
+  const { isTop, returnFocus } = usePopupFocus(dropdownOpen, { trigger: ellipsisBtnRef, panel: dropdownRef, close: closeDropdown, tabExits: "any" });
   const pos = usePosition(ellipsisBtnRef, dropdownRef, dropdownOpen, { side: "bottom", align: "start", offset: 4, flip: true });
   const effectiveMaxItems = maxItems ? Math.max(maxItems, 2) : void 0;
   const shouldCollapse = effectiveMaxItems && items.length > effectiveMaxItems;
@@ -9614,9 +10072,31 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
       if (ellipsisBtnRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
       setDropdownOpen(false);
     };
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setDropdownOpen(false);
+    };
     document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [dropdownOpen]);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [dropdownOpen, isTop, returnFocus]);
+  useEffect(() => {
+    if (!dropdownOpen) return;
+    const id = requestAnimationFrame(() => dropdownRef.current?.querySelector(`[data-index="${activeIdx}"]`)?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [dropdownOpen, activeIdx]);
+  function onMenuKeyDown(e) {
+    const last = collapsedItems.length - 1;
+    const next = e.key === "ArrowDown" ? activeIdx >= last ? 0 : activeIdx + 1 : e.key === "ArrowUp" ? activeIdx <= 0 ? last : activeIdx - 1 : e.key === "Home" ? 0 : e.key === "End" ? last : null;
+    if (next === null) return;
+    e.preventDefault();
+    setActiveIdx(next);
+  }
   const textClass = size === "sm" ? "text-xs" : "text-sm";
   const gapClass = size === "sm" ? "gap-ds-1" : "gap-ds-1.5";
   const iconSize = size === "sm" ? 12 : 14;
@@ -9681,7 +10161,10 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
           "button",
           {
             ref: ellipsisBtnRef,
-            onClick: () => setDropdownOpen((v) => !v),
+            onClick: () => {
+              if (!dropdownOpen) setActiveIdx(0);
+              setDropdownOpen(!dropdownOpen);
+            },
             "aria-label": "Show hidden breadcrumbs",
             "aria-expanded": dropdownOpen,
             "aria-haspopup": "menu",
@@ -9712,6 +10195,8 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
       {
         ref: dropdownRef,
         role: "menu",
+        "aria-label": "Hidden breadcrumbs",
+        onKeyDown: onMenuKeyDown,
         className: cn(
           "fixed z-[var(--ds-z-popover)] min-w-[160px] max-h-60 overflow-auto",
           "bg-[var(--ds-bg-surface-elevated)]",
@@ -9725,12 +10210,15 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
         children: collapsedItems.map((ci, idx) => /* @__PURE__ */ jsxs(
           "button",
           {
+            "data-index": idx,
             role: "menuitem",
+            tabIndex: idx === activeIdx ? 0 : -1,
             className: cn(
               "flex items-center w-full text-left text-sm cursor-pointer",
               "px-ds-3 py-ds-1.5 transition-colors",
               "text-[var(--ds-text-secondary)]",
               "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]",
+              "focus-visible:outline-none focus-visible:bg-[var(--ds-bg-muted)] focus-visible:text-[var(--ds-text-primary)] focus-visible:shadow-[inset_var(--ds-shadow-focus)]",
               gapClass
             ),
             onClick: () => {
@@ -9788,28 +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 isTopLayer = useOverlayLayer(open);
-  useCloseOnFocusOut(open, triggerRef, floatingRef, () => onOpenChange(false), isTopLayer);
+  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()) {
-        onOpenChange(false);
-        triggerRef.current?.focus();
-      }
+      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 onClick = (e) => {
+    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]);
+  }, [open, onOpenChangeRef, isTopLayer, returnFocus, marked]);
   useEffect(() => {
     if (open) focusInitial(floatingRef.current);
   }, [open]);
@@ -9831,6 +10322,8 @@ 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)]",
             "bg-[var(--ds-bg-surface-elevated)]",
@@ -10045,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: [
@@ -10083,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) => {
@@ -10503,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,
@@ -10510,17 +11082,40 @@ function CompactFlyout({
   onItemClick,
   onClose,
   onMouseEnter,
-  onMouseLeave
+  onMouseLeave,
+  focusIn = false
 }) {
   const pos = useMemo(() => computeCompactFlyoutPos(anchorEl, items.length), [anchorEl, items.length]);
-  const isTopLayer = useOverlayLayer(true);
+  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("a[href]")?.focus());
+    return () => cancelAnimationFrame(raf);
+  }, [focusIn]);
   useEffect(() => {
     function handler(e) {
-      if (e.key === "Escape" && isTopLayer()) onClose();
+      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("a[href]") ?? []);
+        const at = links.indexOf(document.activeElement);
+        const next = links[(at + (e.key === "ArrowDown" ? 1 : -1) + links.length) % links.length];
+        if (next) {
+          e.preventDefault();
+          next.focus();
+        }
+      }
     }
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [onClose, isTopLayer]);
+  }, [onClose, isTopLayer, returnFocus]);
   const content = /* @__PURE__ */ jsx(
     "div",
     {
@@ -10531,7 +11126,8 @@ function CompactFlyout({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          role: "menu",
+          ref: panelRef,
+          id,
           className: cn(
             "min-w-[160px] py-ds-1",
             "bg-[var(--ds-sidebar-bg)] rounded-[var(--ds-radius-md)]",
@@ -10539,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);
@@ -10559,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)) })
           ]
         }
       )
@@ -10908,6 +11502,9 @@ function CompactNavItem({
   onToggleExpand
 }) {
   const [triggerEl, setTriggerEl] = useState(null);
+  const flyoutId = useId();
+  const [keyboardOpen, setKeyboardOpen] = useState(false);
+  if (!isOpen && keyboardOpen) setKeyboardOpen(false);
   const handleMouseEnter = useCallback(() => {
     onCancelClose();
     if (hasChildren && !isOpen) onOpen(flyoutKey);
@@ -10930,7 +11527,15 @@ function CompactNavItem({
         onMouseEnter: !mobile && hasChildren ? handleMouseEnter : void 0,
         onMouseLeave: !mobile && hasChildren && isOpen ? handleMouseLeave : void 0,
         onClick: handleClick,
+        onKeyDown: !mobile && hasChildren ? (e) => {
+          if (e.key !== "ArrowRight") return;
+          e.preventDefault();
+          onCancelClose();
+          setKeyboardOpen(true);
+          onOpen(flyoutKey);
+        } : 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
@@ -10965,6 +11570,7 @@ function CompactNavItem({
     !mobile && isOpen && hasChildren && item.children && triggerEl && /* @__PURE__ */ jsx(
       CompactFlyout,
       {
+        id: flyoutId,
         parentLabel: item.label,
         items: item.children,
         anchorEl: triggerEl,
@@ -10972,7 +11578,8 @@ function CompactNavItem({
         onItemClick,
         onClose,
         onMouseEnter: onCancelClose,
-        onMouseLeave: handleMouseLeave
+        onMouseLeave: handleMouseLeave,
+        focusIn: keyboardOpen
       }
     ),
     mobile && expanded && hasChildren && item.children && /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col gap-ds-1 pb-ds-1", children: item.children.map((child, ci) => /* @__PURE__ */ jsxs(
@@ -11439,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)]",
@@ -11456,9 +12092,10 @@ function computeFloatingPadding(navbarFloating, sidebarFloating, overlapActive,
 var PageHeader = forwardRef(function PageHeader2({
   title,
   description,
+  caption,
   badge,
   breadcrumbs,
-  onBack,
+  onBack: onBackProp,
   actions,
   avatar,
   filters,
@@ -11517,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,
@@ -11554,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,
@@ -11583,6 +12226,9 @@ var PageHeader = forwardRef(function PageHeader2({
         gutter: !insidePaddedColumn,
         title,
         description,
+        caption,
+        focusBack,
+        tabs,
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
@@ -11608,6 +12254,9 @@ var PageHeader = forwardRef(function PageHeader2({
       {
         title,
         description,
+        caption,
+        focusBack,
+        tabs,
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
@@ -11648,6 +12297,9 @@ function floatingContentProps(isFloating, contentMaxWidth, extraClassName) {
 function DefaultHeader({
   title,
   description,
+  caption,
+  focusBack,
+  tabs,
   badge,
   breadcrumbs,
   onBack,
@@ -11670,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"),
@@ -11688,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",
@@ -11697,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
@@ -11706,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 })
         ] })
       ]
     }
@@ -11714,9 +12370,12 @@ function DefaultHeader({
 }
 function MinimalHeader({
   title,
+  caption,
+  focusBack,
   badge,
   breadcrumbs,
   actions,
+  tabs,
   breadcrumbPill,
   breadcrumbSeparator,
   as: Heading = "h1",
@@ -11727,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,
@@ -11765,6 +12430,7 @@ function ColourfulHeader({
   return /* @__PURE__ */ jsxs(
     "header",
     {
+      "data-gs": "page-header",
       ref: headerRef,
       className: cn(
         "relative overflow-hidden w-full",
@@ -11808,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",
@@ -11817,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)]",
@@ -11832,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 })
             ]
           }
         )
@@ -11843,6 +12512,8 @@ function ColourfulHeader({
 function SnappingHeader({
   title,
   description,
+  caption,
+  focusBack,
   badge,
   breadcrumbs,
   onBack,
@@ -11966,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)]",
@@ -12002,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 }),
@@ -12013,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",
             {
@@ -12027,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",
@@ -12038,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];
@@ -12080,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 })
               ]
             }
           );
@@ -12128,6 +12804,8 @@ function SnappingHeader({
 function TabsIntegratedHeader({
   title,
   description,
+  caption,
+  focusBack,
   badge,
   breadcrumbs,
   onBack,
@@ -12144,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",
@@ -12154,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
@@ -12163,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;
@@ -12326,12 +13006,12 @@ function NavMenu({
   className
 }) {
   const [open, setOpen] = useState(false);
-  const isTopLayer = useOverlayLayer(open);
   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), []);
-  useCloseOnFocusOut(open, triggerRef, panelRef, close, isTopLayer);
+  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: panelRef, close, tabExits: "edges" });
   useEffect(() => {
     if (!open) return;
     const id = requestAnimationFrame(() => focusInitial(panelRef.current));
@@ -12354,10 +13034,10 @@ function NavMenu({
       }
     }
     function handleKey(e) {
-      if (e.key === "Escape" && isTopLayer()) {
-        close();
-        triggerRef.current?.focus();
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      close();
     }
     document.addEventListener("mousedown", handleClick);
     document.addEventListener("keydown", handleKey);
@@ -12365,7 +13045,7 @@ function NavMenu({
       document.removeEventListener("mousedown", handleClick);
       document.removeEventListener("keydown", handleKey);
     };
-  }, [open, close, isTopLayer]);
+  }, [open, close, isTopLayer, returnFocus]);
   const hasActiveChild = active || items.some(
     (it) => it.active || it.children?.some((c) => c.active)
   );
@@ -12399,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,
@@ -12419,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",
@@ -12428,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,
@@ -12454,7 +13134,7 @@ function NavMenu({
               },
               item.label
             );
-          })
+          }) })
         }
       ),
       document.body
@@ -12465,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();
@@ -12495,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",
       {
@@ -12510,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) {
@@ -12582,64 +13262,234 @@ function getTypeClasses(type, active) {
       );
   }
 }
-function HamburgerButton({ onClick, open, className: cls }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick,
-      "aria-label": open ? "Close navigation menu" : "Open navigation menu",
-      "aria-expanded": open ?? void 0,
-      className: cn(
-        "flex items-center justify-center shrink-0",
-        "w-10 h-10 rounded-[var(--ds-radius-md)]",
-        "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]",
-        "hover:bg-[var(--ds-bg-muted)] transition-colors",
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        "cursor-pointer",
-        cls
-      ),
-      children: /* @__PURE__ */ jsx(Icon, { name: open ? "close" : "menu", size: 20 })
-    }
-  );
-}
-function flattenLinks(node) {
-  const out = [];
-  Children.forEach(node, (child) => {
-    if (!isValidElement(child)) return;
-    if (child.type === Fragment$1) out.push(...flattenLinks(child.props.children));
-    else out.push(child);
-  });
-  return out;
-}
-var Navbar = forwardRef(function Navbar2({
-  logo,
-  navLinks,
-  search,
-  actions,
-  userMenu,
-  variant = "default",
-  type: typeProp = "tint",
-  align = "left",
-  size,
-  position = "flush",
-  bordered,
-  sticky = true,
-  className,
-  onMenuClick
-}, ref) {
-  const appShell = useAppShell();
-  useLayoutEffect(() => appShell?.registerChrome("navbar", position), [appShell?.registerChrome, position]);
-  const isSmallPhone = appShell?.isMobile && !appShell.isTablet;
-  const headerRef = useRef(null);
-  const navRef = useRef(null);
-  const widthsRef = useRef([]);
-  const moreWidthRef = useRef(88);
-  const [visibleCount, setVisibleCount] = useState(null);
-  const links = useMemo(() => flattenLinks(navLinks), [navLinks]);
+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",
+    {
+      onClick,
+      "aria-label": open ? "Close navigation menu" : "Open navigation menu",
+      "aria-expanded": open ?? void 0,
+      className: cn(
+        "flex items-center justify-center shrink-0",
+        "w-10 h-10 rounded-[var(--ds-radius-md)]",
+        "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]",
+        "hover:bg-[var(--ds-bg-muted)] transition-colors",
+        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        "cursor-pointer",
+        cls
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { name: open ? "close" : "menu", size: 20 })
+    }
+  );
+}
+function flattenLinks(node) {
+  const out = [];
+  Children.forEach(node, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === Fragment$1) out.push(...flattenLinks(child.props.children));
+    else out.push(child);
+  });
+  return out;
+}
+var Navbar = forwardRef(function Navbar2({
+  logo,
+  navLinks,
+  search,
+  actions,
+  userMenu,
+  variant = "default",
+  type: typeProp = "tint",
+  align = "left",
+  size,
+  position = "flush",
+  bordered,
+  sticky = true,
+  className,
+  onMenuClick
+}, ref) {
+  const appShell = useAppShell();
+  useLayoutEffect(() => appShell?.registerChrome("navbar", position), [appShell?.registerChrome, position]);
+  const isSmallPhone = appShell?.isMobile && !appShell.isTablet;
+  const headerRef = useRef(null);
+  const navRef = useRef(null);
+  const widthsRef = useRef([]);
+  const moreWidthRef = useRef(88);
+  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;
@@ -12676,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(() => {
@@ -12708,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";
@@ -12774,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 })
           ] })
         ]
       }
@@ -12801,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,
@@ -12819,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(
@@ -12915,169 +13806,12 @@ 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 triggerRef = useRef(null);
-  const defaultButtonRef = useRef(null);
-  const onCloseRef = useLatest(onClose);
-  const onSubmitRef = useLatest(onSubmit);
-  const isTopLayer = useOverlayLayer(open);
-  useFocusTrap(dialogRef, open, isTopLayer);
-  useEffect(() => {
-    if (!open) return;
-    triggerRef.current = document.activeElement;
-    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();
-      triggerRef.current?.focus();
-    };
-  }, [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);
   const inputRef = useRef(null);
   const listRef = useRef(null);
+  const dialogRef = useRef(null);
   const listboxId = useId();
   const filtered = commands.filter(
     (c) => c.label.toLowerCase().includes(query.toLowerCase()) || c.group?.toLowerCase().includes(query.toLowerCase())
@@ -13106,20 +13840,26 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
     if (open) requestAnimationFrame(() => inputRef.current?.focus());
   }, [open]);
   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();
       cmd.onSelect();
       onOpenChange(false);
     },
-    [onOpenChange]
+    [onOpenChange, returnFocus]
   );
   const handleKeyDown = (e) => {
     if (e.key === "ArrowDown") {
@@ -13150,8 +13890,10 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
       /* @__PURE__ */ jsxs(
         "div",
         {
+          ref: dialogRef,
           role: "dialog",
           "aria-modal": "true",
+          "aria-label": "Command palette",
           className: cn(
             "relative z-10 w-full max-w-lg",
             "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
@@ -13177,6 +13919,7 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
                       "aria-expanded": true,
                       "aria-controls": listboxId,
                       "aria-autocomplete": "list",
+                      "aria-activedescendant": flatFiltered[selectedIdx] ? `${listboxId}-opt-${selectedIdx}` : void 0,
                       value: query,
                       onChange: (e) => setQuery(e.target.value),
                       onKeyDown: handleKeyDown,
@@ -13210,7 +13953,9 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
                     return /* @__PURE__ */ jsxs(
                       "button",
                       {
+                        id: `${listboxId}-opt-${myIdx}`,
                         role: "option",
+                        tabIndex: -1,
                         "aria-selected": myIdx === selectedIdx,
                         onClick: () => handleSelect(cmd),
                         onMouseEnter: () => setSelectedIdx(myIdx),
@@ -13321,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);
@@ -13458,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 });
@@ -13469,8 +14217,7 @@ function NotificationCenter({
   const setFilter = onFilterChange ?? setInternalFilter;
   const unreadCount = notifications.filter((n) => !n.read).length;
   const filteredNotifications = filter === "unread" ? notifications.filter((n) => !n.read) : notifications;
-  const isTopLayer = useOverlayLayer(open);
-  useCloseOnFocusOut(open, triggerRef, panelRef, () => setOpen(false), isTopLayer);
+  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: panelRef, close: () => setOpen(false), tabExits: "edges" });
   useEffect(() => {
     if (!open) return;
     const id = requestAnimationFrame(() => focusInitial(panelRef.current));
@@ -13479,10 +14226,10 @@ function NotificationCenter({
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        setOpen(false);
-        triggerRef.current?.focus();
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onClick = (e) => {
       const target = e.target;
@@ -13495,7 +14242,7 @@ function NotificationCenter({
       document.removeEventListener("keydown", onKey);
       document.removeEventListener("mousedown", onClick);
     };
-  }, [open, setOpen, isTopLayer]);
+  }, [open, setOpen, isTopLayer, returnFocus]);
   const grouped = groupByDate(filteredNotifications);
   if (variant === "page") {
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), children: [
@@ -13604,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)]",
@@ -13622,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)]",
@@ -13768,17 +14519,30 @@ function Tour({ steps, open, onClose, onComplete, container }) {
     if (current > 0) setCurrent((c) => c - 1);
   }, [current]);
   const isTopLayer = useOverlayLayer(open);
+  const nextRef = useRef(null);
+  const titleId = useId();
+  useFocusTrap(popoverRef, open, isTopLayer);
+  useReturnFocus(open, popoverRef);
+  useEffect(() => {
+    if (!open) return;
+    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;
@@ -13820,6 +14584,9 @@ function Tour({ steps, open, onClose, onComplete, container }) {
         "div",
         {
           ref: popoverRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
           className: cn(
             "fixed z-[2] w-[300px]",
             "bg-[var(--ds-bg-surface-elevated)]",
@@ -13832,7 +14599,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
           children: [
             /* @__PURE__ */ jsxs("div", { className: "px-ds-4 pt-ds-4 pb-ds-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-2 mb-ds-1", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: step.title }),
+                /* @__PURE__ */ jsx("h3", { id: titleId, className: "text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: step.title }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -13868,6 +14635,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
                 /* @__PURE__ */ jsx(
                   "button",
                   {
+                    ref: nextRef,
                     onClick: handleNext,
                     className: cn(
                       "px-ds-3 py-ds-1.5 text-xs font-medium rounded-[var(--ds-radius-sm)]",
@@ -14238,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,
     {
@@ -14249,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 ",