@crisp-ui-kit/crisp 0.53.5 → 0.54.0

package/dist/esm/components/skiplink/skiplink.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { skiplinkRecipe } from "./skiplink.recipe.js";
+/**
+ * A "skip to content" link — invisible until it is the thing with focus
+ * (a sighted mouse user never sees it), so a keyboard user's first Tab from
+ * a cold load reaches it instead of walking the whole nav first. Render it
+ * as the very first thing on the page, before the sidebar/header. See the
+ * recipe's own doc comment for why there's no Attio value behind its chrome.
+ */
+export function SkipLink({ href = "#main-content", children = "Skip to content", className, ...rest }) {
+    return (_jsx("a", { href: href, className: skiplinkRecipe({ className }), ...rest, children: children }));
+}
+SkipLink.displayName = "SkipLink";

package/dist/esm/components/skiplink/skiplink.recipe.js

@@ -0,0 +1,30 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// A "skip to content" link: invisible (the same sr-only clip
+// VisuallyHidden uses) until it is the thing with focus, so a sighted
+// mouse user never sees it but a keyboard user's first Tab from a cold
+// load reaches it. No Attio screen ships one to measure -- this is
+// boilerplate accessibility furniture, not a design value (crisp#462 GRC
+// audit gap 2 of 4, crisp#540) -- so the un-hidden chrome reuses already-measured
+// crisp values throughout: the `bgPopover` floating surface + its
+// `elevation.floating` shadow (the same pairing Menu/Popover/ContextMenu/
+// Toast use for "a surface that appears above everything else"), `radius.md`,
+// and the canonical `:focus-visible` ring every other crisp control uses
+// (`outline: 2px solid ${bgBrandSolid}`, 1px offset) -- no new value is
+// introduced.
+const config = defineRecipe({
+    name: "skiplink",
+    base: `position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; text-decoration: none;
+    font-family: ${c.font.sans}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary};
+
+    &:focus {
+      position: fixed; top: ${c.space["3"]}; inset-inline-start: ${c.space["3"]}; z-index: 90; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
+      padding: ${c.space["2"]} ${c.space["3"]}; border-radius: ${c.radius.md}; background: ${c.bgPopover}; box-shadow: ${e.floating};
+    }
+    &:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const skiplinkRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/components/textlink/index.js

@@ -0,0 +1,2 @@
+export { TextLink } from "./textlink.js";
+export { textlinkRecipe } from "./textlink.recipe.js";

package/dist/esm/components/textlink/textlink.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { textlinkRecipe } from "./textlink.recipe.js";
+/**
+ * Inline navigable text — a real `<a href>` always, the same href+onClick
+ * division `StatList` uses: `href` gives ordinary browser behaviour (new
+ * tab, copy link, hover status), an `onClick` that calls
+ * `event.preventDefault()` pairs it with client-side routing (e.g.
+ * react-router's own `Link`).
+ */
+export function TextLink({ tone = "muted", className, ...rest }) {
+    return _jsx("a", { className: textlinkRecipe({ tone, className }), ...rest });
+}
+TextLink.displayName = "TextLink";

package/dist/esm/components/textlink/textlink.recipe.js

@@ -0,0 +1,32 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The one inline-navigable-text shape GRC's own screens kept hand-typing at
+// every call site (internal/grc#110 / your-moon/crisp#529): a card's own
+// trailing "View all →", and a muted in-context reference link that goes
+// brand on hover. No new colour or size here — both variants read the exact
+// tokens those call sites already used (`bgBrandSolid` reused as a text
+// colour, the same alias GRC's own `--color-fg-brand` resolves to; `fgMuted`;
+// the existing 12px/13px text sizes) rather than a fresh guess, and neither
+// is measured against one specific Attio widget for the same reason
+// StatList/HeatmapChart's own doc comments give: this exact "small trailing
+// link" isn't a distinct Attio component to point a CDP session at, it's a
+// reuse of already-measured type and colour values in a new arrangement.
+const config = defineRecipe({
+    name: "textlink",
+    base: `display: inline; font-family: ${c.font.sans}; text-decoration: none; cursor: pointer;
+    &:hover { text-decoration: underline; }`,
+    variants: {
+        tone: {
+            // The bold, always-brand-coloured trailing link a Card's own `action`
+            // slot uses ("View all →", "All registers →").
+            brand: `font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.bgBrandSolid};`,
+            // A quieter in-context reference (a sample record under a finding)
+            // that only goes brand on hover.
+            muted: `font-size: ${c.text.md}; font-weight: ${c.weight.regular}; color: ${c.fgMuted}; &:hover { color: ${c.bgBrandSolid}; }`,
+        },
+    },
+    defaultVariants: { tone: "muted" },
+    compoundVariants: [],
+});
+export const textlinkRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/components/visuallyhidden/index.js

@@ -0,0 +1 @@
+export * from "./visuallyhidden.js";

package/dist/esm/components/visuallyhidden/visuallyhidden.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { visuallyhiddenRecipe } from "./visuallyhidden.recipe.js";
+/**
+ * Hides content visually while keeping it in the accessibility tree and
+ * the tab order — a label for an icon-only control, extra context for a
+ * screen-reader user that a sighted one gets from layout alone. Renders a
+ * `<span>`; wrap the element that needs the treatment, or read its content
+ * as a `label`/`aria-label` source in a test.
+ */
+export function VisuallyHidden({ className, ...rest }) {
+    return _jsx("span", { className: visuallyhiddenRecipe({ className }), ...rest });
+}
+VisuallyHidden.displayName = "VisuallyHidden";

package/dist/esm/components/visuallyhidden/visuallyhidden.recipe.js

@@ -0,0 +1,17 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+// The standard "sr-only" clip pattern: content stays in the accessibility
+// tree and the tab order, but occupies no visible space and is never
+// painted. Pure CSS mechanics, not a design value -- there is nothing to
+// measure against Attio here (crisp#462 GRC audit gap 2 of 4, crisp#540):
+// no Attio screen ships content that is deliberately invisible-but-reachable,
+// so this is the standard web-platform pattern, same shape `SkipLink` also
+// starts from before it un-hides on focus.
+const config = defineRecipe({
+    name: "visuallyhidden",
+    base: `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: [],
+});
+export const visuallyhiddenRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/index.js

