@crisp-ui-kit/crisp 0.31.5 → 0.32.0

package/dist/cjs/product/tasklist/tasklist.js

@@ -4,7 +4,7 @@ exports.TaskList = TaskList;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const tasklist_recipe_1 = require("./tasklist.recipe");
 function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "tasklist-row", "data-done": task.done ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "tasklist-check", checked: !!task.done, "aria-label": task.done ? incompleteLabel : completeLabel, onChange: () => onToggle?.(task.id, !task.done) }), (0, jsx_runtime_1.jsx)("span", { className: "tasklist-title", children: task.title }), (task.due != null || task.meta != null) && ((0, jsx_runtime_1.jsxs)("span", { className: "tasklist-meta", children: [task.due != null && ((0, jsx_runtime_1.jsx)("span", { className: "tasklist-due", "data-overdue": task.overdue ? "" : undefined, children: task.due })), task.meta] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tasklist-row", "data-done": task.done ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "crisp-tasklist-check", checked: !!task.done, "aria-label": task.done ? incompleteLabel : completeLabel, onChange: () => onToggle?.(task.id, !task.done) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tasklist-title", children: task.title }), (task.due != null || task.meta != null) && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tasklist-meta", children: [task.due != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tasklist-due", "data-overdue": task.overdue ? "" : undefined, children: task.due })), task.meta] }))] }));
 }
 /**
  * A task list — measured from a tasks page. Optional group headers with a
@@ -14,6 +14,6 @@ function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
 function TaskList({ tasks, groups, onToggle, emptyLabel = "No tasks", className, completeLabel = "Mark complete", incompleteLabel = "Mark incomplete", ...rest }) {
     const resolved = groups ?? (tasks?.length ? [{ label: null, tasks }] : []);
     const total = resolved.reduce((s, g) => s + g.tasks.length, 0);
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, tasklist_recipe_1.tasklistRecipe)({ className }), ...rest, children: total === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "tasklist-empty", children: emptyLabel })) : (resolved.map((g, gi) => ((0, jsx_runtime_1.jsxs)("div", { children: [g.label != null && ((0, jsx_runtime_1.jsxs)("div", { className: "tasklist-group", children: [g.label, (0, jsx_runtime_1.jsx)("span", { className: "tasklist-group-count", children: g.tasks.length })] })), g.tasks.map((t) => ((0, jsx_runtime_1.jsx)(Row, { task: t, onToggle: onToggle, completeLabel: completeLabel, incompleteLabel: incompleteLabel }, t.id)))] }, gi)))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, tasklist_recipe_1.tasklistRecipe)({ className }), ...rest, children: total === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tasklist-empty", children: emptyLabel })) : (resolved.map((g, gi) => ((0, jsx_runtime_1.jsxs)("div", { children: [g.label != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tasklist-group", children: [g.label, (0, jsx_runtime_1.jsx)("span", { className: "crisp-tasklist-group-count", children: g.tasks.length })] })), g.tasks.map((t) => ((0, jsx_runtime_1.jsx)(Row, { task: t, onToggle: onToggle, completeLabel: completeLabel, incompleteLabel: incompleteLabel }, t.id)))] }, gi)))) }));
 }
 TaskList.displayName = "TaskList";

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

@@ -11,25 +11,25 @@ const config = (0, core_1.defineRecipe)({
     base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .tasklist-group { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 36px; padding: 0 ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
-    & .tasklist-group-count { 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}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-tasklist-group { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 36px; padding: 0 ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-tasklist-group-count { 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}; color: ${tokens_1.contract.fgMuted}; }
 
-    & .tasklist-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["2.5"]}; height: 52px; padding: 0 ${tokens_1.contract.space["2"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
-    & .tasklist-row:first-child { border-top: none; }
+    & .crisp-tasklist-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["2.5"]}; height: 52px; padding: 0 ${tokens_1.contract.space["2"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-tasklist-row:first-child { border-top: none; }
 
-    & .tasklist-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; transition: background-color .12s, box-shadow .12s; }
-    & .tasklist-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 30%, transparent); }
-    & .tasklist-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"); }
-    & .tasklist-check:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
+    & .crisp-tasklist-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; transition: background-color .12s, box-shadow .12s; }
+    & .crisp-tasklist-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 30%, transparent); }
+    & .crisp-tasklist-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-tasklist-check:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
 
-    & .tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
-    & .tasklist-row[data-done] .tasklist-title { color: ${tokens_1.contract.fgMuted}; text-decoration: line-through; }
+    & .crisp-tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-tasklist-row[data-done] .crisp-tasklist-title { color: ${tokens_1.contract.fgMuted}; text-decoration: line-through; }
 
-    & .tasklist-meta { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["3"]}; flex-shrink: 0; }
-    & .tasklist-due { font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; }
-    & .tasklist-due[data-overdue] { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-tasklist-meta { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["3"]}; flex-shrink: 0; }
+    & .crisp-tasklist-due { font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; }
+    & .crisp-tasklist-due[data-overdue] { color: ${tokens_1.contract.bgDanger}; }
 
-    & .tasklist-empty { padding: ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["2"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
+    & .crisp-tasklist-empty { padding: ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["2"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/product/trialbanner/trialbanner.js

@@ -8,6 +8,6 @@ const trialbanner_recipe_1 = require("./trialbanner.recipe");
  * Icon + message + an optional small action pill (soft-glow outlined button).
  */
 function TrialBanner({ icon, children, action, onAction, tone = "neutral", className, ...rest }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, trialbanner_recipe_1.trialbannerRecipe)({ className }), ...rest, "data-tone": tone === "neutral" ? undefined : tone, children: [icon != null && (0, jsx_runtime_1.jsx)("span", { className: "trialbanner-icon", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "trialbanner-msg", children: children }), action != null && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "trialbanner-action", onClick: onAction, children: action }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, trialbanner_recipe_1.trialbannerRecipe)({ className }), ...rest, "data-tone": tone === "neutral" ? undefined : tone, children: [icon != null && (0, jsx_runtime_1.jsx)("span", { className: "crisp-trialbanner-icon", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-trialbanner-msg", children: children }), action != null && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-trialbanner-action", onClick: onAction, children: action }))] }));
 }
 TrialBanner.displayName = "TrialBanner";

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

@@ -13,17 +13,17 @@ const config = (0, core_1.defineRecipe)({
     font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .trialbanner-icon { display: inline-flex; flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
-    & .trialbanner-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .trialbanner-action { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: 20px; flex-shrink: 0;
+    & .crisp-trialbanner-icon { display: inline-flex; flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-trialbanner-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-trialbanner-action { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: 20px; flex-shrink: 0;
       padding: 0 ${tokens_1.contract.space["1.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: ${tokens_1.contract.bgSurface};
       box-shadow: ${tokens_1.elevation.fieldNoRing};
       font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary};
       white-space: nowrap; cursor: pointer; transition: background-color .12s; }
-    & .trialbanner-action:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-trialbanner-action:hover { background: ${tokens_1.contract.bgRaised}; }
 
-    &[data-tone="warning"] .trialbanner-icon { color: ${tokens_1.contract.bgWarning}; }
-    &[data-tone="danger"] .trialbanner-icon { color: ${tokens_1.contract.bgDanger}; }`,
+    &[data-tone="warning"] .crisp-trialbanner-icon { color: ${tokens_1.contract.bgWarning}; }
+    &[data-tone="danger"] .crisp-trialbanner-icon { color: ${tokens_1.contract.bgDanger}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/product/viewtoggle/viewtoggle.js

@@ -53,6 +53,6 @@ function ViewToggle({ options, value: valueProp, defaultValue, onValueChange, on
         onValueChange?.(next);
         onChange?.(next);
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, viewtoggle_recipe_1.viewtoggleRecipe)({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => pick(o.value), children: o.icon }, o.value))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, viewtoggle_recipe_1.viewtoggleRecipe)({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => pick(o.value), children: o.icon }, o.value))) }));
 }
 ViewToggle.displayName = "ViewToggle";

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

@@ -12,13 +12,13 @@ const config = (0, core_1.defineRecipe)({
     border-radius: ${tokens_1.contract.radius.lg}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent);
     font-family: ${tokens_1.contract.font.sans};
 
-    & .viewtoggle-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
+    & .crisp-viewtoggle-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
       padding: 0; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted};
       font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
-    & .viewtoggle-tile:hover { color: ${tokens_1.contract.fgPrimary}; }
-    & .viewtoggle-tile[data-active] { background: ${tokens_1.contract.bgTileActive}; color: ${tokens_1.contract.fgPrimary};
+    & .crisp-viewtoggle-tile:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-viewtoggle-tile[data-active] { background: ${tokens_1.contract.bgTileActive}; color: ${tokens_1.contract.fgPrimary};
       box-shadow: 0 1px 2px -1px ${tokens_1.contract.shadowTileActive}; }
-    & .viewtoggle-tile:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }`,
+    & .crisp-viewtoggle-tile:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/tokens/contract.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contract = void 0;
+const namespace_1 = require("../core/namespace");
 const scale_1 = require("./scale");
 const semantic_1 = require("./semantic");
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-const toVar = (key) => `var(--${kebab(key)})`;
+const toVar = (key) => `var(--${namespace_1.VAR_PREFIX}${kebab(key)})`;
 // dots aren't valid in a CSS custom-property name → "2.5" becomes "2-5"
-const scaleVar = (prefix, key) => `var(--${prefix}-${key.replace(/\./g, "-")})`;
+const scaleVar = (prefix, key) => `var(--${namespace_1.VAR_PREFIX}${prefix}-${key.replace(/\./g, "-")})`;
 const mapScale = (prefix, scale) => Object.fromEntries(Object.keys(scale).map((k) => [k, scaleVar(prefix, k)]));
 const colors = Object.fromEntries(Object.keys(semantic_1.semantic).map((k) => [k, toVar(k)]));
 // contract = color tokens (theme-flipping) + the dimensional scale

package/dist/cjs/tokens/elevation.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.elevation = void 0;
 const contract_1 = require("./contract");
 /**
- * Attio's measured elevation recipes, written **once**.
+ * The measured elevation recipes, written **once**.
  *
  * The whole product runs on two elevation tiers plus one control shadow
- * (measured live — see `docs/study/attio-panels.md` §4). Before this module each
+ * (measured live — see the panels study §4). Before this module each
  * surface carried its own copy of the string: the tier-1 stack appeared in 9
  * places, the control shadow in 12. Copies drift, and every drift was a real
  * bug — `Drawer`/`RecordPanel` grew invented directional shadows, `BulkBar`'s
@@ -23,14 +23,14 @@ exports.elevation = {
     /**
      * Tier 2 — the modal frosted bezel (Dialog, Command). Sits on the
      * `bgOverlayFrost` 60% + `blur(15px)` surface at radius 16, wrapping an inner
-     * card at radius 12. Attio dims nothing behind it; the blur does the work.
+     * card at radius 12. Nothing is dimmed behind it; the blur does the work.
      */
     modal: `0 8px 28px -6px ${contract_1.contract.shadowOverlay1}, 0 18px 88px -4px ${contract_1.contract.shadowOverlay2}, 0 0 1px ${contract_1.contract.shadowOverlay3}`,
     /**
      * The neutral/outlined control shadow — buttons, inputs, textareas, the
      * sidebar search, record-page actions.
      *
-     * The two raw values **are** the measured Attio value (Lessons 22 and 29) and
+     * The two raw values **are** the measured value (Lessons 22 and 29) and
      * must stay raw. `rgba(0,0,0,0.04)` equals `tileActiveShadow`'s light value by
      * coincidence, not by meaning; tokenizing it would delete a measured layer in
      * dark mode. Only the ring is theme-aware, via `ringNeutral`.

package/dist/cjs/tokens/palette.js

@@ -5,7 +5,7 @@ exports.palette = {
     gray00: { light: "#ffffff", dark: "#0a0a0a" },
     white: { light: "#ffffff", dark: "#ffffff" },
     // the counterpart to `white`: ink that does NOT flip with the theme, for text
-    // on a bright tone fill. Same value as gray900's light side (Attio's measured
+    // on a bright tone fill. Same value as gray900's light side (the measured
     // near-black), named separately because its job is not "primary foreground".
     ink: { light: "#101112", dark: "#101112" },
     gray50: { light: "#f4f4f5", dark: "#101112" },
@@ -31,7 +31,7 @@ exports.palette = {
     // A red dark enough to carry white text. red600 cannot: white on it is
     // 3.91:1 light / 3.05:1 dark, and the solid button's hover DARKENS the fill
     // (filter: brightness), so dark ink fails there instead (4.49 at hover).
-    // Measured from Attio's own stylesheet, which ships this red alongside the
+    // Measured from the reference stylesheet, which ships this red alongside the
     // #EB3B3B it uses for destructive menu TEXT. Does not flip: a filled
     // destructive control needs the same white-bearing fill in both themes.
     red700: { light: "#ba2525", dark: "#ba2525" },

package/dist/cjs/tokens/scale.js

@@ -3,7 +3,7 @@
 // component sizing. Theme-invariant (identical in light/dark), so it is emitted
 // once into :root, unlike the color tokens which flip per theme.
 //
-// Derived by measuring the live Attio app (not taste): its spacing is a
+// Derived by measuring a live production app (not taste): its spacing is a
 // 2px-granular / 4px-base scale — the values 1,2,4,6,8,10,12,16 account for
 // nearly every gap/pad/margin in the sidebar. Radii cluster at 6/8/9 + a pill.
 // Recipes MUST reference these through the contract (`c.space[...]`), never a
@@ -25,10 +25,10 @@ exports.space = {
     "6": "24px",
     "8": "32px", // overlay / empty-state padding
 };
-// Corner radius. sm/md/lg are the three Attio uses on stacked surfaces
+// Corner radius. sm/md/lg are the three used on stacked surfaces
 // (inputs, rows, tiles); full is the pill.
 exports.radius = {
-    chip: "7px", // tag / chip corner — the single most used radius in Attio
+    chip: "7px", // tag / chip corner — the single most used radius
     sm: "6px", // chips, badges
     md: "8px", // inputs, search box
     lg: "9px", // rows, tiles, list items
@@ -40,20 +40,20 @@ exports.radius = {
 // radius (row height, header height, the nav icon box).
 exports.size = {
     icon: "16px", // nav / control glyph box
-    chip: "22px", // tag / chip height — Attio's most repeated small control
+    chip: "22px", // tag / chip height — the most repeated small control
     row: "28px", // nav item · search · control height
     menuRow: "32px", // overlay row: menu item, select option, bulk-bar button
     tableRow: "36px", // data-grid row height
     tableHeader: "40px", // data-grid header row height
     header: "48px", // workspace-switcher header height
-    // Attio's date picker, measured: a 32px day with a 2px gap on both axes, so
+    // The measured date picker: a 32px day with a 2px gap on both axes, so
     // the pitch is 34. The gap is expressed as the cell being 2px taller than the
     // highlight rather than as a grid gap, because crisp's range bridge spans
     // whole cells and a column gap would cut it.
     calendarCell: "34px", // calendar day pitch (32px day + 2px gap)
     calendarPill: "32px", // the day highlight itself
 };
-// Typography — Attio's UI runs entirely on Inter. Sizes measured in the sidebar
+// Typography — the measured UI runs entirely on Inter. Sizes measured in the sidebar
 // collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);
 // weights are 400/500/600 with 500 the UI default.
 exports.font = {

package/dist/cjs/tokens/semantic.js

@@ -51,7 +51,7 @@ exports.semantic = {
     bgCyan: "cyan600",
     bgPurple: "purple600",
     bgSidebar: "graySidebar",
-    // #fbfbfb — Attio's subtle raised fill; the active tab pill uses the same
+    // #fbfbfb — the subtle raised fill; the active tab pill uses the same
     // value as the sidebar, so it shares the palette entry under a neutral name.
     bgSubtle: "graySidebar",
 };

package/dist/columncalc.css

@@ -1,24 +1,31 @@
-.columncalc {
-  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--font-sans);
+.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. */
-    & .menu { width: 100%; height: 100%; }
+    & .crisp-menu { width: 100%; height: 100%; }
+        /* No radius: the trigger fills the cell, so rounding its own corners
+       leaves the cell's background showing through at the four corners as
+       soon as the hover tint paints. Everything else that fills a grid cell
+       agrees -- recordstable-sum-btn, the same summary trigger, declares no
+       radius, and datatable-grip and the embedded pickers zero theirs. An 8px
+       radius survived the chip-to-full-cell conversion and shipped rounded
+       until #282, so the spec check now guards it. */
         /* The hit target is the WHOLE summary cell -- measured 246x37 with
        padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
        opens the aggregation menu. */
-    & .columncalc-trigger { display: flex; align-items: center; gap: var(--space-1); width: 100%; height: 100%; min-height: var(--size-tableRow); margin: 0; padding: 0 var(--space-3); border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .columncalc-trigger:hover { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); color: var(--fg-primary); }
-    & .columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
-    & .columncalc-trigger[data-align="right"] { justify-content: flex-end; }
-    & .columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
-    & .columncalc-value { color: var(--fg-primary); font-variant-numeric: tabular-nums; }
-    & .columncalc-op { color: var(--fg-muted); }
-    & .columncalc-section { padding: var(--space-1-5) var(--space-2) var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }
+    & .crisp-columncalc-trigger { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; height: 100%; min-height: var(--crisp-size-tableRow); margin: 0; padding: 0 var(--crisp-space-3); border: none; background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-columncalc-trigger:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
+    & .crisp-columncalc-trigger[data-align="right"] { justify-content: flex-end; }
+    & .crisp-columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-columncalc-value { color: var(--crisp-fg-primary); font-variant-numeric: tabular-nums; }
+    & .crisp-columncalc-op { color: var(--crisp-fg-muted); }
+    & .crisp-columncalc-section { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .columncalc, .columncalc * {
+  .crisp-columncalc, .crisp-columncalc * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/columncalc.layered.css

@@ -0,0 +1,35 @@
+@layer crisp-components {
+.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%; }
+        /* No radius: the trigger fills the cell, so rounding its own corners
+       leaves the cell's background showing through at the four corners as
+       soon as the hover tint paints. Everything else that fills a grid cell
+       agrees -- recordstable-sum-btn, the same summary trigger, declares no
+       radius, and datatable-grip and the embedded pickers zero theirs. An 8px
+       radius survived the chip-to-full-cell conversion and shipped rounded
+       until #282, so the spec check now guards it. */
+        /* The hit target is the WHOLE summary cell -- measured 246x37 with
+       padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
+       opens the aggregation menu. */
+    & .crisp-columncalc-trigger { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; height: 100%; min-height: var(--crisp-size-tableRow); margin: 0; padding: 0 var(--crisp-space-3); border: none; background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-columncalc-trigger:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
+    & .crisp-columncalc-trigger[data-align="right"] { justify-content: flex-end; }
+    & .crisp-columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-columncalc-value { color: var(--crisp-fg-primary); font-variant-numeric: tabular-nums; }
+    & .crisp-columncalc-op { color: var(--crisp-fg-muted); }
+    & .crisp-columncalc-section { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-columncalc, .crisp-columncalc * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/command.css

@@ -1,40 +1,40 @@
-.command {
-  display: contents; font-family: var(--font-sans)
-  ; & .command-content, & .command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
-  & .command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
-  & .command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--space-4) var(--space-4); }
-  & .command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: var(--space-1); border-radius: var(--radius-2xl); background: color-mix(in srgb, var(--bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--shadow-overlay1), 0 18px 88px -4px var(--shadow-overlay2), 0 0 1px var(--shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
-  & .command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg-primary) 8%, transparent); overflow: hidden; }
-  & .command-control { display: flex; align-items: center; gap: var(--space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--fg-muted); }
-  & .command-control svg { flex-shrink: 0; }
+.crisp-command {
+  display: contents; font-family: var(--crisp-font-sans)
+  ; & .crisp-command-content, & .crisp-command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+  & .crisp-command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
+  & .crisp-command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--crisp-space-4) var(--crisp-space-4); }
+  & .crisp-command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-2xl); background: color-mix(in srgb, var(--crisp-bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--crisp-shadow-overlay1), 0 18px 88px -4px var(--crisp-shadow-overlay2), 0 0 1px var(--crisp-shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+  & .crisp-command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
+  & .crisp-command-control { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
+  & .crisp-command-control svg { flex-shrink: 0; }
   /* The palette's label element. It exists for the assistive tree only: zag's
      combobox names the input through it and points the listbox's
      aria-labelledby at it, and without it both were unnamed and the reference
      resolved to nothing (#225). Clipped rather than display:none, which would
      take it out of the tree it exists for. */
-  & .command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
-  & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: var(--text-xl); color: var(--fg-primary); }
-  & .command-input::placeholder { color: var(--fg-muted); }
-  & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-1) var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-px); }
-  & .command-empty { padding: var(--space-8) var(--space-3); text-align: center; font-size: var(--text-md); color: var(--fg-muted); }
-  & .command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); height: 36px; padding-inline: var(--space-2-5); border-radius: var(--radius-xl); font-size: var(--text-lg); color: var(--fg-primary); cursor: pointer; }
-  & .command-item svg { flex-shrink: 0; color: var(--fg-muted); }
-  & .command-item[data-highlighted] { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); }
-  & .command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-0-5); }
-  & .command-group-label { padding: var(--space-2) var(--space-2-5) var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: color-mix(in srgb, var(--fg-primary) 63%, transparent); }
-  & .command-list > .command-group-label:first-child { padding-top: var(--space-1); }
-  & .command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--space-2-5); border-top: 1px solid var(--border-subtle); }
-  & .command-footer-nav { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-sm); color: var(--fg-muted); }
-  & .command-footer-action { display: flex; align-items: center; gap: var(--space-2); height: 28px; max-width: 60%; padding: 0 var(--space-1) 0 var(--space-2-5); border: none; border-radius: var(--radius-md); background: var(--bg-brand-solid); color: var(--fg-on-brand); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
-  & .command-footer-action:disabled { opacity: 0.5; cursor: default; }
-  & .command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: rgba(255,255,255,0.22); font-size: var(--text-xs); }
+  & .crisp-command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+  & .crisp-command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-xl); color: var(--crisp-fg-primary); }
+  & .crisp-command-input::placeholder { color: var(--crisp-fg-muted); }
+  & .crisp-command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-1) var(--crisp-space-2-5); display: flex; flex-direction: column; gap: var(--crisp-space-px); }
+  & .crisp-command-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+  & .crisp-command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding-inline: var(--crisp-space-2-5); border-radius: var(--crisp-radius-xl); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; }
+  & .crisp-command-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+  & .crisp-command-item[data-highlighted] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
+  & .crisp-command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .crisp-command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-0-5); }
+  & .crisp-command-group-label { padding: var(--crisp-space-2) var(--crisp-space-2-5) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+  & .crisp-command-list > .crisp-command-group-label:first-child { padding-top: var(--crisp-space-1); }
+  & .crisp-command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--crisp-space-2-5); border-top: 1px solid var(--crisp-border-subtle); }
+  & .crisp-command-footer-nav { display: flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+  & .crisp-command-footer-action { display: flex; align-items: center; gap: var(--crisp-space-2); height: 28px; max-width: 60%; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
+  & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
+  & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: rgba(255,255,255,0.22); font-size: var(--crisp-text-xs); }
   
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .command, .command * {
+  .crisp-command, .crisp-command * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/command.layered.css

@@ -0,0 +1,44 @@
+@layer crisp-components {
+.crisp-command {
+  display: contents; font-family: var(--crisp-font-sans)
+  ; & .crisp-command-content, & .crisp-command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+  & .crisp-command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
+  & .crisp-command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--crisp-space-4) var(--crisp-space-4); }
+  & .crisp-command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-2xl); background: color-mix(in srgb, var(--crisp-bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--crisp-shadow-overlay1), 0 18px 88px -4px var(--crisp-shadow-overlay2), 0 0 1px var(--crisp-shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+  & .crisp-command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
+  & .crisp-command-control { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
+  & .crisp-command-control svg { flex-shrink: 0; }
+  /* The palette's label element. It exists for the assistive tree only: zag's
+     combobox names the input through it and points the listbox's
+     aria-labelledby at it, and without it both were unnamed and the reference
+     resolved to nothing (#225). Clipped rather than display:none, which would
+     take it out of the tree it exists for. */
+  & .crisp-command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+  & .crisp-command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-xl); color: var(--crisp-fg-primary); }
+  & .crisp-command-input::placeholder { color: var(--crisp-fg-muted); }
+  & .crisp-command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-1) var(--crisp-space-2-5); display: flex; flex-direction: column; gap: var(--crisp-space-px); }
+  & .crisp-command-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+  & .crisp-command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding-inline: var(--crisp-space-2-5); border-radius: var(--crisp-radius-xl); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; }
+  & .crisp-command-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+  & .crisp-command-item[data-highlighted] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
+  & .crisp-command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .crisp-command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-0-5); }
+  & .crisp-command-group-label { padding: var(--crisp-space-2) var(--crisp-space-2-5) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+  & .crisp-command-list > .crisp-command-group-label:first-child { padding-top: var(--crisp-space-1); }
+  & .crisp-command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--crisp-space-2-5); border-top: 1px solid var(--crisp-border-subtle); }
+  & .crisp-command-footer-nav { display: flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+  & .crisp-command-footer-action { display: flex; align-items: center; gap: var(--crisp-space-2); height: 28px; max-width: 60%; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
+  & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
+  & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: rgba(255,255,255,0.22); font-size: var(--crisp-text-xs); }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-command, .crisp-command * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/contextmenu.css

@@ -1,18 +1,18 @@
-.contextmenu {
-  display: contents; font-family: var(--font-sans);
-    & .contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: var(--space-1); border-radius: var(--radius-xl); background: var(--bg-popover); box-shadow: inset 0 0 0 1px var(--ring-popover), 0 0 0 1px var(--shadow-popover1), 0 4px 8px -4px var(--shadow-popover2), 0 4px 12px -2px var(--shadow-popover3); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    & .contextmenu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--size-menuRow); box-sizing: border-box; padding: 0 var(--space-2); margin: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-primary); font-family: inherit; font-size: var(--text-lg); text-align: start; white-space: nowrap; cursor: pointer; }
-    & .contextmenu-item svg { flex-shrink: 0; color: var(--fg-muted); }
-    & .contextmenu-item:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); }
-    & .contextmenu-item--danger { color: var(--bg-danger); }
-    & .contextmenu-item--danger svg { color: var(--bg-danger); }
-    & .contextmenu-item--danger:hover { background: color-mix(in srgb, var(--bg-danger) 10%, transparent); }
-    & .contextmenu-shortcut { margin-inline-start: auto; padding-inline-start: var(--space-3); color: var(--fg-muted); font-size: var(--text-sm); }
-    & .contextmenu-sep { height: 1px; margin: var(--space-1) 0; border: none; background: var(--border-subtle); }
+.crisp-contextmenu {
+  display: contents; font-family: var(--crisp-font-sans);
+    & .crisp-contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-contextmenu-item { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-menuRow); box-sizing: border-box; padding: 0 var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); text-align: start; white-space: nowrap; cursor: pointer; }
+    & .crisp-contextmenu-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    & .crisp-contextmenu-item:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
+    & .crisp-contextmenu-item--danger { color: var(--crisp-bg-danger); }
+    & .crisp-contextmenu-item--danger svg { color: var(--crisp-bg-danger); }
+    & .crisp-contextmenu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
+    & .crisp-contextmenu-shortcut { margin-inline-start: auto; padding-inline-start: var(--crisp-space-3); color: var(--crisp-fg-muted); font-size: var(--crisp-text-sm); }
+    & .crisp-contextmenu-sep { height: 1px; margin: var(--crisp-space-1) 0; border: none; background: var(--crisp-border-subtle); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .contextmenu, .contextmenu * {
+  .crisp-contextmenu, .crisp-contextmenu * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/contextmenu.layered.css

@@ -0,0 +1,22 @@
+@layer crisp-components {
+.crisp-contextmenu {
+  display: contents; font-family: var(--crisp-font-sans);
+    & .crisp-contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-contextmenu-item { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-menuRow); box-sizing: border-box; padding: 0 var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); text-align: start; white-space: nowrap; cursor: pointer; }
+    & .crisp-contextmenu-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    & .crisp-contextmenu-item:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
+    & .crisp-contextmenu-item--danger { color: var(--crisp-bg-danger); }
+    & .crisp-contextmenu-item--danger svg { color: var(--crisp-bg-danger); }
+    & .crisp-contextmenu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
+    & .crisp-contextmenu-shortcut { margin-inline-start: auto; padding-inline-start: var(--crisp-space-3); color: var(--crisp-fg-muted); font-size: var(--crisp-text-sm); }
+    & .crisp-contextmenu-sep { height: 1px; margin: var(--crisp-space-1) 0; border: none; background: var(--crisp-border-subtle); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-contextmenu, .crisp-contextmenu * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}