@crisp-ui-kit/crisp 0.11.0 → 0.13.0

package/dist/board.css

@@ -14,6 +14,13 @@
     & .board-card { display: flex; flex-direction: column; gap: var(--space-2); box-sizing: border-box; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle), 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
     & .board-card:active { cursor: grabbing; }
     & .board-card[data-dragging] { opacity: 0.4; }
+    & .board-card:focus { outline: none; }
+    & .board-card:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
+    /* announced, never drawn */
+    & .board-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/cjs/product/board/board.js

@@ -43,36 +43,81 @@ const board_recipe_1 = require("./board.recipe");
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from Attio's Deals pipeline.
  */
-function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", className, ...rest }) {
+function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", getCardLabel, announceMove = (column, card) => card ? `${card} moved to ${column}` : `Moved to ${column}`, className, ...rest }) {
     const [dragId, setDragId] = React.useState(null);
     const [overCol, setOverCol] = React.useState(null);
+    const [announcement, setAnnouncement] = React.useState("");
+    // the card a keyboard move just sent to another column; React unmounts and
+    // remounts it under the new parent, so focus has to be put back by hand
+    const [refocusId, setRefocusId] = React.useState(null);
+    const rootRef = React.useRef(null);
     const move = (cardId, toColumn) => {
         const card = cards.find((c) => c.id === cardId);
         if (!card || card.columnId === toColumn)
             return;
         onCardsChange?.(cards.map((c) => (c.id === cardId ? { ...c, columnId: toColumn } : c)));
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, board_recipe_1.boardRecipe)({ className }), ...rest, children: columns.map((col) => {
-            const colCards = cards.filter((c) => c.columnId === col.id);
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
-                    if (!dragId)
-                        return;
-                    e.preventDefault();
-                    setOverCol(col.id);
-                }, onDragLeave: (e) => {
-                    if (!e.currentTarget.contains(e.relatedTarget)) {
-                        setOverCol((v) => (v === col.id ? null : v));
-                    }
-                }, onDrop: (e) => {
-                    e.preventDefault();
-                    if (dragId)
-                        move(dragId, col.id);
-                    setDragId(null);
-                    setOverCol(null);
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "board-col-header", children: [col.accent && ((0, jsx_runtime_1.jsx)("span", { className: "board-col-dot", style: { background: col.accent } })), (0, jsx_runtime_1.jsx)("span", { className: "board-col-title", children: col.title }), (0, jsx_runtime_1.jsx)("span", { className: "board-col-count", children: colCards.length }), onNewCard && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "board-col-body", children: [onNewCard && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => ((0, jsx_runtime_1.jsx)("div", { className: "board-card", draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
-                                    setDragId(null);
-                                    setOverCol(null);
-                                }, children: renderCard(card) }, card.id)))] })] }, col.id));
-        }) }));
+    React.useEffect(() => {
+        if (!refocusId)
+            return;
+        rootRef.current
+            ?.querySelector(`[data-card-id="${CSS.escape(refocusId)}"]`)
+            ?.focus();
+        setRefocusId(null);
+    }, [refocusId]);
+    /**
+     * Native HTML5 drag-and-drop is pointer-only by specification, so the board's
+     * primary action needs its own key model or it has none at all.
+     *
+     * Ctrl/Cmd + Left/Right rather than plain arrows: a screen reader owns the
+     * bare arrow keys in browse mode, and a board scrolls horizontally, so plain
+     * arrows on a focused card would fight both.
+     */
+    const moveByKey = (card, delta) => {
+        const from = columns.findIndex((c) => c.id === card.columnId);
+        const to = columns[from + delta];
+        if (from < 0 || !to)
+            return false;
+        move(card.id, to.id);
+        setAnnouncement(announceMove(to.title, getCardLabel?.(card)));
+        setRefocusId(card.id);
+        return true;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, board_recipe_1.boardRecipe)({ className }), ...rest, children: [columns.map((col) => {
+                const colCards = cards.filter((c) => c.columnId === col.id);
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
+                        if (!dragId)
+                            return;
+                        e.preventDefault();
+                        setOverCol(col.id);
+                    }, onDragLeave: (e) => {
+                        if (!e.currentTarget.contains(e.relatedTarget)) {
+                            setOverCol((v) => (v === col.id ? null : v));
+                        }
+                    }, onDrop: (e) => {
+                        e.preventDefault();
+                        if (dragId)
+                            move(dragId, col.id);
+                        setDragId(null);
+                        setOverCol(null);
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "board-col-header", children: [col.accent && ((0, jsx_runtime_1.jsx)("span", { className: "board-col-dot", style: { background: col.accent } })), (0, jsx_runtime_1.jsx)("span", { className: "board-col-title", children: col.title }), (0, jsx_runtime_1.jsx)("span", { className: "board-col-count", children: colCards.length }), onNewCard && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => ((0, jsx_runtime_1.jsx)("div", { className: "board-card", role: "listitem", 
+                                    // biome-ignore lint/a11y/noNoninteractiveTabindex: the rule assumes a listitem cannot be operated. This one carries the board's only keyboard path to move a card, so it has to be reachable by Tab
+                                    tabIndex: 0, "aria-label": getCardLabel?.(card), "data-card-id": card.id, draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
+                                        setDragId(null);
+                                        setOverCol(null);
+                                    }, onKeyDown: (e) => {
+                                        if (!(e.ctrlKey || e.metaKey))
+                                            return;
+                                        const delta = e.key === "ArrowLeft"
+                                            ? -1
+                                            : e.key === "ArrowRight"
+                                                ? 1
+                                                : 0;
+                                        // only swallow the key when the move actually happens, so
+                                        // Ctrl+Right at the last column still reaches the browser
+                                        if (delta && moveByKey(card, delta))
+                                            e.preventDefault();
+                                    }, children: renderCard(card) }, card.id)))] })] }, col.id));
+            }), (0, jsx_runtime_1.jsx)("div", { className: "board-live", role: "status", "aria-live": "polite", children: announcement })] }));
 }
 Board.displayName = "Board";

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

