@womp/kookie-ui 0.5.0 → 0.7.0

package/src/components/checkbox-cards.props.tsx

@@ -1,6 +1,5 @@
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
-import { highContrastPropDef } from '../props/high-contrast.prop.js';
 import { gridPropDefs } from './grid.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
@@ -15,7 +14,6 @@ const checkboxCardsRootPropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   ...colorPropDef,
-  ...highContrastPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(200px, 1fr))' },
   gap: { ...gridPropDefs.gap, default: '4' },
 } satisfies {

package/src/components/checkbox-cards.tsx

@@ -29,7 +29,6 @@ const useCheckboxGroupScope = createCheckboxGroupScope();
 type CheckboxCardsContextValue = {
   size?: Responsive<(typeof checkboxCardsRootPropDefs.size.values)[number]>;
   variant?: (typeof checkboxCardsRootPropDefs.variant.values)[number];
-  highContrast?: boolean;
 };
 
 const [CheckboxCardsProvider, useCheckboxCardsContext] =
@@ -61,7 +60,6 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
         scope={__scopeCheckboxCards}
         size={props.size}
         variant={props.variant}
-        highContrast={props.highContrast}
       >
         <Grid asChild>
           <CheckboxGroupPrimitive.Root
@@ -91,11 +89,10 @@ const CheckboxCardsItem = React.forwardRef<
   const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
 
   const { className: checkboxClassName } = extractProps(
-    // Pass size / highContrast values from the context and variant to generate styles
+    // Pass size and variant values from the context to generate styles
     {
       size: context?.size,
       variant: context?.variant || 'solid',
-      highContrast: context?.highContrast,
     },
     // Pass size & variant prop defs to allow it to be extracted
     baseCheckboxPropDefs,

package/src/components/checkbox-group.tsx

@@ -42,7 +42,6 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
   (
     {
       color = checkboxGroupRootPropDefs.color.default,
-      highContrast = checkboxGroupRootPropDefs.highContrast.default,
       size = checkboxGroupRootPropDefs.size.default,
       variant = checkboxGroupRootPropDefs.variant.default,
       ...props
@@ -56,7 +55,6 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
         scope={__scopeCheckboxGroup}
         color={color}
         size={size}
-        highContrast={highContrast}
         variant={variant}
       >
         <CheckboxGroupPrimitive.Root

package/src/components/code.css

@@ -93,35 +93,37 @@
   --code-variant-font-size-adjust: var(--code-font-size-adjust);
   padding: 0;
 
+  /* Same ladder as Text. No colour and no emphasis inherits the surrounding colour. */
+  &:where(.rt-emphasis-loud) {
+    color: var(--gray-ink);
+  }
+  &:where(.rt-emphasis-medium) {
+    color: var(--gray-ink-muted);
+  }
+  &:where(.rt-emphasis-quiet) {
+    color: var(--gray-ink-faint);
+  }
   &:where([data-accent-color]) {
-    color: var(--accent-a11);
+    color: var(--accent-ink);
   }
-
-  &:where([data-accent-color].rt-high-contrast),
-  :where([data-accent-color]:not(.radix-themes)) &:where(.rt-high-contrast) {
-    color: var(--accent-12);
+  &:where([data-accent-color].rt-emphasis-medium) {
+    color: var(--accent-ink-muted);
+  }
+  &:where([data-accent-color].rt-emphasis-quiet) {
+    color: var(--accent-ink-faint);
   }
 }
 
 /* solid */
 
 .rt-Code:where(.rt-variant-solid) {
-  background-color: var(--accent-a9);
-  color: var(--accent-contrast);
+  /* Text sits on a fill, so emphasis does not change it. Gray fills with step 12 via the tokens. */
+  background-color: var(--accent-solid-a);
+  color: var(--accent-solid-contrast);
 
   &::selection {
-    background-color: var(--accent-7);
-    color: var(--accent-12);
-  }
-
-  &:where(.rt-high-contrast) {
-    background-color: var(--accent-12);
-    color: var(--accent-1);
-
-    &::selection {
-      background-color: var(--accent-a11);
-      color: var(--accent-1);
-    }
+    background-color: var(--accent-solid-selection);
+    color: var(--accent-solid-selection-contrast);
   }
 
   :where(.rt-Link) &,
@@ -130,12 +132,8 @@
     isolation: isolate;
     @media (hover: hover) {
       &:where(:hover) {
-        background-color: var(--accent-10);
-      }
-      &:where(.rt-high-contrast:hover) {
-        background-color: var(--accent-12);
-        /* Re-use base button hover filter */
-        filter: var(--base-button-solid-high-contrast-hover-filter);
+        background-color: var(--accent-solid-hover);
+        filter: var(--accent-solid-hover-filter);
       }
     }
   }
@@ -145,11 +143,7 @@
 
 .rt-Code:where(.rt-variant-soft) {
   background-color: var(--accent-a2);
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 
   :where(.rt-Link) &,
   &:where(:any-link, button) {
@@ -166,12 +160,7 @@
 
 .rt-Code:where(.rt-variant-outline) {
   box-shadow: inset 0 0 0 max(1px, 0.033em) var(--accent-a8);
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    box-shadow: inset 0 0 0 max(1px, 0.033em) var(--accent-a7), inset 0 0 0 max(1px, 0.033em) var(--gray-a11);
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 
   :where(.rt-Link) &,
   &:where(:any-link, button) {
@@ -183,3 +172,14 @@
     }
   }
 }
+
+/* soft and outline: emphasis fades the text along the accent ink ladder; the tint and border stay */
+
+.rt-Code:where(.rt-variant-soft, .rt-variant-outline) {
+  &:where(.rt-emphasis-medium) {
+    color: var(--accent-ink-muted);
+  }
+  &:where(.rt-emphasis-quiet) {
+    color: var(--accent-ink-faint);
+  }
+}

package/src/components/code.props.tsx

@@ -1,6 +1,6 @@
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { accentColorPropDef } from '../props/color.prop.js';
-import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { emphasisPropDef } from '../props/emphasis.prop.js';
 import { textWrapPropDef } from '../props/text-wrap.prop.js';
 import { truncatePropDef } from '../props/truncate.prop.js';
 import { weightPropDef } from '../props/weight.prop.js';
@@ -21,7 +21,7 @@ const codePropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
   ...weightPropDef,
   ...accentColorPropDef,
-  ...highContrastPropDef,
+  ...emphasisPropDef,
   ...truncatePropDef,
   ...textWrapPropDef,
 } satisfies {

package/src/components/combobox.css

@@ -1,19 +1,25 @@
-/* 
- * Combobox styles - optimized for performance.
- * Uses CSS :hover for visual feedback (disablePointerSelection enabled in JS).
+/*
+ * Combobox styles.
+ * The highlighted option is cmdk's [data-selected='true'], set by both pointer
+ * and keyboard. There is no separate :hover highlight.
  */
 @import './_internal/base-menu.css';
 @import './text-field.css';
 
-/* Reset Popover.Content padding - base-menu handles padding via BaseMenuViewport */
+/* The surface renders Radix Popover content directly with the BaseMenu classes
+ * only, so these are the popover behaviours it still needs. Padding lives on
+ * the search row and the viewport. */
 .rt-ComboboxContent {
-  padding: 0 !important;
+  --combobox-list-max-height: calc(300px * var(--scaling));
+
+  min-width: var(--radix-popover-trigger-width);
   max-height: var(--radix-popover-content-available-height);
-  display: flex;
-  flex-direction: column;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  outline: 0;
 }
 
-/* Hide content when closed (forceMount keeps items mounted for label registration) */
+/* forceMount keeps closed content in the DOM (and its positioning and dismiss
+ * listeners running); hide it while closed. */
 .rt-ComboboxContent:where([data-state='closed']) {
   visibility: hidden;
   position: absolute;
@@ -25,59 +31,53 @@
   flex-direction: column;
   flex: 1;
   min-height: 0;
+  outline: 0;
 }
 
 .rt-ComboboxViewport {
-  padding-top: 0 !important;
+  padding-top: 0;
+  /* The outer .rt-ComboboxScrollArea is the only scroller. */
+  overflow: visible;
+}
+
+/* The search row owns the top padding, so without it the viewport needs it back. */
+:where(.rt-ComboboxCommand:not(:has(.rt-ComboboxSearch))) .rt-ComboboxViewport {
+  padding-top: var(--base-menu-content-padding);
 }
 
-/* Simplified scroll area - native overflow */
 .rt-ComboboxScrollArea {
   flex: 1;
   min-height: 0;
   overflow: auto;
-  max-height: 300px;
+  overscroll-behavior: contain;
+  max-height: var(--combobox-list-max-height);
+  scrollbar-width: thin;
+  scrollbar-color: var(--gray-a8) transparent;
 }
 
-/* Override base-menu disabled styles for cmdk compatibility.
- * cmdk adds data-disabled="false" to enabled items, but base-menu.css
- * applies disabled styles to any element with [data-disabled] attribute.
- * This override restores normal appearance for enabled items. */
-.rt-ComboboxItem:where([data-disabled="false"]) {
-  color: inherit;
-  cursor: var(--cursor-menu-item);
+.rt-ComboboxList {
+  outline: 0;
 }
 
-/* Size adjustments for items */
-.rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-ComboboxItem) {
-  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
+/* cmdk sets data-disabled="false" on enabled items, and base-menu.css styles any
+ * [data-disabled] as disabled. Restore the enabled look. */
+.rt-ComboboxItem:where([data-disabled='false']) {
+  color: inherit;
+  cursor: var(--cursor-menu-item);
 }
 
-.rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-ComboboxLabel) {
+/* Room for the check indicator on every size */
+.rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-ComboboxItem, .rt-ComboboxLabel) {
   --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
 }
 
-.rt-BaseMenuContent:where(.rt-r-size-2) :where(.rt-ComboboxItem),
-.rt-BaseMenuContent:where(.rt-r-size-3) :where(.rt-ComboboxItem) {
-  --base-menu-item-padding-left: var(--space-5);
-}
-
-.rt-BaseMenuContent:where(.rt-r-size-2) :where(.rt-ComboboxLabel),
-.rt-BaseMenuContent:where(.rt-r-size-3) :where(.rt-ComboboxLabel) {
+.rt-BaseMenuContent:where(.rt-r-size-2, .rt-r-size-3) :where(.rt-ComboboxItem, .rt-ComboboxLabel) {
   --base-menu-item-padding-left: var(--space-5);
 }
 
-/* Sticky search input */
+/* Search row: shares the surface background, no second panel */
 .rt-ComboboxSearch {
-  position: sticky;
-  top: 0;
-  z-index: 1;
   padding: var(--base-menu-content-padding);
-  background-color: var(--color-panel);
-}
-
-:where([data-panel-background='translucent']) .rt-ComboboxSearch {
-  background-color: var(--color-panel-translucent);
 }
 
 .rt-ComboboxSearch :where(.rt-ComboboxInputRoot) {
@@ -85,109 +85,42 @@
 }
 
 /* =============================================================================
- * HOVER STYLES - CSS-based hover for performance (disablePointerSelection)
- * These replace cmdk's React state-based [data-selected] on hover.
+ * HIGHLIGHT - [data-selected='true'] from cmdk (pointer and keyboard)
  * =============================================================================
  */
 
-/* Base hover state - applies to all variants
- * Note: cmdk adds data-disabled="false" to enabled items, so we exclude only truly disabled items
- * :hover is inside :where() to maintain low specificity */
-.rt-ComboboxItem:where(:not([data-disabled="true"], [data-disabled=""]):hover) {
-  cursor: var(--cursor-menu-item);
-}
-
-/* Solid variant - hover */
-:where(.rt-BaseMenuContent.rt-variant-solid) .rt-ComboboxItem:where(:not([data-disabled="true"], [data-disabled=""]):hover) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-}
-
-:where(.rt-BaseMenuContent.rt-variant-solid) .rt-ComboboxItem:where(:not([data-disabled="true"], [data-disabled=""]):hover) * {
-  color: var(--accent-contrast) !important;
-}
-
-/* Soft variant - hover */
-:where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where(:not([data-disabled="true"], [data-disabled=""]):hover) {
-  background-color: var(--accent-4);
-}
-
-:where([data-panel-background='translucent'] .rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where(:not([data-disabled="true"], [data-disabled=""]):hover) {
-  background-color: var(--accent-a4);
-}
-
-/* High contrast solid - hover */
-:where(.rt-BaseMenuContent.rt-variant-solid.rt-high-contrast) .rt-ComboboxItem:where(:not([data-disabled="true"], [data-disabled=""]):hover) {
-  background-color: var(--accent-12);
-  color: var(--accent-1);
-}
-
-:where(.rt-BaseMenuContent.rt-variant-solid.rt-high-contrast) .rt-ComboboxItem:where(:not([data-disabled="true"], [data-disabled=""]):hover) * {
-  color: var(--accent-1) !important;
-}
-
-/* High contrast solid with accent color - hover */
-:where(.rt-BaseMenuContent.rt-variant-solid.rt-high-contrast[data-accent-color]) .rt-ComboboxItem:where(:not([data-disabled="true"], [data-disabled=""]):hover) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-}
-
-:where(.rt-BaseMenuContent.rt-variant-solid.rt-high-contrast[data-accent-color]) .rt-ComboboxItem:where(:not([data-disabled="true"], [data-disabled=""]):hover) * {
-  color: var(--accent-contrast) !important;
-}
-
-/* =============================================================================
- * KEYBOARD SELECTION STYLES - [data-selected] from cmdk keyboard navigation
- * These apply when using keyboard to navigate (arrow keys).
- * =============================================================================
- */
-
-/* Solid variant - keyboard selected */
+/* Solid variant. Gray fills with step 12 through the solid tokens */
 .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-ComboboxItem[data-selected='true']) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
+  background-color: var(--accent-solid);
+  color: var(--accent-solid-contrast);
 }
 
-.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-ComboboxItem[data-selected='true']) * {
-  color: var(--accent-contrast) !important;
+/* Muted text follows the highlight colour. Badges keep their own colours.
+ * Same specificity as the Text and base-menu colour rules; wins by coming later. */
+:where(.rt-BaseMenuContent.rt-variant-solid) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text, [data-accent-color='gray']:not(.rt-Badge)) {
+  color: inherit;
 }
 
-/* Soft variant - keyboard selected */
+/* Soft variant */
 .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-ComboboxItem[data-selected='true']) {
   background-color: var(--accent-4);
 }
 
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-ComboboxItem[data-selected='true']) {
+.rt-BaseMenuContent:where(.rt-variant-soft):where([data-panel-background='translucent'], [data-material='translucent'])
+  :where(.rt-ComboboxItem[data-selected='true']) {
   background-color: var(--accent-a4);
 }
 
-/* High contrast solid - keyboard selected */
-.rt-BaseMenuContent:where(.rt-variant-solid.rt-high-contrast) :where(.rt-ComboboxItem[data-selected='true']) {
-  background-color: var(--accent-12);
-  color: var(--accent-1);
-}
-
-.rt-BaseMenuContent:where(.rt-variant-solid.rt-high-contrast) :where(.rt-ComboboxItem[data-selected='true']) * {
-  color: var(--accent-1) !important;
-}
-
-/* High contrast solid with accent color - keyboard selected */
-.rt-BaseMenuContent:where(.rt-variant-solid.rt-high-contrast[data-accent-color]) :where(.rt-ComboboxItem[data-selected='true']) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-}
-
-.rt-BaseMenuContent:where(.rt-variant-solid.rt-high-contrast[data-accent-color]) :where(.rt-ComboboxItem[data-selected='true']) * {
-  color: var(--accent-contrast) !important;
+:where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
+  color: var(--gray-11);
 }
 
 /* =============================================================================
- * DISABLED STYLES
+ * DISABLED
  * =============================================================================
  */
 
