@crisp-ui-kit/crisp 0.44.0 → 0.46.0

package/dist/chip.css

@@ -0,0 +1,27 @@
+.crisp-chip {
+  display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding-inline: 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;
+}
+.crisp-chip--tone_neutral {
+  background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle);
+}
+.crisp-chip--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+}
+.crisp-chip--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+}
+.crisp-chip--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent);
+}
+.crisp-chip--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+}
+.crisp-chip--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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent);
+}
+.crisp-chip--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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent);
+}
+.crisp-chip--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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
+}

package/dist/chip.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface ChipVariants {
+  tone?: "neutral" | "brand" | "success" | "warning" | "danger" | "purple" | "cyan" | "orange";
+}
+
+export declare const chipRecipe: RecipeFn<{ tone: { neutral: string; brand: string; success: string; warning: string; danger: string; purple: string; cyan: string; orange: string } }>;

package/dist/chip.layered.css

@@ -0,0 +1,29 @@
+@layer crisp-components {
+.crisp-chip {
+  display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding-inline: 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;
+}
+.crisp-chip--tone_neutral {
+  background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle);
+}
+.crisp-chip--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+}
+.crisp-chip--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+}
+.crisp-chip--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent);
+}
+.crisp-chip--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+}
+.crisp-chip--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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent);
+}
+.crisp-chip--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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent);
+}
+.crisp-chip--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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
+}
+}

package/dist/cjs/components/chip/chip.js

@@ -0,0 +1,58 @@
+"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.Chip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const chip_recipe_1 = require("./chip.recipe");
+/**
+ * A small pill — the same measured chip RecordsTable, RecordPanel and
+ * MultiSelect already draw as `.crisp-recordstable-tag`, exported standalone
+ * for surfaces that need one without a table or a fixed option set (e.g. a
+ * free-text tag list).
+ *
+ * This ships the measured body only. Attio's removable × on a chip needs a
+ * live, populated multi-value editor to measure against, and none was
+ * reachable this round (a person's "Email addresses" field was empty on the
+ * only record checked, and "Categories" removes via a checkbox toggle, not
+ * an inline ×) — so `Chip` has no `onRemove`/remove button yet. Add one once
+ * that surface can be measured; don't guess the icon, its hit target, or its
+ * spacing from the label.
+ */
+exports.Chip = React.forwardRef(({ tone, className, asChild, children, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(core_1.Primitive.span, { ref: ref, asChild: asChild, className: (0, chip_recipe_1.chipRecipe)({ tone, className }), ...props, children: children }));
+});
+exports.Chip.displayName = "Chip";

