gridsmith-ui 0.14.0 → 0.15.0

package/dist/index.js

@@ -1,20 +1,20 @@
-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 { useAppShell, ControlSizeContext, Button, Spinner, OverlayCloseCtx, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, useDirtyGuard, DiscardConfirm, defaultMaxWidth } from './chunk-ATONRIEB.js';
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell } from './chunk-ATONRIEB.js';
 import { Skeleton } from './chunk-M3AARGLI.js';
 export { Skeleton } from './chunk-M3AARGLI.js';
-import { 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 { usePopupFocus, focusInitial, focusAfterRemoval, useOverlayLayer, rovingTabStop, useGridKeyboard, OVERLAY_CLOSE_ATTR, useNonModalDialog, useFocusTrap, useFocusBeforeOpen, rememberFocus, useReturnFocus } from './chunk-VFAKME7Q.js';
+import { Link } from './chunk-LU3YRNES.js';
+export { CodeBlock, Divider, Link } from './chunk-LU3YRNES.js';
+import { Badge } from './chunk-XCSTU6IJ.js';
+export { Badge } from './chunk-XCSTU6IJ.js';
+import { 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';
 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';
@@ -40,14 +40,13 @@ 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()) {
+        returnFocus();
         setOpen(false);
-        triggerRef.current?.focus();
       }
     };
     const onClick = (e) => {
@@ -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;
@@ -511,8 +525,8 @@ function Dropdown({
       if (e.key === "Escape") {
         if (!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);
+  const chipCount = selectedValues.length;
+  useLayoutEffect(() => {
+    const index = pendingChipFocus.current;
+    if (index === null) return;
+    pendingChipFocus.current = null;
+    const chips = Array.from(chipsRef.current?.querySelectorAll("[data-chip-remove]") ?? []);
+    focusAfterRemoval(chips, index, triggerRef.current);
+  }, [chipCount]);
   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 = i;
+                  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,18 @@ 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 === "Tab" && open && moved && filtered[highlightIdx]) {
+        onChange(filtered[highlightIdx].value);
       } else if (e.key === "Escape") {
         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 +897,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 +958,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 +983,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 +1165,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 +1241,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 +1313,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 +1324,47 @@ 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]);
+    if (!open) return;
+    const raf = requestAnimationFrame(() => focusActiveDay.current());
+    return () => cancelAnimationFrame(raf);
+  }, [open, focusActiveDay]);
   const closeAndRefocus = () => {
+    returnFocus();
     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 +1380,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) => {
@@ -1282,8 +1389,8 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
     };
     const keyHandler = (e) => {
       if (e.key === "Escape" && isTopLayer()) {
+        returnFocus();
         setOpen(false);
-        focusSegmentRef.current(0);
       }
     };
     document.addEventListener("mousedown", handler);
