@crisp-ui-kit/crisp 0.36.0 → 0.38.0

package/dist/esm/product/recordstable/recordstable.js

@@ -14,7 +14,7 @@ import { Menu, MenuItem, useMenuKeyboard } from "../../components/menu/index.js"
 import { MultiSelect } from "../../components/multiselect/index.js";
 import { Select } from "../../components/select/index.js";
 import { Switch } from "../../components/switch/index.js";
-import { isRtlElement, usePrefersReducedMotion } from "../../core/index.js";
+import { isInsideLaterFloatingLayer, isRtlElement, usePrefersReducedMotion, } from "../../core/index.js";
 import { companyLogos } from "./company-logos.js";
 import { recordstableRecipe } from "./recordstable.recipe.js";
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
@@ -460,8 +460,15 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
             return;
         const onDown = (e) => {
             const t = e.target;
-            if (!t.closest(".crisp-recordstable-menu, [data-menu-trigger]"))
-                setOpenMenu(null);
+            if (t.closest(".crisp-recordstable-menu, [data-menu-trigger]"))
+                return;
+            // #339: a Select/MultiSelect/Menu opened from inside this popover now
+            // portals to document.body, so it's no longer inside
+            // .crisp-recordstable-menu by DOM containment -- check the shared
+            // floating-layer stack too.
+            if (isInsideLaterFloatingLayer(t, null))
+                return;
+            setOpenMenu(null);
         };
         const onKey = (e) => e.key === "Escape" && setOpenMenu(null);
         document.addEventListener("mousedown", onDown);
@@ -476,8 +483,12 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
         if (!ctxMenu)
             return;
         const onDown = (e) => {
-            if (!e.target.closest(".crisp-recordstable-ctx"))
-                setCtxMenu(null);
+            const t = e.target;
+            if (t.closest(".crisp-recordstable-ctx"))
+                return;
+            if (isInsideLaterFloatingLayer(t, null))
+                return;
+            setCtxMenu(null);
         };
         const onKey = (e) => e.key === "Escape" && setCtxMenu(null);
         document.addEventListener("mousedown", onDown);

package/dist/esm/tokens/palette.js

@@ -57,4 +57,27 @@ export const palette = {
     cyan600: { light: "#00b9eb", dark: "#00b9eb" },
     purple600: { light: "#9b69ff", dark: "#9b69ff" },
     graySidebar: { light: "#fbfbfb", dark: "#0e0f10" },
+    // Soft Badge's text colour (#323): the *600 tones above, used directly as
+    // soft-badge text, fail AA on their own soft tint in light mode (2.97-3.87)
+    // and brand fails in dark too (3.83) -- everything else already brightens
+    // enough in dark to pass (measured: 5.60-6.77). Attio's own soft tag pills
+    // (a company's Categories field, app.attio.com, 2026-09-23) don't reuse the
+    // accent colour as text either: they shift it toward black (light) or white
+    // (dark) at roughly the same relative luminance regardless of hue --
+    // measured 5 different category colours in dark mode (L 0.61-0.75) and two
+    // in light (L 0.08-0.10), a tight enough cluster to generalise the SHIFT,
+    // not the exact colour, to crisp's own four accent hues. Computed to clear
+    // AA with the same margin Attio's pills measured at (5.5-6.5:1) against
+    // crisp's EXISTING soft-tint background -- the tint itself is unchanged.
+    // Dark values that already passed keep their *600 dark value unchanged.
+    softBrandText: { light: "#2057bd", dark: "#568df3" },
+    softSuccessText: { light: "#186b3d", dark: "#2ea968" },
+    softWarningText: { light: "#80520d", dark: "#e0982a" },
+    softDangerText: { light: "#a33539", dark: "#ff5a5f" },
+    // Same reasoning, for Badge's neutral tone: fg-muted on bg-raised measures
+    // 4.40 in light (just under AA) and 6.77 in dark (already fine). Unlike
+    // fg-muted/bg-raised themselves (system-wide, measured from Attio, kept
+    // as-is per build/spec-check.mjs's own note), this token exists only for
+    // Badge's soft-neutral text, so darkening it doesn't move any other surface.
+    softNeutralText: { light: "#686870", dark: "#9a9aa2" },
 };

package/dist/esm/tokens/semantic.js