@@ -44,6 +44,7 @@ export * from "./components/resizablepanel/index.js";
 export * from "./components/segmented/index.js";
 export * from "./components/select/index.js";
 export * from "./components/skeleton/index.js";
+export * from "./components/skiplink/index.js";
 export * from "./components/slider/index.js";
 export * from "./components/spinner/index.js";
 export * from "./components/stagebar/index.js";
@@ -53,9 +54,11 @@ export * from "./components/table/index.js";
 export * from "./components/tabletoolbar/index.js";
 export * from "./components/tabs/index.js";
 export * from "./components/textarea/index.js";
+export * from "./components/textlink/index.js";
 export * from "./components/timepicker/index.js";
 export * from "./components/toast/index.js";
 export * from "./components/tooltip/index.js";
+export * from "./components/visuallyhidden/index.js";
 export * from "./components/wheelpicker/index.js";
 export * from "./core/index.js";
 // product surfaces (product/) — faithful, pixel-measured rebuilds of specific
@@ -68,6 +71,7 @@ export * from "./product/board/index.js";
 export * from "./product/command/index.js";
 export * from "./product/entitycard/index.js";
 export * from "./product/flowcanvas/index.js";
+export * from "./product/headerbar/index.js";
 export * from "./product/inbox/index.js";
 export * from "./product/listpage/index.js";
 export * from "./product/navitem/index.js";

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { isRtlElement } from "../../core/index.js";
+import { isRtlElement, useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { boardRecipe } from "./board.recipe.js";
 /**
  * A kanban board with native drag-and-drop between columns. Cards are
@@ -8,7 +8,16 @@ import { boardRecipe } from "./board.recipe.js";
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from a deals pipeline.
  */
-export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", getCardLabel, announceMove = (column, card) => card ? `${card} moved to ${column}` : `Moved to ${column}`, className, ...rest }) {
+export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, className, ...rest }) {
+    // crisp/#471: same resolution order as every other component's own —
+    // explicit prop, then a CrispMessagesProvider's translation of the English
+    // default, then that default itself.
+    const newCardLabel = useCrispMessage(newCardLabelProp, "New");
+    const crispMessages = useCrispMessages();
+    const announceMove = announceMoveProp ??
+        ((column, card) => card
+            ? `${card} ${crispMessages["moved to"] ?? "moved to"} ${column}`
+            : `${crispMessages["Moved to"] ?? "Moved to"} ${column}`);
     const [dragId, setDragId] = React.useState(null);
     const [overCol, setOverCol] = React.useState(null);
     const [announcement, setAnnouncement] = React.useState("");
@@ -65,7 +74,7 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
                             move(dragId, col.id);
                         setDragId(null);
                         setOverCol(null);
-                    }, children: [_jsxs("div", { className: "crisp-board-col-header", children: [col.accent && (_jsx("span", { className: "crisp-board-col-dot", style: { background: col.accent } })), _jsx("span", { className: "crisp-board-col-title", children: col.title }), _jsx("span", { className: "crisp-board-col-count", children: colCards.length }), onNewCard && (_jsx("button", { type: "button", className: "crisp-board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), _jsxs("div", { className: "crisp-board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && (_jsxs("button", { type: "button", className: "crisp-board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => (_jsx("div", { className: "crisp-board-card", role: "listitem", 
+                    }, children: [_jsxs("div", { className: "crisp-board-col-header", children: [col.accent && (_jsx("span", { className: "crisp-board-col-dot", style: { background: col.accent } })), _jsx("span", { className: "crisp-board-col-title", children: col.title }), _jsx("span", { className: "crisp-board-col-count", children: colCards.length }), onNewCard && (_jsx("button", { type: "button", className: "crisp-board-col-add", "aria-label": `${crispMessages["Add to"] ?? "Add to"} ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), _jsxs("div", { className: "crisp-board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && (_jsxs("button", { type: "button", className: "crisp-board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => (_jsx("div", { className: "crisp-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);

package/dist/esm/product/command/command.js

@@ -5,7 +5,7 @@ import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { Building2, CircleDollarSign, House, ListTodo, Search, Settings, SquareCheck, User, UserPlus, } from "lucide-react";
 import * as React from "react";
 import { Kbd } from "../../components/kbd/index.js";
-import { cx, withDescribedBy } from "../../core/index.js";
+import { cx, useCrispMessage, useCrispMessages, withDescribedBy, } from "../../core/index.js";
 import { commandRecipe } from "./command.recipe.js";
 const IconHome = () => (_jsx(House, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
 const IconTasks = () => (_jsx(SquareCheck, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
@@ -110,7 +110,19 @@ function useCommandInstanceId() {
  * option list) so keyboard/focus correctness comes from the machines, not
  * hand-rolled event handling.
  */
-export function Command({ open, onOpenChange, items = defaultCommandItems, placeholder = "Search actions and records…", "aria-label": ariaLabel = "Command palette", navigateLabel = "Navigate", selectLabel = "Select", emptyLabel = "No matching commands", query: queryProp, onQueryChange, filterItems = true, className, "aria-describedby": describedBy, ...rest }) {
+export function Command({ open, onOpenChange, items = defaultCommandItems, placeholder: placeholderProp, "aria-label": ariaLabelProp, navigateLabel: navigateLabelProp, selectLabel: selectLabelProp, emptyLabel: emptyLabelProp, query: queryProp, onQueryChange, filterItems = true, className, "aria-describedby": describedBy, ...rest }) {
+    // crisp/#471: same resolution order as every other component's own.
+    // `navigateLabel`/`emptyLabel` are typed `React.ReactNode`, so they
+    // resolve by hand rather than through `useCrispMessage`, which is
+    // string-only.
+    const crispMessages = useCrispMessages();
+    const placeholder = useCrispMessage(placeholderProp, "Search actions and records…");
+    const ariaLabel = useCrispMessage(ariaLabelProp, "Command palette");
+    const navigateLabel = navigateLabelProp ?? crispMessages.Navigate ?? "Navigate";
+    const selectLabel = useCrispMessage(selectLabelProp, "Select");
+    const emptyLabel = emptyLabelProp ??
+        crispMessages["No matching commands"] ??
+        "No matching commands";
     const instanceId = useCommandInstanceId();
     const dialogId = `${instanceId}-dialog`;
     const comboId = `${instanceId}-combobox`;

package/dist/esm/product/flowcanvas/flowcanvas.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Minus, Plus } from "lucide-react";
 import * as React from "react";
+import { useCrispMessage } from "../../core/index.js";
 import { flowcanvasRecipe } from "./flowcanvas.recipe.js";
 const GRID = 20;
 const clampZoom = (z) => Math.min(1.5, Math.max(0.5, z));
@@ -9,7 +10,13 @@ const clampZoom = (z) => Math.min(1.5, Math.max(0.5, z));
  * measured from a workflows editor. Drag a node to move it (fires
  * `onNodesChange`); drag the background to pan; use the toolbar to zoom.
  */
-export function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth = 240, nodeHeight = 64, "aria-label": ariaLabel, className, zoomOutLabel = "Zoom out", zoomInLabel = "Zoom in", resetLabel = "Reset", edgesLabel = "Edges", ...rest }) {
+export function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth = 240, nodeHeight = 64, "aria-label": ariaLabelProp, className, zoomOutLabel: zoomOutLabelProp, zoomInLabel: zoomInLabelProp, resetLabel: resetLabelProp, edgesLabel: edgesLabelProp, ...rest }) {
+    // crisp/#471: same resolution order as every other component's own.
+    const ariaLabel = useCrispMessage(ariaLabelProp, "Flow canvas");
+    const zoomOutLabel = useCrispMessage(zoomOutLabelProp, "Zoom out");
+    const zoomInLabel = useCrispMessage(zoomInLabelProp, "Zoom in");
+    const resetLabel = useCrispMessage(resetLabelProp, "Reset");
+    const edgesLabel = useCrispMessage(edgesLabelProp, "Edges");
     const [pan, setPan] = React.useState({ x: 40, y: 40 });
     const [zoom, setZoom] = React.useState(1);
     const [panning, setPanning] = React.useState(false);
@@ -64,7 +71,7 @@ export function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth
             ...rest.style,
             backgroundSize: `${GRID * zoom}px ${GRID * zoom}px`,
             backgroundPosition: `${pan.x}px ${pan.y}px`,
-        }, role: "application", "aria-label": ariaLabel ?? "Flow canvas", onPointerDown: onBackgroundPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsxs("div", { className: "crisp-flowcanvas-viewport", style: {
+        }, role: "application", "aria-label": ariaLabel, onPointerDown: onBackgroundPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsxs("div", { className: "crisp-flowcanvas-viewport", style: {
                     transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
                 }, children: [_jsxs("svg", { className: "crisp-flowcanvas-edges", "aria-hidden": "true", children: [_jsx("title", { children: edgesLabel }), edges.map((edge) => {
                                 const a = byId.get(edge.from);

package/dist/esm/product/headerbar/headerbar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { headerbarRecipe } from "./headerbar.recipe.js";
+/**
+ * A page-level header row: an optional leading slot, a flexible title/
+ * breadcrumb region, and a trailing action cluster, on the measured 48px
+ * bar Attio uses for both its page-header and its view-bar row. See the
+ * recipe's own doc comment for the live measurement (crisp#462).
+ */
+export function HeaderBar({ leading, title, trailing, bordered = true, className, ...rest }) {
+    return (_jsxs("div", { className: headerbarRecipe({ className }), "data-bordered": bordered ? "" : undefined, ...rest, children: [leading ? (_jsx("span", { className: "crisp-headerbar-leading", children: leading })) : null, title ? _jsx("div", { className: "crisp-headerbar-title", children: title }) : null, trailing ? (_jsx("span", { className: "crisp-headerbar-trailing", children: trailing })) : null] }));
+}
+HeaderBar.displayName = "HeaderBar";

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

@@ -0,0 +1,32 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A page-level header row — measured live at app.attio.com/techpartners/companies
+// against two stacked bars: the top utility bar (breadcrumb + trailing icon
+// actions, e.g. search/notifications) and the view bar directly under it
+// ("All Companies" view name + tabs + "New Company"). Both share the same
+// 48px content height and `0 ${space3}` padding; only the outer (first) bar
+// carries the divider -- measured `border-bottom: 1px solid rgb(238,239,241)`
+// (`borderSubtle`/`line100`, exact match) on the utility bar, no border of
+// its own on the view bar directly beneath it. `bordered` (default true)
+// lets a consumer that stacks two HeaderBars turn it off on the inner one,
+// the way GRC's own AppLayout UtilityBar + Page viewBar do today with two
+// hand-rolled, drifting copies of the same 49px bar (crisp#462 GRC audit,
+// crisp#527).
+//
+// No bell, no breadcrumb, no search box baked in -- those are the `leading`/
+// `title`/`trailing` slot content a consumer supplies. `size.header` (48px)
+// is reused rather than a new token, since it's the same "workspace-switcher
+// header height" measured elsewhere in the sidebar.
+const config = defineRecipe({
+    name: "headerbar",
+    base: `box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: ${c.space["2"]}; height: ${c.size.header}; flex-shrink: 0; padding: 0 ${c.space["3"]}; font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-bordered] { border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-headerbar-leading { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; min-width: 0; }
+    & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: ${c.space["2"]}; overflow: hidden; }
+    & .crisp-headerbar-trailing { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const headerbarRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/headerbar/index.js

@@ -0,0 +1 @@
+export * from "./headerbar.js";

package/dist/esm/product/inbox/inbox.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bell } from "lucide-react";
 import * as React from "react";
 import { useTablistKeyboard } from "../../components/tabs/index.js";
+import { useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { inboxRecipe } from "./inbox.recipe.js";
 /**
  * A notifications inbox panel — measured from a notification flyout. A
@@ -9,8 +10,19 @@ import { inboxRecipe } from "./inbox.recipe.js";
  * (avatar + message + time + unread dot) or a centred empty state. Put it inside
  * a Popover for the flyout.
  */
-export function Inbox({ notifications = [], title = "Notifications", tabs, activeTab, onTabChange, emptyTitle = "No notifications", emptySubtitle = "Notifications such as mentions and important updates will be displayed here.", emptyAction, tabsLabel = "Notification views", className, ...rest }) {
+export function Inbox({ notifications = [], title: titleProp, tabs, activeTab, onTabChange, emptyTitle: emptyTitleProp, emptySubtitle: emptySubtitleProp, emptyAction, tabsLabel: tabsLabelProp, className, ...rest }) {
     const listRef = React.useRef(null);
+    // crisp/#471: `title`/`emptyTitle`/`emptySubtitle` are typed
+    // `React.ReactNode`, so they resolve by hand rather than through
+    // `useCrispMessage`, which is string-only — same reasoning as DataTable's
+    // own `empty`.
+    const crispMessages = useCrispMessages();
+    const title = titleProp ?? crispMessages.Notifications ?? "Notifications";
+    const emptyTitle = emptyTitleProp ?? crispMessages["No notifications"] ?? "No notifications";
+    const emptySubtitle = emptySubtitleProp ??
+        crispMessages["Notifications such as mentions and important updates will be displayed here."] ??
+        "Notifications such as mentions and important updates will be displayed here.";
+    const tabsLabel = useCrispMessage(tabsLabelProp, "Notification views");
     // crisp's shared tablist model, the one `Tabs` runs (#195). Hand-rolling a
     // second one is how Inbox ended up with no arrow keys, no roving tabindex
     // and no name while `Tabs` had all three.

package/dist/esm/product/onboarding/onboarding.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, MoreHorizontal } from "lucide-react";
+import { useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { onboardingRecipe } from "./onboarding.recipe.js";
 /**
  * The English defaults for the two pieces of copy that are formatters rather
@@ -15,9 +16,29 @@ export const onboardingLabels = {
  * started" widget. Title + optional menu/minimize, a segmented progress bar,
  * and step rows (completed rows strike through with a brand check).
  */
-export function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", progressText = onboardingLabels.progressText, completedStepLabel = onboardingLabels.completedStepLabel, ...rest }) {
+export function OnboardingChecklist({ title: titleProp, steps, encouragement: encouragementProp, onStepClick, onMenu, onMinimize, className, optionsLabel: optionsLabelProp, minimizeLabel: minimizeLabelProp, progressLabel: progressLabelProp, progressText: progressTextProp, completedStepLabel: completedStepLabelProp, ...rest }) {
     const total = steps.length;
     const done = steps.filter((s) => s.done).length;
+    // crisp/#471: same resolution order as every other component's own —
+    // explicit prop, then a CrispMessagesProvider's translation of the English
+    // default, then that default itself. `title`/`encouragement` are typed
+    // `React.ReactNode` (a caller can pass a translated element), so they
+    // resolve by hand rather than through `useCrispMessage`, which is
+    // string-only — same reasoning as DataTable's own `empty`.
+    const crispMessages = useCrispMessages();
+    const title = titleProp ?? crispMessages["Getting started"] ?? "Getting started";
+    const encouragement = encouragementProp ?? crispMessages["Keep it up!"] ?? "Keep it up!";
+    const optionsLabel = useCrispMessage(optionsLabelProp, "Checklist options");
+    const minimizeLabel = useCrispMessage(minimizeLabelProp, "Minimize");
+    const progressLabel = useCrispMessage(progressLabelProp, "Onboarding progress");
+    // `progressText`/`completedStepLabel` are formatters, not strings (the
+    // count moves within the sentence between languages, #216) — each of
+    // their own static fragments gets its own lookup, same as
+    // TableToolbar's "Sorted by" (crisp/#217).
+    const progressText = progressTextProp ??
+        ((doneCount, totalCount) => (_jsxs(_Fragment, { children: [_jsxs("b", { children: [doneCount, "/", totalCount] }), " ", crispMessages["steps completed"] ?? "steps completed"] })));
+    const completedStepLabel = completedStepLabelProp ??
+        ((label) => `${String(label)} ${crispMessages["— completed"] ?? "— completed"}`);
     return (_jsxs("div", { className: onboardingRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-onboarding-head", children: [_jsx("span", { className: "crisp-onboarding-title", children: title }), onMenu && (_jsx("button", { type: "button", className: "crisp-onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && (_jsx("button", { type: "button", className: "crisp-onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), _jsxs("span", { className: "crisp-onboarding-sub", children: [progressText(done, total), encouragement ? _jsxs(_Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), _jsx("div", { className: "crisp-onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: "crisp-onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), _jsx("div", { className: "crisp-onboarding-steps", children: steps.map((s) => (_jsxs("button", { type: "button", className: "crisp-onboarding-step", "data-done": s.done ? "" : undefined, "aria-label": s.done ? completedStepLabel(s.label) : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [_jsx("span", { className: "crisp-onboarding-step-icon", children: s.icon }), _jsx("span", { className: "crisp-onboarding-step-label", children: s.label }), _jsx("span", { className: "crisp-onboarding-step-check", children: s.done && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
 }
 OnboardingChecklist.displayName = "OnboardingChecklist";

package/dist/esm/product/recordpage/index.js

@@ -1,2 +1,2 @@
-export { RecordPage, recordPageLabels, } from "./recordpage.js";
+export { RecordDetails, RecordPage, recordPageLabels, } from "./recordpage.js";
 export { recordpageRecipe } from "./recordpage.recipe.js";