@womp/kookie-ui 0.14.5 → 0.15.1

package/src/components/select.css

@@ -6,7 +6,6 @@
   user-select: none;
   vertical-align: top;
   line-height: var(--height);
-  transition: var(--transition-select);
 
   font-family: var(--default-font-family);
   font-weight: var(--font-weight-regular);
@@ -14,7 +13,7 @@
   text-align: start;
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -23,12 +22,12 @@
   isolation: isolate;
 
   /* Component-level overrides */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
   
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -46,9 +45,6 @@
   }
 
   /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 }
 
 .rt-SelectTriggerInner {
@@ -179,7 +175,6 @@
     height: var(--select-trigger-height);
     padding: 0 var(--select-trigger-ghost-padding-x);
 
-
   }
 }
 
@@ -372,19 +367,18 @@
   color: var(--accent-ink);
   background-color: var(--color-surface);
   box-shadow: var(--shadow-2);
-  transition: var(--transition-text-field);
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     background-color: var(--color-surface);
   }
 
   /* Component-level overrides (higher specificity) */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     background-color: var(--color-surface);
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: var(--color-surface);
   }
 
@@ -399,16 +393,16 @@
       box-shadow: var(--shadow-2);
 
       /* Theme-level translucent override for hover */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      :where([data-material='translucent']) & {
         background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
       }
 
       /* Component-level overrides for hover */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
+      &:where([data-material='solid']) {
         background-color: var(--accent-2);
       }
 
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      &:where([data-material='translucent']) {
         background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
       }
     }
@@ -418,16 +412,16 @@
     background-color: var(--accent-3);
 
     /* Theme-level translucent override for open */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
     }
 
     /* Component-level overrides for open */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--accent-3);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
     }
   }
@@ -436,16 +430,16 @@
     background-color: var(--accent-3);
 
     /* Theme-level translucent override for active */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
     }
 
     /* Component-level overrides for active */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--accent-3);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
     }
   }
@@ -475,16 +469,16 @@
   color: var(--accent-ink);
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
   }
 
   /* Component-level overrides (higher specificity) */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     background-color: var(--accent-3);
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
   }
 
@@ -498,16 +492,16 @@
       background-color: var(--accent-4);
       
       /* Theme-level translucent override for hover */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      :where([data-material='translucent']) & {
         background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
       }
 
       /* Component-level overrides for hover */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
+      &:where([data-material='solid']) {
         background-color: var(--accent-4);
       }
 
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      &:where([data-material='translucent']) {
         background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
       }
     }
@@ -517,16 +511,16 @@
     background-color: var(--accent-4);
     
     /* Theme-level translucent override for open */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
     }
 
     /* Component-level overrides for open */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--accent-4);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
     }
   }
@@ -535,16 +529,16 @@
     background-color: var(--accent-5);
     
     /* Theme-level translucent override for active */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: color-mix(in srgb, var(--accent-a5), var(--accent-5) 60%);
     }
 
     /* Component-level overrides for active */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--accent-5);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: color-mix(in srgb, var(--accent-a5), var(--accent-5) 60%);
     }
   }
@@ -584,16 +578,16 @@
       background-color: var(--accent-3);
       
       /* Theme-level translucent override for hover */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      :where([data-material='translucent']) & {
         background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
       }
 
       /* Component-level overrides for hover */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
+      &:where([data-material='solid']) {
         background-color: var(--accent-3);
       }
 
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      &:where([data-material='translucent']) {
         background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
       }
 
@@ -614,16 +608,16 @@
     background-color: var(--accent-3);
     
     /* Theme-level translucent override for open */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
     }
 
     /* Component-level overrides for open */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--accent-3);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
     }
 
@@ -638,16 +632,16 @@
     background-color: var(--accent-4);
     
     /* Theme-level translucent override for active */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
     }
 
     /* Component-level overrides for active */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--accent-4);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
     }
 
@@ -671,19 +665,18 @@
   /* Base state: solid colors for solid panels */
   box-shadow: inset 0 0 0 1px var(--accent-6);
   color: var(--accent-ink);
-  transition: var(--transition-background-blur);
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     box-shadow: inset 0 0 0 1px var(--accent-a6);
   }
 
   /* Component-level overrides (higher specificity) */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     box-shadow: inset 0 0 0 1px var(--accent-6);
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     box-shadow: inset 0 0 0 1px var(--accent-a6);
   }
 
@@ -693,18 +686,18 @@
       box-shadow: inset 0 0 0 1px var(--accent-7);
       
       /* Theme-level translucent override for hover */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      :where([data-material='translucent']) & {
         background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
         box-shadow: inset 0 0 0 1px var(--accent-a7);
       }
 
       /* Component-level overrides for hover */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
