@crisp-ui-kit/crisp 0.32.1 → 0.33.1

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

@@ -1,3 +1,50 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const progressRecipe: import("../..").RecipeFn<{}>;
+declare const spec: {
+    readonly name: "progress";
+    readonly base: {
+        readonly display: "block";
+        readonly boxSizing: "border-box";
+        readonly height: "6px";
+        readonly borderRadius: `var(--${string})`;
+        readonly background: `color-mix(in srgb, var(--${string}) 8%, transparent)`;
+        readonly overflow: "hidden";
+    };
+    readonly parts: [{
+        readonly slot: "fill";
+        readonly selector: "& .crisp-progress-fill";
+        readonly decls: {
+            readonly display: "block";
+            readonly height: "100%";
+            readonly borderRadius: `var(--${string})`;
+            readonly background: `var(--${string})`;
+            readonly transition: "width 0.25s ease";
+        };
+    }, {
+        readonly selector: "&[data-segmented]";
+        readonly decls: {
+            readonly display: "flex";
+            readonly gap: `var(--${string})`;
+            readonly background: "transparent";
+            readonly overflow: "visible";
+        };
+    }, {
+        readonly slot: "seg";
+        readonly selector: "&[data-segmented] .crisp-progress-seg";
+        readonly decls: {
+            readonly flex: 1;
+            readonly height: "100%";
+            readonly borderRadius: `var(--${string})`;
+            readonly background: `color-mix(in srgb, var(--${string}) 8%, transparent)`;
+            readonly transition: "background 0.2s";
+        };
+    }, {
+        readonly slot: "seg";
+        readonly selector: "&[data-segmented] .crisp-progress-seg[data-filled]";
+        readonly decls: {
+            background: `var(--${string})`;
+        };
+    }];
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const progressRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
 export default config;

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

@@ -1,3 +1,18 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const spinnerRecipe: import("../..").RecipeFn<{}>;
+declare const spec: {
+    readonly name: "spinner";
+    readonly globalCss: "@keyframes crisp-spin { to { transform: rotate(360deg); } }";
+    readonly base: {
+        readonly display: "inline-block";
+        readonly boxSizing: "border-box";
+        readonly width: "16px";
+        readonly height: "16px";
+        readonly borderRadius: `var(--${string})`;
+        readonly border: `2px solid color-mix(in srgb, var(--${string}) 15%, transparent)`;
+        readonly borderTopColor: `var(--${string})`;
+        readonly animation: "crisp-spin 0.6s linear infinite";
+    };
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const spinnerRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
 export default config;

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

@@ -1,5 +1,59 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const switchRecipe: import("../..").RecipeFn<{}> & {
-    config: import("../..").RecipeConfig<{}>;
+declare const spec: {
+    readonly name: "switch";
+    readonly base: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly flexShrink: 0;
+        readonly width: "24px";
+        readonly height: "16px";
+        readonly padding: 0;
+        readonly margin: 0;
+        readonly border: "none";
+        readonly borderRadius: `var(--${string})`;
+        readonly background: `color-mix(in srgb, var(--${string}) 9%, transparent)`;
+        readonly cursor: "pointer";
+        readonly transition: "background-color .2s ease";
+        readonly WebkitTapHighlightColor: "transparent";
+    };
+    readonly parts: [{
+        readonly slot: "thumb";
+        readonly selector: "& .crisp-switch-thumb";
+        readonly decls: {
+            readonly width: "12px";
+            readonly height: "12px";
+            readonly margin: "0 2px";
+            readonly borderRadius: `var(--${string})`;
+            readonly background: "#fff";
+            readonly transition: "transform .2s ease";
+        };
+    }, {
+        readonly selector: "&[data-checked]";
+        readonly decls: {
+            background: `var(--${string})`;
+        };
+    }, {
+        readonly slot: "thumb";
+        readonly selector: "&[data-checked] .crisp-switch-thumb";
+        readonly decls: {
+            readonly transform: "translateX(8px)";
+        };
+    }, {
+        readonly selector: "&:focus-visible";
+        readonly decls: {
+            readonly outline: `2px solid var(--${string})`;
+            readonly outlineOffset: "2px";
+        };
+    }, {
+        readonly selector: "&:disabled";
+        readonly decls: {
+            readonly opacity: 0.5;
+            readonly cursor: "not-allowed";
+        };
+    }];
 };
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const switchRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>> & {
+    config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+};
+export { spec };
 export default config;

package/dist/types/core/index.d.ts

@@ -7,6 +7,7 @@ export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from ".
 export { Primitive } from "./primitive";
 export { resolveRecipe } from "./resolve";
 export * from "./rtl";
+export { defineSpec, specToRecipe } from "./spec";
 export type * from "./types";
 export { useFocusAfterRemoval } from "./use-focus-after-removal";
 export { useFormReset } from "./use-form-reset";

package/dist/types/core/spec.d.ts

@@ -0,0 +1,83 @@
+import type { RecipeConfig } from "./types";
+/**
+ * A component spec: the layer above a recipe, where style intent is DATA
+ * rather than a CSS string.
+ *
+ * ADR 0002 §2. A string cannot be asked a question — `build/emit-lynx.mjs`
+ * mangled every at-rule and the Spinner never span (#174) because the only
+ * thing it could do to CSS text was rewrite it and hope. A spec is a list of
+ * properties, so a target that cannot express one can REFUSE it and fail the
+ * build, which is the difference between a broken build and a silently wrong
+ * one.
+ *
+ * Two deliberate limits:
+ *
+ * - `parts` is an ORDERED array, not a map of slots. The emitted CSS depends on
+ *   rule order (`&[data-segmented] .seg` must follow `&[data-segmented]`), and
+ *   a map of named slots cannot express an interleaving of child-slot rules and
+ *   root state rules. The `slot` field carries the name a non-CSS target needs
+ *   for a declared part; `selector` carries what the web needs.
+ * - Values stay `string | number`. Resolving a token to its `var(--…)` is the
+ *   contract's job, already typed, and re-encoding token references here would
+ *   be a second source of truth for values that lesson 31 says will drift.
+ */
+export type SpecValue = string | number;
+/** Declarations in camelCase, the way a native style object spells them. */
+export type SpecDecls = Record<string, SpecValue>;
+export type SpecPart = {
+    /** Name of the declared part, for targets with no CSS selectors. */
+    slot?: string;
+    /** The nested selector, relative to the component root (`&` is the root). */
+    selector: string;
+    decls: SpecDecls;
+};
+/** One variant value's declarations, plus any nested rules it adds. */
+export type SpecVariantValue = SpecDecls | {
+    decls: SpecDecls;
+    parts?: SpecPart[];
+};
+export type ComponentSpec = {
+    name: string;
+    /** Declarations on the component root. */
+    base: SpecDecls;
+    /** Nested rules, in emission order. */
+    parts?: SpecPart[];
+    /** variant -> value -> declarations. */
+    variants?: Record<string, Record<string, SpecVariantValue>>;
+    defaultVariants?: Record<string, string | boolean>;
+    /** Selections that apply together, in emission order. */
+    compoundVariants?: Array<Record<string, unknown> & {
+        decls: SpecDecls;
+    }>;
+    /** Raw CSS that must sit outside the component rule (`@keyframes`). */
+    globalCss?: string;
+};
+/** `{ flexShrink: 0 }` -> `flex-shrink: 0;`, in insertion order. */
+export declare function declsToCss(decls: SpecDecls): string;
+/**
+ * `const` type parameter, not a plain `ComponentSpec` return: widening the
+ * variant keys here loses the literal union that `VariantProps<typeof recipe>`
+ * hands a component, and `BadgeProps["tone"]` silently degrades from
+ * `"neutral" | "brand" | …` to `string`. That is a public API regression that
+ * typechecks everywhere except at the call sites it was meant to protect.
+ */
+export declare function defineSpec<const S extends ComponentSpec>(spec: S): S;
+/** The recipe variant record a spec implies: same keys, values compiled to CSS. */
+export type SpecVariants<S extends ComponentSpec> = S["variants"] extends Record<string, Record<string, SpecVariantValue>> ? {
+    [K in keyof S["variants"]]: {
+        [P in keyof S["variants"][K]]: string;
+    };
+} : Record<string, Record<string, string>>;
+/**
+ * Compile a spec into the RecipeConfig the existing pipeline already takes, so
+ * nothing downstream — the CSS generator, the d.ts generator, `resolveRecipe`,
+ * the spec guards — has to know a spec exists. That is what keeps the
+ * conversion provable: `dist/` must not move, and CI's
+ * `git diff --exit-code dist/` is the gate.
+ *
+ * The formatting here is not cosmetic freedom. It reproduces exactly what the
+ * hand-written template strings emit — root declarations space-joined, each
+ * nested rule on its own line indented four spaces — because any other choice
+ * rewrites every committed stylesheet and buries the conversion's real diff.
+ */
+export declare function specToRecipe<const S extends ComponentSpec>(spec: S): RecipeConfig<SpecVariants<S>>;

package/dist/viewtoggle.css

@@ -1,14 +1,8 @@
 .crisp-viewtoggle {
-  display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; padding: 2px;
-    border-radius: var(--crisp-radius-lg); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent);
-    font-family: var(--crisp-font-sans);
-
-    & .crisp-viewtoggle-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
-      padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted);
-      font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
+  display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; padding: 2px; border-radius: var(--crisp-radius-lg); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); font-family: var(--crisp-font-sans);
+    & .crisp-viewtoggle-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
     & .crisp-viewtoggle-tile:hover { color: var(--crisp-fg-primary); }
