@womp/kookie-ui 0.22.1 → 0.24.0

package/src/components/avatar.props.tsx

@@ -20,6 +20,11 @@ const avatarPropDefs = {
    * Cannot be used together with `badge`.
    */
   status: { type: 'enum', values: accentColors, default: undefined },
+  /**
+   * The words the status dot stands for, such as "Online". A screen reader reads them with the
+   * avatar. Without it the dot is hidden from screen readers.
+   */
+  statusLabel: { type: 'string', default: undefined },
   /**
    * Custom badge content. Renders at the bottom-right corner.
    * Cannot be used together with `status`.
@@ -36,6 +41,7 @@ const avatarPropDefs = {
   variant: PropDef<(typeof variants)[number]>;
   fallback: PropDef<React.ReactNode>;
   status: PropDef<(typeof accentColors)[number] | undefined>;
+  statusLabel: PropDef<string | undefined>;
   badge: PropDef<React.ReactNode>;
   fit: PropDef<(typeof objectFitValues)[number]>;
 };

package/src/components/avatar.tsx

@@ -13,43 +13,38 @@ import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-p
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 interface AvatarProps extends AvatarImplProps {}
-const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((ownProps, forwardedRef) => {
+const Avatar = React.forwardRef<AvatarElement, AvatarProps>((ownProps, forwardedRef) => {
   // An unset size follows the Theme, like a control. Sizes above 4 are only explicit.
   const props = useThemeSizeProps(ownProps, avatarPropDefs.size);
-  const {
-    asChild,
-    children,
-    className,
-    style,
-    color,
-    radius,
-    status,
-    badge,
-    ...imageProps
-  } = extractProps(props, avatarPropDefs);
+  const { asChild, children, className, style, color, radius, status, statusLabel, badge, ...imageProps } = extractProps(props, avatarPropDefs);
 
   if (process.env.NODE_ENV !== 'production') {
     if (status !== undefined && badge !== undefined) {
-      console.warn(
-        'Avatar: Cannot use both `status` and `badge` props together. ' +
-          'The `badge` prop will be used and `status` will be ignored.'
-      );
+      console.warn('Avatar: Cannot use both `status` and `badge` props together. ' + 'The `badge` prop will be used and `status` will be ignored.');
     }
   }
 
   // Cheap boolean checks — no memoization needed
-  const isDisabled =
-    asChild &&
-    children != null &&
-    React.isValidElement(children) &&
-    ((children.props as any).disabled === true ||
-      (children.props as any)['data-disabled'] === true);
+  const isDisabled = asChild && children != null && React.isValidElement(children) && ((children.props as any).disabled === true || (children.props as any)['data-disabled'] === true);
 
   const hasIndicator = badge !== undefined || status !== undefined;
 
+  const indicator =
+    badge !== undefined ? (
+      <span className="kui-AvatarBadge">{badge}</span>
+    ) : status !== undefined ? (
+      <span
+        className="kui-AvatarStatus"
+        data-accent-color={status}
+        role={statusLabel ? 'img' : undefined}
+        aria-label={statusLabel || undefined}
+        aria-hidden={statusLabel ? undefined : true}
+      />
+    ) : null;
+
   return (
-    // TODO as a rule, should we rather spread the props on root?
     <AvatarPrimitive.Root
+      ref={forwardedRef}
       data-accent-color={color}
       data-radius={radius}
       data-disabled={isDisabled || undefined}
@@ -58,67 +53,58 @@ const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((ownProps, forwa
       style={style}
       asChild={asChild}
     >
-      {getSubtree({ asChild, children }, <AvatarImpl ref={forwardedRef} {...imageProps} />)}
-      {badge !== undefined ? (
-        <span className="kui-AvatarBadge">{badge}</span>
-      ) : status !== undefined ? (
-        <span className="kui-AvatarStatus" data-accent-color={status} />
-      ) : null}
+      {/* With asChild, Slot takes exactly one child, so the indicator goes inside it. */}
+      {getSubtree(
+        { asChild, children },
+        <>
+          <AvatarImpl {...imageProps} />
+          {indicator}
+        </>,
+      )}
     </AvatarPrimitive.Root>
   );
 });
 Avatar.displayName = 'Avatar';
 