@@ -22,7 +22,14 @@ const config = (0, core_1.defineRecipe)({
     & .board-newcard:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent); color: ${tokens_1.contract.fgPrimary}; }
     & .board-card { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}, 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
     & .board-card:active { cursor: grabbing; }
-    & .board-card[data-dragging] { opacity: 0.4; }`,
+    & .board-card[data-dragging] { opacity: 0.4; }
+    & .board-card:focus { outline: none; }
+    & .board-card:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
+    /* announced, never drawn */
+    & .board-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/product/richtext/richtext.js

@@ -45,7 +45,7 @@ const exec = (cmd, value) => document.execCommand(cmd, false, value);
  * that appears over a text selection. Built on contentEditable, dependency-free.
  * Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.
  */
-function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", }) {
+function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", linkPromptLabel = "Link URL", }) {
     const titleRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const [bar, setBar] = React.useState(null);
@@ -128,13 +128,19 @@ function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder
         run("formatBlock", blockTag() === tag ? "p" : tag);
     };
     const addLink = () => {
-        const url = window.prompt("Link URL");
+        const url = window.prompt(linkPromptLabel);
         if (url)
             run("createLink", url);
     };
     // mousedown on the toolbar must not clear the selection
     const keepSel = (e) => e.preventDefault();
-    const tool = (key, label, icon, onClick) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "rte-tool", "aria-label": label, "aria-pressed": !!active[key], "data-active": active[key] ? "" : undefined, onMouseDown: keepSel, onClick: onClick, children: icon }));
+    /**
+     * `toggles` is false for a tool that performs an action rather than carrying
+     * a state. Link opens a prompt and has no "on" — giving it `aria-pressed`
+     * announces an un-pressed toggle that can never be pressed, which tells a
+     * screen-reader user there is a state here that does not exist.
+     */
+    const tool = (key, label, icon, onClick, toggles = true) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "rte-tool", "aria-label": label, "aria-pressed": toggles ? !!active[key] : undefined, "data-active": active[key] ? "" : undefined, onMouseDown: keepSel, onClick: onClick, children: icon }));
     const ic = { size: 15, strokeWidth: 2 };
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, richtext_recipe_1.richtextRecipe)({ className }), children: [(0, jsx_runtime_1.jsx)("div", { ref: titleRef, className: "rte-title", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-label": titleLabel, "data-placeholder": titlePlaceholder, onInput: () => {
                     syncEmpty(titleRef.current);
@@ -142,6 +148,6 @@ function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder
                 } }), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: "rte-body", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-multiline": "true", "aria-label": bodyLabel, "data-placeholder": placeholder, onInput: () => {
                     syncEmpty(bodyRef.current);
                     emit();
-                }, onMouseUp: updateBar, onKeyUp: updateBar }), bar && ((0, jsx_runtime_1.jsxs)("div", { className: "rte-toolbar", style: { left: bar.x, top: bar.y }, children: [tool("bold", "Bold", (0, jsx_runtime_1.jsx)(lucide_react_1.Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", (0, jsx_runtime_1.jsx)(lucide_react_1.Italic, { ...ic }), () => run("italic")), tool("underline", "Underline", (0, jsx_runtime_1.jsx)(lucide_react_1.Underline, { ...ic }), () => run("underline")), tool("strikeThrough", "Strikethrough", (0, jsx_runtime_1.jsx)(lucide_react_1.Strikethrough, { ...ic }), () => run("strikeThrough")), tool("link", "Link", (0, jsx_runtime_1.jsx)(lucide_react_1.Link2, { ...ic }), addLink), (0, jsx_runtime_1.jsx)("span", { className: "rte-tool-sep" }), tool("h1", "Heading 1", (0, jsx_runtime_1.jsx)(lucide_react_1.Heading1, { ...ic }), () => toggleBlock("h1")), tool("h2", "Heading 2", (0, jsx_runtime_1.jsx)(lucide_react_1.Heading2, { ...ic }), () => toggleBlock("h2")), tool("ul", "Bullet list", (0, jsx_runtime_1.jsx)(lucide_react_1.List, { ...ic }), () => run("insertUnorderedList")), tool("ol", "Numbered list", (0, jsx_runtime_1.jsx)(lucide_react_1.ListOrdered, { ...ic }), () => run("insertOrderedList")), tool("blockquote", "Quote", (0, jsx_runtime_1.jsx)(lucide_react_1.Quote, { ...ic }), () => toggleBlock("blockquote"))] }))] }));
+                }, onMouseUp: updateBar, onKeyUp: updateBar }), bar && ((0, jsx_runtime_1.jsxs)("div", { className: "rte-toolbar", style: { left: bar.x, top: bar.y }, children: [tool("bold", "Bold", (0, jsx_runtime_1.jsx)(lucide_react_1.Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", (0, jsx_runtime_1.jsx)(lucide_react_1.Italic, { ...ic }), () => run("italic")), tool("underline", "Underline", (0, jsx_runtime_1.jsx)(lucide_react_1.Underline, { ...ic }), () => run("underline")), tool("strikeThrough", "Strikethrough", (0, jsx_runtime_1.jsx)(lucide_react_1.Strikethrough, { ...ic }), () => run("strikeThrough")), tool("link", "Link", (0, jsx_runtime_1.jsx)(lucide_react_1.Link2, { ...ic }), addLink, false), (0, jsx_runtime_1.jsx)("span", { className: "rte-tool-sep" }), tool("h1", "Heading 1", (0, jsx_runtime_1.jsx)(lucide_react_1.Heading1, { ...ic }), () => toggleBlock("h1")), tool("h2", "Heading 2", (0, jsx_runtime_1.jsx)(lucide_react_1.Heading2, { ...ic }), () => toggleBlock("h2")), tool("ul", "Bullet list", (0, jsx_runtime_1.jsx)(lucide_react_1.List, { ...ic }), () => run("insertUnorderedList")), tool("ol", "Numbered list", (0, jsx_runtime_1.jsx)(lucide_react_1.ListOrdered, { ...ic }), () => run("insertOrderedList")), tool("blockquote", "Quote", (0, jsx_runtime_1.jsx)(lucide_react_1.Quote, { ...ic }), () => toggleBlock("blockquote"))] }))] }));
 }
 RichTextEditor.displayName = "RichTextEditor";

package/dist/esm/product/board/board.js

@@ -7,36 +7,81 @@ import { boardRecipe } from "./board.recipe.js";
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from Attio's Deals pipeline.
  */
-export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", className, ...rest }) {
+export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", getCardLabel, announceMove = (column, card) => card ? `${card} moved to ${column}` : `Moved to ${column}`, className, ...rest }) {
     const [dragId, setDragId] = React.useState(null);
     const [overCol, setOverCol] = React.useState(null);
+    const [announcement, setAnnouncement] = React.useState("");
+    // the card a keyboard move just sent to another column; React unmounts and
+    // remounts it under the new parent, so focus has to be put back by hand
+    const [refocusId, setRefocusId] = React.useState(null);
+    const rootRef = React.useRef(null);
     const move = (cardId, toColumn) => {
         const card = cards.find((c) => c.id === cardId);
         if (!card || card.columnId === toColumn)
             return;
         onCardsChange?.(cards.map((c) => (c.id === cardId ? { ...c, columnId: toColumn } : c)));
     };
-    return (_jsx("div", { className: boardRecipe({ className }), ...rest, children: columns.map((col) => {
-            const colCards = cards.filter((c) => c.columnId === col.id);
-            return (_jsxs("div", { className: "board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
-                    if (!dragId)
-                        return;
-                    e.preventDefault();
-                    setOverCol(col.id);
-                }, onDragLeave: (e) => {
-                    if (!e.currentTarget.contains(e.relatedTarget)) {
-                        setOverCol((v) => (v === col.id ? null : v));
-                    }
-                }, onDrop: (e) => {
-                    e.preventDefault();
-                    if (dragId)
-                        move(dragId, col.id);
-                    setDragId(null);
-                    setOverCol(null);
-                }, children: [_jsxs("div", { className: "board-col-header", children: [col.accent && (_jsx("span", { className: "board-col-dot", style: { background: col.accent } })), _jsx("span", { className: "board-col-title", children: col.title }), _jsx("span", { className: "board-col-count", children: colCards.length }), onNewCard && (_jsx("button", { type: "button", className: "board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), _jsxs("div", { className: "board-col-body", children: [onNewCard && (_jsxs("button", { type: "button", className: "board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => (_jsx("div", { className: "board-card", draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
-                                    setDragId(null);
-                                    setOverCol(null);
-                                }, children: renderCard(card) }, card.id)))] })] }, col.id));
-        }) }));
+    React.useEffect(() => {
+        if (!refocusId)
+            return;
+        rootRef.current
+            ?.querySelector(`[data-card-id="${CSS.escape(refocusId)}"]`)
+            ?.focus();
+        setRefocusId(null);
+    }, [refocusId]);
+    /**
+     * Native HTML5 drag-and-drop is pointer-only by specification, so the board's
+     * primary action needs its own key model or it has none at all.
+     *
+     * Ctrl/Cmd + Left/Right rather than plain arrows: a screen reader owns the
+     * bare arrow keys in browse mode, and a board scrolls horizontally, so plain
+     * arrows on a focused card would fight both.
+     */
+    const moveByKey = (card, delta) => {
+        const from = columns.findIndex((c) => c.id === card.columnId);
+        const to = columns[from + delta];
+        if (from < 0 || !to)
+            return false;
+        move(card.id, to.id);
+        setAnnouncement(announceMove(to.title, getCardLabel?.(card)));
+        setRefocusId(card.id);
+        return true;
+    };
+    return (_jsxs("div", { ref: rootRef, className: boardRecipe({ className }), ...rest, children: [columns.map((col) => {
+                const colCards = cards.filter((c) => c.columnId === col.id);
+                return (_jsxs("div", { className: "board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
+                        if (!dragId)
+                            return;
+                        e.preventDefault();
+                        setOverCol(col.id);
+                    }, onDragLeave: (e) => {
+                        if (!e.currentTarget.contains(e.relatedTarget)) {
+                            setOverCol((v) => (v === col.id ? null : v));
+                        }
+                    }, onDrop: (e) => {
+                        e.preventDefault();
+                        if (dragId)
+                            move(dragId, col.id);
+                        setDragId(null);
+                        setOverCol(null);
+                    }, children: [_jsxs("div", { className: "board-col-header", children: [col.accent && (_jsx("span", { className: "board-col-dot", style: { background: col.accent } })), _jsx("span", { className: "board-col-title", children: col.title }), _jsx("span", { className: "board-col-count", children: colCards.length }), onNewCard && (_jsx("button", { type: "button", className: "board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), _jsxs("div", { className: "board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && (_jsxs("button", { type: "button", className: "board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => (_jsx("div", { className: "board-card", role: "listitem", 
+                                    // biome-ignore lint/a11y/noNoninteractiveTabindex: the rule assumes a listitem cannot be operated. This one carries the board's only keyboard path to move a card, so it has to be reachable by Tab
+                                    tabIndex: 0, "aria-label": getCardLabel?.(card), "data-card-id": card.id, draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
+                                        setDragId(null);
+                                        setOverCol(null);
+                                    }, onKeyDown: (e) => {
+                                        if (!(e.ctrlKey || e.metaKey))
+                                            return;
+                                        const delta = e.key === "ArrowLeft"
+                                            ? -1
+                                            : e.key === "ArrowRight"
+                                                ? 1
+                                                : 0;
+                                        // only swallow the key when the move actually happens, so
+                                        // Ctrl+Right at the last column still reaches the browser
+                                        if (delta && moveByKey(card, delta))
+                                            e.preventDefault();
+                                    }, children: renderCard(card) }, card.id)))] })] }, col.id));
+            }), _jsx("div", { className: "board-live", role: "status", "aria-live": "polite", children: announcement })] }));
 }
 Board.displayName = "Board";

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

@@ -19,7 +19,14 @@ const config = defineRecipe({
     & .board-newcard:hover { background: color-mix(in srgb, ${c.fgPrimary} 7%, transparent); color: ${c.fgPrimary}; }
     & .board-card { display: flex; flex-direction: column; gap: ${c.space["2"]}; box-sizing: border-box; padding: ${c.space["2.5"]} ${c.space["3"]}; border-radius: ${c.radius.lg}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}, 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
     & .board-card:active { cursor: grabbing; }
-    & .board-card[data-dragging] { opacity: 0.4; }`,
+    & .board-card[data-dragging] { opacity: 0.4; }
+    & .board-card:focus { outline: none; }
+    & .board-card:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+    /* announced, never drawn */
+    & .board-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/richtext/richtext.js

