@womp/kookie-ui 0.23.0 → 0.24.0

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/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>;

package/src/components/dialog.tsx

@@ -12,196 +12,95 @@ import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
 import type { DialogContentOwnProps } from './dialog.props.js';
-import type {
-  ComponentPropsWithout,
-  RemovedProps,
-  ComponentPropsAs,
-} from '../helpers/component-props.js';
+import type { ComponentPropsWithout, RemovedProps, ComponentPropsAs } from '../helpers/component-props.js';
 
 interface DialogRootProps extends ComponentPropsWithout<typeof DialogPrimitive.Root, 'modal'> {}
 const DialogRoot: React.FC<DialogRootProps> = (props) => <DialogPrimitive.Root {...props} modal />;
 DialogRoot.displayName = 'Dialog.Root';
 
 type DialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;
-interface DialogTriggerProps
-  extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}
-const DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <DialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
-      {requireReactElement(children)}
-    </DialogPrimitive.Trigger>
-  ),
-);
+interface DialogTriggerProps extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}
+const DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>(({ children, ...props }, forwardedRef) => (
+  <DialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
+    {requireReactElement(children)}
+  </DialogPrimitive.Trigger>
+));
 DialogTrigger.displayName = 'Dialog.Trigger';
 
 // Split once at module scope. `extractProps` memoises on the identity of the
 // prop def objects it is handed, so rebuilding these per render would recompile
 // them on every render.
-const {
-  align: alignPropDef,
-  ...contentPropDefs
-} = dialogContentPropDefs;
+const { align: alignPropDef, ...contentPropDefs } = dialogContentPropDefs;
 const alignPropDefs = { align: alignPropDef };
 
 type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
-interface DialogContentProps
-  extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,
-    DialogContentOwnProps {
+interface DialogContentProps extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>, DialogContentOwnProps {
   container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>['container'];
 }
-const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
-  ({ align, ...ownProps }, forwardedRef) => {
-    const props = useThemeSizeProps(ownProps, contentPropDefs.size);
-    const { className: alignClassName } = extractProps({ align }, alignPropDefs);
-
-    const {
-      className,
-      forceMount,
-      container,
-      ...contentProps
-    } = extractProps(props, contentPropDefs);
-
-    // Focus management
-    const contentRef = React.useRef<HTMLDivElement>(null);
-    const combinedRef = React.useMemo(
-      () => (node: HTMLDivElement | null) => {
-        contentRef.current = node;
-        if (typeof forwardedRef === 'function') {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
-      [forwardedRef],
-    );
-
-    // Cleanup stuck pointer-events on body
-    useBodyPointerEventsCleanup();
-
-    // Focus trap effect
-    React.useEffect(() => {
-      // SSR safety - only run on client
-      if (typeof window === 'undefined') return;
-
-      const content = contentRef.current;
-      if (!content) return;
-
-      const focusableElements = content.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-      );
-
-      if (focusableElements.length === 0) return;
-
-      const firstElement = focusableElements[0] as HTMLElement;
-      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
-
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key === 'Tab') {
-          if (event.shiftKey) {
-            if (document.activeElement === firstElement) {
-              event.preventDefault();
-              lastElement.focus();
-            }
-          } else {
-            if (document.activeElement === lastElement) {
-              event.preventDefault();
-              firstElement.focus();
-            }
-          }
-        }
-      };
-
-      content.addEventListener('keydown', handleKeyDown);
-
-      // Focus first element when dialog opens
-      firstElement.focus();
-
-      return () => {
-        content.removeEventListener('keydown', handleKeyDown);
-      };
-    }, []);
-
-    return (
-      <DialogPrimitive.Portal container={container} forceMount={forceMount}>
-        <Theme asChild>
-          <DialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-DialogOverlay">
-            <div className="kui-BaseDialogScroll kui-DialogScroll">
-              <div
-                className={`kui-BaseDialogScrollPadding kui-DialogScrollPadding ${alignClassName}`}
-              >
-                <DialogPrimitive.Content
-                  {...contentProps}
-                  ref={combinedRef}
-                  className={classNames('kui-BaseDialogContent', 'kui-DialogContent', className)}
-                  tabIndex={-1}
-                  role="dialog"
-                  aria-modal="true"
-                  onCloseAutoFocus={(event) => {
-                    // Prevent default focus behavior
-                    event.preventDefault();
-                    // Restore pointer-events to body (Radix UI fix for issue #1241)
-                    document.body.style.pointerEvents = '';
-                  }}
-                />
-                {/* ARIA live region for screen reader announcements */}
-                <div
-                  aria-live="polite"
-                  aria-atomic="true"
-                  className="kui-sr-only"
-                  id="dialog-announcement"
-                />
-              </div>
+const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(({ align, ...ownProps }, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, contentPropDefs.size);
+  const { className: alignClassName } = extractProps({ align }, alignPropDefs);
+
+  const { className, forceMount, container, onCloseAutoFocus, ...contentProps } = extractProps(props, contentPropDefs);
+
+  // Cleanup stuck pointer-events on body
+  useBodyPointerEventsCleanup();
+
+  return (
+    <DialogPrimitive.Portal container={container} forceMount={forceMount}>
+      <Theme asChild>
+        <DialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-DialogOverlay">
+          <div className="kui-BaseDialogScroll kui-DialogScroll">
+            <div className={`kui-BaseDialogScrollPadding kui-DialogScrollPadding ${alignClassName}`}>
+              <DialogPrimitive.Content
+                {...contentProps}
+                ref={forwardedRef}
+                className={classNames('kui-BaseDialogContent', 'kui-DialogContent', className)}
+                aria-modal="true"
+                onCloseAutoFocus={(event) => {
+                  // Radix returns focus to the trigger unless the caller prevents it.
+                  onCloseAutoFocus?.(event);
+                  // Restore pointer-events to body (Radix UI fix for issue #1241)
+                  document.body.style.pointerEvents = '';
+                }}
+              />
             </div>
-          </DialogPrimitive.Overlay>
-        </Theme>
-      </DialogPrimitive.Portal>
-    );
-  },
-);
+          </div>
+        </DialogPrimitive.Overlay>
+      </Theme>
+    </DialogPrimitive.Portal>
+  );
+});
 DialogContent.displayName = 'Dialog.Content';
 
 type DialogTitleElement = React.ElementRef<typeof Heading>;
 type DialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
-const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(
-  (props, forwardedRef) => (
-    <DialogPrimitive.Title asChild>
-      <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
-    </DialogPrimitive.Title>
-  ),
-);
+const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>((props, forwardedRef) => (
+  <DialogPrimitive.Title asChild>
+    <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
+  </DialogPrimitive.Title>
+));
 DialogTitle.displayName = 'Dialog.Title';
 
 type DialogDescriptionElement = HTMLParagraphElement;
 type DialogDescriptionProps = ComponentPropsAs<typeof Text, 'p'>;
-const DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>(
-  (props, forwardedRef) => (
-    <DialogPrimitive.Description asChild>
-      <Text as="p" size="3" {...props} asChild={false} ref={forwardedRef} />
-    </DialogPrimitive.Description>
-  ),
-);
+const DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>((props, forwardedRef) => (
+  <DialogPrimitive.Description asChild>
+    <Text as="p" size="3" {...props} asChild={false} ref={forwardedRef} />
+  </DialogPrimitive.Description>
+));
 DialogDescription.displayName = 'Dialog.Description';
 
 type DialogCloseElement = React.ElementRef<typeof DialogPrimitive.Close>;
-interface DialogCloseProps
-  extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}
-const DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <DialogPrimitive.Close {...props} ref={forwardedRef} asChild>
-      {requireReactElement(children)}
-    </DialogPrimitive.Close>
-  ),
-);
+interface DialogCloseProps extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}
+const DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(({ children, ...props }, forwardedRef) => (
+  <DialogPrimitive.Close {...props} ref={forwardedRef} asChild>
+    {requireReactElement(children)}
+  </DialogPrimitive.Close>
+));
 DialogClose.displayName = 'Dialog.Close';
 
-export {
-  DialogRoot as Root,
-  DialogTrigger as Trigger,
-  DialogContent as Content,
-  DialogTitle as Title,
-  DialogDescription as Description,
-  DialogClose as Close,
-};
+export { DialogRoot as Root, DialogTrigger as Trigger, DialogContent as Content, DialogTitle as Title, DialogDescription as Description, DialogClose as Close };
 
 export type {
   DialogRootProps as RootProps,

package/src/components/dropdown-menu.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import { VirtualMenu } from './virtual-menu.js';
 import classNames from 'classnames';
@@ -30,7 +29,7 @@ import {
   useStackEntry,
   useSubContext,
 } from './_internal/dropdown-menu-drill-down.js';
-import { MenuProvider } from './_internal/menu-context.js';
+import { MenuCloseProvider, MenuProvider } from './_internal/menu-context.js';
 import {
   MenuShortcut,
   getMenuAlignOffset,
@@ -66,9 +65,13 @@ const DropdownMenuRoot: React.FC<DropdownMenuRootProps> = (props) => {
     [handleOpenChangeProp],
   );
 
+  const close = React.useCallback(() => handleOpenChange(false), [handleOpenChange]);
+
   return (
     <DropdownMenuOpenContext.Provider value={open}>
-      <DropdownMenuPrimitive.Root {...props} onOpenChange={handleOpenChange} />
+      <MenuCloseProvider value={close}>
+        <DropdownMenuPrimitive.Root {...props} open={open} onOpenChange={handleOpenChange} />
+      </MenuCloseProvider>
     </DropdownMenuOpenContext.Provider>
   );
 };
@@ -338,7 +341,7 @@ const DropdownMenuRadioItem = React.forwardRef<
         className,
       )}
     >
-      {children}
+      <Slot.Slottable>{children}</Slot.Slottable>
       <DropdownMenuPrimitive.ItemIndicator className="kui-BaseMenuItemIndicator kui-DropdownMenuItemIndicator">
         <ThickDotIcon className="kui-BaseMenuItemIndicatorIcon kui-DropdownMenuItemIndicatorIcon" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -379,7 +382,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
         className,
       )}
     >
-      {children}
+      <Slot.Slottable>{children}</Slot.Slottable>
       <DropdownMenuPrimitive.ItemIndicator className="kui-BaseMenuItemIndicator kui-DropdownMenuItemIndicator">
         <ThickCheckIcon className="kui-BaseMenuItemIndicatorIcon kui-DropdownMenuItemIndicatorIcon" />
       </DropdownMenuPrimitive.ItemIndicator>

package/src/components/icons.tsx

@@ -146,4 +146,14 @@ const FileTextIcon = React.forwardRef<IconElement, IconProps>((_props, _forwarde
 });
 FileTextIcon.displayName = 'FileTextIcon';
 
-export { CloseIcon, PaperclipIcon, FileIcon, FileTextIcon };
+/** The tick a button shows in place of its icon while `done`. Drawn on the 24 grid at the icon set's stroke. */
+const TickIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} ref={forwardedRef}>
+      <path d="M5 12.75L9.5 17.25L19 7.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+});
+TickIcon.displayName = 'TickIcon';
+
+export { CloseIcon, PaperclipIcon, FileIcon, FileTextIcon, TickIcon };