@crisp-ui-kit/crisp 0.23.5 → 0.25.0

package/dist/cjs/components/bulkbar/bulkbar.js

@@ -44,8 +44,8 @@ const bulkbar_recipe_1 = require("./bulkbar.recipe");
  * positioned ancestor when a selection is active; render it conditionally
  * (e.g. `count > 0 && <BulkBar …/>`). Measured from Attio's records table.
  */
-function BulkBar({ count, onClear, countLabel = "selected", children, className, clearLabel = "Clear selection", ...rest }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, bulkbar_recipe_1.bulkbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "bulkbar-bar", role: "status", children: [count != null && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: clearLabel, children: [count, " ", countLabel, (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
+function BulkBar({ count, onClear, countLabel = "selected", countText = (count, label) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [count, " ", label] })), children, className, clearLabel = "Clear selection", ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, bulkbar_recipe_1.bulkbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "bulkbar-bar", children: [count != null && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: clearLabel, children: [countText(count, countLabel), (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
 }
 BulkBar.displayName = "BulkBar";
 /** A styled action button for use inside a `<BulkBar>` (or as a `<Menu>` trigger). */

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/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/product/recordstable/recordstable.js

@@ -130,6 +130,7 @@ exports.recordsTableLabels = {
     searchRecordsPlaceholder: "Search records…",
     searchOptionsPlaceholder: "Search options…",
     selectedCount: "Selected",
+    selectionAnnouncement: (count) => count === 0 ? "Selection cleared" : `${count} selected`,
     delete: "Delete",
     sendEmail: "Send email",
     exportCsv: "Export CSV",
@@ -562,6 +563,18 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
     // selection — controlled if `selectedIds` is provided, else internal
     const [internalSel, setInternalSel] = React.useState(() => new Set());
     const selected = React.useMemo(() => (selectedIds ? new Set(selectedIds) : internalSel), [selectedIds, internalSel]);
+    // The selection is announced from a region that is part of the table and
+    // outlives every selection, because the bulk bar the consumer mounts on the
+    // first pick cannot announce its own arrival (#234). Derived by adjusting
+    // state during render rather than in an effect: it must not fire on mount —
+    // nobody has selected anything yet — and it has to cover a `selectedIds`
+    // change the consumer makes as well as a click in the table.
+    const prevSelectedCount = React.useRef(selected.size);
+    const [selectionAnnouncement, setSelectionAnnouncement] = React.useState("");
+    if (prevSelectedCount.current !== selected.size) {
+        prevSelectedCount.current = selected.size;
+        setSelectionAnnouncement(t.selectionAnnouncement(selected.size));
+    }
     const setSelected = React.useCallback((next) => {
         onSelectionChange?.([...next]);
         if (!selectedIds)
@@ -1094,7 +1107,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                             (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--up", role: "menu", "aria-label": `${col.label} summary`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: aggOptions(col).map((opt) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitemradio", tabIndex: -1, "aria-checked": a === opt, "data-on": a === opt ? "" : undefined, onClick: () => setAggValue(col.key, opt), children: [t.agg[opt], a === opt ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
                                         }), (0, jsx_runtime_1.jsx)("td", { className: "recordstable-sum recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "recordstable-empty", children: (0, jsx_runtime_1.jsx)(emptystate_1.EmptyState, { variant: "page", icon: activeFilters ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
                                 ? "None of your records match the filters that are set."
-                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), (0, jsx_runtime_1.jsx)(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
+                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), (0, jsx_runtime_1.jsx)(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: ctxRef, className: "recordstable-menu recordstable-ctx", role: "menu", "aria-label": t.recordActions, style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, onKeyDown: onCtxKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 exports.defaultColumns = [

package/dist/cjs/product/recordstable/recordstable.recipe.js

@@ -149,6 +149,12 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
     & .recordstable-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
     & .recordstable-bulk-close:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
   
+    /* announced, never drawn */
+    & .recordstable-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+
     ${core_1.rtlFlipCss}
   `,
     variants: {},

package/dist/esm/components/bulkbar/bulkbar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 import * as React from "react";
 import { bulkbarRecipe } from "./bulkbar.recipe.js";
@@ -7,8 +7,8 @@ import { bulkbarRecipe } from "./bulkbar.recipe.js";
  * positioned ancestor when a selection is active; render it conditionally
  * (e.g. `count > 0 && <BulkBar …/>`). Measured from Attio's records table.
  */
-export function BulkBar({ count, onClear, countLabel = "selected", children, className, clearLabel = "Clear selection", ...rest }) {
-    return (_jsx("div", { className: bulkbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "bulkbar-bar", role: "status", children: [count != null && (_jsxs("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: clearLabel, children: [count, " ", countLabel, _jsx(X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
+export function BulkBar({ count, onClear, countLabel = "selected", countText = (count, label) => (_jsxs(_Fragment, { children: [count, " ", label] })), children, className, clearLabel = "Clear selection", ...rest }) {
+    return (_jsx("div", { className: bulkbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "bulkbar-bar", children: [count != null && (_jsxs("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: clearLabel, children: [countText(count, countLabel), _jsx(X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
 }
 BulkBar.displayName = "BulkBar";
 /** A styled action button for use inside a `<BulkBar>` (or as a `<Menu>` trigger). */

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/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/product/recordstable/recordstable.js

@@ -90,6 +90,7 @@ export const recordsTableLabels = {
     searchRecordsPlaceholder: "Search records…",
     searchOptionsPlaceholder: "Search options…",
     selectedCount: "Selected",
+    selectionAnnouncement: (count) => count === 0 ? "Selection cleared" : `${count} selected`,
     delete: "Delete",
     sendEmail: "Send email",
     exportCsv: "Export CSV",
@@ -522,6 +523,18 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
     // selection — controlled if `selectedIds` is provided, else internal
     const [internalSel, setInternalSel] = React.useState(() => new Set());
     const selected = React.useMemo(() => (selectedIds ? new Set(selectedIds) : internalSel), [selectedIds, internalSel]);
+    // The selection is announced from a region that is part of the table and
+    // outlives every selection, because the bulk bar the consumer mounts on the
+    // first pick cannot announce its own arrival (#234). Derived by adjusting
+    // state during render rather than in an effect: it must not fire on mount —
+    // nobody has selected anything yet — and it has to cover a `selectedIds`
+    // change the consumer makes as well as a click in the table.
+    const prevSelectedCount = React.useRef(selected.size);
+    const [selectionAnnouncement, setSelectionAnnouncement] = React.useState("");
+    if (prevSelectedCount.current !== selected.size) {
+        prevSelectedCount.current = selected.size;
+        setSelectionAnnouncement(t.selectionAnnouncement(selected.size));
+    }
     const setSelected = React.useCallback((next) => {
         onSelectionChange?.([...next]);
         if (!selectedIds)
@@ -1054,7 +1067,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                             createPortal(_jsx("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--up", role: "menu", "aria-label": `${col.label} summary`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: aggOptions(col).map((opt) => (_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitemradio", tabIndex: -1, "aria-checked": a === opt, "data-on": a === opt ? "" : undefined, onClick: () => setAggValue(col.key, opt), children: [t.agg[opt], a === opt ? (_jsx(Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
                                         }), _jsx("td", { className: "recordstable-sum recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? (_jsx("div", { className: "recordstable-empty", children: _jsx(EmptyState, { variant: "page", icon: activeFilters ? (_jsx(ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : (_jsx(Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
                                 ? "None of your records match the filters that are set."
-                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : (_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : (_jsxs("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), _jsxs(Menu, { align: "end", "aria-label": t.moreActions, trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), _jsx(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
+                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : (_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : (_jsxs("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), _jsx("div", { className: "recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), _jsxs(Menu, { align: "end", "aria-label": t.moreActions, trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), _jsx(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
                 createPortal(_jsxs("div", { ref: ctxRef, className: "recordstable-menu recordstable-ctx", role: "menu", "aria-label": t.recordActions, style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, onKeyDown: onCtxKeyDown, children: [_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [_jsx(Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [_jsx(CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [_jsx(Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), _jsxs("button", { type: "button", className: "recordstable-menu-item recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [_jsx(Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 export const defaultColumns = [

package/dist/esm/product/recordstable/recordstable.recipe.js

@@ -146,6 +146,12 @@ ${toolbarChromeBody("recordstable")}
     & .recordstable-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted}; cursor: pointer; }
     & .recordstable-bulk-close:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
   
+    /* announced, never drawn */
+    & .recordstable-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+
     ${rtlFlipCss}
   `,
     variants: {},

package/dist/recordstable.css

@@ -201,6 +201,12 @@
     & .recordstable-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); cursor: pointer; }
     & .recordstable-bulk-close:hover { background: var(--bg-raised); color: var(--fg-primary); }
   
+    /* announced, never drawn */
+    & .recordstable-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
   
 }

package/dist/styles.css

@@ -2603,6 +2603,12 @@
     & .recordstable-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); cursor: pointer; }
     & .recordstable-bulk-close:hover { background: var(--bg-raised); color: var(--fg-primary); }
   
+    /* announced, never drawn */
+    & .recordstable-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
   
 }

package/dist/types/components/bulkbar/bulkbar.d.ts

@@ -6,6 +6,14 @@ export type BulkBarProps = Omit<React.ComponentPropsWithoutRef<"div">, "children
     onClear?: () => void;
     /** Word after the count in the pill (default "selected"). */
     countLabel?: string;
+    /**
+     * The whole pill line, given the count and `countLabel`. A formatter,
+     * because "3 selected" is a sentence with a hole in it and the count does
+     * not sit in the same place in every language. Defaults to
+     * `{count} {countLabel}`, so a consumer who only wants the word keeps
+     * passing `countLabel`.
+     */
+    countText?: (count: number, countLabel: string) => React.ReactNode;
     /** title on the count pill's clear (✕) control (default "Clear selection"). */
     clearLabel?: string;
     /** Action buttons — usually `<BulkBarButton>`s and a `<Menu>` overflow. */
@@ -17,7 +25,7 @@ export type BulkBarProps = Omit<React.ComponentPropsWithoutRef<"div">, "children
  * positioned ancestor when a selection is active; render it conditionally
  * (e.g. `count > 0 && <BulkBar …/>`). Measured from Attio's records table.
  */
-export declare function BulkBar({ count, onClear, countLabel, children, className, clearLabel, ...rest }: BulkBarProps): React.JSX.Element;
+export declare function BulkBar({ count, onClear, countLabel, countText, children, className, clearLabel, ...rest }: BulkBarProps): React.JSX.Element;
 export declare namespace BulkBar {
     var displayName: string;
 }

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/product/recordstable/recordstable.d.ts

@@ -152,6 +152,14 @@ export type RecordsTableLabels = {
     searchOptionsPlaceholder: string;
     /** Prefix on the bulk bar's selected count. */
     selectedCount: string;
+    /**
+     * Announced when the selection changes. A formatter, not a string: the
+     * count moves within the sentence between languages. Return "" to say
+     * nothing. The bulk bar cannot carry this itself — the consumer mounts it
+     * when the first row is picked, so its live region would be created by the
+     * very change it should announce (#234).
+     */
+    selectionAnnouncement: (count: number) => string;
     delete: string;
     sendEmail: string;
     exportCsv: string;

package/package.json

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