@crisp-ui-kit/crisp 0.57.3 → 0.57.4

package/dist/cjs/product/taskeditpopover/taskeditpopover.js

@@ -0,0 +1,159 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TaskEditPopover = TaskEditPopover;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const popover_1 = require("../../components/popover");
+const core_1 = require("../../core");
+const assigneepicker_1 = require("../assigneepicker/assigneepicker");
+const recordpicker_1 = require("../recordpicker/recordpicker");
+const taskeditpopover_recipe_1 = require("./taskeditpopover.recipe");
+/**
+ * A task's "Edit task" popover -- measured live on app.attio.com's Tasks
+ * page: a checkbox + editable title, then a chip row (due date / assigned /
+ * add record), a "more actions" kebab, and Cancel/Save. Composes
+ * `AssigneePicker` and `RecordPicker` (both crisp#626) behind their own
+ * chips, using the same core floating primitives `Popover` itself is built
+ * on rather than `Popover` directly (its content hardcodes a 360px max
+ * width, well under this popover's own measured 800px).
+ */
+function TaskEditPopover({ trigger, open: openProp, defaultOpen, onOpenChange, title, onTitleChange, done = false, onToggleDone, dueDateLabel, dueDatePicker, assignee = null, users = [], onAssigneeChange, linkedRecordCount = 0, recordCandidates = [], recordCandidatesLoading, onRecordQueryChange, onSelectRecord, menu, onCancel, onSave, headingLabel: headingLabelProp, closeLabel: closeLabelProp, dueDatePlaceholder: dueDatePlaceholderProp, assignLabel: assignLabelProp, assignedToLabel: assignedToLabelProp, addRecordLabel: addRecordLabelProp, linkedRecordLabel: linkedRecordLabelProp, moreActionsLabel: moreActionsLabelProp, cancelLabel: cancelLabelProp, cancelKeyLabel: cancelKeyLabelProp, saveLabel: saveLabelProp, className, }) {
+    const headingLabel = (0, core_1.useCrispMessage)(headingLabelProp, "Edit task");
+    const closeLabel = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
+    const dueDatePlaceholder = (0, core_1.useCrispMessage)(dueDatePlaceholderProp, "Set due date");
+    const assignLabel = (0, core_1.useCrispMessage)(assignLabelProp, "Assign");
+    const assignedToLabel = (0, core_1.useCrispMessage)(assignedToLabelProp, "Assigned to");
+    const addRecordLabel = (0, core_1.useCrispMessage)(addRecordLabelProp, "Add record");
+    const linkedRecordLabel = (0, core_1.useCrispMessage)(linkedRecordLabelProp, linkedRecordCount === 1
+        ? "1 linked record"
+        : `${linkedRecordCount} linked records`);
+    const moreActionsLabel = (0, core_1.useCrispMessage)(moreActionsLabelProp, "More actions");
+    const cancelLabel = (0, core_1.useCrispMessage)(cancelLabelProp, "Cancel");
+    const cancelKeyLabel = (0, core_1.useCrispMessage)(cancelKeyLabelProp, "Esc");
+    const saveLabel = (0, core_1.useCrispMessage)(saveLabelProp, "Save");
+    const surfaceId = React.useId();
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? internalOpen;
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const [pos, setPos] = React.useState({});
+    const setOpen = React.useCallback((next) => {
+        if (openProp === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    const place = () => {
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const { style } = (0, core_1.placeFloating)({
+            rect: el.getBoundingClientRect(),
+            align: "start",
+            gap: 6,
+            flipBelow: 300,
+            anchor: el,
+        });
+        setPos(style);
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reposition each time it opens
+    React.useLayoutEffect(() => {
+        if (open)
+            place();
+    }, [open]);
+    React.useEffect(() => {
+        if (!open || !contentRef.current)
+            return;
+        return (0, core_1.registerFloatingLayer)(contentRef.current);
+    }, [open]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            const target = e.target;
+            if (rootRef.current?.contains(target))
+                return;
+            if (contentRef.current?.contains(target))
+                return;
+            if ((0, core_1.isInsideLaterFloatingLayer)(target, contentRef.current))
+                return;
+            setOpen(false);
+            onCancel?.();
+        };
+        document.addEventListener("pointerdown", onDown);
+        return () => document.removeEventListener("pointerdown", onDown);
+    }, [open, setOpen, onCancel]);
+    const cancel = () => {
+        setOpen(false);
+        onCancel?.();
+    };
+    const save = () => {
+        setOpen(false);
+        onSave?.();
+    };
+    const triggerEl = React.cloneElement(trigger, {
+        ref: triggerRef,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? surfaceId : undefined,
+        onClick: (e) => {
+            trigger.props.onClick?.(e);
+            setOpen(!open);
+        },
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, style: { display: "contents" }, children: [triggerEl, open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, id: surfaceId, role: "dialog", "aria-label": headingLabel, className: (0, taskeditpopover_recipe_1.taskeditpopoverRecipe)({ className }), style: pos, onKeyDown: (e) => {
+                        if (e.key === "Escape") {
+                            e.preventDefault();
+                            cancel();
+                        }
+                        if (e.key === "Enter" &&
+                            e.metaKey === false &&
+                            e.ctrlKey === false &&
+                            e.target.tagName !== "TEXTAREA") {
+                            // Enter saves, same as Attio's own "Save ⏎" -- but never
+                            // steals it from a nested picker's own Enter-to-commit.
+                            if (!(0, core_1.isInsideLaterFloatingLayer)(e.target, contentRef.current)) {
+                                save();
+                            }
+                        }
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-taskeditpopover-header", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-taskeditpopover-heading", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleCheckBig, { size: 16, strokeWidth: 1.75 }), headingLabel] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-taskeditpopover-close", "aria-label": closeLabel, onClick: cancel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-taskeditpopover-body", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "crisp-taskeditpopover-check", checked: done, "aria-label": title, onChange: (e) => onToggleDone?.(e.target.checked) }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "crisp-taskeditpopover-title", value: title, onChange: (e) => onTitleChange?.(e.target.value) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-taskeditpopover-footer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-taskeditpopover-chips", children: [(0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "start", "aria-label": dueDatePlaceholder, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-taskeditpopover-chip", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { size: 14, strokeWidth: 1.75 }), dueDateLabel ?? dueDatePlaceholder] }), children: dueDatePicker }), (0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "start", "aria-label": assignedToLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-taskeditpopover-chip", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "@" }), assignee != null
+                                                        ? `${assignedToLabel} ${assignee.name}`
+                                                        : assignLabel] }), children: (0, jsx_runtime_1.jsx)(assigneepicker_1.AssigneePicker, { users: users, assignee: assignee, onAssigneeChange: onAssigneeChange }) }), (0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "start", "aria-label": addRecordLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-taskeditpopover-chip", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u2197" }), linkedRecordCount > 0
+                                                        ? linkedRecordLabel
+                                                        : addRecordLabel] }), children: (0, jsx_runtime_1.jsx)(recordpicker_1.RecordPicker, { records: recordCandidates, loading: recordCandidatesLoading, onQueryChange: onRecordQueryChange, onSelect: onSelectRecord }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-taskeditpopover-actions", children: [menu != null && ((0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "end", "aria-label": moreActionsLabel, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-taskeditpopover-kebab", "aria-label": moreActionsLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: menu })), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-taskeditpopover-cancel", onClick: cancel, children: [cancelLabel, (0, jsx_runtime_1.jsx)("kbd", { className: "crisp-taskeditpopover-key", children: cancelKeyLabel })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-taskeditpopover-save", onClick: save, children: [saveLabel, (0, jsx_runtime_1.jsx)("kbd", { className: "crisp-taskeditpopover-key", children: "\u23CE" })] })] })] })] }) }))] }));
+}
+TaskEditPopover.displayName = "TaskEditPopover";

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.taskeditpopoverRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The "Edit task" popover -- measured live on app.attio.com's Tasks page
+// (click a task row): an 800px-wide floating card, radius 12, a single
+// subtle 1px ring shadow (no blur/offset layer -- lighter than
+// `elevation.floating`, which every other crisp overlay uses; this one
+// really does measure as just the ring, confirmed by walking every
+// ancestor up to the floating root). Same core floating primitives
+// `Popover`/`savedviews` already use directly (this doesn't reuse
+// `Popover` itself: its own `.crisp-popover-content` hardcodes a
+// max-width of min(360px, 92vw), far under this popover's measured width).
+//
+// Three rows: a 44px header (icon+"Edit task", a bottom hairline divider,
+// a close button), a body row (checkbox + editable title), and a 44px
+// footer (the due-date/assigned/add-record chip row on the left, the
+// kebab + Cancel/Save on the right). The chip row's own 10px/400 muted
+// caption size and the footer buttons' matching 10px labels don't fit any
+// existing text-scale token (closest is `text.xs` at 11px) -- raw px per
+// Golden Rule 3's "genuinely intrinsic size" exception, same as
+// `dialog.recipe.ts`'s own submit-key glyphs.
+const config = (0, core_1.defineRecipe)({
+    name: "taskeditpopover",
+    // Portaled root: position/z-index/the open transition live here as raw
+    // literal CSS (not `base`, which lightningcss nests under `.${prefixed}`
+    // at BUILD time -- fine for the plain declarations below, but this exact
+    // selector text has to exist as source text for `spec-check.mjs`'s
+    // overlay-escape/animation scan, the same reason Popover/Menu/Select
+    // declare their own portaled root in `globalCss` rather than `base`).
+    globalCss: `.crisp-taskeditpopover { position: fixed; z-index: 70; pointer-events: auto; opacity: 1; transform: scale(1); transition: opacity 0.08s ease, transform 0.08s ease; @starting-style { opacity: 0; transform: scale(0.97) translateY(-4px); } }`,
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 800px; max-width: 92vw; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07); font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-taskeditpopover-header { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["2"]}; height: 44px; box-sizing: border-box; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-taskeditpopover-heading { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-taskeditpopover-heading svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-taskeditpopover-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-taskeditpopover-close:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+
+    & .crisp-taskeditpopover-body { display: flex; align-items: center; gap: ${tokens_1.contract.space["2.5"]}; min-height: 52px; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]}; }
+    & .crisp-taskeditpopover-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); cursor: pointer; }
+    & .crisp-taskeditpopover-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 30%, transparent); }
+    & .crisp-taskeditpopover-check:checked { background: ${tokens_1.contract.bgBrandSolid} center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
+    & .crisp-taskeditpopover-title { flex: 1; min-width: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-taskeditpopover-title:focus-visible { outline: 2px solid ${tokens_1.contract.strokeFocusRing}; outline-offset: 2px; }
+
+    & .crisp-taskeditpopover-footer { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["2"]}; height: 44px; box-sizing: border-box; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["3"]}; }
+    & .crisp-taskeditpopover-chips { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; min-width: 0; }
+    & .crisp-taskeditpopover-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 28px; box-sizing: border-box; padding: 4px 8px 4px 6px; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); font-family: inherit; font-size: 10px; white-space: nowrap; cursor: pointer; }
+    & .crisp-taskeditpopover-chip svg { flex-shrink: 0; }
+    & .crisp-taskeditpopover-chip:hover { background: ${tokens_1.contract.bgRaised}; }
+
+    & .crisp-taskeditpopover-actions { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; }
+    & .crisp-taskeditpopover-kebab { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 6px; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; cursor: pointer; }
+    & .crisp-taskeditpopover-kebab:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-taskeditpopover-cancel { display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; padding: 4px 6px 4px 8px; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: 10px; cursor: pointer; }
+    & .crisp-taskeditpopover-cancel:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-taskeditpopover-save { display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; padding: 4px 6px 4px 8px; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: 10px; cursor: pointer; }
+    & .crisp-taskeditpopover-save:hover { background: ${tokens_1.contract.bgBrandSolidPressed}; }
+    & .crisp-taskeditpopover-key { color: color-mix(in srgb, currentColor 55%, transparent); font-size: 10px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.taskeditpopoverRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/workspaceswitchermenu/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./workspaceswitchermenu"), exports);

package/dist/cjs/product/workspaceswitchermenu/workspaceswitchermenu.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkspaceSwitcherMenu = WorkspaceSwitcherMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const avatar_1 = require("../../components/avatar");
+const menu_1 = require("../../components/menu");
+const core_1 = require("../../core");
+/**
+ * The FIXED content of Attio's own workspace-switcher popover (crisp#632) —
+ * live-measured off app.attio.com/techpartners: each workspace as a
+ * checked/unchecked row, then New workspace, then Account settings /
+ * Workspace settings, then Invite members / Upgrade Attio / Refer another
+ * team, then Apps and integrations, then Sign out — each group separated by
+ * a hairline, matching a 280px-wide popover.
+ *
+ * This is CONTENT, not a component with its own trigger/popover: pass it as
+ * `Sidebar`'s own `workspaceMenu` prop (crisp#415 already builds the real
+ * menu-button trigger/popover machinery around whatever children it's
+ * given — the workspace switcher itself has no fixed content of its own by
+ * design, since which settings exist is the consumer's; this is that fixed
+ * content, ready-made, the same way `defaultCommandItems` is for `Command`).
+ */
+function WorkspaceSwitcherMenu({ workspaces, currentWorkspaceId, onSelectWorkspace, onNewWorkspace, onAccountSettings, onWorkspaceSettings, onInviteMembers, onUpgradeAttio, onReferAnotherTeam, onAppsAndIntegrations, onSignOut, newWorkspaceLabel, accountSettingsLabel, workspaceSettingsLabel, inviteMembersLabel, upgradeAttioLabel, referAnotherTeamLabel, appsAndIntegrationsLabel, signOutLabel, }) {
+    const newWorkspace = (0, core_1.useCrispMessage)(newWorkspaceLabel, "New workspace");
+    const accountSettings = (0, core_1.useCrispMessage)(accountSettingsLabel, "Account settings");
+    const workspaceSettings = (0, core_1.useCrispMessage)(workspaceSettingsLabel, "Workspace settings");
+    const inviteMembers = (0, core_1.useCrispMessage)(inviteMembersLabel, "Invite members");
+    const upgradeAttio = (0, core_1.useCrispMessage)(upgradeAttioLabel, "Upgrade Attio");
+    const referAnotherTeam = (0, core_1.useCrispMessage)(referAnotherTeamLabel, "Refer another team");
+    const appsAndIntegrations = (0, core_1.useCrispMessage)(appsAndIntegrationsLabel, "Apps and integrations");
+    const signOut = (0, core_1.useCrispMessage)(signOutLabel, "Sign out");
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [workspaces.map((ws) => {
+                const checked = ws.id === currentWorkspaceId;
+                return ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: ws.avatarTone, children: ws.avatarLabel }), trailingIcon: checked ? ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleCheck, { size: 16, strokeWidth: 1.75, className: "crisp-workspaceswitchermenu-check" })) : undefined, "aria-checked": checked, onSelect: () => onSelectWorkspace?.(ws.id), children: ws.name }, ws.id));
+            }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }), onSelect: onNewWorkspace, children: newWorkspace }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.User, { size: 16, strokeWidth: 1.75 }), onSelect: onAccountSettings, children: accountSettings }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 16, strokeWidth: 1.75 }), onSelect: onWorkspaceSettings, children: workspaceSettings }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserPlus, { size: 16, strokeWidth: 1.75 }), onSelect: onInviteMembers, children: inviteMembers }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowUp, { size: 16, strokeWidth: 1.75 }), onSelect: onUpgradeAttio, children: upgradeAttio }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.HeartHandshake, { size: 16, strokeWidth: 1.75 }), onSelect: onReferAnotherTeam, children: referAnotherTeam }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Grid2x2, { size: 16, strokeWidth: 1.75 }), onSelect: onAppsAndIntegrations, children: appsAndIntegrations }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75 }), onSelect: onSignOut, children: signOut })] }));
+}
+WorkspaceSwitcherMenu.displayName = "WorkspaceSwitcherMenu";

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.workspaceswitchermenuRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+/**
+ * `WorkspaceSwitcherMenu` owns almost no styling of its own — every visible
+ * pixel besides the two rules below is `Menu`/`MenuItem`'s own
+ * already-measured recipe (crisp#632):
+ * - The RTL mirror for its "Sign out" icon: `LogOut` is treated as
+ *   direction-bearing (`build/spec-check.mjs`'s own DIRECTIONAL set), so
+ *   it's marked and mirrored the same way ObjectPageMenu's Notifications
+ *   chevron is (crisp#616) — see that file's identical recipe for why this
+ *   is a plain absolute selector, not `${rtlFlipCss}`'s `&`-nesting form.
+ * - The current-workspace checkmark's colour: `.crisp-menu-item svg` already
+ *   sets every menu icon to `fgMuted` (menu.recipe.ts), which is deliberate
+ *   there but wrong for THIS one glyph — Attio's own is brand-coloured, not
+ *   muted, to read as a status rather than a plain icon. `svg` doubled in
+ *   the selector (not just the class) so it outranks that rule under equal
+ *   source order instead of depending on file concatenation order.
+ */
+const config = (0, core_1.defineRecipe)({
+    name: "workspaceswitchermenu",
+    base: "",
+    globalCss: `
+    [dir="rtl"] .crisp-menu-item svg[data-rtl-flip] { transform: scaleX(-1); }
+    .crisp-menu-item svg.crisp-workspaceswitchermenu-check { color: ${tokens_1.contract.fgBrandContrast}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.workspaceswitchermenuRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/tokens/palette.js

@@ -277,4 +277,31 @@ exports.palette = {
     // s3 (shadow.yaml) -- the listbox's single-layer floating shadow, in place
     // of crisp's own multi-layer `elevation.floating` for this component only.
     selectShadow: { light: "#0000001f", dark: "#000000cc" },
+    // your-moon/crisp#998: the 12-colour tag/option-colour palette a workspace
+    // admin picks for a Select/MultiSelect option, measured live off
+    // app.attio.com's Categories multi-select field (table-cell/column-editor
+    // pill, not the larger tinted-text activity-feed variant -- see
+    // ~/grc-parity/attio-tag-palette.md). All 12 are near-white pastels with
+    // flat black text regardless of which one -- Attio's theme toggle is
+    // off-limits (same restriction every other raw entry in this file notes),
+    // so no dark variant was reachable; light is reused for dark, same as
+    // `cyan600`/`purple600`/`orange600` above already do for the same reason.
+    // Numbered 1-12 rather than named: Attio assigns them by an internal hash
+    // of the option's id, not by any hue name a consumer would recognise.
+    tagSwatch1: { light: "#fff3cc", dark: "#fff3cc" },
+    tagSwatch2: { light: "#f4fbcb", dark: "#f4fbcb" },
+    tagSwatch3: { light: "#fdf7c4", dark: "#fdf7c4" },
+    tagSwatch4: { light: "#feecf3", dark: "#feecf3" },
+    tagSwatch5: { light: "#e0fced", dark: "#e0fced" },
+    tagSwatch6: { light: "#ddf7ff", dark: "#ddf7ff" },
+    tagSwatch7: { light: "#f6f7f7", dark: "#f6f7f7" },
+    tagSwatch8: { light: "#ffebeb", dark: "#ffebeb" },
+    tagSwatch9: { light: "#feeee1", dark: "#feeee1" },
+    tagSwatch10: { light: "#e5eeff", dark: "#e5eeff" },
+    tagSwatch11: { light: "#f5f0ff", dark: "#f5f0ff" },
+    tagSwatch12: { light: "#fdedff", dark: "#fdedff" },
+    // measured alongside the palette above: flat opaque black, not `ink`
+    // (#101112) -- a genuinely different, slightly darker hex Attio uses only
+    // for this one pill's text, regardless of which of the 12 backgrounds.
+    tagSwatchInk: { light: "#000000", dark: "#000000" },
 };

package/dist/cjs/tokens/semantic.js

@@ -129,4 +129,24 @@ exports.semantic = {
     strokeSelectDivider: "selectDivider",
     fgSelectPlaceholder: "selectPlaceholder",
     shadowSelect: "selectShadow",
+    /** your-moon/crisp#998: a Select/MultiSelect option's fixed tag colour
+     *  (`swatch`, 1-12) -- see palette.ts's own comment on `tagSwatch1` for
+     *  the measurement. Distinct from `Select`'s existing `color` (an
+     *  arbitrary-CSS status dot) and `MultiSelect`'s existing `tone` (crisp's
+     *  own semantic 7-tone chip family): this is Attio's own enumerable,
+     *  workspace-admin-assigned palette, reproduced verbatim rather than
+     *  mapped onto either existing mechanism. */
+    bgTagSwatch1: "tagSwatch1",
+    bgTagSwatch2: "tagSwatch2",
+    bgTagSwatch3: "tagSwatch3",
+    bgTagSwatch4: "tagSwatch4",
+    bgTagSwatch5: "tagSwatch5",
+    bgTagSwatch6: "tagSwatch6",
+    bgTagSwatch7: "tagSwatch7",
+    bgTagSwatch8: "tagSwatch8",
+    bgTagSwatch9: "tagSwatch9",
+    bgTagSwatch10: "tagSwatch10",
+    bgTagSwatch11: "tagSwatch11",
+    bgTagSwatch12: "tagSwatch12",
+    fgTagSwatch: "tagSwatchInk",
 };

package/dist/datatable.css

@@ -290,14 +290,29 @@
        Avatar's own already-shipped shape="rounded" value, not a new number.
        shape="circle" reuses Avatar's own shape="circle" value (radius.full)
        the same way, measured live on a real Attio person avatar. */
-    & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-tone); background: var(--crisp-bg-brand-solid); }
     & .crisp-datatable-avatar[data-shape="circle"] { border-radius: var(--crisp-radius-full); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
-    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
-    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
-    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
-    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
-    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    /* your-moon/crisp#891: every data-tone override painted ONLY a
+       background, inheriting the base rule's white fgOnBrand -- white
+       clears AA against none of these seven fills (brand 3.23:1, success
+       3.96, warning 4.12, danger 3.76, purple 3.58, cyan 2.30, orange
+       2.77). fgOnTone (ink, #101112 -- semantic.ts's own comment: "dark ink
+       clears AA on every tone in both themes") clears 4.5:1+ on every fill
+       here with a comfortable margin (brand 5.85, success 4.77/6.29,
+       danger 5.03/6.19, purple 5.27, cyan 8.23, orange 6.83, light/dark),
+       so the base rule's colour moves there and every override keeps it --
+       EXCEPT warning, whose raw fill (bgWarning) only clears 4.59:1 in
+       light, too thin a margin to rely on: it takes bgWarningSolid instead,
+       the same solid-warning-plus-ink pair Badge's own solid variant
+       already established (13.98/7.83), for the same reason (see
+       tokens/palette.ts's amberSolid comment). No background changes
+       otherwise -- the fills themselves are unaffected, only the text. */
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning-solid); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); color: var(--crisp-fg-on-tone); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
@@ -308,6 +323,24 @@
     & .crisp-datatable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); }
     & .crisp-datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured
+       live, see tokens/palette.ts's tagSwatch1 comment) -- flat black
+       text, no ring, unlike the tone family above. 7px radius/10px text
+       are measured literals (no matching step in the shared scale, same
+       as Select's own .crisp-select-swatch). */
+    & .crisp-datatable-swatch { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: 7px; font-size: 10px; font-weight: var(--crisp-weight-regular); white-space: nowrap; color: var(--crisp-fg-tag-swatch); }
+    & .crisp-datatable-swatch[data-swatch="1"] { background: var(--crisp-bg-tag-swatch1); }
+    & .crisp-datatable-swatch[data-swatch="2"] { background: var(--crisp-bg-tag-swatch2); }
+    & .crisp-datatable-swatch[data-swatch="3"] { background: var(--crisp-bg-tag-swatch3); }
+    & .crisp-datatable-swatch[data-swatch="4"] { background: var(--crisp-bg-tag-swatch4); }
+    & .crisp-datatable-swatch[data-swatch="5"] { background: var(--crisp-bg-tag-swatch5); }
+    & .crisp-datatable-swatch[data-swatch="6"] { background: var(--crisp-bg-tag-swatch6); }
+    & .crisp-datatable-swatch[data-swatch="7"] { background: var(--crisp-bg-tag-swatch7); }
+    & .crisp-datatable-swatch[data-swatch="8"] { background: var(--crisp-bg-tag-swatch8); }
+    & .crisp-datatable-swatch[data-swatch="9"] { background: var(--crisp-bg-tag-swatch9); }
+    & .crisp-datatable-swatch[data-swatch="10"] { background: var(--crisp-bg-tag-swatch10); }
+    & .crisp-datatable-swatch[data-swatch="11"] { background: var(--crisp-bg-tag-swatch11); }
+    & .crisp-datatable-swatch[data-swatch="12"] { background: var(--crisp-bg-tag-swatch12); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
     /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as

package/dist/datatable.layered.css

@@ -291,14 +291,29 @@
        Avatar's own already-shipped shape="rounded" value, not a new number.
        shape="circle" reuses Avatar's own shape="circle" value (radius.full)
        the same way, measured live on a real Attio person avatar. */
-    & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-tone); background: var(--crisp-bg-brand-solid); }
     & .crisp-datatable-avatar[data-shape="circle"] { border-radius: var(--crisp-radius-full); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
-    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
-    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
-    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
-    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
-    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    /* your-moon/crisp#891: every data-tone override painted ONLY a
+       background, inheriting the base rule's white fgOnBrand -- white
+       clears AA against none of these seven fills (brand 3.23:1, success
+       3.96, warning 4.12, danger 3.76, purple 3.58, cyan 2.30, orange
+       2.77). fgOnTone (ink, #101112 -- semantic.ts's own comment: "dark ink
+       clears AA on every tone in both themes") clears 4.5:1+ on every fill
+       here with a comfortable margin (brand 5.85, success 4.77/6.29,
+       danger 5.03/6.19, purple 5.27, cyan 8.23, orange 6.83, light/dark),
+       so the base rule's colour moves there and every override keeps it --
+       EXCEPT warning, whose raw fill (bgWarning) only clears 4.59:1 in
+       light, too thin a margin to rely on: it takes bgWarningSolid instead,
+       the same solid-warning-plus-ink pair Badge's own solid variant
+       already established (13.98/7.83), for the same reason (see
+       tokens/palette.ts's amberSolid comment). No background changes
+       otherwise -- the fills themselves are unaffected, only the text. */
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning-solid); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); color: var(--crisp-fg-on-tone); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
@@ -309,6 +324,24 @@
     & .crisp-datatable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); }
     & .crisp-datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured
+       live, see tokens/palette.ts's tagSwatch1 comment) -- flat black
+       text, no ring, unlike the tone family above. 7px radius/10px text
+       are measured literals (no matching step in the shared scale, same
+       as Select's own .crisp-select-swatch). */
+    & .crisp-datatable-swatch { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: 7px; font-size: 10px; font-weight: var(--crisp-weight-regular); white-space: nowrap; color: var(--crisp-fg-tag-swatch); }
+    & .crisp-datatable-swatch[data-swatch="1"] { background: var(--crisp-bg-tag-swatch1); }
+    & .crisp-datatable-swatch[data-swatch="2"] { background: var(--crisp-bg-tag-swatch2); }
+    & .crisp-datatable-swatch[data-swatch="3"] { background: var(--crisp-bg-tag-swatch3); }
+    & .crisp-datatable-swatch[data-swatch="4"] { background: var(--crisp-bg-tag-swatch4); }
+    & .crisp-datatable-swatch[data-swatch="5"] { background: var(--crisp-bg-tag-swatch5); }
+    & .crisp-datatable-swatch[data-swatch="6"] { background: var(--crisp-bg-tag-swatch6); }
+    & .crisp-datatable-swatch[data-swatch="7"] { background: var(--crisp-bg-tag-swatch7); }
+    & .crisp-datatable-swatch[data-swatch="8"] { background: var(--crisp-bg-tag-swatch8); }
+    & .crisp-datatable-swatch[data-swatch="9"] { background: var(--crisp-bg-tag-swatch9); }
+    & .crisp-datatable-swatch[data-swatch="10"] { background: var(--crisp-bg-tag-swatch10); }
+    & .crisp-datatable-swatch[data-swatch="11"] { background: var(--crisp-bg-tag-swatch11); }
+    & .crisp-datatable-swatch[data-swatch="12"] { background: var(--crisp-bg-tag-swatch12); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
     /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as

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

@@ -132,19 +132,24 @@ const spec = defineSpec({
             // shape="icon" already does for every other size, so it needs no
             // extra rule), 4px gap between multiple children.
             //
-            // The label itself is NOT 14px/#682's tracking -- getComputedStyle on
-            // the live button (fonts loaded, DPR 2, zero zoom/transform anywhere
-            // in the ancestor chain) reads 10px/regular/15px line-height/normal
-            // tracking, independently matching `recordpanel.recipe.ts`'s own
-            // "View all" measurement (10px/400) elsewhere in this codebase. 10px
-            // sits below the text scale's 11px floor, so it's a literal here, the
-            // same as recordpanel's.
+            // Follow-up correction (still #688): the label is 12px/500(medium)/
+            // 16px line-height/normal tracking -- NOT #682's 14px button tracking,
+            // and NOT the 10px/regular/15px this file shipped with first. That
+            // first pass read getComputedStyle on the `<button>` element itself;
+            // Attio's actual label lives in an inner `<div>` that overrides
+            // font-size/weight/line-height on top of it (confirmed by walking the
+            // full child tree, on "View all" AND "Today, <date>", both Home and
+            // the savedviews toolbar's own "Save for everyone") -- the outer
+            // button's own 10px/400/15px is real but never what's on screen.
+            // 12px is already `c.text.sm` and 500 is already the base's own
+            // default `fontWeight` (no override needed for either); only
+            // line-height and tracking still diverge from the base's 20px/
+            // -0.07px and need their own values here.
             xs: {
                 height: "20px",
                 paddingInline: c.space["1.5"],
-                fontSize: "10px",
-                fontWeight: c.weight.regular,
-                lineHeight: "15px",
+                fontSize: c.text.sm,
+                lineHeight: "16px",
                 letterSpacing: "normal",
                 borderRadius: c.radius.sm,
                 gap: c.space["1"],

package/dist/esm/components/datatable/datatable.js

@@ -390,14 +390,17 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
             const tags = Array.isArray(value) ? value : [];
             if (!tags.length)
                 return empty;
-            return (_jsx("span", { className: "crisp-datatable-tags", children: tags.map((t) => (_jsx("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
+            return (_jsx("span", { className: "crisp-datatable-tags", children: tags.map((t) => col.swatches?.[t] ? (_jsx("span", { className: "crisp-datatable-swatch", "data-swatch": col.swatches[t], children: t }, t)) : (_jsx("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
         }
         case "status": {
             const s = asText(value);
             if (!s)
                 return empty;
-            // tone is looked up by the RAW status, so formatting the label (casing,
-            // translation) can never silently repaint the chip
+            // tone/swatch is looked up by the RAW status, so formatting the label
+            // (casing, translation) can never silently repaint the chip
+            if (col.swatches?.[s]) {
+                return (_jsx("span", { className: "crisp-datatable-swatch", "data-swatch": col.swatches[s], children: display || s }));
+            }
             return (_jsx("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
         case "rating": {