@crisp-ui-kit/crisp 0.37.0 → 0.38.0

package/dist/badge.css

@@ -3,19 +3,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);

package/dist/badge.layered.css

@@ -4,19 +4,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);

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

@@ -32,29 +32,35 @@ const spec = (0, core_1.defineSpec)({
     ],
     variants: {
         tone: {
+            // #323: the soft text colour is a dedicated fg*Soft token, not the
+            // tone's own accent (fgMuted/bgBrandSolid/bgSuccess/bgWarning/bgDanger)
+            // — reusing the accent as soft text is exactly what measured below AA
+            // (2.97-4.40 in light; brand also failed in dark, 3.83). Background and
+            // ring are unchanged: they were never the problem, and neither is a
+            // measured Attio value that moving would help — only the text is.
             neutral: {
                 background: tokens_1.contract.bgRaised,
-                color: tokens_1.contract.fgMuted,
+                color: tokens_1.contract.fgNeutralSoft,
                 boxShadow: `inset 0 0 0 1px ${tokens_1.contract.borderDefault}`,
             },
             brand: {
                 background: soft(tokens_1.contract.bgBrandSolid, 14),
-                color: tokens_1.contract.bgBrandSolid,
+                color: tokens_1.contract.fgBrandSoft,
                 boxShadow: ring(tokens_1.contract.bgBrandSolid, 30),
             },
             success: {
                 background: soft(tokens_1.contract.bgSuccess, 14),
-                color: tokens_1.contract.bgSuccess,
+                color: tokens_1.contract.fgSuccessSoft,
                 boxShadow: ring(tokens_1.contract.bgSuccess, 30),
             },
             warning: {
                 background: soft(tokens_1.contract.bgWarning, 16),
-                color: tokens_1.contract.bgWarning,
+                color: tokens_1.contract.fgWarningSoft,
                 boxShadow: ring(tokens_1.contract.bgWarning, 32),
             },
             danger: {
                 background: soft(tokens_1.contract.bgDanger, 14),
-                color: tokens_1.contract.bgDanger,
+                color: tokens_1.contract.fgDangerSoft,
                 boxShadow: ring(tokens_1.contract.bgDanger, 30),
             },
         },

package/dist/cjs/components/fileupload/fileupload.js

@@ -73,7 +73,7 @@ function formatSize(bytes) {
  * is theirs by construction. Controlled or uncontrolled, the same way every
  * other crisp component is.
  */
-function FileUpload({ className, labels, "aria-label": ariaLabel, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }) {
+function FileUpload({ className, labels, "aria-label": ariaLabel, id, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }) {
     const props = {
         accept,
         disabled: disabledProp,
@@ -124,7 +124,7 @@ function FileUpload({ className, labels, "aria-label": ariaLabel, accept, disabl
     // focus should land next.
     const rootRef = React.useRef(null);
     const focusAfterRemoval = (0, core_1.useFocusAfterRemoval)(rootRef, ".crisp-fileupload-remove", dropzoneRef);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, ...rest, className: (0, fileupload_recipe_1.fileuploadRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "crisp-fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-title", children: t.title }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-hint", children: t.hint })] }), (0, jsx_runtime_1.jsx)("input", { ...hiddenInputProps, ref: inputRef, className: "crisp-fileupload-input" }), acceptedFileEntries.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "crisp-fileupload-list", children: acceptedFileEntries.map((entry, i) => ((0, jsx_runtime_1.jsxs)("li", { className: "crisp-fileupload-item", "data-status": entry.status, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-item-size", children: formatSize(entry.file.size) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, ...rest, className: (0, fileupload_recipe_1.fileuploadRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "crisp-fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-title", children: t.title }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-hint", children: t.hint })] }), (0, jsx_runtime_1.jsx)("input", { ...hiddenInputProps, id: id ?? hiddenInputProps.id, ref: inputRef, className: "crisp-fileupload-input" }), acceptedFileEntries.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "crisp-fileupload-list", children: acceptedFileEntries.map((entry, i) => ((0, jsx_runtime_1.jsxs)("li", { className: "crisp-fileupload-item", "data-status": entry.status, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-item-size", children: formatSize(entry.file.size) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => {
                                 focusAfterRemoval(i);
                                 removeFileEntry(entry.id);
                             }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), (0, jsx_runtime_1.jsx)("ul", { className: "crisp-fileupload-errors", "aria-live": "polite", children: rejections.map((r) => ((0, jsx_runtime_1.jsx)("li", { className: "crisp-fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));

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

@@ -69,7 +69,7 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, n
 // The id belongs on the trigger, not the wrapper: `<label for>` only names a
 // LABELABLE element, so an id left on the root div meant a FormField label
 // above this control named nothing (#247). Select already did this.
-id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
+id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, invalid, className, "aria-label": ariaLabel, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field) and the
     // active option is named by `aria-activedescendant`. `data-highlighted` is a
     // styling hook only -- a screen reader cannot see it.
@@ -182,8 +182,8 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ className }), ...rest, children: [name &&
-                (value.length > 0 ? value : required ? [""] : []).map((v) => ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ invalid, className }), ...rest, children: [name &&
+                (value.length > 0 ? value : required ? [""] : []).map((v) => ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {

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

@@ -62,8 +62,19 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
     & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
   `,
-    variants: {},
-    defaultVariants: {},
+    variants: {
+        // Same ring Select's `invalid` draws — see that recipe's comment.
+        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 ${tokens_1.contract.bgDanger}; }
+      `,
+            false: ``,
+        },
+    },
+    defaultVariants: { invalid: false },
     compoundVariants: [],
 });
 exports.multiselectRecipe = Object.assign((0, core_1.resolveRecipe)(config), {

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

@@ -52,7 +52,7 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
+function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field), and the
     // active option is named by `aria-activedescendant`. That is the only thing a
     // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
@@ -177,10 +177,10 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, className }), ...rest, children: [name && (selected || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, invalid, className }), ...rest, children: [name && (selected || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden
-                onChange: () => { } })), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { children: (0, jsx_runtime_1.jsxs)("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                onChange: () => { } })), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { children: (0, jsx_runtime_1.jsxs)("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                         setQuery(e.target.value);
                                         setHighlight(0);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {

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

@@ -73,8 +73,21 @@ const config = (0, core_1.defineRecipe)({
             full: `width: 100%;`,
             auto: `width: auto;`,
         },
+        // Same ring Input's `invalid` draws, adapted to Select's box-shadow-ring
+        // trigger (a real <button>, so it needs no ::after overlay the way
+        // Input/Textarea do). Outranks hover/open/focus, same reasoning as
+        // Input: a field being corrected stays visibly wrong while it is.
+        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 ${tokens_1.contract.bgDanger}; }
+      `,
+            false: ``,
+        },
     },
-    defaultVariants: { variant: "default", width: "full" },
+    defaultVariants: { variant: "default", width: "full", invalid: false },
     compoundVariants: [],
 });
 exports.selectRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });

package/dist/cjs/tokens/palette.js

@@ -60,4 +60,27 @@ exports.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/cjs/tokens/semantic.js

@@ -54,4 +54,11 @@ exports.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/esm/components/badge/badge.recipe.js

@@ -29,29 +29,35 @@ const spec = defineSpec({
     ],
     variants: {
         tone: {
+            // #323: the soft text colour is a dedicated fg*Soft token, not the
+            // tone's own accent (fgMuted/bgBrandSolid/bgSuccess/bgWarning/bgDanger)
+            // — reusing the accent as soft text is exactly what measured below AA
+            // (2.97-4.40 in light; brand also failed in dark, 3.83). Background and
+            // ring are unchanged: they were never the problem, and neither is a
+            // measured Attio value that moving would help — only the text is.
             neutral: {
                 background: c.bgRaised,
-                color: c.fgMuted,
+                color: c.fgNeutralSoft,
                 boxShadow: `inset 0 0 0 1px ${c.borderDefault}`,
             },
             brand: {
                 background: soft(c.bgBrandSolid, 14),
-                color: c.bgBrandSolid,
+                color: c.fgBrandSoft,
                 boxShadow: ring(c.bgBrandSolid, 30),
             },
             success: {
                 background: soft(c.bgSuccess, 14),
-                color: c.bgSuccess,
+                color: c.fgSuccessSoft,
                 boxShadow: ring(c.bgSuccess, 30),
             },
             warning: {
                 background: soft(c.bgWarning, 16),
-                color: c.bgWarning,
+                color: c.fgWarningSoft,
                 boxShadow: ring(c.bgWarning, 32),
             },
             danger: {
                 background: soft(c.bgDanger, 14),
-                color: c.bgDanger,
+                color: c.fgDangerSoft,
                 boxShadow: ring(c.bgDanger, 30),
             },
         },

package/dist/esm/components/fileupload/fileupload.js

@@ -36,7 +36,7 @@ function formatSize(bytes) {
  * is theirs by construction. Controlled or uncontrolled, the same way every
  * other crisp component is.
  */
-export function FileUpload({ className, labels, "aria-label": ariaLabel, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }) {
+export function FileUpload({ className, labels, "aria-label": ariaLabel, id, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }) {
     const props = {
         accept,
         disabled: disabledProp,
@@ -87,7 +87,7 @@ export function FileUpload({ className, labels, "aria-label": ariaLabel, accept,
     // focus should land next.
     const rootRef = React.useRef(null);
     const focusAfterRemoval = useFocusAfterRemoval(rootRef, ".crisp-fileupload-remove", dropzoneRef);
-    return (_jsxs("div", { ref: rootRef, ...rest, className: fileuploadRecipe({ className }), children: [_jsxs("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "crisp-fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [_jsx("span", { className: "crisp-fileupload-title", children: t.title }), _jsx("span", { className: "crisp-fileupload-hint", children: t.hint })] }), _jsx("input", { ...hiddenInputProps, ref: inputRef, className: "crisp-fileupload-input" }), acceptedFileEntries.length > 0 && (_jsx("ul", { className: "crisp-fileupload-list", children: acceptedFileEntries.map((entry, i) => (_jsxs("li", { className: "crisp-fileupload-item", "data-status": entry.status, children: [_jsx("span", { className: "crisp-fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && (_jsx("span", { className: "crisp-fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: _jsx("span", { className: "crisp-fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), _jsx("span", { className: "crisp-fileupload-item-size", children: formatSize(entry.file.size) }), _jsx("button", { type: "button", className: "crisp-fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => {
+    return (_jsxs("div", { ref: rootRef, ...rest, className: fileuploadRecipe({ className }), children: [_jsxs("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "crisp-fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [_jsx("span", { className: "crisp-fileupload-title", children: t.title }), _jsx("span", { className: "crisp-fileupload-hint", children: t.hint })] }), _jsx("input", { ...hiddenInputProps, id: id ?? hiddenInputProps.id, ref: inputRef, className: "crisp-fileupload-input" }), acceptedFileEntries.length > 0 && (_jsx("ul", { className: "crisp-fileupload-list", children: acceptedFileEntries.map((entry, i) => (_jsxs("li", { className: "crisp-fileupload-item", "data-status": entry.status, children: [_jsx("span", { className: "crisp-fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && (_jsx("span", { className: "crisp-fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: _jsx("span", { className: "crisp-fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), _jsx("span", { className: "crisp-fileupload-item-size", children: formatSize(entry.file.size) }), _jsx("button", { type: "button", className: "crisp-fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => {
                                 focusAfterRemoval(i);
                                 removeFileEntry(entry.id);
                             }, children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), _jsx("ul", { className: "crisp-fileupload-errors", "aria-live": "polite", children: rejections.map((r) => (_jsx("li", { className: "crisp-fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));

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

@@ -33,7 +33,7 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
 // The id belongs on the trigger, not the wrapper: `<label for>` only names a
 // LABELABLE element, so an id left on the root div meant a FormField label
 // above this control named nothing (#247). Select already did this.
-id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
+id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, invalid, className, "aria-label": ariaLabel, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field) and the
     // active option is named by `aria-activedescendant`. `data-highlighted` is a
     // styling hook only -- a screen reader cannot see it.
@@ -146,8 +146,8 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), ...rest, children: [name &&
-                (value.length > 0 ? value : required ? [""] : []).map((v) => (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ invalid, className }), ...rest, children: [name &&
+                (value.length > 0 ? value : required ? [""] : []).map((v) => (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {

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

@@ -59,8 +59,19 @@ const config = defineRecipe({
     & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
     & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
   `,
-    variants: {},
-    defaultVariants: {},
+    variants: {
+        // Same ring Select's `invalid` draws — see that recipe's comment.
+        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 ${c.bgDanger}; }
+      `,
+            false: ``,
+        },
+    },
+    defaultVariants: { invalid: false },
     compoundVariants: [],
 });
 export const multiselectRecipe = Object.assign(resolveRecipe(config), {

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

@@ -16,7 +16,7 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
+export function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field), and the
     // active option is named by `aria-activedescendant`. That is the only thing a
     // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
@@ -141,10 +141,10 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), ...rest, children: [name && (selected || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
+    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, invalid, className }), ...rest, children: [name && (selected || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden
-                onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "crisp-select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "crisp-select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "crisp-select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "crisp-select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                         setQuery(e.target.value);
                                         setHighlight(0);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {

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

@@ -70,8 +70,21 @@ const config = defineRecipe({
             full: `width: 100%;`,
             auto: `width: auto;`,
         },
+        // Same ring Input's `invalid` draws, adapted to Select's box-shadow-ring
+        // trigger (a real <button>, so it needs no ::after overlay the way
+        // Input/Textarea do). Outranks hover/open/focus, same reasoning as
+        // Input: a field being corrected stays visibly wrong while it is.
+        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 ${c.bgDanger}; }
+      `,
+            false: ``,
+        },
     },
-    defaultVariants: { variant: "default", width: "full" },
+    defaultVariants: { variant: "default", width: "full", invalid: false },
     compoundVariants: [],
 });
 export const selectRecipe = Object.assign(resolveRecipe(config), { config });

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/multiselect.css

@@ -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

@@ -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/select.css

@@ -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

@@ -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);
@@ -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 * {
@@ -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);
@@ -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 * {
@@ -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 {

package/dist/tokens.json

@@ -39,7 +39,12 @@
       "bgCyan": "#00b9eb",
       "bgPurple": "#9b69ff",
       "bgSidebar": "#fbfbfb",
-      "bgSubtle": "#fbfbfb"
+      "bgSubtle": "#fbfbfb",
+      "fgBrandSoft": "#2057bd",
+      "fgSuccessSoft": "#186b3d",
+      "fgWarningSoft": "#80520d",
+      "fgDangerSoft": "#a33539",
+      "fgNeutralSoft": "#686870"
     },
     "dark": {
       "bgBrandSolid": "#266df0",
@@ -80,7 +85,12 @@
       "bgCyan": "#00b9eb",
       "bgPurple": "#9b69ff",
       "bgSidebar": "#0e0f10",
-      "bgSubtle": "#0e0f10"
+      "bgSubtle": "#0e0f10",
+      "fgBrandSoft": "#568df3",
+      "fgSuccessSoft": "#2ea968",
+      "fgWarningSoft": "#e0982a",
+      "fgDangerSoft": "#ff5a5f",
+      "fgNeutralSoft": "#9a9aa2"
     }
   },
   "palette": {
@@ -122,7 +132,12 @@
       "orange600": "#f97514",
       "cyan600": "#00b9eb",
       "purple600": "#9b69ff",
-      "graySidebar": "#fbfbfb"
+      "graySidebar": "#fbfbfb",
+      "softBrandText": "#2057bd",
+      "softSuccessText": "#186b3d",
+      "softWarningText": "#80520d",
+      "softDangerText": "#a33539",
+      "softNeutralText": "#686870"
     },
     "dark": {
       "gray00": "#0a0a0a",
@@ -162,7 +177,12 @@
       "orange600": "#f97514",
       "cyan600": "#00b9eb",
       "purple600": "#9b69ff",
-      "graySidebar": "#0e0f10"
+      "graySidebar": "#0e0f10",
+      "softBrandText": "#568df3",
+      "softSuccessText": "#2ea968",
+      "softWarningText": "#e0982a",
+      "softDangerText": "#ff5a5f",
+      "softNeutralText": "#9a9aa2"
     }
   },
   "space": {

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

@@ -21,4 +21,4 @@ export type FileUploadProps = UseFileUploadProps & Omit<React.ComponentPropsWith
  * is theirs by construction. Controlled or uncontrolled, the same way every
  * other crisp component is.
  */
-export declare function FileUpload({ className, labels, "aria-label": ariaLabel, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }: FileUploadProps): React.JSX.Element;
+export declare function FileUpload({ className, labels, "aria-label": ariaLabel, id, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }: FileUploadProps): React.JSX.Element;

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

@@ -37,6 +37,8 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
     /** Shown when the search matches nothing. */
     emptyLabel?: string;
     disabled?: boolean;
+    /** Red ring + `aria-invalid`, matching `Input`'s and `Select`'s. */
+    invalid?: boolean;
     className?: string;
     "aria-label"?: string;
 };
@@ -46,7 +48,7 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, required, id, placeholder, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
+export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, required, id, placeholder, searchable, searchPlaceholder, emptyLabel, disabled, invalid, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
 export declare namespace MultiSelect {
     var displayName: string;
 }

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

@@ -1,5 +1,20 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const multiselectRecipe: import("../..").RecipeFn<{}> & {
-    config: import("../..").RecipeConfig<{}>;
+declare const config: import("../..").RecipeConfig<{
+    invalid: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const multiselectRecipe: import("../..").RecipeFn<{
+    invalid: {
+        true: string;
+        false: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        invalid: {
+            true: string;
+            false: string;
+        };
+    }>;
 };
 export default config;

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

@@ -42,6 +42,9 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
     /** Shown when the search matches nothing. */
     emptyLabel?: string;
     disabled?: boolean;
+    /** Red ring + `aria-invalid`, matching `Input`'s. Outranks the open/focus
+     * ring — a field being corrected stays visibly wrong while it is. */
+    invalid?: boolean;
     className?: string;
     "aria-label"?: string;
     id?: string;
@@ -53,7 +56,7 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export declare function Select({ options, value, defaultValue, onValueChange, name, required, placeholder, variant, width, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
+export declare function Select({ options, value, defaultValue, onValueChange, name, required, placeholder, variant, width, searchable, searchPlaceholder, emptyLabel, disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }

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

@@ -7,6 +7,10 @@ declare const config: import("../..").RecipeConfig<{
         full: string;
         auto: string;
     };
+    invalid: {
+        true: string;
+        false: string;
+    };
 }>;
 export declare const selectRecipe: import("../..").RecipeFn<{
     variant: {
@@ -17,6 +21,10 @@ export declare const selectRecipe: import("../..").RecipeFn<{
         full: string;
         auto: string;
     };
+    invalid: {
+        true: string;
+        false: string;
+    };
 }> & {
     config: import("../..").RecipeConfig<{
         variant: {
@@ -27,6 +35,10 @@ export declare const selectRecipe: import("../..").RecipeFn<{
             full: string;
             auto: string;
         };
+        invalid: {
+            true: string;
+            false: string;
+        };
     }>;
 };
 export default config;

package/dist/types/product/sidebar/index.d.ts

@@ -1,2 +1,2 @@
-export { ATTIO_SIDEBAR_CHATS_SECTION, ATTIO_SIDEBAR_FOOTER, ATTIO_SIDEBAR_ITEMS, ATTIO_SIDEBAR_LISTS_SECTION, ATTIO_SIDEBAR_RECORDS_SECTION, ATTIO_SIDEBAR_WORKSPACE, Sidebar, type SidebarFooter, type SidebarListsSection, type SidebarNavItem, type SidebarProps, type SidebarRecordItem, type SidebarRecordsSection, type SidebarSection, type SidebarWorkspace, } from "./sidebar";
+export { ATTIO_SIDEBAR_CHATS_SECTION, ATTIO_SIDEBAR_FOOTER, ATTIO_SIDEBAR_ITEMS, ATTIO_SIDEBAR_LISTS_SECTION, ATTIO_SIDEBAR_RECORDS_SECTION, ATTIO_SIDEBAR_WORKSPACE, Sidebar, type SidebarFooter, type SidebarListsSection, type SidebarNavGroup, type SidebarNavGroupItem, type SidebarNavItem, type SidebarProps, type SidebarRecordItem, type SidebarRecordsSection, type SidebarSection, type SidebarWorkspace, } from "./sidebar";
 export { sidebarRecipe } from "./sidebar.recipe";

package/dist/types/tokens/contract.d.ts

@@ -40,6 +40,11 @@ export declare const contract: MapLeafNodes<{
     bgPurple: "purple600";
     bgSidebar: "graySidebar";
     bgSubtle: "graySidebar";
+    fgBrandSoft: "softBrandText";
+    fgSuccessSoft: "softSuccessText";
+    fgWarningSoft: "softWarningText";
+    fgDangerSoft: "softDangerText";
+    fgNeutralSoft: "softNeutralText";
 }, `var(--${string})`> & {
     space: Record<"0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "8" | "px", `var(--${string})`>;
     radius: Record<"2xl" | "chip" | "full" | "lg" | "md" | "sm" | "xl", `var(--${string})`>;

package/dist/types/tokens/palette.d.ts

@@ -151,5 +151,25 @@ export declare const palette: {
         readonly light: "#fbfbfb";
         readonly dark: "#0e0f10";
     };
+    readonly softBrandText: {
+        readonly light: "#2057bd";
+        readonly dark: "#568df3";
+    };
+    readonly softSuccessText: {
+        readonly light: "#186b3d";
+        readonly dark: "#2ea968";
+    };
+    readonly softWarningText: {
+        readonly light: "#80520d";
+        readonly dark: "#e0982a";
+    };
+    readonly softDangerText: {
+        readonly light: "#a33539";
+        readonly dark: "#ff5a5f";
+    };
+    readonly softNeutralText: {
+        readonly light: "#686870";
+        readonly dark: "#9a9aa2";
+    };
 };
 export type PaletteKey = keyof typeof palette;

package/dist/types/tokens/semantic.d.ts

@@ -46,5 +46,12 @@ export declare const semantic: {
     bgPurple: "purple600";
     bgSidebar: "graySidebar";
     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";
 };
 export type Tokens = typeof semantic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",