+      &:where([data-material='solid']) {
         background-color: var(--accent-2);
         box-shadow: inset 0 0 0 1px var(--accent-7);
       }
 
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      &:where([data-material='translucent']) {
         background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
         box-shadow: inset 0 0 0 1px var(--accent-a7);
       }
@@ -716,18 +709,18 @@
     box-shadow: inset 0 0 0 1px var(--accent-7);
     
     /* Theme-level translucent override for open */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
       box-shadow: inset 0 0 0 1px var(--accent-a7);
     }
 
     /* Component-level overrides for open */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--accent-2);
       box-shadow: inset 0 0 0 1px var(--accent-7);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
       box-shadow: inset 0 0 0 1px var(--accent-a7);
     }
@@ -738,18 +731,18 @@
     box-shadow: inset 0 0 0 1px var(--accent-8);
     
     /* Theme-level translucent override for active */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
       box-shadow: inset 0 0 0 1px var(--accent-a8);
     }
 
     /* Component-level overrides for active */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--accent-3);
       box-shadow: inset 0 0 0 1px var(--accent-8);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
       box-shadow: inset 0 0 0 1px var(--accent-a8);
     }
@@ -785,18 +778,18 @@
   color: var(--accent-ink);
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
     box-shadow: inset 0 0 0 1px var(--accent-a6);
   }
 
   /* Component-level overrides (higher specificity) */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     background-color: var(--accent-2);
     box-shadow: inset 0 0 0 1px var(--accent-6);
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
     box-shadow: inset 0 0 0 1px var(--accent-a6);
   }
@@ -807,18 +800,18 @@
       box-shadow: inset 0 0 0 1px var(--accent-7);
       
       /* Theme-level translucent override for hover */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      :where([data-material='translucent']) & {
         background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
         box-shadow: inset 0 0 0 1px var(--accent-a7);
       }
 
       /* Component-level overrides for hover */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
+      &:where([data-material='solid']) {
         background-color: var(--accent-3);
         box-shadow: inset 0 0 0 1px var(--accent-7);
       }
 
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      &:where([data-material='translucent']) {
         background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
         box-shadow: inset 0 0 0 1px var(--accent-a7);
       }
@@ -830,18 +823,18 @@
     box-shadow: inset 0 0 0 1px var(--accent-8);
     
     /* Theme-level translucent override for open */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
       box-shadow: inset 0 0 0 1px var(--accent-a8);
     }
 
     /* Component-level overrides for open */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--accent-3);
       box-shadow: inset 0 0 0 1px var(--accent-8);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
       box-shadow: inset 0 0 0 1px var(--accent-a8);
     }
@@ -852,18 +845,18 @@
     box-shadow: inset 0 0 0 1px var(--accent-8);
     
     /* Theme-level translucent override for active */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
       box-shadow: inset 0 0 0 1px var(--accent-a8);
     }
 
     /* Component-level overrides for active */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--accent-4);
       box-shadow: inset 0 0 0 1px var(--accent-a8);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
       box-shadow: inset 0 0 0 1px var(--accent-a8);
     }
@@ -938,12 +931,6 @@
 }
 
 /* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .rt-SelectLoadingIcon,
-  .rt-SelectLoadingIconCircle {
-    animation: none;
-  }
-}
 
 /* Forced colors support */
 @media (forced-colors: active) {
@@ -974,26 +961,6 @@
   color: var(--gray-a10);
 }
 
-/* solid */
-
-.rt-SelectContent:where(.rt-variant-solid) {
-  /* Gray fills with step 12 through the solid tokens */
-  & :where(.rt-SelectItem[data-highlighted]) {
-    background-color: var(--accent-solid);
-    color: var(--accent-solid-contrast);
-
-    /* Force all text elements to inherit hover color, including those with color="gray" */
-    & :where(.rt-Text) {
-      color: inherit !important;
-    }
-
-    /* Also target any element with data-accent-color="gray" */
-    & :where([data-accent-color='gray']) {
-      color: inherit !important;
-    }
-  }
-}
-
 /* soft */
 
 .rt-SelectContent:where(.rt-variant-soft) {
@@ -1006,3 +973,24 @@
     }
   }
 }
+
+/* The highlight is solid when the system asks for more contrast. */
+@media (prefers-contrast: more) {
+  .rt-SelectContent:where(.rt-variant-soft) {
+    /* Gray fills with step 12 through the solid tokens */
+    & :where(.rt-SelectItem[data-highlighted]) {
+      background-color: var(--accent-solid);
+      color: var(--accent-solid-contrast);
+
+      /* Force all text elements to inherit hover color, including those with color="gray" */
+      & :where(.rt-Text) {
+        color: inherit !important;
+      }
+
+      /* Also target any element with data-accent-color="gray" */
+      & :where([data-accent-color='gray']) {
+        color: inherit !important;
+      }
+    }
+  }
+}

