@crisp-ui-kit/crisp 0.5.0 → 0.7.1

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

@@ -109,12 +109,18 @@ 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…", }) {
+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, }) {
     const instanceId = useCommandInstanceId();
     const dialogId = `${instanceId}-dialog`;
     const comboId = `${instanceId}-combobox`;
     const inputRef = React.useRef(null);
-    const [query, setQuery] = React.useState("");
+    const [internalQuery, setInternalQuery] = React.useState("");
+    const query = queryProp !== undefined ? queryProp : internalQuery;
+    const setQuery = React.useCallback((next) => {
+        onQueryChange?.(next);
+        if (queryProp === undefined)
+            setInternalQuery(next);
+    }, [onQueryChange, queryProp]);
     const dialogService = useMachine(dialog.machine, {
         id: dialogId,
         open,
@@ -122,16 +128,18 @@ export function Command({ open, onOpenChange, items = defaultCommandItems, place
             onOpenChange(details.open);
         },
         initialFocusEl: () => inputRef.current,
-        "aria-label": "Command palette",
+        "aria-label": ariaLabel,
     });
     const dlg = dialog.connect(dialogService, normalizeProps);
     const filteredItems = React.useMemo(() => {
+        if (!filterItems)
+            return items;
         const q = query.trim().toLowerCase();
         if (!q)
             return items;
         return items.filter((item) => item.label.toLowerCase().includes(q) ||
             item.keywords?.some((k) => k.toLowerCase().includes(q)));
-    }, [items, query]);
+    }, [items, query, filterItems]);
     const collection = React.useMemo(() => combobox.collection({
         items: filteredItems,
         itemToValue: (item) => item.id,
@@ -148,6 +156,11 @@ export function Command({ open, onOpenChange, items = defaultCommandItems, place
         disableLayer: true,
         inputBehavior: "autohighlight",
         closeOnSelect: false,
+        // Always driven from our own `query` (internal state, or the caller's
+        // controlled prop) so a caller-driven query update reaches the input,
+        // not just the reverse — the sole source of truth is `query`, not this
+        // machine's own copy.
+        inputValue: query,
         onInputValueChange(details) {
             setQuery(details.inputValue);
         },
@@ -180,9 +193,9 @@ export function Command({ open, onOpenChange, items = defaultCommandItems, place
     };
     if (!dlg.open)
         return null;
-    return (_jsx(Portal, { children: _jsxs("div", { className: commandRecipe(), children: [_jsx("div", { ...dlg.getBackdropProps(), className: "command-backdrop" }), _jsx("div", { ...dlg.getPositionerProps(), className: "command-positioner", children: _jsx("div", { ...dlg.getContentProps(), className: "command-content", children: _jsxs("div", { className: "command-card", children: [_jsxs("div", { className: "command-control", children: [_jsx(IconSearch, {}), _jsx("input", { ref: inputRef, ...combo.getInputProps(), className: "command-input", placeholder: placeholder })] }), _jsx("div", { ...combo.getContentProps(), className: "command-list", children: filteredItems.length === 0 ? (_jsx("div", { className: "command-empty", children: "No matching commands" })) : (filteredItems.map((item, i) => {
+    return (_jsx(Portal, { children: _jsxs("div", { className: commandRecipe(), children: [_jsx("div", { ...dlg.getBackdropProps(), className: "command-backdrop" }), _jsx("div", { ...dlg.getPositionerProps(), className: "command-positioner", children: _jsx("div", { ...dlg.getContentProps(), className: "command-content", children: _jsxs("div", { className: "command-card", children: [_jsxs("div", { className: "command-control", children: [_jsx(IconSearch, {}), _jsx("input", { ref: inputRef, ...combo.getInputProps(), className: "command-input", placeholder: placeholder })] }), _jsx("div", { ...combo.getContentProps(), className: "command-list", children: filteredItems.length === 0 ? (_jsx("div", { className: "command-empty", children: emptyLabel })) : (filteredItems.map((item, i) => {
                                         const Icon = item.icon;
                                         const showGroup = item.group && item.group !== filteredItems[i - 1]?.group;
                                         return (_jsxs(React.Fragment, { children: [showGroup && (_jsx("div", { className: "command-group-label", "aria-hidden": "true", children: item.group })), _jsxs("div", { ...combo.getItemProps({ item }), className: "command-item", children: [_jsx(Icon, {}), _jsx("span", { className: "command-item-label", children: item.label }), item.shortcut && (_jsx("span", { className: "command-item-shortcut", children: item.shortcut.map((key) => (_jsx(Kbd, { children: key }, key))) }))] })] }, item.id));
-                                    })) }), _jsxs("div", { className: "command-footer", children: [_jsxs("span", { className: "command-footer-nav", children: [_jsx(Kbd, { children: "\u2191" }), _jsx(Kbd, { children: "\u2193" }), "Navigate"] }), _jsxs("button", { type: "button", className: "command-footer-action", disabled: !highlightedItem, onClick: () => runItem(highlightedItem), children: [_jsx("span", { className: "command-footer-action-label", children: highlightedItem?.label ?? "Select" }), _jsx("span", { className: "command-footer-key", children: "\u21B5" })] })] })] }) }) })] }) }));
+                                    })) }), _jsxs("div", { className: "command-footer", children: [_jsxs("span", { className: "command-footer-nav", children: [_jsx(Kbd, { children: "\u2191" }), _jsx(Kbd, { children: "\u2193" }), navigateLabel] }), _jsxs("button", { type: "button", className: "command-footer-action", disabled: !highlightedItem, onClick: () => runItem(highlightedItem), children: [_jsx("span", { className: "command-footer-action-label", children: highlightedItem?.label ?? selectLabel }), _jsx("span", { className: "command-footer-key", children: "\u21B5" })] })] })] }) }) })] }) }));
 }

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

@@ -1,8 +1,33 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "command",
-    base: `display: contents; font-family: ${c.font.sans}; & .command-content, & .command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } & .command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; } & .command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; } & .command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px ${c.shadowOverlay1}, 0 18px 88px -4px ${c.shadowOverlay2}, 0 0 1px ${c.shadowOverlay3}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } } & .command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; } & .command-control { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgMuted}; } & .command-control svg { flex-shrink: 0; } & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: ${c.font.sans}; font-size: ${c.text.xl}; color: ${c.fgPrimary}; } & .command-input::placeholder { color: ${c.fgMuted}; } & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["1"]} ${c.space["2.5"]}; display: flex; flex-direction: column; gap: ${c.space.px}; } & .command-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; } & .command-item { box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding-inline: ${c.space["2.5"]}; border-radius: ${c.radius.xl}; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer; } & .command-item svg { flex-shrink: 0; color: ${c.fgMuted}; } & .command-item[data-highlighted] { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); } & .command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .command-item-shortcut { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: ${c.space["0.5"]}; } & .command-group-label { padding: ${c.space["2"]} ${c.space["2.5"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); } & .command-list > .command-group-label:first-child { padding-top: ${c.space["1"]}; } & .command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 ${c.space["2.5"]}; border-top: 1px solid ${c.borderSubtle}; } & .command-footer-nav { display: flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; } & .command-footer-action { display: flex; align-items: center; gap: ${c.space["2"]}; height: 28px; max-width: 60%; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; } & .command-footer-action:disabled { opacity: 0.5; cursor: default; } & .command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }`,
+    base: `display: contents; font-family: ${c.font.sans}
+  ; & .command-content, & .command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+  & .command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
+  & .command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; }
+  & .command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+  & .command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
+  & .command-control { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgMuted}; }
+  & .command-control svg { flex-shrink: 0; }
+  & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: ${c.font.sans}; font-size: ${c.text.xl}; color: ${c.fgPrimary}; }
+  & .command-input::placeholder { color: ${c.fgMuted}; }
+  & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["1"]} ${c.space["2.5"]}; display: flex; flex-direction: column; gap: ${c.space.px}; }
+  & .command-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+  & .command-item { box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding-inline: ${c.space["2.5"]}; border-radius: ${c.radius.xl}; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer; }
+  & .command-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
+  & .command-item[data-highlighted] { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
+  & .command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: ${c.space["0.5"]}; }
+  & .command-group-label { padding: ${c.space["2"]} ${c.space["2.5"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+  & .command-list > .command-group-label:first-child { padding-top: ${c.space["1"]}; }
+  & .command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 ${c.space["2.5"]}; border-top: 1px solid ${c.borderSubtle}; }
+  & .command-footer-nav { display: flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+  & .command-footer-action { display: flex; align-items: center; gap: ${c.space["2"]}; height: 28px; max-width: 60%; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
+  & .command-footer-action:disabled { opacity: 0.5; cursor: default; }
+  & .command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }
+  `,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/entitycard/entitycard.js

@@ -5,7 +5,7 @@ import { entitycardRecipe } from "./entitycard.recipe.js";
  * card with an author row, a title, a clamped excerpt, and a footer row with a
  * right-aligned date. Rendered as a button so the whole card is clickable.
  */
-export function EntityCard({ author, title, excerpt, footer, date, onClick, "aria-label": ariaLabel, className, }) {
-    return (_jsxs("button", { type: "button", className: entitycardRecipe({ className }), onClick: onClick, "aria-label": ariaLabel, children: [author != null && _jsx("span", { className: "entitycard-author", children: author }), _jsx("span", { className: "entitycard-title", children: title }), excerpt != null && _jsx("span", { className: "entitycard-excerpt", children: excerpt }), _jsx("span", { className: "entitycard-spacer" }), (footer != null || date != null) && (_jsxs("span", { className: "entitycard-foot", children: [footer, date != null && _jsx("span", { className: "entitycard-date", children: date })] }))] }));
+export function EntityCard({ author, title, excerpt, footer, date, onClick, "aria-label": ariaLabel, className, ...rest }) {
+    return (_jsxs("button", { type: "button", className: entitycardRecipe({ className }), ...rest, onClick: onClick, "aria-label": ariaLabel, children: [author != null && _jsx("span", { className: "entitycard-author", children: author }), _jsx("span", { className: "entitycard-title", children: title }), excerpt != null && _jsx("span", { className: "entitycard-excerpt", children: excerpt }), _jsx("span", { className: "entitycard-spacer" }), (footer != null || date != null) && (_jsxs("span", { className: "entitycard-foot", children: [footer, date != null && _jsx("span", { className: "entitycard-date", children: date })] }))] }));
 }
 EntityCard.displayName = "EntityCard";

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

@@ -5,7 +5,7 @@ import { contract as c } from "../../tokens/index.js";
 // and a footer row (avatar + name … date). The whole card is clickable.
 const config = defineRecipe({
     name: "entitycard",
-    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 100%; min-width: 0; text-align: left;
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 100%; min-width: 0; text-align: start;
     padding: ${c.space["3"]} ${c.space["4"]}; margin: 0; border: none; border-radius: ${c.radius.xl};
     background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; color: ${c.fgPrimary};
     font-family: ${c.font.sans}; cursor: pointer; transition: box-shadow .12s ease, background-color .12s ease;
@@ -20,7 +20,7 @@ const config = defineRecipe({
     & .entitycard-spacer { flex: 1; min-height: ${c.space["3"]}; }
     & .entitycard-foot { display: flex; align-items: center; gap: ${c.space["1.5"]}; padding-top: ${c.space["2.5"]}; margin-top: ${c.space["1"]}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
     & .entitycard-foot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: ${c.fgPrimary}; }
-    & .entitycard-date { margin-left: auto; flex-shrink: 0; white-space: nowrap; }`,
+    & .entitycard-date { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

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

@@ -9,7 +9,7 @@ const clampZoom = (z) => Math.min(1.5, Math.max(0.5, z));
  * measured from Attio's 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, }) {
+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", }) {
     const [pan, setPan] = React.useState({ x: 40, y: 40 });
     const [zoom, setZoom] = React.useState(1);
     const [panning, setPanning] = React.useState(false);
@@ -62,7 +62,7 @@ export function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth
             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: "flowcanvas-viewport", style: {
                     transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-                }, children: [_jsxs("svg", { className: "flowcanvas-edges", "aria-hidden": "true", children: [_jsx("title", { children: "Edges" }), edges.map((edge) => {
+                }, children: [_jsxs("svg", { className: "flowcanvas-edges", "aria-hidden": "true", children: [_jsx("title", { children: edgesLabel }), edges.map((edge) => {
                                 const a = byId.get(edge.from);
                                 const b = byId.get(edge.to);
                                 if (!a || !b)
@@ -77,9 +77,9 @@ export function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth
                             "id" in drag.current &&
                             drag.current.id === node.id
                             ? ""
-                            : undefined, style: { left: node.x, top: node.y, width: nodeWidth }, onPointerDown: (e) => onNodePointerDown(e, node), children: renderNode(node) }, node.id)))] }), _jsxs("div", { className: "flowcanvas-toolbar", children: [_jsx("button", { type: "button", className: "flowcanvas-tool", "aria-label": "Zoom out", onClick: () => setZoom((z) => clampZoom(z - 0.1)), children: _jsx(Minus, { size: 16, strokeWidth: 2 }) }), _jsxs("span", { className: "flowcanvas-tool flowcanvas-tool-zoom", "aria-live": "polite", children: [Math.round(zoom * 100), "%"] }), _jsx("button", { type: "button", className: "flowcanvas-tool", "aria-label": "Zoom in", onClick: () => setZoom((z) => clampZoom(z + 0.1)), children: _jsx(Plus, { size: 16, strokeWidth: 2 }) }), _jsx("span", { className: "flowcanvas-tool-sep" }), _jsx("button", { type: "button", className: "flowcanvas-tool", onClick: () => {
+                            : undefined, style: { left: node.x, top: node.y, width: nodeWidth }, onPointerDown: (e) => onNodePointerDown(e, node), children: renderNode(node) }, node.id)))] }), _jsxs("div", { className: "flowcanvas-toolbar", children: [_jsx("button", { type: "button", className: "flowcanvas-tool", "aria-label": zoomOutLabel, onClick: () => setZoom((z) => clampZoom(z - 0.1)), children: _jsx(Minus, { size: 16, strokeWidth: 2 }) }), _jsxs("span", { className: "flowcanvas-tool flowcanvas-tool-zoom", "aria-live": "polite", children: [Math.round(zoom * 100), "%"] }), _jsx("button", { type: "button", className: "flowcanvas-tool", "aria-label": zoomInLabel, onClick: () => setZoom((z) => clampZoom(z + 0.1)), children: _jsx(Plus, { size: 16, strokeWidth: 2 }) }), _jsx("span", { className: "flowcanvas-tool-sep" }), _jsx("button", { type: "button", className: "flowcanvas-tool", onClick: () => {
                             setZoom(1);
                             setPan({ x: 40, y: 40 });
-                        }, children: "Reset" })] })] }));
+                        }, children: resetLabel })] })] }));
 }
 FlowCanvas.displayName = "FlowCanvas";

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

@@ -21,7 +21,7 @@ const config = defineRecipe({
     & .inbox-tab[data-active] .inbox-tab-count { color: ${c.bgBrandSolid}; }
 
     & .inbox-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["1"]}; display: flex; flex-direction: column; gap: 1px; }
-    & .inbox-row { display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; padding: ${c.space["2"]} ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; text-align: left; cursor: pointer; transition: background-color .12s; }
+    & .inbox-row { display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; padding: ${c.space["2"]} ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
     & .inbox-row:hover { background: ${c.bgRaised}; }
     & .inbox-row-avatar { flex-shrink: 0; margin-top: 1px; }
     & .inbox-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

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

@@ -11,9 +11,9 @@ const config = defineRecipe({
 
     & .listpage-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["3"]}; }
     & .listpage-toolbar-lead { display: flex; align-items: center; gap: ${c.space["2"]}; }
-    & .listpage-count { margin-left: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .listpage-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; white-space: nowrap; }
     & .listpage-toolbar-trail { display: flex; align-items: center; gap: ${c.space["2"]}; }
-    & .listpage-count + .listpage-toolbar-trail { margin-left: ${c.space["3"]}; }
+    & .listpage-count + .listpage-toolbar-trail { margin-inline-start: ${c.space["3"]}; }
 
     & .listpage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${c.space["3"]} ${c.space["3"]}; }
 
@@ -29,7 +29,7 @@ const config = defineRecipe({
     & .listpage-group { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 36px; padding: 0 ${c.space["2"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & .listpage-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; color: ${c.fgMuted}; }
 
-    & .listpage-row { display: flex; align-items: center; gap: ${c.space["2.5"]}; width: 100%; height: 52px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-top: 1px solid ${c.borderSubtle}; background: none; font-family: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color .12s; }
+    & .listpage-row { display: flex; align-items: center; gap: ${c.space["2.5"]}; width: 100%; height: 52px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-top: 1px solid ${c.borderSubtle}; background: none; font-family: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
     & .listpage-row:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: -2px; }
     & .listpage-row:hover { background: color-mix(in srgb, ${c.fgPrimary} 3%, transparent); }
     & .listpage-row-title { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }

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

@@ -2,7 +2,19 @@ import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "navitem",
-    base: `box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; padding-inline: ${c.space["2"]}; padding-right: ${c.space["1"]}; border-radius: ${c.radius.lg}; font-family: ${c.font.sans}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; line-height: 1; color: ${c.fgPrimary}; text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s; & .navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .navitem-trailing { margin-left: auto; display: inline-flex; align-items: center; flex-shrink: 0; } &:hover { background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent); } &[data-active] { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }`,
+    base: `box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1.5"]}
+  ; height: 28px; padding-inline: ${c.space["2"]}
+  ; padding-inline-end: ${c.space["1"]}
+  ; border-radius: ${c.radius.lg}
+  ; font-family: ${c.font.sans}
+  ; font-size: ${c.text.lg}
+  ; font-weight: ${c.weight.medium}
+  ; letter-spacing: -0.14px; line-height: 20px; color: ${c.fgPrimary}
+  ; text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s; & .navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .navitem-trailing { margin-inline-start: auto; display: inline-flex; align-items: center; flex-shrink: 0; }
+  &:hover { background: color-mix(in srgb, ${c.fgPrimary} 2%, transparent); }
+  &[data-active] { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
+  `,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

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

@@ -6,9 +6,9 @@ import { onboardingRecipe } from "./onboarding.recipe.js";
  * 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, }) {
+export function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", }) {
     const total = steps.length;
     const done = steps.filter((s) => s.done).length;
-    return (_jsxs("div", { className: onboardingRecipe({ className }), children: [_jsxs("div", { className: "onboarding-head", children: [_jsx("span", { className: "onboarding-title", children: title }), onMenu && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": "Checklist options", onClick: onMenu, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": "Minimize", onClick: onMinimize, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), _jsxs("span", { className: "onboarding-sub", children: [_jsxs("b", { children: [done, "/", total] }), " ", "steps completed", encouragement ? _jsxs(_Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), _jsx("div", { className: "onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": "Onboarding progress", children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), _jsx("div", { className: "onboarding-steps", children: steps.map((s) => (_jsxs("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [_jsx("span", { className: "onboarding-step-icon", children: s.icon }), _jsx("span", { className: "onboarding-step-label", children: s.label }), _jsx("span", { className: "onboarding-step-check", children: s.done && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
+    return (_jsxs("div", { className: onboardingRecipe({ className }), children: [_jsxs("div", { className: "onboarding-head", children: [_jsx("span", { className: "onboarding-title", children: title }), onMenu && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), _jsxs("span", { className: "onboarding-sub", children: [_jsxs("b", { children: [done, "/", total] }), " ", "steps completed", encouragement ? _jsxs(_Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), _jsx("div", { className: "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: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), _jsx("div", { className: "onboarding-steps", children: steps.map((s) => (_jsxs("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [_jsx("span", { className: "onboarding-step-icon", children: s.icon }), _jsx("span", { className: "onboarding-step-label", children: s.label }), _jsx("span", { className: "onboarding-step-check", children: s.done && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
 }
 OnboardingChecklist.displayName = "OnboardingChecklist";

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

@@ -13,7 +13,7 @@ const config = defineRecipe({
 
     & .onboarding-head { display: flex; align-items: center; gap: ${c.space["1"]}; }
     & .onboarding-title { flex: 1; min-width: 0; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
-    & .onboarding-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: ${c.fgMuted}; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .onboarding-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: ${c.size.chip}; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
     & .onboarding-iconbtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
 
     & .onboarding-sub { font-size: ${c.text.sm}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
@@ -24,7 +24,7 @@ const config = defineRecipe({
     & .onboarding-seg[data-done] { background: ${c.bgBrandSolid}; }
 
     & .onboarding-steps { display: flex; flex-direction: column; }
-    & .onboarding-step { display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding: 0 ${c.space["1"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: left; cursor: pointer; transition: background-color .12s; }
+    & .onboarding-step { display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding: 0 ${c.space["1"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; transition: background-color .12s; }
     & .onboarding-step:hover { background: ${c.bgRaised}; }
     & .onboarding-step-icon { display: inline-flex; flex-shrink: 0; color: ${c.fgMuted}; }
     & .onboarding-step-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }