@crisp-ui-kit/crisp 0.31.5 → 0.32.0

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

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

package/dist/esm/product/trialbanner/trialbanner.js

@@ -5,6 +5,6 @@ import { trialbannerRecipe } from "./trialbanner.recipe.js";
  * Icon + message + an optional small action pill (soft-glow outlined button).
  */
 export function TrialBanner({ icon, children, action, onAction, tone = "neutral", className, ...rest }) {
-    return (_jsxs("div", { className: trialbannerRecipe({ className }), ...rest, "data-tone": tone === "neutral" ? undefined : tone, children: [icon != null && _jsx("span", { className: "trialbanner-icon", children: icon }), _jsx("span", { className: "trialbanner-msg", children: children }), action != null && (_jsx("button", { type: "button", className: "trialbanner-action", onClick: onAction, children: action }))] }));
+    return (_jsxs("div", { className: trialbannerRecipe({ className }), ...rest, "data-tone": tone === "neutral" ? undefined : tone, children: [icon != null && _jsx("span", { className: "crisp-trialbanner-icon", children: icon }), _jsx("span", { className: "crisp-trialbanner-msg", children: children }), action != null && (_jsx("button", { type: "button", className: "crisp-trialbanner-action", onClick: onAction, children: action }))] }));
 }
 TrialBanner.displayName = "TrialBanner";

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

@@ -10,17 +10,17 @@ const config = defineRecipe({
     font-size: ${c.text.lg}; color: ${c.fgPrimary};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .trialbanner-icon { display: inline-flex; flex-shrink: 0; color: ${c.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: ${c.space["1"]}; height: 20px; flex-shrink: 0;
+    & .crisp-trialbanner-icon { display: inline-flex; flex-shrink: 0; color: ${c.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: ${c.space["1"]}; height: 20px; flex-shrink: 0;
       padding: 0 ${c.space["1.5"]}; margin: 0; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface};
       box-shadow: ${e.fieldNoRing};
       font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary};
       white-space: nowrap; cursor: pointer; transition: background-color .12s; }
-    & .trialbanner-action:hover { background: ${c.bgRaised}; }
+    & .crisp-trialbanner-action:hover { background: ${c.bgRaised}; }
 
-    &[data-tone="warning"] .trialbanner-icon { color: ${c.bgWarning}; }
-    &[data-tone="danger"] .trialbanner-icon { color: ${c.bgDanger}; }`,
+    &[data-tone="warning"] .crisp-trialbanner-icon { color: ${c.bgWarning}; }
+    &[data-tone="danger"] .crisp-trialbanner-icon { color: ${c.bgDanger}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/viewtoggle/viewtoggle.js

@@ -17,6 +17,6 @@ export function ViewToggle({ options, value: valueProp, defaultValue, onValueCha
         onValueChange?.(next);
         onChange?.(next);
     };
-    return (_jsx("div", { className: viewtoggleRecipe({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => (_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 (_jsx("div", { className: viewtoggleRecipe({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => (_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/esm/product/viewtoggle/viewtoggle.recipe.js

@@ -9,13 +9,13 @@ const config = defineRecipe({
     border-radius: ${c.radius.lg}; background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent);
     font-family: ${c.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: ${c.radius.md}; background: none; color: ${c.fgMuted};
       font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
-    & .viewtoggle-tile:hover { color: ${c.fgPrimary}; }
-    & .viewtoggle-tile[data-active] { background: ${c.bgTileActive}; color: ${c.fgPrimary};
+    & .crisp-viewtoggle-tile:hover { color: ${c.fgPrimary}; }
+    & .crisp-viewtoggle-tile[data-active] { background: ${c.bgTileActive}; color: ${c.fgPrimary};
       box-shadow: 0 1px 2px -1px ${c.shadowTileActive}; }
-    & .viewtoggle-tile:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }`,
+    & .crisp-viewtoggle-tile:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/tokens/contract.js

@@ -1,9 +1,10 @@
+import { VAR_PREFIX } from "../core/namespace.js";
 import { font as fontScale, radius as radiusScale, size as sizeScale, space as spaceScale, text as textScale, weight as weightScale, } from "./scale.js";
 import { semantic } from "./semantic.js";
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-const toVar = (key) => `var(--${kebab(key)})`;
+const toVar = (key) => `var(--${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(--${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).map((k) => [k, toVar(k)]));
 // contract = color tokens (theme-flipping) + the dimensional scale

package/dist/esm/tokens/elevation.js

@@ -1,9 +1,9 @@
 import { contract as c } from "./contract.js";
 /**
- * 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
@@ -20,14 +20,14 @@ export const 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 ${c.shadowOverlay1}, 0 18px 88px -4px ${c.shadowOverlay2}, 0 0 1px ${c.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/esm/tokens/palette.js

@@ -2,7 +2,7 @@ export const 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" },
@@ -28,7 +28,7 @@ export const 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/esm/tokens/scale.js

@@ -2,7 +2,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
@@ -22,10 +22,10 @@ export const 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.
 export const 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
@@ -37,20 +37,20 @@ export const radius = {
 // radius (row height, header height, the nav icon box).
 export const 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.
 export const font = {

package/dist/esm/tokens/semantic.js

@@ -48,7 +48,7 @@ export const 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/fileupload.css

@@ -1,87 +1,87 @@
-.fileupload {
+.crisp-fileupload {
   
-    display: flex; flex-direction: column; gap: var(--space-2);
-    font-family: var(--font-sans); min-width: 0;
+    display: flex; flex-direction: column; gap: var(--crisp-space-2);
+    font-family: var(--crisp-font-sans); min-width: 0;
 
-    & .fileupload-zone {
+    & .crisp-fileupload-zone {
       box-sizing: border-box; position: relative;
       display: flex; flex-direction: column; align-items: center;
-      justify-content: center; gap: var(--space-1);
-      width: 100%; padding: var(--space-6) var(--space-4);
-      border: 1px dashed var(--border-default); border-radius: var(--radius-md);
+      justify-content: center; gap: var(--crisp-space-1);
+      width: 100%; padding: var(--crisp-space-6) var(--crisp-space-4);
+      border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-md);
       background: transparent; cursor: pointer; text-align: center;
       font-family: inherit;
       transition: background-color .12s, border-color .12s;
       outline: 2px solid transparent; outline-offset: -2px;
     }
-    & .fileupload-zone:hover { background: var(--bg-raised); }
-    & .fileupload-zone:focus-visible { outline-color: var(--stroke-focus-ring); }
-    & .fileupload-zone[data-dragging] {
-      border-color: var(--bg-brand-solid);
-      background: color-mix(in srgb, var(--bg-brand-solid) 6%, transparent);
+    & .crisp-fileupload-zone:hover { background: var(--crisp-bg-raised); }
+    & .crisp-fileupload-zone:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
+    & .crisp-fileupload-zone[data-dragging] {
+      border-color: var(--crisp-bg-brand-solid);
+      background: color-mix(in srgb, var(--crisp-bg-brand-solid) 6%, transparent);
     }
-    & .fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
-    & .fileupload-zone[data-invalid] { border-color: var(--bg-danger); }
+    & .crisp-fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
+    & .crisp-fileupload-zone[data-invalid] { border-color: var(--crisp-bg-danger); }
 
     /* "No files" 16/20 weight 600 */
-    & .fileupload-title {
-      color: var(--fg-primary); font-size: var(--text-xl); line-height: 20px;
-      font-weight: var(--weight-semibold);
+    & .crisp-fileupload-title {
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-xl); line-height: 20px;
+      font-weight: var(--crisp-weight-semibold);
     }
     /* The hint line, 14/20 weight 500 at 63% of the foreground */
-    & .fileupload-hint {
-      color: color-mix(in srgb, var(--fg-primary) 63%, transparent);
-      font-size: var(--text-lg); line-height: 20px;
-      font-weight: var(--weight-medium);
+    & .crisp-fileupload-hint {
+      color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent);
+      font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-weight-medium);
     }
 
-    & .fileupload-input {
+    & .crisp-fileupload-input {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }
 
-    & .fileupload-list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
+    & .crisp-fileupload-list { display: flex; flex-direction: column; gap: var(--crisp-space-1); margin: 0; padding: 0; list-style: none; }
     /* the row height crisp measured for a data-grid row */
-    & .fileupload-item {
-      display: flex; align-items: center; gap: var(--space-2);
-      min-height: var(--size-tableRow); padding: 0 var(--space-2);
-      border-radius: var(--radius-md); background: var(--bg-raised);
-      font-size: var(--text-lg); line-height: 20px; color: var(--fg-primary);
+    & .crisp-fileupload-item {
+      display: flex; align-items: center; gap: var(--crisp-space-2);
+      min-height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2);
+      border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised);
+      font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary);
     }
-    & .fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .fileupload-item-size { flex-shrink: 0; color: var(--fg-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
-    & .fileupload-item[data-status="error"] { color: var(--bg-danger); }
-    & .fileupload-item[data-status="error"] .fileupload-item-size { color: var(--bg-danger); }
+    & .crisp-fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-fileupload-item-size { flex-shrink: 0; color: var(--crisp-fg-muted); font-size: var(--crisp-text-sm); font-variant-numeric: tabular-nums; }
+    & .crisp-fileupload-item[data-status="error"] { color: var(--crisp-bg-danger); }
+    & .crisp-fileupload-item[data-status="error"] .crisp-fileupload-item-size { color: var(--crisp-bg-danger); }
 
     /* progress track, reusing the measured Progress geometry */
-    & .fileupload-progress {
-      flex-shrink: 0; width: 64px; height: 4px; border-radius: var(--radius-full);
-      background: var(--bg-neutral-weak); overflow: hidden;
+    & .crisp-fileupload-progress {
+      flex-shrink: 0; width: 64px; height: 4px; border-radius: var(--crisp-radius-full);
+      background: var(--crisp-bg-neutral-weak); overflow: hidden;
     }
-    & .fileupload-progress-fill { height: 100%; background: var(--bg-brand-solid); transition: width .2s ease; }
+    & .crisp-fileupload-progress-fill { height: 100%; background: var(--crisp-bg-brand-solid); transition: width .2s ease; }
 
-    & .fileupload-remove {
+    & .crisp-fileupload-remove {
       display: inline-flex; align-items: center; justify-content: center;
-      flex-shrink: 0; width: var(--size-icon); height: var(--size-icon);
-      padding: 0; border: none; border-radius: var(--radius-sm);
-      background: transparent; color: var(--fg-muted); cursor: pointer;
+      flex-shrink: 0; width: var(--crisp-size-icon); height: var(--crisp-size-icon);
+      padding: 0; border: none; border-radius: var(--crisp-radius-sm);
+      background: transparent; color: var(--crisp-fg-muted); cursor: pointer;
       font-family: inherit;
       outline: 2px solid transparent; outline-offset: -2px;
     }
-    & .fileupload-remove:hover { color: var(--fg-primary); }
-    & .fileupload-remove:focus-visible { outline-color: var(--stroke-focus-ring); }
+    & .crisp-fileupload-remove:hover { color: var(--crisp-fg-primary); }
+    & .crisp-fileupload-remove:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
 
-    & .fileupload-errors { display: flex; flex-direction: column; gap: var(--space-0-5); margin: 0; padding: 0; list-style: none; }
+    & .crisp-fileupload-errors { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); margin: 0; padding: 0; list-style: none; }
     /* out of flow while empty, so the always-mounted live region costs no
        layout: display:none would take it out of the accessibility tree, which
        is the one thing it exists to be in */
-    & .fileupload-errors:empty { position: absolute; }
-    & .fileupload-error { color: var(--bg-danger); font-size: var(--text-md); line-height: 18px; }
+    & .crisp-fileupload-errors:empty { position: absolute; }
+    & .crisp-fileupload-error { color: var(--crisp-bg-danger); font-size: var(--crisp-text-md); line-height: 18px; }
   
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .fileupload, .fileupload * {
+  .crisp-fileupload, .crisp-fileupload * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/fileupload.layered.css

@@ -0,0 +1,91 @@
+@layer crisp-components {
+.crisp-fileupload {
+  
+    display: flex; flex-direction: column; gap: var(--crisp-space-2);
+    font-family: var(--crisp-font-sans); min-width: 0;
+
+    & .crisp-fileupload-zone {
+      box-sizing: border-box; position: relative;
+      display: flex; flex-direction: column; align-items: center;
+      justify-content: center; gap: var(--crisp-space-1);
+      width: 100%; padding: var(--crisp-space-6) var(--crisp-space-4);
+      border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-md);
+      background: transparent; cursor: pointer; text-align: center;
+      font-family: inherit;
+      transition: background-color .12s, border-color .12s;
+      outline: 2px solid transparent; outline-offset: -2px;
+    }
+    & .crisp-fileupload-zone:hover { background: var(--crisp-bg-raised); }
+    & .crisp-fileupload-zone:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
+    & .crisp-fileupload-zone[data-dragging] {
+      border-color: var(--crisp-bg-brand-solid);
+      background: color-mix(in srgb, var(--crisp-bg-brand-solid) 6%, transparent);
+    }
+    & .crisp-fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
+    & .crisp-fileupload-zone[data-invalid] { border-color: var(--crisp-bg-danger); }
+
+    /* "No files" 16/20 weight 600 */
+    & .crisp-fileupload-title {
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-xl); line-height: 20px;
+      font-weight: var(--crisp-weight-semibold);
+    }
+    /* The hint line, 14/20 weight 500 at 63% of the foreground */
+    & .crisp-fileupload-hint {
+      color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent);
+      font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-weight-medium);
+    }
+
+    & .crisp-fileupload-input {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+
+    & .crisp-fileupload-list { display: flex; flex-direction: column; gap: var(--crisp-space-1); margin: 0; padding: 0; list-style: none; }
+    /* the row height crisp measured for a data-grid row */
+    & .crisp-fileupload-item {
+      display: flex; align-items: center; gap: var(--crisp-space-2);
+      min-height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2);
+      border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised);
+      font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary);
+    }
+    & .crisp-fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-fileupload-item-size { flex-shrink: 0; color: var(--crisp-fg-muted); font-size: var(--crisp-text-sm); font-variant-numeric: tabular-nums; }
+    & .crisp-fileupload-item[data-status="error"] { color: var(--crisp-bg-danger); }
+    & .crisp-fileupload-item[data-status="error"] .crisp-fileupload-item-size { color: var(--crisp-bg-danger); }
+
+    /* progress track, reusing the measured Progress geometry */
+    & .crisp-fileupload-progress {
+      flex-shrink: 0; width: 64px; height: 4px; border-radius: var(--crisp-radius-full);
+      background: var(--crisp-bg-neutral-weak); overflow: hidden;
+    }
+    & .crisp-fileupload-progress-fill { height: 100%; background: var(--crisp-bg-brand-solid); transition: width .2s ease; }
+
+    & .crisp-fileupload-remove {
+      display: inline-flex; align-items: center; justify-content: center;
+      flex-shrink: 0; width: var(--crisp-size-icon); height: var(--crisp-size-icon);
+      padding: 0; border: none; border-radius: var(--crisp-radius-sm);
+      background: transparent; color: var(--crisp-fg-muted); cursor: pointer;
+      font-family: inherit;
+      outline: 2px solid transparent; outline-offset: -2px;
+    }
+    & .crisp-fileupload-remove:hover { color: var(--crisp-fg-primary); }
+    & .crisp-fileupload-remove:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
+
+    & .crisp-fileupload-errors { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); margin: 0; padding: 0; list-style: none; }
+    /* out of flow while empty, so the always-mounted live region costs no
+       layout: display:none would take it out of the accessibility tree, which
+       is the one thing it exists to be in */
+    & .crisp-fileupload-errors:empty { position: absolute; }
+    & .crisp-fileupload-error { color: var(--crisp-bg-danger); font-size: var(--crisp-text-md); line-height: 18px; }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-fileupload, .crisp-fileupload * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/flowcanvas.css

@@ -1,15 +1,15 @@
-.flowcanvas {
-  position: relative; overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; background-color: var(--bg-surface); background-image: radial-gradient(circle, color-mix(in srgb, var(--fg-primary) 14%, transparent) 1px, transparent 1px); font-family: var(--font-sans); cursor: grab; touch-action: none; user-select: none;
+.crisp-flowcanvas {
+  position: relative; overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; background-color: var(--crisp-bg-surface); background-image: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 14%, transparent) 1px, transparent 1px); font-family: var(--crisp-font-sans); cursor: grab; touch-action: none; user-select: none;
     &[data-panning] { cursor: grabbing; }
-    & .flowcanvas-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
-    & .flowcanvas-edges { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
-    & .flowcanvas-edge { fill: none; stroke: color-mix(in srgb, var(--fg-primary) 28%, transparent); stroke-width: 1.5; }
-    & .flowcanvas-edge-dot { fill: var(--bg-brand-solid); }
-    & .flowcanvas-node { position: absolute; cursor: grab; }
-    & .flowcanvas-node[data-dragging] { cursor: grabbing; z-index: 10; }
-    & .flowcanvas-toolbar { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-lg); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--border-default), 0 4px 14px -4px rgba(28,40,64,0.16); }
-    & .flowcanvas-tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); height: 30px; min-width: 30px; padding: 0 var(--space-2); margin: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
-    & .flowcanvas-tool:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); }
-    & .flowcanvas-tool-zoom { min-width: 48px; }
-    & .flowcanvas-tool-sep { width: 1px; height: 18px; background: var(--border-subtle); }
+    & .crisp-flowcanvas-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
+    & .crisp-flowcanvas-edges { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
+    & .crisp-flowcanvas-edge { fill: none; stroke: color-mix(in srgb, var(--crisp-fg-primary) 28%, transparent); stroke-width: 1.5; }
+    & .crisp-flowcanvas-edge-dot { fill: var(--crisp-bg-brand-solid); }
+    & .crisp-flowcanvas-node { position: absolute; cursor: grab; }
+    & .crisp-flowcanvas-node[data-dragging] { cursor: grabbing; z-index: 10; }
+    & .crisp-flowcanvas-toolbar { position: absolute; bottom: var(--crisp-space-4); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--crisp-space-1); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px var(--crisp-border-default), 0 4px 14px -4px rgba(28,40,64,0.16); }
+    & .crisp-flowcanvas-tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1); height: 30px; min-width: 30px; padding: 0 var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
+    & .crisp-flowcanvas-tool:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-flowcanvas-tool-zoom { min-width: 48px; }
+    & .crisp-flowcanvas-tool-sep { width: 1px; height: 18px; background: var(--crisp-border-subtle); }
 }

package/dist/flowcanvas.layered.css

@@ -0,0 +1,17 @@
+@layer crisp-components {
+.crisp-flowcanvas {
+  position: relative; overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; background-color: var(--crisp-bg-surface); background-image: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 14%, transparent) 1px, transparent 1px); font-family: var(--crisp-font-sans); cursor: grab; touch-action: none; user-select: none;
+    &[data-panning] { cursor: grabbing; }
+    & .crisp-flowcanvas-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
+    & .crisp-flowcanvas-edges { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
+    & .crisp-flowcanvas-edge { fill: none; stroke: color-mix(in srgb, var(--crisp-fg-primary) 28%, transparent); stroke-width: 1.5; }
+    & .crisp-flowcanvas-edge-dot { fill: var(--crisp-bg-brand-solid); }
+    & .crisp-flowcanvas-node { position: absolute; cursor: grab; }
+    & .crisp-flowcanvas-node[data-dragging] { cursor: grabbing; z-index: 10; }
+    & .crisp-flowcanvas-toolbar { position: absolute; bottom: var(--crisp-space-4); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--crisp-space-1); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px var(--crisp-border-default), 0 4px 14px -4px rgba(28,40,64,0.16); }
+    & .crisp-flowcanvas-tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1); height: 30px; min-width: 30px; padding: 0 var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
+    & .crisp-flowcanvas-tool:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-flowcanvas-tool-zoom { min-width: 48px; }
+    & .crisp-flowcanvas-tool-sep { width: 1px; height: 18px; background: var(--crisp-border-subtle); }
+}
+}

package/dist/formfield.css

@@ -1,8 +1,8 @@
-.formfield {
-  display: flex; flex-direction: column; gap: var(--space-1-5); box-sizing: border-box; font-family: var(--font-sans);
-    & .formfield-label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }
-    & .formfield-required { color: var(--bg-danger); }
-    & .formfield-optional { color: color-mix(in srgb, var(--fg-primary) 40%, transparent); font-weight: var(--weight-regular); }
-    & .formfield-desc { font-size: var(--text-sm); line-height: 16px; color: var(--fg-muted); }
-    & .formfield-error { font-size: var(--text-sm); line-height: 16px; color: var(--bg-danger); }
+.crisp-formfield {
+  display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans);
+    & .crisp-formfield-label { display: inline-flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-formfield-required { color: var(--crisp-bg-danger); }
+    & .crisp-formfield-optional { color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); font-weight: var(--crisp-weight-regular); }
+    & .crisp-formfield-desc { font-size: var(--crisp-text-sm); line-height: 16px; color: var(--crisp-fg-muted); }
+    & .crisp-formfield-error { font-size: var(--crisp-text-sm); line-height: 16px; color: var(--crisp-bg-danger); }
 }

package/dist/formfield.layered.css

@@ -0,0 +1,10 @@
+@layer crisp-components {
+.crisp-formfield {
+  display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans);
+    & .crisp-formfield-label { display: inline-flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-formfield-required { color: var(--crisp-bg-danger); }
+    & .crisp-formfield-optional { color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); font-weight: var(--crisp-weight-regular); }
+    & .crisp-formfield-desc { font-size: var(--crisp-text-sm); line-height: 16px; color: var(--crisp-fg-muted); }
+    & .crisp-formfield-error { font-size: var(--crisp-text-sm); line-height: 16px; color: var(--crisp-bg-danger); }
+}
+}

package/dist/inbox.css

@@ -1,37 +1,37 @@
-.inbox {
+.crisp-inbox {
   display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px;
-    border-radius: var(--radius-xl); background: var(--bg-surface); font-family: var(--font-sans); overflow: hidden;
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
+    border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .inbox-head { padding: var(--space-3) var(--space-3) 0; }
-    & .inbox-title { font-size: var(--text-xl); line-height: 28px; font-weight: var(--weight-semibold); letter-spacing: -0.3px; color: var(--fg-primary); }
-    & .inbox-tabs { display: flex; gap: var(--space-3); margin-top: var(--space-2); box-shadow: inset 0 -1px 0 var(--border-subtle); }
-    & .inbox-tab { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 32px; padding: 0 2px; margin: 0; border: none; background: none; font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-muted); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
-    & .inbox-tab:hover { color: var(--fg-primary); }
-    & .inbox-tab[data-active] { color: var(--bg-brand-solid); box-shadow: inset 0 -2px 0 var(--bg-brand-solid); }
-    & .inbox-tab-count { font-size: var(--text-sm); color: var(--fg-muted); }
-    & .inbox-tab[data-active] .inbox-tab-count { color: var(--bg-brand-solid); }
+    & .crisp-inbox-head { padding: var(--crisp-space-3) var(--crisp-space-3) 0; }
+    & .crisp-inbox-title { font-size: var(--crisp-text-xl); line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; color: var(--crisp-fg-primary); }
+    & .crisp-inbox-tabs { display: flex; gap: var(--crisp-space-3); margin-top: var(--crisp-space-2); box-shadow: inset 0 -1px 0 var(--crisp-border-subtle); }
+    & .crisp-inbox-tab { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 32px; padding: 0 2px; margin: 0; border: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
+    & .crisp-inbox-tab:hover { color: var(--crisp-fg-primary); }
+    & .crisp-inbox-tab[data-active] { color: var(--crisp-bg-brand-solid); box-shadow: inset 0 -2px 0 var(--crisp-bg-brand-solid); }
+    & .crisp-inbox-tab-count { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-inbox-tab[data-active] .crisp-inbox-tab-count { color: var(--crisp-bg-brand-solid); }
 
-    & .inbox-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-1); display: flex; flex-direction: column; gap: 1px; }
-    & .inbox-row { display: flex; align-items: flex-start; gap: var(--space-2-5); padding: var(--space-2) var(--space-2); margin: 0; border: none; border-radius: var(--radius-md); background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
-    & .inbox-row:hover { background: var(--bg-raised); }
-    & .inbox-row-avatar { flex-shrink: 0; margin-top: 1px; }
-    & .inbox-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-    & .inbox-row-msg { font-size: var(--text-lg); line-height: 18px; color: var(--fg-primary); }
-    & .inbox-row-msg b { font-weight: var(--weight-semibold); }
-    & .inbox-row-time { font-size: var(--text-sm); color: var(--fg-muted); }
-    & .inbox-row-unread { flex-shrink: 0; width: 8px; height: 8px; margin-top: var(--space-1); border-radius: var(--radius-full); background: var(--bg-brand-solid); }
+    & .crisp-inbox-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-1); display: flex; flex-direction: column; gap: 1px; }
+    & .crisp-inbox-row { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .crisp-inbox-row:hover { background: var(--crisp-bg-raised); }
+    & .crisp-inbox-row-avatar { flex-shrink: 0; margin-top: 1px; }
+    & .crisp-inbox-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .crisp-inbox-row-msg { font-size: var(--crisp-text-lg); line-height: 18px; color: var(--crisp-fg-primary); }
+    & .crisp-inbox-row-msg b { font-weight: var(--crisp-weight-semibold); }
+    & .crisp-inbox-row-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-inbox-row-unread { flex-shrink: 0; width: 8px; height: 8px; margin-top: var(--crisp-space-1); border-radius: var(--crisp-radius-full); background: var(--crisp-bg-brand-solid); }
 
-    & .inbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-6) var(--space-4); text-align: center; }
-    & .inbox-empty-icon { display: inline-flex; margin-bottom: var(--space-2); color: color-mix(in srgb, var(--fg-primary) 22%, transparent); }
-    & .inbox-empty-title { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--fg-primary); }
-    & .inbox-empty-sub { font-size: var(--text-md); line-height: 18px; color: var(--fg-muted); max-width: 260px; }
-    & .inbox-empty-action { margin-top: var(--space-2); }
+    & .crisp-inbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--crisp-space-1); padding: var(--crisp-space-6) var(--crisp-space-4); text-align: center; }
+    & .crisp-inbox-empty-icon { display: inline-flex; margin-bottom: var(--crisp-space-2); color: color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); }
+    & .crisp-inbox-empty-title { font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
+    & .crisp-inbox-empty-sub { font-size: var(--crisp-text-md); line-height: 18px; color: var(--crisp-fg-muted); max-width: 260px; }
+    & .crisp-inbox-empty-action { margin-top: var(--crisp-space-2); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .inbox, .inbox * {
+  .crisp-inbox, .crisp-inbox * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;