@@ -51,4 +51,11 @@ export const semantic = {
     // #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",
+    /** Soft Badge's text colour (#323) — see palette.ts's comment on the
+     * soft*Text entries for the Attio measurement this is derived from. */
+    fgBrandSoft: "softBrandText",
+    fgSuccessSoft: "softSuccessText",
+    fgWarningSoft: "softWarningText",
+    fgDangerSoft: "softDangerText",
+    fgNeutralSoft: "softNeutralText",
 };

package/dist/menu.css

@@ -1,6 +1,6 @@
 .crisp-menu {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-menu-content { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-menu-content { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-menu-content[data-align="end"] { transform-origin: top right; }
     & .crisp-menu-content[data-up] { transform-origin: bottom left; }
     & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }

package/dist/menu.layered.css

@@ -1,7 +1,7 @@
 @layer crisp-components {
 .crisp-menu {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-menu-content { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-menu-content { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-menu-content[data-align="end"] { transform-origin: top right; }
     & .crisp-menu-content[data-up] { transform-origin: bottom left; }
     & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }

package/dist/multiselect.css

@@ -8,7 +8,7 @@
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
-    & .crisp-multiselect-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-multiselect-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -30,6 +30,12 @@
     & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); }
     & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
 }
+.crisp-multiselect--invalid_true {
+  & .crisp-multiselect-trigger, & .crisp-multiselect-trigger:hover, & .crisp-multiselect-trigger[data-open], & .crisp-multiselect-trigger:focus-visible { box-shadow: inset 0 0 0 1px var(--crisp-bg-danger); }
+}
+.crisp-multiselect--invalid_false {
+  
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-multiselect, .crisp-multiselect * {

package/dist/multiselect.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface MultiselectVariants {
-
+  invalid?: boolean;
 }
 
-export declare const multiselectRecipe: RecipeFn<{  }>;
+export declare const multiselectRecipe: RecipeFn<{ invalid: { true: string; false: string } }>;

package/dist/multiselect.layered.css

@@ -9,7 +9,7 @@
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
-    & .crisp-multiselect-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-multiselect-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -31,6 +31,12 @@
     & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); }
     & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
 }
+.crisp-multiselect--invalid_true {
+  & .crisp-multiselect-trigger, & .crisp-multiselect-trigger:hover, & .crisp-multiselect-trigger[data-open], & .crisp-multiselect-trigger:focus-visible { box-shadow: inset 0 0 0 1px var(--crisp-bg-danger); }
+}
+.crisp-multiselect--invalid_false {
+  
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-multiselect, .crisp-multiselect * {

package/dist/native/tokens.d.ts

@@ -2,7 +2,7 @@
 // The same tokens the CSS custom properties carry, resolved per theme, with
 // dimensions as numbers for React Native and Lynx style objects.
 export type Theme = "light" | "dark";
-export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "borderDefault" | "borderSubtle" | "ringNeutral" | "bgTileActive" | "shadowTileActive" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle", string>;
+export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "borderDefault" | "borderSubtle" | "ringNeutral" | "bgTileActive" | "shadowTileActive" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft", string>;
 export declare const tokens: {
   color: Record<Theme, ColorTokens>;
   palette: Record<Theme, Record<string, string>>;

package/dist/native/tokens.js

@@ -42,7 +42,12 @@ export const tokens = {
       "bgCyan": "#00b9eb",
       "bgPurple": "#9b69ff",
       "bgSidebar": "#fbfbfb",
-      "bgSubtle": "#fbfbfb"
+      "bgSubtle": "#fbfbfb",
+      "fgBrandSoft": "#2057bd",
+      "fgSuccessSoft": "#186b3d",
+      "fgWarningSoft": "#80520d",
+      "fgDangerSoft": "#a33539",
+      "fgNeutralSoft": "#686870"
     },
     "dark": {
       "bgBrandSolid": "#266df0",
@@ -83,7 +88,12 @@ export const tokens = {
       "bgCyan": "#00b9eb",
       "bgPurple": "#9b69ff",
       "bgSidebar": "#0e0f10",
-      "bgSubtle": "#0e0f10"
+      "bgSubtle": "#0e0f10",
+      "fgBrandSoft": "#568df3",
+      "fgSuccessSoft": "#2ea968",
+      "fgWarningSoft": "#e0982a",
+      "fgDangerSoft": "#ff5a5f",
+      "fgNeutralSoft": "#9a9aa2"
     }
   },
   "palette": {
@@ -125,7 +135,12 @@ export const tokens = {
       "orange600": "#f97514",
       "cyan600": "#00b9eb",
       "purple600": "#9b69ff",
-      "graySidebar": "#fbfbfb"
+      "graySidebar": "#fbfbfb",
+      "softBrandText": "#2057bd",
+      "softSuccessText": "#186b3d",
+      "softWarningText": "#80520d",
+      "softDangerText": "#a33539",
+      "softNeutralText": "#686870"
     },
     "dark": {
       "gray00": "#0a0a0a",
@@ -165,7 +180,12 @@ export const tokens = {
       "orange600": "#f97514",
       "cyan600": "#00b9eb",
       "purple600": "#9b69ff",
-      "graySidebar": "#0e0f10"
+      "graySidebar": "#0e0f10",
+      "softBrandText": "#568df3",
+      "softSuccessText": "#2ea968",
+      "softWarningText": "#e0982a",
+      "softDangerText": "#ff5a5f",
+      "softNeutralText": "#9a9aa2"
     }
   },
   "space": {

package/dist/popover.css

@@ -1,6 +1,6 @@
 .crisp-popover {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-popover-content { position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
     & .crisp-popover-content[data-up] { transform-origin: bottom left; }
 }

package/dist/popover.layered.css

@@ -1,7 +1,7 @@
 @layer crisp-components {
 .crisp-popover {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-popover-content { position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
     & .crisp-popover-content[data-up] { transform-origin: bottom left; }
 }

package/dist/select.css

@@ -8,7 +8,7 @@
     & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
-    & .crisp-select-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-select-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-select-listbox[data-up] { transform-origin: bottom; }
     & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -37,6 +37,12 @@
 .crisp-select--width_auto {
   width: auto;
 }
+.crisp-select--invalid_true {
+  & .crisp-select-trigger, & .crisp-select-trigger:hover, & .crisp-select-trigger[data-open], & .crisp-select-trigger:focus-visible { box-shadow: inset 0 0 0 1px var(--crisp-bg-danger); }
+}
+.crisp-select--invalid_false {
+  
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-select, .crisp-select * {

package/dist/select.d.ts

@@ -3,6 +3,7 @@ import type { RecipeFn } from "../core/types";
 export interface SelectVariants {
   variant?: "default" | "ghost";
   width?: "full" | "auto";
+  invalid?: boolean;
 }
 
-export declare const selectRecipe: RecipeFn<{ variant: { default: string; ghost: string }; width: { full: string; auto: string } }>;
+export declare const selectRecipe: RecipeFn<{ variant: { default: string; ghost: string }; width: { full: string; auto: string }; invalid: { true: string; false: string } }>;

package/dist/select.layered.css

@@ -9,7 +9,7 @@
     & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
-    & .crisp-select-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-select-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-select-listbox[data-up] { transform-origin: bottom; }
     & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -38,6 +38,12 @@
 .crisp-select--width_auto {
   width: auto;
 }
+.crisp-select--invalid_true {
+  & .crisp-select-trigger, & .crisp-select-trigger:hover, & .crisp-select-trigger[data-open], & .crisp-select-trigger:focus-visible { box-shadow: inset 0 0 0 1px var(--crisp-bg-danger); }
+}
+.crisp-select--invalid_false {
+  
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-select, .crisp-select * {

package/dist/styles.css

@@ -38,6 +38,11 @@
   --crisp-bg-purple: #9b69ff;
   --crisp-bg-sidebar: #fbfbfb;
   --crisp-bg-subtle: #fbfbfb;
+  --crisp-fg-brand-soft: #2057bd;
+  --crisp-fg-success-soft: #186b3d;
+  --crisp-fg-warning-soft: #80520d;
+  --crisp-fg-danger-soft: #a33539;
+  --crisp-fg-neutral-soft: #686870;
 }
 
 [data-theme="dark"] {
@@ -80,6 +85,11 @@
   --crisp-bg-purple: #9b69ff;
   --crisp-bg-sidebar: #0e0f10;
   --crisp-bg-subtle: #0e0f10;
+  --crisp-fg-brand-soft: #568df3;
+  --crisp-fg-success-soft: #2ea968;
+  --crisp-fg-warning-soft: #e0982a;
+  --crisp-fg-danger-soft: #ff5a5f;
+  --crisp-fg-neutral-soft: #9a9aa2;
 }
 
 :root {
@@ -196,19 +206,19 @@
     & .crisp-badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: currentColor; }
 }
 .crisp-badge--tone_neutral {
-  background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
+  background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-soft); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
 }
 .crisp-badge--tone_brand {
-  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: var(--crisp-bg-brand-solid); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: var(--crisp-fg-brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
 }
 .crisp-badge--tone_success {
-  background: color-mix(in srgb, var(--crisp-bg-success) 14%, transparent); color: var(--crisp-bg-success); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+  background: color-mix(in srgb, var(--crisp-bg-success) 14%, transparent); color: var(--crisp-fg-success-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
 }
 .crisp-badge--tone_warning {
-  background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); color: var(--crisp-bg-warning); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 32%, transparent);
+  background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); color: var(--crisp-fg-warning-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 32%, transparent);
 }
 .crisp-badge--tone_danger {
-  background: color-mix(in srgb, var(--crisp-bg-danger) 14%, transparent); color: var(--crisp-bg-danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+  background: color-mix(in srgb, var(--crisp-bg-danger) 14%, transparent); color: var(--crisp-fg-danger-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
 }
 .crisp-badge--size_small {
   height: 16px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-xs); border-radius: var(--crisp-radius-sm);
@@ -450,7 +460,7 @@
 
 .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-content { position: fixed; z-index: 70; 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); }
@@ -710,7 +720,7 @@
     & .crisp-dialog-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-dialog-header { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; height: 52px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); }
     & .crisp-dialog-header svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); margin: 0; }
     & .crisp-dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
     & .crisp-dialog-close:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--crisp-space-4); padding: var(--crisp-space-5) var(--crisp-space-4); }
@@ -973,7 +983,7 @@
 
 .crisp-menu {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-menu-content { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-menu-content { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-menu-content[data-align="end"] { transform-origin: top right; }
     & .crisp-menu-content[data-up] { transform-origin: bottom left; }
     & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
@@ -1012,7 +1022,7 @@
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
-    & .crisp-multiselect-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-multiselect-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -1034,6 +1044,12 @@
     & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); }
     & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
 }
+.crisp-multiselect--invalid_true {
+  & .crisp-multiselect-trigger, & .crisp-multiselect-trigger:hover, & .crisp-multiselect-trigger[data-open], & .crisp-multiselect-trigger:focus-visible { box-shadow: inset 0 0 0 1px var(--crisp-bg-danger); }
+}
+.crisp-multiselect--invalid_false {
+  
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-multiselect, .crisp-multiselect * {
@@ -1045,7 +1061,7 @@
 
 .crisp-popover {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-popover-content { position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
     & .crisp-popover-content[data-up] { transform-origin: bottom left; }
 }
@@ -1217,7 +1233,7 @@
     & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
-    & .crisp-select-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-select-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-select-listbox[data-up] { transform-origin: bottom; }
     & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -1246,6 +1262,12 @@
 .crisp-select--width_auto {
   width: auto;
 }
+.crisp-select--invalid_true {
+  & .crisp-select-trigger, & .crisp-select-trigger:hover, & .crisp-select-trigger[data-open], & .crisp-select-trigger:focus-visible { box-shadow: inset 0 0 0 1px var(--crisp-bg-danger); }
+}
+.crisp-select--invalid_false {
+  
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-select, .crisp-select * {

package/dist/styles.layered.css

@@ -38,6 +38,11 @@
   --crisp-bg-purple: #9b69ff;
   --crisp-bg-sidebar: #fbfbfb;
   --crisp-bg-subtle: #fbfbfb;
+  --crisp-fg-brand-soft: #2057bd;
+  --crisp-fg-success-soft: #186b3d;
+  --crisp-fg-warning-soft: #80520d;
+  --crisp-fg-danger-soft: #a33539;
+  --crisp-fg-neutral-soft: #686870;
 }
 
 [data-theme="dark"] {
@@ -80,6 +85,11 @@
   --crisp-bg-purple: #9b69ff;
   --crisp-bg-sidebar: #0e0f10;
   --crisp-bg-subtle: #0e0f10;
+  --crisp-fg-brand-soft: #568df3;
+  --crisp-fg-success-soft: #2ea968;
+  --crisp-fg-warning-soft: #e0982a;
+  --crisp-fg-danger-soft: #ff5a5f;
+  --crisp-fg-neutral-soft: #9a9aa2;
 }
 
 :root {
@@ -197,19 +207,19 @@
     & .crisp-badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: currentColor; }
 }
 .crisp-badge--tone_neutral {
-  background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
+  background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-soft); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
 }
 .crisp-badge--tone_brand {
-  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: var(--crisp-bg-brand-solid); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: var(--crisp-fg-brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
 }
 .crisp-badge--tone_success {
-  background: color-mix(in srgb, var(--crisp-bg-success) 14%, transparent); color: var(--crisp-bg-success); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+  background: color-mix(in srgb, var(--crisp-bg-success) 14%, transparent); color: var(--crisp-fg-success-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
 }
 .crisp-badge--tone_warning {
-  background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); color: var(--crisp-bg-warning); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 32%, transparent);
+  background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); color: var(--crisp-fg-warning-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 32%, transparent);
 }
 .crisp-badge--tone_danger {
-  background: color-mix(in srgb, var(--crisp-bg-danger) 14%, transparent); color: var(--crisp-bg-danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+  background: color-mix(in srgb, var(--crisp-bg-danger) 14%, transparent); color: var(--crisp-fg-danger-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
 }
 .crisp-badge--size_small {
   height: 16px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-xs); border-radius: var(--crisp-radius-sm);
@@ -451,7 +461,7 @@
 
 .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-content { position: fixed; z-index: 70; 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); }
@@ -711,7 +721,7 @@
     & .crisp-dialog-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-dialog-header { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; height: 52px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); }
     & .crisp-dialog-header svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); margin: 0; }
     & .crisp-dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
     & .crisp-dialog-close:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--crisp-space-4); padding: var(--crisp-space-5) var(--crisp-space-4); }
@@ -974,7 +984,7 @@
 
 .crisp-menu {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-menu-content { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-menu-content { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-menu-content[data-align="end"] { transform-origin: top right; }
     & .crisp-menu-content[data-up] { transform-origin: bottom left; }
     & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
@@ -1013,7 +1023,7 @@
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
-    & .crisp-multiselect-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-multiselect-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -1035,6 +1045,12 @@
     & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); }
     & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
 }
+.crisp-multiselect--invalid_true {
+  & .crisp-multiselect-trigger, & .crisp-multiselect-trigger:hover, & .crisp-multiselect-trigger[data-open], & .crisp-multiselect-trigger:focus-visible { box-shadow: inset 0 0 0 1px var(--crisp-bg-danger); }
+}
+.crisp-multiselect--invalid_false {
+  
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-multiselect, .crisp-multiselect * {
@@ -1046,7 +1062,7 @@
 
 .crisp-popover {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-popover-content { position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
     & .crisp-popover-content[data-up] { transform-origin: bottom left; }
 }
@@ -1218,7 +1234,7 @@
     & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
-    & .crisp-select-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-select-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-select-listbox[data-up] { transform-origin: bottom; }
     & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -1247,6 +1263,12 @@
 .crisp-select--width_auto {
   width: auto;
 }
+.crisp-select--invalid_true {
+  & .crisp-select-trigger, & .crisp-select-trigger:hover, & .crisp-select-trigger[data-open], & .crisp-select-trigger:focus-visible { box-shadow: inset 0 0 0 1px var(--crisp-bg-danger); }
+}
+.crisp-select--invalid_false {
+  
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-select, .crisp-select * {

package/dist/tokens.css

@@ -38,6 +38,11 @@
   --crisp-bg-purple: #9b69ff;
   --crisp-bg-sidebar: #fbfbfb;
   --crisp-bg-subtle: #fbfbfb;
+  --crisp-fg-brand-soft: #2057bd;
+  --crisp-fg-success-soft: #186b3d;
+  --crisp-fg-warning-soft: #80520d;
+  --crisp-fg-danger-soft: #a33539;
+  --crisp-fg-neutral-soft: #686870;
 }
 
 [data-theme="dark"] {
@@ -80,6 +85,11 @@
   --crisp-bg-purple: #9b69ff;
   --crisp-bg-sidebar: #0e0f10;
   --crisp-bg-subtle: #0e0f10;
+  --crisp-fg-brand-soft: #568df3;
+  --crisp-fg-success-soft: #2ea968;
+  --crisp-fg-warning-soft: #e0982a;
+  --crisp-fg-danger-soft: #ff5a5f;
+  --crisp-fg-neutral-soft: #9a9aa2;
 }
 
 :root {