package/dist/cjs/components/chip/chip.recipe.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spec = exports.chipRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The same measured pill RecordsTable/RecordPanel/MultiSelect already draw
+// as ".crisp-recordstable-tag" (product/recordstable/recordstable.tag.ts's
+// recordTagCss): 22px tall, `padding: 0 4px`, `border-radius: chip`,
+// 14px/20px at weight 500, and a 1px inset ring in the tone's colour. That
+// export is raw CSS written to be spliced under another component's own
+// `&` root (RecordsTable/RecordPanel nest it inside their own recipe), so it
+// can't be reused verbatim here — Chip's root IS the styled element, not a
+// wrapper around one. The values below are transcribed from recordTagCss,
+// not re-measured; keep the two in sync by hand if either changes.
+const ring = (v, pct) => `inset 0 0 0 1px color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const onFg = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, ${tokens_1.contract.fgPrimary})`;
+const spec = (0, core_1.defineSpec)({
+    name: "chip",
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        height: tokens_1.contract.size.chip,
+        paddingInline: tokens_1.contract.space["1"],
+        borderRadius: tokens_1.contract.radius.chip,
+        fontSize: tokens_1.contract.text.lg,
+        lineHeight: "20px",
+        fontWeight: tokens_1.contract.weight.medium,
+        whiteSpace: "nowrap",
+    },
+    variants: {
+        tone: {
+            neutral: {
+                background: soft(tokens_1.contract.fgPrimary, 6),
+                color: soft(tokens_1.contract.fgPrimary, 82),
+                boxShadow: `inset 0 0 0 1px ${tokens_1.contract.borderSubtle}`,
+            },
+            brand: {
+                background: soft(tokens_1.contract.bgBrandSolid, 14),
+                color: onFg(tokens_1.contract.bgBrandSolid, 82),
+                boxShadow: ring(tokens_1.contract.bgBrandSolid, 30),
+            },
+            success: {
+                background: soft(tokens_1.contract.bgSuccess, 16),
+                color: onFg(tokens_1.contract.bgSuccess, 78),
+                boxShadow: ring(tokens_1.contract.bgSuccess, 30),
+            },
+            warning: {
+                background: soft(tokens_1.contract.bgWarning, 18),
+                color: onFg(tokens_1.contract.bgWarning, 82),
+                boxShadow: ring(tokens_1.contract.bgWarning, 30),
+            },
+            danger: {
+                background: soft(tokens_1.contract.bgDanger, 15),
+                color: onFg(tokens_1.contract.bgDanger, 80),
+                boxShadow: ring(tokens_1.contract.bgDanger, 30),
+            },
+            purple: {
+                background: soft(tokens_1.contract.bgPurple, 16),
+                color: onFg(tokens_1.contract.bgPurple, 80),
+                boxShadow: ring(tokens_1.contract.bgPurple, 30),
+            },
+            cyan: {
+                background: soft(tokens_1.contract.bgCyan, 18),
+                color: onFg(tokens_1.contract.bgCyan, 82),
+                boxShadow: ring(tokens_1.contract.bgCyan, 30),
+            },
+            orange: {
+                background: soft(tokens_1.contract.bgOrange, 16),
+                color: onFg(tokens_1.contract.bgOrange, 82),
+                boxShadow: ring(tokens_1.contract.bgOrange, 30),
+            },
+        },
+    },
+    defaultVariants: { tone: "neutral" },
+});
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.chipRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
+exports.default = config;

package/dist/cjs/components/chip/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipRecipe = exports.Chip = void 0;
+var chip_1 = require("./chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return chip_1.Chip; } });
+var chip_recipe_1 = require("./chip.recipe");
+Object.defineProperty(exports, "chipRecipe", { enumerable: true, get: function () { return chip_recipe_1.chipRecipe; } });

package/dist/cjs/components/menu/menu.js

@@ -126,6 +126,24 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open, setOpen]);
+    // A document-level fallback for Escape (#376 come back). The content's own
+    // Escape handling (`useMenuKeyboard`'s onKeyDown, below) only fires once
+    // focus is actually inside `.crisp-menu-content` -- but focus lands there
+    // via a `requestAnimationFrame` scheduled on open (menu-keyboard.ts), not
+    // synchronously. An Escape pressed before that frame paints reaches
+    // whatever still has focus (the trigger button), which is outside the
+    // content div's subtree, so `onContentKeyDown` never sees it and nothing
+    // closes. This listener doesn't depend on focus location, so it closes
+    // regardless -- the same pattern `ContextMenu` already uses for the
+    // identical reason (its own comment: "Escape is handled twice on
+    // purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     const { onKeyDown: onContentKeyDown } = (0, menu_keyboard_1.useMenuKeyboard)({
         open,
         close,

package/dist/cjs/components/multiselect/multiselect.js

@@ -125,10 +125,10 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         if (searchable)
             requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
-    const close = () => {
+    const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
-    };
+    }, []);
     const activeId = open && highlight >= 0 && highlight < filtered.length
         ? optionId(highlight)
         : undefined;
@@ -182,6 +182,18 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
+    // A document-level fallback for Escape (#376 come back) -- see Select's
+    // matching comment: the listbox's own Escape handling depends on focus
+    // already being inside it, which a requestAnimationFrame moves there
+    // asynchronously after open, so an Escape pressed before that frame
+    // paints is missed entirely. This closes regardless of focus location.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ invalid, className }), ...rest, children: [name &&
                 (value.length > 0 ? value : required ? [""] : []).map((v) => ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)