-    & .crisp-viewtoggle-tile[data-active] { background: var(--crisp-bg-tile-active); color: var(--crisp-fg-primary);
-      box-shadow: 0 1px 2px -1px var(--crisp-shadow-tile-active); }
+    & .crisp-viewtoggle-tile[data-active] { background: var(--crisp-bg-tile-active); color: var(--crisp-fg-primary); box-shadow: 0 1px 2px -1px var(--crisp-shadow-tile-active); }
     & .crisp-viewtoggle-tile:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
 }
 

package/dist/viewtoggle.layered.css

@@ -1,15 +1,9 @@
 @layer crisp-components {
 .crisp-viewtoggle {
-  display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; padding: 2px;
-    border-radius: var(--crisp-radius-lg); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent);
-    font-family: var(--crisp-font-sans);
-
-    & .crisp-viewtoggle-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
-      padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted);
-      font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
+  display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; padding: 2px; border-radius: var(--crisp-radius-lg); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); font-family: var(--crisp-font-sans);
+    & .crisp-viewtoggle-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
     & .crisp-viewtoggle-tile:hover { color: var(--crisp-fg-primary); }
-    & .crisp-viewtoggle-tile[data-active] { background: var(--crisp-bg-tile-active); color: var(--crisp-fg-primary);
-      box-shadow: 0 1px 2px -1px var(--crisp-shadow-tile-active); }
+    & .crisp-viewtoggle-tile[data-active] { background: var(--crisp-bg-tile-active); color: var(--crisp-fg-primary); box-shadow: 0 1px 2px -1px var(--crisp-shadow-tile-active); }
     & .crisp-viewtoggle-tile:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
 }
 