-type AvatarImplElement = React.ElementRef<typeof AvatarPrimitive.Image>;
+type AvatarElement = React.ElementRef<typeof AvatarPrimitive.Root>;
 type AvatarOwnProps = GetPropDefTypes<typeof avatarPropDefs>;
 
-interface AvatarImplProps
-  extends ComponentPropsWithout<typeof AvatarPrimitive.Image, RemovedProps>,
-    AvatarOwnProps {
+interface AvatarImplProps extends ComponentPropsWithout<typeof AvatarPrimitive.Image, RemovedProps>, AvatarOwnProps {
   // TODO: See if we can automate making prop defs with `required: true` non nullable
   fallback: NonNullable<AvatarOwnProps['fallback']>;
 }
 
-const AvatarImpl = React.memo(
-  React.forwardRef<AvatarImplElement, AvatarImplProps>(
-    ({ fallback, onLoadingStatusChange, ...imageProps }, forwardedRef) => {
-      const [status, setStatus] = React.useState<'idle' | 'loading' | 'loaded' | 'error'>('idle');
+const AvatarImpl = React.memo(({ fallback, onLoadingStatusChange, ...imageProps }: AvatarImplProps) => {
+  const [status, setStatus] = React.useState<'idle' | 'loading' | 'loaded' | 'error'>('idle');
 
-      const handleLoadingStatusChange = React.useCallback(
-        (newStatus: 'idle' | 'loading' | 'loaded' | 'error') => {
-          onLoadingStatusChange?.(newStatus);
-          setStatus(newStatus);
-        },
-        [onLoadingStatusChange],
-      );
-
-      return (
-        <>
-          {status === 'idle' || status === 'loading' ? <span className="kui-AvatarFallback" /> : null}
-
-          {status === 'error' ? (
-            <AvatarPrimitive.Fallback
-              className={classNames('kui-AvatarFallback', {
-                'kui-one-letter': typeof fallback === 'string' && fallback.length === 1,
-                'kui-two-letters': typeof fallback === 'string' && fallback.length === 2,
-              })}
-              delayMs={0}
-            >
-              {fallback}
-            </AvatarPrimitive.Fallback>
-          ) : null}
-
-          <AvatarPrimitive.Image
-            ref={forwardedRef}
-            className="kui-AvatarImage"
-            {...imageProps}
-            onLoadingStatusChange={handleLoadingStatusChange}
-          />
-        </>
-      );
+  const handleLoadingStatusChange = React.useCallback(
+    (newStatus: 'idle' | 'loading' | 'loaded' | 'error') => {
+      onLoadingStatusChange?.(newStatus);
+      setStatus(newStatus);
     },
-  ),
-);
+    [onLoadingStatusChange],
+  );
+
+  return (
+    <>
+      {status === 'idle' || status === 'loading' ? <span className="kui-AvatarFallback" /> : null}
+
+      {status === 'error' ? (
+        <AvatarPrimitive.Fallback
+          className={classNames('kui-AvatarFallback', {
+            'kui-one-letter': typeof fallback === 'string' && fallback.length === 1,
+            'kui-two-letters': typeof fallback === 'string' && fallback.length === 2,
+          })}
+          delayMs={0}
+        >
+          {fallback}
+        </AvatarPrimitive.Fallback>
+      ) : null}
+
+      <AvatarPrimitive.Image className="kui-AvatarImage" {...imageProps} onLoadingStatusChange={handleLoadingStatusChange} />
+    </>
+  );
+});
 
 AvatarImpl.displayName = 'AvatarImpl';
 

package/src/components/blockquote.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from 'radix-ui';
 
-import { Text } from './text.js';
+import { blockquotePropDefs } from './blockquote.props.js';
+import { extractProps } from '../helpers/extract-props.js';
 
-import type { blockquotePropDefs } from './blockquote.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
@@ -14,17 +14,16 @@ interface BlockquoteProps
   extends ComponentPropsWithout<'blockquote', RemovedProps>,
     BlockQuoteOwnProps {}
 const Blockquote = React.forwardRef<BlockquoteElement, BlockquoteProps>((props, forwardedRef) => {
-  const { asChild, children, className, ...blockquoteProps } = props;
+  // Only Blockquote's own props style it. It wears Text's classes, so it reads like Text.
+  const { asChild, className, color, ...blockquoteProps } = extractProps(props, blockquotePropDefs);
   const Comp = asChild ? Slot.Root : 'blockquote';
   return (
-    <Text
-      asChild
+    <Comp
+      data-accent-color={color}
       {...blockquoteProps}
       ref={forwardedRef}
-      className={classNames('kui-Blockquote', className)}
-    >
-      <Comp>{children}</Comp>
-    </Text>
+      className={classNames('kui-Text', 'kui-Blockquote', className)}
+    />
   );
 });
 Blockquote.displayName = 'Blockquote';

package/src/components/chatbar.tsx

@@ -4,7 +4,7 @@ import { useComposedRefs } from 'radix-ui/internal';
 import { useDropzone } from 'react-dropzone';
 
 import { Button } from './button.js';
-import { CloseIcon, FileTextIcon } from './icons.js';
+import { CloseIcon, FileTextIcon, PaperclipIcon } from './icons.js';
 import { Flex } from './flex.js';
 import { ScrollArea } from './scroll-area.js';
 import { Slot } from './slot.js';
@@ -1216,28 +1216,35 @@ interface AttachTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
 }
 
 const AttachTrigger = React.forwardRef<HTMLButtonElement, AttachTriggerProps>((props, forwardedRef) => {
-  const { asChild, accept, multiple, disabled: disabledProp, onPointerDown, onClick, ...buttonProps } = props;
+  // The HTML `color` attribute is dropped: Button reads `color` as an accent colour.
+  const { asChild, accept, multiple, disabled: disabledProp, onPointerDown, onClick, children, color: _color, ...buttonProps } = props;
   const ctx = useChatbarContext();
   const disabled = disabledProp || ctx.disabled || ctx.readOnly;
-  const Comp = asChild ? Slot : 'button';
+  const triggerProps = {
+    ...buttonProps,
+    ref: forwardedRef,
+    className: classNames('kui-ChatbarAttachTrigger', buttonProps.className),
+    type: buttonProps.type ?? 'button',
+    'aria-label': buttonProps['aria-label'] ?? 'Add attachments',
+    disabled,
+    onPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => {
+      onPointerDown?.(event);
+      if (!disabled && !event.defaultPrevented) ctx.beginFilePickerPress();
+    },
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (disabled || event.defaultPrevented) return;
+      ctx.openFilePicker({ accept, multiple });
+    },
+  } as const;
+
+  if (asChild) return <Slot {...triggerProps}>{children}</Slot>;
+
+  // Without asChild, the trigger is a quiet icon-only Button at the Chatbar's size.
   return (
-    <Comp
-      {...buttonProps}
-      ref={forwardedRef}
-      className={classNames('kui-ChatbarAttachTrigger', buttonProps.className)}
-      type={buttonProps.type ?? 'button'}
-      aria-label={buttonProps['aria-label'] ?? 'Add attachments'}
-      disabled={disabled}
-      onPointerDown={(event: React.PointerEvent<HTMLButtonElement>) => {
-        onPointerDown?.(event);
-        if (!disabled && !event.defaultPrevented) ctx.beginFilePickerPress();
-      }}
-      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-        onClick?.(event);
-        if (disabled || event.defaultPrevented) return;
-        ctx.openFilePicker({ accept, multiple });
-      }}
-    />
+    <Button iconOnly emphasis="quiet" color="gray" size={ctx.size} {...triggerProps}>
+      {children ?? <PaperclipIcon aria-hidden />}
+    </Button>
   );
 });
 AttachTrigger.displayName = 'Chatbar.AttachTrigger';

package/src/components/checkbox-group.primitive.tsx

@@ -2,13 +2,7 @@
 
 import * as React from 'react';
 import { Checkbox as CheckboxPrimitive, Direction } from 'radix-ui';
-import {
-  Context,
-  Primitive,
-  useComposedRefs,
-  RovingFocus,
-  useControllableState,
-} from 'radix-ui/internal';
+import { Context, Primitive, useControllableState } from 'radix-ui/internal';
 
 const { useDirection } = Direction;
 
@@ -20,9 +14,8 @@ const CHECKBOX_GROUP_NAME = 'CheckboxGroup';
 type ScopedProps<P> = P & { __scopeCheckboxGroup?: Context.Scope };
 const [createCheckboxGroupContext, createCheckboxGroupScope] = Context.createContextScope(
   CHECKBOX_GROUP_NAME,
-  [RovingFocus.createRovingFocusGroupScope, CheckboxPrimitive.createCheckboxScope],
+  [CheckboxPrimitive.createCheckboxScope],
 );
-const useRovingFocusGroupScope = RovingFocus.createRovingFocusGroupScope();
 const useCheckboxScope = CheckboxPrimitive.createCheckboxScope();
 
 type CheckboxGroupContextValue = {
@@ -38,15 +31,22 @@ const [CheckboxGroupProvider, useCheckboxGroupContext] =
   createCheckboxGroupContext<CheckboxGroupContextValue>(CHECKBOX_GROUP_NAME);
 
 type CheckboxGroupElement = React.ElementRef<typeof Primitive.div>;
-type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocus.Root>;
 type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
 interface CheckboxGroupProps extends PrimitiveDivProps {
   name?: CheckboxGroupContextValue['name'];
   required?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['required'];
   disabled?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['disabled'];
-  dir?: RovingFocusGroupProps['dir'];
-  orientation?: RovingFocusGroupProps['orientation'];
-  loop?: RovingFocusGroupProps['loop'];
+  dir?: 'ltr' | 'rtl';
+  /**
+   * @deprecated Has no effect. Each checkbox is its own tab stop, as with native checkboxes,
+   * so there is no arrow-key navigation to orient.
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * @deprecated Has no effect. Each checkbox is its own tab stop, as with native checkboxes,
+   * so there is no arrow-key navigation to loop.
+   */
+  loop?: boolean;
   defaultValue?: string[];
   value?: CheckboxGroupContextValue['value'];
   onValueChange?: (value: string[]) => void;
@@ -61,13 +61,12 @@ const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>
       value: valueProp,
       required = false,
       disabled = false,
-      orientation,
+      orientation: _orientation,
       dir,
-      loop = true,
+      loop: _loop,
       onValueChange,
       ...groupProps
     } = props;
-    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
     const direction = useDirection(dir);
     const [value = [], setValue] = useControllableState({
       prop: valueProp,
@@ -96,21 +95,13 @@ const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>
         onItemCheck={handleItemCheck}
         onItemUncheck={handleItemUncheck}
       >
-        <RovingFocus.Root
-          asChild
-          {...rovingFocusGroupScope}
-          orientation={orientation}
+        <Primitive.div
+          role="group"
+          data-disabled={disabled ? '' : undefined}
           dir={direction}
-          loop={loop}
-        >
-          <Primitive.div
-            role="group"
-            data-disabled={disabled ? '' : undefined}
-            dir={direction}
-            {...groupProps}
-            ref={forwardedRef}
-          />
-        </RovingFocus.Root>
+          {...groupProps}
+          ref={forwardedRef}
+        />
       </CheckboxGroupProvider>
     );
   },
@@ -136,31 +127,29 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
     const { __scopeCheckboxGroup, disabled, ...itemProps } = props;
     const context = useCheckboxGroupContext(ITEM_NAME, __scopeCheckboxGroup);
     const isDisabled = context.disabled || disabled;
-    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
     const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
-    const ref = React.useRef<React.ElementRef<typeof CheckboxPrimitive.Root>>(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref);
     const checked = context.value?.includes(itemProps.value);
+    // A required group needs at least one box checked, not every box: the items are
+    // required only while none is checked.
+    const isRequired = context.required && (context.value?.length ?? 0) === 0;
 
     return (
-      <RovingFocus.Item asChild {...rovingFocusGroupScope} focusable={!isDisabled} active={checked}>
-        <CheckboxPrimitive.Root
-          name={context.name}
-          disabled={isDisabled}
-          required={context.required}
-          checked={checked}
-          {...checkboxScope}
-          {...itemProps}
-          ref={composedRefs}
-          onCheckedChange={(checked) => {
-            if (checked) {
-              context.onItemCheck(props.value);
-            } else {
-              context.onItemUncheck(props.value);
-            }
-          }}
-        />
-      </RovingFocus.Item>
+      <CheckboxPrimitive.Root
+        name={context.name}
+        disabled={isDisabled}
+        required={isRequired}
+        checked={checked}
+        {...checkboxScope}
+        {...itemProps}
+        ref={forwardedRef}
+        onCheckedChange={(checked) => {
+          if (checked) {
+            context.onItemCheck(props.value);
+          } else {
+            context.onItemUncheck(props.value);
+          }
+        }}
+      />
     );
   },
 );