package/dist/cjs/components/popover/popover.js

@@ -109,6 +109,23 @@ function Popover({ trigger, children, align = "start", open: openProp, defaultOp
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open, setOpen]);
+    // A document-level fallback for Escape (#376 come back). The content's own
+    // Escape handling (its `onKeyDown`, below) only fires when focus is
+    // already inside `.crisp-popover-content` -- but Popover, unlike Menu,
+    // never moves focus there on open at all, so that handler only ever fires
+    // if a consumer's own content happens to contain something already
+    // focused. In the common case (trigger stays focused after the click that
+    // opened it) Escape reached nothing and did nothing. This listener
+    // doesn't depend on focus location, so it closes regardless -- the same
+    // pattern `ContextMenu` already uses for the identical reason (its own
+    // comment: "Escape is handled twice on purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && setOpen(false);
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, setOpen]);
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
         id: triggerId,

package/dist/cjs/components/select/select.js

@@ -117,10 +117,10 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
         if (searchable)
             requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
-    const close = () => {
+    const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
-    };
+    }, []);
     const pick = (opt) => {
         if (!opt || opt.disabled)
             return;
@@ -177,6 +177,24 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
+    // A document-level fallback for Escape (#376 come back): the listbox's own
+    // Escape handling lives on `useListboxKeyboard`'s `onKeyDown`, which only
+    // fires once focus is actually inside the listbox -- but focus lands there
+    // via a `requestAnimationFrame` scheduled on open (below), not
+    // synchronously. Escape pressed before that frame paints reaches whatever
+    // still has focus (the trigger, or the search input before ITS OWN focus
+    // lands), which is outside the listbox's own subtree, so its handler never
+    // sees the keydown at all and nothing closes. This listener doesn't depend
+    // on focus location, so it closes regardless -- the same pattern
+    // `ContextMenu` already uses for the identical reason (its own comment:
+    // "Escape is handled twice on purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, invalid, className }), ...rest, children: [name && (selected || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden

package/dist/cjs/components/tabs/tabs.recipe.js

@@ -4,18 +4,25 @@ exports.tabsRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // Record-view tabs: a row of segmented tab buttons over a 1px baseline.
-// The active tab is a light pill — bg #fbfbfb + inset ring borderSubtle, r8 —
-// with a 2px ink underline that slides along the baseline; inactive tabs are
-// muted and fill to a subtle pill on hover. Each tab carries a 16px leading icon
-// and an optional count badge. Measured from the live app: 28px pills, 4/8
-// padding, 6px icon-label gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+// The list itself is the 36px bar — the 28px tab row plus the 8px the
+// baseline needs, reserved as bottom padding so it's real box height and not
+// paint that trailing content can sit on top of. The bar carries 12px inline
+// padding too, and draws its own full-width `::after` baseline in
+// borderSubtle at its bottom edge, spanning that padding. The active tab is
+// a light pill — bg #fbfbfb + inset ring borderSubtle, r8 — with a 1px ink
+// underline that sits on the baseline (painted above it) and slides along it;
+// inactive tabs are muted and fill to a subtle pill on hover. Each tab carries
+// a 16px leading icon and an optional count badge. Measured from the live
+// app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
+// gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
 const config = (0, core_1.defineRecipe)({
     name: "tabs",
     base: `
     display: flex; flex-direction: column; min-height: 0; font-family: ${tokens_1.contract.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; box-sizing: content-box; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: ${tokens_1.contract.borderSubtle}; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${tokens_1.contract.space["1"]}; }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -24,7 +31,7 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-tabs-tab:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * ${tokens_1.contract.space["2"]}); left: 0; height: 1px; background: ${tokens_1.contract.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: ${tokens_1.contract.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
   `,

package/dist/cjs/index.js

@@ -29,6 +29,7 @@ __exportStar(require("./components/button"), exports);
 __exportStar(require("./components/callout"), exports);
 __exportStar(require("./components/card"), exports);
 __exportStar(require("./components/checkbox"), exports);
+__exportStar(require("./components/chip"), exports);
 __exportStar(require("./components/columncalc"), exports);
 __exportStar(require("./components/contextmenu"), exports);
 __exportStar(require("./components/datatable"), exports);

package/dist/esm/components/chip/chip.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { chipRecipe } from "./chip.recipe.js";
+/**
+ * A small pill — the same measured chip RecordsTable, RecordPanel and
+ * MultiSelect already draw as `.crisp-recordstable-tag`, exported standalone
+ * for surfaces that need one without a table or a fixed option set (e.g. a
+ * free-text tag list).
+ *
+ * This ships the measured body only. Attio's removable × on a chip needs a
+ * live, populated multi-value editor to measure against, and none was
+ * reachable this round (a person's "Email addresses" field was empty on the
+ * only record checked, and "Categories" removes via a checkbox toggle, not
+ * an inline ×) — so `Chip` has no `onRemove`/remove button yet. Add one once
+ * that surface can be measured; don't guess the icon, its hit target, or its
+ * spacing from the label.
+ */
+export const Chip = React.forwardRef(({ tone, className, asChild, children, ...props }, ref) => {
+    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: chipRecipe({ tone, className }), ...props, children: children }));
+});
+Chip.displayName = "Chip";

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