@@ -9,7 +9,7 @@ const exec = (cmd, value) => document.execCommand(cmd, false, value);
  * that appears over a text selection. Built on contentEditable, dependency-free.
  * Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.
  */
-export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", }) {
+export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", linkPromptLabel = "Link URL", }) {
     const titleRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const [bar, setBar] = React.useState(null);
@@ -92,13 +92,19 @@ export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlace
         run("formatBlock", blockTag() === tag ? "p" : tag);
     };
     const addLink = () => {
-        const url = window.prompt("Link URL");
+        const url = window.prompt(linkPromptLabel);
         if (url)
             run("createLink", url);
     };
     // mousedown on the toolbar must not clear the selection
     const keepSel = (e) => e.preventDefault();
-    const tool = (key, label, icon, onClick) => (_jsx("button", { type: "button", className: "rte-tool", "aria-label": label, "aria-pressed": !!active[key], "data-active": active[key] ? "" : undefined, onMouseDown: keepSel, onClick: onClick, children: icon }));
+    /**
+     * `toggles` is false for a tool that performs an action rather than carrying
+     * a state. Link opens a prompt and has no "on" — giving it `aria-pressed`
+     * announces an un-pressed toggle that can never be pressed, which tells a
+     * screen-reader user there is a state here that does not exist.
+     */
+    const tool = (key, label, icon, onClick, toggles = true) => (_jsx("button", { type: "button", className: "rte-tool", "aria-label": label, "aria-pressed": toggles ? !!active[key] : undefined, "data-active": active[key] ? "" : undefined, onMouseDown: keepSel, onClick: onClick, children: icon }));
     const ic = { size: 15, strokeWidth: 2 };
     return (_jsxs("div", { className: richtextRecipe({ className }), children: [_jsx("div", { ref: titleRef, className: "rte-title", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-label": titleLabel, "data-placeholder": titlePlaceholder, onInput: () => {
                     syncEmpty(titleRef.current);
@@ -106,6 +112,6 @@ export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlace
                 } }), _jsx("div", { ref: bodyRef, className: "rte-body", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-multiline": "true", "aria-label": bodyLabel, "data-placeholder": placeholder, onInput: () => {
                     syncEmpty(bodyRef.current);
                     emit();
-                }, onMouseUp: updateBar, onKeyUp: updateBar }), bar && (_jsxs("div", { className: "rte-toolbar", style: { left: bar.x, top: bar.y }, children: [tool("bold", "Bold", _jsx(Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", _jsx(Italic, { ...ic }), () => run("italic")), tool("underline", "Underline", _jsx(Underline, { ...ic }), () => run("underline")), tool("strikeThrough", "Strikethrough", _jsx(Strikethrough, { ...ic }), () => run("strikeThrough")), tool("link", "Link", _jsx(Link2, { ...ic }), addLink), _jsx("span", { className: "rte-tool-sep" }), tool("h1", "Heading 1", _jsx(Heading1, { ...ic }), () => toggleBlock("h1")), tool("h2", "Heading 2", _jsx(Heading2, { ...ic }), () => toggleBlock("h2")), tool("ul", "Bullet list", _jsx(List, { ...ic }), () => run("insertUnorderedList")), tool("ol", "Numbered list", _jsx(ListOrdered, { ...ic }), () => run("insertOrderedList")), tool("blockquote", "Quote", _jsx(Quote, { ...ic }), () => toggleBlock("blockquote"))] }))] }));
+                }, onMouseUp: updateBar, onKeyUp: updateBar }), bar && (_jsxs("div", { className: "rte-toolbar", style: { left: bar.x, top: bar.y }, children: [tool("bold", "Bold", _jsx(Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", _jsx(Italic, { ...ic }), () => run("italic")), tool("underline", "Underline", _jsx(Underline, { ...ic }), () => run("underline")), tool("strikeThrough", "Strikethrough", _jsx(Strikethrough, { ...ic }), () => run("strikeThrough")), tool("link", "Link", _jsx(Link2, { ...ic }), addLink, false), _jsx("span", { className: "rte-tool-sep" }), tool("h1", "Heading 1", _jsx(Heading1, { ...ic }), () => toggleBlock("h1")), tool("h2", "Heading 2", _jsx(Heading2, { ...ic }), () => toggleBlock("h2")), tool("ul", "Bullet list", _jsx(List, { ...ic }), () => run("insertUnorderedList")), tool("ol", "Numbered list", _jsx(ListOrdered, { ...ic }), () => run("insertOrderedList")), tool("blockquote", "Quote", _jsx(Quote, { ...ic }), () => toggleBlock("blockquote"))] }))] }));
 }
 RichTextEditor.displayName = "RichTextEditor";

package/dist/styles.css

@@ -1950,6 +1950,13 @@
     & .board-card { display: flex; flex-direction: column; gap: var(--space-2); box-sizing: border-box; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle), 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
     & .board-card:active { cursor: grabbing; }
     & .board-card[data-dragging] { opacity: 0.4; }
+    & .board-card:focus { outline: none; }
+    & .board-card:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
+    /* announced, never drawn */
+    & .board-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/types/product/board/board.d.ts

@@ -18,6 +18,14 @@ export type BoardProps<T extends BoardCard> = Omit<React.ComponentPropsWithoutRe
     /** When set, each column shows a "+ {newCardLabel}" button and its header +. */
     onNewCard?: (columnId: string) => void;
     newCardLabel?: string;
+    /**
+     * Accessible name for a card. Also used in the move announcement. Without it
+     * a card is announced by whatever `renderCard` puts in it, which is usually
+     * right but is not something the component can guarantee.
+     */
+    getCardLabel?: (card: T) => string;
+    /** What a screen reader hears after a keyboard move. */
+    announceMove?: (columnTitle: string, cardLabel?: string) => string;
     className?: string;
 };
 /**
@@ -26,7 +34,7 @@ export type BoardProps<T extends BoardCard> = Omit<React.ComponentPropsWithoutRe
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from Attio's Deals pipeline.
  */
-export declare function Board<T extends BoardCard>({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel, className, ...rest }: BoardProps<T>): React.JSX.Element;
+export declare function Board<T extends BoardCard>({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel, getCardLabel, announceMove, className, ...rest }: BoardProps<T>): React.JSX.Element;
 export declare namespace Board {
     var displayName: string;
 }

package/dist/types/product/richtext/richtext.d.ts

@@ -8,6 +8,8 @@ export type RichTextEditorProps = {
     titleLabel?: string;
     /** Accessible name for the body editor. */
     bodyLabel?: string;
+    /** Message shown when asking for a link URL. */
+    linkPromptLabel?: string;
     defaultTitle?: string;
     /** Initial body HTML. */
     defaultHtml?: string;
@@ -22,7 +24,7 @@ export type RichTextEditorProps = {
  * that appears over a text selection. Built on contentEditable, dependency-free.
  * Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.
  */
-export declare function RichTextEditor({ defaultTitle, defaultHtml, titlePlaceholder, placeholder, onChange, className, titleLabel, bodyLabel, }: RichTextEditorProps): React.JSX.Element;
+export declare function RichTextEditor({ defaultTitle, defaultHtml, titlePlaceholder, placeholder, onChange, className, titleLabel, bodyLabel, linkPromptLabel, }: RichTextEditorProps): React.JSX.Element;
 export declare namespace RichTextEditor {
     var displayName: string;
 }

package/package.json

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