@@ -1292,7 +1399,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) {
@@ -1390,6 +1497,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 +1565,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 +1612,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",
               {
@@ -1645,7 +1774,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 +1803,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 +1893,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 +1937,38 @@ 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 { 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) => {
@@ -1822,8 +1978,8 @@ function DateRangePicker({
     };
     const onKey = (e) => {
       if (e.key === "Escape" && isTopLayer()) {
+        returnFocus();
         setOpen(false);
-        triggerRef.current?.focus();
       }
     };
     document.addEventListener("mousedown", onMouse);
@@ -1832,7 +1988,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 +2000,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,10 +2064,10 @@ 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: [
@@ -1927,10 +2083,10 @@ function DateRangePicker({
                 ] }),
                 /* @__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("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 +2095,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 +2118,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" }),
@@ -2365,14 +2528,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 +2598,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) => {
@@ -2433,8 +2606,8 @@ function TimePicker({
     };
     const keyHandler = (e) => {
       if (e.key === "Escape" && isTopLayer()) {
+        returnFocus();
         setOpen(false);
-        focusSegmentRef.current(0);
       }
     };
     document.addEventListener("mousedown", handler);
@@ -2443,7 +2616,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 +2792,7 @@ function TimePicker({
           /* @__PURE__ */ jsx(
             "button",
             {
+              ref: buttonRef,
               type: "button",
               "aria-label": "Choose a time",
               "aria-haspopup": "dialog",
@@ -2651,10 +2825,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 +2844,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 +2864,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 +3196,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 +3244,16 @@ function TagInput({
     },
     [value, onChange]
   );
+  const containerRef = useRef(null);
+  const pendingFocus = useRef(null);
+  const tagCount = value.length;
+  useLayoutEffect(() => {
+    const index = pendingFocus.current;
+    if (index === null) return;
+    pendingFocus.current = null;
+    const buttons = Array.from(containerRef.current?.querySelectorAll("[data-tag-remove]") ?? []);
+    focusAfterRemoval(buttons, index, inputRef.current);
+  }, [tagCount]);
   const handleKeyDown = useCallback(
     (e) => {
       if ((e.key === "Enter" || e.key === ",") && input.trim()) {
@@ -3095,7 +3286,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 +3304,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 = i;
+              removeTag(tag);
+            },
             disabled,
             children: tag
           },
@@ -4683,17 +4880,30 @@ var Card = forwardRef(function Card2({
     onSelectedChange?.(!selected);
     onClick?.(e);
   } : onClick;
+  const isAction = !isSelectable && variant === "interactive" && !!onClick;
   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 role = selectType === "radio" ? "radio" : selectType === "checkbox" ? "checkbox" : selectType === "toggle" ? "switch" : isSelectable || isAction ? "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;
@@ -4704,8 +4914,8 @@ var Card = forwardRef(function Card2({
       ref,
       "data-card": "",
       role,
-      tabIndex: isSelectable ? 0 : void 0,
-      "aria-disabled": isSelectable && disabled ? true : void 0,
+      tabIndex: isSelectable || isAction && !disabled ? 0 : void 0,
+      "aria-disabled": (isSelectable || isAction) && disabled ? true : void 0,
       ...name && selectType === "radio" ? { "data-radio-group": name } : {},
       style: variant === "interactive" ? { ...INTERACTIVE_SCALE_CAP, ...style } : style,
       className: cn(
@@ -4713,7 +4923,7 @@ 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)]",
+        (isSelectable || isAction) && "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",
@@ -4721,6 +4931,7 @@ var Card = forwardRef(function Card2({
       ),
       onClick: handleClick,
       onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
       ...ariaAttr,
       ...props,
       children: [
@@ -5278,6 +5489,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 +6042,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" && isTop()) {
+        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 +6087,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)]",
@@ -6663,10 +6900,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" && isTop()) {
+        returnFocus();
+        setOpen(false);
+      }
     };
     const onClick = (e) => {
       const t = e.target;
@@ -6676,10 +6921,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 +6995,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 +7034,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" && isTop()) {
+        returnFocus();
+        setOpen(false);
+      }
     };
     const onClick = (e) => {
       const t = e.target;
@@ -6799,10 +7055,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 +7128,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 +7206,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 +9859,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 +9876,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" && isTop()) {
+        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 +9965,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 +9999,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 +10014,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,14 +10080,13 @@ 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 { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: floatingRef, close: () => onOpenChange(false), tabExits: "edges" });
   useEffect(() => {
     if (!open) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape" && isTopLayer()) {
+        returnFocus();
         onOpenChange(false);
-        triggerRef.current?.focus();
       }
     };
     const onClick = (e) => {
@@ -9809,7 +10100,7 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
       document.removeEventListener("keydown", onKeyDown);
       document.removeEventListener("mousedown", onClick);
     };
-  }, [open, onOpenChange, isTopLayer]);
+  }, [open, onOpenChange, isTopLayer, returnFocus]);
   useEffect(() => {
     if (open) focusInitial(floatingRef.current);
   }, [open]);
@@ -9831,6 +10122,7 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
         {
           ref: floatingRef,
           "data-gs": "popover",
+          onClick: (e) => e.stopPropagation(),
           className: cn(
             "fixed z-[var(--ds-z-popover)]",
             "bg-[var(--ds-bg-surface-elevated)]",
@@ -10510,17 +10802,39 @@ 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 { isTop: isTopLayer, returnFocus } = usePopupFocus(true, { trigger: anchorRef, panel: panelRef, close: onClose, tabExits: "edges" });
+  useEffect(() => {
+    if (!focusIn) return;
+    const raf = requestAnimationFrame(() => panelRef.current?.querySelector('[role="menuitem"]')?.focus());
+    return () => cancelAnimationFrame(raf);
+  }, [focusIn]);
   useEffect(() => {
     function handler(e) {
-      if (e.key === "Escape" && isTopLayer()) onClose();
+      if (!isTopLayer()) return;
+      const inside = !!panelRef.current?.contains(document.activeElement);
+      if (e.key === "Escape" || e.key === "ArrowLeft" && inside) {
+        e.preventDefault();
+        if (inside) returnFocus();
+        onClose();
+      } else if (inside && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+        const links = Array.from(panelRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
+        const 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 +10845,9 @@ function CompactFlyout({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
+          ref: panelRef,
           role: "menu",
+          "aria-label": parentLabel,
           className: cn(
             "min-w-[160px] py-ds-1",
             "bg-[var(--ds-sidebar-bg)] rounded-[var(--ds-radius-md)]",
@@ -10908,6 +11224,8 @@ function CompactNavItem({
   onToggleExpand
 }) {
   const [triggerEl, setTriggerEl] = useState(null);
+  const [keyboardOpen, setKeyboardOpen] = useState(false);
+  if (!isOpen && keyboardOpen) setKeyboardOpen(false);
   const handleMouseEnter = useCallback(() => {
     onCancelClose();
     if (hasChildren && !isOpen) onOpen(flyoutKey);
@@ -10930,6 +11248,14 @@ 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-haspopup": !mobile && hasChildren ? "menu" : void 0,
         "aria-expanded": hasChildren ? mobile ? expanded : isOpen : 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",
@@ -10972,7 +11298,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(
@@ -12326,12 +12653,11 @@ function NavMenu({
   className
 }) {
   const [open, setOpen] = useState(false);
-  const isTopLayer = useOverlayLayer(open);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
   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));
@@ -12355,8 +12681,8 @@ function NavMenu({
     }
     function handleKey(e) {
       if (e.key === "Escape" && isTopLayer()) {
+        returnFocus();
         close();
-        triggerRef.current?.focus();
       }
     }
     document.addEventListener("mousedown", handleClick);
@@ -12365,7 +12691,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)
   );
@@ -12932,15 +13258,20 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
   const isMobile = useBreakpoint("sm");
   const overlayRef = useRef(null);
   const dialogRef = useRef(null);
-  const triggerRef = 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;
-    triggerRef.current = document.activeElement;
     requestAnimationFrame(() => {
       focusInitial(dialogRef.current, { destructive: variant === "destructive" });
     });
@@ -12960,7 +13291,10 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
     lockBodyScroll();
     return () => {
       unlockBodyScroll();
-      triggerRef.current?.focus();
+      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;
@@ -13078,6 +13412,7 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
   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,6 +13441,8 @@ 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);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -13116,10 +13453,11 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
   }, [open, onOpenChange, isTopLayer]);
   const handleSelect = useCallback(
     (cmd) => {
+      returnFocus();
       cmd.onSelect();
       onOpenChange(false);
     },
-    [onOpenChange]
+    [onOpenChange, returnFocus]
   );
   const handleKeyDown = (e) => {
     if (e.key === "ArrowDown") {
@@ -13150,8 +13488,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 +13517,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 +13551,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),
@@ -13469,8 +13812,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));
@@ -13480,8 +13822,8 @@ function NotificationCenter({
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape" && isTopLayer()) {
+        returnFocus();
         setOpen(false);
-        triggerRef.current?.focus();
       }
     };
     const onClick = (e) => {
@@ -13495,7 +13837,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: [
@@ -13768,6 +14110,15 @@ 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]);
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
@@ -13820,6 +14171,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 +14186,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 +14222,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)]",