package/src/components/checkbox-group.tsx

@@ -76,21 +76,13 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
     const { __scopeCheckboxGroup, children, className, style, ...props } = _props;
     const { size } = useCheckboxGroupContext('CheckboxGroupItem', __scopeCheckboxGroup);
 
-    // Helper to safely convert size to Text-compatible size
-    const getTextSize = (sizeValue: any): '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' => {
-      if (typeof sizeValue === 'string' && /^[1-9]$/.test(sizeValue)) {
-        return sizeValue as any;
-      }
-      return '3';
-    };
-
     // Render `<Text as="label">` if children are provided, otherwise render
     // the solo checkbox to allow building out your custom layouts with it.
     if (children) {
       return (
         <Text
           as="label"
-          size={getTextSize(size)}
+          size={size}
           className={classNames('kui-CheckboxGroupItem', className)}
           style={style}
         >

package/src/components/chip.css

@@ -19,6 +19,20 @@
 
   isolation: isolate;
 
+  /* An icon is one line tall, so it never changes the chip's height. */
+  /* stylelint-disable-next-line selector-max-type */
+  & :where(svg) {
+    flex: none;
+    width: var(--chip-icon-size);
+    height: var(--chip-icon-size);
+  }
+
+  /* A chip with a tooltip is focusable, and shows the ring every control does. */
+  &:where(:focus-visible) {
+    outline: var(--focus-ring-width) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset);
+  }
+
   /* Forced colors support */
   @media (forced-colors: active) {
     border: 1px solid CanvasText;
@@ -37,6 +51,7 @@
 @breakpoints {
   .kui-Chip {
     &:where(.kui-r-size-1) {
+      --chip-icon-size: var(--icon-size-1);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
@@ -45,6 +60,7 @@
       border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
     }
     &:where(.kui-r-size-2) {
+      --chip-icon-size: var(--icon-size-2);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
@@ -57,6 +73,7 @@
       }
     }
     &:where(.kui-r-size-3) {
+      --chip-icon-size: var(--icon-size-3);
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
@@ -70,6 +87,7 @@
       }
     }
     &:where(.kui-r-size-4) {
+      --chip-icon-size: var(--icon-size-4);
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
@@ -95,14 +113,6 @@
 .kui-Chip:where(.kui-variant-solid) {
   background-color: var(--accent-solid);
   color: var(--accent-solid-contrast);
-
-  &:where([data-disabled]) {
-    color: var(--neutral-a8);
-    background-color: var(--neutral-a3);
-    outline: none;
-    filter: none;
-    cursor: default;
-  }
 }
 
 /* surface */
@@ -117,22 +127,10 @@
 
 .kui-Chip:where(.kui-variant-soft, .kui-variant-ghost) {
   color: var(--accent-ink);
-
-  &:where([data-disabled]) {
-    color: var(--neutral-a8);
-    background-color: var(--neutral-a3);
-    cursor: default;
-  }
 }
 
 .kui-Chip:where(.kui-variant-soft) {
   background-color: var(--accent-3);
-
-  &:where([data-disabled]) {
-    color: var(--neutral-a8);
-    background-color: var(--neutral-a3);
-    cursor: default;
-  }
 }
 
 /* outline */

package/src/components/chip.tsx

@@ -41,15 +41,14 @@ const Chip = React.forwardRef<ChipElement, ChipProps>((props, forwardedRef) => {
     ...chipProps
   } = extractProps(props, chipPropDefs);
 
-
-
-  // Memoize component variable to prevent unnecessary re-renders
-  const Comp = React.useMemo(() => (asChild ? Slot.Root : 'span'), [asChild]);
+  const Comp = asChild ? Slot.Root : 'span';
 
   const chip = (
     <Comp
       data-accent-color={color}
       data-radius={radius}
+      // A tooltip opens on focus, so a chip that has one joins the tab order.
+      tabIndex={tooltip ? 0 : undefined}
       {...chipProps}
       ref={forwardedRef}
       className={classNames('kui-reset', 'kui-Chip', className)}

package/src/components/code.tsx

@@ -18,8 +18,9 @@ const Code = React.forwardRef<CodeElement, CodeProps>((props, forwardedRef) => {
     props,
     codePropDefs,
   );
-  // Code ghost color prop should work as text color by default
-  const resolvedColor = props.variant === 'ghost' ? color || undefined : color;
+  // A ghost Code has no fill, so it rests on the surrounding text colour: only a colour the caller
+  // set reaches it, never the gray default.
+  const resolvedColor = props.variant === 'ghost' && !props.color ? undefined : color;
   const Comp = asChild ? Slot.Root : 'code';
   return (
     <Comp

package/src/components/combobox.css

@@ -12,6 +12,10 @@
 .kui-ComboboxContent {
   --combobox-list-max-height: calc(300px * var(--scale));
 
+  /* Stops the list's scroll chaining to the page. Not user-scrollable (overflow: hidden), so
+     Chromium does not composite it the way it does a scroller with this property. */
+  overscroll-behavior: contain;
+
   min-width: var(--radix-popover-trigger-width);
   max-height: var(--radix-popover-content-available-height);
   transform-origin: var(--radix-popover-content-transform-origin);
@@ -55,6 +59,15 @@
   scrollbar-color: var(--neutral-a8) transparent;
 }
 
+/* Chromium (the only engine with -webkit-app-region) composites a scroller whose
+   overscroll-behavior is not auto, even when the list fits: 2 layers. There the content above
+   stops the chain. WebKit ignores an ancestor that is not user-scrollable, so it keeps `contain`. */
+@supports (-webkit-app-region: drag) {
+  .kui-ComboboxScrollArea {
+    overscroll-behavior: auto;
+  }
+}
+
 .kui-ComboboxList {
   outline: 0;
 }

package/src/components/context-menu.tsx

@@ -4,11 +4,11 @@
  */
 'use client';
 
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import { VirtualMenu } from './virtual-menu.js';
 import classNames from 'classnames';
 import { ContextMenu as ContextMenuPrimitive, Slot } from 'radix-ui';
+import { useCallbackRef } from 'radix-ui/internal';
 
 import { ScrollArea } from './scroll-area.js';
 import {
@@ -23,7 +23,7 @@ import { ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js'
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
-import { MenuProvider } from './_internal/menu-context.js';
+import { MenuCloseProvider, MenuProvider } from './_internal/menu-context.js';
 import {
   MenuShortcut,
   getMenuAlignOffset,
@@ -36,9 +36,27 @@ import type { GetPropDefTypes, Responsive } from '../props/prop-def.js';
 
 interface ContextMenuRootProps
   extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root> {}
-const ContextMenuRoot: React.FC<ContextMenuRootProps> = (props) => (
-  <ContextMenuPrimitive.Root {...props} />
-);
+const ContextMenuRoot: React.FC<ContextMenuRootProps> = (props) => {
+  const { open: openProp, onOpenChange } = props;
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const open = openProp ?? uncontrolledOpen;
+
+  const handleOpenChangeProp = useCallbackRef(onOpenChange);
+  const handleOpenChange = React.useCallback(
+    (next: boolean) => {
+      setUncontrolledOpen(next);
+      handleOpenChangeProp(next);
+    },
+    [handleOpenChangeProp],
+  );
+  const close = React.useCallback(() => handleOpenChange(false), [handleOpenChange]);
+
+  return (
+    <MenuCloseProvider value={close}>
+      <ContextMenuPrimitive.Root {...props} open={open} onOpenChange={handleOpenChange} />
+    </MenuCloseProvider>
+  );
+};
 ContextMenuRoot.displayName = 'ContextMenu.Root';
 
 type ContextMenuTriggerElement = React.ElementRef<typeof ContextMenuPrimitive.Trigger>;