@crisp-ui-kit/crisp 0.33.0 → 0.33.1

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

@@ -7,45 +7,45 @@ export type ButtonProps = React.ComponentPropsWithoutRef<"button"> & VariantProp
     loading?: boolean;
 };
 export declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
-    intent: {
-        primary: string;
-        neutral: string;
-        danger: string;
-        ghost: string;
+    readonly intent: {
+        readonly primary: string;
+        readonly neutral: string;
+        readonly danger: string;
+        readonly ghost: string;
     };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
+    readonly size: {
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
     };
-    shape: {
-        text: string;
-        icon: string;
+    readonly shape: {
+        readonly text: string;
+        readonly icon: string;
     };
-    touchTarget: {
-        true: string;
-        false: string;
+    readonly touchTarget: {
+        readonly true: string;
+        readonly false: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
-        intent: {
-            primary: string;
-            neutral: string;
-            danger: string;
-            ghost: string;
+        readonly intent: {
+            readonly primary: string;
+            readonly neutral: string;
+            readonly danger: string;
+            readonly ghost: string;
         };
-        size: {
-            sm: string;
-            md: string;
-            lg: string;
+        readonly size: {
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
         };
-        shape: {
-            text: string;
-            icon: string;
+        readonly shape: {
+            readonly text: string;
+            readonly icon: string;
         };
-        touchTarget: {
-            true: string;
-            false: string;
+        readonly touchTarget: {
+            readonly true: string;
+            readonly false: string;
         };
     }>;
 }> & {

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

@@ -1,65 +1,213 @@
+declare const spec: {
+    readonly name: "button";
+    readonly base: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: `var(--${string})`;
+        readonly fontFamily: `var(--${string})`;
+        readonly fontWeight: `var(--${string})`;
+        readonly letterSpacing: "-0.14px";
+        readonly lineHeight: "20px";
+        readonly whiteSpace: "nowrap";
+        readonly border: "none";
+        readonly cursor: "pointer";
+        readonly transition: "background-color .2s, box-shadow .2s, color .2s";
+    };
+    readonly parts: [{
+        readonly selector: "&:disabled";
+        readonly decls: {
+            readonly opacity: 0.5;
+            readonly cursor: "not-allowed";
+        };
+    }];
+    readonly variants: {
+        readonly intent: {
+            readonly primary: {
+                readonly decls: {
+                    readonly background: `var(--${string})`;
+                    readonly color: `var(--${string})`;
+                    readonly boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)";
+                };
+                readonly parts: [{
+                    readonly selector: "&:hover";
+                    readonly decls: {
+                        background: `var(--${string})`;
+                    };
+                }, {
+                    readonly selector: "&:active";
+                    readonly decls: {
+                        background: `var(--${string})`;
+                    };
+                }];
+            };
+            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 parts: [{
+                    readonly selector: "&:hover";
+                    readonly decls: {
+                        background: `var(--${string})`;
+                    };
+                }];
+            };
+            readonly danger: {
+                readonly decls: {
+                    readonly background: `var(--${string})`;
+                    readonly color: `var(--${string})`;
+                    readonly boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)";
+                };
+                readonly parts: [{
+                    readonly selector: "&:hover";
+                    readonly decls: {
+                        readonly filter: "brightness(0.96)";
+                    };
+                }, {
+                    readonly selector: "&:active";
+                    readonly decls: {
+                        readonly filter: "brightness(0.92)";
+                    };
+                }];
+            };
+            readonly ghost: {
+                readonly decls: {
+                    readonly background: "transparent";
+                    readonly color: `var(--${string})`;
+                    readonly boxShadow: "none";
+                };
+                readonly parts: [{
+                    readonly selector: "&:hover";
+                    readonly decls: {
+                        background: `var(--${string})`;
+                        color: `var(--${string})`;
+                    };
+                }];
+            };
+        };
+        readonly size: {
+            readonly sm: {
+                readonly height: "24px";
+                readonly paddingInline: `var(--${string})`;
+                readonly fontSize: `var(--${string})`;
+                readonly borderRadius: `var(--${string})`;
+            };
+            readonly md: {
+                readonly height: "28px";
+                readonly paddingInline: `var(--${string})`;
+                readonly fontSize: `var(--${string})`;
+                readonly borderRadius: `var(--${string})`;
+            };
+            readonly lg: {
+                readonly height: "40px";
+                readonly paddingInline: "14px";
+                readonly fontSize: `var(--${string})`;
+                readonly borderRadius: "10px";
+            };
+        };
+        readonly shape: {
+            readonly text: {};
+            readonly icon: {
+                readonly paddingInline: 0;
+                readonly aspectRatio: "1 / 1";
+            };
+        };
+        readonly touchTarget: {
+            readonly true: {
+                readonly decls: {
+                    readonly position: "relative";
+                };
+                readonly parts: [{
+                    readonly slot: "hitArea";
+                    readonly selector: "&::after";
+                    readonly decls: {
+                        readonly content: "\"\"";
+                        readonly position: "absolute";
+                        readonly top: "50%";
+                        readonly left: "50%";
+                        readonly transform: "translate(-50%, -50%)";
+                        readonly width: "100%";
+                        readonly height: "100%";
+                        readonly minWidth: "44px";
+                        readonly minHeight: "44px";
+                    };
+                }];
+            };
+            readonly false: {};
+        };
+    };
+    readonly defaultVariants: {
+        readonly intent: "primary";
+        readonly size: "md";
+        readonly shape: "text";
+        readonly touchTarget: false;
+    };
+};
 declare const config: import("../..").RecipeConfig<{
-    intent: {
-        primary: string;
-        neutral: string;
-        danger: string;
-        ghost: string;
+    readonly intent: {
+        readonly primary: string;
+        readonly neutral: string;
+        readonly danger: string;
+        readonly ghost: string;
     };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
+    readonly size: {
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
     };
-    shape: {
-        text: string;
-        icon: string;
+    readonly shape: {
+        readonly text: string;
+        readonly icon: string;
     };
-    touchTarget: {
-        true: string;
-        false: string;
+    readonly touchTarget: {
+        readonly true: string;
+        readonly false: string;
     };
 }>;
 export declare const buttonRecipe: import("../..").RecipeFn<{
-    intent: {
-        primary: string;
-        neutral: string;
-        danger: string;
-        ghost: string;
+    readonly intent: {
+        readonly primary: string;
+        readonly neutral: string;
+        readonly danger: string;
+        readonly ghost: string;
     };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
+    readonly size: {
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
     };
-    shape: {
-        text: string;
-        icon: string;
+    readonly shape: {
+        readonly text: string;
+        readonly icon: string;
     };
-    touchTarget: {
-        true: string;
-        false: string;
+    readonly touchTarget: {
+        readonly true: string;
+        readonly false: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
-        intent: {
-            primary: string;
-            neutral: string;
-            danger: string;
-            ghost: string;
+        readonly intent: {
+            readonly primary: string;
+            readonly neutral: string;
+            readonly danger: string;
+            readonly ghost: string;
         };
-        size: {
-            sm: string;
-            md: string;
-            lg: string;
+        readonly size: {
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
         };
-        shape: {
-            text: string;
-            icon: string;
+        readonly shape: {
+            readonly text: string;
+            readonly icon: string;
         };
-        touchTarget: {
-            true: string;
-            false: string;
+        readonly touchTarget: {
+            readonly true: string;
+            readonly false: 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/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.33.0",
+  "version": "0.33.1",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",