-/* Only match truly disabled items - cmdk sets data-disabled="false" for enabled items */
-.rt-ComboboxItem:where([data-disabled="true"], [data-disabled=""]) {
+.rt-ComboboxItem:where([data-disabled='true']) {
   color: var(--gray-a8);
   cursor: default;
   pointer-events: none;
@@ -200,3 +133,11 @@
   color: var(--gray-a11);
   font-size: var(--font-size-2);
 }
+
+/* Items never take DOM focus, so the base menu :focus-visible rule never matches. */
+@media (forced-colors: active) {
+  .rt-ComboboxItem:where([data-selected='true']) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}

package/src/components/combobox.props.tsx

@@ -1,21 +1,19 @@
 import { colorPropDef } from '../props/color.prop.js';
-import { highContrastPropDef } from '../props/high-contrast.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
 import { widthPropDefs } from '../props/width.props.js';
+import { heightPropDefs } from '../props/height.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
 
 /**
- * Shared responsive sizing + high contrast support inherited by Combobox.Root.
+ * Shared responsive sizing inherited by Combobox.Root.
  */
 const comboboxRootPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  ...highContrastPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
-  highContrast: PropDef<boolean>;
 };
 
 const triggerVariants = ['classic', 'surface', 'soft', 'outline', 'ghost'] as const;
@@ -52,6 +50,7 @@ const comboboxTriggerPropDefs = {
 };
 
 const contentVariants = ['solid', 'soft'] as const;
+const materials = ['solid', 'translucent'] as const;
 
 /**
  * Styling props for the dropdown surface rendered by Combobox.Content.
@@ -60,10 +59,21 @@ const comboboxContentPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'solid' },
   ...colorPropDef,
-  ...highContrastPropDef,
+  material: { type: 'enum', values: materials, default: undefined },
+  /** @deprecated Use `material`. */
+  panelBackground: { type: 'enum', values: materials, default: undefined },
+  width: widthPropDefs.width,
+  minWidth: widthPropDefs.minWidth,
+  maxWidth: { ...widthPropDefs.maxWidth, default: '480px' },
+  ...heightPropDefs,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof contentVariants)[number]>;
+  material: PropDef<(typeof materials)[number] | undefined>;
+  panelBackground: PropDef<(typeof materials)[number] | undefined>;
+  width: PropDef<string>;
+  minWidth: PropDef<string>;
+  maxWidth: PropDef<string>;
 };
 
 export { comboboxRootPropDefs, comboboxTriggerPropDefs, comboboxContentPropDefs };