@crisp-ui-kit/crisp 0.57.0 → 0.57.2

package/dist/tokens.css

@@ -27,14 +27,16 @@
   font-display: swap;
 }
 :root {
-  --crisp-bg-brand-solid: #266df0;
-  --crisp-bg-brand-solid-pressed: #1f5fd6;
+  --crisp-bg-brand-solid: #0298d9;
+  --crisp-bg-brand-solid-pressed: #0283bb;
+  --crisp-bg-brand-contrast: #0278ac;
+  --crisp-fg-brand-contrast: #0278ac;
   --crisp-fg-on-brand: #ffffff;
   --crisp-fg-on-tone: #101112;
   --crisp-bg-surface: #ffffff;
-  --crisp-bg-raised: #f4f4f5;
+  --crisp-bg-raised: #f7f8f9;
   --crisp-bg-surface-muted: #f6f7f7;
-  --crisp-border-default: #e4e4e7;
+  --crisp-border-default: #dcdee3;
   --crisp-border-subtle: #eeeff1;
   --crisp-border-dropzone: #e6e7ea;
   --crisp-border-divider: #e6e7ea;
@@ -43,7 +45,9 @@
   --crisp-ring-switch: #d9dade;
   --crisp-bg-tile-active: #ffffff;
   --crisp-shadow-tile-active: rgba(0,0,0,0.04);
-  --crisp-bg-scrim: rgba(0,0,0,0.25);
+  --crisp-bg-scrim: rgba(0,0,0,0.45);
+  --crisp-bg-overlay-strong: #00000074;
+  --crisp-stroke-group-divider: #00000010;
   --crisp-fg-alert-description: rgba(0,0,0,0.63);
   --crisp-bg-overlay-frost: #ffffff;
   --crisp-shadow-overlay1: rgba(28,40,64,0.12);
@@ -56,9 +60,9 @@
   --crisp-shadow-popover3: rgba(24,41,75,0.16);
   --crisp-fg-primary: #101112;
   --crisp-fg-muted: #71717a;
-  --crisp-bg-danger: #e5484d;
-  --crisp-bg-danger-solid: #ba2525;
-  --crisp-fg-danger: #eb3b3b;
+  --crisp-bg-danger: #fa342c;
+  --crisp-bg-danger-solid: #ca1d13;
+  --crisp-fg-danger: #fa342c;
   --crisp-stroke-field-focus: #1a1c20;
   --crisp-fg-disabled: #d1d3d8;
   --crisp-bg-neutral-weak: #f3f4f5;
@@ -67,8 +71,9 @@
   --crisp-fg-neutral-subtle: #868b94;
   --crisp-fg-neutral-muted: #555d6d;
   --crisp-stroke-focus-ring: #1e82eb;
-  --crisp-bg-success: #1f9d57;
-  --crisp-bg-warning: #b5730f;
+  --crisp-bg-success: #079171;
+  --crisp-bg-warning: #9b7821;
+  --crisp-bg-warning-solid: #fbdc65;
   --crisp-bg-orange: #f97514;
   --crisp-bg-cyan: #00b9eb;
   --crisp-bg-purple: #9b69ff;
@@ -95,8 +100,10 @@
 }
 
 [data-theme="dark"] {
-  --crisp-bg-brand-solid: #266df0;
-  --crisp-bg-brand-solid-pressed: #1f5fd6;
+  --crisp-bg-brand-solid: #0298d9;
+  --crisp-bg-brand-solid-pressed: #0283bb;
+  --crisp-bg-brand-contrast: #0278ac;
+  --crisp-fg-brand-contrast: #0278ac;
   --crisp-fg-on-brand: #ffffff;
   --crisp-fg-on-tone: #101112;
   --crisp-bg-surface: #0a0a0a;
@@ -112,6 +119,8 @@
   --crisp-bg-tile-active: #101112;
   --crisp-shadow-tile-active: rgba(0,0,0,0);
   --crisp-bg-scrim: rgba(0,0,0,0.55);
+  --crisp-bg-overlay-strong: #00000074;
+  --crisp-stroke-group-divider: #ffffff17;
   --crisp-fg-alert-description: rgba(255,255,255,0.6);
   --crisp-bg-overlay-frost: #1c1d1f;
   --crisp-shadow-overlay1: rgba(0,0,0,0.48);
@@ -137,6 +146,7 @@
   --crisp-stroke-focus-ring: #5e98fe;
   --crisp-bg-success: #2ea968;
   --crisp-bg-warning: #e0982a;
+  --crisp-bg-warning-solid: #e0982a;
   --crisp-bg-orange: #f97514;
   --crisp-bg-cyan: #00b9eb;
   --crisp-bg-purple: #9b69ff;
@@ -175,13 +185,15 @@
   --crisp-space-1-5: 6px;
   --crisp-space-2-5: 10px;
   --crisp-space-3-5: 14px;
-  --crisp-radius-chip: 7px;
+  --crisp-radius-xs: 4px;
+  --crisp-radius-chip: 999px;
   --crisp-radius-sm: 6px;
   --crisp-radius-md: 8px;
   --crisp-radius-lg: 9px;
   --crisp-radius-xl: 12px;
   --crisp-radius-2xl: 16px;
   --crisp-radius-3xl: 20px;
+  --crisp-radius-4xl: 24px;
   --crisp-radius-full: 999px;
   --crisp-size-icon: 16px;
   --crisp-size-chip: 22px;
@@ -205,4 +217,10 @@
   --crisp-weight-semibold: 600;
   --crisp-weight-bold: 700;
   --crisp-font-sans: "VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --crisp-tracking-18: -0.36px;
+  --crisp-tracking-20: -0.4px;
+  --crisp-tracking-24: -0.48px;
+  --crisp-tracking-26: -0.52px;
+  --crisp-tracking-28: -0.56px;
+  --crisp-tracking-32: -0.64px;
 }

package/dist/tokens.json

@@ -1,14 +1,16 @@
 {
   "color": {
     "light": {
-      "bgBrandSolid": "#266df0",
-      "bgBrandSolidPressed": "#1f5fd6",
+      "bgBrandSolid": "#0298d9",
+      "bgBrandSolidPressed": "#0283bb",
+      "bgBrandContrast": "#0278ac",
+      "fgBrandContrast": "#0278ac",
       "fgOnBrand": "#ffffff",
       "fgOnTone": "#101112",
       "bgSurface": "#ffffff",
-      "bgRaised": "#f4f4f5",
+      "bgRaised": "#f7f8f9",
       "bgSurfaceMuted": "#f6f7f7",
-      "borderDefault": "#e4e4e7",
+      "borderDefault": "#dcdee3",
       "borderSubtle": "#eeeff1",
       "borderDropzone": "#e6e7ea",
       "borderDivider": "#e6e7ea",
@@ -17,7 +19,9 @@
       "ringSwitch": "#d9dade",
       "bgTileActive": "#ffffff",
       "shadowTileActive": "rgba(0,0,0,0.04)",
-      "bgScrim": "rgba(0,0,0,0.25)",
+      "bgScrim": "rgba(0,0,0,0.45)",
+      "bgOverlayStrong": "#00000074",
+      "strokeGroupDivider": "#00000010",
       "fgAlertDescription": "rgba(0,0,0,0.63)",
       "bgOverlayFrost": "#ffffff",
       "shadowOverlay1": "rgba(28,40,64,0.12)",
@@ -30,9 +34,9 @@
       "shadowPopover3": "rgba(24,41,75,0.16)",
       "fgPrimary": "#101112",
       "fgMuted": "#71717a",
-      "bgDanger": "#e5484d",
-      "bgDangerSolid": "#ba2525",
-      "fgDanger": "#eb3b3b",
+      "bgDanger": "#fa342c",
+      "bgDangerSolid": "#ca1d13",
+      "fgDanger": "#fa342c",
       "strokeFieldFocus": "#1a1c20",
       "fgDisabled": "#d1d3d8",
       "bgNeutralWeak": "#f3f4f5",
@@ -41,8 +45,9 @@
       "fgNeutralSubtle": "#868b94",
       "fgNeutralMuted": "#555d6d",
       "strokeFocusRing": "#1e82eb",
-      "bgSuccess": "#1f9d57",
-      "bgWarning": "#b5730f",
+      "bgSuccess": "#079171",
+      "bgWarning": "#9b7821",
+      "bgWarningSolid": "#fbdc65",
       "bgOrange": "#f97514",
       "bgCyan": "#00b9eb",
       "bgPurple": "#9b69ff",
@@ -68,8 +73,10 @@
       "shadowSelect": "#0000001f"
     },
     "dark": {
-      "bgBrandSolid": "#266df0",
-      "bgBrandSolidPressed": "#1f5fd6",
+      "bgBrandSolid": "#0298d9",
+      "bgBrandSolidPressed": "#0283bb",
+      "bgBrandContrast": "#0278ac",
+      "fgBrandContrast": "#0278ac",
       "fgOnBrand": "#ffffff",
       "fgOnTone": "#101112",
       "bgSurface": "#0a0a0a",
@@ -85,6 +92,8 @@
       "bgTileActive": "#101112",
       "shadowTileActive": "rgba(0,0,0,0)",
       "bgScrim": "rgba(0,0,0,0.55)",
+      "bgOverlayStrong": "#00000074",
+      "strokeGroupDivider": "#ffffff17",
       "fgAlertDescription": "rgba(255,255,255,0.6)",
       "bgOverlayFrost": "#1c1d1f",
       "shadowOverlay1": "rgba(0,0,0,0.48)",
@@ -110,6 +119,7 @@
       "strokeFocusRing": "#5e98fe",
       "bgSuccess": "#2ea968",
       "bgWarning": "#e0982a",
+      "bgWarningSolid": "#e0982a",
       "bgOrange": "#f97514",
       "bgCyan": "#00b9eb",
       "bgPurple": "#9b69ff",
@@ -140,9 +150,9 @@
       "gray00": "#ffffff",
       "white": "#ffffff",
       "ink": "#101112",
-      "gray50": "#f4f4f5",
+      "gray50": "#f7f8f9",
       "gray900": "#101112",
-      "line200": "#e4e4e7",
+      "line200": "#dcdee3",
       "line100": "#eeeff1",
       "line150": "#e6e7ea",
       "gray25": "#f6f7f7",
@@ -152,7 +162,9 @@
       "ringBrandSoft": "#d6e5ff",
       "tileActive": "#ffffff",
       "tileActiveShadow": "rgba(0,0,0,0.04)",
-      "bgScrim": "rgba(0,0,0,0.25)",
+      "bgScrim": "rgba(0,0,0,0.45)",
+      "bgOverlayStrong": "#00000074",
+      "strokeGroupDivider": "#00000010",
       "fgAlertDescription": "rgba(0,0,0,0.63)",
       "overlayFrost": "#ffffff",
       "shadowOverlay1": "rgba(28,40,64,0.12)",
@@ -164,11 +176,12 @@
       "shadowPopover2": "rgba(28,40,64,0.12)",
       "shadowPopover3": "rgba(24,41,75,0.16)",
       "gray400": "#71717a",
-      "brand600": "#266df0",
-      "brand700": "#1f5fd6",
-      "red600": "#e5484d",
-      "red700": "#ba2525",
-      "red500": "#eb3b3b",
+      "brand600": "#0298d9",
+      "brand700": "#0283bb",
+      "brandContrast": "#0278ac",
+      "red600": "#fa342c",
+      "red700": "#ca1d13",
+      "red500": "#fa342c",
       "fieldFocus": "#1a1c20",
       "disabledFg": "#d1d3d8",
       "neutralWeak": "#f3f4f5",
@@ -177,8 +190,9 @@
       "neutralSubtle": "#868b94",
       "neutralMuted": "#555d6d",
       "focusRing": "#1e82eb",
-      "green600": "#1f9d57",
-      "amber600": "#b5730f",
+      "green600": "#079171",
+      "amber600": "#9b7821",
+      "amberSolid": "#fbdc65",
       "orange600": "#f97514",
       "cyan600": "#00b9eb",
       "purple600": "#9b69ff",
@@ -217,6 +231,8 @@
       "tileActive": "#101112",
       "tileActiveShadow": "rgba(0,0,0,0)",
       "bgScrim": "rgba(0,0,0,0.55)",
+      "bgOverlayStrong": "#00000074",
+      "strokeGroupDivider": "#ffffff17",
       "fgAlertDescription": "rgba(255,255,255,0.6)",
       "overlayFrost": "#1c1d1f",
       "shadowOverlay1": "rgba(0,0,0,0.48)",
@@ -228,8 +244,9 @@
       "shadowPopover2": "rgba(0,0,0,0.24)",
       "shadowPopover3": "rgba(0,0,0,0.32)",
       "gray400": "#9a9aa2",
-      "brand600": "#266df0",
-      "brand700": "#1f5fd6",
+      "brand600": "#0298d9",
+      "brand700": "#0283bb",
+      "brandContrast": "#0278ac",
       "red600": "#ff5a5f",
       "red700": "#ba2525",
       "red500": "#ff5a5f",
@@ -243,6 +260,7 @@
       "focusRing": "#5e98fe",
       "green600": "#2ea968",
       "amber600": "#e0982a",
+      "amberSolid": "#e0982a",
       "orange600": "#f97514",
       "cyan600": "#00b9eb",
       "purple600": "#9b69ff",
@@ -280,13 +298,15 @@
     "3.5": 14
   },
   "radius": {
-    "chip": 7,
+    "xs": 4,
+    "chip": 999,
     "sm": 6,
     "md": 8,
     "lg": 9,
     "xl": 12,
     "2xl": 16,
     "3xl": 20,
+    "4xl": 24,
     "full": 999
   },
   "size": {
@@ -310,6 +330,14 @@
     "lg": 14,
     "xl": 16
   },
+  "tracking": {
+    "18": -0.36,
+    "20": -0.4,
+    "24": -0.48,
+    "26": -0.52,
+    "28": -0.56,
+    "32": -0.64
+  },
   "font": {
     "sans": "\"VK Sans Display\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
   },

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+export type AccentPickerProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "className"> & {
+    /** Hex (or any CSS) colours, in display order. */
+    colors: string[];
+    /** Controlled selected colour. Omit to let the picker manage it (see `defaultValue`). */
+    value?: string;
+    /** Initially selected colour, when uncontrolled. */
+    defaultValue?: string;
+    onValueChange?: (color: string) => void;
+    className?: string;
+};
+/**
+ * A row of selectable colour swatches — Attio's own accent-colour picker
+ * (Settings > Appearance). Not a fixed palette: pass the colours (and the
+ * accent isn't crisp's concern to theme the app with — this only picks one).
+ * Same roving-focus/arrow-key model every other crisp radio-like control
+ * shares (`useRadioGroupKeyboard`, also used by `RadioGroup` and
+ * `Segmented`).
+ */
+export declare function AccentPicker({ colors, value, defaultValue, onValueChange, className, onKeyDown: onKeyDownProp, ...rest }: AccentPickerProps): React.JSX.Element;
+export declare namespace AccentPicker {
+    var displayName: string;
+}

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

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<import("../..").RecipeVariantRecord>;
+export declare const accentpickerRecipe: import("../..").RecipeFn<import("../..").RecipeVariantRecord>;
+export default config;

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

@@ -0,0 +1,2 @@
+export { AccentPicker, type AccentPickerProps } from "./accentpicker";
+export { accentpickerRecipe } from "./accentpicker.recipe";

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+/**
+ * Root props land on the SHEET SURFACE — the element carrying `role="dialog"`
+ * — same reasoning as Dialog/Drawer (#223).
+ */
+export type BottomSheetProps = Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children"> & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Title alignment (default "left"). seed's own two header layouts. */
+    headerAlign?: "left" | "center";
+    /** Show the corner close button (default true when `title` is set). */
+    showCloseButton?: boolean;
+    "aria-label"?: string;
+    /** aria-label on the close button (default "Close"). */
+    closeLabel?: string;
+    children?: React.ReactNode;
+};
+/**
+ * A mobile bottom sheet — composes Zag's dialog machine (focus trap, scroll
+ * lock, Escape / outside-click dismissal) with a panel that slides up from
+ * the bottom edge. Compose the body with `BottomSheetBody` and actions with
+ * `BottomSheetFooter`.
+ */
+export declare function BottomSheet({ open, onOpenChange, title, description, headerAlign, showCloseButton, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, "aria-describedby": describedBy, ...rest }: BottomSheetProps): React.JSX.Element | null;
+export declare namespace BottomSheet {
+    var displayName: string;
+}
+export declare function BottomSheetBody({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export declare function BottomSheetFooter({ children, }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;

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

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const bottomsheetRecipe: import("../..").RecipeFn<{}>;
+export default config;

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

@@ -0,0 +1,2 @@
+export { BottomSheet, BottomSheetBody, BottomSheetFooter, type BottomSheetProps, } from "./bottomsheet";
+export { bottomsheetRecipe } from "./bottomsheet.recipe";

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

@@ -20,6 +20,11 @@ declare const spec: {
             readonly opacity: 0.5;
             readonly cursor: "not-allowed";
         };
+    }, {
+        readonly selector: "&:active";
+        readonly decls: {
+            readonly transform: "scale(0.98)";
+        };
     }];
     readonly variants: {
         readonly intent: {
@@ -27,25 +32,25 @@ declare const spec: {
                 readonly decls: {
                     readonly background: `var(--${string})`;
                     readonly color: `var(--${string})`;
-                    readonly boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)";
+                    readonly boxShadow: "none";
                 };
                 readonly parts: [{
                     readonly selector: "&:hover";
                     readonly decls: {
-                        background: `var(--${string})`;
+                        readonly filter: "brightness(0.96)";
                     };
                 }, {
                     readonly selector: "&:active";
                     readonly decls: {
-                        background: `var(--${string})`;
+                        readonly filter: "brightness(0.92)";
                     };
                 }];
             };
             readonly neutral: {
                 readonly decls: {
-                    background: `var(--${string})`;
-                    color: `var(--${string})`;
-                    boxShadow: `inset 0 0 0 1px var(--${string}), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`;
+                    readonly background: `var(--${string})`;
+                    readonly color: `var(--${string})`;
+                    readonly boxShadow: "none";
                 };
                 readonly parts: [{
                     readonly selector: "&:hover";
@@ -58,7 +63,7 @@ declare const spec: {
                 readonly decls: {
                     readonly background: `var(--${string})`;
                     readonly color: `var(--${string})`;
-                    readonly boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)";
+                    readonly boxShadow: "none";
                 };
                 readonly parts: [{
                     readonly selector: "&:hover";
@@ -117,7 +122,7 @@ declare const spec: {
                 readonly height: "40px";
                 readonly paddingInline: "14px";
                 readonly fontSize: `var(--${string})`;
-                readonly borderRadius: "10px";
+                readonly borderRadius: `var(--${string})`;
             };
         };
         readonly shape: {

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

@@ -8,23 +8,22 @@ declare const spec: {
         readonly margin: 0;
         readonly width: "16px";
         readonly height: "16px";
-        readonly border: "none";
+        readonly border: `1px solid var(--${string})`;
         readonly borderRadius: `var(--${string})`;
         readonly background: `var(--${string})`;
-        readonly boxShadow: `inset 0 0 0 1px color-mix(in srgb, var(--${string}) 9%, transparent)`;
         readonly cursor: "pointer";
-        readonly transition: "background-color .12s, box-shadow .12s";
+        readonly transition: "background-color .12s, border-color .12s";
     };
     readonly parts: [{
         readonly selector: "&:hover";
         readonly decls: {
-            readonly boxShadow: `inset 0 0 0 1px color-mix(in srgb, var(--${string}) 30%, transparent)`;
+            readonly borderColor: `color-mix(in srgb, var(--${string}) 30%, transparent)`;
         };
     }, {
         readonly selector: "&:checked, &:indeterminate";
         readonly decls: {
             readonly background: `var(--${string}) center / 10px no-repeat`;
-            readonly boxShadow: "none";
+            readonly borderColor: "transparent";
         };
     }, {
         readonly selector: "&:checked";
@@ -43,6 +42,30 @@ declare const spec: {
             readonly outline: `2px solid var(--${string})`;
             readonly outlineOffset: "1px";
         };
+    }, {
+        readonly selector: "&:disabled";
+        readonly decls: {
+            readonly background: `var(--${string})`;
+            readonly borderColor: `var(--${string})`;
+            readonly cursor: "not-allowed";
+        };
+    }, {
+        readonly selector: "&:checked:disabled, &:indeterminate:disabled";
+        readonly decls: {
+            readonly background: `var(--${string}) center / 10px no-repeat`;
+            readonly borderColor: `var(--${string})`;
+        };
+    }, {
+        readonly selector: "&:checked:disabled";
+        readonly decls: {
+            backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E\")";
+        };
+    }, {
+        readonly selector: "&:indeterminate:disabled";
+        readonly decls: {
+            readonly backgroundImage: `linear-gradient(var(--${string}), var(--${string}))`;
+            readonly backgroundSize: "8px 2px";
+        };
     }];
 };
 declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;

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

@@ -29,6 +29,12 @@ export type ChipProps = React.ComponentPropsWithoutRef<"span"> & VariantProps<ty
  * an inline ×) — so `Chip` has no `onRemove`/remove button yet. Add one once
  * that surface can be measured; don't guess the icon, its hit target, or its
  * spacing from the label.
+ *
+ * `appearance` (`"filled"` default | `"outline"`) and `selected` separate
+ * three visual roles crisp/#907's study found conflated: a filled chip reads
+ * as a status/value (not clickable), an outline chip reads as actionable (a
+ * tag or filter you can tap), and `selected` overrides either to a dark fill
+ * once tapped — see `chip.recipe.ts` for the structural reference.
  */
 export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
     readonly truncate: {
@@ -45,6 +51,14 @@ export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHT
         readonly cyan: string;
         readonly orange: string;
     };
+    readonly appearance: {
+        readonly filled: string;
+        readonly outline: string;
+    };
+    readonly selected: {
+        readonly true: string;
+        readonly false: string;
+    };
 }> & {
     config: import("../..").RecipeConfig<{
         readonly truncate: {
@@ -61,6 +75,14 @@ export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHT
             readonly cyan: string;
             readonly orange: string;
         };
+        readonly appearance: {
+            readonly filled: string;
+            readonly outline: string;
+        };
+        readonly selected: {
+            readonly true: string;
+            readonly false: string;
+        };
     }>;
 }> & {
     asChild?: boolean;

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

@@ -73,10 +73,34 @@ declare const spec: {
                 boxShadow: string;
             };
         };
+        readonly appearance: {
+            readonly filled: {};
+            readonly outline: {
+                readonly background: "transparent";
+            };
+        };
+        readonly selected: {
+            readonly true: {
+                readonly background: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly boxShadow: "none";
+            };
+            readonly false: {};
+        };
     };
+    readonly compoundVariants: [{
+        readonly tone: "neutral";
+        readonly appearance: "outline";
+        readonly selected: false;
+        readonly decls: {
+            readonly boxShadow: `inset 0 0 0 1px var(--${string})`;
+        };
+    }];
     readonly defaultVariants: {
         readonly tone: "neutral";
         readonly truncate: false;
+        readonly appearance: "filled";
+        readonly selected: false;
     };
 };
 declare const config: import("../..").RecipeConfig<{
@@ -94,6 +118,14 @@ declare const config: import("../..").RecipeConfig<{
         readonly cyan: string;
         readonly orange: string;
     };
+    readonly appearance: {
+        readonly filled: string;
+        readonly outline: string;
+    };
+    readonly selected: {
+        readonly true: string;
+        readonly false: string;
+    };
 }>;
 export declare const chipRecipe: import("../..").RecipeFn<{
     readonly truncate: {
@@ -110,6 +142,14 @@ export declare const chipRecipe: import("../..").RecipeFn<{
         readonly cyan: string;
         readonly orange: string;
     };
+    readonly appearance: {
+        readonly filled: string;
+        readonly outline: string;
+    };
+    readonly selected: {
+        readonly true: string;
+        readonly false: string;
+    };
 }> & {
     config: import("../..").RecipeConfig<{
         readonly truncate: {
@@ -126,6 +166,14 @@ export declare const chipRecipe: import("../..").RecipeFn<{
             readonly cyan: string;
             readonly orange: string;
         };
+        readonly appearance: {
+            readonly filled: string;
+            readonly outline: string;
+        };
+        readonly selected: {
+            readonly true: string;
+            readonly false: string;
+        };
     }>;
 };
 export { spec };

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+export type ChipGroupProps = React.ComponentPropsWithoutRef<"div"> & {
+    asChild?: boolean;
+};
+/**
+ * A single-line, horizontally-scrolling row of `Chip`s (or anything else),
+ * with scroll-snap — for a filter/status row that would otherwise wrap onto
+ * a second line once it runs out of width (crisp#908). Every child snaps to
+ * the row's start edge and never shrinks, so scrolling always lands a chip
+ * flush against the left edge rather than mid-chip.
+ */
+export declare const ChipGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,5 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const chipgroupRecipe: import("../..").RecipeFn<{}> & {
+    config: import("../..").RecipeConfig<{}>;
+};
+export default config;

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

@@ -0,0 +1,2 @@
+export { ChipGroup, type ChipGroupProps } from "./chipgroup";
+export { chipgroupRecipe } from "./chipgroup.recipe";