@@ -0,0 +1,77 @@
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The same measured pill RecordsTable/RecordPanel/MultiSelect already draw
+// as ".crisp-recordstable-tag" (product/recordstable/recordstable.tag.ts's
+// recordTagCss): 22px tall, `padding: 0 4px`, `border-radius: chip`,
+// 14px/20px at weight 500, and a 1px inset ring in the tone's colour. That
+// export is raw CSS written to be spliced under another component's own
+// `&` root (RecordsTable/RecordPanel nest it inside their own recipe), so it
+// can't be reused verbatim here — Chip's root IS the styled element, not a
+// wrapper around one. The values below are transcribed from recordTagCss,
+// not re-measured; keep the two in sync by hand if either changes.
+const ring = (v, pct) => `inset 0 0 0 1px color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const onFg = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, ${c.fgPrimary})`;
+const spec = defineSpec({
+    name: "chip",
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        height: c.size.chip,
+        paddingInline: c.space["1"],
+        borderRadius: c.radius.chip,
+        fontSize: c.text.lg,
+        lineHeight: "20px",
+        fontWeight: c.weight.medium,
+        whiteSpace: "nowrap",
+    },
+    variants: {
+        tone: {
+            neutral: {
+                background: soft(c.fgPrimary, 6),
+                color: soft(c.fgPrimary, 82),
+                boxShadow: `inset 0 0 0 1px ${c.borderSubtle}`,
+            },
+            brand: {
+                background: soft(c.bgBrandSolid, 14),
+                color: onFg(c.bgBrandSolid, 82),
+                boxShadow: ring(c.bgBrandSolid, 30),
+            },
+            success: {
+                background: soft(c.bgSuccess, 16),
+                color: onFg(c.bgSuccess, 78),
+                boxShadow: ring(c.bgSuccess, 30),
+            },
+            warning: {
+                background: soft(c.bgWarning, 18),
+                color: onFg(c.bgWarning, 82),
+                boxShadow: ring(c.bgWarning, 30),
+            },
+            danger: {
+                background: soft(c.bgDanger, 15),
+                color: onFg(c.bgDanger, 80),
+                boxShadow: ring(c.bgDanger, 30),
+            },
+            purple: {
+                background: soft(c.bgPurple, 16),
+                color: onFg(c.bgPurple, 80),
+                boxShadow: ring(c.bgPurple, 30),
+            },
+            cyan: {
+                background: soft(c.bgCyan, 18),
+                color: onFg(c.bgCyan, 82),
+                boxShadow: ring(c.bgCyan, 30),
+            },
+            orange: {
+                background: soft(c.bgOrange, 16),
+                color: onFg(c.bgOrange, 82),
+                boxShadow: ring(c.bgOrange, 30),
+            },
+        },
+    },
+    defaultVariants: { tone: "neutral" },
+});
+const config = specToRecipe(spec);
+export const chipRecipe = Object.assign(resolveRecipe(config), { config });
+export { spec };
+export default config;

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

@@ -0,0 +1,2 @@
+export { Chip } from "./chip.js";
+export { chipRecipe } from "./chip.recipe.js";

package/dist/esm/components/menu/menu.js

@@ -86,6 +86,24 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open, setOpen]);
+    // A document-level fallback for Escape (#376 come back). The content's own
+    // Escape handling (`useMenuKeyboard`'s onKeyDown, below) only fires once
+    // focus is actually inside `.crisp-menu-content` -- but focus lands there
+    // via a `requestAnimationFrame` scheduled on open (menu-keyboard.ts), not
+    // synchronously. An Escape pressed before that frame paints reaches
+    // whatever still has focus (the trigger button), which is outside the
+    // content div's subtree, so `onContentKeyDown` never sees it and nothing
+    // closes. This listener doesn't depend on focus location, so it closes
+    // regardless -- the same pattern `ContextMenu` already uses for the
+    // identical reason (its own comment: "Escape is handled twice on
+    // purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     const { onKeyDown: onContentKeyDown } = useMenuKeyboard({
         open,
         close,

package/dist/esm/components/multiselect/multiselect.js

@@ -89,10 +89,10 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         if (searchable)
             requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
-    const close = () => {
+    const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
-    };
+    }, []);
     const activeId = open && highlight >= 0 && highlight < filtered.length
         ? optionId(highlight)
         : undefined;
@@ -146,6 +146,18 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
+    // A document-level fallback for Escape (#376 come back) -- see Select's
+    // matching comment: the listbox's own Escape handling depends on focus
+    // already being inside it, which a requestAnimationFrame moves there
+    // asynchronously after open, so an Escape pressed before that frame
+    // paints is missed entirely. This closes regardless of focus location.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ invalid, className }), ...rest, children: [name &&
                 (value.length > 0 ? value : required ? [""] : []).map((v) => (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)

package/dist/esm/components/popover/popover.js

@@ -73,6 +73,23 @@ export function Popover({ trigger, children, align = "start", open: openProp, de
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open, setOpen]);
+    // A document-level fallback for Escape (#376 come back). The content's own
+    // Escape handling (its `onKeyDown`, below) only fires when focus is
+    // already inside `.crisp-popover-content` -- but Popover, unlike Menu,
+    // never moves focus there on open at all, so that handler only ever fires
+    // if a consumer's own content happens to contain something already
+    // focused. In the common case (trigger stays focused after the click that
+    // opened it) Escape reached nothing and did nothing. This listener
+    // doesn't depend on focus location, so it closes regardless -- the same
+    // pattern `ContextMenu` already uses for the identical reason (its own
+    // comment: "Escape is handled twice on purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && setOpen(false);
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, setOpen]);
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
         id: triggerId,

package/dist/esm/components/select/select.js

@@ -81,10 +81,10 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
         if (searchable)
             requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
-    const close = () => {
+    const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
-    };
+    }, []);
     const pick = (opt) => {
         if (!opt || opt.disabled)
             return;
@@ -141,6 +141,24 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
+    // A document-level fallback for Escape (#376 come back): the listbox's own
+    // Escape handling lives on `useListboxKeyboard`'s `onKeyDown`, which only
+    // fires once focus is actually inside the listbox -- but focus lands there
+    // via a `requestAnimationFrame` scheduled on open (below), not
+    // synchronously. Escape pressed before that frame paints reaches whatever
+    // still has focus (the trigger, or the search input before ITS OWN focus
+    // lands), which is outside the listbox's own subtree, so its handler never
+    // sees the keydown at all and nothing closes. This listener doesn't depend
+    // on focus location, so it closes regardless -- the same pattern
+    // `ContextMenu` already uses for the identical reason (its own comment:
+    // "Escape is handled twice on purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, invalid, className }), ...rest, children: [name && (selected || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden

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

@@ -1,18 +1,25 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // Record-view tabs: a row of segmented tab buttons over a 1px baseline.
-// The active tab is a light pill — bg #fbfbfb + inset ring borderSubtle, r8 —
-// with a 2px ink underline that slides along the baseline; inactive tabs are
-// muted and fill to a subtle pill on hover. Each tab carries a 16px leading icon
-// and an optional count badge. Measured from the live app: 28px pills, 4/8
-// padding, 6px icon-label gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+// The list itself is the 36px bar — the 28px tab row plus the 8px the
+// baseline needs, reserved as bottom padding so it's real box height and not
+// paint that trailing content can sit on top of. The bar carries 12px inline
+// padding too, and draws its own full-width `::after` baseline in
+// borderSubtle at its bottom edge, spanning that padding. The active tab is
+// a light pill — bg #fbfbfb + inset ring borderSubtle, r8 — with a 1px ink
+// underline that sits on the baseline (painted above it) and slides along it;
+// inactive tabs are muted and fill to a subtle pill on hover. Each tab carries
+// a 16px leading icon and an optional count badge. Measured from the live
+// app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
+// gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
 const config = defineRecipe({
     name: "tabs",
     base: `
     display: flex; flex-direction: column; min-height: 0; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${c.space["1"]}; box-sizing: content-box; height: ${c.size.row}; padding: 0 ${c.space["3"]} ${c.space["2"]}; flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: ${c.borderSubtle}; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${c.space["1"]}; }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: ${c.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -21,7 +28,7 @@ const config = defineRecipe({
     & .crisp-tabs-tab:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
     & .crisp-tabs-tab-badge { 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}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${c.fgPrimary}; }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * ${c.space["2"]}); left: 0; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
   `,

package/dist/esm/index.js

@@ -13,6 +13,7 @@ export * from "./components/button/index.js";
 export * from "./components/callout/index.js";
 export * from "./components/card/index.js";
 export * from "./components/checkbox/index.js";
+export * from "./components/chip/index.js";
 export * from "./components/columncalc/index.js";
 export * from "./components/contextmenu/index.js";
 export * from "./components/datatable/index.js";

package/dist/styles.css

@@ -428,6 +428,34 @@
   }
 }
 
+.crisp-chip {
+  display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding-inline: 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;
+}
+.crisp-chip--tone_neutral {
+  background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle);
+}
+.crisp-chip--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+}
+.crisp-chip--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+}
+.crisp-chip--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent);
+}
+.crisp-chip--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+}
+.crisp-chip--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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent);
+}
+.crisp-chip--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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent);
+}
+.crisp-chip--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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
+}
+
 .crisp-columncalc {
   display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
@@ -1597,7 +1625,8 @@
 
 .crisp-tabs {
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -1606,7 +1635,7 @@
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

package/dist/styles.layered.css

@@ -429,6 +429,34 @@
   }
 }
 
+.crisp-chip {
+  display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding-inline: 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;
+}
+.crisp-chip--tone_neutral {
+  background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle);
+}
+.crisp-chip--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+}
+.crisp-chip--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+}
+.crisp-chip--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent);
+}
+.crisp-chip--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+}
+.crisp-chip--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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent);
+}
+.crisp-chip--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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent);
+}
+.crisp-chip--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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
+}
+
 .crisp-columncalc {
   display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
@@ -1598,7 +1626,8 @@
 
 .crisp-tabs {
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -1607,7 +1636,7 @@
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

package/dist/tabs.css

@@ -1,6 +1,7 @@
 .crisp-tabs {
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -9,7 +10,7 @@
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

package/dist/tabs.layered.css

@@ -1,7 +1,8 @@
 @layer crisp-components {
 .crisp-tabs {
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -10,7 +11,7 @@
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import type { VariantProps } from "../../core";
+import { chipRecipe } from "./chip.recipe";
+export type ChipProps = React.ComponentPropsWithoutRef<"span"> & VariantProps<typeof chipRecipe> & {
+    asChild?: boolean;
+};
+/**
+ * A small pill — the same measured chip RecordsTable, RecordPanel and
+ * MultiSelect already draw as `.crisp-recordstable-tag`, exported standalone
+ * for surfaces that need one without a table or a fixed option set (e.g. a
+ * free-text tag list).
+ *
+ * This ships the measured body only. Attio's removable × on a chip needs a
+ * live, populated multi-value editor to measure against, and none was
+ * reachable this round (a person's "Email addresses" field was empty on the
+ * only record checked, and "Categories" removes via a checkbox toggle, not
+ * an inline ×) — so `Chip` has no `onRemove`/remove button yet. Add one once
+ * that surface can be measured; don't guess the icon, its hit target, or its
+ * spacing from the label.
+ */
+export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+        readonly purple: string;
+        readonly cyan: string;
+        readonly orange: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        readonly tone: {
+            readonly neutral: string;
+            readonly brand: string;
+            readonly success: string;
+            readonly warning: string;
+            readonly danger: string;
+            readonly purple: string;
+            readonly cyan: string;
+            readonly orange: string;
+        };
+    }>;
+}> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/types/components/chip/chip.recipe.d.ts

@@ -0,0 +1,100 @@
+declare const spec: {
+    readonly name: "chip";
+    readonly base: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly height: `var(--${string})`;
+        readonly paddingInline: `var(--${string})`;
+        readonly borderRadius: `var(--${string})`;
+        readonly fontSize: `var(--${string})`;
+        readonly lineHeight: "20px";
+        readonly fontWeight: `var(--${string})`;
+        readonly whiteSpace: "nowrap";
+    };
+    readonly variants: {
+        readonly tone: {
+            readonly neutral: {
+                readonly background: string;
+                readonly color: string;
+                readonly boxShadow: `inset 0 0 0 1px var(--${string})`;
+            };
+            readonly brand: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly success: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly warning: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly danger: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly purple: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly cyan: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly orange: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+        };
+    };
+    readonly defaultVariants: {
+        readonly tone: "neutral";
+    };
+};
+declare const config: import("../..").RecipeConfig<{
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+        readonly purple: string;
+        readonly cyan: string;
+        readonly orange: string;
+    };
+}>;
+export declare const chipRecipe: import("../..").RecipeFn<{
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+        readonly purple: string;
+        readonly cyan: string;
+        readonly orange: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        readonly tone: {
+            readonly neutral: string;
+            readonly brand: string;
+            readonly success: string;
+            readonly warning: string;
+            readonly danger: string;
+            readonly purple: string;
+            readonly cyan: string;
+            readonly orange: string;
+        };
+    }>;
+};
+export { spec };
+export default config;

package/dist/types/components/chip/index.d.ts

@@ -0,0 +1,2 @@
+export { Chip, type ChipProps } from "./chip";
+export { chipRecipe } from "./chip.recipe";

package/dist/types/index.d.ts

@@ -9,6 +9,7 @@ export * from "./components/button";
 export * from "./components/callout";
 export * from "./components/card";
 export * from "./components/checkbox";
+export * from "./components/chip";
 export * from "./components/columncalc";
 export * from "./components/contextmenu";
 export * from "./components/datatable";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -88,6 +88,11 @@
       "import": "./dist/esm/components/checkbox/index.js",
       "require": "./dist/cjs/components/checkbox/index.js"
     },
+    "./chip": {
+      "types": "./dist/types/components/chip/index.d.ts",
+      "import": "./dist/esm/components/chip/index.js",
+      "require": "./dist/cjs/components/chip/index.js"
+    },
     "./columncalc": {
       "types": "./dist/types/components/columncalc/index.d.ts",
       "import": "./dist/esm/components/columncalc/index.js",