package/dist/wheelpicker.css

@@ -1,68 +1,23 @@
 .crisp-wheelpicker {
-  
-    position: relative; box-sizing: border-box; width: 100%; overflow: hidden;
-    background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans);
-
-    /* the band the selected row sits in; behind the items, never hit-tested */
-    & .crisp-wheelpicker-indicator {
-      position: absolute; z-index: 0; inset-inline: var(--crisp-space-4); top: 50%;
-      transform: translateY(-50%); border-radius: var(--crisp-radius-md);
-      background: var(--crisp-bg-neutral-weak); pointer-events: none;
-    }
-
-    /* fades the rows furthest from the centre, so the column reads as a wheel
-       rather than a list. 40% of the viewport, capped, top and bottom. */
-    & .crisp-wheelpicker-fog {
-      position: relative; z-index: 1; height: 100%; overflow: hidden;
-      mask-image: linear-gradient(
-        to bottom,
-        transparent 0,
-        #000 var(--crisp-wheelpicker-fog),
-        #000 calc(100% - var(--crisp-wheelpicker-fog)),
-        transparent 100%
-      );
-    }
+  position: relative; box-sizing: border-box; width: 100%; overflow: hidden; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); /* the band the selected row sits in; behind the items, never hit-tested */
+    & .crisp-wheelpicker-indicator { position: absolute; z-index: 0; inset-inline: var(--crisp-space-4); top: 50%; transform: translateY(-50%); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-neutral-weak); pointer-events: none; }
+    /* fades the rows furthest from the centre, so the column reads as a wheel rather than a list. 40% of the viewport, capped, top and bottom. */
+    & .crisp-wheelpicker-fog { position: relative; z-index: 1; height: 100%; overflow: hidden; mask-image: linear-gradient( to bottom, transparent 0, #000 var(--crisp-wheelpicker-fog), #000 calc(100% - var(--crisp-wheelpicker-fog)), transparent 100% ); }
     & .crisp-wheelpicker-columns { display: flex; width: 100%; height: 100%; justify-content: center; }
-
-    & .crisp-wheelpicker-column {
-      box-sizing: border-box; flex: 0 0 auto; width: max-content; height: 100%;
-      overflow-x: hidden; overflow-y: auto;
-      overscroll-behavior-y: contain; overscroll-behavior-x: none;
-      scroll-snap-type: y mandatory; touch-action: pan-y;
-      scrollbar-width: none; -ms-overflow-style: none; outline: none;
-      padding-block: var(--crisp-wheelpicker-offset);
-    }
+    & .crisp-wheelpicker-column { box-sizing: border-box; flex: 0 0 auto; width: max-content; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; overscroll-behavior-x: none; scroll-snap-type: y mandatory; touch-action: pan-y; scrollbar-width: none; -ms-overflow-style: none; outline: none; padding-block: var(--crisp-wheelpicker-offset); }
     & .crisp-wheelpicker-column::-webkit-scrollbar { display: none; }
-
-    & .crisp-wheelpicker-item {
-      display: flex; align-items: center; justify-content: center;
-      scroll-snap-align: center; user-select: none; white-space: nowrap;
-      padding-inline: var(--crisp-space-4); color: var(--crisp-fg-disabled);
-      background: none; border: none; font: inherit; cursor: pointer;
-    }
+    & .crisp-wheelpicker-item { display: flex; align-items: center; justify-content: center; scroll-snap-align: center; user-select: none; white-space: nowrap; padding-inline: var(--crisp-space-4); color: var(--crisp-fg-disabled); background: none; border: none; font: inherit; cursor: pointer; }
     & .crisp-wheelpicker-item[data-selected] { color: var(--crisp-fg-primary); }
-
-    /* the ring is drawn on the SELECTED row, and only for keyboard focus:
-       a pointer user has just tapped the row they meant and does not need it */
-    & .crisp-wheelpicker-column:focus-visible .crisp-wheelpicker-item[data-selected] {
-      outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px;
-      border-radius: var(--crisp-radius-md);
-    }
-  
+    /* the ring is drawn on the SELECTED row, and only for keyboard focus: a pointer user has just tapped the row they meant and does not need it */
+    & .crisp-wheelpicker-column:focus-visible .crisp-wheelpicker-item[data-selected] { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; border-radius: var(--crisp-radius-md); }
 }
 .crisp-wheelpicker--size_small {
-  
-        height: 180px; --crisp-wheelpicker-offset: 72px;
-        --crisp-wheelpicker-fog: min(40%, 108px);
-        & .crisp-wheelpicker-indicator { height: 36px; }
-        & .crisp-wheelpicker-item { height: 36px; min-height: 36px; font-size: 20px; line-height: 27px; }
-      
+  height: 180px; --crisp-wheelpicker-offset: 72px; --crisp-wheelpicker-fog: min(40%, 108px);
+    & .crisp-wheelpicker-indicator { height: 36px; }
+    & .crisp-wheelpicker-item { height: 36px; min-height: 36px; font-size: 20px; line-height: 27px; }
 }
 .crisp-wheelpicker--size_medium {
-  
-        height: 220px; --crisp-wheelpicker-offset: 88px;
-        --crisp-wheelpicker-fog: min(40%, 132px);
-        & .crisp-wheelpicker-indicator { height: 44px; }
-        & .crisp-wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
-      
+  height: 220px; --crisp-wheelpicker-offset: 88px; --crisp-wheelpicker-fog: min(40%, 132px);
+    & .crisp-wheelpicker-indicator { height: 44px; }
+    & .crisp-wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
 }

package/dist/wheelpicker.layered.css

@@ -1,70 +1,25 @@
 @layer crisp-components {
 .crisp-wheelpicker {
-  
-    position: relative; box-sizing: border-box; width: 100%; overflow: hidden;
-    background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans);
-
-    /* the band the selected row sits in; behind the items, never hit-tested */
-    & .crisp-wheelpicker-indicator {
-      position: absolute; z-index: 0; inset-inline: var(--crisp-space-4); top: 50%;
-      transform: translateY(-50%); border-radius: var(--crisp-radius-md);
-      background: var(--crisp-bg-neutral-weak); pointer-events: none;
-    }
-
-    /* fades the rows furthest from the centre, so the column reads as a wheel
-       rather than a list. 40% of the viewport, capped, top and bottom. */
-    & .crisp-wheelpicker-fog {
-      position: relative; z-index: 1; height: 100%; overflow: hidden;
-      mask-image: linear-gradient(
-        to bottom,
-        transparent 0,
-        #000 var(--crisp-wheelpicker-fog),
-        #000 calc(100% - var(--crisp-wheelpicker-fog)),
-        transparent 100%
-      );
-    }
+  position: relative; box-sizing: border-box; width: 100%; overflow: hidden; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); /* the band the selected row sits in; behind the items, never hit-tested */
+    & .crisp-wheelpicker-indicator { position: absolute; z-index: 0; inset-inline: var(--crisp-space-4); top: 50%; transform: translateY(-50%); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-neutral-weak); pointer-events: none; }
+    /* fades the rows furthest from the centre, so the column reads as a wheel rather than a list. 40% of the viewport, capped, top and bottom. */
+    & .crisp-wheelpicker-fog { position: relative; z-index: 1; height: 100%; overflow: hidden; mask-image: linear-gradient( to bottom, transparent 0, #000 var(--crisp-wheelpicker-fog), #000 calc(100% - var(--crisp-wheelpicker-fog)), transparent 100% ); }
     & .crisp-wheelpicker-columns { display: flex; width: 100%; height: 100%; justify-content: center; }
-
-    & .crisp-wheelpicker-column {
-      box-sizing: border-box; flex: 0 0 auto; width: max-content; height: 100%;
-      overflow-x: hidden; overflow-y: auto;
-      overscroll-behavior-y: contain; overscroll-behavior-x: none;
-      scroll-snap-type: y mandatory; touch-action: pan-y;
-      scrollbar-width: none; -ms-overflow-style: none; outline: none;
-      padding-block: var(--crisp-wheelpicker-offset);
-    }
+    & .crisp-wheelpicker-column { box-sizing: border-box; flex: 0 0 auto; width: max-content; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; overscroll-behavior-x: none; scroll-snap-type: y mandatory; touch-action: pan-y; scrollbar-width: none; -ms-overflow-style: none; outline: none; padding-block: var(--crisp-wheelpicker-offset); }
     & .crisp-wheelpicker-column::-webkit-scrollbar { display: none; }
-
-    & .crisp-wheelpicker-item {
-      display: flex; align-items: center; justify-content: center;
-      scroll-snap-align: center; user-select: none; white-space: nowrap;
-      padding-inline: var(--crisp-space-4); color: var(--crisp-fg-disabled);
-      background: none; border: none; font: inherit; cursor: pointer;
-    }
+    & .crisp-wheelpicker-item { display: flex; align-items: center; justify-content: center; scroll-snap-align: center; user-select: none; white-space: nowrap; padding-inline: var(--crisp-space-4); color: var(--crisp-fg-disabled); background: none; border: none; font: inherit; cursor: pointer; }
     & .crisp-wheelpicker-item[data-selected] { color: var(--crisp-fg-primary); }
-
-    /* the ring is drawn on the SELECTED row, and only for keyboard focus:
-       a pointer user has just tapped the row they meant and does not need it */
-    & .crisp-wheelpicker-column:focus-visible .crisp-wheelpicker-item[data-selected] {
-      outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px;
-      border-radius: var(--crisp-radius-md);
-    }
-  
+    /* the ring is drawn on the SELECTED row, and only for keyboard focus: a pointer user has just tapped the row they meant and does not need it */
+    & .crisp-wheelpicker-column:focus-visible .crisp-wheelpicker-item[data-selected] { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; border-radius: var(--crisp-radius-md); }
 }
 .crisp-wheelpicker--size_small {
-  
-        height: 180px; --crisp-wheelpicker-offset: 72px;
-        --crisp-wheelpicker-fog: min(40%, 108px);
-        & .crisp-wheelpicker-indicator { height: 36px; }
-        & .crisp-wheelpicker-item { height: 36px; min-height: 36px; font-size: 20px; line-height: 27px; }
-      
+  height: 180px; --crisp-wheelpicker-offset: 72px; --crisp-wheelpicker-fog: min(40%, 108px);
+    & .crisp-wheelpicker-indicator { height: 36px; }
+    & .crisp-wheelpicker-item { height: 36px; min-height: 36px; font-size: 20px; line-height: 27px; }
 }
 .crisp-wheelpicker--size_medium {
-  
-        height: 220px; --crisp-wheelpicker-offset: 88px;
-        --crisp-wheelpicker-fog: min(40%, 132px);
-        & .crisp-wheelpicker-indicator { height: 44px; }
-        & .crisp-wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
-      
+  height: 220px; --crisp-wheelpicker-offset: 88px; --crisp-wheelpicker-fog: min(40%, 132px);
+    & .crisp-wheelpicker-indicator { height: 44px; }
+    & .crisp-wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
 }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.32.1",
+  "version": "0.33.1",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -422,6 +422,8 @@
     "lynx": "bun build/lynx-lint.mjs",
     "lynx:emit": "bun build/emit-lynx.mjs",
     "ssr": "bun scripts/ssr-check.tsx",
+    "visual": "bun scripts/visual-page.tsx && playwright test",
+    "visual:baseline": "bun run build && bun scripts/visual-page.tsx && docker run --rm -v \"$PWD\":/w -w /w mcr.microsoft.com/playwright:v1.63.0-noble npx playwright test --update-snapshots",
     "contrast": "bun scripts/contrast-page.tsx",
     "build:esm": "tsc -p tsconfig.esm.json && bun scripts/fix-esm-extensions.mjs",
     "build:cjs": "tsc -p tsconfig.cjs.json && bun scripts/finish-cjs.mjs",
@@ -450,6 +452,7 @@
   "devDependencies": {
     "@biomejs/biome": "^2.5.10",
     "@happy-dom/global-registrator": "^20.11.6",
+    "@playwright/test": "^1.63.0",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.6",