@crisp-ui-kit/crisp 0.24.0 → 0.26.0

package/dist/cjs/components/fileupload/fileupload.js

@@ -40,6 +40,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_file_upload_1 = require("@seed-design/react-file-upload");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const fileupload_recipe_1 = require("./fileupload.recipe");
 exports.fileUploadLabels = {
     // Attio's own copy on the record Files pane.
@@ -114,5 +115,17 @@ function FileUpload({ className, labels, "aria-label": ariaLabel, accept, disabl
     // instead means attaching them here; without inputRef, `openFilePicker`
     // finds no input and returns silently, so the dropzone opens nothing.
     inputRef, dropzoneRef, } = api;
-    return ((0, jsx_runtime_1.jsxs)("div", { ...rest, className: (0, fileupload_recipe_1.fileuploadRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [(0, jsx_runtime_1.jsx)("span", { className: "fileupload-title", children: t.title }), (0, jsx_runtime_1.jsx)("span", { className: "fileupload-hint", children: t.hint })] }), (0, jsx_runtime_1.jsx)("input", { ...hiddenInputProps, ref: inputRef, className: "fileupload-input" }), acceptedFileEntries.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "fileupload-list", children: acceptedFileEntries.map((entry) => ((0, jsx_runtime_1.jsxs)("li", { className: "fileupload-item", "data-status": entry.status, children: [(0, jsx_runtime_1.jsx)("span", { className: "fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && ((0, jsx_runtime_1.jsx)("span", { className: "fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: (0, jsx_runtime_1.jsx)("span", { className: "fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), (0, jsx_runtime_1.jsx)("span", { className: "fileupload-item-size", children: formatSize(entry.file.size) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => removeFileEntry(entry.id), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), (0, jsx_runtime_1.jsx)("ul", { className: "fileupload-errors", "aria-live": "polite", children: rejections.map((r) => ((0, jsx_runtime_1.jsx)("li", { className: "fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));
+    // Removing a file destroys the button that was focused; without this, focus
+    // lands on document.body and the user starts Tabbing from the top of the
+    // page (#239). The dropzone is where the list came from, so it is where the
+    // last removal leaves you.
+    // The container is the ROOT, not the list: the list unmounts when the last
+    // file goes, and a container that disappears with the item cannot say where
+    // focus should land next.
+    const rootRef = React.useRef(null);
+    const focusAfterRemoval = (0, core_1.useFocusAfterRemoval)(rootRef, ".fileupload-remove", dropzoneRef);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, ...rest, className: (0, fileupload_recipe_1.fileuploadRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [(0, jsx_runtime_1.jsx)("span", { className: "fileupload-title", children: t.title }), (0, jsx_runtime_1.jsx)("span", { className: "fileupload-hint", children: t.hint })] }), (0, jsx_runtime_1.jsx)("input", { ...hiddenInputProps, ref: inputRef, className: "fileupload-input" }), acceptedFileEntries.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "fileupload-list", children: acceptedFileEntries.map((entry, i) => ((0, jsx_runtime_1.jsxs)("li", { className: "fileupload-item", "data-status": entry.status, children: [(0, jsx_runtime_1.jsx)("span", { className: "fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && ((0, jsx_runtime_1.jsx)("span", { className: "fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: (0, jsx_runtime_1.jsx)("span", { className: "fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), (0, jsx_runtime_1.jsx)("span", { className: "fileupload-item-size", children: formatSize(entry.file.size) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => {
+                                focusAfterRemoval(i);
+                                removeFileEntry(entry.id);
+                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), (0, jsx_runtime_1.jsx)("ul", { className: "fileupload-errors", "aria-live": "polite", children: rejections.map((r) => ((0, jsx_runtime_1.jsx)("li", { className: "fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));
 }

package/dist/cjs/components/radiogroup/radiogroup-keyboard.js

@@ -1,6 +1,40 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRadioGroupKeyboard = useRadioGroupKeyboard;
+const React = __importStar(require("react"));
 /**
  * The WAI-ARIA radio group keyboard model: ←/→/↑/↓ move focus to the next or
  * previous enabled radio, wrapping, and check it on arrival. Home/End jump to
@@ -25,7 +59,39 @@ exports.useRadioGroupKeyboard = useRadioGroupKeyboard;
  * `Segmented` already offered them, and the shared model should be the union
  * rather than quietly dropping behaviour one surface had.
  */
-function useRadioGroupKeyboard({ select, }) {
+function useRadioGroupKeyboard({ select, groupRef: externalRef, }) {
+    /**
+     * The group's one tab stop. `tabIndex={checked ? 0 : -1}` in the markup is
+     * right for every case but the one that matters most: a group with NOTHING
+     * selected gives every radio -1, so Tab skips the whole control and an
+     * unanswered question can never be answered from the keyboard (#237). APG
+     * says the first radio is tabbable when none is checked, and RadioGroup's
+     * own comment said so too — "the selected (or first, when none) radio is
+     * tabbable" — while the code did only the first half.
+     *
+     * Owned here rather than in the markup because the group renders arbitrary
+     * children: only the DOM knows which radio comes first, which is the same
+     * reason the arrow keys read the radios out of the DOM.
+     *
+     * It runs after EVERY render, and sets both ends. React will not undo a
+     * mutation it did not make — when the selection moves, the newly checked
+     * radio changes 0 from React's side while the stale one keeps the 0 written
+     * here — so this has to own the whole row, not just add to it.
+     */
+    const ownRef = React.useRef(null);
+    const groupRef = externalRef ?? ownRef;
+    React.useLayoutEffect(() => {
+        const root = groupRef.current;
+        if (!root)
+            return;
+        const radios = Array.from(root.querySelectorAll('[role="radio"]:not([disabled])'));
+        if (!radios.length)
+            return;
+        const checked = radios.find((r) => r.getAttribute("aria-checked") === "true");
+        const stop = checked ?? radios[0];
+        for (const r of radios)
+            r.tabIndex = r === stop ? 0 : -1;
+    });
     const onKeyDown = (e) => {
         const KEYS = [
             "ArrowDown",
@@ -63,5 +129,5 @@ function useRadioGroupKeyboard({ select, }) {
         if (value !== undefined)
             select(value);
     };
-    return { onKeyDown };
+    return { onKeyDown, groupRef };
 }

package/dist/cjs/components/radiogroup/radiogroup.js

@@ -56,8 +56,8 @@ function RadioGroup({ value, defaultValue, onValueChange, variant = "default", n
             setInternal(v);
         onValueChange?.(v);
     }, [value, onValueChange]);
-    const { onKeyDown } = (0, radiogroup_keyboard_1.useRadioGroupKeyboard)({ select });
-    return ((0, jsx_runtime_1.jsx)(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: (0, jsx_runtime_1.jsx)("div", { role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: (0, radiogroup_recipe_1.radiogroupRecipe)({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
+    const { onKeyDown, groupRef } = (0, radiogroup_keyboard_1.useRadioGroupKeyboard)({ select });
+    return ((0, jsx_runtime_1.jsx)(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: (0, jsx_runtime_1.jsx)("div", { ref: groupRef, role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: (0, radiogroup_recipe_1.radiogroupRecipe)({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
 }
 RadioGroup.displayName = "RadioGroup";
 function Radio({ value, label, children, disabled }) {

package/dist/cjs/components/segmented/segmented.js

@@ -68,7 +68,7 @@ function Segmented({ options, value, defaultValue, onValueChange, "aria-label":
     // crisp's shared radio group model (#200). The per-button handler this
     // replaces closed over its own index, so it selected a neighbour without
     // moving focus and every press after the first recomputed the same step.
-    const { onKeyDown } = (0, radiogroup_1.useRadioGroupKeyboard)({ select });
+    const { onKeyDown } = (0, radiogroup_1.useRadioGroupKeyboard)({ select, groupRef: rootRef });
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, segmented_recipe_1.segmentedRecipe)({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [thumb && ((0, jsx_runtime_1.jsx)("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
                     width: thumb.width,
                     transform: `translateX(${thumb.left}px)`,

package/dist/cjs/components/tabletoolbar/tabletoolbar.js

@@ -39,6 +39,7 @@ exports.TableToolbar = TableToolbar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const select_1 = require("../select");
 const tabletoolbar_recipe_1 = require("./tabletoolbar.recipe");
 const OP_LABELS = {
@@ -186,7 +187,16 @@ function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange,
     };
     const setSortField = (i, key) => putSorts(sorts.map((s, j) => (j === i ? { ...s, key } : s)));
     const setSortDir = (i, dir) => putSorts(sorts.map((s, j) => (j === i ? { ...s, dir } : s)));
-    const removeSort = (i) => putSorts(sorts.filter((_, j) => j !== i));
+    // Removing a sort row destroys the button that was focused. Without this
+    // focus falls to document.body, inside a popover the user then cannot leave
+    // with Escape because nothing in it is focused any more (#239).
+    const sortListRef = React.useRef(null);
+    const addSortRef = React.useRef(null);
+    const focusAfterSortRemoval = (0, core_1.useFocusAfterRemoval)(sortListRef, ".tabletoolbar-sort-remove", addSortRef);
+    const removeSort = (i) => {
+        focusAfterSortRemoval(i);
+        putSorts(sorts.filter((_, j) => j !== i));
+    };
     const addFilter = (key) => {
         const id = `f${Date.now()}${Math.random().toString(36).slice(2, 6)}`;
         putFilters([...filters, { id, key, op: "contains", value: "" }]);
@@ -206,7 +216,7 @@ function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange,
         : sorts.length
             ? `Sorted by ${columns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : "Sort";
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-toolbar", children: [(0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `tabletoolbar-tool${sorts.length ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-menu tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-sort-row", onDragOver: (e) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-toolbar", children: [(0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `tabletoolbar-tool${sorts.length ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { ref: sortListRef, className: "tabletoolbar-menu tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
                                     }, onDrop: () => {
@@ -228,7 +238,7 @@ function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange,
                                                     label: ((0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
                                                     keywords: descendingLabel,
                                                 },
-                                            ], "aria-label": sortDirectionLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "tabletoolbar-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && ((0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-foot", children: (0, jsx_runtime_1.jsxs)("a", { className: "tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `tabletoolbar-tool tabletoolbar-tool--ghost${activeFilters ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
+                                            ], "aria-label": sortDirectionLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { ref: addSortRef, type: "button", className: "tabletoolbar-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && ((0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-foot", children: (0, jsx_runtime_1.jsxs)("a", { className: "tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `tabletoolbar-tool tabletoolbar-tool--ghost${activeFilters ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
                                     ? filterTriggerLabel(activeFilters)
                                     : activeFilters
                                         ? `Filter · ${activeFilters}`

package/dist/cjs/components/tabs/tabs-keyboard.js

@@ -44,6 +44,15 @@ function useTablistKeyboard({ tabs, active, select, listRef, }) {
      * arrows move within. Without this a keyboard user walks through every tab
      * one at a time, and the number of stops grows with the tab set.
      */
-    const tabIndexFor = (value) => (value === active ? 0 : -1);
+    const tabIndexFor = (value) => {
+        // ...and a group with no tab stop at all is worse than one with too many:
+        // a controlled `value` that matches no tab gave every tab -1, so Tab
+        // skipped the whole strip (#237). Fall back to the first enabled tab,
+        // which is where focus would land anyway.
+        const stop = tabs.some((t) => t.value === active && !t.disabled)
+            ? active
+            : tabs.find((t) => !t.disabled)?.value;
+        return value === stop ? 0 : -1;
+    };
     return { onKeyDown, tabIndexFor };
 }

package/dist/cjs/components/toast/toast.js

@@ -38,6 +38,7 @@ exports.useToast = useToast;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const toast_recipe_1 = require("./toast.recipe");
 const ToastContext = React.createContext(null);
 const ICONS = {
@@ -62,6 +63,29 @@ function ToastProvider({ children, duration = 4000, dismissLabel = "Dismiss", re
     const [items, setItems] = React.useState([]);
     const idRef = React.useRef(0);
     const timers = React.useRef(new Map());
+    // Dismissing a toast from the keyboard destroys the button that was focused,
+    // and focus falls to document.body — the page the user was working in is
+    // gone from under them (#239). The next toast takes the focus; when that was
+    // the last one, focus goes back to wherever it was when they stepped into
+    // the stack, which is the only sensible place left.
+    const viewportRef = React.useRef(null);
+    const cameFrom = React.useRef(null);
+    const focusAfterDismiss = (0, core_1.useFocusAfterRemoval)(viewportRef, ".toast-close", cameFrom);
+    // Tracked from the document, not from the viewport's own focus event: a
+    // focusin's relatedTarget is the element LOSING focus, which browsers fill
+    // in and happy-dom does not, and either way it is only right when focus
+    // enters the stack in one hop. What is wanted is simply the last thing
+    // focused outside the stack.
+    React.useEffect(() => {
+        const onFocusIn = (e) => {
+            const target = e.target;
+            if (!target || viewportRef.current?.contains(target))
+                return;
+            cameFrom.current = target;
+        };
+        document.addEventListener("focusin", onFocusIn);
+        return () => document.removeEventListener("focusin", onFocusIn);
+    }, []);
     const dismiss = React.useCallback((id) => {
         setItems((list) => list.filter((t) => t.id !== id));
         const t = timers.current.get(id);
@@ -84,7 +108,10 @@ function ToastProvider({ children, duration = 4000, dismissLabel = "Dismiss", re
         return () => map.forEach(clearTimeout);
     }, []);
     const api = React.useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
-    return ((0, jsx_runtime_1.jsxs)(ToastContext.Provider, { value: api, children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, toast_recipe_1.toastRecipe)(), children: (0, jsx_runtime_1.jsx)("div", { className: "toast-viewport", role: "region", "aria-label": regionLabel, "aria-live": "polite", "aria-atomic": "false", children: items.map((t) => ((0, jsx_runtime_1.jsx)(ToastCard, { item: t, onClose: () => dismiss(t.id), dismissLabel: dismissLabel }, t.id))) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(ToastContext.Provider, { value: api, children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, toast_recipe_1.toastRecipe)(), children: (0, jsx_runtime_1.jsx)("div", { ref: viewportRef, className: "toast-viewport", role: "region", "aria-label": regionLabel, "aria-live": "polite", "aria-atomic": "false", children: items.map((t, i) => ((0, jsx_runtime_1.jsx)(ToastCard, { item: t, onClose: () => {
+                            focusAfterDismiss(i);
+                            dismiss(t.id);
+                        }, dismissLabel: dismissLabel }, t.id))) }) })] }));
 }
 ToastProvider.displayName = "ToastProvider";
 function useToast() {

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
+exports.usePrefersReducedMotion = exports.useFocusAfterRemoval = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
 var cx_1 = require("./cx");
 Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
 var define_1 = require("./define");
@@ -30,5 +30,7 @@ Object.defineProperty(exports, "Primitive", { enumerable: true, get: function ()
 var resolve_1 = require("./resolve");
 Object.defineProperty(exports, "resolveRecipe", { enumerable: true, get: function () { return resolve_1.resolveRecipe; } });
 __exportStar(require("./rtl"), exports);
+var use_focus_after_removal_1 = require("./use-focus-after-removal");
+Object.defineProperty(exports, "useFocusAfterRemoval", { enumerable: true, get: function () { return use_focus_after_removal_1.useFocusAfterRemoval; } });
 var use_prefers_reduced_motion_1 = require("./use-prefers-reduced-motion");
 Object.defineProperty(exports, "usePrefersReducedMotion", { enumerable: true, get: function () { return use_prefers_reduced_motion_1.usePrefersReducedMotion; } });

package/dist/cjs/core/use-focus-after-removal.js

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusAfterRemoval = useFocusAfterRemoval;
+const React = __importStar(require("react"));
+/**
+ * Put focus somewhere deliberate when the control the user just pressed
+ * removes itself.
+ *
+ * Pressing "remove" on a file, a sort row or a toast deletes the button that
+ * was focused, and the browser's answer to "where does focus go now" is
+ * `document.body` — the user's place in the page is gone and Tab starts again
+ * from the top. Nothing throws, nothing is drawn differently, and a mouse
+ * never notices (#239).
+ *
+ * The target is decided by POSITION, not identity: the item that slid into the
+ * removed one's place, else the last one, else a fallback the caller names (the
+ * control that adds items, usually). Identity is no good — the element the
+ * caller would name is the one being destroyed.
+ *
+ * Returns a function to call with the index being removed. The focus move
+ * happens in a layout effect, because at the moment of the click the item is
+ * still on screen: React has not re-rendered yet, and focusing the neighbour
+ * before the removal would just be undone by it.
+ *
+ * `useLayoutEffect` rather than `useEffect` is deliberate and is the one thing
+ * here no test in this repo can hold: under `fireEvent` both flush before the
+ * assertions, so swapping them changes nothing a test can see. In a browser it
+ * is the difference between moving focus before the paint and a frame after
+ * it — a visible ring flicker, and an announcement that arrives late.
+ */
+function useFocusAfterRemoval(containerRef, 
+/** CSS selector matching the per-item control, in document order. */
+selector, 
+/** Where to go when nothing is left. */
+fallbackRef) {
+    const [pending, setPending] = React.useState(null);
+    React.useLayoutEffect(() => {
+        if (pending == null)
+            return;
+        setPending(null);
+        const root = containerRef.current;
+        if (!root)
+            return;
+        const items = Array.from(root.querySelectorAll(selector));
+        const next = items.length > 0
+            ? (items[Math.min(pending, items.length - 1)] ?? null)
+            : (fallbackRef?.current ?? null);
+        next?.focus({ preventScroll: true });
+    }, [pending, containerRef, selector, fallbackRef]);
+    return setPending;
+}

package/dist/esm/components/fileupload/fileupload.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFileUpload, } from "@seed-design/react-file-upload";
 import { X } from "lucide-react";
 import * as React from "react";
+import { useFocusAfterRemoval } from "../../core/index.js";
 import { fileuploadRecipe } from "./fileupload.recipe.js";
 export const fileUploadLabels = {
     // Attio's own copy on the record Files pane.
@@ -77,5 +78,17 @@ export function FileUpload({ className, labels, "aria-label": ariaLabel, accept,
     // instead means attaching them here; without inputRef, `openFilePicker`
     // finds no input and returns silently, so the dropzone opens nothing.
     inputRef, dropzoneRef, } = api;
-    return (_jsxs("div", { ...rest, className: fileuploadRecipe({ className }), children: [_jsxs("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [_jsx("span", { className: "fileupload-title", children: t.title }), _jsx("span", { className: "fileupload-hint", children: t.hint })] }), _jsx("input", { ...hiddenInputProps, ref: inputRef, className: "fileupload-input" }), acceptedFileEntries.length > 0 && (_jsx("ul", { className: "fileupload-list", children: acceptedFileEntries.map((entry) => (_jsxs("li", { className: "fileupload-item", "data-status": entry.status, children: [_jsx("span", { className: "fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && (_jsx("span", { className: "fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: _jsx("span", { className: "fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), _jsx("span", { className: "fileupload-item-size", children: formatSize(entry.file.size) }), _jsx("button", { type: "button", className: "fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => removeFileEntry(entry.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), _jsx("ul", { className: "fileupload-errors", "aria-live": "polite", children: rejections.map((r) => (_jsx("li", { className: "fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));
+    // Removing a file destroys the button that was focused; without this, focus
+    // lands on document.body and the user starts Tabbing from the top of the
+    // page (#239). The dropzone is where the list came from, so it is where the
+    // last removal leaves you.
+    // The container is the ROOT, not the list: the list unmounts when the last
+    // file goes, and a container that disappears with the item cannot say where
+    // focus should land next.
+    const rootRef = React.useRef(null);
+    const focusAfterRemoval = useFocusAfterRemoval(rootRef, ".fileupload-remove", dropzoneRef);
+    return (_jsxs("div", { ref: rootRef, ...rest, className: fileuploadRecipe({ className }), children: [_jsxs("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [_jsx("span", { className: "fileupload-title", children: t.title }), _jsx("span", { className: "fileupload-hint", children: t.hint })] }), _jsx("input", { ...hiddenInputProps, ref: inputRef, className: "fileupload-input" }), acceptedFileEntries.length > 0 && (_jsx("ul", { className: "fileupload-list", children: acceptedFileEntries.map((entry, i) => (_jsxs("li", { className: "fileupload-item", "data-status": entry.status, children: [_jsx("span", { className: "fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && (_jsx("span", { className: "fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: _jsx("span", { className: "fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), _jsx("span", { className: "fileupload-item-size", children: formatSize(entry.file.size) }), _jsx("button", { type: "button", className: "fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => {
+                                focusAfterRemoval(i);
+                                removeFileEntry(entry.id);
+                            }, children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), _jsx("ul", { className: "fileupload-errors", "aria-live": "polite", children: rejections.map((r) => (_jsx("li", { className: "fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));
 }

package/dist/esm/components/radiogroup/radiogroup-keyboard.js

@@ -1,3 +1,4 @@
+import * as React from "react";
 /**
  * The WAI-ARIA radio group keyboard model: ←/→/↑/↓ move focus to the next or
  * previous enabled radio, wrapping, and check it on arrival. Home/End jump to
@@ -22,7 +23,39 @@
  * `Segmented` already offered them, and the shared model should be the union
  * rather than quietly dropping behaviour one surface had.
  */
-export function useRadioGroupKeyboard({ select, }) {
+export function useRadioGroupKeyboard({ select, groupRef: externalRef, }) {
+    /**
+     * The group's one tab stop. `tabIndex={checked ? 0 : -1}` in the markup is
+     * right for every case but the one that matters most: a group with NOTHING
+     * selected gives every radio -1, so Tab skips the whole control and an
+     * unanswered question can never be answered from the keyboard (#237). APG
+     * says the first radio is tabbable when none is checked, and RadioGroup's
+     * own comment said so too — "the selected (or first, when none) radio is
+     * tabbable" — while the code did only the first half.
+     *
+     * Owned here rather than in the markup because the group renders arbitrary
+     * children: only the DOM knows which radio comes first, which is the same
+     * reason the arrow keys read the radios out of the DOM.
+     *
+     * It runs after EVERY render, and sets both ends. React will not undo a
+     * mutation it did not make — when the selection moves, the newly checked
+     * radio changes 0 from React's side while the stale one keeps the 0 written
+     * here — so this has to own the whole row, not just add to it.
+     */
+    const ownRef = React.useRef(null);
+    const groupRef = externalRef ?? ownRef;
+    React.useLayoutEffect(() => {
+        const root = groupRef.current;
+        if (!root)
+            return;
+        const radios = Array.from(root.querySelectorAll('[role="radio"]:not([disabled])'));
+        if (!radios.length)
+            return;
+        const checked = radios.find((r) => r.getAttribute("aria-checked") === "true");
+        const stop = checked ?? radios[0];
+        for (const r of radios)
+            r.tabIndex = r === stop ? 0 : -1;
+    });
     const onKeyDown = (e) => {
         const KEYS = [
             "ArrowDown",
@@ -60,5 +93,5 @@ export function useRadioGroupKeyboard({ select, }) {
         if (value !== undefined)
             select(value);
     };
-    return { onKeyDown };
+    return { onKeyDown, groupRef };
 }

package/dist/esm/components/radiogroup/radiogroup.js

@@ -19,8 +19,8 @@ export function RadioGroup({ value, defaultValue, onValueChange, variant = "defa
             setInternal(v);
         onValueChange?.(v);
     }, [value, onValueChange]);
-    const { onKeyDown } = useRadioGroupKeyboard({ select });
-    return (_jsx(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: _jsx("div", { role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: radiogroupRecipe({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
+    const { onKeyDown, groupRef } = useRadioGroupKeyboard({ select });
+    return (_jsx(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: _jsx("div", { ref: groupRef, role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: radiogroupRecipe({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
 }
 RadioGroup.displayName = "RadioGroup";
 export function Radio({ value, label, children, disabled }) {

package/dist/esm/components/segmented/segmented.js

@@ -32,7 +32,7 @@ export function Segmented({ options, value, defaultValue, onValueChange, "aria-l
     // crisp's shared radio group model (#200). The per-button handler this
     // replaces closed over its own index, so it selected a neighbour without
     // moving focus and every press after the first recomputed the same step.
-    const { onKeyDown } = useRadioGroupKeyboard({ select });
+    const { onKeyDown } = useRadioGroupKeyboard({ select, groupRef: rootRef });
     return (_jsxs("div", { ref: rootRef, className: segmentedRecipe({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [thumb && (_jsx("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
                     width: thumb.width,
                     transform: `translateX(${thumb.left}px)`,

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, Plus, X, } from "lucide-react";
 import * as React from "react";
+import { useFocusAfterRemoval } from "../../core/index.js";
 import { Select } from "../select/index.js";
 import { tabletoolbarRecipe } from "./tabletoolbar.recipe.js";
 const OP_LABELS = {
@@ -148,7 +149,16 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
     };
     const setSortField = (i, key) => putSorts(sorts.map((s, j) => (j === i ? { ...s, key } : s)));
     const setSortDir = (i, dir) => putSorts(sorts.map((s, j) => (j === i ? { ...s, dir } : s)));
-    const removeSort = (i) => putSorts(sorts.filter((_, j) => j !== i));
+    // Removing a sort row destroys the button that was focused. Without this
+    // focus falls to document.body, inside a popover the user then cannot leave
+    // with Escape because nothing in it is focused any more (#239).
+    const sortListRef = React.useRef(null);
+    const addSortRef = React.useRef(null);
+    const focusAfterSortRemoval = useFocusAfterRemoval(sortListRef, ".tabletoolbar-sort-remove", addSortRef);
+    const removeSort = (i) => {
+        focusAfterSortRemoval(i);
+        putSorts(sorts.filter((_, j) => j !== i));
+    };
     const addFilter = (key) => {
         const id = `f${Date.now()}${Math.random().toString(36).slice(2, 6)}`;
         putFilters([...filters, { id, key, op: "contains", value: "" }]);
@@ -168,7 +178,7 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
         : sorts.length
             ? `Sorted by ${columns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : "Sort";
-    return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "tabletoolbar-toolbar", children: [_jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool${sorts.length ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { className: "tabletoolbar-menu tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "tabletoolbar-sort-row", onDragOver: (e) => {
+    return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "tabletoolbar-toolbar", children: [_jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool${sorts.length ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { ref: sortListRef, className: "tabletoolbar-menu tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
                                     }, onDrop: () => {
@@ -190,7 +200,7 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
                                                     label: (_jsxs("span", { className: "tabletoolbar-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
                                                     keywords: descendingLabel,
                                                 },
-                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && (_jsx("div", { className: "tabletoolbar-sort-foot", children: _jsxs("a", { className: "tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] }), _jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool tabletoolbar-tool--ghost${activeFilters ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
+                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "tabletoolbar-sort-addrow", children: _jsxs("button", { ref: addSortRef, type: "button", className: "tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && (_jsx("div", { className: "tabletoolbar-sort-foot", children: _jsxs("a", { className: "tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] }), _jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool tabletoolbar-tool--ghost${activeFilters ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
                                     ? filterTriggerLabel(activeFilters)
                                     : activeFilters
                                         ? `Filter · ${activeFilters}`

package/dist/esm/components/tabs/tabs-keyboard.js

@@ -41,6 +41,15 @@ export function useTablistKeyboard({ tabs, active, select, listRef, }) {
      * arrows move within. Without this a keyboard user walks through every tab
      * one at a time, and the number of stops grows with the tab set.
      */
-    const tabIndexFor = (value) => (value === active ? 0 : -1);
+    const tabIndexFor = (value) => {
+        // ...and a group with no tab stop at all is worse than one with too many:
+        // a controlled `value` that matches no tab gave every tab -1, so Tab
+        // skipped the whole strip (#237). Fall back to the first enabled tab,
+        // which is where focus would land anyway.
+        const stop = tabs.some((t) => t.value === active && !t.disabled)
+            ? active
+            : tabs.find((t) => !t.disabled)?.value;
+        return value === stop ? 0 : -1;
+    };
     return { onKeyDown, tabIndexFor };
 }

package/dist/esm/components/toast/toast.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
 import * as React from "react";
+import { useFocusAfterRemoval } from "../../core/index.js";
 import { toastRecipe } from "./toast.recipe.js";
 const ToastContext = React.createContext(null);
 const ICONS = {
@@ -25,6 +26,29 @@ export function ToastProvider({ children, duration = 4000, dismissLabel = "Dismi
     const [items, setItems] = React.useState([]);
     const idRef = React.useRef(0);
     const timers = React.useRef(new Map());
+    // Dismissing a toast from the keyboard destroys the button that was focused,
+    // and focus falls to document.body — the page the user was working in is
+    // gone from under them (#239). The next toast takes the focus; when that was
+    // the last one, focus goes back to wherever it was when they stepped into
+    // the stack, which is the only sensible place left.
+    const viewportRef = React.useRef(null);
+    const cameFrom = React.useRef(null);
+    const focusAfterDismiss = useFocusAfterRemoval(viewportRef, ".toast-close", cameFrom);
+    // Tracked from the document, not from the viewport's own focus event: a
+    // focusin's relatedTarget is the element LOSING focus, which browsers fill
+    // in and happy-dom does not, and either way it is only right when focus
+    // enters the stack in one hop. What is wanted is simply the last thing
+    // focused outside the stack.
+    React.useEffect(() => {
+        const onFocusIn = (e) => {
+            const target = e.target;
+            if (!target || viewportRef.current?.contains(target))
+                return;
+            cameFrom.current = target;
+        };
+        document.addEventListener("focusin", onFocusIn);
+        return () => document.removeEventListener("focusin", onFocusIn);
+    }, []);
     const dismiss = React.useCallback((id) => {
         setItems((list) => list.filter((t) => t.id !== id));
         const t = timers.current.get(id);
@@ -47,7 +71,10 @@ export function ToastProvider({ children, duration = 4000, dismissLabel = "Dismi
         return () => map.forEach(clearTimeout);
     }, []);
     const api = React.useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
-    return (_jsxs(ToastContext.Provider, { value: api, children: [children, _jsx("div", { className: toastRecipe(), children: _jsx("div", { className: "toast-viewport", role: "region", "aria-label": regionLabel, "aria-live": "polite", "aria-atomic": "false", children: items.map((t) => (_jsx(ToastCard, { item: t, onClose: () => dismiss(t.id), dismissLabel: dismissLabel }, t.id))) }) })] }));
+    return (_jsxs(ToastContext.Provider, { value: api, children: [children, _jsx("div", { className: toastRecipe(), children: _jsx("div", { ref: viewportRef, className: "toast-viewport", role: "region", "aria-label": regionLabel, "aria-live": "polite", "aria-atomic": "false", children: items.map((t, i) => (_jsx(ToastCard, { item: t, onClose: () => {
+                            focusAfterDismiss(i);
+                            dismiss(t.id);
+                        }, dismissLabel: dismissLabel }, t.id))) }) })] }));
 }
 ToastProvider.displayName = "ToastProvider";
 export function useToast() {

package/dist/esm/core/index.js

@@ -6,4 +6,5 @@ export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";
 export { resolveRecipe } from "./resolve.js";
 export * from "./rtl.js";
+export { useFocusAfterRemoval } from "./use-focus-after-removal.js";
 export { usePrefersReducedMotion } from "./use-prefers-reduced-motion.js";

package/dist/esm/core/use-focus-after-removal.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+/**
+ * Put focus somewhere deliberate when the control the user just pressed
+ * removes itself.
+ *
+ * Pressing "remove" on a file, a sort row or a toast deletes the button that
+ * was focused, and the browser's answer to "where does focus go now" is
+ * `document.body` — the user's place in the page is gone and Tab starts again
+ * from the top. Nothing throws, nothing is drawn differently, and a mouse
+ * never notices (#239).
+ *
+ * The target is decided by POSITION, not identity: the item that slid into the
+ * removed one's place, else the last one, else a fallback the caller names (the
+ * control that adds items, usually). Identity is no good — the element the
+ * caller would name is the one being destroyed.
+ *
+ * Returns a function to call with the index being removed. The focus move
+ * happens in a layout effect, because at the moment of the click the item is
+ * still on screen: React has not re-rendered yet, and focusing the neighbour
+ * before the removal would just be undone by it.
+ *
+ * `useLayoutEffect` rather than `useEffect` is deliberate and is the one thing
+ * here no test in this repo can hold: under `fireEvent` both flush before the
+ * assertions, so swapping them changes nothing a test can see. In a browser it
+ * is the difference between moving focus before the paint and a frame after
+ * it — a visible ring flicker, and an announcement that arrives late.
+ */
+export function useFocusAfterRemoval(containerRef, 
+/** CSS selector matching the per-item control, in document order. */
+selector, 
+/** Where to go when nothing is left. */
+fallbackRef) {
+    const [pending, setPending] = React.useState(null);
+    React.useLayoutEffect(() => {
+        if (pending == null)
+            return;
+        setPending(null);
+        const root = containerRef.current;
+        if (!root)
+            return;
+        const items = Array.from(root.querySelectorAll(selector));
+        const next = items.length > 0
+            ? (items[Math.min(pending, items.length - 1)] ?? null)
+            : (fallbackRef?.current ?? null);
+        next?.focus({ preventScroll: true });
+    }, [pending, containerRef, selector, fallbackRef]);
+    return setPending;
+}

package/dist/types/components/radiogroup/radiogroup-keyboard.d.ts

@@ -1,7 +1,13 @@
-import type * as React from "react";
+import * as React from "react";
 export type UseRadioGroupKeyboardOptions = {
     /** Select a radio by its `data-value`. */
     select: (value: string) => void;
+    /**
+     * The element carrying `role="radiogroup"`, when the surface already keeps a
+     * ref to it (Segmented measures its thumb from one). Omit it and the hook
+     * hands one back to attach.
+     */
+    groupRef?: React.RefObject<HTMLElement | null>;
 };
 /**
  * The WAI-ARIA radio group keyboard model: ←/→/↑/↓ move focus to the next or
@@ -27,6 +33,7 @@ export type UseRadioGroupKeyboardOptions = {
  * `Segmented` already offered them, and the shared model should be the union
  * rather than quietly dropping behaviour one surface had.
  */
-export declare function useRadioGroupKeyboard({ select, }: UseRadioGroupKeyboardOptions): {
+export declare function useRadioGroupKeyboard({ select, groupRef: externalRef, }: UseRadioGroupKeyboardOptions): {
     onKeyDown: (e: React.KeyboardEvent) => void;
+    groupRef: React.RefObject<HTMLElement | null>;
 };

package/dist/types/core/index.d.ts

@@ -7,4 +7,5 @@ export { Primitive } from "./primitive";
 export { resolveRecipe } from "./resolve";
 export * from "./rtl";
 export type * from "./types";
+export { useFocusAfterRemoval } from "./use-focus-after-removal";
 export { usePrefersReducedMotion } from "./use-prefers-reduced-motion";

package/dist/types/core/use-focus-after-removal.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+/**
+ * Put focus somewhere deliberate when the control the user just pressed
+ * removes itself.
+ *
+ * Pressing "remove" on a file, a sort row or a toast deletes the button that
+ * was focused, and the browser's answer to "where does focus go now" is
+ * `document.body` — the user's place in the page is gone and Tab starts again
+ * from the top. Nothing throws, nothing is drawn differently, and a mouse
+ * never notices (#239).
+ *
+ * The target is decided by POSITION, not identity: the item that slid into the
+ * removed one's place, else the last one, else a fallback the caller names (the
+ * control that adds items, usually). Identity is no good — the element the
+ * caller would name is the one being destroyed.
+ *
+ * Returns a function to call with the index being removed. The focus move
+ * happens in a layout effect, because at the moment of the click the item is
+ * still on screen: React has not re-rendered yet, and focusing the neighbour
+ * before the removal would just be undone by it.
+ *
+ * `useLayoutEffect` rather than `useEffect` is deliberate and is the one thing
+ * here no test in this repo can hold: under `fireEvent` both flush before the
+ * assertions, so swapping them changes nothing a test can see. In a browser it
+ * is the difference between moving focus before the paint and a frame after
+ * it — a visible ring flicker, and an announcement that arrives late.
+ */
+export declare function useFocusAfterRemoval(containerRef: React.RefObject<HTMLElement | null>, 
+/** CSS selector matching the per-item control, in document order. */
+selector: string, 
+/** Where to go when nothing is left. */
+fallbackRef?: React.RefObject<HTMLElement | null>): (removedIndex: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",