package/src/components/select.props.tsx

@@ -1,4 +1,3 @@
-import { parseVariant } from '../helpers/parse-variant.js';
 import type React from 'react';
 
 import { colorPropDef } from '../props/color.prop.js';
@@ -14,13 +13,11 @@ const selectRootPropDefs = {
   size: PropDef<(typeof sizes)[number]>;
 };
 
-const triggerVariants = ['raised', 'surface', 'soft', 'outline', 'ghost', 'classic'] as const;
+const triggerVariants = ['raised', 'surface', 'soft', 'outline', 'ghost'] as const;
 
 const selectTriggerPropDefs = {
-  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'raised', parseValue: parseVariant },
+  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'raised' },
   material: { type: 'enum', values: ['solid', 'translucent'] },
-  /** @deprecated Use `material`. Removed in 0.15.0. */
-  panelBackground: { type: 'enum', values: ['solid', 'translucent'] },
   error: { type: 'boolean' },
   loading: { type: 'boolean' },
   disabled: { type: 'boolean' },
@@ -31,7 +28,6 @@ const selectTriggerPropDefs = {
 } satisfies {
   variant: PropDef<(typeof triggerVariants)[number]>;
   material: PropDef<'solid' | 'translucent'>;
-  panelBackground: PropDef<'solid' | 'translucent'>;
   error: PropDef<boolean>;
   loading: PropDef<boolean>;
   disabled: PropDef<boolean>;
@@ -39,13 +35,10 @@ const selectTriggerPropDefs = {
   placeholder: PropDef<React.ReactNode>;
 };
 
-const contentVariants = ['solid', 'soft'] as const;
 
 const selectContentPropDefs = {
-  variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'soft' },
   ...colorPropDef,
 } satisfies {
-  variant: PropDef<(typeof contentVariants)[number]>;
 };
 
 export { selectRootPropDefs, selectTriggerPropDefs, selectContentPropDefs };

package/src/components/select.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
@@ -15,6 +14,7 @@ import {
   selectContentPropDefs,
 } from './select.props.js';
 import { useThemeContext, Theme } from './theme.js';
+import { useThumbSync } from '../hooks/use-thumb-sync.js';
 
 import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
@@ -58,7 +58,6 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
       disabled,
       readOnly,
       material,
-      panelBackground: panelBackgroundProp,
       ...triggerProps
     } = extractProps(
       // Pass size value from the context to generate styles
@@ -69,8 +68,6 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
       marginPropDefs,
     );
 
-    useDeprecatedPanelBackgroundWarning(panelBackgroundProp);
-    const panelBackground = material ?? panelBackgroundProp;
 
     const ariaProps = React.useMemo(
       () => ({
@@ -87,8 +84,7 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
         <button
           data-accent-color={color}
           data-radius={radius}
-          data-panel-background={panelBackground}
-          data-material={panelBackground}
+          data-material={material}
           data-error={error}
           data-loading={loading}
           {...triggerProps}
@@ -136,7 +132,6 @@ interface SelectContentProps
 }
 const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>(
   (props, forwardedRef) => {
-    if (props.variant !== undefined) warnDeprecated('The menu `variant` prop is deprecated and will be removed in 0.15.0. Menus highlight with a soft fill, and a solid one when the person asks for more contrast.');
     const context = React.useContext(SelectContext);
     const { className, children, color, container, ...contentProps } = extractProps(
       // Pass size value from the context to generate styles
@@ -147,6 +142,7 @@ const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>
     );
     const themeContext = useThemeContext();
     const resolvedColor = color || themeContext.accentColor;
+    const setThumbViewport = useThumbSync<HTMLDivElement>();
     return (
       <SelectPrimitive.Portal container={container}>
         <Theme asChild>
@@ -159,6 +155,7 @@ const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>
             className={classNames(
               'rt-PopperContent',
               'rt-BaseMenuContent',
+          'rt-variant-soft',
               'rt-SelectContent',
               className,
             )}
@@ -169,6 +166,7 @@ const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>
                 className={classNames('rt-BaseMenuViewport', 'rt-SelectViewport')}
               >
                 <ScrollAreaPrimitive.Viewport
+                  ref={setThumbViewport}
                   className="rt-ScrollAreaViewport"
                   style={{ overflowY: undefined }}
                 >